Add files via upload

src/pages/AdminTariffs.tsx

@@ -0,0 +1,893 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import {
+  tariffsApi,
+  TariffListItem,
+  TariffDetail,
+  TariffCreateRequest,
+  TariffUpdateRequest,
+  PeriodPrice,
+  ServerInfo,
+  ServerTrafficLimit
+} from '../api/tariffs'
+
+// Icons
+const TariffIcon = () => (
+  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
+  </svg>
+)
+
+const PlusIcon = () => (
+  <svg className="w-5 h-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="w-4 h-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="w-4 h-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="w-4 h-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="w-4 h-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 InfinityIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+  </svg>
+)
+
+// Default period options
+const DEFAULT_PERIODS = [7, 14, 30, 90, 180, 365]
+
+interface TariffModalProps {
+  tariff?: TariffDetail | null
+  servers: ServerInfo[]
+  onSave: (data: TariffCreateRequest | TariffUpdateRequest) => void
+  onClose: () => void
+  isLoading?: boolean
+}
+
+function TariffModal({ tariff, servers, onSave, onClose, isLoading }: TariffModalProps) {
+  const { t } = useTranslation()
+  const isEdit = !!tariff
+
+  const [name, setName] = useState(tariff?.name || '')
+  const [description, setDescription] = useState(tariff?.description || '')
+  const [trafficLimitGb, setTrafficLimitGb] = useState(tariff?.traffic_limit_gb || 0)
+  const [deviceLimit, setDeviceLimit] = useState(tariff?.device_limit || 1)
+  const [devicePriceKopeks, setDevicePriceKopeks] = useState(tariff?.device_price_kopeks || 0)
+  const [tierLevel, setTierLevel] = useState(tariff?.tier_level || 1)
+  const [periodPrices, setPeriodPrices] = useState<PeriodPrice[]>(
+    tariff?.period_prices || DEFAULT_PERIODS.map(d => ({ days: d, price_kopeks: 0 }))
+  )
+  const [selectedSquads, setSelectedSquads] = useState<string[]>(tariff?.allowed_squads || [])
+  const [serverTrafficLimits, setServerTrafficLimits] = useState<Record<string, ServerTrafficLimit>>(
+    tariff?.server_traffic_limits || {}
+  )
+  // Произвольное количество дней
+  const [customDaysEnabled, setCustomDaysEnabled] = useState(tariff?.custom_days_enabled || false)
+  const [pricePerDayKopeks, setPricePerDayKopeks] = useState(tariff?.price_per_day_kopeks || 0)
+  const [minDays, setMinDays] = useState(tariff?.min_days || 1)
+  const [maxDays, setMaxDays] = useState(tariff?.max_days || 365)
+  // Произвольный трафик
+  const [customTrafficEnabled, setCustomTrafficEnabled] = useState(tariff?.custom_traffic_enabled || false)
+  const [trafficPricePerGbKopeks, setTrafficPricePerGbKopeks] = useState(tariff?.traffic_price_per_gb_kopeks || 0)
+  const [minTrafficGb, setMinTrafficGb] = useState(tariff?.min_traffic_gb || 1)
+  const [maxTrafficGb, setMaxTrafficGb] = useState(tariff?.max_traffic_gb || 1000)
+  // Докупка трафика
+  const [trafficTopupEnabled, setTrafficTopupEnabled] = useState(tariff?.traffic_topup_enabled || false)
+  const [maxTopupTrafficGb, setMaxTopupTrafficGb] = useState(tariff?.max_topup_traffic_gb || 0)
+  const [trafficTopupPackages, setTrafficTopupPackages] = useState<Record<string, number>>(
+    tariff?.traffic_topup_packages || {}
+  )
+  // Дневной тариф
+  const [isDaily, setIsDaily] = useState(tariff?.is_daily || false)
+  const [dailyPriceKopeks, setDailyPriceKopeks] = useState(tariff?.daily_price_kopeks || 0)
+  const [activeTab, setActiveTab] = useState<'basic' | 'prices' | 'servers' | 'custom'>('basic')
+
+  const handleSubmit = () => {
+    // Фильтруем лимиты только для выбранных серверов и только если они заданы (> 0)
+    const filteredLimits: Record<string, ServerTrafficLimit> = {}
+    for (const uuid of selectedSquads) {
+      if (serverTrafficLimits[uuid] && serverTrafficLimits[uuid].traffic_limit_gb > 0) {
+        filteredLimits[uuid] = serverTrafficLimits[uuid]
+      }
+    }
+
+    const data: TariffCreateRequest | TariffUpdateRequest = {
+      name,
+      description: description || undefined,
+      traffic_limit_gb: trafficLimitGb,
+      device_limit: deviceLimit,
+      device_price_kopeks: devicePriceKopeks > 0 ? devicePriceKopeks : undefined,
+      tier_level: tierLevel,
+      period_prices: periodPrices.filter(p => p.price_kopeks > 0),
+      allowed_squads: selectedSquads,
+      server_traffic_limits: Object.keys(filteredLimits).length > 0 ? filteredLimits : {},
+      // Произвольное количество дней
+      custom_days_enabled: customDaysEnabled,
+      price_per_day_kopeks: pricePerDayKopeks,
+      min_days: minDays,
+      max_days: maxDays,
+      // Произвольный трафик
+      custom_traffic_enabled: customTrafficEnabled,
+      traffic_price_per_gb_kopeks: trafficPricePerGbKopeks,
+      min_traffic_gb: minTrafficGb,
+      max_traffic_gb: maxTrafficGb,
+      // Докупка трафика
+      traffic_topup_enabled: trafficTopupEnabled,
+      traffic_topup_packages: trafficTopupPackages,
+      max_topup_traffic_gb: maxTopupTrafficGb,
+      // Дневной тариф
+      is_daily: isDaily,
+      daily_price_kopeks: dailyPriceKopeks,
+    }
+    onSave(data)
+  }
+
+  const updateServerTrafficLimit = (uuid: string, limitGb: number) => {
+    setServerTrafficLimits(prev => ({
+      ...prev,
+      [uuid]: { traffic_limit_gb: limitGb }
+    }))
+  }
+
+  const toggleServer = (uuid: string) => {
+    setSelectedSquads(prev =>
+      prev.includes(uuid)
+        ? prev.filter(s => s !== uuid)
+        : [...prev, uuid]
+    )
+  }
+
+  const updatePeriodPrice = (days: number, priceKopeks: number) => {
+    setPeriodPrices(prev => {
+      const existing = prev.find(p => p.days === days)
+      if (existing) {
+        return prev.map(p => p.days === days ? { ...p, price_kopeks: priceKopeks } : p)
+      }
+      return [...prev, { days, price_kopeks: priceKopeks }]
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+      <div className="bg-dark-800 rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-dark-700">
+          <h2 className="text-lg font-semibold text-dark-100">
+            {isEdit ? t('admin.tariffs.edit') : t('admin.tariffs.create')}
+          </h2>
+          <button onClick={onClose} className="p-1 hover:bg-dark-700 rounded-lg transition-colors">
+            <XIcon />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-dark-700">
+          {(['basic', 'prices', 'servers', 'custom'] as const).map(tab => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 text-sm font-medium transition-colors ${
+                activeTab === tab
+                  ? 'text-accent-400 border-b-2 border-accent-400'
+                  : 'text-dark-400 hover:text-dark-200'
+              }`}
+            >
+              {tab === 'basic' && t('admin.tariffs.tabs.basic')}
+              {tab === 'prices' && t('admin.tariffs.tabs.prices')}
+              {tab === 'servers' && t('admin.tariffs.tabs.servers')}
+              {tab === 'custom' && 'Гибкие опции'}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {activeTab === 'basic' && (
+            <div className="space-y-4">
+              {/* Name */}
+              <div>
+                <label className="block text-sm text-dark-300 mb-1">{t('admin.tariffs.name')}</label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={e => setName(e.target.value)}
+                  className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                  placeholder={t('admin.tariffs.namePlaceholder')}
+                />
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="block text-sm text-dark-300 mb-1">{t('admin.tariffs.description')}</label>
+                <textarea
+                  value={description}
+                  onChange={e => setDescription(e.target.value)}
+                  className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500 resize-none"
+                  rows={3}
+                  placeholder={t('admin.tariffs.descriptionPlaceholder')}
+                />
+              </div>
+
+              {/* Traffic Limit */}
+              <div>
+                <label className="block text-sm text-dark-300 mb-1">{t('admin.tariffs.trafficLimit')}</label>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="number"
+                    value={trafficLimitGb}
+                    onChange={e => setTrafficLimitGb(Math.max(0, parseInt(e.target.value) || 0))}
+                    className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                    min={0}
+                  />
+                  <span className="text-dark-400">GB</span>
+                  {trafficLimitGb === 0 && (
+                    <span className="flex items-center gap-1 text-sm text-success-500">
+                      <InfinityIcon />
+                      {t('admin.tariffs.unlimited')}
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-dark-500 mt-1">{t('admin.tariffs.trafficHint')}</p>
+              </div>
+
+              {/* Device Limit */}
+              <div>
+                <label className="block text-sm text-dark-300 mb-1">{t('admin.tariffs.deviceLimit')}</label>
+                <input
+                  type="number"
+                  value={deviceLimit}
+                  onChange={e => setDeviceLimit(Math.max(1, parseInt(e.target.value) || 1))}
+                  className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                  min={1}
+                />
+              </div>
+
+              {/* Tier Level */}
+              <div>
+                <label className="block text-sm text-dark-300 mb-1">{t('admin.tariffs.tierLevel')}</label>
+                <input
+                  type="number"
+                  value={tierLevel}
+                  onChange={e => setTierLevel(Math.min(10, Math.max(1, parseInt(e.target.value) || 1)))}
+                  className="w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                  min={1}
+                  max={10}
+                />
+                <p className="text-xs text-dark-500 mt-1">{t('admin.tariffs.tierHint')}</p>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'prices' && (
+            <div className="space-y-3">
+              <p className="text-sm text-dark-400 mb-4">{t('admin.tariffs.pricesHint')}</p>
+              {DEFAULT_PERIODS.map(days => {
+                const price = periodPrices.find(p => p.days === days)?.price_kopeks || 0
+                const isEnabled = price > 0
+                return (
+                  <div
+                    key={days}
+                    className={`flex items-center gap-3 p-3 rounded-lg transition-colors ${
+                      isEnabled
+                        ? 'bg-dark-700/50'
+                        : 'bg-dark-800/30 opacity-60'
+                    }`}
+                  >
+                    {/* Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isEnabled) {
+                          updatePeriodPrice(days, 0)
+                        } else {
+                          updatePeriodPrice(days, 10000) // Default 100₽
+                        }
+                      }}
+                      className={`w-10 h-6 rounded-full transition-colors relative ${
+                        isEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                      }`}
+                    >
+                      <span
+                        className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                          isEnabled ? 'left-5' : 'left-1'
+                        }`}
+                      />
+                    </button>
+                    <span className="w-20 text-dark-300">{days} {t('admin.tariffs.days')}</span>
+                    <input
+                      type="number"
+                      value={price / 100}
+                      onChange={e => updatePeriodPrice(days, Math.max(0, parseFloat(e.target.value) || 0) * 100)}
+                      disabled={!isEnabled}
+                      className={`w-32 px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500 ${
+                        !isEnabled ? 'opacity-50 cursor-not-allowed' : ''
+                      }`}
+                      min={0}
+                      step={1}
+                    />
+                    <span className="text-dark-400">₽</span>
+                    {!isEnabled && (
+                      <span className="text-xs text-dark-500">{t('admin.tariffs.periodDisabled')}</span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {activeTab === 'servers' && (
+            <div className="space-y-2">
+              <p className="text-sm text-dark-400 mb-4">{t('admin.tariffs.serversHint')}</p>
+              {servers.length === 0 ? (
+                <p className="text-dark-500 text-center py-4">{t('admin.tariffs.noServers')}</p>
+              ) : (
+                servers.map(server => {
+                  const isSelected = selectedSquads.includes(server.squad_uuid)
+                  const serverLimit = serverTrafficLimits[server.squad_uuid]?.traffic_limit_gb || 0
+                  return (
+                    <div
+                      key={server.id}
+                      className={`p-3 rounded-lg transition-colors ${
+                        isSelected
+                          ? 'bg-accent-500/20 border border-accent-500/50'
+                          : 'bg-dark-700 hover:bg-dark-600 border border-transparent'
+                      }`}
+                    >
+                      <div
+                        onClick={() => toggleServer(server.squad_uuid)}
+                        className="flex items-center gap-3 cursor-pointer"
+                      >
+                        <div className={`w-5 h-5 rounded flex items-center justify-center ${
+                          isSelected
+                            ? 'bg-accent-500 text-white'
+                            : 'bg-dark-600'
+                        }`}>
+                          {isSelected && <CheckIcon />}
+                        </div>
+                        <span className="text-dark-200 flex-1">{server.display_name}</span>
+                        {server.country_code && (
+                          <span className="text-xs text-dark-500">{server.country_code}</span>
+                        )}
+                      </div>
+                      {/* Лимит трафика для сервера */}
+                      {isSelected && (
+                        <div className="mt-2 ml-8 flex items-center gap-2">
+                          <span className="text-xs text-dark-400">{t('admin.tariffs.serverTrafficLimit')}:</span>
+                          <input
+                            type="number"
+                            value={serverLimit}
+                            onClick={e => e.stopPropagation()}
+                            onChange={e => {
+                              e.stopPropagation()
+                              updateServerTrafficLimit(server.squad_uuid, Math.max(0, parseInt(e.target.value) || 0))
+                            }}
+                            className="w-20 px-2 py-1 bg-dark-600 border border-dark-500 rounded text-sm text-dark-100 focus:outline-none focus:border-accent-500"
+                            min={0}
+                            placeholder="0"
+                          />
+                          <span className="text-xs text-dark-400">GB</span>
+                          {serverLimit === 0 && (
+                            <span className="text-xs text-dark-500">({t('admin.tariffs.useDefault')})</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )
+                })
+              )}
+            </div>
+          )}
+
+          {activeTab === 'custom' && (
+            <div className="space-y-6">
+              {/* Дневной тариф */}
+              <div className="p-4 bg-dark-700/50 rounded-lg border border-amber-500/30">
+                <div className="flex items-center justify-between mb-3">
+                  <div>
+                    <h4 className="text-sm font-medium text-amber-400">🌙 Дневной тариф</h4>
+                    <p className="text-xs text-dark-500 mt-1">Ежедневное списание с баланса. Можно ставить на паузу.</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setIsDaily(!isDaily)}
+                    className={`w-10 h-6 rounded-full transition-colors relative ${
+                      isDaily ? 'bg-amber-500' : 'bg-dark-600'
+                    }`}
+                  >
+                    <span
+                      className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                        isDaily ? 'left-5' : 'left-1'
+                      }`}
+                    />
+                  </button>
+                </div>
+                {isDaily && (
+                  <div className="flex items-center gap-3">
+                    <span className="text-sm text-dark-400 w-32">Цена за день:</span>
+                    <input
+                      type="number"
+                      value={dailyPriceKopeks / 100}
+                      onChange={e => setDailyPriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)}
+                      className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-amber-500"
+                      min={0}
+                      step={0.1}
+                    />
+                    <span className="text-dark-400">₽/день</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Цена за доп. устройство */}
+              <div className="p-4 bg-dark-700/50 rounded-lg">
+                <h4 className="text-sm font-medium text-dark-200 mb-3">Докупка устройств</h4>
+                <div className="flex items-center gap-3">
+                  <span className="text-sm text-dark-400">Цена за устройство (30 дней):</span>
+                  <input
+                    type="number"
+                    value={devicePriceKopeks / 100}
+                    onChange={e => setDevicePriceKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)}
+                    className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                    min={0}
+                    step={1}
+                  />
+                  <span className="text-dark-400">₽</span>
+                </div>
+                <p className="text-xs text-dark-500 mt-1">0 = докупка недоступна</p>
+              </div>
+
+              {/* Произвольное количество дней */}
+              <div className="p-4 bg-dark-700/50 rounded-lg">
+                <div className="flex items-center justify-between mb-3">
+                  <h4 className="text-sm font-medium text-dark-200">Произвольное кол-во дней</h4>
+                  <button
+                    type="button"
+                    onClick={() => setCustomDaysEnabled(!customDaysEnabled)}
+                    className={`w-10 h-6 rounded-full transition-colors relative ${
+                      customDaysEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                    }`}
+                  >
+                    <span
+                      className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                        customDaysEnabled ? 'left-5' : 'left-1'
+                      }`}
+                    />
+                  </button>
+                </div>
+                {customDaysEnabled && (
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Цена за день:</span>
+                      <input
+                        type="number"
+                        value={pricePerDayKopeks / 100}
+                        onChange={e => setPricePerDayKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={0}
+                        step={0.1}
+                      />
+                      <span className="text-dark-400">₽</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Мин. дней:</span>
+                      <input
+                        type="number"
+                        value={minDays}
+                        onChange={e => setMinDays(Math.max(1, parseInt(e.target.value) || 1))}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={1}
+                      />
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Макс. дней:</span>
+                      <input
+                        type="number"
+                        value={maxDays}
+                        onChange={e => setMaxDays(Math.max(1, parseInt(e.target.value) || 365))}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={1}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Произвольный трафик */}
+              <div className="p-4 bg-dark-700/50 rounded-lg">
+                <div className="flex items-center justify-between mb-3">
+                  <h4 className="text-sm font-medium text-dark-200">Произвольный трафик при покупке</h4>
+                  <button
+                    type="button"
+                    onClick={() => setCustomTrafficEnabled(!customTrafficEnabled)}
+                    className={`w-10 h-6 rounded-full transition-colors relative ${
+                      customTrafficEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                    }`}
+                  >
+                    <span
+                      className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                        customTrafficEnabled ? 'left-5' : 'left-1'
+                      }`}
+                    />
+                  </button>
+                </div>
+                {customTrafficEnabled && (
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Цена за 1 ГБ:</span>
+                      <input
+                        type="number"
+                        value={trafficPricePerGbKopeks / 100}
+                        onChange={e => setTrafficPricePerGbKopeks(Math.max(0, parseFloat(e.target.value) || 0) * 100)}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={0}
+                        step={0.1}
+                      />
+                      <span className="text-dark-400">₽</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Мин. ГБ:</span>
+                      <input
+                        type="number"
+                        value={minTrafficGb}
+                        onChange={e => setMinTrafficGb(Math.max(1, parseInt(e.target.value) || 1))}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={1}
+                      />
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Макс. ГБ:</span>
+                      <input
+                        type="number"
+                        value={maxTrafficGb}
+                        onChange={e => setMaxTrafficGb(Math.max(1, parseInt(e.target.value) || 1000))}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={1}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Докупка трафика */}
+              <div className="p-4 bg-dark-700/50 rounded-lg">
+                <div className="flex items-center justify-between mb-3">
+                  <h4 className="text-sm font-medium text-dark-200">Докупка трафика (после покупки)</h4>
+                  <button
+                    type="button"
+                    onClick={() => setTrafficTopupEnabled(!trafficTopupEnabled)}
+                    className={`w-10 h-6 rounded-full transition-colors relative ${
+                      trafficTopupEnabled ? 'bg-accent-500' : 'bg-dark-600'
+                    }`}
+                  >
+                    <span
+                      className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                        trafficTopupEnabled ? 'left-5' : 'left-1'
+                      }`}
+                    />
+                  </button>
+                </div>
+                {trafficTopupEnabled && (
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm text-dark-400 w-32">Макс. лимит:</span>
+                      <input
+                        type="number"
+                        value={maxTopupTrafficGb}
+                        onChange={e => setMaxTopupTrafficGb(Math.max(0, parseInt(e.target.value) || 0))}
+                        className="w-24 px-3 py-2 bg-dark-600 border border-dark-500 rounded-lg text-dark-100 focus:outline-none focus:border-accent-500"
+                        min={0}
+                      />
+                      <span className="text-dark-400">ГБ</span>
+                      <span className="text-xs text-dark-500">(0 = без ограничений)</span>
+                    </div>
+                    <div className="mt-3">
+                      <span className="text-sm text-dark-400">Пакеты трафика (ГБ: цена ₽):</span>
+                      <div className="mt-2 grid grid-cols-2 gap-2">
+                        {[5, 10, 20, 50].map(gb => (
+                          <div key={gb} className="flex items-center gap-2">
+                            <span className="text-sm text-dark-300 w-12">{gb} ГБ:</span>
+                            <input
+                              type="number"
+                              value={(trafficTopupPackages[String(gb)] || 0) / 100}
+                              onChange={e => {
+                                const price = Math.max(0, parseFloat(e.target.value) || 0) * 100
+                                setTrafficTopupPackages(prev => ({
+                                  ...prev,
+                                  [String(gb)]: price
+                                }))
+                              }}
+                              className="w-20 px-2 py-1 bg-dark-600 border border-dark-500 rounded text-sm text-dark-100 focus:outline-none focus:border-accent-500"
+                              min={0}
+                              step={1}
+                            />
+                            <span className="text-xs text-dark-400">₽</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-3 p-4 border-t border-dark-700">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-dark-300 hover:text-dark-100 transition-colors"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!name || isLoading}
+            className="px-4 py-2 bg-accent-500 text-white rounded-lg hover:bg-accent-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? t('common.loading') : t('common.save')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function AdminTariffs() {
+  const { t } = useTranslation()
+  const queryClient = useQueryClient()
+
+  const [showModal, setShowModal] = useState(false)
+  const [editingTariff, setEditingTariff] = useState<TariffDetail | null>(null)
+  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null)
+
+  // Queries
+  const { data: tariffsData, isLoading } = useQuery({
+    queryKey: ['admin-tariffs'],
+    queryFn: () => tariffsApi.getTariffs(true),
+  })
+
+  const { data: servers = [] } = useQuery({
+    queryKey: ['admin-tariffs-servers'],
+    queryFn: () => tariffsApi.getAvailableServers(),
+  })
+
+  // Mutations
+  const createMutation = useMutation({
+    mutationFn: tariffsApi.createTariff,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-tariffs'] })
+      setShowModal(false)
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: number; data: TariffUpdateRequest }) =>
+      tariffsApi.updateTariff(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-tariffs'] })
+      setShowModal(false)
+      setEditingTariff(null)
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: tariffsApi.deleteTariff,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-tariffs'] })
+      setDeleteConfirm(null)
+    },
+  })
+
+  const toggleMutation = useMutation({
+    mutationFn: tariffsApi.toggleTariff,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-tariffs'] })
+    },
+  })
+
+  const toggleTrialMutation = useMutation({
+    mutationFn: tariffsApi.toggleTrial,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-tariffs'] })
+    },
+  })
+
+  const handleEdit = async (tariffId: number) => {
+    try {
+      const detail = await tariffsApi.getTariff(tariffId)
+      setEditingTariff(detail)
+      setShowModal(true)
+    } catch (error) {
+      console.error('Failed to load tariff:', error)
+    }
+  }
+
+  const handleSave = (data: TariffCreateRequest | TariffUpdateRequest) => {
+    if (editingTariff) {
+      updateMutation.mutate({ id: editingTariff.id, data })
+    } else {
+      createMutation.mutate(data as TariffCreateRequest)
+    }
+  }
+
+  const tariffs = tariffsData?.tariffs || []
+
+  return (
+    <div className="animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-accent-500/20 rounded-lg">
+            <TariffIcon />
+          </div>
+          <div>
+            <h1 className="text-xl font-semibold text-dark-100">{t('admin.tariffs.title')}</h1>
+            <p className="text-sm text-dark-400">{t('admin.tariffs.subtitle')}</p>
+          </div>
+        </div>
+        <button
+          onClick={() => { setEditingTariff(null); setShowModal(true) }}
+          className="flex items-center gap-2 px-4 py-2 bg-accent-500 text-white rounded-lg hover:bg-accent-600 transition-colors"
+        >
+          <PlusIcon />
+          {t('admin.tariffs.create')}
+        </button>
+      </div>
+
+      {/* Tariffs List */}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
+        </div>
+      ) : tariffs.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-dark-400">{t('admin.tariffs.noTariffs')}</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {tariffs.map((tariff: TariffListItem) => (
+            <div
+              key={tariff.id}
+              className={`p-4 bg-dark-800 rounded-xl border transition-colors ${
+                tariff.is_active ? 'border-dark-700' : 'border-dark-700/50 opacity-60'
+              }`}
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium text-dark-100 truncate">{tariff.name}</h3>
+                    {tariff.is_trial_available && (
+                      <span className="px-2 py-0.5 text-xs bg-success-500/20 text-success-400 rounded">
+                        {t('admin.tariffs.trial')}
+                      </span>
+                    )}
+                    {!tariff.is_active && (
+                      <span className="px-2 py-0.5 text-xs bg-dark-600 text-dark-400 rounded">
+                        {t('admin.tariffs.inactive')}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-dark-400">
+                    <span>
+                      {tariff.traffic_limit_gb === 0
+                        ? t('admin.tariffs.unlimited')
+                        : `${tariff.traffic_limit_gb} GB`
+                      }
+                    </span>
+                    <span>{tariff.device_limit} {t('admin.tariffs.devices')}</span>
+                    <span>{tariff.servers_count} {t('admin.tariffs.servers')}</span>
+                    <span>{tariff.subscriptions_count} {t('admin.tariffs.subscriptions')}</span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  {/* Toggle Active */}
+                  <button
+                    onClick={() => toggleMutation.mutate(tariff.id)}
+                    className={`p-2 rounded-lg transition-colors ${
+                      tariff.is_active
+                        ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
+                        : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
+                    }`}
+                    title={tariff.is_active ? t('admin.tariffs.deactivate') : t('admin.tariffs.activate')}
+                  >
+                    {tariff.is_active ? <CheckIcon /> : <XIcon />}
+                  </button>
+
+                  {/* Toggle Trial */}
+                  <button
+                    onClick={() => toggleTrialMutation.mutate(tariff.id)}
+                    className={`p-2 rounded-lg transition-colors ${
+                      tariff.is_trial_available
+                        ? 'bg-accent-500/20 text-accent-400 hover:bg-accent-500/30'
+                        : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
+                    }`}
+                    title={t('admin.tariffs.toggleTrial')}
+                  >
+                    T
+                  </button>
+
+                  {/* Edit */}
+                  <button
+                    onClick={() => handleEdit(tariff.id)}
+                    className="p-2 bg-dark-700 text-dark-300 rounded-lg hover:bg-dark-600 hover:text-dark-100 transition-colors"
+                    title={t('admin.tariffs.edit')}
+                  >
+                    <EditIcon />
+                  </button>
+
+                  {/* Delete */}
+                  <button
+                    onClick={() => setDeleteConfirm(tariff.id)}
+                    className="p-2 bg-dark-700 text-dark-300 rounded-lg hover:bg-error-500/20 hover:text-error-400 transition-colors"
+                    title={t('admin.tariffs.delete')}
+                    disabled={tariff.subscriptions_count > 0}
+                  >
+                    <TrashIcon />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      {showModal && (
+        <TariffModal
+          tariff={editingTariff}
+          servers={servers}
+          onSave={handleSave}
+          onClose={() => { setShowModal(false); setEditingTariff(null) }}
+          isLoading={createMutation.isPending || updateMutation.isPending}
+        />
+      )}
+
+      {/* Delete Confirmation */}
+      {deleteConfirm !== null && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
+          <div className="bg-dark-800 rounded-xl p-6 max-w-sm w-full">
+            <h3 className="text-lg font-semibold text-dark-100 mb-2">{t('admin.tariffs.confirmDelete')}</h3>
+            <p className="text-dark-400 mb-6">{t('admin.tariffs.confirmDeleteText')}</p>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => setDeleteConfirm(null)}
+                className="px-4 py-2 text-dark-300 hover:text-dark-100 transition-colors"
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                onClick={() => deleteMutation.mutate(deleteConfirm)}
+                className="px-4 py-2 bg-error-500 text-white rounded-lg hover:bg-error-600 transition-colors"
+              >
+                {t('common.delete')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}