Refactor camera feed components and add sighting tables

- Updated mode settings in camera feed reducer to use "painter"
- Renamed PlatePatch component to SightingPatch and updated imports
- Removed obsolete PlatePatch component
- Added SightingEntryTable and SightingExitTable components for displaying sighting data
- Implemented useSightingEntryAndExit hook for fetching entry and exit sightings
- Adjusted VideoFeedGridPainter for improved width calculation
- Introduced DecodeReading type for better typing

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

@@ -0,0 +1,44 @@
+import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import type { DecodeReading } from "../../../../types/types";
+import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
+
+const SightingExitTable = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state.cameraFeedID;
+  const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
+
+  const isLoading = exitQuery?.isFetching;
+  const readings = exitQuery?.data?.decodes;
+
+  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
+  return (
+    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
+      <div className="overflow-y-auto ">
+        <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">Lane 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>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default SightingExitTable;