- added formik custom fields to settings and output

Reviewed-on: #13

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",

src/app/reducers/cameraFeedReducer.ts

@@ -12,19 +12,30 @@ export const initialState: CameraFeedState = {
       { name: "Region 1", brushColour: "#ff0000" },
       { name: "Region 2", brushColour: "#00ff00" },
       { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Region 5", brushColour: "#fc35db" },
     ],
     B: [
       { name: "Region 1", brushColour: "#ff0000" },
       { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Region 5", brushColour: "#fc35db" },
+    ],
+    C: [
+      { name: "Region 1", brushColour: "#ff0000" },
+      { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Region 5", brushColour: "#fc35db" },
     ],
-    C: [{ name: "Region 1", brushColour: "#ff0000" }],
   },
 
   selectedRegionIndex: 0,
   modeByCamera: {
-    A: "brush",
+    A: "painter",
-    B: "brush",
+    B: "painter",
-    C: "brush",
+    C: "painter",
   },
 };
 
@@ -70,7 +81,6 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
         },
       };
     case "REMOVE_REGION":
-      console.log(action.payload);
       return {
         ...state,
         regionsByCamera: {

src/features/cameras/components/CameraGrid.tsx

@@ -3,13 +3,13 @@ import { useState } from "react";
 import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
 
-import PlatePatch from "./PlatePatch/PlatePatch";
+import PlatePatch from "./PlatePatch/SightingPatch";
 
 const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
+    <div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
       <VideoFeedGridPainter />
       <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
       <PlatePatch />

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

@@ -10,7 +10,7 @@ type 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 overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"

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"
     />

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

@@ -1,6 +1,7 @@
-import type { PaintedCell, Region } from "../../../../types/types";
+import type { ColourData, PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import { useColourDectection } from "../../hooks/useColourDetection";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -10,19 +11,14 @@ type RegionSelectorProps = {
 };
 
 const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
-  const { dispatch } = useCameraFeedContext();
+  const { colourMutation } = useColourDectection();
+  const { state, dispatch } = useCameraFeedContext();
+  const paintedCells = state.paintedCells[cameraFeedID];
+
   const handleChange = (e: { target: { value: string } }) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
   };
 
-  const handleAddRegionClick = () => {
-    const regionName = `Region ${regions.length + 1}`;
-    dispatch({
-      type: "ADD_NEW_REGION",
-      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
-    });
-  };
-
   const handleResetRegion = () => {
     dispatch({
       type: "RESET_PAINTED_CELLS",
@@ -30,13 +26,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  const handleRemoveClick = () => {
-    dispatch({
-      type: "REMOVE_REGION",
-      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
-    });
-  };
-
   const handleModeChange = (newMode: string) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
   };
@@ -54,6 +43,53 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
+  const handleSaveclick = () => {
+    const regions: ColourData[] = [];
+    const test = Array.from(paintedCells.entries());
+    const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
+    const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
+    const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
+    const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
+    const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
+    const 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 });
+  };
+
   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">
@@ -103,7 +139,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
               <label
                 htmlFor={inputId}
                 key={region.name}
-                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
+                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">
@@ -121,24 +157,22 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
                   <span className="text-xl">{region.name}</span>
                 </div>
                 <ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
-                <p className="text-slate-400">{region.brushColour}</p>
+                <div></div>
               </label>
             );
           })}
         </>
-        <div className=" mx-auto flex flex-row gap-4  mt-4">
-          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddRegionClick}>
-            Add Region
-          </button>
-          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
-            Remove Region
-          </button>
-        </div>
       </div>
 
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
         <div className="flex flex-col">
           <h2 className="text-2xl mb-2">Actions</h2>
+          <button
+            onClick={handleSaveclick}
+            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
+          >
+            Save Region
+          </button>
           <button
             onClick={handleResetRegion}
             className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"

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;

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

