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 { formatRoleName } from '@admin/lib/format-role-name'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditRole from '@admin/pages/roles/edit-role'; import type { PermissionSection } from '@admin/components/ui/forms/permission-matrix'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type RoleRow = { id: number; name: string; permissions_count: number; users_count: number; is_protected: boolean; }; type RolesIndexProps = { roles: RoleRow[]; permissionSections: PermissionSection[]; }; function RolesIndex({ roles, permissionSections }: RolesIndexProps) { const { canEdit, canDelete } = useCrudPermissions('role'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; role: RoleRow | null }>({ show: false, role: null }); const columns: DataTableColumn[] = [ { header: 'Role', key: 'name', render: (row) => formatRoleName(row.name) }, { header: 'Permissions', key: 'permissions_count' }, { header: 'Users', key: 'users_count' }, { header: 'Type', key: 'is_protected', render: (row) => (row.is_protected ? 'System' : 'Custom'), }, ]; const handleEdit = async (row: RoleRow) => { try { const response = await fetch(`/admin/edit_role/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch role'); } const roleData = (await response.json()) as RoleRow & { permissions: string[]; is_protected: boolean; }; setInitialData(roleData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load role details'); } }; return ( <>

setDeleteModal({ show: true, role: row }) : undefined} canDeleteRow={(row) => !row.is_protected} showEdit={canEdit} showDelete={canDelete} noDataText="No roles found" />

setDeleteModal({ show: false, role: null })} itemName={deleteModal.role ? formatRoleName(deleteModal.role.name) : 'this role'} itemType="role" deleteEndpoint={`/admin/api/delete_role/${deleteModal.role?.id ?? ''}`} loadingMessage="Deleting role..." /> setIsEditModalOpen(false)} initialData={initialData} permissionSections={permissionSections} /> ); } export default Object.assign(RolesIndex, { layout: dashboardPersistentLayout('Roles', 'Create roles and assign permissions to staff'), });