Merge pull request 'Implemented brush size feature in camera feed settings' (#32 ) from feature/brushsize into develop

Reviewed-on: #32
Implemented brush size feature in camera feed settings
2026-01-13 16:10:32 +00:00 · 2026-01-13 16:10:05 +00:00 · 2026-01-12 15:13:14 +00:00 · 2026-01-12 15:10:40 +00:00 · 2025-12-23 15:00:09 +00:00 · 2025-12-23 14:58:27 +00:00
96 changed files with 4555 additions and 309 deletions
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MAV | BayiQ</title>
+    <title>BayIQ</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "bayiq-ui",
  "private": true,
-  "version": "0.0.0",
+  "version": "1.0.6",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -19,13 +19,17 @@
    "@tanstack/react-router": "^1.136.18",
    "@tanstack/react-router-devtools": "^1.136.18",
    "clsx": "^2.1.1",
    "formik": "^2.4.9",
    "konva": "^10.0.11",
    "rc-slider": "^11.1.9",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-konva": "^19.2.0",
    "react-modal": "^3.16.3",
    "react-tabs": "^6.1.0",
    "react-use-websocket": "3.0.0",
-    "sonner": "^2.0.7"
+    "sonner": "^2.0.7",
    "use-debounce": "^10.0.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
@@ -34,6 +38,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",
    "autoprefixer": "^10.4.22",
    "eslint": "^9.39.1",
--- a/public/MAV-Blue.svg
+++ b/public/MAV-Blue.svg
@@ -0,0 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.27 52.63">
  <defs>
    <style>
      .cls-1 {
        fill: #20456f;
      }
    </style>
  </defs>
  <g id="Layer_2-2" data-name="Layer_2">
    <g>
      <g id="Layer_1-2">
        <path class="cls-1" d="M150.57,0h-40.57c-7.53,0-13.64,6.11-13.64,13.64v38.99h13.64v-13.68h40.57v13.68h13.64V13.64c0-7.53-6.11-13.64-13.64-13.64ZM110,28.55v-12.59c0-1.72,1.39-3.11,3.11-3.11h34.34c1.72,0,3.11,1.39,3.11,3.11v12.59h-40.57,0ZM88.45,13.64v38.99h-13.64V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.5c-1.72,0-3.11,1.39-3.11,3.11v36.67h-13.73V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.49c-1.72,0-3.11,1.39-3.11,3.11v36.67H0V13.64C0,6.11,6.11,0,13.64,0h23.55c2.72,0,5.18,1.05,7.03,2.76,1.85-1.71,4.32-2.76,7.03-2.76h23.55c7.53,0,13.64,6.11,13.64,13.64h.01ZM193.88,52.63c-1.19,0-2.28-.68-2.8-1.75L166.25,0h13.16c1.19,0,2.28.68,2.8,1.75,0,0,12.25,25.11,16.55,33.92,4.3-8.81,16.55-33.92,16.55-33.92.53-1.07,1.61-1.75,2.8-1.75h13.16l-24.83,50.88c-.52,1.07-1.61,1.75-2.8,1.75h-9.78.02Z"/>
      </g>
      <path class="cls-1" d="M222.79,48.39c0-2.36,1.9-4.24,4.24-4.24s4.24,1.88,4.24,4.24-1.88,4.24-4.24,4.24-4.24-1.9-4.24-4.24ZM223.45,48.39c0,1.96,1.6,3.58,3.58,3.58s3.56-1.62,3.56-3.58-1.58-3.56-3.56-3.56-3.58,1.56-3.58,3.56ZM228.17,50.83l-1.26-1.92h-.8v1.92h-.72v-4.86h1.98c.9,0,1.62.58,1.62,1.48,0,1.08-.96,1.44-1.24,1.44l1.3,1.94h-.88ZM226.11,46.57v1.72h1.26c.5,0,.88-.34.88-.84,0-.54-.38-.88-.88-.88h-1.26Z"/>
    </g>
  </g>
 </svg>
--- a/src/app/config/cameraConfig.ts
+++ b/src/app/config/cameraConfig.ts
@@ -0,0 +1,12 @@
 // Camera configuration - add more cameras here as needed
 export const CAMERA_IDS = ["A", "B", "C"] as const;
 export type CameraID = (typeof CAMERA_IDS)[number];
 export const DEFAULT_REGIONS = [
  { name: "Bay 1", brushColour: "#ff0000" },
  { name: "Bay 2", brushColour: "#00ff00" },
  { name: "Bay 3", brushColour: "#0400ff" },
  { name: "Bay 4", brushColour: "#ffff00" },
  { name: "Bay 5", brushColour: "#fc35db" },
 ];
--- a/src/app/config/wsconfig.ts
+++ b/src/app/config/wsconfig.ts
@@ -1,5 +1,10 @@
 import { CAMBASE_WS } from "../../utils/config";
 export const wsConfig = {
-  infoBar: "ws://100.115.148.59/websocket-infobar",
+  infoBar: `${CAMBASE_WS}/websocket-infobar`,
  cameraFeedA: `${CAMBASE_WS}/websocket-CameraA-live-video`,
  cameraFeedB: `${CAMBASE_WS}/websocket-CameraB-live-video`,
  cameraFeedC: `${CAMBASE_WS}/websocket-CameraC-live-video`,
 };
 export type SocketKey = keyof typeof wsConfig;
--- a/src/app/context/CameraFeedContext.ts
+++ b/src/app/context/CameraFeedContext.ts
@@ -0,0 +1,16 @@
 import { createContext, useContext } from "react";
 import type { CameraFeedAction, CameraFeedState } from "../../types/types";
 type CameraFeedContextType = {
  state: CameraFeedState;
  //   check and refactor
  dispatch: (state: CameraFeedAction) => void;
 };
 export const CameraFeedContext = createContext<CameraFeedContextType | null>(null);
 export const useCameraFeedContext = () => {
  const ctx = useContext(CameraFeedContext);
  if (!ctx) throw new Error("useCameraFeedContext must be used inside <CameraFeedContext.Provider>");
  return ctx;
 };
--- a/src/app/context/WebSocketContext.ts
+++ b/src/app/context/WebSocketContext.ts
@@ -1,15 +1,23 @@
 import { createContext, useContext } from "react";
 import { ReadyState } from "react-use-websocket";
-import type { InfoBarData } from "../../types/types";
+import type { CameraZoomData, InfoBarData } from "../../types/types";
 type InfoSocketState = {
  data: InfoBarData | null;
  readyState: ReadyState;
  sendJson: (msg: unknown) => void;
  send?: (msg: string) => void;
 };
 type CameraSocketState = {
  data: CameraZoomData | null;
  readyState: ReadyState;
  send: (msg: string) => void;
 };
 export type WebSocketConextValue = {
  info: InfoSocketState;
  cameraFeed: CameraSocketState;
 };
 export const WebsocketContext = createContext<WebSocketConextValue | null>(null);
@@ -21,3 +29,4 @@ const useWebSocketContext = () => {
 };
 export const useInfoSocket = () => useWebSocketContext().info;
 export const useCameraFeedSocket = () => useWebSocketContext().cameraFeed;
--- a/src/app/providers/AppProviders.tsx
+++ b/src/app/providers/AppProviders.tsx
@@ -1,11 +1,14 @@
 import type { PropsWithChildren } from "react";
 import { QueryProvider } from "./QueryProviders";
 import { WebSocketProvider } from "./WebSocketProvider";
 import { CameraFeedProvider } from "./CameraFeedProvider";
 export const AppProviders = ({ children }: PropsWithChildren) => {
  return (
    <QueryProvider>
-      <WebSocketProvider>{children}</WebSocketProvider>
+      <CameraFeedProvider>
        <WebSocketProvider>{children}</WebSocketProvider>
      </CameraFeedProvider>
    </QueryProvider>
  );
 };
--- a/src/app/providers/CameraFeedProvider.tsx
+++ b/src/app/providers/CameraFeedProvider.tsx
@@ -0,0 +1,46 @@
 import { useEffect, useReducer, type ReactNode } from "react";
 import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
 import { useBlackBoard } from "../../hooks/useBlackBoard";
 import type { CameraFeedState } from "../../types/types";
 import { CAMERA_IDS } from "../config/cameraConfig";
 import CameraZoomFetcher from "./CameraZoomFetcher";
 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
  const { blackboardMutation } = useBlackBoard();
  const [state, dispatch] = useReducer(reducer, initialState);
  useEffect(() => {
    const fetchBlackBoardData = async () => {
      const result = await blackboardMutation.mutateAsync({
        operation: "VIEW",
        path: "cameraFeed",
      });
      if (!result?.result || typeof result.result === "string") return;
      const cameraFeedData: CameraFeedState = result.result;
      const recontructedState = {
        ...cameraFeedData,
        paintedCells: CAMERA_IDS.reduce(
          (acc, id) => {
            acc[id] = new Map(cameraFeedData.paintedCells[id]);
            return acc;
          },
          {} as typeof cameraFeedData.paintedCells,
        ),
      };
      dispatch({ type: "SET_CAMERA_FEED_DATA", cameraState: recontructedState });
    };
    fetchBlackBoardData();
  }, []);
  return (
    <CameraFeedContext.Provider value={{ state, dispatch }}>
      {CAMERA_IDS.map((cameraId) => (
        <CameraZoomFetcher key={cameraId} cameraId={cameraId} dispatch={dispatch} />
      ))}
      {children}
    </CameraFeedContext.Provider>
  );
 };
--- a/src/app/providers/CameraZoomFetcher.tsx
+++ b/src/app/providers/CameraZoomFetcher.tsx
@@ -0,0 +1,38 @@
 import { useEffect } from "react";
 import { useCameraZoom } from "../../features/cameras/hooks/useCameraZoom";
 import type { CameraFeedAction } from "../../types/types";
 import type { CameraID } from "../config/cameraConfig";
 type CameraZoomFetcherProps = {
  cameraId: CameraID;
  dispatch: (action: CameraFeedAction) => void;
 };
 const CameraZoomFetcher = ({ cameraId, dispatch }: CameraZoomFetcherProps) => {
  const { cameraZoomQuery } = useCameraZoom(cameraId);
  useEffect(() => {
    const fetchZoomLevel = async () => {
      const result = await cameraZoomQuery.refetch();
      if (result?.data) {
        const currentZoomLevel = result?.data["propPhysCurrent"].value;
        const minLevel = result?.data["propPhysMin"].value;
        const maxLevel = result?.data["propPhysMax"].value;
        const normalizedZoomLevel = ((currentZoomLevel - minLevel) / (maxLevel - minLevel)).toFixed(2);
        dispatch({
          type: "SET_ZOOM_LEVEL",
          payload: { cameraFeedID: cameraId, zoomLevel: parseFloat(normalizedZoomLevel) },
        });
      }
    };
    fetchZoomLevel();
  }, [cameraId]);
  return null;
 };
 export default CameraZoomFetcher;
--- a/src/app/providers/WebSocketProvider.tsx
+++ b/src/app/providers/WebSocketProvider.tsx
@@ -2,15 +2,29 @@ import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocketContext";
 import useWebSocket from "react-use-websocket";
 import { wsConfig } from "../config/wsconfig";
-import type { InfoBarData } from "../../types/types";
+import type { CameraZoomData, InfoBarData } from "../../types/types";
 import { CAMERA_IDS } from "../config/cameraConfig";
 import { CAMBASE_WS } from "../../utils/config";
 import { useCameraFeedContext } from "../context/CameraFeedContext";
 type WebSocketProviderProps = {
  children: ReactNode;
 };
 export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
  const { state } = useCameraFeedContext();
  const [systemData, setSystemData] = useState<InfoBarData | null>(null);
  const [socketData, setSocketData] = useState<CameraZoomData | null>(null);
  const infoSocket = useWebSocket(wsConfig.infoBar, { share: true, shouldReconnect: () => true });
  const sockets = CAMERA_IDS.reduce(
    (acc, id) => {
      acc[id] = `${CAMBASE_WS}/websocket-Camera${id}-live-video`;
      return acc;
    },
    {} as Record<string, string>,
  );
  const cameraFeedID = state.cameraFeedID;
  const cameraFeed = useWebSocket(sockets[cameraFeedID], { share: true, shouldReconnect: () => true });
  useEffect(() => {
    async function parseData() {
@@ -19,9 +33,15 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
        const data = JSON.parse(text);
        setSystemData(data);
      }
      if (cameraFeed.lastMessage) {
        const message = cameraFeed.lastMessage;
        const data = await message?.data.text();
        const parsedData: CameraZoomData = JSON.parse(data || "");
        setSocketData(parsedData);
      }
    }
    parseData();
-  }, [infoSocket.lastMessage]);
+  }, [cameraFeed.lastMessage, infoSocket.lastMessage]);
  const value = useMemo<WebSocketConextValue>(
    () => ({
@@ -30,8 +50,21 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
        readyState: infoSocket.readyState,
        sendJson: infoSocket.sendJsonMessage,
      },
      cameraFeed: {
        data: socketData,
        readyState: cameraFeed.readyState,
        send: cameraFeed.sendMessage,
      },
    }),
-    [infoSocket.readyState, infoSocket.sendJsonMessage, systemData],
+    [
      cameraFeed.readyState,
      cameraFeed.sendMessage,
      infoSocket.readyState,
      infoSocket.sendJsonMessage,
      socketData,
      systemData,
    ],
  );
  return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
--- a/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -0,0 +1,123 @@
 import type { CameraFeedAction, CameraFeedState, PaintedCell } from "../../types/types";
 import { CAMERA_IDS, DEFAULT_REGIONS, type CameraID } from "../config/cameraConfig";
 export const initialState: CameraFeedState = {
  cameraFeedID: CAMERA_IDS[0],
  brushSize: 1,
  paintedCells: CAMERA_IDS.reduce(
    (acc, id) => {
      acc[id] = new Map<string, PaintedCell>();
      return acc;
    },
    {} as Record<string, Map<string, PaintedCell>>,
  ),
  regionsByCamera: CAMERA_IDS.reduce(
    (acc, id) => {
      acc[id] = DEFAULT_REGIONS;
      return acc;
    },
    {} as Record<string, { name: string; brushColour: string }[]>,
  ),
  selectedRegionIndex: 0,
  modeByCamera: CAMERA_IDS.reduce(
    (acc, id) => {
      acc[id] = "painter";
      return acc;
    },
    {} as Record<CameraID, string>,
  ),
  zoomLevel: CAMERA_IDS.reduce(
    (acc, id) => {
      acc[id] = 0;
      return acc;
    },
    {} as Record<CameraID, number>,
  ),
 };
 export function reducer(state: CameraFeedState, action: CameraFeedAction) {
  switch (action.type) {
    case "SET_CAMERA_FEED":
      return {
        ...state,
        cameraFeedID: action.payload,
      };
    case "CHANGE_MODE":
      return {
        ...state,
        modeByCamera: {
          ...state.modeByCamera,
          [action.payload.cameraFeedID]: action.payload.mode,
        },
      };
    case "SET_SELECTED_REGION_INDEX":
      return {
        ...state,
        selectedRegionIndex: action.payload,
      };
    case "SET_SELECTED_REGION_COLOUR":
      return {
        ...state,
        regionsByCamera: {
          ...state.regionsByCamera,
          [action.payload.cameraFeedID]: state.regionsByCamera[action.payload.cameraFeedID].map((region) =>
            region.name === action.payload.regionName ? { ...region, brushColour: action.payload.newColour } : region,
          ),
        },
      };
    case "ADD_NEW_REGION":
      return {
        ...state,
        regionsByCamera: {
          ...state.regionsByCamera,
          [action.payload.cameraFeedID]: [
            ...state.regionsByCamera[action.payload.cameraFeedID],
            { name: action.payload.regionName, brushColour: action.payload.brushColour },
          ],
        },
      };
    case "REMOVE_REGION":
      return {
        ...state,
        regionsByCamera: {
          ...state.regionsByCamera,
          [action.payload.cameraFeedID]: state.regionsByCamera[action.payload.cameraFeedID].filter(
            (region) => region.name !== action.payload.regionName,
          ),
        },
      };
    case "RESET_PAINTED_CELLS":
      return {
        ...state,
        paintedCells: {
          ...state.paintedCells,
          [state.cameraFeedID]: new Map<string, PaintedCell>(),
        },
      };
    case "SET_CAMERA_FEED_DATA":
      return {
        ...action.cameraState,
      };
    case "RESET_CAMERA_FEED":
      return {
        ...initialState,
      };
    case "SET_ZOOM_LEVEL":
      return {
        ...state,
        zoomLevel: {
          ...state.zoomLevel,
          [action.payload.cameraFeedID]: action.payload.zoomLevel,
        },
      };
    case "SET_BRUSH_SIZE":
      return {
        ...state,
        brushSize: action.payload.brushSize,
      };
    default:
      return state;
  }
 }
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -2,38 +2,35 @@ import { useState } from "react";
 import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
-import type { Region } from "../../../types/types";
+
-import PlatePatch from "./PlatePatch/PlatePatch";
+import PlatePatch from "./PlatePatch/SightingPatch";
 import ResetAllModal from "./CameraSettings/resetAllModal/ResetAllModal";
 const CameraGrid = () => {
  const [regions, setRegions] = useState<Region[]>([
    { name: "Region 1", brushColour: "#ff0000" },
    { name: "Region 2", brushColour: "#00ff00" },
    { name: "Region 3", brushColour: "#0400ff" },
  ]);
  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
  const [mode, setMode] = useState("");
  const [tabIndex, setTabIndex] = useState(0);
-  console.log(tabIndex);
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
-  const updateRegionColour = (index: number, newColour: string) => {
+
    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
  };
  console.log(mode);
  return (
-    <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
+    <>
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
-      <CameraSettings
+        <div className="col-span-2 flex flex-col gap-4">
-        regions={regions}
+          <div className="">
-        selectedRegionIndex={selectedRegionIndex}
+            <VideoFeedGridPainter />
-        onSelectRegion={setSelectedRegionIndex}
+          </div>
-        onChangeRegionColour={updateRegionColour}
+          <div className="overflow-hidden">
-        mode={mode}
+            <PlatePatch />
-        onSelectMode={setMode}
+          </div>
-        tabIndex={tabIndex}
+        </div>
-        setTabIndex={setTabIndex}
+        <CameraSettings
-      />
+          tabIndex={tabIndex}
-      <PlatePatch />
+          setTabIndex={setTabIndex}
-    </div>
+          isResetAllModalOpen={isResetModalOpen}
          handleClose={() => setIsResetModalOpen(false)}
          setIsResetModalOpen={setIsResetModalOpen}
        />
      </div>
      <ResetAllModal isResetAllModalOpen={isResetModalOpen} handleClose={() => setIsResetModalOpen(false)} />
    </>
  );
 };
--- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
@@ -0,0 +1,67 @@
 import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect, useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
 import CameraControls from "./cameraControls/CameraControls";
 type CameraPanelProps = {
  tabIndex: number;
  isResetAllModalOpen: boolean;
  handleClose: () => void;
  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: CameraPanelProps) => {
  const { state, dispatch } = useCameraFeedContext();
  const [subTabIndex, setSubTabIndex] = useState(0);
  const cameraFeedID = state.cameraFeedID;
  const regions = state.regionsByCamera[cameraFeedID];
  const selectedRegionIndex = state.selectedRegionIndex;
  const mode = state.modeByCamera[cameraFeedID];
  useEffect(() => {
    const mapIndextoCameraId = () => {
      switch (tabIndex) {
        case 0:
          return "A";
        case 1:
          return "B";
        case 2:
          return "C";
        //Add more cases if more cameras are added
        default:
          return "A";
      }
    };
    const cameraId = mapIndextoCameraId();
    dispatch({ type: "SET_CAMERA_FEED", payload: cameraId });
  }, [dispatch, tabIndex]);
  return (
    <Tabs onSelect={(index) => setSubTabIndex(index)}>
      <TabList>
        <Tab>Target Detection</Tab>
        <Tab>Camera Controls</Tab>
      </TabList>
      <TabPanel>
        <RegionSelector
          regions={regions}
          selectedRegionIndex={selectedRegionIndex}
          mode={mode}
          cameraFeedID={cameraFeedID}
          isResetAllModalOpen={isResetAllModalOpen}
          handleClose={handleClose}
          setIsResetModalOpen={setIsResetModalOpen}
          subTabIndex={subTabIndex}
        />
      </TabPanel>
      <TabPanel>
        <CameraControls cameraFeedID={cameraFeedID} subTabIndex={subTabIndex} />
      </TabPanel>
    </Tabs>
  );
 };
 export default CameraPanel;
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -1,62 +1,45 @@
 import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
