import { adminToast } from '@admin/components/ui/admin-toast'; import { CrudCreateLink } from '@admin/components/ui/crud-create-link'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { useCrudPermissions } from '@admin/hooks/use-crud-permissions'; import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import { formatRoleName } from '@admin/lib/format-role-name'; import type { PermissionSection } from '@admin/components/ui/forms/permission-matrix'; import EditUser from '@admin/pages/users/edit-user'; import type { RoleOption } from '@admin/pages/users/user-form-fields'; import { Head } from '@inertiajs/react'; import { useEffect, useState } from 'react'; type UserRow = { id: number; name: string; email: string; role: string | null; status: boolean; }; type UsersIndexProps = { users: UserRow[]; permissionSections: PermissionSection[]; }; function UsersIndex({ users, permissionSections }: UsersIndexProps) { const { canEdit, canDelete } = useCrudPermissions('user'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [roles, setRoles] = useState([]); const [deleteModal, setDeleteModal] = useState<{ show: boolean; user: UserRow | null }>({ show: false, user: null, }); useEffect(() => { fetch('/admin/api/roles') .then((response) => response.json()) .then((data: RoleOption[]) => setRoles(data)) .catch(() => adminToast.error('Could not load roles')); }, []); const columns: DataTableColumn[] = [ { header: 'Name', key: 'name', truncate: true }, { header: 'Email', key: 'email', truncate: true }, { header: 'Role', key: 'role', render: (row) => formatRoleName(row.role) }, { header: 'Status', key: 'status' }, ]; const handleEdit = async (row: UserRow) => { try { const response = await fetch(`/admin/edit_user/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch user'); } const userData = (await response.json()) as UserRow & { role: string | number; permissions: string[]; }; setInitialData(userData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load user details'); } }; return ( <>

setDeleteModal({ show: true, user: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No users found" />

setDeleteModal({ show: false, user: null })} itemName={deleteModal.user?.name ?? 'this user'} itemType="user" deleteEndpoint={`/admin/api/delete_user/${deleteModal.user?.id ?? ''}`} loadingMessage="Deleting user..." /> setIsEditModalOpen(false)} initialData={initialData} roles={roles} permissionSections={permissionSections} /> ); } export default Object.assign(UsersIndex, { layout: dashboardPersistentLayout('Users', 'Manage staff accounts and roles'), });