src/components/ui/Badge.tsx

@@ -0,0 +1,20 @@
+import { capitalize } from "../../utils/utils";
+
+type BadgeProps = {
+  text: string;
+};
+
+const Badge = ({ text }: BadgeProps) => {
+  const lowerCaseWord = text.toLowerCase();
+  return (
+    <span
+      className={`text-sm font-medium inline-flex items-center px-2 py-0.5 rounded-md me-2 
+        border-2 space-x-2
+         ${text.toLowerCase() === "running" || text.toLowerCase() === "video-playing" || text.toLowerCase() === "camera-controller-ready" ? "bg-green-800 text-green-300 border-green-900" : "bg-red-800 text-red-300 border-red-900"} `}
+    >
+      <span>{capitalize(lowerCaseWord)}</span>
+    </span>
+  );
+};
+
+export default Badge;

src/components/ui/StatusIndicator.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+
+type StatusIndicatorProps = { status: string };
+
+const StatusIndicator = ({ status }: StatusIndicatorProps) => {
+  return <span className={clsx(`flex w-3 h-3 me-2 rounded-full`, status)}></span>;
+};
+
+export default StatusIndicator;

src/features/dashboard/Dashboard.tsx

@@ -3,6 +3,7 @@ import SightingStack from "./components/sightingStack/SightingStack";
 import VideoFeed from "./components/videoFeed/VideoFeed";
 import { useSightingList } from "./hooks/useSightingList";
 import { useCameraSettingsContext } from "../../app/context/CameraSettingsContext";
+import SystemOverview from "./SystemOverview/SystemOverview";
 
 const Dashboard = () => {
   const { sightingList, isLoading } = useSightingList();
@@ -13,15 +14,17 @@ const Dashboard = () => {
 
   return (
     <div>
-      <div>system overview</div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-        <div>
+      <SystemOverview />
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-5 mt-4">
+        <div className="col-span-7">
           <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
           <PlateRead sighting={mostRecent} />
         </div>
+        <div className="col-span-5">
           <SightingStack sightings={sightingList} />
         </div>
       </div>
+    </div>
   );
 };
 

src/features/dashboard/SystemOverview/PlatesProcessed.tsx

@@ -0,0 +1,41 @@
+import type { StoreData } from "../../../utils/types";
+
+type PlatesProcessedProps = {
+  platesProcessed: StoreData;
+};
+
+const PlatesProcessed = ({ platesProcessed }: PlatesProcessedProps) => {
+  const totalPending = platesProcessed?.totalPending || 0;
+  const totalActive = platesProcessed?.totalActive || 0;
+  const totalFailed = platesProcessed?.totalLost || 0;
+  const toastReceived = platesProcessed?.totalReceived || 0;
+
+  return (
+    <>
+      <div className="flex flex-row items-center border-b border-gray-500">
+        <h3 className="text-lg ">Reads</h3>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <h4 className="text-md">Total Active</h4>
+          <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-blue-500">{totalActive}</span>
+        </div>
+        <div>
+          <h4 className="text-md">Total Received</h4>
+          <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-green-500">{toastReceived}</span>
+        </div>
+        <div>
+          <h4 className="text-md">Total Pending</h4>
+          <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-amber-500">{totalPending}</span>
+        </div>
+
+        <div>
+          <h4 className="text-md">Total Failed</h4>
+          <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-red-500">{totalFailed}</span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PlatesProcessed;

src/features/dashboard/SystemOverview/SystemOverview.tsx

@@ -0,0 +1,42 @@
+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">
+          <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;

src/features/dashboard/SystemOverview/SystemStatusContent.tsx

@@ -0,0 +1,62 @@
+import StatusIndicator from "../../../components/ui/StatusIndicator";
+import type { CameraStatus } from "../../../utils/types";
+import { useState } from "react";
+import SystemStatusModal from "./systemStatusModal/SystemStatusModal";
+
+type SystemStatusContentProps = {
+  status?: CameraStatus[];
+  isError: boolean;
+};
+
+const SystemStatusContent = ({ status, isError }: SystemStatusContentProps) => {
+  const [isSystemModalOpen, setIsSystemModalOpen] = useState(false);
+  const isAllCamerasOperational = status?.every((camera) => {
+    const allowedTags = ["RUNNING", "VIDEO-PLAYING", "CAMERA-CONTROLLER-READY"];
+    return camera.tags.every((tag) => allowedTags.includes(tag));
+  });
+  const openModal = () => setIsSystemModalOpen(true);
+
+  return (
+    <>
+      <div className="group w-full" onClick={openModal}>
+        <div className="flex flex-row items-center border-b border-gray-500">
+          {isError ? (
+            <StatusIndicator status="bg-red-500" />
+          ) : isAllCamerasOperational ? (
+            <StatusIndicator status="bg-green-500" />
+          ) : (
+            <StatusIndicator status="bg-yellow-500" />
+          )}
+          <h3 className="text-lg ">System Status</h3>
+        </div>
+
+        {isError ? (
+          <p className="text-red-500">Some systems are experiencing issues.</p>
+        ) : (
+          <>
+            {isAllCamerasOperational ? (
+              <p className="text-green-500">All systems are operational.</p>
+            ) : (
+              <p className="text-yellow-500">Some systems have issues.</p>
+            )}
+            {!isError && !isAllCamerasOperational && (
+              <span className="rounded-md cursor-pointer text-xs text-white opacity-0 shadow-md transition-opacity duration-100 group-hover:opacity-100">
+                Click to view more details.
+              </span>
+            )}
+          </>
+        )}
+      </div>
+
+      <SystemStatusModal
+        title={"System Status Details"}
+        isOpen={isSystemModalOpen}
+        close={() => setIsSystemModalOpen(false)}
+        status={status}
+        isError={isError}
+      />
+    </>
+  );
+};
+
+export default SystemStatusContent;

src/features/dashboard/SystemOverview/systemStatusModal/SystemStatusModal.tsx

@@ -0,0 +1,38 @@
+import CardHeader from "../../../../components/CardHeader";
+import Badge from "../../../../components/ui/Badge";
+import ModalComponent from "../../../../components/ui/ModalComponent";
+import type { CameraStatus } from "../../../../utils/types";
+
+type SystemStatusModalProps = {
+  title: string;
+  isOpen: boolean;
+  close: () => void;
+  status?: CameraStatus[];
+  isError: boolean;
+};
+
+const SystemStatusModal = ({ isOpen, close, status, title }: SystemStatusModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isOpen} close={close}>
+      <CardHeader title={title} />
+      <div className="p-4">
+        <ul>
+          {status?.map((camera) => (
+            <li key={camera.id}>
+              <div className="flex flex-row justify-between border border-gray-500 p-4 rounded-md mb-4">
+                <p>{camera.id}</p>
+                <div>
+                  {camera.tags.map((tag) => (
+                    <Badge key={tag} text={tag} />
+                  ))}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default SystemStatusModal;

src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx

@@ -51,9 +51,7 @@ const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
             </div>
           </div>
         </>
-      ) : (
-        <p className="text-gray-300">No sighting data available.</p>
-      )}
+      ) : null}
     </div>
   );
 };

