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
Merge pull request 'feature/targetdetection' (#7 ) from feature/targetdetection into develop
2025-11-28 12:58:42 +00:00 · 2025-11-28 09:21:03 +00:00 · 2025-11-28 09:18:46 +00:00 · 2025-11-28 09:00:55 +00:00 · 2025-11-27 16:16:15 +00:00 · 2025-11-27 11:43:10 +00:00
38 changed files with 1411 additions and 171 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <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>BayIQ</title>
  </head>
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@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",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
--- 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/wsconfig.ts
+++ b/src/app/config/wsconfig.ts
@@ -1,5 +1,5 @@
 export const wsConfig = {
-  infoBar: "ws://100.115.148.59/websocket-infobar",
+  infoBar: "ws://100.115.125.56/websocket-infobar",
 };
 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/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,9 @@
 import { useReducer, type ReactNode } from "react";
 import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
 };
--- a/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -0,0 +1,94 @@
 import type { CameraFeedAction, CameraFeedState, PaintedCell } from "../../types/types";
 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: "Region 1", brushColour: "#ff0000" },
      { name: "Region 2", brushColour: "#00ff00" },
      { name: "Region 3", brushColour: "#0400ff" },
    ],
    B: [
      { name: "Region 1", brushColour: "#ff0000" },
      { name: "Region 2", brushColour: "#00ff00" },
    ],
    C: [{ name: "Region 1", brushColour: "#ff0000" }],
  },
  selectedRegionIndex: 0,
  modeByCamera: {
    A: "painter",
    B: "painter",
    C: "painter",
  },
 };
 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>(),
        },
      };
    default:
      return state;
  }
 }
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -2,36 +2,16 @@ 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";
 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 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">
+    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+      <VideoFeedGridPainter />
-      <CameraSettings
+      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
        regions={regions}
        selectedRegionIndex={selectedRegionIndex}
        onSelectRegion={setSelectedRegionIndex}
        onChangeRegionColour={updateRegionColour}
        mode={mode}
        onSelectMode={setMode}
        tabIndex={tabIndex}
        setTabIndex={setTabIndex}
      />
      <PlatePatch />
    </div>
  );
--- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
@@ -0,0 +1,61 @@
 import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
 type CameraPanelProps = {
  tabIndex: number;
 };
 const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
  const { state, dispatch } = useCameraFeedContext();
  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";
        default:
          return "A";
      }
    };
    const cameraId = mapIndextoCameraId();
    dispatch({ type: "SET_CAMERA_FEED", payload: cameraId });
  }, [dispatch, tabIndex]);
  return (
    <Tabs>
      <TabList>
        <Tab>Target Detection</Tab>
        <Tab>Camera Controls</Tab>
      </TabList>
      <TabPanel>
        <RegionSelector
          regions={regions}
          selectedRegionIndex={selectedRegionIndex}
          mode={mode}
          cameraFeedID={cameraFeedID}
        />
      </TabPanel>
      <TabPanel>
        <div className="p-4">
          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
          <p>Controls for camera {cameraFeedID} will go here.</p>
        </div>
      </TabPanel>
    </Tabs>
  );
 };
 export default CameraPanel;
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -1,61 +1,34 @@
 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";
 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;
 };
