- Enhanced responsiveness and layout adjustments across various components

Reviewed-on: #20

package.json

@@ -21,13 +21,15 @@
     "clsx": "^2.1.1",
     "formik": "^2.4.9",
     "konva": "^10.0.11",
+    "rc-slider": "^11.1.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-konva": "^19.2.0",
     "react-modal": "^3.16.3",
     "react-tabs": "^6.1.0",
     "react-use-websocket": "3.0.0",
-    "sonner": "^2.0.7"
+    "sonner": "^2.0.7",
+    "use-debounce": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/app/providers/CameraFeedProvider.tsx

@@ -1,9 +1,75 @@
-import { useReducer, type ReactNode } from "react";
+import { useEffect, useReducer, type ReactNode } from "react";
 import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
+import { useBlackBoard } from "../../hooks/useBlackBoard";
+import type { CameraFeedState } from "../../types/types";
+import { useCameraZoom } from "../../features/cameras/hooks/useCameraZoom";
 
 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
+  const { blackboardMutation } = useBlackBoard();
+  const { cameraZoomQuery: cameraZoomQueryA } = useCameraZoom("A");
+  const { cameraZoomQuery: cameraZoomQueryB } = useCameraZoom("B");
+  const { cameraZoomQuery: cameraZoomQueryC } = useCameraZoom("C");
+
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  useEffect(() => {
+    const fetchBlackBoardData = async () => {
+      const result = await blackboardMutation.mutateAsync({
+        operation: "VIEW",
+        path: "cameraFeed",
+      });
+      if (!result?.result || typeof result.result === "string") return;
+      const cameraFeedData: CameraFeedState = result.result;
+      const recontructedState = {
+        ...cameraFeedData,
+        paintedCells: {
+          A: new Map(cameraFeedData.paintedCells.A),
+          B: new Map(cameraFeedData.paintedCells.B),
+          C: new Map(cameraFeedData.paintedCells.C),
+        },
+      };
+      dispatch({ type: "SET_CAMERA_FEED_DATA", cameraState: recontructedState });
+    };
+    fetchBlackBoardData();
+  }, []);
+
+  useEffect(() => {
+    const fetchZoomLevels = async () => {
+      const [resultA, resultB, resultC] = await Promise.all([
+        cameraZoomQueryA.refetch(),
+        cameraZoomQueryB.refetch(),
+        cameraZoomQueryC.refetch(),
+      ]);
+
+      console.log(resultA?.data);
+      const zoomLevelAnumber = parseFloat(resultA.data?.propPhysCurrent?.value);
+      const zoomLevelBnumber = parseFloat(resultB.data?.propPhysCurrent?.value);
+      const zoomLevelCnumber = parseFloat(resultC.data?.propPhysCurrent?.value);
+
+      if (resultA.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "A", zoomLevel: zoomLevelAnumber },
+        });
+      }
+
+      if (resultB.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "B", zoomLevel: zoomLevelBnumber },
+        });
+      }
+
+      if (resultC.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "C", zoomLevel: zoomLevelCnumber },
+        });
+      }
+    };
+    fetchZoomLevels();
+  }, []);
+
   return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
 };

src/app/reducers/cameraFeedReducer.ts

@@ -9,25 +9,25 @@ export const initialState: CameraFeedState = {
   },
   regionsByCamera: {
     A: [
-      { name: "Region 1", brushColour: "#ff0000" },
-      { name: "Region 2", brushColour: "#00ff00" },
-      { name: "Region 3", brushColour: "#0400ff" },
-      { name: "Region 4", brushColour: "#ffff00" },
-      { name: "Region 5", brushColour: "#fc35db" },
+      { name: "Bay 1", brushColour: "#ff0000" },
+      { name: "Bay 2", brushColour: "#00ff00" },
+      { name: "Bay 3", brushColour: "#0400ff" },
+      { name: "Bay 4", brushColour: "#ffff00" },
+      { name: "Bay 5", brushColour: "#fc35db" },
     ],
     B: [
-      { name: "Region 1", brushColour: "#ff0000" },
-      { name: "Region 2", brushColour: "#00ff00" },
-      { name: "Region 3", brushColour: "#0400ff" },
-      { name: "Region 4", brushColour: "#ffff00" },
-      { name: "Region 5", brushColour: "#fc35db" },
+      { name: "Bay 1", brushColour: "#ff0000" },
+      { name: "Bay 2", brushColour: "#00ff00" },
+      { name: "Bay 3", brushColour: "#0400ff" },
+      { name: "Bay 4", brushColour: "#ffff00" },
+      { name: "Bay 5", brushColour: "#fc35db" },
     ],
     C: [
-      { name: "Region 1", brushColour: "#ff0000" },
-      { name: "Region 2", brushColour: "#00ff00" },
-      { name: "Region 3", brushColour: "#0400ff" },
-      { name: "Region 4", brushColour: "#ffff00" },
-      { name: "Region 5", brushColour: "#fc35db" },
+      { name: "Bay 1", brushColour: "#ff0000" },
+      { name: "Bay 2", brushColour: "#00ff00" },
+      { name: "Bay 3", brushColour: "#0400ff" },
+      { name: "Bay 4", brushColour: "#ffff00" },
+      { name: "Bay 5", brushColour: "#fc35db" },
     ],
   },
 
@@ -37,6 +37,11 @@ export const initialState: CameraFeedState = {
     B: "painter",
     C: "painter",
   },
+  zoomLevel: {
+    A: 1,
+    B: 1,
+    C: 1,
+  },
 };
 
 export function reducer(state: CameraFeedState, action: CameraFeedAction) {
@@ -98,7 +103,22 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
           [state.cameraFeedID]: new Map<string, PaintedCell>(),
         },
       };
-
+    case "SET_CAMERA_FEED_DATA":
+      return {
+        ...action.cameraState,
+      };
+    case "RESET_CAMERA_FEED":
+      return {
+        ...initialState,
+      };
+    case "SET_ZOOM_LEVEL":
+      return {
+        ...state,
+        zoomLevel: {
+          ...state.zoomLevel,
+          [action.payload.cameraFeedID]: action.payload.zoomLevel,
+        },
+      };
     default:
       return state;
   }

src/features/cameras/components/CameraGrid.tsx

@@ -4,16 +4,33 @@ import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
 
 import PlatePatch from "./PlatePatch/SightingPatch";
+import ResetAllModal from "./CameraSettings/resetAllModal/ResetAllModal";
 
 const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
-      <VideoFeedGridPainter />
-      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
-      <PlatePatch />
-    </div>
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
+        <div className="col-span-2 flex flex-col gap-4">
+          <div className="">
+            <VideoFeedGridPainter />
+          </div>
+          <div className="overflow-hidden">
+            <PlatePatch />
+          </div>
+        </div>
+        <CameraSettings
+          tabIndex={tabIndex}
+          setTabIndex={setTabIndex}
+          isResetAllModalOpen={isResetModalOpen}
+          handleClose={() => setIsResetModalOpen(false)}
+          setIsResetModalOpen={setIsResetModalOpen}
+        />
+      </div>
+      <ResetAllModal isResetAllModalOpen={isResetModalOpen} handleClose={() => setIsResetModalOpen(false)} />
+    </>
   );
 };
 

src/features/cameras/components/CameraSettings/CameraPanel.tsx

