From 10a9d31b94cfe5f5e7d0227123e003d61359bfd1 Mon Sep 17 00:00:00 2001
From: renee-png <renee@avriacam.com>
Date: Sun, 7 Jun 2026 20:23:07 -0400
Subject: [PATCH] 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>
---
 src/pages/RVBoatLotsPage.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/pages/RVBoatLotsPage.tsx b/src/pages/RVBoatLotsPage.tsx
index ae5e14a..8eb9d50 100644
--- a/src/pages/RVBoatLotsPage.tsx
+++ b/src/pages/RVBoatLotsPage.tsx
@@ -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()}` : ""}
-                                {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>
-                            )}
+                            {(() => {
+                              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>
+                              );
+                            })()}
                           </TableCell>
                           <TableCell className="text-sm">{r.vehicle_description || "-"}</TableCell>
                           <TableCell className="text-sm">{r.start_date}</TableCell>