Claude
8e937344ff
Phase 2 pattern extraction from the design/ui-revamp-2026-06 spec. - KPIStat: extract the stat card pattern from DashboardClient (used four times inline). Supports tone (default/primary/accent/warning/danger) and an optional trend indicator. Reuses .admin-stat-card* CSS classes. - EmptyState: generic centered icon + title + description + single primary CTA. Action renders as <Link> when href is provided, else a <button>; both use .ha-btn-primary. - LoadingState: skeleton list driven by .ha-skeleton. Renders an optional ha-eyebrow label above N rows (icon tile + label + value placeholders). Each row uses the new admin design tokens. - AdminBadge: tighten variants to the new design tokens. Legacy variant= prop kept for back-compat (default/success/warning/danger/ info); new tone= prop adds neutral/primary/accent/success. All colors now reference --admin-* tokens; no hardcoded hex values. Added a 1px tone-aware border for stronger definition on the cream canvas. AdminStatusBadge + AdminCountBadge updated to use the new tone prop directly. - design-system/index.tsx: re-export KPIStat, EmptyState, LoadingState from the design-system barrel alongside AdminBadge. npx tsc --noEmit clean.
98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
|
|
|
|
type KPITone = "default" | "primary" | "accent" | "warning" | "danger";
|
|
|
|
type KPIStatProps = {
|
|
/** Eyebrow label above the value (e.g. "Today's Orders") */
|
|
label: string;
|
|
/** The primary value to display. Accepts a node so callers can pass formatted strings, JSX, etc. */
|
|
value: ReactNode;
|
|
/** Optional icon element (typically a lucide-react icon) shown in the leading tile. */
|
|
icon?: ReactNode;
|
|
/** Controls the icon tile's background + icon color. Defaults to "default". */
|
|
tone?: KPITone;
|
|
/** Optional trend indicator rendered next to the value. */
|
|
trend?: { value: string; direction: "up" | "down" | "flat" };
|
|
/** Extra class names appended to the card. */
|
|
className?: string;
|
|
};
|
|
|
|
// Tone -> icon-tile background / icon color. Pulled from --admin-* tokens
|
|
// introduced in the Phase 1 palette unification. No hardcoded hex values.
|
|
const toneStyles: Record<KPITone, { bg: string; fg: string }> = {
|
|
default: { bg: "var(--admin-bg-subtle)", fg: "var(--admin-text-secondary)" },
|
|
primary: { bg: "var(--admin-primary-soft)", fg: "var(--admin-primary)" },
|
|
accent: { bg: "var(--admin-accent-soft)", fg: "var(--admin-accent)" },
|
|
warning: { bg: "var(--admin-warning-soft)", fg: "var(--admin-warning)" },
|
|
danger: { bg: "var(--admin-danger-soft)", fg: "var(--admin-danger)" },
|
|
};
|
|
|
|
// Trend direction -> icon + color. "up" reads as positive (primary),
|
|
// "down" as negative (danger), "flat" as neutral.
|
|
const trendStyles: Record<"up" | "down" | "flat", { Icon: typeof ArrowUp; color: string }> = {
|
|
up: { Icon: ArrowUp, color: "var(--admin-primary)" },
|
|
down: { Icon: ArrowDown, color: "var(--admin-danger)" },
|
|
flat: { Icon: ArrowRight, color: "var(--admin-text-muted)" },
|
|
};
|
|
|
|
/**
|
|
* KPIStat — compact metric card for admin surfaces.
|
|
*
|
|
* Extracted from the inline pattern previously duplicated four times in
|
|
* `DashboardClient.tsx`. Reuses the `.admin-stat-card*` classes from
|
|
* `admin-design-system.css` for the shell, then applies tone-aware
|
|
* background/foreground via inline `var(--admin-*)` styles.
|
|
*/
|
|
export default function KPIStat({
|
|
label,
|
|
value,
|
|
icon,
|
|
tone = "default",
|
|
trend,
|
|
className = "",
|
|
}: KPIStatProps) {
|
|
const { bg, fg } = toneStyles[tone];
|
|
|
|
return (
|
|
<div className={`admin-stat-card ${className}`.trim()}>
|
|
<div className="admin-stat-card-inner">
|
|
{icon && (
|
|
<div
|
|
className="admin-stat-icon"
|
|
style={{ backgroundColor: bg, color: fg }}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div className="admin-stat-body">
|
|
<span className="admin-stat-label">{label}</span>
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="admin-stat-value">{value}</span>
|
|
{trend && <TrendIndicator trend={trend} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TrendIndicator({
|
|
trend,
|
|
}: {
|
|
trend: { value: string; direction: "up" | "down" | "flat" };
|
|
}) {
|
|
const { Icon, color } = trendStyles[trend.direction];
|
|
return (
|
|
<span
|
|
className="inline-flex items-center gap-0.5 text-[0.6875rem] font-semibold"
|
|
style={{ color }}
|
|
>
|
|
<Icon className="h-3 w-3" strokeWidth={2.25} aria-hidden="true" />
|
|
{trend.value}
|
|
</span>
|
|
);
|
|
}
|