- enhancedcamera settings and region painter.

- Can send to the back end
- added new dashboard items
2025-12-01 14:36:25 +00:00 · 2025-12-01 09:33:29 +00:00 · 2025-11-28 15:06:03 +00:00 · 2025-11-28 13:02:17 +00:00
19 changed files with 462 additions and 52 deletions
--- 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/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -12,12 +12,23 @@ 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,
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/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 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
--- 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,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,7 +11,10 @@ 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 } });
  };
@@ -54,6 +58,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 +154,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,16 +172,16 @@ 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}>
+          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
            Add Region
          </button>
-          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
+          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
            Remove Region
          </button>
        </div>
@@ -139,6 +190,12 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
      <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"
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/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.39;
      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={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+        mode === "eraser" ? "hover:cursor-pointer" : ""
+      }`}
+    >
      <Stage
        width={stageSize.width}
        height={stageSize.height}
--- 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/dashboard/components/CameraStatus.tsx
+++ b/src/features/dashboard/components/CameraStatus.tsx
@@ -1,17 +1,35 @@
+import type { SystemHealthStatus } from "../../../types/types";
 import Card from "../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
+import StatusIndicators from "../../../ui/StatusIndicators";
+import { capitalize } from "../../../utils/utils";
+import CameraStatusGridItem from "./CameraStatusGridItem";

 type CameraStatusProps = {
  title: string;
-  status?: string;
-  description: string;
+  category: SystemHealthStatus[];
 };

-const CameraStatus = ({ title, status, description }: CameraStatusProps) => {
+const CameraStatus = ({ title, category }: CameraStatusProps) => {
+  const isAllGood = 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">
-      <CardHeader title={title} status={status} />
-      <p className=" text-gray-500">{description}</p>
+      <div className="border-b border-gray-600">
+        <h3 className="text-lg flex flex-row items-center">
+          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+          {capitalize(title)}
+        </h3>
+        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "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>
  );
 };
--- a/src/features/dashboard/components/CameraStatusGridItem.tsx
+++ b/src/features/dashboard/components/CameraStatusGridItem.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import type { SystemHealthStatus } from "../../../types/types";
+import { capitalize } from "../../../utils/utils";
+import SystemHealthModal from "./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/DashboardGrid.tsx
+++ b/src/features/dashboard/components/DashboardGrid.tsx
@@ -1,16 +1,55 @@
+import type { SystemHealthStatus } from "../../../types/types";
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
 import CameraStatus from "./CameraStatus";
 import SystemOverview from "./SystemOverview";
 import SystemStatusCard from "./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 />
+      <SystemOverview
+        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 2" status={"bg-gray-500"} description={"Camera Offline"} />
-        <CameraStatus title="Camera 3" status={"bg-gray-500"} description={"Camera Offline"} />
+        <CameraStatus title="Camera A" category={categoryA} />
+        <CameraStatus title="Camera B" category={categoryB} />
+        <CameraStatus title="Camera C" category={categoryC} />
      </div>
    </div>
  );
--- a/src/features/dashboard/components/SystemHealth.tsx
+++ b/src/features/dashboard/components/SystemHealth.tsx
@@ -1,5 +1,5 @@
 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>;
@@ -31,12 +47,8 @@ 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">
-        {statuses?.map((status: SystemHealthStatus) => (
-          <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 className="overflow-auto gap-4">
+        <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
      </div>
      <div className="border-t border-gray-500">
        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
--- a/src/features/dashboard/components/SystemOverview.tsx
+++ b/src/features/dashboard/components/SystemOverview.tsx
@@ -1,22 +1,32 @@
 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";
+import type { SystemHealthStatus } from "../../../types/types";

-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;
+type SystemOverviewProps = {
+  startTime: string;
+  uptime: string;
+  statuses: SystemHealthStatus[];
+  isLoading: boolean;
+  isError: boolean;
+  dateUpdatedAt: number;
+  refetch: () => void;
+};

+const SystemOverview = ({
+  startTime,
+  uptime,
+  statuses,
+  isLoading,
+  isError,
+  dateUpdatedAt,
+  refetch,
+}: SystemOverviewProps) => {
  return (
    <Card className="p-4">
-      <CardHeader title="System Health" refetch={query?.refetch} icon={faArrowsRotate} />
+      <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
      <SystemHealth
        startTime={startTime}
        uptime={uptime}
--- a/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
+++ b/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import type { SystemHealthStatus } from "../../../../types/types";
+import StatusIndicators from "../../../../ui/StatusIndicators";
+import { capitalize } from "../../../../utils/utils";
+import SystemHealthModal from "../systemHealthModal/SystemHealthModal";
+
+type StatusGridItemProps = {
+  title: string;
+  statusCategory: SystemHealthStatus[];
+};
+
+const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
+  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"
+        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/systemHealthModal/SystemHealthModal.tsx
+++ b/src/features/dashboard/components/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/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/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 = {
@@ -68,6 +76,7 @@ export type OutputDataResponse = {

 export type PaintedCell = {
  colour: string;
+  region: Region;
 };

 export type DispatcherConfig = {
@@ -156,3 +165,13 @@ export type DecodeReading = {
  firstSeenTimeHumane: string;
  lastSeenTimeHumane: string;
 };
+
+export type ColourData = {
+  id: string | number;
+  cells: number[][];
+};
+
+export type ColourDetectionPayload = {
+  cameraFeedID: "A" | "B" | "C";
+  regions: ColourData[];
+};
--- 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"
+      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export default ModalComponent;
--- 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/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	ce79591de0	- enhancedcamera settings and region painter. - Can send to the back end	2025-12-01 14:36:25 +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