feat: add gifts tab to admin user detail page

Display sent and received gift subscriptions with status badges,
extracted GiftCard component, and full i18n support (ru/en/zh/fa).

src/api/adminUsers.ts

@@ -351,6 +351,36 @@ export interface SyncToPanelRequest {
   update_squads?: boolean;
 }
 
+export interface AdminUserGiftItem {
+  id: number;
+  token: string;
+  status: string;
+  tariff_name: string | null;
+  period_days: number;
+  device_limit: number;
+  amount_kopeks: number;
+  payment_method: string | null;
+  gift_recipient_type: string | null;
+  gift_recipient_value: string | null;
+  gift_message: string | null;
+  buyer_user_id: number | null;
+  buyer_username: string | null;
+  buyer_full_name: string | null;
+  receiver_user_id: number | null;
+  receiver_username: string | null;
+  receiver_full_name: string | null;
+  created_at: string | null;
+  paid_at: string | null;
+  delivered_at: string | null;
+}
+
+export interface AdminUserGiftsResponse {
+  sent: AdminUserGiftItem[];
+  received: AdminUserGiftItem[];
+  sent_total: number;
+  received_total: number;
+}
+
 // ============ API ============
 
 export const adminUsersApi = {
@@ -614,4 +644,10 @@ export const adminUsersApi = {
     const response = await apiClient.delete(`/cabinet/admin/users/${userId}/devices`);
     return response.data;
   },
+
+  // Get user gifts
+  getUserGifts: async (userId: number): Promise<AdminUserGiftsResponse> => {
+    const response = await apiClient.get(`/cabinet/admin/users/${userId}/gifts`);
+    return response.data;
+  },
 };

src/locales/en.json

@@ -2662,7 +2662,8 @@
           "subscription": "Subscription",
           "balance": "Balance",
           "sync": "Synchronization",
-          "tickets": "Tickets"
+          "tickets": "Tickets",
+          "gifts": "Gifts"
         },
         "noTickets": "No tickets from this user",
         "ticketsCount": "tickets",
@@ -2786,6 +2787,41 @@
           "notLinked": "Not linked",
           "fromPanel": "From panel to bot",
           "toPanel": "From bot to panel"
+        },
+        "gifts": {
+          "title": "User Gifts",
+          "sentTitle": "Sent Gifts",
+          "receivedTitle": "Received Gifts",
+          "noSent": "No gifts sent by this user",
+          "noReceived": "No gifts received by this user",
+          "noGifts": "No gifts",
+          "token": "Code",
+          "tariff": "Tariff",
+          "period": "Period",
+          "devices": "Devices",
+          "amount": "Amount",
+          "paymentMethod": "Payment method",
+          "recipient": "Recipient",
+          "sender": "Sender",
+          "message": "Message",
+          "createdAt": "Created",
+          "paidAt": "Paid",
+          "deliveredAt": "Activated",
+          "status": {
+            "pending": "Pending",
+            "paid": "Paid",
+            "delivered": "Delivered",
+            "pending_activation": "Pending activation",
+            "failed": "Failed",
+            "expired": "Expired"
+          },
+          "days": "d",
+          "codeOnly": "Code only",
+          "via": "via",
+          "balance": "balance",
+          "unknownUser": "Unknown",
+          "totalSent": "Total sent",
+          "totalReceived": "Total received"
         }
       }
     },

src/locales/fa.json

@@ -2300,7 +2300,8 @@
           "subscription": "اشتراک",
           "balance": "موجودی",
           "sync": "همگام‌سازی",
-          "tickets": "تیکت‌ها"
+          "tickets": "تیکت‌ها",
+          "gifts": "هدایا"
         },
         "noTickets": "این کاربر تیکتی ندارد",
         "ticketsCount": "تیکت",
@@ -2420,6 +2421,41 @@
           "notLinked": "متصل نشده",
           "fromPanel": "از پنل به ربات",
           "toPanel": "از ربات به پنل"