-import RegionSelector from "./RegionSelector";
+import CameraPanel from "./CameraPanel";
-import type { Region } from "../../../../types/types";
+import { CAMERA_IDS } from "../../../../app/config/cameraConfig";
 type CameraSettingsProps = {
  regions: Region[];
  selectedRegionIndex: number;
  onSelectRegion: (index: number) => void;
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
  onSelectMode: (mode: string) => void;
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
  isResetAllModalOpen: boolean;
  handleClose: () => void;
  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const CameraSettings = ({
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  mode,
  onSelectMode,
  tabIndex,
  setTabIndex,
  isResetAllModalOpen,
  handleClose,
  setIsResetModalOpen,
 }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 max-h-screen col-span-3">
+    <Card className="p-4 w-full h-full ">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
        onSelect={(index) => setTabIndex(index)}
      >
        <TabList>
-          <Tab>Target Detection</Tab>
+          {CAMERA_IDS.map((id) => (
-          <Tab>Camera 1</Tab>
+            <Tab key={id}>Camera {id}</Tab>
-          <Tab>Camera 2</Tab>
+          ))}
          <Tab>Camera 3</Tab>
        </TabList>
-        <TabPanel>
+        {CAMERA_IDS.map((id, index) => (
-          <RegionSelector
+          <TabPanel key={id}>
-            regions={regions}
+            <CameraPanel
-            selectedRegionIndex={selectedRegionIndex}
+              tabIndex={index}
-            onSelectRegion={onSelectRegion}
+              isResetAllModalOpen={isResetAllModalOpen}
-            onChangeRegionColour={onChangeRegionColour}
+              handleClose={handleClose}
-            mode={mode}
+              setIsResetModalOpen={setIsResetModalOpen}
-            onSelectMode={onSelectMode}
+            />
-          />
+          </TabPanel>
-        </TabPanel>
+        ))}
        <TabPanel>
          <div>Camera details {tabIndex}</div>
        </TabPanel>
        <TabPanel>
          <div>Camera details {tabIndex}</div>
        </TabPanel>
        <TabPanel>
          <div>Camera details {tabIndex}</div>
        </TabPanel>
      </Tabs>
    </Card>
  );
--- a/src/features/cameras/components/CameraSettings/ColourPicker.tsx
+++ b/src/features/cameras/components/CameraSettings/ColourPicker.tsx
@@ -4,7 +4,17 @@ type ColourPickerProps = {
 };
 const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
-  return <input type="color" name="" id="" value={colour} onChange={(e) => setColour(e.target.value)} />;
+  return (
    <input
      type="color"
      name=""
      id=""
      value={colour}
      disabled
      onChange={(e) => setColour(e.target.value)}
      className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
    />
  );
 };
 export default ColourPicker;
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -1,65 +1,343 @@
 import type { ColourData, PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../../types/types";
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import { useColourDectection } from "../../hooks/useColourDetection";
 import { useBlackBoard } from "../../../../hooks/useBlackBoard";
 import { toast } from "sonner";
 import { useCameraFeedSocket } from "../../../../app/context/WebSocketContext";
 import type { CameraID } from "../../../../app/config/cameraConfig";
 import { useEffect } from "react";
 import SliderComponent from "../../../../ui/SliderComponent";
 type RegionSelectorProps = {
  regions: Region[];
  selectedRegionIndex: number;
  onSelectRegion: (index: number) => void;
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
-  onSelectMode: (mode: string) => void;
+  cameraFeedID: CameraID;
  isResetAllModalOpen: boolean;
  handleClose: () => void;
  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
  subTabIndex?: number;
 };
 const RegionSelector = ({
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  mode,
-  onSelectMode,
+  cameraFeedID,
  isResetAllModalOpen,
  subTabIndex,
  setIsResetModalOpen,
 }: RegionSelectorProps) => {
  const { colourMutation } = useColourDectection();
  const { state, dispatch } = useCameraFeedContext();
  const { blackboardMutation } = useBlackBoard();
  const paintedCells = state.paintedCells[cameraFeedID];
  const brushSize = state.brushSize;
  const cameraSocket = useCameraFeedSocket();
  useEffect(() => {
    if (subTabIndex === 0) {
      dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "painter" } });
    }
  }, [cameraFeedID, dispatch, subTabIndex]);
  const getCurrentSocket = () => {
    switch (cameraFeedID) {
      case "A":
        return cameraSocket;
      case "B":
        return cameraSocket;
      case "C":
        return cameraSocket;
    }
  };
  const socket = getCurrentSocket();
  const getMagnificationLevel = () => {
    const test = socket?.data;
    if (!socket?.data) return null;
    if (!test || !test.magnificationLevel) return "1x";
    return test?.magnificationLevel;
  };
  const handleChange = (e: { target: { value: string } }) => {
-    onSelectMode(e.target.value);
+    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
  };
  const handleResetRegion = () => {
    dispatch({
      type: "RESET_PAINTED_CELLS",
      payload: { cameraFeedID: cameraFeedID, paintedCells: new Map<string, PaintedCell>() },
    });
  };
  const handleModeChange = (newMode: string) => {
    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
  };
  const handleRegionSelect = (index: number) => {
    dispatch({ type: "SET_SELECTED_REGION_INDEX", payload: index });
  };
  const handleRegionColourChange = (index: number, newColour: string) => {
    const regionName = regions[index].name;
    dispatch({
      type: "SET_SELECTED_REGION_COLOUR",
      payload: { cameraFeedID: cameraFeedID, regionName: regionName, newColour: newColour },
    });
  };
  const handleAddRegionClick = () => {
    const regionName = `Bay ${regions.length + 1}`;
    dispatch({
      type: "ADD_NEW_REGION",
      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
    });
  };
  const handleRemoveClick = () => {
    dispatch({
      type: "REMOVE_REGION",
      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
    });
  };
  const openResetModal = () => {
    if (isResetAllModalOpen) return;
    setIsResetModalOpen(true);
  };
  const handleSaveclick = () => {
    const regions: ColourData[] = [];
    const paintedCellsArray = Array.from(paintedCells.entries());
    const region1 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 1");
    const region2 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 2");
    const region3 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 3");
    const region4 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 4");
    const region5 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 5");
    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])]),
    };
    const region4Data = {
      id: 4,
      cells: region4.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    const region5Data = {
      id: 5,
      cells: region5.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
    };
    if (region1Data.cells.length > 0) {
      regions.push(region1Data);
    }
    if (region2Data.cells.length > 0) {
      regions.push(region2Data);
    }
    if (region3Data.cells.length > 0) {
      regions.push(region3Data);
    }
    if (region4Data.cells.length > 0) {
      regions.push(region4Data);
    }
    if (region5Data.cells.length > 0) {
      regions.push(region5Data);
    }
    colourMutation.mutate({ cameraFeedID, regions: regions });
    // Convert map to plain object for blackboard
    const serializableState = {
      ...state,
      paintedCells: {
        A: Array.from(state.paintedCells.A.entries()),
        B: Array.from(state.paintedCells.B.entries()),
        C: Array.from(state.paintedCells.C.entries()),
      },
    };
    blackboardMutation.mutate({ operation: "INSERT", path: `cameraFeed`, value: serializableState });
    toast.success("Region data saved successfully!");
  };
  return (
-    <div>
+    <div className="flex flex-col gap-4 h-full overflow-y-auto mt-[5%]">
-      <div>
+      <div className="flex flex-col md:flex-row gap-3">
-        <h2 className="text-xl">Region Select</h2>
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
-      </div>
+          <h2 className="text-2xl mb-2">Tools</h2>
-      <div>
+          <div className="flex flex-col gap-2">
-        {regions.map((region, idx) => (
+            <label
-          <div
+              htmlFor="paintMode"
-            key={region.name}
+              className={`p-4 border rounded-lg  mb-2
-            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
+            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
-          >
+            hover:bg-[#202b36] hover:cursor-pointer`}
-            <label style={{ marginRight: "0.5rem" }}>
+            >
              <input
                id="paintMode"
                type="radio"
-                checked={selectedRegionIndex === idx}
+                onChange={handleChange}
-                onChange={() => {
+                checked={mode === "painter"}
-                  onSelectMode("painter");
+                value="painter"
-                  onSelectRegion(idx);
+                className="sr-only"
-                }}
+              />
-              />{" "}
+              <span className="text-xl">Paint mode</span>
-              {region.name}
+            </label>
            <label
              htmlFor="eraseMode"
              className={`p-4 border rounded-lg  mb-2
            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
            >
              <input
                id="eraseMode"
                type="radio"
                onChange={handleChange}
                checked={mode === "eraser"}
                value={"eraser"}
                className="sr-only"
              />
              <span className="text-xl">Erase mode</span>
            </label>
            <div className="flex flex-col border border-gray-600 rounded-lg p-4">
              <span className="text-lg mb-2">
                {mode === "painter" ? "Brush" : "Eraser"} Size: {brushSize}
              </span>
              <SliderComponent
                id="brushSize"
                onChange={(value) => dispatch({ type: "SET_BRUSH_SIZE", payload: { brushSize: value as number } })}
                value={brushSize}
                min={1}
                max={5}
                step={1}
              />
            </div>
            <label
              htmlFor="magnifyMode"
              className={`p-4 border rounded-lg  mb-2
            ${mode === "magnify" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
            >
              <input
                id="magnifyMode"
                type="radio"
                onChange={handleChange}
                checked={mode === "magnify"}
                value="magnify"
                className="sr-only"
              />
              <div className="flex flex-col space-y-3">
                <span className="text-xl">Magnifier</span>
                {mode === "magnify" && <small className={`text-gray-400 italic`}>Use mouse to magnify the image</small>}
              </div>
            </label>
            <label
              htmlFor="zoomMode"
              className={`p-4 border rounded-lg  mb-2
            ${mode === "zoom" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
            >
              <input
                id="zoomMode"
                type="radio"
                onChange={handleChange}
                checked={mode === "zoom"}
                value="zoom"
                className="sr-only"
              />
              <div className="flex flex-col space-y-3">
                <span className="text-xl">Digital Zoom mode</span>
                <pre className="text-xs text-gray-400">{`Current Zoom: ${getMagnificationLevel()}`}</pre>
                {mode === "zoom" && <small className={`text-gray-400 italic`}>Click image to digitally zoom</small>}
              </div>
            </label>
            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
          </div>
        ))}
        <div>
          <h2 className="text-xl">Tools</h2>
        </div>
        <div className="flex flex-col">
          <label htmlFor="mode">
            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
            Paint mode
          </label>
-          <label htmlFor="erase">
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
+          <h2 className="text-2xl mb-2">Bay Select</h2>
-            Erase mode
+          <>
-          </label>
+            {regions?.map((region, idx) => {
              const isSelected = selectedRegionIndex === idx;
              const inputId = `region-${idx}`;
              return (
                <label
                  htmlFor={inputId}
                  key={region.name}
                  className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
                  ${isSelected ? "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"
                      checked={isSelected}
                      id={inputId}
                      name="region"
                      className="sr-only"
                      onChange={() => {
                        handleModeChange("painter");
                        handleRegionSelect(idx);
                      }}
                    />
                    <span className="text-xl">{region.name}</span>
                  </div>
                  <ColourPicker
                    colour={region.brushColour}
                    setColour={(c: string) => handleRegionColourChange(idx, c)}
                  />
                  <div></div>
                </label>
              );
            })}
          </>
          <div className="flex flex-col gap-4  mt-4">
            <button
              className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md hover:bg-blue-800 hover:cursor-pointer"
              onClick={handleAddRegionClick}
            >
              Add Bay
            </button>
            <button
              className="border border-red-900 bg-red-700 px-4 py-1 rounded-md hover:bg-red-800 hover:cursor-pointer"
              onClick={handleRemoveClick}
            >
              Remove Bay
            </button>
          </div>
        </div>
      </div>
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
        <h2 className="text-2xl mb-2">Actions</h2>
        <div className="flex flex-col gap-4 justify-center">
          <div className="grid grid-cols-2 gap-2">
            <button
              onClick={handleSaveclick}
              className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full hover:bg-blue-700 hover:cursor-pointer"
            >
              Save Region
            </button>
            <button
              onClick={handleResetRegion}
              className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
            >
              Reset Region
            </button>
          </div>
          <button
            onClick={openResetModal}
            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
          >
            Reset All
          </button>
        </div>
      </div>
    </div>
--- a/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
+++ b/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
@@ -0,0 +1,73 @@
 import { useEffect } from "react";
 import type { CameraID } from "../../../../../app/config/cameraConfig";
 import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
 import SliderComponent from "../../../../../ui/SliderComponent";
 import { useCameraZoom } from "../../../hooks/useCameraZoom";
 import { useDebouncedCallback } from "use-debounce";
 type CameraControlsProps = {
  cameraFeedID: CameraID;
  subTabIndex?: number;
 };
 const CameraControls = ({ cameraFeedID, subTabIndex }: CameraControlsProps) => {
  const { state, dispatch } = useCameraFeedContext();
  const { cameraZoomMutation, cameraZoomQuery } = useCameraZoom(cameraFeedID);
  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 0;
  const currentZoomLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysCurrent"].value : 0;
  const minLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMin"].value : 0;
  const maxLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMax"].value : 0;
  const normalizedZoomLevel = ((currentZoomLevel - minLevel) / (maxLevel - minLevel)).toFixed(2);
  useEffect(() => {
    if (subTabIndex === 1) {
      dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "controller" } });
    }
  }, [cameraFeedID, dispatch, subTabIndex]);
  const debouncedMutation = useDebouncedCallback(async (value) => {
    await cameraZoomMutation.mutateAsync({
      cameraFeedID,
      zoomLevel: value as number,
    });
  }, 1000);
  const handleChange = (value: number | number[]) => {
    const newZoom = value as number;
    dispatch({
      type: "SET_ZOOM_LEVEL",
      payload: { cameraFeedID: cameraFeedID, zoomLevel: newZoom },
    });
    debouncedMutation(newZoom);
  };
  const handleOneShotClick = () => {
    debouncedMutation(normalizedZoomLevel);
  };
  return (
    <div>
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
        <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
        <div className="w-[70%] ">
          <label htmlFor="zoom">Zoom {zoomLevel}</label>
          <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={0} max={1} step={0.1} />
        </div>
      </div>
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
        <h2>One Shot</h2>
        <button
          type="button"
          className="p-2 bg-gray-500 rounded-xl w-[40%] mt-2 hover:bg-gray-700 cursor-pointer"
          onClick={handleOneShotClick}
        >
          One Shot
        </button>
      </div>
    </div>
  );
 };
 export default CameraControls;
--- a/src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx
+++ b/src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx
@@ -0,0 +1,55 @@
 import { toast } from "sonner";
 import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
 import { useBlackBoard } from "../../../../../hooks/useBlackBoard";
 import ModalComponent from "../../../../../ui/ModalComponent";
 type ResetAllModalProps = {
  isResetAllModalOpen: boolean;
  handleClose: () => void;
 };
 const ResetAllModal = ({ isResetAllModalOpen, handleClose }: ResetAllModalProps) => {
  const { state, dispatch } = useCameraFeedContext();
  const { blackboardMutation } = useBlackBoard();
  const handleResetAll = async () => {
    dispatch({ type: "RESET_CAMERA_FEED" });
    handleClose();
    const result = await blackboardMutation.mutateAsync({
      operation: "INSERT",
      path: `cameraFeed`,
      value: state,
    });
    //  Need endpoint to reset all target detection painted cells
    if (result?.reason === "OK") {
      toast.success("All camera settings have been reset to default values.");
    }
  };
  return (
    <ModalComponent isModalOpen={isResetAllModalOpen} close={handleClose}>
      <div>
        <h2 className="text-xl font-bold mb-4">Reset All Camera Settings</h2>
        <p className="mb-4">
          Are you sure you want to reset all camera settings to their default values? This action cannot be undone.
        </p>
        <div className="flex justify-end gap-4">
          <button
            onClick={handleResetAll}
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
          >
            Reset
          </button>
          <button
            onClick={handleClose}
            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
          >
            Cancel
          </button>
        </div>
      </div>
    </ModalComponent>
  );
 };
 export default ResetAllModal;
--- a/src/features/cameras/components/PlatePatch/PlatePatch.tsx
+++ b/src/features/cameras/components/PlatePatch/PlatePatch.tsx
@@ -1,7 +0,0 @@
 import Card from "../../../../ui/Card";
 const PlatePatch = () => {
  return <Card>PlatePatch</Card>;
 };
 export default PlatePatch;
--- a/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
@@ -0,0 +1,97 @@
 import { useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import type { DecodeReading } from "../../../../types/types";
 import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
 import PlatePatchModal from "./platePatchModal/PlatePatchModal";
 const SightingEntryTable = () => {
  const { state } = useCameraFeedContext();
  const [isPlatePatchModalOpen, setIsPlatePatchModalOpen] = useState(false);
  const [currentPatch, setCurrentPatch] = useState<DecodeReading | null>(null);
  const cameraFeedID = state.cameraFeedID;
  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
  const isLoading = entryQuery?.isFetching;
  const readings = entryQuery?.data?.decodes;
  const handleRowClick = (reading: DecodeReading) => {
    setCurrentPatch(reading);
    setIsPlatePatchModalOpen(true);
  };
  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
    <>
      <div className="border border-gray-600 rounded-lg m-2">
        {/* Desktop Table */}
        <div className="hidden md:block overflow-y-auto">
          <table className="w-full text-left text-sm">
            <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
              <tr>
                <th className="px-4 py-3 font-semibold">VRM</th>
                <th className="px-4 py-3 font-semibold">Bay ID</th>
                <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
                <th className="px-4 py-3 font-semibold">First Seen</th>
                <th className="px-4 py-3 font-semibold">Last Seen</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-700">
              {readings?.map((reading: DecodeReading) => (
                <tr
                  className="hover:bg-gray-800/30 transition-colors hover:cursor-pointer"
                  key={reading?.id}
                  onClick={() => handleRowClick(reading)}
                >
                  <td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
                  <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
                  <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* Mobile */}
        <div className="md:hidden overflow-y-auto space-y-3 p-3">
          {readings?.map((reading: DecodeReading) => (
            <div
              key={reading?.id}
              className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
              onClick={() => handleRowClick(reading)}
            >
              <div className="flex justify-between items-start">
                <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
                <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Seen Count:</span>
                <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
              </div>
              <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
                <div className="flex justify-between">
                  <span className="text-gray-500">First Seen:</span>
                  <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Last Seen:</span>
                  <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <PlatePatchModal
        isPlatePatchModalOpen={isPlatePatchModalOpen}
        handleClose={() => setIsPlatePatchModalOpen(false)}
        currentPatch={currentPatch}
        direction={"entry"}
      />
    </>
  );
 };
 export default SightingEntryTable;
--- a/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
@@ -0,0 +1,96 @@
 import { useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import type { DecodeReading } from "../../../../types/types";
 import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
 import PlatePatchModal from "./platePatchModal/PlatePatchModal";
 const SightingExitTable = () => {
  const [isPlatePatchModalOpen, setIsPlatePatchModalOpen] = useState(false);
  const [currentPatch, setCurrentPatch] = useState<DecodeReading | null>(null);
  const { state } = useCameraFeedContext();
  const cameraFeedID = state.cameraFeedID;
  const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
  const isLoading = exitQuery?.isFetching;
  const readings = exitQuery?.data?.decodes;
  const handleRowClick = (reading: DecodeReading) => {
    setCurrentPatch(reading);
    setIsPlatePatchModalOpen(true);
  };
  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
    <>
      <div className="border border-gray-600 rounded-lg m-2">
        {/* Desktop Table */}
        <div className="hidden md:block overflow-y-auto">
          <table className="w-full text-left text-sm">
            <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
              <tr>
                <th className="px-4 py-3 font-semibold">VRM</th>
                <th className="px-4 py-3 font-semibold">Bay ID</th>
                <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
                <th className="px-4 py-3 font-semibold">First Seen</th>
                <th className="px-4 py-3 font-semibold">Last Seen</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-700">
              {readings?.map((reading: DecodeReading) => (
                <tr
                  className="hover:bg-gray-800/30 transition-colors hover:cursor-pointer"
                  key={reading?.id}
                  onClick={() => handleRowClick(reading)}
                >
                  <td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
                  <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
                  <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* Mobile Cards */}
        <div className="md:hidden overflow-y-auto space-y-3 p-3">
          {readings?.map((reading: DecodeReading) => (
            <div
              key={reading?.id}
              className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
              onClick={() => handleRowClick(reading)}
            >
              <div className="flex justify-between items-start">
                <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
                <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Seen Count:</span>
                <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
              </div>
              <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
                <div className="flex justify-between">
                  <span className="text-gray-500">First Seen:</span>
                  <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Last Seen:</span>
                  <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <PlatePatchModal
        isPlatePatchModalOpen={isPlatePatchModalOpen}
        handleClose={() => setIsPlatePatchModalOpen(false)}
        currentPatch={currentPatch}
        direction={"exit"}
      />
    </>
  );
 };
 export default SightingExitTable;
--- a/src/features/cameras/components/PlatePatch/SightingPatch.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingPatch.tsx
@@ -0,0 +1,27 @@
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import Card from "../../../../ui/Card";
 import CardHeader from "../../../../ui/CardHeader";
 import SightingEntryTable from "./SightingEntryTable";
 import SightingExitTable from "./SightingExitTable";
 const PlatePatch = () => {
  return (
    <Card className="p-4 w-full max-h-[600px] flex flex-col md:w-[95%]">
      <CardHeader title="Entry / Exit" />
      <Tabs defaultIndex={1} className="flex-1 flex flex-col">
        <TabList>
          <Tab>Entry Sightings</Tab>
          <Tab>Exit Sightings</Tab>
        </TabList>
        <TabPanel>
          <SightingEntryTable />
        </TabPanel>
        <TabPanel>
          <SightingExitTable />
        </TabPanel>
      </Tabs>
    </Card>
  );
 };
 export default PlatePatch;
--- a/src/features/cameras/components/PlatePatch/platePatchModal/PlatePatchModal.tsx
+++ b/src/features/cameras/components/PlatePatch/platePatchModal/PlatePatchModal.tsx
@@ -0,0 +1,20 @@
 import type { DecodeReading } from "../../../../../types/types";
 import ModalComponent from "../../../../../ui/ModalComponent";
 import PlatePatchModalContent from "./PlatePatchModalContent";
 type PlatePatchModalProps = {
  isPlatePatchModalOpen: boolean;
  handleClose: () => void;
  currentPatch: DecodeReading | null;
  direction?: "entry" | "exit";
 };
 const PlatePatchModal = ({ isPlatePatchModalOpen, handleClose, currentPatch, direction }: PlatePatchModalProps) => {
  return (
    <ModalComponent isModalOpen={isPlatePatchModalOpen} close={handleClose}>
      <PlatePatchModalContent currentPatch={currentPatch} direction={direction} />
    </ModalComponent>
  );
 };
 export default PlatePatchModal;
--- a/src/features/cameras/components/PlatePatch/platePatchModal/PlatePatchModalContent.tsx
+++ b/src/features/cameras/components/PlatePatch/platePatchModal/PlatePatchModalContent.tsx
@@ -0,0 +1,64 @@
 import type { DecodeReading } from "../../../../../types/types";
 type PlatePatchModalContentProps = {
  currentPatch: DecodeReading | null;
  direction?: "entry" | "exit";
 };
 const PlatePatchModalContent = ({ currentPatch, direction }: PlatePatchModalContentProps) => {
  const imageSrc = `data:image/png;base64,${currentPatch?.plate || ""}`;
  const imageUrl = currentPatch ? imageSrc : "";
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between border-b border-gray-600 pb-3">
        <h2
          className={`font-mono font-bold text-3xl tracking-wide
          ${direction === "entry" ? "text-blue-400" : "text-red-400"}`}
        >
          {currentPatch?.vrm}
        </h2>
        <span
          className={`px-3 py-1 rounded-full text-xs font-semibold uppercase
          ${direction === "entry" ? "bg-blue-500/20 text-blue-400" : "bg-red-500/20 text-red-400"}`}
        >
          {direction === "entry" ? "Entry" : "Exit"}
        </span>
      </div>
      <div className="border border-gray-600 rounded-2xl">
        <div className="flex  bg-gray-800/50 rounded-lg p-4">
          <img
            src={imageUrl}
            alt={`${direction === "entry" ? "Entry" : "Exit"} Image for ${currentPatch?.vrm || "N/A"}`}
            className="rounded-lg border border-gray-600 max-w-full h-auto shadow-lg"
          />
        </div>
        <div className="grid grid-cols-2 gap-4 bg-gray-800/30 rounded-lg p-4">
          <div className="space-y-1">
            <p className="text-gray-400 text-xs uppercase tracking-wider">Bay ID</p>
            <p className="text-gray-200 font-semibold text-lg">{currentPatch?.laneID || "N/A"}</p>
          </div>
          <div className="space-y-1">
            <p className="text-gray-400 text-xs uppercase tracking-wider">Seen Count</p>
            <p className="text-gray-200 font-semibold text-lg">{currentPatch?.seenCount || "N/A"}</p>
          </div>
          <div className="space-y-1 col-span-2">
            <p className="text-gray-400 text-xs uppercase tracking-wider">First Seen</p>
            <p className="text-gray-300 text-sm">{currentPatch?.firstSeenTimeHumane || "N/A"}</p>
          </div>
          <div className="space-y-1 col-span-2">
            <p className="text-gray-400 text-xs uppercase tracking-wider">Last Seen</p>
            <p className="text-gray-300 text-sm">{currentPatch?.lastSeenTimeHumane || "N/A"}</p>
          </div>
        </div>
      </div>
    </div>
  );
 };
 export default PlatePatchModalContent;
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -2,32 +2,81 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
-import type { Region } from "../../../../types/types";
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
-import Card from "../../../../ui/Card";
+import { useCameraFeedSocket } from "../../../../app/context/WebSocketContext";
 import { ReadyState } from "react-use-websocket";
 import { toast } from "sonner";
 import type { CameraID } from "../../../../app/config/cameraConfig";
-const rows = 40;
+const BACKEND_WIDTH = 640;
 const BACKEND_HEIGHT = 360;
 const BACKEND_CELL_SIZE = 16;
 const rows = 22.5;
 const cols = 40;
 const size = 20;
 const gap = 0;
-type VideoFeedGridPainterProps = {
+const VideoFeedGridPainter = () => {
-  regions: Region[];
+  const { state } = useCameraFeedContext();
-  selectedRegionIndex: number;
+  const cameraFeedID = state.cameraFeedID;
-  mode: string;
+  const paintedCells = state?.paintedCells?.[cameraFeedID];
-};
+  const regions = state.regionsByCamera[cameraFeedID];
  const selectedRegionIndex = state.selectedRegionIndex;
  const mode = state.modeByCamera[cameraFeedID];
  const brushSize = state.brushSize;
 type PaintedCell = {
  colour: string;
 };
 const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
-  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
+  const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
  const isDrawingRef = useRef(false);
-  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+  const [scale, setScale] = useState(1);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const stageRef = useRef<any>(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const paintLayerRef = useRef<any>(null);
  const currentScale = stageSize.width / BACKEND_WIDTH;
  const size = BACKEND_CELL_SIZE * currentScale;
  const cameraSocket = useCameraFeedSocket();
  const getCurrentSocket = () => {
    switch (cameraFeedID) {
      case "A":
        return cameraSocket;
      case "B":
        return cameraSocket;
      case "C":
        return cameraSocket;
    }
  };
  const handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: CameraID) => {
    if (mode !== "zoom") return;
    const socket = getCurrentSocket();
    const stage = e.target.getStage();
    const coords = stage?.getPointerPosition();
    if (!coords || !socket) return;
    const newX = coords.x / stageSize.width;
    const newY = coords.y / stageSize.height;
    // Check if WebSocket is connected
    if (socket.readyState !== ReadyState.OPEN) {
      toast.error(`Camera ${cameraFeedID} WebSocket is not connected`);
      return;
    }
    try {
      socket.send(`ZOOM=${newX.toFixed(2)},${newY.toFixed(2)}`);
    } catch (error) {
      console.error("WebSocket send error:", error);
      toast.error(`Failed to send command to Camera ${cameraFeedID}`);
    }
  };
  const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
    if (!bmp || !bmp.current) {
      return null;
@@ -38,112 +87,172 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
  const image = draw(latestBitmapRef);
-  const paintCell = (x: number, y: number) => {
+  const paintCell = (x: number, y: number, brushSize: number) => {
    if (mode === "controller" || mode === "zoom" || mode === "magnify") return;
    const col = Math.floor(x / (size + gap));
    const row = Math.floor(y / (size + gap));
    const radius = Math.floor(brushSize / 2);
    if (row < 0 || row >= rows || col < 0 || col >= cols) return;
    const activeRegion = regions[selectedRegionIndex];
    if (!activeRegion) return;
    const key = `${row}-${col}`;
    const currentColour = regions[selectedRegionIndex].brushColour;
-    const map = paintedCellsRef.current;
+    for (let r = row - radius; r <= row + radius; r++) {
-    const existing = map.get(key);
+      for (let c = col - radius; c <= col + radius; c++) {
-
+        if (r < 0 || r >= rows || c < 0 || c >= cols) continue;
-    if (mode === "eraser") {
+        const key = `${r}-${c}`;
-      if (map.has(key)) {
+        const map = paintedCells;
-        map.delete(key);
+        const existing = map.get(key);
-        paintLayerRef.current?.batchDraw();
+        if (mode === "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 });
      }
      return;
    }
    if (existing && existing.colour === currentColour) return;
    map.set(key, { colour: currentColour });
    paintLayerRef.current?.batchDraw();
  };
  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex]) return;
+    if (!regions[selectedRegionIndex] || mode === "magnify" || mode === "zoom") return;
    isDrawingRef.current = true;
    const pos = e.target.getStage()?.getPointerPosition();
-    if (pos) paintCell(pos.x, pos.y);
+    if (pos) paintCell(pos.x, pos.y, brushSize);
  };
  const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
-    if (!isDrawingRef.current) return;
+    if (!isDrawingRef.current || mode === "magnify") return;
    if (!regions[selectedRegionIndex]) return;
    const pos = e.target.getStage()?.getPointerPosition();
-    if (pos) paintCell(pos.x, pos.y);
+    if (pos) paintCell(pos.x, pos.y, brushSize);
  };
  const handleStageMouseUp = () => {
    isDrawingRef.current = false;
  };
  const handleMouseEnter = () => {
    if (mode !== "magnify") return;
    setScale(2);
  };
  const handleMouseLeave = () => {
    document.body.style.cursor = "default";
    setScale(1);
    setPosition({ x: 0, y: 0 });
  };
  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
    if (scale === 1) return;
    const stage = e.target.getStage();
    if (!stage) return;
    const pointerPosition = stage.getPointerPosition();
    if (!pointerPosition) return;
    const newX = stageSize.width / 2 - pointerPosition.x * scale;
    const newY = stageSize.height / 2 - pointerPosition.y * scale;
    const maxX = 0;
    const minX = stageSize.width - stageSize.width * scale;
    const maxY = 0;
    const minY = stageSize.height - stageSize.height * scale;
    setPosition({
      x: Math.max(minX, Math.min(maxX, newX)),
      y: Math.max(minY, Math.min(maxY, newY)),
    });
  };
  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
-      const aspectRatio = 740 / 460;
+      const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.36;
+      if (width < 768) {
-      const newHeight = newWidth / aspectRatio;
+        const newWidth = width * 0.8;
-      setStageSize({ width: newWidth, height: newHeight });
+        const newHeight = newWidth / aspectRatio;
        setStageSize({ width: newWidth, height: newHeight });
      } else {
        const newWidth = width * 0.6;
        const newHeight = newWidth / aspectRatio;
        setStageSize({ width: newWidth, height: newHeight });
      }
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
-  if (image === null || isloading)
+  if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
    return (
      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
        <span className="text-slate-500">Loading Video feed…</span>
      </Card>
    );
  return (
-    <div className="row-span-1 col-span-2 rounded-lg">
+    <div>
      <Stage
        ref={stageRef}
        width={stageSize.width}
        height={stageSize.height}
        onMouseDown={handleStageMouseDown}
        onMouseMove={handleStageMouseMove}
        onMouseUp={handleStageMouseUp}
        onMouseLeave={handleStageMouseUp}
        className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
          mode === "eraser" ? "hover:cursor-pointer" : ""
        } ${mode === "zoom" ? "hover:cursor-zoom-in" : ""}`}
      >
-        <Layer>
+        <Layer
-          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
+          scaleX={scale}
          scaleY={scale}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          onMouseMove={handleMouseMove}
          x={position.x}
          y={position.y}
        >
          <Image
            image={image}
            width={stageSize.width}
            height={stageSize.height}
            classname={"rounded-lg"}
            onClick={(e) => handleZoomClick(e, cameraFeedID)}
            cornerRadius={10}
          />
        </Layer>
        <Layer ref={paintLayerRef} opacity={0.6}>
-          <Shape
+          {mode === "painter" || mode === "eraser" ? (
-            sceneFunc={(ctx, shape) => {
+            <Shape
-              const cells = paintedCellsRef.current;
+              sceneFunc={(ctx, shape) => {
-              cells.forEach((cell, key) => {
+                const cells = paintedCells;
-                const [rowStr, colStr] = key.split("-");
+                if (!cells || cells.size === 0 || !paintLayerRef.current) return;
-                const row = Number(rowStr);
+                cells?.forEach((cell, key) => {
-                const col = Number(colStr);
+                  const [rowStr, colStr] = key.split("-");
                  const row = Number(rowStr);
                  const col = Number(colStr);
-                const x = col * (size + gap);
+                  const x = col * (size + gap);
-                const y = row * (size + gap);
+                  const y = row * (size + gap);
-                ctx.beginPath();
+                  ctx.beginPath();
-                ctx.rect(x, y, size, size);
+                  ctx.rect(x, y, size, size);
-                ctx.fillStyle = cell.colour;
+                  ctx.fillStyle = cell.colour;
-                ctx.fill();
+                  ctx.fill();
-              });
+                });
-              ctx.fillStrokeShape(shape);
+                ctx.fillStrokeShape(shape);
-            }}
+              }}
-            width={stageSize.width}
+              width={stageSize.width}
-            height={stageSize.height}
+              height={stageSize.height}
-          />
+            />
          ) : null}
        </Layer>
      </Stage>
    </div>
--- a/src/features/cameras/hooks/useCameraZoom.ts
+++ b/src/features/cameras/hooks/useCameraZoom.ts
@@ -0,0 +1,51 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { CameraZoomConfig } from "../../../types/types";
 import type { CameraID } from "../../../app/config/cameraConfig";
 const fetchZoomLevel = async (cameraFeedID: string) => {
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Camera${cameraFeedID}-onvif-controller`);
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
  const fields = [
    { property: "propPhysCurrent", value: zoomConfig.zoomLevel },
    { property: "propCameraHost", value: "192.168.0.101" },
    { property: "propCameraPort", value: 80 },
    { property: "propCameraUsername", value: "administrator" },
    { property: "propCameraPassword", value: "MAV12345" },
  ];
  const zoomPayload = {
    id: `Camera${zoomConfig.cameraFeedID}-onvif-controller`,
    fields,
  };
  const response = await fetch(
    `${CAMBASE}/Camera${zoomConfig.cameraFeedID}-camera-control?command=setAbsoluteZoom&zoomLevel=${zoomConfig.zoomLevel}`,
    {
      method: "POST",
      body: JSON.stringify(zoomPayload),
    },
  );
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 export const useCameraZoom = (cameraFeedID: CameraID) => {
  const cameraZoomQuery = useQuery({
    queryKey: ["cameraZoom", cameraFeedID],
    queryFn: () => fetchZoomLevel(cameraFeedID),
  });
  const cameraZoomMutation = useMutation({
    mutationKey: ["postCameraZoom"],
    mutationFn: (zoomConfig: CameraZoomConfig) => postZoomLevel(zoomConfig),
  });
  return { cameraZoomQuery, cameraZoomMutation };
 };
--- a/src/features/cameras/hooks/useColourDetection.ts
+++ b/src/features/cameras/hooks/useColourDetection.ts
@@ -0,0 +1,24 @@
 import { useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { ColourDetectionPayload } from "../../../types/types";
 const sendColourDetectionData = async (colourData: ColourDetectionPayload) => {
  const regions = {
    regions: colourData.regions,
  };
  const response = await fetch(`${CAMBASE}/TargetDetectionColour${colourData.cameraFeedID}-region-update`, {
    method: "POST",
    body: JSON.stringify(regions),
  });
  if (!response.ok) throw new Error("Cannot send data to colour detection endpoint");
  return response.json();
 };
 export const useColourDectection = () => {
  const colourMutation = useMutation({
    mutationKey: ["colour detection"],
    mutationFn: (colourData: ColourDetectionPayload) => sendColourDetectionData(colourData),
  });
  return { colourMutation };
 };
--- a/src/features/cameras/hooks/useGetVideoFeed.ts
+++ b/src/features/cameras/hooks/useGetVideoFeed.ts
@@ -1,7 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { CameraID } from "../../../app/config/cameraConfig";
-const getfeed = async () => {
+const targetDectionFeed = async (cameraFeedID: CameraID | null) => {
-  const response = await fetch(`http://100.115.148.59/TargetDetectionColour-preview`, {
+  const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
    signal: AbortSignal.timeout(300000),
    cache: "no-store",
  });
@@ -11,12 +13,31 @@ const getfeed = async () => {
  return response.blob();
 };
-export const useGetVideoFeed = () => {
+const getVideoFeed = async (cameraFeedID: CameraID | null) => {
-  const videoQuery = useQuery({
+  const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, {
-    queryKey: ["getfeed"],
+    signal: AbortSignal.timeout(300000),
-    queryFn: getfeed,
+    cache: "no-store",
  });
  if (!response.ok) {
    throw new Error(`Cannot reach endpoint (${response.status})`);
  }
  return response.blob();
 };
 export const useGetVideoFeed = (cameraFeedID: CameraID | null, mode: string) => {
  const targetDetectionQuery = useQuery({
    queryKey: ["getfeed", cameraFeedID],
    queryFn: () => targetDectionFeed(cameraFeedID),
    refetchInterval: 500,
    enabled: mode !== "magnify" && mode !== "zoom",
  });
-  return { videoQuery };
+  const videoFeedQuery = useQuery({
    queryKey: ["videoQuery", cameraFeedID, mode],
    queryFn: () => getVideoFeed(cameraFeedID),
    refetchInterval: 500,
    enabled: mode === "magnify" || mode === "zoom",
  });
  return { targetDetectionQuery, videoFeedQuery };
 };
--- a/src/features/cameras/hooks/useGetvideoSnapshots.ts
+++ b/src/features/cameras/hooks/useGetvideoSnapshots.ts
@@ -1,19 +1,34 @@
 import { useEffect, useRef } from "react";
 import { useGetVideoFeed } from "./useGetVideoFeed";
 import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";
 export const useCreateVideoSnapshot = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state?.cameraFeedID;
  const mode = state.modeByCamera[cameraFeedID];
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed();
+  const { targetDetectionQuery, videoFeedQuery } = useGetVideoFeed(cameraFeedID, mode);
-  const snapShot = videoQuery?.data;
+  let snapShot = targetDetectionQuery?.data;
-  const isloading = videoQuery.isPending;
+  const isloading = targetDetectionQuery.isPending;
  const videoSnapShot = videoFeedQuery?.data;
  const isVideoLoading = videoFeedQuery.isPending;
  if ((isVideoLoading === false && videoSnapShot && mode === "magnify") || mode === "zoom") {
    snapShot = videoSnapShot;
  }
  useEffect(() => {
    async function createBitmap() {
      if (!snapShot) return;
      try {
-        const bitmap = await createImageBitmap(snapShot);
+        const bitmap = await createImageBitmap(snapShot, {
          resizeWidth: 720,
          resizeHeight: 1080,
          resizeQuality: "high",
        });
        if (!bitmap) return;
        latestBitmapRef.current = bitmap;
      } catch (error) {
--- a/src/features/cameras/hooks/useSightingEntryAndExit.ts
+++ b/src/features/cameras/hooks/useSightingEntryAndExit.ts
@@ -0,0 +1,28 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 const fetchEntrySightings = async (cameraFeedID: string) => {
  const response = await fetch(`${CAMBASE}/EntrySightingCreator${cameraFeedID}-list-proto-sightings`);
  if (!response.ok) throw new Error("Cannot reach sighing entry endpoint");
  return response.json();
 };
 const fetchExitSightings = async (cameraFeedID: string) => {
  const response = await fetch(`${CAMBASE}/ExitSightingCreator${cameraFeedID}-list-proto-sightings`);
  if (!response.ok) throw new Error("Cannot reach sighing exit endpoint");
  return response.json();
 };
 export const useSightingEntryAndExit = (cameraFeedID: string) => {
  const entryQuery = useQuery({
    queryKey: ["Entry Sightings", cameraFeedID],
    queryFn: () => fetchEntrySightings(cameraFeedID),
  });
  const exitQuery = useQuery({
    queryKey: ["Exit Sightings", cameraFeedID],
    queryFn: () => fetchExitSightings(cameraFeedID),
  });
  return { entryQuery, exitQuery };
 };
--- a/src/features/dashboard/components/CameraStatus.tsx
+++ b/src/features/dashboard/components/CameraStatus.tsx
--- a/src/features/dashboard/components/DashboardGrid.tsx
+++ b/src/features/dashboard/components/DashboardGrid.tsx
@@ -1,9 +1,62 @@
-import SystemStatusCard from "./SystemStatusCard";
+import type { SystemHealthStatus } from "../../../types/types";
 import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
 import CameraStatus from "./cameraStatus/CameraStatus";
 import SystemHealthCard from "./systemHealth/SystemHealthCard";
 import SystemStatusCard from "./systemStatus/SystemStatusCard";
 import { CAMERA_IDS } from "../../../app/config/cameraConfig";
 const DashboardGrid = () => {
  const { query } = useGetSystemHealth();
  const startTime = query?.data?.StartTimeHumane;
  const uptime = query?.data?.UptimeHumane;
  const statuses: SystemHealthStatus[] = query?.data?.Status;
  const isLoading = query?.isLoading;
  const isError = query?.isError;
  const dateUpdatedAt = query?.dataUpdatedAt;
  const refetch = query?.refetch;
  const statusCategories = statuses?.reduce<Record<string, SystemHealthStatus[]>>(
    (acc, cur) => {
      if (cur?.groupID === "ChannelA") acc?.channelA?.push(cur);
      if (cur?.groupID === "ChannelB") acc?.channelB?.push(cur);
      if (cur?.groupID === "ChannelC") acc?.channelC?.push(cur);
      if (cur?.groupID === "Default") acc?.default?.push(cur);
      return acc;
    },
    {
      channelA: [],
      channelB: [],
      channelC: [],
      // todo: check if more cameras will be added later
      default: [],
    },
  );
  return (
-    <div>
+    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
-      <SystemStatusCard />
+      <div className="grid grid-cols-1 md:grid-rows-0 md:grid-cols-2 gap-4 md:col-span-2">
        <SystemStatusCard />
        <SystemHealthCard
          startTime={startTime}
          uptime={uptime}
          statuses={statuses}
          isLoading={isLoading}
          isError={isError}
          dateUpdatedAt={dateUpdatedAt}
          refetch={refetch}
        />
      </div>
      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-[repeat(3,1fr)] gap-x-4">
        {CAMERA_IDS.map((cameraID) => (
          <CameraStatus
            key={cameraID}
            title={`Camera ${cameraID}`}
            category={statusCategories?.[`channel${cameraID}`] ?? []}
            isError={isError}
          />
        ))}
      </div>
    </div>
  );
 };
--- a/src/features/dashboard/components/SystemStatusCard.tsx
+++ b/src/features/dashboard/components/SystemStatusCard.tsx
@@ -1,26 +0,0 @@
 import { useInfoSocket } from "../../../app/context/WebSocketContext";
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 const SystemStatusCard = () => {
  const { data: stats } = useInfoSocket();
  return (
    <Card className="p-4 w-[40%]">
      <CardHeader title="Overview" />
      {stats ? (
        <>
          <div>UTC: {stats["system-clock-utc"]}</div>
          <span>Local: {stats["system-clock-local"]}</span>
          <span>CPU: {stats["memory-cpu-status"]}</span>
          <span>Threads: {stats["thread-count"]}</span>
        </>
      ) : (
        <span className="text-slate-500">Loading system status…</span>
      )}
      <div className="text-sm flex gap-4"></div>
    </Card>
  );
 };
 export default SystemStatusCard;
--- a/src/features/dashboard/components/cameraStatus/CameraStatus.tsx
+++ b/src/features/dashboard/components/cameraStatus/CameraStatus.tsx
@@ -0,0 +1,54 @@
 import type { SystemHealthStatus } from "../../../../types/types";
 import Card from "../../../../ui/Card";
 import StatusIndicators from "../../../../ui/StatusIndicators";
 import { capitalize } from "../../../../utils/utils";
 import CameraStatusGridItem from "./CameraStatusGridItem";
 type CameraStatusProps = {
  title: string;
  category: SystemHealthStatus[];
  isError?: boolean;
 };
 const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
  const isAllGood =
    category &&
    category.length > 0 &&
    category.every((status) => {
      const allowedTags = ["RUNNING", "VIDEO-PLAYING"];
      return status.tags.every((tag) => allowedTags.includes(tag));
    });
  return (
    <Card className="p-4">
      <div className="border-b border-gray-600">
        <h3 className="text-lg flex flex-row items-center">
          {isError ? (
            <StatusIndicators status={"bg-red-500"} />
          ) : isAllGood ? (
            <StatusIndicators status={"bg-green-500"} />
          ) : (
            <StatusIndicators status={"bg-amber-500"} />
          )}
          {capitalize(title)}
        </h3>
        {isError ? (
          <p className="text-sm text-red-500">Error loading camera health.</p>
        ) : isAllGood ? (
          <p className="text-sm text-green-500">All systems running</p>
        ) : (
          <p className="text-sm text-amber-500">Some systems down</p>
        )}
      </div>
      {category && category?.length <= 0 ? (
        <p className=" text-gray-500">Loading Camera health...</p>
      ) : (
        <div>
          <CameraStatusGridItem title={title} statusCategory={category} />
        </div>
      )}
    </Card>
  );
 };
 export default CameraStatus;
--- a/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx
+++ b/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx
@@ -0,0 +1,59 @@
 import { useState } from "react";
 import type { SystemHealthStatus } from "../../../../types/types";
 import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
 import Badge from "../../../../ui/Badge";
 type CameraStatusGridItemProps = {
  title: string;
  statusCategory: SystemHealthStatus[];
 };
 const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const isAllGood = statusCategory?.every((status) => {
    const allowedTags = ["RUNNING", "VIDEO-PLAYING"];
    return status.tags.every((tag) => allowedTags.includes(tag));
  });
  const downItems = statusCategory?.filter((status) => {
    return status.tags.some((tag) => tag !== "RUNNING" && tag !== "VIDEO-PLAYING");
  });
  const handleClick = () => {
    setIsOpen(false);
  };
  return (
    <>
      <div
        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer m-2 h-70"
        onClick={() => setIsOpen(true)}
      >
        <p className="text-sm text-slate-300">
          {isAllGood ? (
            "Click to view module status"
          ) : (
            <>
              <ul>
                {downItems.map((item) => (
                  <li key={item.id} className="flex justify-between mb-2">
                    <span>{item.id}</span> <Badge text={item.tags[0]} />
                  </li>
                ))}
              </ul>
            </>
          )}
        </p>
      </div>
      <SystemHealthModal
        isSystemHealthModalOpen={isOpen}
        handleClose={handleClick}
        statusCategory={statusCategory}
        title={title}
        isAllGood={isAllGood}
      />
    </>
  );
 };
 export default CameraStatusGridItem;
--- a/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
+++ b/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
@@ -0,0 +1,44 @@
 import { useState } from "react";
 import type { SystemHealthStatus } from "../../../../types/types";
 import StatusIndicators from "../../../../ui/StatusIndicators";
 import { capitalize } from "../../../../utils/utils";
 import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
 type StatusGridItemProps = {
  title: string;
  statusCategory: SystemHealthStatus[];
 };
 const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const isAllGood =
    statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
  const handleClick = () => {
    setIsOpen(false);
  };
  return (
    <>
      <div
        className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
        onClick={() => setIsOpen(true)}
      >
        <h3 className="text-lg flex flex-row items-center">
          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
          {capitalize(title)}
        </h3>
        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
      </div>
      <SystemHealthModal
        isSystemHealthModalOpen={isOpen}
        handleClose={handleClick}
        statusCategory={statusCategory}
        title={title}
        isAllGood={isAllGood}
      />
    </>
  );
 };
 export default StatusGridItem;
--- a/src/features/dashboard/components/systemHealth/SystemHealth.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealth.tsx
@@ -0,0 +1,60 @@
 import type { SystemHealthStatus } from "../../../../types/types";
 import StatusGridItem from "../statusGridItem/StatusGridItem";
 type SystemHealthProps = {
  startTime: string;
  uptime: string;
  statuses: SystemHealthStatus[];
  isLoading: boolean;
  isError: boolean;
  dateUpdatedAt?: number;
 };
 const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
  const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
  const statusCategories = statuses?.reduce<Record<string, SystemHealthStatus[]>>(
    (acc, cur) => {
      if (cur?.groupID === "ChannelA") acc?.channelA?.push(cur);
      if (cur?.groupID === "ChannelB") acc?.channelB?.push(cur);
      if (cur?.groupID === "ChannelC") acc?.channelC?.push(cur);
      if (cur?.groupID === "Default") acc?.default?.push(cur);
      return acc;
    },
    {
      channelA: [],
      channelB: [],
      channelC: [],
      default: [],
    },
  );
  const categoryDefault = statusCategories?.default ?? [];
  if (isError) {
    return <span className="text-red-500">Error loading system health.</span>;
  }
  if (isLoading) {
    return <span className="text-slate-500">Loading system health…</span>;
  }
  return (
    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
      <div className="p-2 border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>
      <div className="overflow-auto gap-4">
        <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
      </div>
      <div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
        <small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
      </div>
    </div>
  );
 };
 export default SystemHealth;
--- a/src/features/dashboard/components/systemHealth/SystemHealthCard.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealthCard.tsx
@@ -0,0 +1,42 @@
 import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
 import Card from "../../../../ui/Card";
 import CardHeader from "../../../../ui/CardHeader";
 import SystemHealth from "./SystemHealth";
 import type { SystemHealthStatus } from "../../../../types/types";
 type SystemOverviewProps = {
  startTime: string;
  uptime: string;
  statuses: SystemHealthStatus[];
  isLoading: boolean;
  isError: boolean;
  dateUpdatedAt: number;
  refetch: () => void;
 };
 const SystemHealthCard = ({
  startTime,
  uptime,
  statuses,
  isLoading,
  isError,
  dateUpdatedAt,
  refetch,
 }: SystemOverviewProps) => {
  return (
    <Card className="p-4 ">
      <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
      <SystemHealth
        startTime={startTime}
        uptime={uptime}
        statuses={statuses}
        isLoading={isLoading}
        isError={isError}
        dateUpdatedAt={dateUpdatedAt}
      />
    </Card>
  );
 };
 export default SystemHealthCard;
--- a/src/features/dashboard/components/systemHealth/systemHealthModal/SystemHealthModal.tsx
+++ b/src/features/dashboard/components/systemHealth/systemHealthModal/SystemHealthModal.tsx
@@ -0,0 +1,48 @@
 import type { SystemHealthStatus } from "../../../../../types/types";
 import Badge from "../../../../../ui/Badge";
 import ModalComponent from "../../../../../ui/ModalComponent";
 import StatusIndicators from "../../../../../ui/StatusIndicators";
 import { capitalize } from "../../../../../utils/utils";
 type SystemHealthModalProps = {
  isSystemHealthModalOpen: boolean;
  handleClose: () => void;
  statusCategory: SystemHealthStatus[];
  title: string;
  isAllGood: boolean;
 };
 const SystemHealthModal = ({
  isSystemHealthModalOpen,
  handleClose,
  statusCategory,
  title,
  isAllGood,
 }: SystemHealthModalProps) => {
  return (
    <ModalComponent isModalOpen={isSystemHealthModalOpen} close={handleClose}>
      <div>
        <div className="border-b border-gray-500">
          <h2 className="text-xl font-bold mb-4 flex flex-row items-center">
            {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
            {capitalize(title)}
          </h2>
          <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
        </div>
        <div>
          {statusCategory?.map((status: SystemHealthStatus) => (
            <div
              className="border border-gray-700 p-4 rounded-md m-2 flex justify-between hover:bg-[#233241]"
              key={status.id}
            >
              <span>{status.id}</span> <Badge text={status.tags[0]} />
            </div>
          ))}
        </div>
      </div>
    </ModalComponent>
  );
 };
 export default SystemHealthModal;
--- a/src/features/dashboard/components/systemStatus/StatusItems/DownloadLogButton.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/DownloadLogButton.tsx
@@ -0,0 +1,50 @@
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useDownloadLogFiles } from "../../../hooks/useDownloadLogFiles";
 import { toast } from "sonner";
 const DownloadLogButton = () => {
  const { downloadLogFilesQuery } = useDownloadLogFiles();
  const isLoading = downloadLogFilesQuery?.isFetching;
  const handleDownloadClick = async () => {
    try {
      const blob = await downloadLogFilesQuery?.refetch().then((res) => res.data);
      if (!blob) {
        throw new Error("No log file data received");
      }
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      if (!link) {
        throw new Error("Failed to create download link");
      } else {
        link.href = url;
        link.setAttribute("download", "FlexiAI-0.log");
        document.body.appendChild(link);
        link.click();
        link.parentNode?.removeChild(link);
        window.URL.revokeObjectURL(url);
      }
    } catch (error: unknown) {
      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
      toast.error(errorMessage);
    }
  };
  return (
    <button
      className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
      onClick={handleDownloadClick}
    >
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faDownload} />
        </span>
        <p className="text-lg">{"Download Log Files"}</p>
      </div>
      <p className="text-slate-400 italic text-start">{isLoading ? "Downloading..." : "View logs"}</p>
    </button>
  );
 };
 export default DownloadLogButton;
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemCPU.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemCPU.tsx
@@ -0,0 +1,23 @@
 import { faHardDrive } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 type StatusItemProps = {
  statusInfoItem: string;
  description: string;
 };
 const StatusItemCPU = ({ statusInfoItem, description }: StatusItemProps) => {
  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faHardDrive} />
        </span>
        <p className="text-lg">{statusInfoItem}</p>
      </div>
      <p className="text-slate-400">{description}</p>
    </div>
  );
 };
 export default StatusItemCPU;
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemLocal.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemLocal.tsx
@@ -0,0 +1,31 @@
 import { faClock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 type StatusItemProps = {
  statusInfoItem: string;
  description: string;
 };
 const StatusItemLocal = ({ statusInfoItem, description }: StatusItemProps) => {
  const humanReadable = (string: string) => {
    if (description.toLowerCase().includes("local")) {
      const text = string.slice(0, statusInfoItem.length - 5);
      return text;
    }
  };
  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faClock} />
        </span>
        <p className="text-lg">{description.toLowerCase().includes("local") && humanReadable(statusInfoItem)}</p>
      </div>
      <p className="text-slate-400">{description}</p>
    </div>
  );
 };
 export default StatusItemLocal;
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemThreads.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemThreads.tsx
@@ -0,0 +1,24 @@
 import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 type StatusItemProps = {
  statusInfoItem: string;
  description: string;
 };
 const StatusItemThreads = ({ statusInfoItem, description }: StatusItemProps) => {
  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faMicrochip} />
        </span>
        <p className="text-lg">{statusInfoItem}</p>
      </div>
      <p className="text-slate-400">{description}</p>
    </div>
  );
 };
 export default StatusItemThreads;
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemUTC.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemUTC.tsx
@@ -0,0 +1,32 @@
 import { faClock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 type StatusItemProps = {
  statusInfoItem: string;
  description: string;
 };
 const StatusItemUTC = ({ statusInfoItem, description }: StatusItemProps) => {
  const humanReadable = (string: string) => {
    if (description.includes("UTC")) {
      const text = string.slice(0, statusInfoItem.length - 3);
      return text;
    }
  };
  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faClock} />
        </span>
        <p className="text-lg">{description.toLowerCase().includes("utc") && humanReadable(statusInfoItem)}</p>
      </div>
      <p className="text-slate-400">{description}</p>
    </div>
  );
 };
 export default StatusItemUTC;
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusReads.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusReads.tsx
@@ -0,0 +1,48 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChartSimple } from "@fortawesome/free-solid-svg-icons";
 type StatusReadsProps = {
  reads: {
    totalPending: number;
    totalActive: number;
    totalSent: number;
    totalReceived: number;
    totalLost: number;
    sanityCheck: boolean;
    sanityCheckFormula: string;
  };
  isReadsLoading?: boolean;
 };
 const StatusReads = ({ reads, isReadsLoading }: StatusReadsProps) => {
  const totalPending = reads?.totalPending ?? 0;
  const totalActive = reads?.totalActive ?? 0;
  const totalSent = reads?.totalSent ?? 0;
  const totalLost = reads?.totalLost ?? 0;
  const totalReceived = reads?.totalReceived ?? 0;
  if (isReadsLoading) {
    return <p className="text-slate-400">Loading reads…</p>;
  }
  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faChartSimple} />
        </span>
        <p className="text-lg">Reads</p>
      </div>
      <div className="text-slate-400 mt-1">
        Pending: <span className="text-yellow-500">{totalPending}</span> | Active:{" "}
        <span className="text-cyan-500">{totalActive}</span> | Lost: <span className="text-red-500">{totalLost}</span>
        <br />
        Sent / Received: <span className="text-blue-500">{totalSent}</span> |{" "}
        <span className="text-green-500">{totalReceived}</span>
      </div>
    </div>
  );
 };
 export default StatusReads;