@@ -0,0 +1,44 @@
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import type { DecodeReading } from "../../../../types/types";
+import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
+
+const SightingEntryTable = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
+
+  const isLoading = entryQuery?.isFetching;
+  const readings = entryQuery?.data?.decodes;
+
+  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
+  return (
+    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
+      <div className="overflow-y-auto ">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+            <tr>
+              <th className="px-4 py-3 font-semibold">VRM</th>
+              <th className="px-4 py-3 font-semibold">Lane ID</th>
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+              <th className="px-4 py-3 font-semibold">First Seen</th>
+              <th className="px-4 py-3 font-semibold">Last Seen</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-700">
+            {readings?.map((reading: DecodeReading) => (
+              <tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
+                <td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
+                <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
+                <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default SightingEntryTable;

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

@@ -0,0 +1,44 @@
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import type { DecodeReading } from "../../../../types/types";
+import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
+
+const SightingExitTable = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
+
+  const isLoading = exitQuery?.isFetching;
+  const readings = exitQuery?.data?.decodes;
+
+  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
+  return (
+    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
+      <div className="overflow-y-auto ">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+            <tr>
+              <th className="px-4 py-3 font-semibold">VRM</th>
+              <th className="px-4 py-3 font-semibold">Lane ID</th>
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+              <th className="px-4 py-3 font-semibold">First Seen</th>
+              <th className="px-4 py-3 font-semibold">Last Seen</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-700">
+            {readings?.map((reading: DecodeReading) => (
+              <tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
+                <td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
+                <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
+                <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
+                <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default SightingExitTable;

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 md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
+      <CardHeader title="Entry / Exit" />
+      <Tabs>
+        <TabList>
+          <Tab>Entry Sightings</Tab>
+          <Tab>Exit Sightings</Tab>
+        </TabList>
+        <TabPanel>
+          <SightingEntryTable />
+        </TabPanel>
+        <TabPanel>
+          <SightingExitTable />
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default PlatePatch;

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

@@ -3,12 +3,14 @@ import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
 
-import Card from "../../../../ui/Card";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 
-const rows = 40;
+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;
 
 const VideoFeedGridPainter = () => {
@@ -19,9 +21,12 @@ const VideoFeedGridPainter = () => {
   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);
 
@@ -60,7 +65,7 @@ const VideoFeedGridPainter = () => {
 
     if (existing && existing.colour === currentColour) return;
 
-    map.set(key, { colour: currentColour });
+    map.set(key, { colour: currentColour, region: activeRegion });
 
     paintLayerRef.current?.batchDraw();
   };
@@ -87,25 +92,25 @@ const VideoFeedGridPainter = () => {
     const handleResize = () => {
       const width = window.innerWidth;
 
-      const aspectRatio = 740 / 460;
+      const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.36;
+      const newWidth = width * 0.55;
       const newHeight = newWidth / aspectRatio;
       setStageSize({ width: newWidth, height: newHeight });
     };
+
     handleResize();
     window.addEventListener("resize", handleResize);
 
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  if (image === null || isloading)
+  if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
-    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>
-    );
   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}

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 };
+};

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 };
+};

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;

src/features/dashboard/components/DashboardGrid.tsx

@@ -1,16 +1,55 @@
-import CameraStatus from "./CameraStatus";
+import type { SystemHealthStatus } from "../../../types/types";
-import SystemOverview from "./SystemOverview";
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
-import SystemStatusCard from "./SystemStatusCard";
+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">
       <SystemStatusCard />
-      <SystemOverview />
+      <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">
-        <CameraStatus title="Camera 1" status={"bg-red-500"} description={"Camera not responding"} />
+        <CameraStatus title="Camera A" category={categoryA} isError={isError} />
-        <CameraStatus title="Camera 2" status={"bg-gray-500"} description={"Camera Offline"} />
+        <CameraStatus title="Camera B" category={categoryB} isError={isError} />
-        <CameraStatus title="Camera 3" status={"bg-gray-500"} description={"Camera Offline"} />
+        <CameraStatus title="Camera C" category={categoryC} isError={isError} />
       </div>
     </div>
   );

src/features/dashboard/components/SystemOverview.tsx

@@ -1,32 +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;
-  const isError = query?.isError;
-  const dateUpdatedAt = query?.dataUpdatedAt;
-
-  return (
-    <Card className="p-4">
-      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
-      <SystemHealth
-        startTime={startTime}
-        uptime={uptime}
-        statuses={statuses}
-        isLoading={isLoading}
-        isError={isError}
-        dateUpdatedAt={dateUpdatedAt}
-      />
-    </Card>
-  );
-};
-
-export default SystemOverview;

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;

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;

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;

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;

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

@@ -1,5 +1,5 @@
-import type { SystemHealthStatus } from "../../../types/types";
+import type { SystemHealthStatus } from "../../../../types/types";
-import Badge from "../../../ui/Badge";
+import StatusGridItem from "../statusGridItem/StatusGridItem";
 
 type SystemHealthProps = {
   startTime: string;
@@ -13,7 +13,23 @@ type SystemHealthProps = {
 const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
   const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
 
-  // console.log(statuses);
+  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>;
@@ -22,7 +38,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
     return <span className="text-slate-500">Loading system health…</span>;
   }
   return (
-    <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
+    <div className="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>
@@ -31,15 +47,11 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
           <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
         </div>
       </div>
-      <div className="h-50 overflow-auto">
+      <div className="overflow-auto gap-4">
-        {statuses?.map((status: SystemHealthStatus) => (
+        <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
-          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
-            <span>{status.id}</span> <Badge text={status.tags[0]} />
-          </div>
-        ))}
       </div>
-      <div className="border-t border-gray-500">
+      <div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
-        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
+        <small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
       </div>
     </div>
   );

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;

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;

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;

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;

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;

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 };
+};

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 };
+};

