import { Head, usePage } from '@inertiajs/react'; type Widget = { type: string; title?: string; metric?: string; data?: { value: number | null; unit: string; period?: { start: string; end: string }; freshness?: string }; }; function format(value: number | null | undefined, unit: string): string { if (value === null || value === undefined) return '—'; if (unit === 'currency') return '$' + value.toLocaleString(undefined, { maximumFractionDigits: 0 }); if (unit === 'percent') return value + '%'; return value.toLocaleString(); } export default function DashboardShow() { const { dashboard, widgets } = usePage().props as unknown as { dashboard: { name: string }; widgets: Widget[]; }; return ( <>

{dashboard.name}

{widgets.map((w, i) => (

{w.title ?? w.metric}

{format(w.data?.value, w.data?.unit ?? 'number')}

{w.data?.period && (

{w.data.period.start} → {w.data.period.end}

)}

))}

); }