- added functionality to push to backend

- improved responsiveness - added reset functionality
- added functionality for brush and eraser size
2026-01-14 14:50:24 +00:00 · 2026-01-14 12:42:11 +00:00 · 2026-01-13 14:46:10 +00:00 · 2026-01-12 15:38:01 +00:00 · 2026-01-09 16:16:28 +00:00 · 2026-01-09 10:07:28 +00:00
33 changed files with 1924 additions and 66 deletions
--- a/package.json
+++ b/package.json
@@ -18,11 +18,14 @@
    "@tanstack/react-router": "^1.141.6",
    "clsx": "^2.1.1",
    "country-flag-icons": "^1.6.4",
+    "formik": "^2.4.9",
    "konva": "^10.0.12",
+    "rc-slider": "^11.1.9",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-konva": "^19.2.1",
    "react-modal": "^3.16.3",
+    "react-tabs": "^6.1.0",
    "tailwindcss": "^4.1.18"
  },
  "devDependencies": {
--- a/src/app/providers/CameraSettingsProvider.tsx
+++ b/src/app/providers/CameraSettingsProvider.tsx
@@ -1,9 +1,58 @@
 import { CameraSettingsContext } from "../context/CameraSettingsContext";
-import { useReducer, type ReactNode } from "react";
+import { useEffect, useReducer, type ReactNode } from "react";
 import { initialState, cameraSettingsReducer } from "../reducers/cameraSettingsReducer";
+import { useCameraController } from "../../features/setup/hooks/useCameraControlConfig";

 const CameraSettingsProvider = ({ children }: { children: ReactNode }) => {
  const [state, dispatch] = useReducer(cameraSettingsReducer, initialState);
+  const { cameraControllerQuery } = useCameraController();
+
+  useEffect(() => {
+    if (cameraControllerQuery?.data) {
+      const currentCameraControlMode = cameraControllerQuery.data.propOperationMode.value.toLowerCase();
+      const currentAutoMaxGain = cameraControllerQuery.data.propAutoModeMaxGain.value;
+      const currentAutoMinShutter = cameraControllerQuery.data.propAutoModeMinShutter.value;
+      const currentAutoMaxShutter = cameraControllerQuery.data.propAutoModeMaxShutter.value;
+      const currentExposureCompensation = cameraControllerQuery.data.propAutoModeExposureCompensation.value;
+
+      const currentManualFixShutter = cameraControllerQuery.data.propManualModeShutter.value;
+      const currentManualFixGain = cameraControllerQuery.data.propManualModeFixGain.value;
+      const currentManualFixIris = cameraControllerQuery.data.propManualModeFixIris.value;
+
+      const currentShutterPriorityFixShutter = cameraControllerQuery.data.propShutterPriority.value;
+      const currentShutterPriorityMaxGain = cameraControllerQuery.data.propShutterPriorityMaxGain.value;
+      const currentShutterPriorityExposureCompensation =
+        cameraControllerQuery.data.propShutterPriorityExposureCompensation.value;
+
+      console.log({
+        currentShutterPriorityFixShutter,
+        currentShutterPriorityMaxGain,
+        currentShutterPriorityExposureCompensation,
+      });
+      dispatch({
+        type: "SET_CAMERA_CONTROLS",
+        payload: {
+          cameraControlMode: currentCameraControlMode,
+          auto: {
+            maxGain: currentAutoMaxGain,
+            minShutter: currentAutoMinShutter,
+            maxShutter: currentAutoMaxShutter,
+            exposureCompensation: currentExposureCompensation,
+          },
+          manual: {
+            fixShutter: currentManualFixShutter,
+            fixGain: currentManualFixGain,
+            fixIris: currentManualFixIris,
+          },
+          shutterPriority: {
+            fixShutter: currentShutterPriorityFixShutter,
+            maxGain: currentShutterPriorityMaxGain,
+            exposureCompensation: currentShutterPriorityExposureCompensation,
+          },
+        },
+      });
+    }
+  }, [cameraControllerQuery.data]);

  return <CameraSettingsContext.Provider value={{ state, dispatch }}>{children}</CameraSettingsContext.Provider>;
 };
--- a/src/app/reducers/cameraSettingsReducer.ts
+++ b/src/app/reducers/cameraSettingsReducer.ts
@@ -1,12 +1,35 @@
 import type { CameraSettings, CameraSettingsAction } from "../../utils/types";

 export const initialState: CameraSettings = {
+  cameraMode: 0,
  mode: 0,
  imageSize: { width: 1280, height: 960 },
+  cameraControls: {
+    cameraControlMode: "auto",
+    auto: { minShutter: "1/100", maxShutter: "1/1000", maxGain: "0dB", exposureCompensation: "EC:off" },
+    manual: { fixShutter: "1/100", fixGain: "0dB", fixIris: "F2.0" },
+    shutterPriority: { fixShutter: "1/100", maxGain: "0dB", exposureCompensation: "EC:off" },
+  },
+  regionPainter: {
+    brushSize: 1,
+    paintMode: "painter",
+    paintedCells: new Map(),
+    regions: [
+      { name: "Region 1", brushColour: "#FF0000" },
+      { name: "Region 2", brushColour: "#00FF00" },
+      { name: "Region 3", brushColour: "#0000FF" },
+    ],
+    selectedRegionIndex: 0,
+  },
 };

 export const cameraSettingsReducer = (state: CameraSettings, action: CameraSettingsAction) => {
  switch (action.type) {
+    case "SET_CAMERA_MODE":
+      return {
+        ...state,
+        cameraMode: action.payload,
+      };
    case "SET_MODE":
      return {
        ...state,
@@ -17,6 +40,47 @@ export const cameraSettingsReducer = (state: CameraSettings, action: CameraSetti
        ...state,
        imageSize: action.payload,
      };
+    case "SET_REGION_PAINTMODE":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          paintMode: action.payload,
+        },
+      };
+    case "SET_BRUSH_SIZE":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          brushSize: action.payload,
+        },
+      };
+
+    case "SET_SELECTED_REGION_INDEX":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          selectedRegionIndex: action.payload,
+        },
+      };
+
+    case "SET_CAMERA_CONTROLS":
+      return {
+        ...state,
+        cameraControls: action.payload,
+      };
+
+    case "RESET_REGION_PAINTER":
+      return {
+        ...state,
+        regionPainter: {
+          ...state.regionPainter,
+          paintedCells: new Map(),
+          paintMode: "painter",
+        },
+      };
    default:
      return state;
  }
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,20 @@
+import { capitalize } from "../../utils/utils";
+
+type BadgeProps = {
+  text: string;
+};
+
+const Badge = ({ text }: BadgeProps) => {
+  const lowerCaseWord = text.toLowerCase();
+  return (
+    <span
+      className={`text-sm font-medium inline-flex items-center px-2 py-0.5 rounded-md me-2 
+        border-2 space-x-2
+         ${text.toLowerCase() === "running" || text.toLowerCase() === "video-playing" || text.toLowerCase() === "camera-controller-ready" ? "bg-green-800 text-green-300 border-green-900" : "bg-red-800 text-red-300 border-red-900"} `}
+    >
+      <span>{capitalize(lowerCaseWord)}</span>
+    </span>
+  );
+};
+
+export default Badge;
--- a/src/components/ui/SliderComponent.tsx
+++ b/src/components/ui/SliderComponent.tsx
@@ -0,0 +1,19 @@
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+
+type SliderComponentProps = {
+  id: string;
+  onChange: (value: number | number[]) => void;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+const SliderComponent = ({ id, onChange, value = 0, min = 0, max = 100, step = 1 }: SliderComponentProps) => {
+  const handleChange = (val: number | number[]) => onChange(val);
+
+  return <Slider id={id} onChange={handleChange} value={value} min={min} max={max} step={step} />;
+};
+
+export default SliderComponent;
--- a/src/components/ui/StatusIndicator.tsx
+++ b/src/components/ui/StatusIndicator.tsx
@@ -0,0 +1,9 @@
+import clsx from "clsx";
+
+type StatusIndicatorProps = { status: string };
+
+const StatusIndicator = ({ status }: StatusIndicatorProps) => {
+  return <span className={clsx(`flex w-3 h-3 me-2 rounded-full`, status)}></span>;
+};
+
+export default StatusIndicator;
--- a/src/components/ui/TimeStampBadge.tsx
+++ b/src/components/ui/TimeStampBadge.tsx
@@ -0,0 +1,13 @@
+import { timeAgo } from "../../utils/utils";
+
+type TimeStampBadgeProps = {
+  timeStamp: number;
+};
+
+const TimeStampBadge = ({ timeStamp }: TimeStampBadgeProps) => {
+  const formattedTimeAgo = timeAgo(Number(timeStamp));
+
+  return <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{formattedTimeAgo}</span>;
+};
+
+export default TimeStampBadge;
--- a/src/features/dashboard/Dashboard.tsx
+++ b/src/features/dashboard/Dashboard.tsx
@@ -3,21 +3,29 @@ import SightingStack from "./components/sightingStack/SightingStack";
 import VideoFeed from "./components/videoFeed/VideoFeed";
 import { useSightingList } from "./hooks/useSightingList";
 import { useCameraSettingsContext } from "../../app/context/CameraSettingsContext";
+import SystemOverview from "./SystemOverview/SystemOverview";

 const Dashboard = () => {
-  const { sightingList, isLoading } = useSightingList();
+  const { sightingList, isLoading, totalSightings } = useSightingList();
  const { state: cameraSettings } = useCameraSettingsContext();
  const size = cameraSettings.imageSize;

  const mostRecent = sightingList[0];

  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-      <div>
+    <div className="flex flex-col">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
-        <PlateRead sighting={mostRecent} />
+        <SightingStack sightings={sightingList} />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-5 items-center">
+        <div className="col-span-1">
+          <PlateRead sighting={mostRecent} />
+        </div>
+        <div className="col-span-2">
+          <SystemOverview totalSightings={totalSightings} />
+        </div>
      </div>
-      <SightingStack sightings={sightingList} />
    </div>
  );
 };
