- Enhanced responsiveness and layout adjustments across various components

Merge pull request 'Add zoom mode functionality and refactor video feed hooks' (#20 ) from feature/digitalZoom into develop
Reviewed-on: #20
2025-12-09 14:07:51 +00:00 · 2025-12-09 13:04:10 +00:00 · 2025-12-09 13:04:03 +00:00 · 2025-12-09 13:03:42 +00:00 · 2025-12-09 13:03:34 +00:00 · 2025-12-09 13:03:08 +00:00
27 changed files with 552 additions and 123 deletions
--- a/package.json
+++ b/package.json
@@ -21,13 +21,15 @@
    "clsx": "^2.1.1",
    "formik": "^2.4.9",
    "konva": "^10.0.11",
+    "rc-slider": "^11.1.9",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-konva": "^19.2.0",
    "react-modal": "^3.16.3",
    "react-tabs": "^6.1.0",
    "react-use-websocket": "3.0.0",
-    "sonner": "^2.0.7"
+    "sonner": "^2.0.7",
+    "use-debounce": "^10.0.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
--- a/src/app/providers/CameraFeedProvider.tsx
+++ b/src/app/providers/CameraFeedProvider.tsx
@@ -3,9 +3,14 @@ import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
 import { useBlackBoard } from "../../hooks/useBlackBoard";
 import type { CameraFeedState } from "../../types/types";
+import { useCameraZoom } from "../../features/cameras/hooks/useCameraZoom";

 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
  const { blackboardMutation } = useBlackBoard();
+  const { cameraZoomQuery: cameraZoomQueryA } = useCameraZoom("A");
+  const { cameraZoomQuery: cameraZoomQueryB } = useCameraZoom("B");
+  const { cameraZoomQuery: cameraZoomQueryC } = useCameraZoom("C");
+
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
@@ -29,5 +34,42 @@ export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
    fetchBlackBoardData();
  }, []);

+  useEffect(() => {
+    const fetchZoomLevels = async () => {
+      const [resultA, resultB, resultC] = await Promise.all([
+        cameraZoomQueryA.refetch(),
+        cameraZoomQueryB.refetch(),
+        cameraZoomQueryC.refetch(),
+      ]);
+
+      console.log(resultA?.data);
+      const zoomLevelAnumber = parseFloat(resultA.data?.propPhysCurrent?.value);
+      const zoomLevelBnumber = parseFloat(resultB.data?.propPhysCurrent?.value);
+      const zoomLevelCnumber = parseFloat(resultC.data?.propPhysCurrent?.value);
+
+      if (resultA.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "A", zoomLevel: zoomLevelAnumber },
+        });
+      }
+
+      if (resultB.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "B", zoomLevel: zoomLevelBnumber },
+        });
+      }
+
+      if (resultC.data) {
+        dispatch({
+          type: "SET_ZOOM_LEVEL",
+          payload: { cameraFeedID: "C", zoomLevel: zoomLevelCnumber },
+        });
+      }
+    };
+    fetchZoomLevels();
+  }, []);
+
  return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
 };
--- a/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -37,6 +37,11 @@ export const initialState: CameraFeedState = {
    B: "painter",
    C: "painter",
  },