+        },
+        "gifts": {
+          "title": "هدایای کاربر",
+          "sentTitle": "هدایای ارسال شده",
+          "receivedTitle": "هدایای دریافت شده",
+          "noSent": "این کاربر هدیه‌ای ارسال نکرده است",
+          "noReceived": "این کاربر هدیه‌ای دریافت نکرده است",
+          "noGifts": "بدون هدیه",
+          "token": "کد",
+          "tariff": "تعرفه",
+          "period": "دوره",
+          "devices": "دستگاه‌ها",
+          "amount": "مبلغ",
+          "paymentMethod": "روش پرداخت",
+          "recipient": "گیرنده",
+          "sender": "فرستنده",
+          "message": "پیام",
+          "createdAt": "ایجاد شده",
+          "paidAt": "پرداخت شده",
+          "deliveredAt": "فعال شده",
+          "status": {
+            "pending": "در انتظار",
+            "paid": "پرداخت شده",
+            "delivered": "تحویل داده شده",
+            "pending_activation": "در انتظار فعال‌سازی",
+            "failed": "ناموفق",
+            "expired": "منقضی شده"
+          },
+          "days": "روز",
+          "codeOnly": "فقط کد",
+          "via": "از طریق",
+          "balance": "موجودی",
+          "unknownUser": "ناشناس",
+          "totalSent": "کل ارسال شده",
+          "totalReceived": "کل دریافت شده"
         }
       }
     },

src/locales/ru.json

@@ -3184,7 +3184,8 @@
           "subscription": "Подписка",
           "balance": "Баланс",
           "sync": "Синхронизация",
-          "tickets": "Тикеты"
+          "tickets": "Тикеты",
+          "gifts": "Подарки"
         },
         "noTickets": "У пользователя нет тикетов",
         "ticketsCount": "тикетов",
@@ -3307,6 +3308,41 @@
           "notLinked": "Не привязан",
           "fromPanel": "Из панели в бота",
           "toPanel": "Из бота в панель"
+        },
+        "gifts": {
+          "title": "Подарки пользователя",
+          "sentTitle": "Отправленные подарки",
+          "receivedTitle": "Полученные подарки",
+          "noSent": "Пользователь не отправлял подарков",
+          "noReceived": "Пользователь не получал подарков",
+          "noGifts": "Нет подарков",
+          "token": "Код",
+          "tariff": "Тариф",
+          "period": "Период",
+          "devices": "Устройств",
+          "amount": "Сумма",
+          "paymentMethod": "Способ оплаты",
+          "recipient": "Получатель",
+          "sender": "Отправитель",
+          "message": "Сообщение",
+          "createdAt": "Создан",
+          "paidAt": "Оплачен",
+          "deliveredAt": "Активирован",
+          "status": {
+            "pending": "Ожидание",
+            "paid": "Оплачен",
+            "delivered": "Доставлен",
+            "pending_activation": "Ожидает активации",
+            "failed": "Ошибка",
+            "expired": "Истёк"
+          },
+          "days": "дн.",
+          "codeOnly": "Только код",
+          "via": "через",
+          "balance": "баланс",
+          "unknownUser": "Неизвестный",
+          "totalSent": "Всего отправлено",
+          "totalReceived": "Всего получено"
         }
       }
     },

src/locales/zh.json

@@ -2299,7 +2299,8 @@
           "subscription": "订阅",
           "balance": "余额",
           "sync": "同步",
-          "tickets": "工单"
+          "tickets": "工单",
+          "gifts": "礼物"
         },
         "noTickets": "该用户没有工单",
         "ticketsCount": "个工单",
@@ -2419,6 +2420,41 @@
           "notLinked": "未绑定",
           "fromPanel": "从面板同步到机器人",
           "toPanel": "从机器人同步到面板"
+        },
+        "gifts": {
+          "title": "用户礼物",
+          "sentTitle": "已发送的礼物",
+          "receivedTitle": "已收到的礼物",
+          "noSent": "该用户未发送过礼物",
+          "noReceived": "该用户未收到过礼物",
+          "noGifts": "没有礼物",
+          "token": "代码",
+          "tariff": "套餐",
+          "period": "期限",
+          "devices": "设备数",
+          "amount": "金额",
+          "paymentMethod": "支付方式",
+          "recipient": "收件人",
+          "sender": "发送人",
+          "message": "留言",
+          "createdAt": "创建时间",
+          "paidAt": "支付时间",
+          "deliveredAt": "激活时间",
+          "status": {
+            "pending": "待处理",
+            "paid": "已支付",
+            "delivered": "已送达",
+            "pending_activation": "待激活",
+            "failed": "失败",
+            "expired": "已过期"
+          },
+          "days": "天",
+          "codeOnly": "仅代码",
+          "via": "通过",
+          "balance": "余额",
+          "unknownUser": "未知",
+          "totalSent": "已发送总数",
+          "totalReceived": "已收到总数"
         }
       }
     },

