refactor: extract promo offers modals to separate pages

- Create AdminPromoOfferTemplateEdit.tsx for template editing
- Create AdminPromoOfferSend.tsx for sending offers with result screen
- Add routes for /admin/promo-offers/templates/:id/edit and /admin/promo-offers/send
- Simplify AdminPromoOffers.tsx by removing modals
- Add i18n keys for new pages

src/App.tsx

@@ -51,6 +51,8 @@ const AdminUsers = lazy(() => import('./pages/AdminUsers'));
 const AdminPayments = lazy(() => import('./pages/AdminPayments'));
 const AdminPaymentMethods = lazy(() => import('./pages/AdminPaymentMethods'));
 const AdminPromoOffers = lazy(() => import('./pages/AdminPromoOffers'));
+const AdminPromoOfferTemplateEdit = lazy(() => import('./pages/AdminPromoOfferTemplateEdit'));
+const AdminPromoOfferSend = lazy(() => import('./pages/AdminPromoOfferSend'));
 const AdminRemnawave = lazy(() => import('./pages/AdminRemnawave'));
 const AdminEmailTemplates = lazy(() => import('./pages/AdminEmailTemplates'));
 const AdminUserDetail = lazy(() => import('./pages/AdminUserDetail'));
@@ -494,6 +496,26 @@ function App() {
             </AdminRoute>
           }
         />
+        <Route
+          path="/admin/promo-offers/templates/:id/edit"
+          element={
+            <AdminRoute>
+              <LazyPage>
+                <AdminPromoOfferTemplateEdit />
+              </LazyPage>
+            </AdminRoute>
+          }
+        />
+        <Route
+          path="/admin/promo-offers/send"
+          element={
+            <AdminRoute>
+              <LazyPage>
+                <AdminPromoOfferSend />
+              </LazyPage>
+            </AdminRoute>
+          }
+        />
         <Route
           path="/admin/remnawave"
           element={

src/locales/en.json

@@ -1828,6 +1828,10 @@
         "notificationsFailed": "(failed: {{count}})",
         "sendError": "Failed to send offer"
       },
+      "notFound": "Template not found",
+      "noActiveTemplates": "No active templates",
+      "backToList": "Back to offers",
+      "sendAnother": "Send another",
       "actions": {
         "created": "Created",
         "claimed": "Claimed",

src/locales/fa.json

@@ -1621,6 +1621,10 @@
         "notificationsFailed": "(ناموفق: {{count}})",
         "sendError": "ارسال پیشنهاد ناموفق بود"
       },
+      "notFound": "قالب یافت نشد",
+      "noActiveTemplates": "قالب فعالی وجود ندارد",
+      "backToList": "بازگشت به لیست پیشنهادات",
+      "sendAnother": "ارسال دیگری",
       "actions": {
         "created": "ایجاد شده",
         "claimed": "فعال شده",

src/locales/ru.json

@@ -2339,6 +2339,10 @@
         "notificationsFailed": "(не доставлено: {{count}})",
         "sendError": "Не удалось отправить предложение"
       },
+      "notFound": "Шаблон не найден",
+      "noActiveTemplates": "Нет активных шаблонов",
+      "backToList": "К списку предложений",
+      "sendAnother": "Отправить еще",
       "actions": {
         "created": "Создано",
         "claimed": "Активировано",

src/locales/zh.json

@@ -1620,6 +1620,10 @@
         "notificationsFailed": "（失败: {{count}}）",
         "sendError": "发送优惠失败"
       },
