- starting to add regionPainter to CameraSettings

-  updated PlatePatchSetup component layout

src/app/reducers/cameraSettingsReducer.ts

@@ -3,6 +3,13 @@ import type { CameraSettings, CameraSettingsAction } from "../../utils/types";
 export const initialState: CameraSettings = {
   mode: 0,
   imageSize: { width: 1280, height: 960 },
+  regionPainter: {
+    paintedCells: [],
+    regions: [
+      { name: "Region 1", brushColour: "#FF0000", cells: [] },
+      { name: "Region 2", brushColour: "#00FF00", cells: [] },
+    ],
+  },
 };
 
 export const cameraSettingsReducer = (state: CameraSettings, action: CameraSettingsAction) => {

src/features/setup/components/platePatch/PlatePatchSetup.tsx

@@ -1,32 +1,39 @@
+import CardHeader from "../../../../components/CardHeader";
 import Card from "../../../../components/ui/Card";
-import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
-import NumberPlate from "../../../dashboard/components/platePatch/NumberPlate";
 import { useSightingList } from "../../../dashboard/hooks/useSightingList";
 
 const PlatePatchSetup = () => {
   const { sightingList, isLoading } = useSightingList();
-  const firstFourSightings = sightingList?.slice(0, 4);
 
   if (isLoading) return <>Loading...</>;
-
   return (
     <Card className="p-4">
-      <ul>
-        {firstFourSightings?.map((sighting) => (
-          <li key={sighting.ref}>
-            <div className="flex flex-col gap-2 mb-2 border border-gray-600 p-2 rounded-lg hover:cursor-pointer hover:bg-[#233241]">
-              <div className="">
-                <TimeStampBadge timeStamp={sighting.timeStampMillis} />
-              </div>
-              <p className="font-semibold text-gray-200">{sighting.vrm}</p>
-              <div className="flex items-center gap-4">
-                <img src={sighting.plateUrlColour} alt="" width={100} height={100} />
-                <NumberPlate vrm={sighting.vrm} size="sm" motion={sighting.motion.toLowerCase() === "away"} />
-              </div>
-            </div>
-          </li>
-        ))}
-      </ul>
+      <CardHeader title="Plates" />
+      <div className="h-120 overflow-auto">
+        <table className="w-full text-left text-sm table-auto border-collapse border border-gray-500/50 rounded-md">
+          <thead className="bg-gray-700/50 text-gray-200 top-0">
+            <tr>
+              <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">Seen</th>
+              <th className="px-4 py-3 font-semibold">Plate</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sightingList?.map((sighting) => (
+              <tr key={sighting.vrm} className="border-b border-gray-700/50 hover:bg-gray-700/20">
+                <td className="px-4 py-3 font-mono text-lg">{sighting.vrm}</td>
+                <td className="px-4 py-3 text-center">{sighting.seenCount}</td>
+                <td className="px-4 py-3">{sighting.timeStamp}</td>
+                <td className="px-4 py-3">
+                  <img src={sighting.plateUrlColour} alt="" width={100} height={100} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </Card>
   );
 };

src/utils/types.ts

@@ -55,6 +55,10 @@ export type NpedJSON = {
 export type CameraSettings = {
   mode: number;
   imageSize: { width: number; height: number };
+  regionPainter: {
+    paintedCells: { x: number; y: number }[];
+    regions: { name: string; brushColour: string; cells: { x: number; y: number }[] }[];
+  };
 };
 export type CameraSettingsAction =
   | {