- added plate patch to alert item

- added hotlist name pick up on modals

src/components/HistoryList/AlertItem.tsx

@@ -43,9 +43,7 @@ const AlertItem = ({ item }: AlertItemProps) => {
       path: "alertHistory",
     });
     const oldArray = res?.result;
-    const updatedArray = oldArray?.filter(
+    const updatedArray = oldArray?.filter((item: SightingType) => item?.ref !== deletedItem?.ref);
-      (item: SightingType) => item?.ref !== deletedItem?.ref
-    );
 
     mutation.mutate({
       operation: "INSERT",
@@ -58,45 +56,14 @@ const AlertItem = ({ item }: AlertItemProps) => {
     <div className="flex flex-col w-full">
       <div className="border border-gray-600 rounded-lg items-center py-1">
         <InfoBar obj={item} />
-        <div
+        <div className="flex flex-row p-4  w-full mx-auto justify-between" onClick={handleClick}>
-          className=" flex flex-row p-4  w-full mx-auto justify-between"
+          {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-          onClick={handleClick}
+          {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" />}
-          {isHotListHit && (
+          {isNPEDHitC && <img src={NPED_CAT_C} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
-            <img
+          <div className={`border p-1 hidden md:block`}>
-              src={HotListImg}
+            <img src={item?.plateUrlColour} height={48} width={200} alt="colour patch" />
-              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"
-            />
-          )}
-          {isNPEDHitC && (
-            <img
-              src={NPED_CAT_C}
-              alt="NPEDHITicon"
-              className="h-20 object-contain rounded-md"
-            />
-          )}
-
-          <div className="flex flex-col">
-            <small>MAKE: {item.make}</small>
-            <small>MODEL: {item.model}</small>
-            <small>COLOUR: {item.color}</small>
           </div>
-
           <NumberPlate vrm={item.vrm} motion={motionAway} />
         </div>
         <SightingModal

src/components/SightingModal/SightingModal.tsx

@@ -10,7 +10,7 @@ import HotListImg from "/Hotlist_Hit.svg";
 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 { checkIsHotListHit, getHotlistName, getNPEDCategory } from "../../utils/utils";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -19,15 +19,12 @@ type SightingModalProps = {
   onDelete?: (deletedItem: SightingType | null) => void;
 };
 
-const SightingModal = ({
+const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
-  isSightingModalOpen,
-  handleClose,
-  sighting,
-  onDelete,
-}: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
   const { query, mutation } = useCameraBlackboard();
 
+  const hotlistName = getHotlistName(sighting?.metadata?.hotlistMatches);
+
   const handleAcknowledgeButton = () => {
     try {
       if (!sighting) {
@@ -78,9 +75,7 @@ const SightingModal = ({
       <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
         <div className="max-w-screen-lg mx-auto py-4 px-2">
           <div className="border-b border-gray-600 mb-4">
-            <h2 className="text-lg md:text-xl font-semibold">
+            <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
-              Sighting Details
-            </h2>
           </div>
           <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
             {onDelete ? (
@@ -121,41 +116,19 @@ const SightingModal = ({
           <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
             <div className="flex flex-col md:flex-row gap-3 items-center">
               <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
-              <img
+              <img src={sighting?.plateUrlColour} alt="plate patch" className="h-16 object-contain rounded-md" />
-                src={sighting?.plateUrlColour}
+              {hotlistName && (
-                alt="plate patch"
+                <div>
-                className="h-16 object-contain rounded-md"
+                  <p className="text-gray-300">Hotlist</p>
-              />
+                  <p className="font-medium text-2xl break-all">{hotlistName ? hotlistName[0] : "-"}</p>
+                </div>
+              )}
             </div>
 
-            {isHotListHit && (
+            {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-              <img
+            {isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-                src={HotListImg}
+            {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-                alt="hotlistHit"
+            {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-                className="h-20 object-contain rounded-md"
-              />
-            )}
-            {isNPEDHitA && (
-              <img
-                src={NPED_CAT_A}
-                alt="hotlistHit"
-                className="h-20 object-contain rounded-md"
-              />
-            )}
-            {isNPEDHitB && (
-              <img
-                src={NPED_CAT_B}
-                alt="hotlistHit"
-                className="h-20 object-contain rounded-md"
-              />
-            )}
-            {isNPEDHitC && (
-              <img
-                src={NPED_CAT_C}
-                alt="hotlistHit"
-                className="h-20 object-contain rounded-md"
-              />
-            )}
           </div>
           <div className="flex flex-col lg:flex-row items-center gap-3">
             <img
@@ -164,52 +137,37 @@ const SightingModal = ({
               className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
             />
             <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
-              <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
+              <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>
-                Vehicle Info
-              </h3>
               <dl className="mt-3  gap-x-4 gap-y-2 text-sm">
                 <div>
                   <dt className="text-gray-300">VRM</dt>
-                  <dd className="font-medium text-2xl break-all">
+                  <dd className="font-medium text-2xl break-all">{sighting?.vrm ?? "-"}</dd>
-                    {sighting?.vrm ?? "-"}
-                  </dd>
                 </div>
+
                 <div>
                   <dt className="text-gray-300">Motion</dt>
-                  <dd className="font-medium text-2xl">
+                  <dd className="font-medium text-2xl">{sighting?.motion ?? "-"}</dd>
-                    {sighting?.motion ?? "-"}
-                  </dd>
                 </div>
                 <div>
                   <dt className="text-gray-300">Seen Count</dt>
-                  <dd className="font-medium text-2xl">
+                  <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
-                    {sighting?.seenCount ?? "-"}
-                  </dd>
                 </div>
 
                 <div>
                   <dt className="text-gray-300">Make</dt>
-                  <dd className="font-medium text-2xl">
+                  <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
-                    {sighting?.make ?? "-"}
-                  </dd>
                 </div>
                 <div>
                   <dt className="text-gray-300">Model</dt>
-                  <dd className="font-medium text-2xl">
+                  <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
-                    {sighting?.model ?? "-"}
-                  </dd>
                 </div>
                 <div className="sm:col-span-2">
                   <dt className="text-gray-300">Colour</dt>
-                  <dd className="font-medium text-2xl">
+                  <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
-                    {sighting?.color ?? "-"}
-                  </dd>
                 </div>
                 <div>
                   <dt className="text-gray-300">Time</dt>
-                  <dd className="font-medium text-xl">
+                  <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
-                    {sighting?.timeStamp ?? "-"}
-                  </dd>
                 </div>
               </dl>
             </aside>

src/utils/utils.ts

@@ -1,7 +1,7 @@
 import switchSound from "../assets/sounds/ui/switch.mp3";
 import popup from "../assets/sounds/ui/popup_open.mp3";
 import notification from "../assets/sounds/ui/notification.mp3";
-import type { SightingType } from "../types/types";
+import type { HotlistMatches, SightingType } from "../types/types";
 
 export function getSoundFileURL(name: string) {
   const sounds: Record<string, string> = {
@@ -79,8 +79,7 @@ export const formatNumberPlate = (plate: string) => {
   return formattedPlate;
 };
 
-export const BLANK_IMG =
+export const BLANK_IMG = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-  "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
 export function capitalize(s?: string) {
   return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
@@ -120,12 +119,7 @@ export function drawRects(
   rects.forEach((r) => {
     const [x, y, rw, rh] = r;
     ctx.beginPath();
-    ctx.rect(
+    ctx.rect(Math.round(x * w), Math.round(y * h), Math.round(rw * w), Math.round(rh * h));
-      Math.round(x * w),
-      Math.round(y * h),
-      Math.round(rw * w),
-      Math.round(rh * h)
-    );
     ctx.stroke();
   });
 }
@@ -133,13 +127,18 @@ export function drawRects(
 export const checkIsHotListHit = (sigthing: SightingType | null) => {
   if (!sigthing) return;
   if (sigthing?.metadata?.hotlistMatches) {
-    const isHotListHit = Object.values(
+    const isHotListHit = Object.values(sigthing?.metadata?.hotlistMatches).includes(true);
-      sigthing?.metadata?.hotlistMatches
-    ).includes(true);
 
     return isHotListHit;
   }
 };
 
+export function getHotlistName(obj: HotlistMatches | undefined) {
+  if (!obj || Object.values(obj).includes(false)) return;
+
+  const keys = Object.keys(obj);
+  return keys;
+}
+
 export const getNPEDCategory = (r?: SightingType | null) =>
   r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;