import { Head, router, useForm } from '@inertiajs/react'; import { PlanLimitBanner, usePlanLimit } from '@/components/plan-limit-banner'; import { TablePagination } from '@/components/table-pagination'; import type { PaginationMeta } from '@/components/table-pagination'; import { TableSearch } from '@/components/table-search'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import { destroy as destroyInvitation } from '@/routes/invitations'; import { destroy as destroyMember, store as storeMember, } from '@/routes/members'; import type { BreadcrumbItem } from '@/types'; type Member = { id: string; role: string; user: { id: number; name: string; email: string }; }; type Pending = { id: string; email: string; role: string; expires_at: string }; type Props = { members: Member[]; pendingInvitations: Pending[]; pagination: PaginationMeta; filters: { q: string }; }; export default function MembersIndex({ members, pendingInvitations, pagination, filters, }: Props) { const { t } = useT(); const form = useForm<{ email: string; role: string }>({ email: '', role: 'editor', }); const memberLimit = usePlanLimit('member'); const canInvite = memberLimit === null || memberLimit.limit === null || (memberLimit.allowed && (memberLimit.remaining ?? 1) > 0); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Members'), href: '/app/members' }, ]; return (

{t('Members')}

{t('Invite a teammate')}

{ e.preventDefault(); form.post(storeMember.url(), { onSuccess: () => form.reset(), }); }} className="grid gap-3 md:grid-cols-[1fr_180px_auto]" >
form.setData('email', e.target.value) } /> {form.errors.email && (

{form.errors.email}

)}

{t('Current members (:total)', { total: pagination.total, })}

{members.map((m) => (

{m.user.name}

{m.user.email}

{m.role} {m.role !== 'owner' && ( )}
))}
{pendingInvitations.length > 0 && (

{t('Pending invitations')}

{pendingInvitations.map((inv) => (

{inv.email}

{inv.role}
))}
)}
); }