import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { PortfolioTabs } from '@/components/portfolio/PortfolioTabs'; import { Building2, ChevronRight, Loader2 } from 'lucide-react'; type Loc = { location_id: number | null; name: string; units: number; occupied: number; vacant: number; occupancy_rate: number; expiring_soon: number; move_ins: number; move_outs: number; net: number; }; type Totals = { locations: number; units: number; occupied: number; vacant: number; move_ins: number; move_outs: number; net: number; expiring_soon: number; occupancy_rate: number; }; type Prev = { period: { start: string; end: string }; move_ins: number; move_outs: number; net: number }; function rateColor(rate: number) { if (rate >= 90) return 'text-emerald-600'; if (rate >= 75) return 'text-foreground'; return 'text-amber-600'; } export default function Overview() { const props = usePage().props as unknown as { totals: Totals; locations: Loc[]; window: number; movement: number; seesAll: boolean; }; const { totals, locations, window: win, movement, seesAll } = props; const [prev, setPrev] = useState>({}); const loadPrev = async (key: string, location?: string) => { setPrev((p) => ({ ...p, [key]: 'loading' })); try { const res = await fetch(`/portfolio/previous-movement?days=${movement}&location=${encodeURIComponent(location ?? '')}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }); setPrev((p) => ({ ...p, [key]: await res.json() })); } catch { setPrev((p) => { const n = { ...p }; delete n[key]; return n; }); } }; return ( <>

Portfolio

{seesAll ? 'All locations' : 'Your assigned locations'} · live from Rentec

Company Totals {totals.locations} locations

{totals.occupancy_rate}% occupied

{totals.expiring_soon} exp ≤ {win}d

loadPrev('__all__')} days={movement} />
{locations.map((l) => (

{l.name}

{l.occupancy_rate}% occupied

{l.expiring_soon} exp ≤ {win}d

loadPrev(l.name, l.name)} days={movement} small />
))} {locations.length === 0 && (

No locations available. If you're not an administrator, ask to be assigned to a location.

)}
); } function PrevLink({ state, onClick, days, small }: { state?: Prev | 'loading'; onClick: () => void; days: number; small?: boolean }) { const cls = small ? 'text-[11px]' : 'text-xs'; if (state === 'loading') { return

loading…

; } if (state) { return (

Prev {days}d: {state.move_ins} in · {state.move_outs} out ·{' '} = 0 ? 'font-medium text-emerald-600' : 'font-medium text-destructive'}> {state.net > 0 ? '+' : ''}{state.net} net

); } return ( ); } function Stat({ label, value, signed }: { label: string; value: number; signed?: boolean }) { const color = signed ? (value > 0 ? 'text-emerald-600' : value < 0 ? 'text-destructive' : 'text-foreground') : 'text-foreground'; return (

{signed && value > 0 ? '+' : ''}{value.toLocaleString()}

{label}

); } function Mini({ label, value, signed }: { label: string; value: number; signed?: boolean }) { const color = signed ? (value > 0 ? 'text-emerald-600' : value < 0 ? 'text-destructive' : 'text-foreground') : 'text-foreground'; return (

{signed && value > 0 ? '+' : ''}{value}

{label}

); }