{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-3",
  "title": "Flush Six Metric Strip",
  "description": "Compact KPI strip of six metric tiles in a flush grid, each with label, value, and directional delta, switched by a quarter select.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "select",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/dashboard/3/dashboard-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst QUARTERS = [\n  { value: \"q2-2026\", label: \"Q2 2026\" },\n  { value: \"q1-2026\", label: \"Q1 2026\" },\n  { value: \"q4-2025\", label: \"Q4 2025\" },\n  { value: \"q3-2025\", label: \"Q3 2025\" },\n]\n\ntype Kpi = { label: string; value: string; delta: string; good: boolean }\n\nconst KPIS_BY_QUARTER: Record<string, Kpi[]> = {\n  \"q2-2026\": [\n    { label: \"Total Revenue\", value: \"$128,450\", delta: \"+11.4%\", good: true },\n    { label: \"Active Accounts\", value: \"3,872\", delta: \"+6.8%\", good: true },\n    { label: \"Avg. Order Value\", value: \"$248\", delta: \"-2.1%\", good: false },\n    { label: \"Net Promoter Score\", value: \"67\", delta: \"+4 pts\", good: true },\n    { label: \"Refund Rate\", value: \"0.9%\", delta: \"-0.3%\", good: true },\n    { label: \"Support CSAT\", value: \"94.2%\", delta: \"+1.7%\", good: true },\n  ],\n  \"q1-2026\": [\n    { label: \"Total Revenue\", value: \"$115,300\", delta: \"+7.2%\", good: true },\n    { label: \"Active Accounts\", value: \"3,625\", delta: \"+4.1%\", good: true },\n    { label: \"Avg. Order Value\", value: \"$253\", delta: \"+1.2%\", good: true },\n    { label: \"Net Promoter Score\", value: \"63\", delta: \"+2 pts\", good: true },\n    { label: \"Refund Rate\", value: \"1.2%\", delta: \"+0.1%\", good: false },\n    { label: \"Support CSAT\", value: \"92.5%\", delta: \"+0.8%\", good: true },\n  ],\n  \"q4-2025\": [\n    { label: \"Total Revenue\", value: \"$107,540\", delta: \"+9.6%\", good: true },\n    { label: \"Active Accounts\", value: \"3,482\", delta: \"+5.5%\", good: true },\n    { label: \"Avg. Order Value\", value: \"$250\", delta: \"-0.8%\", good: false },\n    { label: \"Net Promoter Score\", value: \"61\", delta: \"+5 pts\", good: true },\n    { label: \"Refund Rate\", value: \"1.1%\", delta: \"-0.2%\", good: true },\n    { label: \"Support CSAT\", value: \"91.7%\", delta: \"+2.3%\", good: true },\n  ],\n  \"q3-2025\": [\n    { label: \"Total Revenue\", value: \"$98,120\", delta: \"+4.3%\", good: true },\n    { label: \"Active Accounts\", value: \"3,301\", delta: \"+3.2%\", good: true },\n    { label: \"Avg. Order Value\", value: \"$252\", delta: \"+0.5%\", good: true },\n    { label: \"Net Promoter Score\", value: \"56\", delta: \"+1 pt\", good: true },\n    { label: \"Refund Rate\", value: \"1.3%\", delta: \"+0.2%\", good: false },\n    { label: \"Support CSAT\", value: \"89.4%\", delta: \"+1.1%\", good: true },\n  ],\n}\n\nexport default function DashboardBlock() {\n  const [quarter, setQuarter] = React.useState(\"q2-2026\")\n  const quarterLabel =\n    QUARTERS.find((q) => q.value === quarter)?.label ?? \"Q2 2026\"\n  const kpis = KPIS_BY_QUARTER[quarter] ?? KPIS_BY_QUARTER[\"q2-2026\"]\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"mx-auto flex w-full max-w-5xl flex-col gap-8\">\n        <div className=\"flex flex-wrap items-end justify-between gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"text-xs font-medium tracking-widest text-muted-foreground uppercase\">\n              Acme Corp\n            </p>\n            <h1 className=\"font-heading text-2xl font-bold tracking-tight\">\n              Performance Overview\n            </h1>\n          </div>\n          <Select\n            items={QUARTERS}\n            value={quarter}\n            onValueChange={(v) => v && setQuarter(v)}\n          >\n            <SelectTrigger aria-label=\"Quarter\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {QUARTERS.map((q) => (\n                <SelectItem key={q.value} value={q.value}>\n                  {q.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n\n        <Separator />\n\n        <div className=\"grid grid-cols-2 gap-px bg-border sm:grid-cols-3 md:grid-cols-6\">\n          {kpis.map((kpi) => {\n            const down = kpi.delta.trim().startsWith(\"-\")\n            return (\n              <div\n                key={kpi.label}\n                className=\"flex flex-col gap-3 bg-background px-4 py-5\"\n              >\n                <span className=\"text-xs font-medium text-muted-foreground\">\n                  {kpi.label}\n                </span>\n                <span className=\"text-2xl font-bold tracking-tight tabular-nums\">\n                  {kpi.value}\n                </span>\n                <span\n                  className={\n                    kpi.good\n                      ? \"inline-flex w-fit items-center gap-0.5 rounded-md border border-border bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground tabular-nums\"\n                      : \"inline-flex w-fit items-center gap-0.5 rounded-md border border-destructive/30 bg-destructive/10 px-1.5 py-0.5 text-xs font-medium text-destructive tabular-nums\"\n                  }\n                >\n                  {down ? (\n                    <IconPlaceholder\n                      lucide=\"ChevronDown\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDown\"\n                      remixicon=\"RiArrowDownSLine\"\n                      className=\"size-3.5 shrink-0\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : (\n                    <IconPlaceholder\n                      lucide=\"ChevronUp\"\n                      tabler=\"IconChevronUp\"\n                      hugeicons=\"ArrowUp01Icon\"\n                      phosphor=\"CaretUp\"\n                      remixicon=\"RiArrowUpSLine\"\n                      className=\"size-3.5 shrink-0\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {kpi.delta}\n                </span>\n              </div>\n            )\n          })}\n        </div>\n\n        <Separator />\n\n        <p className=\"text-xs text-muted-foreground\">\n          Metrics reflect confirmed data for {quarterLabel}. Comparisons are\n          against the prior quarter.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "436px",
    "tier": "free"
  },
  "categories": [
    "dashboard"
  ],
  "type": "registry:block"
}