Flush Six Metric Strip

1"use client"
2 
3import * as React from "react"
4import {
5  Select,
6  SelectContent,
7  SelectItem,
8  SelectTrigger,
9  SelectValue,
10} from "@/components/ui/select"
11import { Separator } from "@/components/ui/separator"
12import { IconPlaceholder } from "@/components/icons/icon-placeholder"
13 
14const QUARTERS = [
15  { value: "q2-2026", label: "Q2 2026" },
16  { value: "q1-2026", label: "Q1 2026" },
17  { value: "q4-2025", label: "Q4 2025" },
18  { value: "q3-2025", label: "Q3 2025" },
19]
20 
21type Kpi = { label: string; value: string; delta: string; good: boolean }
22 
23const KPIS_BY_QUARTER: Record<string, Kpi[]> = {
24  "q2-2026": [
25    { label: "Total Revenue", value: "$128,450", delta: "+11.4%", good: true },
26    { label: "Active Accounts", value: "3,872", delta: "+6.8%", good: true },
27    { label: "Avg. Order Value", value: "$248", delta: "-2.1%", good: false },
28    { label: "Net Promoter Score", value: "67", delta: "+4 pts", good: true },
29    { label: "Refund Rate", value: "0.9%", delta: "-0.3%", good: true },
30    { label: "Support CSAT", value: "94.2%", delta: "+1.7%", good: true },
31  ],
32  "q1-2026": [
33    { label: "Total Revenue", value: "$115,300", delta: "+7.2%", good: true },
34    { label: "Active Accounts", value: "3,625", delta: "+4.1%", good: true },
35    { label: "Avg. Order Value", value: "$253", delta: "+1.2%", good: true },
36    { label: "Net Promoter Score", value: "63", delta: "+2 pts", good: true },
37    { label: "Refund Rate", value: "1.2%", delta: "+0.1%", good: false },
38    { label: "Support CSAT", value: "92.5%", delta: "+0.8%", good: true },
39  ],
40  "q4-2025": [
41    { label: "Total Revenue", value: "$107,540", delta: "+9.6%", good: true },
42    { label: "Active Accounts", value: "3,482", delta: "+5.5%", good: true },
43    { label: "Avg. Order Value", value: "$250", delta: "-0.8%", good: false },
44    { label: "Net Promoter Score", value: "61", delta: "+5 pts", good: true },
45    { label: "Refund Rate", value: "1.1%", delta: "-0.2%", good: true },
46    { label: "Support CSAT", value: "91.7%", delta: "+2.3%", good: true },
47  ],
48  "q3-2025": [
49    { label: "Total Revenue", value: "$98,120", delta: "+4.3%", good: true },
50    { label: "Active Accounts", value: "3,301", delta: "+3.2%", good: true },
51    { label: "Avg. Order Value", value: "$252", delta: "+0.5%", good: true },
52    { label: "Net Promoter Score", value: "56", delta: "+1 pt", good: true },
53    { label: "Refund Rate", value: "1.3%", delta: "+0.2%", good: false },
54// … truncated