--- a/src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
+++ b/src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
@@ -0,0 +1,49 @@
 import { useEffect } from "react";
 import { useInfoSocket } from "../../../../app/context/WebSocketContext";
 import Card from "../../../../ui/Card";
 import CardHeader from "../../../../ui/CardHeader";
 import DownloadLogButton from "./StatusItems/DownloadLogButton";
 import StatusItemLocal from "./StatusItems/StatusItemLocal";
 import StatusItemUTC from "./StatusItems/StatusItemUTC";
 import StatusReads from "./StatusItems/StatusReads";
 import { useGetStore } from "../../hooks/useGetStore";
 const SystemStatusCard = () => {
  const { data: stats } = useInfoSocket();
  const { storeQuery } = useGetStore();
  const reads = storeQuery?.data;
  const isReadsLoading = storeQuery?.isFetching;
  const isError = storeQuery?.isError || !storeQuery?.data;
  useEffect(() => {
    storeQuery.refetch();
  }, [reads]);
  if (isError) {
    return (
      <Card className="p-4">
        <CardHeader title="System Status" />
        <span className="text-red-500">Error loading system status.</span>
      </Card>
    );
  }
  return (
    <Card className="p-4 ">
      <CardHeader title="System Status" />
      {stats ? (
        <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
          <StatusItemUTC statusInfoItem={stats["system-clock-utc"]} description={"UTC Time"} />
          <StatusItemLocal statusInfoItem={stats["system-clock-local"]} description={"Local Time"} />
          <DownloadLogButton />
          <StatusReads reads={reads} isReadsLoading={isReadsLoading} />
        </div>
      ) : (
        <span className="text-slate-500">Loading system status…</span>
      )}
      <div className="text-sm flex gap-4"></div>
    </Card>
  );
 };
 export default SystemStatusCard;
