mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
fix(sales-stats): ровные иконки в карточках + не дублировать иконку
- StatCard: лейбл сверху, чип+значение в одной строке (чип центрируется ровно по значению, дельта ушла под строку) — иконки больше не «плавают» по вертикали из-за разной высоты карточек. - «Активные подписки»: TicketIcon вместо SubscriptionIcon (та визуально как искра и дублировала «Новые триалы»).
This commit is contained in:
@@ -42,7 +42,10 @@ export function StatCard({
|
||||
|
||||
return (
|
||||
<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 && (
|
||||
<span
|
||||
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${toneStyle.chip}`}
|
||||
@@ -50,16 +53,15 @@ export function StatCard({
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-xs text-dark-500 sm:text-sm">{label}</div>
|
||||
<div className={`truncate text-base font-semibold sm:text-lg ${valueClass}`}>{value}</div>
|
||||
<div className={`min-w-0 flex-1 truncate text-lg font-semibold sm:text-xl ${valueClass}`}>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
{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)}%
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
RepeatIcon,
|
||||
RocketIcon,
|
||||
SparklesIcon,
|
||||
SubscriptionIcon,
|
||||
TicketIcon,
|
||||
WalletIcon,
|
||||
} from '../components/icons';
|
||||
import { StatCard } from '../components/stats';
|
||||
@@ -165,7 +165,7 @@ export default function AdminSalesStats() {
|
||||
<StatCard
|
||||
label={t('admin.salesStats.summary.activeSubs')}
|
||||
value={summaryLoading ? '...' : (summary?.active_subscriptions ?? 0)}
|
||||
icon={<SubscriptionIcon className="h-5 w-5" />}
|
||||
icon={<TicketIcon className="h-5 w-5" />}
|
||||
tone="accent"
|
||||
/>
|
||||
<StatCard
|
||||
|
||||
Reference in New Issue
Block a user