- added functionality to push to backend

- improved responsiveness
- added reset functionality

package.json

@@ -20,6 +20,7 @@
     "country-flag-icons": "^1.6.4",
     "formik": "^2.4.9",
     "konva": "^10.0.12",
+    "rc-slider": "^11.1.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-konva": "^19.2.1",

src/app/providers/CameraSettingsProvider.tsx

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

src/app/reducers/cameraSettingsReducer.ts

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

src/components/ui/SliderComponent.tsx

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

src/features/dashboard/Dashboard.tsx

@@ -6,22 +6,24 @@ import { useCameraSettingsContext } from "../../app/context/CameraSettingsContex
 import SystemOverview from "./SystemOverview/SystemOverview";
 
 const Dashboard = () => {
-  const { sightingList, isLoading } = useSightingList();
+  const { sightingList, isLoading, totalSightings } = useSightingList();
   const { state: cameraSettings } = useCameraSettingsContext();
   const size = cameraSettings.imageSize;
 
   const mostRecent = sightingList[0];
 
   return (
-    <div>
+    <div className="flex flex-col">
-      <SystemOverview />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-      <div className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-5 mt-4">
-        <div className="col-span-7">
         <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
+        <SightingStack sightings={sightingList} />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-5 items-center">
+        <div className="col-span-1">
           <PlateRead sighting={mostRecent} />
         </div>
-        <div className="col-span-5">
+        <div className="col-span-2">
-          <SightingStack sightings={sightingList} />
+          <SystemOverview totalSightings={totalSightings} />
         </div>
       </div>
     </div>

src/features/dashboard/SystemOverview/SystemOverview.tsx

@@ -5,7 +5,11 @@ import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
 import PlatesProcessed from "./PlatesProcessed";
 import SystemStatusContent from "./SystemStatusContent";
 
-const SystemOverview = () => {
+type SystemOverViewProps = {
+  totalSightings: number;
+};
+
+const SystemOverview = ({ totalSightings }: SystemOverViewProps) => {
   const { systemHealthQuery } = useGetSystemHealth();
   const { storeQuery } = useGetStore();
 
@@ -19,23 +23,24 @@ const SystemOverview = () => {
     return <div>Loading system overview...</div>;
   }
   return (
-    <div>
+    <Card className="p-4">
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer ">
           <SystemStatusContent status={cameraStatus} isError={isError} />
-        </Card>
+        </div>
-        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
-          <h3 className="text-lg">Active Sightings</h3>
+          <h3 className="text-lg">Sightings</h3>
-        </Card>
+          <p>{totalSightings}</p>
-        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
           <PlatesProcessed platesProcessed={platesProcessed} />
-        </Card>
+        </div>
-        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
           <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{upTime}</span>
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
+        </div>
+      </div>
     </Card>
-      </div>
-    </div>
   );
 };
 

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

@@ -19,7 +19,7 @@ const SightingStack = ({ sightings }: SightingStackProps) => {
 
   return (
     <>
-      <Card className="p-4 w-full h-full">
+      <Card className="p-4 w-full h-[65vh] overflow-y-auto">
         <CardHeader title="Live Sightings" />
         <div className="md:h-[65%]">
           {sightings.map((sighting) => (

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

@@ -33,7 +33,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal =
 
   useEffect(() => {
     const updateSize = () => {
-      const width = window.innerWidth * 0.57;
+      const width = window.innerWidth * 0.48;
       const height = (width * 2) / 3;
       dispatch({ type: "SET_IMAGE_SIZE", payload: { width, height } });
     };

src/features/dashboard/hooks/useSightingList.ts

@@ -4,6 +4,7 @@ import type { SightingType } from "../../../utils/types";
 
 export const useSightingList = () => {
   const [sightingList, setSightingList] = useState<SightingType[]>([]);
+  const [totalSightings, setTotalSightings] = useState<number>(0);
   const { videoFeedQuery } = useVideoFeed();
   const latestSighting = videoFeedQuery?.data;
   const lastProcessedRef = useRef<number>(-1);
@@ -11,6 +12,8 @@ export const useSightingList = () => {
 
   useEffect(() => {
     if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setTotalSightings((prev) => (latestSighting.ref! > prev ? latestSighting.ref! : prev));
 
     if (latestSighting.ref !== lastProcessedRef.current) {
       lastProcessedRef.current = latestSighting.ref;
@@ -23,5 +26,5 @@ export const useSightingList = () => {
       });
     }
   }, [latestSighting, latestSighting?.ref]);
-  return { sightingList, isLoading };
+  return { sightingList, isLoading, totalSightings };
 };

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

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

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

@@ -3,24 +3,32 @@ import "react-tabs/style/react-tabs.css";
 import Card from "../../../../components/ui/Card";
 import CameraControls from "../cameraControls/CameraControls";
 import { useState } from "react";
+import Region from "../region/Region";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
 
 const CameraSetup = () => {
   const [tabIndex, setTabIndex] = useState(0);
-  console.log(tabIndex);
+  const { state, dispatch } = useCameraSettingsContext();
   return (
     <Card className="p-4">
-      <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
+      <Tabs
+        selectedIndex={tabIndex}
+        onSelect={(index) => {
+          dispatch({ type: "SET_CAMERA_MODE", payload: index });
+          setTabIndex(index);
+        }}
+      >
         <TabList>
           <Tab>Camera</Tab>
-          <Tab>Regions</Tab>
+          <Tab>Target Detection</Tab>
           <Tab>Crop</Tab>
           <Tab>Advanced</Tab>
         </TabList>
         <TabPanel>
-          <CameraControls tabIndex={tabIndex} />
+          <CameraControls state={state.cameraControls} dispatch={dispatch} />
         </TabPanel>
         <TabPanel>
-          <div>Regions</div>
+          <Region state={state} />
         </TabPanel>
         <TabPanel>
           <div>Crop</div>

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

@@ -1,32 +1,39 @@
+import CardHeader from "../../../../components/CardHeader";
 import Card from "../../../../components/ui/Card";
-import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
-import NumberPlate from "../../../dashboard/components/platePatch/NumberPlate";
 import { useSightingList } from "../../../dashboard/hooks/useSightingList";
 
 const PlatePatchSetup = () => {
   const { sightingList, isLoading } = useSightingList();
-  const firstFourSightings = sightingList?.slice(0, 4);
 
   if (isLoading) return <>Loading...</>;
-
   return (
     <Card className="p-4">
-      <ul>
+      <CardHeader title="Plates" />
-        {firstFourSightings?.map((sighting) => (
+      <div className="h-120 overflow-auto">
-          <li key={sighting.ref}>
+        <table className="w-full text-left text-sm table-auto border-collapse border border-gray-500/50 rounded-md">
-            <div className="flex flex-col gap-2 mb-2 border border-gray-600 p-2 rounded-lg hover:cursor-pointer hover:bg-[#233241]">
+          <thead className="bg-gray-700/50 text-gray-200 top-0">
-              <div className="">
+            <tr>
-                <TimeStampBadge timeStamp={sighting.timeStampMillis} />
+              <th className="px-4 py-3 font-semibold">VRM</th>
-              </div>
+
-              <p className="font-semibold text-gray-200">{sighting.vrm}</p>
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
-              <div className="flex items-center gap-4">
+              <th className="px-4 py-3 font-semibold">Seen</th>
+              <th className="px-4 py-3 font-semibold">Plate</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sightingList?.map((sighting, index) => (
+              <tr key={index} className="border-b border-gray-700/50 hover:bg-gray-700/20">
+                <td className="px-4 py-3 font-mono text-lg">{sighting.vrm}</td>
+                <td className="px-4 py-3 text-center">{sighting.seenCount}</td>
+                <td className="px-4 py-3">{sighting.timeStamp}</td>
+                <td className="px-4 py-3">
                   <img src={sighting.plateUrlColour} alt="" width={100} height={100} />
-                <NumberPlate vrm={sighting.vrm} size="sm" motion={sighting.motion.toLowerCase() === "away"} />
+                </td>
-              </div>
+              </tr>
-            </div>
-          </li>
             ))}
-      </ul>
+          </tbody>
+        </table>
+      </div>
     </Card>
   );
 };

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

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

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

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

src/features/setup/hooks/useCameraControlConfig.ts

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

src/features/setup/hooks/useCreatePreviewImage.ts

@@ -1,18 +1,28 @@
 import { useEffect, useRef } from "react";
 import { useVideoPreview } from "./useVideoPreview";
+import { useCameraSettingsContext } from "../../../app/context/CameraSettingsContext";
 
 export const useCreateVideoPreviewSnapshot = () => {
-  const { videoPreviewQuery } = useVideoPreview();
+  const { state } = useCameraSettingsContext();
+  const { videoPreviewQuery, targetDetectionFeedQuery } = useVideoPreview(state.cameraMode);
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const isLoading = videoPreviewQuery?.isPending;
+  const isPreviewLoading = videoPreviewQuery?.isPending;
-  const imageBlob = videoPreviewQuery?.data;
+  const isTargetDetectionLoading = targetDetectionFeedQuery?.isPending;
 
+  let snapshot;
+  if (state.cameraMode === 0) {
+    snapshot = videoPreviewQuery?.data;
+  } else if (state.cameraMode === 1) {
+    snapshot = targetDetectionFeedQuery?.data;
+  }
+  const imageBlob = snapshot;
   useEffect(() => {
     async function createImageBitmapFromBlob() {
       if (!imageBlob) return;
 
       try {
         const bitmap = await createImageBitmap(imageBlob);
+
         latestBitmapRef.current = bitmap;
       } catch (error) {
         console.log(error);
@@ -21,5 +31,10 @@ export const useCreateVideoPreviewSnapshot = () => {
     createImageBitmapFromBlob();
   }, [imageBlob]);
 
-  return { latestBitmapRef, isLoading, imageURL: imageBlob ? URL.createObjectURL(imageBlob) : null };
+  return {
+    latestBitmapRef,
+    isPreviewLoading,
+    isTargetDetectionLoading,
+    imageURL: imageBlob ? URL.createObjectURL(imageBlob) : null,
+  };
 };

src/features/setup/hooks/useTargetDetection.ts

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

src/features/setup/hooks/useVideoPreview.ts

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

src/utils/types.ts

@@ -52,9 +52,46 @@ export type NpedJSON = {
   "INSURANCE STATUS": string;
 };
 
+export type Region = {
+  name: string;
+  brushColour: string;
+};
+
+export type PaintedCell = {
+  colour: string;
+  region: Region;
+};
+
 export type CameraSettings = {
+  cameraMode: number;
   mode: number;
   imageSize: { width: number; height: number };
+  cameraControls: {
+    cameraControlMode: "auto" | "manual" | "shutter priority";
+    auto: {
+      minShutter: string;
+      maxShutter: string;
+      maxGain: string;
+      exposureCompensation: string;
+    };
+    manual: {
+      fixShutter: string;
+      fixGain: string;
+      fixIris: string;
+    };
+    shutterPriority: {
+      fixShutter: string;
+      maxGain: string;
+      exposureCompensation: string;
+    };
+  };
+  regionPainter: {
+    brushSize: number;
+    paintMode: "painter" | "eraser";
+    paintedCells: Map<string, PaintedCell>;
+    regions: Region[];
+    selectedRegionIndex: number;
+  };
 };
 export type CameraSettingsAction =
   | {
@@ -64,6 +101,26 @@ export type CameraSettingsAction =
   | {
       type: "SET_IMAGE_SIZE";
       payload: { width: number; height: number };
+    }
+  | {
+      type: "SET_CAMERA_MODE";
+      payload: number;
+    }
+  | {
+      type: "SET_REGION_PAINTMODE";
+      payload: "painter" | "eraser";
+    }
+  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
+  | {
+      type: "SET_CAMERA_CONTROLS";
+      payload: CameraSettings["cameraControls"];
+    }
+  | {
+      type: "SET_BRUSH_SIZE";
+      payload: number;
+    }
+  | {
+      type: "RESET_REGION_PAINTER";
     };
 
 export type CameraStatus = {
@@ -87,3 +144,12 @@ export type StoreData = {
   sanityCheck: boolean;
   sanityCheckFormula: string;
 };
+
+export type ColourData = {
+  id: string | number;
+  cells: number[][];
+};
+
+export type ColourDetectionPayload = {
+  regions: ColourData[];
+};

yarn.lock

@@ -226,6 +226,11 @@
     "@babel/plugin-transform-modules-commonjs" "^7.27.1"
     "@babel/plugin-transform-typescript" "^7.28.5"
 
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
+  integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
+
 "@babel/template@^7.27.2":
   version "7.27.2"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz"
@@ -1247,6 +1252,11 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
@@ -2019,6 +2029,23 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+rc-slider@^11.1.9:
+  version "11.1.9"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
+  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.36.0"
+
+rc-util@^5.36.0:
+  version "5.44.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
+  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
 react-dom@^19.2.0:
   version "19.2.3"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz"
@@ -2036,6 +2063,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-konva@^19.2.1:
   version "19.2.1"
   resolved "https://registry.npmjs.org/react-konva/-/react-konva-19.2.1.tgz"