+      "notFound": "未找到模板",
+      "noActiveTemplates": "没有活跃的模板",
+      "backToList": "返回优惠列表",
+      "sendAnother": "再发送一个",
       "actions": {
         "created": "已创建",
         "claimed": "已领取",

src/pages/AdminPromoOfferSend.tsx

@@ -0,0 +1,382 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import {
+  promoOffersApi,
+  PromoOfferBroadcastRequest,
+  TARGET_SEGMENTS,
+  TargetSegment,
+  OFFER_TYPE_CONFIG,
+  OfferType,
+} from '../api/promoOffers';
+import { AdminBackButton } from '../components/admin';
+
+// Icons
+const SendIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+    />
+  </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 UsersIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+    />
+  </svg>
+);
+
+const UserIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+    />
+  </svg>
+);
+
+const getOfferTypeIcon = (offerType: string): string => {
+  return OFFER_TYPE_CONFIG[offerType as OfferType]?.icon || '🎁';
+};
+
+export default function AdminPromoOfferSend() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(null);
+  const [sendMode, setSendMode] = useState<'segment' | 'user'>('segment');
+  const [selectedTarget, setSelectedTarget] = useState<TargetSegment>('active');
+  const [userId, setUserId] = useState('');
+  const [result, setResult] = useState<{
+    title: string;
+    message: string;
+    isSuccess: boolean;
+  } | null>(null);
+
+  // Query templates
+  const { data: templatesData, isLoading } = useQuery({
+    queryKey: ['admin-promo-templates'],
+    queryFn: promoOffersApi.getTemplates,
+  });
+
+  const templates = templatesData?.items || [];
+  const activeTemplates = templates.filter((t) => t.is_active);
+  const selectedTemplate = templates.find((t) => t.id === selectedTemplateId);
+
+  // Set default template when loaded
+  if (!selectedTemplateId && activeTemplates.length > 0) {
+    setSelectedTemplateId(activeTemplates[0].id);
+  }
+
+  // Broadcast mutation
+  const broadcastMutation = useMutation({
+    mutationFn: promoOffersApi.broadcastOffer,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['admin-promo-logs'] });
+
+      let message = t('admin.promoOffers.result.offersCreated', { count: data.created_offers });
+      if (data.notifications_sent > 0 || data.notifications_failed > 0) {
+        message +=
+          '\n' +
+          t('admin.promoOffers.result.notificationsSent', { count: data.notifications_sent });
+        if (data.notifications_failed > 0) {
+          message +=
+            ' ' +
+            t('admin.promoOffers.result.notificationsFailed', {
+              count: data.notifications_failed,
+            });
+        }
+      }
+
+      setResult({
+        title: t('admin.promoOffers.result.sentTitle'),
+        message,
+        isSuccess: true,
+      });
+    },
+    onError: (error: unknown) => {
+      const axiosErr = error as { response?: { data?: { detail?: string } } };
+      setResult({
+        title: t('common.error'),
+        message: axiosErr.response?.data?.detail || t('admin.promoOffers.result.sendError'),
+        isSuccess: false,
+      });
+    },
+  });
+
+  const handleSubmit = () => {
+    if (!selectedTemplateId || !selectedTemplate) return;
+
+    const data: PromoOfferBroadcastRequest = {
+      notification_type: selectedTemplate.offer_type,
+      valid_hours: selectedTemplate.valid_hours,
+      discount_percent: selectedTemplate.discount_percent,
+      effect_type:
+        selectedTemplate.offer_type === 'test_access' ? 'test_access' : 'percent_discount',
+      extra_data: {
+        template_id: selectedTemplate.id,
+        active_discount_hours: selectedTemplate.active_discount_hours,
+        test_duration_hours: selectedTemplate.test_duration_hours,
+        test_squad_uuids: selectedTemplate.test_squad_uuids,
+      },
+      send_notification: true,
+      message_text: selectedTemplate.message_text,
+      button_text: selectedTemplate.button_text,
+    };
+
+    if (sendMode === 'user') {
+      const id = parseInt(userId);
+      if (!id) return;
+      data.telegram_id = id;
+    } else {
+      data.target = selectedTarget;
+    }
+
+    broadcastMutation.mutate(data);
+  };
+
+  const isValid = () => {
+    if (!selectedTemplateId) return false;
+    if (sendMode === 'user' && !userId.trim()) return false;
+    return true;
+  };
+
+  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>
+    );
+  }
+
+  // Result screen
+  if (result) {
+    return (
+      <div className="animate-fade-in">
+        <div className="mx-auto max-w-md py-12 text-center">
+          <div
+            className={`mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full ${
+              result.isSuccess ? 'bg-success-500/20' : 'bg-error-500/20'
+            }`}
+          >
+            {result.isSuccess ? (
+              <svg
+                className="h-8 w-8 text-success-400"
+                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>
+            ) : (
+              <svg
+                className="h-8 w-8 text-error-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            )}
+          </div>
+          <h3 className="mb-2 text-lg font-semibold text-dark-100">{result.title}</h3>
+          <p className="mb-6 whitespace-pre-wrap text-dark-400">{result.message}</p>
+          <div className="flex justify-center gap-3">
+            <button
+              onClick={() => navigate('/admin/promo-offers')}
+              className="rounded-lg bg-accent-500 px-6 py-2 text-white transition-colors hover:bg-accent-600"
+            >
+              {t('admin.promoOffers.backToList')}
+            </button>
+            {result.isSuccess && (
+              <button
+                onClick={() => setResult(null)}
+                className="rounded-lg border border-dark-600 px-6 py-2 text-dark-300 transition-colors hover:text-dark-100"
+              >
+                {t('admin.promoOffers.sendAnother')}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in">
+      {/* Header */}
+      <div className="mb-6 flex items-center gap-3">
+        <AdminBackButton to="/admin/promo-offers" />
+        <div className="flex items-center gap-3">
+          <div className="rounded-lg bg-accent-500/20 p-2">
+            <SendIcon />
+          </div>
+          <h1 className="text-xl font-semibold text-dark-100">
+            {t('admin.promoOffers.send.title')}
+          </h1>
+        </div>
+      </div>
+
+      {activeTemplates.length === 0 ? (
+        <div className="py-12 text-center">
+          <p className="text-dark-400">{t('admin.promoOffers.noActiveTemplates')}</p>
+        </div>
+      ) : (
+        <div className="mx-auto max-w-2xl space-y-6">
+          {/* Template Selection */}
+          <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
+            <label className="mb-3 block text-sm font-medium text-dark-200">
+              {t('admin.promoOffers.send.offerTemplate')}
+            </label>
+            <div className="space-y-2">
+              {activeTemplates.map((template) => (
+                <button
+                  key={template.id}
+                  onClick={() => setSelectedTemplateId(template.id)}
+                  className={`w-full rounded-lg border p-4 text-left transition-colors ${
+                    selectedTemplateId === template.id
+                      ? 'border-accent-500 bg-accent-500/10'
+                      : 'border-dark-600 bg-dark-700 hover:border-dark-500'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="text-2xl">{getOfferTypeIcon(template.offer_type)}</span>
+                    <div className="flex-1">
+                      <div className="font-medium text-dark-100">{template.name}</div>
+                      <div className="text-sm text-dark-400">
+                        {template.discount_percent > 0 &&
+                          t('admin.promoOffers.send.discountLabel', {
+                            percent: template.discount_percent,
+                          })}
+                        {template.offer_type === 'test_access' &&
+                          t('admin.promoOffers.offerType.testAccess')}
+                        <span className="mx-1">•</span>
+                        {t('admin.promoOffers.send.hoursToActivate', {
+                          hours: template.valid_hours,
+                        })}
+                      </div>
+                    </div>
+                    {selectedTemplateId === template.id && (
+                      <div className="text-accent-400">
+                        <CheckIcon />
+                      </div>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Send Mode */}
+          <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
+            <label className="mb-3 block text-sm font-medium text-dark-200">
+              {t('admin.promoOffers.send.sendTo')}
+            </label>
+            <div className="mb-4 flex gap-2">
+              <button
+                onClick={() => setSendMode('segment')}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-3 text-sm font-medium transition-colors ${
+                  sendMode === 'segment'
+                    ? 'border-accent-500 bg-accent-500/10 text-accent-400'
+                    : 'border-dark-600 text-dark-400 hover:text-dark-200'
+                }`}
+              >
+                <UsersIcon />
+                <span>{t('admin.promoOffers.send.segment')}</span>
+              </button>
+              <button
+                onClick={() => setSendMode('user')}
+                className={`flex flex-1 items-center justify-center gap-2 rounded-lg border py-3 text-sm font-medium transition-colors ${
+                  sendMode === 'user'
+                    ? 'border-accent-500 bg-accent-500/10 text-accent-400'
+                    : 'border-dark-600 text-dark-400 hover:text-dark-200'
+                }`}
+              >
+                <UserIcon />
+                <span>{t('admin.promoOffers.send.user')}</span>
+              </button>
+            </div>
+
+            {sendMode === 'segment' ? (
+              <select
+                value={selectedTarget}
+                onChange={(e) => setSelectedTarget(e.target.value as TargetSegment)}
+                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2.5 text-dark-100 focus:border-accent-500 focus:outline-none"
+              >
+                {Object.entries(TARGET_SEGMENTS).map(([key, labelKey]) => (
+                  <option key={key} value={key}>
+                    {t(labelKey)}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                type="text"
+                value={userId}
+                onChange={(e) => setUserId(e.target.value)}
+                placeholder={t('admin.promoOffers.send.userIdPlaceholder')}
+                className="w-full rounded-lg border border-dark-600 bg-dark-700 px-3 py-2.5 text-dark-100 focus:border-accent-500 focus:outline-none"
+              />
+            )}
+          </div>
+
+          {/* Preview */}
+          {selectedTemplate && (
+            <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
+              <h4 className="mb-3 text-sm font-medium text-dark-200">
+                {t('admin.promoOffers.send.preview')}
+              </h4>
+              <div className="rounded-lg bg-dark-700/50 p-4">
+                <div className="whitespace-pre-wrap text-sm text-dark-200">
+                  {selectedTemplate.message_text}
+                </div>
+                <div className="mt-4">
+                  <span className="inline-block rounded-lg bg-accent-500 px-4 py-2 text-sm text-white">
+                    {selectedTemplate.button_text}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={() => navigate('/admin/promo-offers')}
+              className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={!isValid() || broadcastMutation.isPending}
+              className="flex items-center gap-2 rounded-lg bg-accent-500 px-6 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <SendIcon />
+              {broadcastMutation.isPending
+                ? t('admin.promoOffers.send.sending')
+                : t('admin.promoOffers.send.sendButton')}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/AdminPromoOfferTemplateEdit.tsx

@@ -0,0 +1,276 @@
+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 {
+  promoOffersApi,
+  PromoOfferTemplateUpdateRequest,
+  OFFER_TYPE_CONFIG,
+  OfferType,
+} from '../api/promoOffers';
+import { AdminBackButton } from '../components/admin';
+import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
+
+const getOfferTypeIcon = (offerType: string): string => {
+  return OFFER_TYPE_CONFIG[offerType as OfferType]?.icon || '🎁';
+};
+
+export default function AdminPromoOfferTemplateEdit() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const queryClient = useQueryClient();
+
+  // Form state
+  const [name, setName] = useState('');
+  const [messageText, setMessageText] = useState('');
+  const [buttonText, setButtonText] = useState('');
+  const [validHours, setValidHours] = useState<number | ''>(24);
+  const [discountPercent, setDiscountPercent] = useState<number | ''>(0);
+  const [activeDiscountHours, setActiveDiscountHours] = useState<number | ''>(0);
+  const [testDurationHours, setTestDurationHours] = useState<number | ''>(0);
+  const [isActive, setIsActive] = useState(true);
+  const [isTestAccess, setIsTestAccess] = useState(false);
+
+  // Query template
+  const { data: templatesData, isLoading } = useQuery({
+    queryKey: ['admin-promo-templates'],
+    queryFn: promoOffersApi.getTemplates,
+  });
+
+  const template = templatesData?.items.find((t) => t.id === Number(id));
+
+  // Populate form when template loads
+  useEffect(() => {
+    if (template) {
+      setName(template.name);
+      setMessageText(template.message_text);
+      setButtonText(template.button_text);
+      setValidHours(template.valid_hours);
+      setDiscountPercent(template.discount_percent);
+      setActiveDiscountHours(template.active_discount_hours || 0);
+      setTestDurationHours(template.test_duration_hours || 0);
+      setIsActive(template.is_active);
+      setIsTestAccess(template.offer_type === 'test_access');
+    }
+  }, [template]);
+
+  // Update mutation
+  const updateMutation = useMutation({
+    mutationFn: (data: PromoOfferTemplateUpdateRequest) =>
+      promoOffersApi.updateTemplate(Number(id), data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-promo-templates'] });
+      navigate('/admin/promo-offers');
+    },
+  });
+
+  const handleSubmit = () => {
+    const data: PromoOfferTemplateUpdateRequest = {
+      name,
+      message_text: messageText,
+      button_text: buttonText,
+      valid_hours: toNumber(validHours, 1),
+      discount_percent: toNumber(discountPercent),
+      is_active: isActive,
+    };
+    const testHours = toNumber(testDurationHours);
+    const discountHours = toNumber(activeDiscountHours);
+    if (isTestAccess) {
+      data.test_duration_hours = testHours > 0 ? testHours : undefined;
+    } else {
+      data.active_discount_hours = discountHours > 0 ? discountHours : undefined;
+    }
+    updateMutation.mutate(data);
+  };
+
+  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 (!template) {
+    return (
+      <div className="animate-fade-in">
+        <div className="mb-6 flex items-center gap-3">
+          <AdminBackButton to="/admin/promo-offers" />
+          <h1 className="text-xl font-semibold text-dark-100">
+            {t('admin.promoOffers.form.editTemplate')}
+          </h1>
+        </div>
+        <div className="py-12 text-center">
+          <p className="text-error-400">{t('admin.promoOffers.notFound')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-fade-in">
+      {/* Header */}
+      <div className="mb-6 flex items-center gap-3">
+        <AdminBackButton to="/admin/promo-offers" />
+        <div className="flex items-center gap-3">
+          <span className="text-2xl">{getOfferTypeIcon(template.offer_type)}</span>
+          <h1 className="text-xl font-semibold text-dark-100">
+            {t('admin.promoOffers.form.editTemplate')}
+          </h1>
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="mx-auto max-w-2xl space-y-6">
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-6">
+          <div className="space-y-4">
+            <div>
+              <label className="mb-1 block text-sm text-dark-300">
+                {t('admin.promoOffers.form.templateName')}
+              </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"
+              />
+            </div>
+
+            <div>
+              <label className="mb-1 block text-sm text-dark-300">
+                {t('admin.promoOffers.form.messageText')}
+              </label>
+              <textarea
+                value={messageText}
+                onChange={(e) => setMessageText(e.target.value)}
+                rows={4}
+                className="w-full resize-none rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
+              />
+            </div>
+
+            <div>
+              <label className="mb-1 block text-sm text-dark-300">
+                {t('admin.promoOffers.form.buttonText')}
+              </label>
+              <input
+                type="text"
+                value={buttonText}
+                onChange={(e) => setButtonText(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"
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div>
+                <label className="mb-1 block text-sm text-dark-300">
+                  {t('admin.promoOffers.form.validHours')}
+                </label>
+                <input
+                  type="number"
+                  value={validHours}
+                  onChange={createNumberInputHandler(setValidHours, 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}
+                  placeholder="0"
+                />
+                <p className="mt-1 text-xs text-dark-500">
+                  {t('admin.promoOffers.form.activationTime')}
+                </p>
+              </div>
+
+              {!isTestAccess && (
+                <div>
+                  <label className="mb-1 block text-sm text-dark-300">
+                    {t('admin.promoOffers.form.discountPercent')}
+                  </label>
+                  <input
+                    type="number"
+                    value={discountPercent}
+                    onChange={createNumberInputHandler(setDiscountPercent, 0, 100)}
+                    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}
+                    max={100}
+                    placeholder="0"
+                  />
+                </div>
+              )}
+            </div>
+
+            {isTestAccess ? (
+              <div>
+                <label className="mb-1 block text-sm text-dark-300">
+                  {t('admin.promoOffers.form.testDurationHours')}
+                </label>
+                <input
+                  type="number"
+                  value={testDurationHours}
+                  onChange={createNumberInputHandler(setTestDurationHours, 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}
+                  placeholder="0"
+                />
+                <p className="mt-1 text-xs text-dark-500">
+                  {t('admin.promoOffers.form.defaultZero')}
+                </p>
+              </div>
+            ) : (
+              <div>
+                <label className="mb-1 block text-sm text-dark-300">
+                  {t('admin.promoOffers.form.activeDiscountHours')}
+                </label>
+                <input
+                  type="number"
+                  value={activeDiscountHours}
+                  onChange={createNumberInputHandler(setActiveDiscountHours, 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}
+                  placeholder="0"
+                />
+                <p className="mt-1 text-xs text-dark-500">
+                  {t('admin.promoOffers.form.discountDurationHint')}
+                </p>
+              </div>
+            )}
+
+            <label className="flex cursor-pointer items-center gap-3">
+              <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>
+              <span className="text-sm text-dark-200">
+                {t('admin.promoOffers.form.templateActive')}
+              </span>
+            </label>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={() => navigate('/admin/promo-offers')}
+            className="px-4 py-2 text-dark-300 transition-colors hover:text-dark-100"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!name.trim() || updateMutation.isPending}
+            className="rounded-lg bg-accent-500 px-6 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {updateMutation.isPending ? t('admin.promoOffers.form.saving') : t('common.save')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/AdminPromoOffers.tsx

@@ -1,23 +1,12 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import i18n from '../i18n';
-import {
+import { promoOffersApi, PromoOfferLog, OFFER_TYPE_CONFIG, OfferType } from '../api/promoOffers';
-  promoOffersApi,
-  PromoOfferTemplate,
-  PromoOfferTemplateUpdateRequest,
-  PromoOfferBroadcastRequest,
-  PromoOfferLog,
-  TARGET_SEGMENTS,
-  TargetSegment,
-  OFFER_TYPE_CONFIG,
-  OfferType,
-} from '../api/promoOffers';
 import { AdminBackButton } from '../components/admin';
-import { createNumberInputHandler, toNumber } from '../utils/inputHelpers';
 
 // Icons
-
 const EditIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path
@@ -28,12 +17,6 @@ const EditIcon = () => (
   </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 SendIcon = () => (
   <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path
@@ -64,22 +47,6 @@ const UserIcon = () => (
   </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 UsersIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
-    />
-  </svg>
-);
-
 // Helper functions
 const formatDateTime = (date: string | null): string => {
   if (!date) return '-';
@@ -123,470 +90,11 @@ const getOfferTypeLabel = (offerType: string): string => {
   return config ? i18n.t(config.labelKey) : offerType;
 };
 
-// Template Edit Modal
-interface TemplateEditModalProps {
-  template: PromoOfferTemplate;
-  onSave: (data: PromoOfferTemplateUpdateRequest) => void;
-  onClose: () => void;
-  isLoading?: boolean;
-}
-
-function TemplateEditModal({ template, onSave, onClose, isLoading }: TemplateEditModalProps) {
-  const { t } = useTranslation();
-  const [name, setName] = useState(template.name);
-  const [messageText, setMessageText] = useState(template.message_text);
-  const [buttonText, setButtonText] = useState(template.button_text);
-  const [validHours, setValidHours] = useState<number | ''>(template.valid_hours);
-  const [discountPercent, setDiscountPercent] = useState<number | ''>(template.discount_percent);
-  const [activeDiscountHours, setActiveDiscountHours] = useState<number | ''>(
-    template.active_discount_hours || 0,
-  );
-  const [testDurationHours, setTestDurationHours] = useState<number | ''>(
-    template.test_duration_hours || 0,
-  );
-  const [isActive, setIsActive] = useState(template.is_active);
-
-  const isTestAccess = template.offer_type === 'test_access';
-
-  const handleSubmit = () => {
-    const data: PromoOfferTemplateUpdateRequest = {
-      name,
-      message_text: messageText,
-      button_text: buttonText,
-      valid_hours: toNumber(validHours, 1),
-      discount_percent: toNumber(discountPercent),
-      is_active: isActive,
-    };
-    const testHours = toNumber(testDurationHours);
-    const discountHours = toNumber(activeDiscountHours);
-    if (isTestAccess) {
-      data.test_duration_hours = testHours > 0 ? testHours : undefined;
-    } else {
-      data.active_discount_hours = discountHours > 0 ? discountHours : undefined;
-    }
-    onSave(data);
-  };
-
-  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">
-          <div className="flex items-center gap-3">
-            <span className="text-2xl">{getOfferTypeIcon(template.offer_type)}</span>
-            <h2 className="text-lg font-semibold text-dark-100">
-              {t('admin.promoOffers.form.editTemplate')}
-            </h2>
-          </div>
-          <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">
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.promoOffers.form.templateName')}
-            </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"
-            />
-          </div>
-
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.promoOffers.form.messageText')}
-            </label>
-            <textarea
-              value={messageText}
-              onChange={(e) => setMessageText(e.target.value)}
-              rows={4}
-              className="w-full resize-none rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-dark-100 focus:border-accent-500 focus:outline-none"
-            />
-          </div>
-
-          <div>
-            <label className="mb-1 block text-sm text-dark-300">
-              {t('admin.promoOffers.form.buttonText')}
-            </label>
-            <input
-              type="text"
-              value={buttonText}
-              onChange={(e) => setButtonText(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"
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.promoOffers.form.validHours')}
-              </label>
-              <input
-                type="number"
-                value={validHours}
-                onChange={createNumberInputHandler(setValidHours, 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}
-              />
-              <p className="mt-1 text-xs text-dark-500">
-                {t('admin.promoOffers.form.activationTime')}
-              </p>
-            </div>
-
-            {!isTestAccess && (
-              <div>
-                <label className="mb-1 block text-sm text-dark-300">
-                  {t('admin.promoOffers.form.discountPercent')}
-                </label>
-                <input
-                  type="number"
-                  value={discountPercent}
-                  onChange={createNumberInputHandler(setDiscountPercent, 0, 100)}
-                  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}
-                  max={100}
-                />
-              </div>
-            )}
-          </div>
-
-          {isTestAccess ? (
-            <div>
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.promoOffers.form.testDurationHours')}
-              </label>
-              <input
-                type="number"
-                value={testDurationHours}
-                onChange={createNumberInputHandler(setTestDurationHours, 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}
-              />
-              <p className="mt-1 text-xs text-dark-500">
-                {t('admin.promoOffers.form.defaultZero')}
-              </p>
-            </div>
-          ) : (
-            <div>
-              <label className="mb-1 block text-sm text-dark-300">
-                {t('admin.promoOffers.form.activeDiscountHours')}
-              </label>
-              <input
-                type="number"
-                value={activeDiscountHours}
-                onChange={createNumberInputHandler(setActiveDiscountHours, 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}
-              />
-              <p className="mt-1 text-xs text-dark-500">
-                {t('admin.promoOffers.form.discountDurationHint')}
-              </p>
-            </div>
-          )}
-
-          <label className="flex cursor-pointer items-center gap-3">
-            <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>
-            <span className="text-sm text-dark-200">
-              {t('admin.promoOffers.form.templateActive')}
-            </span>
-          </label>
-        </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('common.cancel')}
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={!name.trim() || 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.promoOffers.form.saving') : t('common.save')}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Send Offer Modal
-interface SendOfferModalProps {
-  templates: PromoOfferTemplate[];
-  onSend: (templateId: number, target: string | null, userId: number | null) => void;
-  onClose: () => void;
-  isLoading?: boolean;
-}
-
-function SendOfferModal({ templates, onSend, onClose, isLoading }: SendOfferModalProps) {
-  const { t } = useTranslation();
-  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(
-    templates[0]?.id || null,
-  );
-  const [sendMode, setSendMode] = useState<'segment' | 'user'>('segment');
-  const [selectedTarget, setSelectedTarget] = useState<TargetSegment>('active');
-  const [userId, setUserId] = useState('');
-
-  const selectedTemplate = templates.find((t) => t.id === selectedTemplateId);
-  const activeTemplates = templates.filter((t) => t.is_active);
-
-  const handleSubmit = () => {
-    if (!selectedTemplateId) return;
-    if (sendMode === 'user') {
-      const id = parseInt(userId);
-      if (!id) return;
-      onSend(selectedTemplateId, null, id);
-    } else {
-      onSend(selectedTemplateId, selectedTarget, null);
-    }
-  };
-
-  const isValid = () => {
-    if (!selectedTemplateId) return false;
-    if (sendMode === 'user' && !userId.trim()) return false;
-    return true;
-  };
-
-  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">
-          <div className="flex items-center gap-3">
-            <div className="rounded-lg bg-accent-500/20 p-2">
-              <SendIcon />
-            </div>
-            <h2 className="text-lg font-semibold text-dark-100">
-              {t('admin.promoOffers.send.title')}
-            </h2>
-          </div>
-          <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">
-          {/* Template Selection */}
-          <div>
-            <label className="mb-2 block text-sm text-dark-300">
-              {t('admin.promoOffers.send.offerTemplate')}
-            </label>
-            <div className="space-y-2">
-              {activeTemplates.map((template) => (
-                <button
-                  key={template.id}
-                  onClick={() => setSelectedTemplateId(template.id)}
-                  className={`w-full rounded-lg border p-3 text-left transition-colors ${
-                    selectedTemplateId === template.id
-                      ? 'border-accent-500 bg-accent-500/10'
-                      : 'border-dark-600 bg-dark-700 hover:border-dark-500'
-                  }`}
-                >
-                  <div className="flex items-center gap-3">
-                    <span className="text-xl">{getOfferTypeIcon(template.offer_type)}</span>
-                    <div className="flex-1">
-                      <div className="font-medium text-dark-100">{template.name}</div>
-                      <div className="text-sm text-dark-400">
-                        {template.discount_percent > 0 &&
-                          t('admin.promoOffers.send.discountLabel', {
-                            percent: template.discount_percent,
-                          })}
-                        {template.offer_type === 'test_access' &&
-                          t('admin.promoOffers.offerType.testAccess')}
-                        <span className="mx-1">•</span>
-                        {t('admin.promoOffers.send.hoursToActivate', {
-                          hours: template.valid_hours,
-                        })}
-                      </div>
-                    </div>
-                    {selectedTemplateId === template.id && <CheckIcon />}
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Send Mode */}
-          <div>
-            <label className="mb-2 block text-sm text-dark-300">
-              {t('admin.promoOffers.send.sendTo')}
-            </label>
-            <div className="mb-3 flex gap-2">
-              <button
-                onClick={() => setSendMode('segment')}
-                className={`flex-1 rounded-lg border py-2 text-sm font-medium transition-colors ${
-                  sendMode === 'segment'
-                    ? 'border-accent-500 bg-accent-500/10 text-accent-400'
-                    : 'border-dark-600 text-dark-400 hover:text-dark-200'
-                }`}
-              >
-                <UsersIcon />
-                <span className="ml-2">{t('admin.promoOffers.send.segment')}</span>
-              </button>
-              <button
-                onClick={() => setSendMode('user')}
-                className={`flex-1 rounded-lg border py-2 text-sm font-medium transition-colors ${
-                  sendMode === 'user'
-                    ? 'border-accent-500 bg-accent-500/10 text-accent-400'
-                    : 'border-dark-600 text-dark-400 hover:text-dark-200'
-                }`}
-              >
-                <UserIcon />
-                <span className="ml-2">{t('admin.promoOffers.send.user')}</span>
-              </button>
-            </div>
-
-            {sendMode === 'segment' ? (
-              <select
-                value={selectedTarget}
-                onChange={(e) => setSelectedTarget(e.target.value as TargetSegment)}
-                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"
-              >
-                {Object.entries(TARGET_SEGMENTS).map(([key, labelKey]) => (
-                  <option key={key} value={key}>
-                    {t(labelKey)}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <input
-                type="text"
-                value={userId}
-                onChange={(e) => setUserId(e.target.value)}
-                placeholder={t('admin.promoOffers.send.userIdPlaceholder')}
-                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"
-              />
-            )}
-          </div>
-
-          {/* Preview */}
-          {selectedTemplate && (
-            <div className="rounded-lg bg-dark-700/50 p-4">
-              <h4 className="mb-2 text-sm font-medium text-dark-300">
-                {t('admin.promoOffers.send.preview')}
-              </h4>
-              <div className="whitespace-pre-wrap text-sm text-dark-200">
-                {selectedTemplate.message_text}
-              </div>
-              <div className="mt-3">
-                <span className="inline-block rounded-lg bg-accent-500 px-3 py-1.5 text-sm text-white">
-                  {selectedTemplate.button_text}
-                </span>
-              </div>
-            </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('common.cancel')}
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={!isValid() || isLoading}
-            className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <SendIcon />
-            {isLoading
-              ? t('admin.promoOffers.send.sending')
-              : t('admin.promoOffers.send.sendButton')}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Result Modal
-interface ResultModalProps {
-  title: string;
-  message: string;
-  isSuccess: boolean;
-  onClose: () => void;
-}
-
-function ResultModal({ title, message, isSuccess, onClose }: ResultModalProps) {
-  const { t } = useTranslation();
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="w-full max-w-sm rounded-xl bg-dark-800 p-6 text-center">
-        <div
-          className={`mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full ${
-            isSuccess ? 'bg-success-500/20' : 'bg-error-500/20'
-          }`}
-        >
-          {isSuccess ? (
-            <svg
-              className="h-8 w-8 text-success-400"
-              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>
-          ) : (
-            <svg
-              className="h-8 w-8 text-error-400"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          )}
-        </div>
-        <h3 className="mb-2 text-lg font-semibold text-dark-100">{title}</h3>
-        <p className="mb-6 text-dark-400">{message}</p>
-        <button
-          onClick={onClose}
-          className="rounded-lg bg-accent-500 px-6 py-2 text-white transition-colors hover:bg-accent-600"
-        >
-          {t('common.close')}
-        </button>
-      </div>
-    </div>
-  );
-}
-
 export default function AdminPromoOffers() {
   const { t } = useTranslation();
-  const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
-  const [activeTab, setActiveTab] = useState<'templates' | 'send' | 'logs'>('templates');
+  const [activeTab, setActiveTab] = useState<'templates' | 'logs'>('templates');
-  const [editingTemplate, setEditingTemplate] = useState<PromoOfferTemplate | null>(null);
-  const [showSendModal, setShowSendModal] = useState(false);
-  const [resultModal, setResultModal] = useState<{
-    title: string;
-    message: string;
-    isSuccess: boolean;
-  } | null>(null);
 
   // Queries
   const { data: templatesData, isLoading: templatesLoading } = useQuery({
@@ -600,85 +108,13 @@ export default function AdminPromoOffers() {
     enabled: activeTab === 'logs',
   });
 
-  // Mutations
-  const updateTemplateMutation = useMutation({
-    mutationFn: ({ id, data }: { id: number; data: PromoOfferTemplateUpdateRequest }) =>
-      promoOffersApi.updateTemplate(id, data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-promo-templates'] });
-      setEditingTemplate(null);
-    },
-  });
-
-  const broadcastMutation = useMutation({
-    mutationFn: promoOffersApi.broadcastOffer,
-    onSuccess: (result) => {
-      queryClient.invalidateQueries({ queryKey: ['admin-promo-logs'] });
-      setShowSendModal(false);
-
-      let message = t('admin.promoOffers.result.offersCreated', { count: result.created_offers });
-      if (result.notifications_sent > 0 || result.notifications_failed > 0) {
-        message +=
-          '\n' +
-          t('admin.promoOffers.result.notificationsSent', { count: result.notifications_sent });
-        if (result.notifications_failed > 0) {
-          message +=
-            ' ' +
-            t('admin.promoOffers.result.notificationsFailed', {
-              count: result.notifications_failed,
-            });
-        }
-      }
-
-      setResultModal({
-        title: t('admin.promoOffers.result.sentTitle'),
-        message,
-        isSuccess: true,
-      });
-    },
-    onError: (error: unknown) => {
-      const axiosErr = error as { response?: { data?: { detail?: string } } };
-      setResultModal({
-        title: t('common.error'),
-        message: axiosErr.response?.data?.detail || t('admin.promoOffers.result.sendError'),
-        isSuccess: false,
-      });
-    },
-  });
-
-  const handleSendOffer = (templateId: number, target: string | null, userId: number | null) => {
-    const template = templatesData?.items.find((t) => t.id === templateId);
-    if (!template) return;
-
-    const data: PromoOfferBroadcastRequest = {
-      notification_type: template.offer_type,
-      valid_hours: template.valid_hours,
-      discount_percent: template.discount_percent,
-      effect_type: template.offer_type === 'test_access' ? 'test_access' : 'percent_discount',
-      extra_data: {
-        template_id: template.id,
-        active_discount_hours: template.active_discount_hours,
-        test_duration_hours: template.test_duration_hours,
-        test_squad_uuids: template.test_squad_uuids,
-      },
-      // Send Telegram notification with template text
-      send_notification: true,
-      message_text: template.message_text,
-      button_text: template.button_text,
-      ...(target ? { target } : {}),
-      ...(userId ? { telegram_id: userId } : {}),
-    };
-
-    broadcastMutation.mutate(data);
-  };
-
   const templates = templatesData?.items || [];
   const logs = logsData?.items || [];
 
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
@@ -687,8 +123,8 @@ export default function AdminPromoOffers() {
           </div>
         </div>
         <button
-          onClick={() => setShowSendModal(true)}
+          onClick={() => navigate('/admin/promo-offers/send')}
-          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
+          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"
         >
           <SendIcon />
           {t('admin.promoOffers.sendButton')}
@@ -748,7 +184,7 @@ export default function AdminPromoOffers() {
                       </div>
                     </div>
                     <button
-                      onClick={() => setEditingTemplate(template)}
+                      onClick={() => navigate(`/admin/promo-offers/templates/${template.id}/edit`)}
                       className="rounded-lg bg-dark-700 p-2 text-dark-300 transition-colors hover:bg-dark-600 hover:text-dark-100"
                     >
                       <EditIcon />
@@ -835,13 +271,13 @@ export default function AdminPromoOffers() {
             <div className="space-y-3">
               {logs.map((log: PromoOfferLog) => (
                 <div key={log.id} className="rounded-xl border border-dark-700 bg-dark-800 p-4">
-                  <div className="flex items-start justify-between gap-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
                     <div className="flex items-center gap-3">
-                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-dark-700">
+                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-dark-700">
                         <UserIcon />
                       </div>
-                      <div>
+                      <div className="min-w-0">
-                        <div className="mb-1 flex items-center gap-2">
+                        <div className="mb-1 flex flex-wrap items-center gap-2">
                           <span className="font-medium text-dark-100">
                             {log.user?.full_name || log.user?.username || `User #${log.user_id}`}
                           </span>
@@ -859,7 +295,7 @@ export default function AdminPromoOffers() {
                         </div>
                       </div>
                     </div>
-                    <div className="flex items-center gap-1 text-xs text-dark-500">
+                    <div className="pl-13 flex items-center gap-1 text-xs text-dark-500 sm:pl-0">
                       <ClockIcon />
                       {formatDateTime(log.created_at)}
                     </div>
@@ -870,36 +306,6 @@ export default function AdminPromoOffers() {
           )}
         </>
       )}
-
-      {/* Template Edit Modal */}
-      {editingTemplate && (
-        <TemplateEditModal
-          template={editingTemplate}
-          onSave={(data) => updateTemplateMutation.mutate({ id: editingTemplate.id, data })}
-          onClose={() => setEditingTemplate(null)}
-          isLoading={updateTemplateMutation.isPending}
-        />
-      )}
-
-      {/* Send Offer Modal */}
-      {showSendModal && (
-        <SendOfferModal
-          templates={templates}
-          onSend={handleSendOffer}
-          onClose={() => setShowSendModal(false)}
-          isLoading={broadcastMutation.isPending}
-        />
-      )}
-
-      {/* Result Modal */}
-      {resultModal && (
-        <ResultModal
-          title={resultModal.title}
-          message={resultModal.message}
-          isSuccess={resultModal.isSuccess}
-          onClose={() => setResultModal(null)}
-        />
-      )}
     </div>
   );
 }