From 21fc75a17d1a11b74044f78eb236249e30905982 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 12:04:35 +0300
Subject: [PATCH] refactor: simplify dashboard stats grid to 2 cards

Remove Subscription and Earnings cards from StatsGrid.
Merge earnings display into Referrals card as subtitle.
Remove subscription-status onboarding step (target removed).
---
 src/components/dashboard/StatsGrid.tsx | 81 ++++++--------------------
 src/pages/Dashboard.tsx                |  7 ---
 2 files changed, 17 insertions(+), 71 deletions(-)

diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 55ba036..64d6bb5 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -10,7 +10,6 @@ import { getGlassColors } from '../../utils/glassTheme';
 interface StatsGridProps {
   balanceRubles: number;
   subscription: Subscription | null;
-  subLoading: boolean;
   referralCount: number;
   earningsRubles: number;
   refLoading: boolean;
@@ -38,7 +37,6 @@ const ChevronIcon = ({ color }: { color: string }) => (
 export default function StatsGrid({
   balanceRubles,
   subscription,
-  subLoading,
   referralCount,
   earningsRubles,
   refLoading,
@@ -81,37 +79,12 @@ export default function StatsGrid({
       loading: false,
       onboarding: 'balance',
     },
-    {
-      label: t('dashboard.stats.subscription'),
-      value: subscription ? `${subscription.days_left}` : '—',
-      valueSuffix: subscription ? ` ${t('subscription.daysShort')}` : '',
-      valueColor: g.text,
-      to: '/subscription',
-      icon: (color: string) => (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke={color}
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" />
-          <circle cx="7" cy="7" r="1" />
-        </svg>
-      ),
-      iconBg: g.trackBg,
-      iconColor: g.textSecondary,
-      loading: subLoading,
-      onboarding: 'subscription-status',
-    },
     {
       label: t('dashboard.stats.referrals'),
       value: `${referralCount}`,
       valueColor: g.text,
+      subtitle: `${formatPositive(earningsRubles)} ${currencySymbol}`,
+      subtitleColor: zone.mainHex,
       to: '/referral',
       icon: (color: string) => (
         <svg
@@ -134,31 +107,6 @@ export default function StatsGrid({
       iconColor: g.textSecondary,
       loading: refLoading,
     },
-    {
-      label: t('dashboard.stats.earnings'),
-      value: formatPositive(earningsRubles),
-      valueColor: zone.mainHex,
-      to: '/referral',
-      icon: (color: string) => (
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke={color}
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <circle cx="12" cy="12" r="10" />
-          <path d="M12 6v12M8.5 9.5c0-1.38 1.57-2.5 3.5-2.5s3.5 1.12 3.5 2.5-1.57 2.5-3.5 2.5-3.5 1.12-3.5 2.5 1.57 2.5 3.5 2.5 3.5-1.12 3.5-2.5" />
-        </svg>
-      ),
-      iconBg: `${zone.mainHex}12`,
-      iconColor: zone.mainHex,
-      loading: refLoading,
-    },
   ];
 
   return (
@@ -194,17 +142,22 @@ export default function StatsGrid({
           {card.loading ? (
             <div className="skeleton h-8 w-20" />
           ) : (
-            <div
-              className="text-[28px] font-bold leading-tight tracking-tight transition-colors duration-500"
-              style={{ color: card.valueColor }}
-            >
-              {card.value}
-              {card.valueSuffix && (
-                <span className="ml-0.5 text-base font-medium text-dark-50/35">
-                  {card.valueSuffix}
-                </span>
+            <>
+              <div
+                className="text-[28px] font-bold leading-tight tracking-tight transition-colors duration-500"
+                style={{ color: card.valueColor }}
+              >
+                {card.value}
+              </div>
+              {card.subtitle && (
+                <div
+                  className="mt-0.5 text-[13px] font-semibold"
+                  style={{ color: card.subtitleColor }}
+                >
+                  {card.subtitle}
+                </div>
               )}
-            </div>
+            </>
           )}
         </Link>
       ))}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 8806ba0..64dd386 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -191,12 +191,6 @@ export default function Dashboard() {
         description: t('onboarding.steps.balance.description'),
         placement: 'bottom',
       },
-      {
-        target: 'subscription-status',
-        title: t('onboarding.steps.subscription.title'),
-        description: t('onboarding.steps.subscription.description'),
-        placement: 'bottom',
-      },
     ];
 
     if (subscription?.subscription_url) {
@@ -270,7 +264,6 @@ export default function Dashboard() {
       <StatsGrid
         balanceRubles={balanceData?.balance_rubles || 0}
         subscription={subscription}
-        subLoading={subLoading}
         referralCount={referralInfo?.total_referrals || 0}
         earningsRubles={referralInfo?.total_earnings_rubles || 0}
         refLoading={refLoading}