- Added TimeStampBadge component and integrate camera and plate patch setup features

- Implemented TimeStampBadge component to display time ago from a timestamp.
- Created CameraControls component with Formik for form handling.
- Developed CameraSetup component with tab navigation for camera settings.
- Added PlateItem component to display individual sighting details.
- Enhanced PlatePatchSetup component to list sightings with timestamp and plate information.

src/components/ui/TimeStampBadge.tsx

@@ -0,0 +1,13 @@
+import { timeAgo } from "../../utils/utils";
+
+type TimeStampBadgeProps = {
+  timeStamp: number;
+};
+
+const TimeStampBadge = ({ timeStamp }: TimeStampBadgeProps) => {
+  const formattedTimeAgo = timeAgo(Number(timeStamp));
+
+  return <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{formattedTimeAgo}</span>;
+};
+
+export default TimeStampBadge;

src/features/dashboard/Dashboard.tsx

@@ -12,12 +12,15 @@ const Dashboard = () => {
   const mostRecent = sightingList[0];
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-      <div>
-        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
-        <PlateRead sighting={mostRecent} />
+    <div>
+      <div>system overview</div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
+        <div>
+          <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
+          <PlateRead sighting={mostRecent} />
+        </div>
+        <SightingStack sightings={sightingList} />
       </div>
-      <SightingStack sightings={sightingList} />
     </div>
   );
 };

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

@@ -1,5 +1,6 @@
+import TimeStampBadge from "../../../../components/ui/TimeStampBadge";
 import type { SightingType } from "../../../../utils/types";
-import { timeAgo } from "../../../../utils/utils";
+
 import NumberPlate from "../platePatch/NumberPlate";
 
 type SightingItemProps = {
@@ -9,7 +10,6 @@ type SightingItemProps = {
 
 const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
   const motion = sighting.motion.toLowerCase() === "away" ? true : false;
-  const timeStamp = timeAgo(sighting.timeStampMillis);
 
   return (
     <>
@@ -19,7 +19,7 @@ const SightingItem = ({ sighting, onOpenModal }: SightingItemProps) => {
       >
         <div>
           <div>
-            <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+            <TimeStampBadge timeStamp={sighting.timeStampMillis} />
           </div>
           <div className="text-xl">
             <span className="font-semibold text-gray-200">{sighting.vrm}</span>

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

@@ -13,7 +13,6 @@ type VideoFeedProps = {
 };
 
 const VideoFeed = ({ mostRecentSighting, isLoading, size, modeSetting, isModal = false }: VideoFeedProps) => {
-  console.log(size);
   const { state: cameraSettings, dispatch } = useCameraSettingsContext();
   const contextMode = cameraSettings.mode;
   const [localMode, setLocalMode] = useState(0);

src/features/setup/Setup.tsx

@@ -1,9 +1,15 @@
+import CameraSetup from "./components/cameraSetup/CameraSetup";
+import PlatePatchSetup from "./components/platePatch/PlatePatchSetup";
 import VideoFeedSetup from "./components/videofeed/VideoFeedSetup";
 
 const Setup = () => {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
-      <VideoFeedSetup />
+      <div>
+        <VideoFeedSetup />
+        <PlatePatchSetup />
+      </div>
+      <CameraSetup />
     </div>
   );
 };

src/features/setup/components/cameraControls/CameraControls.tsx

@@ -0,0 +1,25 @@
+import { Formik, Form } from "formik";
+
+type CameraControlProps = {
+  tabIndex: number;
+};
+
+const CameraControls = ({ tabIndex }: CameraControlProps) => {
+  const initialValues = {};
+
+  console.log(tabIndex);
+  const handleSumbit = (values: { test?: string }) => {
+    console.log(values);
+  };
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSumbit}>
+      <Form>
+        <button type="submit" className="p-3 bg-green-700 hover:bg-green-900 rounded-md">
+          Save Settings
+        </button>
+      </Form>
+    </Formik>
+  );
+};
+
+export default CameraControls;

src/features/setup/components/cameraSetup/CameraSetup.tsx

@@ -0,0 +1,36 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Card from "../../../../components/ui/Card";
+import CameraControls from "../cameraControls/CameraControls";
+import { useState } from "react";
+
+const CameraSetup = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+  console.log(tabIndex);
+  return (
+    <Card className="p-4">
+      <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
+        <TabList>
+          <Tab>Camera</Tab>
+          <Tab>Regions</Tab>
+          <Tab>Crop</Tab>
+          <Tab>Advanced</Tab>
+        </TabList>
+        <TabPanel>
+          <CameraControls tabIndex={tabIndex} />
+        </TabPanel>
+        <TabPanel>
+          <div>Regions</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Crop</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Advanced</div>
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default CameraSetup;

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

@@ -0,0 +1,12 @@
+import type { SightingType } from "../../../../utils/types";
+
+type PlateItemProps = {
+  sighting: SightingType;
+};
+
+const PlateItem = ({ sighting }: PlateItemProps) => {
+  console.log(sighting);
+  return <div>PlateItem</div>;
+};
+
+export default PlateItem;

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

@@ -0,0 +1,34 @@
+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>
+    </Card>
+  );
+};
+
+export default PlatePatchSetup;

src/utils/utils.ts

@@ -11,7 +11,7 @@ export const timeAgo = (timestampmili: number | null) => {
   const diffMins = Math.floor(diffMs / 60000);
   if (diffMins < 60) {
     if (diffMins < 1) {
-      return "just now";
+      return "Just now";
     }
     return `${diffMins === 1 ? "1 minute" : diffMins + " minutes"} ago`;
   } else {