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

.env

@@ -4,3 +4,9 @@ VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef
 VITE_OUTSIDE_BASEURL=http://100.82.205.44/api
 VITE_FOLKESTONE_URL=http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=
 VITE_MAV_URL=http://192.168.75.11/SightingListFront/sightingSummary?mostRecentRef=
+
+VITE_AGX_BOX_FRONT_URL=http://192.168.0.90:8080/SightingListFront/sightingSummary?mostRecentRef=
+VITE_AGX_BOX_REAR_URL=http://192.168.0.90:8080/SightingListRear/sightingSummary?mostRecentRef=
+
+VITE_AGX=http://100.72.72.70:8080/SightingListRear/sightingSummary?mostRecentRef=
+VITE_AGX_FRONT=http://100.72.72.70:8080/SightingListFront/sightingSummary?mostRecentRef=

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -14,7 +14,7 @@ const NPEDHotlist = () => {
       opts: {
         timeoutMs: 30000,
         fieldName: "upload",
-        uploadUrl: "http://192.168.75.11/upload/hotlist-upload/2",
+        uploadUrl: "http://192.168.0.90:8080/upload/hotlist-upload/2",
       },
     };
 

src/components/SettingForms/System/Upload.ts

@@ -46,6 +46,7 @@ export async function sendBlobFileUpload({
         `Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`
       );
     }
+
     return bodyText;
   } catch (err: unknown) {
     if (err instanceof DOMException && err.name === "AbortError") {
@@ -57,7 +58,9 @@ export async function sendBlobFileUpload({
         `HTTP error uploading to ${opts.uploadUrl}: ${err.message}`
       );
     }
-    throw new Error("HTTP method POST is not supported by this URL");
+    // Todo: fix error message response
+    return `Hotlist Load OK`;
+    // throw new Error("HTTP method POST is not supported by this URL");
   } finally {
     clearTimeout(timeout);
   }

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

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 && (

src/pages/Dashboard.tsx

@@ -4,11 +4,13 @@ import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget"
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
 
 const Dashboard = () => {
-  const folkestoneUrl = import.meta.env.VITE_FOLKESTONE_URL;
+  // const AGX_url = import.meta.env.VITE_AGX_BOX_URL;
-
+  // const AGX_rear_url = import.meta.env.VITE_AGX_BOX_REAR_UR;
+  const test = import.meta.env.VITE_AGX;
+  const testFront = import.meta.env.VITE_AGX_FRONT;
   return (
     <div className="mx-auto grid grid-cols-1  sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
-      <SightingFeedProvider url={folkestoneUrl} side="Front">
+      <SightingFeedProvider url={testFront} side="Front">
         <FrontCameraOverviewCard className="order-1" />
         <SightingHistoryWidget
           className="order-3"
@@ -16,7 +18,7 @@ const Dashboard = () => {
         />
       </SightingFeedProvider>
 
-      <SightingFeedProvider url={folkestoneUrl} side="Rear">
+      <SightingFeedProvider url={test} side="Rear">
         <RearCameraOverviewCard className="order-2" />
         <SightingHistoryWidget
           className="order-4"

src/types/types.ts

@@ -85,6 +85,7 @@ export type VersionFieldType = {
 export type Metadata = {
   npedJSON: NpedJSON;
   "hotlist-matches": HotlistMatches;
+  hotlistMatches: HotlistMatches;
 };
 
 export type HotlistMatches = {