import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { FileText, Plus, Play, Download, Trash2 } from 'lucide-react'; type Metric = { key: string; name: string }; type Report = { id: number; name: string; format: string; frequency: string; metric_count: number; recipients: string[]; is_active: boolean; last_run_at: string | null; last_status: string | null; }; export default function Reports() { const props = usePage().props as unknown as { reports: Report[]; metrics: Metric[] }; const { reports, metrics } = props; const [form, setForm] = useState({ name: '', format: 'csv', frequency: 'manual', metric_keys: [] as string[], recipients: '' }); const toggle = (k: string) => setForm((f) => ({ ...f, metric_keys: f.metric_keys.includes(k) ? f.metric_keys.filter((x) => x !== k) : [...f.metric_keys, k] })); const create = () => { if (!form.name || form.metric_keys.length === 0) return; router.post('/reports', { ...form, recipients: form.recipients.split(',').map((s) => s.trim()).filter(Boolean), }, { preserveScroll: true, onSuccess: () => setForm({ name: '', format: 'csv', frequency: 'manual', metric_keys: [], recipients: '' }) }); }; return ( <>

Reports

New report

setForm({ ...form, name: e.target.value })} placeholder="Report name" className="rounded-md border border-border bg-background px-3 py-2 text-sm" />

Metrics to include

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

setForm({ ...form, recipients: e.target.value })} placeholder="Email recipients (comma-separated)" className="rounded-md border border-border bg-background px-3 py-2 text-sm" />

{reports.map((r) => (

{r.name}

{r.format.toUpperCase()} · {r.frequency} · {r.metric_count} metrics {r.last_run_at && ` · last run ${r.last_run_at} (${r.last_status})`}

{r.last_status === 'success' && ( )}

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

No reports yet. Create one above to generate and schedule metric exports.

)}

); }