import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { PortfolioTabs, LocationFilter, money } from '@/components/portfolio/PortfolioTabs'; import { Users, Download, Search } from 'lucide-react'; type Tenant = { tenant: string; location: string; unit: string; email: string | null; phone: string | null; balance: number; move_in: string | null; lease_end: string | null; tenure_years: number | null; tenure_bucket: string; license_number: string | null; license_expiration: string | null; license_expired: boolean; }; export default function Tenants() { const props = usePage().props as unknown as { tenants: Tenant[]; buckets: { under_1: number; one_two: number; two_three: number; three_plus: number; total: number }; location: string | null; locationOptions: { id: number; name: string }[]; }; const { tenants, buckets, location, locationOptions } = props; const [q, setQ] = useState(''); const [delinquentOnly, setDelinquentOnly] = useState(false); const [expiredOnly, setExpiredOnly] = useState(false); const filtered = tenants.filter((t) => { if (delinquentOnly && t.balance <= 0) return false; if (expiredOnly && !t.license_expired) return false; if (!q) return true; const hay = `${t.tenant} ${t.email ?? ''} ${t.phone ?? ''} ${t.unit} ${t.location}`.toLowerCase(); return hay.includes(q.toLowerCase()); }); const exportCsv = () => { const head = ['Tenant','Location','Unit','Email','Phone','Balance','Move In','Lease End','Tenure (yrs)']; const body = filtered.map(t => [t.tenant, t.location, t.unit, t.email ?? '', t.phone ?? '', t.balance, t.move_in ?? '', t.lease_end ?? '', t.tenure_years ?? '']); 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 = `tenants-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); }; return ( <>

Tenants

Active tenants across your locations.

setQ(e.target.value)} placeholder="name, email, phone, unit…" className="w-64 rounded-md border border-border bg-background py-1.5 pl-8 pr-3 text-sm" />
router.get('/portfolio/tenants', { location: v }, { preserveState: true })} /> {filtered.length} records
{filtered.map((t, i) => ( 0 ? 'bg-destructive/5' : ''}> ))} {filtered.length === 0 && ( )}
Tenant Location Unit Contact Balance Move In Lease End Tenure Mini License Exp
{t.tenant} {t.location} {t.unit} {t.email && {t.email}} {t.phone && {t.phone}} 0 ? 'font-medium text-destructive' : 'text-muted-foreground'}`}> {t.balance ? money(t.balance) : '—'} {t.move_in ?? '—'} {t.lease_end ?? '—'} {t.tenure_years ?? '—'} {t.license_expiration ?? '—'}{t.license_expired && ' (expired)'} {t.license_number && #{t.license_number}}
No tenants match.
); } function Bucket({ label, value, tone }: { label: string; value: number; 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}

); }