- Refactored Dashboard layout

- enhanced PlatesProcessed component display

package.json

@@ -18,10 +18,13 @@
     "@tanstack/react-router": "^1.141.6",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.6.4",
+    "formik": "^2.4.9",
     "konva": "^10.0.12",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-konva": "^19.2.1",
+    "react-modal": "^3.16.3",
+    "react-tabs": "^6.1.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
@@ -30,6 +33,7 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
+    "@types/react-modal": "^3.16.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",

src/app/reducers/cameraSettingsReducer.ts

@@ -2,6 +2,7 @@ import type { CameraSettings, CameraSettingsAction } from "../../utils/types";
 
 export const initialState: CameraSettings = {
   mode: 0,
+  imageSize: { width: 1280, height: 960 },
 };
 
 export const cameraSettingsReducer = (state: CameraSettings, action: CameraSettingsAction) => {
@@ -11,6 +12,11 @@ export const cameraSettingsReducer = (state: CameraSettings, action: CameraSetti
         ...state,
         mode: action.payload,
       };
+    case "SET_IMAGE_SIZE":
+      return {
+        ...state,
+        imageSize: action.payload,
+      };
     default:
       return state;
   }

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/ModalComponent.tsx

@@ -0,0 +1,38 @@
+import Modal from "react-modal";
+
+type ModalComponentProps = {
+  isModalOpen: boolean;
+  children: React.ReactNode;
+  close: () => void;
+};
+const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onRequestClose={close}
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
+      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+      closeTimeoutMS={200}
+      style={{
+        overlay: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
+    >
+      <div className="flex justify-end">
+        <button
+          onClick={close}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4 hover:cursor-pointer"
+        >
+          Close
+        </button>
+      </div>
+      {children}
+    </Modal>
+  );
+};
+
+export default ModalComponent;

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/components/ui/TimeStampBadge.tsx

@@ -0,0 +1,13 @@
+import { timeAgo } from "../../utils/utils";
+
+type TimeStampBadgeProps = {
+  timeStamp: number;
+};
+
+const TimeStampBadge = ({ timeStamp }: TimeStampBadgeProps) => {
+  const formattedTimeAgo = timeAgo(Number(timeStamp));
+
+  return <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{formattedTimeAgo}</span>;
+};
+
+export default TimeStampBadge;

src/features/dashboard/Dashboard.tsx

@@ -2,18 +2,28 @@ import PlateRead from "./components/plateRead/PlateRead";
 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();
