npm - @micha.bigler/ui-core-micha - Versions diffs - 2.2.7 → 2.2.8 - Mend

@micha.bigler/ui-core-micha 2.2.7 → 2.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/UserListComponent.js +40 -8
package/dist/pages/AccountPage.js +2 -2
package/package.json +1 -1
package/src/components/UserListComponent.jsx +62 -21
package/src/pages/AccountPage.jsx +10 -0

package/dist/components/UserListComponent.js CHANGED Viewed

@@ -6,7 +6,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
-export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraColumns = [], extraRowActions = [], extraContext = null, refreshTrigger = 0, canEditUser, }) {
+export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraColumns = [], extraRowActions = [], extraContext = null, refreshTrigger = 0, canEditUser, showRoleColumn = true, onChangeRole = null, showDeleteAction = true, canDeleteUser = null, onDeleteUser = null, }) {
     const { t } = useTranslation();
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -44,7 +44,12 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?')))
             return;
         try {
-            await deleteUser(userId);
+            if (typeof onDeleteUser === 'function') {
+                await onDeleteUser({ userId, currentUser, extraContext, t, reloadUsers: loadUsers });
+            }
+            else {
+                await deleteUser(userId);
+            }
             setUsers(prev => prev.filter(u => u.id !== userId));
         }
         catch (err) {
@@ -53,7 +58,19 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     };
     const handleChangeRole = async (userId, newRole) => {
         try {
-            await updateUserRole(userId, newRole);
+            if (typeof onChangeRole === 'function') {
+                await onChangeRole({
+                    userId,
+                    newRole,
+                    currentUser,
+                    extraContext,
+                    t,
+                    reloadUsers: loadUsers,
+                });
+            }
+            else {
+                await updateUserRole(userId, newRole);
+            }
             await loadUsers();
         }
         catch (err) {
@@ -84,6 +101,12 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         }
         return defaultCanEdit(targetUser);
     };
+    const canDelete = (targetUser) => {
+        if (typeof canDeleteUser === 'function') {
+            return Boolean(canDeleteUser({ targetUser, currentUser, extraContext }));
+        }
+        return canEdit(targetUser);
+    };
     const listContext = useMemo(() => ({
         currentUser,
         extraContext,
@@ -207,7 +230,9 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                             : t('Common.NO', 'No') }));
                 },
             },
-            {
+        ];
+        if (showRoleColumn) {
+            baseColumns.push({
                 field: 'role',
                 headerName: t('UserList.ROLE', 'Role'),
                 minWidth: 180,
@@ -217,8 +242,8 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                     const user = params.row;
                     return (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(user), children: _jsx(Select, { value: user.role || 'none', onChange: (event) => handleChangeRole(user.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) }));
                 },
-            },
-        ];
+            });
+        }
         const mappedExtraColumns = visibleExtraColumns.map((column) => ({
             field: `extra:${column.key}`,
             headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
@@ -237,10 +262,14 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 reloadUsers: loadUsers,
             }),
         }));
