RV/Boat Lots: insurance expiring-soon / expired indicator

Color-code each rental's insurance status like vendors: red when expired,
amber when expiring within 90 days (with days remaining), green otherwise.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-07 20:23:07 -04:00
parent 308af20aa1
commit 10a9d31b94
+20 -7
View File
@@ -664,15 +664,28 @@ export default function RVBoatLotsPage() {
{r.status === "vacating" && <Badge variant="outline" className="text-[10px] border-amber-300 text-amber-700">Vacating</Badge>}
</div>
<div className="text-xs text-muted-foreground">{r.renter_email}</div>
{r.insurance_carrier ? (
<div className="text-xs text-emerald-700 mt-0.5">
Insured: {r.insurance_carrier}
{r.insurance_expiration_date ? ` · exp ${new Date(r.insurance_expiration_date + "T00:00:00").toLocaleDateString()}` : ""}
{(() => {
if (!r.insurance_carrier && !r.insurance_expiration_date) {
return <div className="text-xs text-amber-600 mt-0.5">No insurance on file</div>;
}
const exp = r.insurance_expiration_date ? new Date(r.insurance_expiration_date + "T00:00:00") : null;
const today = new Date(); today.setHours(0, 0, 0, 0);
const diffDays = exp ? Math.floor((exp.getTime() - today.getTime()) / 86400000) : null;
const isExpired = diffDays !== null && diffDays < 0;
const isExpiring = diffDays !== null && diffDays >= 0 && diffDays <= 90;
const tone = isExpired ? "text-destructive font-semibold" : isExpiring ? "text-amber-600" : "text-emerald-700";
return (
<div className={`text-xs mt-0.5 ${tone}`}>
Insured: {r.insurance_carrier || "—"}
{exp && (isExpired
? ` · Expired ${exp.toLocaleDateString()}`
: isExpiring
? ` · Expires in ${diffDays}d (${exp.toLocaleDateString()})`
: ` · exp ${exp.toLocaleDateString()}`)}
{r.insurance_document_url ? <> · <a href={r.insurance_document_url} target="_blank" rel="noreferrer" className="underline">COI</a></> : null}
</div>
) : (
<div className="text-xs text-amber-600 mt-0.5">No insurance on file</div>
)}
);
})()}
</TableCell>
<TableCell className="text-sm">{r.vehicle_description || "-"}</TableCell>
<TableCell className="text-sm">{r.start_date}</TableCell>