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 EditPermissionGroup from '@admin/pages/permission-groups/edit-permission-group'; import type { PermissionSection } from '@admin/components/ui/forms/permission-matrix'; import { Head } from '@inertiajs/react'; import { useState } from 'react'; type PermissionGroupRow = { id: number | null; name: string; slug: string; description: string | null; permissions_count: number; is_system: boolean; }; type PermissionGroupsIndexProps = { groups: PermissionGroupRow[]; permissionSections: PermissionSection[]; }; function PermissionGroupsIndex({ groups, permissionSections }: PermissionGroupsIndexProps) { const { canEdit, canDelete } = useCrudPermissions('role'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState<(PermissionGroupRow & { permissions?: string[] }) | null>(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; group: PermissionGroupRow | null }>({ show: false, group: null, }); const columns: DataTableColumn[] = [ { header: 'Name', key: 'name', truncate: true }, { header: 'Permissions', key: 'permissions_count' }, { header: 'Type', key: 'is_system', render: (row) => (row.is_system ? 'Module' : 'Custom'), }, { header: 'Description', key: 'description', truncate: true, render: (row) => row.description ?? '—' }, ]; const handleEdit = async (row: PermissionGroupRow) => { if (row.id === null) { return; } try { const response = await fetch(`/admin/edit_permission_group/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch permission group'); } const groupData = (await response.json()) as PermissionGroupRow & { permissions: string[] }; setInitialData(groupData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load permission group details'); } }; return ( <>

setDeleteModal({ show: true, group: row }) : undefined} canEditRow={(row) => !row.is_system} canDeleteRow={(row) => !row.is_system} showEdit={canEdit} showDelete={canDelete} noDataText="No permission groups found" />

setDeleteModal({ show: false, group: null })} itemName={deleteModal.group?.name ?? 'this permission group'} itemType="permission group" deleteEndpoint={`/admin/api/delete_permission_group/${deleteModal.group?.id ?? ''}`} loadingMessage="Deleting permission group..." /> setIsEditModalOpen(false)} initialData={initialData} permissionSections={permissionSections} /> ); } export default Object.assign(PermissionGroupsIndex, { layout: dashboardPersistentLayout('Permission groups', 'Module and custom permission bundles for role assignment'), });