--- a/src/features/dashboard/SystemOverview/PlatesProcessed.tsx
+++ b/src/features/dashboard/SystemOverview/PlatesProcessed.tsx
@@ -0,0 +1,41 @@
+import type { StoreData } from "../../../utils/types";
+
+type PlatesProcessedProps = {
+  platesProcessed: StoreData;
+};
+
+const PlatesProcessed = ({ platesProcessed }: PlatesProcessedProps) => {
+  const totalPending = platesProcessed?.totalPending || 0;
+  const totalActive = platesProcessed?.totalActive || 0;
+  const totalFailed = platesProcessed?.totalLost || 0;
+  const toastReceived = platesProcessed?.totalReceived || 0;
+
+  return (
+    <>
+      <div className="flex flex-row items-center border-b border-gray-500">
+        <h3 className="text-lg ">Reads</h3>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <h4 className="text-md">Total Active</h4>
+          <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-blue-500">{totalActive}</span>
+        </div>
+        <div>
+          <h4 className="text-md">Total Received</h4>
+          <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-green-500">{toastReceived}</span>
+        </div>
+        <div>
+          <h4 className="text-md">Total Pending</h4>
+          <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-amber-500">{totalPending}</span>
+        </div>
+
+        <div>
+          <h4 className="text-md">Total Failed</h4>
+          <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-red-500">{totalFailed}</span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PlatesProcessed;
--- a/src/features/dashboard/SystemOverview/SystemOverview.tsx
+++ b/src/features/dashboard/SystemOverview/SystemOverview.tsx
@@ -0,0 +1,47 @@
+import Card from "../../../components/ui/Card";
+import { useGetStore } from "../hooks/useGetStore";
+
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
+import PlatesProcessed from "./PlatesProcessed";
+import SystemStatusContent from "./SystemStatusContent";
+
+type SystemOverViewProps = {
+  totalSightings: number;
+};
+
+const SystemOverview = ({ totalSightings }: SystemOverViewProps) => {
+  const { systemHealthQuery } = useGetSystemHealth();
+  const { storeQuery } = useGetStore();
+
+  const platesProcessed = storeQuery?.data || {};
+  const upTime = systemHealthQuery?.data?.UptimeHumane || 0;
+  const startTime = systemHealthQuery?.data?.StartTimeHumane || "";
+  const cameraStatus = systemHealthQuery?.data?.Status || [];
+  const isError = systemHealthQuery?.isError || false;
+
+  if (systemHealthQuery.isLoading) {
+    return <div>Loading system overview...</div>;
+  }
+  return (
+    <Card className="p-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer ">
+          <SystemStatusContent status={cameraStatus} isError={isError} />
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
+          <h3 className="text-lg">Sightings</h3>
+          <p>{totalSightings}</p>
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
+          <PlatesProcessed platesProcessed={platesProcessed} />
+        </div>
+        <div className="p-4 border border-gray-600 rounded-lg hover:bg-[#233241] cursor-pointer">
+          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{upTime}</span>
+          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default SystemOverview;
--- a/src/features/dashboard/SystemOverview/SystemStatusContent.tsx
+++ b/src/features/dashboard/SystemOverview/SystemStatusContent.tsx
@@ -0,0 +1,62 @@
+import StatusIndicator from "../../../components/ui/StatusIndicator";
+import type { CameraStatus } from "../../../utils/types";
+import { useState } from "react";
+import SystemStatusModal from "./systemStatusModal/SystemStatusModal";
+
+type SystemStatusContentProps = {
+  status?: CameraStatus[];
+  isError: boolean;
+};
+
+const SystemStatusContent = ({ status, isError }: SystemStatusContentProps) => {
+  const [isSystemModalOpen, setIsSystemModalOpen] = useState(false);
+  const isAllCamerasOperational = status?.every((camera) => {
+    const allowedTags = ["RUNNING", "VIDEO-PLAYING", "CAMERA-CONTROLLER-READY"];
+    return camera.tags.every((tag) => allowedTags.includes(tag));
+  });
+  const openModal = () => setIsSystemModalOpen(true);
+
+  return (
+    <>
+      <div className="group w-full" onClick={openModal}>
+        <div className="flex flex-row items-center border-b border-gray-500">
+          {isError ? (
+            <StatusIndicator status="bg-red-500" />
+          ) : isAllCamerasOperational ? (
+            <StatusIndicator status="bg-green-500" />
+          ) : (
+            <StatusIndicator status="bg-yellow-500" />
+          )}
+          <h3 className="text-lg ">System Status</h3>
+        </div>
+
+        {isError ? (
+          <p className="text-red-500">Some systems are experiencing issues.</p>
+        ) : (
+          <>
+            {isAllCamerasOperational ? (
+              <p className="text-green-500">All systems are operational.</p>
+            ) : (
+              <p className="text-yellow-500">Some systems have issues.</p>
+            )}
+            {!isError && !isAllCamerasOperational && (
+              <span className="rounded-md cursor-pointer text-xs text-white opacity-0 shadow-md transition-opacity duration-100 group-hover:opacity-100">
+                Click to view more details.
+              </span>
+            )}
+          </>
+        )}
+      </div>
+
+      <SystemStatusModal
+        title={"System Status Details"}
+        isOpen={isSystemModalOpen}
+        close={() => setIsSystemModalOpen(false)}
+        status={status}
+        isError={isError}
+      />
+    </>
+  );
+};
+
+export default SystemStatusContent;
--- a/src/features/dashboard/SystemOverview/systemStatusModal/SystemStatusModal.tsx
+++ b/src/features/dashboard/SystemOverview/systemStatusModal/SystemStatusModal.tsx
@@ -0,0 +1,38 @@
+import CardHeader from "../../../../components/CardHeader";
+import Badge from "../../../../components/ui/Badge";
+import ModalComponent from "../../../../components/ui/ModalComponent";
+import type { CameraStatus } from "../../../../utils/types";
+
+type SystemStatusModalProps = {
+  title: string;
+  isOpen: boolean;
+  close: () => void;
+  status?: CameraStatus[];
+  isError: boolean;
+};
+
+const SystemStatusModal = ({ isOpen, close, status, title }: SystemStatusModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isOpen} close={close}>
+      <CardHeader title={title} />
+      <div className="p-4">
+        <ul>
+          {status?.map((camera) => (
+            <li key={camera.id}>
+              <div className="flex flex-row justify-between border border-gray-500 p-4 rounded-md mb-4">
+                <p>{camera.id}</p>
+                <div>
+                  {camera.tags.map((tag) => (
+                    <Badge key={tag} text={tag} />
+                  ))}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default SystemStatusModal;
--- a/src/features/dashboard/components/sightingStack/SightingItem.tsx
+++ b/src/features/dashboard/components/sightingStack/SightingItem.tsx
@@ -1,5 +1,6 @@
+import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
 import type { SightingType } from "../../../../utils/types";
-import { timeAgo } from "../../../../utils/utils";
+
 import NumberPlate from "../platePatch/NumberPlate";

 type SightingItemProps = {
@@ -9,7 +10,6 @@ type SightingItemProps = {

 const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
  const motion = sighting.motion.toLowerCase() === "away" ? true : false;
-  const timeStamp = timeAgo(sighting.timeStampMillis);

  return (
    <>
@@ -19,7 +19,7 @@ const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
      >
        <div>
          <div>
-            <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+            <TimeStampBadge timeStamp={sighting.timeStampMillis} />
          </div>
          <div className="text-xl">
            <span className="font-semibold text-gray-200">{sighting.vrm}</span>
--- a/src/features/dashboard/components/sightingStack/SightingStack.tsx
+++ b/src/features/dashboard/components/sightingStack/SightingStack.tsx
@@ -19,7 +19,7 @@ const SightingStack = ({ sightings }: SightingStackProps) => {

  return (
    <>
-      <Card className="p-4 w-full h-full">
+      <Card className="p-4 w-full h-[65vh] overflow-y-auto">
        <CardHeader title="Live Sightings" />
        <div className="md:h-[65%]">
          {sightings.map((sighting) => (
--- a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
+++ b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
@@ -51,9 +51,7 @@ const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
            </div>
          </div>
        </>
-      ) : (
-        <p className="text-gray-300">No sighting data available.</p>
-      )}
+      ) : null}
    </div>
  );
 };
--- a/src/features/dashboard/components/videoFeed/VideoFeed.tsx
+++ b/src/features/dashboard/components/videoFeed/VideoFeed.tsx
@@ -13,7 +13,6 @@ type VideoFeedProps = {
 };

 const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = false }: VideoFeedProps) => {
-  console.log(size);
  const { state: cameraSettings, dispatch } = useCameraSettingsContext();
  const contextMode = cameraSettings.mode;
  const [localMode, setLocalMode] = useState(0);
--- a/src/features/dashboard/hooks/useGetStore.ts
+++ b/src/features/dashboard/hooks/useGetStore.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+const fetchStore = 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: fetchStore,
+    refetchInterval: 5000,
+  });
+  return { storeQuery };
+};
--- a/src/features/dashboard/hooks/useGetSystemHealth.ts
+++ b/src/features/dashboard/hooks/useGetSystemHealth.ts
@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+
+const fetchSystemHealth = async () => {
+  const response = await fetch(`${cambase}/api/system-health`);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return response.json();
+};
+
+export const useGetSystemHealth = () => {
+  const systemHealthQuery = useQuery({
+    queryKey: ["systemHealth"],
+    queryFn: fetchSystemHealth,
+    refetchInterval: 60000,
+    refetchOnWindowFocus: false,
+    retry: false,
+    staleTime: 30000,
+  });
+
+  return { systemHealthQuery };
+};
--- a/src/features/dashboard/hooks/useSightingList.ts
+++ b/src/features/dashboard/hooks/useSightingList.ts
@@ -4,6 +4,7 @@ import type { SightingType } from "../../../utils/types";

 export const useSightingList = () => {
  const [sightingList, setSightingList] = useState<SightingType[]>([]);
+  const [totalSightings, setTotalSightings] = useState<number>(0);
  const { videoFeedQuery } = useVideoFeed();
  const latestSighting = videoFeedQuery?.data;
  const lastProcessedRef = useRef<number>(-1);
@@ -11,6 +12,8 @@ export const useSightingList = () => {

  useEffect(() => {
    if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setTotalSightings((prev) => (latestSighting.ref! > prev ? latestSighting.ref! : prev));

    if (latestSighting.ref !== lastProcessedRef.current) {
      lastProcessedRef.current = latestSighting.ref;
@@ -23,5 +26,5 @@ export const useSightingList = () => {
      });
    }
  }, [latestSighting, latestSighting?.ref]);
-  return { sightingList, isLoading };
+  return { sightingList, isLoading, totalSightings };
 };
--- a/src/features/setup/Setup.tsx
+++ b/src/features/setup/Setup.tsx
@@ -1,9 +1,15 @@
+import CameraSetup from "./components/cameraSetup/CameraSetup";
+import PlatePatchSetup from "./components/platePatch/PlatePatchSetup";
 import VideoFeedSetup from "./components/videofeed/VideoFeedSetup";

 const Setup = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-      <VideoFeedSetup />
+      <div>
+        <VideoFeedSetup />
+        <PlatePatchSetup />
+      </div>
+      <CameraSetup />
    </div>
  );
 };
--- a/src/features/setup/components/cameraControls/CameraControls.tsx
+++ b/src/features/setup/components/cameraControls/CameraControls.tsx
@@ -0,0 +1,389 @@
+import { Formik, Form, Field } from "formik";
+import type { CameraSettings, CameraSettingsAction } from "../../../../utils/types";
+import { useCameraController } from "../../hooks/useCameraControlConfig";
+
+type CameraControlProps = {
+  state: CameraSettings["cameraControls"];
+  dispatch: React.Dispatch<CameraSettingsAction>;
+};
+
+const CameraControls = ({ state, dispatch }: CameraControlProps) => {
+  const { cameraControllerMutation } = useCameraController();
+  console.log(state);
+  const initialValues = {
+    cameraMode: state.cameraControlMode,
+    auto: {
+      minShutter: state.auto.minShutter,
+      maxShutter: state.auto.maxShutter,
+      maxGain: state.auto.maxGain,
+      exposureCompensation: state.auto.exposureCompensation,
+    },
+    manual: {
+      fixShutter: state.manual.fixShutter,
+      fixGain: state.manual.fixGain,
+      fixIris: state.manual.fixIris,
+    },
+    shutterPriority: {
+      fixShutter: state.shutterPriority.fixShutter,
+      maxGain: state.shutterPriority.maxGain,
+      exposureCompensation: state.shutterPriority.exposureCompensation,
+    },
+  };
+
+  const handleSumbit = (values: {
+    cameraMode: string;
+    auto: typeof initialValues.auto;
+    manual: typeof initialValues.manual;
+    shutterPriority: typeof initialValues.shutterPriority;
+  }) => {
+    cameraControllerMutation.mutate({
+      cameraControlMode: values.cameraMode as "auto" | "manual" | "shutter priority",
+      auto: values.auto,
+      manual: values.manual,
+      shutterPriority: values.shutterPriority,
+    });
+    dispatch({
+      type: "SET_CAMERA_CONTROLS",
+      payload: {
+        cameraControlMode: values.cameraMode as "auto" | "manual" | "shutter priority",
+        auto: values.auto,
+        manual: values.manual,
+        shutterPriority: values.shutterPriority,
+      },
+    });
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSumbit} enableReinitialize>
+      {({ values }) => (
+        <Form className="flex flex-col gap-5 border border-gray-500 p-4 rounded-md mt-[2%]">
+          <h2 className="text-2xl mb-2">Controls</h2>
+          <div className="flex flex-row gap-1 md:gap-4">
+            <div>
+              <label
+                htmlFor="auto"
+                className={`p-4 border rounded-lg  mb-2 text-lg
+            ${values.cameraMode === "auto" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                Auto
+                <Field type="radio" id="auto" name="cameraMode" className="sr-only" value="auto" />
+              </label>
+            </div>
+            <div>
+              <label
+                htmlFor="manual"
+                className={`p-4 border rounded-lg  mb-2 text-lg
+            ${values.cameraMode === "manual" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                Manual
+                <Field type="radio" id="manual" name="cameraMode" className="sr-only" value="manual" />
+              </label>
+            </div>
+            <div>
+              <label
+                htmlFor="shutter priority"
+                className={`p-4 border rounded-lg  mb-2 text-lg
+            ${values.cameraMode === "shutter priority" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                Shutter Priority
+                <Field
+                  type="radio"
+                  id="shutter priority"
+                  name="cameraMode"
+                  className="sr-only"
+                  value="shutter priority"
+                />
+              </label>
+            </div>
+          </div>
+          {values.cameraMode === "auto" && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Shutter Speed</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.minShutter" className="text-lg mb-1">
+                      Min Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.minShutter"
+                      name="auto.minShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/100">1/100</option>
+                      <option value="1/120">1/120</option>
+                      <option value="1/250">1/250</option>
+                      <option value="1/500">1/500</option>
+                      <option value="1/1000">1/1000</option>
+                      <option value="1/2000">1/2000</option>
+                      <option value="1/5000">1/5000</option>
+                      <option value="1/10000">1/10000</option>
+                    </Field>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.maxShutter" className="text-lg mb-1">
+                      Max Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.maxShutter"
+                      name="auto.maxShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/500">1/500</option>
+                      <option value="1/1000">1/1000</option>
+                      <option value="1/2000">1/2000</option>
+                      <option value="1/5000">1/5000</option>
+                      <option value="1/10000">1/10000</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Gain</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.maxGain" className="text-lg mb-1">
+                      Max Gain:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.maxGain"
+                      name="auto.maxGain"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="0dB">0dB</option>
+                      <option value="2dB">2dB</option>
+                      <option value="4dB">4dB</option>
+                      <option value="6dB">6dB</option>
+
+                      <option value="10dB">10dB</option>
+                      <option value="12dB">12dB</option>
+                      <option value="16dB">16dB</option>
+                      <option value="18dB">18dB</option>
+                      <option value="20dB">20dB</option>
+                      <option value="24dB">24dB</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Exposure</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="auto.exposureCompensation" className="text-lg mb-1">
+                      Exposure Compensation:
+                    </label>
+                    <Field
+                      as="select"
+                      id="auto.exposureCompensation"
+                      name="auto.exposureCompensation"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="EC:off">EC:off</option>
+                      <option value="EC:0">EC:0</option>
+                      <option value="EC:1">EC:1</option>
+                      <option value="EC:2">EC:2</option>
+                      <option value="EC:3">EC:3</option>
+                      <option value="EC:4">EC:4</option>
+                      <option value="EC:5">EC:5</option>
+                      <option value="EC:6">EC:6</option>
+                      <option value="EC:7">EC:7</option>
+                      <option value="EC:8">EC:8</option>
+                      <option value="EC:9">EC:9</option>
+                      <option value="EC:10">EC:10</option>
+                      <option value="EC:11">EC:11</option>
+                      <option value="EC:12">EC:12</option>
+                      <option value="EC:13">EC:13</option>
+                      <option value="EC:14">EC:14</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {values.cameraMode === "manual" && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Shutter Speed</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="manual.fixShutter" className="text-lg mb-1">
+                      Fix Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="manual.fixShutter"
+                      name="manual.fixShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/100">1/100</option>
+                      <option value="1/120">1/120</option>
+                      <option value="1/250">1/250</option>
+                      <option value="1/500">1/500</option>
+                      <option value="1/1000">1/1000</option>
+                      <option value="1/2000">1/2000</option>
+                      <option value="1/5000">1/5000</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Gain</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="manual.fixGain" className="text-lg mb-1">
+                      Fix Gain:
+                    </label>
+                    <Field
+                      as="select"
+                      id="manual.fixGain"
+                      name="manual.fixGain"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="0dB">0dB</option>
+                      <option value="2dB">2dB</option>
+                      <option value="4dB">4dB</option>
+                      <option value="6dB">6dB</option>
+                      <option value="8dB">8dB</option>
+                      <option value="10dB">10dB</option>
+                      <option value="12dB">12dB</option>
+                      <option value="16dB">16dB</option>
+                      <option value="18dB">18dB</option>
+                      <option value="20dB">20dB</option>
+                      <option value="24dB">24dB</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Iris</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="manual.fixIris" className="text-lg mb-1">
+                      Fix Iris:
+                    </label>
+                    <Field
+                      as="select"
+                      id="manual.fixIris"
+                      name="manual.fixIris"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="F1.4">F1.4</option>
+                      <option value="F2.0">F2.0</option>
+                      <option value="F2.8">F2.8</option>
+                      <option value="F4.0">F4.0</option>
+                      <option value="F5.6">F5.6</option>
+                      <option value="F8.0">F8.0</option>
+                      <option value="F11.0">F11.0</option>
+                      <option value="F16.0">F16.0</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {values.cameraMode === "shutter priority" && (
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Shutter Speed</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="shutterPriority.fixShutter" className="text-lg mb-1">
+                      Fix Shutter:
+                    </label>
+                    <Field
+                      as="select"
+                      id="shutterPriority.fixShutter"
+                      name="shutterPriority.fixShutter"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="1/100">1/100</option>
+                      <option value="1/120">1/120</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Gain</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="shutterPriority.maxGain" className="text-lg mb-1">
+                      Max Gain:
+                    </label>
+                    <Field
+                      as="select"
+                      id="shutterPriority.maxGain"
+                      name="shutterPriority.maxGain"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="0dB">0dB</option>
+                      <option value="2dB">2dB</option>
+                      <option value="4dB">4dB</option>
+                      <option value="6dB">6dB</option>
+                      <option value="10dB">10dB</option>
+                      <option value="12dB">12dB</option>
+                      <option value="16dB">16dB</option>
+                      <option value="18dB">18dB</option>
+                      <option value="20dB">20dB</option>
+                      <option value="24dB">24dB</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
+                <h3 className="text-lg">Exposure</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
+                  <div className="flex flex-col gap-2">
+                    <label htmlFor="shutterPriority.exposureCompensation" className="text-lg mb-1">
+                      Exposure Compensation:
+                    </label>
+                    <Field
+                      as="select"
+                      id="shutterPriority.exposureCompensation"
+                      name="shutterPriority.exposureCompensation"
+                      className="p-2 border border-gray-600 rounded-md bg-[#253445]"
+                    >
+                      <option value="EC:off">EC:off</option>
+                      <option value="EC:0">EC:0</option>
+                      <option value="EC:1">EC:1</option>
+                      <option value="EC:2">EC:2</option>
+                      <option value="EC:3">EC:3</option>
+                      <option value="EC:4">EC:4</option>
+                      <option value="EC:5">EC:5</option>
+                      <option value="EC:6">EC:6</option>
+                      <option value="EC:7">EC:7</option>
+                      <option value="EC:8">EC:8</option>
+                      <option value="EC:9">EC:9</option>
+                      <option value="EC:10">EC:10</option>
+                      <option value="EC:11">EC:11</option>
+                      <option value="EC:12">EC:12</option>
+                      <option value="EC:13">EC:13</option>
+                      <option value="EC:14">EC:14</option>
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <button type="submit" className="p-3 rounded-md bg-green-700 hover:bg-green-900 cursor-pointer">
+            Save Settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default CameraControls;
--- a/src/features/setup/components/cameraSetup/CameraSetup.tsx
+++ b/src/features/setup/components/cameraSetup/CameraSetup.tsx
@@ -0,0 +1,44 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Card from "../../../../components/ui/Card";
+import CameraControls from "../cameraControls/CameraControls";
+import { useState } from "react";
+import Region from "../region/Region";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+
+const CameraSetup = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+  const { state, dispatch } = useCameraSettingsContext();
+  return (
+    <Card className="p-4">
+      <Tabs
+        selectedIndex={tabIndex}
+        onSelect={(index) => {
+          dispatch({ type: "SET_CAMERA_MODE", payload: index });
+          setTabIndex(index);
+        }}
+      >
+        <TabList>
+          <Tab>Camera</Tab>
+          <Tab>Target Detection</Tab>
+          <Tab>Crop</Tab>
+          <Tab>Advanced</Tab>
+        </TabList>
+        <TabPanel>
+          <CameraControls state={state.cameraControls} dispatch={dispatch} />
+        </TabPanel>
+        <TabPanel>
+          <Region state={state} />
+        </TabPanel>
+        <TabPanel>
+          <div>Crop</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Advanced</div>
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default CameraSetup;
--- a/src/features/setup/components/platePatch/PlateItem.tsx
+++ b/src/features/setup/components/platePatch/PlateItem.tsx
@@ -0,0 +1,12 @@
+import type { SightingType } from "../../../../utils/types";
+
+type PlateItemProps = {
+  sighting: SightingType;
+};
+
+const PlateItem = ({ sighting }: PlateItemProps) => {
+  console.log(sighting);
+  return <div>PlateItem</div>;
+};
+
+export default PlateItem;
--- a/src/features/setup/components/platePatch/PlatePatchSetup.tsx
+++ b/src/features/setup/components/platePatch/PlatePatchSetup.tsx
@@ -0,0 +1,41 @@
+import CardHeader from "../../../../components/CardHeader";
+import Card from "../../../../components/ui/Card";
+import { useSightingList } from "../../../dashboard/hooks/useSightingList";
+
+const PlatePatchSetup = () => {
+  const { sightingList, isLoading } = useSightingList();
+
+  if (isLoading) return <>Loading...</>;
+  return (
+    <Card className="p-4">
+      <CardHeader title="Plates" />
+      <div className="h-120 overflow-auto">
+        <table className="w-full text-left text-sm table-auto border-collapse border border-gray-500/50 rounded-md">
+          <thead className="bg-gray-700/50 text-gray-200 top-0">
+            <tr>
+              <th className="px-4 py-3 font-semibold">VRM</th>
+
+              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+              <th className="px-4 py-3 font-semibold">Seen</th>
+              <th className="px-4 py-3 font-semibold">Plate</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sightingList?.map((sighting, index) => (
+              <tr key={index} className="border-b border-gray-700/50 hover:bg-gray-700/20">
+                <td className="px-4 py-3 font-mono text-lg">{sighting.vrm}</td>
+                <td className="px-4 py-3 text-center">{sighting.seenCount}</td>
+                <td className="px-4 py-3">{sighting.timeStamp}</td>
+                <td className="px-4 py-3">
+                  <img src={sighting.plateUrlColour} alt="" width={100} height={100} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+};
+
+export default PlatePatchSetup;
--- a/src/features/setup/components/region/Region.tsx
+++ b/src/features/setup/components/region/Region.tsx
@@ -0,0 +1,184 @@
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+import SliderComponent from "../../../../components/ui/SliderComponent";
+import type { CameraSettings } from "../../../../utils/types";
+import { useTargetDetection } from "../../hooks/useTargetDetection";
+
+type RegionProps = {
+  state: CameraSettings;
+};
+
+const Region = ({ state }: RegionProps) => {
+  const { dispatch } = useCameraSettingsContext();
+  const { mutation } = useTargetDetection();
+  const paintMode = state.regionPainter.paintMode;
+  const regions = state.regionPainter.regions;
+  const brushSize = state.regionPainter.brushSize;
+  const paintedCells = state.regionPainter.paintedCells;
+
+  const handleChangePaintMode = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const mode = event.target.value as "painter" | "eraser";
+    dispatch({ type: "SET_REGION_PAINTMODE", payload: mode });
+  };
+
+  const handlePaintMode = (mode: "painter" | "eraser") => dispatch({ type: "SET_REGION_PAINTMODE", payload: mode });
+
+  const handleChangeRegion = (idx: number) => {
+    dispatch({ type: "SET_SELECTED_REGION_INDEX", payload: idx });
+  };
+
+  const handleSaveClick = () => {
+    const paintedRegions = [];
+    const paintedCellsArray = Array.from(paintedCells.entries());
+    const region1 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Region 1");
+    const region2 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Region 2");
+    const region3 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Region 3");
+
+    const region1Data = {
+      id: 1,
+      cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+
+    const region2Data = {
+      id: 2,
+      cells: region2.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+
+    const region3Data = {
+      id: 3,
+      cells: region3.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+
+    if (region1Data.cells.length > 0) {
+      paintedRegions.push(region1Data);
+    }
+
+    if (region2Data.cells.length > 0) {
+      paintedRegions.push(region2Data);
+    }
+
+    if (region3Data.cells.length > 0) {
+      paintedRegions.push(region3Data);
+    }
+    dispatch({ type: "SET_REGION_PAINTMODE", payload: "painter" });
+    mutation.mutate({ regions: paintedRegions });
+  };
+
+  const handleResetClick = () => {
+    paintedCells.clear();
+    dispatch({ type: "SET_REGION_PAINTMODE", payload: "painter" });
+    dispatch({ type: "RESET_REGION_PAINTER" });
+    mutation.mutate({ regions: [] });
+  };
+  return (
+    <div className="flex flex-col gap-4 mt-[2%]">
+      <div className="flex flex-col gap-4 md:flex-row">
+        <div className="border border-gray-600 p-2 rounded-lg w-full">
+          <h2 className="text-2xl mb-2">Tools</h2>
+          <div className="flex flex-col">
+            <label
+              htmlFor="paintMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${paintMode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                type="radio"
+                id="paintMode"
+                name="paintMode"
+                onChange={handleChangePaintMode}
+                checked={paintMode === "painter"}
+                value="painter"
+                className="sr-only"
+              />
+              <span className="text-xl">Paint Mode</span>
+            </label>
+            <label
+              htmlFor="eraseMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${paintMode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                type="radio"
+                id="eraseMode"
+                name="paintMode"
+                onChange={handleChangePaintMode}
+                checked={paintMode === "eraser"}
+                value="eraser"
+                className="sr-only"
+              />
+              <span className="text-xl">Eraser</span>
+            </label>
+
+            <div className="flex flex-col mt-4 border border-gray-600 rounded-lg p-4">
+              <span className="text-lg mb-2">
+                {paintMode === "painter" ? "Brush" : "Eraser"} Size: {brushSize}
+              </span>
+              <SliderComponent
+                id="brushSize"
+                onChange={(value) => dispatch({ type: "SET_BRUSH_SIZE", payload: value as number })}
+                value={brushSize}
+                min={1}
+                max={5}
+                step={1}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="border border-gray-600 p-2 rounded-lg w-full">
+          <h2 className="text-2xl mb-2">Regions (Lanes)</h2>
+          <div>
+            {regions.map((region, idx) => {
+              const inputID = `region-${idx}`;
+              return (
+                <div className="my-2 md:my-4">
+                  <label
+                    htmlFor={inputID}
+                    key={region.name}
+                    className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
+                  ${state.regionPainter.selectedRegionIndex === idx ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
+                  >
+                    <div className="flex flex-row gap-4 items-center">
+                      <input
+                        type="radio"
+                        id={inputID}
+                        checked={state.regionPainter.selectedRegionIndex === idx}
+                        name="region"
+                        className="sr-only"
+                        onChange={() => {
+                          handlePaintMode("painter");
+                          handleChangeRegion(idx);
+                        }}
+                      />
+                      <span className="text-lg">{region.name}</span>
+                      <div className="w-6 h-6 rounded mt-1" style={{ backgroundColor: region.brushColour }}></div>
+                    </div>
+                  </label>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div className="border border-gray-600 rounded-lg p-4 flex flex-col">
+        <h2 className="text-xl">Actions</h2>
+        <div className="flex flex-col justify-between w-full mt-4">
+          <button
+            className="p-2 rounded-lg bg-blue-500 text-white w-[40%] hover:bg-blue-800 cursor-pointer"
+            onClick={handleSaveClick}
+          >
+            Save
+          </button>
+          <button
+            className="p-2 rounded-lg bg-gray-500 text-white w-[40%] mt-2 hover:bg-gray-700 cursor-pointer"
+            onClick={handleResetClick}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Region;
--- a/src/features/setup/components/videofeed/VideoFeedSetup.tsx
+++ b/src/features/setup/components/videofeed/VideoFeedSetup.tsx
@@ -1,12 +1,33 @@
-import { Stage, Layer, Image } from "react-konva";
+import { Stage, Layer, Image, Shape } from "react-konva";
 import { useCreateVideoPreviewSnapshot } from "../../hooks/useCreatePreviewImage";
-import { useEffect, type RefObject } from "react";
+import { useEffect, useRef, type RefObject } from "react";
 import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
+import type { KonvaEventObject } from "konva/lib/Node";
+
+const BACKEND_WIDTH = 640;
+
+const BACKEND_CELL_SIZE = 16;
+
+const rows = 22.5;
+const cols = 40;
+const gap = 0;

 const VideoFeedSetup = () => {
-  const { latestBitmapRef, isLoading } = useCreateVideoPreviewSnapshot();
+  const { latestBitmapRef, isPreviewLoading } = useCreateVideoPreviewSnapshot();
+
  const { state, dispatch } = useCameraSettingsContext();
+  const cameraMode = state.cameraMode;
+  const paintedCells = state.regionPainter.paintedCells;
+  const paintMode = state.regionPainter.paintMode;
+  const brushSize = state.regionPainter.brushSize;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const paintLayerRef = useRef<any>(null);
  const size = state.imageSize;
+  const selectedRegionIndex = state.regionPainter.selectedRegionIndex;
+  const region = state.regionPainter.regions[selectedRegionIndex];
+
+  const currentScale = size.width / BACKEND_WIDTH;
+  const cellSize = BACKEND_CELL_SIZE * currentScale;

  const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
    if (!bmp || !bmp.current) {
@@ -17,6 +38,49 @@ const VideoFeedSetup = () => {
  };
  const image = draw(latestBitmapRef);

+  const paintCell = (x: number, y: number, brushSize: number) => {
+    const col = Math.floor(x / (cellSize + gap));
+    const row = Math.floor(y / (cellSize + gap));
+    const raduis = Math.floor(brushSize / 2);
+    if (row < 0 || row >= rows || col < 0 || col >= cols) return;
+
+    const activeRegion = region;
+    if (!activeRegion) return;
+
+    const currentColour = region.brushColour;
+
+    for (let r = row - raduis; r <= row + raduis; r++) {
+      for (let c = col - raduis; c <= col + raduis; c++) {
+        if (r < 0 || r >= rows || c < 0 || c >= cols) continue;
+        const key = `${r}-${c}`;
+        const map = paintedCells;
+        const existing = map.get(key);
+        if (paintMode === "eraser") {
+          if (map.has(key)) {
+            map.delete(key);
+            paintLayerRef.current?.batchDraw();
+          }
+          continue;
+        }
+        if (existing && existing.colour === currentColour) continue;
+        map.set(key, { colour: currentColour, region: activeRegion });
+      }
+    }
+    paintLayerRef.current?.batchDraw();
+  };
+
+  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
+    if (!(cameraMode === 1)) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) paintCell(pos.x, pos.y, brushSize);
+  };
+
+  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (!(cameraMode === 1)) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos && e.evt.buttons === 1) paintCell(pos.x, pos.y, brushSize);
+  };
+
  useEffect(() => {
    const updateSize = () => {
      const width = window.innerWidth * 0.48;
@@ -26,13 +90,41 @@ const VideoFeedSetup = () => {
    updateSize();
    window.addEventListener("resize", updateSize);
    return () => window.removeEventListener("resize", updateSize);
-  }, []);
+  }, [dispatch]);
+
+  if (isPreviewLoading) return <>Loading Preview...</>;

-  if (isLoading) return <>Loading...</>;
  return (
    <div className="mt-[1%]">
-      <Stage width={size.width} height={size.height}>
+      <Stage width={size.width} height={size.height} onMouseDown={handleStageMouseDown} onMouseMove={handleMouseMove}>
        <Layer>{image && <Image image={image} height={size.height} width={size.width} cornerRadius={10} />}</Layer>
+        <Layer ref={paintLayerRef} opacity={0.6}>
+          {cameraMode === 1 && (
+            <Shape
+              sceneFunc={(ctx, shape) => {
+                const cells = paintedCells;
+                if (!cells || cells.size === 0 || !paintLayerRef.current) return;
+                cells?.forEach((cell, key) => {
+                  const [rowStr, colStr] = key.split("-");
+                  const row = Number(rowStr);
+                  const col = Number(colStr);
+
+                  const x = col * (cellSize + gap);
+                  const y = row * (cellSize + gap);
+
+                  ctx.beginPath();
+                  ctx.rect(x, y, cellSize, cellSize);
+                  ctx.fillStyle = cell.colour;
+                  ctx.fill();
+                });
+
+                ctx.fillStrokeShape(shape);
+              }}
+              width={size.width}
+              height={size.height}
+            />
+          )}
+        </Layer>
      </Stage>
    </div>
  );
--- a/src/features/setup/hooks/useCameraControlConfig.ts
+++ b/src/features/setup/hooks/useCameraControlConfig.ts
@@ -0,0 +1,64 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { cambase } from "../../../app/config";
+import type { CameraSettings } from "../../../utils/types";
+
+const fetchCameraControllerConfig = async () => {
+  const response = await fetch(`${cambase}/api/fetch-config?id=Colour--camera-control-widget-config`);
+  if (!response.ok) throw new Error("Cannot reach camera controller endpoint");
+  return response.json();
+};
+
+const updateCameraControllerConfig = async (config: CameraSettings["cameraControls"]) => {
+  if (!config) return;
+  const fields = [];
+  if (config.cameraControlMode === "auto") {
+    fields.push(
+      { property: "propOperationMode", value: "Auto" },
+      { property: "propAutoModeMaxGain", value: config.auto.maxGain },
+      { property: "propAutoModeMinShutter", value: config.auto.minShutter },
+      { property: "propAutoModeMaxShutter", value: config.auto.maxShutter },
+      { property: "propAutoModeExposureCompensation", value: config.auto.exposureCompensation },
+    );
+  } else if (config.cameraControlMode === "manual") {
+    fields.push(
+      { property: "propOperationMode", value: "Manual" },
+      { property: "propManualModeShutter", value: config.manual.fixShutter },
+      { property: "propManualModeFixGain", value: config.manual.fixGain },
+      { property: "propManualModeFixIris", value: config.manual.fixIris },
+    );
+  } else if (config.cameraControlMode === "shutter priority") {
+    fields.push(
+      { property: "propOperationMode", value: "Shutter Priority" },
+      { property: "propShutterPriority", value: config.shutterPriority.fixShutter },
+      { property: "propShutterPriorityMaxGain", value: config.shutterPriority.maxGain },
+      { property: "propShutterPriorityExposureCompensation", value: config.shutterPriority.exposureCompensation },
+    );
+  }
+  const data = {
+    id: "Colour--camera-control-widget-config",
+    fields: fields,
+  };
+  const response = await fetch(`${cambase}/api/update-config`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+  if (!response.ok) throw new Error("Cannot reach camera controller endpoint");
+  return response.json();
+};
+
+export const useCameraController = () => {
+  const cameraControllerQuery = useQuery({
+    queryKey: ["getcameraConfig"],
+    queryFn: fetchCameraControllerConfig,
+  });
+
+  const cameraControllerMutation = useMutation({
+    mutationKey: ["updateCameraConfig"],
+    mutationFn: (config: CameraSettings["cameraControls"]) => updateCameraControllerConfig(config),
+  });
+
+  return { cameraControllerQuery, cameraControllerMutation };
+};
--- a/src/features/setup/hooks/useCreatePreviewImage.ts
+++ b/src/features/setup/hooks/useCreatePreviewImage.ts
@@ -1,18 +1,28 @@
 import { useEffect, useRef } from "react";
 import { useVideoPreview } from "./useVideoPreview";
+import { useCameraSettingsContext } from "../../../app/context/CameraSettingsContext";

 export const useCreateVideoPreviewSnapshot = () => {
-  const { videoPreviewQuery } = useVideoPreview();
+  const { state } = useCameraSettingsContext();
+  const { videoPreviewQuery, targetDetectionFeedQuery } = useVideoPreview(state.cameraMode);
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const isLoading = videoPreviewQuery?.isPending;
-  const imageBlob = videoPreviewQuery?.data;
+  const isPreviewLoading = videoPreviewQuery?.isPending;
+  const isTargetDetectionLoading = targetDetectionFeedQuery?.isPending;

+  let snapshot;
+  if (state.cameraMode === 0) {
+    snapshot = videoPreviewQuery?.data;
+  } else if (state.cameraMode === 1) {
+    snapshot = targetDetectionFeedQuery?.data;
+  }
+  const imageBlob = snapshot;
  useEffect(() => {
    async function createImageBitmapFromBlob() {
      if (!imageBlob) return;

      try {
        const bitmap = await createImageBitmap(imageBlob);
+
        latestBitmapRef.current = bitmap;
      } catch (error) {
        console.log(error);
@@ -21,5 +31,10 @@ export const useCreateVideoPreviewSnapshot = () => {
    createImageBitmapFromBlob();
  }, [imageBlob]);

-  return { latestBitmapRef, isLoading, imageURL: imageBlob ? URL.createObjectURL(imageBlob) : null };
+  return {
+    latestBitmapRef,
+    isPreviewLoading,
+    isTargetDetectionLoading,
+    imageURL: imageBlob ? URL.createObjectURL(imageBlob) : null,
+  };
 };
--- a/src/features/setup/hooks/useTargetDetection.ts
+++ b/src/features/setup/hooks/useTargetDetection.ts
@@ -0,0 +1,30 @@
+import { useMutation } from "@tanstack/react-query";
+import type { ColourDetectionPayload } from "../../../utils/types";
+import { cambase } from "../../../app/config";
+
+const sendTargetDetectionData = async (regionData: ColourDetectionPayload) => {
+  const regions = {
+    regions: regionData.regions,
+  };
+  const response = await fetch(`${cambase}/TargetDetectionColour-region-update`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(regions),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to send target detection data");
+  }
+  return response.json();
+};
+
+export const useTargetDetection = () => {
+  const mutation = useMutation({
+    mutationKey: ["colour detection"],
+    mutationFn: (regionData: ColourDetectionPayload) => sendTargetDetectionData(regionData),
+  });
+
+  return { mutation };
+};
--- a/src/features/setup/hooks/useVideoPreview.ts
+++ b/src/features/setup/hooks/useVideoPreview.ts
@@ -9,11 +9,27 @@ const fetchVideoPreview = async () => {
  return response.blob();
 };

-export const useVideoPreview = () => {
+const fetchTargetDectionFeed = async () => {
+  const response = await fetch(`${cambase}/TargetDetectionColour-preview`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch target detection feed");
+  }
+  return response.blob();
+};
+
+export const useVideoPreview = (mode: number) => {
  const videoPreviewQuery = useQuery({
    queryKey: ["videoPreview"],
    queryFn: fetchVideoPreview,
    refetchInterval: 100,
+    enabled: mode === 0,
  });
-  return { videoPreviewQuery };
+
+  const targetDetectionFeedQuery = useQuery({
+    queryKey: ["targetDetectionFeed"],
+    queryFn: fetchTargetDectionFeed,
+    refetchInterval: 100,
+    enabled: mode === 1,
+  });
+  return { videoPreviewQuery, targetDetectionFeedQuery };
 };
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -52,9 +52,46 @@ export type NpedJSON = {
  "INSURANCE STATUS": string;
 };

+export type Region = {
+  name: string;
+  brushColour: string;
+};
+
+export type PaintedCell = {
+  colour: string;
+  region: Region;
+};
+
 export type CameraSettings = {
+  cameraMode: number;
  mode: number;
  imageSize: { width: number; height: number };
+  cameraControls: {
+    cameraControlMode: "auto" | "manual" | "shutter priority";
+    auto: {
+      minShutter: string;
+      maxShutter: string;
+      maxGain: string;
+      exposureCompensation: string;
+    };
+    manual: {
+      fixShutter: string;
+      fixGain: string;
+      fixIris: string;
+    };
+    shutterPriority: {
+      fixShutter: string;
+      maxGain: string;
+      exposureCompensation: string;
+    };
+  };
+  regionPainter: {
+    brushSize: number;
+    paintMode: "painter" | "eraser";
+    paintedCells: Map<string, PaintedCell>;
+    regions: Region[];
+    selectedRegionIndex: number;
+  };
 };
 export type CameraSettingsAction =
  | {
@@ -64,4 +101,55 @@ export type CameraSettingsAction =
  | {
      type: "SET_IMAGE_SIZE";
      payload: { width: number; height: number };
+    }
+  | {
+      type: "SET_CAMERA_MODE";
+      payload: number;
+    }
+  | {
+      type: "SET_REGION_PAINTMODE";
+      payload: "painter" | "eraser";
+    }
+  | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
+  | {
+      type: "SET_CAMERA_CONTROLS";
+      payload: CameraSettings["cameraControls"];
+    }
+  | {
+      type: "SET_BRUSH_SIZE";
+      payload: number;
+    }
+  | {
+      type: "RESET_REGION_PAINTER";
    };
+
+export type CameraStatus = {
+  id: string;
+  groupID: string;
+  tags: string[];
+};
+
+export type SystemHealth = {
+  UptimeHumane: string;
+  StartTimeHumane: string;
+  Status: CameraStatus[];
+};
+
+export type StoreData = {
+  totalPending: number;
+  totalActive: number;
+  totalSent: number;
+  totalReceived: number;
+  totalLost: number;
+  sanityCheck: boolean;
+  sanityCheckFormula: string;
+};
+
+export type ColourData = {
+  id: string | number;
+  cells: number[][];
+};
+
+export type ColourDetectionPayload = {
+  regions: ColourData[];
+};
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -11,7 +11,7 @@ export const timeAgo = (timestampmili: number | null) => {
  const diffMins = Math.floor(diffMs / 60000);
  if (diffMins < 60) {
    if (diffMins < 1) {
-      return "just now";
+      return "Just now";
    }
    return `${diffMins === 1 ? "1 minute" : diffMins + " minutes"} ago`;
  } else {
@@ -22,3 +22,7 @@ export const timeAgo = (timestampmili: number | null) => {
    return `${diffHours === 1 ? "1 hour" : diffHours + " hours"} ago`;
  }
 };
+
+export function capitalize(s?: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,7 +16,7 @@
  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz"
  integrity sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==

-"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.23.7", "@babel/core@^7.24.4", "@babel/core@^7.27.4", "@babel/core@^7.27.7", "@babel/core@^7.28.5":
+"@babel/core@^7.23.7", "@babel/core@^7.24.4", "@babel/core@^7.27.4", "@babel/core@^7.27.7", "@babel/core@^7.28.5":
  version "7.28.5"
  resolved "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz"
  integrity sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==
@@ -226,6 +226,11 @@
    "@babel/plugin-transform-modules-commonjs" "^7.27.1"
    "@babel/plugin-transform-typescript" "^7.28.5"

+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
+  integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
+
 "@babel/template@^7.27.2":
  version "7.27.2"
  resolved "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz"
@@ -256,6 +261,153 @@
    "@babel/helper-string-parser" "^7.27.1"
    "@babel/helper-validator-identifier" "^7.28.5"

+"@emnapi/core@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.7.1.tgz#3a79a02dbc84f45884a1806ebb98e5746bdfaac4"
+  integrity sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==
+  dependencies:
+    "@emnapi/wasi-threads" "1.1.0"
+    tslib "^2.4.0"
+
+"@emnapi/runtime@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.7.1.tgz#a73784e23f5d57287369c808197288b52276b791"
+  integrity sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==
+  dependencies:
+    tslib "^2.4.0"
+
+"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
+  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
+  dependencies:
+    tslib "^2.4.0"
+
+"@esbuild/aix-ppc64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz#521cbd968dcf362094034947f76fa1b18d2d403c"
+  integrity sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==
+
+"@esbuild/android-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz#61ea550962d8aa12a9b33194394e007657a6df57"
+  integrity sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==
+
+"@esbuild/android-arm@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.27.2.tgz#554887821e009dd6d853f972fde6c5143f1de142"
+  integrity sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==
+
+"@esbuild/android-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.27.2.tgz#a7ce9d0721825fc578f9292a76d9e53334480ba2"
+  integrity sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==
+
+"@esbuild/darwin-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz#2cb7659bd5d109803c593cfc414450d5430c8256"
+  integrity sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==
+
+"@esbuild/darwin-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz#e741fa6b1abb0cd0364126ba34ca17fd5e7bf509"
+  integrity sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==
+
+"@esbuild/freebsd-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz#2b64e7116865ca172d4ce034114c21f3c93e397c"
+  integrity sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==
+
+"@esbuild/freebsd-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz#e5252551e66f499e4934efb611812f3820e990bb"
+  integrity sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==
+
+"@esbuild/linux-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz#dc4acf235531cd6984f5d6c3b13dbfb7ddb303cb"
+  integrity sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==
+
+"@esbuild/linux-arm@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz#56a900e39240d7d5d1d273bc053daa295c92e322"
+  integrity sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==
+
+"@esbuild/linux-ia32@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz#d4a36d473360f6870efcd19d52bbfff59a2ed1cc"
+  integrity sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==
+
+"@esbuild/linux-loong64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz#fcf0ab8c3eaaf45891d0195d4961cb18b579716a"
+  integrity sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==
+
+"@esbuild/linux-mips64el@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz#598b67d34048bb7ee1901cb12e2a0a434c381c10"
+  integrity sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==
+
+"@esbuild/linux-ppc64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz#3846c5df6b2016dab9bc95dde26c40f11e43b4c0"
+  integrity sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==
+
+"@esbuild/linux-riscv64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz#173d4475b37c8d2c3e1707e068c174bb3f53d07d"
+  integrity sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==
+
+"@esbuild/linux-s390x@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz#f7a4790105edcab8a5a31df26fbfac1aa3dacfab"
+  integrity sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==
+
+"@esbuild/linux-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz#2ecc1284b1904aeb41e54c9ddc7fcd349b18f650"
+  integrity sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==
+
+"@esbuild/netbsd-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz#e2863c2cd1501845995cb11adf26f7fe4be527b0"
+  integrity sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==
+
+"@esbuild/netbsd-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz#93f7609e2885d1c0b5a1417885fba8d1fcc41272"
+  integrity sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==
+
+"@esbuild/openbsd-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz#a1985604a203cdc325fd47542e106fafd698f02e"
+  integrity sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==
+
+"@esbuild/openbsd-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz#8209e46c42f1ffbe6e4ef77a32e1f47d404ad42a"
+  integrity sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==
+
+"@esbuild/openharmony-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz#8fade4441893d9cc44cbd7dcf3776f508ab6fb2f"
+  integrity sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==
+
+"@esbuild/sunos-x64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz#980d4b9703a16f0f07016632424fc6d9a789dfc2"
+  integrity sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==
+
+"@esbuild/win32-arm64@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz#1c09a3633c949ead3d808ba37276883e71f6111a"
+  integrity sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==
+
+"@esbuild/win32-ia32@0.27.2":
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz#1b1e3a63ad4bef82200fef4e369e0fff7009eee5"
+  integrity sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==
+
 "@esbuild/win32-x64@0.27.2":
  version "0.27.2"
  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz"
@@ -311,7 +463,7 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

-"@eslint/js@^9.39.1", "@eslint/js@9.39.2":
+"@eslint/js@9.39.2", "@eslint/js@^9.39.1":
  version "9.39.2"
  resolved "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz"
  integrity sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==
@@ -334,7 +486,7 @@
  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz"
  integrity sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==

-"@fortawesome/fontawesome-svg-core@^7.1.0", "@fortawesome/fontawesome-svg-core@~6 || ~7":
+"@fortawesome/fontawesome-svg-core@^7.1.0":
  version "7.1.0"
  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz"
  integrity sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==
@@ -410,11 +562,120 @@
    "@jridgewell/resolve-uri" "^3.1.0"
    "@jridgewell/sourcemap-codec" "^1.4.14"

+"@napi-rs/wasm-runtime@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.0.tgz#c0180393d7862cff0d412e3e1a7c3bd5ea6d9b2f"
+  integrity sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@tybys/wasm-util" "^0.10.1"
+
 "@rolldown/pluginutils@1.0.0-beta.53":
  version "1.0.0-beta.53"
  resolved "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz"
  integrity sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==

+"@rollup/rollup-android-arm-eabi@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.5.tgz#3d12635170ef3d32aa9222b4fb92b5d5400f08e9"
+  integrity sha512-iDGS/h7D8t7tvZ1t6+WPK04KD0MwzLZrG0se1hzBjSi5fyxlsiggoJHwh18PCFNn7tG43OWb6pdZ6Y+rMlmyNQ==
+
+"@rollup/rollup-android-arm64@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.5.tgz#cd2a448be8fb337f6e5ca12a3053a407ac80766d"
+  integrity sha512-wrSAViWvZHBMMlWk6EJhvg8/rjxzyEhEdgfMMjREHEq11EtJ6IP6yfcCH57YAEca2Oe3FNCE9DSTgU70EIGmVw==
+
+"@rollup/rollup-darwin-arm64@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.5.tgz#651263a5eb362a3730f8d5df2a55d1dab8a6a720"
+  integrity sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==
+
+"@rollup/rollup-darwin-x64@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.5.tgz#76956ce183eb461a58735770b7bf3030a549ceea"
+  integrity sha512-YTbnsAaHo6VrAczISxgpTva8EkfQus0VPEVJCEaboHtZRIb6h6j0BNxRBOwnDciFTZLDPW5r+ZBmhL/+YpTZgA==
+
+"@rollup/rollup-freebsd-arm64@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.5.tgz#287448b57d619007b14d34ed35bf1bc4f41c023b"
+  integrity sha512-1T8eY2J8rKJWzaznV7zedfdhD1BqVs1iqILhmHDq/bqCUZsrMt+j8VCTHhP0vdfbHK3e1IQ7VYx3jlKqwlf+vw==
+
+"@rollup/rollup-freebsd-x64@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.5.tgz#e6dca813e189aa189dab821ea8807f48873b80f2"
+  integrity sha512-sHTiuXyBJApxRn+VFMaw1U+Qsz4kcNlxQ742snICYPrY+DDL8/ZbaC4DVIB7vgZmp3jiDaKA0WpBdP0aqPJoBQ==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.5.tgz#74045a96fa6c5b1b1269440a68d1496d34b1730a"
+  integrity sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==
+
+"@rollup/rollup-linux-arm-musleabihf@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.5.tgz#7d175bddc9acffc40431ee3fb9417136ccc499e1"
+  integrity sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==
+
+"@rollup/rollup-linux-arm64-gnu@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.5.tgz#228b0aec95b24f4080175b51396cd14cb275e38f"
+  integrity sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==
+
+"@rollup/rollup-linux-arm64-musl@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.5.tgz#079050e023fad9bbb95d1d36fcfad23eeb0e1caa"
+  integrity sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==
+
+"@rollup/rollup-linux-loong64-gnu@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.5.tgz#3849451858c4d5c8838b5e16ec339b8e49aaf68a"
+  integrity sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==
+
+"@rollup/rollup-linux-ppc64-gnu@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.5.tgz#10bdab69c660f6f7b48e23f17c42637aa1f9b29a"
+  integrity sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==
+
+"@rollup/rollup-linux-riscv64-gnu@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.5.tgz#c0e776c6193369ee16f8e9ebf6a6ec09828d603d"
+  integrity sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==
+
+"@rollup/rollup-linux-riscv64-musl@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.5.tgz#6fcfb9084822036b9e4ff66e5c8b472d77226fae"
+  integrity sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==
+
+"@rollup/rollup-linux-s390x-gnu@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.5.tgz#204bf1f758b65263adad3183d1ea7c9fc333e453"
+  integrity sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==
+
+"@rollup/rollup-linux-x64-gnu@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.5.tgz#704a927285c370b4481a77e5a6468ebc841f72ca"
+  integrity sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==
+
+"@rollup/rollup-linux-x64-musl@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.5.tgz#3a7ccf6239f7efc6745b95075cf855b137cd0b52"
+  integrity sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==
+
+"@rollup/rollup-openharmony-arm64@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.5.tgz#cb29644e4330b8d9aec0c594bf092222545db218"
+  integrity sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==
+
+"@rollup/rollup-win32-arm64-msvc@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.5.tgz#bae9daf924900b600f6a53c0659b12cb2f6c33e4"
+  integrity sha512-nggc/wPpNTgjGg75hu+Q/3i32R00Lq1B6N1DO7MCU340MRKL3WZJMjA9U4K4gzy3dkZPXm9E1Nc81FItBVGRlA==
+
+"@rollup/rollup-win32-ia32-msvc@4.53.5":
+  version "4.53.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.5.tgz#48002d2b9e4ab93049acd0d399c7aa7f7c5f363c"
+  integrity sha512-U/54pTbdQpPLBdEzCT6NBCFAfSZMvmjr0twhnD9f4EIvlm9wy3jjQ38yQj1AGznrNO65EWQMgm/QUjuIVrYF9w==
+
 "@rollup/rollup-win32-x64-gnu@4.53.5":
  version "4.53.5"
  resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.5.tgz"
@@ -438,6 +699,68 @@
    source-map-js "^1.2.1"
    tailwindcss "4.1.18"

+"@tailwindcss/oxide-android-arm64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz#79717f87e90135e5d3d23a3d3aecde4ca5595dd5"
+  integrity sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==
+
+"@tailwindcss/oxide-darwin-arm64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz#7fa47608d62d60e9eb020682249d20159667fbb0"
+  integrity sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==
+
+"@tailwindcss/oxide-darwin-x64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz#c05991c85aa2af47bf9d1f8172fe9e4636591e79"
+  integrity sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==
+
+"@tailwindcss/oxide-freebsd-x64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz#3d48e8d79fd08ece0e02af8e72d5059646be34d0"
+  integrity sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz#982ecd1a65180807ccfde67dc17c6897f2e50aa8"
+  integrity sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==
+
+"@tailwindcss/oxide-linux-arm64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz#df49357bc9737b2e9810ea950c1c0647ba6573c3"
+  integrity sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==
+
+"@tailwindcss/oxide-linux-arm64-musl@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz#b266c12822bf87883cf152615f8fffb8519d689c"
+  integrity sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==
+
+"@tailwindcss/oxide-linux-x64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz#5c737f13dd9529b25b314e6000ff54e05b3811da"
+  integrity sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==
+
+"@tailwindcss/oxide-linux-x64-musl@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz#3380e17f7be391f1ef924be9f0afe1f304fe3478"
+  integrity sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==
+
+"@tailwindcss/oxide-wasm32-wasi@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz#9464df0e28a499aab1c55e97682be37b3a656c88"
+  integrity sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@emnapi/wasi-threads" "^1.1.0"
+    "@napi-rs/wasm-runtime" "^1.1.0"
+    "@tybys/wasm-util" "^0.10.1"
+    tslib "^2.4.0"
+
+"@tailwindcss/oxide-win32-arm64-msvc@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz#bbcdd59c628811f6a0a4d5b09616967d8fb0c4d4"
+  integrity sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==
+
 "@tailwindcss/oxide-win32-x64-msvc@4.1.18":
  version "4.1.18"
  resolved "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz"
@@ -575,7 +898,7 @@
  dependencies:
    "@tanstack/router-plugin" "1.141.7"

-"@tanstack/store@^0.8.0", "@tanstack/store@0.8.0":
+"@tanstack/store@0.8.0", "@tanstack/store@^0.8.0":
  version "0.8.0"
  resolved "https://registry.npmjs.org/@tanstack/store/-/store-0.8.0.tgz"
  integrity sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==
@@ -585,6 +908,13 @@
  resolved "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.141.0.tgz"
  integrity sha512-CJrWtr6L9TVzEImm9S7dQINx+xJcYP/aDkIi6gnaWtIgbZs1pnzsE0yJc2noqXZ+yAOqLx3TBGpBEs9tS0P9/A==

+"@tybys/wasm-util@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
+  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
+  dependencies:
+    tslib "^2.4.0"
+
 "@types/babel__core@^7.20.5":
  version "7.20.5"
  resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz"
@@ -618,17 +948,24 @@
  dependencies:
    "@babel/types" "^7.28.2"

-"@types/estree@^1.0.6", "@types/estree@1.0.8":
+"@types/estree@1.0.8", "@types/estree@^1.0.6":
  version "1.0.8"
  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz"
  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==

+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz#306e3a3a73828522efa1341159da4846e7573a6c"
+  integrity sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json-schema@^7.0.15":
  version "7.0.15"
  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==

-"@types/node@^20.19.0 || >=22.12.0", "@types/node@^24.10.1":
+"@types/node@^24.10.1":
  version "24.10.4"
  resolved "https://registry.npmjs.org/@types/node/-/node-24.10.4.tgz"
  integrity sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==
@@ -657,7 +994,7 @@
  resolved "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.32.3.tgz"
  integrity sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==

-"@types/react@*", "@types/react@^19.2.0", "@types/react@^19.2.5":
+"@types/react@*", "@types/react@^19.2.5":
  version "19.2.7"
  resolved "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz"
  integrity sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==
@@ -678,7 +1015,7 @@
    natural-compare "^1.4.0"
    ts-api-utils "^2.1.0"

-"@typescript-eslint/parser@^8.50.0", "@typescript-eslint/parser@8.50.0":
+"@typescript-eslint/parser@8.50.0":
  version "8.50.0"
  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz"
  integrity sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==
@@ -706,7 +1043,7 @@
    "@typescript-eslint/types" "8.50.0"
    "@typescript-eslint/visitor-keys" "8.50.0"

-"@typescript-eslint/tsconfig-utils@^8.50.0", "@typescript-eslint/tsconfig-utils@8.50.0":
+"@typescript-eslint/tsconfig-utils@8.50.0", "@typescript-eslint/tsconfig-utils@^8.50.0":
  version "8.50.0"
  resolved "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.50.0.tgz"
  integrity sha512-vxd3G/ybKTSlm31MOA96gqvrRGv9RJ7LGtZCn2Vrc5htA0zCDvcMqUkifcjrWNNKXHUU3WCkYOzzVSFBd0wa2w==
@@ -722,7 +1059,7 @@
    debug "^4.3.4"
    ts-api-utils "^2.1.0"

-"@typescript-eslint/types@^8.50.0", "@typescript-eslint/types@8.50.0":
+"@typescript-eslint/types@8.50.0", "@typescript-eslint/types@^8.50.0":
  version "8.50.0"
  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.50.0.tgz"
  integrity sha512-iX1mgmGrXdANhhITbpp2QQM2fGehBse9LbTf0sidWK6yg/NE+uhV5dfU1g6EYPlcReYmkE9QLPq/2irKAmtS9w==
@@ -777,7 +1114,7 @@ acorn-jsx@^5.3.2:
  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==

-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.15.0:
+acorn@^8.15.0:
  version "8.15.0"
  resolved "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz"
  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
@@ -871,7 +1208,7 @@ braces@~3.0.2:
  dependencies:
    fill-range "^7.1.1"

-browserslist@^4.24.0, "browserslist@>= 4.21.0":
+browserslist@^4.24.0:
  version "4.28.1"
  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz"
  integrity sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==
@@ -915,7 +1252,12 @@ chokidar@^3.6.0:
  optionalDependencies:
    fsevents "~2.3.2"

-clsx@^2.1.1:
+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
+clsx@^2.0.0, clsx@^2.1.1:
  version "2.1.1"
  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -978,6 +1320,11 @@ deep-is@^0.1.3:
  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==

+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 detect-libc@^2.0.3:
  version "2.1.2"
  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz"
@@ -1077,7 +1424,7 @@ eslint-visitor-keys@^4.2.1:
  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz"
  integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==

-"eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^8.57.0 || ^9.0.0", eslint@^9.39.1, eslint@>=8.40:
+eslint@^9.39.1:
  version "9.39.2"
  resolved "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz"
  integrity sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==
@@ -1215,6 +1562,25 @@ flatted@^3.2.9:
  resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz"
  integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==

+formik@^2.4.9:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.9.tgz#7e5b81e9c9e215d0ce2ac8fed808cf7fba0cd204"
+  integrity sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
+fsevents@~2.3.2, fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 gensync@^1.0.0-beta.2:
  version "1.0.0-beta.2"
  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -1273,6 +1639,13 @@ hermes-parser@^0.25.1:
  dependencies:
    hermes-estree "0.25.1"

+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0:
  version "5.3.2"
  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
@@ -1337,7 +1710,7 @@ its-fine@^2.0.0:
  dependencies:
    "@types/react-reconciler" "^0.28.9"

-jiti@*, jiti@^2.6.1, jiti@>=1.21.0:
+jiti@^2.6.1:
  version "2.6.1"
  resolved "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz"
  integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
@@ -1386,7 +1759,7 @@ keyv@^4.5.4:
  dependencies:
    json-buffer "3.0.1"

-konva@^10.0.12, "konva@^8.0.1 || ^7.2.5 || ^9.0.0 || ^10.0.0":
+konva@^10.0.12:
  version "10.0.12"
  resolved "https://registry.npmjs.org/konva/-/konva-10.0.12.tgz"
  integrity sha512-DHmkeG5FbW6tLCkbMQTi1ihWycfzljrn0V7umUUuewxx7aoINcI71ksgBX9fTPNXhlsK4/JoMgKwI/iCde+BRw==
@@ -1399,12 +1772,62 @@ levn@^0.4.1:
    prelude-ls "^1.2.1"
    type-check "~0.4.0"

+lightningcss-android-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz#6966b7024d39c94994008b548b71ab360eb3a307"
+  integrity sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==
+
+lightningcss-darwin-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz#a5fa946d27c029e48c7ff929e6e724a7de46eb2c"
+  integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
+
+lightningcss-darwin-x64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz#5ce87e9cd7c4f2dcc1b713f5e8ee185c88d9b7cd"
+  integrity sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==
+
+lightningcss-freebsd-x64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz#6ae1d5e773c97961df5cff57b851807ef33692a5"
+  integrity sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==
+
+lightningcss-linux-arm-gnueabihf@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz#62c489610c0424151a6121fa99d77731536cdaeb"
+  integrity sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==
+
+lightningcss-linux-arm64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz#2a3661b56fe95a0cafae90be026fe0590d089298"
+  integrity sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==
+
+lightningcss-linux-arm64-musl@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz#d7ddd6b26959245e026bc1ad9eb6aa983aa90e6b"
+  integrity sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==
+
+lightningcss-linux-x64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz#5a89814c8e63213a5965c3d166dff83c36152b1a"
+  integrity sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==
+
+lightningcss-linux-x64-musl@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz#808c2e91ce0bf5d0af0e867c6152e5378c049728"
+  integrity sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==
+
+lightningcss-win32-arm64-msvc@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz#ab4a8a8a2e6a82a4531e8bbb6bf0ff161ee6625a"
+  integrity sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==
+
 lightningcss-win32-x64-msvc@1.30.2:
  version "1.30.2"
  resolved "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz"
  integrity sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==

-lightningcss@^1.21.0, lightningcss@1.30.2:
+lightningcss@1.30.2:
  version "1.30.2"
  resolved "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz"
  integrity sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==
@@ -1430,11 +1853,21 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.21:
+  version "4.17.22"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.22.tgz#eb7d123ec2470d69b911abe34f85cb694849b346"
+  integrity sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==
+
 lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==

+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.0.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -1553,17 +1986,12 @@ picocolors@^1.1.1:
  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==

-picomatch@^2.0.4:
+picomatch@^2.0.4, picomatch@^2.2.1:
  version "2.3.1"
  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

-picomatch@^2.2.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-
-"picomatch@^3 || ^4", picomatch@^4.0.3:
+picomatch@^4.0.3:
  version "4.0.3"
  resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz"
  integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
@@ -1587,7 +2015,7 @@ prettier@^3.5.0:
  resolved "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz"
  integrity sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==

-prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.7.2:
  version "15.8.1"
  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1601,18 +2029,45 @@ punycode@^2.1.0:
  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==

-"react-dom@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^19.2.0, "react-dom@>=18.0.0 || >=19.0.0":
+rc-slider@^11.1.9:
+  version "11.1.9"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
+  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.36.0"
+
+rc-util@^5.36.0:
+  version "5.44.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
+  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
+react-dom@^19.2.0:
  version "19.2.3"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz"
  integrity sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==
  dependencies:
    scheduler "^0.27.0"

-react-is@^16.13.1:
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-konva@^19.2.1:
  version "19.2.1"
  resolved "https://registry.npmjs.org/react-konva/-/react-konva-19.2.1.tgz"
@@ -1650,7 +2105,15 @@ react-refresh@^0.18.0:
  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz"
  integrity sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==

-"react@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18 || ^19", "react@^18.0.0 || ^19.0.0", react@^19.0.0, react@^19.2.0, react@^19.2.3, "react@>=18.0.0 || >=19.0.0":
+react-tabs@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-6.1.0.tgz#a1fc9d9b8db4c6e7bb327a1b6783bc51a1c457a1"
+  integrity sha512-6QtbTRDKM+jA/MZTTefvigNxo0zz+gnBTVFw2CFVvq+f2BuH0nF0vDLNClL045nuTAdOoK/IL1vTP0ZLX0DAyQ==
+  dependencies:
+    clsx "^2.0.0"
+    prop-types "^15.5.0"
+
+react@^19.2.0:
  version "19.2.3"
  resolved "https://registry.npmjs.org/react/-/react-19.2.3.tgz"
  integrity sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==
@@ -1714,7 +2177,7 @@ rollup@^4.43.0:
    "@rollup/rollup-win32-x64-msvc" "4.53.5"
    fsevents "~2.3.2"

-scheduler@^0.27.0, scheduler@0.27.0:
+scheduler@0.27.0, scheduler@^0.27.0:
  version "0.27.0"
  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz"
  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
@@ -1734,7 +2197,7 @@ seroval-plugins@^1.4.0:
  resolved "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.4.0.tgz"
  integrity sha512-zir1aWzoiax6pbBVjoYVd0O1QQXgIL3eVGBMsBsNmM8Ukq90yGaWlfx0AB9dTS8GPqrOrbXn79vmItCUP9U3BQ==

-seroval@^1.0, seroval@^1.4.0:
+seroval@^1.4.0:
  version "1.4.0"
  resolved "https://registry.npmjs.org/seroval/-/seroval-1.4.0.tgz"
  integrity sha512-BdrNXdzlofomLTiRnwJTSEAaGKyHHZkbMXIywOh7zlzp4uZnXErEwl9XZ+N1hJSNpeTtNxWvVwN0wUzAIQ4Hpg==
@@ -1778,7 +2241,7 @@ supports-color@^7.1.0:
  dependencies:
    has-flag "^4.0.0"

-tailwindcss@^4.1.18, tailwindcss@4.1.18:
+tailwindcss@4.1.18, tailwindcss@^4.1.18:
  version "4.1.18"
  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz"
  integrity sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==
@@ -1793,7 +2256,7 @@ tiny-invariant@^1.3.3:
  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz"
  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==

-tiny-warning@^1.0.3:
+tiny-warning@^1.0.2, tiny-warning@^1.0.3:
  version "1.0.3"
  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -1818,12 +2281,12 @@ ts-api-utils@^2.1.0:
  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz"
  integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==

-tslib@^2.0.1:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0:
  version "2.8.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==

-tsx@^4.19.2, tsx@^4.8.1:
+tsx@^4.19.2:
  version "4.21.0"
  resolved "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz"
  integrity sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==
@@ -1850,7 +2313,7 @@ typescript-eslint@^8.46.4:
    "@typescript-eslint/typescript-estree" "8.50.0"
    "@typescript-eslint/utils" "8.50.0"

-typescript@>=4.8.4, "typescript@>=4.8.4 <6.0.0", typescript@~5.9.3:
+typescript@~5.9.3:
  version "5.9.3"
  resolved "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz"
  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
@@ -1890,7 +2353,7 @@ use-sync-external-store@^1.6.0:
  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz"
  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==

-"vite@^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", "vite@^5.2.0 || ^6 || ^7", vite@^7.2.4, "vite@>=5.0.0 || >=6.0.0 || >=7.0.0":
+vite@^7.2.4:
  version "7.3.0"
  resolved "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz"
  integrity sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==
Author	SHA1	Message	Date
Toba Ojo	256330f892	- added functionality to push to backend - improved responsiveness - added reset functionality	2026-01-14 14:50:24 +00:00
Toba Ojo	1c24b726b0	- added functionality for brush and eraser size - added shutter priority option	2026-01-14 12:42:11 +00:00
Toba Ojo	bb4234d336	- Implemented camera control settings with auto/manual modes and integrate with CameraControls component	2026-01-13 14:46:10 +00:00
Toba Ojo	2ecc39317d	- Enhanced Dashboard and SystemOverview components with totalSightings prop - improved layout and loading states in VideoFeed and SightingStack components.	2026-01-12 15:38:01 +00:00
Toba Ojo	1555221825	- added region painting context and components - can switch to target detection on region select	2026-01-09 16:16:28 +00:00
Toba Ojo	58e9490a09	- starting to add regionPainter to CameraSettings - updated PlatePatchSetup component layout	2026-01-09 10:07:28 +00:00
TobaOjo	d0ca269f4d	Merge pull request 'feature/SystemsOverview' (#5 ) from feature/SystemsOverview into develop Reviewed-on: #5	2026-01-09 08:58:59 +00:00
Toba Ojo	8d44444c4d	- Refactored Dashboard layout - enhanced PlatesProcessed component display	2026-01-09 08:50:03 +00:00
Toba Ojo	97818ca8d9	- Add SystemOverview component and related hooks; - update Dashboard layout and introduce new UI components	2026-01-07 16:18:14 +00:00
Toba Ojo	a33fd976eb	- Added TimeStampBadge component and integrate camera and plate patch setup features - Implemented TimeStampBadge component to display time ago from a timestamp. - Created CameraControls component with Formik for form handling. - Developed CameraSetup component with tab navigation for camera settings. - Added PlateItem component to display individual sighting details. - Enhanced PlatePatchSetup component to list sightings with timestamp and plate information.	2026-01-05 11:00:35 +00:00