import { Head, Link, router, usePage } from '@inertiajs/react'; import { PortfolioTabs, LocationFilter } from '@/components/portfolio/PortfolioTabs'; import { ArrowLeft } from 'lucide-react'; type Month = { month: string; counts: Record; projected: Record; non_renewal_projected: number; broken_projected: number; scheduled_move_outs: number; grand_total_mo: number; }; export default function MonthlyProjections() { const props = usePage().props as unknown as { months: Month[]; location: string | null; locationOptions: { id: number; name: string }[]; rates: Record; }; const { months, location, locationOptions, rates } = props; return ( <>
Back to Lease List

Upcoming 12 months

Each cell shows the renewal count and the projected move-outs in parentheses, using the non-renewal rates: 1st {Math.round(rates.first * 100)}%, 2nd {Math.round(rates.second * 100)}%, 3rd {Math.round(rates.third * 100)}%, long term {Math.round(rates.long_term * 100)}%.

router.get('/portfolio/monthly-projections', { location: v }, { preserveState: true })} />
{months.map((m) => { const totalCount = m.counts.first + m.counts.second + m.counts.third + m.counts.long_term; return ( ); })}
Month 1st renewal 2nd renewal 3rd renewal Long term Non renewal proj Broken proj Scheduled MO Grand total MO
{m.month} −{m.broken_projected} {m.scheduled_move_outs > 0 ? `−${m.scheduled_move_outs}` : 0} −{m.grand_total_mo}
); } function Cell({ n, p, tone }: { n: number; p: number; tone?: string }) { return ( {n} {p > 0 && −{p}} ); }