- removed console.log

- fixed issue for more extensive check into tags to be more accurate

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bayiq-ui",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

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/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;
+    console.log(test);
+    if (!test || !test.magnificationLevel) return "1x";
+    return test?.magnificationLevel;
+  };
 
   const handleChange = (e: { target: { value: string } }) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
@@ -79,12 +108,12 @@ const RegionSelector = ({
 
   const handleSaveclick = () => {
     const regions: ColourData[] = [];
-    const test = Array.from(paintedCells.entries());
+    const paintedCellsArray = Array.from(paintedCells.entries());
-    const region1 = test.filter(([, cell]) => cell.region.name === "Bay 1");
+    const region1 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 1");
-    const region2 = test.filter(([, cell]) => cell.region.name === "Bay 2");
+    const region2 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 2");
-    const region3 = test.filter(([, cell]) => cell.region.name === "Bay 3");
+    const region3 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 3");
-    const region4 = test.filter(([, cell]) => cell.region.name === "Bay 4");
+    const region4 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 4");
-    const region5 = test.filter(([, cell]) => cell.region.name === "Bay 5");
+    const region5 = paintedCellsArray.filter(([, cell]) => cell.region.name === "Bay 5");
     const region1Data = {
       id: 1,
       cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
@@ -123,7 +152,7 @@ const RegionSelector = ({
 
     colourMutation.mutate({ cameraFeedID, regions: regions });
 
-    // Convert Map to plain object for blackboard
+    // Convert map to plain object for blackboard
     const serializableState = {
       ...state,
       paintedCells: {
@@ -174,6 +203,25 @@ 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
@@ -189,10 +237,9 @@ const RegionSelector = ({
                 className="sr-only"
               />
               <div className="flex flex-col space-y-3">
-                <span className="text-xl">Enlarge image</span>
+                <span className="text-xl">Digital Zoom mode</span>
-                {mode === "zoom" && (
+                <pre className="text-xs text-gray-400">{`Current Zoom: ${getMagnificationLevel()}`}</pre>
-                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
+                {mode === "zoom" && <small className={`text-gray-400 italic`}>Click image to digitally zoom</small>}
-                )}
               </div>
             </label>
           </div>
@@ -235,10 +282,16 @@ const RegionSelector = ({
             })}
           </>
           <div className="flex flex-col gap-4  mt-4">
-            <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
+            <button
+              className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md hover:bg-blue-800 hover:cursor-pointer"
+              onClick={handleAddRegionClick}
+            >
               Add Bay
             </button>
-            <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
+            <button
+              className="border border-red-900 bg-red-700 px-4 py-1 rounded-md hover:bg-red-800 hover:cursor-pointer"
+              onClick={handleRemoveClick}
+            >
               Remove Bay
             </button>
           </div>

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

@@ -1,73 +1,96 @@
+import { useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import type { DecodeReading } from "../../../../types/types";
 import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
 
+import PlatePatchModal from "./platePatchModal/PlatePatchModal";
+
 const SightingEntryTable = () => {
   const { state } = useCameraFeedContext();
+  const [isPlatePatchModalOpen, setIsPlatePatchModalOpen] = useState(false);
+  const [currentPatch, setCurrentPatch] = useState<DecodeReading | null>(null);
   const cameraFeedID = state.cameraFeedID;
   const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
 
   const isLoading = entryQuery?.isFetching;
   const readings = entryQuery?.data?.decodes;
 
+  const handleRowClick = (reading: DecodeReading) => {
+    setCurrentPatch(reading);
+    setIsPlatePatchModalOpen(true);
+  };
+
   if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
   return (
-    <div className="border border-gray-600 rounded-lg m-2">
+    <>
-      {/* Desktop Table */}
+      <div className="border border-gray-600 rounded-lg m-2">
-      <div className="hidden md:block overflow-y-auto">
+        {/* Desktop Table */}
-        <table className="w-full text-left text-sm">
+        <div className="hidden md:block overflow-y-auto">
-          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+          <table className="w-full text-left text-sm">
-            <tr>
+            <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
-              <th className="px-4 py-3 font-semibold">VRM</th>
+              <tr>
-              <th className="px-4 py-3 font-semibold">Bay ID</th>
+                <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+                <th className="px-4 py-3 font-semibold">Bay ID</th>
-              <th className="px-4 py-3 font-semibold">First Seen</th>
+                <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
-              <th className="px-4 py-3 font-semibold">Last Seen</th>
+                <th className="px-4 py-3 font-semibold">First Seen</th>
-            </tr>
+                <th className="px-4 py-3 font-semibold">Last Seen</th>
-          </thead>
-          <tbody className="divide-y divide-gray-700">
-            {readings?.map((reading: DecodeReading) => (
-              <tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
-                <td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
-                <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
-                <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
-                <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
-                <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
               </tr>
-            ))}
+            </thead>
-          </tbody>
+            <tbody className="divide-y divide-gray-700">
-        </table>
+              {readings?.map((reading: DecodeReading) => (
-      </div>
+                <tr
+                  className="hover:bg-gray-800/30 transition-colors hover:cursor-pointer"
+                  key={reading?.id}
+                  onClick={() => handleRowClick(reading)}
+                >
+                  <td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
+                  <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
+                  <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
+                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
+                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
 
-      {/* Mobile Cards */}
+        {/* Mobile */}
-      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        <div className="md:hidden overflow-y-auto space-y-3 p-3">
-        {readings?.map((reading: DecodeReading) => (
+          {readings?.map((reading: DecodeReading) => (
-          <div
+            <div
-            key={reading?.id}
+              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"
+              className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
-          >
+              onClick={() => handleRowClick(reading)}
-            <div className="flex justify-between items-start">
+            >
-              <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
+              <div className="flex justify-between items-start">
-              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+                <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
-            </div>
+                <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
-            <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">
+              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">Seen Count:</span>
-                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</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>
       </div>
-    </div>
+      <PlatePatchModal
+        isPlatePatchModalOpen={isPlatePatchModalOpen}
+        handleClose={() => setIsPlatePatchModalOpen(false)}
+        currentPatch={currentPatch}
+        direction={"entry"}
+      />
+    </>
   );
 };
 

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

@@ -1,8 +1,12 @@
+import { useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import type { DecodeReading } from "../../../../types/types";
 import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
+import PlatePatchModal from "./platePatchModal/PlatePatchModal";
 
 const SightingExitTable = () => {
+  const [isPlatePatchModalOpen, setIsPlatePatchModalOpen] = useState(false);
+  const [currentPatch, setCurrentPatch] = useState<DecodeReading | null>(null);
   const { state } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
   const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
@@ -10,64 +14,82 @@ const SightingExitTable = () => {
   const isLoading = exitQuery?.isFetching;
   const readings = exitQuery?.data?.decodes;
 
+  const handleRowClick = (reading: DecodeReading) => {
+    setCurrentPatch(reading);
+    setIsPlatePatchModalOpen(true);
+  };
+
   if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
   return (
-    <div className="border border-gray-600 rounded-lg m-2">
+    <>
-      {/* Desktop Table */}
+      <div className="border border-gray-600 rounded-lg m-2">
-      <div className="hidden md:block overflow-y-auto">
+        {/* Desktop Table */}
-        <table className="w-full text-left text-sm">
+        <div className="hidden md:block overflow-y-auto">
-          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+          <table className="w-full text-left text-sm">
-            <tr>
+            <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
-              <th className="px-4 py-3 font-semibold">VRM</th>
+              <tr>
-              <th className="px-4 py-3 font-semibold">Bay ID</th>
+                <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+                <th className="px-4 py-3 font-semibold">Bay ID</th>
-              <th className="px-4 py-3 font-semibold">First Seen</th>
+                <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
-              <th className="px-4 py-3 font-semibold">Last Seen</th>
+                <th className="px-4 py-3 font-semibold">First Seen</th>
-            </tr>
+                <th className="px-4 py-3 font-semibold">Last Seen</th>
-          </thead>
-          <tbody className="divide-y divide-gray-700">
-            {readings?.map((reading: DecodeReading) => (
-              <tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
-                <td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
-                <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
-                <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
-                <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
-                <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
               </tr>
-            ))}
+            </thead>
-          </tbody>
+            <tbody className="divide-y divide-gray-700">
-        </table>
+              {readings?.map((reading: DecodeReading) => (
-      </div>
+                <tr
+                  className="hover:bg-gray-800/30 transition-colors hover:cursor-pointer"
+                  key={reading?.id}
+                  onClick={() => handleRowClick(reading)}
+                >
+                  <td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
+                  <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
+                  <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
+                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
+                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
 
-      {/* Mobile Cards */}
+        {/* Mobile Cards */}
-      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        <div className="md:hidden overflow-y-auto space-y-3 p-3">
-        {readings?.map((reading: DecodeReading) => (
+          {readings?.map((reading: DecodeReading) => (
-          <div
+            <div
-            key={reading?.id}
+              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"
+              className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
-          >
+              onClick={() => handleRowClick(reading)}
-            <div className="flex justify-between items-start">
+            >
-              <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
+              <div className="flex justify-between items-start">
-              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+                <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
-            </div>
+                <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
-            <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">
+              <div className="flex justify-between text-sm">
-                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">Seen Count:</span>
-                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</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>
       </div>
-    </div>
+      <PlatePatchModal
+        isPlatePatchModalOpen={isPlatePatchModalOpen}
+        handleClose={() => setIsPlatePatchModalOpen(false)}
+        currentPatch={currentPatch}
+        direction={"exit"}
+      />
+    </>
   );
 };
 

src/features/cameras/components/PlatePatch/platePatchModal/PlatePatchModal.tsx

@@ -0,0 +1,20 @@
+import type { DecodeReading } from "../../../../../types/types";
+import ModalComponent from "../../../../../ui/ModalComponent";
+import PlatePatchModalContent from "./PlatePatchModalContent";
+
+type PlatePatchModalProps = {
+  isPlatePatchModalOpen: boolean;
+  handleClose: () => void;
+  currentPatch: DecodeReading | null;
+  direction?: "entry" | "exit";
+};
+
+const PlatePatchModal = ({ isPlatePatchModalOpen, handleClose, currentPatch, direction }: PlatePatchModalProps) => {
+  return (
+    <ModalComponent isModalOpen={isPlatePatchModalOpen} close={handleClose}>
+      <PlatePatchModalContent currentPatch={currentPatch} direction={direction} />
+    </ModalComponent>
+  );
+};
+
+export default PlatePatchModal;

src/features/cameras/components/PlatePatch/platePatchModal/PlatePatchModalContent.tsx

@@ -0,0 +1,64 @@
+import type { DecodeReading } from "../../../../../types/types";
+
+type PlatePatchModalContentProps = {
+  currentPatch: DecodeReading | null;
+  direction?: "entry" | "exit";
+};
+
+const PlatePatchModalContent = ({ currentPatch, direction }: PlatePatchModalContentProps) => {
+  const imageSrc = `data:image/png;base64,${currentPatch?.plate || ""}`;
+  const imageUrl = currentPatch ? imageSrc : "";
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between border-b border-gray-600 pb-3">
+        <h2
+          className={`font-mono font-bold text-3xl tracking-wide
+          ${direction === "entry" ? "text-blue-400" : "text-red-400"}`}
+        >
+          {currentPatch?.vrm}
+        </h2>
+        <span
+          className={`px-3 py-1 rounded-full text-xs font-semibold uppercase
+          ${direction === "entry" ? "bg-blue-500/20 text-blue-400" : "bg-red-500/20 text-red-400"}`}
+        >
+          {direction === "entry" ? "Entry" : "Exit"}
+        </span>
+      </div>
+
+      <div className="border border-gray-600 rounded-2xl">
+        <div className="flex  bg-gray-800/50 rounded-lg p-4">
+          <img
+            src={imageUrl}
+            alt={`${direction === "entry" ? "Entry" : "Exit"} Image for ${currentPatch?.vrm || "N/A"}`}
+            className="rounded-lg border border-gray-600 max-w-full h-auto shadow-lg"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 bg-gray-800/30 rounded-lg p-4">
+          <div className="space-y-1">
+            <p className="text-gray-400 text-xs uppercase tracking-wider">Bay ID</p>
+            <p className="text-gray-200 font-semibold text-lg">{currentPatch?.laneID || "N/A"}</p>
+          </div>
+
+          <div className="space-y-1">
+            <p className="text-gray-400 text-xs uppercase tracking-wider">Seen Count</p>
+            <p className="text-gray-200 font-semibold text-lg">{currentPatch?.seenCount || "N/A"}</p>
+          </div>
+
+          <div className="space-y-1 col-span-2">
+            <p className="text-gray-400 text-xs uppercase tracking-wider">First Seen</p>
+            <p className="text-gray-300 text-sm">{currentPatch?.firstSeenTimeHumane || "N/A"}</p>
+          </div>
+
+          <div className="space-y-1 col-span-2">
+            <p className="text-gray-400 text-xs uppercase tracking-wider">Last Seen</p>
+            <p className="text-gray-300 text-sm">{currentPatch?.lastSeenTimeHumane || "N/A"}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlatePatchModalContent;

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;
@@ -25,14 +31,54 @@ const VideoFeedGridPainter = () => {
   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);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const paintLayerRef = useRef<any>(null);
+
   const currentScale = stageSize.width / BACKEND_WIDTH;
   const size = BACKEND_CELL_SIZE * currentScale;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const cameraASocket = useCameraFeedASocket();
-  const paintLayerRef = useRef<any>(null);
+  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) {
@@ -64,6 +110,7 @@ const VideoFeedGridPainter = () => {
         map.delete(key);
         paintLayerRef.current?.batchDraw();
       }
+
       return;
     }
 
@@ -75,14 +122,14 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex] || mode === "zoom") 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 || mode === "zoom") return;
+    if (!isDrawingRef.current || mode === "magnify") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -93,7 +140,7 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleMouseEnter = () => {
-    if (mode !== "zoom") return;
+    if (mode !== "magnify") return;
     setScale(2);
   };
   const handleMouseLeave = () => {
@@ -159,7 +206,7 @@ const VideoFeedGridPainter = () => {
         onMouseLeave={handleStageMouseUp}
         className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
           mode === "eraser" ? "hover:cursor-pointer" : ""
-        }`}
+        } ${mode === "zoom" ? "hover:cursor-zoom-in" : ""}`}
       >
         <Layer
           scaleX={scale}
@@ -170,7 +217,13 @@ const VideoFeedGridPainter = () => {
           x={position.x}
           y={position.y}
         >
-          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
+          <Image
+            image={image}
+            width={stageSize.width}
+            height={stageSize.height}
+            classname={"rounded-lg"}
+            onClick={(e) => handleZoomClick(e, cameraFeedID)}
+          />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -28,14 +28,14 @@ export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: stri
     queryKey: ["getfeed", cameraFeedID],
     queryFn: () => targetDectionFeed(cameraFeedID),
     refetchInterval: 500,
-    enabled: mode !== "zoom",
+    enabled: mode !== "magnify" && mode !== "zoom",
   });
 
   const videoFeedQuery = useQuery({
     queryKey: ["videoQuery", cameraFeedID, mode],
     queryFn: () => getVideoFeed(cameraFeedID),
     refetchInterval: 500,
-    enabled: mode === "zoom",
+    enabled: mode === "magnify" || mode === "zoom",
   });
 
   return { targetDetectionQuery, videoFeedQuery };

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -15,7 +15,7 @@ export const useCreateVideoSnapshot = () => {
   const videoSnapShot = videoFeedQuery?.data;
   const isVideoLoading = videoFeedQuery.isPending;
 
-  if (isVideoLoading === false && videoSnapShot && mode === "zoom") {
+  if ((isVideoLoading === false && videoSnapShot && mode === "magnify") || mode === "zoom") {
     snapShot = videoSnapShot;
   }
 
@@ -24,7 +24,11 @@ export const useCreateVideoSnapshot = () => {
       if (!snapShot) return;
 
       try {
-        const bitmap = await createImageBitmap(snapShot);
+        const bitmap = await createImageBitmap(snapShot, {
+          resizeWidth: 720,
+          resizeHeight: 1080,
+          resizeQuality: "high",
+        });
         if (!bitmap) return;
         latestBitmapRef.current = bitmap;
       } catch (error) {

src/features/dashboard/components/cameraStatus/CameraStatus.tsx

@@ -11,10 +11,14 @@ type CameraStatusProps = {
 };
 
 const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
-  const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
+  const isAllGood =
-  // check if some are down
+    category &&
-  // check if all are down
+    category.length > 0 &&
-  //check if offline
+    category.every((status) => {
+      const allowedTags = ["RUNNING", "VIDEO-PLAYING"];
+      return status.tags.every((tag) => allowedTags.includes(tag));
+    });
+
   return (
     <Card className="p-4">
       <div className="border-b border-gray-600">

src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx

@@ -10,7 +10,10 @@ type CameraStatusGridItemProps = {
 
 const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const isAllGood = statusCategory?.every((status) => status.tags.includes("RUNNING"));
+  const isAllGood = statusCategory?.every((status) => {
+    const allowedTags = ["RUNNING", "VIDEO-PLAYING"];
+    return status.tags.every((tag) => allowedTags.includes(tag));
+  });
 
   const handleClick = () => {
     setIsOpen(false);

src/features/settings/components/SystemConfig.tsx

@@ -219,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/hooks/useGetVersions.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../utils/config";
+
+const fetchVersions = async () => {
+  const response = await fetch(`${CAMBASE}/api/versions`);
+  if (!response.ok) throw new Error("Cannot get Versions");
+  return response.json();
+};
+
+export const useGetVersions = () => {
+  const versionsQuery = useQuery({
+    queryKey: ["getversions"],
+    queryFn: fetchVersions,
+  });
+
+  return { versionsQuery };
+};

src/main.tsx

@@ -6,7 +6,10 @@ import { AppProviders } from "./app/providers/AppProviders";
 import "./index.css";
 import Modal from "react-modal";
 
-const router = createRouter({ routeTree });
+const router = createRouter({
+  routeTree,
+  basepath: "/bayiq",
+});
 
 Modal.setAppElement("#root");
 

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;
@@ -198,6 +202,7 @@ export type DecodeReading = {
   duplicate?: true;
   firstSeenTimeHumane: string;
   lastSeenTimeHumane: string;
+  plate?: string;
 };
 
 export type ColourData = {
@@ -238,3 +243,16 @@ export type BlackBoardOptions = {
 };
 
 export type CameraZoomConfig = { cameraFeedID: string; zoomLevel: number };
+
+export type versionInfo = {
+  version: string;
+  revision: string;
+  buildtime: string;
+  appname: string;
+  MAC: string;
+  timeStamp: number;
+  UUID: string;
+  proquint: string;
+  "Serial No.": string;
+  "Model No.": string;
+};

src/ui/DevModal.tsx

@@ -0,0 +1,76 @@
+import type { versionInfo } from "../types/types";
+import ModalComponent from "./ModalComponent";
+
+type DevModalProps = {
+  isDevModalOpen: boolean;
+  handleClose: () => void;
+  data: versionInfo;
+};
+
+const DevModal = ({ isDevModalOpen, handleClose, data }: DevModalProps) => {
+  const uiName = __APP_NAME__;
+  const uiVersion = __APP_VERSION__;
+  const commitID = __GIT_COMMIT__;
+  const commitTimeStamp = __GIT_TIMESTAMP__;
+
+  return (
+    <ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
+      <div className="space-y-6">
+        <div className="border-b border-gray-600 pb-3">
+          <h2 className="text-2xl font-bold text-gray-100">System Information</h2>
+          <p className="text-sm text-gray-400 mt-1">Application version details</p>
+        </div>
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Frontend (UI)</h3>
+          <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
+            <div className="flex justify-between items-center border-b border-gray-700 pb-2">
+              <span className="text-gray-400 text-sm">Name</span>
+              <span className="text-gray-200 font-mono font-semibold">{uiName}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">Version</span>
+              <span className="text-gray-200 font-mono font-semibold">{uiVersion}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">Revision (Commit ID)</span>
+              <span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">{commitID}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">Build Time</span>
+              <span className="text-gray-200 font-mono text-sm">{commitTimeStamp}</span>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Backend</h3>
+          <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
+            <div className="flex justify-between items-center border-b border-gray-700 pb-2">
+              <span className="text-gray-400 text-sm"> Name</span>
+              <span className="text-gray-200 font-mono font-semibold">{data?.appname || "N/A"}</span>
+            </div>
+            <div className="flex justify-between items-center pb-2">
+              <span className="text-gray-400 text-sm">Version</span>
+              <span className="text-gray-200 font-mono font-semibold">{data?.version || "N/A"}</span>
+            </div>
+            <div className="flex justify-between items-center  pb-2">
+              <span className="text-gray-400 text-sm">Revision (Commit ID)</span>
+              <span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">
+                {data?.revision || "N/A"}
+              </span>
+            </div>
+            <div className="flex justify-between items-center  pb-2">
+              <span className="text-gray-400 text-sm">Build Time</span>
+              <span className="text-gray-200 font-mono text-sm">{data?.buildtime || "N/A"}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">MAC Address</span>
+              <span className="text-gray-200 font-mono text-sm">{data?.MAC || "N/A"}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default DevModal;

src/ui/Footer.tsx

@@ -1,11 +1,25 @@
+import { useState } from "react";
 import Logo from "/MAV.svg";
+import DevModal from "./DevModal";
+import { useGetVersions } from "../hooks/useGetVersions";
 
 const Footer = () => {
+  const [isDevModalOpen, setDevModalOpen] = useState(false);
+  const { versionsQuery } = useGetVersions();
+
+  const versionData = versionsQuery?.data;
+
+  const handleClick = () => {
+    setDevModalOpen(true);
+  };
   return (
-    <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
+    <>
-      <img src={Logo} alt="Logo" width={100} height={100} />
+      <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
-      <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
+        <img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
-    </footer>
+        <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
+      </footer>
+      <DevModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionData} />
+    </>
   );
 };
 

src/ui/ModalComponent.tsx

@@ -26,7 +26,7 @@ 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"
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4 hover:cursor-pointer"
         >
           Close
         </button>

src/utils/config.ts

@@ -1 +1,9 @@
-export const CAMBASE = import.meta.env.VITE_BASEURL;
+export const cambase = import.meta.env.VITE_BASEURL;
+
+export const CAMBASEWS = import.meta.env.VITE_BASE_WS;
+
+const environment = import.meta.env.MODE;
+
+export const CAMBASE = environment === "development" ? cambase : window.location.origin;
+
+export const CAMBASE_WS = environment === "development" ? CAMBASEWS : window.location.origin.replace(/^http/, "ws");

src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare const __APP_NAME__: string;
+declare const __APP_VERSION__: string;
+declare const __GIT_COMMIT__: string;
+declare const __GIT_TIMESTAMP__: string;

vite.config.ts

@@ -2,13 +2,38 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import pkg from "./package.json";
+import { execSync } from "child_process";
+
+const gitCommitHash = (() => {
+  try {
+    return execSync("git rev-parse --short HEAD").toString().trim();
+  } catch {
+    return "unknown";
+  }
+})();
+
+const gitCommitTimeStamp = (() => {
+  try {
+    return execSync("git log -1 --format=%cd --date=iso").toString().trim();
+  } catch {
+    return "unknown";
+  }
+})();
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: "/bayiq",
+  define: {
+    __APP_NAME__: JSON.stringify(pkg.name),
+    __APP_VERSION__: JSON.stringify(pkg.version),
+    __GIT_COMMIT__: JSON.stringify(gitCommitHash),
+    __GIT_TIMESTAMP__: JSON.stringify(gitCommitTimeStamp),
+  },
   plugins: [
     tanstackRouter({
       target: "react",
-      autoCodeSplitting: true,
+      autoCodeSplitting: false,
     }),
     react(),
     tailwindcss(),
@@ -21,4 +46,11 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
 });