- added modal for entry and exit sightings and plate patches

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="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>
-              <th className="px-4 py-3 font-semibold">VRM</th>
-              <th className="px-4 py-3 font-semibold">Bay ID</th>
-              <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
-              <th className="px-4 py-3 font-semibold">First Seen</th>
-              <th className="px-4 py-3 font-semibold">Last Seen</th>
-            </tr>
-          </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>
+    <>
+      <div className="border border-gray-600 rounded-lg m-2">
+        {/* Desktop Table */}
+        <div className="hidden md:block overflow-y-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
+              <tr>
+                <th className="px-4 py-3 font-semibold">VRM</th>
+                <th className="px-4 py-3 font-semibold">Bay ID</th>
+                <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
+                <th className="px-4 py-3 font-semibold">First Seen</th>
+                <th className="px-4 py-3 font-semibold">Last Seen</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+            </thead>
+            <tbody className="divide-y divide-gray-700">
+              {readings?.map((reading: DecodeReading) => (
+                <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 */}
-      <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>
+        {/* 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"
+              onClick={() => handleRowClick(reading)}
+            >
+              <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">
-                <span className="text-gray-500">Last Seen:</span>
-                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</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">
+                  <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"}
+      />
+    </>
   );
 };