import { Head, Link, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { PenTool, Plus } from 'lucide-react'; type Dash = { id: number; name: string; slug: string; status: string; assignments: number }; const STATUS: Record = { draft: 'bg-muted text-muted-foreground', published: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300', archived: 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300', }; export default function StudioIndex() { const { dashboards } = usePage().props as unknown as { dashboards: Dash[] }; const [name, setName] = useState(''); return ( <>

Dashboard Studio

Build dashboards and publish them to organizations.

setName(e.target.value)} placeholder="New dashboard name" className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm" />

{dashboards.map((d) => ( ))} {dashboards.length === 0 && ( )}

Name	Status	Assigned orgs
{d.name}	{d.status}	{d.assignments}	Edit
No dashboards yet. Create one above.

); }