-const CameraSettings = ({
+const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
  regions,
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  mode,
  onSelectMode,
  tabIndex,
  setTabIndex,
 }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 max-h-screen col-span-3">
+    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
      <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>
+          <Tab>Camera A</Tab>
-          <Tab>Camera 1</Tab>
+          <Tab>Camera B</Tab>
-          <Tab>Camera 2</Tab>
+          <Tab>Camera C</Tab>
          <Tab>Camera 3</Tab>
        </TabList>
        <TabPanel>
-          <RegionSelector
+          <CameraPanel tabIndex={tabIndex} />
            regions={regions}
            selectedRegionIndex={selectedRegionIndex}
            onSelectRegion={onSelectRegion}
            onChangeRegionColour={onChangeRegionColour}
            mode={mode}
            onSelectMode={onSelectMode}
          />
        </TabPanel>
        <TabPanel>
-          <div>Camera details {tabIndex}</div>
+          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
        <TabPanel>
-          <div>Camera details {tabIndex}</div>
+          <CameraPanel tabIndex={tabIndex} />
        </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,16 @@ 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}
      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,150 @@
 import type { PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../../types/types";
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 type RegionSelectorProps = {
  regions: Region[];
  selectedRegionIndex: number;
  onSelectRegion: (index: number) => void;
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
-  onSelectMode: (mode: string) => void;
+  cameraFeedID: "A" | "B" | "C";
 };
-const RegionSelector = ({
+const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
-  regions,
+  const { dispatch } = useCameraFeedContext();
  selectedRegionIndex,
  onSelectRegion,
  onChangeRegionColour,
  mode,
  onSelectMode,
 }: RegionSelectorProps) => {
  const handleChange = (e: { target: { value: string } }) => {
-    onSelectMode(e.target.value);
+    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
  };
  const handleAddRegionClick = () => {
    const regionName = `Region ${regions.length + 1}`;
    dispatch({
      type: "ADD_NEW_REGION",
      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
    });
  };
  const handleResetRegion = () => {
    dispatch({
      type: "RESET_PAINTED_CELLS",
      payload: { cameraFeedID: cameraFeedID, paintedCells: new Map<string, PaintedCell>() },
    });
  };
  const handleRemoveClick = () => {
    dispatch({
      type: "REMOVE_REGION",
      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
    });
  };
  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 },
    });
  };
  return (
-    <div>
+    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
-      <div>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
-        <h2 className="text-xl">Region Select</h2>
+        <h2 className="text-2xl mb-2">Tools</h2>
      </div>
      <div>
        {regions.map((region, idx) => (
          <div
            key={region.name}
            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
          >
            <label style={{ marginRight: "0.5rem" }}>
              <input
                type="radio"
                checked={selectedRegionIndex === idx}
                onChange={() => {
                  onSelectMode("painter");
                  onSelectRegion(idx);
                }}
              />{" "}
              {region.name}
            </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">
+          <label
-            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
+            htmlFor="paintMode"
-            Paint mode
+            className={`p-4 border rounded-lg  mb-2
            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
            hover:bg-[#202b36] hover:cursor-pointer`}
          >
            <input
              id="paintMode"
              type="radio"
              onChange={handleChange}
              checked={mode === "painter"}
              value="painter"
              className="sr-only"
            />
            <span className="text-xl">Paint mode</span>
          </label>
          <label
            htmlFor="eraseMode"
            className={`p-4 border rounded-lg  mb-2
            ${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>
      </div>
      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
        <h2 className="text-2xl mb-2">Region Select</h2>
        <>
          {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-4 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)} />
                <p className="text-slate-400">{region.brushColour}</p>
              </label>
            );
          })}
        </>
        <div className=" mx-auto flex flex-row gap-4  mt-4">
          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddRegionClick}>
            Add Region
          </button>
          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
            Remove Region
          </button>
        </div>
      </div>
-          <label htmlFor="erase">
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
+        <div className="flex flex-col">
-            Erase mode
+          <h2 className="text-2xl mb-2">Actions</h2>
-          </label>
+          <button
            onClick={handleResetRegion}
            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
          >
            Reset Region
          </button>
        </div>
      </div>
    </div>
--- 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,44 @@
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import type { DecodeReading } from "../../../../types/types";
 import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
 const SightingEntryTable = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state.cameraFeedID;
  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
  const isLoading = entryQuery?.isFetching;
  const readings = entryQuery?.data?.decodes;
  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
      <div className="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">Lane 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>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
 };
 export default SightingEntryTable;
--- a/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
@@ -0,0 +1,44 @@
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import type { DecodeReading } from "../../../../types/types";
 import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
 const SightingExitTable = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state.cameraFeedID;
  const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
  const isLoading = exitQuery?.isFetching;
  const readings = exitQuery?.data?.decodes;
  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
      <div className="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">Lane 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>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
 };
 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="md:row-start-4 md:col-span-2 p-4 h-[190%]">
      <CardHeader title="Entry / Exit" />
      <Tabs>
        <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/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -2,29 +2,26 @@ 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 Card from "../../../../ui/Card";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 const rows = 40;
 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;
-type PaintedCell = {
+  const mode = state.modeByCamera[cameraFeedID];
  colour: string;
 };
 const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
  const isDrawingRef = useRef(false);
-  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const paintLayerRef = useRef<any>(null);
@@ -50,7 +47,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
    const key = `${row}-${col}`;
    const currentColour = regions[selectedRegionIndex].brushColour;
-    const map = paintedCellsRef.current;
+    const map = paintedCells;
    const existing = map.get(key);
    if (mode === "eraser") {
@@ -91,7 +88,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
      const width = window.innerWidth;
      const aspectRatio = 740 / 460;
-      const newWidth = width * 0.36;
+      const newWidth = width * 0.39;
      const newHeight = newWidth / aspectRatio;
      setStageSize({ width: newWidth, height: newHeight });
    };
@@ -103,12 +100,12 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
  if (image === null || isloading)
    return (
-      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+      <Card className="row-span-3 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 className="mt-4.5 row-span-1 col-span-2">
      <Stage
        width={stageSize.width}
        height={stageSize.height}
@@ -124,7 +121,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
        <Layer ref={paintLayerRef} opacity={0.6}>
          <Shape
            sceneFunc={(ctx, shape) => {
-              const cells = paintedCellsRef.current;
+              const cells = paintedCells;
              cells.forEach((cell, key) => {
                const [rowStr, colStr] = key.split("-");
                const row = Number(rowStr);
--- 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";
-const getfeed = async () => {
+const getfeed = async (cameraFeedID: "A" | "B" | "C" | 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,10 +12,10 @@ const getfeed = async () => {
  return response.blob();
 };
-export const useGetVideoFeed = () => {
+export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null) => {
  const videoQuery = useQuery({
-    queryKey: ["getfeed"],
+    queryKey: ["getfeed", cameraFeedID],
-    queryFn: getfeed,
+    queryFn: () => getfeed(cameraFeedID),
    refetchInterval: 500,
  });
--- a/src/features/cameras/hooks/useGetvideoSnapshots.ts
+++ b/src/features/cameras/hooks/useGetvideoSnapshots.ts
@@ -1,9 +1,12 @@
 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 latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed();
+  const { videoQuery } = useGetVideoFeed(cameraFeedID);
  const snapShot = videoQuery?.data;
  const isloading = videoQuery.isPending;
--- 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/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -6,31 +6,41 @@ type SystemHealthProps = {
  uptime: string;
  statuses: SystemHealthStatus[];
  isLoading: boolean;
  isError: boolean;
  dateUpdatedAt?: number;
 };
-const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => {
+const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
  const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
  // console.log(statuses);
  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="h-100 md:h-70">
+    <div className="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-2 justify-between">
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
-        <div>
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>
-
+      <div className="h-50 overflow-auto">
      <div>
        {statuses?.map((status: SystemHealthStatus) => (
-          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
+          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
            <span>{status.id}</span> <Badge text={status.tags[0]} />
          </div>
        ))}
      </div>
      <div className="border-t border-gray-500">
        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
      </div>
    </div>
  );
 };
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -11,10 +11,20 @@ const SystemOverview = () => {
  const uptime = query?.data?.UptimeHumane;
  const statuses = query?.data?.Status;
  const isLoading = query?.isLoading;
  const isError = query?.isError;
  const dateUpdatedAt = query?.dataUpdatedAt;
  return (
    <Card className="p-4">
      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
+      <SystemHealth
        startTime={startTime}
        uptime={uptime}
        statuses={statuses}
        isLoading={isLoading}
        isError={isError}
        dateUpdatedAt={dateUpdatedAt}
      />
    </Card>
  );
 };
--- a/src/features/dashboard/hooks/useGetSystemHealth.ts
+++ b/src/features/dashboard/hooks/useGetSystemHealth.ts
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 const fetchData = async () => {
-  const response = await fetch(`http://100.115.148.59/api/system-health`);
+  const response = await fetch(`${CAMBASE}/api/system-health`);
  if (!response.ok) throw new Error("Cannot get System overview");
  return response.json();
 };
--- 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-row 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-150 md: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"
      >
        {"Save Changes"}
      </button>
    </Card>
  );
 };
 export default ChannelCard;
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -0,0 +1,272 @@
 import { Field } 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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-row 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>
  );
 };
 export default ChannelFields;
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -0,0 +1,105 @@
 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";
 const OutputForms = () => {
  const { bearerMutation } = usePostBearerConfig();
  const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
  const isLoading = dispatcherQuery?.isLoading;
  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 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
  };
  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 (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
      <Form className="grid grid-cols-1 md:grid-cols-2">
        <BearerTypeCard />
        <ChannelCard />
      </Form>
    </Formik>
  );
 };
 export default OutputForms;
