- added functionality to push to backend

- improved responsiveness
- added reset functionality

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package.json

@@ -14,9 +14,18 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "^1.141.6",
+    "clsx": "^2.1.1",
+    "country-flag-icons": "^1.6.4",
+    "formik": "^2.4.9",
+    "konva": "^10.0.12",
+    "rc-slider": "^11.1.9",
     "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": {
@@ -25,6 +34,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/config.ts

@@ -0,0 +1 @@
+export const cambase = import.meta.env.VITE_LOCAL_CAMBASE;

src/app/context/CameraSettingsContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import type { CameraSettings, CameraSettingsAction } from "../../utils/types";
+
+type CameraSettingsContextType = {
+  state: CameraSettings;
+  dispatch: (state: CameraSettingsAction) => void;
+};
+export const CameraSettingsContext = createContext<CameraSettingsContextType | null>(null);
+
+export const useCameraSettingsContext = () => {
+  const context = useContext(CameraSettingsContext);
+  if (!context) {
+    throw new Error("useCameraSettingsContext must be used within a CameraSettingsProvider");
+  }
+  return context;
+};

src/app/providers/AppProviders.tsx

@@ -0,0 +1,13 @@
+import { type PropsWithChildren } from "react";
+import { QueryProvider } from "./QueryProvider";
+import CameraSettingsProvider from "./CameraSettingsProvider";
+
+const AppProviders = ({ children }: PropsWithChildren) => {
+  return (
+    <QueryProvider>
+      <CameraSettingsProvider>{children}</CameraSettingsProvider>
+    </QueryProvider>
+  );
+};
+
+export default AppProviders;

src/app/providers/CameraSettingsProvider.tsx

@@ -0,0 +1,60 @@
+import { CameraSettingsContext } from "../context/CameraSettingsContext";
+import { useEffect, useReducer, type ReactNode } from "react";
+import { initialState, cameraSettingsReducer } from "../reducers/cameraSettingsReducer";
+import { useCameraController } from "../../features/setup/hooks/useCameraControlConfig";
+
+const CameraSettingsProvider = ({ children }: { children: ReactNode }) => {
+  const [state, dispatch] = useReducer(cameraSettingsReducer, initialState);
+  const { cameraControllerQuery } = useCameraController();
+
+  useEffect(() => {
+    if (cameraControllerQuery?.data) {
+      const currentCameraControlMode = cameraControllerQuery.data.propOperationMode.value.toLowerCase();
+      const currentAutoMaxGain = cameraControllerQuery.data.propAutoModeMaxGain.value;
+      const currentAutoMinShutter = cameraControllerQuery.data.propAutoModeMinShutter.value;
+      const currentAutoMaxShutter = cameraControllerQuery.data.propAutoModeMaxShutter.value;
+      const currentExposureCompensation = cameraControllerQuery.data.propAutoModeExposureCompensation.value;
+
+      const currentManualFixShutter = cameraControllerQuery.data.propManualModeShutter.value;
+      const currentManualFixGain = cameraControllerQuery.data.propManualModeFixGain.value;
+      const currentManualFixIris = cameraControllerQuery.data.propManualModeFixIris.value;
+
+      const currentShutterPriorityFixShutter = cameraControllerQuery.data.propShutterPriority.value;
+      const currentShutterPriorityMaxGain = cameraControllerQuery.data.propShutterPriorityMaxGain.value;
+      const currentShutterPriorityExposureCompensation =
+        cameraControllerQuery.data.propShutterPriorityExposureCompensation.value;
+
+      console.log({
+        currentShutterPriorityFixShutter,
+        currentShutterPriorityMaxGain,
+        currentShutterPriorityExposureCompensation,
+      });
+      dispatch({
+        type: "SET_CAMERA_CONTROLS",
+        payload: {
+          cameraControlMode: currentCameraControlMode,
+          auto: {
+            maxGain: currentAutoMaxGain,
+            minShutter: currentAutoMinShutter,
+            maxShutter: currentAutoMaxShutter,
+            exposureCompensation: currentExposureCompensation,
+          },
+          manual: {
+            fixShutter: currentManualFixShutter,
+            fixGain: currentManualFixGain,
+            fixIris: currentManualFixIris,
+          },
+          shutterPriority: {
+            fixShutter: currentShutterPriorityFixShutter,
+            maxGain: currentShutterPriorityMaxGain,
+            exposureCompensation: currentShutterPriorityExposureCompensation,
+          },
+        },
+      });
+    }
+  }, [cameraControllerQuery.data]);
+
+  return <CameraSettingsContext.Provider value={{ state, dispatch }}>{children}</CameraSettingsContext.Provider>;
+};
+
+export default CameraSettingsProvider;

src/app/providers/QueryProvider.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "../queryClient";
+
+export function QueryProvider({ children }: PropsWithChildren) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

src/app/queryClient.ts

@@ -0,0 +1,10 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

src/app/reducers/cameraSettingsReducer.ts

@@ -0,0 +1,87 @@
+import type { CameraSettings, CameraSettingsAction } from "../../utils/types";
+
+export const initialState: CameraSettings = {
+  cameraMode: 0,
+  mode: 0,
+  imageSize: { width: 1280, height: 960 },
+  cameraControls: {
+    cameraControlMode: "auto",
+    auto: { minShutter: "1/100", maxShutter: "1/1000", maxGain: "0dB", exposureCompensation: "EC:off" },
+    manual: { fixShutter: "1/100", fixGain: "0dB", fixIris: "F2.0" },
+    shutterPriority: { fixShutter: "1/100", maxGain: "0dB", exposureCompensation: "EC:off" },
+  },
+  regionPainter: {
+    brushSize: 1,
+    paintMode: "painter",
+    paintedCells: new Map(),
+    regions: [
+      { name: "Region 1", brushColour: "#FF0000" },
+      { name: "Region 2", brushColour: "#00FF00" },
+      { name: "Region 3", brushColour: "#0000FF" },
+    ],
+    selectedRegionIndex: 0,
+  },
+};
+
+export const cameraSettingsReducer = (state: CameraSettings, action: CameraSettingsAction) => {
+  switch (action.type) {
+    case "SET_CAMERA_MODE":
+      return {
+        ...state,
+        cameraMode: action.payload,
+      };
+    case "SET_MODE":
+      return {
+        ...state,
+        mode: action.payload,
+      };
+    case "SET_IMAGE_SIZE":
+      return {
+        ...state,
+        imageSize: action.payload,
+      };
+    case "SET_REGION_PAINTMODE":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          paintMode: action.payload,
+        },
+      };
+    case "SET_BRUSH_SIZE":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          brushSize: action.payload,
+        },
+      };
+
+    case "SET_SELECTED_REGION_INDEX":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          selectedRegionIndex: action.payload,
+        },
+      };
+
+    case "SET_CAMERA_CONTROLS":
+      return {
+        ...state,
+        cameraControls: action.payload,
+      };
+
+    case "RESET_REGION_PAINTER":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          paintedCells: new Map(),
+          paintMode: "painter",
+        },
+      };
+    default:
+      return state;
+  }
+};

