import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Users, Plus, Trash2 } from 'lucide-react'; type Space = { id: number; name: string; slug: string; description: string | null; color: string; members: number; dashboards: number; metrics: number; }; export default function Spaces() { const { spaces } = usePage().props as unknown as { spaces: Space[] }; const [form, setForm] = useState({ name: '', description: '', color: '#4C5BD4' }); const create = () => { if (!form.name) return; router.post('/spaces', form, { preserveScroll: true, onSuccess: () => setForm({ name: '', description: '', color: '#4C5BD4' }) }); }; return ( <>

Spaces

New space

setForm({ ...form, name: e.target.value })} placeholder="Space name (e.g. Marketing Team)" className="rounded-md border border-border bg-background px-3 py-2 text-sm" /> setForm({ ...form, description: e.target.value })} placeholder="Description (optional)" className="rounded-md border border-border bg-background px-3 py-2 text-sm" />
setForm({ ...form, color: e.target.value })} className="h-9 w-14 rounded border border-border" />
{spaces.map((s) => (
{s.name}
{s.description &&

{s.description}

}

{s.members} members · {s.dashboards} dashboards · {s.metrics} metrics

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

No spaces yet. Create one to group dashboards and metrics for a team.

)}
); }