From 1599ad066f662709b9cbdd0b8c6518cdf9ceae47 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Fri, 19 Sep 2025 11:22:09 +0100
Subject: [PATCH] added Hotlist flag ad tag

---
 src/components/HistoryList/AlertItem.tsx      | 12 +++++--
 .../SightingsWidget/SightingWidget.tsx        | 32 +++++++------------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx
index 1a531fe..e423cff 100644
--- a/src/components/HistoryList/AlertItem.tsx
+++ b/src/components/HistoryList/AlertItem.tsx
@@ -3,6 +3,7 @@ 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";
 
 type AlertItemProps = {
   item: SightingType;
@@ -11,7 +12,8 @@ type AlertItemProps = {
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
-  const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
+  // const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
+  const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
 
   const handleClick = () => {
     setIsModalOpen(true);
@@ -27,7 +29,13 @@ const AlertItem = ({ item }: AlertItemProps) => {
         className=" flex flex-row p-4 border border-gray-400 rounded-lg items-center w-full mx-auto justify-between"
         onClick={handleClick}
       >
-        {isNPEDHit && <small className="text-red-500">NPED Hit</small>}
+        {isHotListHit && (
+          <img
+            src={HotListImg}
+            alt="hotlistHit"
+            className="h-20 object-contain rounded-md"
+          />
+        )}
         <div className="flex flex-col">
           <small>MAKE: {item.make}</small>
           <small>MODEL: {item.model}</small>
diff --git a/src/components/SightingsWidget/SightingWidget.tsx b/src/components/SightingsWidget/SightingWidget.tsx
index 479396e..0a5d524 100644
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -9,6 +9,7 @@ import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import SightingModal from "../SightingModal/SightingModal";
 // import { useAlertHitContext } from "../../context/AlertHitContext";
 import InfoBar from "./InfoBar";
+import HotListImg from "/Hotlist_Hit.svg";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -102,37 +103,19 @@ export default function SightingHistoryWidget({
               const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
               const primaryIsColour = obj?.srcCam === 1;
               const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
-
+              const isHotListHit =
+                obj?.metadata?.hotlistMatches?.Hotlist0 === true;
               return (
                 <div
                   key={idx}
                   className={`border border-neutral-700 rounded-md mb-2 p-2 cursor-pointer`}
                   onClick={() => onRowClick(obj)}
                 >
-                  {/* Info bar */}
                   <InfoBar obj={obj} />
-
                   {/* Patch row */}
                   <div
-                    className={`flex items-center gap-3 mt-2 justify-between
-                 
-                  `}
+                    className={`flex items-center gap-3 mt-2 justify-between`}
                   >
-                    {obj?.plateUrlInfrared && (
-                      <div
-                        className={`border p-1 ${
-                          primaryIsColour ? "" : "ring-2 ring-lime-400"
-                        } ${!obj ? "opacity-30" : ""}`}
-                      >
-                        <img
-                          src={obj?.plateUrlInfrared || BLANK_IMG}
-                          height={48}
-                          alt="infrared patch"
-                          className={!primaryIsColour ? "" : "opacity-60"}
-                        />
-                      </div>
-                    )}
-
                     <div
                       className={`border p-1 ${
                         primaryIsColour ? "ring-2 ring-lime-400" : ""
@@ -149,6 +132,13 @@ export default function SightingHistoryWidget({
                         className={primaryIsColour ? "" : "opacity-60"}
                       />
                     </div>
+                    {isHotListHit && (
+                      <img
+                        src={HotListImg}
+                        alt="hotlistHit"
+                        className="h-20 object-contain rounded-md"
+                      />
+                    )}
                     <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                   </div>
                 </div>