feat(sales-stats): карточки возвратов в сводке

Две карточки — количество и сумма возвратов за период (красный тон).
Сетку сводки перевёл на 2/5 (10 карточек делятся ровно, без пустых
ячеек). StatCard получил invertDelta: для «меньше — лучше» метрик рост
красится в красный, падение в зелёный (стрелка по факту). 4 локали.
This commit is contained in:
c0mrade
2026-06-02 16:53:30 +03:00
parent 40c684cc88
commit bd12113294
7 changed files with 47 additions and 6 deletions

View File

@@ -26,6 +26,9 @@ interface StatCardProps {
valueClassName?: string;
/** Optional period-over-period change shown under the value. */
delta?: StatCardDelta | null;
/** For "lower is better" metrics (e.g. refunds): keep the real arrow but flip
* the colour, so a rise reads as bad (red) and a drop as good (green). */
invertDelta?: boolean;
}
export function StatCard({
@@ -35,10 +38,18 @@ export function StatCard({
tone = 'neutral',
valueClassName,
delta,
invertDelta = false,
}: StatCardProps) {
const toneStyle = TONE[tone];
const valueClass = valueClassName ?? toneStyle.value;
const trendStyle = delta ? (TREND_STYLES[delta.trend] ?? TREND_STYLES.stable) : null;
const baseTrend = delta ? (TREND_STYLES[delta.trend] ?? TREND_STYLES.stable) : null;
const trendStyle =
baseTrend && invertDelta && delta && delta.trend !== 'stable'
? {
arrow: baseTrend.arrow,
className: TREND_STYLES[delta.trend === 'up' ? 'down' : 'up'].className,
}
: baseTrend;
return (
<div className="rounded-xl bg-dark-800/30 p-3 transition-colors hover:bg-dark-800/50">