+  zoomLevel: {
+    A: 1,
+    B: 1,
+    C: 1,
+  },
 };

 export function reducer(state: CameraFeedState, action: CameraFeedAction) {
@@ -106,7 +111,14 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
      return {
        ...initialState,
      };
-
+    case "SET_ZOOM_LEVEL":
+      return {
+        ...state,
+        zoomLevel: {
+          ...state.zoomLevel,
+          [action.payload.cameraFeedID]: action.payload.zoomLevel,
+        },
+      };
    default:
      return state;
  }
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -12,7 +12,7 @@ const CameraGrid = () => {

  return (
    <>
-      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
        <div className="col-span-2 flex flex-col gap-4">
          <div className="">
            <VideoFeedGridPainter />
--- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
@@ -2,6 +2,7 @@ import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
+import CameraControls from "./cameraControls/CameraControls";

 type CameraPanelProps = {
  tabIndex: number;
@@ -54,10 +55,7 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
        />
      </TabPanel>
      <TabPanel>
-        <div className="p-4">
-          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
-          <p>Controls for camera {cameraFeedID} will go here.</p>
-        </div>
+        <CameraControls cameraFeedID={cameraFeedID} />
      </TabPanel>
    </Tabs>
  );
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -19,7 +19,7 @@ const CameraSettings = ({
  setIsResetModalOpen,
 }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 w-full h-full max-h-screen">
+    <Card className="p-4 w-full h-full ">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -137,7 +137,7 @@ const RegionSelector = ({
  };

  return (
-    <div className="flex flex-col gap-4 max-h-[50%]">
+    <div className="flex flex-col gap-4 h-full overflow-y-auto mt-[5%]">
      <div className="flex flex-col md:flex-row gap-3">
        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
          <h2 className="text-2xl mb-2">Tools</h2>
@@ -174,6 +174,27 @@ const RegionSelector = ({
              />
              <span className="text-xl">Erase mode</span>
            </label>
+            <label
+              htmlFor="zoomMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${mode === "zoom" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                id="zoomMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "zoom"}
+                value="zoom"
+                className="sr-only"
+              />
+              <div className="flex flex-col space-y-3">
+                <span className="text-xl">Enlarge image</span>
+                {mode === "zoom" && (
+                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
+                )}
+              </div>
+            </label>
          </div>
        </div>

@@ -226,22 +247,25 @@ const RegionSelector = ({

      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
        <h2 className="text-2xl mb-2">Actions</h2>
-        <div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
-          <button
-            onClick={handleSaveclick}
-            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
-          >
-            Save Region
-          </button>
-          <button
-            onClick={handleResetRegion}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
-          >
-            Reset Region
-          </button>
+        <div className="flex flex-col gap-4 justify-center">
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={handleSaveclick}
+              className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full hover:bg-blue-700 hover:cursor-pointer"
+            >
+              Save Region
+            </button>
+            <button
+              onClick={handleResetRegion}
+              className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
+            >
+              Reset Region
+            </button>
+          </div>
+
          <button
            onClick={openResetModal}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
          >
            Reset All
          </button>
--- a/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
+++ b/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
@@ -0,0 +1,42 @@
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import SliderComponent from "../../../../../ui/SliderComponent";
+import { useCameraZoom } from "../../../hooks/useCameraZoom";
+import { useDebouncedCallback } from "use-debounce";
+
+type CameraControlsProps = {
+  cameraFeedID: "A" | "B" | "C";
+};
+
+const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
+
+  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
+  const debouncedMutation = useDebouncedCallback(async (value) => {
+    await cameraZoomMutation.mutateAsync({
+      cameraFeedID,
+      zoomLevel: value as number,
+    });
+  }, 1000);
+
+  const handleChange = (value: number | number[]) => {
+    const newZoom = value as number;
+    dispatch({
+      type: "SET_ZOOM_LEVEL",
+      payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
+    });
+    debouncedMutation(newZoom);
+  };
+
+  return (
+    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
+      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
+      <div className="w-[70%] ">
+        <label htmlFor="zoom">Zoom {zoomLevel} </label>
+        <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
+      </div>
+    </div>
+  );
+};
+
+export default CameraControls;
--- a/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
@@ -12,8 +12,9 @@ const SightingEntryTable = () => {

  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
-    <div className="border border-gray-600 rounded-lg  m-2">
-      <div className="overflow-y-auto ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
        <table className="w-full text-left text-sm">
          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
            <tr>
@@ -37,6 +38,35 @@ const SightingEntryTable = () => {
          </tbody>
        </table>
      </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
    </div>
  );
 };
--- a/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
@@ -12,8 +12,9 @@ const SightingExitTable = () => {

  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
-    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
-      <div className="overflow-y-auto ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
        <table className="w-full text-left text-sm">
          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
            <tr>
@@ -37,6 +38,35 @@ const SightingExitTable = () => {
          </tbody>
        </table>
      </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
    </div>
  );
 };
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -23,6 +23,10 @@ const VideoFeedGridPainter = () => {
  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
  const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
  const isDrawingRef = useRef(false);
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stageRef = useRef<any>(null);

  const currentScale = stageSize.width / BACKEND_WIDTH;
  const size = BACKEND_CELL_SIZE * currentScale;
@@ -71,14 +75,14 @@ const VideoFeedGridPainter = () => {
  };

  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex]) return;
+    if (!regions[selectedRegionIndex] || mode === "zoom") return;
    isDrawingRef.current = true;
    const pos = e.target.getStage()?.getPointerPosition();
    if (pos) paintCell(pos.x, pos.y);
  };

  const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
-    if (!isDrawingRef.current) return;
+    if (!isDrawingRef.current || mode === "zoom") return;
    if (!regions[selectedRegionIndex]) return;
    const pos = e.target.getStage()?.getPointerPosition();
    if (pos) paintCell(pos.x, pos.y);
@@ -88,6 +92,38 @@ const VideoFeedGridPainter = () => {
    isDrawingRef.current = false;
  };

+  const handleMouseEnter = () => {
+    if (mode !== "zoom") return;
+    setScale(2);
+  };
+  const handleMouseLeave = () => {
+    document.body.style.cursor = "default";
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (scale === 1) return;
+
+    const stage = e.target.getStage();
+    if (!stage) return;
+
+    const pointerPosition = stage.getPointerPosition();
+    if (!pointerPosition) return;
+
+    const newX = stageSize.width / 2 - pointerPosition.x * scale;
+    const newY = stageSize.height / 2 - pointerPosition.y * scale;
+
+    const maxX = 0;
+    const minX = stageSize.width - stageSize.width * scale;
+    const maxY = 0;
+    const minY = stageSize.height - stageSize.height * scale;
+
+    setPosition({
+      x: Math.max(minX, Math.min(maxX, newX)),
+      y: Math.max(minY, Math.min(maxY, newY)),
+    });
+  };
+
  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
@@ -112,48 +148,57 @@ const VideoFeedGridPainter = () => {

  if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
  return (
-    <div
-      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
-        mode === "eraser" ? "hover:cursor-pointer" : ""
-      }`}
-    >
+    <div>
      <Stage
+        ref={stageRef}
        width={stageSize.width}
        height={stageSize.height}
        onMouseDown={handleStageMouseDown}
        onMouseMove={handleStageMouseMove}
        onMouseUp={handleStageMouseUp}
        onMouseLeave={handleStageMouseUp}
-        className="max-w-[55%]"
+        className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+          mode === "eraser" ? "hover:cursor-pointer" : ""
+        }`}
      >
-        <Layer>
+        <Layer
+          scaleX={scale}
+          scaleY={scale}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
+          x={position.x}
+          y={position.y}
+        >
          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
        </Layer>

        <Layer ref={paintLayerRef} opacity={0.6}>
-          <Shape
-            sceneFunc={(ctx, shape) => {
-              const cells = paintedCells;
-              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);
+          {mode === "painter" || mode === "eraser" ? (
+            <Shape
+              sceneFunc={(ctx, shape) => {
+                const cells = paintedCells;
+                if (!cells || cells.size === 0 || !paintLayerRef.current) return;
+                cells?.forEach((cell, key) => {
+                  const [rowStr, colStr] = key.split("-");
+                  const row = Number(rowStr);
+                  const col = Number(colStr);

-                const x = col * (size + gap);
-                const y = row * (size + gap);
+                  const x = col * (size + gap);
+                  const y = row * (size + gap);

-                ctx.beginPath();
-                ctx.rect(x, y, size, size);
-                ctx.fillStyle = cell.colour;
-                ctx.fill();
-              });
+                  ctx.beginPath();
+                  ctx.rect(x, y, size, size);
+                  ctx.fillStyle = cell.colour;
+                  ctx.fill();
+                });

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

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

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

-  return { videoQuery };
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoQuery", cameraFeedID, mode],
+    queryFn: () => getVideoFeed(cameraFeedID),
+    refetchInterval: 500,
+    enabled: mode === "zoom",
+  });
+
+  return { targetDetectionQuery, videoFeedQuery };
 };
--- a/src/features/cameras/hooks/useGetvideoSnapshots.ts
+++ b/src/features/cameras/hooks/useGetvideoSnapshots.ts
@@ -5,11 +5,19 @@ import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";
 export const useCreateVideoSnapshot = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state?.cameraFeedID;
+  const mode = state.modeByCamera[cameraFeedID];
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed(cameraFeedID);
+  const { targetDetectionQuery, videoFeedQuery } = useGetVideoFeed(cameraFeedID, mode);

-  const snapShot = videoQuery?.data;
-  const isloading = videoQuery.isPending;
+  let snapShot = targetDetectionQuery?.data;
+  const isloading = targetDetectionQuery.isPending;
+
+  const videoSnapShot = videoFeedQuery?.data;
+  const isVideoLoading = videoFeedQuery.isPending;
+
+  if (isVideoLoading === false && videoSnapShot && mode === "zoom") {
+    snapShot = videoSnapShot;
+  }

  useEffect(() => {
    async function createBitmap() {
--- a/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
+++ b/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
@@ -21,7 +21,7 @@ const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
  return (
    <>
      <div
-        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
+        className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
        onClick={() => setIsOpen(true)}
      >
        <h3 className="text-lg flex flex-row items-center">
--- a/src/features/dashboard/components/systemHealth/SystemHealth.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealth.tsx
@@ -39,11 +39,11 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
  }
  return (
    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
-      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+      <div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>
--- a/src/features/output/components/BearerTypeFields.tsx
+++ b/src/features/output/components/BearerTypeFields.tsx
@@ -4,7 +4,7 @@ import type { FormTypes } from "../../../types/types";
 const BearerTypeFields = () => {
  useFormikContext<FormTypes>();
  return (
-    <div className="flex flex-row justify-between">
+    <div className="flex flex-col md:flex-row space-y-4  justify-between">
      <label htmlFor="format" className="text-xl">
        Format
      </label>
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -10,7 +10,7 @@ const ChannelCard = () => {
  const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
  const outputData = bearerQuery?.data;
  return (
-    <Card className="p-4 h-150 md:h-full">
+    <Card className="p-4 h-full">
      <CardHeader title={`Channel (${values?.format})`} />
      <ChannelFields
        errors={errors}
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -52,7 +52,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
    <div className="flex flex-col gap-4 p-4">
      {values.format.toLowerCase() !== "ftp" ? (
        <>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="backoffice" className="block mb-2 font-medium">
              Back Office URL
            </label>
@@ -64,7 +64,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="username" className="block mb-2 font-medium">
              Username
            </label>
@@ -76,7 +76,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="password">Password</label>
            <Field
              name={"password"}
@@ -86,7 +86,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
            <Field
              name={"readTimeoutSeconds"}
@@ -96,7 +96,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
            <Field
              name={"connectTimeoutSeconds"}
@@ -105,7 +105,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overviewQuality">Overview quality and scale</label>
            <Field
              name={"overviewQuality"}
@@ -118,7 +118,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              <option value={"LOW"}>Low</option>
            </Field>
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
            <Field
              name={"cropSizeFactor"}
@@ -138,7 +138,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                <h2 className="font-bold">{values.format} Constants</h2>
              </div>

-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="SCID">Source ID / Camera ID</label>
                <Field
                  name={"SCID"}
@@ -150,7 +150,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                  } rounded-lg w-full md:w-60`}
                />
              </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="timestampSource">Timestamp Source</label>
                <Field
                  name={"timestampSource"}
@@ -162,7 +162,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                  <option value={"LOCAL"}>Local</option>
                </Field>
              </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="GPSFormat">GPS Format</label>
                <Field
                  name={"GPSFormat"}
@@ -182,7 +182,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Constants</h2>
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="FFID">Feed ID / Force ID</label>
                  <Field
                    name={"FFID"}
@@ -194,7 +194,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="SCID">Source ID / Camera ID</label>
                  <Field
                    name={"SCID"}
@@ -206,7 +206,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="timestampSource">Timestamp Source</label>
                  <Field
                    name={"timestampSource"}
@@ -218,7 +218,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    <option value={"LOCAL"}>Local</option>
                  </Field>
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="GPSFormat">GPS Format</label>
                  <Field
                    name={"GPSFormat"}
@@ -235,7 +235,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
                  <Field
                    name={"LID1"}
@@ -247,7 +247,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
                  <Field
                    name={"LID2"}
@@ -272,7 +272,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                  {values?.customFields?.map((_, index) => {
                    // if (!field.value) return null;
                    return (
-                      <div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
+                      <div
+                        key={index}
+                        className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
+                      >
                        <Field
                          name={`customFields.${index}.label`}
                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
@@ -287,23 +290,25 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                      </div>
                    );
                  })}
-                  <button
-                    type="button"
-                    onClick={() => arrayHelpers.push({ label: "", value: "" })}
-                    className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
-                    disabled={values?.customFields && values?.customFields?.length >= 6}
-                  >
-                    Add Custom Field
-                  </button>
-                  {values?.customFields && values?.customFields?.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button
                      type="button"
-                      onClick={() => arrayHelpers.pop()}
-                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      onClick={() => arrayHelpers.push({ label: "", value: "" })}
+                      className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
+                      disabled={values?.customFields && values?.customFields?.length >= 6}
                    >
-                      Remove Custom Field
+                      Add Custom Field
                    </button>
-                  )}
+                    {values?.customFields && values?.customFields?.length > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => arrayHelpers.pop()}
+                        className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      >
+                        Remove Custom Field
+                      </button>
+                    )}
+                  </div>
                </>
              )}
            </FieldArray>
--- a/src/features/output/components/OSDFields.tsx
+++ b/src/features/output/components/OSDFields.tsx
@@ -29,13 +29,12 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
    <div>
      <div className="flex flex-col space-y-4">
        <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
-          <h2 className="text-2xl mb-4">OSD Options</h2>
          <div className="flex flex-col space-y-4">
            {includeKeys.map((key) => (
              <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
            ))}
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overlayPosition">Overlay Position</label>
            <Field
              as="select"
@@ -46,7 +45,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
              <option value="Bottom">Bottom</option>
            </Field>
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
            <Field
              as="select"
--- a/src/features/output/components/OSDOptionsCard.tsx
+++ b/src/features/output/components/OSDOptionsCard.tsx
@@ -1,6 +1,8 @@
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
 import OSDFields from "./OSDFields";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import "react-tabs/style/react-tabs.css";

 type OSDOptionsCardProps = {
  isOSDLoading: boolean;
@@ -10,7 +12,18 @@ const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
  return (
    <Card className="p-4 flex-1">
      <CardHeader title="OSD Payload Options" />
-      <OSDFields isOSDLoading={isOSDLoading} />
+      <Tabs>
+        <TabList>
+          <Tab>OSD Settings</Tab>
+          <Tab>payload Settings</Tab>
+        </TabList>
+        <TabPanel>
+          <OSDFields isOSDLoading={isOSDLoading} />
+        </TabPanel>
+        <TabPanel>
+          <div>payload settings</div>
+        </TabPanel>
+      </Tabs>
    </Card>
  );
 };
--- a/src/features/settings/components/SystemConfig.tsx
+++ b/src/features/settings/components/SystemConfig.tsx
@@ -65,8 +65,8 @@ const SystemConfig = () => {
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
      {({ values }) => (
-        <Form>
-          <div className="flex flex-row justify-between items-center mb-4">
+        <Form className="flex flex-col space-y-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="deviceName">Device Name</label>
            <Field
              name="deviceName"
@@ -76,7 +76,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="timeZone">Timezone</label>
            <Field
              name="timeZone"
@@ -91,7 +91,7 @@ const SystemConfig = () => {
              ))}
            </Field>
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="timeSource">Time Source</label>
            <Field
              name="timeSource"
@@ -106,8 +106,7 @@ const SystemConfig = () => {
              ))}
            </Field>
          </div>
-
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="SNTPServer">SNTP Server</label>
            <Field
              name="SNTPServer"
@@ -117,7 +116,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="SNTPInterval">SNTP Interval</label>
            <Field
              name="SNTPInterval"
@@ -127,7 +126,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="subnetMask">Subnet Mask</label>
            <Field
              name="subnetMask"
@@ -137,7 +136,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="ipAddress">IP Address</label>
            <Field
              name="ipAddress"
@@ -147,7 +146,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="gateway">Gateway</label>
            <Field
              name="gateway"
@@ -157,7 +156,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="primaryServer">Primary DNS Server</label>
            <Field
              name="primaryServer"
@@ -167,7 +166,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="secondaryServer">Secondary DNS Server</label>
            <Field
              name="secondaryServer"
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -143,6 +143,11 @@ export type CameraFeedState = {
  };

  tabIndex?: number;
+  zoomLevel: {
+    A: number;
+    B: number;
+    C: number;
+  };
 };

 export type CameraFeedAction =
@@ -177,6 +182,10 @@ export type CameraFeedAction =
    }
  | {
      type: "RESET_CAMERA_FEED";
+    }
+  | {
+      type: "SET_ZOOM_LEVEL";
+      payload: { cameraFeedID: "A" | "B" | "C"; zoomLevel: number };
    };

 export type DecodeReading = {
@@ -227,3 +236,5 @@ export type BlackBoardOptions = {
  path?: string;
  value?: object | string | number | (string | number)[] | null;
 };
+
+export type CameraZoomConfig = { cameraFeedID: string; zoomLevel: number };
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,15 +1,29 @@
+import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";

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

--- a/src/ui/ModalComponent.tsx
+++ b/src/ui/ModalComponent.tsx
@@ -23,6 +23,14 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
        },
      }}
    >
+      <div className="flex justify-end">
+        <button
+          onClick={close}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4"
+        >
+          Close
+        </button>
+      </div>
      {children}
    </Modal>
  );
--- a/src/ui/SliderComponent.tsx
+++ b/src/ui/SliderComponent.tsx
@@ -0,0 +1,24 @@
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
+
+type SliderComponentProps = {
+  id: string;
+  onChange: (value: number | number[]) => void;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+const SliderComponent = ({ id, onChange, value = 0, min = 0, max = 100, step = 1 }: SliderComponentProps) => {
+  const handleChange = (val: number | number[]) => {
+    onChange(val);
+  };
+  return (
+    <>
+      <Slider id={id} onChange={handleChange} value={value} min={min} max={max} step={step} />
+    </>
+  );
+};
+
+export default SliderComponent;
--- a/yarn.lock
+++ b/yarn.lock
@@ -226,6 +226,11 @@
    "@babel/plugin-transform-modules-commonjs" "^7.27.1"
    "@babel/plugin-transform-typescript" "^7.28.5"

+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.28.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
+  integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
+
 "@babel/template@^7.27.2":
  version "7.27.2"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
@@ -1314,6 +1319,11 @@ chokidar@^3.6.0:
  optionalDependencies:
    fsevents "~2.3.2"

+classnames@^2.2.5:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clsx@^2.0.0, clsx@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -2142,6 +2152,23 @@ queue-microtask@^1.2.2:
  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

+rc-slider@^11.1.9:
+  version "11.1.9"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
+  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.36.0"
+
+rc-util@^5.36.0:
+  version "5.44.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
+  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
 react-dom@^19.2.0:
  version "19.2.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
@@ -2159,6 +2186,11 @@ react-is@^16.13.1, react-is@^16.7.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-konva@^19.2.0:
  version "19.2.0"
  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-19.2.0.tgz#b4cc5d73cd6d642569e4df36a0139996c3dcf8e6"
@@ -2461,6 +2493,11 @@ uri-js@^4.2.2:
  dependencies:
    punycode "^2.1.0"

+use-debounce@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
+  integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
+
 use-sync-external-store@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
Author	SHA1	Message	Date
Toba Ojo	632962aeaf	- Enhanced responsiveness and layout adjustments across various components	2025-12-09 14:07:51 +00:00
TobaOjo	e6f4131c1e	Merge pull request 'Add zoom mode functionality and refactor video feed hooks' (#20 ) from feature/digitalZoom into develop Reviewed-on: #20	2025-12-09 13:04:10 +00:00
TobaOjo	06fe99b550	Merge branch 'develop' into feature/digitalZoom	2025-12-09 13:04:03 +00:00
TobaOjo	328c61cf98	Merge pull request '- implement camera zoom controls and state management' (#19 ) from feature/cameraControls-2 into develop Reviewed-on: #19	2025-12-09 13:03:42 +00:00
TobaOjo	a9f6c4a4ad	Merge branch 'develop' into feature/cameraControls-2	2025-12-09 13:03:34 +00:00
TobaOjo	59e09b7a8d	Merge pull request '- need endpoint for include and exclude' (#18 ) from feature/includeoption into develop Reviewed-on: #18	2025-12-09 13:03:08 +00:00
Toba Ojo	c6a336389b	Add zoom mode functionality and refactor video feed hooks - Implemented zoom mode in RegionSelector for digital zooming. - Updated VideoFeedGridPainter to handle zoom interactions. - Refactored useGetVideoFeed to support target detection and video feed queries based on mode. - Enhanced useCreateVideoSnapshot to manage snapshots during zoom mode.	2025-12-09 12:39:03 +00:00
Toba Ojo	b93b446614	- implement camera zoom controls and state management	2025-12-09 08:47:21 +00:00
Toba Ojo	a563a3c341	- need endpoint for include and exclude	2025-12-08 12:50:14 +00:00
TobaOjo	fa33b012cc	Merge pull request '- added reset all modal and integrate with camera settings' (#17 ) from feature/resetAll into develop Reviewed-on: #17	2025-12-08 11:50:14 +00:00