refactor: replace role/policy modals with separate pages

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

src/pages/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">