"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type KpiFormat = "currency" | "number" | "percent"; export interface Kpi { id: string; label: string; format: KpiFormat; /** One series per period id, oldest first. The last point is the current value. */ series: Record; /** Previous period values for comparison, same length as series. */ previous?: Record; /** When true, going down is good (churn, refunds, response time). */ inverse?: boolean; /** Optional goal for the current value, shown as a progress bar. */ target?: number; /** Show this KPI as the large chart. */ featured?: boolean; /** How the headline number is made from the period: add it up (revenue, orders), take the latest (users, scores) or average it. Defaults to sum, or last for percentages. */ aggregate?: "sum" | "last" | "avg"; } export interface KpiDashboardGridProps { title?: string; kpis?: Kpi[]; periods?: { id: string; label: string; points: number; step: "day" | "week" | "month" }[]; /** Last day of the data as YYYY-MM-DD. */ endDate?: string; currency?: string; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", grid: "rgba(255,255,255,0.06)", on: "#F5F4F1", onText: "#0A0A0A", up: "#4ADE80", down: "#F87171", line: "#F5F4F1", accent: "#FB923C", ring: "rgba(245,244,241,0.6)", track: "rgba(255,255,255,0.08)", tip: "#1C1C1C" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", grid: "rgba(10,10,10,0.06)", on: "#0A0A0A", onText: "#FAFAF8", up: "#15803D", down: "#DC2626", line: "#0A0A0A", accent: "#EA580C", ring: "rgba(10,10,10,0.5)", track: "rgba(10,10,10,0.07)", tip: "#FFFFFF" }, }; type Pal = (typeof PALETTES)["dark"]; const DEFAULT_PERIODS = [ { id: "7d", label: "7D", points: 7, step: "day" as const }, { id: "30d", label: "30D", points: 30, step: "day" as const }, { id: "90d", label: "90D", points: 13, step: "week" as const }, { id: "12m", label: "12M", points: 12, step: "month" as const }, ]; // Seeded noise so server and client render the same numbers. function rng(seed: number) { let s = seed; return () => { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; } function makeSeries(seed: number, n: number, base: number, trend: number, noise: number, round = 0) { const r = rng(seed); return Array.from({ length: n }, (_, i) => { const v = base * (1 + trend * (i / Math.max(1, n - 1))) * (1 + (r() - 0.5) * noise); const f = 10 ** round; return Math.round(v * f) / f; }); } function build(id: string, label: string, format: KpiFormat, base: number, trend: number, noise: number, opts: Partial & { round?: number } = {}): Kpi { const series: Record = {}; const previous: Record = {}; DEFAULT_PERIODS.forEach((p, k) => { const scale = p.step === "week" ? 7 : p.step === "month" ? 30 : 1; const sums = (opts.aggregate ?? (format === "percent" ? "last" : "sum")) === "sum"; const b = sums ? base * scale : base; series[p.id] = makeSeries(id.length * 97 + k * 13 + 1, p.points, b, trend, noise, opts.round); previous[p.id] = makeSeries(id.length * 53 + k * 7 + 5, p.points, b / (1 + trend * 0.8), trend * 0.5, noise, opts.round); }); return { id, label, format, series, previous, ...opts }; } const DEFAULT_KPIS: Kpi[] = [ build("revenue", "Revenue", "currency", 4200, 0.32, 0.22, { featured: true }), build("users", "Active users", "number", 1850, 0.18, 0.16, { target: 2400, aggregate: "last" }), build("conversion", "Conversion rate", "percent", 3.4, 0.12, 0.12, { round: 1 }), build("aov", "Avg order value", "currency", 86, 0.06, 0.1, { round: 0, aggregate: "avg" }), build("churn", "Churn", "percent", 2.6, -0.2, 0.15, { inverse: true, round: 1 }), build("nps", "NPS", "number", 48, 0.1, 0.08, { round: 0, target: 60, aggregate: "last" }), ]; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; function dateLabel(end: string, stepsBack: number, step: "day" | "week" | "month") { const [y, m, d] = end.split("-").map(Number); if (step === "month") { const idx = (m - 1 - stepsBack + 1200) % 12; const year = y - Math.ceil(Math.max(0, stepsBack - (m - 1)) / 12); return `${MONTHS[idx]} ${year}`; } const t = Date.UTC(y, m - 1, d) - stepsBack * (step === "week" ? 7 : 1) * 864e5; const dt = new Date(t); return `${dt.getUTCDate()} ${MONTHS[dt.getUTCMonth()]}`; } function formatValue(v: number, f: KpiFormat, currency: string, compact = false) { if (f === "percent") return `${v.toFixed(1)}%`; const abs = Math.abs(v); const num = compact && abs >= 1000 ? (abs >= 1e6 ? `${(v / 1e6).toFixed(1)}M` : `${(v / 1000).toFixed(abs >= 1e5 ? 0 : 1)}k`) : Math.round(v).toLocaleString("en-US"); return f === "currency" ? `${currency}${num}` : num; } function CountUp({ value, format, currency, reduce }: { value: number; format: KpiFormat; currency: string; reduce: boolean }) { const ref = React.useRef(null); const from = React.useRef(value); React.useEffect(() => { const el = ref.current; if (!el) return; if (reduce) { el.textContent = formatValue(value, format, currency); from.current = value; return; } const c = animate(from.current, value, { duration: 0.7, ease: [0.22, 1, 0.36, 1], onUpdate: (v) => (el.textContent = formatValue(v, format, currency)) }); from.current = value; return () => c.stop(); }, [value, format, currency, reduce]); return {formatValue(value, format, currency)}; } function pathFor(values: number[], w: number, h: number, min: number, max: number, pad = 2) { const span = max - min || 1; return values.map((v, i) => `${i ? "L" : "M"}${((i / Math.max(1, values.length - 1)) * w).toFixed(1)},${(pad + (1 - (v - min) / span) * (h - pad * 2)).toFixed(1)}`).join(" "); } function Chart({ values, prev, labels, w, h, p, format, currency, big, color, uid }: { values: number[]; prev?: number[]; labels: string[]; w: number; h: number; p: Pal; format: KpiFormat; currency: string; big?: boolean; color: string; uid: string }) { const [hover, setHover] = React.useState(null); const all = [...values, ...(prev ?? [])]; const min = Math.min(...all) * (big ? 0.9 : 0.97); const max = Math.max(...all) * 1.03; const line = pathFor(values, w, h, min, max); const area = `${line} L${w},${h} L0,${h} Z`; const x = (i: number) => (i / Math.max(1, values.length - 1)) * w; const y = (v: number) => 2 + (1 - (v - min) / (max - min || 1)) * (h - 4); const move = (e: React.PointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); const i = Math.round(((e.clientX - r.left) / r.width) * (values.length - 1)); setHover(Math.max(0, Math.min(values.length - 1, i))); }; return (