+  const { state: cameraSettings } = useCameraSettingsContext();
+  const size = cameraSettings.imageSize;
+
   const mostRecent = sightingList[0];
 
   return (
-    <div className="grid gird-cols-1 md:grid-cols-2 gap-2 md:gap-5">
+    <div>
-      <div>
+      <SystemOverview />
-        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-5 mt-4">
-        <PlateRead sighting={mostRecent} />
+        <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>
-      <SightingStack sightings={sightingList} />
     </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/plateRead/PlateRead.tsx

@@ -7,7 +7,6 @@ type PlateReadProps = {
 };
 
 const PlateRead = ({ sighting }: PlateReadProps) => {
-  console.log(sighting);
   const vrm = sighting?.vrm;
   const region = sighting?.laneID;
   const timestamp = sighting?.timeStamp;

src/features/dashboard/components/sightingStack/SightingItem.tsx

@@ -1,28 +1,37 @@
+import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
 import type { SightingType } from "../../../../utils/types";
-import { timeAgo } from "../../../../utils/utils";
+
 import NumberPlate from "../platePatch/NumberPlate";
 
 type SightingItemProps = {
   sighting: SightingType;
+  onOpenModal: () => void;
 };
 
-const SightingItem = ({ sighting }: SightingItemProps) => {
+const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
   const motion = sighting.motion.toLowerCase() === "away" ? true : false;
 
-  const timeStamp = timeAgo(sighting.timeStampMillis);
-
   return (
-    <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">
+    <>
-      <div>
+      <div
+        className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer"
+        onClick={onOpenModal}
+      >
         <div>
-          <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+          <div>
-        </div>
+            <TimeStampBadge timeStamp={sighting.timeStampMillis} />
-        <div className="text-xl">
+          </div>
-          <span className="font-semibold text-gray-200">{sighting.vrm}</span>
+          <div className="text-xl">
+            <span className="font-semibold text-gray-200">{sighting.vrm}</span>
+          </div>
         </div>
+        {window.innerWidth > 768 ? (
+          <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
+        ) : (
+          <NumberPlate vrm={sighting.vrm} motion={motion} size="sm" />
+        )}
       </div>
-      <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
+    </>
-    </div>
   );
 };
 

src/features/dashboard/components/sightingStack/SightingStack.tsx

@@ -1,21 +1,38 @@
+import { useState } from "react";
 import CardHeader from "../../../../components/CardHeader";
 import Card from "../../../../components/ui/Card";
 import type { SightingType } from "../../../../utils/types";
 import SightingItem from "./SightingItem";
+import SightingItemModal from "./sightingItemModal/SightingItemModal";
 
 type SightingStackProps = {
   sightings: SightingType[];
 };
 const SightingStack = ({ sightings }: SightingStackProps) => {
+  const [isSightingModalOpen, setIsSightingModalOpen] = useState(false);
+  const [currentSighting, setCurrentSighting] = useState<SightingType | null>(null);
+  const handleOpenModal = (sighting: SightingType | null) => {
+    if (!sighting) return;
+    setCurrentSighting(sighting);
+    setIsSightingModalOpen(true);
+  };
+
   return (
-    <Card className="p-4 w-full h-full ">
+    <>
-      <CardHeader title="Live Sightings" />
+      <Card className="p-4 w-full h-full">
-      <div className="md:h-[65%]">
+        <CardHeader title="Live Sightings" />
-        {sightings.map((sighting) => (
+        <div className="md:h-[65%]">
-          <SightingItem key={sighting.ref} sighting={sighting} />
+          {sightings.map((sighting) => (
-        ))}
+            <SightingItem key={sighting.ref} sighting={sighting} onOpenModal={() => handleOpenModal(sighting)} />
-      </div>
+          ))}
-    </Card>
+        </div>
+      </Card>
+      <SightingItemModal
+        isOpen={isSightingModalOpen}
+        close={() => setIsSightingModalOpen(false)}
+        sighting={currentSighting}
+      />
+    </>
   );
 };
 

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

@@ -0,0 +1,18 @@
+import ModalComponent from "../../../../../components/ui/ModalComponent";
+import type { SightingType } from "../../../../../utils/types";
+import SightingModalContent from "./SightingModalContent";
+
+type SightingItemModalProps = {
+  isOpen: boolean;
+  close: () => void;
+  sighting: SightingType | null;
+};
+const SightingItemModal = ({ isOpen, close, sighting }: SightingItemModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isOpen} close={close}>
+      <SightingModalContent sighting={sighting} />
+    </ModalComponent>
+  );
+};
+
+export default SightingItemModal;

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

