feat: редизайн страницы платежей в админке — поиск, фильтры, статистика

Поиск по инвойсу/клиенту, фильтры по статусу/периоду/методу, карточки статистики,
кастомный диапазон дат, обработка ошибок, локализация на 4 языка.

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>(

src/locales/en.json

@@ -1286,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",

src/locales/fa.json

@@ -1326,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": "تنظیمات سیستم",

src/locales/ru.json

@@ -1307,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": "Платёжные методы",

src/locales/zh.json

@@ -1158,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": "幸运转盘设置",

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) {
+    onSuccess: async () => {
       await refetch();
-        queryClient.invalidateQueries({ queryKey: ['admin-payments-stats'] });
-      } else {
-        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)}
+          <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"
           >
-              <div className="text-2xl font-bold text-dark-50">{count}</div>
-              <div className="text-sm text-dark-400">{method}</div>
-            </div>
-          ))}
+            {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>
+      {/* Filters row */}
+      <div className="space-y-3">
+        {/* Status filter pills */}
+        <div className="flex flex-wrap items-center gap-2">
+          {statusOptions.map((option) => (
             <button
-            onClick={() => setMethodFilter('')}
+              key={option.value}
+              onClick={() => setStatusFilter(option.value)}
               className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
-              methodFilter === ''
+                statusFilter === option.value
                   ? 'bg-accent-500 text-white'
                   : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
               }`}
             >
-            {t('common.all')}
-          </button>
-          {methodOptions.map((method) => (
-            <button
-              key={method}
-              onClick={() => setMethodFilter(method)}
-              className={`rounded-lg px-3 py-1.5 text-sm transition-all ${
-                methodFilter === method
-                  ? '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,
               })}