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

package/dist/components/UserListComponent.js

@@ -2,11 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Box, Typography, FormControl, Select, MenuItem, Button, Tooltip, CircularProgress, Alert, TextField, } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
 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, showNewColumn = true, showSuccessfulLoginColumn = true, showRoleColumn = true, onChangeRole = null, showDeleteAction = true, canDeleteUser = null, onDeleteUser = null, }) {
     const { t } = useTranslation();
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -44,7 +46,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 +60,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 +103,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,
@@ -98,6 +123,7 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         }
         return (user === null || user === void 0 ? void 0 : user.username) || '';
     };
+    const renderBooleanStatusIcon = (value, positiveLabel, negativeLabel) => (_jsx(Tooltip, { title: value ? positiveLabel : negativeLabel, children: _jsx("span", { children: value ? (_jsx(CheckCircleIcon, { color: "success", fontSize: "small" })) : (_jsx(CancelIcon, { color: "error", fontSize: "small" })) }) }));
     const getExtraColumnSortValue = (column, user) => {
         var _a;
         const valueContext = { user, currentUser, extraContext, t };
@@ -184,45 +210,70 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             {
                 field: 'email',
                 headerName: t('Auth.EMAIL_LABEL', 'Email'),
-                minWidth: 240,
-                flex: 1.2,
+                minWidth: 220,
+                maxWidth: 340,
+                flex: 1,
             },
             {
                 field: 'name',
                 headerName: t('Profile.NAME_LABEL', 'Name'),
-                minWidth: 220,
-                flex: 1,
+                minWidth: 180,
+                maxWidth: 260,
+                flex: 0.9,
                 valueGetter: (_value, row) => getUserDisplayName(row),
             },
-            {
+        ];
+        if (showNewColumn) {
+            baseColumns.push({
+                field: 'is_new',
+                headerName: t('UserList.NEW', 'New'),
+                minWidth: 90,
+                maxWidth: 110,
+                flex: 0.35,
+                align: 'center',
+                headerAlign: 'center',
+                valueGetter: (_value, row) => { var _a; return Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)); },
+                renderCell: (params) => {
+                    var _a, _b, _c;
+                    return renderBooleanStatusIcon(Boolean(((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.profile) === null || _b === void 0 ? void 0 : _b.is_new) || ((_c = params.row) === null || _c === void 0 ? void 0 : _c.is_new)), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
+                },
+            });
+        }
+        if (showSuccessfulLoginColumn) {
+            baseColumns.push({
                 field: 'successful_login',
                 headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
-                minWidth: 180,
-                flex: 0.8,
+                minWidth: 120,
+                maxWidth: 150,
+                flex: 0.4,
+                align: 'center',
+                headerAlign: 'center',
                 valueGetter: (_value, row) => { var _a; return Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login); },
                 renderCell: (params) => {
                     var _a, _b, _c;
-                    return (_jsx(Typography, { variant: "body2", children: Boolean((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.successful_login) !== null && _b !== void 0 ? _b : (_c = params.row) === null || _c === void 0 ? void 0 : _c.last_login)
-                            ? t('Common.YES', 'Yes')
-                            : t('Common.NO', 'No') }));
+                    return renderBooleanStatusIcon(Boolean((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.successful_login) !== null && _b !== void 0 ? _b : (_c = params.row) === null || _c === void 0 ? void 0 : _c.last_login), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
                 },
-            },
-            {
+            });
+        }
+        if (showRoleColumn) {
+            baseColumns.push({
                 field: 'role',
                 headerName: t('UserList.ROLE', 'Role'),
                 minWidth: 180,
-                flex: 0.8,
+                maxWidth: 240,
+                flex: 0.7,
                 valueGetter: (_value, row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
                 renderCell: (params) => {
                     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,
             minWidth: Number(column.minWidth) || 180,
+            maxWidth: Number(column.maxWidth) || 320,
             flex: Number(column.flex) || 0.9,
             sortable: column.sortable !== false,
             align: column.align || 'left',
@@ -237,11 +288,16 @@ 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),
-            flex: 1.4,
+            minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
+            maxWidth: Math.max(360, 120 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 120),
+            flex: 1.1,
             sortable: false,
             filterable: false,
             disableColumnMenu: true,
@@ -262,13 +318,17 @@ 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,
+        showNewColumn,
+        showSuccessfulLoginColumn,
+        showRoleColumn,
+        showDeleteAction,
         visibleExtraColumns,
         visibleRowActions,
         listContext,
@@ -277,6 +337,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

@@ -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, userListShowNewColumn = true, userListShowSuccessfulLoginColumn = true, 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, showNewColumn: userListShowNewColumn, showSuccessfulLoginColumn: userListShowSuccessfulLoginColumn, 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

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

package/src/components/UserListComponent.jsx

@@ -12,6 +12,8 @@ import {
   TextField,
 } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
@@ -26,6 +28,13 @@ export function UserListComponent({
     extraContext = null,
     refreshTrigger = 0,
     canEditUser,
+    showNewColumn = true,
+    showSuccessfulLoginColumn = true,
+    showRoleColumn = true,
+    onChangeRole = null,
+    showDeleteAction = true,
+    canDeleteUser = null,
+    onDeleteUser = null,
 }) {
   const { t } = useTranslation();
   const [users, setUsers] = useState([]);
@@ -63,7 +72,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 +85,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 +126,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,
@@ -132,6 +163,18 @@ export function UserListComponent({
     return user?.username || '';
   };
 
+  const renderBooleanStatusIcon = (value, positiveLabel, negativeLabel) => (
+    <Tooltip title={value ? positiveLabel : negativeLabel}>
+      <span>
+        {value ? (
+          <CheckCircleIcon color="success" fontSize="small" />
+        ) : (
+          <CancelIcon color="error" fontSize="small" />
+        )}
+      </span>
+    </Tooltip>
+  );
+
   const getExtraColumnSortValue = (column, user) => {
     const valueContext = { user, currentUser, extraContext, t };
 
@@ -223,35 +266,63 @@ export function UserListComponent({
       {
         field: 'email',
         headerName: t('Auth.EMAIL_LABEL', 'Email'),
-        minWidth: 240,
-        flex: 1.2,
+        minWidth: 220,
+        maxWidth: 340,
+        flex: 1,
       },
       {
         field: 'name',
         headerName: t('Profile.NAME_LABEL', 'Name'),
-        minWidth: 220,
-        flex: 1,
+        minWidth: 180,
+        maxWidth: 260,
+        flex: 0.9,
         valueGetter: (_value, row) => getUserDisplayName(row),
       },
-      {
+    ];
+
+    if (showNewColumn) {
+      baseColumns.push({
+        field: 'is_new',
+        headerName: t('UserList.NEW', 'New'),
+        minWidth: 90,
+        maxWidth: 110,
+        flex: 0.35,
+        align: 'center',
+        headerAlign: 'center',
+        valueGetter: (_value, row) => Boolean(row?.profile?.is_new || row?.is_new),
+        renderCell: (params) => renderBooleanStatusIcon(
+          Boolean(params.row?.profile?.is_new || params.row?.is_new),
+          t('Common.YES', 'Yes'),
+          t('Common.NO', 'No'),
+        ),
+      });
+    }
+
+    if (showSuccessfulLoginColumn) {
+      baseColumns.push({
         field: 'successful_login',
         headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
-        minWidth: 180,
-        flex: 0.8,
+        minWidth: 120,
+        maxWidth: 150,
+        flex: 0.4,
+        align: 'center',
+        headerAlign: 'center',
         valueGetter: (_value, row) => Boolean(row?.successful_login ?? row?.last_login),
-        renderCell: (params) => (
-          <Typography variant="body2">
-            {Boolean(params.row?.successful_login ?? params.row?.last_login)
-              ? t('Common.YES', 'Yes')
-              : t('Common.NO', 'No')}
-          </Typography>
+        renderCell: (params) => renderBooleanStatusIcon(
+          Boolean(params.row?.successful_login ?? params.row?.last_login),
+          t('Common.YES', 'Yes'),
+          t('Common.NO', 'No'),
         ),
-      },
-      {
+      });
+    }
+
+    if (showRoleColumn) {
+      baseColumns.push({
         field: 'role',
         headerName: t('UserList.ROLE', 'Role'),
         minWidth: 180,
-        flex: 0.8,
+        maxWidth: 240,
+        flex: 0.7,
         valueGetter: (_value, row) => row?.role || 'none',
         renderCell: (params) => {
           const user = params.row;
@@ -267,13 +338,14 @@ export function UserListComponent({
             </FormControl>
           );
         },
-      },
-    ];
+      });
+    }
 
     const mappedExtraColumns = visibleExtraColumns.map((column) => ({
       field: `extra:${column.key}`,
       headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
       minWidth: Number(column.minWidth) || 180,
+      maxWidth: Number(column.maxWidth) || 320,
       flex: Number(column.flex) || 0.9,
       sortable: column.sortable !== false,
       align: column.align || 'left',
@@ -290,11 +362,18 @@ 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),
-      flex: 1.4,
+      minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
+      maxWidth: Math.max(360, 120 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 120),
+      flex: 1.1,
       sortable: false,
       filterable: false,
       disableColumnMenu: true,
@@ -332,21 +411,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 +437,10 @@ export function UserListComponent({
   }, [
     t,
     roles,
+    showNewColumn,
+    showSuccessfulLoginColumn,
+    showRoleColumn,
+    showDeleteAction,
     visibleExtraColumns,
     visibleRowActions,
     listContext,
@@ -364,6 +449,7 @@ export function UserListComponent({
     extraContext,
     loadUsers,
     canEdit,
+    canDelete,
   ]);
 
   return (

package/src/pages/AccountPage.jsx

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