added alert popup on hotlist, upload hotlist and added hotlist tag

src/components/SightingModal/SightingModal.tsx

@@ -5,6 +5,7 @@ import ModalComponent from "../UI/ModalComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
 import { toast, Toaster } from "sonner";
+import HotListImg from "/Hotlist_Hit.svg";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -31,6 +32,7 @@ const SightingModal = ({
   };
 
   const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
+  const isHotListHit = sighting?.metadata?.hotlistMatches?.Hotlist0 === true;
 
   return (
     <>
@@ -41,13 +43,20 @@ const SightingModal = ({
               Sighting Details
             </h2>
           </div>
-          <div className="flex flex-col md:flex-row gap-3 items-center">
+          <div className="flex flex-col md:flex-row gap-3 items-center mb-2">
             <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
             <img
               src={sighting?.plateUrlColour}
               alt="plate patch"
               className="h-16 object-contain rounded-md"
             />
+            {isHotListHit && (
+              <img
+                src={HotListImg}
+                alt="hotlistHit"
+                className="h-18 object-contain rounded-md"
+              />
+            )}
           </div>
           <div className="flex flex-col md:flex-row items-center gap-3">
             <img