- organised file structure for dashboard

src/features/dashboard/components/systemStatus/SystemStatusCard.tsx

@@ -0,0 +1,30 @@
+import { useInfoSocket } from "../../../../app/context/WebSocketContext";
+import Card from "../../../../ui/Card";
+import CardHeader from "../../../../ui/CardHeader";
+import StatusItemCPU from "./StatusItems/StatusItemCPU";
+import StatusItemLocal from "./StatusItems/StatusItemLocal";
+import StatusItemThreads from "./StatusItems/StatusItemThreads";
+import StatusItemUTC from "./StatusItems/StatusItemUTC";
+
+const SystemStatusCard = () => {
+  const { data: stats } = useInfoSocket();
+
+  return (
+    <Card className="p-4">
+      <CardHeader title="System Status" />
+      {stats ? (
+        <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
+          <StatusItemUTC statusInfoItem={stats["system-clock-utc"]} description={"UTC Time"} />
+          <StatusItemLocal statusInfoItem={stats["system-clock-local"]} description={"Local Time"} />
+          <StatusItemCPU statusInfoItem={stats["memory-cpu-status"]} description={"CPU"} />
+          <StatusItemThreads statusInfoItem={stats["thread-count"]} description={"Threads"} />
+        </div>
+      ) : (
+        <span className="text-slate-500">Loading system status…</span>
+      )}
+      <div className="text-sm flex gap-4"></div>
+    </Card>
+  );
+};
+
+export default SystemStatusCard;