- added camera black board fetch and post

- region selector can save settings and painted regions and fetch on load - will add reset all
- general fixes across the app
2025-12-08 10:59:46 +00:00 · 2025-12-08 09:03:04 +00:00 · 2025-12-06 21:17:24 +00:00 · 2025-12-06 21:16:11 +00:00 · 2025-12-05 17:01:57 +00:00 · 2025-12-05 12:53:42 +00:00
76 changed files with 2779 additions and 594 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BayIQ</title>
  </head>
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
    "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"
@@ -35,6 +36,7 @@
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
+    "@types/react-modal": "^3.16.3",
    "@vitejs/plugin-react": "^5.1.1",
    "autoprefixer": "^10.4.22",
    "eslint": "^9.39.1",
--- a/public/MAV-Blue.svg
+++ b/public/MAV-Blue.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.27 52.63">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #20456f;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer_2">
+    <g>
+      <g id="Layer_1-2">
+        <path class="cls-1" d="M150.57,0h-40.57c-7.53,0-13.64,6.11-13.64,13.64v38.99h13.64v-13.68h40.57v13.68h13.64V13.64c0-7.53-6.11-13.64-13.64-13.64ZM110,28.55v-12.59c0-1.72,1.39-3.11,3.11-3.11h34.34c1.72,0,3.11,1.39,3.11,3.11v12.59h-40.57,0ZM88.45,13.64v38.99h-13.64V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.5c-1.72,0-3.11,1.39-3.11,3.11v36.67h-13.73V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.49c-1.72,0-3.11,1.39-3.11,3.11v36.67H0V13.64C0,6.11,6.11,0,13.64,0h23.55c2.72,0,5.18,1.05,7.03,2.76,1.85-1.71,4.32-2.76,7.03-2.76h23.55c7.53,0,13.64,6.11,13.64,13.64h.01ZM193.88,52.63c-1.19,0-2.28-.68-2.8-1.75L166.25,0h13.16c1.19,0,2.28.68,2.8,1.75,0,0,12.25,25.11,16.55,33.92,4.3-8.81,16.55-33.92,16.55-33.92.53-1.07,1.61-1.75,2.8-1.75h13.16l-24.83,50.88c-.52,1.07-1.61,1.75-2.8,1.75h-9.78.02Z"/>
+      </g>
+      <path class="cls-1" d="M222.79,48.39c0-2.36,1.9-4.24,4.24-4.24s4.24,1.88,4.24,4.24-1.88,4.24-4.24,4.24-4.24-1.9-4.24-4.24ZM223.45,48.39c0,1.96,1.6,3.58,3.58,3.58s3.56-1.62,3.56-3.58-1.58-3.56-3.56-3.56-3.58,1.56-3.58,3.56ZM228.17,50.83l-1.26-1.92h-.8v1.92h-.72v-4.86h1.98c.9,0,1.62.58,1.62,1.48,0,1.08-.96,1.44-1.24,1.44l1.3,1.94h-.88ZM226.11,46.57v1.72h1.26c.5,0,.88-.34.88-.84,0-.54-.38-.88-.88-.88h-1.26Z"/>
+    </g>
+  </g>
+</svg>
--- a/src/app/config/wsconfig.ts
+++ b/src/app/config/wsconfig.ts
@@ -1,5 +1,5 @@
 export const wsConfig = {
-  infoBar: "ws://100.115.148.59/websocket-infobar",
+  infoBar: "ws://100.115.125.56/websocket-infobar",
 };

 export type SocketKey = keyof typeof wsConfig;
--- a/src/app/context/CameraFeedContext.ts
+++ b/src/app/context/CameraFeedContext.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import type { CameraFeedAction, CameraFeedState } from "../../types/types";
+
+type CameraFeedContextType = {
+  state: CameraFeedState;
+  //   check and refactor
+  dispatch: (state: CameraFeedAction) => void;
+};
+
+export const CameraFeedContext = createContext<CameraFeedContextType | null>(null);
+
+export const useCameraFeedContext = () => {
+  const ctx = useContext(CameraFeedContext);
+  if (!ctx) throw new Error("useCameraFeedContext must be used inside <CameraFeedContext.Provider>");
+  return ctx;
+};
--- a/src/app/providers/AppProviders.tsx
+++ b/src/app/providers/AppProviders.tsx
@@ -1,11 +1,14 @@
 import type { PropsWithChildren } from "react";
 import { QueryProvider } from "./QueryProviders";
 import { WebSocketProvider } from "./WebSocketProvider";
+import { CameraFeedProvider } from "./CameraFeedProvider";

 export const AppProviders = ({ children }: PropsWithChildren) => {
  return (
    <QueryProvider>
-      <WebSocketProvider>{children}</WebSocketProvider>
+      <CameraFeedProvider>
+        <WebSocketProvider>{children}</WebSocketProvider>
+      </CameraFeedProvider>
    </QueryProvider>
  );
 };
--- a/src/app/providers/CameraFeedProvider.tsx
+++ b/src/app/providers/CameraFeedProvider.tsx
@@ -0,0 +1,33 @@
+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";
+
+export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
+  const { blackboardMutation } = useBlackBoard();
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    const fetchBlackBoardData = async () => {
+      const result = await blackboardMutation.mutateAsync({
+        operation: "VIEW",
+        path: "cameraFeed",
+      });
+      if (!result?.result || typeof result.result === "string") return;
+      const cameraFeedData: CameraFeedState = result.result;
+      const recontructedState = {
+        ...cameraFeedData,
+        paintedCells: {
+          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();
+  }, []);
+
+  return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
+};
--- a/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -0,0 +1,113 @@
+import type { CameraFeedAction, CameraFeedState, PaintedCell } from "../../types/types";
+
+export const initialState: CameraFeedState = {
+  cameraFeedID: "A",
+  paintedCells: {
+    A: new Map<string, PaintedCell>(),
+    B: new Map<string, PaintedCell>(),
+    C: new Map<string, PaintedCell>(),
+  },
+  regionsByCamera: {
+    A: [
+      { name: "Bay 1", brushColour: "#ff0000" },
+      { name: "Bay 2", brushColour: "#00ff00" },
+      { name: "Bay 3", brushColour: "#0400ff" },
+      { name: "Bay 4", brushColour: "#ffff00" },
+      { name: "Bay 5", brushColour: "#fc35db" },
+    ],
+    B: [
+      { name: "Bay 1", brushColour: "#ff0000" },
+      { name: "Bay 2", brushColour: "#00ff00" },
+      { name: "Bay 3", brushColour: "#0400ff" },
+      { name: "Bay 4", brushColour: "#ffff00" },
+      { name: "Bay 5", brushColour: "#fc35db" },
+    ],
+    C: [
+      { name: "Bay 1", brushColour: "#ff0000" },
+      { name: "Bay 2", brushColour: "#00ff00" },
+      { name: "Bay 3", brushColour: "#0400ff" },
+      { name: "Bay 4", brushColour: "#ffff00" },
+      { name: "Bay 5", brushColour: "#fc35db" },
+    ],
+  },
+
+  selectedRegionIndex: 0,
+  modeByCamera: {
+    A: "painter",
+    B: "painter",
+    C: "painter",
+  },
+};
+
+export function reducer(state: CameraFeedState, action: CameraFeedAction) {
+  switch (action.type) {
+    case "SET_CAMERA_FEED":
+      return {
+        ...state,
+        cameraFeedID: action.payload,
+      };
+    case "CHANGE_MODE":
+      return {
+        ...state,
+        modeByCamera: {
+          ...state.modeByCamera,
+          [action.payload.cameraFeedID]: action.payload.mode,
+        },
+      };
+    case "SET_SELECTED_REGION_INDEX":
+      return {
+        ...state,
+        selectedRegionIndex: action.payload,
+      };
+    case "SET_SELECTED_REGION_COLOUR":
+      return {
+        ...state,
+        regionsByCamera: {
+          ...state.regionsByCamera,
+          [action.payload.cameraFeedID]: state.regionsByCamera[action.payload.cameraFeedID].map((region) =>
+            region.name === action.payload.regionName ? { ...region, brushColour: action.payload.newColour } : region,
+          ),
+        },
+      };
+    case "ADD_NEW_REGION":
+      return {
+        ...state,
+        regionsByCamera: {
+          ...state.regionsByCamera,
+          [action.payload.cameraFeedID]: [
+            ...state.regionsByCamera[action.payload.cameraFeedID],
+            { name: action.payload.regionName, brushColour: action.payload.brushColour },
+          ],
+        },
+      };
+    case "REMOVE_REGION":
+      return {
+        ...state,
+        regionsByCamera: {
+          ...state.regionsByCamera,
+          [action.payload.cameraFeedID]: state.regionsByCamera[action.payload.cameraFeedID].filter(
+            (region) => region.name !== action.payload.regionName,
+          ),
+        },
+      };
+    case "RESET_PAINTED_CELLS":
+      return {
+        ...state,
+        paintedCells: {
+          ...state.paintedCells,
+          [state.cameraFeedID]: new Map<string, PaintedCell>(),
+        },
+      };
+    case "SET_CAMERA_FEED_DATA":
+      return {
+        ...action.cameraState,
+      };
+    case "RESET_CAMERA_FEED":
+      return {
+        ...initialState,
+      };
+
+    default:
+      return state;
+  }
+}
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -1,46 +1,24 @@
-import { useRef, useState } from "react";
+import { useState } from "react";

 import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
-import type { PaintedCell, Region } from "../../../types/types";
-import PlatePatch from "./PlatePatch/PlatePatch";
+
+import PlatePatch from "./PlatePatch/SightingPatch";

 const CameraGrid = () => {
-  const [regions, setRegions] = useState<Region[]>([
-    { name: "Region 1", brushColour: "#ff0000" },
-    { name: "Region 2", brushColour: "#00ff00" },
-    { name: "Region 3", brushColour: "#0400ff" },
-  ]);
-  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
-  const [mode, setMode] = useState("");
  const [tabIndex, setTabIndex] = useState(0);

-  const updateRegionColour = (index: number, newColour: string) => {
-    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
-  };
-
-  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
-
  return (
-    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
-      <VideoFeedGridPainter
-        regions={regions}
-        selectedRegionIndex={selectedRegionIndex}
-        mode={mode}
-        paintedCells={paintedCellsRef}
-      />
-      <CameraSettings
-        regions={regions}
-        selectedRegionIndex={selectedRegionIndex}
-        onSelectRegion={setSelectedRegionIndex}
-        onChangeRegionColour={updateRegionColour}
-        mode={mode}
-        onSelectMode={setMode}
-        tabIndex={tabIndex}
-        setTabIndex={setTabIndex}
-        paintedCells={paintedCellsRef}
-      />
-      <PlatePatch />
+    <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
+      <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} />
    </div>
  );
 };
--- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
@@ -0,0 +1,60 @@
+import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
+import { useEffect } from "react";
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import RegionSelector from "./RegionSelector";
+
+type CameraPanelProps = {
+  tabIndex: number;
+};
+
+const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const regions = state.regionsByCamera[cameraFeedID];
+
+  const selectedRegionIndex = state.selectedRegionIndex;
+  const mode = state.modeByCamera[cameraFeedID];
+
+  useEffect(() => {
+    const mapIndextoCameraId = () => {
+      switch (tabIndex) {
+        case 0:
+          return "A";
+        case 1:
+          return "B";
+        case 2:
+          return "C";
+        default:
+          return "A";
+      }
+    };
+
+    const cameraId = mapIndextoCameraId();
+    dispatch({ type: "SET_CAMERA_FEED", payload: cameraId });
+  }, [dispatch, tabIndex]);
+
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Target Detection</Tab>
+        <Tab>Camera Controls</Tab>
+      </TabList>
+      <TabPanel>
+        <RegionSelector
+          regions={regions}
+          selectedRegionIndex={selectedRegionIndex}
+          mode={mode}
+          cameraFeedID={cameraFeedID}
+        />
+      </TabPanel>
+      <TabPanel>
+        <div className="p-4">
+          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
+          <p>Controls for camera {cameraFeedID} will go here.</p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default CameraPanel;
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -1,65 +1,34 @@
 import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
