refactor: move campaign editing from modal to separate page

- Create AdminCampaignEdit page for editing campaigns
- Remove CampaignModal from AdminCampaigns
- Use centralized icons (CampaignIcon, ChartIcon added)
- Add route /admin/campaigns/:id/edit
- Add localization keys for loadError and updateError

src/App.tsx

@@ -50,6 +50,7 @@ const AdminPromoGroupCreate = lazy(() => import('./pages/AdminPromoGroupCreate')
 const AdminCampaigns = lazy(() => import('./pages/AdminCampaigns'));
 const AdminCampaignCreate = lazy(() => import('./pages/AdminCampaignCreate'));
 const AdminCampaignStats = lazy(() => import('./pages/AdminCampaignStats'));
+const AdminCampaignEdit = lazy(() => import('./pages/AdminCampaignEdit'));
 const AdminUsers = lazy(() => import('./pages/AdminUsers'));
 const AdminPayments = lazy(() => import('./pages/AdminPayments'));
 const AdminPaymentMethods = lazy(() => import('./pages/AdminPaymentMethods'));
@@ -489,6 +490,16 @@ function App() {
             </AdminRoute>
           }
         />
+        <Route
+          path="/admin/campaigns/:id/edit"
+          element={
+            <AdminRoute>
+              <LazyPage>
+                <AdminCampaignEdit />
+              </LazyPage>
+            </AdminRoute>
+          }
+        />
         <Route
           path="/admin/users"
           element={

src/components/icons/index.tsx

@@ -558,3 +558,35 @@ export const ServerIcon = ({ className }: IconProps) => (
     />
   </svg>
 );
+
+export const CampaignIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-5 w-5', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"
+    />
+  </svg>
+);
+
+export const ChartIcon = ({ className }: IconProps) => (
+  <svg
+    className={cn('h-4 w-4', className)}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+    />
+  </svg>
+);

src/locales/en.json

@@ -1489,7 +1489,9 @@
         "deleteText": "This action cannot be undone. Campaigns with registrations cannot be deleted.",
         "cancel": "Cancel",
         "delete": "Delete"
-      }
+      },
+      "loadError": "Failed to load campaign",
+      "updateError": "Failed to save changes"
     },
     "promocodes": {
       "title": "Promo Codes",

src/locales/fa.json

@@ -1282,7 +1282,9 @@
         "deleteText": "این عمل قابل بازگشت نیست. کمپین‌هایی که ثبت‌نام دارند قابل حذف نیستند.",
         "cancel": "لغو",
         "delete": "حذف"
-      }
+      },
+      "loadError": "بارگذاری کمپین ناموفق بود",
+      "updateError": "ذخیره تغییرات ناموفق بود"
     },
     "promocodes": {
       "title": "کدهای تخفیف",

src/locales/ru.json

@@ -2000,7 +2000,9 @@
         "deleteText": "Это действие нельзя отменить. Кампании с регистрациями удалить нельзя.",
         "cancel": "Отмена",
         "delete": "Удалить"
-      }
+      },
+      "loadError": "Не удалось загрузить кампанию",
+      "updateError": "Не удалось сохранить изменения"
     },
     "promocodes": {
       "title": "Промокоды",

src/locales/zh.json

@@ -1281,7 +1281,9 @@
         "deleteText": "此操作不可撤销。有注册记录的活动无法删除。",
         "cancel": "取消",
         "delete": "删除"
-      }
+      },
+      "loadError": "加载活动失败",
+      "updateError": "保存更改失败"
     },
     "promocodes": {
       "title": "促销码",

src/pages/AdminCampaignEdit.tsx

@@ -0,0 +1,491 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import {
+  campaignsApi,
+  CampaignUpdateRequest,
+  CampaignBonusType,
+  ServerSquadInfo,
+  TariffListItem,
+} from '../api/campaigns';
+import { AdminBackButton } from '../components/admin';
+import { CheckIcon, CampaignIcon } from '../components/icons';
+import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+
+// Bonus type config
+const bonusTypeConfig: Record<
+  CampaignBonusType,
+  { labelKey: string; color: string; bgColor: string; borderColor: string }
+> = {
+  balance: {
+    labelKey: 'admin.campaigns.bonusType.balance',
+    color: 'text-success-400',
+    bgColor: 'bg-success-500/10',
+    borderColor: 'border-success-500/30',
+  },
+  subscription: {
+    labelKey: 'admin.campaigns.bonusType.subscription',
+    color: 'text-accent-400',
+    bgColor: 'bg-accent-500/10',
+    borderColor: 'border-accent-500/30',
+  },
+  tariff: {
+    labelKey: 'admin.campaigns.bonusType.tariff',
+    color: 'text-accent-400',
+    bgColor: 'bg-accent-500/10',
+    borderColor: 'border-accent-500/30',
+  },
+  none: {
+    labelKey: 'admin.campaigns.bonusType.none',
+    color: 'text-dark-400',
+    bgColor: 'bg-dark-500/10',
+    borderColor: 'border-dark-500/30',
+  },
+};
+
+// Server selector component
+function ServerSelector({
+  servers,
+  selected,
+  onToggle,
+}: {
+  servers: ServerSquadInfo[];
+  selected: string[];
+  onToggle: (uuid: string) => void;
+}) {
+  const { t } = useTranslation();
+
+  if (servers.length === 0) return null;
+
+  return (
+    <div>
+      <label className="mb-2 block text-sm font-medium text-dark-300">
+        {t('admin.campaigns.form.servers')}
+      </label>
+      <div className="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-dark-700 bg-dark-800 p-3">
+        {servers.map((server) => (
+          <button
+            key={server.id}
+            type="button"
+            onClick={() => onToggle(server.squad_uuid)}
+            className={`flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors ${
+              selected.includes(server.squad_uuid)
+                ? 'bg-accent-500/20 text-accent-300'
+                : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
+            }`}
+          >
+            <div
+              className={`flex h-5 w-5 items-center justify-center rounded ${
+                selected.includes(server.squad_uuid) ? 'bg-accent-500 text-white' : 'bg-dark-600'
+              }`}
+            >
+              {selected.includes(server.squad_uuid) && <CheckIcon />}
+            </div>
+            <span className="text-sm font-medium">{server.display_name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Tariff selector component
+function TariffSelector({
+  tariffs,
+  value,
+  onChange,
+}: {
+  tariffs: TariffListItem[];
+  value: number | null;
+  onChange: (id: number | null) => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <label className="mb-2 block text-sm font-medium text-dark-300">
+        {t('admin.campaigns.form.selectTariff')}
+      </label>
+      <select
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value ? parseInt(e.target.value) : null)}
+        className="input"
+      >
+        <option value="">{t('admin.campaigns.form.notSelected')}</option>
+        {tariffs.map((tariff) => (
+          <option key={tariff.id} value={tariff.id}>
+            {tariff.name} ({tariff.traffic_limit_gb} GB, {tariff.device_limit}{' '}
+            {t('admin.campaigns.form.devices')})
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export default function AdminCampaignEdit() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const campaignId = parseInt(id || '0');
+
+  // Fetch campaign
+  const {
+    data: campaign,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['admin-campaign', campaignId],
+    queryFn: () => campaignsApi.getCampaign(campaignId),
+    enabled: campaignId > 0,
+  });
+
+  // Fetch servers
+  const { data: servers = [] } = useQuery({
+    queryKey: ['admin-campaigns-servers'],
+    queryFn: () => campaignsApi.getAvailableServers(),
+  });
+
+  // Fetch tariffs
+  const { data: tariffs = [] } = useQuery({
+    queryKey: ['admin-campaigns-tariffs'],
+    queryFn: () => campaignsApi.getAvailableTariffs(),
+  });
+
+  // Form state
+  const [name, setName] = useState('');
+  const [startParameter, setStartParameter] = useState('');
+  const [bonusType, setBonusType] = useState<CampaignBonusType>('balance');
+  const [isActive, setIsActive] = useState(true);
+
+  // Balance bonus
+  const [balanceBonusRubles, setBalanceBonusRubles] = useState<number | ''>(0);
+
+  // Subscription bonus
+  const [subscriptionDays, setSubscriptionDays] = useState<number | ''>(7);
+  const [subscriptionTraffic, setSubscriptionTraffic] = useState<number | ''>(10);
+  const [subscriptionDevices, setSubscriptionDevices] = useState<number | ''>(1);
+  const [selectedSquads, setSelectedSquads] = useState<string[]>([]);
+
+  // Tariff bonus
+  const [tariffId, setTariffId] = useState<number | null>(null);
+  const [tariffDays, setTariffDays] = useState<number | ''>(30);
+
+  // Initialize form when campaign loads
+  useEffect(() => {
+    if (campaign) {
+      setName(campaign.name || '');
+      setStartParameter(campaign.start_parameter || '');
+      setBonusType(campaign.bonus_type || 'balance');
+      setIsActive(campaign.is_active ?? true);
+      setBalanceBonusRubles((campaign.balance_bonus_kopeks || 0) / 100);
+      setSubscriptionDays(campaign.subscription_duration_days || 7);
+      setSubscriptionTraffic(campaign.subscription_traffic_gb || 10);
+      setSubscriptionDevices(campaign.subscription_device_limit || 1);
+      setSelectedSquads(campaign.subscription_squads || []);
+      setTariffId(campaign.tariff_id || null);
+      setTariffDays(campaign.tariff_duration_days || 30);
+    }
+  }, [campaign]);
+
+  // Update mutation
+  const updateMutation = useMutation({
+    mutationFn: (data: CampaignUpdateRequest) => campaignsApi.updateCampaign(campaignId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-campaigns'] });
+      queryClient.invalidateQueries({ queryKey: ['admin-campaign', campaignId] });
+      navigate('/admin/campaigns');
+    },
+  });
+
+  const toggleServer = (uuid: string) => {
+    setSelectedSquads((prev) =>
+      prev.includes(uuid) ? prev.filter((s) => s !== uuid) : [...prev, uuid],
+    );
+  };
+
+  const handleSubmit = () => {
+    const data: CampaignUpdateRequest = {
+      name,
+      start_parameter: startParameter,
+      bonus_type: bonusType,
+      is_active: isActive,
+    };
+
+    if (bonusType === 'balance') {
+      data.balance_bonus_kopeks = Math.round(toNumber(balanceBonusRubles) * 100);
+    } else if (bonusType === 'subscription') {
+      data.subscription_duration_days = toNumber(subscriptionDays, 7);
+      data.subscription_traffic_gb = toNumber(subscriptionTraffic, 10);
+      data.subscription_device_limit = toNumber(subscriptionDevices, 1);
+      data.subscription_squads = selectedSquads;
+    } else if (bonusType === 'tariff') {
+      data.tariff_id = tariffId || undefined;
+      data.tariff_duration_days = toNumber(tariffDays, 30);
+    }
+
+    updateMutation.mutate(data);
+  };
+
+  const isValid = name.trim() && startParameter.trim() && /^[a-zA-Z0-9_-]+$/.test(startParameter);
+
+  if (isLoading) {
+    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>
+    );
+  }
+
+  if (error || !campaign) {
+    return (
+      <div className="animate-fade-in">
+        <div className="mb-6 flex items-center gap-3">
+          <AdminBackButton to="/admin/campaigns" />
+          <h1 className="text-xl font-semibold text-dark-100">
+            {t('admin.campaigns.modal.editTitle')}
+          </h1>
+        </div>
+        <div className="rounded-xl border border-error-500/30 bg-error-500/10 p-6 text-center">
+          <p className="text-error-400">{t('admin.campaigns.loadError')}</p>
+          <button
+            onClick={() => navigate('/admin/campaigns')}
+            className="mt-4 text-sm text-dark-400 hover:text-dark-200"
+          >
+            {t('common.back')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <AdminBackButton to="/admin/campaigns" />
+        <div className="flex items-center gap-3">
+          <div className="rounded-lg bg-accent-500/20 p-2 text-accent-400">
+            <CampaignIcon />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold text-dark-100">
+              {t('admin.campaigns.modal.editTitle')}
+            </h1>
+            <p className="text-sm text-dark-400">{campaign.name}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Basic Info */}
+      <div className="card space-y-4">
+        {/* Name */}
+        <div>
+          <label className="mb-2 block text-sm font-medium text-dark-300">
+            {t('admin.campaigns.form.name')}
+          </label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="input"
+            placeholder={t('admin.campaigns.form.namePlaceholder')}
+          />
+        </div>
+
+        {/* Start Parameter */}
+        <div>
+          <label className="mb-2 block text-sm font-medium text-dark-300">
+            {t('admin.campaigns.form.startParameter')}
+          </label>
+          <input
+            type="text"
+            value={startParameter}
+            onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
+            className="input font-mono"
+            placeholder="instagram_jan2024"
+          />
+          <p className="mt-1 text-xs text-dark-500">
+            {t('admin.campaigns.form.startParameterHint')}
+          </p>
+        </div>
+
+        {/* Active toggle */}
+        <div className="flex items-center justify-between rounded-lg border border-dark-700 bg-dark-800 p-4">
+          <span className="text-sm font-medium text-dark-300">
+            {t('admin.campaigns.form.active')}
+          </span>
+          <button
+            type="button"
+            onClick={() => setIsActive(!isActive)}
+            className={`relative h-6 w-11 rounded-full transition-colors ${
+              isActive ? 'bg-accent-500' : 'bg-dark-600'
+            }`}
+          >
+            <span
+              className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
+                isActive ? 'left-6' : 'left-1'
+              }`}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* Bonus Type */}
+      <div className="card space-y-4">
+        <h2 className="text-lg font-semibold text-dark-100">
+          {t('admin.campaigns.form.bonusType')}
+        </h2>
+
+        <div className="grid grid-cols-2 gap-3">
+          {(Object.keys(bonusTypeConfig) as CampaignBonusType[]).map((type) => (
+            <button
+              key={type}
+              type="button"
+              onClick={() => setBonusType(type)}
+              className={`rounded-lg border p-4 text-left transition-all ${
+                bonusType === type
+                  ? `${bonusTypeConfig[type].bgColor} ${bonusTypeConfig[type].borderColor} ${bonusTypeConfig[type].color}`
+                  : 'border-dark-700 bg-dark-800 text-dark-300 hover:border-dark-600'
+              }`}
+            >
+              <span className="text-sm font-medium">{t(bonusTypeConfig[type].labelKey)}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Bonus Settings */}
+      {bonusType === 'balance' && (
+        <div
+          className={`card space-y-4 border ${bonusTypeConfig.balance.borderColor} ${bonusTypeConfig.balance.bgColor}`}
+        >
+          <h2 className={`text-lg font-semibold ${bonusTypeConfig.balance.color}`}>
+            {t('admin.campaigns.form.balanceBonus')}
+          </h2>
+          <div className="flex items-center gap-3">
+            <input
+              type="number"
+              value={balanceBonusRubles}
+              onChange={createNumberInputHandler(setBalanceBonusRubles, 0)}
+              className="input w-32"
+              min={0}
+              step={1}
+            />
+            <span className="text-dark-300">₽</span>
+          </div>
+        </div>
+      )}
+
+      {bonusType === 'subscription' && (
+        <div
+          className={`card space-y-4 border ${bonusTypeConfig.subscription.borderColor} ${bonusTypeConfig.subscription.bgColor}`}
+        >
+          <h2 className={`text-lg font-semibold ${bonusTypeConfig.subscription.color}`}>
+            {t('admin.campaigns.form.trialSubscription')}
+          </h2>
+
+          <div className="grid grid-cols-3 gap-4">
+            <div>
+              <label className="mb-2 block text-sm text-dark-400">
+                {t('admin.campaigns.form.days')}
+              </label>
+              <input
+                type="number"
+                value={subscriptionDays}
+                onChange={createNumberInputHandler(setSubscriptionDays, 1)}
+                className="input"
+                min={1}
+              />
+            </div>
+            <div>
+              <label className="mb-2 block text-sm text-dark-400">
+                {t('admin.campaigns.form.trafficGb')}
+              </label>
+              <input
+                type="number"
+                value={subscriptionTraffic}
+                onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
+                className="input"
+                min={0}
+              />
+            </div>
+            <div>
+              <label className="mb-2 block text-sm text-dark-400">
+                {t('admin.campaigns.form.devices')}
+              </label>
+              <input
+                type="number"
+                value={subscriptionDevices}
+                onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
+                className="input"
+                min={1}
+              />
+            </div>
+          </div>
+
+          <ServerSelector servers={servers} selected={selectedSquads} onToggle={toggleServer} />
+        </div>
+      )}
+
+      {bonusType === 'tariff' && (
+        <div
+          className={`card space-y-4 border ${bonusTypeConfig.tariff.borderColor} ${bonusTypeConfig.tariff.bgColor}`}
+        >
+          <h2 className={`text-lg font-semibold ${bonusTypeConfig.tariff.color}`}>
+            {t('admin.campaigns.form.tariff')}
+          </h2>
+
+          <TariffSelector tariffs={tariffs} value={tariffId} onChange={setTariffId} />
+
+          <div>
+            <label className="mb-2 block text-sm font-medium text-dark-300">
+              {t('admin.campaigns.form.durationDays')}
+            </label>
+            <input
+              type="number"
+              value={tariffDays}
+              onChange={createNumberInputHandler(setTariffDays, 1)}
+              className="input w-32"
+              min={1}
+            />
+          </div>
+        </div>
+      )}
+
+      {bonusType === 'none' && (
+        <div
+          className={`card border ${bonusTypeConfig.none.borderColor} ${bonusTypeConfig.none.bgColor}`}
+        >
+          <p className="text-sm text-dark-400">{t('admin.campaigns.form.noBonusDescription')}</p>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="card flex items-center justify-end gap-3">
+        <button onClick={() => navigate('/admin/campaigns')} className="btn-secondary">
+          {t('common.cancel')}
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={!isValid || updateMutation.isPending}
+          className="btn-primary flex items-center gap-2"
+        >
+          {updateMutation.isPending ? (
+            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          ) : null}
+          {updateMutation.isPending ? t('common.saving') : t('common.save')}
+        </button>
+      </div>
+
+      {updateMutation.isError && (
+        <div className="rounded-lg border border-error-500/30 bg-error-500/10 p-3 text-sm text-error-400">
+          {t('admin.campaigns.updateError')}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/AdminCampaigns.tsx

@@ -3,67 +3,9 @@ import { useNavigate } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import i18n from '../i18n';
-import {
-  campaignsApi,
-  CampaignListItem,
-  CampaignDetail,
-  CampaignUpdateRequest,
-  CampaignBonusType,
-  ServerSquadInfo,
-  TariffListItem,
-} from '../api/campaigns';
+import { campaignsApi, CampaignListItem, CampaignBonusType } from '../api/campaigns';
 import { AdminBackButton } from '../components/admin';
-import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
-
-// Icons
-
-const PlusIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-  </svg>
-);
-
-const EditIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-    />
-  </svg>
-);
-
-const TrashIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-    />
-  </svg>
-);
-
-const CheckIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-  </svg>
-);
-
-const XIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-);
-
-const ChartIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-    />
-  </svg>
-);
+import { PlusIcon, EditIcon, TrashIcon, CheckIcon, XIcon, ChartIcon } from '../components/icons';
 
 // Bonus type labels and colors
 const bonusTypeConfig: Record<
@@ -104,349 +46,12 @@ const formatRubles = (kopeks: number) => {
   );
 };
 
-// Campaign Edit Modal
-interface CampaignModalProps {
-  campaign: CampaignDetail;
-  servers: ServerSquadInfo[];
-  tariffs: TariffListItem[];
-  onSave: (data: CampaignUpdateRequest) => void;
-  onClose: () => void;
-  isLoading?: boolean;
-}
-
-function CampaignModal({
-  campaign,
-  servers,
-  tariffs,
-  onSave,
-  onClose,
-  isLoading,
-}: CampaignModalProps) {
-  const { t } = useTranslation();
-
-  const [name, setName] = useState(campaign.name || '');
-  const [startParameter, setStartParameter] = useState(campaign.start_parameter || '');
-  const [bonusType, setBonusType] = useState<CampaignBonusType>(campaign.bonus_type || 'balance');
-  const [isActive, setIsActive] = useState(campaign.is_active ?? true);
-
-  // Balance bonus
-  const [balanceBonusRubles, setBalanceBonusRubles] = useState<number | ''>(
-    (campaign.balance_bonus_kopeks || 0) / 100,
-  );
-
-  // Subscription bonus
-  const [subscriptionDays, setSubscriptionDays] = useState<number | ''>(
-    campaign.subscription_duration_days || 7,
-  );
-  const [subscriptionTraffic, setSubscriptionTraffic] = useState<number | ''>(
-    campaign.subscription_traffic_gb || 10,
-  );
-  const [subscriptionDevices, setSubscriptionDevices] = useState<number | ''>(
-    campaign.subscription_device_limit || 1,
-  );
-  const [selectedSquads, setSelectedSquads] = useState<string[]>(
-    campaign.subscription_squads || [],
-  );
-
-  // Tariff bonus
-  const [tariffId, setTariffId] = useState<number | null>(campaign.tariff_id || null);
-  const [tariffDays, setTariffDays] = useState<number | ''>(campaign.tariff_duration_days || 30);
-
-  const handleSubmit = () => {
-    const data: CampaignUpdateRequest = {
-      name,
-      start_parameter: startParameter,
-      bonus_type: bonusType,
-      is_active: isActive,
-    };
-
-    if (bonusType === 'balance') {
-      data.balance_bonus_kopeks = Math.round(toNumber(balanceBonusRubles) * 100);
-    } else if (bonusType === 'subscription') {
-      data.subscription_duration_days = toNumber(subscriptionDays, 7);
-      data.subscription_traffic_gb = toNumber(subscriptionTraffic, 10);
-      data.subscription_device_limit = toNumber(subscriptionDevices, 1);
-      data.subscription_squads = selectedSquads;
-    } else if (bonusType === 'tariff') {
-      data.tariff_id = tariffId || undefined;
-      data.tariff_duration_days = toNumber(tariffDays, 30);
-    }
-
-    onSave(data);
-  };
-
-  const toggleServer = (uuid: string) => {
-    setSelectedSquads((prev) =>
-      prev.includes(uuid) ? prev.filter((s) => s !== uuid) : [...prev, uuid],
-    );
-  };
-
-  const isValid = name.trim() && startParameter.trim() && /^[a-zA-Z0-9_-]+$/.test(startParameter);
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-xl bg-dark-800">
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-dark-700 p-4">
-          <h2 className="text-lg font-semibold text-dark-100">
-            {t('admin.campaigns.modal.editTitle')}
-          </h2>
-          <button onClick={onClose} className="rounded-lg p-1 transition-colors hover:bg-dark-700">
-            <XIcon />
-          </button>
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 space-y-4 overflow-y-auto p-4">
-          {/* Name */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.campaigns.form.name')}
-            </label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-              placeholder={t('admin.campaigns.form.namePlaceholder')}
-            />
-          </div>
-
-          {/* Start Parameter */}
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.campaigns.form.startParameter')}
-            </label>
-            <input
-              type="text"
-              value={startParameter}
-              onChange={(e) => setStartParameter(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
-              className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-              placeholder="instagram_jan2024"
-            />
-            <p className="mt-1 text-xs text-dark-500">
-              {t('admin.campaigns.form.startParameterHint')}
-            </p>
-          </div>
-
-          {/* Bonus Type */}
-          <div>
-            <label className="mb-2 block text-sm text-dark-300">
-              {t('admin.campaigns.form.bonusType')}
-            </label>
-            <div className="grid grid-cols-2 gap-2">
-              {(Object.keys(bonusTypeConfig) as CampaignBonusType[]).map((type) => (
-                <button
-                  key={type}
-                  type="button"
-                  onClick={() => setBonusType(type)}
-                  className={`rounded-lg p-3 text-left transition-colors ${
-                    bonusType === type
-                      ? `${bonusTypeConfig[type].bgColor} border border-current ${bonusTypeConfig[type].color}`
-                      : 'border border-dark-600 bg-dark-700 text-dark-300 hover:border-dark-500'
-                  }`}
-                >
-                  <span className="text-sm font-medium">{t(bonusTypeConfig[type].labelKey)}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Bonus Settings */}
-          {bonusType === 'balance' && (
-            <div className="rounded-lg border border-success-500/30 bg-success-500/10 p-4">
-              <label className="mb-2 block text-sm font-medium text-success-400">
-                {t('admin.campaigns.form.balanceBonus')}
-              </label>
-              <div className="flex items-center gap-2">
-                <input
-                  type="number"
-                  value={balanceBonusRubles}
-                  onChange={createNumberInputHandler(setBalanceBonusRubles, 0)}
-                  className="w-32 rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-success-500 focus:outline-none"
-                  min={0}
-                  step={1}
-                />
-                <span className="text-dark-400">₽</span>
-              </div>
-            </div>
-          )}
-
-          {bonusType === 'subscription' && (
-            <div className="space-y-3 rounded-lg border border-accent-500/30 bg-accent-500/10 p-4">
-              <label className="block text-sm font-medium text-accent-400">
-                {t('admin.campaigns.form.trialSubscription')}
-              </label>
-              <div className="grid grid-cols-3 gap-3">
-                <div>
-                  <label className="mb-1 block text-xs text-dark-500">
-                    {t('admin.campaigns.form.days')}
-                  </label>
-                  <input
-                    type="number"
-                    value={subscriptionDays}
-                    onChange={createNumberInputHandler(setSubscriptionDays, 1)}
-                    className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                    min={1}
-                  />
-                </div>
-                <div>
-                  <label className="mb-1 block text-xs text-dark-500">
-                    {t('admin.campaigns.form.trafficGb')}
-                  </label>
-                  <input
-                    type="number"
-                    value={subscriptionTraffic}
-                    onChange={createNumberInputHandler(setSubscriptionTraffic, 0)}
-                    className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                    min={0}
-                  />
-                </div>
-                <div>
-                  <label className="mb-1 block text-xs text-dark-500">
-                    {t('admin.campaigns.form.devices')}
-                  </label>
-                  <input
-                    type="number"
-                    value={subscriptionDevices}
-                    onChange={createNumberInputHandler(setSubscriptionDevices, 1)}
-                    className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                    min={1}
-                  />
-                </div>
-              </div>
-              {servers.length > 0 && (
-                <div>
-                  <label className="mb-2 block text-xs text-dark-500">
-                    {t('admin.campaigns.form.servers')}
-                  </label>
-                  <div className="max-h-32 space-y-1 overflow-y-auto">
-                    {servers.map((server) => (
-                      <button
-                        key={server.id}
-                        type="button"
-                        onClick={() => toggleServer(server.squad_uuid)}
-                        className={`flex w-full items-center gap-2 rounded-lg p-2 text-left transition-colors ${
-                          selectedSquads.includes(server.squad_uuid)
-                            ? 'bg-accent-500/20 text-accent-300'
-                            : 'bg-dark-600 text-dark-300 hover:bg-dark-500'
-                        }`}
-                      >
-                        <div
-                          className={`flex h-4 w-4 items-center justify-center rounded ${
-                            selectedSquads.includes(server.squad_uuid)
-                              ? 'bg-accent-500 text-white'
-                              : 'bg-dark-500'
-                          }`}
-                        >
-                          {selectedSquads.includes(server.squad_uuid) && <CheckIcon />}
-                        </div>
-                        <span className="text-sm">{server.display_name}</span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {bonusType === 'tariff' && (
-            <div className="space-y-3 rounded-lg border border-accent-500/30 bg-accent-500/10 p-4">
-              <label className="block text-sm font-medium text-accent-400">
-                {t('admin.campaigns.form.tariff')}
-              </label>
-              <div>
-                <label className="mb-1 block text-xs text-dark-500">
-                  {t('admin.campaigns.form.selectTariff')}
-                </label>
-                <select
-                  value={tariffId || ''}
-                  onChange={(e) => setTariffId(e.target.value ? parseInt(e.target.value) : null)}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                >
-                  <option value="">{t('admin.campaigns.form.notSelected')}</option>
-                  {tariffs.map((tariff) => (
-                    <option key={tariff.id} value={tariff.id}>
-                      {tariff.name} (
-                      {t('admin.campaigns.form.tariffOption', {
-                        traffic: tariff.traffic_limit_gb,
-                        devices: tariff.device_limit,
-                      })}
-                      )
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs text-dark-500">
-                  {t('admin.campaigns.form.durationDays')}
-                </label>
-                <input
-                  type="number"
-                  value={tariffDays}
-                  onChange={createNumberInputHandler(setTariffDays, 1)}
-                  className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-                  min={1}
-                />
-              </div>
-            </div>
-          )}
-
-          {bonusType === 'none' && (
-            <div className="rounded-lg border border-dark-500/30 bg-dark-500/10 p-4">
-              <p className="text-sm text-dark-400">
-                {t('admin.campaigns.form.noBonusDescription')}
-              </p>
-            </div>
-          )}
-
-          {/* Active toggle */}
-          <div className="flex items-center justify-between rounded-lg bg-dark-700 p-3">
-            <span className="text-sm text-dark-300">{t('admin.campaigns.form.active')}</span>
-            <button
-              type="button"
-              onClick={() => setIsActive(!isActive)}
-              className={`relative h-6 w-10 rounded-full transition-colors ${
-                isActive ? 'bg-accent-500' : 'bg-dark-600'
-              }`}
-            >
-              <span
-                className={`absolute top-1 h-4 w-4 rounded-full bg-white transition-transform ${
-                  isActive ? 'left-5' : 'left-1'
-                }`}
-              />
-            </button>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-dark-700 p-4">
-          <button
-            onClick={onClose}
-            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
-          >
-            {t('admin.campaigns.form.cancel')}
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={!isValid || isLoading}
-            className="rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {isLoading ? t('admin.campaigns.form.saving') : t('admin.campaigns.form.save')}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 // Main Component
 export default function AdminCampaigns() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
-  const [editingCampaign, setEditingCampaign] = useState<CampaignDetail | null>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
 
   // Queries
@@ -460,26 +65,7 @@ export default function AdminCampaigns() {
     queryFn: () => campaignsApi.getOverview(),
   });
 
-  const { data: servers = [] } = useQuery({
-    queryKey: ['admin-campaigns-servers'],
-    queryFn: () => campaignsApi.getAvailableServers(),
-  });
-
-  const { data: tariffs = [] } = useQuery({
-    queryKey: ['admin-campaigns-tariffs'],
-    queryFn: () => campaignsApi.getAvailableTariffs(),
-  });
-
   // Mutations
-  const updateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: number; data: CampaignUpdateRequest }) =>
-      campaignsApi.updateCampaign(id, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-campaigns'] });
-      setEditingCampaign(null);
-    },
-  });
-
   const deleteMutation = useMutation({
     mutationFn: campaignsApi.deleteCampaign,
     onSuccess: () => {
@@ -496,25 +82,6 @@ export default function AdminCampaigns() {
     },
   });
 
-  const handleEdit = async (campaignId: number) => {
-    try {
-      const detail = await campaignsApi.getCampaign(campaignId);
-      setEditingCampaign(detail);
-    } catch (error) {
-      console.error('Failed to load campaign:', error);
-    }
-  };
-
-  const handleSave = (data: CampaignUpdateRequest) => {
-    if (editingCampaign) {
-      updateMutation.mutate({ id: editingCampaign.id, data });
-    }
-  };
-
-  const handleCloseModal = () => {
-    setEditingCampaign(null);
-  };
-
   const campaigns = campaignsData?.campaigns || [];
 
   return (
@@ -647,7 +214,7 @@ export default function AdminCampaigns() {
 
                   {/* Edit */}
                   <button
-                    onClick={() => handleEdit(campaign.id)}
+                    onClick={() => navigate(`/admin/campaigns/${campaign.id}/edit`)}
                     className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
                     title={t('admin.campaigns.table.edit')}
                   >
@@ -670,18 +237,6 @@ export default function AdminCampaigns() {
         </div>
       )}
 
-      {/* Edit Modal */}
-      {editingCampaign && (
-        <CampaignModal
-          campaign={editingCampaign}
-          servers={servers}
-          tariffs={tariffs}
-          onSave={handleSave}
-          onClose={handleCloseModal}
-          isLoading={updateMutation.isPending}
-        />
-      )}
-
       {/* Delete Confirmation */}
       {deleteConfirm !== null && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">