From 85c93158fbd5f0e781c263d1d7b4357f7b86752a Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 04:20:37 +0300
Subject: [PATCH] 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/App.tsx                   |  42 ++
 src/pages/AdminPolicies.tsx   | 707 +--------------------------------
 src/pages/AdminPolicyEdit.tsx | 716 ++++++++++++++++++++++++++++++++++
 src/pages/AdminRoleEdit.tsx   | 536 +++++++++++++++++++++++++
 src/pages/AdminRoles.tsx      | 563 +-------------------------
 5 files changed, 1317 insertions(+), 1247 deletions(-)
 create mode 100644 src/pages/AdminPolicyEdit.tsx
 create mode 100644 src/pages/AdminRoleEdit.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fb404cb..a9214ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -91,8 +91,10 @@ const AdminPinnedMessageCreate = lazy(() => import('./pages/AdminPinnedMessageCr
 const AdminChannelSubscriptions = lazy(() => import('./pages/AdminChannelSubscriptions'));
 const AdminEmailTemplatePreview = lazy(() => import('./pages/AdminEmailTemplatePreview'));
 const AdminRoles = lazy(() => import('./pages/AdminRoles'));
+const AdminRoleEdit = lazy(() => import('./pages/AdminRoleEdit'));
 const AdminRoleAssign = lazy(() => import('./pages/AdminRoleAssign'));
 const AdminPolicies = lazy(() => import('./pages/AdminPolicies'));
+const AdminPolicyEdit = lazy(() => import('./pages/AdminPolicyEdit'));
 const AdminAuditLog = lazy(() => import('./pages/AdminAuditLog'));
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -892,6 +894,26 @@ function App() {
             </PermissionRoute>
           }
         />
+        <Route
+          path="/admin/roles/create"
+          element={
+            <PermissionRoute permission="roles:create">
+              <LazyPage>
+                <AdminRoleEdit />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+        <Route
+          path="/admin/roles/:id/edit"
+          element={
+            <PermissionRoute permission="roles:edit">
+              <LazyPage>
+                <AdminRoleEdit />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
         <Route
           path="/admin/roles/assign"
           element={
@@ -912,6 +934,26 @@ function App() {
             </PermissionRoute>
           }
         />
+        <Route
+          path="/admin/policies/create"
+          element={
+            <PermissionRoute permission="roles:create">
+              <LazyPage>
+                <AdminPolicyEdit />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
+        <Route
+          path="/admin/policies/:id/edit"
+          element={
+            <PermissionRoute permission="roles:edit">
+              <LazyPage>
+                <AdminPolicyEdit />
+              </LazyPage>
+            </PermissionRoute>
+          }
+        />
         <Route
           path="/admin/audit-log"
           element={
diff --git a/src/pages/AdminPolicies.tsx b/src/pages/AdminPolicies.tsx
index 664f069..0743155 100644
--- a/src/pages/AdminPolicies.tsx
+++ b/src/pages/AdminPolicies.tsx
@@ -2,13 +2,7 @@ import { useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import {
-  rbacApi,
-  AccessPolicy,
-  AdminRole,
-  CreatePolicyPayload,
-  UpdatePolicyPayload,
-} from '@/api/rbac';
+import { rbacApi, AccessPolicy, AdminRole } from '@/api/rbac';
 import { PermissionGate } from '@/components/auth/PermissionGate';
 import { usePlatform } from '@/platform/hooks/usePlatform';
 
@@ -52,12 +46,6 @@ const TrashIcon = () => (
   </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
@@ -98,55 +86,14 @@ const BoltIcon = () => (
   </svg>
 );
 
-// === Types ===
+// === Helpers ===
 
 interface PolicyConditions {
-  time_range?: {
-    start: string;
-    end: string;
-  };
+  time_range?: { start: string; end: string };
   ip_whitelist?: string[];
   rate_limit?: number;
 }
 
-interface PolicyFormData {
-  name: string;
-  description: string;
-  effect: 'allow' | 'deny';
-  resource: string;
-  actions: string[];
-  role_id: number | null;
-  priority: number;
-  conditions: PolicyConditions;
-  conditionsEnabled: {
-    time_range: boolean;
-    ip_whitelist: boolean;
-    rate_limit: boolean;
-  };
-}
-
-const INITIAL_FORM: PolicyFormData = {
-  name: '',
-  description: '',
-  effect: 'allow',
-  resource: '',
-  actions: [],
-  role_id: null,
-  priority: 0,
-  conditions: {
-    time_range: { start: '09:00', end: '18:00' },
-    ip_whitelist: [],
-    rate_limit: 100,
-  },
-  conditionsEnabled: {
-    time_range: false,
-    ip_whitelist: false,
-    rate_limit: false,
-  },
-};
-
-// === Helpers ===
-
 function parseConditions(raw: Record<string, unknown>): PolicyConditions {
   const result: PolicyConditions = {};
 
@@ -168,25 +115,6 @@ function parseConditions(raw: Record<string, unknown>): PolicyConditions {
   return result;
 }
 
-function buildConditionsPayload(
-  conditions: PolicyConditions,
-  enabled: PolicyFormData['conditionsEnabled'],
-): Record<string, unknown> {
-  const result: Record<string, unknown> = {};
-
-  if (enabled.time_range && conditions.time_range) {
-    result.time_range = conditions.time_range;
-  }
-  if (enabled.ip_whitelist && conditions.ip_whitelist && conditions.ip_whitelist.length > 0) {
-    result.ip_whitelist = conditions.ip_whitelist;
-  }
-  if (enabled.rate_limit && conditions.rate_limit !== undefined) {
-    result.rate_limit = conditions.rate_limit;
-  }
-
-  return result;
-}
-
 // === Sub-components ===
 
 interface EffectBadgeProps {
@@ -211,109 +139,6 @@ function EffectBadge({ effect, className }: EffectBadgeProps) {
   );
 }
 
-interface IpTagInputProps {
-  values: string[];
-  onChange: (values: string[]) => void;
-}
-
-function IpTagInput({ values, onChange }: IpTagInputProps) {
-  const { t } = useTranslation();
-  const [inputValue, setInputValue] = useState('');
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter' || e.key === ',') {
-        e.preventDefault();
-        const trimmed = inputValue.trim().replace(/,+$/, '');
-        if (trimmed && !values.includes(trimmed)) {
-          onChange([...values, trimmed]);
-        }
-        setInputValue('');
-      } else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
-        onChange(values.slice(0, -1));
-      }
-    },
-    [inputValue, values, onChange],
-  );
-
-  const removeIp = useCallback(
-    (ip: string) => {
-      onChange(values.filter((v) => v !== ip));
-    },
-    [values, onChange],
-  );
-
-  return (
-    <div className="flex flex-wrap items-center gap-1.5 rounded-lg border border-dark-600 bg-dark-900 px-3 py-2">
-      {values.map((ip) => (
-        <span
-          key={ip}
-          className="inline-flex items-center gap-1 rounded-md bg-dark-700 px-2 py-0.5 text-xs text-dark-200"
-        >
-          {ip}
-          <button
-            type="button"
-            onClick={() => removeIp(ip)}
-            className="text-dark-400 transition-colors hover:text-dark-200"
-            aria-label={t('admin.policies.conditions.removeIp', { ip })}
-          >
-            <svg
-              className="h-3 w-3"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </span>
-      ))}
-      <input
-        type="text"
-        value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        className="min-w-[120px] flex-1 bg-transparent text-sm text-dark-100 placeholder-dark-500 outline-none"
-        placeholder={values.length === 0 ? t('admin.policies.conditions.ipPlaceholder') : ''}
-      />
-    </div>
-  );
-}
-
-interface ConditionToggleProps {
-  label: string;
-  enabled: boolean;
-  onToggle: () => void;
-  children: React.ReactNode;
-}
-
-function ConditionToggle({ label, enabled, onToggle, children }: ConditionToggleProps) {
-  return (
-    <div className="rounded-lg border border-dark-700/50 bg-dark-800/30">
-      <button
-        type="button"
-        onClick={onToggle}
-        className="flex w-full items-center justify-between px-3 py-2"
-      >
-        <span className="text-sm font-medium text-dark-200">{label}</span>
-        <div
-          className={`relative h-5 w-9 rounded-full transition-colors ${
-            enabled ? 'bg-accent-500' : 'bg-dark-600'
-          }`}
-        >
-          <div
-            className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
-              enabled ? 'translate-x-4' : 'translate-x-0.5'
-            }`}
-          />
-        </div>
-      </button>
-      {enabled && <div className="border-t border-dark-700/50 px-3 py-2.5">{children}</div>}
-    </div>
-  );
-}
-
 // === Main Page ===
 
 export default function AdminPolicies() {
@@ -322,10 +147,6 @@ export default function AdminPolicies() {
   const queryClient = useQueryClient();
   const { capabilities } = usePlatform();
 
-  // Modal state
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editingPolicy, setEditingPolicy] = useState<AccessPolicy | null>(null);
-  const [formData, setFormData] = useState<PolicyFormData>(INITIAL_FORM);
   const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
 
@@ -344,35 +165,7 @@ export default function AdminPolicies() {
     queryFn: rbacApi.getRoles,
   });
 
-  const { data: permissionRegistry } = useQuery({
-    queryKey: ['admin-permission-registry'],
-    queryFn: rbacApi.getPermissionRegistry,
-  });
-
   // Mutations
-  const createMutation = useMutation({
-    mutationFn: (payload: CreatePolicyPayload) => rbacApi.createPolicy(payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-policies'] });
-      closeModal();
-    },
-    onError: () => {
-      setFormError(t('admin.policies.errors.createFailed'));
-    },
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, payload }: { id: number; payload: UpdatePolicyPayload }) =>
-      rbacApi.updatePolicy(id, payload),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-policies'] });
-      closeModal();
-    },
-    onError: () => {
-      setFormError(t('admin.policies.errors.updateFailed'));
-    },
-  });
-
   const deleteMutation = useMutation({
     mutationFn: rbacApi.deletePolicy,
     onSuccess: () => {
@@ -396,138 +189,11 @@ export default function AdminPolicies() {
     return map;
   }, [roles]);
 
-  const resourceSections = useMemo(() => {
-    if (!permissionRegistry) return [];
-    return permissionRegistry;
-  }, [permissionRegistry]);
-
-  const selectedResourceActions = useMemo(() => {
-    if (!formData.resource || !permissionRegistry) return [];
-    const section = permissionRegistry.find((s) => s.section === formData.resource);
-    return section?.actions ?? [];
-  }, [formData.resource, permissionRegistry]);
-
   const sortedPolicies = useMemo(() => {
     if (!policies) return [];
     return [...policies].sort((a, b) => b.priority - a.priority);
   }, [policies]);
 
-  // Handlers
-  const closeModal = useCallback(() => {
-    setModalOpen(false);
-    setEditingPolicy(null);
-    setFormData(INITIAL_FORM);
-    setFormError(null);
-  }, []);
-
-  const openCreateModal = useCallback(() => {
-    setEditingPolicy(null);
-    setFormData(INITIAL_FORM);
-    setFormError(null);
-    setModalOpen(true);
-  }, []);
-
-  const openEditModal = useCallback((policy: AccessPolicy) => {
-    const parsed = parseConditions(policy.conditions);
-
-    const actions = Array.isArray(policy.actions) ? policy.actions : [];
-
-    setEditingPolicy(policy);
-    setFormData({
-      name: policy.name,
-      description: policy.description ?? '',
-      effect: policy.effect,
-      resource: policy.resource,
-      actions,
-      role_id: policy.role_id ?? null,
-      priority: policy.priority,
-      conditions: {
-        time_range: parsed.time_range ?? { start: '09:00', end: '18:00' },
-        ip_whitelist: parsed.ip_whitelist ?? [],
-        rate_limit: parsed.rate_limit ?? 100,
-      },
-      conditionsEnabled: {
-        time_range: !!parsed.time_range,
-        ip_whitelist: !!parsed.ip_whitelist && parsed.ip_whitelist.length > 0,
-        rate_limit: parsed.rate_limit !== undefined,
-      },
-    });
-    setFormError(null);
-    setModalOpen(true);
-  }, []);
-
-  const handleToggleAction = useCallback((action: string) => {
-    setFormData((prev) => {
-      const has = prev.actions.includes(action);
-      return {
-        ...prev,
-        actions: has ? prev.actions.filter((a) => a !== action) : [...prev.actions, action],
-      };
-    });
-  }, []);
-
-  const handleResourceChange = useCallback((resource: string) => {
-    setFormData((prev) => ({
-      ...prev,
-      resource,
-      actions: [],
-    }));
-  }, []);
-
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      setFormError(null);
-
-      if (!formData.name.trim()) {
-        setFormError(t('admin.policies.errors.nameRequired'));
-        return;
-      }
-      if (!formData.resource) {
-        setFormError(t('admin.policies.errors.resourceRequired'));
-        return;
-      }
-      if (formData.actions.length === 0) {
-        setFormError(t('admin.policies.errors.actionsRequired'));
-        return;
-      }
-
-      const conditionsPayload = buildConditionsPayload(
-        formData.conditions,
-        formData.conditionsEnabled,
-      );
-
-      if (editingPolicy) {
-        const payload: UpdatePolicyPayload = {
-          name: formData.name.trim(),
-          description: formData.description.trim() || null,
-          effect: formData.effect,
-          resource: formData.resource,
-          actions: formData.actions,
-          conditions: conditionsPayload,
-          priority: formData.priority,
-          role_id: formData.role_id,
-        };
-        updateMutation.mutate({ id: editingPolicy.id, payload });
-      } else {
-        const payload: CreatePolicyPayload = {
-          name: formData.name.trim(),
-          description: formData.description.trim() || null,
-          effect: formData.effect,
-          resource: formData.resource,
-          actions: formData.actions,
-          conditions: conditionsPayload,
-          priority: formData.priority,
-          role_id: formData.role_id,
-        };
-        createMutation.mutate(payload);
-      }
-    },
-    [formData, editingPolicy, createMutation, updateMutation, t],
-  );
-
-  const isSaving = createMutation.isPending || updateMutation.isPending;
-
   // Condition icons renderer
   const renderConditionIcons = useCallback(
     (conditions: Record<string, unknown>) => {
@@ -608,7 +274,7 @@ export default function AdminPolicies() {
         </div>
         <PermissionGate permission="roles:create">
           <button
-            onClick={openCreateModal}
+            onClick={() => navigate('/admin/policies/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 />
@@ -617,6 +283,13 @@ export default function AdminPolicies() {
         </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 */}
       {sortedPolicies.length > 0 && (
         <div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
@@ -716,7 +389,7 @@ export default function AdminPolicies() {
                   <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(policy)}
+                        onClick={() => navigate(`/admin/policies/${policy.id}/edit`)}
                         className="flex-1 rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100 sm:flex-none"
                         title={t('admin.policies.actions.edit')}
                       >
@@ -740,362 +413,6 @@ export default function AdminPolicies() {
         </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">
-                {editingPolicy
-                  ? t('admin.policies.modal.editTitle')
-                  : t('admin.policies.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.policies.modal.close')}
-              >
-                <XMarkIcon />
-              </button>
-            </div>
-
-            <form onSubmit={handleSubmit} className="space-y-4">
-              {/* Name */}
-              <div>
-                <label
-                  htmlFor="policy-name"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.policies.form.name')}
-                </label>
-                <input
-                  id="policy-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.policies.form.namePlaceholder')}
-                  autoFocus
-                />
-              </div>
-
-              {/* Description */}
-              <div>
-                <label
-                  htmlFor="policy-description"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.policies.form.description')}
-                </label>
-                <textarea
-                  id="policy-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.policies.form.descriptionPlaceholder')}
-                  rows={2}
-                />
-              </div>
-
-              {/* Effect toggle */}
-              <div>
-                <label className="mb-1 block text-sm font-medium text-dark-200">
-                  {t('admin.policies.form.effect')}
-                </label>
-                <div className="flex gap-2">
-                  <button
-                    type="button"
-                    onClick={() => setFormData((prev) => ({ ...prev, effect: 'allow' }))}
-                    className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
-                      formData.effect === 'allow'
-                        ? 'border-green-500/50 bg-green-500/10 text-green-400'
-                        : 'border-dark-600 bg-dark-900 text-dark-400 hover:border-dark-500'
-                    }`}
-                  >
-                    {t('admin.policies.effectAllow')}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setFormData((prev) => ({ ...prev, effect: 'deny' }))}
-                    className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
-                      formData.effect === 'deny'
-                        ? 'border-red-500/50 bg-red-500/10 text-red-400'
-                        : 'border-dark-600 bg-dark-900 text-dark-400 hover:border-dark-500'
-                    }`}
-                  >
-                    {t('admin.policies.effectDeny')}
-                  </button>
-                </div>
-              </div>
-
-              {/* Resource dropdown */}
-              <div>
-                <label
-                  htmlFor="policy-resource"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.policies.form.resource')}
-                </label>
-                <select
-                  id="policy-resource"
-                  value={formData.resource}
-                  onChange={(e) => handleResourceChange(e.target.value)}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
-                >
-                  <option value="">{t('admin.policies.form.selectResource')}</option>
-                  {resourceSections.map((section) => (
-                    <option key={section.section} value={section.section}>
-                      {section.section}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Actions checkboxes */}
-              {formData.resource && selectedResourceActions.length > 0 && (
-                <div>
-                  <label className="mb-1 block text-sm font-medium text-dark-200">
-                    {t('admin.policies.form.actions')}
-                  </label>
-                  <div className="flex flex-wrap gap-2 rounded-lg border border-dark-600 bg-dark-900/50 p-3">
-                    {selectedResourceActions.map((action) => {
-                      const selected = formData.actions.includes(action);
-                      return (
-                        <button
-                          key={action}
-                          type="button"
-                          onClick={() => handleToggleAction(action)}
-                          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>
-              )}
-
-              {/* Role dropdown (optional) */}
-              <div>
-                <label
-                  htmlFor="policy-role"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.policies.form.role')}
-                </label>
-                <select
-                  id="policy-role"
-                  value={formData.role_id ?? ''}
-                  onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      role_id: e.target.value ? Number(e.target.value) : null,
-                    }))
-                  }
-                  className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
-                >
-                  <option value="">{t('admin.policies.form.globalOption')}</option>
-                  {roles?.map((role) => (
-                    <option key={role.id} value={role.id}>
-                      {role.name}
-                    </option>
-                  ))}
-                </select>
-                <p className="mt-1 text-xs text-dark-500">{t('admin.policies.form.roleHint')}</p>
-              </div>
-
-              {/* Priority */}
-              <div>
-                <label
-                  htmlFor="policy-priority"
-                  className="mb-1 block text-sm font-medium text-dark-200"
-                >
-                  {t('admin.policies.form.priority')}
-                </label>
-                <input
-                  id="policy-priority"
-                  type="number"
-                  min={0}
-                  max={999}
-                  value={formData.priority}
-                  onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      priority: Math.min(999, Math.max(0, Number(e.target.value) || 0)),
-                    }))
-                  }
-                  className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
-                />
-                <p className="mt-1 text-xs text-dark-500">
-                  {t('admin.policies.form.priorityHint')}
-                </p>
-              </div>
-
-              {/* Conditions builder */}
-              <div>
-                <label className="mb-2 block text-sm font-medium text-dark-200">
-                  {t('admin.policies.form.conditions')}
-                </label>
-                <div className="space-y-2">
-                  {/* Time range */}
-                  <ConditionToggle
-                    label={t('admin.policies.conditions.timeRange')}
-                    enabled={formData.conditionsEnabled.time_range}
-                    onToggle={() =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        conditionsEnabled: {
-                          ...prev.conditionsEnabled,
-                          time_range: !prev.conditionsEnabled.time_range,
-                        },
-                      }))
-                    }
-                  >
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="time"
-                        value={formData.conditions.time_range?.start ?? '09:00'}
-                        onChange={(e) =>
-                          setFormData((prev) => ({
-                            ...prev,
-                            conditions: {
-                              ...prev.conditions,
-                              time_range: {
-                                start: e.target.value,
-                                end: prev.conditions.time_range?.end ?? '18:00',
-                              },
-                            },
-                          }))
-                        }
-                        className="rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-                        aria-label={t('admin.policies.conditions.timeStart')}
-                      />
-                      <span className="text-dark-500">-</span>
-                      <input
-                        type="time"
-                        value={formData.conditions.time_range?.end ?? '18:00'}
-                        onChange={(e) =>
-                          setFormData((prev) => ({
-                            ...prev,
-                            conditions: {
-                              ...prev.conditions,
-                              time_range: {
-                                start: prev.conditions.time_range?.start ?? '09:00',
-                                end: e.target.value,
-                              },
-                            },
-                          }))
-                        }
-                        className="rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-                        aria-label={t('admin.policies.conditions.timeEnd')}
-                      />
-                    </div>
-                  </ConditionToggle>
-
-                  {/* IP whitelist */}
-                  <ConditionToggle
-                    label={t('admin.policies.conditions.ipWhitelist')}
-                    enabled={formData.conditionsEnabled.ip_whitelist}
-                    onToggle={() =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        conditionsEnabled: {
-                          ...prev.conditionsEnabled,
-                          ip_whitelist: !prev.conditionsEnabled.ip_whitelist,
-                        },
-                      }))
-                    }
-                  >
-                    <IpTagInput
-                      values={formData.conditions.ip_whitelist ?? []}
-                      onChange={(ips) =>
-                        setFormData((prev) => ({
-                          ...prev,
-                          conditions: {
-                            ...prev.conditions,
-                            ip_whitelist: ips,
-                          },
-                        }))
-                      }
-                    />
-                  </ConditionToggle>
-
-                  {/* Rate limit */}
-                  <ConditionToggle
-                    label={t('admin.policies.conditions.rateLimit')}
-                    enabled={formData.conditionsEnabled.rate_limit}
-                    onToggle={() =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        conditionsEnabled: {
-                          ...prev.conditionsEnabled,
-                          rate_limit: !prev.conditionsEnabled.rate_limit,
-                        },
-                      }))
-                    }
-                  >
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="number"
-                        min={1}
-                        max={10000}
-                        value={formData.conditions.rate_limit ?? 100}
-                        onChange={(e) =>
-                          setFormData((prev) => ({
-                            ...prev,
-                            conditions: {
-                              ...prev.conditions,
-                              rate_limit: Math.max(1, Number(e.target.value) || 1),
-                            },
-                          }))
-                        }
-                        className="w-24 rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
-                        aria-label={t('admin.policies.conditions.rateLimitValue')}
-                      />
-                      <span className="text-xs text-dark-500">
-                        {t('admin.policies.conditions.perHour')}
-                      </span>
-                    </div>
-                  </ConditionToggle>
-                </div>
-              </div>
-
-              {/* 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.policies.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.policies.form.saving') : t('admin.policies.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">
diff --git a/src/pages/AdminPolicyEdit.tsx b/src/pages/AdminPolicyEdit.tsx
new file mode 100644
index 0000000..c0d6988
--- /dev/null
+++ b/src/pages/AdminPolicyEdit.tsx
@@ -0,0 +1,716 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { rbacApi, AccessPolicy, CreatePolicyPayload, UpdatePolicyPayload } from '@/api/rbac';
+import { AdminBackButton } from '@/components/admin';
+
+// === Types ===
+
+interface PolicyConditions {
+  time_range?: { start: string; end: string };
+  ip_whitelist?: string[];
+  rate_limit?: number;
+}
+
+interface PolicyFormData {
+  name: string;
+  description: string;
+  effect: 'allow' | 'deny';
+  resource: string;
+  actions: string[];
+  role_id: number | null;
+  priority: number;
+  conditions: PolicyConditions;
+  conditionsEnabled: {
+    time_range: boolean;
+    ip_whitelist: boolean;
+    rate_limit: boolean;
+  };
+}
+
+const INITIAL_FORM: PolicyFormData = {
+  name: '',
+  description: '',
+  effect: 'allow',
+  resource: '',
+  actions: [],
+  role_id: null,
+  priority: 0,
+  conditions: {
+    time_range: { start: '09:00', end: '18:00' },
+    ip_whitelist: [],
+    rate_limit: 100,
+  },
+  conditionsEnabled: {
+    time_range: false,
+    ip_whitelist: false,
+    rate_limit: false,
+  },
+};
+
+// === Helpers ===
+
+function parseConditions(raw: Record<string, unknown>): PolicyConditions {
+  const result: PolicyConditions = {};
+
+  if (raw.time_range && typeof raw.time_range === 'object') {
+    const tr = raw.time_range as Record<string, unknown>;
+    if (typeof tr.start === 'string' && typeof tr.end === 'string') {
+      result.time_range = { start: tr.start, end: tr.end };
+    }
+  }
+
+  if (Array.isArray(raw.ip_whitelist)) {
+    result.ip_whitelist = raw.ip_whitelist.filter((ip): ip is string => typeof ip === 'string');
+  }
+
+  if (typeof raw.rate_limit === 'number') {
+    result.rate_limit = raw.rate_limit;
+  }
+
+  return result;
+}
+
+function buildConditionsPayload(
+  conditions: PolicyConditions,
+  enabled: PolicyFormData['conditionsEnabled'],
+): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+
+  if (enabled.time_range && conditions.time_range) {
+    result.time_range = conditions.time_range;
+  }
+  if (enabled.ip_whitelist && conditions.ip_whitelist && conditions.ip_whitelist.length > 0) {
+    result.ip_whitelist = conditions.ip_whitelist;
+  }
+  if (enabled.rate_limit && conditions.rate_limit !== undefined) {
+    result.rate_limit = conditions.rate_limit;
+  }
+
+  return result;
+}
+
+// === Sub-components ===
+
+interface IpTagInputProps {
+  values: string[];
+  onChange: (values: string[]) => void;
+}
+
+function IpTagInput({ values, onChange }: IpTagInputProps) {
+  const { t } = useTranslation();
+  const [inputValue, setInputValue] = useState('');
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' || e.key === ',') {
+        e.preventDefault();
+        const trimmed = inputValue.trim().replace(/,+$/, '');
+        if (trimmed && !values.includes(trimmed)) {
+          onChange([...values, trimmed]);
+        }
+        setInputValue('');
+      } else if (e.key === 'Backspace' && !inputValue && values.length > 0) {
+        onChange(values.slice(0, -1));
+      }
+    },
+    [inputValue, values, onChange],
+  );
+
+  const removeIp = useCallback(
+    (ip: string) => {
+      onChange(values.filter((v) => v !== ip));
+    },
+    [values, onChange],
+  );
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 rounded-lg border border-dark-600 bg-dark-900 px-3 py-2">
+      {values.map((ip) => (
+        <span
+          key={ip}
+          className="inline-flex items-center gap-1 rounded-md bg-dark-700 px-2 py-0.5 text-xs text-dark-200"
+        >
+          {ip}
+          <button
+            type="button"
+            onClick={() => removeIp(ip)}
+            className="text-dark-400 transition-colors hover:text-dark-200"
+            aria-label={t('admin.policies.conditions.removeIp', { ip })}
+          >
+            <svg
+              className="h-3 w-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </span>
+      ))}
+      <input
+        type="text"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        className="min-w-[120px] flex-1 bg-transparent text-sm text-dark-100 placeholder-dark-500 outline-none"
+        placeholder={values.length === 0 ? t('admin.policies.conditions.ipPlaceholder') : ''}
+      />
+    </div>
+  );
+}
+
+interface ConditionToggleProps {
+  label: string;
+  enabled: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}
+
+function ConditionToggle({ label, enabled, onToggle, children }: ConditionToggleProps) {
+  return (
+    <div className="rounded-lg border border-dark-700/50 bg-dark-800/30">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center justify-between px-3 py-2"
+      >
+        <span className="text-sm font-medium text-dark-200">{label}</span>
+        <div
+          className={`relative h-5 w-9 rounded-full transition-colors ${
+            enabled ? 'bg-accent-500' : 'bg-dark-600'
+          }`}
+        >
+          <div
+            className={`absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
+              enabled ? 'translate-x-4' : 'translate-x-0.5'
+            }`}
+          />
+        </div>
+      </button>
+      {enabled && <div className="border-t border-dark-700/50 px-3 py-2.5">{children}</div>}
+    </div>
+  );
+}
+
+// === Main Page ===
+
+export default function AdminPolicyEdit() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const queryClient = useQueryClient();
+  const isEdit = !!id;
+
+  const [formData, setFormData] = useState<PolicyFormData>(INITIAL_FORM);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  // Fetch policy for editing
+  const { isLoading: isLoadingPolicy } = useQuery({
+    queryKey: ['admin-policy', id],
+    queryFn: () => rbacApi.getPolicies(),
+    enabled: isEdit,
+    select: useCallback(
+      (policies: AccessPolicy[]) => {
+        const policy = policies.find((p) => p.id === Number(id));
+        if (policy) {
+          const parsed = parseConditions(policy.conditions);
+          const actions = Array.isArray(policy.actions) ? policy.actions : [];
+
+          setFormData({
+            name: policy.name,
+            description: policy.description ?? '',
+            effect: policy.effect,
+            resource: policy.resource,
+            actions,
+            role_id: policy.role_id ?? null,
+            priority: policy.priority,
+            conditions: {
+              time_range: parsed.time_range ?? { start: '09:00', end: '18:00' },
+              ip_whitelist: parsed.ip_whitelist ?? [],
+              rate_limit: parsed.rate_limit ?? 100,
+            },
+            conditionsEnabled: {
+              time_range: !!parsed.time_range,
+              ip_whitelist: !!parsed.ip_whitelist && parsed.ip_whitelist.length > 0,
+              rate_limit: parsed.rate_limit !== undefined,
+            },
+          });
+        }
+        return policy;
+      },
+      [id],
+    ),
+  });
+
+  const { data: roles } = useQuery({
+    queryKey: ['admin-roles'],
+    queryFn: rbacApi.getRoles,
+  });
+
+  const { data: permissionRegistry } = useQuery({
+    queryKey: ['admin-permission-registry'],
+    queryFn: rbacApi.getPermissionRegistry,
+  });
+
+  // Mutations
+  const createMutation = useMutation({
+    mutationFn: (payload: CreatePolicyPayload) => rbacApi.createPolicy(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-policies'] });
+      navigate('/admin/policies');
+    },
+    onError: () => {
+      setFormError(t('admin.policies.errors.createFailed'));
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ policyId, payload }: { policyId: number; payload: UpdatePolicyPayload }) =>
+      rbacApi.updatePolicy(policyId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-policies'] });
+      navigate('/admin/policies');
+    },
+    onError: () => {
+      setFormError(t('admin.policies.errors.updateFailed'));
+    },
+  });
+
+  // Derived data
+  const selectedResourceActions = useMemo(() => {
+    if (!formData.resource || !permissionRegistry) return [];
+    const section = permissionRegistry.find((s) => s.section === formData.resource);
+    return section?.actions ?? [];
+  }, [formData.resource, permissionRegistry]);
+
+  // Handlers
+  const handleToggleAction = useCallback((action: string) => {
+    setFormData((prev) => {
+      const has = prev.actions.includes(action);
+      return {
+        ...prev,
+        actions: has ? prev.actions.filter((a) => a !== action) : [...prev.actions, action],
+      };
+    });
+  }, []);
+
+  const handleResourceChange = useCallback((resource: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      resource,
+      actions: [],
+    }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      setFormError(null);
+
+      if (!formData.name.trim()) {
+        setFormError(t('admin.policies.errors.nameRequired'));
+        return;
+      }
+      if (!formData.resource) {
+        setFormError(t('admin.policies.errors.resourceRequired'));
+        return;
+      }
+      if (formData.actions.length === 0) {
+        setFormError(t('admin.policies.errors.actionsRequired'));
+        return;
+      }
+
+      const conditionsPayload = buildConditionsPayload(
+        formData.conditions,
+        formData.conditionsEnabled,
+      );
+
+      if (isEdit) {
+        const payload: UpdatePolicyPayload = {
+          name: formData.name.trim(),
+          description: formData.description.trim() || null,
+          effect: formData.effect,
+          resource: formData.resource,
+          actions: formData.actions,
+          conditions: conditionsPayload,
+          priority: formData.priority,
+          role_id: formData.role_id,
+        };
+        updateMutation.mutate({ policyId: Number(id), payload });
+      } else {
+        const payload: CreatePolicyPayload = {
+          name: formData.name.trim(),
+          description: formData.description.trim() || null,
+          effect: formData.effect,
+          resource: formData.resource,
+          actions: formData.actions,
+          conditions: conditionsPayload,
+          priority: formData.priority,
+          role_id: formData.role_id,
+        };
+        createMutation.mutate(payload);
+      }
+    },
+    [formData, isEdit, id, createMutation, updateMutation, t],
+  );
+
+  const isSaving = createMutation.isPending || updateMutation.isPending;
+
+  // Loading state
+  if (isEdit && isLoadingPolicy) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <AdminBackButton to="/admin/policies" />
+        <div>
+          <h1 className="text-xl font-semibold text-dark-100">
+            {isEdit ? t('admin.policies.modal.editTitle') : t('admin.policies.modal.createTitle')}
+          </h1>
+        </div>
+      </div>
+
+      {/* Form */}
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Basic info */}
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+          <div className="space-y-4">
+            {/* Name */}
+            <div>
+              <label htmlFor="policy-name" className="mb-1 block text-sm font-medium text-dark-200">
+                {t('admin.policies.form.name')}
+              </label>
+              <input
+                id="policy-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.policies.form.namePlaceholder')}
+                autoFocus
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label
+                htmlFor="policy-description"
+                className="mb-1 block text-sm font-medium text-dark-200"
+              >
+                {t('admin.policies.form.description')}
+              </label>
+              <textarea
+                id="policy-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.policies.form.descriptionPlaceholder')}
+                rows={2}
+              />
+            </div>
+
+            {/* Effect toggle */}
+            <div>
+              <label className="mb-1 block text-sm font-medium text-dark-200">
+                {t('admin.policies.form.effect')}
+              </label>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setFormData((prev) => ({ ...prev, effect: 'allow' }))}
+                  className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
+                    formData.effect === 'allow'
+                      ? 'border-green-500/50 bg-green-500/10 text-green-400'
+                      : 'border-dark-600 bg-dark-900 text-dark-400 hover:border-dark-500'
+                  }`}
+                >
+                  {t('admin.policies.effectAllow')}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setFormData((prev) => ({ ...prev, effect: 'deny' }))}
+                  className={`flex-1 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${
+                    formData.effect === 'deny'
+                      ? 'border-red-500/50 bg-red-500/10 text-red-400'
+                      : 'border-dark-600 bg-dark-900 text-dark-400 hover:border-dark-500'
+                  }`}
+                >
+                  {t('admin.policies.effectDeny')}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Resource & Actions */}
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+          <div className="space-y-4">
+            {/* Resource dropdown */}
+            <div>
+              <label
+                htmlFor="policy-resource"
+                className="mb-1 block text-sm font-medium text-dark-200"
+              >
+                {t('admin.policies.form.resource')}
+              </label>
+              <select
+                id="policy-resource"
+                value={formData.resource}
+                onChange={(e) => handleResourceChange(e.target.value)}
+                className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
+              >
+                <option value="">{t('admin.policies.form.selectResource')}</option>
+                {permissionRegistry?.map((section) => (
+                  <option key={section.section} value={section.section}>
+                    {section.section}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Actions checkboxes */}
+            {formData.resource && selectedResourceActions.length > 0 && (
+              <div>
+                <label className="mb-1 block text-sm font-medium text-dark-200">
+                  {t('admin.policies.form.actions')}
+                </label>
+                <div className="flex flex-wrap gap-2 rounded-lg border border-dark-600 bg-dark-900/50 p-3">
+                  {selectedResourceActions.map((action) => {
+                    const selected = formData.actions.includes(action);
+                    return (
+                      <button
+                        key={action}
+                        type="button"
+                        onClick={() => handleToggleAction(action)}
+                        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>
+            )}
+
+            {/* Role dropdown */}
+            <div>
+              <label htmlFor="policy-role" className="mb-1 block text-sm font-medium text-dark-200">
+                {t('admin.policies.form.role')}
+              </label>
+              <select
+                id="policy-role"
+                value={formData.role_id ?? ''}
+                onChange={(e) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    role_id: e.target.value ? Number(e.target.value) : null,
+                  }))
+                }
+                className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
+              >
+                <option value="">{t('admin.policies.form.globalOption')}</option>
+                {roles?.map((role) => (
+                  <option key={role.id} value={role.id}>
+                    {role.name}
+                  </option>
+                ))}
+              </select>
+              <p className="mt-1 text-xs text-dark-500">{t('admin.policies.form.roleHint')}</p>
+            </div>
+
+            {/* Priority */}
+            <div>
+              <label
+                htmlFor="policy-priority"
+                className="mb-1 block text-sm font-medium text-dark-200"
+              >
+                {t('admin.policies.form.priority')}
+              </label>
+              <input
+                id="policy-priority"
+                type="number"
+                min={0}
+                max={999}
+                value={formData.priority}
+                onChange={(e) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    priority: Math.min(999, Math.max(0, Number(e.target.value) || 0)),
+                  }))
+                }
+                className="w-full rounded-lg border border-dark-600 bg-dark-900 px-3 py-2 text-dark-100 outline-none transition-colors focus:border-accent-500"
+              />
+              <p className="mt-1 text-xs text-dark-500">{t('admin.policies.form.priorityHint')}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Conditions */}
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+          <label className="mb-3 block text-sm font-medium text-dark-200">
+            {t('admin.policies.form.conditions')}
+          </label>
+          <div className="space-y-2">
+            {/* Time range */}
+            <ConditionToggle
+              label={t('admin.policies.conditions.timeRange')}
+              enabled={formData.conditionsEnabled.time_range}
+              onToggle={() =>
+                setFormData((prev) => ({
+                  ...prev,
+                  conditionsEnabled: {
+                    ...prev.conditionsEnabled,
+                    time_range: !prev.conditionsEnabled.time_range,
+                  },
+                }))
+              }
+            >
+              <div className="flex items-center gap-2">
+                <input
+                  type="time"
+                  value={formData.conditions.time_range?.start ?? '09:00'}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      conditions: {
+                        ...prev.conditions,
+                        time_range: {
+                          start: e.target.value,
+                          end: prev.conditions.time_range?.end ?? '18:00',
+                        },
+                      },
+                    }))
+                  }
+                  className="rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+                  aria-label={t('admin.policies.conditions.timeStart')}
+                />
+                <span className="text-dark-500">-</span>
+                <input
+                  type="time"
+                  value={formData.conditions.time_range?.end ?? '18:00'}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      conditions: {
+                        ...prev.conditions,
+                        time_range: {
+                          start: prev.conditions.time_range?.start ?? '09:00',
+                          end: e.target.value,
+                        },
+                      },
+                    }))
+                  }
+                  className="rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+                  aria-label={t('admin.policies.conditions.timeEnd')}
+                />
+              </div>
+            </ConditionToggle>
+
+            {/* IP whitelist */}
+            <ConditionToggle
+              label={t('admin.policies.conditions.ipWhitelist')}
+              enabled={formData.conditionsEnabled.ip_whitelist}
+              onToggle={() =>
+                setFormData((prev) => ({
+                  ...prev,
+                  conditionsEnabled: {
+                    ...prev.conditionsEnabled,
+                    ip_whitelist: !prev.conditionsEnabled.ip_whitelist,
+                  },
+                }))
+              }
+            >
+              <IpTagInput
+                values={formData.conditions.ip_whitelist ?? []}
+                onChange={(ips) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    conditions: {
+                      ...prev.conditions,
+                      ip_whitelist: ips,
+                    },
+                  }))
+                }
+              />
+            </ConditionToggle>
+
+            {/* Rate limit */}
+            <ConditionToggle
+              label={t('admin.policies.conditions.rateLimit')}
+              enabled={formData.conditionsEnabled.rate_limit}
+              onToggle={() =>
+                setFormData((prev) => ({
+                  ...prev,
+                  conditionsEnabled: {
+                    ...prev.conditionsEnabled,
+                    rate_limit: !prev.conditionsEnabled.rate_limit,
+                  },
+                }))
+              }
+            >
+              <div className="flex items-center gap-2">
+                <input
+                  type="number"
+                  min={1}
+                  max={10000}
+                  value={formData.conditions.rate_limit ?? 100}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      conditions: {
+                        ...prev.conditions,
+                        rate_limit: Math.max(1, Number(e.target.value) || 1),
+                      },
+                    }))
+                  }
+                  className="w-24 rounded-lg border border-dark-600 bg-dark-900 px-2 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
+                  aria-label={t('admin.policies.conditions.rateLimitValue')}
+                />
+                <span className="text-xs text-dark-500">
+                  {t('admin.policies.conditions.perHour')}
+                </span>
+              </div>
+            </ConditionToggle>
+          </div>
+        </div>
+
+        {/* Error & Submit */}
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+          {formError && <p className="mb-4 text-sm text-error-400">{formError}</p>}
+          <div className="flex justify-end gap-3">
+            <button
+              type="button"
+              onClick={() => navigate('/admin/policies')}
+              className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
+            >
+              {t('admin.policies.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.policies.form.saving') : t('admin.policies.form.save')}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/pages/AdminRoleEdit.tsx b/src/pages/AdminRoleEdit.tsx
new file mode 100644
index 0000000..001f1ad
--- /dev/null
+++ b/src/pages/AdminRoleEdit.tsx
@@ -0,0 +1,536 @@
+import { useState, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { rbacApi, PermissionSection, CreateRolePayload, UpdateRolePayload } from '@/api/rbac';
+import { AdminBackButton } from '@/components/admin';
+
+// === Icons ===
+
+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>
+);
+
+// === Constants ===
+
+const ROLE_COLORS = [
+  '#6366f1',
+  '#8b5cf6',
+  '#a855f7',
+  '#ec4899',
+  '#ef4444',
+  '#f97316',
+  '#eab308',
+  '#22c55e',
+  '#14b8a6',
+  '#06b6d4',
+  '#3b82f6',
+  '#6b7280',
+];
+
+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="space-y-1 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"
+            >
+              <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>
+
+              {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 AdminRoleEdit() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const queryClient = useQueryClient();
+  const isEdit = !!id;
+
+  const [formData, setFormData] = useState<RoleFormData>(INITIAL_FORM);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  // Fetch role for editing
+  const { isLoading: isLoadingRole } = useQuery({
+    queryKey: ['admin-role', id],
+    queryFn: () => rbacApi.getRoles(),
+    enabled: isEdit,
+    select: useCallback(
+      (roles: import('@/api/rbac').AdminRole[]) => {
+        const role = roles.find((r) => r.id === Number(id));
+        if (role) {
+          setFormData({
+            name: role.name,
+            description: role.description || '',
+            level: role.level,
+            color: role.color || ROLE_COLORS[0],
+            permissions: [...role.permissions],
+          });
+        }
+        return role;
+      },
+      [id],
+    ),
+  });
+
+  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'] });
+      navigate('/admin/roles');
+    },
+    onError: () => {
+      setFormError(t('admin.roles.errors.createFailed'));
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ roleId, payload }: { roleId: number; payload: UpdateRolePayload }) =>
+      rbacApi.updateRole(roleId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-roles'] });
+      navigate('/admin/roles');
+    },
+    onError: () => {
+      setFormError(t('admin.roles.errors.updateFailed'));
+    },
+  });
+
+  // Handlers
+  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) {
+        const sectionPerms = new Set([...allPerms, `${section}:*`]);
+        return {
+          ...prev,
+          permissions: prev.permissions.filter((p) => !sectionPerms.has(p)),
+        };
+      }
+
+      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 (isEdit) {
+        updateMutation.mutate({ roleId: Number(id), payload });
+      } else {
+        createMutation.mutate(payload);
+      }
+    },
+    [formData, isEdit, id, createMutation, updateMutation, t],
+  );
+
+  const isSaving = createMutation.isPending || updateMutation.isPending;
+
+  // Loading state
+  if (isEdit && isLoadingRole) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <AdminBackButton to="/admin/roles" />
+        <div>
+          <h1 className="text-xl font-semibold text-dark-100">
+            {isEdit ? t('admin.roles.modal.editTitle') : t('admin.roles.modal.createTitle')}
+          </h1>
+        </div>
+      </div>
+
+      {/* Form */}
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+          <div 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>
+          </div>
+        </div>
+
+        {/* Permission Matrix */}
+        {permissionRegistry && permissionRegistry.length > 0 && (
+          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+            <PermissionMatrix
+              registry={permissionRegistry}
+              selectedPermissions={formData.permissions}
+              onToggle={handleTogglePermission}
+              onToggleSection={handleToggleSection}
+            />
+            <p className="mt-2 text-xs text-dark-500">
+              {t('admin.roles.form.selectedPermissions', { count: formData.permissions.length })}
+            </p>
+          </div>
+        )}
+
+        {/* Error & Submit */}
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 sm:p-6">
+          {formError && <p className="mb-4 text-sm text-error-400">{formError}</p>}
+          <div className="flex justify-end gap-3">
+            <button
+              type="button"
+              onClick={() => navigate('/admin/roles')}
+              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>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/pages/AdminRoles.tsx b/src/pages/AdminRoles.tsx
index 4543cdd..25477f7 100644
--- a/src/pages/AdminRoles.tsx
+++ b/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">