fix(sales-stats): ровные иконки в карточках + не дублировать иконку

- StatCard: лейбл сверху, чип+значение в одной строке (чип центрируется ровно по
  значению, дельта ушла под строку) — иконки больше не «плавают» по вертикали
  из-за разной высоты карточек.
- «Активные подписки»: TicketIcon вместо SubscriptionIcon (та визуально как искра
  и дублировала «Новые триалы»).
This commit is contained in:
c0mrade
2026-06-02 15:39:25 +03:00
parent dfc7768a40
commit 622ec318da
2 changed files with 13 additions and 11 deletions

View File

@@ -42,7 +42,10 @@ export function StatCard({
return ( return (
<div className="rounded-xl bg-dark-800/30 p-3 transition-colors hover:bg-dark-800/50"> <div className="rounded-xl bg-dark-800/30 p-3 transition-colors hover:bg-dark-800/50">
<div className="flex items-center gap-2.5"> <div className="truncate text-xs text-dark-500 sm:text-sm">{label}</div>
{/* Chip is centred against the value line only (delta sits below the whole
row), so the icon lands in the same spot on every card. */}
<div className="mt-1.5 flex items-center gap-2.5">
{icon && ( {icon && (
<span <span
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${toneStyle.chip}`} className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${toneStyle.chip}`}
@@ -50,16 +53,15 @@ export function StatCard({
{icon} {icon}
</span> </span>
)} )}
<div className="min-w-0 flex-1"> <div className={`min-w-0 flex-1 truncate text-lg font-semibold sm:text-xl ${valueClass}`}>
<div className="truncate text-xs text-dark-500 sm:text-sm">{label}</div> {value}
<div className={`truncate text-base font-semibold sm:text-lg ${valueClass}`}>{value}</div> </div>
</div>
{trendStyle && ( {trendStyle && (
<div className={`mt-0.5 text-xs font-medium ${trendStyle.className}`}> <div className={`mt-1.5 text-xs font-medium ${trendStyle.className}`}>
{trendStyle.arrow} {Math.abs(delta!.percent)}% {trendStyle.arrow} {Math.abs(delta!.percent)}%
</div> </div>
)} )}
</div> </div>
</div>
</div>
); );
} }

View File

@@ -14,7 +14,7 @@ import {
RepeatIcon, RepeatIcon,
RocketIcon, RocketIcon,
SparklesIcon, SparklesIcon,
SubscriptionIcon, TicketIcon,
WalletIcon, WalletIcon,
} from '../components/icons'; } from '../components/icons';
import { StatCard } from '../components/stats'; import { StatCard } from '../components/stats';
@@ -165,7 +165,7 @@ export default function AdminSalesStats() {
<StatCard <StatCard
label={t('admin.salesStats.summary.activeSubs')} label={t('admin.salesStats.summary.activeSubs')}
value={summaryLoading ? '...' : (summary?.active_subscriptions ?? 0)} value={summaryLoading ? '...' : (summary?.active_subscriptions ?? 0)}
icon={<SubscriptionIcon className="h-5 w-5" />} icon={<TicketIcon className="h-5 w-5" />}
tone="accent" tone="accent"
/> />
<StatCard <StatCard