@@ -0,0 +1,59 @@
+import { useCameraSettingsContext } from "../../../../../app/context/CameraSettingsContext";
+import type { SightingType } from "../../../../../utils/types";
+import { timeAgo } from "../../../../../utils/utils";
+import NumberPlate from "../../platePatch/NumberPlate";
+import VideoFeed from "../../videoFeed/VideoFeed";
+
+type SightingModalContentProps = {
+  sighting: SightingType | null;
+};
+
+const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
+  const { state: cameraSettings } = useCameraSettingsContext();
+  const size = cameraSettings.imageSize;
+  const modalImageSize = { width: size.width / 1.5, height: size.height / 1.5 };
+  const timeStamp = timeAgo(sighting?.timeStampMillis ?? null);
+
+  return (
+    <div>
+      {sighting ? (
+        <>
+          <div className="flex flex-row items-center justify-between mb-6 border-b border-gray-600">
+            <h2 className="text-2xl font-bold">Sighting Details</h2>
+            <NumberPlate vrm={sighting.vrm} motion={sighting.motion.toLowerCase() === "away"} size="md" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <VideoFeed mostRecentSighting={sighting} isLoading={false} size={modalImageSize} isModal={true} />
+            </div>
+
+            <div className="space-y-4 border p-4 rounded-lg border-gray-600">
+              <div>
+                <p className="text-md text-gray-300">VRM</p>
+                <p className="text-lg font-semibold">{sighting.vrm}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Seen</p>
+                <p className="text-md">{timeStamp}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Timestamp</p>
+                <p className="text-md">{new Date(sighting.timeStampMillis).toLocaleString()}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Motion</p>
+                <p className="text-lg font-semibold">{sighting.motion}</p>
+              </div>
+              <div>
+                <p className="text-md text-gray-300">Radar Speed</p>
+                <p className="text-lg font-semibold">{sighting.radarSpeed} mph</p>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default SightingModalContent;

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

@@ -1,4 +1,4 @@
-import { Stage, Layer, Image, Rect } from "react-konva";
+import { Stage, Layer, Image, Rect, Text } from "react-konva";
 import type { SightingType } from "../../../../utils/types";
 import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
 import { useEffect, useState } from "react";
@@ -7,26 +7,35 @@ import { useCameraSettingsContext } from "../../../../app/context/CameraSettings
 type VideoFeedProps = {
   mostRecentSighting: SightingType;
   isLoading: boolean;
+  size: { width: number; height: number };
+  modeSetting?: number;
+  isModal?: boolean;
 };
 
-const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
+const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = false }: VideoFeedProps) => {
   const { state: cameraSettings, dispatch } = useCameraSettingsContext();
-
+  const contextMode = cameraSettings.mode;
-  const mode = cameraSettings.mode;
+  const [localMode, setLocalMode] = useState(0);
-  const [size, setSize] = useState<{ width: number; height: number }>({ width: 1280, height: 960 });
+  const mode = isModal ? localMode : contextMode;
-
   const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);
 
   const handleModeChange = (newMode: number) => {
-    if (newMode > 2) dispatch({ type: "SET_MODE", payload: 0 });
+    if (modeSetting) return;
-    else dispatch({ type: "SET_MODE", payload: newMode });
+
+    const nextMode = newMode > 2 ? 0 : newMode;
+
+    if (isModal) {
+      setLocalMode(nextMode);
+    } else {
+      dispatch({ type: "SET_MODE", payload: nextMode });
+    }
   };
 
   useEffect(() => {
     const updateSize = () => {
-      const width = window.innerWidth * 0.48;
+      const width = window.innerWidth * 0.57;
       const height = (width * 2) / 3;
-      setSize({ width, height });
+      dispatch({ type: "SET_IMAGE_SIZE", payload: { width, height } });
     };
     updateSize();
     window.addEventListener("resize", updateSize);
@@ -39,20 +48,22 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
     <div className="w-[70%] mt-[2%]">
       <Stage width={size.width} height={size.height} onClick={() => handleModeChange(mode + 1)}>
         <Layer>
-          <Image
+          {image && (
-            image={image}
+            <Image
-            height={size.height}
+              image={image}
-            width={size.width}
+              height={size.height}
-            onMouseEnter={(e) => {
+              width={size.width}
-              const container = e.target.getStage()?.container();
+              onMouseEnter={(e) => {
-              if (container) container.style.cursor = "pointer";
+                const container = e.target.getStage()?.container();
-            }}
+                if (container) container.style.cursor = "pointer";
-            onMouseLeave={(e) => {
+              }}
-              const container = e.target.getStage()?.container();
+              onMouseLeave={(e) => {
-              if (container) container.style.cursor = "default";
+                const container = e.target.getStage()?.container();
-            }}
+                if (container) container.style.cursor = "default";
-            cornerRadius={10}
+              }}
-          />
+              cornerRadius={10}
+            />
+          )}
         </Layer>
         {plateRect && mode === 1 && (
           <Layer>
@@ -84,6 +95,23 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
             ))}
           </Layer>
         )}
+        <Layer>
+          <Rect
+            x={5}
+            y={0.955 * size.height}
+            width={size.width * 0.35}
+            height={30}
+            fill="rgba(255, 255, 255, 0.45)"
+            cornerRadius={5}
+          />
+          <Text
+            text={`Overlay Mode: ${mode === 0 ? "None" : mode === 1 ? "Plate Highlight" : "Plate Track"}`}
+            x={10}
+            y={0.96 * size.height}
+            fontSize={16}
+            fill="#000000"
+          />
+        </Layer>
       </Stage>
     </div>
   );

src/features/dashboard/hooks/useCreateVideoSnapshot.ts

@@ -1,8 +1,18 @@
 import { useRef } from "react";
 import type { SightingType } from "../../../utils/types";
 
