Merge pull request 'develop' (#29 ) from develop into main

Reviewed-on: #29
Merge branch 'main' into develop
2026-01-13 16:11:33 +00:00 · 2026-01-13 16:11:22 +00:00 · 2026-01-13 16:10:32 +00:00 · 2026-01-13 16:10:05 +00:00 · 2026-01-12 15:13:42 +00:00 · 2026-01-12 15:13:14 +00:00
46 changed files with 992 additions and 447 deletions
--- 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",
--- 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/context/WebSocketContext.ts
+++ b/src/app/context/WebSocketContext.ts
@@ -17,9 +17,7 @@ type CameraSocketState = {

 export type WebSocketConextValue = {
  info: InfoSocketState;
-  cameraFeedA: CameraSocketState;
-  cameraFeedB: CameraSocketState;
-  cameraFeedC: CameraSocketState;
+  cameraFeed: CameraSocketState;
 };

 export const WebsocketContext = createContext<WebSocketConextValue | null>(null);
@@ -31,6 +29,4 @@ const useWebSocketContext = () => {
 };

 export const useInfoSocket = () => useWebSocketContext().info;
-export const useCameraFeedASocket = () => useWebSocketContext().cameraFeedA;
-export const useCameraFeedBSocket = () => useWebSocketContext().cameraFeedB;
-export const useCameraFeedCSocket = () => useWebSocketContext().cameraFeedC;
+export const useCameraFeedSocket = () => useWebSocketContext().cameraFeed;
--- a/src/app/providers/CameraFeedProvider.tsx
+++ b/src/app/providers/CameraFeedProvider.tsx
@@ -3,13 +3,12 @@ import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
 import { useBlackBoard } from "../../hooks/useBlackBoard";
 import type { CameraFeedState } from "../../types/types";
-import { useCameraZoom } from "../../features/cameras/hooks/useCameraZoom";
+
+import { CAMERA_IDS } from "../config/cameraConfig";
+import CameraZoomFetcher from "./CameraZoomFetcher";

 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
  const { blackboardMutation } = useBlackBoard();
-  const { cameraZoomQuery: cameraZoomQueryA } = useCameraZoom("A");
-  const { cameraZoomQuery: cameraZoomQueryB } = useCameraZoom("B");
-  const { cameraZoomQuery: cameraZoomQueryC } = useCameraZoom("C");

  const [state, dispatch] = useReducer(reducer, initialState);

@@ -23,52 +22,25 @@ export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
      const cameraFeedData: CameraFeedState = result.result;
      const recontructedState = {
        ...cameraFeedData,
-        paintedCells: {
-          A: new Map(cameraFeedData.paintedCells.A),
-          B: new Map(cameraFeedData.paintedCells.B),
-          C: new Map(cameraFeedData.paintedCells.C),
-        },
+        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();
  }, []);

-  useEffect(() => {
-    const fetchZoomLevels = async () => {
-      const [resultA, resultB, resultC] = await Promise.all([
-        cameraZoomQueryA.refetch(),
-        cameraZoomQueryB.refetch(),
-        cameraZoomQueryC.refetch(),
-      ]);
-
-      const zoomLevelAnumber = parseFloat(resultA.data?.propPhysCurrent?.value);
-      const zoomLevelBnumber = parseFloat(resultB.data?.propPhysCurrent?.value);
-      const zoomLevelCnumber = parseFloat(resultC.data?.propPhysCurrent?.value);
-
-      if (resultA.data) {
-        dispatch({
-          type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: "A", zoomLevel: zoomLevelAnumber },
-        });
-      }
-
-      if (resultB.data) {
-        dispatch({
-          type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: "B", zoomLevel: zoomLevelBnumber },
-        });
-      }
-
-      if (resultC.data) {
-        dispatch({
-          type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: "C", zoomLevel: zoomLevelCnumber },
-        });
-      }
-    };
-    fetchZoomLevels();
-  }, []);
-
-  return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
+  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
@@ -3,18 +3,28 @@ import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocke
 import useWebSocket from "react-use-websocket";
 import { wsConfig } from "../config/wsconfig";
 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 cameraFeedASocket = useWebSocket(wsConfig.cameraFeedA, { share: true, shouldReconnect: () => true });
