import { Head, usePage } from '@inertiajs/react'; type Metric = { key: string; name: string; unit: string; domain: string; value: number | null; freshness: string; explanation: string | null; }; function format(value: number | null, unit: string): string { if (value === null) return '—'; if (unit === 'currency') return '$' + value.toLocaleString(undefined, { maximumFractionDigits: 0 }); if (unit === 'percent') return value + '%'; return value.toLocaleString(); } const FRESH: Record = { fresh: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300', stale: 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300', no_data: 'bg-muted text-muted-foreground', }; export default function Metrics() { const { metrics } = usePage().props as unknown as { metrics: Metric[] }; return ( <>

Metrics

Governed metrics — the same definitions your dashboards and AI Analyst use.

{metrics.length === 0 ? (

No metrics available yet. Connect a data source to populate them.

) : (
{metrics.map((m) => (

{m.name}

{m.freshness === 'no_data' ? 'no data' : m.freshness}

{format(m.value, m.unit)}

{m.explanation &&

{m.explanation}

}
))}
)}
); }