feat: enhance sales stats with device stats, per-tariff charts, and dual-series trials

- Add DualAreaChart component for two-series visualization (registrations vs trials) - Add MultiSeriesAreaChart component for N-series tariff breakdown with dynamic pivoting - AddonsTab: add device purchases and device revenue stat cards - SalesTab: add per-tariff daily sales chart using MultiSeriesAreaChart - TrialsTab: replace single-series area chart with dual-series registrations + trials chart - Update TypeScript interfaces to match backend schema changes - Add i18n keys for all new UI elements across en, ru, zh, fa locales
2026-07-28 17:43:47 +00:00 · 2026-03-02 21:42:25 +03:00
parent 14e5f436ce
commit 4622b4b200
11 changed files with 391 additions and 18 deletions
--- a/src/api/adminSalesStats.ts
+++ b/src/api/adminSalesStats.ts
@@ -29,11 +29,13 @@ export interface ProviderBreakdownItem {

 export interface DailyTrialItem {
  date: string;
-  count: number;
+  registrations: number;
+  trials: number;
 }

 export interface TrialsStats {
  total_trials: number;
+  total_registrations: number;
  conversion_rate: number;
  avg_trial_duration_days: number;
  by_provider: ProviderBreakdownItem[];
@@ -59,6 +61,12 @@ export interface DailySalesItem {
  revenue_kopeks: number;
 }

+export interface DailyTariffSalesItem {
+  date: string;
+  tariff_name: string;
+  count: number;
+}
+
 export interface SalesStats {
  total_sales: number;
  total_revenue_kopeks: number;
@@ -67,6 +75,7 @@ export interface SalesStats {
  by_tariff: SalesByTariffItem[];
  by_period: SalesByPeriodItem[];
  daily: DailySalesItem[];
+  daily_by_tariff: DailyTariffSalesItem[];
 }

 // ============ Renewals ============
@@ -114,6 +123,8 @@ export interface AddonsStats {
  total_purchases: number;
  total_gb_purchased: number;
  addon_revenue_kopeks: number;
+  device_purchases: number;
+  device_revenue_kopeks: number;
  by_package: AddonByPackageItem[];
  daily: DailyAddonItem[];
 }
--- a/src/components/sales-stats/AddonsTab.tsx
+++ b/src/components/sales-stats/AddonsTab.tsx
@@ -50,7 +50,7 @@ export function AddonsTab({ params }: AddonsTabProps) {

  return (
    <div className="space-y-4">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
        <StatCard
          label={t('admin.salesStats.addons.totalPurchases')}
          value={data.total_purchases}
@@ -64,6 +64,15 @@ export function AddonsTab({ params }: AddonsTabProps) {
          value={formatWithCurrency(data.addon_revenue_kopeks / SALES_STATS.KOPEKS_DIVISOR)}
          valueClassName="text-success-400"
        />
+        <StatCard
+          label={t('admin.salesStats.addons.devicePurchases')}
+          value={data.device_purchases}
+        />
+        <StatCard
+          label={t('admin.salesStats.addons.deviceRevenue')}
+          value={formatWithCurrency(data.device_revenue_kopeks / SALES_STATS.KOPEKS_DIVISOR)}
+          valueClassName="text-success-400"
+        />
      </div>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
--- a/src/components/sales-stats/DualAreaChart.tsx
+++ b/src/components/sales-stats/DualAreaChart.tsx
@@ -0,0 +1,151 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { SALES_STATS } from '../../constants/salesStats';
+import { useChartColors } from '../../hooks/useChartColors';
+
+interface DualAreaChartProps {
+  data: { date: string; series1: number; series2: number }[];
+  title: string;
+  chartId: string;
+  series1Label: string;
+  series2Label: string;
+  series1Color?: string;
+  series2Color?: string;
+  height?: number;
+}
+
+export function DualAreaChart({
+  data,
+  title,
+  chartId,
+  series1Label,
+  series2Label,
+  series1Color,
+  series2Color,
+  height = SALES_STATS.CHART.HEIGHT,
+}: DualAreaChartProps) {
+  const { t, i18n } = useTranslation();
+  const colors = useChartColors();
+  const color1 = series1Color || colors.referrals;
+  const color2 = series2Color || colors.earnings;
+
+  const chartData = useMemo(
+    () =>
+      data.map((item) => ({
+        ...item,
+        label: new Date(item.date + 'T00:00:00').toLocaleDateString(i18n.language, {
+          month: 'short',
+          day: 'numeric',
+        }),
+      })),
+    [data, i18n.language],
+  );
+
+  if (data.length === 0) {
+    return (
+      <div className="bento-card">
+        <h4 className="mb-3 text-sm font-semibold text-dark-200">{title}</h4>
+        <div className="flex items-center justify-center text-sm text-dark-400" style={{ height }}>
+          {t('common.noData')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bento-card">
+      <h4 className="mb-3 text-sm font-semibold text-dark-200">{title}</h4>
+      <ResponsiveContainer width="100%" height={height}>
+        <AreaChart data={chartData} margin={SALES_STATS.CHART.MARGIN}>
+          <defs>
+            <linearGradient id={`gradient-s1-${chartId}`} x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset={SALES_STATS.GRADIENT.START_OFFSET}
+                stopColor={color1}
+                stopOpacity={SALES_STATS.GRADIENT.START_OPACITY}
+              />
+              <stop
+                offset={SALES_STATS.GRADIENT.END_OFFSET}
+                stopColor={color1}
+                stopOpacity={SALES_STATS.GRADIENT.END_OPACITY}
+              />
+            </linearGradient>
+            <linearGradient id={`gradient-s2-${chartId}`} x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset={SALES_STATS.GRADIENT.START_OFFSET}
+                stopColor={color2}
+                stopOpacity={SALES_STATS.GRADIENT.START_OPACITY}
+              />
+              <stop
+                offset={SALES_STATS.GRADIENT.END_OFFSET}
+                stopColor={color2}
+                stopOpacity={SALES_STATS.GRADIENT.END_OPACITY}
+              />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray={SALES_STATS.GRID_DASH} stroke={colors.grid} />
+          <XAxis
+            dataKey="label"
+            tick={{ fill: colors.tick, fontSize: SALES_STATS.AXIS.TICK_FONT_SIZE }}
+            tickLine={false}
+            interval="preserveStartEnd"
+          />
+          <YAxis
+            tick={{ fill: colors.tick, fontSize: SALES_STATS.AXIS.TICK_FONT_SIZE }}
+            tickLine={false}
+            axisLine={false}
+            width={SALES_STATS.AXIS.WIDTH}
+            allowDecimals={false}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: colors.tooltipBg,
+              border: `1px solid ${colors.tooltipBorder}`,
+              borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
+              fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+            }}
+            labelStyle={{ color: colors.label }}
+            formatter={(value: number | undefined, name: string | undefined) => {
+              const displayValue = value ?? 0;
+              if (name === 'series1') return [displayValue, series1Label];
+              return [displayValue, series2Label];
+            }}
+          />
+          <Legend
+            formatter={(value: string) => {
+              if (value === 'series1') return series1Label;
+              return series2Label;
+            }}
+          />
+          <Area
+            type="monotone"
+            dataKey="series1"
+            name="series1"
+            stroke={color1}
+            fill={`url(#gradient-s1-${chartId})`}
+            strokeWidth={SALES_STATS.STROKE_WIDTH}
+          />
+          <Area
+            type="monotone"
+            dataKey="series2"
+            name="series2"
+            stroke={color2}
+            fill={`url(#gradient-s2-${chartId})`}
+            strokeWidth={SALES_STATS.STROKE_WIDTH}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
--- a/src/components/sales-stats/MultiSeriesAreaChart.tsx
+++ b/src/components/sales-stats/MultiSeriesAreaChart.tsx
@@ -0,0 +1,155 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { SALES_STATS } from '../../constants/salesStats';
+import { useChartColors } from '../../hooks/useChartColors';
+
+interface MultiSeriesAreaChartProps {
+  data: { date: string; key: string; value: number }[];
+  title: string;
+  chartId: string;
+  valueLabel?: string;
+  height?: number;
+}
+
+export function MultiSeriesAreaChart({
+  data,
+  title,
+  chartId,
+  valueLabel,
+  height = SALES_STATS.CHART.HEIGHT,
+}: MultiSeriesAreaChartProps) {
+  const { t, i18n } = useTranslation();
+  const colors = useChartColors();
+
+  // Pivot flat data into { label, [key1]: value, [key2]: value, ... }
+  const { chartData, seriesKeys } = useMemo(() => {
+    const dateMap = new Map<string, Record<string, number>>();
+    const keySet = new Set<string>();
+
+    for (const item of data) {
+      keySet.add(item.key);
+      const existing = dateMap.get(item.date) || {};
+      existing[item.key] = (existing[item.key] || 0) + item.value;
+      dateMap.set(item.date, existing);
+    }
+
+    const keys = Array.from(keySet).sort();
+    const sortedDates = Array.from(dateMap.keys()).sort();
+    const pivoted = sortedDates.map((date) => {
+      const row: Record<string, string | number> = {
+        date,
+        label: new Date(date + 'T00:00:00').toLocaleDateString(i18n.language, {
+          month: 'short',
+          day: 'numeric',
+        }),
+      };
+      const values = dateMap.get(date) || {};
+      for (const key of keys) {
+        row[key] = values[key] || 0;
+      }
+      return row;
+    });
+
+    return { chartData: pivoted, seriesKeys: keys };
+  }, [data, i18n.language]);
+
+  if (data.length === 0) {
+    return (
+      <div className="bento-card">
+        <h4 className="mb-3 text-sm font-semibold text-dark-200">{title}</h4>
+        <div className="flex items-center justify-center text-sm text-dark-400" style={{ height }}>
+          {t('common.noData')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bento-card">
+      <h4 className="mb-3 text-sm font-semibold text-dark-200">{title}</h4>
+      <ResponsiveContainer width="100%" height={height}>
+        <AreaChart data={chartData} margin={SALES_STATS.CHART.MARGIN}>
+          <defs>
+            {seriesKeys.map((key, i) => {
+              const color = SALES_STATS.BAR_COLORS[i % SALES_STATS.BAR_COLORS.length];
+              return (
+                <linearGradient
+                  key={key}
+                  id={`gradient-${chartId}-${i}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset={SALES_STATS.GRADIENT.START_OFFSET}
+                    stopColor={color}
+                    stopOpacity={SALES_STATS.GRADIENT.START_OPACITY}
+                  />
+                  <stop
+                    offset={SALES_STATS.GRADIENT.END_OFFSET}
+                    stopColor={color}
+                    stopOpacity={SALES_STATS.GRADIENT.END_OPACITY}
+                  />
+                </linearGradient>
+              );
+            })}
+          </defs>
+          <CartesianGrid strokeDasharray={SALES_STATS.GRID_DASH} stroke={colors.grid} />
+          <XAxis
+            dataKey="label"
+            tick={{ fill: colors.tick, fontSize: SALES_STATS.AXIS.TICK_FONT_SIZE }}
+            tickLine={false}
+            interval="preserveStartEnd"
+          />
+          <YAxis
+            tick={{ fill: colors.tick, fontSize: SALES_STATS.AXIS.TICK_FONT_SIZE }}
+            tickLine={false}
+            axisLine={false}
+            width={SALES_STATS.AXIS.WIDTH}
+            allowDecimals={false}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: colors.tooltipBg,
+              border: `1px solid ${colors.tooltipBorder}`,
+              borderRadius: SALES_STATS.TOOLTIP.BORDER_RADIUS,
+              fontSize: SALES_STATS.TOOLTIP.FONT_SIZE,
+            }}
+            labelStyle={{ color: colors.label }}
+            formatter={(value: number | undefined, name: string | undefined) => [
+              value ?? 0,
+              name || valueLabel || '',
+            ]}
+          />
+          <Legend />
+          {seriesKeys.map((key, i) => {
+            const color = SALES_STATS.BAR_COLORS[i % SALES_STATS.BAR_COLORS.length];
+            return (
+              <Area
+                key={key}
+                type="monotone"
+                dataKey={key}
+                name={key}
+                stroke={color}
+                fill={`url(#gradient-${chartId}-${i})`}
+                strokeWidth={SALES_STATS.STROKE_WIDTH}
+              />
+            );
+          })}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
--- a/src/components/sales-stats/SalesTab.tsx
+++ b/src/components/sales-stats/SalesTab.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';

@@ -8,6 +9,7 @@ import { useCurrency } from '../../hooks/useCurrency';
 import { StatCard } from '../stats';

 import { DonutChart } from './DonutChart';
+import { MultiSeriesAreaChart } from './MultiSeriesAreaChart';
 import { SimpleAreaChart } from './SimpleAreaChart';
 import { SimpleBarChart } from './SimpleBarChart';

@@ -25,6 +27,13 @@ export function SalesTab({ params }: SalesTabProps) {
    staleTime: SALES_STATS.STALE_TIME,
  });

+  const dailyByTariffData = useMemo(
+    () =>
+      data?.daily_by_tariff.map((i) => ({ date: i.date, key: i.tariff_name, value: i.count })) ??
+      [],
+    [data?.daily_by_tariff],
+  );
+
  if (isLoading) {
    return (
      <div className="animate-pulse space-y-4">
@@ -77,6 +86,13 @@ export function SalesTab({ params }: SalesTabProps) {
        chartId="sales-daily"
        valueLabel={t('admin.salesStats.summary.revenue')}
      />
+
+      <MultiSeriesAreaChart
+        data={dailyByTariffData}
+        title={t('admin.salesStats.sales.dailyByTariff')}
+        chartId="sales-daily-by-tariff"
+        valueLabel={t('admin.salesStats.sales.subscriptions')}
+      />
    </div>
  );
 }
--- a/src/components/sales-stats/TrialsTab.tsx
+++ b/src/components/sales-stats/TrialsTab.tsx
@@ -7,7 +7,7 @@ import { SALES_STATS } from '../../constants/salesStats';
 import { StatCard } from '../stats';

 import { DonutChart } from './DonutChart';
-import { SimpleAreaChart } from './SimpleAreaChart';
+import { DualAreaChart } from './DualAreaChart';

 interface TrialsTabProps {
  params: SalesStatsParams;
@@ -51,14 +51,19 @@ export function TrialsTab({ params }: TrialsTabProps) {
    color: SALES_STATS.PROVIDER_COLORS[item.provider as keyof typeof SALES_STATS.PROVIDER_COLORS],
  }));

-  const areaData = data.daily.map((item) => ({
+  const dualData = data.daily.map((item) => ({
    date: item.date,
-    value: item.count,
+    series1: item.registrations,
+    series2: item.trials,
  }));

  return (
    <div className="space-y-4">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <StatCard
+          label={t('admin.salesStats.trials.totalRegistrations')}
+          value={data.total_registrations}
+        />
        <StatCard label={t('admin.salesStats.trials.total')} value={data.total_trials} />
        <StatCard
          label={t('admin.salesStats.trials.conversion')}
@@ -73,12 +78,12 @@ export function TrialsTab({ params }: TrialsTabProps) {

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <DonutChart data={pieData} title={t('admin.salesStats.trials.byProvider')} />
-        <SimpleAreaChart
-          data={areaData}
+        <DualAreaChart
+          data={dualData}
          title={t('admin.salesStats.trials.dailyChart')}
          chartId="trials-daily"
-          valueLabel={t('admin.salesStats.trials.registrations')}
-          color={SALES_STATS.PROVIDER_COLORS.telegram}
+          series1Label={t('admin.salesStats.trials.totalRegistrations')}
+          series2Label={t('admin.salesStats.trials.trialsIssued')}
        />
      </div>
    </div>
--- a/src/components/sales-stats/index.ts
+++ b/src/components/sales-stats/index.ts
@@ -1,6 +1,8 @@
 export { AddonsTab } from './AddonsTab';
 export { DepositsTab } from './DepositsTab';
 export { DonutChart } from './DonutChart';
+export { DualAreaChart } from './DualAreaChart';
+export { MultiSeriesAreaChart } from './MultiSeriesAreaChart';
 export { PeriodSelector } from './PeriodSelector';
 export { RenewalsTab } from './RenewalsTab';
 export { SalesTab } from './SalesTab';
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1106,10 +1106,12 @@
      },
      "trials": {
        "total": "Total Trials",
+        "totalRegistrations": "Registrations",
+        "trialsIssued": "Trials Issued",
        "conversion": "Conversion Rate",
        "avgDuration": "Avg Duration",
        "byProvider": "By Registration Source",
-        "dailyChart": "Daily Registrations",
+        "dailyChart": "Daily Registrations & Trials",
        "registrations": "Registrations"
      },
      "sales": {
@@ -1118,7 +1120,9 @@
        "topTariff": "Top Tariff",
        "byTariff": "Sales by Tariff",
        "byPeriod": "By Subscription Period",
-        "dailyChart": "Daily Sales"
+        "dailyChart": "Daily Sales",
+        "dailyByTariff": "Sales by Tariff per Day",
+        "subscriptions": "Subscriptions"
      },
      "renewals": {
        "total": "Total Renewals",
@@ -1134,6 +1138,8 @@
        "totalPurchases": "Total Purchases",
        "totalGb": "Total Traffic",
        "revenue": "Revenue",
+        "devicePurchases": "Device Purchases",
+        "deviceRevenue": "Device Revenue",
        "byPackage": "By Package Size",
        "dailyChart": "Daily Purchases",
        "purchases": "Purchases"
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -929,10 +929,12 @@
      },
      "trials": {
        "total": "کل آزمایشی",
+        "totalRegistrations": "ثبت‌نام‌ها",
+        "trialsIssued": "آزمایشی صادرشده",
        "conversion": "نرخ تبدیل",
        "avgDuration": "میانگین مدت",
        "byProvider": "بر اساس منبع",
-        "dailyChart": "ثبت‌نام روزانه",
+        "dailyChart": "ثبت‌نام و آزمایشی روزانه",
        "registrations": "ثبت‌نام"
      },
      "sales": {
@@ -941,7 +943,9 @@
        "topTariff": "تعرفه برتر",
        "byTariff": "بر اساس تعرفه",
        "byPeriod": "بر اساس دوره",
-        "dailyChart": "فروش روزانه"
+        "dailyChart": "فروش روزانه",
+        "dailyByTariff": "فروش روزانه بر اساس تعرفه",
+        "subscriptions": "اشتراک‌ها"
      },
      "renewals": {
        "total": "کل تمدیدها",
@@ -957,6 +961,8 @@
        "totalPurchases": "کل خرید",
        "totalGb": "کل ترافیک",
        "revenue": "درآمد",
+        "devicePurchases": "خرید دستگاه",
+        "deviceRevenue": "درآمد دستگاه",
        "byPackage": "بر اساس بسته",
        "dailyChart": "خرید روزانه",
        "purchases": "خرید"
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -1127,10 +1127,12 @@
      },
      "trials": {
        "total": "Всего триалов",
+        "totalRegistrations": "Регистрации",
+        "trialsIssued": "Выданные триалы",
        "conversion": "Конверсия",
        "avgDuration": "Средняя длит.",
        "byProvider": "По источнику регистрации",
-        "dailyChart": "Регистрации по дням",
+        "dailyChart": "Регистрации и триалы по дням",
        "registrations": "Регистрации"
      },
      "sales": {
@@ -1139,7 +1141,9 @@
        "topTariff": "Топ тариф",
        "byTariff": "Продажи по тарифам",
        "byPeriod": "По периоду подписки",
-        "dailyChart": "Продажи по дням"
+        "dailyChart": "Продажи по дням",
+        "dailyByTariff": "Продажи по тарифам по дням",
+        "subscriptions": "Подписки"
      },
      "renewals": {
        "total": "Всего продлений",
@@ -1155,6 +1159,8 @@
        "totalPurchases": "Всего покупок",
        "totalGb": "Всего трафика",
        "revenue": "Доход",
+        "devicePurchases": "Покупки устройств",
+        "deviceRevenue": "Доход от устройств",
        "byPackage": "По размеру пакета",
        "dailyChart": "Покупки по дням",
        "purchases": "Покупки"
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -929,10 +929,12 @@
      },
      "trials": {
        "total": "试用总数",
+        "totalRegistrations": "注册数",
+        "trialsIssued": "已发放试用",
        "conversion": "转化率",
        "avgDuration": "平均时长",
        "byProvider": "按注册来源",
-        "dailyChart": "每日注册",
+        "dailyChart": "每日注册与试用",
        "registrations": "注册"
      },
      "sales": {
@@ -941,7 +943,9 @@
        "topTariff": "热门套餐",
        "byTariff": "按套餐",
        "byPeriod": "按订阅周期",
-        "dailyChart": "每日销售"
+        "dailyChart": "每日销售",
+        "dailyByTariff": "每日按套餐销售",
+        "subscriptions": "订阅"
      },
      "renewals": {
        "total": "续订总数",
@@ -957,6 +961,8 @@
        "totalPurchases": "购买总数",
        "totalGb": "总流量",
        "revenue": "收入",
+        "devicePurchases": "设备购买",
+        "deviceRevenue": "设备收入",
        "byPackage": "按套餐大小",
        "dailyChart": "每日购买",
        "purchases": "购买"