-  const cameraFeedBSocket = useWebSocket(wsConfig.cameraFeedB, { share: true, shouldReconnect: () => true });
-  const cameraFeedCSocket = useWebSocket(wsConfig.cameraFeedC, { 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() {
@@ -23,20 +33,15 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
        const data = JSON.parse(text);
        setSystemData(data);
      }
-      if (cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage) {
-        const message = cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage;
+      if (cameraFeed.lastMessage) {
+        const message = cameraFeed.lastMessage;
        const data = await message?.data.text();
        const parsedData: CameraZoomData = JSON.parse(data || "");
        setSocketData(parsedData);
      }
    }
    parseData();
-  }, [
-    cameraFeedASocket.lastMessage,
-    cameraFeedBSocket.lastMessage,
-    cameraFeedCSocket.lastMessage,
-    infoSocket.lastMessage,
-  ]);
+  }, [cameraFeed.lastMessage, infoSocket.lastMessage]);

  const value = useMemo<WebSocketConextValue>(
    () => ({
@@ -45,32 +50,16 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
        readyState: infoSocket.readyState,
        sendJson: infoSocket.sendJsonMessage,
      },
-      cameraFeedA: {
+      cameraFeed: {
        data: socketData,
-        readyState: cameraFeedASocket.readyState,
+        readyState: cameraFeed.readyState,

-        send: cameraFeedASocket.sendMessage,
-      },
-      cameraFeedB: {
-        data: socketData,
-        readyState: cameraFeedBSocket.readyState,
-
-        send: cameraFeedBSocket.sendMessage,
-      },
-      cameraFeedC: {
-        data: socketData,
-        readyState: cameraFeedCSocket.readyState,
-
-        send: cameraFeedCSocket.sendMessage,
+        send: cameraFeed.sendMessage,
      },
    }),
    [
-      cameraFeedASocket.readyState,
-      cameraFeedASocket.sendMessage,
-      cameraFeedBSocket.readyState,
-      cameraFeedBSocket.sendMessage,
-      cameraFeedCSocket.readyState,
-      cameraFeedCSocket.sendMessage,
+      cameraFeed.readyState,
+      cameraFeed.sendMessage,
      infoSocket.readyState,
      infoSocket.sendJsonMessage,
      socketData,
--- a/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -1,47 +1,39 @@
 import type { CameraFeedAction, CameraFeedState, PaintedCell } from "../../types/types";
+import { CAMERA_IDS, DEFAULT_REGIONS, type CameraID } from "../config/cameraConfig";

 export const initialState: CameraFeedState = {
-  cameraFeedID: "A",
-  paintedCells: {
-    A: new Map<string, PaintedCell>(),
-    B: new Map<string, PaintedCell>(),
-    C: new Map<string, PaintedCell>(),
-  },
-  regionsByCamera: {
-    A: [
-      { 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" },
-    ],
-    B: [
-      { 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" },
-    ],
-    C: [
-      { 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" },
-    ],
-  },
+  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: {
-    A: "painter",
-    B: "painter",
-    C: "painter",
-  },
-  zoomLevel: {
-    A: 1,
-    B: 1,
-    C: 1,
-  },
+  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) {
@@ -119,6 +111,12 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
          [action.payload.cameraFeedID]: action.payload.zoomLevel,
        },
      };
+
+    case "SET_BRUSH_SIZE":
+      return {
+        ...state,
+        brushSize: action.payload.brushSize,
+      };
    default:
      return state;
  }
--- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
@@ -1,5 +1,5 @@
 import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
 import CameraControls from "./cameraControls/CameraControls";
@@ -13,6 +13,7 @@ type CameraPanelProps = {

 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];

@@ -28,6 +29,7 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
          return "B";
        case 2:
          return "C";
+        //Add more cases if more cameras are added
        default:
          return "A";
      }
@@ -38,7 +40,7 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
  }, [dispatch, tabIndex]);

  return (
-    <Tabs>
+    <Tabs onSelect={(index) => setSubTabIndex(index)}>
      <TabList>
        <Tab>Target Detection</Tab>
        <Tab>Camera Controls</Tab>
@@ -52,10 +54,11 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
          isResetAllModalOpen={isResetAllModalOpen}
          handleClose={handleClose}
          setIsResetModalOpen={setIsResetModalOpen}
+          subTabIndex={subTabIndex}
        />
      </TabPanel>
      <TabPanel>
-        <CameraControls cameraFeedID={cameraFeedID} />
+        <CameraControls cameraFeedID={cameraFeedID} subTabIndex={subTabIndex} />
      </TabPanel>
    </Tabs>
  );
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -2,6 +2,7 @@ import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import CameraPanel from "./CameraPanel";
+import { CAMERA_IDS } from "../../../../app/config/cameraConfig";

 type CameraSettingsProps = {
  setTabIndex: (tabIndex: number) => void;
@@ -12,7 +13,6 @@ type CameraSettingsProps = {
 };

 const CameraSettings = ({
-  tabIndex,
  setTabIndex,
  isResetAllModalOpen,
  handleClose,
@@ -26,34 +26,20 @@ const CameraSettings = ({
        onSelect={(index) => setTabIndex(index)}
      >
        <TabList>
-          <Tab>Camera A</Tab>
-          <Tab>Camera B</Tab>
-          <Tab>Camera C</Tab>
+          {CAMERA_IDS.map((id) => (
+            <Tab key={id}>Camera {id}</Tab>
+          ))}
        </TabList>
-        <TabPanel>
-          <CameraPanel
-            tabIndex={tabIndex}
-            isResetAllModalOpen={isResetAllModalOpen}
-            handleClose={handleClose}
-            setIsResetModalOpen={setIsResetModalOpen}
-          />
-        </TabPanel>
-        <TabPanel>
-          <CameraPanel
-            tabIndex={tabIndex}
-            isResetAllModalOpen={isResetAllModalOpen}
-            handleClose={handleClose}
-            setIsResetModalOpen={setIsResetModalOpen}
-          />
-        </TabPanel>
-        <TabPanel>
-          <CameraPanel
-            tabIndex={tabIndex}
-            isResetAllModalOpen={isResetAllModalOpen}
-            handleClose={handleClose}
-            setIsResetModalOpen={setIsResetModalOpen}
-          />
-        </TabPanel>
+        {CAMERA_IDS.map((id, index) => (
+          <TabPanel key={id}>
+            <CameraPanel
+              tabIndex={index}
+              isResetAllModalOpen={isResetAllModalOpen}
+              handleClose={handleClose}
+              setIsResetModalOpen={setIsResetModalOpen}
+            />
+          </TabPanel>
+        ))}
      </Tabs>
    </Card>
  );
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -4,20 +4,20 @@ import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext"
 import { useColourDectection } from "../../hooks/useColourDetection";
 import { useBlackBoard } from "../../../../hooks/useBlackBoard";
 import { toast } from "sonner";
-import {
-  useCameraFeedASocket,
-  useCameraFeedBSocket,
-  useCameraFeedCSocket,
-} from "../../../../app/context/WebSocketContext";
+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;
  mode: string;
-  cameraFeedID: "A" | "B" | "C";
+  cameraFeedID: CameraID;
  isResetAllModalOpen: boolean;
  handleClose: () => void;
  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  subTabIndex?: number;
 };

 const RegionSelector = ({
@@ -26,35 +26,38 @@ const RegionSelector = ({
  mode,
  cameraFeedID,
  isResetAllModalOpen,
-
+  subTabIndex,
  setIsResetModalOpen,
 }: RegionSelectorProps) => {
  const { colourMutation } = useColourDectection();
  const { state, dispatch } = useCameraFeedContext();
  const { blackboardMutation } = useBlackBoard();
  const paintedCells = state.paintedCells[cameraFeedID];
-  const cameraASocket = useCameraFeedASocket();
-  const cameraBSocket = useCameraFeedBSocket();
-  const cameraCSocket = useCameraFeedCSocket();
+  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 cameraASocket;
+        return cameraSocket;
      case "B":
-        return cameraBSocket;
+        return cameraSocket;
      case "C":
-        return cameraCSocket;
+        return cameraSocket;
    }
  };

  const socket = getCurrentSocket();

  const getMagnificationLevel = () => {
-    const test = socket.data;
-    if (!socket.data) return null;
-
-    if (!test || !test.magnificationLevel) return "0x";
+    const test = socket?.data;
+    if (!socket?.data) return null;
+    if (!test || !test.magnificationLevel) return "1x";
    return test?.magnificationLevel;
  };

@@ -108,12 +111,12 @@ const RegionSelector = ({

  const handleSaveclick = () => {
    const regions: ColourData[] = [];
-    const test = Array.from(paintedCells.entries());
-    const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
-    const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
-    const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
-    const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
-    const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
+    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])]),
@@ -152,7 +155,7 @@ const RegionSelector = ({

    colourMutation.mutate({ cameraFeedID, regions: regions });

-    // Convert Map to plain object for blackboard
+    // Convert map to plain object for blackboard
    const serializableState = {
      ...state,
      paintedCells: {
@@ -170,7 +173,7 @@ const RegionSelector = ({
      <div className="flex flex-col md:flex-row gap-3">
        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
          <h2 className="text-2xl mb-2">Tools</h2>
-          <div className="flex flex-col">
+          <div className="flex flex-col gap-2">
            <label
              htmlFor="paintMode"
              className={`p-4 border rounded-lg  mb-2
@@ -203,6 +206,19 @@ const RegionSelector = ({
              />
              <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
@@ -238,7 +254,7 @@ const RegionSelector = ({
              />
              <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>
+                <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>
@@ -282,10 +298,16 @@ const RegionSelector = ({
            })}
          </>
          <div className="flex flex-col gap-4  mt-4">
-            <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
+            <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" onClick={handleRemoveClick}>
+            <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>
--- a/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
+++ b/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
@@ -1,17 +1,31 @@
+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: "A" | "B" | "C";
+  cameraFeedID: CameraID;
+  subTabIndex?: number;
 };

-const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
+const CameraControls = ({ cameraFeedID, subTabIndex }: CameraControlsProps) => {
  const { state, dispatch } = useCameraFeedContext();
-  const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
+  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 zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
  const debouncedMutation = useDebouncedCallback(async (value) => {
    await cameraZoomMutation.mutateAsync({
      cameraFeedID,
@@ -23,17 +37,34 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
    const newZoom = value as number;
    dispatch({
      type: "SET_ZOOM_LEVEL",
-      payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
+      payload: { cameraFeedID: cameraFeedID, zoomLevel: newZoom },
    });
    debouncedMutation(newZoom);
  };

+  const handleOneShotClick = () => {
+    debouncedMutation(normalizedZoomLevel);
+  };
+
  return (
-    <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={1} max={3} step={0.1} />
+    <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>
  );
--- a/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
@@ -1,73 +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 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" key={reading?.id}>
-                <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>
+    <>
+      <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>
-            ))}
-          </tbody>
-        </table>
-      </div>
+            </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 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"
-          >
-            <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>
+        {/* 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">
-                <span className="text-gray-500">Last Seen:</span>
-                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              <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>
      </div>
-    </div>
+      <PlatePatchModal
+        isPlatePatchModalOpen={isPlatePatchModalOpen}
+        handleClose={() => setIsPlatePatchModalOpen(false)}
+        currentPatch={currentPatch}
+        direction={"entry"}
+      />
+    </>
  );
 };

--- a/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
@@ -1,8 +1,12 @@
+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);
@@ -10,64 +14,82 @@ const SightingExitTable = () => {
  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" key={reading?.id}>
-                <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>
+    <>
+      <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>
-            ))}
-          </tbody>
-        </table>
-      </div>
+            </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"
-          >
-            <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>
+        {/* 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">
-                <span className="text-gray-500">Last Seen:</span>
-                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              <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>
      </div>
-    </div>
+      <PlatePatchModal
+        isPlatePatchModalOpen={isPlatePatchModalOpen}
+        handleClose={() => setIsPlatePatchModalOpen(false)}
+        currentPatch={currentPatch}
+        direction={"exit"}
+      />
+    </>
  );
 };

--- 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
@@ -3,13 +3,10 @@ import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
-import {
-  useCameraFeedASocket,
-  useCameraFeedBSocket,
-  useCameraFeedCSocket,
-} from "../../../../app/context/WebSocketContext";
+import { useCameraFeedSocket } from "../../../../app/context/WebSocketContext";
 import { ReadyState } from "react-use-websocket";
 import { toast } from "sonner";
+import type { CameraID } from "../../../../app/config/cameraConfig";

 const BACKEND_WIDTH = 640;
 const BACKEND_HEIGHT = 360;
@@ -26,6 +23,8 @@ const VideoFeedGridPainter = () => {
  const regions = state.regionsByCamera[cameraFeedID];
  const selectedRegionIndex = state.selectedRegionIndex;
  const mode = state.modeByCamera[cameraFeedID];
+  const brushSize = state.brushSize;
+
  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
  const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
  const isDrawingRef = useRef(false);
@@ -35,28 +34,26 @@ const VideoFeedGridPainter = () => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const stageRef = useRef<any>(null);

-  const currentScale = stageSize.width / BACKEND_WIDTH;
-  const size = BACKEND_CELL_SIZE * currentScale;
-
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const paintLayerRef = useRef<any>(null);

-  const cameraASocket = useCameraFeedASocket();
-  const cameraBSocket = useCameraFeedBSocket();
-  const cameraCSocket = useCameraFeedCSocket();
+  const currentScale = stageSize.width / BACKEND_WIDTH;
+  const size = BACKEND_CELL_SIZE * currentScale;
+
+  const cameraSocket = useCameraFeedSocket();

  const getCurrentSocket = () => {
    switch (cameraFeedID) {
      case "A":
-        return cameraASocket;
+        return cameraSocket;
      case "B":
-        return cameraBSocket;
+        return cameraSocket;
      case "C":
-        return cameraCSocket;
+        return cameraSocket;
    }
  };

-  const handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: "A" | "B" | "C") => {
+  const handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: CameraID) => {
    if (mode !== "zoom") return;
    const socket = getCurrentSocket();
    const stage = e.target.getStage();
@@ -90,34 +87,37 @@ const VideoFeedGridPainter = () => {

  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 = paintedCells;
-    const existing = map.get(key);
-
-    if (mode === "eraser") {
-      if (map.has(key)) {
-        map.delete(key);
-        paintLayerRef.current?.batchDraw();
+    for (let r = row - radius; r <= row + radius; r++) {
+      for (let c = col - radius; c <= col + radius; c++) {
+        if (r < 0 || r >= rows || c < 0 || c >= cols) continue;
+        const key = `${r}-${c}`;
+        const map = paintedCells;
+        const existing = map.get(key);
+        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, region: activeRegion });
-
    paintLayerRef.current?.batchDraw();
  };

@@ -125,14 +125,14 @@ const VideoFeedGridPainter = () => {
    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 || 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 = () => {
@@ -206,7 +206,7 @@ const VideoFeedGridPainter = () => {
        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
          scaleX={scale}
@@ -223,6 +223,7 @@ const VideoFeedGridPainter = () => {
            height={stageSize.height}
            classname={"rounded-lg"}
            onClick={(e) => handleZoomClick(e, cameraFeedID)}
+            cornerRadius={10}
          />
        </Layer>

--- a/src/features/cameras/hooks/useCameraZoom.ts
+++ b/src/features/cameras/hooks/useCameraZoom.ts
@@ -1,6 +1,7 @@
 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`);
@@ -22,11 +23,13 @@ const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
    id: `Camera${zoomConfig.cameraFeedID}-onvif-controller`,
    fields,
  };
-  console.log(zoomPayload);
-  const response = await fetch(`${CAMBASE}/api/update-config`, {
-    method: "POST",
-    body: JSON.stringify(zoomPayload),
-  });
+  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");
@@ -34,7 +37,7 @@ const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
  return response.json();
 };

-export const useCameraZoom = (cameraFeedID: "A" | "B" | "C") => {
+export const useCameraZoom = (cameraFeedID: CameraID) => {
  const cameraZoomQuery = useQuery({
    queryKey: ["cameraZoom", cameraFeedID],
    queryFn: () => fetchZoomLevel(cameraFeedID),
--- a/src/features/cameras/hooks/useGetVideoFeed.ts
+++ b/src/features/cameras/hooks/useGetVideoFeed.ts
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
+import type { CameraID } from "../../../app/config/cameraConfig";

-const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+const targetDectionFeed = async (cameraFeedID: CameraID | null) => {
  const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
    signal: AbortSignal.timeout(300000),
    cache: "no-store",
@@ -12,7 +13,7 @@ const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
  return response.blob();
 };

-const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+const getVideoFeed = async (cameraFeedID: CameraID | null) => {
  const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, {
    signal: AbortSignal.timeout(300000),
    cache: "no-store",
@@ -23,7 +24,7 @@ const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
  return response.blob();
 };

-export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: string) => {
+export const useGetVideoFeed = (cameraFeedID: CameraID | null, mode: string) => {
  const targetDetectionQuery = useQuery({
    queryKey: ["getfeed", cameraFeedID],
    queryFn: () => targetDectionFeed(cameraFeedID),
--- a/src/features/cameras/hooks/useGetvideoSnapshots.ts
+++ b/src/features/cameras/hooks/useGetvideoSnapshots.ts
@@ -24,7 +24,11 @@ export const useCreateVideoSnapshot = () => {
      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/dashboard/components/DashboardGrid.tsx
+++ b/src/features/dashboard/components/DashboardGrid.tsx
@@ -3,6 +3,7 @@ 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();
@@ -26,30 +27,35 @@ const DashboardGrid = () => {
      channelA: [],
      channelB: [],
      channelC: [],
+      // todo: check if more cameras will be added later
      default: [],
    },
  );

-  const categoryA = statusCategories?.channelA ?? [];
-  const categoryB = statusCategories?.channelB ?? [];
-  const categoryC = statusCategories?.channelC ?? [];
-
  return (
    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
-      <SystemStatusCard />
-      <SystemHealthCard
-        startTime={startTime}
-        uptime={uptime}
-        statuses={statuses}
-        isLoading={isLoading}
-        isError={isError}
-        dateUpdatedAt={dateUpdatedAt}
-        refetch={refetch}
-      />
-      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
-        <CameraStatus title="Camera A" category={categoryA} isError={isError} />
-        <CameraStatus title="Camera B" category={categoryB} isError={isError} />
-        <CameraStatus title="Camera C" category={categoryC} isError={isError} />
+      <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/cameraStatus/CameraStatus.tsx
+++ b/src/features/dashboard/components/cameraStatus/CameraStatus.tsx
@@ -11,10 +11,14 @@ type CameraStatusProps = {
 };

 const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
-  const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
-  // check if some are down
-  // check if all are down
-  //check if offline
+  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">
--- a/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx
+++ b/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import type { SystemHealthStatus } from "../../../../types/types";
-import { capitalize } from "../../../../utils/utils";
+
 import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
+import Badge from "../../../../ui/Badge";

 type CameraStatusGridItemProps = {
  title: string;
@@ -10,7 +11,14 @@ type CameraStatusGridItemProps = {

 const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemProps) => {
  const [isOpen, setIsOpen] = useState(false);
-  const isAllGood = statusCategory?.every((status) => status.tags.includes("RUNNING"));
+  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);
@@ -21,8 +29,21 @@ const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemPro
        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)}
      >
-        <h3 className="text-lg flex flex-row items-center">{capitalize(title)}</h3>
-        <p className="text-sm text-slate-300">{isAllGood ? "Click to view module status" : "Some systems down"}</p>
+        <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}
--- a/src/features/dashboard/components/systemHealth/SystemHealth.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealth.tsx
@@ -39,7 +39,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
  }
  return (
    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
-      <div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+      <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>
--- a/src/features/dashboard/components/systemHealth/SystemHealthCard.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealthCard.tsx
@@ -25,7 +25,7 @@ const SystemHealthCard = ({
  refetch,
 }: SystemOverviewProps) => {
  return (
-    <Card className="p-4">
+    <Card className="p-4 ">
      <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
      <SystemHealth
        startTime={startTime}
--- a/src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
+++ b/src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
@@ -29,7 +29,7 @@ const SystemStatusCard = () => {
    );
  }
  return (
-    <Card className="p-4">
+    <Card className="p-4 ">
      <CardHeader title="System Status" />
      {stats ? (
        <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
--- a/src/features/output/components/OSD/OSDFieldToggle.tsx
+++ b/src/features/output/components/OSD/OSDFieldToggle.tsx
--- a/src/features/output/components/OSD/OSDFields.tsx
+++ b/src/features/output/components/OSD/OSDFields.tsx
@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from "formik";
-import { useOSDConfig } from "../hooks/useOSDConfig";
+import { useOSDConfig } from "../../hooks/useOSDConfig";
 import OSDFieldToggle from "./OSDFieldToggle";
-import type { OSDConfigFields } from "../../../types/types";
+import type { OSDConfigFields } from "../../../../types/types";
 import { toast } from "sonner";

 type OSDFieldsProps = {
@@ -12,7 +12,16 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
  const { osdMutation } = useOSDConfig();
  const { values } = useFormikContext<OSDConfigFields>();

-  const includeKeys = Object.keys(values as OSDConfigFields).filter((value) => value.includes("include"));
+  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);
--- a/src/features/output/components/OSD/OSDOptionsCard.tsx
+++ b/src/features/output/components/OSD/OSDOptionsCard.tsx
@@ -1,5 +1,6 @@
-import Card from "../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
+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";
@@ -15,13 +16,13 @@ const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
      <Tabs>
        <TabList>
          <Tab>OSD Settings</Tab>
-          <Tab>payload Settings</Tab>
+          <Tab>Payload Settings</Tab>
        </TabList>
        <TabPanel>
          <OSDFields isOSDLoading={isOSDLoading} />
        </TabPanel>
        <TabPanel>
-          <div>payload settings</div>
+          <PayloadOptions />
        </TabPanel>
      </Tabs>
    </Card>
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -6,7 +6,7 @@ import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
 import { useCustomFields } from "../hooks/useCustomFields";
-import OSDOptionsCard from "./OSDOptionsCard";
+import OSDOptionsCard from "./OSD/OSDOptionsCard";
 import { useOSDConfig } from "../hooks/useOSDConfig";

 const OutputForms = () => {
@@ -89,6 +89,39 @@ const OutputForms = () => {
    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) => {
--- 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/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/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/main.tsx
+++ b/src/main.tsx
@@ -6,7 +6,10 @@ 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");

--- 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({
-  id: '/baywatch',
-  path: '/baywatch',
+const CamerasRoute = CamerasRouteImport.update({
+  id: '/cameras',
+  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'
-  id: '__root__' | '/' | '/about' | '/baywatch' | '/output' | '/settings'
+  to: '/' | '/about' | '/cameras' | '/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': {
-      id: '/baywatch'
-      path: '/baywatch'
-      fullPath: '/baywatch'
-      preLoaderRoute: typeof BaywatchRouteImport
+    '/cameras': {
+      id: '/cameras'
+      path: '/cameras'
+      fullPath: '/cameras'
+      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/baywatch.tsx
+++ b/src/routes/baywatch.tsx
@@ -1,14 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
 import CameraGrid from "../features/cameras/components/CameraGrid";

-export const Route = createFileRoute("/baywatch")({
+export const Route = createFileRoute("/cameras")({
  component: RouteComponent,
 });

 function RouteComponent() {
-  return (
-    <div>
-      <CameraGrid />
-    </div>
-  );
+  return <CameraGrid />;
 }
--- a/src/routes/output.tsx
+++ b/src/routes/output.tsx
@@ -6,9 +6,5 @@ export const Route = createFileRoute("/output")({
 });

 function RouteComponent() {
-  return (
-    <div>
-      <OutputForms />
-    </div>
-  );
+  return <OutputForms />;
 }
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -6,9 +6,5 @@ export const Route = createFileRoute("/settings")({
 });

 function RouteComponent() {
-  return (
-    <div>
-      <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;
@@ -86,7 +88,51 @@ export type OSDConfigFields = {
  OSDTimestampFormat: "UTC" | "LOCAL";
 };

-export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs & CustomFields & OSDConfigFields;
+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;
@@ -128,57 +174,43 @@ export type OptionalBOF2LaneIDs = {
 };

 export type CameraFeedState = {
-  cameraFeedID: "A" | "B" | "C";
-  paintedCells: {
-    A: Map<string, PaintedCell>;
-    B: Map<string, PaintedCell>;
-    C: Map<string, PaintedCell>;
-  };
-  regionsByCamera: {
-    A: Region[];
-    B: Region[];
-    C: Region[];
-  };
+  cameraFeedID: CameraID;
+  brushSize: number;
+  paintedCells: Record<CameraID, Map<string, PaintedCell>>;
+
+  regionsByCamera: Record<CameraID, Region[]>;
  selectedRegionIndex: number;
-  modeByCamera: {
-    A: string;
-    B: string;
-    C: string;
-  };
+  modeByCamera: Record<CameraID, string>;

  tabIndex?: number;
-  zoomLevel: {
-    A: number;
-    B: number;
-    C: number;
-  };
+  zoomLevel: Record<CameraID, number>;
 };

 export type CameraFeedAction =
  | {
      type: "SET_CAMERA_FEED";
-      payload: "A" | "B" | "C";
+      payload: CameraID;
    }
  | {
      type: "CHANGE_MODE";
-      payload: { cameraFeedID: "A" | "B" | "C"; mode: string };
+      payload: { cameraFeedID: CameraID; mode: string };
    }
  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
  | {
      type: "SET_SELECTED_REGION_COLOUR";
-      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string; newColour: string };
+      payload: { cameraFeedID: CameraID; regionName: string; newColour: string };
    }
  | {
      type: "ADD_NEW_REGION";
-      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string; brushColour: string };
+      payload: { cameraFeedID: CameraID; regionName: string; brushColour: string };
    }
  | {
      type: "REMOVE_REGION";
-      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string };
+      payload: { cameraFeedID: CameraID; regionName: string };
    }
  | {
      type: "RESET_PAINTED_CELLS";
-      payload: { cameraFeedID: "A" | "B" | "C"; paintedCells: Map<string, PaintedCell> };
+      payload: { cameraFeedID: CameraID; paintedCells: Map<string, PaintedCell> };
    }
  | {
      type: "SET_CAMERA_FEED_DATA";
@@ -189,7 +221,11 @@ export type CameraFeedAction =
    }
  | {
      type: "SET_ZOOM_LEVEL";
-      payload: { cameraFeedID: "A" | "B" | "C"; zoomLevel: number };
+      payload: { cameraFeedID: CameraID; zoomLevel: number };
+    }
+  | {
+      type: "SET_BRUSH_SIZE";
+      payload: { brushSize: number };
    };

 export type DecodeReading = {
@@ -202,6 +238,7 @@ export type DecodeReading = {
  duplicate?: true;
  firstSeenTimeHumane: string;
  lastSeenTimeHumane: string;
+  plate?: string;
 };

 export type ColourData = {
@@ -210,7 +247,7 @@ export type ColourData = {
 };

 export type ColourDetectionPayload = {
-  cameraFeedID: "A" | "B" | "C";
+  cameraFeedID: CameraID;
  regions: ColourData[];
 };

@@ -242,3 +279,16 @@ export type BlackBoardOptions = {
 };

 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/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} />
-      <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
-    </footer>
+    <>
+      <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} onClick={handleClick} />
+        <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
@@ -33,7 +33,7 @@ const Header = () => {
        </Link>

        <Link
-          to="/baywatch"
+          to="/cameras"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
        >
          Cameras
@@ -58,7 +58,7 @@ const Header = () => {
            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
            Dashboard
          </Link>
-          <Link to="/baywatch" className="" onClick={toggleMenu}>
+          <Link to="/cameras" className="" onClick={toggleMenu}>
            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
            Cameras
          </Link>
--- a/src/ui/ModalComponent.tsx
+++ b/src/ui/ModalComponent.tsx
@@ -26,7 +26,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
      <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"
+          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>
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,3 +1,9 @@
-export const CAMBASE = import.meta.env.VITE_BASEURL;
+export const cambase = import.meta.env.VITE_BASEURL;

-export const CAMBASE_WS = import.meta.env.VITE_BASE_WS;
+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/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,13 +2,38 @@ 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(),
@@ -21,4 +46,11 @@ export default defineConfig({
      },
    },
  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
 });
Author	SHA1	Message	Date
TobaOjo	a6235a6844	Merge pull request 'develop' (#29 ) from develop into main Reviewed-on: #29	2026-01-13 16:11:33 +00:00
TobaOjo	9520aa5dac	Merge branch 'main' into develop	2026-01-13 16:11:22 +00:00
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	845d603ae3	Merge pull request 'develop' (#28 ) from develop into main Reviewed-on: #28	2026-01-12 15:13:42 +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
TobaOjo	f0f311f316	Merge pull request 'develop' (#22 ) from develop into main Reviewed-on: #22	2025-12-09 15:54:52 +00:00