import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Save, Send, Trash2, Plus } from 'lucide-react'; type Metric = { key: string; name: string; unit: string; data_domain: string }; type Widget = { id: string; type: string; title?: string; metric?: string }; type Org = { id: number; name: string }; export default function StudioEdit() { const props = usePage().props as unknown as { dashboard: { id: number; name: string; status: string }; layout: { widgets: Widget[] }; metrics: Metric[]; organizations: Org[]; assignments: number[]; }; const { dashboard, metrics, organizations } = props; const [widgets, setWidgets] = useState(props.layout.widgets ?? []); const [assigned, setAssigned] = useState(props.assignments ?? []); const [picker, setPicker] = useState(''); const addKpi = () => { const m = metrics.find((x) => x.key === picker); if (!m) return; setWidgets([...widgets, { id: crypto.randomUUID(), type: 'kpi', title: m.name, metric: m.key }]); setPicker(''); }; const removeWidget = (id: string) => setWidgets(widgets.filter((w) => w.id !== id)); const save = (publish: boolean) => { const url = `/admin/studio/${dashboard.id}/${publish ? 'publish' : 'draft'}`; router.post(url, { layout: { widgets } }, { preserveScroll: true }); }; const saveAssign = () => router.post(`/admin/studio/${dashboard.id}/assign`, { organization_ids: assigned }, { preserveScroll: true }); return ( <>

{dashboard.name}

{widgets.map((w) => (

{w.type}

{w.title}

{w.metric}

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

No widgets yet. Add a KPI above.

)}

Assign to organizations

{organizations.map((o) => ( ))}
); }