{hover !== null && ( <>

{labels[hover]} {formatValue(values[hover], format, currency)} {prev && ( Prev {formatValue(prev[hover], format, currency)} )}

)}

); } export function KpiDashboardGrid({ title = "Overview", kpis = DEFAULT_KPIS, periods = DEFAULT_PERIODS, endDate = "2026-11-01", currency = "$", theme = "dark", className }: KpiDashboardGridProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId().replace(/:/g, ""); const [period, setPeriod] = React.useState(periods[1]?.id ?? periods[0].id); const [compare, setCompare] = React.useState(true); const [hidden, setHidden] = React.useState([]); const [menu, setMenu] = React.useState(false); const menuRef = React.useRef(null); React.useEffect(() => { if (!menu) return; const down = (e: MouseEvent) => menuRef.current && !menuRef.current.contains(e.target as Node) && setMenu(false); const key = (e: KeyboardEvent) => e.key === "Escape" && setMenu(false); document.addEventListener("mousedown", down); document.addEventListener("keydown", key); return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); }; }, [menu]); const per = periods.find((x) => x.id === period) ?? periods[0]; const labels = Array.from({ length: per.points }, (_, i) => dateLabel(endDate, per.points - 1 - i, per.step)); const visible = kpis.filter((k) => !hidden.includes(k.id)); const featured = visible.find((k) => k.featured); const rest = visible.filter((k) => k !== featured); const stats = (k: Kpi) => { const s = k.series[period] ?? []; const pv = k.previous?.[period]; const agg = k.aggregate ?? (k.format === "percent" ? "last" : "sum"); const of = (v: number[]) => (agg === "last" ? v[v.length - 1] : agg === "avg" ? v.reduce((a, b) => a + b, 0) / v.length : v.reduce((a, b) => a + b, 0)); const cur = of(s); const prevTotal = pv ? of(pv) : undefined; const delta = prevTotal ? ((cur - prevTotal) / prevTotal) * 100 : 0; const good = k.inverse ? delta <= 0 : delta >= 0; return { s, pv, cur, delta, good }; }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const deltaPill = (delta: number, good: boolean) => ( {Math.abs(delta).toFixed(1)}%{delta >= 0 ? " up" : " down"} vs previous period ); return (

{title}

{labels[0]} – {labels[labels.length - 1]}

{periods.map((x) => ( ))}

{menu && (

Show metrics

{kpis.map((k) => { const on = !hidden.includes(k.id); return ( setHidden((h) => (on ? [...h, k.id] : h.filter((x) => x !== k.id)))} className="h-3.5 w-3.5 cursor-pointer" style={{ accentColor: p.on }} /> {k.label} ); })} )}

{featured && (() => { const st = stats(featured); return (

{featured.label}

{deltaPill(st.delta, st.good)}

{labels[0]} {labels[Math.floor(labels.length / 2)]} {labels[labels.length - 1]}

{compare && (

)} ); })()} {rest.map((k) => { const st = stats(k); return (

{k.label}

{deltaPill(st.delta, st.good)}

{k.target ? (

{Math.round((st.s[st.s.length - 1] / k.target) * 100)}% of {formatValue(k.target, k.format, currency, true)} goal

) : ( )}

); })}

); } export default KpiDashboardGrid;