import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Mail, Trash2, RefreshCw, UserPlus } from 'lucide-react'; type Member = { id: number; name: string; email: string; role: string; joined_at: string }; type Invite = { id: number; email: string; role: string; expired: boolean; expires_at: string }; export default function OrganizationShow() { const props = usePage().props as unknown as { organization: { id: number; name: string }; members: Member[]; invitations: Invite[]; roles: string[]; }; const { organization, members, invitations, roles } = props; const [email, setEmail] = useState(''); const [role, setRole] = useState('viewer'); const invite = () => { if (!email.trim()) return; router.post(`/admin/organizations/${organization.id}/invitations`, { email, org_role: role }, { preserveScroll: true, onSuccess: () => setEmail('') }); }; return ( <>

{organization.name}

Invite someone

setEmail(e.target.value)} type="email" placeholder="email@example.com" className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm" />

Members ({members.length})

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

Name	Email	Role
{m.name}	{m.email}	{m.role}

{invitations.length > 0 && (

Pending invitations

{invitations.map((i) => (

{i.email} {i.role} {i.expired && expired}

))}

)}

); }