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

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

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>
+  );
+}

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>
+  );
+}

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>
   );
 }

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>

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';