first commit

src/features/dashboard/components/DashboardGrid.tsx

@@ -0,0 +1,11 @@
+import SystemStatusCard from "./SystemStatusCard";
+
+const DashboardGrid = () => {
+  return (
+    <div>
+      <SystemStatusCard />
+    </div>
+  );
+};
+
+export default DashboardGrid;

src/features/dashboard/components/SystemStatusCard.tsx

@@ -0,0 +1,26 @@
+import { useInfoSocket } from "../../../hooks/useInfoWebSocket";
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+
+const SystemStatusCard = () => {
+  const { stats } = useInfoSocket();
+
+  return (
+    <Card className="p-4 w-[40%]">
+      <CardHeader title="Overview" />
+      {stats ? (
+        <>
+          <div>UTC: {stats["system-clock-utc"]}</div>
+          <span>Local: {stats["system-clock-local"]}</span>
+          <span>CPU: {stats["memory-cpu-status"]}</span>
+          <span>Threads: {stats["thread-count"]}</span>
+        </>
+      ) : (
+        <span className="text-slate-500">Loading system status…</span>
+      )}
+      <div className="text-sm flex gap-4"></div>
+    </Card>
+  );
+};
+
+export default SystemStatusCard;