src/pages/AdminUserDetail.tsx

@@ -13,6 +13,7 @@ import {
   type UserNodeUsageResponse,
   type PanelSyncStatusResponse,
   type UpdateSubscriptionRequest,
+  type AdminUserGiftsResponse,
 } from '../api/adminUsers';
 import { adminApi, type AdminTicket, type AdminTicketDetail } from '../api/admin';
 import { promocodesApi, type PromoGroup } from '../api/promocodes';
@@ -128,6 +129,156 @@ function StatusBadge({ status }: { status: string }) {
   );
 }
 
+function GiftStatusBadge({ status }: { status: string }) {
+  const { t } = useTranslation();
+  const styles: Record<string, string> = {
+    pending: 'bg-warning-500/20 text-warning-400 border-warning-500/30',
+    paid: 'bg-accent-500/20 text-accent-400 border-accent-500/30',
+    delivered: 'bg-success-500/20 text-success-400 border-success-500/30',
+    pending_activation: 'bg-accent-500/20 text-accent-400 border-accent-500/30',
+    failed: 'bg-error-500/20 text-error-400 border-error-500/30',
+    expired: 'bg-dark-600 text-dark-400 border-dark-500',
+  };
+  const fallback = 'bg-dark-600 text-dark-400 border-dark-500';
+
+  const label = t(`admin.users.detail.gifts.status.${status}`, { defaultValue: '' }) || status;
+
+  return (
+    <span
+      className={`rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider ${styles[status] || fallback}`}
+    >
+      {label}
+    </span>
+  );
+}
+
+function GiftCard({
+  gift,
+  direction,
+  locale,
+  onNavigateToUser,
+}: {
+  gift: import('../api/adminUsers').AdminUserGiftItem;
+  direction: 'sent' | 'received';
+  locale: string;
+  onNavigateToUser: (userId: number) => void;
+}) {
+  const { t } = useTranslation();
+  const { formatWithCurrency } = useCurrency();
+  const isSent = direction === 'sent';
+
+  const otherPartyLabel = isSent
+    ? t('admin.users.detail.gifts.recipient')
+    : t('admin.users.detail.gifts.sender');
+  const otherPartyName = isSent
+    ? gift.receiver_username
+      ? `@${gift.receiver_username}`
+      : gift.gift_recipient_value || t('admin.users.detail.gifts.codeOnly')
+    : gift.buyer_username
+      ? `@${gift.buyer_username}`
+      : gift.buyer_full_name || t('admin.users.detail.gifts.unknownUser');
+  const otherPartyId = isSent ? gift.receiver_user_id : gift.buyer_user_id;
+
+  const dateOpts: Intl.DateTimeFormatOptions = {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  };
+
+  return (
+    <div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-4 transition-colors hover:bg-dark-800/70">
+      {/* Header */}
+      <div className="mb-3 flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          <div
+            className={`flex h-8 w-8 items-center justify-center rounded-lg ${isSent ? 'bg-accent-500/15' : 'bg-success-500/15'}`}
+          >
+            <svg
+              className={`h-4 w-4 ${isSent ? 'text-accent-400' : 'text-success-400'}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+              />
+            </svg>
+          </div>
+          <div>
+            <div className="text-sm font-medium text-dark-100">{gift.tariff_name || '—'}</div>
+            <div className="text-xs text-dark-500">
+              {gift.period_days} {t('admin.users.detail.gifts.days')} · {gift.device_limit}{' '}
+              {t('admin.users.detail.gifts.devices')}
+            </div>
+          </div>
+        </div>
+        <GiftStatusBadge status={gift.status} />
+      </div>
+
+      {/* Details grid */}
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
+        <div>
+          <span className="text-dark-500">{otherPartyLabel}:</span>{' '}
+          <span className="text-dark-300">{otherPartyName}</span>
+          {otherPartyId && (
+            <button
+              onClick={() => onNavigateToUser(otherPartyId)}
+              className="ml-1 text-accent-400 hover:text-accent-300"
+            >
+              #{otherPartyId}
+            </button>
+          )}
+        </div>
+        <div>
+          <span className="text-dark-500">{t('admin.users.detail.gifts.amount')}:</span>{' '}
+          <span className="text-dark-300">{formatWithCurrency(gift.amount_kopeks / 100)}</span>
+        </div>
+        <div>
+          <span className="text-dark-500">{t('admin.users.detail.gifts.paymentMethod')}:</span>{' '}
+          <span className="text-dark-300">{gift.payment_method || '—'}</span>
+        </div>
+        <div>
+          <span className="text-dark-500">{t('admin.users.detail.gifts.createdAt')}:</span>{' '}
+          <span className="text-dark-300">
+            {gift.created_at ? new Date(gift.created_at).toLocaleString(locale, dateOpts) : '—'}
+          </span>
+        </div>
+        {gift.paid_at && (
+          <div>
+            <span className="text-dark-500">{t('admin.users.detail.gifts.paidAt')}:</span>{' '}
+            <span className="text-dark-300">
+              {new Date(gift.paid_at).toLocaleString(locale, dateOpts)}
+            </span>
+          </div>
+        )}
+        {gift.delivered_at && (
+          <div>
+            <span className="text-dark-500">{t('admin.users.detail.gifts.deliveredAt')}:</span>{' '}
+            <span className="text-success-400">
+              {new Date(gift.delivered_at).toLocaleString(locale, dateOpts)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Gift message */}
+      {gift.gift_message && (
+        <div className="mt-3 rounded-lg bg-dark-900/50 p-2.5 text-xs italic text-dark-400">
+          &ldquo;{gift.gift_message}&rdquo;
+        </div>
+      )}
+
+      {/* Token */}
+      <div className="mt-2 font-mono text-[10px] text-dark-600">GIFT-{gift.token}</div>
+    </div>
+  );
+}
+
 // ============ Main Page ============
 
 export default function AdminUserDetail() {
@@ -144,7 +295,7 @@ export default function AdminUserDetail() {
   const [user, setUser] = useState<UserDetailResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<
-    'info' | 'subscription' | 'balance' | 'sync' | 'tickets'
+    'info' | 'subscription' | 'balance' | 'sync' | 'tickets' | 'gifts'
   >('info');
   const [syncStatus, setSyncStatus] = useState<PanelSyncStatusResponse | null>(null);
   const [tariffs, setTariffs] = useState<UserAvailableTariff[]>([]);
@@ -208,6 +359,10 @@ export default function AdminUserDetail() {
   const [deviceLimit, setDeviceLimit] = useState(0);
   const [devicesLoading, setDevicesLoading] = useState(false);
 
+  // Gifts
+  const [giftsData, setGiftsData] = useState<AdminUserGiftsResponse | null>(null);
+  const [giftsLoading, setGiftsLoading] = useState(false);
+
   const userId = id ? parseInt(id, 10) : null;
 
   const loadUser = useCallback(async () => {
@@ -325,6 +480,19 @@ export default function AdminUserDetail() {
     await Promise.all([loadPanelInfo(), loadNodeUsage(), loadDevices()]);
   }, [loadPanelInfo, loadNodeUsage, loadDevices]);
 
+  const loadGifts = useCallback(async () => {
+    if (!userId) return;
+    try {
+      setGiftsLoading(true);
+      const data = await adminUsersApi.getUserGifts(userId);
+      setGiftsData(data);
+    } catch {
+      // ignore
+    } finally {
+      setGiftsLoading(false);
+    }
+  }, [userId]);
+
   const loadPromoGroups = useCallback(async () => {
     try {
       const data = await promocodesApi.getPromoGroups({ limit: 100 });
@@ -394,6 +562,7 @@ export default function AdminUserDetail() {
       loadSubscriptionData();
     }
     if (activeTab === 'tickets') loadTickets();
+    if (activeTab === 'gifts') loadGifts();
   }, [
     activeTab,
     loadSyncStatus,
@@ -402,6 +571,7 @@ export default function AdminUserDetail() {
     loadReferrals,
     loadSubscriptionData,
     loadPromoGroups,
+    loadGifts,
     hasPermission,
   ]);
 
@@ -838,7 +1008,7 @@ export default function AdminUserDetail() {
         className="scrollbar-hide -mx-4 mb-6 flex gap-2 overflow-x-auto px-4 py-1"
         style={{ WebkitOverflowScrolling: 'touch' }}
       >
-        {(['info', 'subscription', 'balance', 'sync', 'tickets'] as const)
+        {(['info', 'subscription', 'balance', 'sync', 'tickets', 'gifts'] as const)
           .filter((tab) => tab !== 'sync' || hasPermission('users:sync'))
           .map((tab) => (
             <button
@@ -855,6 +1025,7 @@ export default function AdminUserDetail() {
               {tab === 'balance' && t('admin.users.detail.tabs.balance')}
               {tab === 'sync' && t('admin.users.detail.tabs.sync')}
               {tab === 'tickets' && t('admin.users.detail.tabs.tickets')}
+              {tab === 'gifts' && t('admin.users.detail.tabs.gifts')}
             </button>
           ))}
       </div>
@@ -2357,6 +2528,130 @@ export default function AdminUserDetail() {
             )}
           </div>
         )}
+
+        {/* Gifts Tab */}
+        {activeTab === 'gifts' && (
+          <div className="space-y-6">
+            {giftsLoading ? (
+              <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>
+            ) : !giftsData || (giftsData.sent.length === 0 && giftsData.received.length === 0) ? (
+              <div className="flex flex-col items-center justify-center rounded-xl bg-dark-800/50 py-16">
+                <svg
+                  className="mb-3 h-12 w-12 text-dark-600"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={1.5}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+                  />
+                </svg>
+                <p className="text-sm text-dark-500">{t('admin.users.detail.gifts.noGifts')}</p>
+              </div>
+            ) : (
+              <>
+                {/* Summary counters */}
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="rounded-xl bg-dark-800/50 p-4">
+                    <div className="mb-1 text-xs text-dark-500">
+                      {t('admin.users.detail.gifts.totalSent')}
+                    </div>
+                    <div className="text-2xl font-bold text-accent-400">{giftsData.sent_total}</div>
+                  </div>
+                  <div className="rounded-xl bg-dark-800/50 p-4">
+                    <div className="mb-1 text-xs text-dark-500">
+                      {t('admin.users.detail.gifts.totalReceived')}
+                    </div>
+                    <div className="text-2xl font-bold text-success-400">
+                      {giftsData.received_total}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Sent Gifts */}
+                <div>
+                  <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-dark-200">
+                    <svg
+                      className="h-4 w-4 text-accent-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+                      />
+                    </svg>
+                    {t('admin.users.detail.gifts.sentTitle')}
+                    <span className="text-dark-500">({giftsData.sent_total})</span>
+                  </h3>
+                  {giftsData.sent.length === 0 ? (
+                    <div className="rounded-xl bg-dark-800/30 py-6 text-center text-sm text-dark-500">
+                      {t('admin.users.detail.gifts.noSent')}
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {giftsData.sent.map((gift) => (
+                        <GiftCard
+                          key={gift.id}
+                          gift={gift}
+                          direction="sent"
+                          locale={locale}
+                          onNavigateToUser={(id) => navigate(`/admin/users/${id}`)}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Received Gifts */}
+                <div>
+                  <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-dark-200">
+                    <svg
+                      className="h-4 w-4 text-success-400"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859"
+                      />
+                    </svg>
+                    {t('admin.users.detail.gifts.receivedTitle')}
+                    <span className="text-dark-500">({giftsData.received_total})</span>
+                  </h3>
+                  {giftsData.received.length === 0 ? (
+                    <div className="rounded-xl bg-dark-800/30 py-6 text-center text-sm text-dark-500">
+                      {t('admin.users.detail.gifts.noReceived')}
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {giftsData.received.map((gift) => (
+                        <GiftCard
+                          key={gift.id}
+                          gift={gift}
+                          direction="received"
+                          locale={locale}
+                          onNavigateToUser={(id) => navigate(`/admin/users/${id}`)}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );