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 (
|
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>
|
|
||||||
{trendStyle && (
|
|
||||||
<div className={`mt-0.5 text-xs font-medium ${trendStyle.className}`}>
|
|
||||||
{trendStyle.arrow} {Math.abs(delta!.percent)}%
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{trendStyle && (
|
||||||
|
<div className={`mt-1.5 text-xs font-medium ${trendStyle.className}`}>
|
||||||
|
{trendStyle.arrow} {Math.abs(delta!.percent)}%
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user