import { Head, router, usePage } from '@inertiajs/react'; import { PortfolioTabs, LocationFilter, money } from '@/components/portfolio/PortfolioTabs'; import { DoorOpen, Download } from 'lucide-react'; type Vacancy = { location: string; unit: string; monthly_rent: number }; export default function Vacancies() { const props = usePage().props as unknown as { vacancies: Vacancy[]; location: string | null; locationOptions: { id: number; name: string }[]; }; const { vacancies, location, locationOptions } = props; const byLocation = vacancies.reduce>((acc, v) => { acc[v.location] = (acc[v.location] ?? 0) + 1; return acc; }, {}); const potential = vacancies.reduce((sum, v) => sum + (v.monthly_rent || 0), 0); const exportCsv = () => { const csv = [['Location','Unit','Monthly Rent'], ...vacancies.map(v => [v.location, v.unit, v.monthly_rent])] .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 = `vacancies-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); }; return ( <>

Vacancies

Suites without an active lease.

router.get('/portfolio/vacancies', { location: v }, { preserveState: true })} /> {vacancies.length} vacant · {money(potential)}/mo potential
{Object.keys(byLocation).length > 0 && (
{Object.entries(byLocation).sort().map(([loc, n]) => ( {loc} {n} ))}
)}
{vacancies.map((v, i) => ( ))} {vacancies.length === 0 && ( )}
Location Unit Asking Rent
{v.location} {v.unit} {v.monthly_rent ? money(v.monthly_rent) : '—'}
No vacancies — everything's leased.
); }