@lego-box/shell 1.0.5 → 1.0.6

package/src/pages/UserManagementPage.tsx

@@ -0,0 +1,1010 @@
+import * as React from 'react';
+import {
+  Badge,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  DataTable,
+  DataTableColumn,
+  GroupedTable,
+  SearchInput,
+  FilterChip,
+  Button,
+  UserFormDialog,
+  UserFormData,
+  RoleFormDialog,
+  RoleFormData,
+  AssignUsersToRoleDialog,
+  PermissionFormDialog,
+  PermissionFormData,
+  DeleteConfirmationDialog,
+  ChangePasswordDialog,
+  BulkActionToolbar,
+  BulkConfirmationDialog,
+  Pagination,
+  DialogContent,
+  DialogFooter,
+  CanDisable,
+} from '@lego-box/ui-kit';
+import { useUsers, useUserCounts } from '../hooks/useUsers';
+import { useRoles, usePermissions, useDebounce, useCan } from '../hooks';
+import { usePiralInstance } from '../context/PiralInstanceContext';
+import { RBACUser, Permission, Role } from '../types';
+import { createAuditLog } from '../utils/auditLogger';
+import { SYSTEM_DEFAULT_PERMISSIONS, SYSTEM_MANDATORY_PERMISSIONS_FOR_ROLES } from '../migrations/config';
+import { toast } from 'sonner';
+import { Pencil, Trash2, Search, Download, Users, Shield, KeyRound, Key, UserPlus } from 'lucide-react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+  role: string;
+  status: 'Active' | 'Inactive';
+  lastActive: string;
+  roleId?: string;
+  is_superuser?: boolean;
+  created?: string;
+  updated?: string;
+}
+
+function getStatusBadgeVariant(status: User['status']) {
+  switch (status) {
+    case 'Active':
+      return 'success';
+    case 'Inactive':
+      return 'destructive';
+    default:
+      return 'default';
+  }
+}
+
+function getRoleBadgeVariant(role: string) {
+  const roleLower = role.toLowerCase();
+  if (roleLower.includes('admin') || roleLower.includes('superuser')) return 'default';
+  if (roleLower.includes('editor') || roleLower.includes('manager')) return 'info';
+  if (roleLower.includes('viewer') || roleLower.includes('guest')) return 'muted';
+  return 'success';
+}
+
+function getActionBadgeVariant(action: string): 'success' | 'info' | 'warning' | 'destructive' | 'default' {
+  switch (action) {
+    case 'create': return 'success';
+    case 'read': return 'info';
+    case 'update': return 'warning';
+    case 'delete': return 'destructive';
+    default: return 'default';
+  }
+}
+
+function mapPocketBaseUserToUser(record: RBACUser): User {
+  const status: 'Active' | 'Inactive' = record.isActive === false ? 'Inactive' : 'Active';
+  const lastActive = record.updated ? formatLastActive(record.updated) : 'Never';
+
+  return {
+    id: record.id,
+    name: record.name || (record.email ? record.email.split('@')[0] : 'Unknown'),
+    email: record.email ?? '',
+    avatar: record.avatar,
+    role: record.roleName || (record.is_superuser ? 'System' : 'Unknown'),
+    status,
+    lastActive,
+    roleId: record.role,
+    is_superuser: record.is_superuser,
+    created: record.created,
+    updated: record.updated,
+  };
+}
+
+function getInitials(name: string, email: string): string {
+  if (name) {
+    return name.split(' ').map((n) => n[0]).join('').toUpperCase().slice(0, 2);
+  }
+  return email ? email[0].toUpperCase() : 'U';
+}
+
+function formatLastActive(timestamp: string): string {
+  const now = new Date();
+  const updated = new Date(timestamp);
+  const diffMs = now.getTime() - updated.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins} min ago`;
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  return updated.toLocaleDateString();
+}
+
+export function UserManagementPage() {
+  const instance = usePiralInstance();
+  const can = useCan();
+  const pb = React.useMemo(() => (instance as any)?.root?.pocketbase, [instance]);
+  const isCurrentUserSuperuser = React.useMemo(() => pb?.authStore?.model?.is_superuser === true, [pb]);
+
+  const [activeTab, setActiveTab] = React.useState('users');
+  const [activeFilter, setActiveFilter] = React.useState<'all' | 'active' | 'inactive'>('all');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(new Set());
+  const [roleFilter, setRoleFilter] = React.useState<string>('all');
+  const [exporting, setExporting] = React.useState(false);
+
+  // Dialog states
+  const [userFormOpen, setUserFormOpen] = React.useState(false);
+  const [deleteUserDialogOpen, setDeleteUserDialogOpen] = React.useState(false);
+  const [changePasswordDialogOpen, setChangePasswordDialogOpen] = React.useState(false);
+  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
+  const [userFormLoading, setUserFormLoading] = React.useState(false);
+  const [userForEditLoading, setUserForEditLoading] = React.useState(false);
+  const [changePasswordLoading, setChangePasswordLoading] = React.useState(false);
+
+  const [roleFormOpen, setRoleFormOpen] = React.useState(false);
+  const [assignUsersDialogOpen, setAssignUsersDialogOpen] = React.useState(false);
+  const [selectedRoleForAssign, setSelectedRoleForAssign] = React.useState<Role | null>(null);
+  const [deleteRoleDialogOpen, setDeleteRoleDialogOpen] = React.useState(false);
+  const [selectedRole, setSelectedRole] = React.useState<Role | null>(null);
+  const [roleFormLoading, setRoleFormLoading] = React.useState(false);
+  const [deleteRoleError, setDeleteRoleError] = React.useState<string>('');
+
+  const [permissionFormOpen, setPermissionFormOpen] = React.useState(false);
+  const [selectedPermission, setSelectedPermission] = React.useState<Permission | null>(null);
+  const [permissionFormLoading, setPermissionFormLoading] = React.useState(false);
+  const [deletePermissionDialogOpen, setDeletePermissionDialogOpen] = React.useState(false);
+  const [deletePermissionError, setDeletePermissionError] = React.useState<string>('');
+
+  // Pagination states
+  const [usersPage, setUsersPage] = React.useState(1);
+  const [usersPerPage, setUsersPerPage] = React.useState(10);
+  const [rolesPage, setRolesPage] = React.useState(1);
+  const [rolesPerPage, setRolesPerPage] = React.useState(10);
+  const [permissionsPage, setPermissionsPage] = React.useState(1);
+  const [permissionsPerPage, setPermissionsPerPage] = React.useState(10);
+  const [permissionsCollectionFilter, setPermissionsCollectionFilter] = React.useState<string>('all');
+  const debouncedSearchQuery = useDebounce(searchQuery, 500);
+
+  React.useEffect(() => {
+    setUsersPage(1);
+    setRolesPage(1);
+    setPermissionsPage(1);
+  }, [debouncedSearchQuery, activeFilter, roleFilter, permissionsCollectionFilter]);
+
+  // Unique collections for permissions filter - fetch when permissions tab is active
+  const [permissionCollections, setPermissionCollections] = React.useState<string[]>([]);
+  React.useEffect(() => {
+    if (activeTab !== 'permissions' || !pb) return;
+    let cancelled = false;
+    pb.collection('permissions')
+      .getFullList({ fields: 'collection', $autoCancel: false })
+      .then((records: any[]) => {
+        if (cancelled) return;
+        const cols = [...new Set(records.map((r) => r.collection).filter(Boolean))].sort();
+        setPermissionCollections(cols);
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [activeTab, pb]);
+
+  // Data Fetching
+  const { users, loading: usersLoading, error: usersError, refetch: refetchUsers, pagination: usersPagination } = useUsers({
+    page: usersPage,
+    perPage: usersPerPage,
+    searchQuery: debouncedSearchQuery,
+    statusFilter: activeFilter,
+    roleFilter: roleFilter !== 'all' ? roleFilter : undefined,
+    enabled: activeTab === 'users'
+  });
+
+  const userCounts = useUserCounts(activeTab === 'users');
+
+  const { roles, loading: rolesLoading, error: rolesError, refetch: refetchRoles, pagination: rolesPagination } = useRoles({
+    page: rolesPage,
+    perPage: rolesPerPage,
+    searchQuery: debouncedSearchQuery,
+    enabled: activeTab === 'roles' || activeTab === 'users' || userFormOpen || roleFormOpen,
+  });
+
+  const { permissions, loading: permissionsLoading, error: permissionsError, refetch: refetchPermissions, pagination: permissionsPagination } = usePermissions({
+    page: permissionsPage,
+    perPage: permissionsPerPage,
+    searchQuery: debouncedSearchQuery,
+    collectionFilter: permissionsCollectionFilter !== 'all' ? permissionsCollectionFilter : undefined,
+    enabled: activeTab === 'permissions'
+  });
+
+  // Fetch ALL permissions when role form is open (no pagination - getFullList for complete list)
+  const { permissions: allPermissionsForRoleForm, loading: roleFormPermissionsLoading } = usePermissions({
+    fetchAll: true,
+    enabled: roleFormOpen
+  });
+
+  // Fetch ALL users when assign-users dialog is open
+  const { users: allUsersForAssignDialog, loading: assignDialogUsersLoading } = useUsers({
+    perPage: 500,
+    enabled: assignUsersDialogOpen
+  });
+
+  const loading = usersLoading || rolesLoading || permissionsLoading;
+  const error = usersError || rolesError || permissionsError;
+  const refetch = activeTab === 'users' ? refetchUsers : activeTab === 'roles' ? refetchRoles : refetchPermissions;
+
+  // Mapped Data & Stats
+  const filteredUsers = React.useMemo(() => users.map(mapPocketBaseUserToUser), [users]);
+  const filteredRoles = React.useMemo(() => roles, [roles]);
+  const roleStats = React.useMemo(() => ({ total: rolesPagination?.totalItems || 0 }), [rolesPagination]);
+  // Exclude migrations permissions - those collections are superuser-only, not shown in RBAC UI
+  const MIGRATIONS_COLLECTIONS = ['migrations', 'migrations_history'];
+  const filteredPermissions = React.useMemo(
+    () => permissions.filter((p) => !MIGRATIONS_COLLECTIONS.includes(p.collection)),
+    [permissions]
+  );
+
+  // CRUD Handlers
+  const handleCreateUser = async (formData: UserFormData) => {
+    if (!pb) throw new Error('PocketBase not available');
+    setUserFormLoading(true);
+    try {
+      const newUser = await pb.collection('users').create({
+        email: formData.email,
+        name: formData.name,
+        role: formData.role,
+        isActive: formData.status === 'Active',
+        password: formData.password,
+        passwordConfirm: formData.passwordConfirm,
+        emailVisibility: true, // Allow admins and users with read:users to see email
+      });
+      await createAuditLog(pb, 'create', 'users', newUser.id, newUser.email, { name: newUser.name, email: newUser.email, role: newUser.role });
+      setUserFormOpen(false);
+      toast.success('Successfully created user');
+    } finally {
+      setUserFormLoading(false);
+    }
+  };
+
+  const handleUpdateUser = async (formData: UserFormData) => {
+    if (!pb || !selectedUser) throw new Error('No user selected');
+    setUserFormLoading(true);
+    try {
+      const updatedUser = await pb.collection('users').update(selectedUser.id, {
+        email: formData.email,
+        name: formData.name,
+        role: formData.role,
+        isActive: formData.status === 'Active',
+        emailVisibility: true, // Ensure email is visible to admins and users with read:users
+      });
+      await createAuditLog(pb, 'update', 'users', updatedUser.id, updatedUser.email, { name: updatedUser.name, email: updatedUser.email, role: updatedUser.role });
+      setUserFormOpen(false);
+      setSelectedUser(null);
+      toast.success('Successfully updated user');
+    } finally {
+      setUserFormLoading(false);
+    }
+  };
+
+  const handleDeleteUser = async () => {
+    if (!pb || !selectedUser) throw new Error('No user selected');
+    if (selectedUser.is_superuser) {
+      toast.error('Superusers cannot be deleted');
+      setDeleteUserDialogOpen(false);
+      setSelectedUser(null);
+      return;
+    }
+    setUserFormLoading(true);
+    try {
+      await pb.collection('users').delete(selectedUser.id);
+      await createAuditLog(pb, 'delete', 'users', selectedUser.id, selectedUser.email, { name: selectedUser.name });
+      setDeleteUserDialogOpen(false);
+      setSelectedUser(null);
+      toast.success('Successfully deleted user');
+    } finally {
+      setUserFormLoading(false);
+    }
+  };
+
+  const handleChangePassword = async (password: string, passwordConfirm: string) => {
+    if (!pb || !selectedUser) throw new Error('No user selected');
+    if (selectedUser.is_superuser) {
+      toast.error('Superusers cannot have their password changed');
+      return;
+    }
+    setChangePasswordLoading(true);
+    try {
+      await pb.collection('users').update(selectedUser.id, {
+        password,
+        passwordConfirm,
+      });
+      await createAuditLog(pb, 'update', 'users', selectedUser.id, selectedUser.email, { passwordChanged: true });
+      setChangePasswordDialogOpen(false);
+      setSelectedUser(null);
+      refetchUsers();
+      toast.success('Password changed successfully');
+    } finally {
+      setChangePasswordLoading(false);
+    }
+  };
+
+  const handleCreateRole = async (formData: RoleFormData) => {
+    if (!pb) throw new Error('PocketBase not available');
+    setRoleFormLoading(true);
+    try {
+      // API rules expect permission names (e.g. "read:users"), not IDs - convert before saving
+      const permissionNames = formData.permissions
+        .map((id) => allPermissionsForRoleForm.find((p) => p.id === id)?.name)
+        .filter((n): n is string => !!n);
+      const payload = { ...formData, permissions: permissionNames };
+      const newRole = await pb.collection('roles').create(payload);
+      await createAuditLog(pb, 'create', 'roles', newRole.id, newRole.name, payload);
+      setRoleFormOpen(false);
+      toast.success('Successfully created role');
+    } finally {
+      setRoleFormLoading(false);
+    }
+  };
+
+  const handleUpdateRole = async (formData: RoleFormData) => {
+    if (!pb || !selectedRole) throw new Error('No role selected');
+    setRoleFormLoading(true);
+    try {
+      // API rules expect permission names (e.g. "read:users"), not IDs - convert before saving
+      const permissionNames = formData.permissions
+        .map((id) => allPermissionsForRoleForm.find((p) => p.id === id)?.name)
+        .filter((n): n is string => !!n);
+      const payload = { ...formData, permissions: permissionNames };
+      const updatedRole = await pb.collection('roles').update(selectedRole.id, payload);
+      await createAuditLog(pb, 'update', 'roles', updatedRole.id, updatedRole.name, payload);
+      setRoleFormOpen(false);
+      setSelectedRole(null);
+      toast.success('Successfully updated role');
+    } finally {
+      setRoleFormLoading(false);
+    }
+  };
+
+  const handleDeleteRole = async () => {
+    if (!pb || !selectedRole) throw new Error('No role selected');
+    setRoleFormLoading(true);
+    try {
+      await pb.collection('roles').delete(selectedRole.id);
+      await createAuditLog(pb, 'delete', 'roles', selectedRole.id, selectedRole.name, {});
+      setDeleteRoleDialogOpen(false);
+      setSelectedRole(null);
+      toast.success('Successfully deleted role');
+    } finally {
+      setRoleFormLoading(false);
+    }
+  };
+
+  const handleAssignUserToRole = async (userId: string) => {
+    if (!pb || !selectedRoleForAssign) throw new Error('No role selected');
+    const userBefore = allUsersForAssignDialog.find((u) => u.id === userId);
+    const previousRoleName = userBefore?.roleName ?? null;
+    await pb.collection('users').update(userId, { role: selectedRoleForAssign.id });
+    await createAuditLog(pb, 'update', 'users', userId, userBefore?.email ?? userId, {
+      role: selectedRoleForAssign.name,
+      roleReassignment: true,
+      previousRole: previousRoleName,
+    });
+    toast.success(`User assigned to ${selectedRoleForAssign.name}`);
+    refetchUsers();
+    refetchRoles();
+  };
+
+  const handleCreatePermission = async (formData: PermissionFormData) => {
+    if (!pb) throw new Error('PocketBase not available');
+    // Check if permission with same action:collection already exists
+    const name = formData.name || `${formData.action.trim().toLowerCase()}:${formData.collection.trim().toLowerCase()}`;
+    const existing = await pb.collection('permissions').getList(1, 1, { filter: `name = "${name}"` });
+    if (existing.totalItems > 0) {
+      const { toast } = await import('sonner');
+      toast.error('Permission already exists', { description: `A permission with "${name}" already exists.` });
+      return;
+    }
+    setPermissionFormLoading(true);
+    try {
+      const newPermission = await pb.collection('permissions').create(formData);
+      await createAuditLog(pb, 'create', 'permissions', newPermission.id, newPermission.name, formData);
+      setPermissionFormOpen(false);
+      toast.success('Successfully created permission');
+    } finally {
+      setPermissionFormLoading(false);
+    }
+  };
+
+  const handleUpdatePermission = async (formData: PermissionFormData) => {
+    if (!pb || !selectedPermission) throw new Error('No permission selected');
+    setPermissionFormLoading(true);
+    try {
+      const updatedPermission = await pb.collection('permissions').update(selectedPermission.id, formData);
+      await createAuditLog(pb, 'update', 'permissions', updatedPermission.id, updatedPermission.name, formData);
+      setPermissionFormOpen(false);
+      setSelectedPermission(null);
+      toast.success('Successfully updated permission');
+    } finally {
+      setPermissionFormLoading(false);
+    }
+  };
+  
+  const handleDeletePermission = async () => {
+    if (!pb || !selectedPermission) throw new Error('No permission selected');
+    setPermissionFormLoading(true);
+    try {
+      await pb.collection('permissions').delete(selectedPermission.id);
+      await createAuditLog(pb, 'delete', 'permissions', selectedPermission.id, selectedPermission.name, {});
+      setDeletePermissionDialogOpen(false);
+      setSelectedPermission(null);
+      toast.success('Successfully deleted permission');
+    } finally {
+      setPermissionFormLoading(false);
+    }
+  };
+  
+  // Export handler - fetches all users with current filters and exports as CSV
+  const handleExportUsers = React.useCallback(async () => {
+    if (!pb) return;
+    setExporting(true);
+    try {
+      const filters: string[] = [];
+      if (activeFilter !== 'all') {
+        switch (activeFilter) {
+          case 'active': filters.push('isActive = true'); break;
+          case 'inactive': filters.push('isActive = false'); break;
+        }
+      }
+      if (roleFilter !== 'all') filters.push(`role = "${roleFilter}"`);
+      if (debouncedSearchQuery) filters.push(`(name ~ "${debouncedSearchQuery}" || email ~ "${debouncedSearchQuery}")`);
+      const filterString = filters.length > 0 ? filters.join(' && ') : '';
+
+      const rolesRes = await pb.collection('roles').getFullList({ fields: 'id,name', $autoCancel: false });
+      const rolesMap = new Map(rolesRes.map((r: any) => [r.id, r.name]));
+
+      const records = await pb.collection('users').getList(1, 5000, {
+        filter: filterString || undefined,
+        sort: '-created',
+        $autoCancel: false,
+      });
+
+      const usersToExport = records.items.map((record: any) => {
+        const roleId = Array.isArray(record.role) ? record.role[0] : record.role;
+        const roleName = roleId ? rolesMap.get(roleId) || 'Unknown' : 'Unknown';
+        const status: string = record.isActive === false ? 'Inactive' : 'Active';
+        const lastActive = record.updated ? formatLastActive(record.updated) : 'Never';
+        return [
+          record.name || record.email.split('@')[0],
+          record.email,
+          roleName,
+          status,
+          lastActive,
+        ];
+      });
+
+      const headers = ['Name', 'Email', 'Role', 'Status', 'Last Active'];
+      const csv = [headers.join(','), ...usersToExport.map((r: string[]) => r.map((c: string) => `"${String(c).replace(/"/g, '""')}"`).join(','))].join('\n');
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = `users-export-${new Date().toISOString().slice(0, 10)}.csv`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    } finally {
+      setExporting(false);
+    }
+  }, [pb, activeFilter, roleFilter, debouncedSearchQuery]);
+
+  const handleSelectAllUsers = (selected: boolean) => {
+    if (selected) {
+      setSelectedRows(new Set(filteredUsers.map((u) => u.id)));
+    } else {
+      setSelectedRows(new Set());
+    }
+  };
+
+  const handleSelectRow = (id: string, selected: boolean) => {
+    setSelectedRows((prev) => {
+      const next = new Set(prev);
+      if (selected) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  };
+
+  // Fetch full user record when opening edit (ensures email is available for form)
+  const handleOpenEditUser = React.useCallback(async (user: User) => {
+    if (!pb) return;
+    setUserForEditLoading(true);
+    try {
+      const record = await pb.collection('users').getOne(user.id, { expand: 'role', $autoCancel: false });
+      const roleId = Array.isArray(record.role) ? record.role[0] : record.role;
+      const expandedRole = record.expand?.role;
+      const roleName = (Array.isArray(expandedRole) ? expandedRole[0]?.name : expandedRole?.name) ?? roles.find((r) => r.id === roleId)?.name;
+      const fetchedUser: User = mapPocketBaseUserToUser({
+        id: record.id,
+        email: record.email ?? '',
+        name: record.name,
+        avatar: record.avatar,
+        role: roleId,
+        roleName: roleName,
+        is_superuser: record.is_superuser ?? false,
+        isActive: record.isActive ?? true,
+        verified: record.verified ?? false,
+        permissions: [],
+        created: record.created,
+        updated: record.updated,
+      });
+      setSelectedUser(fetchedUser);
+      setUserFormOpen(true);
+    } catch (err: any) {
+      toast.error('Failed to load user details', { description: err?.message });
+    } finally {
+      setUserForEditLoading(false);
+    }
+  }, [pb, roles]);
+
+  // Columns
+  const userColumns: DataTableColumn<User>[] = [
+    {
+      key: 'user',
+      header: 'User',
+      cell: (user) => (
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary">
+            {getInitials(user.name, user.email)}
+          </div>
+          <div>
+            <p className="font-medium">{user.name}</p>
+            <p className="text-xs text-muted-foreground">{user.email || '—'}</p>
+          </div>
+        </div>
+      ),
+    },
+    { key: 'role', header: 'Role', cell: (user) => <Badge variant={getRoleBadgeVariant(user.role)}>{user.role}</Badge> },
+    { key: 'status', header: 'Status', cell: (user) => <Badge variant={getStatusBadgeVariant(user.status)}>{user.status}</Badge> },
+    { key: 'is_superuser', header: 'Superuser', cell: (user) => user.is_superuser ? <Badge variant="default">Yes</Badge> : <span className="text-muted-foreground">—</span> },
+    { key: 'lastActive', header: 'Last Active', cell: (user) => user.lastActive },
+    {
+      key: 'actions',
+      header: '',
+      cell: (user) => {
+        const isSuperuser = user.is_superuser === true;
+        const canUpdate = can('update', 'users');
+        const canDelete = can('delete', 'users');
+        const editDisabled = isSuperuser || userForEditLoading;
+        const passwordDisabled = isSuperuser;
+        const deleteDisabled = isSuperuser;
+        return (
+          <div className="flex gap-1">
+            <CanDisable allowed={canUpdate} disabledTooltip={isSuperuser ? 'Superusers cannot be modified' : 'You do not have access'}>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleOpenEditUser(user)}
+                aria-label="Edit"
+                disabled={editDisabled}
+                title={isSuperuser ? 'Superusers cannot be modified' : undefined}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            </CanDisable>
+            <CanDisable allowed={canUpdate} disabledTooltip={isSuperuser ? 'Superusers cannot have password changed' : 'You do not have access'}>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => { setSelectedUser(user); setChangePasswordDialogOpen(true); }}
+                aria-label="Change password"
+                disabled={passwordDisabled}
+                title={isSuperuser ? 'Superusers cannot have password changed' : 'Change password'}
+              >
+                <Key className="h-4 w-4" />
+              </Button>
+            </CanDisable>
+            <CanDisable allowed={canDelete} disabledTooltip={isSuperuser ? 'Superusers cannot be deleted' : 'You do not have access'}>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => { setSelectedUser(user); setDeleteUserDialogOpen(true); }}
+                aria-label="Delete"
+                disabled={deleteDisabled}
+                title={isSuperuser ? 'Superusers cannot be deleted' : undefined}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </CanDisable>
+          </div>
+        );
+      },
+    },
+  ];
+  
+  const roleColumns: DataTableColumn<Role>[] = [
+    { key: 'name', header: 'Role', cell: (role) => <div><p>{role.name}</p><p className="text-xs text-muted-foreground">{role.description}</p></div> },
+    { key: 'permissions', header: 'Permissions', cell: (role) => `${role.permissionCount || 0} permissions` },
+    { key: 'users', header: 'Users', cell: (role) => `${role.userCount || 0} users` },
+    {
+      key: 'actions',
+      header: '',
+      cell: (role) => (
+        <div className="flex gap-1">
+          <CanDisable allowed={can('update', 'roles')}>
+            <Button variant="ghost" size="icon" onClick={() => { setSelectedRoleForAssign(role); setAssignUsersDialogOpen(true); }} aria-label="Assign users" title="Assign or reassign users to this role"><UserPlus className="h-4 w-4" /></Button>
+          </CanDisable>
+          <CanDisable allowed={can('update', 'roles')}>
+            <Button variant="ghost" size="icon" onClick={() => { setSelectedRole(role); setRoleFormOpen(true); }} aria-label="Edit"><Pencil className="h-4 w-4" /></Button>
+          </CanDisable>
+          <CanDisable allowed={can('delete', 'roles')}>
+            <Button variant="ghost" size="icon" onClick={() => { setSelectedRole(role); setDeleteRoleDialogOpen(true); }} aria-label="Delete"><Trash2 className="h-4 w-4" /></Button>
+          </CanDisable>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="page-header">
+        <div className="page-header-left">
+          <h1 className="text-2xl font-bold text-foreground">User Management</h1>
+          <p className="text-sm text-muted-foreground mt-1">Manage users, roles, and permissions</p>
+        </div>
+        <div className="page-header-right">
+          <Button variant="outline" onClick={refetch} disabled={loading}>Refresh</Button>
+          {activeTab === 'users' && (
+            <CanDisable allowed={can('create', 'users')}>
+              <Button onClick={() => { setSelectedUser(null); setUserFormOpen(true); }}>Add User</Button>
+            </CanDisable>
+          )}
+          {activeTab === 'roles' && (
+            <CanDisable allowed={can('create', 'roles')}>
+              <Button onClick={() => { setSelectedRole(null); setRoleFormOpen(true); }}>Add Role</Button>
+            </CanDisable>
+          )}
+          {activeTab === 'permissions' && (
+            <CanDisable allowed={can('create', 'permissions')}>
+              <Button onClick={() => { setSelectedPermission(null); setPermissionFormOpen(true); }}>Add Permission</Button>
+            </CanDisable>
+          )}
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <CanDisable allowed={can('read', 'users')}>
+            <TabsTrigger value="users" badge={userCounts.all}>
+              <Users className="w-4 h-4 shrink-0" />
+              Users
+            </TabsTrigger>
+          </CanDisable>
+          <CanDisable allowed={can('read', 'roles')}>
+            <TabsTrigger value="roles" badge={rolesPagination?.totalItems ?? 0}>
+              <Shield className="w-4 h-4 shrink-0" />
+              Roles
+            </TabsTrigger>
+          </CanDisable>
+          <CanDisable allowed={can('read', 'permissions')}>
+            <TabsTrigger value="permissions" badge={permissionsPagination?.totalItems ?? 0}>
+              <KeyRound className="w-4 h-4 shrink-0" />
+              Permissions
+            </TabsTrigger>
+          </CanDisable>
+        </TabsList>
+      </Tabs>
+      
+      {activeTab === 'users' && (
+        <div className="space-y-4">
+          {/* Top bar: Search full width, Export on the right */}
+          <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+            <div className="flex-1 w-full min-w-0">
+              <SearchInput
+                placeholder="Search users..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                icon={<Search className="h-4 w-4" />}
+              />
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={handleExportUsers} disabled={exporting} className="gap-2">
+                <Download className="h-4 w-4" /> {exporting ? 'Exporting...' : 'Export'}
+              </Button>
+            </div>
+          </div>
+
+          {/* Filter tabs */}
+          <div className="flex flex-wrap gap-2">
+            <FilterChip active={activeFilter === 'all'} count={userCounts.all} onClick={() => setActiveFilter('all')}>
+              All Users
+            </FilterChip>
+            <FilterChip active={activeFilter === 'active'} count={userCounts.active} onClick={() => setActiveFilter('active')}>
+              Active
+            </FilterChip>
+            <FilterChip active={activeFilter === 'inactive'} count={userCounts.inactive} onClick={() => setActiveFilter('inactive')}>
+              Inactive
+            </FilterChip>
+          </div>
+
+          {/* Table and pagination */}
+          {loading && <p>Loading...</p>}
+          {error && <p className="text-destructive">Error: {error.message}</p>}
+          {!loading && !error && (
+            <>
+              <DataTable
+                columns={userColumns}
+                data={filteredUsers}
+                keyExtractor={(item) => item.id}
+                selectable
+                selectedRows={selectedRows}
+                onSelectRow={handleSelectRow}
+                onSelectAll={handleSelectAllUsers}
+              />
+              <Pagination
+                currentPage={usersPagination?.page ?? 1}
+                totalPages={usersPagination?.totalPages ?? 1}
+                totalItems={usersPagination?.totalItems ?? 0}
+                perPage={usersPerPage}
+                onPageChange={setUsersPage}
+                onPerPageChange={(size) => { setUsersPerPage(size); setUsersPage(1); }}
+                showPageSizeSelector
+                itemsLabel="users"
+              />
+            </>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'roles' && (
+        <div className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+            <div className="flex-1 w-full min-w-0">
+              <SearchInput
+                placeholder="Search roles..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                icon={<Search className="h-4 w-4" />}
+              />
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={() => {
+                const headers = ['Name', 'Description', 'Permissions', 'Users'];
+                const rows = filteredRoles.map((r) => [r.name, r.description || '', String(r.permissionCount || 0), String(r.userCount || 0)]);
+                const csv = [headers.join(','), ...rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(','))].join('\n');
+                const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = `roles-export-${new Date().toISOString().slice(0, 10)}.csv`;
+                link.click();
+                URL.revokeObjectURL(link.href);
+              }} className="gap-2">
+                <Download className="h-4 w-4" /> Export
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <FilterChip active count={roleStats.total} onClick={() => {}}>All Roles</FilterChip>
+          </div>
+          {loading && <p>Loading...</p>}
+          {error && <p className="text-destructive">Error: {error.message}</p>}
+          {!loading && !error && (
+            <>
+              <DataTable columns={roleColumns} data={filteredRoles} keyExtractor={(item) => item.id} variant="card" />
+              <Pagination
+                currentPage={rolesPagination?.page ?? 1}
+                totalPages={rolesPagination?.totalPages ?? 1}
+                totalItems={rolesPagination?.totalItems ?? 0}
+                perPage={rolesPerPage}
+                onPageChange={setRolesPage}
+                onPerPageChange={(size) => { setRolesPerPage(size); setRolesPage(1); }}
+                showPageSizeSelector
+                itemsLabel="roles"
+              />
+            </>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'permissions' && (
+        <div className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+            <div className="flex-1 w-full min-w-0">
+              <SearchInput
+                placeholder="Search permissions..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                icon={<Search className="h-4 w-4" />}
+              />
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button variant="outline" size="sm" onClick={() => {
+                const headers = ['Name', 'Collection', 'Action', 'Description'];
+                const rows = filteredPermissions.map((p) => [p.name, p.collection, p.action, p.description || '']);
+                const csv = [headers.join(','), ...rows.map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(','))].join('\n');
+                const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = `permissions-export-${new Date().toISOString().slice(0, 10)}.csv`;
+                link.click();
+                URL.revokeObjectURL(link.href);
+              }} className="gap-2">
+                <Download className="h-4 w-4" /> Export
+              </Button>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <FilterChip active={permissionsCollectionFilter === 'all'} count={permissionsPagination?.totalItems ?? 0} onClick={() => setPermissionsCollectionFilter('all')}>
+              All Permissions
+            </FilterChip>
+            {permissionCollections.slice(0, 5).map((c) => (
+              <FilterChip
+                key={c}
+                active={permissionsCollectionFilter === c}
+                onClick={() => setPermissionsCollectionFilter(c)}
+              >
+                {c}
+              </FilterChip>
+            ))}
+          </div>
+          {loading && <p>Loading...</p>}
+          {error && <p className="text-destructive">Error: {error.message}</p>}
+          {!loading && !error && (
+            <>
+              <GroupedTable<Permission>
+                data={filteredPermissions}
+                groupBy={(perm) => perm.collection || '_unknown'}
+                keyExtractor={(perm) => perm.id}
+                columns={[
+                  { key: 'name', header: 'Permission', cell: (perm) => <span className="text-sm font-mono text-foreground">{perm.name}</span> },
+                  { key: 'action', header: 'Action', width: 'w-32', cell: (perm) => <Badge variant={getActionBadgeVariant(perm.action)}>{perm.action}</Badge> },
+                  { key: 'description', header: 'Description', cell: (perm) => <span className="text-sm text-muted-foreground">{perm.description ?? '—'}</span> },
+                  { key: 'systemDefault', header: 'System default', width: 'w-32', cell: (perm) => SYSTEM_DEFAULT_PERMISSIONS.includes(perm.name) ? <Badge variant="default">Yes</Badge> : <Badge variant="outline">No</Badge> },
+                  {
+                    key: 'actions',
+                    header: '',
+                    width: 'w-32',
+                    cell: (perm) => {
+                      const isSystemDefault = SYSTEM_DEFAULT_PERMISSIONS.includes(perm.name);
+                      const canUpdate = can('update', 'permissions');
+                      const canDelete = can('delete', 'permissions');
+                      const editDisabled = isSystemDefault;
+                      const deleteDisabled = isSystemDefault;
+                      return (
+                        <div className="flex gap-1">
+                          <CanDisable allowed={canUpdate} disabledTooltip={isSystemDefault ? 'System default permissions cannot be edited' : 'You do not have access'}>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => { setSelectedPermission(perm); setPermissionFormOpen(true); }}
+                              aria-label="Edit"
+                              disabled={editDisabled}
+                              title={isSystemDefault ? 'System default permissions cannot be edited' : undefined}
+                            >
+                              <Pencil className="h-4 w-4" />
+                            </Button>
+                          </CanDisable>
+                          <CanDisable allowed={canDelete} disabledTooltip={isSystemDefault ? 'System default permissions cannot be deleted' : 'You do not have access'}>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => { setSelectedPermission(perm); setDeletePermissionDialogOpen(true); }}
+                              aria-label="Delete"
+                              disabled={deleteDisabled}
+                              title={isSystemDefault ? 'System default permissions cannot be deleted' : undefined}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </CanDisable>
+                        </div>
+                      );
+                    },
+                  },
+                ]}
+                emptyMessage="No permissions found"
+                groupLabel={(key, count) => `${key} (${count} permission${count !== 1 ? 's' : ''})`}
+              />
+              <Pagination
+                currentPage={permissionsPagination?.page ?? 1}
+                totalPages={permissionsPagination?.totalPages ?? 1}
+                totalItems={permissionsPagination?.totalItems ?? 0}
+                perPage={permissionsPerPage}
+                onPageChange={setPermissionsPage}
+                onPerPageChange={(size) => { setPermissionsPerPage(size); setPermissionsPage(1); }}
+                showPageSizeSelector
+                itemsLabel="permissions"
+              />
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Dialogs */}
+      <DeleteConfirmationDialog
+        isOpen={deleteUserDialogOpen}
+        onClose={() => { setDeleteUserDialogOpen(false); setSelectedUser(null); }}
+        onConfirm={handleDeleteUser}
+        title="Delete User"
+        itemName={selectedUser?.name || selectedUser?.email}
+        loading={userFormLoading}
+      />
+      <ChangePasswordDialog
+        isOpen={changePasswordDialogOpen}
+        onClose={() => { setChangePasswordDialogOpen(false); setSelectedUser(null); }}
+        onSubmit={handleChangePassword}
+        userName={selectedUser?.name || selectedUser?.email}
+        loading={changePasswordLoading}
+      />
+      <UserFormDialog 
+        isOpen={userFormOpen} 
+        onClose={() => setUserFormOpen(false)} 
+        onSubmit={selectedUser ? handleUpdateUser : handleCreateUser}
+        user={selectedUser ? {
+          id: selectedUser.id,
+          name: selectedUser.name,
+          email: selectedUser.email,
+          roleId: selectedUser.roleId,
+          status: selectedUser.status,
+        } : null}
+        roles={roles.map(r => ({id: r.id, name: r.name}))}
+        loading={userFormLoading}
+      />
+      <RoleFormDialog 
+        isOpen={roleFormOpen}
+        onClose={() => setRoleFormOpen(false)}
+        onSubmit={selectedRole ? handleUpdateRole : handleCreateRole}
+        role={selectedRole ? {
+          id: selectedRole.id,
+          name: selectedRole.name,
+          description: selectedRole.description,
+          // DB stores permission names; map to IDs for form (supports legacy IDs for backward compat)
+          permissions: (() => {
+            const perms = selectedRole.permissions;
+            if (!Array.isArray(perms)) return [];
+            const permValues = perms.map((p) => (typeof p === 'string' ? p : (p as Permission).id));
+            return allPermissionsForRoleForm
+              .filter((p) => permValues.includes(p.name) || permValues.includes(p.id))
+              .map((p) => p.id);
+          })(),
+        } : null}
+        permissions={allPermissionsForRoleForm}
+        mandatoryPermissionNames={SYSTEM_MANDATORY_PERMISSIONS_FOR_ROLES}
+        loading={roleFormLoading}
+        permissionsLoading={roleFormOpen ? roleFormPermissionsLoading : false}
+      />
+      <PermissionFormDialog
+        isOpen={permissionFormOpen}
+        onClose={() => setPermissionFormOpen(false)}
+        onSubmit={selectedPermission ? handleUpdatePermission : handleCreatePermission}
+        permission={selectedPermission}
+        loading={permissionFormLoading}
+        existingCollections={permissionCollections}
+      />
+      <AssignUsersToRoleDialog
+        isOpen={assignUsersDialogOpen}
+        onClose={() => { setAssignUsersDialogOpen(false); setSelectedRoleForAssign(null); }}
+        role={selectedRoleForAssign ? { id: selectedRoleForAssign.id, name: selectedRoleForAssign.name } : null}
+        users={allUsersForAssignDialog.map((u) => ({
+          id: u.id,
+          name: u.name || u.email?.split('@')[0] || '—',
+          email: u.email ?? '—',
+          roleId: u.role,
+          roleName: u.roleName,
+          is_superuser: u.is_superuser,
+        }))}
+        onAssign={handleAssignUserToRole}
+        usersLoading={assignDialogUsersLoading}
+      />
+      <DeleteConfirmationDialog
+        isOpen={deleteRoleDialogOpen}
+        onClose={() => setDeleteRoleDialogOpen(false)}
+        onConfirm={handleDeleteRole}
+        title="Delete Role"
+        itemName={selectedRole?.name}
+        loading={roleFormLoading}
+      />
+      <DeleteConfirmationDialog
+        isOpen={deletePermissionDialogOpen}
+        onClose={() => setDeletePermissionDialogOpen(false)}
+        onConfirm={handleDeletePermission}
+        title="Delete Permission"
+        itemName={selectedPermission?.name}
+        loading={permissionFormLoading}
+      />
+    </div>
+  );
+}