@@ -2,12 +2,16 @@ import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
+import CameraControls from "./cameraControls/CameraControls";
 
 type CameraPanelProps = {
   tabIndex: number;
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
+const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: CameraPanelProps) => {
   const { state, dispatch } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
   const regions = state.regionsByCamera[cameraFeedID];
@@ -39,20 +43,19 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
         <Tab>Target Detection</Tab>
         <Tab>Camera Controls</Tab>
       </TabList>
-
       <TabPanel>
         <RegionSelector
           regions={regions}
           selectedRegionIndex={selectedRegionIndex}
           mode={mode}
           cameraFeedID={cameraFeedID}
+          isResetAllModalOpen={isResetAllModalOpen}
+          handleClose={handleClose}
+          setIsResetModalOpen={setIsResetModalOpen}
         />
       </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>
+        <CameraControls cameraFeedID={cameraFeedID} />
       </TabPanel>
     </Tabs>
   );

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -6,11 +6,20 @@ import CameraPanel from "./CameraPanel";
 type CameraSettingsProps = {
   setTabIndex: (tabIndex: number) => void;
   tabIndex: number;
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
+const CameraSettings = ({
+  tabIndex,
+  setTabIndex,
+  isResetAllModalOpen,
+  handleClose,
+  setIsResetModalOpen,
+}: CameraSettingsProps) => {
   return (
-    <Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
+    <Card className="p-4 w-full h-full ">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"
@@ -22,13 +31,28 @@ const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
           <Tab>Camera C</Tab>
         </TabList>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
       </Tabs>
     </Card>

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -2,31 +2,37 @@ import type { ColourData, PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import { useColourDectection } from "../../hooks/useColourDetection";
+import { useBlackBoard } from "../../../../hooks/useBlackBoard";
+import { toast } from "sonner";
 
 type RegionSelectorProps = {
   regions: Region[];
   selectedRegionIndex: number;
   mode: string;
   cameraFeedID: "A" | "B" | "C";
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
+const RegionSelector = ({
+  regions,
+  selectedRegionIndex,
+  mode,
+  cameraFeedID,
+  isResetAllModalOpen,
+
+  setIsResetModalOpen,
+}: RegionSelectorProps) => {
   const { colourMutation } = useColourDectection();
   const { state, dispatch } = useCameraFeedContext();
+  const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
 
   const handleChange = (e: { target: { value: string } }) => {
     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",
@@ -34,13 +40,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  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 } });
   };
@@ -58,14 +57,34 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
+  const handleAddRegionClick = () => {
+    const regionName = `Bay ${regions.length + 1}`;
+    dispatch({
+      type: "ADD_NEW_REGION",
+      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
+    });
+  };
+
+  const handleRemoveClick = () => {
+    dispatch({
+      type: "REMOVE_REGION",
+      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
+    });
+  };
+
+  const openResetModal = () => {
+    if (isResetAllModalOpen) return;
+    setIsResetModalOpen(true);
+  };
+
   const handleSaveclick = () => {
     const regions: ColourData[] = [];
     const test = Array.from(paintedCells.entries());
-    const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
-    const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
-    const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
-    const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
-    const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
+    const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
+    const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
+    const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
+    const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
+    const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
     const region1Data = {
       id: 1,
       cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
@@ -103,104 +122,152 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     }
 
     colourMutation.mutate({ cameraFeedID, regions: regions });
+
+    // Convert Map to plain object for blackboard
+    const serializableState = {
+      ...state,
+      paintedCells: {
+        A: Array.from(state.paintedCells.A.entries()),
+        B: Array.from(state.paintedCells.B.entries()),
+        C: Array.from(state.paintedCells.C.entries()),
+      },
+    };
+    blackboardMutation.mutate({ operation: "INSERT", path: `cameraFeed`, value: serializableState });
+    toast.success("Region data saved successfully!");
   };
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
-        <h2 className="text-2xl mb-2">Tools</h2>
-        <div className="flex flex-col">
-          <label
-            htmlFor="paintMode"
-            className={`p-4 border rounded-lg  mb-2
+    <div className="flex flex-col gap-4 h-full overflow-y-auto mt-[5%]">
+      <div className="flex flex-col md:flex-row gap-3">
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
+          <h2 className="text-2xl mb-2">Tools</h2>
+          <div className="flex flex-col">
+            <label
+              htmlFor="paintMode"
+              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
+            >
+              <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>
+            >
+              <input
+                id="eraseMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "eraser"}
+                value={"eraser"}
+                className="sr-only"
+              />
+              <span className="text-xl">Erase mode</span>
+            </label>
+            <label
+              htmlFor="zoomMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${mode === "zoom" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                id="zoomMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "zoom"}
+                value="zoom"
+                className="sr-only"
+              />
+              <div className="flex flex-col space-y-3">
+                <span className="text-xl">Enlarge image</span>
+                {mode === "zoom" && (
+                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
+                )}
+              </div>
+            </label>
+          </div>
         </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-1 rounded-xl border flex flex-row justify-between
+
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+          <h2 className="text-2xl mb-2">Bay 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-1 rounded-xl border flex flex-row justify-between
                   ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
-              >
-                <div className="flex flex-row gap-4 items-center">
-                  <input
-                    type="radio"
-                    checked={isSelected}
-                    id={inputId}
-                    name="region"
-                    className="sr-only"
-                    onChange={() => {
-                      handleModeChange("painter");
-                      handleRegionSelect(idx);
-                    }}
+                >
+                  <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)}
                   />
-                  <span className="text-xl">{region.name}</span>
-                </div>
-                <ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
-                <div></div>
-              </label>
-            );
-          })}
-        </>
-        <div className=" mx-auto flex flex-row gap-4  mt-4">
-          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
-            Add Region
-          </button>
-          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
-            Remove Region
-          </button>
+                  <div></div>
+                </label>
+              );
+            })}
+          </>
+          <div className="flex flex-col gap-4  mt-4">
+            <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
+              Add Bay
+            </button>
+            <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
+              Remove Bay
+            </button>
+          </div>
         </div>
       </div>
 
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
-        <div className="flex flex-col">
-          <h2 className="text-2xl mb-2">Actions</h2>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+        <h2 className="text-2xl mb-2">Actions</h2>
+        <div className="flex flex-col gap-4 justify-center">
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={handleSaveclick}
+              className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full hover:bg-blue-700 hover:cursor-pointer"
+            >
+              Save Region
+            </button>
+            <button
+              onClick={handleResetRegion}
+              className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
+            >
+              Reset Region
+            </button>
+          </div>
+
           <button
-            onClick={handleSaveclick}
-            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
+            onClick={openResetModal}
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
           >
-            Save Region
-          </button>
-          <button
-            onClick={handleResetRegion}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
-          >
-            Reset Region
+            Reset All
           </button>
         </div>
       </div>

src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx

@@ -0,0 +1,42 @@
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import SliderComponent from "../../../../../ui/SliderComponent";
+import { useCameraZoom } from "../../../hooks/useCameraZoom";
+import { useDebouncedCallback } from "use-debounce";
+
+type CameraControlsProps = {
+  cameraFeedID: "A" | "B" | "C";
+};
+
+const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
+
+  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
+  const debouncedMutation = useDebouncedCallback(async (value) => {
+    await cameraZoomMutation.mutateAsync({
+      cameraFeedID,
+      zoomLevel: value as number,
+    });
+  }, 1000);
+
+  const handleChange = (value: number | number[]) => {
+    const newZoom = value as number;
+    dispatch({
+      type: "SET_ZOOM_LEVEL",
+      payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
+    });
+    debouncedMutation(newZoom);
+  };
+
+  return (
+    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
+      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
+      <div className="w-[70%] ">
+        <label htmlFor="zoom">Zoom {zoomLevel} </label>
+        <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
+      </div>
+    </div>
+  );
+};
+
+export default CameraControls;

src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx

@@ -0,0 +1,55 @@
+import { toast } from "sonner";
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import { useBlackBoard } from "../../../../../hooks/useBlackBoard";
+import ModalComponent from "../../../../../ui/ModalComponent";
+
+type ResetAllModalProps = {
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+};
+
+const ResetAllModal = ({ isResetAllModalOpen, handleClose }: ResetAllModalProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { blackboardMutation } = useBlackBoard();
+
+  const handleResetAll = async () => {
+    dispatch({ type: "RESET_CAMERA_FEED" });
+
+    handleClose();
+    const result = await blackboardMutation.mutateAsync({
+      operation: "INSERT",
+      path: `cameraFeed`,
+      value: state,
+    });
+    //  Need endpoint to reset all target detection painted cells
+    if (result?.reason === "OK") {
+      toast.success("All camera settings have been reset to default values.");
+    }
+  };
+  return (
+    <ModalComponent isModalOpen={isResetAllModalOpen} close={handleClose}>
+      <div>
+        <h2 className="text-xl font-bold mb-4">Reset All Camera Settings</h2>
+        <p className="mb-4">
+          Are you sure you want to reset all camera settings to their default values? This action cannot be undone.
+        </p>
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={handleResetAll}
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleClose}
+            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default ResetAllModal;

src/features/cameras/components/PlatePatch/SightingEntryTable.tsx

@@ -12,13 +12,14 @@ const SightingEntryTable = () => {
 
   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 ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
         <table className="w-full text-left text-sm">
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
             <tr>
               <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold">Lane ID</th>
+              <th className="px-4 py-3 font-semibold">Bay ID</th>
               <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
               <th className="px-4 py-3 font-semibold">First Seen</th>
               <th className="px-4 py-3 font-semibold">Last Seen</th>
@@ -37,6 +38,35 @@ const SightingEntryTable = () => {
           </tbody>
         </table>
       </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

src/features/cameras/components/PlatePatch/SightingExitTable.tsx

@@ -12,13 +12,14 @@ const SightingExitTable = () => {
 
   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 ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
         <table className="w-full text-left text-sm">
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
             <tr>
               <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold">Lane ID</th>
+              <th className="px-4 py-3 font-semibold">Bay ID</th>
               <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
               <th className="px-4 py-3 font-semibold">First Seen</th>
               <th className="px-4 py-3 font-semibold">Last Seen</th>
@@ -37,6 +38,35 @@ const SightingExitTable = () => {
           </tbody>
         </table>
       </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

src/features/cameras/components/PlatePatch/SightingPatch.tsx

@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="md:row-start-4 md:col-span-2 p-4 h-[190%]">
+    <Card className="p-4 w-full max-h-[600px] flex flex-col md:w-[95%]">
       <CardHeader title="Entry / Exit" />
-      <Tabs>
+      <Tabs defaultIndex={1} className="flex-1 flex flex-col">
         <TabList>
           <Tab>Entry Sightings</Tab>
           <Tab>Exit Sightings</Tab>

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -16,13 +16,17 @@ const gap = 0;
 const VideoFeedGridPainter = () => {
   const { state } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
-  const paintedCells = state.paintedCells[cameraFeedID];
+  const paintedCells = state?.paintedCells?.[cameraFeedID];
   const regions = state.regionsByCamera[cameraFeedID];
   const selectedRegionIndex = state.selectedRegionIndex;
   const mode = state.modeByCamera[cameraFeedID];
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
   const isDrawingRef = useRef(false);
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stageRef = useRef<any>(null);
 
   const currentScale = stageSize.width / BACKEND_WIDTH;
   const size = BACKEND_CELL_SIZE * currentScale;
@@ -71,14 +75,14 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex]) return;
+    if (!regions[selectedRegionIndex] || mode === "zoom") return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
   };
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
-    if (!isDrawingRef.current) return;
+    if (!isDrawingRef.current || mode === "zoom") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -88,14 +92,52 @@ const VideoFeedGridPainter = () => {
     isDrawingRef.current = false;
   };
 
+  const handleMouseEnter = () => {
+    if (mode !== "zoom") return;
+    setScale(2);
+  };
+  const handleMouseLeave = () => {
+    document.body.style.cursor = "default";
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (scale === 1) return;
+
+    const stage = e.target.getStage();
+    if (!stage) return;
+
+    const pointerPosition = stage.getPointerPosition();
+    if (!pointerPosition) return;
+
+    const newX = stageSize.width / 2 - pointerPosition.x * scale;
+    const newY = stageSize.height / 2 - pointerPosition.y * scale;
+
+    const maxX = 0;
+    const minX = stageSize.width - stageSize.width * scale;
+    const maxY = 0;
+    const minY = stageSize.height - stageSize.height * scale;
+
+    setPosition({
+      x: Math.max(minX, Math.min(maxX, newX)),
+      y: Math.max(minY, Math.min(maxY, newY)),
+    });
+  };
+
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.39;
-      const newHeight = newWidth / aspectRatio;
-      setStageSize({ width: newWidth, height: newHeight });
+      if (width < 768) {
+        const newWidth = width * 0.8;
+        const newHeight = newWidth / aspectRatio;
+        setStageSize({ width: newWidth, height: newHeight });
+      } else {
+        const newWidth = width * 0.6;
+        const newHeight = newWidth / aspectRatio;
+        setStageSize({ width: newWidth, height: newHeight });
+      }
     };
 
     handleResize();
@@ -106,46 +148,57 @@ const VideoFeedGridPainter = () => {
 
   if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
   return (
-    <div
-      className={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
-        mode === "eraser" ? "hover:cursor-pointer" : ""
-      }`}
-    >
+    <div>
       <Stage
+        ref={stageRef}
         width={stageSize.width}
         height={stageSize.height}
         onMouseDown={handleStageMouseDown}
         onMouseMove={handleStageMouseMove}
         onMouseUp={handleStageMouseUp}
         onMouseLeave={handleStageMouseUp}
+        className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+          mode === "eraser" ? "hover:cursor-pointer" : ""
+        }`}
       >
-        <Layer>
+        <Layer
+          scaleX={scale}
+          scaleY={scale}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
+          x={position.x}
+          y={position.y}
+        >
           <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>
-          <Shape
-            sceneFunc={(ctx, shape) => {
-              const cells = paintedCells;
-              cells.forEach((cell, key) => {
-                const [rowStr, colStr] = key.split("-");
-                const row = Number(rowStr);
-                const col = Number(colStr);
+          {mode === "painter" || mode === "eraser" ? (
+            <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 * (size + gap);
-                const y = row * (size + gap);
+                  const x = col * (size + gap);
+                  const y = row * (size + gap);
 
-                ctx.beginPath();
-                ctx.rect(x, y, size, size);
-                ctx.fillStyle = cell.colour;
-                ctx.fill();
-              });
+                  ctx.beginPath();
+                  ctx.rect(x, y, size, size);
+                  ctx.fillStyle = cell.colour;
+                  ctx.fill();
+                });
 
-              ctx.fillStrokeShape(shape);
-            }}
-            width={stageSize.width}
-            height={stageSize.height}
-          />
+                ctx.fillStrokeShape(shape);
+              }}
+              width={stageSize.width}
+              height={stageSize.height}
+            />
+          ) : null}
         </Layer>
       </Stage>
     </div>

src/features/cameras/hooks/useCameraZoom.ts

@@ -0,0 +1,48 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { CameraZoomConfig } from "../../../types/types";
+
+const fetchZoomLevel = async (cameraFeedID: string) => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Camera${cameraFeedID}-onvif-controller`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
+  const fields = [
+    { property: "propPhysCurrent", value: zoomConfig.zoomLevel },
+    { property: "propCameraHost", value: "192.168.0.101" },
+    { property: "propCameraPort", value: 80 },
+    { property: "propCameraUsername", value: "administrator" },
+    { property: "propCameraPassword", value: "MAV12345" },
+  ];
+  const zoomPayload = {
+    id: `Camera${zoomConfig.cameraFeedID}-onvif-controller`,
+    fields,
+  };
+  console.log(zoomPayload);
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(zoomPayload),
+  });
+
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useCameraZoom = (cameraFeedID: "A" | "B" | "C") => {
+  const cameraZoomQuery = useQuery({
+    queryKey: ["cameraZoom", cameraFeedID],
+    queryFn: () => fetchZoomLevel(cameraFeedID),
+  });
+
+  const cameraZoomMutation = useMutation({
+    mutationKey: ["postCameraZoom"],
+    mutationFn: (zoomConfig: CameraZoomConfig) => postZoomLevel(zoomConfig),
+  });
+  return { cameraZoomQuery, cameraZoomMutation };
+};

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 
-const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
-  const response = await fetch(`${CAMBASE}TargetDetectionColour${cameraFeedID}-preview`, {
+const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+  const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
   });
