import { Head, usePage } from '@inertiajs/react'; import { PortfolioTabs } from '@/components/portfolio/PortfolioTabs'; import { Building2 } 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 = Loc extends never ? never : { locations: number; units: number; occupied: number; vacant: number; move_ins: number; move_outs: number; net: number; expiring_soon: number; occupancy_rate: 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 { totals, locations, window: win, seesAll } = usePage().props as unknown as { totals: Totals; locations: Loc[]; window: number; seesAll: boolean; }; return ( <>

Portfolio

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

{/* Company totals */}

Company Totals {totals.locations} locations

{totals.occupancy_rate}% occupied

{totals.expiring_soon} exp ≤{win}d

{/* Per-location cards */}
{locations.map((l) => (

{l.name}

{l.occupancy_rate}% occupied

{l.expiring_soon} exp ≤{win}d

))} {locations.length === 0 && (

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

)}
); } 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}

); }