Refactor SightingItem to display time since sighting; add timeAgo utility function

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" />

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`;
+  }
+};