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

32
src/components/SessionForm/HitSearchCard.tsx
View File

@@ -9,38 +9,36 @@ const SessionCard = () => {
const { dispatch } = useAlertHitContext();
return (
<Card className="p-4">
<Card className="p-4 col-span-5">
<CardHeader title={"Hit Search"} />
<div className="flex flex-col gap-4 px-2">
<label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">
VRM (Min 2 letters)
</label>
<FormGroup>
<label
htmlFor="VRM"
className="font-medium whitespace-nowrap md:w-1/2 text-left"
>
VRM (Min 2 letters)
</label>
<div className="flex-1 flex justify-end md:w-2/3">
<div className="flex flex-row justify-between md:w-full space-x-3">
<input
id="VRMSelect"
name="VRMSelect"
type="text"
className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
className="p-2 border border-gray-400 rounded-lg w-full max-w-[70%] focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/30"
placeholder="Enter VRM"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-[30%] mx-3"
onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
disabled={searchTerm.trim().length < 2}
>
Search Hit list
</button>
</div>
</FormGroup>
<button
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full mx-auto"
onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
disabled={searchTerm.trim().length < 2}
>
Search Hit list
</button>
{searchTerm && (
<button
className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full mx-auto"
className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-[30%] "
onClick={() => {
setSearchTerm("");
dispatch({ type: "SEARCH", payload: "" });

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>