src/app/context/CameraSettingsContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import type { CameraSettings, CameraSettingsAction } from "../../utils/types";
+
+type CameraSettingsContextType = {
+  state: CameraSettings;
+  dispatch: (state: CameraSettingsAction) => void;
+};
+export const CameraSettingsContext = createContext<CameraSettingsContextType | null>(null);
+
+export const useCameraSettingsContext = () => {
+  const context = useContext(CameraSettingsContext);
+  if (!context) {
+    throw new Error("useCameraSettingsContext must be used within a CameraSettingsProvider");
+  }
+  return context;
+};

src/app/providers/AppProviders.tsx

@@ -1,8 +1,13 @@
 import { type PropsWithChildren } from "react";
 import { QueryProvider } from "./QueryProvider";
+import CameraSettingsProvider from "./CameraSettingsProvider";
 
 const AppProviders = ({ children }: PropsWithChildren) => {
-  return <QueryProvider>{children}</QueryProvider>;
+  return (
+    <QueryProvider>
+      <CameraSettingsProvider>{children}</CameraSettingsProvider>
+    </QueryProvider>
+  );
 };
 
 export default AppProviders;

src/app/providers/CameraSettingsProvider.tsx

@@ -0,0 +1,11 @@
+import { CameraSettingsContext } from "../context/CameraSettingsContext";
+import { useReducer, type ReactNode } from "react";
+import { initialState, cameraSettingsReducer } from "../reducers/cameraSettingsReducer";
+
+const CameraSettingsProvider = ({ children }: { children: ReactNode }) => {
+  const [state, dispatch] = useReducer(cameraSettingsReducer, initialState);
+
+  return <CameraSettingsContext.Provider value={{ state, dispatch }}>{children}</CameraSettingsContext.Provider>;
+};
+
+export default CameraSettingsProvider;

src/app/reducers/cameraSettingsReducer.ts

@@ -0,0 +1,17 @@
+import type { CameraSettings, CameraSettingsAction } from "../../utils/types";
+
+export const initialState: CameraSettings = {
+  mode: 0,
+};
+
+export const cameraSettingsReducer = (state: CameraSettings, action: CameraSettingsAction) => {
+  switch (action.type) {
+    case "SET_MODE":
+      return {
+        ...state,
+        mode: action.payload,
+      };
+    default:
+      return state;
+  }
+};

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">
-      <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+    <div className="grid gird-cols-1 md:grid-cols-2 gap-2 md:gap-5">
+      <div>
+        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+        <PlateRead sighting={mostRecent} />
+      </div>
       <SightingStack sightings={sightingList} />
     </div>
   );

src/features/dashboard/components/platePatch/NumberPlate.tsx