-import RegionSelector from "./RegionSelector";
-import type { PaintedCell, Region } from "../../../../types/types";
-import type { RefObject } from "react";
+import CameraPanel from "./CameraPanel";

 type CameraSettingsProps = {
-  regions: Region[];
-  selectedRegionIndex: number;
-  onSelectRegion: (index: number) => void;
-  onChangeRegionColour: (index: number, colour: string) => void;
-  mode: string;
-  onSelectMode: (mode: string) => void;
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
-  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

-const CameraSettings = ({
-  regions,
-  selectedRegionIndex,
-  onSelectRegion,
-  onChangeRegionColour,
-  mode,
-  onSelectMode,
-  tabIndex,
-  setTabIndex,
-  paintedCells,
-}: CameraSettingsProps) => {
+const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
+    <Card className="p-4 w-full h-full max-h-screen">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
        onSelect={(index) => setTabIndex(index)}
      >
        <TabList>
-          <Tab>Target Detection</Tab>
-          <Tab>Camera 1</Tab>
-          <Tab>Camera 2</Tab>
-          <Tab>Camera 3</Tab>
+          <Tab>Camera A</Tab>
+          <Tab>Camera B</Tab>
+          <Tab>Camera C</Tab>
        </TabList>
        <TabPanel>
-          <RegionSelector
-            regions={regions}
-            selectedRegionIndex={selectedRegionIndex}
-            onSelectRegion={onSelectRegion}
-            onChangeRegionColour={onChangeRegionColour}
-            mode={mode}
-            onSelectMode={onSelectMode}
-            paintedCells={paintedCells}
-          />
+          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
        <TabPanel>
-          <div>Camera details {tabIndex}</div>
+          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
        <TabPanel>
-          <div>Camera details {tabIndex}</div>
-        </TabPanel>
-        <TabPanel>
-          <div>Camera details {tabIndex}</div>
+          <CameraPanel tabIndex={tabIndex} />
        </TabPanel>
      </Tabs>
    </Card>
--- a/src/features/cameras/components/CameraSettings/ColourPicker.tsx
+++ b/src/features/cameras/components/CameraSettings/ColourPicker.tsx
@@ -10,6 +10,7 @@ const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
      name=""
      id=""
      value={colour}
+      disabled
      onChange={(e) => setColour(e.target.value)}
      className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
    />
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -1,117 +1,237 @@
+import type { ColourData, PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
-import type { PaintedCell, Region } from "../../../../types/types";
-import type { RefObject } from "react";
+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;
-  onSelectRegion: (index: number) => void;
-  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
-  onSelectMode: (mode: string) => void;
-  paintedCells: RefObject<Map<string, PaintedCell>>;
+  cameraFeedID: "A" | "B" | "C";
 };

-const RegionSelector = ({
-  regions,
-  selectedRegionIndex,
-  onSelectRegion,
-  onChangeRegionColour,
-  mode,
-  onSelectMode,
-  paintedCells,
-}: RegionSelectorProps) => {
+const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
+  const { colourMutation } = useColourDectection();
+  const { state, dispatch } = useCameraFeedContext();
+  const { blackboardMutation } = useBlackBoard();
+  const paintedCells = state.paintedCells[cameraFeedID];
+
  const handleChange = (e: { target: { value: string } }) => {
-    onSelectMode(e.target.value);
+    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
  };

-  const handleResetClick = () => {
-    const map = paintedCells.current;
-    map.clear();
+  const handleResetRegion = () => {
+    dispatch({
+      type: "RESET_PAINTED_CELLS",
+      payload: { cameraFeedID: cameraFeedID, paintedCells: new Map<string, PaintedCell>() },
+    });
+  };
+
+  const handleModeChange = (newMode: string) => {
+    dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
+  };
+
+  const handleRegionSelect = (index: number) => {
+    dispatch({ type: "SET_SELECTED_REGION_INDEX", payload: index });
+  };
+
+  const handleRegionColourChange = (index: number, newColour: string) => {
+    const regionName = regions[index].name;
+
+    dispatch({
+      type: "SET_SELECTED_REGION_COLOUR",
+      payload: { cameraFeedID: cameraFeedID, regionName: regionName, newColour: newColour },
+    });
+  };
+
+  const handleAddRegionClick = () => {
+    const regionName = `Bay ${regions.length + 1}`;
+    dispatch({
+      type: "ADD_NEW_REGION",
+      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
+    });
+  };
+
+  const handleRemoveClick = () => {
+    dispatch({
+      type: "REMOVE_REGION",
+      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
+    });
+  };
+
+  const handleResetAll = () => {
+    dispatch({ type: "RESET_CAMERA_FEED" });
+  };
+
+  const handleSaveclick = () => {
+    const regions: ColourData[] = [];
+    const test = Array.from(paintedCells.entries());
+    const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
+    const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
+    const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
+    const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
+    const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
+    const region1Data = {
+      id: 1,
+      cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region2Data = {
+      id: 2,
+      cells: region2.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region3Data = {
+      id: 3,
+      cells: region3.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region4Data = {
+      id: 4,
+      cells: region4.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region5Data = {
+      id: 5,
+      cells: region5.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    if (region1Data.cells.length > 0) {
+      regions.push(region1Data);
+    }
+    if (region2Data.cells.length > 0) {
+      regions.push(region2Data);
+    }
+    if (region3Data.cells.length > 0) {
+      regions.push(region3Data);
+    }
+    if (region4Data.cells.length > 0) {
+      regions.push(region4Data);
+    }
+    if (region5Data.cells.length > 0) {
+      regions.push(region5Data);
+    }
+
+    colourMutation.mutate({ cameraFeedID, regions: regions });
+
+    // Convert Map to plain object for blackboard
+    const serializableState = {
+      ...state,
+      paintedCells: {
+        A: Array.from(state.paintedCells.A.entries()),
+        B: Array.from(state.paintedCells.B.entries()),
+        C: Array.from(state.paintedCells.C.entries()),
+      },
+    };
+    blackboardMutation.mutate({ operation: "INSERT", path: `cameraFeed`, value: serializableState });
+    toast.success("Region data saved successfully!");
  };

  return (
-    <div 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 max-h-[50%]">
+      <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>
+          </div>
+        </div>
+
+        <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);
+                      }}
+                    />
+                    <span className="text-xl">{region.name}</span>
+                  </div>
+                  <ColourPicker
+                    colour={region.brushColour}
+                    setColour={(c: string) => handleRegionColourChange(idx, c)}
+                  />
+                  <div></div>
+                </label>
+              );
+            })}
+          </>
+          <div className="flex flex-col gap-4  mt-4">
+            <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" 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">
-        <h2 className="text-2xl mb-2">Region Select</h2>
-        <>
-          {regions.map((region, idx) => {
-            const isSelected = selectedRegionIndex === idx;
-            const inputId = `region-${idx}`;
-            return (
-              <label
-                htmlFor={inputId}
-                key={region.name}
-                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
-                  ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
-              >
-                <div className="flex flex-row gap-4 items-center">
-                  <input
-                    type="radio"
-                    checked={isSelected}
-                    id={inputId}
-                    name="region"
-                    className="sr-only"
-                    onChange={() => {
-                      onSelectMode("painter");
-                      onSelectRegion(idx);
-                    }}
-                  />
-                  <span className="text-xl">{region.name}</span>
-                </div>
-                <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
-                <p className="text-slate-400">{region.brushColour}</p>
-              </label>
-            );
-          })}
-        </>
-      </div>

-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
-        <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 md:flex-row mx-auto gap-4 justify-center">
          <button
-            onClick={handleResetClick}
-            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"
+            onClick={handleSaveclick}
+            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
          >
-            Reset Regions
+            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-full hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset Region
+          </button>
+          <button
+            onClick={handleResetAll}
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset All
          </button>
        </div>
      </div>
--- a/src/features/cameras/components/PlatePatch/PlatePatch.tsx
+++ b/src/features/cameras/components/PlatePatch/PlatePatch.tsx
@@ -1,7 +0,0 @@
-import Card from "../../../../ui/Card";
-
-const PlatePatch = () => {
-  return <Card className="md:row-start-4 md:col-span-2">PlatePatch</Card>;
-};
-
-export default PlatePatch;
--- a/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
@@ -0,0 +1,44 @@
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import type { DecodeReading } from "../../../../types/types";
+import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
+
+const SightingEntryTable = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
+
+  const isLoading = entryQuery?.isFetching;
+  const readings = entryQuery?.data?.decodes;
+
+  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
+  return (
+    <div className="border border-gray-600 rounded-lg  m-2">
+      <div className="overflow-y-auto ">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+            <tr>
+              <th className="px-4 py-3 font-semibold">VRM</th>
+              <th className="px-4 py-3 font-semibold">Bay ID</th>
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+              <th className="px-4 py-3 font-semibold">First Seen</th>
+              <th className="px-4 py-3 font-semibold">Last Seen</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-700">
+            {readings?.map((reading: DecodeReading) => (
+              <tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
+                <td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
+                <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
+                <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default SightingEntryTable;
--- a/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
@@ -0,0 +1,44 @@
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import type { DecodeReading } from "../../../../types/types";
+import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
+
+const SightingExitTable = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
+
+  const isLoading = exitQuery?.isFetching;
+  const readings = exitQuery?.data?.decodes;
+
+  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
+  return (
+    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
+      <div className="overflow-y-auto ">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+            <tr>
+              <th className="px-4 py-3 font-semibold">VRM</th>
+              <th className="px-4 py-3 font-semibold">Bay ID</th>
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+              <th className="px-4 py-3 font-semibold">First Seen</th>
+              <th className="px-4 py-3 font-semibold">Last Seen</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-700">
+            {readings?.map((reading: DecodeReading) => (
+              <tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
+                <td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
+                <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
+                <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default SightingExitTable;
--- a/src/features/cameras/components/PlatePatch/SightingPatch.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingPatch.tsx
@@ -0,0 +1,27 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import Card from "../../../../ui/Card";
+import CardHeader from "../../../../ui/CardHeader";
+import SightingEntryTable from "./SightingEntryTable";
+import SightingExitTable from "./SightingExitTable";
+
+const PlatePatch = () => {
+  return (
+    <Card className="p-4 w-full max-h-[600px] flex flex-col md:w-[95%]">
+      <CardHeader title="Entry / Exit" />
+      <Tabs defaultIndex={1} className="flex-1 flex flex-col">
+        <TabList>
+          <Tab>Entry Sightings</Tab>
+          <Tab>Exit Sightings</Tab>
+        </TabList>
+        <TabPanel>
+          <SightingEntryTable />
+        </TabPanel>
+        <TabPanel>
+          <SightingExitTable />
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default PlatePatch;
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -2,26 +2,31 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
-import type { PaintedCell, Region } from "../../../../types/types";
-import Card from "../../../../ui/Card";

-const rows = 40;
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+
+const BACKEND_WIDTH = 640;
+const BACKEND_HEIGHT = 360;
+const BACKEND_CELL_SIZE = 16;
+
+const rows = 22.5;
 const cols = 40;
-const size = 20;
 const gap = 0;

-type VideoFeedGridPainterProps = {
-  regions: Region[];
-  selectedRegionIndex: number;
-  mode: string;
-  paintedCells: RefObject<Map<string, PaintedCell>>;
-};
-
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells }: VideoFeedGridPainterProps) => {
+const VideoFeedGridPainter = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state.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: 740, height: 460 });
+  const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
  const isDrawingRef = useRef(false);

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

@@ -47,7 +52,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells
    const key = `${row}-${col}`;
    const currentColour = regions[selectedRegionIndex].brushColour;

-    const map = paintedCells.current;
+    const map = paintedCells;
    const existing = map.get(key);

    if (mode === "eraser") {
@@ -60,7 +65,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells

    if (existing && existing.colour === currentColour) return;

-    map.set(key, { colour: currentColour });
+    map.set(key, { colour: currentColour, region: activeRegion });

    paintLayerRef.current?.batchDraw();
  };
@@ -87,25 +92,32 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells
    const handleResize = () => {
      const width = window.innerWidth;

-      const aspectRatio = 740 / 460;
-      const newWidth = width * 0.36;
-      const newHeight = newWidth / aspectRatio;
-      setStageSize({ width: newWidth, height: newHeight });
+      const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
+      console.log(window.innerWidth);
+      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();
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

-  if (image === null || isloading)
-    return (
-      <Card className="row-span-3 col-span-2 rounded-lg p-4 w-full">
-        <span className="text-slate-500">Loading Video feed…</span>
-      </Card>
-    );
+  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">
+    <div
+      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+        mode === "eraser" ? "hover:cursor-pointer" : ""
+      }`}
+    >
      <Stage
        width={stageSize.width}
        height={stageSize.height}
@@ -113,6 +125,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells
        onMouseMove={handleStageMouseMove}
        onMouseUp={handleStageMouseUp}
        onMouseLeave={handleStageMouseUp}
+        className="max-w-[55%]"
      >
        <Layer>
          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
@@ -121,8 +134,9 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells
        <Layer ref={paintLayerRef} opacity={0.6}>
          <Shape
            sceneFunc={(ctx, shape) => {
-              const cells = paintedCells.current;
-              cells.forEach((cell, key) => {
+              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);
--- a/src/features/cameras/hooks/useColourDetection.ts
+++ b/src/features/cameras/hooks/useColourDetection.ts
@@ -0,0 +1,24 @@
+import { useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { ColourDetectionPayload } from "../../../types/types";
+
+const sendColourDetectionData = async (colourData: ColourDetectionPayload) => {
+  const regions = {
+    regions: colourData.regions,
+  };
+  const response = await fetch(`${CAMBASE}/TargetDetectionColour${colourData.cameraFeedID}-region-update`, {
+    method: "POST",
+    body: JSON.stringify(regions),
+  });
+  if (!response.ok) throw new Error("Cannot send data to colour detection endpoint");
+  return response.json();
+};
+
+export const useColourDectection = () => {
+  const colourMutation = useMutation({
+    mutationKey: ["colour detection"],
+    mutationFn: (colourData: ColourDetectionPayload) => sendColourDetectionData(colourData),
+  });
+
+  return { colourMutation };
+};
--- a/src/features/cameras/hooks/useGetVideoFeed.ts
+++ b/src/features/cameras/hooks/useGetVideoFeed.ts
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";

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

-export const useGetVideoFeed = () => {
+export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null) => {
  const videoQuery = useQuery({
-    queryKey: ["getfeed"],
-    queryFn: getfeed,
+    queryKey: ["getfeed", cameraFeedID],
+    queryFn: () => getfeed(cameraFeedID),
    refetchInterval: 500,
  });

--- a/src/features/cameras/hooks/useGetvideoSnapshots.ts
+++ b/src/features/cameras/hooks/useGetvideoSnapshots.ts
@@ -1,9 +1,12 @@
 import { useEffect, useRef } from "react";
 import { useGetVideoFeed } from "./useGetVideoFeed";
+import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";

 export const useCreateVideoSnapshot = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state?.cameraFeedID;
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed();
+  const { videoQuery } = useGetVideoFeed(cameraFeedID);

  const snapShot = videoQuery?.data;
  const isloading = videoQuery.isPending;
--- a/src/features/cameras/hooks/useSightingEntryAndExit.ts
+++ b/src/features/cameras/hooks/useSightingEntryAndExit.ts
@@ -0,0 +1,28 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+
+const fetchEntrySightings = async (cameraFeedID: string) => {
+  const response = await fetch(`${CAMBASE}/EntrySightingCreator${cameraFeedID}-list-proto-sightings`);
+  if (!response.ok) throw new Error("Cannot reach sighing entry endpoint");
+  return response.json();
+};
+
+const fetchExitSightings = async (cameraFeedID: string) => {
+  const response = await fetch(`${CAMBASE}/ExitSightingCreator${cameraFeedID}-list-proto-sightings`);
+  if (!response.ok) throw new Error("Cannot reach sighing exit endpoint");
+  return response.json();
+};
+
+export const useSightingEntryAndExit = (cameraFeedID: string) => {
+  const entryQuery = useQuery({
+    queryKey: ["Entry Sightings", cameraFeedID],
+    queryFn: () => fetchEntrySightings(cameraFeedID),
+  });
+
+  const exitQuery = useQuery({
+    queryKey: ["Exit Sightings", cameraFeedID],
+    queryFn: () => fetchExitSightings(cameraFeedID),
+  });
+
+  return { entryQuery, exitQuery };
+};
--- a/src/features/dashboard/components/CameraStatus.tsx
+++ b/src/features/dashboard/components/CameraStatus.tsx
@@ -1,19 +0,0 @@
-import Card from "../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
-
-type CameraStatusProps = {
-  title: string;
-  status?: string;
-  description: string;
-};
-
-const CameraStatus = ({ title, status, description }: CameraStatusProps) => {
-  return (
-    <Card className="p-4">
-      <CardHeader title={title} status={status} />
-      <p className=" text-gray-500">{description}</p>
-    </Card>
-  );
-};
-
-export default CameraStatus;
--- a/src/features/dashboard/components/DashboardGrid.tsx
+++ b/src/features/dashboard/components/DashboardGrid.tsx
@@ -1,16 +1,55 @@
-import CameraStatus from "./CameraStatus";
-import SystemOverview from "./SystemOverview";
-import SystemStatusCard from "./SystemStatusCard";
+import type { SystemHealthStatus } from "../../../types/types";
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
+import CameraStatus from "./cameraStatus/CameraStatus";
+import SystemHealthCard from "./systemHealth/SystemHealthCard";
+import SystemStatusCard from "./systemStatus/SystemStatusCard";

 const DashboardGrid = () => {
+  const { query } = useGetSystemHealth();
+  const startTime = query?.data?.StartTimeHumane;
+  const uptime = query?.data?.UptimeHumane;
+  const statuses: SystemHealthStatus[] = query?.data?.Status;
+  const isLoading = query?.isLoading;
+  const isError = query?.isError;
+  const dateUpdatedAt = query?.dataUpdatedAt;
+  const refetch = query?.refetch;
+
+  const statusCategories = statuses?.reduce<Record<string, SystemHealthStatus[]>>(
+    (acc, cur) => {
+      if (cur?.groupID === "ChannelA") acc?.channelA?.push(cur);
+      if (cur?.groupID === "ChannelB") acc?.channelB?.push(cur);
+      if (cur?.groupID === "ChannelC") acc?.channelC?.push(cur);
+      if (cur?.groupID === "Default") acc?.default?.push(cur);
+      return acc;
+    },
+    {
+      channelA: [],
+      channelB: [],
+      channelC: [],
+      default: [],
+    },
+  );
+
+  const categoryA = statusCategories?.channelA ?? [];
+  const categoryB = statusCategories?.channelB ?? [];
+  const categoryC = statusCategories?.channelC ?? [];
+
  return (
-    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2">
+    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
      <SystemStatusCard />
-      <SystemOverview />
-      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
-        <CameraStatus title="Camera 1" status={"bg-red-500"} description={"Camera not responding"} />
-        <CameraStatus title="Camera 2" status={"bg-gray-500"} description={"Camera Offline"} />
-        <CameraStatus title="Camera 3" status={"bg-gray-500"} description={"Camera Offline"} />
+      <SystemHealthCard
+        startTime={startTime}
+        uptime={uptime}
+        statuses={statuses}
+        isLoading={isLoading}
+        isError={isError}
+        dateUpdatedAt={dateUpdatedAt}
+        refetch={refetch}
+      />
+      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
+        <CameraStatus title="Camera A" category={categoryA} isError={isError} />
+        <CameraStatus title="Camera B" category={categoryB} isError={isError} />
+        <CameraStatus title="Camera C" category={categoryC} isError={isError} />
      </div>
    </div>
  );
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -1,38 +0,0 @@
-import type { SystemHealthStatus } from "../../../types/types";
-import Badge from "../../../ui/Badge";
-
-type SystemHealthProps = {
-  startTime: string;
-  uptime: string;
-  statuses: SystemHealthStatus[];
-  isLoading: boolean;
-};
-
-const SystemHealth = ({ startTime, uptime, statuses, isLoading }: SystemHealthProps) => {
-  if (isLoading) {
-    return <span className="text-slate-500">Loading system health…</span>;
-  }
-
-  return (
-    <div className="h-100 md:h-70">
-      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
-        <div>
-          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
-        </div>
-        <div>
-          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
-        </div>
-      </div>
-
-      <div>
-        {statuses?.map((status: SystemHealthStatus) => (
-          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
-            <span>{status.id}</span> <Badge text={status.tags[0]} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default SystemHealth;
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -1,22 +0,0 @@
-import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
-import Card from "../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
-import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
-import SystemHealth from "./SystemHealth";
-
-const SystemOverview = () => {
-  const { query } = useGetSystemHealth();
-
-  const startTime = query?.data?.StartTimeHumane;
-  const uptime = query?.data?.UptimeHumane;
-  const statuses = query?.data?.Status;
-  const isLoading = query?.isLoading;
-  return (
-    <Card className="p-4">
-      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth startTime={startTime} uptime={uptime} statuses={statuses} isLoading={isLoading} />
-    </Card>
-  );
-};
-
-export default SystemOverview;
--- a/src/features/dashboard/components/SystemStatusCard.tsx
+++ b/src/features/dashboard/components/SystemStatusCard.tsx
@@ -1,30 +0,0 @@
-import { useInfoSocket } from "../../../app/context/WebSocketContext";
-import Card from "../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
-import StatusItemCPU from "./StatusItems/StatusItemCPU";
-import StatusItemLocal from "./StatusItems/StatusItemLocal";
-import StatusItemThreads from "./StatusItems/StatusItemThreads";
-import StatusItemUTC from "./StatusItems/StatusItemUTC";
-
-const SystemStatusCard = () => {
-  const { data: stats } = useInfoSocket();
-
-  return (
-    <Card className="p-4">
-      <CardHeader title="System Status" />
-      {stats ? (
-        <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
-          <StatusItemUTC statusInfoItem={stats["system-clock-utc"]} description={"UTC Time"} />
-          <StatusItemLocal statusInfoItem={stats["system-clock-local"]} description={"Local Time"} />
-          <StatusItemCPU statusInfoItem={stats["memory-cpu-status"]} description={"CPU"} />
-          <StatusItemThreads statusInfoItem={stats["thread-count"]} description={"Threads"} />
-        </div>
-      ) : (
-        <span className="text-slate-500">Loading system status…</span>
-      )}
-      <div className="text-sm flex gap-4"></div>
-    </Card>
-  );
-};
-
-export default SystemStatusCard;
--- a/src/features/dashboard/components/cameraStatus/CameraStatus.tsx
+++ b/src/features/dashboard/components/cameraStatus/CameraStatus.tsx
@@ -0,0 +1,50 @@
+import type { SystemHealthStatus } from "../../../../types/types";
+import Card from "../../../../ui/Card";
+import StatusIndicators from "../../../../ui/StatusIndicators";
+import { capitalize } from "../../../../utils/utils";
+import CameraStatusGridItem from "./CameraStatusGridItem";
+
+type CameraStatusProps = {
+  title: string;
+  category: SystemHealthStatus[];
+  isError?: boolean;
+};
+
+const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
+  const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
+  // check if some are down
+  // check if all are down
+  //check if offline
+  return (
+    <Card className="p-4">
+      <div className="border-b border-gray-600">
+        <h3 className="text-lg flex flex-row items-center">
+          {isError ? (
+            <StatusIndicators status={"bg-red-500"} />
+          ) : isAllGood ? (
+            <StatusIndicators status={"bg-green-500"} />
+          ) : (
+            <StatusIndicators status={"bg-amber-500"} />
+          )}
+          {capitalize(title)}
+        </h3>
+        {isError ? (
+          <p className="text-sm text-red-500">Error loading camera health.</p>
+        ) : isAllGood ? (
+          <p className="text-sm text-green-500">All systems running</p>
+        ) : (
+          <p className="text-sm text-amber-500">Some systems down</p>
+        )}
+      </div>
+      {category && category?.length <= 0 ? (
+        <p className=" text-gray-500">Loading Camera health...</p>
+      ) : (
+        <div>
+          <CameraStatusGridItem title={title} statusCategory={category} />
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default CameraStatus;
--- a/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx
+++ b/src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import type { SystemHealthStatus } from "../../../../types/types";
+import { capitalize } from "../../../../utils/utils";
+import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
+
+type CameraStatusGridItemProps = {
+  title: string;
+  statusCategory: SystemHealthStatus[];
+};
+
+const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const isAllGood = statusCategory?.every((status) => status.tags.includes("RUNNING"));
+
+  const handleClick = () => {
+    setIsOpen(false);
+  };
+  return (
+    <>
+      <div
+        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer m-2 h-70"
+        onClick={() => setIsOpen(true)}
+      >
+        <h3 className="text-lg flex flex-row items-center">{capitalize(title)}</h3>
+        <p className="text-sm text-slate-300">{isAllGood ? "Click to view module status" : "Some systems down"}</p>
+      </div>
+      <SystemHealthModal
+        isSystemHealthModalOpen={isOpen}
+        handleClose={handleClick}
+        statusCategory={statusCategory}
+        title={title}
+        isAllGood={isAllGood}
+      />
+    </>
+  );
+};
+
+export default CameraStatusGridItem;
--- a/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
+++ b/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import type { SystemHealthStatus } from "../../../../types/types";
+import StatusIndicators from "../../../../ui/StatusIndicators";
+import { capitalize } from "../../../../utils/utils";
+import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
+
+type StatusGridItemProps = {
+  title: string;
+  statusCategory: SystemHealthStatus[];
+};
+
+const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const isAllGood =
+    statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
+
+  const handleClick = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <div
+        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
+        onClick={() => setIsOpen(true)}
+      >
+        <h3 className="text-lg flex flex-row items-center">
+          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+          {capitalize(title)}
+        </h3>
+        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
+      </div>
+      <SystemHealthModal
+        isSystemHealthModalOpen={isOpen}
+        handleClose={handleClick}
+        statusCategory={statusCategory}
+        title={title}
+        isAllGood={isAllGood}
+      />
+    </>
+  );
+};
+
+export default StatusGridItem;
--- a/src/features/dashboard/components/systemHealth/SystemHealth.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealth.tsx
@@ -0,0 +1,60 @@
+import type { SystemHealthStatus } from "../../../../types/types";
+import StatusGridItem from "../statusGridItem/StatusGridItem";
+
+type SystemHealthProps = {
+  startTime: string;
+  uptime: string;
+  statuses: SystemHealthStatus[];
+  isLoading: boolean;
+  isError: boolean;
+  dateUpdatedAt?: number;
+};
+
+const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
+  const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
+
+  const statusCategories = statuses?.reduce<Record<string, SystemHealthStatus[]>>(
+    (acc, cur) => {
+      if (cur?.groupID === "ChannelA") acc?.channelA?.push(cur);
+      if (cur?.groupID === "ChannelB") acc?.channelB?.push(cur);
+      if (cur?.groupID === "ChannelC") acc?.channelC?.push(cur);
+      if (cur?.groupID === "Default") acc?.default?.push(cur);
+      return acc;
+    },
+    {
+      channelA: [],
+      channelB: [],
+      channelC: [],
+      default: [],
+    },
+  );
+
+  const categoryDefault = statusCategories?.default ?? [];
+
+  if (isError) {
+    return <span className="text-red-500">Error loading system health.</span>;
+  }
+  if (isLoading) {
+    return <span className="text-slate-500">Loading system health…</span>;
+  }
+  return (
+    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
+      <div className="p-2 border-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]">
+          <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]">
+          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
+        </div>
+      </div>
+      <div className="overflow-auto gap-4">
+        <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
+      </div>
+      <div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
+        <small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
+      </div>
+    </div>
+  );
+};
+
+export default SystemHealth;
--- a/src/features/dashboard/components/systemHealth/SystemHealthCard.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealthCard.tsx
@@ -0,0 +1,42 @@
+import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
+import Card from "../../../../ui/Card";
+import CardHeader from "../../../../ui/CardHeader";
+
+import SystemHealth from "./SystemHealth";
+import type { SystemHealthStatus } from "../../../../types/types";
+
+type SystemOverviewProps = {
+  startTime: string;
+  uptime: string;
+  statuses: SystemHealthStatus[];
+  isLoading: boolean;
+  isError: boolean;
+  dateUpdatedAt: number;
+  refetch: () => void;
+};
+
+const SystemHealthCard = ({
+  startTime,
+  uptime,
+  statuses,
+  isLoading,
+  isError,
+  dateUpdatedAt,
+  refetch,
+}: SystemOverviewProps) => {
+  return (
+    <Card className="p-4">
+      <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
+      <SystemHealth
+        startTime={startTime}
+        uptime={uptime}
+        statuses={statuses}
+        isLoading={isLoading}
+        isError={isError}
+        dateUpdatedAt={dateUpdatedAt}
+      />
+    </Card>
+  );
+};
+
+export default SystemHealthCard;
--- a/src/features/dashboard/components/systemHealth/systemHealthModal/SystemHealthModal.tsx
+++ b/src/features/dashboard/components/systemHealth/systemHealthModal/SystemHealthModal.tsx
@@ -0,0 +1,48 @@
+import type { SystemHealthStatus } from "../../../../../types/types";
+import Badge from "../../../../../ui/Badge";
+import ModalComponent from "../../../../../ui/ModalComponent";
+import StatusIndicators from "../../../../../ui/StatusIndicators";
+import { capitalize } from "../../../../../utils/utils";
+
+type SystemHealthModalProps = {
+  isSystemHealthModalOpen: boolean;
+  handleClose: () => void;
+  statusCategory: SystemHealthStatus[];
+  title: string;
+  isAllGood: boolean;
+};
+
+const SystemHealthModal = ({
+  isSystemHealthModalOpen,
+  handleClose,
+  statusCategory,
+  title,
+  isAllGood,
+}: SystemHealthModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isSystemHealthModalOpen} close={handleClose}>
+      <div>
+        <div className="border-b border-gray-500">
+          <h2 className="text-xl font-bold mb-4 flex flex-row items-center">
+            {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+            {capitalize(title)}
+          </h2>
+          <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
+        </div>
+
+        <div>
+          {statusCategory?.map((status: SystemHealthStatus) => (
+            <div
+              className="border border-gray-700 p-4 rounded-md m-2 flex justify-between hover:bg-[#233241]"
+              key={status.id}
+            >
+              <span>{status.id}</span> <Badge text={status.tags[0]} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default SystemHealthModal;
--- a/src/features/dashboard/components/systemStatus/StatusItems/DownloadLogButton.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/DownloadLogButton.tsx
@@ -0,0 +1,50 @@
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useDownloadLogFiles } from "../../../hooks/useDownloadLogFiles";
+import { toast } from "sonner";
+
+const DownloadLogButton = () => {
+  const { downloadLogFilesQuery } = useDownloadLogFiles();
+  const isLoading = downloadLogFilesQuery?.isFetching;
+
+  const handleDownloadClick = async () => {
+    try {
+      const blob = await downloadLogFilesQuery?.refetch().then((res) => res.data);
+      if (!blob) {
+        throw new Error("No log file data received");
+      }
+      const url = window.URL.createObjectURL(new Blob([blob]));
+      const link = document.createElement("a");
+      if (!link) {
+        throw new Error("Failed to create download link");
+      } else {
+        link.href = url;
+        link.setAttribute("download", "FlexiAI-0.log");
+        document.body.appendChild(link);
+        link.click();
+        link.parentNode?.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      }
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
+      toast.error(errorMessage);
+    }
+  };
+
+  return (
+    <button
+      className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
+      onClick={handleDownloadClick}
+    >
+      <div className="flex flex-row gap-2 items-center">
+        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
+          <FontAwesomeIcon icon={faDownload} />
+        </span>
+        <p className="text-lg">{"Download Log Files"}</p>
+      </div>
+      <p className="text-slate-400 italic text-start">{isLoading ? "Downloading..." : "View logs"}</p>
+    </button>
+  );
+};
+
+export default DownloadLogButton;
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemCPU.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemCPU.tsx
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemLocal.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemLocal.tsx
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemThreads.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemThreads.tsx
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusItemUTC.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusItemUTC.tsx
--- a/src/features/dashboard/components/systemStatus/StatusItems/StatusReads.tsx
+++ b/src/features/dashboard/components/systemStatus/StatusItems/StatusReads.tsx
@@ -0,0 +1,48 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChartSimple } from "@fortawesome/free-solid-svg-icons";
+
+type StatusReadsProps = {
+  reads: {
+    totalPending: number;
+    totalActive: number;
+    totalSent: number;
+    totalReceived: number;
+    totalLost: number;
+    sanityCheck: boolean;
+    sanityCheckFormula: string;
+  };
+  isReadsLoading?: boolean;
+};
+
+const StatusReads = ({ reads, isReadsLoading }: StatusReadsProps) => {
+  const totalPending = reads?.totalPending ?? 0;
+  const totalActive = reads?.totalActive ?? 0;
+  const totalSent = reads?.totalSent ?? 0;
+  const totalLost = reads?.totalLost ?? 0;
+  const totalReceived = reads?.totalReceived ?? 0;
+
+  if (isReadsLoading) {
+    return <p className="text-slate-400">Loading reads…</p>;
+  }
+  return (
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
+      <div className="flex flex-row gap-2 items-center">
+        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
+          <FontAwesomeIcon icon={faChartSimple} />
+        </span>
+
+        <p className="text-lg">Reads</p>
+      </div>
+
+      <div className="text-slate-400 mt-1">
+        Pending: <span className="text-yellow-500">{totalPending}</span> | Active:{" "}
+        <span className="text-cyan-500">{totalActive}</span> | Lost: <span className="text-red-500">{totalLost}</span>
+        <br />
+        Sent / Received: <span className="text-blue-500">{totalSent}</span> |{" "}
+        <span className="text-green-500">{totalReceived}</span>
+      </div>
+    </div>
+  );
+};
+
+export default StatusReads;
--- a/src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
+++ b/src/features/dashboard/components/systemStatus/SystemStatusCard.tsx
@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import { useInfoSocket } from "../../../../app/context/WebSocketContext";
+import Card from "../../../../ui/Card";
+import CardHeader from "../../../../ui/CardHeader";
+import DownloadLogButton from "./StatusItems/DownloadLogButton";
+import StatusItemLocal from "./StatusItems/StatusItemLocal";
+import StatusItemUTC from "./StatusItems/StatusItemUTC";
+import StatusReads from "./StatusItems/StatusReads";
+import { useGetStore } from "../../hooks/useGetStore";
+
+const SystemStatusCard = () => {
+  const { data: stats } = useInfoSocket();
+  const { storeQuery } = useGetStore();
+
+  const reads = storeQuery?.data;
+  const isReadsLoading = storeQuery?.isFetching;
+  const isError = storeQuery?.isError || !storeQuery?.data;
+
+  useEffect(() => {
+    storeQuery.refetch();
+  }, [reads]);
+
+  if (isError) {
+    return (
+      <Card className="p-4">
+        <CardHeader title="System Status" />
+        <span className="text-red-500">Error loading system status.</span>
+      </Card>
+    );
+  }
+  return (
+    <Card className="p-4">
+      <CardHeader title="System Status" />
+      {stats ? (
+        <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">
+          <StatusItemUTC statusInfoItem={stats["system-clock-utc"]} description={"UTC Time"} />
+          <StatusItemLocal statusInfoItem={stats["system-clock-local"]} description={"Local Time"} />
+          <DownloadLogButton />
+          <StatusReads reads={reads} isReadsLoading={isReadsLoading} />
+        </div>
+      ) : (
+        <span className="text-slate-500">Loading system status…</span>
+      )}
+      <div className="text-sm flex gap-4"></div>
+    </Card>
+  );
+};
+
+export default SystemStatusCard;
--- a/src/features/dashboard/hooks/useDownloadLogFiles.ts
+++ b/src/features/dashboard/hooks/useDownloadLogFiles.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+
+const getDownloadLogFiles = async () => {
+  const response = await fetch(`${CAMBASE}/LogView/download?filename=FlexiAI-0.log`);
+  if (!response.ok) {
+    throw new Error("Failed to download log files");
+  }
+  return response.blob();
+};
+
+export const useDownloadLogFiles = () => {
+  const downloadLogFilesQuery = useQuery({
+    queryKey: ["downloadLogFiles"],
+    queryFn: getDownloadLogFiles,
+    enabled: false,
+  });
+
+  return { downloadLogFilesQuery };
+};
--- a/src/features/dashboard/hooks/useGetStore.ts
+++ b/src/features/dashboard/hooks/useGetStore.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+
+const getStoreData = async () => {
+  const response = await fetch(`${CAMBASE}/Store0/diagnostics-json`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useGetStore = () => {
+  const storeQuery = useQuery({
+    queryKey: ["storeData"],
+    queryFn: getStoreData,
+    // refetchInterval: 10 * 60 * 1000,
+  });
+  return { storeQuery };
+};
--- a/src/features/dashboard/hooks/useGetSystemHealth.ts
+++ b/src/features/dashboard/hooks/useGetSystemHealth.ts
@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";

 const fetchData = async () => {
-  const response = await fetch(`http://100.115.148.59/api/system-health`);
+  const response = await fetch(`${CAMBASE}/api/system-health`);
  if (!response.ok) throw new Error("Cannot get System overview");
  return response.json();
 };
@@ -10,6 +11,7 @@ export const useGetSystemHealth = () => {
  const query = useQuery({
    queryKey: ["fetchSystemData"],
    queryFn: fetchData,
+    refetchInterval: 300000,
  });
  return { query };
 };
--- a/src/features/output/components/BearerTypeFields.tsx
+++ b/src/features/output/components/BearerTypeFields.tsx
@@ -1,6 +1,8 @@
-import { Field } from "formik";
+import { Field, useFormikContext } from "formik";
+import type { FormTypes } from "../../../types/types";

 const BearerTypeFields = () => {
+  useFormikContext<FormTypes>();
  return (
    <div className="flex flex-row justify-between">
      <label htmlFor="format" className="text-xl">
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -3,17 +3,25 @@ import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import ChannelFields from "./ChannelFields";
 import type { FormTypes } from "../../../types/types";
+import { useGetBearerConfig } from "../hooks/useBearer";

 const ChannelCard = () => {
-  const { values, errors, touched } = useFormikContext<FormTypes>();
-
+  const { values, errors, touched, setFieldValue } = useFormikContext<FormTypes>();
+  const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
+  const outputData = bearerQuery?.data;
  return (
    <Card className="p-4 h-150 md:h-full">
      <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields errors={errors} touched={touched} values={values} />
+      <ChannelFields
+        errors={errors}
+        touched={touched}
+        values={values}
+        outputData={outputData}
+        onSetFieldValue={setFieldValue}
+      />
      <button
        type="submit"
-        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+        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"}
      </button>
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -1,5 +1,7 @@
-import { Field } from "formik";
-import type { FormTypes, InitialValuesFormErrors } from "../../../types/types";
+import { Field, FieldArray } from "formik";
+import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
+import { useEffect, useMemo } from "react";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";

 type ChannelFieldsProps = {
  values: FormTypes;
@@ -8,220 +10,307 @@ type ChannelFieldsProps = {
    connectTimeoutSeconds?: boolean | undefined;
    readTimeoutSeconds?: boolean | undefined;
  };
+  outputData?: OutputDataResponse;
+  onSetFieldValue: (field: string, value: string, shouldValidate?: boolean | undefined) => void;
 };

-const ChannelFields = ({ errors, touched, values }: 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",
+      readTimeoutSeconds: outputData?.propReadTimeoutSeconds?.value || "15",
+      backOfficeURL: outputData?.propBackofficeURL?.value || "",
+      username: outputData?.propUsername?.value || "",
+      password: outputData?.propPassword?.value || "",
+      SCID: optionalConstants?.propSourceIdentifier?.value || "",
+      timestampSource: optionalConstants?.propTimeZoneType?.value || "UTC",
+      GPSFormat: optionalConstants?.propGpsFormat?.value || "Minutes",
+      FFID: optionalConstants?.propFeedIdentifier?.value || "",
+    };
+  }, [
+    optionalConstants?.propFeedIdentifier?.value,
+    optionalConstants?.propGpsFormat?.value,
+    optionalConstants?.propSourceIdentifier?.value,
+    optionalConstants?.propTimeZoneType?.value,
+    outputData?.propBackofficeURL?.value,
+    outputData?.propConnectTimeoutSeconds?.value,
+    outputData?.propPassword?.value,
+    outputData?.propReadTimeoutSeconds?.value,
+    outputData?.propUsername?.value,
+  ]);
+
+  useEffect(() => {
+    for (const [key, value] of Object.entries(channelFieldsObject)) {
+      onSetFieldValue(key, value);
+    }
+  }, [channelFieldsObject, onSetFieldValue, outputData]);
+
  return (
    <div className="flex flex-col gap-4 p-4">
-      <div className="flex flex-row justify-between">
-        <label htmlFor="backoffice" className="block mb-2 font-medium">
-          Back Office URL
-        </label>
-        <Field
-          name={"backOfficeURL"}
-          type="text"
-          id="backoffice"
-          placeholder="https://www.backoffice.com"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="username" className="block mb-2 font-medium">
-          Username
-        </label>
-        <Field
-          name={"username"}
-          type="text"
-          id="username"
-          placeholder="Back office username"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="password">Password</label>
-        <Field
-          name={"password"}
-          type={"password"}
-          id="password"
-          placeholder="Back office password"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
-        <Field
-          name={"readTimeoutSeconds"}
-          type="number"
-          id="readTimeoutSeconds"
-          placeholder="https://example.com"
-          className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
-        <Field
-          name={"connectTimeoutSeconds"}
-          type="number"
-          id="connectTimeoutSeconds"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="overviewQuality">Overview quality and scale</label>
-        <Field
-          name={"overviewQuality"}
-          as="select"
-          id="overviewQuality"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-        >
-          <option value={"HIGH"}>High</option>
-          <option value={"MEDIUM"}>Medium</option>
-          <option value={"LOW"}>Low</option>
-        </Field>
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="cropSizeFactor">Crop Size Factor</label>
-        <Field
-          name={"cropSizeFactor"}
-          as="select"
-          id="cropSizeFactor"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-        >
-          <option value={"FULL"}>Full</option>
-          <option value={"3/4"}>3/4</option>
-          <option value={"1/2"}>1/2</option>
-          <option value={"1/4"}>1/4</option>
-        </Field>
-      </div>
-      {values.format.toLowerCase() === "utmc" && (
+      {values.format.toLowerCase() !== "ftp" ? (
        <>
-          <div className="border-b border-gray-500 my-3">
-            <h2 className="font-bold">{values.format} Constants</h2>
-          </div>
-
          <div className="flex flex-row justify-between">
-            <label htmlFor="SCID">Source ID / Camera ID</label>
+            <label htmlFor="backoffice" className="block mb-2 font-medium">
+              Back Office URL
+            </label>
            <Field
-              name={"SCID"}
+              name={"backOfficeURL"}
              type="text"
-              id="SCID"
-              placeholder="DEF345"
-              className={`p-1.5 border ${
-                errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-              } rounded-lg w-full md:w-60`}
+              id="backoffice"
+              placeholder="https://www.backoffice.com"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
          <div className="flex flex-row justify-between">
-            <label htmlFor="timestampSource">Timestamp Source</label>
+            <label htmlFor="username" className="block mb-2 font-medium">
+              Username
+            </label>
            <Field
-              name={"timestampSource"}
+              name={"username"}
+              type="text"
+              id="username"
+              placeholder="Back office username"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="password">Password</label>
+            <Field
+              name={"password"}
+              type={"password"}
+              id="password"
+              placeholder="Back office password"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+            <Field
+              name={"readTimeoutSeconds"}
+              type="number"
+              id="readTimeoutSeconds"
+              placeholder="https://example.com"
+              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+            <Field
+              name={"connectTimeoutSeconds"}
+              type="number"
+              id="connectTimeoutSeconds"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="overviewQuality">Overview quality and scale</label>
+            <Field
+              name={"overviewQuality"}
              as="select"
-              id="timestampSource"
+              id="overviewQuality"
              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={"HIGH"}>High</option>
+              <option value={"MEDIUM"}>Medium</option>
+              <option value={"LOW"}>Low</option>
            </Field>
          </div>
          <div className="flex flex-row justify-between">
-            <label htmlFor="GPSFormat">GPS Format</label>
+            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
            <Field
-              name={"GPSFormat"}
+              name={"cropSizeFactor"}
              as="select"
-              id="GPSFormat"
+              id="cropSizeFactor"
              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
            >
-              <option value={"Minutes"}>Minutes</option>
-              <option value={"Decimal Degrees"}>Decimal degrees</option>
+              <option value={"FULL"}>Full</option>
+              <option value={"3/4"}>3/4</option>
+              <option value={"1/2"}>1/2</option>
+              <option value={"1/4"}>1/4</option>
            </Field>
          </div>
-        </>
-      )}
-      {values.format?.toLowerCase() === "bof2" && (
-        <>
-          <div className="space-y-3">
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Constants</h2>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="FFID">Feed ID / Force ID</label>
-              <Field
-                name={"FFID"}
-                type="text"
-                id="FFID"
-                placeholder="ABC123"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="SCID">Source ID / Camera ID</label>
-              <Field
-                name={"SCID"}
-                type="text"
-                id="SCID"
-                placeholder="DEF345"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="timestampSource">Timestamp Source</label>
-              <Field
-                name={"timestampSource"}
-                as="select"
-                id="timestampSource"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                <option value={"UTC"}>UTC</option>
-                <option value={"local"}>Local</option>
-              </Field>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="GPSFormat">GPS Format</label>
-              <Field
-                name={"GPSFormat"}
-                as="select"
-                id="GPSFormat"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                <option value={"Minutes"}>Minutes</option>
-                <option value={"Decimal Degrees"}>Decimal degrees</option>
-              </Field>
-            </div>
+          {values.format.toLowerCase() === "utmc" && (
+            <>
+              <div className="border-b border-gray-500 my-3">
+                <h2 className="font-bold">{values.format} Constants</h2>
+              </div>
+
+              <div className="flex flex-row justify-between">
+                <label htmlFor="SCID">Source ID / Camera ID</label>
+                <Field
+                  name={"SCID"}
+                  type="text"
+                  id="SCID"
+                  placeholder="DEF345"
+                  className={`p-1.5 border ${
+                    errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                  } rounded-lg w-full md:w-60`}
+                />
+              </div>
+              <div className="flex flex-row justify-between">
+                <label htmlFor="timestampSource">Timestamp Source</label>
+                <Field
+                  name={"timestampSource"}
+                  as="select"
+                  id="timestampSource"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  <option value={"UTC"}>UTC</option>
+                  <option value={"LOCAL"}>Local</option>
+                </Field>
+              </div>
+              <div className="flex flex-row justify-between">
+                <label htmlFor="GPSFormat">GPS Format</label>
+                <Field
+                  name={"GPSFormat"}
+                  as="select"
+                  id="GPSFormat"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  <option value={"Minutes"}>Minutes</option>
+                  <option value={"Decimal Degrees"}>Decimal degrees</option>
+                </Field>
+              </div>
+            </>
+          )}
+          {values.format?.toLowerCase() === "bof2" && (
+            <>
+              <div className="space-y-3">
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Constants</h2>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="FFID">Feed ID / Force ID</label>
+                  <Field
+                    name={"FFID"}
+                    type="text"
+                    id="FFID"
+                    placeholder="ABC123"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="SCID">Source ID / Camera ID</label>
+                  <Field
+                    name={"SCID"}
+                    type="text"
+                    id="SCID"
+                    placeholder="DEF345"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="timestampSource">Timestamp Source</label>
+                  <Field
+                    name={"timestampSource"}
+                    as="select"
+                    id="timestampSource"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value={"UTC"}>UTC</option>
+                    <option value={"LOCAL"}>Local</option>
+                  </Field>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="GPSFormat">GPS Format</label>
+                  <Field
+                    name={"GPSFormat"}
+                    as="select"
+                    id="GPSFormat"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value={"Minutes"}>Minutes</option>
+                    <option value={"Decimal Degrees"}>Decimal degrees</option>
+                  </Field>
+                </div>
+              </div>
+              <div className="space-y-3">
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
+                  <Field
+                    name={"LID1"}
+                    type="text"
+                    id="LID1"
+                    placeholder="10"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
+                  <Field
+                    name={"LID2"}
+                    type="text"
+                    id="LID2"
+                    placeholder="20"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
          </div>
-          <div className="space-y-3">
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Lane ID Config</h2>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
-              <Field
-                name={"LID1"}
-                type="text"
-                id="LID1"
-                placeholder="10"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
-              <Field
-                name={"LID2"}
-                type="text"
-                id="LID2"
-                placeholder="20"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
+          <div 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-row 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>
+                    );
+                  })}
+                  <button
+                    type="button"
+                    onClick={() => arrayHelpers.push({ label: "", value: "" })}
+                    className={`mr-2 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>
+                  )}
+                </>
+              )}
+            </FieldArray>
          </div>
        </>
+      ) : (
+        <></>
      )}
    </div>
  );
--- a/src/features/output/components/OSDFieldToggle.tsx
+++ b/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;
--- a/src/features/output/components/OSDFields.tsx
+++ b/src/features/output/components/OSDFields.tsx
@@ -0,0 +1,73 @@
+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">
+          <h2 className="text-2xl mb-4">OSD Options</h2>
+          <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-row 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-row 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"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OSDFields;
--- a/src/features/output/components/OSDOptionsCard.tsx
+++ b/src/features/output/components/OSDOptionsCard.tsx
@@ -0,0 +1,18 @@
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+import OSDFields from "./OSDFields";
+
+type OSDOptionsCardProps = {
+  isOSDLoading: boolean;
+};
+
+const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
+  return (
+    <Card className="p-4 flex-1">
+      <CardHeader title="OSD Payload Options" />
+      <OSDFields isOSDLoading={isOSDLoading} />
+    </Card>
+  );
+};
+
+export default OSDOptionsCard;
--- a/src/features/output/components/Output.tsx
+++ b/src/features/output/components/Output.tsx
@@ -1,44 +0,0 @@
-import { Formik, Form } from "formik";
-import BearerTypeCard from "./BearerTypeCard";
-import ChannelCard from "./ChannelCard";
-import type { FormTypes } from "../../../types/types";
-
-const Output = () => {
-  const handleSubmit = (values: FormTypes) => {
-    console.log(values);
-  };
-
-  const inititalValues: FormTypes = {
-    format: "JSON",
-    enabled: true,
-    backOfficeURL: "",
-    username: "",
-    password: "",
-    connectTimeoutSeconds: Number(5),
-    readTimeoutSeconds: Number(15),
-    overviewQuality: "HIGH",
-    cropSizeFactor: "3/4",
-
-    // Bof2 -optional constants
-    FFID: "",
-    SCID: "",
-    timestampSource: "UTC",
-    GPSFormat: "Minutes",
-
-    //BOF2 - optional Lane IDs
-    laneId: "",
-    LID1: "",
-    LID2: "",
-  };
-
-  return (
-    <Formik initialValues={inititalValues} onSubmit={handleSubmit}>
-      <Form className="grid grid-cols-1 md:grid-cols-2">
-        <BearerTypeCard />
-        <ChannelCard />
-      </Form>
-    </Formik>
-  );
-};
-
-export default Output;
--- a/src/features/output/components/OutputForms.tsx
+++ b/src/features/output/components/OutputForms.tsx
@@ -0,0 +1,161 @@
+import { Formik, Form } from "formik";
+import BearerTypeCard from "./BearerTypeCard";
+import ChannelCard from "./ChannelCard";
+import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCConstants } from "../../../types/types";
+import { usePostBearerConfig } from "../hooks/useBearer";
+import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";
+import { useCustomFields } from "../hooks/useCustomFields";
+import OSDOptionsCard from "./OSDOptionsCard";
+import { useOSDConfig } from "../hooks/useOSDConfig";
+
+const OutputForms = () => {
+  const { bearerMutation } = usePostBearerConfig();
+  const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
+  const { customFieldsQuery, customFieldsMutation } = useCustomFields();
+  const { osdQuery } = useOSDConfig();
+
+  const isLoading = dispatcherQuery?.isLoading;
+  const isOSDLoading = osdQuery?.isLoading;
+
+  const includeVRM = osdQuery?.data?.propIncludeVRM?.value.toLowerCase() === "true";
+  const includeMotion = osdQuery?.data?.propIncludeMotion?.value.toLowerCase() === "true";
+  const includeTimeStamp = osdQuery?.data?.propIncludeTimestamp?.value.toLowerCase() === "true";
+  const includeCameraName = osdQuery?.data?.propIncludeCameraName?.value.toLowerCase() === "true";
+  const overlayPosition = osdQuery?.data?.propOverlayPosition?.value;
+  const OSDTimestampFormat = osdQuery?.data?.propTimestampFormat?.value;
+
+  const format = dispatcherQuery?.data?.propFormat?.value;
+  const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
+  const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
+  const SCID = optionalConstantsQuery?.data?.propSourceIdentifier?.value;
+  const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
+  const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
+
+  const customFieldLabel1 = customFieldsQuery?.data?.propCustomFieldName1?.value;
+  const customFieldLabel2 = customFieldsQuery?.data?.propCustomFieldName2?.value;
+  const customFieldLabel3 = customFieldsQuery?.data?.propCustomFieldName3?.value;
+  const customFieldLabel4 = customFieldsQuery?.data?.propStringName4?.value;
+  const customFieldLabel5 = customFieldsQuery?.data?.propStringName5?.value;
+  const customFieldLabel6 = customFieldsQuery?.data?.propStringName6?.value;
+
+  const customFieldValues1 = customFieldsQuery?.data?.propCustomFieldValue1?.value;
+  const customFieldValues2 = customFieldsQuery?.data?.propCustomFieldValue2?.value;
+  const customFieldValues3 = customFieldsQuery?.data?.propCustomFieldValue3?.value;
+  const customFieldValues4 = customFieldsQuery?.data?.propStringValue4?.value;
+  const customFieldValues5 = customFieldsQuery?.data?.propStringValue5?.value;
+  const customFieldValues6 = customFieldsQuery?.data?.propStringValue6?.value;
+
+  const initialCustomFields = [
+    { label: customFieldLabel1 || "", value: customFieldValues1 || "" },
+    { label: customFieldLabel2 || "", value: customFieldValues2 || "" },
+    { label: customFieldLabel3 || "", value: customFieldValues3 || "" },
+    { label: customFieldLabel4 || "", value: customFieldValues4 || "" },
+    { label: customFieldLabel5 || "", value: customFieldValues5 || "" },
+    { label: customFieldLabel6 || "", value: customFieldValues6 || "" },
+  ].filter((field) => field.label && field.value);
+
+  const inititalValues: FormTypes = {
+    format: format ?? "JSON",
+    enabled: true,
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+    overviewQuality: "HIGH",
+    cropSizeFactor: "3/4",
+
+    // optional constants
+    FFID: FFID ?? "",
+    SCID: SCID ?? "",
+    timestampSource: timestampSource ?? "UTC",
+    GPSFormat: gpsFormat ?? "Minutes",
+
+    //BOF2 - optional Lane IDs
+    laneId: "",
+    LID1: "",
+    LID2: "",
+
+    // ftp - fields
+
+    //custom fields
+    customFields: initialCustomFields,
+
+    // OSD Options
+    includeVRM: includeVRM ?? false,
+    includeMotion: includeMotion ?? false,
+    includeTimeStamp: includeTimeStamp ?? false,
+    includeCameraName: includeCameraName ?? false,
+    overlayPosition: overlayPosition ?? "Top",
+    OSDTimestampFormat: OSDTimestampFormat ?? "UTC",
+  };
+
+  const handleSubmit = async (values: FormTypes) => {
+    const bearerTypeFields = {
+      format: values.format,
+      enabled: values.enabled,
+    };
+
+    const bearerFields: BearerTypeFields = {
+      format: values.format,
+      enabled: values.enabled,
+      backOfficeURL: values.backOfficeURL,
+      username: values.username,
+      password: values.password,
+      connectTimeoutSeconds: values.connectTimeoutSeconds,
+      readTimeoutSeconds: values.readTimeoutSeconds,
+      overviewQuality: values.overviewQuality,
+      cropSizeFactor: values.cropSizeFactor,
+    };
+
+    const result = await dispatcherMutation.mutateAsync(bearerTypeFields);
+
+    if (result?.id) {
+      await bearerMutation.mutateAsync(bearerFields);
+
+      if (values.format === "BOF2") {
+        const optionalBOF2Fields: OptionalBOF2Constants = {
+          format: values.format,
+          FFID: values.FFID,
+          SCID: values.SCID,
+          timestampSource: values.timestampSource,
+          GPSFormat: values.GPSFormat,
+        };
+        await optionalConstantsMutation.mutateAsync(optionalBOF2Fields);
+      }
+      if (values.format === "UTMC") {
+        const optionalUTMCFields: OptionalUTMCConstants = {
+          format: values.format,
+          SCID: values.SCID,
+          timestampSource: values.timestampSource,
+          GPSFormat: values.GPSFormat,
+        };
+        await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
+      }
+    }
+    if (values.customFields && values.customFields.length > 0) {
+      const customFields = [...values.customFields];
+
+      await customFieldsMutation.mutateAsync(customFields);
+    }
+  };
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
+      <Form className="grid grid-cols-1 md:grid-cols-2 gap-4 h-[50%]">
+        <div>
+          <BearerTypeCard />
+          <OSDOptionsCard isOSDLoading={isOSDLoading} />
+        </div>
+        <ChannelCard />
+      </Form>
+    </Formik>
+  );
+};
+
+export default OutputForms;
--- a/src/features/output/hooks/useBearer.ts
+++ b/src/features/output/hooks/useBearer.ts
@@ -0,0 +1,66 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { BearerTypeFields } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
+
+const fetchBearerConfig = async (bearerConfig: string) => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
+    method: "GET",
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postBearerConfig = async (config: BearerTypeFields) => {
+  const channelConfigPayload = {
+    id: `Dispatcher0-${config.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: config.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: config.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: config.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: config.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: config.username,
+      },
+    ],
+  };
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(channelConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const usePostBearerConfig = () => {
+  const bearerMutation = useMutation({
+    mutationFn: (query: BearerTypeFields) => postBearerConfig(query),
+    mutationKey: ["outputs"],
+  });
+  return { bearerMutation };
+};
+
+export const useGetBearerConfig = (bearerConfig: string) => {
+  const bearerQuery = useQuery({
+    queryKey: ["outputs", bearerConfig],
+    queryFn: () => fetchBearerConfig(bearerConfig),
+  });
+
+  return { bearerQuery };
+};
--- a/src/features/output/hooks/useCustomFields.ts
+++ b/src/features/output/hooks/useCustomFields.ts
@@ -0,0 +1,65 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { CustomFieldConfig } from "../../../types/types";
+
+const fetchCustomFields = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-custom-fields`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postCustomFields = async (customFieldConfig: CustomFieldConfig[]) => {
+  const fields = [];
+
+  for (const customField of customFieldConfig) {
+    if (customField.value)
+      if (customFieldConfig.indexOf(customField) > 2) {
+        fields.push({
+          property: `propStringName${customFieldConfig.indexOf(customField) + 1}`,
+          value: customField.label,
+        });
+        fields.push({
+          property: `propStringValue${customFieldConfig.indexOf(customField) + 1}`,
+          value: customField.value,
+        });
+      } else {
+        fields.push(
+          {
+            property: `propCustomFieldName${customFieldConfig.indexOf(customField) + 1}`,
+            value: customField.label,
+          },
+          {
+            property: `propCustomFieldValue${customFieldConfig.indexOf(customField) + 1}`,
+            value: customField.value,
+          },
+        );
+      }
+  }
+  const customFieldConfigPayload = {
+    id: "SightingAmmend0-custom-fields",
+    fields,
+  };
+
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(customFieldConfigPayload),
+  });
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+export const useCustomFields = () => {
+  const customFieldsQuery = useQuery({
+    queryKey: ["customFields"],
+    queryFn: fetchCustomFields,
+  });
+
+  const customFieldsMutation = useMutation({
+    mutationKey: ["customFieldsMutation"],
+    mutationFn: postCustomFields,
+  });
+
+  return { customFieldsQuery, customFieldsMutation };
+};
--- a/src/features/output/hooks/useDispatcherConfig.ts
+++ b/src/features/output/hooks/useDispatcherConfig.ts
@@ -0,0 +1,48 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import type { DispatcherConfig } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
+
+const getDispatcherConfig = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postDispatcherConfig = async (config: DispatcherConfig) => {
+  const updateConfigPayload = {
+    id: "Dispatcher0",
+    fields: [
+      {
+        property: "propEnabled",
+        value: config.enabled,
+      },
+      {
+        property: "propFormat",
+        value: config.format,
+      },
+    ],
+  };
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useDispatcherConfig = () => {
+  const dispatcherQuery = useQuery({
+    queryKey: ["dispatcherConfig"],
+    queryFn: () => getDispatcherConfig(),
+  });
+
+  const dispatcherMutation = useMutation({
+    mutationKey: ["postDispatcherConfig"],
+    mutationFn: (config: DispatcherConfig) => postDispatcherConfig(config),
+  });
+  return { dispatcherQuery, dispatcherMutation };
+};
--- a/src/features/output/hooks/useOSDConfig.ts
+++ b/src/features/output/hooks/useOSDConfig.ts
@@ -0,0 +1,52 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { OSDConfigFields } from "../../../types/types";
+
+const fetchOSDConfig = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=SightingAmmend0-overlay`);
+
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postOSDConfig = async (data: OSDConfigFields) => {
+  const fields = [
+    { property: "propIncludeVRM", value: data.includeVRM },
+    { property: "propIncludeMotion", value: data.includeMotion },
+    { property: "propIncludeTimestamp", value: data.includeTimeStamp },
+    { property: "propIncludeCameraName", value: data.includeCameraName },
+    { property: "propOverlayPosition", value: data.overlayPosition },
+    { property: "propTimestampFormat", value: data.OSDTimestampFormat },
+  ];
+
+  const osdConfigPayload = {
+    id: "SightingAmmend0-overlay",
+    fields: fields,
+  };
+
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(osdConfigPayload),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to post OSD Config");
+  }
+  return response.json();
+};
+
+export const useOSDConfig = () => {
+  const osdQuery = useQuery({
+    queryKey: ["osdConfig"],
+    queryFn: fetchOSDConfig,
+  });
+
+  const osdMutation = useMutation({
+    mutationFn: postOSDConfig,
+    mutationKey: ["postOSDConfig"],
+  });
+
+  return { osdQuery, osdMutation };
+};
--- a/src/features/output/hooks/useOptionalConstants.ts
+++ b/src/features/output/hooks/useOptionalConstants.ts
@@ -0,0 +1,63 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import type { OptionalBOF2Constants } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
+
+const fetchOptionalConstants = async (format: string) => {
+  if (!format || format === "json") return null;
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${format}-constants`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postOptionalConstants = async (config: OptionalBOF2Constants) => {
+  const fields = [
+    {
+      property: "propSourceIdentifier",
+      value: config?.SCID,
+    },
+    {
+      property: "propTimeZoneType",
+      value: config?.timestampSource,
+    },
+    {
+      property: "propGpsFormat",
+      value: config?.GPSFormat,
+    },
+  ];
+
+  if (config.FFID) {
+    fields.push({
+      property: "propFeedIdentifier",
+      value: config.FFID,
+    });
+  }
+  const updateConfigPayload = {
+    id: `Dispatcher0-${config.format?.toLowerCase()}-constants`,
+    fields: fields,
+  };
+
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useOptionalConstants = (format: string) => {
+  const optionalConstantsQuery = useQuery({
+    queryKey: ["optionalConstants", format],
+    queryFn: () => fetchOptionalConstants(format),
+    enabled: !!format && format !== "json",
+  });
+
+  const optionalConstantsMutation = useMutation({
+    mutationKey: ["postOptionalConstants"],
+    mutationFn: postOptionalConstants,
+  });
+  return { optionalConstantsQuery, optionalConstantsMutation };
+};
--- a/src/features/settings/components/Settings.tsx
+++ b/src/features/settings/components/Settings.tsx
@@ -0,0 +1,25 @@
+import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Card from "../../../ui/Card";
+import SystemConfig from "./SystemConfig";
+import CardHeader from "../../../ui/CardHeader";
+
+const Settings = () => {
+  return (
+    <div>
+      <Tabs>
+        <TabList>
+          <Tab>Systems</Tab>
+        </TabList>
+        <TabPanel>
+          <Card className="p-4">
+            <CardHeader title="System Configuration" />
+            <SystemConfig />
+          </Card>
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Settings;
--- a/src/features/settings/components/SystemConfig.tsx
+++ b/src/features/settings/components/SystemConfig.tsx
@@ -0,0 +1,234 @@
+import { Formik, Form, Field, FieldArray } from "formik";
+import { useSystemSettings } from "../hooks/useSystemSettings";
+import type { NetworkConfig, SystemSettings } from "../../../types/types";
+import { toast } from "sonner";
+import { useGetNetworkConfig } from "../hooks/useGetNetworkConfig";
+
+const SystemConfig = () => {
+  const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
+  const { networkConfigQuery, networkConfigMutation } = useGetNetworkConfig();
+
+  const isLoading = networkConfigMutation?.isPending || networkConfigMutation?.isPending;
+  const isGettingLoading = systemSettingsQuery?.isLoading || networkConfigQuery?.isLoading;
+  const timeZoneOptions = systemSettingsQuery?.data?.propLocalTimeZone?.accepted;
+  const timeZoneOpts = timeZoneOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
+  const timeSourceOptions = systemSettingsQuery?.data?.propTimeSource?.accepted;
+  const timeSourceOpts = timeSourceOptions?.split(",").map((option: string) => option.trim().replace(/\[|\]/g, ""));
+  const deviceName = systemSettingsQuery?.data?.propDeviceName?.value;
+  const timeZone = systemSettingsQuery?.data?.propLocalTimeZone?.value;
+  const SNTPServer = systemSettingsQuery?.data?.propSNTPServer?.value;
+  const SNTPInterval = systemSettingsQuery?.data?.propSNTPIntervalMinutes?.value;
+  const timeSource = systemSettingsQuery?.data?.propTimeSource?.value;
+  const primaryServer = networkConfigQuery?.data?.propNameServerPrimary?.value;
+  const secondaryServer = networkConfigQuery?.data?.propNameServerSecondary?.value;
+  const ipAddress = networkConfigQuery?.data?.propHost?.value;
+  const subnetMask = networkConfigQuery?.data?.propNetmask?.value;
+  const gateway = networkConfigQuery?.data?.propGateway?.value;
+
+  const initialValues = {
+    deviceName: deviceName ?? "",
+    timeZone: timeZone ?? "",
+    localTimeZone: timeZone ?? "",
+    SNTPServer: SNTPServer ?? "",
+    SNTPInterval: SNTPInterval ?? 60,
+    SNTPIntervalMinutes: SNTPInterval ?? 60,
+    primaryServer: primaryServer ?? "",
+    secondaryServer: secondaryServer ?? "",
+    timeSource: timeSource ?? "",
+    ipAddress: ipAddress ?? "",
+    subnetMask: subnetMask ?? "",
+    gateway: gateway ?? "",
+    customFields: [],
+  };
+
+  const handleSubmit = async (values: SystemSettings & NetworkConfig) => {
+    const result = await systemSettingsMutation.mutateAsync(values);
+    const networkResult = await networkConfigMutation.mutateAsync({
+      ipAddress: values.ipAddress,
+      subnetMask: values.subnetMask,
+      gateway: values.gateway,
+      primaryServer: values.primaryServer,
+      secondaryServer: values.secondaryServer,
+    });
+
+    if (result.id && networkResult.id) {
+      toast.success("System settings updated successfully");
+    } else {
+      toast.error("Failed to update system settings");
+    }
+  };
+
+  if (isGettingLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+      {({ values }) => (
+        <Form>
+          <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"
+            >
+              {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="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-row justify-between items-center mb-4">
+            <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-row justify-between items-center mb-4">
+            <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-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>
+          <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}
+          >
+            {isLoading ? "Saving..." : "Save Settings"}
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SystemConfig;
--- a/src/features/settings/hooks/useGetNetworkConfig.ts
+++ b/src/features/settings/hooks/useGetNetworkConfig.ts
@@ -0,0 +1,49 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { NetworkConfig } from "../../../types/types";
+
+const fetchNetworkConfig = async () => {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=GLOBAL--NetworkConfig`);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+const postNetworkConfig = async (networkConfig: NetworkConfig) => {
+  const fields = [
+    { property: "propNetmask", value: networkConfig.subnetMask },
+    { property: "propHost", value: networkConfig.ipAddress },
+    { property: "propGateway", value: networkConfig.gateway },
+  ];
+
+  if (networkConfig.primaryServer !== undefined) {
+    fields.push({ property: "propNameServerPrimary", value: networkConfig.primaryServer });
+  }
+  if (networkConfig.secondaryServer !== undefined) {
+    fields.push({ property: "propNameServerSecondary", value: networkConfig.secondaryServer });
+  }
+  const networkConfigPayload = {
+    id: "GLOBAL--NetworkConfig",
+    fields,
+  };
+
+  const respones = await fetch(`${CAMBASE}/api/update-config?id=GLOBAL--NetworkConfig`, {
+    method: "POST",
+    body: JSON.stringify(networkConfigPayload),
+  });
+  if (!respones.ok) throw new Error("Network response was not ok");
+  return respones.json();
+};
+
+export const useGetNetworkConfig = () => {
+  const networkConfigQuery = useQuery({
+    queryKey: ["networkConfig"],
+    queryFn: fetchNetworkConfig,
+  });
+
+  const networkConfigMutation = useMutation({
+    mutationKey: ["networkConfigMutation"],
+    mutationFn: postNetworkConfig,
+  });
+
+  return { networkConfigQuery, networkConfigMutation };
+};
--- a/src/features/settings/hooks/useSystemSettings.ts
+++ b/src/features/settings/hooks/useSystemSettings.ts
@@ -0,0 +1,54 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { SystemSettings } from "../../../types/types";
+const camBase = import.meta.env.MODE !== "development" ? CAMBASE : "";
+
+const fetchSystemSettings = async () => {
+  const response = await fetch(`${camBase}/api/fetch-config?id=GLOBAL--Device`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch system settings");
+  }
+  return response.json();
+};
+
+const postSystemSettings = async (settings: SystemSettings) => {
+  const systemSettingConfig = {
+    id: "GLOBAL--Device",
+    fields: [
+      { property: "propDeviceName", value: settings.deviceName },
+      { property: "propSNTPServer", value: settings.SNTPServer },
+      {
+        property: "propSNTPIntervalMinutes",
+        value: Number(settings.SNTPIntervalMinutes),
+      },
+      { property: "propLocalTimeZone", value: settings.localTimeZone },
+      { property: "propTimeSource", value: settings.timeSource },
+    ],
+  };
+
+  const response = await fetch(`${camBase}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(systemSettingConfig),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  if (!response.ok) {
+    throw new Error("Failed to update system settings");
+  }
+  return response.json();
+};
+
+export const useSystemSettings = () => {
+  const systemSettingsQuery = useQuery({
+    queryKey: ["systemSettings"],
+    queryFn: fetchSystemSettings,
+  });
+
+  const systemSettingsMutation = useMutation({
+    mutationKey: ["updateSystemSettings"],
+    mutationFn: postSystemSettings,
+  });
+
+  return { systemSettingsQuery, systemSettingsMutation };
+};
--- a/src/hooks/useBlackBoard.ts
+++ b/src/hooks/useBlackBoard.ts
@@ -0,0 +1,35 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../utils/config";
+import type { BlackBoardOptions } from "../types/types";
+
+const fetchBlackBoardData = async () => {
+  const response = await fetch(`${CAMBASE}/api/blackboard`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+const viewBlackBoardData = async (options: BlackBoardOptions) => {
+  const response = await fetch(`${CAMBASE}/api/blackboard`, {
+    method: "POST",
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to view blackboard data");
+  }
+  return response.json();
+};
+
+export const useBlackBoard = () => {
+  const blackboardQuery = useQuery({
+    queryKey: ["blackboardData"],
+    queryFn: fetchBlackBoardData,
+  });
+
+  const blackboardMutation = useMutation({
+    mutationKey: ["viewBlackBoardData"],
+    mutationFn: (options: BlackBoardOptions) => viewBlackBoardData(options),
+  });
+  return { blackboardQuery, blackboardMutation };
+};
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,9 +4,12 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen"; // generated by plugin
 import { AppProviders } from "./app/providers/AppProviders";
 import "./index.css";
+import Modal from "react-modal";

 const router = createRouter({ routeTree });

+Modal.setAppElement("#root");
+
 declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -2,12 +2,14 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../ui/Header";
 import Footer from "../ui/Footer";
+import { Toaster } from "sonner";

 const RootLayout = () => (
  <>
    <Header />
    <main className="p-4 min-h-screen">
      <Outlet />
+      <Toaster />
    </main>
    <Footer />
    <TanStackRouterDevtools position="bottom-right" />
--- a/src/routes/baywatch.tsx
+++ b/src/routes/baywatch.tsx
@@ -1,6 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
 import CameraGrid from "../features/cameras/components/CameraGrid";
-import { Toaster } from "sonner";

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

 function HomePage() {
-  return (
-    <div>
-      <DashboardGrid />
-    </div>
-  );
+  return <DashboardGrid />;
 }
--- a/src/routes/output.tsx
+++ b/src/routes/output.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Output from "../features/output/components/Output";
+import OutputForms from "../features/output/components/OutputForms";

 export const Route = createFileRoute("/output")({
  component: RouteComponent,
@@ -8,7 +8,7 @@ export const Route = createFileRoute("/output")({
 function RouteComponent() {
  return (
    <div>
-      <Output />
+      <OutputForms />
    </div>
  );
 }
--- a/src/routes/settings.tsx
+++ b/src/routes/settings.tsx
@@ -1,9 +1,14 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import Settings from "../features/settings/components/Settings";

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

 function RouteComponent() {
-  return <div>Hello "/settings"!</div>
+  return (
+    <div>
+      <Settings />
+    </div>
+  );
 }
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -20,6 +20,14 @@ export type Region = {
 export type SystemHealthStatus = {
  id: string;
  tags: string[];
+  groupID: string;
+};
+
+export type StatusGroups = {
+  channelA: SystemHealthStatus[];
+  channelB: SystemHealthStatus[];
+  channelC: SystemHealthStatus[];
+  default: SystemHealthStatus[];
 };

 export type BearerTypeFields = {
@@ -48,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;
@@ -56,8 +73,157 @@ 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;
+};
+export type OutputDataResponse = {
+  id: string;
+  configHash: string;
+} & Record<string, FieldProperty>;

 export type PaintedCell = {
  colour: string;
+  region: Region;
+};
+
+export type DispatcherConfig = {
+  format: string;
+  enabled: boolean;
+};
+
+export type OptionalBOF2Constants = {
+  format?: string;
+  FFID?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+
+export type OptionalUTMCConstants = {
+  format?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+export type OptionalBOF2LaneIDs = {
+  laneId?: string;
+  LID1?: string;
+  LID2?: string;
+  LID3?: string;
+};
+
+export type CameraFeedState = {
+  cameraFeedID: "A" | "B" | "C";
+  paintedCells: {
+    A: Map<string, PaintedCell>;
+    B: Map<string, PaintedCell>;
+    C: Map<string, PaintedCell>;
+  };
+  regionsByCamera: {
+    A: Region[];
+    B: Region[];
+    C: Region[];
+  };
+  selectedRegionIndex: number;
+  modeByCamera: {
+    A: string;
+    B: string;
+    C: string;
+  };
+
+  tabIndex?: number;
+};
+
+export type CameraFeedAction =
+  | {
+      type: "SET_CAMERA_FEED";
+      payload: "A" | "B" | "C";
+    }
+  | {
+      type: "CHANGE_MODE";
+      payload: { cameraFeedID: "A" | "B" | "C"; mode: string };
+    }
+  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
+  | {
+      type: "SET_SELECTED_REGION_COLOUR";
+      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string; newColour: string };
+    }
+  | {
+      type: "ADD_NEW_REGION";
+      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string; brushColour: string };
+    }
+  | {
+      type: "REMOVE_REGION";
+      payload: { cameraFeedID: "A" | "B" | "C"; regionName: string };
+    }
+  | {
+      type: "RESET_PAINTED_CELLS";
+      payload: { cameraFeedID: "A" | "B" | "C"; paintedCells: Map<string, PaintedCell> };
+    }
+  | {
+      type: "SET_CAMERA_FEED_DATA";
+      cameraState: CameraFeedState;
+    }
+  | {
+      type: "RESET_CAMERA_FEED";
+    };
+
+export type DecodeReading = {
+  id: number;
+  vrm: string;
+  laneID: number;
+  seenCount: number;
+  firstSeenTime?: number;
+  lastSeenTime?: number;
+  duplicate?: true;
+  firstSeenTimeHumane: string;
+  lastSeenTimeHumane: string;
+};
+
+export type ColourData = {
+  id: string | number;
+  cells: number[][];
+};
+
+export type ColourDetectionPayload = {
+  cameraFeedID: "A" | "B" | "C";
+  regions: ColourData[];
+};
+
+export type SystemSettings = {
+  deviceName: string;
+  localTimeZone: string;
+  timeSource: string;
+  SNTPServer: string;
+  SNTPIntervalMinutes: number;
+};
+
+export type NetworkConfig = {
+  ipAddress: string;
+  subnetMask: string;
+  gateway: string;
+  primaryServer?: string;
+  secondaryServer?: string;
+};
+
+export type CustomFieldConfig = {
+  label: string;
+  value: string;
+};
+
+export type BlackBoardOptions = {
+  operation?: string;
+  path?: string;
+  value?: object | string | number | (string | number)[] | null;
 };
--- a/src/ui/Card.tsx
+++ b/src/ui/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
  return (
    <div
      className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
        className,
      )}
    >
--- a/src/ui/CardHeader.tsx
+++ b/src/ui/CardHeader.tsx
@@ -21,7 +21,7 @@ const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps)
          {status && <StatusIndicators status={status} />}
          {title}
        </h2>
-        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
+        {icon && <FontAwesomeIcon icon={icon} className="hover:cursor-pointer" onClick={refetch} />}
      </div>
    </div>
  );
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,29 +1,39 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGaugeHigh } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";

 const Header = () => {
  return (
-    <header className="bg-[#253445] p-4 flex  border-b border-gray-500 justify-between">
+    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
      <div className="w-28">
        <Link to={"/"}>
          <img src={Logo} alt="Logo" width={150} height={150} />
        </Link>
      </div>
-      <div className="flex gap-4">
-        <Link to="/" className="[&.active]:font-bold">
-          <FontAwesomeIcon icon={faGaugeHigh} />
+      <div className="flex 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"
+        >
+          {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
          Dashboard
        </Link>

-        <Link to="/baywatch" className="[&.active]:font-bold">
+        <Link
+          to="/baywatch"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
          Cameras
        </Link>
-        <Link to="/output" className="[&.active]:font-bold">
+        <Link
+          to="/output"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
          Output
        </Link>
-        <Link to="/settings" className="[&.active]:font-bold">
+        <Link
+          to="/settings"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
          Settings
        </Link>
      </div>
--- a/src/ui/ModalComponent.tsx
+++ b/src/ui/ModalComponent.tsx
@@ -0,0 +1,22 @@
+import Modal from "react-modal";
+
+type ModalComponentProps = {
+  isModalOpen: boolean;
+  children: React.ReactNode;
+  close: () => void;
+};
+
+const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onRequestClose={close}
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
+      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export default ModalComponent;
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -0,0 +1 @@
+export const CAMBASE = import.meta.env.VITE_BASEURL;
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,3 +1,20 @@
+import type { SystemHealthStatus } from "../types/types";
+
 export function capitalize(s?: string) {
  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
 }
+
+export const convertObjtoArray = (obj: Record<string, SystemHealthStatus[]>) => {
+  if (!obj) return;
+  const statusCategoryArray = Object.entries(obj);
+  return statusCategoryArray;
+};
+
+// const data = {
+//   camera: cameraFeedID,
+//   cells: Array.from(paintedCells.entries()).map(([key, cell]) => ({
+//     position: key,
+//     ...cell,
+//     region: regions[selectedRegionIndex]?.name || "Unnamed",
+//   })),
+// };
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,4 +13,12 @@ export default defineConfig({
    react(),
    tailwindcss(),
  ],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://100.115.125.56",
+        changeOrigin: true,
+      },
+    },
+  },
 });
--- a/yarn.lock
+++ b/yarn.lock
@@ -1018,6 +1018,13 @@
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
  integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==

+"@types/react-modal@^3.16.3":
+  version "3.16.3"
+  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.16.3.tgz#250f32c07f1de28e2bcf9c3e84b56adaa6897013"
+  integrity sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-reconciler@^0.28.9":
  version "0.28.9"
  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.9.tgz#d24b4864c384e770c83275b3fe73fba00269c83b"
@@ -1028,6 +1035,13 @@
  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.32.3.tgz#eb4b346f367f29f07628032934d30a4f3f9eaba7"
  integrity sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==

+"@types/react@*":
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.7.tgz#84e62c0f23e8e4e5ac2cadcea1ffeacccae7f62f"
+  integrity sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==
+  dependencies:
+    csstype "^3.2.2"
+
 "@types/react@^19.2.5":
  version "19.2.6"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.6.tgz#d27db1ff45012d53980f5589fda925278e1249ca"
@@ -1540,6 +1554,11 @@ esutils@^2.0.2:
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==

+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1934,7 +1953,7 @@ lodash@^4.17.21:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

-loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2104,7 +2123,7 @@ prettier@^3.5.0:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.6.2.tgz#ccda02a1003ebbb2bfda6f83a074978f608b9393"
  integrity sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==

-prop-types@^15.5.0:
+prop-types@^15.5.0, prop-types@^15.7.2:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2150,6 +2169,21 @@ react-konva@^19.2.0:
    react-reconciler "0.33.0"
    scheduler "0.27.0"

+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.16.3:
+  version "3.16.3"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.3.tgz#c412d41915782e3c261253435d01468e2439b11b"
+  integrity sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-reconciler@0.33.0:
  version "0.33.0"
  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.33.0.tgz#9dd20208d45baa5b0b4701781f858236657f15e1"
@@ -2446,6 +2480,13 @@ vite@^7.1.7, vite@^7.2.4:
  optionalDependencies:
    fsevents "~2.3.3"

+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 webpack-virtual-modules@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
Author	SHA1	Message	Date
Toba Ojo	1628048ac5	- added camera black board fetch and post - region selector can save settings and painted regions and fetch on load - will add reset all	2025-12-08 10:59:46 +00:00
Toba Ojo	7cda7d5887	- general fixes across the app - minor fixes - code clean up and improvements	2025-12-08 09:03:04 +00:00
TobaOjo	4c53c04767	Merge pull request '- added OSD configuration components and hooks for managing overlay settings' (#15 ) from feature/osdOverlayOptions into develop Reviewed-on: #15	2025-12-06 21:17:24 +00:00
Toba Ojo	8a5a4f5c67	- added OSD configuration components and hooks for managing overlay settings	2025-12-06 21:16:11 +00:00
Toba Ojo	f0587a2b43	- improved layouts across app - adjusted card spacing	2025-12-05 17:01:57 +00:00
Toba Ojo	9e89193747	- finally fixed custom imput to match what is on backend on sighting amend endpoint	2025-12-05 12:53:42 +00:00
Toba Ojo	9208470e53	- addressing feedback	2025-12-04 19:14:14 +00:00
TobaOjo	3af4e585e7	Merge pull request '- added formik custom fields to settings and output' (#14 ) from enhancement/customFields into develop Reviewed-on: #14	2025-12-04 09:55:18 +00:00
Toba Ojo	7f9923167e	- added formik custom fields to settings and output	2025-12-03 19:51:02 +00:00
TobaOjo	018203b203	Merge pull request '- improved statuses acress dashboard and child cards' (#13 ) from enhancement/statusIndicators into develop Reviewed-on: #13	2025-12-03 16:06:14 +00:00
Toba Ojo	173b1d0e51	- improved statuses acress dashboard and child cards	2025-12-03 16:05:06 +00:00
TobaOjo	9b35deaf12	Merge pull request '- Enhance layout and responsiveness of camera components' (#12 ) from enhancement/videoFeed into develop Reviewed-on: #12	2025-12-03 13:42:43 +00:00
Toba Ojo	59bcb3c45b	- Enhance layout and responsiveness of camera components - update system health hook for periodic refetching	2025-12-03 13:39:18 +00:00
TobaOjo	10590e5658	Merge pull request 'enhancement/dashboardFeedback' (#11 ) from enhancement/dashboardFeedback into develop Reviewed-on: #11	2025-12-03 10:58:07 +00:00
Toba Ojo	f7964d4fc0	- added download button - added reads for number plate sightings	2025-12-03 10:46:36 +00:00
Toba Ojo	2a4afc7eae	- organised file structure for dashboard	2025-12-02 14:10:06 +00:00
TobaOjo	1810fc04b5	Merge pull request 'feature/settingsPage' (#10 ) from feature/settingsPage into develop Reviewed-on: #10	2025-12-02 13:54:56 +00:00
TobaOjo	d9594546a0	Merge branch 'develop' into feature/settingsPage	2025-12-02 13:54:47 +00:00
Toba Ojo	dbadc7388c	- added settings page - can post and get data from endpoint - moved toaster to main page - updated config for CORS	2025-12-02 13:45:44 +00:00
Toba Ojo	ce79591de0	- enhancedcamera settings and region painter. - Can send to the back end	2025-12-01 14:36:25 +00:00
TobaOjo	748be931ed	Merge pull request 'enhancement/systemHealth' (#9 ) from enhancement/systemHealth into develop Reviewed-on: #9	2025-12-01 09:41:36 +00:00
Toba Ojo	6cb2e88b3b	- added new dashboard items - added camera module statuses	2025-12-01 09:33:29 +00:00
Toba Ojo	4e02bafa6a	- added status grid items - add react modal pkg	2025-11-28 15:06:03 +00:00
TobaOjo	983f307c3f	Merge pull request 'Refactor camera feed components and add sighting tables' (#8 ) from feature/cameraControls into develop Reviewed-on: #8	2025-11-28 13:02:17 +00:00
Toba Ojo	ddb1fa1bf1	Refactor camera feed components and add sighting tables - Updated mode settings in camera feed reducer to use "painter" - Renamed PlatePatch component to SightingPatch and updated imports - Removed obsolete PlatePatch component - Added SightingEntryTable and SightingExitTable components for displaying sighting data - Implemented useSightingEntryAndExit hook for fetching entry and exit sightings - Adjusted VideoFeedGridPainter for improved width calculation - Introduced DecodeReading type for better typing	2025-11-28 12:58:42 +00:00
TobaOjo	c910a3dd50	Merge pull request 'feature/targetdetection' (#7 ) from feature/targetdetection into develop Reviewed-on: #7	2025-11-28 09:21:03 +00:00
Toba Ojo	690043e9f7	- updated ws endpoint	2025-11-28 09:18:46 +00:00
Toba Ojo	6428a8fa39	- added tabs for camera controls	2025-11-28 09:00:55 +00:00
Toba Ojo	bf31f94b32	- Enhanced camera feed state management with region handling and mode changes	2025-11-27 16:16:15 +00:00
Toba Ojo	f7dbde4511	- implemented isolated colouring depending on camera	2025-11-27 11:43:10 +00:00
Toba Ojo	1ada8d0966	- Implement CameraFeed context and provider with reducer for state management - able to switch footage on tab clicks	2025-11-27 10:43:56 +00:00
TobaOjo	6accac02de	Merge pull request 'feature/output-2' (#6 ) from feature/output-2 into develop Reviewed-on: #6	2025-11-27 09:45:11 +00:00
Toba Ojo	3c10ff82cb	- updated base for endpoints - added loading states - need to add new form for ftp type	2025-11-27 09:43:09 +00:00
Toba Ojo	97ff9a981d	- added form fetch and post for optional constants for UTMC	2025-11-26 15:31:19 +00:00
Toba Ojo	e07f769288	- refactor: replace Output component with OutputForms and update related hooks and types	2025-11-26 13:00:41 +00:00
Toba Ojo	90eb976092	- can get data need to post	2025-11-25 23:04:40 +00:00
Toba Ojo	225a2a6168	- added add and remove regions on paint selector	2025-11-25 20:49:11 +00:00
Toba Ojo	2aa0b4377f	- minor tweaks to ui across app	2025-11-25 15:49:53 +00:00
Toba Ojo	0d385061e0	- updated icon	2025-11-25 15:02:18 +00:00
TobaOjo	3bbb3166ba	Merge pull request '- improved ui for region selector and camera settings' (#5 ) from feature/cameras-2 into develop Reviewed-on: #5	2025-11-25 14:59:25 +00:00
				`@@ -0,0 +1 @@`
				`export const CAMBASE = import.meta.env.VITE_BASEURL;`