From ef5f07de0ad1c40b7411fdba4ac1f8f4c2408ca7 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 23 Dec 2025 08:58:08 +0000
Subject: [PATCH] Refactor SightingItem to display time since sighting; add
 timeAgo utility function

---
 .../components/sightingStack/SightingItem.tsx   |  9 ++++++++-
 src/utils/utils.ts                              | 17 +++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/features/dashboard/components/sightingStack/SightingItem.tsx b/src/features/dashboard/components/sightingStack/SightingItem.tsx
index 0c29b49..3470770 100644
--- a/src/features/dashboard/components/sightingStack/SightingItem.tsx
+++ b/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 = {
@@ -7,11 +8,17 @@ type SightingItemProps = {
 
 const SightingItem = ({ sighting }: SightingItemProps) => {
   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>
+          <span className="font-light border bg-blue-400 text-blue-800 px-2 rounded">{timeStamp}</span>
+        </div>
         <div className="text-xl">
-          VRM: <span className="font-semibold">{sighting.vrm}</span>
+          <span className="font-semibold">{sighting.vrm}</span>
         </div>
       </div>
       <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 0e208a4..2c9a3f3 100644
--- a/src/utils/utils.ts
+++ b/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`;
+  }
+};