@payez/next-mvp 4.8.0 → 4.8.2

package/src/pages/admin-roles/modals.tsx

@@ -1,469 +1,469 @@
-/**
- * Admin Role Modals for @payez/next-mvp
- *
- * - RoleEditorModal: Create/edit roles with permissions
- * - UserRoleAssignerModal: Assign roles to users
- *
- * Security Addendum implemented:
- * - Role name validation (3-50 chars, lowercase alphanumeric + underscore, no payez_ prefix)
- * - Last admin warning
- * - IDP roles read-only
- * - Self-assignment warning
- *
- * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
- */
-
-'use client';
-
-import { useState, useEffect } from 'react';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-interface PagePermission {
-  page_permission_id: number;
-  route_pattern: string;
-  display_name: string;
-  requires_2fa: boolean;
-}
-
-interface Role {
-  role_id?: number;
-  role_name: string;
-  display_name?: string;
-  description?: string;
-  page_permissions?: string[];
-  requires_2fa?: boolean;
-  is_system_role?: boolean;
-}
-
-interface User {
-  user_id: number;
-  email: string;
-  full_name?: string;
-  roles: {
-    idp: string[];
-    app: string[];
-  };
-}
-
-// ============================================================================
-// VALIDATION
-// ============================================================================
-
-// Role name validation (Security Addendum)
-function validateRoleName(name: string): { valid: boolean; error?: string } {
-  if (!name) return { valid: false, error: 'Role name is required' };
-  if (name.length < 3) return { valid: false, error: 'Role name must be at least 3 characters' };
-  if (name.length > 50) return { valid: false, error: 'Role name must be at most 50 characters' };
-  if (!/^[a-z0-9_]+$/.test(name)) return { valid: false, error: 'Only lowercase letters, numbers, and underscores allowed' };
-  if (name.startsWith('payez_')) return { valid: false, error: 'Role name cannot start with "payez_"' };
-  return { valid: true };
-}
-
-// ============================================================================
-// ROLE EDITOR MODAL
-// ============================================================================
-
-/**
- * RoleEditorModal - Create or edit a role
- */
-export function RoleEditorModal({
-  role,
-  pagePermissions,
-  adminAccessiblePages,
-  onSave,
-  onClose,
-  isDark = true,
-}: {
-  role?: Role;
-  pagePermissions: PagePermission[];
-  adminAccessiblePages?: string[];
-  onSave: (data: {
-    role_name: string;
-    display_name?: string;
-    description?: string;
-    page_permissions: string[];
-    requires_2fa: boolean;
-  }) => Promise<void>;
-  onClose: () => void;
-  isDark?: boolean;
-}) {
-  const isEditing = !!role?.role_id;
-
-  // Form state
-  const [roleName, setRoleName] = useState(role?.role_name || '');
-  const [displayName, setDisplayName] = useState(role?.display_name || '');
-  const [description, setDescription] = useState(role?.description || '');
-  const [selectedPermissions, setSelectedPermissions] = useState<string[]>(role?.page_permissions || []);
-  const [requires2FA, setRequires2FA] = useState(role?.requires_2fa || false);
-  const [error, setError] = useState('');
-  const [saving, setSaving] = useState(false);
-
-  // Role name validation
-  const [nameValidation, setNameValidation] = useState<{ valid: boolean; error?: string }>({ valid: true });
-
-  useEffect(() => {
-    if (!isEditing && roleName) {
-      setNameValidation(validateRoleName(roleName));
-    }
-  }, [roleName, isEditing]);
-
-  // Filter permissions based on admin access (Security Addendum)
-  const availablePermissions = adminAccessiblePages
-    ? pagePermissions.filter((p) =>
-        adminAccessiblePages.some((ap) => p.route_pattern.startsWith(ap.replace('*', '')))
-      )
-    : pagePermissions;
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-
-    if (!isEditing) {
-      const validation = validateRoleName(roleName);
-      if (!validation.valid) {
-        setError(validation.error || 'Invalid role name');
-        return;
-      }
-    }
-
-    try {
-      setSaving(true);
-      await onSave({
-        role_name: roleName,
-        display_name: displayName || undefined,
-        description: description || undefined,
-        page_permissions: selectedPermissions,
-        requires_2fa: requires2FA,
-      });
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save role');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const togglePermission = (pattern: string) => {
-    setSelectedPermissions((prev) =>
-      prev.includes(pattern) ? prev.filter((p) => p !== pattern) : [...prev, pattern]
-    );
-  };
-
-  // Theme colors
-  const modalBg = isDark ? 'bg-slate-800' : 'bg-white';
-  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
-  const inputBg = isDark ? 'bg-slate-700' : 'bg-white';
-  const inputBorder = isDark ? 'border-slate-600' : 'border-gray-300';
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className={`w-full max-w-lg mx-4 rounded-lg shadow-xl ${modalBg} border ${borderColor} max-h-[90vh] overflow-hidden flex flex-col`}>
-        {/* Header */}
-        <div className={`px-6 py-4 border-b ${borderColor} flex items-center justify-between`}>
-          <h3 className={`text-lg font-semibold ${textPrimary}`}>
-            {isEditing ? `Edit Role: ${role?.role_name}` : 'Create New Role'}
-          </h3>
-          <button onClick={onClose} className={textMuted}>
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
-          <div className="px-6 py-4 space-y-4">
-            {/* Role Name */}
-            <div>
-              <label className={`block text-sm font-medium mb-1 ${textMuted}`}>
-                Role Name <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                value={roleName}
-                onChange={(e) => setRoleName(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ''))}
-                disabled={isEditing}
-                className={`w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary} ${isEditing ? 'opacity-50 cursor-not-allowed' : ''} font-mono`}
-                placeholder="e.g., content_editor"
-              />
-              {!isEditing && roleName && !nameValidation.valid && (
-                <p className="mt-1 text-sm text-red-500">{nameValidation.error}</p>
-              )}
-              {!isEditing && (
-                <p className={`mt-1 text-xs ${textMuted}`}>
-                  3-50 characters, lowercase letters, numbers, underscores only
-                </p>
-              )}
-            </div>
-
-            {/* Display Name */}
-            <div>
-              <label className={`block text-sm font-medium mb-1 ${textMuted}`}>Display Name</label>
-              <input
-                type="text"
-                value={displayName}
-                onChange={(e) => setDisplayName(e.target.value)}
-                className={`w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary}`}
-                placeholder="e.g., Content Editor"
-              />
-            </div>
-
-            {/* Description */}
-            <div>
-              <label className={`block text-sm font-medium mb-1 ${textMuted}`}>Description</label>
-              <textarea
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                rows={2}
-                className={`w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary}`}
-                placeholder="What does this role do?"
-              />
-            </div>
-
-            {/* Page Permissions */}
-            <div>
-              <label className={`block text-sm font-medium mb-2 ${textMuted}`}>Page Permissions</label>
-              <div className={`border ${borderColor} rounded-md max-h-48 overflow-y-auto`}>
-                {availablePermissions.length === 0 ? (
-                  <p className={`p-3 text-sm ${textMuted}`}>No page permissions available</p>
-                ) : (
-                  availablePermissions.map((perm) => (
-                    <label
-                      key={perm.page_permission_id}
-                      className={`flex items-center px-3 py-2 border-b last:border-b-0 ${borderColor} cursor-pointer hover:${isDark ? 'bg-slate-700' : 'bg-gray-50'}`}
-                    >
-                      <input
-                        type="checkbox"
-                        checked={selectedPermissions.includes(perm.route_pattern)}
-                        onChange={() => togglePermission(perm.route_pattern)}
-                        className="mr-3"
-                      />
-                      <div>
-                        <span className={`font-mono text-sm ${textPrimary}`}>{perm.route_pattern}</span>
-                        {perm.display_name && (
-                          <span className={`block text-xs ${textMuted}`}>{perm.display_name}</span>
-                        )}
-                      </div>
-                    </label>
-                  ))
-                )}
-              </div>
-            </div>
-
-            {/* Security Options */}
-            <div className={`border-t ${borderColor} pt-4`}>
-              <label className={`block text-sm font-medium mb-2 ${textMuted}`}>Security Options</label>
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={requires2FA}
-                  onChange={(e) => setRequires2FA(e.target.checked)}
-                  className="mr-3"
-                />
-                <span className={textPrimary}>Requires 2FA for all pages</span>
-              </label>
-            </div>
-
-            {/* Error */}
-            {error && (
-              <div className="bg-red-900/30 border border-red-600 rounded-lg p-3">
-                <p className="text-red-400 text-sm">{error}</p>
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className={`px-6 py-4 border-t ${borderColor} flex justify-end gap-3`}>
-            <button
-              type="button"
-              onClick={onClose}
-              className={`px-4 py-2 rounded-md border ${borderColor} ${textMuted}`}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={saving || (!isEditing && !nameValidation.valid)}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
-            >
-              {saving ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Role'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// USER ROLE ASSIGNER MODAL
-// ============================================================================
-
-/**
- * UserRoleAssignerModal - Assign roles to a user
- */
-export function UserRoleAssignerModal({
-  user,
-  availableRoles,
-  isLastAdmin,
-  currentUserId,
-  onSave,
-  onClose,
-  isDark = true,
-}: {
-  user: User;
-  availableRoles: { role_name: string; display_name?: string; description?: string }[];
-  isLastAdmin?: boolean;
-  currentUserId?: number;
-  onSave: (userId: number, appRoles: string[]) => Promise<void>;
-  onClose: () => void;
-  isDark?: boolean;
-}) {
-  const [selectedRoles, setSelectedRoles] = useState<string[]>(user.roles.app);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState('');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-
-    // Security: Self-assignment warning
-    if (user.user_id === currentUserId) {
-      if (!confirm('You are modifying your own roles. Changes take effect on next login. Continue?')) {
-        return;
-      }
-    }
-
-    // Security Addendum: Last admin warning
-    const hadAdmin = user.roles.app.some((r) => r.includes('admin'));
-    const hasAdmin = selectedRoles.some((r) => r.includes('admin'));
-
-    if (hadAdmin && !hasAdmin && isLastAdmin) {
-      if (!confirm('Warning: This is the last administrator. Removing admin access will lock out admin access. Continue?')) {
-        return;
-      }
-    }
-
-    try {
-      setSaving(true);
-      await onSave(user.user_id, selectedRoles);
-      onClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update roles');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const toggleRole = (roleName: string) => {
-    setSelectedRoles((prev) =>
-      prev.includes(roleName) ? prev.filter((r) => r !== roleName) : [...prev, roleName]
-    );
-  };
-
-  // Theme colors
-  const modalBg = isDark ? 'bg-slate-800' : 'bg-white';
-  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className={`w-full max-w-md mx-4 rounded-lg shadow-xl ${modalBg} border ${borderColor}`}>
-        {/* Header */}
-        <div className={`px-6 py-4 border-b ${borderColor} flex items-center justify-between`}>
-          <div>
-            <h3 className={`text-lg font-semibold ${textPrimary}`}>Edit Roles</h3>
-            <p className={`text-sm ${textMuted}`}>{user.full_name || user.email}</p>
-          </div>
-          <button onClick={onClose} className={textMuted}>
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Form */}
-        <form onSubmit={handleSubmit}>
-          <div className="px-6 py-4 space-y-4">
-            {/* IDP Roles (read-only) */}
-            {user.roles.idp.length > 0 && (
-              <div>
-                <label className={`block text-sm font-medium mb-2 ${textMuted}`}>
-                  IDP Roles (read-only)
-                  <svg className="inline w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                  </svg>
-                </label>
-                <div className="space-y-1">
-                  {user.roles.idp.map((role) => (
-                    <div key={role} className={`flex items-center px-3 py-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
-                      <span className={textMuted}>{role}</span>
-                      <span className={`ml-auto text-xs ${textMuted}`}>assigned by IDP</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Application Roles */}
-            <div>
-              <label className={`block text-sm font-medium mb-2 ${textMuted}`}>Application Roles</label>
-              <div className={`border ${borderColor} rounded-md`}>
-                {availableRoles.map((role) => (
-                  <label
-                    key={role.role_name}
-                    className={`flex items-start px-3 py-2 border-b last:border-b-0 ${borderColor} cursor-pointer hover:${isDark ? 'bg-slate-700' : 'bg-gray-50'}`}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selectedRoles.includes(role.role_name)}
-                      onChange={() => toggleRole(role.role_name)}
-                      className="mt-1 mr-3"
-                    />
-                    <div>
-                      <span className={textPrimary}>{role.display_name || role.role_name}</span>
-                      {role.description && (
-                        <span className={`block text-xs ${textMuted}`}>{role.description}</span>
-                      )}
-                    </div>
-                  </label>
-                ))}
-              </div>
-            </div>
-
-            {/* Error */}
-            {error && (
-              <div className="bg-red-900/30 border border-red-600 rounded-lg p-3">
-                <p className="text-red-400 text-sm">{error}</p>
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className={`px-6 py-4 border-t ${borderColor} flex justify-end gap-3`}>
-            <button
-              type="button"
-              onClick={onClose}
-              className={`px-4 py-2 rounded-md border ${borderColor} ${textMuted}`}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={saving}
-              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
-            >
-              {saving ? 'Saving...' : 'Save Changes'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
+/**
+ * Admin Role Modals for @payez/next-mvp
+ *
+ * - RoleEditorModal: Create/edit roles with permissions
+ * - UserRoleAssignerModal: Assign roles to users
+ *
+ * Security Addendum implemented:
+ * - Role name validation (3-50 chars, lowercase alphanumeric + underscore, no payez_ prefix)
+ * - Last admin warning
+ * - IDP roles read-only
+ * - Self-assignment warning
+ *
+ * @see docs/specs/ROLES_MANAGEMENT_SPEC.md
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface PagePermission {
+  page_permission_id: number;
+  route_pattern: string;
+  display_name: string;
+  requires_2fa: boolean;
+}
+
+interface Role {
+  role_id?: number;
+  role_name: string;
+  display_name?: string;
+  description?: string;
+  page_permissions?: string[];
+  requires_2fa?: boolean;
+  is_system_role?: boolean;
+}
+
+interface User {
+  user_id: number;
+  email: string;
+  full_name?: string;
+  roles: {
+    idp: string[];
+    app: string[];
+  };
+}
+
+// ============================================================================
+// VALIDATION
+// ============================================================================
+
+// Role name validation (Security Addendum)
+function validateRoleName(name: string): { valid: boolean; error?: string } {
+  if (!name) return { valid: false, error: 'Role name is required' };
+  if (name.length < 3) return { valid: false, error: 'Role name must be at least 3 characters' };
+  if (name.length > 50) return { valid: false, error: 'Role name must be at most 50 characters' };
+  if (!/^[a-z0-9_]+$/.test(name)) return { valid: false, error: 'Only lowercase letters, numbers, and underscores allowed' };
+  if (name.startsWith('payez_')) return { valid: false, error: 'Role name cannot start with "payez_"' };
+  return { valid: true };
+}
+
+// ============================================================================
+// ROLE EDITOR MODAL
+// ============================================================================
+
+/**
+ * RoleEditorModal - Create or edit a role
+ */
+export function RoleEditorModal({
+  role,
+  pagePermissions,
+  adminAccessiblePages,
+  onSave,
+  onClose,
+  isDark = true,
+}: {
+  role?: Role;
+  pagePermissions: PagePermission[];
+  adminAccessiblePages?: string[];
+  onSave: (data: {
+    role_name: string;
+    display_name?: string;
+    description?: string;
+    page_permissions: string[];
+    requires_2fa: boolean;
+  }) => Promise<void>;
+  onClose: () => void;
+  isDark?: boolean;
+}) {
+  const isEditing = !!role?.role_id;
+
+  // Form state
+  const [roleName, setRoleName] = useState(role?.role_name || '');
+  const [displayName, setDisplayName] = useState(role?.display_name || '');
+  const [description, setDescription] = useState(role?.description || '');
+  const [selectedPermissions, setSelectedPermissions] = useState<string[]>(role?.page_permissions || []);
+  const [requires2FA, setRequires2FA] = useState(role?.requires_2fa || false);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  // Role name validation
+  const [nameValidation, setNameValidation] = useState<{ valid: boolean; error?: string }>({ valid: true });
+
+  useEffect(() => {
+    if (!isEditing && roleName) {
+      setNameValidation(validateRoleName(roleName));
+    }
+  }, [roleName, isEditing]);
+
+  // Filter permissions based on admin access (Security Addendum)
+  const availablePermissions = adminAccessiblePages
+    ? pagePermissions.filter((p) =>
+        adminAccessiblePages.some((ap) => p.route_pattern.startsWith(ap.replace('*', '')))
+      )
+    : pagePermissions;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!isEditing) {
+      const validation = validateRoleName(roleName);
+      if (!validation.valid) {
+        setError(validation.error || 'Invalid role name');
+        return;
+      }
+    }
+
+    try {
+      setSaving(true);
+      await onSave({
+        role_name: roleName,
+        display_name: displayName || undefined,
+        description: description || undefined,
+        page_permissions: selectedPermissions,
+        requires_2fa: requires2FA,
+      });
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save role');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const togglePermission = (pattern: string) => {
+    setSelectedPermissions((prev) =>
+      prev.includes(pattern) ? prev.filter((p) => p !== pattern) : [...prev, pattern]
+    );
+  };
+
+  // Theme colors
+  const modalBg = isDark ? 'bg-slate-800' : 'bg-white';
+  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+  const inputBg = isDark ? 'bg-slate-700' : 'bg-white';
+  const inputBorder = isDark ? 'border-slate-600' : 'border-gray-300';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className={`w-full max-w-lg mx-4 rounded-lg shadow-xl ${modalBg} border ${borderColor} max-h-[90vh] overflow-hidden flex flex-col`}>
+        {/* Header */}
+        <div className={`px-6 py-4 border-b ${borderColor} flex items-center justify-between`}>
+          <h3 className={`text-lg font-semibold ${textPrimary}`}>
+            {isEditing ? `Edit Role: ${role?.role_name}` : 'Create New Role'}
+          </h3>
+          <button onClick={onClose} className={textMuted}>
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
+          <div className="px-6 py-4 space-y-4">
+            {/* Role Name */}
+            <div>
+              <label className={`block text-sm font-medium mb-1 ${textMuted}`}>
+                Role Name <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={roleName}
+                onChange={(e) => setRoleName(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, ''))}
+                disabled={isEditing}
+                className={`w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary} ${isEditing ? 'opacity-50 cursor-not-allowed' : ''} font-mono`}
+                placeholder="e.g., content_editor"
+              />
+              {!isEditing && roleName && !nameValidation.valid && (
+                <p className="mt-1 text-sm text-red-500">{nameValidation.error}</p>
+              )}
+              {!isEditing && (
+                <p className={`mt-1 text-xs ${textMuted}`}>
+                  3-50 characters, lowercase letters, numbers, underscores only
+                </p>
+              )}
+            </div>
+
+            {/* Display Name */}
+            <div>
+              <label className={`block text-sm font-medium mb-1 ${textMuted}`}>Display Name</label>
+              <input
+                type="text"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className={`w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary}`}
+                placeholder="e.g., Content Editor"
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label className={`block text-sm font-medium mb-1 ${textMuted}`}>Description</label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={2}
+                className={`w-full px-3 py-2 rounded-md border ${inputBorder} ${inputBg} ${textPrimary}`}
+                placeholder="What does this role do?"
+              />
+            </div>
+
+            {/* Page Permissions */}
+            <div>
+              <label className={`block text-sm font-medium mb-2 ${textMuted}`}>Page Permissions</label>
+              <div className={`border ${borderColor} rounded-md max-h-48 overflow-y-auto`}>
+                {availablePermissions.length === 0 ? (
+                  <p className={`p-3 text-sm ${textMuted}`}>No page permissions available</p>
+                ) : (
+                  availablePermissions.map((perm) => (
+                    <label
+                      key={perm.page_permission_id}
+                      className={`flex items-center px-3 py-2 border-b last:border-b-0 ${borderColor} cursor-pointer hover:${isDark ? 'bg-slate-700' : 'bg-gray-50'}`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedPermissions.includes(perm.route_pattern)}
+                        onChange={() => togglePermission(perm.route_pattern)}
+                        className="mr-3"
+                      />
+                      <div>
+                        <span className={`font-mono text-sm ${textPrimary}`}>{perm.route_pattern}</span>
+                        {perm.display_name && (
+                          <span className={`block text-xs ${textMuted}`}>{perm.display_name}</span>
+                        )}
+                      </div>
+                    </label>
+                  ))
+                )}
+              </div>
+            </div>
+
+            {/* Security Options */}
+            <div className={`border-t ${borderColor} pt-4`}>
+              <label className={`block text-sm font-medium mb-2 ${textMuted}`}>Security Options</label>
+              <label className="flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={requires2FA}
+                  onChange={(e) => setRequires2FA(e.target.checked)}
+                  className="mr-3"
+                />
+                <span className={textPrimary}>Requires 2FA for all pages</span>
+              </label>
+            </div>
+
+            {/* Error */}
+            {error && (
+              <div className="bg-red-900/30 border border-red-600 rounded-lg p-3">
+                <p className="text-red-400 text-sm">{error}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className={`px-6 py-4 border-t ${borderColor} flex justify-end gap-3`}>
+            <button
+              type="button"
+              onClick={onClose}
+              className={`px-4 py-2 rounded-md border ${borderColor} ${textMuted}`}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={saving || (!isEditing && !nameValidation.valid)}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Role'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// USER ROLE ASSIGNER MODAL
+// ============================================================================
+
+/**
+ * UserRoleAssignerModal - Assign roles to a user
+ */
+export function UserRoleAssignerModal({
+  user,
+  availableRoles,
+  isLastAdmin,
+  currentUserId,
+  onSave,
+  onClose,
+  isDark = true,
+}: {
+  user: User;
+  availableRoles: { role_name: string; display_name?: string; description?: string }[];
+  isLastAdmin?: boolean;
+  currentUserId?: number;
+  onSave: (userId: number, appRoles: string[]) => Promise<void>;
+  onClose: () => void;
+  isDark?: boolean;
+}) {
+  const [selectedRoles, setSelectedRoles] = useState<string[]>(user.roles.app);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Security: Self-assignment warning
+    if (user.user_id === currentUserId) {
+      if (!confirm('You are modifying your own roles. Changes take effect on next login. Continue?')) {
+        return;
+      }
+    }
+
+    // Security Addendum: Last admin warning
+    const hadAdmin = user.roles.app.some((r) => r.includes('admin'));
+    const hasAdmin = selectedRoles.some((r) => r.includes('admin'));
+
+    if (hadAdmin && !hasAdmin && isLastAdmin) {
+      if (!confirm('Warning: This is the last administrator. Removing admin access will lock out admin access. Continue?')) {
+        return;
+      }
+    }
+
+    try {
+      setSaving(true);
+      await onSave(user.user_id, selectedRoles);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update roles');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const toggleRole = (roleName: string) => {
+    setSelectedRoles((prev) =>
+      prev.includes(roleName) ? prev.filter((r) => r !== roleName) : [...prev, roleName]
+    );
+  };
+
+  // Theme colors
+  const modalBg = isDark ? 'bg-slate-800' : 'bg-white';
+  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className={`w-full max-w-md mx-4 rounded-lg shadow-xl ${modalBg} border ${borderColor}`}>
+        {/* Header */}
+        <div className={`px-6 py-4 border-b ${borderColor} flex items-center justify-between`}>
+          <div>
+            <h3 className={`text-lg font-semibold ${textPrimary}`}>Edit Roles</h3>
+            <p className={`text-sm ${textMuted}`}>{user.full_name || user.email}</p>
+          </div>
+          <button onClick={onClose} className={textMuted}>
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit}>
+          <div className="px-6 py-4 space-y-4">
+            {/* IDP Roles (read-only) */}
+            {user.roles.idp.length > 0 && (
+              <div>
+                <label className={`block text-sm font-medium mb-2 ${textMuted}`}>
+                  IDP Roles (read-only)
+                  <svg className="inline w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                </label>
+                <div className="space-y-1">
+                  {user.roles.idp.map((role) => (
+                    <div key={role} className={`flex items-center px-3 py-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+                      <span className={textMuted}>{role}</span>
+                      <span className={`ml-auto text-xs ${textMuted}`}>assigned by IDP</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Application Roles */}
+            <div>
+              <label className={`block text-sm font-medium mb-2 ${textMuted}`}>Application Roles</label>
+              <div className={`border ${borderColor} rounded-md`}>
+                {availableRoles.map((role) => (
+                  <label
+                    key={role.role_name}
+                    className={`flex items-start px-3 py-2 border-b last:border-b-0 ${borderColor} cursor-pointer hover:${isDark ? 'bg-slate-700' : 'bg-gray-50'}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedRoles.includes(role.role_name)}
+                      onChange={() => toggleRole(role.role_name)}
+                      className="mt-1 mr-3"
+                    />
+                    <div>
+                      <span className={textPrimary}>{role.display_name || role.role_name}</span>
+                      {role.description && (
+                        <span className={`block text-xs ${textMuted}`}>{role.description}</span>
+                      )}
+                    </div>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* Error */}
+            {error && (
+              <div className="bg-red-900/30 border border-red-600 rounded-lg p-3">
+                <p className="text-red-400 text-sm">{error}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className={`px-6 py-4 border-t ${borderColor} flex justify-end gap-3`}>
+            <button
+              type="button"
+              onClick={onClose}
+              className={`px-4 py-2 rounded-md border ${borderColor} ${textMuted}`}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}