TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- improved UI for sessions page

Browse Source
This commit is contained in:
Toba Ojo
2025-10-15 15:15:04 +01:00
parent c6ddd04303
commit 7cfebab6c1
9 changed files with 87 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/SessionForm/SessionCard.tsx
View File

@@ -9,37 +9,21 @@ const SessionCard = () => {
const handleStartClick = () => {
setSessionStarted(!sessionStarted);
toast(
`${
sessionStarted
? "Vehicle tracking session Ended"
: "Vehicle tracking session Started"
}`
);
toast(`${sessionStarted ? "Vehicle tracking session Ended" : "Vehicle tracking session Started"}`);
};
const sightings = [
...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle])),
];
const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))];
const dedupedSightings = sightings.map((sighting) => sighting[1]);
const vehicles = dedupedSightings.reduce<
Record<string, ReducedSightingType[]>
>(
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);
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;
},
@@ -54,13 +38,11 @@ const SessionCard = () => {
);
return (
<Card className="p-4">
<Card className="p-4 col-span-3">
<CardHeader title="Session" />
<div className="flex flex-col gap-4 px-2">
<div className="flex flex-col gap-4 px-3">
<button
className={`${
sessionStarted ? "bg-red-600" : "bg-[#26B170]"
} text-white px-4 py-2 rounded ${
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}
@@ -69,12 +51,30 @@ const SessionCard = () => {
</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>
<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>