import { Head, router, usePage } from '@inertiajs/react'; import { PortfolioTabs, LocationFilter, money } from '@/components/portfolio/PortfolioTabs'; import { CalendarClock, Download } 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; }; /** Urgency banding — mirrors how the ops team scans the list. */ 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: { first: number; second: number; third: number; long_term: number; total: number; outstanding_balance: number; monthly_rent: number }; 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

Leases ending within the selected window.

go({ location: v })} />
{rows.map((r, i) => ( ))} {rows.length === 0 && ( )}
Location Unit Tenant Balance Tenure Move In Lease End Days Left
{r.location} {r.unit} {r.tenant} 0 ? 'font-medium text-destructive' : 'text-muted-foreground'}`}> {r.balance ? money(r.balance) : '—'} {r.tenure_years ?? '—'} {r.move_in ?? '—'} {r.lease_end} {r.days_left}
No leases expiring in this window.
); } function Chip({ label, value, tone }: { label: string; value: number | 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', }; return (

{value}

{label}

); }