@@ -12,12 +12,31 @@ const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   return response.blob();
 };
 
-export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null) => {
-  const videoQuery = useQuery({
+const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+  const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, {
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+};
+
+export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: string) => {
+  const targetDetectionQuery = useQuery({
     queryKey: ["getfeed", cameraFeedID],
-    queryFn: () => getfeed(cameraFeedID),
+    queryFn: () => targetDectionFeed(cameraFeedID),
     refetchInterval: 500,
+    enabled: mode !== "zoom",
   });
 
-  return { videoQuery };
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoQuery", cameraFeedID, mode],
+    queryFn: () => getVideoFeed(cameraFeedID),
+    refetchInterval: 500,
+    enabled: mode === "zoom",
+  });
+
+  return { targetDetectionQuery, videoFeedQuery };
 };

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -5,11 +5,19 @@ import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";
 export const useCreateVideoSnapshot = () => {
   const { state } = useCameraFeedContext();
   const cameraFeedID = state?.cameraFeedID;
+  const mode = state.modeByCamera[cameraFeedID];
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed(cameraFeedID);
+  const { targetDetectionQuery, videoFeedQuery } = useGetVideoFeed(cameraFeedID, mode);
 
-  const snapShot = videoQuery?.data;
-  const isloading = videoQuery.isPending;
+  let snapShot = targetDetectionQuery?.data;
+  const isloading = targetDetectionQuery.isPending;
+
+  const videoSnapShot = videoFeedQuery?.data;
+  const isVideoLoading = videoFeedQuery.isPending;
+
+  if (isVideoLoading === false && videoSnapShot && mode === "zoom") {
+    snapShot = videoSnapShot;
+  }
 
   useEffect(() => {
     async function createBitmap() {

src/features/dashboard/components/DashboardGrid.tsx

@@ -35,7 +35,7 @@ const DashboardGrid = () => {
   const categoryC = statusCategories?.channelC ?? [];
 
   return (
-    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2">
+    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
       <SystemStatusCard />
       <SystemHealthCard
         startTime={startTime}
@@ -46,10 +46,10 @@ const DashboardGrid = () => {
         dateUpdatedAt={dateUpdatedAt}
         refetch={refetch}
       />
-      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
-        <CameraStatus title="Camera A" category={categoryA} />
-        <CameraStatus title="Camera B" category={categoryB} />
-        <CameraStatus title="Camera C" category={categoryC} />
+      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
+        <CameraStatus title="Camera A" category={categoryA} isError={isError} />
+        <CameraStatus title="Camera B" category={categoryB} isError={isError} />
+        <CameraStatus title="Camera C" category={categoryC} isError={isError} />
       </div>
     </div>
   );

src/features/dashboard/components/cameraStatus/CameraStatus.tsx

@@ -7,10 +7,11 @@ import CameraStatusGridItem from "./CameraStatusGridItem";
 type CameraStatusProps = {
   title: string;
   category: SystemHealthStatus[];
+  isError?: boolean;
 };
 
-const CameraStatus = ({ title, category }: CameraStatusProps) => {
-  const isAllGood = category?.every((status) => status.tags.includes("RUNNING"));
+const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
+  const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
   // check if some are down
   // check if all are down
   //check if offline
@@ -18,10 +19,22 @@ const CameraStatus = ({ title, category }: CameraStatusProps) => {
     <Card className="p-4">
       <div className="border-b border-gray-600">
         <h3 className="text-lg flex flex-row items-center">
-          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+          {isError ? (
+            <StatusIndicators status={"bg-red-500"} />
+          ) : isAllGood ? (
+            <StatusIndicators status={"bg-green-500"} />
+          ) : (
+            <StatusIndicators status={"bg-amber-500"} />
+          )}
           {capitalize(title)}
         </h3>
-        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
+        {isError ? (
+          <p className="text-sm text-red-500">Error loading camera health.</p>
+        ) : isAllGood ? (
+          <p className="text-sm text-green-500">All systems running</p>
+        ) : (
+          <p className="text-sm text-amber-500">Some systems down</p>
+        )}
       </div>
       {category && category?.length <= 0 ? (
         <p className=" text-gray-500">Loading Camera health...</p>

src/features/dashboard/components/statusGridItem/StatusGridItem.tsx

@@ -11,7 +11,8 @@ type StatusGridItemProps = {
 
 const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const isAllGood = statusCategory.every((status) => status.tags.includes("RUNNING"));
+  const isAllGood =
+    statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
 
   const handleClick = () => {
     setIsOpen(false);
@@ -20,7 +21,7 @@ const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
   return (
     <>
       <div
-        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
+        className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
         onClick={() => setIsOpen(true)}
       >
         <h3 className="text-lg flex flex-row items-center">

src/features/dashboard/components/systemHealth/SystemHealth.tsx

@@ -38,20 +38,20 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
     return <span className="text-slate-500">Loading system health…</span>;
   }
   return (
-    <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 className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
+      <div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
         </div>
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
           <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
         </div>
       </div>
       <div className="overflow-auto gap-4">
         <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
       </div>
-      <div className="border-t border-gray-500">
-        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
+      <div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
+        <small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
       </div>
     </div>
   );

src/features/dashboard/components/systemStatus/SystemStatusCard.tsx

@@ -13,12 +13,21 @@ const SystemStatusCard = () => {
   const { storeQuery } = useGetStore();
 
   const reads = storeQuery?.data;
-  const isReadsLoading = storeQuery.isFetching;
+  const isReadsLoading = storeQuery?.isFetching;
+  const isError = storeQuery?.isError || !storeQuery?.data;
 
   useEffect(() => {
     storeQuery.refetch();
   }, [reads]);
 
+  if (isError) {
+    return (
+      <Card className="p-4">
+        <CardHeader title="System Status" />
+        <span className="text-red-500">Error loading system status.</span>
+      </Card>
+    );
+  }
   return (
     <Card className="p-4">
       <CardHeader title="System Status" />

src/features/dashboard/hooks/useGetSystemHealth.ts

@@ -11,6 +11,7 @@ export const useGetSystemHealth = () => {
   const query = useQuery({
     queryKey: ["fetchSystemData"],
     queryFn: fetchData,
+    refetchInterval: 300000,
   });
   return { query };
 };

src/features/output/components/BearerTypeFields.tsx

@@ -4,7 +4,7 @@ import type { FormTypes } from "../../../types/types";
 const BearerTypeFields = () => {
   useFormikContext<FormTypes>();
   return (
-    <div className="flex flex-row justify-between">
+    <div className="flex flex-col md:flex-row space-y-4  justify-between">
       <label htmlFor="format" className="text-xl">
         Format
       </label>

src/features/output/components/ChannelCard.tsx

@@ -10,7 +10,7 @@ const ChannelCard = () => {
   const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
   const outputData = bearerQuery?.data;
   return (
-    <Card className="p-4 h-150 md:h-full">
+    <Card className="p-4 h-full">
       <CardHeader title={`Channel (${values?.format})`} />
       <ChannelFields
         errors={errors}
@@ -21,9 +21,9 @@ const ChannelCard = () => {
       />
       <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"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
       >
-        {"Save Changes"}
+        {"Save Settings"}
       </button>
     </Card>
   );

src/features/output/components/ChannelFields.tsx

@@ -1,4 +1,4 @@
-import { Field } from "formik";
+import { Field, FieldArray } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
@@ -17,6 +17,7 @@ type ChannelFieldsProps = {
 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",
@@ -51,7 +52,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
     <div className="flex flex-col gap-4 p-4">
       {values.format.toLowerCase() !== "ftp" ? (
         <>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="backoffice" className="block mb-2 font-medium">
               Back Office URL
             </label>
@@ -63,7 +64,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="username" className="block mb-2 font-medium">
               Username
             </label>
@@ -75,7 +76,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="password">Password</label>
             <Field
               name={"password"}
@@ -85,7 +86,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
             <Field
               name={"readTimeoutSeconds"}
@@ -95,7 +96,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
             <Field
               name={"connectTimeoutSeconds"}
@@ -104,7 +105,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="overviewQuality">Overview quality and scale</label>
             <Field
               name={"overviewQuality"}
@@ -117,7 +118,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               <option value={"LOW"}>Low</option>
             </Field>
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="cropSizeFactor">Crop Size Factor</label>
             <Field
               name={"cropSizeFactor"}
@@ -137,7 +138,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 <h2 className="font-bold">{values.format} Constants</h2>
               </div>
 
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                 <label htmlFor="SCID">Source ID / Camera ID</label>
                 <Field
                   name={"SCID"}
@@ -149,7 +150,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                   } rounded-lg w-full md:w-60`}
                 />
               </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                 <label htmlFor="timestampSource">Timestamp Source</label>
                 <Field
                   name={"timestampSource"}
@@ -158,10 +159,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                   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>
+                  <option value={"LOCAL"}>Local</option>
                 </Field>
               </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                 <label htmlFor="GPSFormat">GPS Format</label>
                 <Field
                   name={"GPSFormat"}
@@ -181,7 +182,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 <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">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="FFID">Feed ID / Force ID</label>
                   <Field
                     name={"FFID"}
@@ -193,7 +194,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     } rounded-lg w-full md:w-60`}
                   />
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="SCID">Source ID / Camera ID</label>
                   <Field
                     name={"SCID"}
@@ -205,7 +206,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     } rounded-lg w-full md:w-60`}
                   />
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="timestampSource">Timestamp Source</label>
                   <Field
                     name={"timestampSource"}
@@ -217,7 +218,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     <option value={"LOCAL"}>Local</option>
                   </Field>
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="GPSFormat">GPS Format</label>
                   <Field
                     name={"GPSFormat"}
@@ -234,7 +235,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 <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">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
                   <Field
                     name={"LID1"}
@@ -246,7 +247,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     } rounded-lg w-full md:w-60`}
                   />
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
                   <Field
                     name={"LID2"}
@@ -261,6 +262,57 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               </div>
             </>
           )}
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
+          </div>
+          <div className="items-center mb-4">
+            <FieldArray name="customFields">
+              {(arrayHelpers) => (
+                <>
+                  {values?.customFields?.map((_, index) => {
+                    // if (!field.value) return null;
+                    return (
+                      <div
+                        key={index}
+                        className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
+                      >
+                        <Field
+                          name={`customFields.${index}.label`}
+                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                          placeholder={`Custom Field ${index + 1} Label`}
+                        />
+                        <Field
+                          name={`customFields.${index}.value`}
+                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                          placeholder={`Custom Field ${index + 1} Value`}
+                          autoComplete="off"
+                        />
+                      </div>
+                    );
+                  })}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <button
+                      type="button"
+                      onClick={() => arrayHelpers.push({ label: "", value: "" })}
+                      className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
+                      disabled={values?.customFields && values?.customFields?.length >= 6}
+                    >
+                      Add Custom Field
+                    </button>
+                    {values?.customFields && values?.customFields?.length > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => arrayHelpers.pop()}
+                        className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      >
+                        Remove Custom Field
+                      </button>
+                    )}
+                  </div>
+                </>
+              )}
+            </FieldArray>
+          </div>
         </>
       ) : (
         <></>

src/features/output/components/OSDFieldToggle.tsx

@@ -0,0 +1,27 @@
+import { Field } from "formik";
+
+type OSDFieldToggleProps = {
+  value: string;
+  label: string;
+};
+
+const OSDFieldToggle = ({ value, label }: OSDFieldToggleProps) => {
+  const spacesWords = (label: string) => {
+    if (label.includes("VRM")) return label.replace("VRM", " VRM");
+    return label.replace(/([A-Z])/g, " $1").trim();
+  };
+
+  return (
+    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
+      <span className="text-lg">{spacesWords(label)}</span>
+      <Field id={value} type="checkbox" name={value} className="sr-only peer" />
+      <div
+        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+      />
+    </label>
+  );
+};
+
+export default OSDFieldToggle;

src/features/output/components/OSDFields.tsx

@@ -0,0 +1,72 @@
+import { Field, useFormikContext } from "formik";
+import { useOSDConfig } from "../hooks/useOSDConfig";
+import OSDFieldToggle from "./OSDFieldToggle";
+import type { OSDConfigFields } from "../../../types/types";
+import { toast } from "sonner";
+
+type OSDFieldsProps = {
+  isOSDLoading: boolean;
+};
+
+const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
+  const { osdMutation } = useOSDConfig();
+  const { values } = useFormikContext<OSDConfigFields>();
+
+  const includeKeys = Object.keys(values as OSDConfigFields).filter((value) => value.includes("include"));
+
+  const handleSubmit = async (values: OSDConfigFields) => {
+    const result = await osdMutation.mutateAsync(values);
+    if (result?.id) {
+      toast.success("OSD Config updated successfully");
+    }
+  };
+
+  if (isOSDLoading) {
+    return <div>Loading OSD Options...</div>;
+  }
+
+  return (
+    <div>
+      <div className="flex flex-col space-y-4">
+        <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
+          <div className="flex flex-col space-y-4">
+            {includeKeys.map((key) => (
+              <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
+            ))}
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="overlayPosition">Overlay Position</label>
+            <Field
+              as="select"
+              name="overlayPosition"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+            >
+              <option value="Top">Top</option>
+              <option value="Bottom">Bottom</option>
+            </Field>
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
+            <Field
+              as="select"
+              name="OSDTimestampFormat"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+            >
+              <option value="UTC">UTC</option>
+              <option value="LOCAL">Local</option>
+            </Field>
+          </div>
+          <button
+            type="button"
+            onClick={() => handleSubmit(values)}
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+          >
+            Save Settings
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OSDFields;

src/features/output/components/OSDOptionsCard.tsx

@@ -0,0 +1,31 @@
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+import OSDFields from "./OSDFields";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+
+type OSDOptionsCardProps = {
+  isOSDLoading: boolean;
+};
+
+const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
+  return (
+    <Card className="p-4 flex-1">
+      <CardHeader title="OSD Payload Options" />
+      <Tabs>
+        <TabList>
+          <Tab>OSD Settings</Tab>
+          <Tab>payload Settings</Tab>
+        </TabList>
+        <TabPanel>
+          <OSDFields isOSDLoading={isOSDLoading} />
+        </TabPanel>
+        <TabPanel>
+          <div>payload settings</div>
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default OSDOptionsCard;

src/features/output/components/OutputForms.tsx

@@ -5,12 +5,26 @@ import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCCo
 import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
+import { useCustomFields } from "../hooks/useCustomFields";
+import OSDOptionsCard from "./OSDOptionsCard";
+import { useOSDConfig } from "../hooks/useOSDConfig";
 
 const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
+  const { customFieldsQuery, customFieldsMutation } = useCustomFields();
+  const { osdQuery } = useOSDConfig();
 
   const isLoading = dispatcherQuery?.isLoading;
+  const isOSDLoading = osdQuery?.isLoading;
+
+  const includeVRM = osdQuery?.data?.propIncludeVRM?.value.toLowerCase() === "true";
+  const includeMotion = osdQuery?.data?.propIncludeMotion?.value.toLowerCase() === "true";
+  const includeTimeStamp = osdQuery?.data?.propIncludeTimestamp?.value.toLowerCase() === "true";
+  const includeCameraName = osdQuery?.data?.propIncludeCameraName?.value.toLowerCase() === "true";
+  const overlayPosition = osdQuery?.data?.propOverlayPosition?.value;
+  const OSDTimestampFormat = osdQuery?.data?.propTimestampFormat?.value;
+
   const format = dispatcherQuery?.data?.propFormat?.value;
   const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
   const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
@@ -18,6 +32,29 @@ const OutputForms = () => {
   const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
   const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
 
+  const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
+  const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
+  const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
+  const customFieldLabel4 = customFieldsQuery?.data?.propStringName4?.value;
+  const customFieldLabel5 = customFieldsQuery?.data?.propStringName5?.value;
+  const customFieldLabel6 = customFieldsQuery?.data?.propStringName6?.value;
+
+  const customFieldValues1 = customFieldsQuery?.data?.propCustomFieldValue1?.value;
+  const customFieldValues2 = customFieldsQuery?.data?.propCustomFieldValue2?.value;
+  const customFieldValues3 = customFieldsQuery?.data?.propCustomFieldValue3?.value;
+  const customFieldValues4 = customFieldsQuery?.data?.propStringValue4?.value;
+  const customFieldValues5 = customFieldsQuery?.data?.propStringValue5?.value;
+  const customFieldValues6 = customFieldsQuery?.data?.propStringValue6?.value;
+
+  const initialCustomFields = [
+    { label: customFieldLabel1 || "", value: customFieldValues1 || "" },
+    { label: customFieldLabel2 || "", value: customFieldValues2 || "" },
+    { label: customFieldLabel3 || "", value: customFieldValues3 || "" },
+    { label: customFieldLabel4 || "", value: customFieldValues4 || "" },
+    { label: customFieldLabel5 || "", value: customFieldValues5 || "" },
+    { label: customFieldLabel6 || "", value: customFieldValues6 || "" },
+  ].filter((field) => field.label && field.value);
+
   const inititalValues: FormTypes = {
     format: format ?? "JSON",
     enabled: true,
@@ -41,6 +78,17 @@ const OutputForms = () => {
     LID2: "",
 
     // ftp - fields
+
+    //custom fields
+    customFields: initialCustomFields,
+
+    // OSD Options
+    includeVRM: includeVRM ?? false,
+    includeMotion: includeMotion ?? false,
+    includeTimeStamp: includeTimeStamp ?? false,
+    includeCameraName: includeCameraName ?? false,
+    overlayPosition: overlayPosition ?? "Top",
+    OSDTimestampFormat: OSDTimestampFormat ?? "UTC",
   };
 
   const handleSubmit = async (values: FormTypes) => {
@@ -86,6 +134,11 @@ const OutputForms = () => {
         await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
       }
     }
+    if (values.customFields && values.customFields.length > 0) {
+      const customFields = [...values.customFields];
+
+      await customFieldsMutation.mutateAsync(customFields);
+    }
   };
 
   if (isLoading) {
@@ -94,8 +147,11 @@ const OutputForms = () => {
 
   return (
     <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
-      <Form className="grid grid-cols-1 md:grid-cols-2">
-        <BearerTypeCard />
+      <Form className="grid grid-cols-1 md:grid-cols-2 gap-4 h-[50%]">
+        <div>
+          <BearerTypeCard />
+          <OSDOptionsCard isOSDLoading={isOSDLoading} />
+        </div>
         <ChannelCard />
       </Form>
     </Formik>

src/features/output/hooks/useCustomFields.ts

@@ -0,0 +1,65 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { CustomFieldConfig } from "../../../types/types";
+
+const fetchCustomFields = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-custom-fields`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postCustomFields = async (customFieldConfig: CustomFieldConfig[]) => {
+  const fields = [];
+
+  for (const customField of customFieldConfig) {
+    if (customField.value)
+      if (customFieldConfig.indexOf(customField) > 2) {
+        fields.push({
+          property: `propStringName${customFieldConfig.indexOf(customField) + 1}`,
+          value: customField.label,
+        });
+        fields.push({
+          property: `propStringValue${customFieldConfig.indexOf(customField) + 1}`,
+          value: customField.value,
+        });
+      } else {
+        fields.push(
+          {
+            property: `propCustomFieldName${customFieldConfig.indexOf(customField) + 1}`,
+            value: customField.label,
+          },
+          {
+            property: `propCustomFieldValue${customFieldConfig.indexOf(customField) + 1}`,
+            value: customField.value,
+          },
+        );
+      }
+  }
+  const customFieldConfigPayload = {
+    id: "SightingAmmend0-custom-fields",
+    fields,
+  };
+
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(customFieldConfigPayload),
+  });
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+export const useCustomFields = () => {
+  const customFieldsQuery = useQuery({
+    queryKey: ["customFields"],
+    queryFn: fetchCustomFields,
+  });
+
+  const customFieldsMutation = useMutation({
+    mutationKey: ["customFieldsMutation"],
+    mutationFn: postCustomFields,
+  });
+
+  return { customFieldsQuery, customFieldsMutation };
+};

src/features/output/hooks/useOSDConfig.ts

@@ -0,0 +1,52 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { OSDConfigFields } from "../../../types/types";
+
+const fetchOSDConfig = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-overlay`);
+
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postOSDConfig = async (data: OSDConfigFields) => {
+  const fields = [
+    { property: "propIncludeVRM", value: data.includeVRM },
+    { property: "propIncludeMotion", value: data.includeMotion },
+    { property: "propIncludeTimestamp", value: data.includeTimeStamp },
+    { property: "propIncludeCameraName", value: data.includeCameraName },
+    { property: "propOverlayPosition", value: data.overlayPosition },
+    { property: "propTimestampFormat", value: data.OSDTimestampFormat },
+  ];
+
+  const osdConfigPayload = {
+    id: "SightingAmmend0-overlay",
+    fields: fields,
+  };
+
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(osdConfigPayload),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to post OSD Config");
+  }
+  return response.json();
+};
+
+export const useOSDConfig = () => {
+  const osdQuery = useQuery({
+    queryKey: ["osdConfig"],
+    queryFn: fetchOSDConfig,
+  });
+
+  const osdMutation = useMutation({
+    mutationFn: postOSDConfig,
+    mutationKey: ["postOSDConfig"],
+  });
+
+  return { osdQuery, osdMutation };
+};

src/features/settings/components/SystemConfig.tsx

@@ -1,11 +1,15 @@
-import { Formik, Form, Field } from "formik";
+import { Formik, Form, Field, FieldArray } from "formik";
 import { useSystemSettings } from "../hooks/useSystemSettings";
-import type { SystemSettings } from "../../../types/types";
+import type { NetworkConfig, SystemSettings } from "../../../types/types";
 import { toast } from "sonner";
+import { useGetNetworkConfig } from "../hooks/useGetNetworkConfig";
 
 const SystemConfig = () => {
   const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
+  const { networkConfigQuery, networkConfigMutation } = useGetNetworkConfig();
 
+  const isLoading = networkConfigMutation?.isPending || networkConfigMutation?.isPending;
+  const isGettingLoading = systemSettingsQuery?.isLoading || networkConfigQuery?.isLoading;
   const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
   const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
   const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
@@ -15,8 +19,11 @@ const SystemConfig = () => {
   const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
   const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
   const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
-  // const primaryServer = systemSettingsQuery?.data?.propPrimaryDNSServer?.value;
-  // const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value;
+  const primaryServer = networkConfigQuery?.data?.propNameServerPrimary?.value;
+  const secondaryServer = networkConfigQuery?.data?.propNameServerSecondary?.value;
+  const ipAddress = networkConfigQuery?.data?.propHost?.value;
+  const subnetMask = networkConfigQuery?.data?.propNetmask?.value;
+  const gateway = networkConfigQuery?.data?.propGateway?.value;
 
   const initialValues = {
     deviceName: deviceName ?? "",
@@ -25,107 +32,200 @@ const SystemConfig = () => {
     SNTPServer: SNTPServer ?? "",
     SNTPInterval: SNTPInterval ?? 60,
     SNTPIntervalMinutes: SNTPInterval ?? 60,
-    primaryServer: "",
-    secondaryServer: "",
+    primaryServer: primaryServer ?? "",
+    secondaryServer: secondaryServer ?? "",
     timeSource: timeSource ?? "",
+    ipAddress: ipAddress ?? "",
+    subnetMask: subnetMask ?? "",
+    gateway: gateway ?? "",
+    customFields: [],
   };
 
-  const handleSubmit = async (values: SystemSettings) => {
+  const handleSubmit = async (values: SystemSettings & NetworkConfig) => {
     const result = await systemSettingsMutation.mutateAsync(values);
-    console.log(result);
-    if (result.id) {
+    const networkResult = await networkConfigMutation.mutateAsync({
+      ipAddress: values.ipAddress,
+      subnetMask: values.subnetMask,
+      gateway: values.gateway,
+      primaryServer: values.primaryServer,
+      secondaryServer: values.secondaryServer,
+    });
+
+    if (result.id && networkResult.id) {
       toast.success("System settings updated successfully");
+    } else {
+      toast.error("Failed to update system settings");
     }
   };
 
+  if (isGettingLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      <Form>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="deviceName">Device Name</label>
-          <Field
-            name="deviceName"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter device name"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="timeZone">Timezone</label>
-          <Field
-            name="timeZone"
-            as="select"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
-            autoComplete="off"
+      {({ values }) => (
+        <Form className="flex flex-col space-y-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="deviceName">Device Name</label>
+            <Field
+              name="deviceName"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter device name"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="timeZone">Timezone</label>
+            <Field
+              name="timeZone"
+              as="select"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
+              autoComplete="off"
+            >
+              {timeZoneOpts?.map((option: string) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </Field>
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="timeSource">Time Source</label>
+            <Field
+              name="timeSource"
+              as="select"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
+              autoComplete="off"
+            >
+              {timeSourceOpts?.map((option: string) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </Field>
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="SNTPServer">SNTP Server</label>
+            <Field
+              name="SNTPServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter SNTP server"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="SNTPInterval">SNTP Interval</label>
+            <Field
+              name="SNTPInterval"
+              type="number"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter SNTP interval"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="subnetMask">Subnet Mask</label>
+            <Field
+              name="subnetMask"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter subnet mask"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="ipAddress">IP Address</label>
+            <Field
+              name="ipAddress"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter IP address"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="gateway">Gateway</label>
+            <Field
+              name="gateway"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter gateway"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="primaryServer">Primary DNS Server</label>
+            <Field
+              name="primaryServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter primary DNS server"
+              autoComplete="off"
+            />
+          </div>
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
+            <label htmlFor="secondaryServer">Secondary DNS Server</label>
+            <Field
+              name="secondaryServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter secondary DNS server"
+              autoComplete="off"
+            />
+          </div>
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
+          </div>
+          <div className="items-center mb-4">
+            <FieldArray name="customFields">
+              {(arrayHelpers) => (
+                <>
+                  {values.customFields.map((_, index) => (
+                    <div key={index} className="flex flex-row justify-between items-center mb-4">
+                      <label htmlFor={`customFields.${index}`} className="mr-2">
+                        Custom Field {index + 1}
+                      </label>
+                      <Field
+                        name={`customFields.${index}`}
+                        key={index}
+                        className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+                        placeholder={`Enter Custom Field ${index + 1}`}
+                        autoComplete="off"
+                      />
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => arrayHelpers.push("")}
+                    className="mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                  >
+                    Add Custom Field
+                  </button>
+                  {values.customFields.length > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => arrayHelpers.pop()}
+                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                    >
+                      Remove Custom Field
+                    </button>
+                  )}
+                </>
+              )}
+            </FieldArray>
+          </div>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-green-700 text-white rounded-lg hover:bg-green-800 hover:cursor-pointer"
+            disabled={isLoading}
           >
-            {timeZoneOpts?.map((option: string) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </Field>
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="timeSource">Time Source</label>
-          <Field
-            name="timeSource"
-            as="select"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs bg-[#253445] "
-            autoComplete="off"
-          >
-            {timeSourceOpts?.map((option: string) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </Field>
-        </div>
-
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="SNTPServer">SNTP Server</label>
-          <Field
-            name="SNTPServer"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter SNTP server"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="SNTPInterval">SNTP Interval</label>
-          <Field
-            name="SNTPInterval"
-            type="number"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter SNTP interval"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="primaryServer">Primary DNS Server</label>
-          <Field
-            name="primaryServer"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter primary DNS server"
-            autoComplete="off"
-          />
-        </div>
-        <div className="flex flex-row justify-between items-center mb-4">
-          <label htmlFor="secondaryServer">Secondary DNS Server</label>
-          <Field
-            name="secondaryServer"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-            placeholder="Enter secondary DNS server"
-            autoComplete="off"
-          />
-        </div>
-        <button type="submit" className="px-4 py-2 bg-green-700 text-white rounded-lg">
-          Save Settings
-        </button>
-      </Form>
+            {isLoading ? "Saving..." : "Save Settings"}
+          </button>
+        </Form>
+      )}
     </Formik>
   );
 };

src/features/settings/hooks/useGetNetworkConfig.ts

@@ -0,0 +1,49 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { NetworkConfig } from "../../../types/types";
+
+const fetchNetworkConfig = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=GLOBAL--NetworkConfig`);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+const postNetworkConfig = async (networkConfig: NetworkConfig) => {
+  const fields = [
+    { property: "propNetmask", value: networkConfig.subnetMask },
+    { property: "propHost", value: networkConfig.ipAddress },
+    { property: "propGateway", value: networkConfig.gateway },
+  ];
+
+  if (networkConfig.primaryServer !== undefined) {
+    fields.push({ property: "propNameServerPrimary", value: networkConfig.primaryServer });
+  }
+  if (networkConfig.secondaryServer !== undefined) {
+    fields.push({ property: "propNameServerSecondary", value: networkConfig.secondaryServer });
+  }
+  const networkConfigPayload = {
+    id: "GLOBAL--NetworkConfig",
+    fields,
+  };
+
+  const respones = await fetch(`${CAMBASE}/api/update-config?id=GLOBAL--NetworkConfig`, {
+    method: "POST",
+    body: JSON.stringify(networkConfigPayload),
+  });
+  if (!respones.ok) throw new Error("Network response was not ok");
+  return respones.json();
+};
+
+export const useGetNetworkConfig = () => {
+  const networkConfigQuery = useQuery({
+    queryKey: ["networkConfig"],
+    queryFn: fetchNetworkConfig,
+  });
+
+  const networkConfigMutation = useMutation({
+    mutationKey: ["networkConfigMutation"],
+    mutationFn: postNetworkConfig,
+  });
+
+  return { networkConfigQuery, networkConfigMutation };
+};

src/hooks/useBlackBoard.ts

@@ -0,0 +1,35 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../utils/config";
+import type { BlackBoardOptions } from "../types/types";
+
+const fetchBlackBoardData = async () => {
+  const response = await fetch(`${CAMBASE}/api/blackboard`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+const viewBlackBoardData = async (options: BlackBoardOptions) => {
+  const response = await fetch(`${CAMBASE}/api/blackboard`, {
+    method: "POST",
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to view blackboard data");
+  }
+  return response.json();
+};
+
+export const useBlackBoard = () => {
+  const blackboardQuery = useQuery({
+    queryKey: ["blackboardData"],
+    queryFn: fetchBlackBoardData,
+  });
+
+  const blackboardMutation = useMutation({
+    mutationKey: ["viewBlackBoardData"],
+    mutationFn: (options: BlackBoardOptions) => viewBlackBoardData(options),
+  });
+  return { blackboardQuery, blackboardMutation };
+};

src/index.css

@@ -5,3 +5,33 @@ body {
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Modal animations */
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+  transition: all 200ms ease-in-out;
+}
+
+.ReactModal__Content--after-open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.ReactModal__Content--before-close {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+}

src/types/types.ts

@@ -56,6 +56,15 @@ export type OptionalLaneIDs = {
   LID3?: string;
 };
 
+export type CustomField = {
+  label: string;
+  value: string;
+};
+
+export type CustomFields = {
+  customFields?: CustomField[];
+};
+
 export type InitialValuesFormErrors = {
   backOfficeURL?: string;
   username?: string;
@@ -64,7 +73,16 @@ export type InitialValuesFormErrors = {
   readTimeoutSeconds?: string;
 };
 
-export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
+export type OSDConfigFields = {
+  includeVRM: boolean;
+  includeMotion: boolean;
+  includeTimeStamp: boolean;
+  includeCameraName: boolean;
+  overlayPosition: "Top" | "Bottom" | "Left" | "Right";
+  OSDTimestampFormat: "UTC" | "LOCAL";
+};
+
+export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs & CustomFields & OSDConfigFields;
 type FieldProperty = {
   datatype: string;
   value: string;
@@ -125,6 +143,11 @@ export type CameraFeedState = {
   };
 
   tabIndex?: number;
+  zoomLevel: {
+    A: number;
+    B: number;
+    C: number;
+  };
 };
 
 export type CameraFeedAction =
@@ -152,6 +175,17 @@ export type CameraFeedAction =
   | {
       type: "RESET_PAINTED_CELLS";
       payload: { cameraFeedID: "A" | "B" | "C"; paintedCells: Map<string, PaintedCell> };
+    }
+  | {
+      type: "SET_CAMERA_FEED_DATA";
+      cameraState: CameraFeedState;
+    }
+  | {
+      type: "RESET_CAMERA_FEED";
+    }
+  | {
+      type: "SET_ZOOM_LEVEL";
+      payload: { cameraFeedID: "A" | "B" | "C"; zoomLevel: number };
     };
 
 export type DecodeReading = {
@@ -182,6 +216,25 @@ export type SystemSettings = {
   timeSource: string;
   SNTPServer: string;
   SNTPIntervalMinutes: number;
+};
+
+export type NetworkConfig = {
+  ipAddress: string;
+  subnetMask: string;
+  gateway: string;
   primaryServer?: string;
   secondaryServer?: string;
 };
+
+export type CustomFieldConfig = {
+  label: string;
+  value: string;
+};
+
+export type BlackBoardOptions = {
+  operation?: string;
+  path?: string;
+  value?: object | string | number | (string | number)[] | null;
+};
+
+export type CameraZoomConfig = { cameraFeedID: string; zoomLevel: number };

src/ui/Card.tsx

@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
         className,
       )}
     >

src/ui/Header.tsx

@@ -1,15 +1,29 @@
+import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 
 const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
   return (
-    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
-      <div className="w-28">
-        <Link to={"/"}>
-          <img src={Logo} alt="Logo" width={150} height={150} />
-        </Link>
+    <nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
+      <div className="flex flex-row justify-between w-full items-center">
+        <div className="w-28">
+          <Link to={"/"} onClick={() => setIsMenuOpen(false)}>
+            <img src={Logo} alt="Logo" width={150} height={150} />
+          </Link>
+        </div>
+
+        <div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
+          <FontAwesomeIcon icon={faBars} />
+        </div>
       </div>
-      <div className="flex gap-4 text-lg items-center">
+
+      <div className="md:flex hidden gap-4 text-lg items-center">
         <Link
           to="/"
           className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
@@ -37,7 +51,26 @@ const Header = () => {
           Settings
         </Link>
       </div>
-    </header>
+      {/* mobile menu */}
+      {isMenuOpen && (
+        <div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
+          <Link to="/" className="" onClick={toggleMenu}>
+            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
+            Dashboard
+          </Link>
+          <Link to="/baywatch" className="" onClick={toggleMenu}>
+            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
+            Cameras
+          </Link>
+          <Link to="/output" className="" onClick={toggleMenu}>
+            Output
+          </Link>
+          <Link to="/settings" className="" onClick={toggleMenu}>
+            Settings
+          </Link>
+        </div>
+      )}
+    </nav>
   );
 };
 

src/ui/ModalComponent.tsx

@@ -11,9 +11,26 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+      closeTimeoutMS={200}
+      style={{
+        overlay: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
     >
+      <div className="flex justify-end">
+        <button
+          onClick={close}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4"
+        >
+          Close
+        </button>
+      </div>
       {children}
     </Modal>
   );

src/ui/SliderComponent.tsx

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

yarn.lock

@@ -226,6 +226,11 @@
     "@babel/plugin-transform-modules-commonjs" "^7.27.1"
     "@babel/plugin-transform-typescript" "^7.28.5"
 
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
+  integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
+
 "@babel/template@^7.27.2":
   version "7.27.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
@@ -1314,6 +1319,11 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -2142,6 +2152,23 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+rc-slider@^11.1.9:
+  version "11.1.9"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
+  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.36.0"
+
+rc-util@^5.36.0:
+  version "5.44.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
+  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
 react-dom@^19.2.0:
   version "19.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
@@ -2159,6 +2186,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-konva@^19.2.0:
   version "19.2.0"
   resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-19.2.0.tgz#b4cc5d73cd6d642569e4df36a0139996c3dcf8e6"
@@ -2461,6 +2493,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
+  integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
+
 use-sync-external-store@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"