refactor: replace role/policy modals with separate pages

- Create AdminRoleEdit.tsx for /admin/roles/create and /admin/roles/:id/edit
- Create AdminPolicyEdit.tsx for /admin/policies/create and /admin/policies/:id/edit
- Remove create/edit modals from AdminRoles.tsx and AdminPolicies.tsx
- Add new lazy routes in App.tsx with proper permission gates
- Keep delete confirmation as small inline modal (appropriate for destructive action)

src/pages/AdminRoles.tsx

@@ -1,14 +1,8 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import {
-  rbacApi,
-  AdminRole,
-  PermissionSection,
-  CreateRolePayload,
-  UpdateRolePayload,
-} from '@/api/rbac';
+import { rbacApi } from '@/api/rbac';
 import { PermissionGate } from '@/components/auth/PermissionGate';
 import { usePermissionStore } from '@/store/permissions';
 import { usePlatform } from '@/platform/hooks/usePlatform';
@@ -53,24 +47,6 @@ const TrashIcon = () => (
   </svg>
 );
 
-const ChevronDownIcon = ({ className }: { className?: string }) => (
-  <svg
-    className={className || 'h-4 w-4'}
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth={2}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-  </svg>
-);
-
-const XMarkIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-);
-
 const ShieldIcon = () => (
   <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
     <path
@@ -81,214 +57,6 @@ const ShieldIcon = () => (
   </svg>
 );
 
-// === Constants ===
-
-const ROLE_COLORS = [
-  '#6366f1', // indigo
-  '#8b5cf6', // violet
-  '#a855f7', // purple
-  '#ec4899', // pink
-  '#ef4444', // red
-  '#f97316', // orange
-  '#eab308', // yellow
-  '#22c55e', // green
-  '#14b8a6', // teal
-  '#06b6d4', // cyan
-  '#3b82f6', // blue
-  '#6b7280', // gray
-];
-
-const PRESETS: Record<string, string[]> = {
-  moderator: ['users:read', 'users:edit', 'users:block', 'tickets:*', 'ban_system:*'],
-  marketer: [
-    'campaigns:*',
-    'broadcasts:*',
-    'promocodes:*',
-    'promo_offers:*',
-    'promo_groups:*',
-    'stats:read',
-    'pinned_messages:*',
-    'wheel:*',
-  ],
-  support: ['tickets:read', 'tickets:reply', 'users:read'],
-};
-
-// === Types ===
-
-interface RoleFormData {
-  name: string;
-  description: string;
-  level: number;
-  color: string;
-  permissions: string[];
-}
-
-const INITIAL_FORM: RoleFormData = {
-  name: '',
-  description: '',
-  level: 50,
-  color: ROLE_COLORS[0],
-  permissions: [],
-};
-
-// === Sub-components ===
-
-interface PermissionMatrixProps {
-  registry: PermissionSection[];
-  selectedPermissions: string[];
-  onToggle: (perm: string) => void;
-  onToggleSection: (section: string, actions: string[]) => void;
-}
-
-function PermissionMatrix({
-  registry,
-  selectedPermissions,
-  onToggle,
-  onToggleSection,
-}: PermissionMatrixProps) {
-  const { t } = useTranslation();
-  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-
-  const toggleExpand = useCallback((section: string) => {
-    setExpanded((prev) => ({ ...prev, [section]: !prev[section] }));
-  }, []);
-
-  const isSectionFullySelected = useCallback(
-    (section: string, actions: string[]) => {
-      return actions.every((action) => {
-        const perm = `${section}:${action}`;
-        return selectedPermissions.includes(perm) || selectedPermissions.includes(`${section}:*`);
-      });
-    },
-    [selectedPermissions],
-  );
-
-  const isSectionPartiallySelected = useCallback(
-    (section: string, actions: string[]) => {
-      const hasAny = actions.some((action) => {
-        const perm = `${section}:${action}`;
-        return selectedPermissions.includes(perm) || selectedPermissions.includes(`${section}:*`);
-      });
-      return hasAny && !isSectionFullySelected(section, actions);
-    },
-    [selectedPermissions, isSectionFullySelected],
-  );
-
-  const isPermSelected = useCallback(
-    (section: string, action: string) => {
-      const perm = `${section}:${action}`;
-      return selectedPermissions.includes(perm) || selectedPermissions.includes(`${section}:*`);
-    },
-    [selectedPermissions],
-  );
-
-  return (
-    <div className="space-y-2">
-      <label className="text-sm font-medium text-dark-200">
-        {t('admin.roles.form.permissions')}
-      </label>
-      <div className="max-h-80 space-y-1 overflow-y-auto rounded-lg border border-dark-600 bg-dark-900/50 p-2">
-        {registry.map((section) => {
-          const isExpanded = expanded[section.section] ?? false;
-          const allSelected = isSectionFullySelected(section.section, section.actions);
-          const partialSelected = isSectionPartiallySelected(section.section, section.actions);
-
-          return (
-            <div
-              key={section.section}
-              className="rounded-lg border border-dark-700/50 bg-dark-800/30"
-            >
-              {/* Section header */}
-              <div className="flex items-center gap-2 px-3 py-2">
-                <button
-                  type="button"
-                  onClick={() => onToggleSection(section.section, section.actions)}
-                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${
-                    allSelected
-                      ? 'border-accent-500 bg-accent-500'
-                      : partialSelected
-                        ? 'border-accent-500 bg-accent-500/40'
-                        : 'border-dark-500 hover:border-dark-400'
-                  }`}
-                  aria-label={t('admin.roles.form.toggleSection', {
-                    section: section.section,
-                  })}
-                >
-                  {(allSelected || partialSelected) && (
-                    <svg
-                      className="h-3 w-3 text-white"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      strokeWidth={3}
-                    >
-                      {allSelected ? (
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          d="M4.5 12.75l6 6 9-13.5"
-                        />
-                      ) : (
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
-                      )}
-                    </svg>
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => toggleExpand(section.section)}
-                  className="flex flex-1 items-center justify-between"
-                >
-                  <span className="text-sm font-medium text-dark-200">{section.section}</span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-dark-500">
-                      {section.actions.filter((a) => isPermSelected(section.section, a)).length}/
-                      {section.actions.length}
-                    </span>
-                    <ChevronDownIcon
-                      className={`h-4 w-4 text-dark-400 transition-transform ${
-                        isExpanded ? 'rotate-180' : ''
-                      }`}
-                    />
-                  </div>
-                </button>
-              </div>
-
-              {/* Actions list */}
-              {isExpanded && (
-                <div className="border-t border-dark-700/50 px-3 py-2">
-                  <div className="flex flex-wrap gap-2">
-                    {section.actions.map((action) => {
-                      const perm = `${section.section}:${action}`;
-                      const selected = isPermSelected(section.section, action);
-
-                      return (
-                        <button
-                          key={perm}
-                          type="button"
-                          onClick={() => onToggle(perm)}
-                          className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
-                            selected
-                              ? 'bg-accent-500/20 text-accent-400'
-                              : 'bg-dark-700/50 text-dark-400 hover:bg-dark-700 hover:text-dark-300'
-                          }`}
-                          aria-pressed={selected}
-                        >
-                          {action}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
 // === Main Page ===
 
 export default function AdminRoles() {
@@ -298,10 +66,6 @@ export default function AdminRoles() {
   const { capabilities } = usePlatform();
   const canManageRole = usePermissionStore((s) => s.canManageRole);
 
-  // Modal state
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editingRole, setEditingRole] = useState<AdminRole | null>(null);
-  const [formData, setFormData] = useState<RoleFormData>(INITIAL_FORM);
   const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
 
@@ -315,35 +79,7 @@ export default function AdminRoles() {
     queryFn: rbacApi.getRoles,
   });
 
-  const { data: permissionRegistry } = useQuery({
-    queryKey: ['admin-permission-registry'],
-    queryFn: rbacApi.getPermissionRegistry,
-  });
-
   // Mutations
-  const createMutation = useMutation({
-    mutationFn: (payload: CreateRolePayload) => rbacApi.createRole(payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-roles'] });
-      closeModal();
-    },
-    onError: () => {
-      setFormError(t('admin.roles.errors.createFailed'));
-    },
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, payload }: { id: number; payload: UpdateRolePayload }) =>
-      rbacApi.updateRole(id, payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-roles'] });
-      closeModal();
-    },
-    onError: () => {
-      setFormError(t('admin.roles.errors.updateFailed'));
-    },
-  });
-
   const deleteMutation = useMutation({
     mutationFn: rbacApi.deleteRole,
     onSuccess: () => {
@@ -356,107 +92,6 @@ export default function AdminRoles() {
     },
   });
 
-  // Handlers
-  const closeModal = useCallback(() => {
-    setModalOpen(false);
-    setEditingRole(null);
-    setFormData(INITIAL_FORM);
-    setFormError(null);
-  }, []);
-
-  const openCreateModal = useCallback(() => {
-    setEditingRole(null);
-    setFormData(INITIAL_FORM);
-    setFormError(null);
-    setModalOpen(true);
-  }, []);
-
-  const openEditModal = useCallback((role: AdminRole) => {
-    setEditingRole(role);
-    setFormData({
-      name: role.name,
-      description: role.description || '',
-      level: role.level,
-      color: role.color || ROLE_COLORS[0],
-      permissions: [...role.permissions],
-    });
-    setFormError(null);
-    setModalOpen(true);
-  }, []);
-
-  const handleTogglePermission = useCallback((perm: string) => {
-    setFormData((prev) => {
-      const has = prev.permissions.includes(perm);
-      return {
-        ...prev,
-        permissions: has ? prev.permissions.filter((p) => p !== perm) : [...prev.permissions, perm],
-      };
-    });
-  }, []);
-
-  const handleToggleSection = useCallback((section: string, actions: string[]) => {
-    setFormData((prev) => {
-      const allPerms = actions.map((a) => `${section}:${a}`);
-      const allSelected = allPerms.every(
-        (p) => prev.permissions.includes(p) || prev.permissions.includes(`${section}:*`),
-      );
-
-      if (allSelected) {
-        // Deselect all in this section (both individual and wildcard)
-        const sectionPerms = new Set([...allPerms, `${section}:*`]);
-        return {
-          ...prev,
-          permissions: prev.permissions.filter((p) => !sectionPerms.has(p)),
-        };
-      }
-
-      // Select all: use wildcard
-      const withoutSection = prev.permissions.filter((p) => !p.startsWith(`${section}:`));
-      return {
-        ...prev,
-        permissions: [...withoutSection, `${section}:*`],
-      };
-    });
-  }, []);
-
-  const handleApplyPreset = useCallback((presetKey: string) => {
-    const presetPerms = PRESETS[presetKey];
-    if (!presetPerms) return;
-    setFormData((prev) => ({
-      ...prev,
-      permissions: [...presetPerms],
-    }));
-  }, []);
-
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      setFormError(null);
-
-      if (!formData.name.trim()) {
-        setFormError(t('admin.roles.errors.nameRequired'));
-        return;
-      }
-
-      const payload = {
-        name: formData.name.trim(),
-        description: formData.description.trim() || null,
-        level: formData.level,
-        permissions: formData.permissions,
-        color: formData.color,
-      };
-
-      if (editingRole) {
-        updateMutation.mutate({ id: editingRole.id, payload });
-      } else {
-        createMutation.mutate(payload);
-      }
-    },
-    [formData, editingRole, createMutation, updateMutation, t],
-  );
-
-  const isSaving = createMutation.isPending || updateMutation.isPending;
-
   // Sorted roles by level descending
   const sortedRoles = useMemo(() => {
     if (!roles) return [];
@@ -483,7 +118,7 @@ export default function AdminRoles() {
         </div>
         <PermissionGate permission="roles:create">
           <button
-            onClick={openCreateModal}
+            onClick={() => navigate('/admin/roles/create')}
             className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
           >
             <PlusIcon />
@@ -492,6 +127,13 @@ export default function AdminRoles() {
         </PermissionGate>
       </div>
 
+      {/* Error message */}
+      {formError && (
+        <div className="mb-4 rounded-lg border border-error-500/30 bg-error-500/10 p-3">
+          <p className="text-sm text-error-400">{formError}</p>
+        </div>
+      )}
+
       {/* Stats Overview */}
       {sortedRoles.length > 0 && (
         <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-3">
@@ -577,7 +219,7 @@ export default function AdminRoles() {
                 <div className="flex items-center gap-2 border-t border-dark-700 pt-3 sm:border-0 sm:pt-0">
                   <PermissionGate permission="roles:edit">
                     <button
-                      onClick={() => openEditModal(role)}
+                      onClick={() => navigate(`/admin/roles/${role.id}/edit`)}
                       disabled={role.is_system || !canManageRole(role.level)}
                       className="flex-1 rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100 disabled:cursor-not-allowed disabled:opacity-40 sm:flex-none"
                       title={t('admin.roles.actions.edit')}
@@ -602,189 +244,6 @@ export default function AdminRoles() {
         </div>
       )}
 
-      {/* Create / Edit Modal */}
-      {modalOpen && (
-        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[5vh]">
-          {/* Backdrop */}
-          <div className="fixed inset-0 bg-black/60" onClick={closeModal} aria-hidden="true" />
-          {/* Modal content */}
-          <div className="relative w-full max-w-lg rounded-xl border border-dark-700 bg-dark-800 p-6 shadow-xl">
-            {/* Modal header */}
-            <div className="mb-5 flex items-center justify-between">
-              <h2 className="text-lg font-semibold text-dark-100">
-                {editingRole
-                  ? t('admin.roles.modal.editTitle')
-                  : t('admin.roles.modal.createTitle')}
-              </h2>
-              <button
-                onClick={closeModal}
-                className="rounded-lg p-1 text-dark-400 transition-colors hover:bg-dark-700 hover:text-dark-200"
-                aria-label={t('admin.roles.modal.close')}
-              >
-                <XMarkIcon />
-              </button>
-            </div>
-
-            <form onSubmit={handleSubmit} className="space-y-4">
-              {/* Name */}
-              <div>
-                <label htmlFor="role-name" className="mb-1 block text-sm font-medium text-dark-200">
-                  {t('admin.roles.form.name')}
-                </label>
-                <input
-                  id="role-name"
-                  type="text"
-                  value={formData.name}
-                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 placeholder-dark-500 outline-none transition-colors focus:border-accent-500"
-                  placeholder={t('admin.roles.form.namePlaceholder')}
-                  autoFocus
-                />
-              </div>
-
-              {/* Description */}
-              <div>
-                <label
-                  htmlFor="role-description"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.roles.form.description')}
-                </label>
-                <textarea
-                  id="role-description"
-                  value={formData.description}
-                  onChange={(e) =>
-                    setFormData((prev) => ({ ...prev, description: e.target.value }))
-                  }
-                  className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 placeholder-dark-500 outline-none transition-colors focus:border-accent-500"
-                  placeholder={t('admin.roles.form.descriptionPlaceholder')}
-                  rows={2}
-                />
-              </div>
-
-              {/* Level */}
-              <div>
-                <label
-                  htmlFor="role-level"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.roles.form.level')}
-                </label>
-                <div className="flex items-center gap-3">
-                  <input
-                    id="role-level"
-                    type="range"
-                    min={0}
-                    max={999}
-                    value={formData.level}
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        level: Number(e.target.value),
-                      }))
-                    }
-                    className="flex-1 accent-accent-500"
-                  />
-                  <input
-                    type="number"
-                    min={0}
-                    max={999}
-                    value={formData.level}
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        level: Math.min(999, Math.max(0, Number(e.target.value) || 0)),
-                      }))
-                    }
-                    className="w-20 rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-center text-sm text-dark-100 outline-none focus:border-accent-500"
-                    aria-label={t('admin.roles.form.levelValue')}
-                  />
-                </div>
-                <p className="mt-1 text-xs text-dark-500">{t('admin.roles.form.levelHint')}</p>
-              </div>
-
-              {/* Color picker */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-dark-200">
-                  {t('admin.roles.form.color')}
-                </label>
-                <div className="flex flex-wrap gap-2">
-                  {ROLE_COLORS.map((color) => (
-                    <button
-                      key={color}
-                      type="button"
-                      onClick={() => setFormData((prev) => ({ ...prev, color }))}
-                      className={`h-7 w-7 rounded-full border-2 transition-transform hover:scale-110 ${
-                        formData.color === color ? 'scale-110 border-white' : 'border-transparent'
-                      }`}
-                      style={{ backgroundColor: color }}
-                      aria-label={color}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              {/* Preset buttons */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-dark-200">
-                  {t('admin.roles.form.presets')}
-                </label>
-                <div className="flex flex-wrap gap-2">
-                  {Object.keys(PRESETS).map((key) => (
-                    <button
-                      key={key}
-                      type="button"
-                      onClick={() => handleApplyPreset(key)}
-                      className="rounded-lg border border-dark-600 bg-dark-700 px-3 py-1.5 text-xs font-medium text-dark-300 transition-colors hover:border-accent-500/50 hover:bg-accent-500/10 hover:text-accent-400"
-                    >
-                      {t(`admin.roles.presets.${key}`)}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              {/* Permission Matrix */}
-              {permissionRegistry && permissionRegistry.length > 0 && (
-                <PermissionMatrix
-                  registry={permissionRegistry}
-                  selectedPermissions={formData.permissions}
-                  onToggle={handleTogglePermission}
-                  onToggleSection={handleToggleSection}
-                />
-              )}
-
-              {/* Selected count */}
-              <p className="text-xs text-dark-500">
-                {t('admin.roles.form.selectedPermissions', {
-                  count: formData.permissions.length,
-                })}
-              </p>
-
-              {/* Error */}
-              {formError && <p className="text-sm text-error-400">{formError}</p>}
-
-              {/* Actions */}
-              <div className="flex justify-end gap-3 pt-2">
-                <button
-                  type="button"
-                  onClick={closeModal}
-                  className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-                >
-                  {t('admin.roles.form.cancel')}
-                </button>
-                <button
-                  type="submit"
-                  disabled={isSaving}
-                  className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
-                >
-                  {isSaving ? t('admin.roles.form.saving') : t('admin.roles.form.save')}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-
       {/* Delete Confirmation */}
       {deleteConfirm !== null && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">