feat: add purchases list with pagination to landing stats page

Add card-based purchase list below charts with:
- Status filter dropdown (all/pending/paid/delivered/etc)
- Paginated card list with contact, gift recipient, tariff, price
- Status badges, responsive mobile/desktop layout
- Translations for ru/en

src/pages/AdminLandingStats.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +16,12 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { adminLandingsApi, resolveLocaleDisplay } from '../api/landings';
+import {
+  adminLandingsApi,
+  resolveLocaleDisplay,
+  type PurchaseItemStatus,
+  type LandingPurchaseItem,
+} from '../api/landings';
 import { useCurrency } from '../hooks/useCurrency';
 import { useChartColors } from '../hooks/useChartColors';
 import { CHART_COMMON } from '../constants/charts';
@@ -36,6 +41,177 @@ const ChartIcon = () => (
 const TARIFF_PALETTE = ['#818cf8', '#34d399', '#f59e0b', '#ec4899', '#06b6d4', '#8b5cf6'];
 const GIFT_COLOR = '#a855f7';
 
+const PURCHASE_STATUS_STYLES: Record<string, string> = {
+  pending: 'bg-warning-500/20 text-warning-400',
+  paid: 'bg-accent-500/20 text-accent-400',
+  delivered: 'bg-success-500/20 text-success-400',
+  pending_activation: 'bg-accent-500/20 text-accent-400',
+  failed: 'bg-error-500/20 text-error-400',
+  expired: 'bg-dark-500/20 text-dark-400',
+};
+
+const PURCHASE_STATUS_OPTIONS: Array<PurchaseItemStatus | 'all'> = [
+  'all',
+  'pending',
+  'paid',
+  'delivered',
+  'pending_activation',
+  'failed',
+  'expired',
+];
+
+const PURCHASES_PAGE_SIZE = 20;
+
+// Small icons for the purchase cards
+
+const EmailIcon = () => (
+  <svg
+    className="h-3.5 w-3.5 shrink-0"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+    />
+  </svg>
+);
+
+const TelegramSmallIcon = () => (
+  <svg className="h-3.5 w-3.5 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+  </svg>
+);
+
+const ArrowRightIcon = () => (
+  <svg
+    className="h-3 w-3 shrink-0 text-dark-500"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+  </svg>
+);
+
+const GiftIcon = () => (
+  <svg
+    className="h-3.5 w-3.5 shrink-0"
+    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>
+);
+
+const ChevronLeftSmall = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+  </svg>
+);
+
+const ChevronRightSmall = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+  </svg>
+);
+
+// Contact display helper
+function ContactDisplay({ type, value }: { type: 'email' | 'telegram'; value: string }) {
+  return (
+    <span className="flex items-center gap-1 text-dark-300">
+      {type === 'email' ? <EmailIcon /> : <TelegramSmallIcon />}
+      <span className="min-w-0 truncate text-xs">{value}</span>
+    </span>
+  );
+}
+
+// Purchase card component
+interface PurchaseCardProps {
+  item: LandingPurchaseItem;
+  formatPrice: (kopeks: number) => string;
+  lang: string;
+  t: (key: string, opts?: Record<string, unknown>) => string;
+}
+
+function PurchaseCard({ item, formatPrice, lang, t }: PurchaseCardProps) {
+  const statusStyle = PURCHASE_STATUS_STYLES[item.status] || 'bg-dark-600 text-dark-300';
+  const dateStr = new Date(item.created_at).toLocaleDateString(lang, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  });
+
+  return (
+    <div className="rounded-xl border border-dark-700/50 bg-dark-800/40 p-3 transition-colors hover:border-dark-600 sm:p-4">
+      {/* Mobile: stacked | Desktop: horizontal */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+        {/* Status badge */}
+        <div className="shrink-0">
+          <span
+            className={`inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ${statusStyle}`}
+          >
+            {t(`admin.landings.purchases.status_${item.status}`)}
+          </span>
+        </div>
+
+        {/* Contact info */}
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
+            <ContactDisplay type={item.contact_type} value={item.contact_value} />
+            {item.is_gift && item.gift_recipient_type && item.gift_recipient_value && (
+              <span className="flex items-center gap-1">
+                <ArrowRightIcon />
+                <ContactDisplay type={item.gift_recipient_type} value={item.gift_recipient_value} />
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Tariff + period */}
+        <div className="shrink-0 text-sm text-dark-200">
+          <span className="font-medium">{item.tariff_name}</span>
+          <span className="text-dark-500">
+            {' '}
+            &middot; {item.period_days} {t('admin.landings.purchases.days')}
+          </span>
+        </div>
+
+        {/* Price */}
+        <div className="shrink-0 text-sm font-medium text-dark-100">
+          {formatPrice(item.amount_kopeks)}
+        </div>
+
+        {/* Payment method */}
+        <div className="shrink-0 text-xs text-dark-500">{item.payment_method}</div>
+
+        {/* Gift badge */}
+        {item.is_gift && (
+          <div className="shrink-0">
+            <span className="inline-flex items-center gap-1 rounded-md bg-purple-500/20 px-1.5 py-0.5 text-xs text-purple-400">
+              <GiftIcon />
+              {t('admin.landings.purchases.gift')}
+            </span>
+          </div>
+        )}
+
+        {/* Date */}
+        <div className="shrink-0 text-xs text-dark-500">{dateStr}</div>
+      </div>
+    </div>
+  );
+}
+
 export default function AdminLandingStats() {
   const { t, i18n } = useTranslation();
   const { id } = useParams<{ id: string }>();
@@ -45,6 +221,12 @@ export default function AdminLandingStats() {
   const { formatWithCurrency } = useCurrency();
   const colors = useChartColors();
 
+  // Purchases list state
+  const [purchaseOffset, setPurchaseOffset] = useState(0);
+  const [purchaseStatusFilter, setPurchaseStatusFilter] = useState<PurchaseItemStatus | 'all'>(
+    'all',
+  );
+
   // Fetch stats
   const {
     data: stats,
@@ -65,6 +247,31 @@ export default function AdminLandingStats() {
     staleTime: CHART_COMMON.STALE_TIME,
   });
 
+  // Fetch purchases list
+  const { data: purchasesData, isLoading: purchasesLoading } = useQuery({
+    queryKey: [
+      'landing-purchases',
+      numericId,
+      purchaseOffset,
+      PURCHASES_PAGE_SIZE,
+      purchaseStatusFilter,
+    ],
+    queryFn: () =>
+      adminLandingsApi.getPurchases(
+        numericId,
+        purchaseOffset,
+        PURCHASES_PAGE_SIZE,
+        purchaseStatusFilter === 'all' ? undefined : purchaseStatusFilter,
+      ),
+    enabled: isValidId,
+    staleTime: CHART_COMMON.STALE_TIME,
+  });
+
+  const purchaseItems = purchasesData?.items ?? [];
+  const purchaseTotal = purchasesData?.total ?? 0;
+  const purchaseTotalPages = Math.ceil(purchaseTotal / PURCHASES_PAGE_SIZE);
+  const purchaseCurrentPage = Math.floor(purchaseOffset / PURCHASES_PAGE_SIZE) + 1;
+
   // Prepare daily chart data
   const dailyData = useMemo(() => {
     if (!stats) return [];
@@ -439,6 +646,101 @@ export default function AdminLandingStats() {
             </div>
           </div>
         )}
+
+        {/* Purchases List */}
+        <div className="rounded-xl border border-dark-700 bg-dark-800 p-4">
+          {/* Header row: title + status filter */}
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <h3 className="font-medium text-dark-200">{t('admin.landings.purchases.title')}</h3>
+            <select
+              value={purchaseStatusFilter}
+              onChange={(e) => {
+                setPurchaseStatusFilter(e.target.value as PurchaseItemStatus | 'all');
+                setPurchaseOffset(0);
+              }}
+              className="rounded-lg border border-dark-600 bg-dark-900 px-3 py-1.5 text-sm text-dark-200 outline-none transition-colors focus:border-accent-500"
+              aria-label={t('admin.landings.purchases.allStatuses')}
+            >
+              {PURCHASE_STATUS_OPTIONS.map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt === 'all'
+                    ? t('admin.landings.purchases.allStatuses')
+                    : t(`admin.landings.purchases.status_${opt}`)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Content */}
+          {purchasesLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
+            </div>
+          ) : purchaseItems.length === 0 ? (
+            <div className="py-8 text-center text-sm text-dark-500">
+              {t('admin.landings.purchases.noPurchases')}
+            </div>
+          ) : (
+            <>
+              <div className="space-y-2">
+                {purchaseItems.map((item) => (
+                  <PurchaseCard
+                    key={item.id}
+                    item={item}
+                    formatPrice={(kopeks) =>
+                      formatWithCurrency(kopeks / CHART_COMMON.KOPEKS_DIVISOR)
+                    }
+                    lang={i18n.language}
+                    t={t}
+                  />
+                ))}
+              </div>
+
+              {/* Pagination */}
+              {purchaseTotalPages > 1 && (
+                <div className="mt-4 flex flex-col items-center gap-2 sm:flex-row sm:justify-between">
+                  <span className="text-xs text-dark-500">
+                    {t('admin.landings.purchases.showing', {
+                      from: purchaseOffset + 1,
+                      to: Math.min(purchaseOffset + PURCHASES_PAGE_SIZE, purchaseTotal),
+                      total: purchaseTotal,
+                    })}
+                  </span>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() =>
+                        setPurchaseOffset((prev) => Math.max(0, prev - PURCHASES_PAGE_SIZE))
+                      }
+                      disabled={purchaseOffset === 0}
+                      className="flex items-center gap-1 rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-300 transition-colors hover:border-dark-600 hover:text-dark-100 disabled:cursor-not-allowed disabled:opacity-40"
+                      aria-label={t('admin.landings.purchases.prev')}
+                    >
+                      <ChevronLeftSmall />
+                      <span className="hidden sm:inline">{t('admin.landings.purchases.prev')}</span>
+                    </button>
+
+                    <span className="px-2 text-xs text-dark-400">
+                      {t('admin.landings.purchases.page', {
+                        current: purchaseCurrentPage,
+                        total: purchaseTotalPages,
+                      })}
+                    </span>
+
+                    <button
+                      onClick={() => setPurchaseOffset((prev) => prev + PURCHASES_PAGE_SIZE)}
+                      disabled={purchaseOffset + PURCHASES_PAGE_SIZE >= purchaseTotal}
+                      className="flex items-center gap-1 rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-300 transition-colors hover:border-dark-600 hover:text-dark-100 disabled:cursor-not-allowed disabled:opacity-40"
+                      aria-label={t('admin.landings.purchases.next')}
+                    >
+                      <span className="hidden sm:inline">{t('admin.landings.purchases.next')}</span>
+                      <ChevronRightSmall />
+                    </button>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
       </div>
     </div>
   );