From c8f4ebf5a968fb89d28d1df8640a79eb025c0be7 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 15 Oct 2025 16:11:10 +0100
Subject: [PATCH] - improvements made to session page alert list

---
 src/components/HistoryList/AlertItem.tsx      | 21 +++++++++++--------
 .../SightingModal/SightingModal.tsx           |  6 +++++-
 src/components/UI/Badge.tsx                   | 18 ++++++++++++++++
 3 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 src/components/UI/Badge.tsx

diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx
index 2552a37..97df557 100644
--- a/src/components/HistoryList/AlertItem.tsx
+++ b/src/components/HistoryList/AlertItem.tsx
@@ -1,7 +1,6 @@
 import type { SightingType } from "../../types/types";
 import NumberPlate from "../PlateStack/NumberPlate";
 import SightingModal from "../SightingModal/SightingModal";
-import InfoBar from "../SightingsWidget/InfoBar";
 import { useState } from "react";
 import HotListImg from "/Hotlist_Hit.svg";
 import { useAlertHitContext } from "../../context/AlertHitContext";
@@ -9,9 +8,11 @@ import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
-import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { checkIsHotListHit, formatAge, getNPEDCategory } from "../../utils/utils";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Badge from "../UI/Badge";
 
 type AlertItemProps = {
   item: SightingType;
@@ -22,7 +23,6 @@ const AlertItem = ({ item }: AlertItemProps) => {
   const { dispatch } = useAlertHitContext();
   const { mutation } = useCameraBlackboard();
 
-  // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
 
   const isHotListHit = checkIsHotListHit(item);
@@ -56,12 +56,15 @@ const AlertItem = ({ item }: AlertItemProps) => {
   };
   return (
     <div className="flex flex-col w-full relative">
-      <div className="border border-gray-600 rounded-lg items-center py-1">
-        <InfoBar obj={item} />
-        <button onClick={() => handleDelete(item)} className="absolute right-2 top-1">
-          <FontAwesomeIcon icon={faTrash} size="xl" />
+      <div className="border border-gray-600 rounded-lg items-center p-4">
+        <div className="flex flex-row space-x-3 ml-4">
+          <Badge text={`Seen: ${formatAge(item.timeStampMillis)}`} icon={faClock} />
+        </div>
+        <button onClick={() => handleDelete(item)} className="absolute right-2 top-3">
+          <FontAwesomeIcon icon={faX} size="xl" />
         </button>
-        <div className="flex flex-row p-4  w-full mx-auto justify-between" onClick={handleClick}>
+
+        <div className="flex flex-row p-4 w-full mx-auto justify-between" onClick={handleClick}>
           {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
           {isNPEDHitA && <img src={NPED_CAT_A} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
           {isNPEDHitB && <img src={NPED_CAT_B} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 2cb32e3..70a18a2 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -120,7 +120,11 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
               {hotlistName && (
                 <div>
                   <p className="text-gray-300">Hotlist</p>
-                  <p className="font-medium text-2xl break-all">{hotlistName ? hotlistName[0] : "-"}</p>
+                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500">
+                    <p className="font-medium text-2xl break-all text-amber-800">
+                      {hotlistName ? hotlistName[0] : "-"}
+                    </p>
+                  </div>
                 </div>
               )}
             </div>
diff --git a/src/components/UI/Badge.tsx b/src/components/UI/Badge.tsx
new file mode 100644
index 0000000..96091bc
--- /dev/null
+++ b/src/components/UI/Badge.tsx
@@ -0,0 +1,18 @@
+import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type BadgeProps = {
+  icon?: Icon | IconDefinition;
+  text: string;
+};
+
+const Badge = ({ icon, text }: BadgeProps) => {
+  return (
+    <span className="text-md font-medium inline-flex items-center px-2.5 py-0.5 rounded-sm me-2 bg-blue-900 text-blue-200 border border-blue-500 space-x-2">
+      {icon && <FontAwesomeIcon icon={icon} />}
+      <span>{text}</span>
+    </span>
+  );
+};
+
+export default Badge;