- Add SystemOverview component and related hooks;

- update Dashboard layout and introduce new UI components

src/features/dashboard/SystemOverview/SystemOverview.tsx

@@ -0,0 +1,43 @@
+import Card from "../../../components/ui/Card";
+import { useGetStore } from "../hooks/useGetStore";
+
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
+import PlatesProcessed from "./PlatesProcessed";
+import SystemStatusContent from "./SystemStatusContent";
+
+const SystemOverview = () => {
+  const { systemHealthQuery } = useGetSystemHealth();
+  const { storeQuery } = useGetStore();
+
+  const platesProcessed = storeQuery?.data || {};
+  const upTime = systemHealthQuery?.data?.UptimeHumane || 0;
+  const startTime = systemHealthQuery?.data?.StartTimeHumane || "";
+  const cameraStatus = systemHealthQuery?.data?.Status || [];
+  const isError = systemHealthQuery?.isError || false;
+
+  if (systemHealthQuery.isLoading) {
+    return <div>Loading system overview...</div>;
+  }
+  return (
+    <div>
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+          <SystemStatusContent status={cameraStatus} isError={isError} />
+        </Card>
+        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+          <h3 className="text-lg">Active Sightings</h3>
+        </Card>
+        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+          <h3 className="text-lg">Reads</h3>
+          <PlatesProcessed platesProcessed={platesProcessed} />
+        </Card>
+        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{upTime}</span>
+          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default SystemOverview;