Add PlateRead component and integrate it into the Dashboard; refactor VideoFeed and SightingStack for improved layout

src/features/dashboard/Dashboard.tsx

@@ -1,3 +1,4 @@
+import PlateRead from "./components/plateRead/PlateRead";
 import SightingStack from "./components/sightingStack/SightingStack";
 import VideoFeed from "./components/videoFeed/VideoFeed";
 import { useSightingList } from "./hooks/useSightingList";
@@ -7,8 +8,11 @@ const Dashboard = () => {
   const mostRecent = sightingList[0];
 
   return (
-    <div className="grid gird-cols-1 md:grid-cols-2 gap-20">
+    <div className="grid gird-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-      <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+      <div>
+        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+        <PlateRead sighting={mostRecent} />
+      </div>
       <SightingStack sightings={sightingList} />
     </div>
   );

src/features/dashboard/components/plateRead/PlateRead.tsx

@@ -0,0 +1,56 @@
+import type { SightingType } from "../../../../utils/types";
+import Card from "../../../../components/ui/Card";
+import CardHeader from "../../../../components/CardHeader";
+
+type PlateReadProps = {
+  sighting: SightingType;
+};
+
+const PlateRead = ({ sighting }: PlateReadProps) => {
+  console.log(sighting);
+  const vrm = sighting?.vrm;
+  const region = sighting?.laneID;
+  const timestamp = sighting?.timeStamp;
+  const seenCount = sighting?.seenCount;
+  const radarSpeed = sighting?.radarSpeed;
+  const motion = sighting?.motion;
+  const countryCode = sighting?.countryCode;
+  const plateColorUrl = sighting?.plateUrlColour;
+
+  if (!sighting) return <div>No sighting data available.</div>;
+
+  return (
+    <Card className="p-4 w-full">
+      <CardHeader title="Plate Read" />
+      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
+        <dt className="font-semibold text-gray-200">VRM:</dt>
+        <dd>{vrm}</dd>
+        <dt className="font-semibold text-gray-200">Region:</dt>
+        <dd>{region}</dd>
+        <dt className="font-semibold text-gray-200">Timestamp:</dt>
+        <dd>{timestamp}</dd>
+
+        <dt className="font-semibold text-gray-200">Seen Count:</dt>
+        <dd>{seenCount}</dd>
+
+        <dt className="font-semibold text-gray-200">Radar Speed:</dt>
+        <dd>{radarSpeed} mph</dd>
+
+        <dt className="font-semibold text-gray-200">Motion:</dt>
+        <dd>{motion}</dd>
+
+        <dt className="font-semibold text-gray-200">Country Code:</dt>
+        <dd>{countryCode}</dd>
+
+        <dt className="font-semibold text-gray-200">Plate Image:</dt>
+        <dd>
+          <a href={plateColorUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+            View Image
+          </a>
+        </dd>
+      </dl>
+    </Card>
+  );
+};
+
+export default PlateRead;

src/features/dashboard/components/sightingStack/SightingItem.tsx

@@ -6,7 +6,6 @@ type SightingItemProps = {
 };
 
 const SightingItem = ({ sighting }: SightingItemProps) => {
-  console.log(sighting);
   const motion = sighting.motion.toLowerCase() === "away" ? true : false;
   return (
     <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">

src/features/dashboard/components/sightingStack/SightingStack.tsx

@@ -8,7 +8,7 @@ type SightingStackProps = {
 };
 const SightingStack = ({ sightings }: SightingStackProps) => {
   return (
-    <Card className="p-4 w-full">
+    <Card className="p-4 w-full h-full md:h-[65%]">
       <CardHeader title="Sightings" />
       {sightings.map((sighting) => (
         <SightingItem key={sighting.ref} sighting={sighting} />

src/features/dashboard/components/videoFeed/VideoFeed.tsx

@@ -20,8 +20,8 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
 
   useEffect(() => {
     const updateSize = () => {
-      const width = window.innerWidth * 0.5;
+      const width = window.innerWidth * 0.48;
-      const height = (width * 3) / 4;
+      const height = (width * 2) / 3;
       setSize({ width, height });
     };
     updateSize();
@@ -59,7 +59,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
               height={plateRect?.[3] * size.height}
               stroke="blue"
               strokeWidth={4}
-              zIndex={1}
+              cornerRadius={5}
             />
           </Layer>
         )}
@@ -75,7 +75,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
                 height={rect[3] * size.height}
                 stroke="red"
                 strokeWidth={2}
-                zIndex={1}
+                cornerRadius={5}
               />
             ))}
           </Layer>

src/features/dashboard/hooks/useCreateVideoSnapshot.ts

@@ -9,8 +9,6 @@ export const useCreateVideoSnapshot = (mostRecentSighting: SightingType) => {
 
   image.src = snapshotUrl;
 
-  console.log(mostRecentSighting);
-
   const plateRect = mostRecentSighting?.overviewPlateRect;
 
   const plateTrack = mostRecentSighting?.plateTrack;