Merge pull request #319 from BEDOLAGA-DEV/dev

Dev
2026-07-28 17:43:47 +00:00 · 2026-03-18 05:57:41 +03:00
parent 4eca63b1c1 9d2490f635
commit 52162c6735
15 changed files with 620 additions and 126 deletions
--- a/src/api/adminPayments.ts
+++ b/src/api/adminPayments.ts
@@ -6,6 +6,14 @@ export interface PaymentsStats {
  by_method: Record<string, number>;
 }

+export interface SearchStats {
+  total: number;
+  pending: number;
+  paid: number;
+  cancelled: number;
+  by_method: Record<string, number>;
+}
+
 export const adminPaymentsApi = {
  // Get all pending payments (admin)
  getPendingPayments: async (params?: {
@@ -28,6 +36,39 @@ export const adminPaymentsApi = {
    return response.data;
  },

+  // Search payments with filters
+  searchPayments: async (params?: {
+    search?: string;
+    status_filter?: string;
+    method_filter?: string;
+    period?: string;
+    date_from?: string;
+    date_to?: string;
+    page?: number;
+    per_page?: number;
+  }): Promise<PaginatedResponse<PendingPayment>> => {
+    const response = await apiClient.get<PaginatedResponse<PendingPayment>>(
+      '/cabinet/admin/payments/search',
+      { params },
+    );
+    return response.data;
+  },
+
+  // Get search statistics with filters
+  getSearchStats: async (params?: {
+    search?: string;
+    status_filter?: string;
+    method_filter?: string;
+    period?: string;
+    date_from?: string;
+    date_to?: string;
+  }): Promise<SearchStats> => {
+    const response = await apiClient.get<SearchStats>('/cabinet/admin/payments/search/stats', {
+      params,
+    });
+    return response.data;
+  },
+
  // Get specific payment details
  getPayment: async (method: string, paymentId: number): Promise<PendingPayment> => {
    const response = await apiClient.get<PendingPayment>(
--- a/src/components/PaymentMethodIcon.tsx
+++ b/src/components/PaymentMethodIcon.tsx
@@ -215,6 +215,26 @@ export default function PaymentMethodIcon({
      );
    }

+    case 'severpay': {
+      const severpayGradId = `${uid}-severpay`;
+      return (
+        <svg className={className} viewBox="0 0 40 40">
+          <defs>
+            <linearGradient id={severpayGradId} x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stopColor="#1e40af" />
+              <stop offset="100%" stopColor="#1d4ed8" />
+            </linearGradient>
+          </defs>
+          <circle cx="20" cy="20" r="20" fill={`url(#${severpayGradId})`} />
+          <g fill="#fff" fontFamily="Arial,sans-serif" fontWeight="700">
+            <text x="20" y="26" textAnchor="middle" fontSize="14">
+              SP
+            </text>
+          </g>
+        </svg>
+      );
+    }
+
    default:
      return (
        <svg className={className} viewBox="0 0 40 40">
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -10,6 +10,7 @@ import { useTrafficZone } from '../../hooks/useTrafficZone';
 import { formatTraffic } from '../../utils/formatTraffic';
 import { getGlassColors } from '../../utils/glassTheme';
 import { HoverBorderGradient } from '../ui/hover-border-gradient';
+import { useHaptic } from '../../platform';
 import type { Subscription } from '../../types';

 interface SubscriptionCardActiveProps {
@@ -58,6 +59,10 @@ export default function SubscriptionCardActive({
  const isUnlimited = trafficData?.is_unlimited ?? subscription.traffic_limit_gb === 0;
  const zone = useTrafficZone(usedPercent);
  const animatedPercent = useAnimatedNumber(usedPercent);
+  const haptic = useHaptic();
+
+  const isAtDeviceLimit =
+    subscription.device_limit > 0 && connectedDevices >= subscription.device_limit;

  const formattedDate = new Date(subscription.end_date).toLocaleDateString();
  const daysLeft = subscription.days_left;
@@ -203,8 +208,15 @@ export default function SubscriptionCardActive({
        <HoverBorderGradient
          as="button"
          accentColor={zone.mainHex}
-          onClick={() => navigate('/connection')}
-          className="mb-2.5 flex w-full items-center gap-3.5 rounded-[14px] p-3.5 text-left transition-shadow duration-300"
+          disabled={isAtDeviceLimit}
+          onClick={() => {
+            if (isAtDeviceLimit) {
+              haptic.notification('error');
+              return;
+            }
+            navigate('/connection');
+          }}
+          className={`mb-2.5 flex w-full items-center gap-3.5 rounded-[14px] p-3.5 text-left transition-shadow duration-300${isAtDeviceLimit ? 'cursor-not-allowed opacity-50' : ''}`}
          data-onboarding="connect-devices"
          style={{ fontFamily: 'inherit' }}
        >
@@ -243,6 +255,14 @@ export default function SubscriptionCardActive({
                    max: subscription.device_limit,
                  })}
            </div>
+            {isAtDeviceLimit && (
+              <div
+                className="mt-1 text-[10px] font-medium"
+                style={{ color: 'rgb(var(--color-warning-400))' }}
+              >
+                {t('dashboard.deviceLimitReached')}
+              </div>
+            )}
          </div>

          {/* Device indicator */}
--- a/src/components/dashboard/TrafficProgressBar.tsx
+++ b/src/components/dashboard/TrafficProgressBar.tsx
@@ -16,7 +16,7 @@ interface TrafficProgressBarProps {
 const THRESHOLDS = [50, 75, 90];

 export default function TrafficProgressBar({
-  usedGb,
+  usedGb: _usedGb,
  limitGb,
  percent,
  isUnlimited,
@@ -83,29 +83,6 @@ export default function TrafficProgressBar({
            aria-hidden="true"
          />
        </div>
-
-        {/* Below bar: label + usage */}
-        {!compact && (
-          <div className="mt-2 flex items-center justify-between px-0.5">
-            <span
-              className="flex items-center gap-1.5 text-[11px] font-semibold"
-              style={{ color: zone.mainVar }}
-            >
-              <span
-                className="inline-block h-1.5 w-1.5 animate-unlimited-pulse rounded-full"
-                style={{
-                  background: zone.mainVar,
-                  boxShadow: `0 0 8px ${zone.mainVar}`,
-                }}
-                aria-hidden="true"
-              />
-              {t('dashboard.unlimitedTraffic')}
-            </span>
-            <span className="font-mono text-[11px] text-dark-50/30">
-              {t('dashboard.usedTraffic', { amount: formatTraffic(usedGb) })}
-            </span>
-          </div>
-        )}
      </div>
    );
  }
--- a/src/components/ui/hover-border-gradient.tsx
+++ b/src/components/ui/hover-border-gradient.tsx
@@ -8,6 +8,8 @@ interface HoverBorderGradientProps extends React.HTMLAttributes<HTMLElement> {
  accentColor?: string;
  /** Full rotation duration in seconds. Default: 3 */
  duration?: number;
+  /** Disables the element (applies to interactive elements like buttons) */
+  disabled?: boolean;
 }

 /**
--- a/src/constants/paymentMethods.ts
+++ b/src/constants/paymentMethods.ts
@@ -14,4 +14,5 @@ export const METHOD_LABELS: Record<string, string> = {
  cloudpayments: 'CloudPayments',
  kassa_ai: 'Kassa AI',
  riopay: 'RioPay',
+  severpay: 'SeverPay',
 };
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -254,6 +254,7 @@
    "daysRemaining": "Days left",
    "usageLast14Days": "Usage last 14 days",
    "maxUsage": "max {{amount}}",
+    "deviceLimitReached": "Disconnect devices to add new ones",
    "expired": {
      "title": "Subscription Expired",
      "trialTitle": "Trial Expired",
@@ -634,6 +635,15 @@
      },
      "tribute": {
        "description": "Pay with bank card via Tribute"
+      },
+      "severpay": {
+        "description": "Pay via SeverPay"
+      },
+      "riopay": {
+        "description": "Pay via RioPay"
+      },
+      "kassa_ai": {
+        "description": "Pay via Kassa AI"
      }
    },
    "transactionHistory": "Transaction History",
@@ -927,6 +937,7 @@
    "days_other": "{{count}} days",
    "subscriptionDays": "Subscription days",
    "day": "Day",
+    "spinCost": "Spin cost",
    "spin": "SPIN!",
    "spinning": "Spinning...",
    "history": "History",
@@ -1275,18 +1286,40 @@
      "previewNotAvailable": "Preview not available"
    },
    "payments": {
-      "title": "Payment verification",
-      "description": "Pending payments in the last 24 hours",
+      "title": "Payments",
+      "description": "Search and manage payments",
+      "searchPlaceholder": "Search: invoice, TG ID, @username, email...",
+      "searchHint": "Examples: SP-78291, @username, 123456789, user@mail.ru",
+      "searchResults": "Results for: {{query}} — found {{count}}",
+      "resetSearch": "Reset",
+      "statusAll": "All",
+      "statusPending": "Pending",
+      "statusPaid": "Paid",
+      "statusCancelled": "Cancelled",
+      "period24h": "24h",
+      "period7d": "7d",
+      "period30d": "30d",
+      "periodAll": "All",
+      "periodCustom": "Range",
+      "dateFrom": "From",
+      "dateTo": "To",
+      "applyDate": "Apply",
+      "allMethods": "All methods",
+      "totalCount": "Total",
+      "pendingCount": "Pending",
+      "paidCount": "Paid",
+      "cancelledCount": "Cancelled",
      "totalPending": "Total pending",
      "filterByMethod": "Filter by method",
-      "noPayments": "No pending payments",
+      "noPayments": "No payments found",
      "paid": "Paid",
      "user": "User",
      "openLink": "Open link",
      "checkStatus": "Check status",
      "checking": "Checking...",
-      "prev": "Previous",
-      "next": "Next"
+      "prev": "Prev",
+      "next": "Next",
+      "checkError": "Status check failed"
    },
    "paymentMethods": {
      "title": "Payment Methods",
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -242,6 +242,7 @@
      "devices": "دستگاه‌ها",
      "expiredDate": "منقضی شده"
    },
+    "deviceLimitReached": "برای افزودن دستگاه جدید، دستگاه‌های فعلی را قطع کنید",
    "suspended": {
      "title": "اشتراک معلق شده",
      "resume": "از سرگیری"
@@ -487,6 +488,9 @@
      },
      "tribute": {
        "description": "پرداخت با کارت بانکی از طریق Tribute"
+      },
+      "severpay": {
+        "description": "پرداخت از طریق SeverPay"
      }
    },
    "transactionHistory": "تاریخچه تراکنش‌ها",
@@ -775,6 +779,7 @@
    "days_other": "{{count}} روز",
    "subscriptionDays": "روز اشتراک",
    "day": "روز",
+    "spinCost": "هزینه چرخش",
    "spin": "بچرخان!",
    "spinning": "در حال چرخش...",
    "history": "تاریخچه",
@@ -1321,18 +1326,40 @@
      }
    },
    "payments": {
-      "title": "تأیید پرداخت",
-      "description": "پرداخت‌های معلق در ۲۴ ساعت گذشته",
+      "title": "پرداخت‌ها",
+      "description": "جستجو و مدیریت پرداخت‌ها",
+      "searchPlaceholder": "جستجو: فاکتور، شناسه تلگرام، @نام‌کاربری، ایمیل...",
+      "searchHint": "مثال‌ها: SP-78291, @username, 123456789, user@mail.ru",
+      "searchResults": "نتایج برای: {{query}} — {{count}} یافت شد",
+      "resetSearch": "بازنشانی",
+      "statusAll": "همه",
+      "statusPending": "در انتظار",
+      "statusPaid": "پرداخت شده",
+      "statusCancelled": "لغو شده",
+      "period24h": "۲۴ساعت",
+      "period7d": "۷روز",
+      "period30d": "۳۰روز",
+      "periodAll": "همه",
+      "periodCustom": "بازه",
+      "dateFrom": "از",
+      "dateTo": "تا",
+      "applyDate": "اعمال",
+      "allMethods": "همه روش‌ها",
+      "totalCount": "کل",
+      "pendingCount": "در انتظار",
+      "paidCount": "پرداخت شده",
+      "cancelledCount": "لغو شده",
      "totalPending": "کل معلق",
      "filterByMethod": "فیلتر بر اساس روش",
+      "noPayments": "پرداختی یافت نشد",
      "paid": "پرداخت شده",
      "user": "کاربر",
      "openLink": "باز کردن لینک",
-      "checking": "در حال بررسی...",
      "checkStatus": "بررسی وضعیت",
-      "noPayments": "هیچ پرداخت معلقی نیست",
+      "checking": "در حال بررسی...",
      "prev": "قبلی",
-      "next": "بعدی"
+      "next": "بعدی",
+      "checkError": "خطا در بررسی وضعیت"
    },
    "settings": {
      "title": "تنظیمات سیستم",
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -266,6 +266,7 @@
    "daysRemaining": "Дней осталось",
    "usageLast14Days": "Расход за 14 дней",
    "maxUsage": "макс {{amount}}",
+    "deviceLimitReached": "Отключите устройства для подключения новых",
    "expired": {
      "title": "Подписка истекла",
      "trialTitle": "Пробный период истёк",
@@ -662,6 +663,15 @@
      },
      "tribute": {
        "description": "Оплата банковской картой через Tribute"
+      },
+      "severpay": {
+        "description": "Оплата через SeverPay"
+      },
+      "riopay": {
+        "description": "Оплата через RioPay"
+      },
+      "kassa_ai": {
+        "description": "Оплата через Kassa AI"
      }
    },
    "transactionHistory": "История операций",
@@ -956,6 +966,7 @@
    "days_many": "{{count}} дней",
    "subscriptionDays": "Дни подписки",
    "day": "День",
+    "spinCost": "Стоимость вращения",
    "spin": "КРУТИТЬ!",
    "spinning": "Крутится...",
    "history": "История",
@@ -1296,18 +1307,40 @@
      "previewNotAvailable": "Предпросмотр недоступен"
    },
    "payments": {
-      "title": "Проверка платежей",
-      "description": "Ожидающие платежи за последние 24 часа",
+      "title": "Платежи",
+      "description": "Поиск и управление платежами",
+      "searchPlaceholder": "Поиск: инвойс, TG ID, @username, email...",
+      "searchHint": "Примеры: SP-78291, @username, 123456789, user@mail.ru",
+      "searchResults": "Результаты по запросу: {{query}} — найдено {{count}}",
+      "resetSearch": "Сбросить",
+      "statusAll": "Все",
+      "statusPending": "В ожидании",
+      "statusPaid": "Оплачено",
+      "statusCancelled": "Отменено",
+      "period24h": "24ч",
+      "period7d": "7д",
+      "period30d": "30д",
+      "periodAll": "Все",
+      "periodCustom": "Период",
+      "dateFrom": "С",
+      "dateTo": "По",
+      "applyDate": "Применить",
+      "allMethods": "Все методы",
+      "totalCount": "Всего",
+      "pendingCount": "В ожидании",
+      "paidCount": "Оплачено",
+      "cancelledCount": "Отменено",
      "totalPending": "Всего ожидает",
      "filterByMethod": "Фильтр по методу",
-      "noPayments": "Нет ожидающих платежей",
+      "noPayments": "Платежи не найдены",
      "paid": "Оплачено",
      "user": "Пользователь",
      "openLink": "Открыть ссылку",
      "checkStatus": "Проверить статус",
      "checking": "Проверка...",
      "prev": "Назад",
-      "next": "Далее"
+      "next": "Далее",
+      "checkError": "Ошибка проверки статуса"
    },
    "paymentMethods": {
      "title": "Платёжные методы",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -242,6 +242,7 @@
      "devices": "设备",
      "expiredDate": "过期时间"
    },
+    "deviceLimitReached": "断开设备以添加新设备",
    "suspended": {
      "title": "订阅已暂停",
      "resume": "恢复"
@@ -487,6 +488,9 @@
      },
      "tribute": {
        "description": "通过Tribute银行卡支付"
+      },
+      "severpay": {
+        "description": "通过SeverPay支付"
      }
    },
    "transactionHistory": "交易记录",
@@ -775,6 +779,7 @@
    "days_other": "{{count}} 天",
    "subscriptionDays": "订阅天数",
    "day": "天",
+    "spinCost": "抽奖费用",
    "spin": "开始抽奖！",
    "spinning": "抽奖中...",
    "history": "历史",
@@ -1153,18 +1158,40 @@
      "previewNotAvailable": "预览不可用"
    },
    "payments": {
-      "title": "支付验证",
-      "description": "最近24小时内的待处理支付",
+      "title": "支付",
+      "description": "搜索和管理支付",
+      "searchPlaceholder": "搜索：发票、TG ID、@用户名、邮箱...",
+      "searchHint": "示例：SP-78291、@username、123456789、user@mail.ru",
+      "searchResults": "搜索结果：{{query}} — 找到 {{count}} 条",
+      "resetSearch": "重置",
+      "statusAll": "全部",
+      "statusPending": "待处理",
+      "statusPaid": "已支付",
+      "statusCancelled": "已取消",
+      "period24h": "24小时",
+      "period7d": "7天",
+      "period30d": "30天",
+      "periodAll": "全部",
+      "periodCustom": "范围",
+      "dateFrom": "从",
+      "dateTo": "到",
+      "applyDate": "应用",
+      "allMethods": "所有方式",
+      "totalCount": "总计",
+      "pendingCount": "待处理",
+      "paidCount": "已支付",
+      "cancelledCount": "已取消",
      "totalPending": "总待处理",
-      "filterByMethod": "按方法筛选",
+      "filterByMethod": "按方式筛选",
+      "noPayments": "未找到支付记录",
      "paid": "已支付",
      "user": "用户",
      "openLink": "打开链接",
-      "checking": "检查中...",
      "checkStatus": "检查状态",
-      "noPayments": "没有待处理的支付",
+      "checking": "检查中...",
      "prev": "上一页",
-      "next": "下一页"
+      "next": "下一页",
+      "checkError": "状态检查失败"
    },
    "wheel": {
      "title": "幸运转盘设置",
--- a/src/pages/AdminPayments.tsx
+++ b/src/pages/AdminPayments.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { adminPaymentsApi } from '../api/adminPayments';
+import { adminPaymentsApi, type SearchStats } from '../api/adminPayments';
 import { useCurrency } from '../hooks/useCurrency';
 import type { PendingPayment, PaginatedResponse } from '../types';
 import { usePlatform } from '../platform/hooks/usePlatform';
@@ -20,6 +20,83 @@ const BackIcon = () => (
  </svg>
 );

+// SearchIcon
+const SearchIcon = () => (
+  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    />
+  </svg>
+);
+
+// CalendarIcon
+const CalendarIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
+    />
+  </svg>
+);
+
+interface StatusBadgeProps {
+  status: string;
+}
+
+function StatusBadge({ status }: StatusBadgeProps) {
+  const styles: Record<string, string> = {
+    paid: 'bg-green-500/20 text-green-400',
+    pending: 'bg-amber-500/20 text-amber-400',
+    cancelled: 'bg-red-500/20 text-red-400',
+  };
+
+  const normalized = status.toLowerCase();
+  const match = Object.keys(styles).find((key) => normalized.includes(key));
+
+  return (
+    <span
+      className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${match ? styles[match] : 'bg-dark-700/50 text-dark-300'}`}
+    >
+      {status}
+    </span>
+  );
+}
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  color: 'blue' | 'amber' | 'green' | 'red';
+  isActive: boolean;
+  onClick: () => void;
+}
+
+function StatCard({ label, value, color, isActive, onClick }: StatCardProps) {
+  const colors: Record<string, string> = {
+    blue: 'border-accent-500/30 bg-accent-500/20 text-accent-400',
+    amber: 'border-amber-500/30 bg-amber-500/20 text-amber-400',
+    green: 'border-green-500/30 bg-green-500/20 text-green-400',
+    red: 'border-red-500/30 bg-red-500/20 text-red-400',
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`rounded-xl border p-4 text-left transition-all ${
+        isActive
+          ? colors[color]
+          : 'border-dark-700/50 bg-dark-800/50 text-dark-300 hover:border-dark-600'
+      }`}
+    >
+      <div className={`text-2xl font-bold ${isActive ? '' : 'text-dark-50'}`}>{value}</div>
+      <div className="text-sm opacity-80">{label}</div>
+    </button>
+  );
+}
+
 export default function AdminPayments() {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -27,44 +104,76 @@ export default function AdminPayments() {
  const { formatAmount, currencySymbol } = useCurrency();
  const { capabilities } = usePlatform();

-  const [page, setPage] = useState(1);
+  const [searchInput, setSearchInput] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [periodFilter, setPeriodFilter] = useState<string>('24h');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [showDateRange, setShowDateRange] = useState(false);
  const [methodFilter, setMethodFilter] = useState<string>('');
+  const [page, setPage] = useState(1);
  const [checkingPaymentId, setCheckingPaymentId] = useState<string | null>(null);

+  // Debounce search input (300ms)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSearchQuery(searchInput);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  // Reset page on filter changes
+  useEffect(() => {
+    setPage(1);
+  }, [statusFilter, periodFilter, methodFilter, dateFrom, dateTo]);
+
+  // Auto-refresh only when filters are at defaults and no search
+  const isDefaultFilters =
+    !searchQuery && statusFilter === 'all' && periodFilter === '24h' && !methodFilter;
+
+  // Shared query params
+  const queryParams = {
+    search: searchQuery || undefined,
+    status_filter: statusFilter,
+    method_filter: methodFilter || undefined,
+    period: periodFilter === 'custom' ? undefined : periodFilter,
+    date_from: periodFilter === 'custom' && dateFrom ? dateFrom : undefined,
+    date_to: periodFilter === 'custom' && dateTo ? dateTo : undefined,
+  };
+
  // Fetch payments
  const {
    data: payments,
    isLoading,
+    isError,
    refetch,
  } = useQuery<PaginatedResponse<PendingPayment>>({
-    queryKey: ['admin-payments', page, methodFilter],
+    queryKey: ['admin-payments-search', queryParams, page],
    queryFn: () =>
-      adminPaymentsApi.getPendingPayments({
+      adminPaymentsApi.searchPayments({
+        ...queryParams,
        page,
        per_page: 20,
-        method_filter: methodFilter || undefined,
      }),
-    refetchInterval: 30000, // Auto-refresh every 30 seconds
+    refetchInterval: isDefaultFilters ? 30000 : false,
  });

  // Fetch stats
-  const { data: stats } = useQuery({
-    queryKey: ['admin-payments-stats'],
-    queryFn: adminPaymentsApi.getStats,
-    refetchInterval: 30000,
+  const { data: stats } = useQuery<SearchStats>({
+    queryKey: ['admin-payments-search-stats', queryParams],
+    queryFn: () => adminPaymentsApi.getSearchStats(queryParams),
+    refetchInterval: isDefaultFilters ? 30000 : false,
  });

  // Check payment mutation
  const checkPaymentMutation = useMutation({
    mutationFn: ({ method, paymentId }: { method: string; paymentId: number }) =>
      adminPaymentsApi.checkPaymentStatus(method, paymentId),
-    onSuccess: async (result) => {
-      if (result.status_changed) {
-        await refetch();
-        queryClient.invalidateQueries({ queryKey: ['admin-payments-stats'] });
-      } else {
-        await refetch();
-      }
+    onSuccess: async () => {
+      await refetch();
+      queryClient.invalidateQueries({ queryKey: ['admin-payments-search-stats'] });
    },
    onSettled: () => {
      setCheckingPaymentId(null);
@@ -76,11 +185,47 @@ export default function AdminPayments() {
    checkPaymentMutation.mutate({ method: payment.method, paymentId: payment.id });
  };

-  // Get unique methods from stats for filter
+  const handleResetSearch = () => {
+    setSearchInput('');
+    setSearchQuery('');
+    setPage(1);
+  };
+
+  const handleStatusCardClick = (status: string) => {
+    setStatusFilter(statusFilter === status ? 'all' : status);
+  };
+
+  const handlePeriodChange = (period: string) => {
+    if (period === 'custom') {
+      setPeriodFilter('custom');
+      setShowDateRange(true);
+    } else {
+      setPeriodFilter(period);
+      setShowDateRange(false);
+    }
+  };
+
+  // Get unique methods from stats for filter dropdown
  const methodOptions = stats?.by_method ? Object.keys(stats.by_method) : [];

+  // Period filter options
+  const periodOptions = [
+    { value: '24h', label: t('admin.payments.period24h') },
+    { value: '7d', label: t('admin.payments.period7d') },
+    { value: '30d', label: t('admin.payments.period30d') },
+    { value: 'all', label: t('admin.payments.periodAll') },
+  ];
+
+  // Status filter options
+  const statusOptions = [
+    { value: 'all', label: t('admin.payments.statusAll') },
+    { value: 'pending', label: t('admin.payments.statusPending') },
+    { value: 'paid', label: t('admin.payments.statusPaid') },
+    { value: 'cancelled', label: t('admin.payments.statusCancelled') },
+  ];
+
  return (
-    <div className="space-y-6">
+    <div className="animate-fade-in space-y-6">
      {/* Header */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex items-center gap-3">
@@ -94,7 +239,7 @@ export default function AdminPayments() {
            </button>
          )}
          <div>
-            <h1 className="text-2xl font-bold text-dark-50">{t('admin.payments.title')}</h1>
+            <h1 className="text-xl font-semibold text-dark-100">{t('admin.payments.title')}</h1>
            <p className="text-sm text-dark-400">{t('admin.payments.description')}</p>
          </div>
        </div>
@@ -116,63 +261,178 @@ export default function AdminPayments() {
        </button>
      </div>

-      {/* Stats cards */}
-      {stats && (
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-          <div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-4">
-            <div className="text-2xl font-bold text-dark-50">{stats.total_pending}</div>
-            <div className="text-sm text-dark-400">{t('admin.payments.totalPending')}</div>
+      {/* Search bar */}
+      <div>
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-dark-500">
+            <SearchIcon />
          </div>
-          {Object.entries(stats.by_method).map(([method, count]) => (
-            <div
-              key={method}
-              className={`cursor-pointer rounded-xl border p-4 transition-all ${
-                methodFilter === method
-                  ? 'border-accent-500/50 bg-accent-500/20'
-                  : 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
-              }`}
-              onClick={() => setMethodFilter(methodFilter === method ? '' : method)}
-            >
-              <div className="text-2xl font-bold text-dark-50">{count}</div>
-              <div className="text-sm text-dark-400">{method}</div>
-            </div>
-          ))}
+          <input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder={t('admin.payments.searchPlaceholder')}
+            className="w-full rounded-xl border border-dark-700 bg-dark-800 py-3 pl-10 pr-4 text-dark-100 placeholder-dark-500 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500"
+          />
+        </div>
+        <p className="mt-1.5 text-xs text-dark-500">{t('admin.payments.searchHint')}</p>
+      </div>
+
+      {/* Search result banner */}
+      {searchQuery && (
+        <div className="flex items-center justify-between rounded-xl border border-accent-500/30 bg-accent-500/10 px-4 py-3">
+          <span className="text-sm text-accent-300">
+            {t('admin.payments.searchResults', {
+              query: searchQuery,
+              count: payments?.total ?? 0,
+            })}
+          </span>
+          <button
+            onClick={handleResetSearch}
+            className="ml-3 rounded-lg px-3 py-1 text-sm text-accent-400 transition-colors hover:bg-accent-500/20"
+          >
+            {t('admin.payments.resetSearch')}
+          </button>
        </div>
      )}

-      {/* Filter */}
-      {methodOptions.length > 0 && (
-        <div className="flex flex-wrap items-center gap-3">
-          <span className="text-sm text-dark-400">{t('admin.payments.filterByMethod')}:</span>
-          <button
-            onClick={() => setMethodFilter('')}
-            className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
-              methodFilter === ''
-                ? 'bg-accent-500 text-white'
-                : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
-            }`}
-          >
-            {t('common.all')}
-          </button>
-          {methodOptions.map((method) => (
+      {/* Filters row */}
+      <div className="space-y-3">
+        {/* Status filter pills */}
+        <div className="flex flex-wrap items-center gap-2">
+          {statusOptions.map((option) => (
            <button
-              key={method}
-              onClick={() => setMethodFilter(method)}
+              key={option.value}
+              onClick={() => setStatusFilter(option.value)}
              className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
-                methodFilter === method
+                statusFilter === option.value
                  ? 'bg-accent-500 text-white'
                  : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
              }`}
            >
-              {method}
+              {option.label}
            </button>
          ))}
        </div>
+
+        {/* Period filter pills + Method filter */}
+        <div className="flex flex-wrap items-center gap-2">
+          {periodOptions.map((option) => (
+            <button
+              key={option.value}
+              onClick={() => handlePeriodChange(option.value)}
+              className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
+                periodFilter === option.value
+                  ? 'bg-accent-500 text-white'
+                  : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
+          <button
+            onClick={() => handlePeriodChange('custom')}
+            className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-all ${
+              periodFilter === 'custom'
+                ? 'bg-accent-500 text-white'
+                : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
+            }`}
+          >
+            <CalendarIcon />
+            {t('admin.payments.periodCustom')}
+          </button>
+
+          {/* Method filter dropdown */}
+          {methodOptions.length > 0 && (
+            <select
+              value={methodFilter}
+              onChange={(e) => setMethodFilter(e.target.value)}
+              className="rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-300 transition-colors focus:border-accent-500 focus:outline-none"
+            >
+              <option value="">{t('admin.payments.allMethods')}</option>
+              {methodOptions.map((method) => (
+                <option key={method} value={method}>
+                  {method}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+      </div>
+
+      {/* Date range panel */}
+      {showDateRange && (
+        <div className="flex flex-wrap items-end gap-3 rounded-xl border border-accent-500/30 bg-accent-500/5 p-4">
+          <div className="flex-1">
+            <label className="mb-1 block text-xs text-dark-400">
+              {t('admin.payments.dateFrom')}
+            </label>
+            <input
+              type="date"
+              value={dateFrom}
+              onChange={(e) => setDateFrom(e.target.value)}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 focus:border-accent-500 focus:outline-none"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="mb-1 block text-xs text-dark-400">{t('admin.payments.dateTo')}</label>
+            <input
+              type="date"
+              value={dateTo}
+              onChange={(e) => setDateTo(e.target.value)}
+              className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-2 text-sm text-dark-100 focus:border-accent-500 focus:outline-none"
+            />
+          </div>
+          <button onClick={() => refetch()} className="btn-primary px-4 py-2 text-sm">
+            {t('admin.payments.applyDate')}
+          </button>
+        </div>
+      )}
+
+      {/* Stats cards */}
+      {stats && (
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <StatCard
+            label={t('admin.payments.totalCount')}
+            value={stats.total}
+            color="blue"
+            isActive={statusFilter === 'all'}
+            onClick={() => handleStatusCardClick('all')}
+          />
+          <StatCard
+            label={t('admin.payments.pendingCount')}
+            value={stats.pending}
+            color="amber"
+            isActive={statusFilter === 'pending'}
+            onClick={() => handleStatusCardClick('pending')}
+          />
+          <StatCard
+            label={t('admin.payments.paidCount')}
+            value={stats.paid}
+            color="green"
+            isActive={statusFilter === 'paid'}
+            onClick={() => handleStatusCardClick('paid')}
+          />
+          <StatCard
+            label={t('admin.payments.cancelledCount')}
+            value={stats.cancelled}
+            color="red"
+            isActive={statusFilter === 'cancelled'}
+            onClick={() => handleStatusCardClick('cancelled')}
+          />
+        </div>
      )}

      {/* Payments list */}
      <div className="card">
-        {isLoading ? (
+        {isError ? (
+          <div className="py-12 text-center">
+            <div className="text-dark-400">{t('common.error')}</div>
+            <button onClick={() => refetch()} className="btn-secondary mt-3">
+              {t('common.retry')}
+            </button>
+          </div>
+        ) : isLoading ? (
          <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>
@@ -181,6 +441,7 @@ export default function AdminPayments() {
            {payments.items.map((payment) => {
              const paymentKey = `${payment.method}_${payment.id}`;
              const isChecking = checkingPaymentId === paymentKey;
+              const isCancelled = payment.status.toLowerCase().includes('cancel');

              return (
                <div
@@ -189,46 +450,62 @@ export default function AdminPayments() {
                >
                  <div className="flex flex-wrap items-start justify-between gap-4">
                    <div className="min-w-0 flex-1">
+                      {/* Status badge + method */}
                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <StatusBadge status={payment.status_text} />
                        <span className="font-semibold text-dark-100">
                          {payment.method_display}
                        </span>
-                        <span className="rounded-full bg-dark-700/50 px-2 py-0.5 text-sm text-dark-300">
-                          {payment.status_emoji} {payment.status_text}
-                        </span>
                        {payment.is_paid && (
-                          <span className="rounded-full bg-success-500/20 px-2 py-0.5 text-sm text-success-400">
+                          <span className="rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
                            {t('admin.payments.paid')}
                          </span>
                        )}
                      </div>
-                      <div className="text-lg font-semibold text-dark-50">
+
+                      {/* Amount */}
+                      <div
+                        className={`text-lg font-semibold ${
+                          isCancelled ? 'text-dark-500 line-through opacity-60' : 'text-dark-50'
+                        }`}
+                      >
                        {formatAmount(payment.amount_rubles)} {currencySymbol}
                      </div>
+
+                      {/* Invoice ID */}
                      <div className="mt-1 text-sm text-dark-400">
-                        ID: <code className="text-dark-300">{payment.identifier}</code>
-                      </div>
-                      <div className="mt-1 text-xs text-dark-500">
-                        {new Date(payment.created_at).toLocaleString()}
+                        <code className="font-mono text-accent-400">{payment.identifier}</code>
                      </div>
+
                      {/* User info */}
                      {(payment.user_username || payment.user_telegram_id) && (
                        <div className="mt-2 text-sm text-dark-400">
                          <span className="text-dark-500">{t('admin.payments.user')}:</span>{' '}
-                          {payment.user_username ? (
+                          {payment.user_username && (
                            <span className="text-dark-200">@{payment.user_username}</span>
-                          ) : (
-                            <span className="text-dark-300">ID: {payment.user_telegram_id}</span>
+                          )}
+                          {payment.user_username && payment.user_telegram_id && (
+                            <span className="text-dark-500"> &middot; </span>
+                          )}
+                          {payment.user_telegram_id && (
+                            <span className="text-dark-300">TG: {payment.user_telegram_id}</span>
                          )}
                        </div>
                      )}
+
+                      {/* Timestamp */}
+                      <div className="mt-1 text-xs text-dark-500">
+                        {new Date(payment.created_at).toLocaleString()}
+                      </div>
                    </div>
+
+                    {/* Action buttons */}
                    <div className="flex flex-col gap-2">
                      {payment.payment_url && (
                        <a
                          href={payment.payment_url}
                          target="_blank"
-                          rel="noopener"
+                          rel="noopener noreferrer"
                          className="btn-secondary px-3 py-1.5 text-xs"
                        >
                          {t('admin.payments.openLink')}
@@ -266,19 +543,28 @@ export default function AdminPayments() {
                      )}
                    </div>
                  </div>
+
                  {/* Show result after check */}
                  {checkPaymentMutation.isSuccess &&
-                    checkPaymentMutation.variables?.paymentId === payment.id && (
+                    checkPaymentMutation.variables?.paymentId === payment.id &&
+                    checkPaymentMutation.variables?.method === payment.method && (
                      <div
                        className={`mt-3 rounded-lg p-2 text-sm ${
                          checkPaymentMutation.data?.status_changed
-                            ? 'border border-success-500/30 bg-success-500/10 text-success-400'
+                            ? 'border border-green-500/30 bg-green-500/10 text-green-400'
                            : 'bg-dark-700/30 text-dark-400'
                        }`}
                      >
                        {checkPaymentMutation.data?.message}
                      </div>
                    )}
+                  {checkPaymentMutation.isError &&
+                    checkPaymentMutation.variables?.paymentId === payment.id &&
+                    checkPaymentMutation.variables?.method === payment.method && (
+                      <div className="mt-3 rounded-lg border border-red-500/30 bg-red-500/10 p-2 text-sm text-red-400">
+                        {t('admin.payments.checkError')}
+                      </div>
+                    )}
                </div>
              );
            })}
@@ -318,7 +604,7 @@ export default function AdminPayments() {
              {t('admin.payments.prev')}
            </button>
            <div className="flex-1 text-center">
-              {t('balance.page', '{current} / {total}', {
+              {t('balance.page', {
                current: payments.page,
                total: payments.pages,
              })}
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -14,6 +14,7 @@ import { useCurrency } from '../hooks/useCurrency';
 import { useCloseOnSuccessNotification } from '../store/successNotification';
 import PurchaseCTAButton from '../components/subscription/PurchaseCTAButton';
 import { CopyIcon, CheckIcon } from '../components/icons';
+import { useHaptic } from '../platform';
 import {
  getErrorMessage,
  getInsufficientBalanceError,
@@ -169,6 +170,7 @@ export default function Subscription() {
  const navigate = useNavigate();
  const { isDark } = useTheme();
  const g = getGlassColors(isDark);
+  const haptic = useHaptic();
  const [copied, setCopied] = useState(false);

  // Helper to format price from kopeks
@@ -444,6 +446,8 @@ export default function Subscription() {
          const isUnlimited =
            (trafficData?.is_unlimited ?? false) || subscription.traffic_limit_gb === 0;
          const connectedDevices = devicesData?.total ?? 0;
+          const isAtDeviceLimit =
+            subscription.device_limit > 0 && connectedDevices >= subscription.device_limit;

          return (
            <div
@@ -726,8 +730,15 @@ export default function Subscription() {
                <HoverBorderGradient
                  as="button"
                  accentColor={zone.mainHex}
-                  onClick={() => navigate('/connection')}
-                  className="mb-5 flex w-full items-center gap-3.5 rounded-[14px] p-3.5 text-left transition-shadow duration-300"
+                  disabled={isAtDeviceLimit}
+                  onClick={() => {
+                    if (isAtDeviceLimit) {
+                      haptic.notification('error');
+                      return;
+                    }
+                    navigate('/connection');
+                  }}
+                  className={`mb-5 flex w-full items-center gap-3.5 rounded-[14px] p-3.5 text-left transition-shadow duration-300${isAtDeviceLimit ? 'cursor-not-allowed opacity-50' : ''}`}
                  style={{ fontFamily: 'inherit' }}
                >
                  <div
@@ -762,6 +773,14 @@ export default function Subscription() {
                            max: subscription.device_limit,
                          })}
                    </div>
+                    {isAtDeviceLimit && (
+                      <div
+                        className="mt-1 text-[10px] font-medium"
+                        style={{ color: 'rgb(var(--color-warning-400))' }}
+                      >
+                        {t('dashboard.deviceLimitReached')}
+                      </div>
+                    )}
                  </div>
                  {subscription.device_limit === 0 ? (
                    <div
--- a/src/pages/Wheel.tsx
+++ b/src/pages/Wheel.tsx
@@ -545,7 +545,8 @@ export default function Wheel() {
            <div className="mt-8 space-y-4">
              {/* Payment type selector */}
              {(starsEnabled || daysEnabled) && (
-                <div className="rounded-xl border border-dark-700/30 bg-dark-800/30 p-1">
+                <div className="rounded-xl border border-dark-700/30 bg-dark-800/30 px-1 pb-1 pt-2">
+                  <p className="mb-1 text-center text-xs text-dark-400">{t('wheel.spinCost')}</p>
                  <div
                    className={`grid gap-1 ${bothMethodsAvailable ? 'grid-cols-2' : 'grid-cols-1'}`}
                  >
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -35,6 +35,12 @@
  box-shadow: 0 0 20px var(--accent-glow, rgba(var(--color-accent-400), 0.25));
 }

+.hover-border-gradient:disabled,
+.hover-border-gradient[disabled] {
+  box-shadow: none;
+  pointer-events: auto;
+}
+
 .light .hover-border-gradient {
  --_bg: var(--border-inner-bg, rgb(var(--color-champagne-100)));
 }
--- a/src/utils/paymentStatus.ts
+++ b/src/utils/paymentStatus.ts
@@ -20,6 +20,7 @@ export const FAILED_STATUSES = new Set([
  'cancel',
  'system_fail',
  'refund_paid',
+  'decline',
 ]);

 export function isPaidStatus(status: string): boolean {