--- a/src/features/dashboard/hooks/useDownloadLogFiles.ts
+++ b/src/features/dashboard/hooks/useDownloadLogFiles.ts
@@ -0,0 +1,20 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 const getDownloadLogFiles = async () => {
  const response = await fetch(`${CAMBASE}/LogView/download?filename=FlexiAI-0.log`);
  if (!response.ok) {
    throw new Error("Failed to download log files");
  }
  return response.blob();
 };
 export const useDownloadLogFiles = () => {
  const downloadLogFilesQuery = useQuery({
    queryKey: ["downloadLogFiles"],
    queryFn: getDownloadLogFiles,
    enabled: false,
  });
  return { downloadLogFilesQuery };
 };
--- a/src/features/dashboard/hooks/useGetStore.ts
+++ b/src/features/dashboard/hooks/useGetStore.ts
@@ -0,0 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 const getStoreData = 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: getStoreData,
    // refetchInterval: 10 * 60 * 1000,
  });
  return { storeQuery };
 };
--- a/src/features/dashboard/hooks/useGetSystemHealth.ts
+++ b/src/features/dashboard/hooks/useGetSystemHealth.ts
@@ -0,0 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 const fetchData = async () => {
  const response = await fetch(`${CAMBASE}/api/system-health`);
  if (!response.ok) throw new Error("Cannot get System overview");
  return response.json();
 };
 export const useGetSystemHealth = () => {
  const query = useQuery({
    queryKey: ["fetchSystemData"],
    queryFn: fetchData,
    refetchInterval: 300000,
  });
  return { query };
 };
--- a/src/features/output/components/BearerTypeCard.tsx
+++ b/src/features/output/components/BearerTypeCard.tsx
@@ -0,0 +1,14 @@
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import BearerTypeFields from "./BearerTypeFields";
 const BearerTypeCard = () => {
  return (
    <Card className="p-4 h-50">
      <CardHeader title={"Bearer Type"} />
      <BearerTypeFields />
    </Card>
  );
 };
 export default BearerTypeCard;
