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).
This commit is contained in:
Fringg
2026-02-25 12:04:35 +03:00
parent 70e1ed60bd
commit 21fc75a17d
2 changed files with 17 additions and 71 deletions

View File

@@ -10,7 +10,6 @@ import { getGlassColors } from '../../utils/glassTheme';
interface StatsGridProps { interface StatsGridProps {
balanceRubles: number; balanceRubles: number;
subscription: Subscription | null; subscription: Subscription | null;
subLoading: boolean;
referralCount: number; referralCount: number;
earningsRubles: number; earningsRubles: number;
refLoading: boolean; refLoading: boolean;
@@ -38,7 +37,6 @@ const ChevronIcon = ({ color }: { color: string }) => (
export default function StatsGrid({ export default function StatsGrid({
balanceRubles, balanceRubles,
subscription, subscription,
subLoading,
referralCount, referralCount,
earningsRubles, earningsRubles,
refLoading, refLoading,
@@ -81,37 +79,12 @@ export default function StatsGrid({
loading: false, loading: false,
onboarding: 'balance', 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'), label: t('dashboard.stats.referrals'),
value: `${referralCount}`, value: `${referralCount}`,
valueColor: g.text, valueColor: g.text,
subtitle: `${formatPositive(earningsRubles)} ${currencySymbol}`,
subtitleColor: zone.mainHex,
to: '/referral', to: '/referral',
icon: (color: string) => ( icon: (color: string) => (
<svg <svg
@@ -134,31 +107,6 @@ export default function StatsGrid({
iconColor: g.textSecondary, iconColor: g.textSecondary,
loading: refLoading, 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 ( return (
@@ -194,17 +142,22 @@ export default function StatsGrid({
{card.loading ? ( {card.loading ? (
<div className="skeleton h-8 w-20" /> <div className="skeleton h-8 w-20" />
) : ( ) : (
<div <>
className="text-[28px] font-bold leading-tight tracking-tight transition-colors duration-500" <div
style={{ color: card.valueColor }} className="text-[28px] font-bold leading-tight tracking-tight transition-colors duration-500"
> style={{ color: card.valueColor }}
{card.value} >
{card.valueSuffix && ( {card.value}
<span className="ml-0.5 text-base font-medium text-dark-50/35"> </div>
{card.valueSuffix} {card.subtitle && (
</span> <div
className="mt-0.5 text-[13px] font-semibold"
style={{ color: card.subtitleColor }}
>
{card.subtitle}
</div>
)} )}
</div> </>
)} )}
</Link> </Link>
))} ))}

View File

@@ -191,12 +191,6 @@ export default function Dashboard() {
description: t('onboarding.steps.balance.description'), description: t('onboarding.steps.balance.description'),
placement: 'bottom', placement: 'bottom',
}, },
{
target: 'subscription-status',
title: t('onboarding.steps.subscription.title'),
description: t('onboarding.steps.subscription.description'),
placement: 'bottom',
},
]; ];
if (subscription?.subscription_url) { if (subscription?.subscription_url) {
@@ -270,7 +264,6 @@ export default function Dashboard() {
<StatsGrid <StatsGrid
balanceRubles={balanceData?.balance_rubles || 0} balanceRubles={balanceData?.balance_rubles || 0}
subscription={subscription} subscription={subscription}
subLoading={subLoading}
referralCount={referralInfo?.total_referrals || 0} referralCount={referralInfo?.total_referrals || 0}
earningsRubles={referralInfo?.total_earnings_rubles || 0} earningsRubles={referralInfo?.total_earnings_rubles || 0}
refLoading={refLoading} refLoading={refLoading}