- improved magnification level text

- removed magnification level

src/app/config/wsconfig.ts

@@ -1,5 +1,10 @@
+import { CAMBASE_WS } from "../../utils/config";
+
 export const wsConfig = {
-  infoBar: "ws://100.115.125.56/websocket-infobar",
+  infoBar: `${CAMBASE_WS}/websocket-infobar`,
+  cameraFeedA: `${CAMBASE_WS}/websocket-CameraA-live-video`,
+  cameraFeedB: `${CAMBASE_WS}/websocket-CameraB-live-video`,
+  cameraFeedC: `${CAMBASE_WS}/websocket-CameraC-live-video`,
 };
 
 export type SocketKey = keyof typeof wsConfig;

src/app/context/WebSocketContext.ts

@@ -1,15 +1,25 @@
 import { createContext, useContext } from "react";
 import { ReadyState } from "react-use-websocket";
-import type { InfoBarData } from "../../types/types";
+import type { CameraZoomData, InfoBarData } from "../../types/types";
 
 type InfoSocketState = {
   data: InfoBarData | null;
   readyState: ReadyState;
   sendJson: (msg: unknown) => void;
+  send?: (msg: string) => void;
+};
+
+type CameraSocketState = {
+  data: CameraZoomData | null;
+  readyState: ReadyState;
+  send: (msg: string) => void;
 };
 
 export type WebSocketConextValue = {
   info: InfoSocketState;
+  cameraFeedA: CameraSocketState;
+  cameraFeedB: CameraSocketState;
+  cameraFeedC: CameraSocketState;
 };
 
 export const WebsocketContext = createContext<WebSocketConextValue | null>(null);
@@ -21,3 +31,6 @@ const useWebSocketContext = () => {
 };
 
 export const useInfoSocket = () => useWebSocketContext().info;
+export const useCameraFeedASocket = () => useWebSocketContext().cameraFeedA;
+export const useCameraFeedBSocket = () => useWebSocketContext().cameraFeedB;
+export const useCameraFeedCSocket = () => useWebSocketContext().cameraFeedC;

src/app/providers/CameraFeedProvider.tsx

@@ -42,7 +42,6 @@ export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
         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);

src/app/providers/WebSocketProvider.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocketContext";
 import useWebSocket from "react-use-websocket";
 import { wsConfig } from "../config/wsconfig";
-import type { InfoBarData } from "../../types/types";
+import type { CameraZoomData, InfoBarData } from "../../types/types";
 
 type WebSocketProviderProps = {
   children: ReactNode;
@@ -10,7 +10,11 @@ type WebSocketProviderProps = {
 
 export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
   const [systemData, setSystemData] = useState<InfoBarData | null>(null);
+  const [socketData, setSocketData] = useState<CameraZoomData | null>(null);
   const infoSocket = useWebSocket(wsConfig.infoBar, { share: true, shouldReconnect: () => true });
+  const cameraFeedASocket = useWebSocket(wsConfig.cameraFeedA, { share: true, shouldReconnect: () => true });
+  const cameraFeedBSocket = useWebSocket(wsConfig.cameraFeedB, { share: true, shouldReconnect: () => true });
+  const cameraFeedCSocket = useWebSocket(wsConfig.cameraFeedC, { share: true, shouldReconnect: () => true });
 
   useEffect(() => {
     async function parseData() {
@@ -19,9 +23,20 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         const data = JSON.parse(text);
         setSystemData(data);
       }
+      if (cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage) {
+        const message = cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage;
+        const data = await message?.data.text();
+        const parsedData: CameraZoomData = JSON.parse(data || "");
+        setSocketData(parsedData);
+      }
     }
     parseData();
-  }, [infoSocket.lastMessage]);
+  }, [
+    cameraFeedASocket.lastMessage,
+    cameraFeedBSocket.lastMessage,
+    cameraFeedCSocket.lastMessage,
+    infoSocket.lastMessage,
+  ]);
 
   const value = useMemo<WebSocketConextValue>(
     () => ({
@@ -30,8 +45,37 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         readyState: infoSocket.readyState,
         sendJson: infoSocket.sendJsonMessage,
       },
+      cameraFeedA: {
+        data: socketData,
+        readyState: cameraFeedASocket.readyState,
+
+        send: cameraFeedASocket.sendMessage,
+      },
+      cameraFeedB: {
+        data: socketData,
+        readyState: cameraFeedBSocket.readyState,
+
+        send: cameraFeedBSocket.sendMessage,
+      },
+      cameraFeedC: {
+        data: socketData,
+        readyState: cameraFeedCSocket.readyState,
+
+        send: cameraFeedCSocket.sendMessage,
+      },
     }),