src/features/dashboard/hooks/useGetSystemHealth.ts

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

src/features/output/components/ChannelFields.tsx

@@ -1,4 +1,4 @@
-import { Field } from "formik";
+import { Field, FieldArray } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
@@ -17,6 +17,7 @@ type ChannelFieldsProps = {
 const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
   const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
   const optionalConstants = optionalConstantsQuery?.data;
+
   const channelFieldsObject = useMemo(() => {
     return {
       connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -261,6 +262,47 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               </div>
             </>
           )}
+          <div className="border-b border-gray-500 my-3">
+            <h2 className="font-bold">Custom Fields</h2>
+          </div>
+          <div className="items-center mb-4">
+            <FieldArray name="customFields">
+              {(arrayHelpers) => (
+                <>
+                  {values?.customFields?.map((_, index) => (
+                    <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 && 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>
         </>
       ) : (
         <></>

src/features/output/components/OutputForms.tsx

@@ -41,6 +41,9 @@ const OutputForms = () => {
     LID2: "",
 
     // ftp - fields
+
+    //custom fields
+    customFields: [],
   };
 
   const handleSubmit = async (values: FormTypes) => {

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;

src/features/settings/components/SystemConfig.tsx

@@ -0,0 +1,179 @@
+import { Formik, Form, Field, FieldArray } from "formik";
+import { useSystemSettings } from "../hooks/useSystemSettings";
+import type { SystemSettings } from "../../../types/types";
+import { toast } from "sonner";
+
+const SystemConfig = () => {
+  const { systemSettingsQuery, systemSettingsMutation } = useSystemSettings();
+
+  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 = systemSettingsQuery?.data?.propPrimaryDNSServer?.value;
+  // const secondaryServer = systemSettingsQuery?.data?.propSecondaryDNSServer?.value;
+
+  const initialValues = {
+    deviceName: deviceName ?? "",
+    timeZone: timeZone ?? "",
+    localTimeZone: timeZone ?? "",
+    SNTPServer: SNTPServer ?? "",
+    SNTPInterval: SNTPInterval ?? 60,
+    SNTPIntervalMinutes: SNTPInterval ?? 60,
+    primaryServer: "",
+    secondaryServer: "",
+    timeSource: timeSource ?? "",
+    customFields: [],
+  };
+
+  const handleSubmit = async (values: SystemSettings) => {
+    const result = await systemSettingsMutation.mutateAsync(values);
+
+    if (result.id) {
+      toast.success("System settings updated successfully");
+    } else {
+      toast.error("Failed to update system settings");
+    }
+  };
+
+  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="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((field, 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">
+            Save Settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SystemConfig;

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 };
+};

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;

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" />

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>
   );
 }

src/routes/index.tsx

@@ -6,9 +6,5 @@ export const Route = createFileRoute("/")({
 });
 
 function HomePage() {
-  return (
+  return <DashboardGrid />;
-    <div>
-      <DashboardGrid />
-    </div>
-  );
 }

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>
+  );
 }

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,10 @@ export type OptionalLaneIDs = {
   LID3?: string;
 };
 
+export type CustomFields = {
+  customFields?: string[];
+};
+
 export type InitialValuesFormErrors = {
   backOfficeURL?: string;
   username?: string;
@@ -56,7 +68,7 @@ export type InitialValuesFormErrors = {
   readTimeoutSeconds?: string;
 };
 
-export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
+export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs & CustomFields;
 type FieldProperty = {
   datatype: string;
   value: string;
@@ -68,6 +80,7 @@ export type OutputDataResponse = {
 
 export type PaintedCell = {
   colour: string;
+  region: Region;
 };
 
 export type DispatcherConfig = {
@@ -144,3 +157,35 @@ export type CameraFeedAction =
       type: "RESET_PAINTED_CELLS";
       payload: { cameraFeedID: "A" | "B" | "C"; paintedCells: Map<string, PaintedCell> };
     };
+
+export type DecodeReading = {
+  id: number;
+  vrm: string;
+  laneID: number;
+  seenCount: number;
+  firstSeenTime?: number;
+  lastSeenTime?: number;
+  duplicate?: true;
+  firstSeenTimeHumane: string;
+  lastSeenTimeHumane: string;
+};
+
+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;
+  primaryServer?: string;
+  secondaryServer?: string;
+};

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;

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",
+//   })),
+// };

vite.config.ts

@@ -13,4 +13,12 @@ export default defineConfig({
     react(),
     tailwindcss(),
   ],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://100.115.125.56",
+        changeOrigin: true,
+      },
+    },
+  },
 });

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"