import { Head, usePage } from '@inertiajs/react'; import { ChartWidget } from '@/components/widgets/ChartWidget'; import { TrendWidget } from '@/components/widgets/TrendWidget'; type Widget = { id?: string; type: string; title?: string; metric?: string; data?: { value: number | null; unit: string; period?: { start: string; end: string }; change_percent?: number | null }; }; function fmt(value: number | null | undefined, unit = 'number') { 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) => { if (['line', 'bar', 'area'].includes(w.type) && w.metric) { return ; } if (w.type === 'trend' && w.metric) { return ; } // default KPI return (

{w.title ?? w.metric}

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

{w.data?.period &&

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

}

); })}

); }