-    [infoSocket.readyState, infoSocket.sendJsonMessage, systemData],
+    [
+      cameraFeedASocket.readyState,
+      cameraFeedASocket.sendMessage,
+      cameraFeedBSocket.readyState,
+      cameraFeedBSocket.sendMessage,
+      cameraFeedCSocket.readyState,
+      cameraFeedCSocket.sendMessage,
+      infoSocket.readyState,
+      infoSocket.sendJsonMessage,
+      socketData,
+      systemData,
+    ],
   );
 
   return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;

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

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"

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

@@ -4,6 +4,11 @@ import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext"
 import { useColourDectection } from "../../hooks/useColourDetection";
 import { useBlackBoard } from "../../../../hooks/useBlackBoard";
 import { toast } from "sonner";
+import {
+  useCameraFeedASocket,
+  useCameraFeedBSocket,
+  useCameraFeedCSocket,
+} from "../../../../app/context/WebSocketContext";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -28,6 +33,30 @@ const RegionSelector = ({
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
+  const cameraASocket = useCameraFeedASocket();
+  const cameraBSocket = useCameraFeedBSocket();
+  const cameraCSocket = useCameraFeedCSocket();
+
+  const getCurrentSocket = () => {
+    switch (cameraFeedID) {
+      case "A":
+        return cameraASocket;
+      case "B":
+        return cameraBSocket;
+      case "C":
+        return cameraCSocket;
+    }
+  };
+
+  const socket = getCurrentSocket();
+
+  const getMagnificationLevel = () => {
+    const test = socket.data;
+    if (!socket.data) return null;
+
+    if (!test || !test.magnificationLevel) return "0x";
+    return test?.magnificationLevel;
+  };
 
   const handleChange = (e: { target: { value: string } }) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
@@ -137,7 +166,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 +203,45 @@ const RegionSelector = ({
               />
               <span className="text-xl">Erase mode</span>
             </label>
+            <label
+              htmlFor="magnifyMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${mode === "magnify" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                id="magnifyMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "magnify"}
+                value="magnify"
+                className="sr-only"
+              />
+              <div className="flex flex-col space-y-3">
+                <span className="text-xl">Magnifier</span>
+                {mode === "magnify" && <small className={`text-gray-400 italic`}>Use mouse to magnify the image</small>}
+              </div>
+            </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">Digital Zoom mode</span>
+                <pre className="text-xs text-gray-400">{`current Zoom: ${getMagnificationLevel()}`}</pre>
+                {mode === "zoom" && <small className={`text-gray-400 italic`}>Click image to digitally zoom</small>}
+              </div>
+            </label>
           </div>
         </div>
 
@@ -226,22 +294,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">
+        <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 md:w-full hover:bg-blue-700 hover:cursor-pointer"
+              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 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 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>

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

@@ -29,7 +29,7 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
   };
 
   return (
-    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+    <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>

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

@@ -13,7 +13,8 @@ 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 ">
+      {/* 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>
   );
 };

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="border border-gray-600 rounded-lg m-2">
-      <div className="overflow-y-auto ">
+      {/* 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>
   );
 };

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

@@ -2,8 +2,14 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
-
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import {
+  useCameraFeedASocket,
+  useCameraFeedBSocket,
+  useCameraFeedCSocket,
+} from "../../../../app/context/WebSocketContext";
+import { ReadyState } from "react-use-websocket";
+import { toast } from "sonner";
 
 const BACKEND_WIDTH = 640;
 const BACKEND_HEIGHT = 360;
@@ -23,6 +29,11 @@ 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;
@@ -30,6 +41,45 @@ const VideoFeedGridPainter = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const paintLayerRef = useRef<any>(null);
 
+  const cameraASocket = useCameraFeedASocket();
+  const cameraBSocket = useCameraFeedBSocket();
+  const cameraCSocket = useCameraFeedCSocket();
+
+  const getCurrentSocket = () => {
+    switch (cameraFeedID) {
+      case "A":
+        return cameraASocket;
+      case "B":
+        return cameraBSocket;
+      case "C":
+        return cameraCSocket;
+    }
+  };
+
+  const handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: "A" | "B" | "C") => {
+    if (mode !== "zoom") return;
+    const socket = getCurrentSocket();
+    const stage = e.target.getStage();
+    const coords = stage?.getPointerPosition();
+    if (!coords || !socket) return;
+
+    const newX = coords.x / stageSize.width;
+    const newY = coords.y / stageSize.height;
+
+    // Check if WebSocket is connected
+    if (socket.readyState !== ReadyState.OPEN) {
+      toast.error(`Camera ${cameraFeedID} WebSocket is not connected`);
+      return;
+    }
+
+    try {
+      socket.send(`ZOOM=${newX.toFixed(2)},${newY.toFixed(2)}`);
+    } catch (error) {
+      console.error("WebSocket send error:", error);
+      toast.error(`Failed to send command to Camera ${cameraFeedID}`);
+    }
+  };
+
   const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
     if (!bmp || !bmp.current) {
       return null;
@@ -60,6 +110,7 @@ const VideoFeedGridPainter = () => {
         map.delete(key);
         paintLayerRef.current?.batchDraw();
       }
+
       return;
     }
 
@@ -71,14 +122,14 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex]) return;
+    if (!regions[selectedRegionIndex] || mode === "magnify" || 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 === "magnify") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -88,6 +139,38 @@ const VideoFeedGridPainter = () => {
     isDrawingRef.current = false;
   };
 
+  const handleMouseEnter = () => {
+    if (mode !== "magnify") 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,25 +195,39 @@ const VideoFeedGridPainter = () => {
 
   if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
   return (
-    <div
+    <div>
-      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
-        mode === "eraser" ? "hover:cursor-pointer" : ""
-      }`}
-    >
       <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
-          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
+          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"}
+            onClick={(e) => handleZoomClick(e, cameraFeedID)}
+          />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>
+          {mode === "painter" || mode === "eraser" ? (
             <Shape
               sceneFunc={(ctx, shape) => {
                 const cells = paintedCells;
@@ -154,6 +251,7 @@ const VideoFeedGridPainter = () => {
               width={stageSize.width}
               height={stageSize.height}
             />
+          ) : null}
         </Layer>
       </Stage>
     </div>

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 getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
-  const videoQuery = useQuery({
+  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 !== "magnify" && mode !== "zoom",
   });
 
-  return { videoQuery };
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoQuery", cameraFeedID, mode],
+    queryFn: () => getVideoFeed(cameraFeedID),
+    refetchInterval: 500,
+    enabled: mode === "magnify" || mode === "zoom",
+  });
+
+  return { targetDetectionQuery, videoFeedQuery };
 };

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;
+  let snapShot = targetDetectionQuery?.data;
-  const isloading = videoQuery.isPending;
+  const isloading = targetDetectionQuery.isPending;
+
+  const videoSnapShot = videoFeedQuery?.data;
+  const isVideoLoading = videoFeedQuery.isPending;
+
+  if ((isVideoLoading === false && videoSnapShot && mode === "magnify") || mode === "zoom") {
+    snapShot = videoSnapShot;
+  }
 
   useEffect(() => {
     async function createBitmap() {

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

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

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>

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}

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,10 +290,11 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                       </div>
                     );
                   })}
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <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" : ""}`}
+                      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}
                     >
                       Add Custom Field
@@ -304,6 +308,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                         Remove Custom Field
                       </button>
                     )}
+                  </div>
                 </>
               )}
             </FieldArray>

src/features/output/components/OSDFields.tsx

@@ -34,7 +34,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
               <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"
@@ -45,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"

src/features/settings/components/SystemConfig.tsx

@@ -65,8 +65,8 @@ const SystemConfig = () => {
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
       {({ values }) => (
-        <Form>
+        <Form className="flex flex-col space-y-4">
-          <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="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-col md:flex-row space-y-4 justify-between">
-          <div className="flex flex-row justify-between items-center mb-4">
             <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"
@@ -220,7 +219,7 @@ const SystemConfig = () => {
           </div>
           <button
             type="submit"
-            className="px-4 py-2 bg-green-700 text-white rounded-lg hover:bg-green-800 hover:cursor-pointer"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
             disabled={isLoading}
           >
             {isLoading ? "Saving..." : "Save Settings"}

src/types/types.ts

@@ -11,6 +11,10 @@ export type InfoBarData = {
   "thread-count": string;
 };
 
+export type CameraZoomData = {
+  magnificationLevel: string;
+};
+
 export type StatusIndicator = "neutral-quaternary" | "dark" | "info" | "success" | "warning" | "danger";
 export type Region = {
   name: string;

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">
+    <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={"/"}>
+          <Link to={"/"} onClick={() => setIsMenuOpen(false)}>
             <img src={Logo} alt="Logo" width={150} height={150} />
           </Link>
         </div>
-      <div className="flex gap-4 text-lg items-center">
+
+        <div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
+          <FontAwesomeIcon icon={faBars} />
+        </div>
+      </div>
+
+      <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>
   );
 };
 

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

src/utils/config.ts

@@ -1 +1,3 @@
 export const CAMBASE = import.meta.env.VITE_BASEURL;
+
+export const CAMBASE_WS = import.meta.env.VITE_BASE_WS;