feat: add admin sales statistics dashboard with 5 analytics tabs

- Add sales stats API client with typed interfaces for all endpoints
- Implement AdminSalesStats page with summary cards and period selector
- Add TrialsTab with provider breakdown donut chart and daily area chart
- Add SalesTab with tariff/period breakdown and daily revenue chart
- Add RenewalsTab with period comparison and trend indicators
- Add AddonsTab with package breakdown bar chart
- Add DepositsTab with payment method breakdown bar chart
- Add SimpleBarChart, SimpleAreaChart, DonutChart components
- Add PeriodSelector with preset periods and custom date range
- Full responsive design (mobile/tablet/desktop/TG Mini App)
- ARIA accessibility (tablist, tab, tabpanel, aria-selected)
- Error handling with isError on all queries
- Empty data guards on all chart components
- i18n support across all 4 locales (en, ru, zh, fa)

src/components/sales-stats/RenewalsTab.tsx

@@ -0,0 +1,102 @@
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import type { SalesStatsParams } from '../../api/adminSalesStats';
+import { salesStatsApi } from '../../api/adminSalesStats';
+import { SALES_STATS } from '../../constants/salesStats';
+import { useCurrency } from '../../hooks/useCurrency';
+import { StatCard } from '../stats';
+import { TREND_STYLES } from '../stats/constants';
+
+import { SimpleAreaChart } from './SimpleAreaChart';
+
+interface RenewalsTabProps {
+  params: SalesStatsParams;
+}
+
+export function RenewalsTab({ params }: RenewalsTabProps) {
+  const { t } = useTranslation();
+  const { formatWithCurrency } = useCurrency();
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['sales-stats', 'renewals', params],
+    queryFn: () => salesStatsApi.getRenewals(params),
+    staleTime: SALES_STATS.STALE_TIME,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse space-y-4">
+        {Array.from({ length: 3 }, (_, i) => (
+          <div key={i} className="h-24 rounded-xl bg-dark-800/30" />
+        ))}
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return <div className="py-8 text-center text-red-400">{t('admin.salesStats.loadError')}</div>;
+  }
+
+  const dailyData = data.daily.map((item) => ({
+    date: item.date,
+    value: item.count,
+  }));
+
+  const trendStyle = TREND_STYLES[data.change.trend] ?? TREND_STYLES.stable;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <StatCard label={t('admin.salesStats.renewals.total')} value={data.total_renewals} />
+        <StatCard
+          label={t('admin.salesStats.renewals.rate')}
+          value={`${data.renewal_rate}%`}
+          valueClassName="text-success-400"
+        />
+        <StatCard
+          label={t('admin.salesStats.renewals.revenue')}
+          value={formatWithCurrency(data.total_revenue_kopeks / SALES_STATS.KOPEKS_DIVISOR)}
+          valueClassName="text-success-400"
+        />
+      </div>
+
+      <div className="bento-card">
+        <h4 className="mb-3 text-sm font-semibold text-dark-200">
+          {t('admin.salesStats.renewals.comparison')}
+        </h4>
+        <div className="grid grid-cols-2 gap-3">
+          <div className="rounded-xl bg-dark-800/30 p-3">
+            <div className="text-xs text-dark-500">
+              {t('admin.salesStats.renewals.currentPeriod')}
+            </div>
+            <div className="mt-1 flex items-baseline gap-2">
+              <span className="text-base font-semibold text-dark-100 sm:text-lg">
+                {data.current_period.count}
+              </span>
+              <span className={`text-sm font-medium ${trendStyle.className}`}>
+                {trendStyle.arrow} {Math.abs(data.change.percent)}%
+              </span>
+            </div>
+          </div>
+          <div className="rounded-xl bg-dark-800/30 p-3">
+            <div className="text-xs text-dark-500">
+              {t('admin.salesStats.renewals.previousPeriod')}
+            </div>
+            <div className="mt-1 text-base font-semibold text-dark-400 sm:text-lg">
+              {data.previous_period.count}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <SimpleAreaChart
+        data={dailyData}
+        title={t('admin.salesStats.renewals.dailyChart')}
+        chartId="renewals-daily"
+        valueLabel={t('admin.salesStats.renewals.renewals')}
+        color={SALES_STATS.BAR_COLORS[2]}
+      />
+    </div>
+  );
+}