- started improvements on session page to include pause and save buttons

src/components/SessionForm/SessionCard.tsx

@@ -3,6 +3,8 @@ import CardHeader from "../UI/CardHeader";
 import { useNPEDContext } from "../../context/NPEDUserContext";
 import type { ReducedSightingType } from "../../types/types";
 import { toast } from "sonner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFloppyDisk, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons";
 
 const SessionCard = () => {
   const { sessionStarted, setSessionStarted, sessionList } = useNPEDContext();
@@ -12,19 +14,24 @@ const SessionCard = () => {
     toast(`${sessionStarted ? "Vehicle tracking session Ended" : "Vehicle tracking session  Started"}`);
   };
 
+  const handleSaveCick = () => {
+    console.log("clicked");
+  };
+
   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) => {
+      const hotlisthit = Object.values(item.metadata?.hotlistMatches ?? {}).includes(true);
       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);
-
+      if (hotlisthit) acc.hotlistHit.push(item);
       return acc;
     },
     {
@@ -34,6 +41,7 @@ const SessionCard = () => {
       npedCatD: [],
       notTaxed: [],
       notMOT: [],
+      hotlistHit: [],
     }
   );
 
@@ -47,12 +55,39 @@ const SessionCard = () => {
           }  transition w-full`}
           onClick={handleStartClick}
         >
-          {sessionStarted ? "End Session" : "Start Session"}
+          <div className="flex flex-row gap-3 items-center justify-self-center">
+            <FontAwesomeIcon icon={sessionStarted ? faStop : faPlay} />
+            <p>{sessionStarted ? "End Session" : "Start Session"}</p>
+          </div>
         </button>
+        <div className="flex flex-col lg:flex-row gap-5">
+          {sessionStarted && (
+            <button
+              className={`bg-blue-600 text-white px-4 py-2 rounded transition w-full lg:w-[50%]`}
+              onClick={handleSaveCick}
+            >
+              <div className="flex flex-row gap-3 items-center justify-self-center">
+                <FontAwesomeIcon icon={faFloppyDisk} />
+                <p>Save session</p>
+              </div>
+            </button>
+          )}
+          {sessionStarted && (
+            <button
+              className={`bg-gray-300 text-gray-800 px-4 py-2 rounded transition w-full lg:w-[50%]`}
+              onClick={handleSaveCick}
+            >
+              <div className="flex flex-row gap-3 items-center justify-self-center">
+                <FontAwesomeIcon icon={faPause} />
+                <p>Pause session</p>
+              </div>
+            </button>
+          )}
+        </div>
 
         <ul className="text-white space-y-2">
           <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
-            <p>Number of Vehicles:</p>
+            <p>Number of Vehicles sightings:</p>
             <span className="font-bold text-green-600 text-xl">{dedupedSightings.length}</span>
           </li>
           <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
@@ -63,13 +98,17 @@ const SessionCard = () => {
             <p>Vehicles without MOT:</p>{" "}
             <span className="font-bold text-red-500 text-xl">{vehicles.notMOT.length}</span>
           </li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            <p>Vehicles on Hotlists:</p>{" "}
+            <span className="font-bold text-blue-500 text-xl">{vehicles.hotlistHit.length}</span>
+          </li>
           <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
             <p>Vehicles with NPED Cat A:</p>
             <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatA.length}</span>
           </li>
           <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
             <p>Vehicles with NPED Cat B:</p>{" "}
-            <span className="font-bold text-gray-300text-xl">{vehicles.npedCatB.length}</span>
+            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatB.length}</span>
           </li>
           <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
             Vehicles with NPED Cat C:{" "}