src/features/dashboard/components/videoFeed/VideoFeed.tsx

@@ -33,7 +33,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal =
 
   useEffect(() => {
     const updateSize = () => {
-      const width = window.innerWidth * 0.48;
+      const width = window.innerWidth * 0.57;
       const height = (width * 2) / 3;
       dispatch({ type: "SET_IMAGE_SIZE", payload: { width, height } });
     };

src/features/dashboard/hooks/useGetStore.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+const fetchStore = async () => {
+  const response = await fetch(`${cambase}/Store0/diagnostics-json`);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+export const useGetStore = () => {
+  const storeQuery = useQuery({
+    queryKey: ["storeData"],
+    queryFn: fetchStore,
+    refetchInterval: 5000,
+  });
+  return { storeQuery };
+};

src/features/dashboard/hooks/useGetSystemHealth.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+
+const fetchSystemHealth = async () => {
+  const response = await fetch(`${cambase}/api/system-health`);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+export const useGetSystemHealth = () => {
+  const systemHealthQuery = useQuery({
+    queryKey: ["systemHealth"],
+    queryFn: fetchSystemHealth,
+    refetchInterval: 60000,
+    refetchOnWindowFocus: false,
+    retry: false,
+    staleTime: 30000,
+  });
+
+  return { systemHealthQuery };
+};

src/utils/types.ts

@@ -65,3 +65,25 @@ export type CameraSettingsAction =
       type: "SET_IMAGE_SIZE";
       payload: { width: number; height: number };
     };
+
+export type CameraStatus = {
+  id: string;
+  groupID: string;
+  tags: string[];
+};
+
+export type SystemHealth = {
+  UptimeHumane: string;
+  StartTimeHumane: string;
+  Status: CameraStatus[];
+};
+
+export type StoreData = {
+  totalPending: number;
+  totalActive: number;
+  totalSent: number;
+  totalReceived: number;
+  totalLost: number;
+  sanityCheck: boolean;
+  sanityCheckFormula: string;
+};

src/utils/utils.ts

@@ -22,3 +22,7 @@ export const timeAgo = (timestampmili: number | null) => {
     return `${diffHours === 1 ? "1 hour" : diffHours + " hours"} ago`;
   }
 };
+
+export function capitalize(s?: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}