1"use client";
2
3import { StatTile, Tabs, type IconKeys } from "@versable-git/ui";
4import { useState } from "react";
5
6// A dashboard's opening row: one tile per headline number, in an auto-fit
7// grid that reflows without breakpoint tuning. Tiles that lead somewhere
8// carry href and arrow; purely informational tiles omit both. The Tabs knob
9// switches the same four tiles between their three shipped states: plain
10// values, values with a trend line, and the loading placeholder that keeps
11// every label and icon visible while only the number is still arriving.
12type View = "values" | "trend" | "loading";
13
14interface Stat {
15  Icon: IconKeys;
16  tone?: string;
17  label: string;
18  value: string;
19  hint: string;
20  href?: string;
21  arrow?: boolean;
22  trend?: "up" | "down" | "flat";
23  trendLabel?: string;
24}
25
26const base: Stat[] = [
27  {
28    Icon: "Success",
29    tone: "text-success",
30    label: "Active products",
31    value: "12,480",
32    hint: "live in the catalog",
33    href: "#active",
34    arrow: true,
35    trend: "up",
36    trendLabel: "+4% this week",
37  },
38  {
39    Icon: "Refresh",
40    tone: "text-accent",
41    label: "Processing now",
42    value: "324",
43    hint: "across 3 running jobs",
44    href: "#jobs",
45    arrow: true,
46    trend: "flat",
47    trendLabel: "steady",
48  },
49  {
50    Icon: "Warning",
51    tone: "text-warning",
52    label: "Errors to resolve",
53    value: "17",
54    hint: "waiting in the queue",
55    href: "#errors",
56    arrow: true,
57    trend: "down",
58    trendLabel: "-6 since yesterday",
59  },
60  {
61    Icon: "Database",
62    label: "Onboarded this month",
63    value: "1,908",
64    hint: "parts onboarded",
65  },
66];
67
68export function DashboardStats() {
69  const [view, setView] = useState<View>("values");
70  return (
71    <div className="flex flex-col gap-4">
72      <Tabs
73        size="sm"
74        value={view}
75        onChange={(v) => setView(v as View)}
76        items={[
77          { value: "values", label: "Values" },
78          { value: "trend", label: "With trend" },
79          { value: "loading", label: "Loading" },
80        ]}
81      />
82      <div className="grid grid-cols-[repeat(auto-fit,minmax(12.5rem,1fr))] gap-4">
83        {base.map((s) => {
84          if (view === "loading") {
85            return <StatTile key={s.label} Icon={s.Icon} tone={s.tone} label={s.label} value="" hint={s.hint} loading />;
86          }
87          if (view === "trend") {
88            return <StatTile key={s.label} {...s} />;
89          }
90          const { trend: _trend, trendLabel: _trendLabel, ...rest } = s;
91          return <StatTile key={s.label} {...rest} />;
92        })}
93      </div>
94    </div>
95  );
96}
97