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

feat: Add support for NPED Category D across components

Browse Source
This commit is contained in:
Toba Ojo
2025-12-15 13:17:43 +00:00
parent 5dc1d13e25
commit 696a36ba92
10 changed files with 193 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/SightingModal/SightingModal.tsx
View File

@@ -10,7 +10,8 @@ import HotListImg from "/Hotlist_Hit.svg";
import NPED_CAT_A from "/NPED_Cat_A.svg";
import NPED_CAT_B from "/NPED_Cat_B.svg";
import NPED_CAT_C from "/NPED_Cat_C.svg";
import { checkIsHotListHit, getHotlistName, getNPEDCategory } from "../../utils/utils";
import NPED_CAT_D from "/NPED_Cat_D.svg";
import { checkIsHotListHit, getHotlistName, getNPEDCategory, getNPEDReason } from "../../utils/utils";
type SightingModalProps = {
isSightingModalOpen: boolean;
@@ -74,11 +75,19 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
};
const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
const isHotListHit = checkIsHotListHit(sighting);
const cat = getNPEDCategory(sighting);
const isNPEDHitA = cat === "A";
const isNPEDHitB = cat === "B";
const isNPEDHitC = cat === "C";
const isNPEDHitD = cat === "D";
const reason = getNPEDReason(sighting);
const insuranceStatus = reason ? reason["INSURANCE STATUS"] : null;
const motStatus = reason ? reason["MOT STATUS"] : null;
const taxStatus = reason ? reason["TAX STATUS"] : null;
return (
<>
@@ -133,6 +142,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
{isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitD && <img src={NPED_CAT_D} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
</div>
{hotlistNames && hotlistNames.length > 0 && (
<div className="flex flex-col border-b border-gray-600 mb-4">
@@ -158,44 +168,97 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>
<dl className="mt-3 gap-x-4 gap-y-2 text-sm">
<div>
<dt className="text-gray-300">VRM</dt>
<dd className="font-medium text-2xl break-all">{sighting?.vrm ?? "-"}</dd>
<dd className="font-medium text-2xl break-all font-mono tracking-wide">{sighting?.vrm ?? "-"}</dd>
</div>
{isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD ? (
<>
<div className="">
<dt className="text-gray-300 text-xl">Insurance</dt>
<dd className="font-medium text-2xl flex">
{insuranceStatus ? (
<span
className={`text-green-600 bg-green-300 w-[30%] px-2 rounded-lg border border-green-900`}
>
YES
</span>
) : (
<span className={`text-red-300 bg-red-600 w-[30%] px-2 rounded-lg border border-red-900`}>
NO
</span>
)}
</dd>
</div>
<div>
<dt className="text-gray-300 text-3xl">MOT</dt>
<dd className="font-medium text-2xl">
{motStatus ? (
<span
className={`text-green-700 bg-green-400 w-[30%] px-2 rounded-lg border border-green-900`}
>
VALID
</span>
) : (
<span className={`text-red-600 bg-red-300 w-[30%] px-2 rounded-lg border border-red-900`}>
EXPIRED
</span>
)}
</dd>
</div>
<div>
<dt className="text-gray-300 text-3xl">Tax</dt>
<dd className="font-medium text-2xl">
{taxStatus ? (
<span
className={`text-green-700 bg-green-400 w-[30%] px-2 rounded-lg border border-green-900`}
>
VALID
</span>
) : (
<span className={`text-red-600 bg-red-300 w-[30%] px-2 rounded-lg border border-red-900`}>
EXPIRED
</span>
)}
</dd>
</div>
</>
) : (
<>
<div>
<dt className="text-gray-300">Motion</dt>
<dd className="font-medium text-2xl ">{sighting?.motion ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Seen Count</dt>
<dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Motion</dt>
<dd className="font-medium text-2xl">{sighting?.motion ?? "-"}</dd>
</div>
<div>
<dt className="text-gray-300">Seen Count</dt>
<dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
</div>
{sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
<div>
<dt className="text-gray-300">Make</dt>
<dd className="font-medium text-2xl">{sighting.make}</dd>
</div>
)}
{sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
<div>
<dt className="text-gray-300">Make</dt>
<dd className="font-medium text-2xl">{sighting.make}</dd>
</div>
{sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
<div>
<dt className="text-gray-300">Model</dt>
<dd className="font-medium text-2xl">{sighting.model}</dd>
</div>
)}
{sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
<div className="sm:col-span-2">
<dt className="text-gray-300">Colour</dt>
<dd className="font-medium text-2xl">{sighting.color}</dd>
</div>
)}
<div>
<dt className="text-gray-300">Time</dt>
<dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
</div>
</>
)}
{sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
<div>
<dt className="text-gray-300">Model</dt>
<dd className="font-medium text-2xl">{sighting.model}</dd>
</div>
)}
{sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
<div className="sm:col-span-2">
<dt className="text-gray-300">Colour</dt>
<dd className="font-medium text-2xl">{sighting.color}</dd>
</div>
)}
<div>
<dt className="text-gray-300">Time</dt>
<dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
</div>
</dl>
</aside>
</div>