--- 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/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/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/routes/output.tsx
+++ b/src/routes/output.tsx
@@ -1,9 +1,14 @@
-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 (
    <div>
      <OutputForms />
    </div>
  );
 }
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -21,3 +21,138 @@ export type SystemHealthStatus = {
  id: string;
  tags: string[];
 };
 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 InitialValuesFormErrors = {
  backOfficeURL?: string;
  username?: string;
  password?: string;
  connectTimeoutSeconds?: string;
  readTimeoutSeconds?: string;
 };
 export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
 type FieldProperty = {
  datatype: string;
  value: string;
 };
 export type OutputDataResponse = {
  id: string;
  configHash: string;
 } & Record<string, FieldProperty>;
 export type PaintedCell = {
  colour: string;
 };
 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: "A" | "B" | "C";
  paintedCells: {
    A: Map<string, PaintedCell>;
    B: Map<string, PaintedCell>;
    C: Map<string, PaintedCell>;
  };
  regionsByCamera: {
    A: Region[];
    B: Region[];
    C: Region[];
  };
  selectedRegionIndex: number;
  modeByCamera: {
    A: string;
    B: string;
    C: string;
  };
  tabIndex?: number;
 };
 export type CameraFeedAction =
  | {
      type: "SET_CAMERA_FEED";
      payload: "A" | "B" | "C";
    }
  | {
      type: "CHANGE_MODE";
      payload: { cameraFeedID: "A" | "B" | "C"; mode: string };
    }
  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
  | {
      type: "SET_SELECTED_REGION_COLOUR";
      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string; newColour: string };
    }
  | {
      type: "ADD_NEW_REGION";
      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string; brushColour: string };
    }
  | {
      type: "REMOVE_REGION";
      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string };
    }
  | {
      type: "RESET_PAINTED_CELLS";
      payload: { cameraFeedID: "A" | "B" | "C"; paintedCells: Map<string, PaintedCell> };
    };
 export type DecodeReading = {
  id: number;
  vrm: string;
  laneID: number;
  seenCount: number;
  firstSeenTime?: number;
  lastSeenTime?: number;
  duplicate?: true;
  firstSeenTimeHumane: string;
  lastSeenTimeHumane: string;
 };
--- a/src/ui/CardHeader.tsx
+++ b/src/ui/CardHeader.tsx
@@ -21,7 +21,7 @@ const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps)
          {status && <StatusIndicators status={status} />}
          {title}
        </h2>
-        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
+        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
      </div>
    </div>
  );
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,29 +1,39 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
 const Header = () => {
  return (
-    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
      <div className="w-28">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
-      <div className="flex gap-4">
+      <div className="flex gap-4 text-lg items-center">
-        <Link to="/" className="[&.active]:font-bold">
+        <Link
-          <FontAwesomeIcon icon={faGaugeHigh} />
+          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="/baywatch"
          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>
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -0,0 +1 @@
 export const CAMBASE = import.meta.env.VITE_BASEURL;
--- a/yarn.lock
+++ b/yarn.lock
@@ -994,6 +994,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"
@@ -1351,6 +1358,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"
@@ -1601,6 +1613,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 +1705,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,11 +1919,21 @@ 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==
 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.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -2087,7 +2130,12 @@ 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==
@@ -2287,7 +2335,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 +2360,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==
Author	SHA1	Message	Date
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
		`@@ -0,0 +1 @@`
							`export const CAMBASE = import.meta.env.VITE_BASEURL;`