- added download button

- added reads for number plate sightings

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

@@ -1,13 +1,23 @@
+import { useEffect } from "react";
 import { useInfoSocket } from "../../../../app/context/WebSocketContext";
 import Card from "../../../../ui/Card";
 import CardHeader from "../../../../ui/CardHeader";
-import StatusItemCPU from "./StatusItems/StatusItemCPU";
+import DownloadLogButton from "./StatusItems/DownloadLogButton";
 import StatusItemLocal from "./StatusItems/StatusItemLocal";
-import StatusItemThreads from "./StatusItems/StatusItemThreads";
 import StatusItemUTC from "./StatusItems/StatusItemUTC";
+import StatusReads from "./StatusItems/StatusReads";
+import { useGetStore } from "../../hooks/useGetStore";
 
 const SystemStatusCard = () => {
   const { data: stats } = useInfoSocket();
+  const { storeQuery } = useGetStore();
+
+  const reads = storeQuery?.data;
+  const isReadsLoading = storeQuery.isFetching;
+
+  useEffect(() => {
+    storeQuery.refetch();
+  }, [reads]);
 
   return (
     <Card className="p-4">
@@ -16,8 +26,8 @@ const SystemStatusCard = () => {
         <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"} />
+          <DownloadLogButton />
+          <StatusReads reads={reads} isReadsLoading={isReadsLoading} />
         </div>
       ) : (
         <span className="text-slate-500">Loading system status…</span>