--- a/src/features/output/components/BearerTypeFields.tsx
+++ b/src/features/output/components/BearerTypeFields.tsx
@@ -0,0 +1,34 @@
 import { Field, useFormikContext } from "formik";
 import type { FormTypes } from "../../../types/types";
 const BearerTypeFields = () => {
  useFormikContext<FormTypes>();
  return (
    <div className="flex flex-col md:flex-row space-y-4  justify-between">
      <label htmlFor="format" className="text-xl">
        Format
      </label>
      <Field
        as="select"
        name="format"
        id="format"
        className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
      >
        <option key={"JSON"} value={"JSON"}>
          JSON
        </option>
        <option key={"BOF2"} value={"BOF2"}>
          BOF2
        </option>
        <option key={"UTMC"} value={"UTMC"}>
          UTMC
        </option>
        <option key={"FTP"} value={"FTP"}>
          FTP
        </option>
      </Field>
    </div>
  );
 };
 export default BearerTypeFields;
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -0,0 +1,32 @@
 import { useFormikContext } from "formik";
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
 import { useGetBearerConfig } from "../hooks/useBearer";
 const ChannelCard = () => {
  const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
  const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
  const outputData = bearerQuery?.data;
  return (
    <Card className="p-4 h-full">
      <CardHeader title={`Channel (${values?.format})`} />
      <ChannelFields
        errors={errors}
        touched={touched}
        values={values}
        outputData={outputData}
        onSetFieldValue={setFieldValue}
      />
      <button
        type="submit"
        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
      >
        {"Save Settings"}
      </button>
    </Card>
  );
 };
 export default ChannelCard;
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -0,0 +1,324 @@
 import { Field, FieldArray } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
 type ChannelFieldsProps = {
  values: FormTypes;
  errors: InitialValuesFormErrors;
  touched: {
    connectTimeoutSeconds?: boolean | undefined;
    readTimeoutSeconds?: boolean | undefined;
  };
  outputData?: OutputDataResponse;
  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };
 const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
  const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
  const optionalConstants = optionalConstantsQuery?.data;
  const channelFieldsObject = useMemo(() => {
    return {
      connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
      backOfficeURL: outputData?.propBackofficeURL?.value || "",
      username: outputData?.propUsername?.value || "",
      password: outputData?.propPassword?.value || "",
      SCID: optionalConstants?.propSourceIdentifier?.value || "",
      timestampSource: optionalConstants?.propTimeZoneType?.value || "UTC",
      GPSFormat: optionalConstants?.propGpsFormat?.value || "Minutes",
      FFID: optionalConstants?.propFeedIdentifier?.value || "",
    };
  }, [
    optionalConstants?.propFeedIdentifier?.value,
    optionalConstants?.propGpsFormat?.value,
    optionalConstants?.propSourceIdentifier?.value,
    optionalConstants?.propTimeZoneType?.value,
    outputData?.propBackofficeURL?.value,
    outputData?.propConnectTimeoutSeconds?.value,
    outputData?.propPassword?.value,
    outputData?.propReadTimeoutSeconds?.value,
    outputData?.propUsername?.value,
  ]);
  useEffect(() => {
    for (const [key, value] of Object.entries(channelFieldsObject)) {
      onSetFieldValue(key, value);
    }
  }, [channelFieldsObject, onSetFieldValue, outputData]);
  return (
    <div className="flex flex-col gap-4 p-4">
      {values.format.toLowerCase() !== "ftp" ? (
        <>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="backoffice" className="block mb-2 font-medium">
              Back Office URL
            </label>
            <Field
              name={"backOfficeURL"}
              type="text"
              id="backoffice"
              placeholder="https://www.backoffice.com"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="username" className="block mb-2 font-medium">
              Username
            </label>
            <Field
              name={"username"}
              type="text"
              id="username"
              placeholder="Back office username"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="password">Password</label>
            <Field
              name={"password"}
              type={"password"}
              id="password"
              placeholder="Back office password"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
            <Field
              name={"readTimeoutSeconds"}
              type="number"
              id="readTimeoutSeconds"
              placeholder="https://example.com"
              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
            <Field
              name={"connectTimeoutSeconds"}
              type="number"
              id="connectTimeoutSeconds"
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overviewQuality">Overview quality and scale</label>
            <Field
              name={"overviewQuality"}
              as="select"
              id="overviewQuality"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
              <option value={"HIGH"}>High</option>
              <option value={"MEDIUM"}>Medium</option>
              <option value={"LOW"}>Low</option>
            </Field>
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
            <Field
              name={"cropSizeFactor"}
              as="select"
              id="cropSizeFactor"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
              <option value={"FULL"}>Full</option>
              <option value={"3/4"}>3/4</option>
              <option value={"1/2"}>1/2</option>
              <option value={"1/4"}>1/4</option>
            </Field>
          </div>
          {values.format.toLowerCase() === "utmc" && (
            <>
              <div className="border-b border-gray-500 my-3">
                <h2 className="font-bold">{values.format} Constants</h2>
              </div>
              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="SCID">Source ID / Camera ID</label>
                <Field
                  name={"SCID"}
                  type="text"
                  id="SCID"
                  placeholder="DEF345"
                  className={`p-1.5 border ${
                    errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                  } rounded-lg w-full md:w-60`}
                />
              </div>
              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="timestampSource">Timestamp Source</label>
                <Field
                  name={"timestampSource"}
                  as="select"
                  id="timestampSource"
                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                >
                  <option value={"UTC"}>UTC</option>
                  <option value={"LOCAL"}>Local</option>
                </Field>
              </div>
              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="GPSFormat">GPS Format</label>
                <Field
                  name={"GPSFormat"}
                  as="select"
                  id="GPSFormat"
                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                >
                  <option value={"Minutes"}>Minutes</option>
                  <option value={"Decimal Degrees"}>Decimal degrees</option>
                </Field>
              </div>
            </>
          )}
          {values.format?.toLowerCase() === "bof2" && (
            <>
              <div className="space-y-3">
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Constants</h2>
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="FFID">Feed ID / Force ID</label>
                  <Field
                    name={"FFID"}
                    type="text"
                    id="FFID"
                    placeholder="ABC123"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="SCID">Source ID / Camera ID</label>
                  <Field
                    name={"SCID"}
                    type="text"
                    id="SCID"
                    placeholder="DEF345"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="timestampSource">Timestamp Source</label>
                  <Field
                    name={"timestampSource"}
                    as="select"
                    id="timestampSource"
                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                  >
                    <option value={"UTC"}>UTC</option>
                    <option value={"LOCAL"}>Local</option>
                  </Field>
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="GPSFormat">GPS Format</label>
                  <Field
                    name={"GPSFormat"}
                    as="select"
                    id="GPSFormat"
                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                  >
                    <option value={"Minutes"}>Minutes</option>
                    <option value={"Decimal Degrees"}>Decimal degrees</option>
                  </Field>
                </div>
              </div>
              <div className="space-y-3">
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
                  <Field
                    name={"LID1"}
                    type="text"
                    id="LID1"
                    placeholder="10"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
                  <Field
                    name={"LID2"}
                    type="text"
                    id="LID2"
                    placeholder="20"
                    className={`p-1.5 border ${
                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
              </div>
            </>
          )}
          <div className="border-b border-gray-500 my-3">
            <h2 className="font-bold">Custom Fields</h2>
          </div>
          <div className="items-center mb-4">
            <FieldArray name="customFields">
              {(arrayHelpers) => (
                <>
                  {values?.customFields?.map((_, index) => {
                    // if (!field.value) return null;
                    return (
                      <div
                        key={index}
                        className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
                      >
                        <Field
                          name={`customFields.${index}.label`}
                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
                          placeholder={`Custom Field ${index + 1} Label`}
                        />
                        <Field
                          name={`customFields.${index}.value`}
                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
                          placeholder={`Custom Field ${index + 1} Value`}
                          autoComplete="off"
                        />
                      </div>
                    );
                  })}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button
                      type="button"
                      onClick={() => arrayHelpers.push({ label: "", value: "" })}
                      className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
                      disabled={values?.customFields && values?.customFields?.length >= 6}
                    >
                      Add Custom Field
                    </button>
                    {values?.customFields && values?.customFields?.length > 0 && (
                      <button
                        type="button"
                        onClick={() => arrayHelpers.pop()}
                        className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
                      >
                        Remove Custom Field
                      </button>
                    )}
                  </div>
                </>
              )}
            </FieldArray>
          </div>
        </>
      ) : (
        <></>
      )}
    </div>
  );
 };
 export default ChannelFields;
--- a/src/features/output/components/OSD/OSDFieldToggle.tsx
+++ b/src/features/output/components/OSD/OSDFieldToggle.tsx
@@ -0,0 +1,27 @@
 import { Field } from "formik";
 type OSDFieldToggleProps = {
  value: string;
  label: string;
 };
 const OSDFieldToggle = ({ value, label }: OSDFieldToggleProps) => {
  const spacesWords = (label: string) => {
    if (label.includes("VRM")) return label.replace("VRM", " VRM");
    return label.replace(/([A-Z])/g, " $1").trim();
  };
  return (
    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
      <span className="text-lg">{spacesWords(label)}</span>
      <Field id={value} type="checkbox" name={value} className="sr-only peer" />
      <div
        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
      after:duration-300 peer-checked:after:translate-x-5"
      />
    </label>
  );
 };
 export default OSDFieldToggle;
--- a/src/features/output/components/OSD/OSDFields.tsx
+++ b/src/features/output/components/OSD/OSDFields.tsx
@@ -0,0 +1,81 @@
 import { Field, useFormikContext } from "formik";
 import { useOSDConfig } from "../../hooks/useOSDConfig";
 import OSDFieldToggle from "./OSDFieldToggle";
 import type { OSDConfigFields } from "../../../../types/types";
 import { toast } from "sonner";
 type OSDFieldsProps = {
  isOSDLoading: boolean;
 };
 const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
  const { osdMutation } = useOSDConfig();
  const { values } = useFormikContext<OSDConfigFields>();
  const validOSDKeys: Array<keyof OSDConfigFields> = [
    "includeVRM",
    "includeMotion",
    "includeTimeStamp",
    "includeCameraName",
    "overlayPosition",
    "OSDTimestampFormat",
  ];
  const includeKeys = validOSDKeys.filter((key) => key.includes("include") && typeof values[key] === "boolean");
  const handleSubmit = async (values: OSDConfigFields) => {
    const result = await osdMutation.mutateAsync(values);
    if (result?.id) {
      toast.success("OSD Config updated successfully");
    }
  };
  if (isOSDLoading) {
    return <div>Loading OSD Options...</div>;
  }
  return (
    <div>
      <div className="flex flex-col space-y-4">
        <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
          <div className="flex flex-col space-y-4">
            {includeKeys.map((key) => (
              <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
            ))}
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overlayPosition">Overlay Position</label>
            <Field
              as="select"
              name="overlayPosition"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
              <option value="Top">Top</option>
              <option value="Bottom">Bottom</option>
            </Field>
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
            <Field
              as="select"
              name="OSDTimestampFormat"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
              <option value="UTC">UTC</option>
              <option value="LOCAL">Local</option>
            </Field>
          </div>
          <button
            type="button"
            onClick={() => handleSubmit(values)}
            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
          >
            Save Settings
          </button>
        </div>
      </div>
    </div>
  );
 };
 export default OSDFields;
--- a/src/features/output/components/OSD/OSDOptionsCard.tsx
+++ b/src/features/output/components/OSD/OSDOptionsCard.tsx
@@ -0,0 +1,32 @@
 import Card from "../../../../ui/Card";
 import CardHeader from "../../../../ui/CardHeader";
 import PayloadOptions from "../PayloadOptions/PayloadOptions";
 import OSDFields from "./OSDFields";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 type OSDOptionsCardProps = {
  isOSDLoading: boolean;
 };
 const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
  return (
    <Card className="p-4 flex-1">
      <CardHeader title="OSD Payload Options" />
      <Tabs>
        <TabList>
          <Tab>OSD Settings</Tab>
          <Tab>Payload Settings</Tab>
        </TabList>
        <TabPanel>
          <OSDFields isOSDLoading={isOSDLoading} />
        </TabPanel>
        <TabPanel>
          <PayloadOptions />
        </TabPanel>
      </Tabs>
    </Card>
  );
 };
 export default OSDOptionsCard;
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -0,0 +1,194 @@
 import { Formik, Form } from "formik";
 import BearerTypeCard from "./BearerTypeCard";
 import ChannelCard from "./ChannelCard";
 import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCConstants } from "../../../types/types";
 import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
 import { useCustomFields } from "../hooks/useCustomFields";
 import OSDOptionsCard from "./OSD/OSDOptionsCard";
 import { useOSDConfig } from "../hooks/useOSDConfig";
 const OutputForms = () => {
  const { bearerMutation } = usePostBearerConfig();
  const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
  const { customFieldsQuery, customFieldsMutation } = useCustomFields();
  const { osdQuery } = useOSDConfig();
  const isLoading = dispatcherQuery?.isLoading;
  const isOSDLoading = osdQuery?.isLoading;
  const includeVRM = osdQuery?.data?.propIncludeVRM?.value.toLowerCase() === "true";
  const includeMotion = osdQuery?.data?.propIncludeMotion?.value.toLowerCase() === "true";
  const includeTimeStamp = osdQuery?.data?.propIncludeTimestamp?.value.toLowerCase() === "true";
  const includeCameraName = osdQuery?.data?.propIncludeCameraName?.value.toLowerCase() === "true";
  const overlayPosition = osdQuery?.data?.propOverlayPosition?.value;
  const OSDTimestampFormat = osdQuery?.data?.propTimestampFormat?.value;
  const format = dispatcherQuery?.data?.propFormat?.value;
  const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
  const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
  const SCID = optionalConstantsQuery?.data?.propSourceIdentifier?.value;
  const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
  const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
  const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
  const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
  const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
  const customFieldLabel4 = customFieldsQuery?.data?.propStringName4?.value;
  const customFieldLabel5 = customFieldsQuery?.data?.propStringName5?.value;
  const customFieldLabel6 = customFieldsQuery?.data?.propStringName6?.value;
  const customFieldValues1 = customFieldsQuery?.data?.propCustomFieldValue1?.value;
  const customFieldValues2 = customFieldsQuery?.data?.propCustomFieldValue2?.value;
  const customFieldValues3 = customFieldsQuery?.data?.propCustomFieldValue3?.value;
  const customFieldValues4 = customFieldsQuery?.data?.propStringValue4?.value;
  const customFieldValues5 = customFieldsQuery?.data?.propStringValue5?.value;
  const customFieldValues6 = customFieldsQuery?.data?.propStringValue6?.value;
  const initialCustomFields = [
    { label: customFieldLabel1 || "", value: customFieldValues1 || "" },
    { label: customFieldLabel2 || "", value: customFieldValues2 || "" },
    { label: customFieldLabel3 || "", value: customFieldValues3 || "" },
    { label: customFieldLabel4 || "", value: customFieldValues4 || "" },
    { label: customFieldLabel5 || "", value: customFieldValues5 || "" },
    { label: customFieldLabel6 || "", value: customFieldValues6 || "" },
  ].filter((field) => field.label && field.value);
  const inititalValues: FormTypes = {
    format: format ?? "JSON",
    enabled: true,
    backOfficeURL: "",
    username: "",
    password: "",
    connectTimeoutSeconds: Number(5),
    readTimeoutSeconds: Number(15),
    overviewQuality: "HIGH",
    cropSizeFactor: "3/4",
    // optional constants
    FFID: FFID ?? "",
    SCID: SCID ?? "",
    timestampSource: timestampSource ?? "UTC",
    GPSFormat: gpsFormat ?? "Minutes",
    //BOF2 - optional Lane IDs
    laneId: "",
    LID1: "",
    LID2: "",
    // ftp - fields
    //custom fields
    customFields: initialCustomFields,
    // OSD Options
    includeVRM: includeVRM ?? false,
    includeMotion: includeMotion ?? false,
    includeTimeStamp: includeTimeStamp ?? false,
    includeCameraName: includeCameraName ?? false,
    overlayPosition: overlayPosition ?? "Top",
    OSDTimestampFormat: OSDTimestampFormat ?? "UTC",
    // payload ooptions
    includeMac: false,
    includeSaFID: false,
    includeCharHeight: false,
    includeConfidence: false,
    includeCorrectSpacing: false,
    includeDecodeID: false,
    includeDirection: false,
    includeFrameHeight: false,
    includeFrameID: false,
    includeFrameTimeRef: false,
    includeFrameWidth: false,
    includeHorizSlew: false,
    inclduePlate: false,
    includeNightModeAction: false,
    includeOverview: false,
    includePlateSecondary: false,
    includePlateTrack: false,
    includePlateTrackSecondary: false,
    includePreferredCountry: false,
    includeRawReads: false,
    includeRawREADSSecondary: false,
    includeRef: false,
    includeSeenCount: false,
    includeRepeatedPlate: false,
    includeSerialCount: false,
    includeTraceCount: false,
    includeTrack: false,
    includeTrackSecondary: false,
    includeVertSlew: false,
    includeVRMSecondary: false,
    includeHotListMatches: false,
  };
  const handleSubmit = async (values: FormTypes) => {
    const bearerTypeFields = {
      format: values.format,
      enabled: values.enabled,
    };
    const bearerFields: BearerTypeFields = {
      format: values.format,
      enabled: values.enabled,
      backOfficeURL: values.backOfficeURL,
      username: values.username,
      password: values.password,
      connectTimeoutSeconds: values.connectTimeoutSeconds,
      readTimeoutSeconds: values.readTimeoutSeconds,
      overviewQuality: values.overviewQuality,
      cropSizeFactor: values.cropSizeFactor,
    };
    const result = await dispatcherMutation.mutateAsync(bearerTypeFields);
    if (result?.id) {
      await bearerMutation.mutateAsync(bearerFields);
      if (values.format === "BOF2") {
        const optionalBOF2Fields: OptionalBOF2Constants = {
          format: values.format,
          FFID: values.FFID,
          SCID: values.SCID,
          timestampSource: values.timestampSource,
          GPSFormat: values.GPSFormat,
        };
        await optionalConstantsMutation.mutateAsync(optionalBOF2Fields);
      }
      if (values.format === "UTMC") {
        const optionalUTMCFields: OptionalUTMCConstants = {
          format: values.format,
          SCID: values.SCID,
          timestampSource: values.timestampSource,
          GPSFormat: values.GPSFormat,
        };
        await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
      }
    }
    if (values.customFields && values.customFields.length > 0) {
      const customFields = [...values.customFields];
      await customFieldsMutation.mutateAsync(customFields);
    }
  };
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
      <Form className="grid grid-cols-1 md:grid-cols-2 gap-4 h-[50%]">
        <div>
          <BearerTypeCard />
          <OSDOptionsCard isOSDLoading={isOSDLoading} />
        </div>
        <ChannelCard />
      </Form>
    </Formik>
  );
 };
 export default OutputForms;
--- a/src/features/output/components/PayloadOptions/PayloadOptions.tsx
+++ b/src/features/output/components/PayloadOptions/PayloadOptions.tsx
@@ -0,0 +1,56 @@
 import { useFormikContext } from "formik";
 import type { PayloadConfigFields } from "../../../../types/types";
 import PayloadOptionsToggle from "./PayloadOptionsToggle";
 const PayloadOptions = () => {
  const { values } = useFormikContext<PayloadConfigFields>();
  const validPayloadKeys: Array<keyof PayloadConfigFields> = [
    "includeMac",
    "includeSaFID",
    "includeCharHeight",
    "includeConfidence",
    "includeCorrectSpacing",
    "includeDecodeID",
    "includeDirection",
    "includeFrameHeight",
    "includeFrameID",
    "includeFrameTimeRef",
    "includeFrameWidth",
    "includeHorizSlew",
    "inclduePlate",
    "includeNightModeAction",
    "includeOverview",
    "includePlateSecondary",
    "includePlateTrack",
  ];
  const includeKeys = validPayloadKeys.filter((key) => key.includes("include") && typeof values[key] === "boolean");
  const handleSubmit = async (values: PayloadConfigFields) => {
    console.log("Payload Config Submitted:", values);
  };
  return (
    <div className="">
      <div className="flex flex-col space-y-4">
        <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
          <div className="flex flex-col space-y-4 h-100 overflow-y-auto p-3">
            {includeKeys.map((key, index) => (
              <PayloadOptionsToggle key={index} label={key} value={key} />
            ))}
          </div>
          <button
            type="button"
            onClick={() => handleSubmit(values)}
            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
          >
            Save Settings
          </button>
        </div>
      </div>
    </div>
  );
 };
 export default PayloadOptions;
--- a/src/features/output/components/PayloadOptions/PayloadOptionsToggle.tsx
+++ b/src/features/output/components/PayloadOptions/PayloadOptionsToggle.tsx
@@ -0,0 +1,22 @@
 import { Field } from "formik";
 type PayloadOptionsToggleProps = {
  label: string;
  value: string;
 };
 const PayloadOptionsToggle = ({ label, value }: PayloadOptionsToggleProps) => {
  return (
    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
      <span className="text-lg">{label}</span>
      <Field id={value} type="checkbox" name={value} className="sr-only peer" />
      <div
        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
         after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
         after:duration-300 peer-checked:after:translate-x-5"
      />
    </label>
  );
 };
 export default PayloadOptionsToggle;
--- a/src/features/output/hooks/useBearer.ts
+++ b/src/features/output/hooks/useBearer.ts
@@ -0,0 +1,66 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { BearerTypeFields } from "../../../types/types";
 import { CAMBASE } from "../../../utils/config";
 const fetchBearerConfig = async (bearerConfig: string) => {
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
    method: "GET",
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 const postBearerConfig = async (config: BearerTypeFields) => {
  const channelConfigPayload = {
    id: `Dispatcher0-${config.format.toLowerCase()}`,
    fields: [
      {
        property: "propBackofficeURL",
        value: config.backOfficeURL,
      },
      {
        property: "propConnectTimeoutSeconds",
        value: config.connectTimeoutSeconds,
      },
      {
        property: "propPassword",
        value: config.password,
      },
      {
        property: "propReadTimeoutSeconds",
        value: config.readTimeoutSeconds,
      },
      {
        property: "propUsername",
        value: config.username,
      },
    ],
  };
  const response = await fetch(`${CAMBASE}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(channelConfigPayload),
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 export const usePostBearerConfig = () => {
  const bearerMutation = useMutation({
    mutationFn: (query: BearerTypeFields) => postBearerConfig(query),
    mutationKey: ["outputs"],
  });
  return { bearerMutation };
 };
 export const useGetBearerConfig = (bearerConfig: string) => {
  const bearerQuery = useQuery({
    queryKey: ["outputs", bearerConfig],
    queryFn: () => fetchBearerConfig(bearerConfig),
  });
  return { bearerQuery };
 };
--- a/src/features/output/hooks/useCustomFields.ts
+++ b/src/features/output/hooks/useCustomFields.ts
@@ -0,0 +1,65 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { CustomFieldConfig } from "../../../types/types";
 const fetchCustomFields = async () => {
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-custom-fields`);
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 const postCustomFields = async (customFieldConfig: CustomFieldConfig[]) => {
  const fields = [];
  for (const customField of customFieldConfig) {
    if (customField.value)
      if (customFieldConfig.indexOf(customField) > 2) {
        fields.push({
          property: `propStringName${customFieldConfig.indexOf(customField) + 1}`,
          value: customField.label,
        });
        fields.push({
          property: `propStringValue${customFieldConfig.indexOf(customField) + 1}`,
          value: customField.value,
        });
      } else {
        fields.push(
          {
            property: `propCustomFieldName${customFieldConfig.indexOf(customField) + 1}`,
            value: customField.label,
          },
          {
            property: `propCustomFieldValue${customFieldConfig.indexOf(customField) + 1}`,
            value: customField.value,
          },
        );
      }
  }
  const customFieldConfigPayload = {
    id: "SightingAmmend0-custom-fields",
    fields,
  };
  const response = await fetch(`${CAMBASE}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(customFieldConfigPayload),
  });
  if (!response.ok) throw new Error("Network response was not ok");
  return response.json();
 };
 export const useCustomFields = () => {
  const customFieldsQuery = useQuery({
    queryKey: ["customFields"],
    queryFn: fetchCustomFields,
  });
  const customFieldsMutation = useMutation({
    mutationKey: ["customFieldsMutation"],
    mutationFn: postCustomFields,
  });
  return { customFieldsQuery, customFieldsMutation };
 };
--- a/src/features/output/hooks/useDispatcherConfig.ts
+++ b/src/features/output/hooks/useDispatcherConfig.ts
@@ -0,0 +1,48 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { DispatcherConfig } from "../../../types/types";
 import { CAMBASE } from "../../../utils/config";
 const getDispatcherConfig = async () => {
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0`);
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 const postDispatcherConfig = async (config: DispatcherConfig) => {
  const updateConfigPayload = {
    id: "Dispatcher0",
    fields: [
      {
        property: "propEnabled",
        value: config.enabled,
      },
      {
        property: "propFormat",
        value: config.format,
      },
    ],
  };
  const response = await fetch(`${CAMBASE}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(updateConfigPayload),
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 export const useDispatcherConfig = () => {
  const dispatcherQuery = useQuery({
    queryKey: ["dispatcherConfig"],
    queryFn: () => getDispatcherConfig(),
  });
  const dispatcherMutation = useMutation({
    mutationKey: ["postDispatcherConfig"],
    mutationFn: (config: DispatcherConfig) => postDispatcherConfig(config),
  });
  return { dispatcherQuery, dispatcherMutation };
 };
--- a/src/features/output/hooks/useOSDConfig.ts
+++ b/src/features/output/hooks/useOSDConfig.ts
@@ -0,0 +1,52 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { OSDConfigFields } from "../../../types/types";
 const fetchOSDConfig = async () => {
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-overlay`);
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 const postOSDConfig = async (data: OSDConfigFields) => {
  const fields = [
    { property: "propIncludeVRM", value: data.includeVRM },
    { property: "propIncludeMotion", value: data.includeMotion },
    { property: "propIncludeTimestamp", value: data.includeTimeStamp },
    { property: "propIncludeCameraName", value: data.includeCameraName },
    { property: "propOverlayPosition", value: data.overlayPosition },
    { property: "propTimestampFormat", value: data.OSDTimestampFormat },
  ];
  const osdConfigPayload = {
    id: "SightingAmmend0-overlay",
    fields: fields,
  };
  const response = await fetch(`${CAMBASE}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(osdConfigPayload),
  });
  if (!response.ok) {
    throw new Error("Failed to post OSD Config");
  }
  return response.json();
 };
 export const useOSDConfig = () => {
  const osdQuery = useQuery({
    queryKey: ["osdConfig"],
    queryFn: fetchOSDConfig,
  });
  const osdMutation = useMutation({
    mutationFn: postOSDConfig,
    mutationKey: ["postOSDConfig"],
  });
  return { osdQuery, osdMutation };
 };
--- a/src/features/output/hooks/useOptionalConstants.ts
+++ b/src/features/output/hooks/useOptionalConstants.ts
@@ -0,0 +1,63 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { OptionalBOF2Constants } from "../../../types/types";
 import { CAMBASE } from "../../../utils/config";
 const fetchOptionalConstants = async (format: string) => {
  if (!format || format === "json") return null;
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${format}-constants`);
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 const postOptionalConstants = async (config: OptionalBOF2Constants) => {
  const fields = [
    {
      property: "propSourceIdentifier",
      value: config?.SCID,
    },
    {
      property: "propTimeZoneType",
      value: config?.timestampSource,
    },
    {
      property: "propGpsFormat",
      value: config?.GPSFormat,
    },
  ];
  if (config.FFID) {
    fields.push({
      property: "propFeedIdentifier",
      value: config.FFID,
    });
  }
  const updateConfigPayload = {
    id: `Dispatcher0-${config.format?.toLowerCase()}-constants`,
    fields: fields,
  };
  const response = await fetch(`${CAMBASE}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(updateConfigPayload),
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
 };
 export const useOptionalConstants = (format: string) => {
  const optionalConstantsQuery = useQuery({
    queryKey: ["optionalConstants", format],
    queryFn: () => fetchOptionalConstants(format),
    enabled: !!format && format !== "json",
  });
  const optionalConstantsMutation = useMutation({
    mutationKey: ["postOptionalConstants"],
    mutationFn: postOptionalConstants,
  });
  return { optionalConstantsQuery, optionalConstantsMutation };
 };
--- a/src/features/output/hooks/usePayloadConfig.ts
+++ b/src/features/output/hooks/usePayloadConfig.ts
@@ -0,0 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
 const fetchPayloadConfig = async () => {
  const response = await fetch("/api/payload-config");
  if (!response.ok) throw new Error("Failed to fetch payload config");
  return response.json();
 };
 export const usePayloadCongfig = () => {
  const payloadConfigQuery = useQuery({
    queryKey: ["payloadConfig"],
    queryFn: fetchPayloadConfig,
  });
  return { payloadConfigQuery };
 };
--- a/src/features/settings/components/Settings.tsx
+++ b/src/features/settings/components/Settings.tsx
@@ -0,0 +1,25 @@
 import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import Card from "../../../ui/Card";
 import SystemConfig from "./SystemConfig";
 import CardHeader from "../../../ui/CardHeader";
 const Settings = () => {
  return (
    <div>
      <Tabs>
        <TabList>
          <Tab>Systems</Tab>
        </TabList>
        <TabPanel>
          <Card className="p-4">
            <CardHeader title="System Configuration" />
            <SystemConfig />
          </Card>
        </TabPanel>
      </Tabs>
    </div>
  );
 };
 export default Settings;
--- a/src/features/settings/components/SystemConfig.tsx
+++ b/src/features/settings/components/SystemConfig.tsx
@@ -0,0 +1,233 @@
 import { Formik, Form, Field, FieldArray } from "formik";
 import { useSystemSettings } from "../hooks/useSystemSettings";
 import type { NetworkConfig, SystemSettings } from "../../../types/types";
 import { toast } from "sonner";
 import { useGetNetworkConfig } from "../hooks/useGetNetworkConfig";
 const SystemConfig = () => {
  const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
  const { networkConfigQuery, networkConfigMutation } = useGetNetworkConfig();
  const isLoading = networkConfigMutation?.isPending || networkConfigMutation?.isPending;
  const isGettingLoading = systemSettingsQuery?.isLoading || networkConfigQuery?.isLoading;
  const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
  const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
  const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
  const timeSourceOpts = timeSourceOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
  const deviceName = systemSettingsQuery?.data?.propDeviceName?.value;
  const timeZone = systemSettingsQuery?.data?.propLocalTimeZone?.value;
  const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
  const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
  const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
  const primaryServer = networkConfigQuery?.data?.propNameServerPrimary?.value;
  const secondaryServer = networkConfigQuery?.data?.propNameServerSecondary?.value;
  const ipAddress = networkConfigQuery?.data?.propHost?.value;
  const subnetMask = networkConfigQuery?.data?.propNetmask?.value;
  const gateway = networkConfigQuery?.data?.propGateway?.value;
  const initialValues = {
    deviceName: deviceName ?? "",
    timeZone: timeZone ?? "",
    localTimeZone: timeZone ?? "",
    SNTPServer: SNTPServer ?? "",
    SNTPInterval: SNTPInterval ?? 60,
    SNTPIntervalMinutes: SNTPInterval ?? 60,
    primaryServer: primaryServer ?? "",
    secondaryServer: secondaryServer ?? "",
    timeSource: timeSource ?? "",
    ipAddress: ipAddress ?? "",
    subnetMask: subnetMask ?? "",
    gateway: gateway ?? "",
    customFields: [],
  };
  const handleSubmit = async (values: SystemSettings & NetworkConfig) => {
    const result = await systemSettingsMutation.mutateAsync(values);
    const networkResult = await networkConfigMutation.mutateAsync({
      ipAddress: values.ipAddress,
      subnetMask: values.subnetMask,
      gateway: values.gateway,
      primaryServer: values.primaryServer,
      secondaryServer: values.secondaryServer,
    });
    if (result.id && networkResult.id) {
      toast.success("System settings updated successfully");
    } else {
      toast.error("Failed to update system settings");
    }
  };
  if (isGettingLoading) {
    return <div>Loading...</div>;
  }
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
      {({ values }) => (
        <Form className="flex flex-col space-y-4">
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="deviceName">Device Name</label>
            <Field
              name="deviceName"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter device name"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="timeZone">Timezone</label>
            <Field
              name="timeZone"
              as="select"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
              autoComplete="off"
            >
              {timeZoneOpts?.map((option: string) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </Field>
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="timeSource">Time Source</label>
            <Field
              name="timeSource"
              as="select"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
              autoComplete="off"
            >
              {timeSourceOpts?.map((option: string) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </Field>
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="SNTPServer">SNTP Server</label>
            <Field
              name="SNTPServer"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter SNTP server"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="SNTPInterval">SNTP Interval</label>
            <Field
              name="SNTPInterval"
              type="number"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter SNTP interval"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="subnetMask">Subnet Mask</label>
            <Field
              name="subnetMask"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter subnet mask"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="ipAddress">IP Address</label>
            <Field
              name="ipAddress"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter IP address"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="gateway">Gateway</label>
            <Field
              name="gateway"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter gateway"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="primaryServer">Primary DNS Server</label>
            <Field
              name="primaryServer"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter primary DNS server"
              autoComplete="off"
            />
          </div>
          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="secondaryServer">Secondary DNS Server</label>
            <Field
              name="secondaryServer"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter secondary DNS server"
              autoComplete="off"
            />
          </div>
          <div className="border-b border-gray-500 my-3">
            <h2 className="font-bold">Custom Fields</h2>
          </div>
          <div className="items-center mb-4">
            <FieldArray name="customFields">
              {(arrayHelpers) => (
                <>
                  {values.customFields.map((_, index) => (
                    <div key={index} className="flex flex-row justify-between items-center mb-4">
                      <label htmlFor={`customFields.${index}`} className="mr-2">
                        Custom Field {index + 1}
                      </label>
                      <Field
                        name={`customFields.${index}`}
                        key={index}
                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
                        placeholder={`Enter Custom Field ${index + 1}`}
                        autoComplete="off"
                      />
                    </div>
                  ))}
                  <button
                    type="button"
                    onClick={() => arrayHelpers.push("")}
                    className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
                  >
                    Add Custom Field
                  </button>
                  {values.customFields.length > 0 && (
                    <button
                      type="button"
                      onClick={() => arrayHelpers.pop()}
                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
                    >
                      Remove Custom Field
                    </button>
                  )}
                </>
              )}
            </FieldArray>
          </div>
          <button
            type="submit"
            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
            disabled={isLoading}
          >
            {isLoading ? "Saving..." : "Save Settings"}
          </button>
        </Form>
      )}
    </Formik>
  );
 };
 export default SystemConfig;
--- a/src/features/settings/hooks/useGetNetworkConfig.ts
+++ b/src/features/settings/hooks/useGetNetworkConfig.ts
@@ -0,0 +1,49 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { NetworkConfig } from "../../../types/types";
 const fetchNetworkConfig = async () => {
  const response = await fetch(`${CAMBASE}/api/fetch-config?id=GLOBAL--NetworkConfig`);
  if (!response.ok) throw new Error("Network response was not ok");
  return response.json();
 };
 const postNetworkConfig = async (networkConfig: NetworkConfig) => {
  const fields = [
    { property: "propNetmask", value: networkConfig.subnetMask },
    { property: "propHost", value: networkConfig.ipAddress },
    { property: "propGateway", value: networkConfig.gateway },
  ];
  if (networkConfig.primaryServer !== undefined) {
    fields.push({ property: "propNameServerPrimary", value: networkConfig.primaryServer });
  }
  if (networkConfig.secondaryServer !== undefined) {
    fields.push({ property: "propNameServerSecondary", value: networkConfig.secondaryServer });
  }
  const networkConfigPayload = {
    id: "GLOBAL--NetworkConfig",
    fields,
  };
  const respones = await fetch(`${CAMBASE}/api/update-config?id=GLOBAL--NetworkConfig`, {
    method: "POST",
    body: JSON.stringify(networkConfigPayload),
  });
  if (!respones.ok) throw new Error("Network response was not ok");
  return respones.json();
 };
 export const useGetNetworkConfig = () => {
  const networkConfigQuery = useQuery({
    queryKey: ["networkConfig"],
    queryFn: fetchNetworkConfig,
  });
  const networkConfigMutation = useMutation({
    mutationKey: ["networkConfigMutation"],
    mutationFn: postNetworkConfig,
  });
  return { networkConfigQuery, networkConfigMutation };
 };
--- a/src/features/settings/hooks/useSystemSettings.ts
+++ b/src/features/settings/hooks/useSystemSettings.ts
@@ -0,0 +1,54 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 import type { SystemSettings } from "../../../types/types";
 const camBase = import.meta.env.MODE !== "development" ? CAMBASE : "";
 const fetchSystemSettings = async () => {
  const response = await fetch(`${camBase}/api/fetch-config?id=GLOBAL--Device`);
  if (!response.ok) {
    throw new Error("Failed to fetch system settings");
  }
  return response.json();
 };
 const postSystemSettings = async (settings: SystemSettings) => {
  const systemSettingConfig = {
    id: "GLOBAL--Device",
    fields: [
      { property: "propDeviceName", value: settings.deviceName },
      { property: "propSNTPServer", value: settings.SNTPServer },
      {
        property: "propSNTPIntervalMinutes",
        value: Number(settings.SNTPIntervalMinutes),
      },
      { property: "propLocalTimeZone", value: settings.localTimeZone },
      { property: "propTimeSource", value: settings.timeSource },
    ],
  };
  const response = await fetch(`${camBase}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(systemSettingConfig),
    headers: {
      "Content-Type": "application/json",
    },
  });
  if (!response.ok) {
    throw new Error("Failed to update system settings");
  }
  return response.json();
 };
 export const useSystemSettings = () => {
  const systemSettingsQuery = useQuery({
    queryKey: ["systemSettings"],
    queryFn: fetchSystemSettings,
  });
  const systemSettingsMutation = useMutation({
    mutationKey: ["updateSystemSettings"],
    mutationFn: postSystemSettings,
  });
  return { systemSettingsQuery, systemSettingsMutation };
 };
--- a/src/hooks/useBlackBoard.ts
+++ b/src/hooks/useBlackBoard.ts
@@ -0,0 +1,35 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { CAMBASE } from "../utils/config";
 import type { BlackBoardOptions } from "../types/types";
 const fetchBlackBoardData = async () => {
  const response = await fetch(`${CAMBASE}/api/blackboard`);
  if (!response.ok) {
    throw new Error("Failed to fetch blackboard data");
  }
  return response.json();
 };
 const viewBlackBoardData = async (options: BlackBoardOptions) => {
  const response = await fetch(`${CAMBASE}/api/blackboard`, {
    method: "POST",
    body: JSON.stringify(options),
  });
  if (!response.ok) {
    throw new Error("Failed to view blackboard data");
  }
  return response.json();
 };
 export const useBlackBoard = () => {
  const blackboardQuery = useQuery({
    queryKey: ["blackboardData"],
    queryFn: fetchBlackBoardData,
  });
  const blackboardMutation = useMutation({
    mutationKey: ["viewBlackBoardData"],
    mutationFn: (options: BlackBoardOptions) => viewBlackBoardData(options),
  });
  return { blackboardQuery, blackboardMutation };
 };
--- a/src/hooks/useGetVersions.ts
+++ b/src/hooks/useGetVersions.ts
@@ -0,0 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../utils/config";
 const fetchVersions = async () => {
  const response = await fetch(`${CAMBASE}/api/versions`);
  if (!response.ok) throw new Error("Cannot get Versions");
  return response.json();
 };
 export const useGetVersions = () => {
  const versionsQuery = useQuery({
    queryKey: ["getversions"],
    queryFn: fetchVersions,
  });
  return { versionsQuery };
 };
--- a/src/index.css
+++ b/src/index.css
@@ -5,3 +5,33 @@ body {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
 }
 /* Modal animations */
 .ReactModal__Overlay {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
 }
 .ReactModal__Overlay--after-open {
  opacity: 1;
 }
 .ReactModal__Overlay--before-close {
  opacity: 0;
 }
 .ReactModal__Content {
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
  transition: all 200ms ease-in-out;
 }
 .ReactModal__Content--after-open {
  transform: scale(1) translateY(0);
  opacity: 1;
 }
 .ReactModal__Content--before-close {
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,8 +4,14 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen"; // generated by plugin
 import { AppProviders } from "./app/providers/AppProviders";
 import "./index.css";
 import Modal from "react-modal";
-const router = createRouter({ routeTree });
+const router = createRouter({
  routeTree,
  basepath: "/bayiq",
 });
 Modal.setAppElement("#root");
 declare module "@tanstack/react-router" {
  interface Register {
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -11,7 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as OutputRouteImport } from './routes/output'
-import { Route as BaywatchRouteImport } from './routes/baywatch'
+import { Route as CamerasRouteImport } from './routes/cameras'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
@@ -25,9 +25,9 @@ const OutputRoute = OutputRouteImport.update({
  path: '/output',
  getParentRoute: () => rootRouteImport,
 } as any)
-const BaywatchRoute = BaywatchRouteImport.update({
+const CamerasRoute = CamerasRouteImport.update({
-  id: '/baywatch',
+  id: '/cameras',
-  path: '/baywatch',
+  path: '/cameras',
  getParentRoute: () => rootRouteImport,
 } as any)
 const AboutRoute = AboutRouteImport.update({
@@ -44,14 +44,14 @@ const IndexRoute = IndexRouteImport.update({
 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
-  '/baywatch': typeof BaywatchRoute
+  '/cameras': typeof CamerasRoute
  '/output': typeof OutputRoute
  '/settings': typeof SettingsRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
-  '/baywatch': typeof BaywatchRoute
+  '/cameras': typeof CamerasRoute
  '/output': typeof OutputRoute
  '/settings': typeof SettingsRoute
 }
@@ -59,22 +59,22 @@ export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
-  '/baywatch': typeof BaywatchRoute
+  '/cameras': typeof CamerasRoute
  '/output': typeof OutputRoute
  '/settings': typeof SettingsRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about' | '/baywatch' | '/output' | '/settings'
+  fullPaths: '/' | '/about' | '/cameras' | '/output' | '/settings'
  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about' | '/baywatch' | '/output' | '/settings'
+  to: '/' | '/about' | '/cameras' | '/output' | '/settings'
-  id: '__root__' | '/' | '/about' | '/baywatch' | '/output' | '/settings'
+  id: '__root__' | '/' | '/about' | '/cameras' | '/output' | '/settings'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AboutRoute: typeof AboutRoute
-  BaywatchRoute: typeof BaywatchRoute
+  CamerasRoute: typeof CamerasRoute
  OutputRoute: typeof OutputRoute
  SettingsRoute: typeof SettingsRoute
 }
@@ -95,11 +95,11 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof OutputRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/baywatch': {
+    '/cameras': {
-      id: '/baywatch'
+      id: '/cameras'
-      path: '/baywatch'
+      path: '/cameras'
-      fullPath: '/baywatch'
+      fullPath: '/cameras'
-      preLoaderRoute: typeof BaywatchRouteImport
+      preLoaderRoute: typeof CamerasRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/about': {
@@ -122,7 +122,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AboutRoute: AboutRoute,
-  BaywatchRoute: BaywatchRoute,
+  CamerasRoute: CamerasRoute,
  OutputRoute: OutputRoute,
  SettingsRoute: SettingsRoute,
 }
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -2,12 +2,14 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../ui/Header";
 import Footer from "../ui/Footer";
 import { Toaster } from "sonner";
 const RootLayout = () => (
  <>
    <Header />
    <main className="p-4 min-h-screen">
      <Outlet />
      <Toaster />
    </main>
    <Footer />
    <TanStackRouterDevtools position="bottom-right" />
--- a/src/routes/baywatch.tsx
+++ b/src/routes/baywatch.tsx
@@ -1,17 +0,0 @@
 import { createFileRoute } from "@tanstack/react-router";
 import CameraGrid from "../features/cameras/components/CameraGrid";
 import { Toaster } from "sonner";
 export const Route = createFileRoute("/baywatch")({
  component: RouteComponent,
 });
 function RouteComponent() {
  return (
    <div>
      <h2 className="text-xl font-semibold">Cameras</h2>
      <CameraGrid />
      <Toaster />
    </div>
  );
 }
--- a/src/routes/cameras.tsx
+++ b/src/routes/cameras.tsx
@@ -0,0 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
 import CameraGrid from "../features/cameras/components/CameraGrid";
 export const Route = createFileRoute("/cameras")({
  component: RouteComponent,
 });
 function RouteComponent() {
  return <CameraGrid />;
 }
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -6,10 +6,5 @@ export const Route = createFileRoute("/")({
 });
 function HomePage() {
-  return (
+  return <DashboardGrid />;
    <div>
      <h2 className="text-xl font-semibold"> Dashboard</h2>
      <DashboardGrid />
    </div>
  );
 }
--- a/src/routes/output.tsx
+++ b/src/routes/output.tsx
@@ -1,9 +1,10 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 import OutputForms from "../features/output/components/OutputForms";
-export const Route = createFileRoute('/output')({
+export const Route = createFileRoute("/output")({
  component: RouteComponent,
-})
+});
 function RouteComponent() {
-  return <div>Hello "/output"!</div>
+  return <OutputForms />;
 }
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -1,9 +1,10 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 import Settings from "../features/settings/components/Settings";
-export const Route = createFileRoute('/settings')({
+export const Route = createFileRoute("/settings")({
  component: RouteComponent,
-})
+});
 function RouteComponent() {
-  return <div>Hello "/settings"!</div>
+  return <Settings />;
 }
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,3 +1,5 @@
 import type { CameraID } from "../app/config/cameraConfig";
 export type WebSocketContextValue = {
  connected: boolean;
  send?: (msg: unknown) => void;
@@ -11,7 +13,282 @@ export type InfoBarData = {
  "thread-count": string;
 };
 export type CameraZoomData = {
  magnificationLevel: string;
 };
 export type StatusIndicator = "neutral-quaternary" | "dark" | "info" | "success" | "warning" | "danger";
 export type Region = {
  name: string;
  brushColour: string;
 };
 export type SystemHealthStatus = {
  id: string;
  tags: string[];
  groupID: string;
 };
 export type StatusGroups = {
  channelA: SystemHealthStatus[];
  channelB: SystemHealthStatus[];
  channelC: SystemHealthStatus[];
  default: SystemHealthStatus[];
 };
 export type BearerTypeFields = {
  format: string;
  enabled: boolean;
  backOfficeURL: string;
  username: string;
  password: string;
  connectTimeoutSeconds: number;
  readTimeoutSeconds: number;
  overviewQuality: string;
  cropSizeFactor: string;
 };
 export type OptionalConstants = {
  FFID?: string;
  SCID?: string;
  timestampSource?: string;
  GPSFormat?: string;
 };
 export type OptionalLaneIDs = {
  laneId?: string;
  LID1?: string;
  LID2?: string;
  LID3?: string;
 };
 export type CustomField = {
  label: string;
  value: string;
 };
 export type CustomFields = {
  customFields?: CustomField[];
 };
 export type InitialValuesFormErrors = {
  backOfficeURL?: string;
  username?: string;
  password?: string;
  connectTimeoutSeconds?: string;
  readTimeoutSeconds?: string;
 };
 export type OSDConfigFields = {
  includeVRM: boolean;
  includeMotion: boolean;
  includeTimeStamp: boolean;
  includeCameraName: boolean;
  overlayPosition: "Top" | "Bottom" | "Left" | "Right";
  OSDTimestampFormat: "UTC" | "LOCAL";
 };
 export type PayloadConfigFields = {
  includeMac: boolean;
  includeSaFID: boolean;
  includeCameraName: boolean;
  includeCharHeight: boolean;
  includeConfidence: boolean;
  includeCorrectSpacing: boolean;
  includeDecodeID: boolean;
  includeDirection: boolean;
  includeFrameHeight: boolean;
  includeFrameID: boolean;
  includeFrameTimeRef: boolean;
  includeFrameWidth: boolean;
  includeHorizSlew: boolean;
  includeMotion: boolean;
  inclduePlate: boolean;
  includeNightModeAction: boolean;
  includeOverview: boolean;
  includePlateSecondary: boolean;
  includePlateTrack: boolean;
  includePlateTrackSecondary: boolean;
  includePreferredCountry: boolean;
  includeRawReads: boolean;
  includeRawREADSSecondary: boolean;
  includeRef: boolean;
  includeSeenCount: boolean;
  includeRepeatedPlate: boolean;
  includeSerialCount: boolean;
  includeTimeStamp: boolean;
  includeTraceCount: boolean;
  includeTrack: boolean;
  includeTrackSecondary: boolean;
  includeVertSlew: boolean;
  includeVRM: boolean;
  includeVRMSecondary: boolean;
  includeHotListMatches: boolean;
 };
 export type FormTypes = BearerTypeFields &
  OptionalConstants &
  OptionalLaneIDs &
  CustomFields &
  OSDConfigFields &
  PayloadConfigFields;
 type FieldProperty = {
  datatype: string;
  value: string;
 };
 export type OutputDataResponse = {
  id: string;
  configHash: string;
 } & Record<string, FieldProperty>;
 export type PaintedCell = {
  colour: string;
  region: Region;
 };
 export type DispatcherConfig = {
  format: string;
  enabled: boolean;
 };
 export type OptionalBOF2Constants = {
  format?: string;
  FFID?: string;
  SCID?: string;
  timestampSource?: string;
  GPSFormat?: string;
 };
 export type OptionalUTMCConstants = {
  format?: string;
  SCID?: string;
  timestampSource?: string;
  GPSFormat?: string;
 };
 export type OptionalBOF2LaneIDs = {
  laneId?: string;
  LID1?: string;
  LID2?: string;
  LID3?: string;
 };
 export type CameraFeedState = {
  cameraFeedID: CameraID;
  brushSize: number;
  paintedCells: Record<CameraID, Map<string, PaintedCell>>;
  regionsByCamera: Record<CameraID, Region[]>;
  selectedRegionIndex: number;
  modeByCamera: Record<CameraID, string>;
  tabIndex?: number;
  zoomLevel: Record<CameraID, number>;
 };
 export type CameraFeedAction =
  | {
      type: "SET_CAMERA_FEED";
      payload: CameraID;
    }
  | {
      type: "CHANGE_MODE";
      payload: { cameraFeedID: CameraID; mode: string };
    }
  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
  | {
      type: "SET_SELECTED_REGION_COLOUR";
      payload: { cameraFeedID: CameraID; regionName: string; newColour: string };
    }
  | {
      type: "ADD_NEW_REGION";
      payload: { cameraFeedID: CameraID; regionName: string; brushColour: string };
    }
  | {
      type: "REMOVE_REGION";
      payload: { cameraFeedID: CameraID; regionName: string };
    }
  | {
      type: "RESET_PAINTED_CELLS";
      payload: { cameraFeedID: CameraID; paintedCells: Map<string, PaintedCell> };
    }
  | {
      type: "SET_CAMERA_FEED_DATA";
      cameraState: CameraFeedState;
    }
  | {
      type: "RESET_CAMERA_FEED";
    }
  | {
      type: "SET_ZOOM_LEVEL";
      payload: { cameraFeedID: CameraID; zoomLevel: number };
    }
  | {
      type: "SET_BRUSH_SIZE";
      payload: { brushSize: number };
    };
 export type DecodeReading = {
  id: number;
  vrm: string;
  laneID: number;
  seenCount: number;
  firstSeenTime?: number;
  lastSeenTime?: number;
  duplicate?: true;
  firstSeenTimeHumane: string;
  lastSeenTimeHumane: string;
  plate?: string;
 };
 export type ColourData = {
  id: string | number;
  cells: number[][];
 };
 export type ColourDetectionPayload = {
  cameraFeedID: CameraID;
  regions: ColourData[];
 };
 export type SystemSettings = {
  deviceName: string;
  localTimeZone: string;
  timeSource: string;
  SNTPServer: string;
  SNTPIntervalMinutes: number;
 };
 export type NetworkConfig = {
  ipAddress: string;
  subnetMask: string;
  gateway: string;
  primaryServer?: string;
  secondaryServer?: string;
 };
 export type CustomFieldConfig = {
  label: string;
  value: string;
 };
 export type BlackBoardOptions = {
  operation?: string;
  path?: string;
  value?: object | string | number | (string | number)[] | null;
 };
 export type CameraZoomConfig = { cameraFeedID: string; zoomLevel: number };
 export type versionInfo = {
  version: string;
  revision: string;
  buildtime: string;
  appname: string;
  MAC: string;
  timeStamp: number;
  UUID: string;
  proquint: string;
  "Serial No.": string;
  "Model No.": string;
 };
--- a/src/ui/Badge.tsx
+++ b/src/ui/Badge.tsx
@@ -0,0 +1,24 @@
 import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { capitalize } from "../utils/utils";
 type BadgeProps = {
  icon?: Icon | IconDefinition;
  text: string;
 };
 const Badge = ({ icon, 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" ? "bg-green-800 text-green-300 border-green-900" : "bg-red-800 text-red-300 border-red-900"} `}
    >
      {icon && <FontAwesomeIcon icon={icon} />}
      <span>{capitalize(lowerCaseWord)}</span>
    </span>
  );
 };
 export default Badge;
--- a/src/ui/Card.tsx
+++ b/src/ui/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
  return (
    <div
      className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
        className,
      )}
    >
--- a/src/ui/CardHeader.tsx
+++ b/src/ui/CardHeader.tsx
@@ -1,18 +1,27 @@
 import clsx from "clsx";
 import StatusIndicators from "./StatusIndicators";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 type CameraOverviewHeaderProps = {
  title?: string;
  status?: string;
  refetch?: () => void;
  icon?: IconProp;
 };
-const CardHeader = ({ title }: CameraOverviewHeaderProps) => {
+const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps) => {
  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 items-center space-x-2">
+      <div className="flex flex-row items-center w-full justify-between">
-        {/* {icon && <FontAwesomeIcon icon={icon} className="size-4" />} */}
+        <h2 className="flex flex-row text-xl items-center">
-        <h2 className="text-xl">{title}</h2>
+          {status && <StatusIndicators status={status} />}
          {title}
        </h2>
        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
      </div>
    </div>
  );
--- a/src/ui/DevModal.tsx
+++ b/src/ui/DevModal.tsx
@@ -0,0 +1,76 @@
 import type { versionInfo } from "../types/types";
 import ModalComponent from "./ModalComponent";
 type DevModalProps = {
  isDevModalOpen: boolean;
  handleClose: () => void;
  data: versionInfo;
 };
 const DevModal = ({ isDevModalOpen, handleClose, data }: DevModalProps) => {
  const uiName = __APP_NAME__;
  const uiVersion = __APP_VERSION__;
  const commitID = __GIT_COMMIT__;
  const commitTimeStamp = __GIT_TIMESTAMP__;
  return (
    <ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
      <div className="space-y-6">
        <div className="border-b border-gray-600 pb-3">
          <h2 className="text-2xl font-bold text-gray-100">System Information</h2>
          <p className="text-sm text-gray-400 mt-1">Application version details</p>
        </div>
        <div className="space-y-3">
          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Frontend (UI)</h3>
          <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
            <div className="flex justify-between items-center border-b border-gray-700 pb-2">
              <span className="text-gray-400 text-sm">Name</span>
              <span className="text-gray-200 font-mono font-semibold">{uiName}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">Version</span>
              <span className="text-gray-200 font-mono font-semibold">{uiVersion}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">Revision (Commit ID)</span>
              <span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">{commitID}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">Build Time</span>
              <span className="text-gray-200 font-mono text-sm">{commitTimeStamp}</span>
            </div>
          </div>
        </div>
        <div className="space-y-3">
          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Backend</h3>
          <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
            <div className="flex justify-between items-center border-b border-gray-700 pb-2">
              <span className="text-gray-400 text-sm"> Name</span>
              <span className="text-gray-200 font-mono font-semibold">{data?.appname || "N/A"}</span>
            </div>
            <div className="flex justify-between items-center pb-2">
              <span className="text-gray-400 text-sm">Version</span>
              <span className="text-gray-200 font-mono font-semibold">{data?.version || "N/A"}</span>
            </div>
            <div className="flex justify-between items-center  pb-2">
              <span className="text-gray-400 text-sm">Revision (Commit ID)</span>
              <span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">
                {data?.revision || "N/A"}
              </span>
            </div>
            <div className="flex justify-between items-center  pb-2">
              <span className="text-gray-400 text-sm">Build Time</span>
              <span className="text-gray-200 font-mono text-sm">{data?.buildtime || "N/A"}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-400 text-sm">MAC Address</span>
              <span className="text-gray-200 font-mono text-sm">{data?.MAC || "N/A"}</span>
            </div>
          </div>
        </div>
      </div>
    </ModalComponent>
  );
 };
 export default DevModal;
--- a/src/ui/Footer.tsx
+++ b/src/ui/Footer.tsx
@@ -1,11 +1,25 @@
 import { useState } from "react";
 import Logo from "/MAV.svg";
 import DevModal from "./DevModal";
 import { useGetVersions } from "../hooks/useGetVersions";
 const Footer = () => {
  const [isDevModalOpen, setDevModalOpen] = useState(false);
  const { versionsQuery } = useGetVersions();
  const versionData = versionsQuery?.data;
  const handleClick = () => {
    setDevModalOpen(true);
  };
  return (
-    <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
+    <>
-      <img src={Logo} alt="Logo" width={100} height={100} />
+      <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
-      <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
+        <img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
-    </footer>
+        <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
      </footer>
      <DevModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionData} />
    </>
  );
 };
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,33 +1,76 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
 import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  return (
-    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+    <nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
-      <div className="w-28">
+      <div className="flex flex-row justify-between w-full items-center">
-        <Link to={"/"}>
+        <div className="w-28">
-          <img src={Logo} alt="Logo" width={150} height={150} />
+          <Link to={"/"} onClick={() => setIsMenuOpen(false)}>
-        </Link>
+            <img src={Logo} alt="Logo" width={150} height={150} />
          </Link>
        </div>
        <div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
          <FontAwesomeIcon icon={faBars} />
        </div>
      </div>
-      <div className="flex gap-4">
+
-        <Link to="/" className="[&.active]:font-bold">
+      <div className="md:flex hidden gap-4 text-lg items-center">
-          <FontAwesomeIcon icon={faGaugeHigh} />
+        <Link
          to="/"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
          Dashboard
        </Link>
-        <Link to="/baywatch" className="[&.active]:font-bold">
+        <Link
          to="/cameras"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Cameras
        </Link>
-        <Link to="/output" className="[&.active]:font-bold">
+        <Link
          to="/output"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Output
        </Link>
-        <Link to="/settings" className="[&.active]:font-bold">
+        <Link
          to="/settings"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Settings
        </Link>
      </div>
-    </header>
+      {/* mobile menu */}
      {isMenuOpen && (
        <div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
          <Link to="/" className="" onClick={toggleMenu}>
            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
            Dashboard
          </Link>
          <Link to="/cameras" className="" onClick={toggleMenu}>
            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
            Cameras
          </Link>
          <Link to="/output" className="" onClick={toggleMenu}>
            Output
          </Link>
          <Link to="/settings" className="" onClick={toggleMenu}>
            Settings
          </Link>
        </div>
      )}
    </nav>
  );
 };
--- a/src/ui/ModalComponent.tsx
+++ b/src/ui/ModalComponent.tsx
@@ -0,0 +1,39 @@
 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-[40%] 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;
--- a/src/ui/SliderComponent.tsx
+++ b/src/ui/SliderComponent.tsx
@@ -0,0 +1,24 @@
 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;
--- a/src/ui/StatusIndicators.tsx
+++ b/src/ui/StatusIndicators.tsx
@@ -0,0 +1,9 @@
 import clsx from "clsx";
 type StatusIndicatorsProps = { status: string };
 const StatusIndicators = ({ status }: StatusIndicatorsProps) => {
  return <span className={clsx(`flex w-3 h-3 me-2 rounded-full`, status)}></span>;
 };
 export default StatusIndicators;
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -0,0 +1,9 @@
 export const cambase = import.meta.env.VITE_BASEURL;
 export const CAMBASEWS = import.meta.env.VITE_BASE_WS;
 const environment = import.meta.env.MODE;
 export const CAMBASE = environment === "development" ? cambase : window.location.origin;
 export const CAMBASE_WS = environment === "development" ? CAMBASEWS : window.location.origin.replace(/^http/, "ws");
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -0,0 +1,20 @@
 import type { SystemHealthStatus } from "../types/types";
 export function capitalize(s?: string) {
  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
 }
 export const convertObjtoArray = (obj: Record<string, SystemHealthStatus[]>) => {
  if (!obj) return;
  const statusCategoryArray = Object.entries(obj);
  return statusCategoryArray;
 };
 // const data = {
 //   camera: cameraFeedID,
 //   cells: Array.from(paintedCells.entries()).map(([key, cell]) => ({
 //     position: key,
 //     ...cell,
 //     region: regions[selectedRegionIndex]?.name || "Unnamed",
 //   })),
 // };
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,6 @@
 /// <reference types="vite/client" />
 declare const __APP_NAME__: string;
 declare const __APP_VERSION__: string;
 declare const __GIT_COMMIT__: string;
 declare const __GIT_TIMESTAMP__: string;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,15 +2,55 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import pkg from "./package.json";
 import { execSync } from "child_process";
 const gitCommitHash = (() => {
  try {
    return execSync("git rev-parse --short HEAD").toString().trim();
  } catch {
    return "unknown";
  }
 })();
 const gitCommitTimeStamp = (() => {
  try {
    return execSync("git log -1 --format=%cd --date=iso").toString().trim();
  } catch {
    return "unknown";
  }
 })();
 // https://vite.dev/config/
 export default defineConfig({
  base: "/bayiq",
  define: {
    __APP_NAME__: JSON.stringify(pkg.name),
    __APP_VERSION__: JSON.stringify(pkg.version),
    __GIT_COMMIT__: JSON.stringify(gitCommitHash),
    __GIT_TIMESTAMP__: JSON.stringify(gitCommitTimeStamp),
  },
  plugins: [
    tanstackRouter({
      target: "react",
-      autoCodeSplitting: true,
+      autoCodeSplitting: false,
    }),
    react(),
    tailwindcss(),
  ],
  server: {
    proxy: {
      "/api": {
        target: "http://100.115.125.56",
        changeOrigin: true,
      },
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
 });
--- a/yarn.lock
+++ b/yarn.lock
@@ -226,6 +226,11 @@
    "@babel/plugin-transform-modules-commonjs" "^7.27.1"
    "@babel/plugin-transform-typescript" "^7.28.5"
 "@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
  version "7.28.4"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
  integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
 "@babel/template@^7.27.2":
  version "7.27.2"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
@@ -994,6 +999,13 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 "@types/hoist-non-react-statics@^3.3.1":
  version "3.3.7"
  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz#306e3a3a73828522efa1341159da4846e7573a6c"
  integrity sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==
  dependencies:
    hoist-non-react-statics "^3.3.0"
 "@types/json-schema@^7.0.15":
  version "7.0.15"
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -1011,6 +1023,13 @@
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
  integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==
 "@types/react-modal@^3.16.3":
  version "3.16.3"
  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013"
  integrity sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==
  dependencies:
    "@types/react" "*"
 "@types/react-reconciler@^0.28.9":
  version "0.28.9"
  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.9.tgz#d24b4864c384e770c83275b3fe73fba00269c83b"
@@ -1021,6 +1040,13 @@
  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.32.3.tgz#eb4b346f367f29f07628032934d30a4f3f9eaba7"
  integrity sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==
 "@types/react@*":
  version "19.2.7"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.7.tgz#84e62c0f23e8e4e5ac2cadcea1ffeacccae7f62f"
  integrity sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==
  dependencies:
    csstype "^3.2.2"
 "@types/react@^19.2.5":
  version "19.2.6"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.6.tgz#d27db1ff45012d53980f5589fda925278e1249ca"
@@ -1293,6 +1319,11 @@ chokidar@^3.6.0:
  optionalDependencies:
    fsevents "~2.3.2"
 classnames@^2.2.5:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 clsx@^2.0.0, clsx@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -1351,6 +1382,11 @@ deep-is@^0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 deepmerge@^2.1.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 detect-libc@^2.0.3:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
@@ -1528,6 +1564,11 @@ esutils@^2.0.2:
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 exenv@^1.2.0:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1601,6 +1642,20 @@ flatted@^3.2.9:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
  integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 formik@^2.4.9:
  version "2.4.9"
  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.9.tgz#7e5b81e9c9e215d0ce2ac8fed808cf7fba0cd204"
  integrity sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==
  dependencies:
    "@types/hoist-non-react-statics" "^3.3.1"
    deepmerge "^2.1.1"
    hoist-non-react-statics "^3.3.0"
    lodash "^4.17.21"
    lodash-es "^4.17.21"
    react-fast-compare "^2.0.1"
    tiny-warning "^1.0.2"
    tslib "^2.0.0"
 fraction.js@^5.3.4:
  version "5.3.4"
  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a"
@@ -1679,6 +1734,13 @@ hermes-parser@^0.25.1:
  dependencies:
    hermes-estree "0.25.1"
 hoist-non-react-statics@^3.3.0:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
  dependencies:
    react-is "^16.7.0"
 ignore@^5.2.0:
  version "5.3.2"
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
@@ -1886,12 +1948,22 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"
 lodash-es@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-loose-envify@^1.4.0:
+lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 loose-envify@^1.0.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2061,7 +2133,7 @@ prettier@^3.5.0:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.6.2.tgz#ccda02a1003ebbb2bfda6f83a074978f608b9393"
  integrity sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==
-prop-types@^15.5.0:
+prop-types@^15.5.0, prop-types@^15.7.2:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2080,6 +2152,23 @@ queue-microtask@^1.2.2:
  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 rc-slider@^11.1.9:
  version "11.1.9"
  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
  dependencies:
    "@babel/runtime" "^7.10.1"
    classnames "^2.2.5"
    rc-util "^5.36.0"
 rc-util@^5.36.0:
  version "5.44.4"
  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
  dependencies:
    "@babel/runtime" "^7.18.3"
    react-is "^18.2.0"
 react-dom@^19.2.0:
  version "19.2.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
@@ -2087,11 +2176,21 @@ react-dom@^19.2.0:
  dependencies:
    scheduler "^0.27.0"
-react-is@^16.13.1:
+react-fast-compare@^2.0.1:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 react-is@^18.2.0:
  version "18.3.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 react-konva@^19.2.0:
  version "19.2.0"
  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-19.2.0.tgz#b4cc5d73cd6d642569e4df36a0139996c3dcf8e6"
@@ -2102,6 +2201,21 @@ react-konva@^19.2.0:
    react-reconciler "0.33.0"
    scheduler "0.27.0"
 react-lifecycles-compat@^3.0.0:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 react-modal@^3.16.3:
  version "3.16.3"
  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.3.tgz#c412d41915782e3c261253435d01468e2439b11b"
  integrity sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==
  dependencies:
    exenv "^1.2.0"
    prop-types "^15.7.2"
    react-lifecycles-compat "^3.0.0"
    warning "^4.0.3"
 react-reconciler@0.33.0:
  version "0.33.0"
  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.33.0.tgz#9dd20208d45baa5b0b4701781f858236657f15e1"
@@ -2287,7 +2401,7 @@ tiny-invariant@^1.3.3:
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
-tiny-warning@^1.0.3:
+tiny-warning@^1.0.2, tiny-warning@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -2312,7 +2426,7 @@ ts-api-utils@^2.1.0:
  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91"
  integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==
-tslib@^2.0.1, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0:
  version "2.8.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -2379,6 +2493,11 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"
 use-debounce@^10.0.6:
  version "10.0.6"
  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
  integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
 use-sync-external-store@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
@@ -2398,6 +2517,13 @@ vite@^7.1.7, vite@^7.2.4:
  optionalDependencies:
    fsevents "~2.3.3"
 warning@^4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
  dependencies:
    loose-envify "^1.0.0"
 webpack-virtual-modules@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
Author	SHA1	Message	Date
TobaOjo	00ca9441b9	Merge pull request 'Implemented brush size feature in camera feed settings' (#32 ) from feature/brushsize into develop Reviewed-on: #32	2026-01-13 16:10:32 +00:00
Toba Ojo	1243ce2098	Implemented brush size feature in camera feed settings	2026-01-13 16:10:05 +00:00
TobaOjo	1653d9f0d4	Merge pull request 'bugfix/zoomchangeAndOneShot' (#31 ) from bugfix/zoomchangeAndOneShot into develop Reviewed-on: #31	2026-01-12 15:13:14 +00:00
Toba Ojo	eb5eb69c28	- added zoom options per camera and oneshot button - enhanced to remove painting when in zoom mode	2026-01-12 15:10:40 +00:00
Toba Ojo	61c85fdc3f	updated version	2025-12-23 15:00:09 +00:00
Toba Ojo	7877173f56	Add corner radius to video feed layer for improved aesthetics	2025-12-23 14:58:27 +00:00
TobaOjo	eb3f441a24	Merge pull request 'develop' (#30 ) from develop into main Reviewed-on: #30	2025-12-19 11:12:12 +00:00
TobaOjo	bf77d6001a	Merge pull request 'bugfix/minor-issues-2' (#27 ) from bugfix/minor-issues-2 into develop Reviewed-on: #27	2025-12-19 11:10:54 +00:00
Toba Ojo	0bdc8b25a8	- updated version	2025-12-19 11:09:58 +00:00
Toba Ojo	dfc14575a8	- removed console.logs	2025-12-19 09:42:07 +00:00
Toba Ojo	b328d25bc7	Add OSD and Payload configuration components with toggle functionality	2025-12-18 13:38:27 +00:00
TobaOjo	b79da7048e	Merge pull request 'enhancement/dynamiccameraFeed' (#26 ) from enhancement/dynamiccameraFeed into develop Reviewed-on: #26	2025-12-18 09:58:35 +00:00
Toba Ojo	dab49fd99c	Refactored routing components for better organization and maintainability	2025-12-17 16:07:01 +00:00
Toba Ojo	775fce7900	Refactor camera feed handling to support dynamic camera IDs and improve context management	2025-12-17 14:19:23 +00:00
TobaOjo	cc8b3a5691	Merge pull request 'more accurate system status' (#25 ) from bugfix/dashboard into develop Reviewed-on: #25	2025-12-17 09:46:26 +00:00
Toba Ojo	71ce2a9f91	- removed console.log - fixed issue for more extensive check into tags to be more accurate	2025-12-17 09:44:14 +00:00
Toba Ojo	3fbafbbcc7	- minor bugfixes - added developer modal for viewing app data	2025-12-12 12:18:17 +00:00
TobaOjo	b38fbe132b	Merge pull request 'develop' (#24 ) from develop into main Reviewed-on: #24	2025-12-12 08:33:36 +00:00
TobaOjo	9489fe2d6a	Merge branch 'main' into develop	2025-12-12 08:33:27 +00:00
Toba Ojo	3353ad6f8b	- updated paths and code splitting config	2025-12-12 08:32:06 +00:00
Toba Ojo	d1995f0a9f	- updated main endpoint end point and added flexibility for camera navigation	2025-12-11 10:52:13 +00:00
Toba Ojo	e395777ae9	- added modal for entry and exit sightings and plate patches	2025-12-10 22:32:30 +00:00
TobaOjo	ba93753df7	Merge pull request 'feature/ws-Camera' (#23 ) from feature/ws-Camera into develop Reviewed-on: #23	2025-12-10 14:09:24 +00:00
Toba Ojo	eb45eabde9	- improved magnification level text - removed magnification level	2025-12-10 14:08:44 +00:00
Toba Ojo	10e2644666	- improved zoom while clicking on on image to zoom	2025-12-10 13:09:07 +00:00
Toba Ojo	0ff43d975d	- added digital zoom functionality on fixed location via web sockets	2025-12-10 10:30:32 +00:00
TobaOjo	f0f311f316	Merge pull request 'develop' (#22 ) from develop into main Reviewed-on: #22	2025-12-09 15:54:52 +00:00
Toba Ojo	c73c5f4187	- adjusted button on settings	2025-12-09 15:53:20 +00:00
TobaOjo	0378667fe3	Merge pull request '- Enhanced responsiveness and layout adjustments across various components' (#21 ) from enhancement/responsive into develop Reviewed-on: #21	2025-12-09 14:09:06 +00:00
Toba Ojo	632962aeaf	- Enhanced responsiveness and layout adjustments across various components	2025-12-09 14:07:51 +00:00
TobaOjo	e6f4131c1e	Merge pull request 'Add zoom mode functionality and refactor video feed hooks' (#20 ) from feature/digitalZoom into develop Reviewed-on: #20	2025-12-09 13:04:10 +00:00
TobaOjo	06fe99b550	Merge branch 'develop' into feature/digitalZoom	2025-12-09 13:04:03 +00:00
TobaOjo	328c61cf98	Merge pull request '- implement camera zoom controls and state management' (#19 ) from feature/cameraControls-2 into develop Reviewed-on: #19	2025-12-09 13:03:42 +00:00
TobaOjo	a9f6c4a4ad	Merge branch 'develop' into feature/cameraControls-2	2025-12-09 13:03:34 +00:00
TobaOjo	59e09b7a8d	Merge pull request '- need endpoint for include and exclude' (#18 ) from feature/includeoption into develop Reviewed-on: #18	2025-12-09 13:03:08 +00:00
Toba Ojo	c6a336389b	Add zoom mode functionality and refactor video feed hooks - Implemented zoom mode in RegionSelector for digital zooming. - Updated VideoFeedGridPainter to handle zoom interactions. - Refactored useGetVideoFeed to support target detection and video feed queries based on mode. - Enhanced useCreateVideoSnapshot to manage snapshots during zoom mode.	2025-12-09 12:39:03 +00:00
Toba Ojo	b93b446614	- implement camera zoom controls and state management	2025-12-09 08:47:21 +00:00
Toba Ojo	a563a3c341	- need endpoint for include and exclude	2025-12-08 12:50:14 +00:00
TobaOjo	fa33b012cc	Merge pull request '- added reset all modal and integrate with camera settings' (#17 ) from feature/resetAll into develop Reviewed-on: #17	2025-12-08 11:50:14 +00:00
Toba Ojo	eefa98f03a	- added reset all modal and integrate with camera settings	2025-12-08 11:49:12 +00:00
TobaOjo	8b3bff8a45	Merge pull request '- added camera black board fetch and post' (#16 ) from feature/blackboard into develop Reviewed-on: #16	2025-12-08 11:03:47 +00:00
Toba Ojo	1628048ac5	- added camera black board fetch and post - region selector can save settings and painted regions and fetch on load - will add reset all	2025-12-08 10:59:46 +00:00
Toba Ojo	7cda7d5887	- general fixes across the app - minor fixes - code clean up and improvements	2025-12-08 09:03:04 +00:00
TobaOjo	4c53c04767	Merge pull request '- added OSD configuration components and hooks for managing overlay settings' (#15 ) from feature/osdOverlayOptions into develop Reviewed-on: #15	2025-12-06 21:17:24 +00:00
Toba Ojo	8a5a4f5c67	- added OSD configuration components and hooks for managing overlay settings	2025-12-06 21:16:11 +00:00
Toba Ojo	f0587a2b43	- improved layouts across app - adjusted card spacing	2025-12-05 17:01:57 +00:00
Toba Ojo	9e89193747	- finally fixed custom imput to match what is on backend on sighting amend endpoint	2025-12-05 12:53:42 +00:00
Toba Ojo	9208470e53	- addressing feedback	2025-12-04 19:14:14 +00:00
TobaOjo	3af4e585e7	Merge pull request '- added formik custom fields to settings and output' (#14 ) from enhancement/customFields into develop Reviewed-on: #14	2025-12-04 09:55:18 +00:00
Toba Ojo	7f9923167e	- added formik custom fields to settings and output	2025-12-03 19:51:02 +00:00
TobaOjo	018203b203	Merge pull request '- improved statuses acress dashboard and child cards' (#13 ) from enhancement/statusIndicators into develop Reviewed-on: #13	2025-12-03 16:06:14 +00:00
Toba Ojo	173b1d0e51	- improved statuses acress dashboard and child cards	2025-12-03 16:05:06 +00:00
TobaOjo	9b35deaf12	Merge pull request '- Enhance layout and responsiveness of camera components' (#12 ) from enhancement/videoFeed into develop Reviewed-on: #12	2025-12-03 13:42:43 +00:00
Toba Ojo	59bcb3c45b	- Enhance layout and responsiveness of camera components - update system health hook for periodic refetching	2025-12-03 13:39:18 +00:00
TobaOjo	10590e5658	Merge pull request 'enhancement/dashboardFeedback' (#11 ) from enhancement/dashboardFeedback into develop Reviewed-on: #11	2025-12-03 10:58:07 +00:00
Toba Ojo	f7964d4fc0	- added download button - added reads for number plate sightings	2025-12-03 10:46:36 +00:00
Toba Ojo	2a4afc7eae	- organised file structure for dashboard	2025-12-02 14:10:06 +00:00
TobaOjo	1810fc04b5	Merge pull request 'feature/settingsPage' (#10 ) from feature/settingsPage into develop Reviewed-on: #10	2025-12-02 13:54:56 +00:00
TobaOjo	d9594546a0	Merge branch 'develop' into feature/settingsPage	2025-12-02 13:54:47 +00:00
Toba Ojo	dbadc7388c	- added settings page - can post and get data from endpoint - moved toaster to main page - updated config for CORS	2025-12-02 13:45:44 +00:00
Toba Ojo	ce79591de0	- enhancedcamera settings and region painter. - Can send to the back end	2025-12-01 14:36:25 +00:00
TobaOjo	748be931ed	Merge pull request 'enhancement/systemHealth' (#9 ) from enhancement/systemHealth into develop Reviewed-on: #9	2025-12-01 09:41:36 +00:00
Toba Ojo	6cb2e88b3b	- added new dashboard items - added camera module statuses	2025-12-01 09:33:29 +00:00
Toba Ojo	4e02bafa6a	- added status grid items - add react modal pkg	2025-11-28 15:06:03 +00:00
TobaOjo	983f307c3f	Merge pull request 'Refactor camera feed components and add sighting tables' (#8 ) from feature/cameraControls into develop Reviewed-on: #8	2025-11-28 13:02:17 +00:00
Toba Ojo	ddb1fa1bf1	Refactor camera feed components and add sighting tables - Updated mode settings in camera feed reducer to use "painter" - Renamed PlatePatch component to SightingPatch and updated imports - Removed obsolete PlatePatch component - Added SightingEntryTable and SightingExitTable components for displaying sighting data - Implemented useSightingEntryAndExit hook for fetching entry and exit sightings - Adjusted VideoFeedGridPainter for improved width calculation - Introduced DecodeReading type for better typing	2025-11-28 12:58:42 +00:00
TobaOjo	c910a3dd50	Merge pull request 'feature/targetdetection' (#7 ) from feature/targetdetection into develop Reviewed-on: #7	2025-11-28 09:21:03 +00:00
Toba Ojo	690043e9f7	- updated ws endpoint	2025-11-28 09:18:46 +00:00
Toba Ojo	6428a8fa39	- added tabs for camera controls	2025-11-28 09:00:55 +00:00
Toba Ojo	bf31f94b32	- Enhanced camera feed state management with region handling and mode changes	2025-11-27 16:16:15 +00:00
Toba Ojo	f7dbde4511	- implemented isolated colouring depending on camera	2025-11-27 11:43:10 +00:00
Toba Ojo	1ada8d0966	- Implement CameraFeed context and provider with reducer for state management - able to switch footage on tab clicks	2025-11-27 10:43:56 +00:00
TobaOjo	6accac02de	Merge pull request 'feature/output-2' (#6 ) from feature/output-2 into develop Reviewed-on: #6	2025-11-27 09:45:11 +00:00
Toba Ojo	3c10ff82cb	- updated base for endpoints - added loading states - need to add new form for ftp type	2025-11-27 09:43:09 +00:00
Toba Ojo	97ff9a981d	- added form fetch and post for optional constants for UTMC	2025-11-26 15:31:19 +00:00
Toba Ojo	e07f769288	- refactor: replace Output component with OutputForms and update related hooks and types	2025-11-26 13:00:41 +00:00
Toba Ojo	90eb976092	- can get data need to post	2025-11-25 23:04:40 +00:00
Toba Ojo	225a2a6168	- added add and remove regions on paint selector	2025-11-25 20:49:11 +00:00
Toba Ojo	2aa0b4377f	- minor tweaks to ui across app	2025-11-25 15:49:53 +00:00
Toba Ojo	0d385061e0	- updated icon	2025-11-25 15:02:18 +00:00
TobaOjo	3bbb3166ba	Merge pull request '- improved ui for region selector and camera settings' (#5 ) from feature/cameras-2 into develop Reviewed-on: #5	2025-11-25 14:59:25 +00:00
Toba Ojo	18124924f7	- improved ui for region selector and camera settings	2025-11-25 14:57:18 +00:00
TobaOjo	6ecb005417	Merge pull request 'feature/outputPage' (#4 ) from feature/outputPage into develop Reviewed-on: #4	2025-11-25 10:23:57 +00:00
Toba Ojo	16829ad5a5	- created forms for JSON, BOF2, UTMC and FTP	2025-11-25 10:07:35 +00:00
Toba Ojo	ec81392899	started adding to the output form	2025-11-24 22:07:08 +00:00
TobaOjo	8c967b3ae2	Merge pull request 'feature/dashboardPage' (#3 ) from feature/dashboardPage into develop Reviewed-on: #3	2025-11-24 20:37:04 +00:00
Toba Ojo	27d2c6a1b9	- improved ui for dashboard - added refetch fn	2025-11-24 20:32:52 +00:00
Toba Ojo	31b6bd45f5	- improved Dashboard ui	2025-11-24 16:17:27 +00:00
Toba Ojo	c9dde6b992	- improved the system status ui	2025-11-24 14:54:05 +00:00
Toba Ojo	d15a69e6b9	Merge branch 'develop' into feature/dashboardPage	2025-11-24 13:32:28 +00:00
TobaOjo	b18e11ca6a	Merge pull request 'feature/baywatchPage' (#2 ) from feature/baywatchPage into develop Reviewed-on: #2	2025-11-24 13:30:23 +00:00
Toba Ojo	e984c74333	Merge branch 'develop' into feature/dashboardPage	2025-11-21 11:44:48 +00:00
Toba Ojo	25a744bd8d	addind dashboard features will come back to finish	2025-11-21 08:55:23 +00:00