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

src/components/SightingsWidget/InfoBar.tsx

@@ -5,24 +5,25 @@ type InfoBarprops = {
   obj: SightingType;
 };
 const InfoBar = ({ obj }: InfoBarprops) => {
-  const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
+  // const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
+
   return (
     <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
       <div className="flex items-center gap-3 text-xs">
         <div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
         <div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
         <div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>
-        <div className="min-w-14 opacity-80">
+        <div className="min-w-14 opacity-80 text-md">
           {obj ? formatAge(obj.timeStampMillis) : "—"}
         </div>
       </div>
 
       <div className="min-w-14 opacity-80 ">
-        {isNPEDHit ? (
+        {/* {isNPEDHit ? (
           <span className="text-red-500 font-semibold">NPED HIT</span>
         ) : (
           ""
-        )}
+        )} */}
       </div>
     </div>
   );

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { SightingType } from "../../types/types";
 import { BLANK_IMG } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
@@ -46,6 +46,8 @@ export default function SightingHistoryWidget({
 
   const { dispatch } = useAlertHitContext();
 
+  const hasAutoOpenedRef = useRef(false);
+
   const onRowClick = useCallback(
     (sighting: SightingType) => {
       if (!sighting) return;
@@ -54,6 +56,7 @@ export default function SightingHistoryWidget({
     },
     [isSightingModalOpen, setSelectedSighting, setSightingModalOpen]
   );
+
   const rows = useMemo(
     () => sightings?.filter(Boolean) as SightingType[],
     [sightings]
@@ -72,6 +75,18 @@ export default function SightingHistoryWidget({
     });
   }, [rows, dispatch]);
 
+  useEffect(() => {
+    if (hasAutoOpenedRef.current) return;
+    const firstHot = rows?.find(
+      (r) => r?.metadata?.hotlistMatches?.Hotlist0 === true
+    );
+    if (firstHot) {
+      setSelectedSighting(firstHot);
+      setSightingModalOpen(true);
+      hasAutoOpenedRef.current = true; // prevent future auto-opens
+    }
+  }, [rows, setSelectedSighting, setSightingModalOpen]);
+
   const handleClose = () => {
     setSightingModalOpen(false);
   };
@@ -83,7 +98,7 @@ export default function SightingHistoryWidget({
           {/* Rows */}
           <div className="flex flex-col">
             {rows?.map((obj, idx) => {
-              const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
+              // const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 404;
               const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
               const primaryIsColour = obj?.srcCam === 1;
               const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
@@ -100,7 +115,7 @@ export default function SightingHistoryWidget({
                   {/* Patch row */}
                   <div
                     className={`flex items-center gap-3 mt-2 justify-between
-                  ${isNPEDHit ? "border border-red-600" : ""}
+                 
                   `}
                   >
                     {obj?.plateUrlInfrared && (