-export const useCreateVideoSnapshot = (mostRecentSighting: SightingType) => {
+export const useCreateVideoSnapshot = (mostRecentSighting: SightingType | null) => {
   const latestBitMapRef = useRef<ImageBitmap | null>(null);
+  if (!mostRecentSighting) {
+    return {
+      snapshotUrl: null,
+      latestBitMapRef: null,
+      image: null,
+      plateRect: null,
+      plateTrack: null,
+    };
+  }
+
   const snapshotUrl = mostRecentSighting?.overviewUrl;
 
   const image = new Image();

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/features/dashboard/hooks/useVideoFeed.ts

@@ -16,7 +16,7 @@ export const useVideoFeed = () => {
   const videoFeedQuery = useQuery({
     queryKey: ["videoFeed"],
     queryFn: () => fetchVideoFeed(currentRefId.current),
-    refetchInterval: 1000,
+    refetchInterval: 400,
     refetchOnWindowFocus: false,
     retry: false,
     staleTime: 0,

src/features/setup/Setup.tsx

@@ -0,0 +1,17 @@
+import CameraSetup from "./components/cameraSetup/CameraSetup";
+import PlatePatchSetup from "./components/platePatch/PlatePatchSetup";
+import VideoFeedSetup from "./components/videofeed/VideoFeedSetup";
+
+const Setup = () => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
+      <div>
+        <VideoFeedSetup />
+        <PlatePatchSetup />
+      </div>
+      <CameraSetup />
+    </div>
+  );
+};
+
+export default Setup;

src/features/setup/components/cameraControls/CameraControls.tsx

@@ -0,0 +1,25 @@
+import { Formik, Form } from "formik";
+
+type CameraControlProps = {
+  tabIndex: number;
+};
+
+const CameraControls = ({ tabIndex }: CameraControlProps) => {
+  const initialValues = {};
+
+  console.log(tabIndex);
+  const handleSumbit = (values: { test?: string }) => {
+    console.log(values);
+  };
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSumbit}>
+      <Form>
+        <button type="submit" className="p-3 bg-green-700 hover:bg-green-900 rounded-md">
+          Save Settings
+        </button>
+      </Form>
+    </Formik>
+  );
+};
+
+export default CameraControls;

src/features/setup/components/cameraSetup/CameraSetup.tsx

@@ -0,0 +1,36 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Card from "../../../../components/ui/Card";
+import CameraControls from "../cameraControls/CameraControls";
+import { useState } from "react";
+
+const CameraSetup = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+  console.log(tabIndex);
+  return (
+    <Card className="p-4">
+      <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
+        <TabList>
+          <Tab>Camera</Tab>
+          <Tab>Regions</Tab>
+          <Tab>Crop</Tab>
+          <Tab>Advanced</Tab>
+        </TabList>
+        <TabPanel>
+          <CameraControls tabIndex={tabIndex} />
+        </TabPanel>
+        <TabPanel>
+          <div>Regions</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Crop</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Advanced</div>
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default CameraSetup;

src/features/setup/components/platePatch/PlateItem.tsx

@@ -0,0 +1,12 @@
+import type { SightingType } from "../../../../utils/types";
+
+type PlateItemProps = {
+  sighting: SightingType;
+};
+
+const PlateItem = ({ sighting }: PlateItemProps) => {
+  console.log(sighting);
+  return <div>PlateItem</div>;
+};
+
+export default PlateItem;

src/features/setup/components/platePatch/PlatePatchSetup.tsx

@@ -0,0 +1,34 @@
+import Card from "../../../../components/ui/Card";
+import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
+import NumberPlate from "../../../dashboard/components/platePatch/NumberPlate";
+import { useSightingList } from "../../../dashboard/hooks/useSightingList";
+
+const PlatePatchSetup = () => {
+  const { sightingList, isLoading } = useSightingList();
+  const firstFourSightings = sightingList?.slice(0, 4);
+
+  if (isLoading) return <>Loading...</>;
+
+  return (
+    <Card className="p-4">
+      <ul>
+        {firstFourSightings?.map((sighting) => (
+          <li key={sighting.ref}>
+            <div className="flex flex-col gap-2 mb-2 border border-gray-600 p-2 rounded-lg hover:cursor-pointer hover:bg-[#233241]">
+              <div className="">
+                <TimeStampBadge timeStamp={sighting.timeStampMillis} />
+              </div>
+              <p className="font-semibold text-gray-200">{sighting.vrm}</p>
+              <div className="flex items-center gap-4">
+                <img src={sighting.plateUrlColour} alt="" width={100} height={100} />
+                <NumberPlate vrm={sighting.vrm} size="sm" motion={sighting.motion.toLowerCase() === "away"} />
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+};
+
+export default PlatePatchSetup;

src/features/setup/components/videofeed/VideoFeedSetup.tsx

@@ -0,0 +1,41 @@
+import { Stage, Layer, Image } from "react-konva";
+import { useCreateVideoPreviewSnapshot } from "../../hooks/useCreatePreviewImage";
+import { useEffect, type RefObject } from "react";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+
+const VideoFeedSetup = () => {
+  const { latestBitmapRef, isLoading } = useCreateVideoPreviewSnapshot();
+  const { state, dispatch } = useCameraSettingsContext();
+  const size = state.imageSize;
+
+  const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
+    if (!bmp || !bmp.current) {
+      return null;
+    }
+    const image = bmp.current;
+    return image;
+  };
+  const image = draw(latestBitmapRef);
+
+  useEffect(() => {
+    const updateSize = () => {
+      const width = window.innerWidth * 0.48;
+      const height = (width * 2) / 3;
+      dispatch({ type: "SET_IMAGE_SIZE", payload: { width, height } });
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+
+  if (isLoading) return <>Loading...</>;
+  return (
+    <div className="mt-[1%]">
+      <Stage width={size.width} height={size.height}>
+        <Layer>{image && <Image image={image} height={size.height} width={size.width} cornerRadius={10} />}</Layer>
+      </Stage>
+    </div>
+  );
+};
+
+export default VideoFeedSetup;

src/features/setup/hooks/useCreatePreviewImage.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import { useVideoPreview } from "./useVideoPreview";
+
+export const useCreateVideoPreviewSnapshot = () => {
+  const { videoPreviewQuery } = useVideoPreview();
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
+  const isLoading = videoPreviewQuery?.isPending;
+  const imageBlob = videoPreviewQuery?.data;
+
+  useEffect(() => {
+    async function createImageBitmapFromBlob() {
+      if (!imageBlob) return;
+
+      try {
+        const bitmap = await createImageBitmap(imageBlob);
+        latestBitmapRef.current = bitmap;
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    createImageBitmapFromBlob();
+  }, [imageBlob]);
+
+  return { latestBitmapRef, isLoading, imageURL: imageBlob ? URL.createObjectURL(imageBlob) : null };
+};

src/features/setup/hooks/useVideoPreview.ts

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+
+const fetchVideoPreview = async () => {
+  const response = await fetch(`${cambase}/Colour-preview`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch video preview");
+  }
+  return response.blob();
+};
+
+export const useVideoPreview = () => {
+  const videoPreviewQuery = useQuery({
+    queryKey: ["videoPreview"],
+    queryFn: fetchVideoPreview,
+    refetchInterval: 100,
+  });
+  return { videoPreviewQuery };
+};

src/main.tsx

@@ -4,12 +4,13 @@ import "./index.css";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
 import AppProviders from "./app/providers/AppProviders.tsx";
+import Modal from "react-modal";
 
 const router = createRouter({
   routeTree,
   basepath: "/aiq-lite",
 });
-
+Modal.setAppElement("#root");
 declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;

src/routes/setup.tsx

@@ -1,9 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import Setup from "../features/setup/Setup";
 
 export const Route = createFileRoute("/setup")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return <div className="">Hello "/setup"!</div>;
+  return <Setup />;
 }

src/utils/types.ts

@@ -54,8 +54,36 @@ export type NpedJSON = {
 
 export type CameraSettings = {
   mode: number;
+  imageSize: { width: number; height: number };
 };
-export type CameraSettingsAction = {
+export type CameraSettingsAction =
-  type: "SET_MODE";
+  | {
-  payload: number;
+      type: "SET_MODE";
+      payload: number;
+    }
+  | {
+      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

@@ -5,12 +5,13 @@ export const formatNumberPlate = (plate: string) => {
   return formattedPlate;
 };
 
-export const timeAgo = (timestampmili: number) => {
+export const timeAgo = (timestampmili: number | null) => {
+  if (timestampmili === null) return "unknown";
   const diffMs = Date.now() - new Date(timestampmili).getTime();
   const diffMins = Math.floor(diffMs / 60000);
   if (diffMins < 60) {
     if (diffMins < 1) {
-      return "just now";
+      return "Just now";
     }
     return `${diffMins === 1 ? "1 minute" : diffMins + " minutes"} ago`;
   } else {
@@ -21,3 +22,7 @@ export const timeAgo = (timestampmili: number) => {
     return `${diffHours === 1 ? "1 hour" : diffHours + " hours"} ago`;
   }
 };
+
+export function capitalize(s?: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}