src/components/CardHeader.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+type CardHeaderProps = {
+  title: string;
+};
+
+const CardHeader = ({ title }: CardHeaderProps) => {
+  return (
+    <div
+      className={clsx(
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
+      )}
+    >
+      <div className="flex flex-row items-center w-full justify-between">
+        <h2 className="flex flex-row text-xl items-center">{title}</h2>
+      </div>
+    </div>
+  );
+};
+
+export default CardHeader;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import clsx from "clsx";
+
+type CardProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Card = ({ children, className }: CardProps) => {
+  return (
+    <div
+      className={clsx(
+        "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

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

@@ -0,0 +1,19 @@
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+
+type SliderComponentProps = {
+  id: string;
+  onChange: (value: number | number[]) => void;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+const SliderComponent = ({ id, onChange, value = 0, min = 0, max = 100, step = 1 }: SliderComponentProps) => {
+  const handleChange = (val: number | number[]) => onChange(val);
+
+  return <Slider id={id} onChange={handleChange} value={value} min={min} max={max} step={step} />;
+};
+
+export default SliderComponent;

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

@@ -0,0 +1,33 @@
+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, totalSightings } = useSightingList();
+  const { state: cameraSettings } = useCameraSettingsContext();
+  const size = cameraSettings.imageSize;
+
+  const mostRecent = sightingList[0];
+
+  return (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
+        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
+        <SightingStack sightings={sightingList} />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-5 items-center">
+        <div className="col-span-1">
+          <PlateRead sighting={mostRecent} />
+        </div>
+        <div className="col-span-2">
+          <SystemOverview totalSightings={totalSightings} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

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,47 @@
+import Card from "../../../components/ui/Card";
+import { useGetStore } from "../hooks/useGetStore";
+
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
+import PlatesProcessed from "./PlatesProcessed";
+import SystemStatusContent from "./SystemStatusContent";
+
+type SystemOverViewProps = {
+  totalSightings: number;
+};
+
+const SystemOverview = ({ totalSightings }: SystemOverViewProps) => {
+  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 (
+    <Card className="p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer ">
+          <SystemStatusContent status={cameraStatus} isError={isError} />
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
+          <h3 className="text-lg">Sightings</h3>
+          <p>{totalSightings}</p>
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
+          <PlatesProcessed platesProcessed={platesProcessed} />
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg 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>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+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/platePatch/NumberPlate.tsx

@@ -0,0 +1,57 @@
+import { GB } from "country-flag-icons/react/3x2";
+import { formatNumberPlate } from "../../../../utils/utils";
+
+type NumberPlateProps = {
+  vrm?: string | undefined;
+  motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+};
+
+const NumberPlate = ({ vrm, motion, size }: NumberPlateProps) => {
+  let options = {
+    plateWidth: "w-[14rem]",
+    textSize: "text-2xl",
+    borderWidth: "border-6",
+  };
+
+  switch (size) {
+    case "xs":
+      options = {
+        plateWidth: "w-[8rem]",
+        textSize: "text-md",
+        borderWidth: "border-4",
+      };
+      break;
+    case "sm":
+      options = {
+        plateWidth: "w-[10rem]",
+        textSize: "text-lg",
+        borderWidth: "border-4",
+      };
+      break;
+    case "lg":
+      options = {
+        plateWidth: "w-[16rem]",
+        textSize: "text-3xl",
+        borderWidth: "border-6",
+      };
+      break;
+  }
+
+  return (
+    <div
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
+        text-black px-6 py-2 text-monospace flex items-center justify-center
+        ${motion ? "bg-yellow-400" : "bg-white"}`}
+    >
+      <div>
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
+          <GB />
+        </div>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default NumberPlate;

src/features/dashboard/components/plateRead/PlateRead.tsx

@@ -0,0 +1,55 @@
+import type { SightingType } from "../../../../utils/types";
+import Card from "../../../../components/ui/Card";
+import CardHeader from "../../../../components/CardHeader";
+
+type PlateReadProps = {
+  sighting: SightingType;
+};
+
+const PlateRead = ({ sighting }: PlateReadProps) => {
+  const vrm = sighting?.vrm;
+  const region = sighting?.laneID;
+  const timestamp = sighting?.timeStamp;
+  const seenCount = sighting?.seenCount;
+  const radarSpeed = sighting?.radarSpeed;
+  const motion = sighting?.motion;
+  const countryCode = sighting?.countryCode;
+  const plateColorUrl = sighting?.plateUrlColour;
+
+  if (!sighting) return <div>No sighting data available.</div>;
+
+  return (
+    <Card className="p-4 w-full">
+      <CardHeader title="Plate Read" />
+      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
+        <dt className="font-semibold text-gray-200">VRM:</dt>
+        <dd>{vrm}</dd>
+        <dt className="font-semibold text-gray-200">Region:</dt>
+        <dd>{region}</dd>
+        <dt className="font-semibold text-gray-200">Timestamp:</dt>
+        <dd>{timestamp}</dd>
+
+        <dt className="font-semibold text-gray-200">Seen Count:</dt>
+        <dd>{seenCount}</dd>
+
+        <dt className="font-semibold text-gray-200">Radar Speed:</dt>
+        <dd>{radarSpeed} mph</dd>
+
+        <dt className="font-semibold text-gray-200">Motion:</dt>
+        <dd>{motion}</dd>
+
+        <dt className="font-semibold text-gray-200">Country Code:</dt>
+        <dd>{countryCode}</dd>
+
+        <dt className="font-semibold text-gray-200">Plate Image:</dt>
+        <dd>
+          <a href={plateColorUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+            View Image
+          </a>
+        </dd>
+      </dl>
+    </Card>
+  );
+};
+
+export default PlateRead;

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

@@ -0,0 +1,38 @@
+import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
+import type { SightingType } from "../../../../utils/types";
+
+import NumberPlate from "../platePatch/NumberPlate";
+
+type SightingItemProps = {
+  sighting: SightingType;
+  onOpenModal: () => void;
+};
+
+const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
+  const motion = sighting.motion.toLowerCase() === "away" ? true : false;
+
+  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"
+        onClick={onOpenModal}
+      >
+        <div>
+          <div>
+            <TimeStampBadge timeStamp={sighting.timeStampMillis} />
+          </div>
+          <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>
+    </>
+  );
+};
+
+export default SightingItem;

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

@@ -0,0 +1,39 @@
+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-[65vh] overflow-y-auto">
+        <CardHeader title="Live Sightings" />
+        <div className="md:h-[65%]">
+          {sightings.map((sighting) => (
+            <SightingItem key={sighting.ref} sighting={sighting} onOpenModal={() => handleOpenModal(sighting)} />
+          ))}
+        </div>
+      </Card>
+      <SightingItemModal
+        isOpen={isSightingModalOpen}
+        close={() => setIsSightingModalOpen(false)}
+        sighting={currentSighting}
+      />
+    </>
+  );
+};
+
+export default SightingStack;

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

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { Text, Group, Rect } from "react-konva";
+
+type VideoButtonProps = {
+  x?: number;
+  y?: number;
+  onClick?: () => void;
+  text?: string;
+};
+
+const VideoButton = ({ x, y, onClick, text }: VideoButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <Group
+      x={x}
+      y={y}
+      onClick={onClick}
+      onMouseEnter={(e) => {
+        setIsHovered(true);
+        const container = e.target.getStage()?.container();
+        if (container) container.style.cursor = "pointer";
+      }}
+      onMouseLeave={(e) => {
+        setIsHovered(false);
+        const container = e.target.getStage()?.container();
+        if (container) container.style.cursor = "default";
+      }}
+    >
+      <Rect
+        width={100}
+        height={35}
+        fill={isHovered ? "#2563eb" : "#3b82f6"}
+        cornerRadius={8}
+        shadowBlur={isHovered ? 10 : 5}
+        shadowOpacity={0.3}
+      />
+      <Text text={text} fontSize={14} fill="white" width={100} height={35} align="center" verticalAlign="middle" />
+    </Group>
+  );
+};
+
+export default VideoButton;

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

@@ -0,0 +1,120 @@
+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";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+
+type VideoFeedProps = {
+  mostRecentSighting: SightingType;
+  isLoading: boolean;
+  size: { width: number; height: number };
+  modeSetting?: number;
+  isModal?: boolean;
+};
+
+const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = false }: VideoFeedProps) => {
+  const { state: cameraSettings, dispatch } = useCameraSettingsContext();
+  const contextMode = cameraSettings.mode;
+  const [localMode, setLocalMode] = useState(0);
+  const mode = isModal ? localMode : contextMode;
+  const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);
+
+  const handleModeChange = (newMode: number) => {
+    if (modeSetting) return;
+
+    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 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="w-[70%] mt-[2%]">
+      <Stage width={size.width} height={size.height} onClick={() => handleModeChange(mode + 1)}>
+        <Layer>
+          {image && (
+            <Image
+              image={image}
+              height={size.height}
+              width={size.width}
+              onMouseEnter={(e) => {
+                const container = e.target.getStage()?.container();
+                if (container) container.style.cursor = "pointer";
+              }}
+              onMouseLeave={(e) => {
+                const container = e.target.getStage()?.container();
+                if (container) container.style.cursor = "default";
+              }}
+              cornerRadius={10}
+            />
+          )}
+        </Layer>
+        {plateRect && mode === 1 && (
+          <Layer>
+            <Rect
+              x={plateRect?.[0] * size.width}
+              y={plateRect?.[1] * size.height}
+              width={plateRect?.[2] * size.width}
+              height={plateRect?.[3] * size.height}
+              stroke="blue"
+              strokeWidth={4}
+              cornerRadius={5}
+            />
+          </Layer>
+        )}
+
+        {plateTrack && mode === 2 && (
+          <Layer>
+            {plateTrack.map((rect, index) => (
+              <Rect
+                key={index}
+                x={rect[0] * size.width}
+                y={rect[1] * size.height}
+                width={rect[2] * size.width}
+                height={rect[3] * size.height}
+                stroke="red"
+                strokeWidth={2}
+                cornerRadius={5}
+              />
+            ))}
+          </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>
+  );
+};
+
+export default VideoFeed;

src/features/dashboard/hooks/useCreateVideoSnapshot.ts

@@ -0,0 +1,27 @@
+import { useRef } from "react";
+import type { SightingType } from "../../../utils/types";
+
+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();
+
+  image.src = snapshotUrl;
+
+  const plateRect = mostRecentSighting?.overviewPlateRect;
+
+  const plateTrack = mostRecentSighting?.plateTrack;
+
+  return { snapshotUrl, latestBitMapRef, image, plateRect, plateTrack };
+};

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/useSightingList.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from "react";
+import { useVideoFeed } from "./useVideoFeed";
+import type { SightingType } from "../../../utils/types";
+
+export const useSightingList = () => {
+  const [sightingList, setSightingList] = useState<SightingType[]>([]);
+  const [totalSightings, setTotalSightings] = useState<number>(0);
+  const { videoFeedQuery } = useVideoFeed();
+  const latestSighting = videoFeedQuery?.data;
+  const lastProcessedRef = useRef<number>(-1);
+  const isLoading = videoFeedQuery?.isPending;
+
+  useEffect(() => {
+    if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setTotalSightings((prev) => (latestSighting.ref! > prev ? latestSighting.ref! : prev));
+
+    if (latestSighting.ref !== lastProcessedRef.current) {
+      lastProcessedRef.current = latestSighting.ref;
+
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setSightingList((prevList) => {
+        if (prevList[0]?.ref === latestSighting.ref) return prevList;
+        const dedupPrev = prevList.filter((s) => s.ref !== latestSighting.ref);
+        return [latestSighting, ...dedupPrev].slice(0, 10);
+      });
+    }
+  }, [latestSighting, latestSighting?.ref]);
+  return { sightingList, isLoading, totalSightings };
+};

src/features/dashboard/hooks/useVideoFeed.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+import { useEffect, useRef } from "react";
+
+const fetchVideoFeed = async (refId: number) => {
+  const response = await fetch(`${cambase}/mergedHistory/sightingSummary?mostRecentRef=${refId}`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useVideoFeed = () => {
+  const currentRefId = useRef<number>(-1);
+
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoFeed"],
+    queryFn: () => fetchVideoFeed(currentRefId.current),
+    refetchInterval: 400,
+    refetchOnWindowFocus: false,
+    retry: false,
+    staleTime: 0,
+  });
+
+  useEffect(() => {
+    if (videoFeedQuery.data?.ref !== -1) {
+      currentRefId.current = videoFeedQuery?.data?.ref;
+    }
+  }, [videoFeedQuery.data]);
+
+  return { videoFeedQuery };
+};

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,389 @@
+import { Formik, Form, Field } from "formik";
+import type { CameraSettings, CameraSettingsAction } from "../../../../utils/types";
+import { useCameraController } from "../../hooks/useCameraControlConfig";
+
+type CameraControlProps = {
+  state: CameraSettings["cameraControls"];
+  dispatch: React.Dispatch<CameraSettingsAction>;
+};
+
+const CameraControls = ({ state, dispatch }: CameraControlProps) => {
+  const { cameraControllerMutation } = useCameraController();
+  console.log(state);
+  const initialValues = {
+    cameraMode: state.cameraControlMode,
+    auto: {
+      minShutter: state.auto.minShutter,
+      maxShutter: state.auto.maxShutter,
+      maxGain: state.auto.maxGain,
+      exposureCompensation: state.auto.exposureCompensation,
+    },
+    manual: {
+      fixShutter: state.manual.fixShutter,
+      fixGain: state.manual.fixGain,
+      fixIris: state.manual.fixIris,
+    },
+    shutterPriority: {
+      fixShutter: state.shutterPriority.fixShutter,
+      maxGain: state.shutterPriority.maxGain,
+      exposureCompensation: state.shutterPriority.exposureCompensation,
+    },
+  };
+
+  const handleSumbit = (values: {
+    cameraMode: string;
+    auto: typeof initialValues.auto;
+    manual: typeof initialValues.manual;
+    shutterPriority: typeof initialValues.shutterPriority;
+  }) => {
+    cameraControllerMutation.mutate({
+      cameraControlMode: values.cameraMode as "auto" | "manual" | "shutter priority",
+      auto: values.auto,
+      manual: values.manual,
+      shutterPriority: values.shutterPriority,
+    });
+    dispatch({
+      type: "SET_CAMERA_CONTROLS",
+      payload: {
+        cameraControlMode: values.cameraMode as "auto" | "manual" | "shutter priority",
+        auto: values.auto,
+        manual: values.manual,
+        shutterPriority: values.shutterPriority,
+      },
+    });
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSumbit} enableReinitialize>
+      {({ values }) => (
+        <Form className="flex flex-col gap-5 border border-gray-500 p-4 rounded-md mt-[2%]">
+          <h2 className="text-2xl mb-2">Controls</h2>
+          <div className="flex flex-row gap-1 md:gap-4">
+            <div>
+              <label
+                htmlFor="auto"
+                className={`p-4 border rounded-lg  mb-2 text-lg
+            ${values.cameraMode === "auto" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                Auto
+                <Field type="radio" id="auto" name="cameraMode" className="sr-only" value="auto" />
+              </label>
+            </div>
+            <div>
+              <label
+                htmlFor="manual"
+                className={`p-4 border rounded-lg  mb-2 text-lg
+            ${values.cameraMode === "manual" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                Manual
+                <Field type="radio" id="manual" name="cameraMode" className="sr-only" value="manual" />
+              </label>
+            </div>
+            <div>
+              <label
+                htmlFor="shutter priority"
+                className={`p-4 border rounded-lg  mb-2 text-lg
+            ${values.cameraMode === "shutter priority" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                Shutter Priority
+                <Field
+                  type="radio"
+                  id="shutter priority"
+                  name="cameraMode"
+                  className="sr-only"
+                  value="shutter priority"
+                />
+              </label>
+            </div>
+          </div>
+          {values.cameraMode === "auto" && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Shutter Speed</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.minShutter" className="text-lg mb-1">
+                      Min Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.minShutter"
+                      name="auto.minShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/100">1/100</option>
+                      <option value="1/120">1/120</option>
+                      <option value="1/250">1/250</option>
+                      <option value="1/500">1/500</option>
+                      <option value="1/1000">1/1000</option>
+                      <option value="1/2000">1/2000</option>
+                      <option value="1/5000">1/5000</option>
+                      <option value="1/10000">1/10000</option>
+                    </Field>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.maxShutter" className="text-lg mb-1">
+                      Max Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.maxShutter"
+                      name="auto.maxShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/500">1/500</option>
+                      <option value="1/1000">1/1000</option>
+                      <option value="1/2000">1/2000</option>
+                      <option value="1/5000">1/5000</option>
+                      <option value="1/10000">1/10000</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Gain</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.maxGain" className="text-lg mb-1">
+                      Max Gain:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.maxGain"
+                      name="auto.maxGain"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="0dB">0dB</option>
+                      <option value="2dB">2dB</option>
+                      <option value="4dB">4dB</option>
+                      <option value="6dB">6dB</option>
+
+                      <option value="10dB">10dB</option>
+                      <option value="12dB">12dB</option>
+                      <option value="16dB">16dB</option>
+                      <option value="18dB">18dB</option>
+                      <option value="20dB">20dB</option>
+                      <option value="24dB">24dB</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Exposure</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.exposureCompensation" className="text-lg mb-1">
+                      Exposure Compensation:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.exposureCompensation"
+                      name="auto.exposureCompensation"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="EC:off">EC:off</option>
+                      <option value="EC:0">EC:0</option>
+                      <option value="EC:1">EC:1</option>
+                      <option value="EC:2">EC:2</option>
+                      <option value="EC:3">EC:3</option>
+                      <option value="EC:4">EC:4</option>
+                      <option value="EC:5">EC:5</option>
+                      <option value="EC:6">EC:6</option>
+                      <option value="EC:7">EC:7</option>
+                      <option value="EC:8">EC:8</option>
+                      <option value="EC:9">EC:9</option>
+                      <option value="EC:10">EC:10</option>
+                      <option value="EC:11">EC:11</option>
+                      <option value="EC:12">EC:12</option>
+                      <option value="EC:13">EC:13</option>
+                      <option value="EC:14">EC:14</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {values.cameraMode === "manual" && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Shutter Speed</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="manual.fixShutter" className="text-lg mb-1">
+                      Fix Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="manual.fixShutter"
+                      name="manual.fixShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/100">1/100</option>
+                      <option value="1/120">1/120</option>
+                      <option value="1/250">1/250</option>
+                      <option value="1/500">1/500</option>
+                      <option value="1/1000">1/1000</option>
+                      <option value="1/2000">1/2000</option>
+                      <option value="1/5000">1/5000</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Gain</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="manual.fixGain" className="text-lg mb-1">
+                      Fix Gain:
+                    </label>
+                    <Field
+                      as="select"
+                      id="manual.fixGain"
+                      name="manual.fixGain"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="0dB">0dB</option>
+                      <option value="2dB">2dB</option>
+                      <option value="4dB">4dB</option>
+                      <option value="6dB">6dB</option>
+                      <option value="8dB">8dB</option>
+                      <option value="10dB">10dB</option>
+                      <option value="12dB">12dB</option>
+                      <option value="16dB">16dB</option>
+                      <option value="18dB">18dB</option>
+                      <option value="20dB">20dB</option>
+                      <option value="24dB">24dB</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Iris</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="manual.fixIris" className="text-lg mb-1">
+                      Fix Iris:
+                    </label>
+                    <Field
+                      as="select"
+                      id="manual.fixIris"
+                      name="manual.fixIris"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="F1.4">F1.4</option>
+                      <option value="F2.0">F2.0</option>
+                      <option value="F2.8">F2.8</option>
+                      <option value="F4.0">F4.0</option>
+                      <option value="F5.6">F5.6</option>
+                      <option value="F8.0">F8.0</option>
+                      <option value="F11.0">F11.0</option>
+                      <option value="F16.0">F16.0</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {values.cameraMode === "shutter priority" && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Shutter Speed</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="shutterPriority.fixShutter" className="text-lg mb-1">
+                      Fix Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="shutterPriority.fixShutter"
+                      name="shutterPriority.fixShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/100">1/100</option>
+                      <option value="1/120">1/120</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Gain</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="shutterPriority.maxGain" className="text-lg mb-1">
+                      Max Gain:
+                    </label>
+                    <Field
+                      as="select"
+                      id="shutterPriority.maxGain"
+                      name="shutterPriority.maxGain"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="0dB">0dB</option>
+                      <option value="2dB">2dB</option>
+                      <option value="4dB">4dB</option>
+                      <option value="6dB">6dB</option>
+                      <option value="10dB">10dB</option>
+                      <option value="12dB">12dB</option>
+                      <option value="16dB">16dB</option>
+                      <option value="18dB">18dB</option>
+                      <option value="20dB">20dB</option>
+                      <option value="24dB">24dB</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Exposure</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="shutterPriority.exposureCompensation" className="text-lg mb-1">
+                      Exposure Compensation:
+                    </label>
+                    <Field
+                      as="select"
+                      id="shutterPriority.exposureCompensation"
+                      name="shutterPriority.exposureCompensation"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="EC:off">EC:off</option>
+                      <option value="EC:0">EC:0</option>
+                      <option value="EC:1">EC:1</option>
+                      <option value="EC:2">EC:2</option>
+                      <option value="EC:3">EC:3</option>
+                      <option value="EC:4">EC:4</option>
+                      <option value="EC:5">EC:5</option>
+                      <option value="EC:6">EC:6</option>
+                      <option value="EC:7">EC:7</option>
+                      <option value="EC:8">EC:8</option>
+                      <option value="EC:9">EC:9</option>
+                      <option value="EC:10">EC:10</option>
+                      <option value="EC:11">EC:11</option>
+                      <option value="EC:12">EC:12</option>
+                      <option value="EC:13">EC:13</option>
+                      <option value="EC:14">EC:14</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <button type="submit" className="p-3 rounded-md bg-green-700 hover:bg-green-900 cursor-pointer">
+            Save Settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default CameraControls;

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

@@ -0,0 +1,44 @@
+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";
+import Region from "../region/Region";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+
+const CameraSetup = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+  const { state, dispatch } = useCameraSettingsContext();
+  return (
+    <Card className="p-4">
+      <Tabs
+        selectedIndex={tabIndex}
+        onSelect={(index) => {
+          dispatch({ type: "SET_CAMERA_MODE", payload: index });
+          setTabIndex(index);
+        }}
+      >
+        <TabList>
+          <Tab>Camera</Tab>
+          <Tab>Target Detection</Tab>
+          <Tab>Crop</Tab>
+          <Tab>Advanced</Tab>
+        </TabList>
+        <TabPanel>
+          <CameraControls state={state.cameraControls} dispatch={dispatch} />
+        </TabPanel>
+        <TabPanel>
+          <Region state={state} />
+        </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,41 @@
+import CardHeader from "../../../../components/CardHeader";
+import Card from "../../../../components/ui/Card";
+import { useSightingList } from "../../../dashboard/hooks/useSightingList";
+
+const PlatePatchSetup = () => {
+  const { sightingList, isLoading } = useSightingList();
+
+  if (isLoading) return <>Loading...</>;
+  return (
+    <Card className="p-4">
+      <CardHeader title="Plates" />
+      <div className="h-120 overflow-auto">
+        <table className="w-full text-left text-sm table-auto border-collapse border border-gray-500/50 rounded-md">
+          <thead className="bg-gray-700/50 text-gray-200 top-0">
+            <tr>
+              <th className="px-4 py-3 font-semibold">VRM</th>
+
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+              <th className="px-4 py-3 font-semibold">Seen</th>
+              <th className="px-4 py-3 font-semibold">Plate</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sightingList?.map((sighting, index) => (
+              <tr key={index} className="border-b border-gray-700/50 hover:bg-gray-700/20">
+                <td className="px-4 py-3 font-mono text-lg">{sighting.vrm}</td>
+                <td className="px-4 py-3 text-center">{sighting.seenCount}</td>
+                <td className="px-4 py-3">{sighting.timeStamp}</td>
+                <td className="px-4 py-3">
+                  <img src={sighting.plateUrlColour} alt="" width={100} height={100} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+};
+
+export default PlatePatchSetup;

src/features/setup/components/region/Region.tsx

@@ -0,0 +1,184 @@
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+import SliderComponent from "../../../../components/ui/SliderComponent";
+import type { CameraSettings } from "../../../../utils/types";
+import { useTargetDetection } from "../../hooks/useTargetDetection";
+
+type RegionProps = {
+  state: CameraSettings;
+};
+
+const Region = ({ state }: RegionProps) => {
+  const { dispatch } = useCameraSettingsContext();
+  const { mutation } = useTargetDetection();
+  const paintMode = state.regionPainter.paintMode;
+  const regions = state.regionPainter.regions;
+  const brushSize = state.regionPainter.brushSize;
+  const paintedCells = state.regionPainter.paintedCells;
+
+  const handleChangePaintMode = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const mode = event.target.value as "painter" | "eraser";
+    dispatch({ type: "SET_REGION_PAINTMODE", payload: mode });
+  };
+
+  const handlePaintMode = (mode: "painter" | "eraser") => dispatch({ type: "SET_REGION_PAINTMODE", payload: mode });
+
+  const handleChangeRegion = (idx: number) => {
+    dispatch({ type: "SET_SELECTED_REGION_INDEX", payload: idx });
+  };
+
+  const handleSaveClick = () => {
+    const paintedRegions = [];
+    const paintedCellsArray = Array.from(paintedCells.entries());
+    const region1 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Region 1");
+    const region2 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Region 2");
+    const region3 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Region 3");
+
+    const region1Data = {
+      id: 1,
+      cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+
+    const region2Data = {
+      id: 2,
+      cells: region2.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+
+    const region3Data = {
+      id: 3,
+      cells: region3.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+
+    if (region1Data.cells.length > 0) {
+      paintedRegions.push(region1Data);
+    }
+
+    if (region2Data.cells.length > 0) {
+      paintedRegions.push(region2Data);
+    }
+
+    if (region3Data.cells.length > 0) {
+      paintedRegions.push(region3Data);
+    }
+    dispatch({ type: "SET_REGION_PAINTMODE", payload: "painter" });
+    mutation.mutate({ regions: paintedRegions });
+  };
+
+  const handleResetClick = () => {
+    paintedCells.clear();
+    dispatch({ type: "SET_REGION_PAINTMODE", payload: "painter" });
+    dispatch({ type: "RESET_REGION_PAINTER" });
+    mutation.mutate({ regions: [] });
+  };
+  return (
+    <div className="flex flex-col gap-4 mt-[2%]">
+      <div className="flex flex-col gap-4 md:flex-row">
+        <div className="border border-gray-600 p-2 rounded-lg w-full">
+          <h2 className="text-2xl mb-2">Tools</h2>
+          <div className="flex flex-col">
+            <label
+              htmlFor="paintMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${paintMode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                type="radio"
+                id="paintMode"
+                name="paintMode"
+                onChange={handleChangePaintMode}
+                checked={paintMode === "painter"}
+                value="painter"
+                className="sr-only"
+              />
+              <span className="text-xl">Paint Mode</span>
+            </label>
+            <label
+              htmlFor="eraseMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${paintMode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                type="radio"
+                id="eraseMode"
+                name="paintMode"
+                onChange={handleChangePaintMode}
+                checked={paintMode === "eraser"}
+                value="eraser"
+                className="sr-only"
+              />
+              <span className="text-xl">Eraser</span>
+            </label>
+
+            <div className="flex flex-col mt-4 border border-gray-600 rounded-lg p-4">
+              <span className="text-lg mb-2">
+                {paintMode === "painter" ? "Brush" : "Eraser"} Size: {brushSize}
+              </span>
+              <SliderComponent
+                id="brushSize"
+                onChange={(value) => dispatch({ type: "SET_BRUSH_SIZE", payload: value as number })}
+                value={brushSize}
+                min={1}
+                max={5}
+                step={1}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="border border-gray-600 p-2 rounded-lg w-full">
+          <h2 className="text-2xl mb-2">Regions (Lanes)</h2>
+          <div>
+            {regions.map((region, idx) => {
+              const inputID = `region-${idx}`;
+              return (
+                <div className="my-2 md:my-4">
+                  <label
+                    htmlFor={inputID}
+                    key={region.name}
+                    className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
+                  ${state.regionPainter.selectedRegionIndex === idx ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
+                  >
+                    <div className="flex flex-row gap-4 items-center">
+                      <input
+                        type="radio"
+                        id={inputID}
+                        checked={state.regionPainter.selectedRegionIndex === idx}
+                        name="region"
+                        className="sr-only"
+                        onChange={() => {
+                          handlePaintMode("painter");
+                          handleChangeRegion(idx);
+                        }}
+                      />
+                      <span className="text-lg">{region.name}</span>
+                      <div className="w-6 h-6 rounded mt-1" style={{ backgroundColor: region.brushColour }}></div>
+                    </div>
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div className="border border-gray-600 rounded-lg p-4 flex flex-col">
+        <h2 className="text-xl">Actions</h2>
+        <div className="flex flex-col justify-between w-full mt-4">
+          <button
+            className="p-2 rounded-lg bg-blue-500 text-white w-[40%] hover:bg-blue-800 cursor-pointer"
+            onClick={handleSaveClick}
+          >
+            Save
+          </button>
+          <button
+            className="p-2 rounded-lg bg-gray-500 text-white w-[40%] mt-2 hover:bg-gray-700 cursor-pointer"
+            onClick={handleResetClick}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Region;

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

@@ -0,0 +1,133 @@
+import { Stage, Layer, Image, Shape } from "react-konva";
+import { useCreateVideoPreviewSnapshot } from "../../hooks/useCreatePreviewImage";
+import { useEffect, useRef, type RefObject } from "react";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+import type { KonvaEventObject } from "konva/lib/Node";
+
+const BACKEND_WIDTH = 640;
+
+const BACKEND_CELL_SIZE = 16;
+
+const rows = 22.5;
+const cols = 40;
+const gap = 0;
+
+const VideoFeedSetup = () => {
+  const { latestBitmapRef, isPreviewLoading } = useCreateVideoPreviewSnapshot();
+
+  const { state, dispatch } = useCameraSettingsContext();
+  const cameraMode = state.cameraMode;
+  const paintedCells = state.regionPainter.paintedCells;
+  const paintMode = state.regionPainter.paintMode;
+  const brushSize = state.regionPainter.brushSize;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const paintLayerRef = useRef<any>(null);
+  const size = state.imageSize;
+  const selectedRegionIndex = state.regionPainter.selectedRegionIndex;
+  const region = state.regionPainter.regions[selectedRegionIndex];
+
+  const currentScale = size.width / BACKEND_WIDTH;
+  const cellSize = BACKEND_CELL_SIZE * currentScale;
+
+  const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
+    if (!bmp || !bmp.current) {
+      return null;
+    }
+    const image = bmp.current;
+    return image;
+  };
+  const image = draw(latestBitmapRef);
+
+  const paintCell = (x: number, y: number, brushSize: number) => {
+    const col = Math.floor(x / (cellSize + gap));
+    const row = Math.floor(y / (cellSize + gap));
+    const raduis = Math.floor(brushSize / 2);
+    if (row < 0 || row >= rows || col < 0 || col >= cols) return;
+
+    const activeRegion = region;
+    if (!activeRegion) return;
+
+    const currentColour = region.brushColour;
+
+    for (let r = row - raduis; r <= row + raduis; r++) {
+      for (let c = col - raduis; c <= col + raduis; c++) {
+        if (r < 0 || r >= rows || c < 0 || c >= cols) continue;
+        const key = `${r}-${c}`;
+        const map = paintedCells;
+        const existing = map.get(key);
+        if (paintMode === "eraser") {
+          if (map.has(key)) {
+            map.delete(key);
+            paintLayerRef.current?.batchDraw();
+          }
+          continue;
+        }
+        if (existing && existing.colour === currentColour) continue;
+        map.set(key, { colour: currentColour, region: activeRegion });
+      }
+    }
+    paintLayerRef.current?.batchDraw();
+  };
+
+  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
+    if (!(cameraMode === 1)) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) paintCell(pos.x, pos.y, brushSize);
+  };
+
+  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (!(cameraMode === 1)) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos && e.evt.buttons === 1) paintCell(pos.x, pos.y, brushSize);
+  };
+
+  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);
+  }, [dispatch]);
+
+  if (isPreviewLoading) return <>Loading Preview...</>;
+
+  return (
+    <div className="mt-[1%]">
+      <Stage width={size.width} height={size.height} onMouseDown={handleStageMouseDown} onMouseMove={handleMouseMove}>
+        <Layer>{image && <Image image={image} height={size.height} width={size.width} cornerRadius={10} />}</Layer>
+        <Layer ref={paintLayerRef} opacity={0.6}>
+          {cameraMode === 1 && (
+            <Shape
+              sceneFunc={(ctx, shape) => {
+                const cells = paintedCells;
+                if (!cells || cells.size === 0 || !paintLayerRef.current) return;
+                cells?.forEach((cell, key) => {
+                  const [rowStr, colStr] = key.split("-");
+                  const row = Number(rowStr);
+                  const col = Number(colStr);
+
+                  const x = col * (cellSize + gap);
+                  const y = row * (cellSize + gap);
+
+                  ctx.beginPath();
+                  ctx.rect(x, y, cellSize, cellSize);
+                  ctx.fillStyle = cell.colour;
+                  ctx.fill();
+                });
+
+                ctx.fillStrokeShape(shape);
+              }}
+              width={size.width}
+              height={size.height}
+            />
+          )}
+        </Layer>
+      </Stage>
+    </div>
+  );
+};
+
+export default VideoFeedSetup;

src/features/setup/hooks/useCameraControlConfig.ts

@@ -0,0 +1,64 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+import type { CameraSettings } from "../../../utils/types";
+
+const fetchCameraControllerConfig = async () => {
+  const response = await fetch(`${cambase}/api/fetch-config?id=Colour--camera-control-widget-config`);
+  if (!response.ok) throw new Error("Cannot reach camera controller endpoint");
+  return response.json();
+};
+
+const updateCameraControllerConfig = async (config: CameraSettings["cameraControls"]) => {
+  if (!config) return;
+  const fields = [];
+  if (config.cameraControlMode === "auto") {
+    fields.push(
+      { property: "propOperationMode", value: "Auto" },
+      { property: "propAutoModeMaxGain", value: config.auto.maxGain },
+      { property: "propAutoModeMinShutter", value: config.auto.minShutter },
+      { property: "propAutoModeMaxShutter", value: config.auto.maxShutter },
+      { property: "propAutoModeExposureCompensation", value: config.auto.exposureCompensation },
+    );
+  } else if (config.cameraControlMode === "manual") {
+    fields.push(
+      { property: "propOperationMode", value: "Manual" },
+      { property: "propManualModeShutter", value: config.manual.fixShutter },
+      { property: "propManualModeFixGain", value: config.manual.fixGain },
+      { property: "propManualModeFixIris", value: config.manual.fixIris },
+    );
+  } else if (config.cameraControlMode === "shutter priority") {
+    fields.push(
+      { property: "propOperationMode", value: "Shutter Priority" },
+      { property: "propShutterPriority", value: config.shutterPriority.fixShutter },
+      { property: "propShutterPriorityMaxGain", value: config.shutterPriority.maxGain },
+      { property: "propShutterPriorityExposureCompensation", value: config.shutterPriority.exposureCompensation },
+    );
+  }
+  const data = {
+    id: "Colour--camera-control-widget-config",
+    fields: fields,
+  };
+  const response = await fetch(`${cambase}/api/update-config`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+  if (!response.ok) throw new Error("Cannot reach camera controller endpoint");
+  return response.json();
+};
+
+export const useCameraController = () => {
+  const cameraControllerQuery = useQuery({
+    queryKey: ["getcameraConfig"],
+    queryFn: fetchCameraControllerConfig,
+  });
+
+  const cameraControllerMutation = useMutation({
+    mutationKey: ["updateCameraConfig"],
+    mutationFn: (config: CameraSettings["cameraControls"]) => updateCameraControllerConfig(config),
+  });
+
+  return { cameraControllerQuery, cameraControllerMutation };
+};

src/features/setup/hooks/useCreatePreviewImage.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+import { useVideoPreview } from "./useVideoPreview";
+import { useCameraSettingsContext } from "../../../app/context/CameraSettingsContext";
+
+export const useCreateVideoPreviewSnapshot = () => {
+  const { state } = useCameraSettingsContext();
+  const { videoPreviewQuery, targetDetectionFeedQuery } = useVideoPreview(state.cameraMode);
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
+  const isPreviewLoading = videoPreviewQuery?.isPending;
+  const isTargetDetectionLoading = targetDetectionFeedQuery?.isPending;
+
+  let snapshot;
+  if (state.cameraMode === 0) {
+    snapshot = videoPreviewQuery?.data;
+  } else if (state.cameraMode === 1) {
+    snapshot = targetDetectionFeedQuery?.data;
+  }
+  const imageBlob = snapshot;
+  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,
+    isPreviewLoading,
+    isTargetDetectionLoading,
+    imageURL: imageBlob ? URL.createObjectURL(imageBlob) : null,
+  };
+};

src/features/setup/hooks/useTargetDetection.ts

@@ -0,0 +1,30 @@
+import { useMutation } from "@tanstack/react-query";
+import type { ColourDetectionPayload } from "../../../utils/types";
+import { cambase } from "../../../app/config";
+
+const sendTargetDetectionData = async (regionData: ColourDetectionPayload) => {
+  const regions = {
+    regions: regionData.regions,
+  };
+  const response = await fetch(`${cambase}/TargetDetectionColour-region-update`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(regions),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to send target detection data");
+  }
+  return response.json();
+};
+
+export const useTargetDetection = () => {
+  const mutation = useMutation({
+    mutationKey: ["colour detection"],
+    mutationFn: (regionData: ColourDetectionPayload) => sendTargetDetectionData(regionData),
+  });
+
+  return { mutation };
+};

src/features/setup/hooks/useVideoPreview.ts

@@ -0,0 +1,35 @@
+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();
+};
+
+const fetchTargetDectionFeed = async () => {
+  const response = await fetch(`${cambase}/TargetDetectionColour-preview`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch target detection feed");
+  }
+  return response.blob();
+};
+
+export const useVideoPreview = (mode: number) => {
+  const videoPreviewQuery = useQuery({
+    queryKey: ["videoPreview"],
+    queryFn: fetchVideoPreview,
+    refetchInterval: 100,
+    enabled: mode === 0,
+  });
+
+  const targetDetectionFeedQuery = useQuery({
+    queryKey: ["targetDetectionFeed"],
+    queryFn: fetchTargetDectionFeed,
+    refetchInterval: 100,
+    enabled: mode === 1,
+  });
+  return { videoPreviewQuery, targetDetectionFeedQuery };
+};

src/main.tsx

@@ -3,12 +3,14 @@ import { createRoot } from "react-dom/client";
 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;
@@ -17,6 +19,8 @@ declare module "@tanstack/react-router" {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <RouterProvider router={router} />
-  </StrictMode>
+    <AppProviders>
+      <RouterProvider router={router} />
+    </AppProviders>
+  </StrictMode>,
 );

src/routes/__root.tsx

@@ -1,6 +1,6 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
-import Header from "../ui/Header";
-import Footer from "../ui/Footer";
+import Header from "../components/ui/Header";
+import Footer from "../components/ui/Footer";
 
 const RootLayout = () => {
   return (

src/routes/index.tsx

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

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

@@ -0,0 +1,155 @@
+export type SightingType = {
+  ref: number;
+  SaFID: string;
+  overviewUrl: string;
+  plateUrlInfrared: string;
+  plateUrlColour: string;
+  vrm: string;
+  vrmSecondary: string;
+  countryCode: string;
+  timeStamp: string;
+  detailsUrl: string;
+  overviewPlateRect?: [number, number, number, number];
+  plateTrack?: [number, number, number, number][];
+  make: string;
+  model: string;
+  color: string;
+  category: string;
+  charHeight: string;
+  seenCount: string;
+  timeStampMillis: number;
+  motion: string;
+  debug: string;
+  srcCam: number;
+  locationName: string;
+  laneID: string;
+  plateSize: string;
+  overviewSize: string;
+  radarSpeed: string;
+  trackSpeed: string;
+  metadata?: Metadata;
+};
+
+export type Metadata = {
+  npedJSON: NpedJSON;
+  "hotlist-matches": HotlistMatches;
+  hotlistMatches: HotlistMatches;
+};
+
+export type HotlistMatches = {
+  Hotlist0: boolean;
+  Hotlist1: boolean;
+  Hotlist2: boolean;
+};
+
+export type NpedJSON = {
+  status_code: number;
+  reason_phrase: string;
+  "NPED CATEGORY": "A" | "B" | "C" | "D";
+  "MOT STATUS": boolean;
+  "TAX STATUS": boolean;
+  vrm: string;
+  "INSURANCE STATUS": string;
+};
+
+export type Region = {
+  name: string;
+  brushColour: string;
+};
+
+export type PaintedCell = {
+  colour: string;
+  region: Region;
+};
+
+export type CameraSettings = {
+  cameraMode: number;
+  mode: number;
+  imageSize: { width: number; height: number };
+  cameraControls: {
+    cameraControlMode: "auto" | "manual" | "shutter priority";
+    auto: {
+      minShutter: string;
+      maxShutter: string;
+      maxGain: string;
+      exposureCompensation: string;
+    };
+    manual: {
+      fixShutter: string;
+      fixGain: string;
+      fixIris: string;
+    };
+    shutterPriority: {
+      fixShutter: string;
+      maxGain: string;
+      exposureCompensation: string;
+    };
+  };
+  regionPainter: {
+    brushSize: number;
+    paintMode: "painter" | "eraser";
+    paintedCells: Map<string, PaintedCell>;
+    regions: Region[];
+    selectedRegionIndex: number;
+  };
+};
+export type CameraSettingsAction =
+  | {
+      type: "SET_MODE";
+      payload: number;
+    }
+  | {
+      type: "SET_IMAGE_SIZE";
+      payload: { width: number; height: number };
+    }
+  | {
+      type: "SET_CAMERA_MODE";
+      payload: number;
+    }
+  | {
+      type: "SET_REGION_PAINTMODE";
+      payload: "painter" | "eraser";
+    }
+  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
+  | {
+      type: "SET_CAMERA_CONTROLS";
+      payload: CameraSettings["cameraControls"];
+    }
+  | {
+      type: "SET_BRUSH_SIZE";
+      payload: number;
+    }
+  | {
+      type: "RESET_REGION_PAINTER";
+    };
+
+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;
+};
+
+export type ColourData = {
+  id: string | number;
+  cells: number[][];
+};
+
+export type ColourDetectionPayload = {
+  regions: ColourData[];
+};

src/utils/utils.ts

@@ -0,0 +1,28 @@
+export const formatNumberPlate = (plate: string) => {
+  const splittedPlate = plate?.split("");
+  splittedPlate?.splice(4, 0, " ");
+  const formattedPlate = splittedPlate?.join("");
+  return formattedPlate;
+};
+
+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 `${diffMins === 1 ? "1 minute" : diffMins + " minutes"} ago`;
+  } else {
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 1) {
+      return "just now";
+    }
+    return `${diffHours === 1 ? "1 hour" : diffHours + " hours"} ago`;
+  }
+};
+
+export function capitalize(s?: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}