import { Users } from 'lucide-react'; import { toast } from 'sonner'; import { useEffect, useState } from 'react'; import { Head, useForm, router } from '@inertiajs/react'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { EmptyState } from '@/Components/ui/empty-state'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackEvent } from '@/lib/analytics'; import { TEAM_MANAGEMENT_VIEWED } from '@/lib/event-catalog'; import { formatDateOnly } from '@/lib/format'; type SiteRole = 'viewer' | 'editor' | 'admin'; interface SiteUser { id: number; name: string; email: string; } interface Member { id: number; user: SiteUser; role: SiteRole; accepted_at: string; } interface PendingMember { id: number; user: SiteUser | null; role: SiteRole; token_expires_at: string; invited_by: SiteUser | null; } interface TeamSite { id: number; name: string; } interface Props { site: TeamSite; members: Member[]; pending: PendingMember[]; roles: string[]; } const roleBadgeClass: Record = { viewer: 'bg-muted text-muted-foreground', editor: 'bg-info/10 text-info', admin: 'bg-primary/10 text-primary', }; function RoleBadge({ role }: { role: SiteRole }) { return ( {role.charAt(0).toUpperCase() + role.slice(1)} ); } function UserInitials({ name }: { name: string }) { const initials = name .split(' ') .map((part) => part[0]) .slice(0, 2) .join('') .toUpperCase(); return (

{initials}

); } export default function Team({ site, members, pending, roles }: Props) { useEffect(() => { trackEvent(TEAM_MANAGEMENT_VIEWED, { site_id: String(site.id) }); }, [site.id]); const [confirmingRemove, setConfirmingRemove] = useState(null); const inviteForm = useForm({ email: '', role: 'viewer' as SiteRole, }); const roleChangeForm = useForm({ role: '' as SiteRole, }); function submitInvite(e: React.FormEvent) { e.preventDefault(); inviteForm.post(route('site-members.store', site.id), { onSuccess: () => { inviteForm.reset(); toast.success('Invitation sent.'); }, }); } function changeRole(member: Member, newRole: SiteRole) { roleChangeForm.setData('role', newRole); roleChangeForm.patch(route('site-members.update', [site.id, member.id]), { onSuccess: () => toast.success(`${member.user.name}'s role updated to ${newRole}.`), }); } function revokeMember(memberId: number) { router.delete(route('site-members.destroy', [site.id, memberId]), { onSuccess: () => toast.success('Team member removed.'), onFinish: () => setConfirmingRemove(null), }); } return (

Team Members

Manage who has access to {site.name}.

{/* ── Active Members ── */}

Members

{members.length === 0 ? ( ) : (

Member Role Change Role {members.map((member) => (

{member.user.name}

{member.user.email}

{confirmingRemove === member.id ? (

) : ( )} ))}

)}

{/* ── Pending Invitations ── */} {pending.length > 0 && (

Pending Invitations

Email Role Expires {pending.map((invite) => ( {invite.user?.email ?? 'Unknown'} {formatDateOnly(invite.token_expires_at)} ))}

)} {/* ── Invite Form ── */}

Invite Member

); }