import { Head, router, useForm } from '@inertiajs/react'; import { Pencil, Shield, Trash2, UserRound } from 'lucide-react'; import { useState } from 'react'; import { AdminSurface, AdminSurfaceBar } from '@/components/admin-surface'; import { BulkActionsBar, BulkDeleteButton } from '@/components/bulk-actions-bar'; import { useConfirm } from '@/components/confirm-dialog-provider'; 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 { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { useBulkSelection } from '@/hooks/use-bulk-selection'; import AdminLayout from '@/layouts/admin-layout'; import { useT } from '@/lib/i18n'; import { relativeTime } from '@/lib/relative-time'; import { dashboard as adminDashboard } from '@/routes/admin'; import { start as adminImpersonateStart } from '@/routes/admin/impersonate'; import { destroy as adminUsersDestroy, index as adminUsersIndex, updateByok as adminUsersUpdateByok, updateRole as adminUsersUpdateRole, } from '@/routes/admin/users'; type ByokMode = 'inherit' | 'enabled' | 'disabled'; type UserRow = { id: number; name: string; email: string; role: 'customer' | 'super_admin'; workspaces_count: number; owned_count: number; created_at: string | null; byok_mode: ByokMode; }; type Props = { users: UserRow[]; pagination: PaginationMeta; filters: { q: string }; byok_globally_enabled: boolean; current_user_id: number | null; }; const USERS_ONLY = ['users', 'pagination', 'filters']; export default function AdminUsers({ users, pagination, filters, byok_globally_enabled, current_user_id, }: Props) { const { t } = useT(); const confirm = useConfirm(); const [editing, setEditing] = useState(null); const selection = useBulkSelection(); const pageIds = users.map((u) => String(u.id)); const promote = (id: number, to: 'customer' | 'super_admin') => { router.patch( adminUsersUpdateRole.url(id), { role: to }, { preserveScroll: true }, ); }; const setByok = (id: number, mode: ByokMode) => { router.patch( adminUsersUpdateByok.url(id), { mode }, { preserveScroll: true }, ); }; const destroy = async (user: UserRow) => { const ok = await confirm({ title: t('Delete user?'), message: user.owned_count > 0 ? t( ':email owns :count workspace(s). Delete will fail unless ownership is transferred first. Continue anyway?', { email: user.email, count: user.owned_count, }, ) : t( 'Delete :email? They lose access to every workspace. Soft-delete preserves the row for audit.', { email: user.email }, ), confirmLabel: t('Delete'), danger: true, }); if (!ok) { return; } router.delete(adminUsersDestroy.url(user.id), { preserveScroll: true, }); }; return ( {t('All users')} {t(':count users', { count: pagination.total.toLocaleString(), })} {t('BYOK global: :state', { state: byok_globally_enabled ? t('on') : t('off'), })}
{users.length === 0 ? ( ) : ( users.map((user) => ( )) )}
{ if (el) { el.indeterminate = !selection.allOnPageSelected( pageIds, ) && selection.someOnPageSelected( pageIds, ); } }} onChange={() => selection.togglePage(pageIds) } className="size-3.5 cursor-pointer rounded border-input" /> {t('User')} {t('Role')} {t('Workspace access')} {t('Joined')} {t('BYOK')} {t('Actions')}

{t('No matching users')}

{t( 'No users match the current admin search.', )}

{ const nativeEvent = ( e as unknown as { nativeEvent: MouseEvent; } ).nativeEvent; selection.toggle( String(user.id), { shiftKey: nativeEvent?.shiftKey ?? false, pageIds, }, ); }} onClick={(e) => e.stopPropagation() } className="size-3.5 cursor-pointer rounded border-input" />

{user.name}

{user.email}

{user.role === 'super_admin' ? ( ) : null} {user.role === 'super_admin' ? t('super admin') : t('customer')}

{user.workspaces_count === 1 ? t( ':count total workspace', { count: user.workspaces_count.toLocaleString(), }, ) : t( ':count total workspaces', { count: user.workspaces_count.toLocaleString(), }, )}

{t(':count owned', { count: user.owned_count.toLocaleString(), })}

{relativeTime(user.created_at, '—')}
{user.role === 'customer' ? ( <> ) : ( )} {user.id !== current_user_id && ( )}
{editing !== null && ( setEditing(null)} /> )} { router.post( '/admin/users/bulk-destroy', { ids: Array.from(selection.selected).map((id) => Number(id), ), }, { preserveScroll: true, onSuccess: () => selection.clear(), }, ); }} /> ); } function EditUserDialog({ user, onClose, }: { user: UserRow; onClose: () => void; }) { const { t } = useT(); const form = useForm({ name: user.name, email: user.email }); return ( { if (!open) { onClose(); } }} > {t('Edit user')}
{ e.preventDefault(); form.patch(`/admin/users/${user.id}`, { preserveScroll: true, onSuccess: onClose, }); }} className="grid gap-3" >
form.setData('name', e.target.value) } required /> {form.errors.name && (

{form.errors.name}

)}
form.setData('email', e.target.value) } required /> {form.errors.email && (

{form.errors.email}

)}
); }