import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { PortfolioTabs } from '@/components/portfolio/PortfolioTabs'; import { MovementModal } from '@/components/portfolio/MovementModal'; import { ReportHeader } from '@/components/portfolio/ReportHeader'; import { ExpiringTooltip } from '@/components/portfolio/ExpiringTooltip'; 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; freshness?: any; expiringBreakdown?: any; }; const { totals, locations, window: win, movement, seesAll, freshness, expiringBreakdown } = props; const [modal, setModal] = useState<{ title: string; location: string | null } | null>(null); return ( <>

Portfolio

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

Company Totals {totals.locations} locations

{totals.occupancy_rate}% occupied

setModal({ title: 'All Locations', location: null })} days={movement} />
{locations.map((l) => (

{l.name}

{l.occupancy_rate}% occupied

{l.expiring_soon} exp ≤ {win}d

setModal({ title: l.name, location: l.name })} days={movement} small />
))} {locations.length === 0 && (

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

)}
{modal && setModal(null)} />} ); } function PrevBtn({ onClick, days, small }: { onClick: () => void; days: number; small?: boolean }) { 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}

); }