- updated state for tracking sessions

- removed un used state in sighting feed

- added groupings depending on sightings

src/components/HistoryList/AlertItem.tsx

@@ -19,6 +19,8 @@ const AlertItem = ({ item }: AlertItemProps) => {
 
   // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
+  // [34].metadata.hotlistMatches["MAV_Hotlist.csv"]
+  //check if true is in any hotlist property
   const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
   const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
   const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";

src/components/SessionForm/SessionCard.tsx

@@ -1,32 +1,80 @@
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import { useNPEDContext } from "../../context/NPEDUserContext";
+import type { ReducedSightingType } from "../../types/types";
+import { toast } from "sonner";
 
 const SessionCard = () => {
   const { sessionStarted, setSessionStarted, sessionList } = useNPEDContext();
 
   const handleStartClick = () => {
     setSessionStarted(!sessionStarted);
+    toast(
+      `${
+        sessionStarted
+          ? "Vehicle tracking session Ended"
+          : "Vehicle tracking session  Started"
+      }`
+    );
   };
 
+  const sightings = [
+    ...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle])),
+  ];
+
+  const dedupedSightings = sightings.map((sighting) => sighting[1]);
+
+  const vehicles = dedupedSightings.reduce<
+    Record<string, ReducedSightingType[]>
+  >(
+    (acc, item) => {
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "A")
+        acc.npedCatA.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "B")
+        acc.npedCatB.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "C")
+        acc.npedCatC.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "D")
+        acc.npedCatD.push(item);
+      if (item.metadata?.npedJSON["TAX STATUS"] === false)
+        acc.notTaxed.push(item);
+      if (item.metadata?.npedJSON["MOT STATUS"] === false)
+        acc.notMOT.push(item);
+
+      return acc;
+    },
+    {
+      npedCatA: [],
+      npedCatB: [],
+      npedCatC: [],
+      npedCatD: [],
+      notTaxed: [],
+      notMOT: [],
+    }
+  );
+
   return (
     <Card className="p-4">
       <CardHeader title="Session" />
       <div className="flex flex-col gap-4 px-2">
         <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
+          className={`${
+            sessionStarted ? "bg-red-600" : "bg-[#26B170]"
+          } text-white px-4 py-2 rounded ${
+            sessionStarted ? "hover:bg-red-700" : "hover:bg-green-700"
+          }  transition w-full`}
           onClick={handleStartClick}
         >
-          Start Session
+          {sessionStarted ? "End Session" : "Start Session"}
         </button>
 
         <ul className="text-white space-y-2">
-          <li>Number of Vehicles: {sessionList.length} </li>
-          <li>Vehicles without Tax: </li>
-          <li>Vehicles without MOT: </li>
-          <li>Vehicles with NPED Cat A: </li>
-          <li>Vehicles with NPED Cat B: </li>
-          <li>Vehicles with NPED Cat C: </li>
+          <li>Number of Vehicles: {dedupedSightings.length} </li>
+          <li>Vehicles without Tax: {vehicles.notTaxed.length}</li>
+          <li>Vehicles without MOT: {vehicles.notMOT.length}</li>
+          <li>Vehicles with NPED Cat A: {vehicles.npedCatA.length}</li>
+          <li>Vehicles with NPED Cat B: {vehicles.npedCatB.length}</li>
+          <li>Vehicles with NPED Cat C: {vehicles.npedCatC.length}</li>
         </ul>
       </div>
     </Card>

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { SightingType } from "../../types/types";
+import type { ReducedSightingType, SightingType } from "../../types/types";
 import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
@@ -61,10 +61,18 @@ export default function SightingHistoryWidget({
   const { dispatch } = useAlertHitContext();
   const { sessionStarted, setSessionList, sessionList } = useNPEDContext();
 
+  const reduceObject = (obj: SightingType): ReducedSightingType => {
+    return {
+      vrm: obj.vrm,
+      metadata: obj?.metadata,
+    };
+  };
+
   useEffect(() => {
     if (sessionStarted) {
       if (!mostRecent) return;
-      setSessionList([...sessionList, mostRecent]);
+      const reducedMostRecent = reduceObject(mostRecent);
+      setSessionList([...sessionList, reducedMostRecent]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mostRecent, sessionStarted, setSessionList]);