Mav-Mobile-UI/src/components/SessionForm/SessionCard.tsx

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={`${
            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}
        >
          {sessionStarted ? "End Session" : "Start Session"}
        </button>

        <ul className="text-white space-y-2">
          <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>
  );
};

export default SessionCard;