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 col-span-3">
      <CardHeader title="Session" />
      <div className="flex flex-col gap-4 px-3">
        <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 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>
            <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">
            <p>Vehicles without Tax:</p>
            <span className="font-bold text-amber-600 text-xl">{vehicles.notTaxed.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 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 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>
          </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:{" "}
            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatC.length}</span>
          </li>
        </ul>
      </div>
    </Card>
  );
};

export default SessionCard;