import { Head, Link, router, usePage } from '@inertiajs/react'; import { PortfolioTabs, LocationFilter, money } from '@/components/portfolio/PortfolioTabs'; import { CalendarClock, Download, ArrowRight } from 'lucide-react'; type Row = { lease_id: number | null; location: string; unit: string; tenant: string; balance: number; tenure_years: number | null; move_in: string | null; lease_begin: string | null; lease_end: string; days_left: number; recurring_rent: number; license_number: string | null; license_expiration: string | null; license_expired: boolean; }; type Summary = { counts: Record; projected: Record; total_leases: number; non_renewal_projected: number; broken_projected: number; scheduled_move_outs: number; grand_total_projected_mo: number; outstanding_balance: number; }; function rowTone(days: number) { if (days <= 30) return 'bg-destructive/5'; if (days <= 60) return 'bg-amber-500/5'; return ''; } export default function Retention() { const props = usePage().props as unknown as { rows: Row[]; summary: Summary; location: string | null; window: number; locationOptions: { id: number; name: string }[]; }; const { rows, summary, location, window: win, locationOptions } = props; const go = (params: Record) => router.get('/portfolio/retention', { location: location ?? '', window: win, ...params }, { preserveState: true }); const exportCsv = () => { const head = ['Location','Unit','Tenant','Balance','Tenure (yrs)','Move In','Lease Begin','Lease End','Days Left','Monthly Rent']; const body = rows.map(r => [r.location, r.unit, r.tenant, r.balance, r.tenure_years ?? '', r.move_in ?? '', r.lease_begin ?? '', r.lease_end, r.days_left, r.recurring_rent]); const csv = [head, ...body].map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' })); const a = document.createElement('a'); a.href = url; a.download = `retention-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); }; return ( <>

Retention

Expiring leases, renewal buckets, and projected move-outs.

{/* Grand total banner */}
{summary.grand_total_projected_mo} Grand total projected MO
{/* Renewal tiles: count on top, projected MO underneath */}
go({ location: v })} /> Monthly Projections {rows.length} leases
{rows.map((r, i) => ( ))} {rows.length === 0 && ( )}
Location Unit Tenant Balance Tenure (yrs) Move In Lease Begin Lease End Days Left Mini License Exp
{r.location} {r.unit} {r.tenant} {r.balance ? money(r.balance) : '—'} {r.tenure_years ?? '—'} {r.move_in ?? '—'} {r.lease_begin ?? '—'} {r.lease_end} {r.days_left} {r.license_expiration ?? '—'}{r.license_expired && ' (expired)'} {r.license_number && #{r.license_number}}
No leases expiring in this window.
); } function Tile({ label, count, proj, projLabel, tone }: { label: string; count?: number; proj?: number; projLabel?: string; tone?: string; }) { const tones: Record = { rose: 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-300', amber: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300', yellow: 'border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300', emerald: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300', slate: 'border-slate-300 bg-slate-100 text-slate-700 dark:border-slate-500/30 dark:bg-slate-500/10 dark:text-slate-300', dark: 'border-slate-800 bg-slate-800 text-white', }; return (
{count !== undefined &&

{count}

}

{label}

{proj !== undefined && ( <>

{proj}

{projLabel ?? 'Projected MO'}

)}
); }