@@ -41,7 +41,7 @@ const NumberPlate = ({ vrm, motion, size }: NumberPlateProps) => {
   return (
     <div
       className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
-        text-black px-6 py-2 text-monospace font-mono flex items-center justify-center
+        text-black px-6 py-2 text-monospace flex items-center justify-center
         ${motion ? "bg-yellow-400" : "bg-white"}`}
     >
       <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

@@ -1,4 +1,5 @@
 import type { SightingType } from "../../../../utils/types";
+import { timeAgo } from "../../../../utils/utils";
 import NumberPlate from "../platePatch/NumberPlate";
 
 type SightingItemProps = {
@@ -6,15 +7,20 @@ type SightingItemProps = {
 };
 
 const SightingItem = ({ sighting }: SightingItemProps) => {
-  console.log(sighting);
   const motion = sighting.motion.toLowerCase() === "away" ? true : false;
+
+  const timeStamp = timeAgo(sighting.timeStampMillis);
+
   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">
       <div>
-        <div>Ref: {sighting.ref}</div>
-        <div>vrm: {sighting.vrm}</div>
+        <div>
+          <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+        </div>
+        <div className="text-xl">
+          <span className="font-semibold text-gray-200">{sighting.vrm}</span>
+        </div>
       </div>
-
       <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
     </div>
   );

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

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

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

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { Text, Group, Rect } from "react-konva";
+
+type VideoButtonProps = {
+  x?: number;
+  y?: number;
+  onClick?: () => void;
+  text?: string;
+};
+
+const VideoButton = ({ x, y, onClick, text }: VideoButtonProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <Group
+      x={x}
+      y={y}
+      onClick={onClick}
+      onMouseEnter={(e) => {
+        setIsHovered(true);
+        const container = e.target.getStage()?.container();
+        if (container) container.style.cursor = "pointer";
+      }}
+      onMouseLeave={(e) => {
+        setIsHovered(false);
+        const container = e.target.getStage()?.container();
+        if (container) container.style.cursor = "default";
+      }}
+    >
+      <Rect
+        width={100}
+        height={35}
+        fill={isHovered ? "#2563eb" : "#3b82f6"}
+        cornerRadius={8}
+        shadowBlur={isHovered ? 10 : 5}
+        shadowOpacity={0.3}
+      />
+      <Text text={text} fontSize={14} fill="white" width={100} height={35} align="center" verticalAlign="middle" />
+    </Group>
+  );
+};
+
+export default VideoButton;

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

@@ -2,6 +2,7 @@ import { Stage, Layer, Image, Rect } from "react-konva";
 import type { SightingType } from "../../../../utils/types";
 import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
 import { useEffect, useState } from "react";
+import { useCameraSettingsContext } from "../../../../app/context/CameraSettingsContext";
 
 type VideoFeedProps = {
   mostRecentSighting: SightingType;
@@ -9,19 +10,22 @@ type VideoFeedProps = {
 };
 
 const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
+  const { state: cameraSettings, dispatch } = useCameraSettingsContext();
+
+  const mode = cameraSettings.mode;
   const [size, setSize] = useState<{ width: number; height: number }>({ width: 1280, height: 960 });
-  const [mode, setMode] = useState<number>(0);
+
   const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);
 
   const handleModeChange = (newMode: number) => {
-    if (newMode > 2) setMode(0);
-    else setMode(newMode);
+    if (newMode > 2) dispatch({ type: "SET_MODE", payload: 0 });
+    else dispatch({ type: "SET_MODE", payload: newMode });
   };
 
   useEffect(() => {
     const updateSize = () => {
-      const width = window.innerWidth * 0.5;
-      const height = (width * 3) / 4;
+      const width = window.innerWidth * 0.48;
+      const height = (width * 2) / 3;
       setSize({ width, height });
     };
     updateSize();
@@ -59,7 +63,7 @@ const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
               height={plateRect?.[3] * size.height}
               stroke="blue"
               strokeWidth={4}
-              zIndex={1}
+              cornerRadius={5}
             />
           </Layer>
         )}
@@ -75,7 +79,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;

src/utils/types.ts

@@ -51,3 +51,11 @@ export type NpedJSON = {
   vrm: string;
   "INSURANCE STATUS": string;
 };
+
+export type CameraSettings = {
+  mode: number;
+};
+export type CameraSettingsAction = {
+  type: "SET_MODE";
+  payload: number;
+};

src/utils/utils.ts

@@ -4,3 +4,20 @@ export const formatNumberPlate = (plate: string) => {
   const formattedPlate = splittedPlate?.join("");
   return formattedPlate;
 };
+
+export const timeAgo = (timestampmili: number) => {
+  const diffMs = Date.now() - new Date(timestampmili).getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 60) {
+    if (diffMins < 1) {
+      return "just now";
+    }
+    return `${diffMins === 1 ? "1 minute" : diffMins + " minutes"} ago`;
+  } else {
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 1) {
+      return "just now";
+    }
+    return `${diffHours === 1 ? "1 hour" : diffHours + " hours"} ago`;
+  }
+};