+        const hasActionColumn = showDeleteAction || visibleRowActions.length > 0;
+        if (!hasActionColumn) {
+            return [...baseColumns, ...mappedExtraColumns];
+        }
         const actionColumn = {
             field: 'actions',
             headerName: t('Common.ACTIONS', 'Actions'),
-            minWidth: Math.max(220, 110 + visibleRowActions.length * 110),
+            minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
             flex: 1.4,
             sortable: false,
             filterable: false,
@@ -262,13 +291,15 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                             return (_jsx(Button, { size: "small", variant: "outlined", onClick: () => runRowAction(action, user), disabled: isBusy || isDisabled, sx: actionButtonSx, children: typeof action.label === 'function'
                                     ? action.label({ user, t, currentUser, canEdit: canEdit(user) })
                                     : action.label }, `${action.key}-${user.id}`));
-                        }), _jsx(Tooltip, { title: t('Common.DELETE', 'Delete'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(user.id), disabled: !canEdit(user), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) })] }));
+                        }), showDeleteAction && (_jsx(Tooltip, { title: t('Common.DELETE', 'Delete'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(user.id), disabled: !canDelete(user), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) }))] }));
             },
         };
         return [...baseColumns, ...mappedExtraColumns, actionColumn];
     }, [
         t,
         roles,
+        showRoleColumn,
+        showDeleteAction,
         visibleExtraColumns,
         visibleRowActions,
         listContext,
@@ -277,6 +308,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         extraContext,
         loadUsers,
         canEdit,
+        canDelete,
     ]);
     return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), _jsx(Box, { sx: { mb: 2, maxWidth: 420 }, children: _jsx(TextField, { fullWidth: true, size: "small", label: t('Common.SEARCH', 'Search'), placeholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'), value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })), !loading && (_jsx(Box, { sx: { width: '100%', minHeight: 520 }, children: _jsx(DataGrid, { rows: filteredUsers, columns: columns, disableRowSelectionOnClick: true, showToolbar: true, getRowHeight: () => 'auto', pageSizeOptions: [10, 25, 50, 100], initialState: {
                         sorting: { sortModel: [{ field: 'email', sort: 'asc' }] },

package/dist/pages/AccountPage.js CHANGED Viewed

@@ -21,7 +21,7 @@ import { QrSignupValidityManager } from '../components/QrSignupValidityManager';
 import { SupportRecoveryRequestsTab } from '../components/SupportRecoveryRequestsTab';
 import { BulkInviteCsvTab } from '../components/BulkInviteCsvTab';
 import { fetchAuthPolicy, updateUserProfile } from '../auth/authApi'; // Ggf. Pfad anpassen
-export function AccountPage({ userListExtraColumns = [], userListExtraRowActions = [], userListExtraContext = null, userListRefreshTrigger = 0, userListCanEditUser = null, showBulkInviteCsvTab = false, bulkInviteCsvProps = {}, extraTabs = [], }) {
+export function AccountPage({ userListExtraColumns = [], userListExtraRowActions = [], userListExtraContext = null, userListRefreshTrigger = 0, userListCanEditUser = null, userListShowRoleColumn = true, userListOnChangeRole = null, userListShowDeleteAction = true, userListCanDeleteUser = null, userListOnDeleteUser = null, showBulkInviteCsvTab = false, bulkInviteCsvProps = {}, extraTabs = [], }) {
     var _a;
     const { t } = useTranslation();
     const { user, login, loading } = useContext(AuthContext);
@@ -129,5 +129,5 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const activeExtraTab = builtInTabValues.has(safeTab)
         ? null
         : extraTabs.find((tab) => tab.value === safeTab);
-    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
+    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser, showRoleColumn: userListShowRoleColumn, onChangeRole: userListOnChangeRole, showDeleteAction: userListShowDeleteAction, canDeleteUser: userListCanDeleteUser, onDeleteUser: userListOnDeleteUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: { p: 2.5, borderRadius: 2 }, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/components/UserListComponent.jsx CHANGED Viewed

@@ -26,6 +26,11 @@ export function UserListComponent({
     extraContext = null,
     refreshTrigger = 0,
     canEditUser,
+    showRoleColumn = true,
+    onChangeRole = null,
+    showDeleteAction = true,
+    canDeleteUser = null,
+    onDeleteUser = null,
 }) {
   const { t } = useTranslation();
   const [users, setUsers] = useState([]);
@@ -63,7 +68,11 @@ export function UserListComponent({
   const handleDelete = async (userId) => {
     if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?'))) return;
     try {
-      await deleteUser(userId);
+      if (typeof onDeleteUser === 'function') {
+        await onDeleteUser({ userId, currentUser, extraContext, t, reloadUsers: loadUsers });
+      } else {
+        await deleteUser(userId);
+      }
       setUsers(prev => prev.filter(u => u.id !== userId));
     } catch (err) {
       alert(t(err.code || 'Auth.USER_DELETE_FAILED'));
@@ -72,7 +81,18 @@ export function UserListComponent({
   const handleChangeRole = async (userId, newRole) => {
     try {
-      await updateUserRole(userId, newRole);
+      if (typeof onChangeRole === 'function') {
+        await onChangeRole({
+          userId,
+          newRole,
+          currentUser,
+          extraContext,
+          t,
+          reloadUsers: loadUsers,
+        });
+      } else {
+        await updateUserRole(userId, newRole);
+      }
       await loadUsers();
     } catch (err) {
       alert(t(err.code || 'Auth.USER_ROLE_UPDATE_FAILED'));
@@ -102,6 +122,13 @@ export function UserListComponent({
     return defaultCanEdit(targetUser);
   };
+  const canDelete = (targetUser) => {
+    if (typeof canDeleteUser === 'function') {
+      return Boolean(canDeleteUser({ targetUser, currentUser, extraContext }));
+    }
+    return canEdit(targetUser);
+  };
   const listContext = useMemo(() => ({
     currentUser,
     extraContext,
@@ -247,7 +274,10 @@ export function UserListComponent({
           </Typography>
         ),
       },
-      {
+    ];
+    if (showRoleColumn) {
+      baseColumns.push({
         field: 'role',
         headerName: t('UserList.ROLE', 'Role'),
         minWidth: 180,
@@ -267,8 +297,8 @@ export function UserListComponent({
             </FormControl>
           );
         },
-      },
-    ];
+      });
+    }
     const mappedExtraColumns = visibleExtraColumns.map((column) => ({
       field: `extra:${column.key}`,
@@ -290,10 +320,16 @@ export function UserListComponent({
         }),
     }));
+    const hasActionColumn = showDeleteAction || visibleRowActions.length > 0;
+    if (!hasActionColumn) {
+      return [...baseColumns, ...mappedExtraColumns];
+    }
     const actionColumn = {
       field: 'actions',
       headerName: t('Common.ACTIONS', 'Actions'),
-      minWidth: Math.max(220, 110 + visibleRowActions.length * 110),
+      minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
       flex: 1.4,
       sortable: false,
       filterable: false,
@@ -332,21 +368,23 @@ export function UserListComponent({
               );
             })}
-            <Tooltip title={t('Common.DELETE', 'Delete')}>
-              <span>
-                <Button
-                  size="small"
-                  variant="outlined"
-                  color="error"
-                  startIcon={<DeleteIcon />}
-                  onClick={() => handleDelete(user.id)}
-                  disabled={!canEdit(user)}
-                  sx={actionButtonSx}
-                >
-                  {t('Common.DELETE', 'Delete')}
-                </Button>
-              </span>
-            </Tooltip>
+            {showDeleteAction && (
+              <Tooltip title={t('Common.DELETE', 'Delete')}>
+                <span>
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    color="error"
+                    startIcon={<DeleteIcon />}
+                    onClick={() => handleDelete(user.id)}
+                    disabled={!canDelete(user)}
+                    sx={actionButtonSx}
+                  >
+                    {t('Common.DELETE', 'Delete')}
+                  </Button>
+                </span>
+              </Tooltip>
+            )}
           </Box>
         );
       },
@@ -356,6 +394,8 @@ export function UserListComponent({
   }, [
     t,
     roles,
+    showRoleColumn,
+    showDeleteAction,
     visibleExtraColumns,
     visibleRowActions,
     listContext,
@@ -364,6 +404,7 @@ export function UserListComponent({
     extraContext,
     loadUsers,
     canEdit,
+    canDelete,
   ]);
   return (

package/src/pages/AccountPage.jsx CHANGED Viewed

@@ -38,6 +38,11 @@ export function AccountPage({
   userListExtraContext = null,
   userListRefreshTrigger = 0,
   userListCanEditUser = null,
+  userListShowRoleColumn = true,
+  userListOnChangeRole = null,
+  userListShowDeleteAction = true,
+  userListCanDeleteUser = null,
+  userListOnDeleteUser = null,
   showBulkInviteCsvTab = false,
   bulkInviteCsvProps = {},
   extraTabs = [],
@@ -227,6 +232,11 @@ export function AccountPage({
             extraContext={userListExtraContext}
             refreshTrigger={userListRefreshTrigger}
             canEditUser={userListCanEditUser}
+            showRoleColumn={userListShowRoleColumn}
+            onChangeRole={userListOnChangeRole}
+            showDeleteAction={userListShowDeleteAction}
+            canDeleteUser={userListCanDeleteUser}
+            onDeleteUser={userListOnDeleteUser}
           />
         </Box>
       )}