{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dashboard", "title": "Dashboard", "author": "AlgorizeTech", "description": "Ask the user to pick one of 3 dashboard variants: https://avaraui.com/view/dashboard. This item holds 3 of them as looks of one component (classic, glass, liquid-glass). Skip the question if the user already named one. An admin dashboard home: greeting with all-time totals, a period switch, an overview chart with a tab per metric, activity feed, traffic sources, visitors by country and top authors. Three looks: classic, glass, and liquid-glass (using LiquidGlassWrapper, LiquidGlassBackground, and LiquidGlassSvgFilter).", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/chart.json", "https://avaraui.com/r/popover.json", "https://avaraui.com/r/toggle-group.json", "https://avaraui.com/r/ui-liquid-glass.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/DashboardBlock.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n ArrowDownRight,\n ArrowUpRight,\n ChartColumnBig,\n CheckCheck,\n ChartSpline,\n CloudOff,\n Download,\n Globe,\n Inbox,\n Info,\n Mail,\n Minus,\n PenLine,\n UserPlus,\n Wallet,\n} from \"lucide-react\";\nimport React, {\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n useSyncExternalStore,\n} from \"react\";\nimport { ChartBlock } from \"./ChartBlock\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./PopoverBlock\";\nimport { ToggleGroup, ToggleGroupItem } from \"./ToggleGroupBlock\";\nimport {\n LiquidGlassWrapper,\n LiquidGlassBackground,\n LiquidGlassSvgFilter,\n} from \"@/components/custom/ui/liquid-glass\";\n\nexport { LiquidGlassWrapper, LiquidGlassBackground, LiquidGlassSvgFilter };\n\n// ==========================================\n// TYPES\n// ==========================================\nexport type DashboardPeriod = \"day\" | \"week\" | \"month\";\n\n/** `classic` is the light canvas with solid panels; `glass` is milky glass panes on a soft colour canvas; `liquid-glass` is fluid SVG refractive glass. */\nexport type DashboardVariant = \"classic\" | \"glass\" | \"liquid-glass\";\n\nexport interface DashboardPoint {\n /** Axis label, e.g. \"Mon\" or \"Sep\". */\n label: string;\n /** Narrow-screen label, e.g. \"M\". Defaults to `label`. */\n shortLabel?: string;\n /** Spoken and tooltip label, e.g. \"Monday, Sep 28\". Defaults to `label`. */\n fullLabel?: string;\n value: number;\n}\n\nexport interface DashboardMetric {\n id: string;\n /** Tab label, e.g. \"New users\". */\n label: string;\n /** Shown beside the label in the tab from `sm` up. */\n icon?: React.ReactNode;\n /** Singular and plural for counts and the summary line, e.g. [\"new user\", \"new users\"]. */\n noun?: [string, string];\n /** Set for money: an ISO currency code such as \"USD\". */\n currency?: string;\n /** One series per period, oldest first; the last point is the current one. */\n series: Record;\n /** Percent change of the current point against the one before (12.5 = +12.5%). */\n change?: Partial>;\n}\n\nexport interface DashboardTotal {\n label: string;\n value: number;\n icon?: React.ReactNode;\n /** Glass: the id of a metric whose current point the card reports, e.g. \"+1,094 new users this month\". */\n metric?: string;\n /** Glass: gives the card a round open button. */\n href?: string;\n}\n\nexport type DashboardActivityType = \"user\" | \"post\" | \"payment\" | \"message\";\n\nexport interface DashboardActivity {\n id: string | number;\n type: DashboardActivityType;\n title: string;\n subtitle?: string;\n /** e.g. \"pending\" or \"failed\"; shown as a small pill. */\n status?: string;\n /** When it happened: a Date or an ISO string. */\n date: Date | string;\n href?: string;\n /** Glass: who it was, shown as an avatar. Without it the row shows the type's icon. */\n person?: string;\n /** Glass: a photo URL for the avatar; initials stand in until it loads or if it fails. */\n avatar?: string;\n}\n\nexport interface DashboardShare {\n id: string;\n label: string;\n value: number;\n /** Countries: an ISO code shown as a small badge, e.g. \"US\". */\n code?: string;\n}\n\nexport interface DashboardAuthor {\n name: string;\n posts: number;\n /** Glass: a photo URL for the author's avatar in the tray. */\n avatar?: string;\n}\n\n/** Glass: one row of the recent payments table. */\nexport interface DashboardPayment {\n id: string | number;\n amount: number;\n /** An ISO currency code such as \"USD\". */\n currency: string;\n /** How they paid, e.g. \"Stripe\" or \"PayPal\". */\n method: string;\n /** e.g. \"completed\", \"pending\" or \"failed\". Defaults to \"completed\". */\n status?: string;\n /** Who paid. Without it the row shows the method instead. */\n person?: string;\n avatar?: string;\n date: Date | string;\n}\n\n/** Glass: a tile in the activity pane's shortcut grid. The first one takes the brand fill. */\nexport interface DashboardShortcut {\n label: string;\n href: string;\n icon?: React.ReactNode;\n}\n\nexport interface DashboardLinks {\n activity?: string;\n traffic?: string;\n countries?: string;\n authors?: string;\n /** Glass: the round open button on the payments pane. */\n payments?: string;\n}\n\nexport interface DashboardProps\n extends Omit, \"title\"> {\n /** The look: `classic` (default) | `glass` | `liquid-glass`. */\n variant?: DashboardVariant;\n /** Optional custom background image URL for liquid-glass and glass variants. */\n bgImage?: string;\n /** The greeting uses the first name. */\n userName?: string;\n /** The line under the greeting. Defaults to a sentence built from today's numbers. */\n summary?: React.ReactNode;\n /** All-time counts beside the greeting; the period switch never changes them. */\n totals?: DashboardTotal[];\n /** The overview chart's tabs. */\n metrics?: DashboardMetric[];\n activity?: DashboardActivity[];\n /** Visits by source, per period. */\n sources?: Partial>;\n /** Sign-ups per period, for the visit-to-sign-up rate under the sources. */\n signUps?: Partial>;\n /** Visits by country, per period. */\n countries?: Partial>;\n /** Posts per author, per period. */\n authors?: Partial>;\n /** Glass: the recent payments table. Leave it out and the pane is not shown. */\n payments?: DashboardPayment[];\n /** Glass: shortcut tiles beside the activity stages. */\n shortcuts?: DashboardShortcut[];\n defaultPeriod?: DashboardPeriod;\n /** Replaces the built-in CSV download of the overview series. */\n onExport?: (period: DashboardPeriod) => void;\n /** Where each panel's round \"open\" button goes. Panels without a link show none. */\n links?: DashboardLinks;\n /** Renders links, e.g. `next/link`. Defaults to a plain ``. */\n linkComponent?: React.ElementType;\n /** \"Now\" for the greeting and the activity times. Defaults to the visitor's clock. */\n now?: Date;\n}\n\n// ==========================================\n// COPY & FORMATTING\n// ==========================================\nconst PERIODS: { value: DashboardPeriod; label: string }[] = [\n { value: \"day\", label: \"Daily\" },\n { value: \"week\", label: \"Weekly\" },\n { value: \"month\", label: \"Monthly\" },\n];\n\nconst PERIOD_COPY: Record<\n DashboardPeriod,\n {\n current: string;\n previous: string;\n window: string;\n average: string;\n traffic: string;\n trafficPhrase: string;\n authors: string;\n authorsPhrase: string;\n }\n> = {\n day: {\n current: \"today\",\n previous: \"yesterday\",\n window: \"Last 7 days\",\n average: \"a day\",\n traffic: \"Today\",\n trafficPhrase: \"today\",\n authors: \"Today\",\n authorsPhrase: \"today\",\n },\n week: {\n current: \"this week\",\n previous: \"last week\",\n window: \"Weeks of this month\",\n average: \"a week\",\n traffic: \"This week\",\n trafficPhrase: \"this week\",\n authors: \"Last 7 days\",\n authorsPhrase: \"in the last 7 days\",\n },\n month: {\n current: \"this month\",\n previous: \"last month\",\n window: \"This year by month\",\n average: \"a month\",\n traffic: \"This month\",\n trafficPhrase: \"this month\",\n authors: \"Last 30 days\",\n authorsPhrase: \"in the last 30 days\",\n },\n};\n\n// A fixed locale, so the server and the browser print the same digits.\nconst integerFormat = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 0 });\nconst compactFormat = new Intl.NumberFormat(\"en-US\", {\n notation: \"compact\",\n maximumFractionDigits: 1,\n});\n\nconst formatNumber = (value: number) => integerFormat.format(value);\nconst formatCompact = (value: number) =>\n Math.abs(value) < 10000 ? formatNumber(value) : compactFormat.format(value);\n\nconst formatMoney = (value: number, currency: string, compact = false) =>\n new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency,\n notation: compact && Math.abs(value) >= 10000 ? \"compact\" : \"standard\",\n maximumFractionDigits: compact || Math.abs(value) >= 1000 ? 0 : 2,\n }).format(value);\n\nconst formatChange = (change: number) => {\n const size = Math.abs(change);\n const digits = size < 10 ? size.toFixed(1) : String(Math.round(size));\n return `${change > 0 ? \"+\" : change < 0 ? \"−\" : \"\"}${digits}%`;\n};\n\nconst formatShare = (share: number) =>\n share <= 0 ? \"0%\" : share < 0.01 ? \"<1%\" : `${Math.round(share * 100)}%`;\n\nconst plural = (count: number, [one, many]: [string, string]) =>\n count === 1 ? one : many;\n\nconst sum = (values: number[]) => values.reduce((total, value) => total + value, 0);\n\n/** 1, 2, 2.5 or 5 times a power of ten: a ceiling the axis can halve cleanly. */\nfunction niceCeiling(value: number) {\n if (value <= 0) return 1;\n const power = 10 ** Math.floor(Math.log10(value));\n const fraction = value / power;\n const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;\n return nice * power;\n}\n\nconst initialsOf = (name: string) =>\n name\n .trim()\n .split(/\\s+/)\n .filter(Boolean)\n .slice(0, 2)\n .map((part) => part.charAt(0).toUpperCase())\n .join(\"\") || \"?\";\n\nconst toDate = (value: Date | string) => (value instanceof Date ? value : new Date(value));\n\nconst MONTHS_SHORT = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst WEEKDAYS = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\nconst MONTHS = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n\nconst dayKey = (date: Date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;\n\nfunction greetingFor(date: Date) {\n const hour = date.getHours();\n if (hour >= 5 && hour < 12) return \"Good morning\";\n if (hour >= 12 && hour < 18) return \"Good afternoon\";\n return \"Good evening\";\n}\n\nconst longDate = (date: Date) =>\n `${WEEKDAYS[date.getDay()]}, ${MONTHS[date.getMonth()]} ${date.getDate()}`;\n\nfunction activityTime(date: Date, now: Date) {\n const minutes = Math.floor((now.getTime() - date.getTime()) / 60000);\n if (minutes >= 0 && minutes < 1) return \"Just now\";\n if (minutes >= 0 && minutes < 60) return `${minutes}m ago`;\n if (minutes >= 0 && minutes < 360 && dayKey(date) === dayKey(now)) {\n return `${Math.floor(minutes / 60)}h ago`;\n }\n const hours = date.getHours();\n return `${hours % 12 || 12}:${String(date.getMinutes()).padStart(2, \"0\")} ${hours < 12 ? \"AM\" : \"PM\"}`;\n}\n\nfunction dayLabel(date: Date, now: Date) {\n if (dayKey(date) === dayKey(now)) return \"Today\";\n const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);\n if (dayKey(date) === dayKey(yesterday)) return \"Yesterday\";\n return `${WEEKDAYS[date.getDay()]?.slice(0, 3)}, ${MONTHS_SHORT[date.getMonth()]} ${date.getDate()}`;\n}\n\n// The visitor's clock, read once per page load. The server snapshot is\n// `null`, so hydration renders the same markup the server sent and the\n// clock-dependent text appears on the pass after it.\nlet clientNow: Date | null = null;\nconst readClientNow = () => (clientNow ??= new Date());\nconst readServerNow = () => null;\nconst subscribeToNothing = () => () => {};\n\nfunction useNow(fixed?: Date) {\n const now = useSyncExternalStore(subscribeToNothing, readClientNow, readServerNow);\n return fixed ?? now;\n}\n\n// ==========================================\n// TOKENS & SHARED PIECES\n// ==========================================\n// The section paints its own canvas: a quiet tint of the theme colour with\n// glows at three corners, two of them in neighbouring hues where the browser\n// can derive them.\nconst ROOT_TOKENS =\n \"[--dash-accent:var(--primary)] [--dash-well:color-mix(in_oklab,var(--primary)_5%,color-mix(in_oklab,var(--foreground)_5%,var(--card)))] [--dash-track:color-mix(in_oklab,var(--primary)_9%,var(--card))] [--dash-mark-muted:color-mix(in_oklab,var(--primary)_26%,var(--card))] [--dash-cat-1:#6356d1] [--dash-cat-2:#e87ba4] [--dash-cat-3:#eda100] [--dash-cat-4:#1baf7a] [--dash-cat-other:#c2c7d0] [--dash-up:#137a39] [--dash-down:#b91c1c] dark:[--dash-accent:color-mix(in_oklab,var(--primary)_72%,white)] dark:[--dash-cat-1:#8f84ec] dark:[--dash-cat-2:#d55181] dark:[--dash-cat-3:#c98500] dark:[--dash-cat-4:#199e70] dark:[--dash-cat-other:#566072] dark:[--dash-up:#4ade80] dark:[--dash-down:#fa8585]\";\n\nconst CANVAS_STYLE: React.CSSProperties = {\n backgroundColor: \"color-mix(in oklab, var(--primary) 4%, var(--background))\",\n backgroundImage: [\n \"radial-gradient(56rem 44rem at 0% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 70%)\",\n \"radial-gradient(52rem 38rem at 100% 0%, color-mix(in oklab, var(--primary) 9%, transparent), transparent 70%)\",\n \"radial-gradient(46rem 40rem at 0% 100%, color-mix(in oklab, var(--primary) 11%, transparent), transparent 72%)\",\n ].join(\", \"),\n};\n\nconst PANEL =\n \"rounded-[24px] bg-card text-card-foreground ring-1 ring-foreground/[0.08] shadow-[0_1px_2px_rgb(16_24_40/0.04),0_16px_32px_-20px_rgb(16_24_40/0.14)] dark:shadow-none\";\nconst FOCUS =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--primary)_60%,transparent)]\";\nconst SLICE_COLORS = [\"var(--dash-cat-1)\", \"var(--dash-cat-2)\", \"var(--dash-cat-3)\"];\nconst OTHER_COLOR = \"var(--dash-cat-other)\";\n\nfunction PanelHeader({\n id,\n title,\n caption,\n href,\n linkLabel,\n linkComponent: Link,\n}: {\n id: string;\n title: string;\n caption?: string;\n href?: string;\n linkLabel: string;\n linkComponent: React.ElementType;\n}) {\n return (\n
\n
\n

\n {title}\n

\n {caption &&

{caption}

}\n
\n {href && (\n \n \n \n )}\n
\n );\n}\n\nfunction EmptyState({\n icon,\n title,\n children,\n className,\n}: {\n icon?: React.ReactNode;\n title: string;\n children?: React.ReactNode;\n className?: string;\n}) {\n return (\n
\n {icon && (\n \n {icon}\n \n )}\n

{title}

\n {children &&

{children}

}\n
\n );\n}\n\n/**\n * Arrow and percent change, coloured by direction (more is better for every\n * metric here). `onFill` is for brand-filled tiles, where the green and red\n * tints would be unreadable: it goes to the fill's text colour on a light chip.\n */\nfunction DeltaBadge({\n change,\n onFill = false,\n className,\n}: {\n change: number;\n onFill?: boolean;\n className?: string;\n}) {\n const rounded = Math.abs(change) < 0.05 ? 0 : change;\n const direction = rounded > 0 ? \"up\" : rounded < 0 ? \"down\" : \"flat\";\n const Icon = direction === \"up\" ? ArrowUpRight : direction === \"down\" ? ArrowDownRight : Minus;\n return (\n \n \n \n {direction === \"up\" ? \"Up \" : direction === \"down\" ? \"Down \" : \"No change, \"}\n \n {formatChange(rounded)}\n \n );\n}\n\n// ==========================================\n// BREAKDOWNS (gauge, barcode, legend)\n// ==========================================\ninterface Slice {\n key: string;\n name: string;\n value: number;\n share: number;\n color: string;\n code?: string;\n}\n\n/** The top three shares in their own colours, the rest folded into \"Other\". */\nfunction compose(shares: DashboardShare[]): { slices: Slice[]; total: number } {\n const rows = [...shares].filter((share) => share.value > 0).sort((a, b) => b.value - a.value);\n const total = sum(rows.map((row) => row.value));\n if (!total) return { slices: [], total: 0 };\n const top = rows.slice(0, rows.length > 4 ? 3 : 4);\n const rest = rows.slice(top.length);\n const slices: Slice[] = top.map((row, index) => ({\n key: row.id,\n name: row.label,\n value: row.value,\n share: row.value / total,\n color: SLICE_COLORS[index] ?? OTHER_COLOR,\n code: row.code,\n }));\n if (rest.length) {\n const value = sum(rest.map((row) => row.value));\n slices.push({\n key: \"__other\",\n name: `Other (${rest.length})`,\n value,\n share: value / total,\n color: OTHER_COLOR,\n });\n }\n return { slices, total };\n}\n\n/** Hands `units` marks to slices in proportion to their share (largest remainder). */\nfunction allocateUnits(slices: Slice[], units: number): (Slice | null)[] {\n const total = sum(slices.map((slice) => slice.value));\n if (!total) return Array.from({ length: units }, () => null);\n const exact = slices.map((slice) => (slice.value / total) * units);\n const counts = exact.map(Math.floor);\n let left = units - sum(counts);\n exact\n .map((value, index) => ({ index, rest: value - Math.floor(value) }))\n .sort((a, b) => b.rest - a.rest)\n .forEach(({ index }) => {\n if (left > 0) {\n counts[index] = (counts[index] ?? 0) + 1;\n left -= 1;\n }\n });\n return slices.flatMap((slice, index) => Array.from({ length: counts[index] ?? 0 }, () => slice));\n}\n\nconst GAUGE_TICKS = 44;\n\n/** A semicircle of ticks, handed to slices by share and read left to right. */\nfunction TickGauge({\n slices,\n focus,\n onFocus,\n label,\n children,\n}: {\n slices: Slice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n label: string;\n children: React.ReactNode;\n}) {\n const units = allocateUnits(slices, GAUGE_TICKS);\n return (\n
\n \n {units.map((unit, index) => {\n const angle = Math.PI - (index / (GAUGE_TICKS - 1)) * Math.PI;\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n return (\n onFocus(unit.key) : undefined}\n onPointerLeave={unit ? () => onFocus(null) : undefined}\n />\n );\n })}\n \n
\n {children}\n
\n
\n );\n}\n\n/** A row of thin bars split by share, with a wider gap between slices. */\nfunction Barcode({\n slices,\n focus,\n onFocus,\n}: {\n slices: Slice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n}) {\n const units = allocateUnits(slices, 48);\n return (\n onFocus(null)}\n >\n {units.map((unit, index) => (\n 0 && units[index - 1]?.key !== unit?.key && \"ml-1.5\",\n focus && focus !== unit?.key && \"opacity-25\",\n )}\n style={{ backgroundColor: unit?.color ?? \"var(--dash-track)\" }}\n onPointerEnter={() => onFocus(unit?.key ?? null)}\n />\n ))}\n \n );\n}\n\n/** Legend rows that carry every value as text, so nothing hides behind a hover. */\nfunction BreakdownList({\n slices,\n focus,\n onFocus,\n showCodes = false,\n className,\n}: {\n slices: Slice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n showCodes?: boolean;\n className?: string;\n}) {\n return (\n
    onFocus(null)}>\n {slices.map((slice) => (\n onFocus(slice.key)}\n className={cn(\n \"flex items-center gap-3 rounded-xl px-2 py-2 transition-colors duration-150\",\n focus === slice.key && \"bg-[var(--dash-well)]\",\n )}\n >\n \n {showCodes && (\n \n {slice.code ?? \"··\"}\n \n )}\n {slice.name}\n {formatNumber(slice.value)}\n \n {formatShare(slice.share)}\n \n \n ))}\n
\n );\n}\n\n// ==========================================\n// HEADER\n// ==========================================\nfunction DashboardHeader({\n userName,\n summary,\n totals,\n now,\n}: {\n userName?: string;\n summary: React.ReactNode;\n totals: DashboardTotal[];\n now: Date | null;\n}) {\n const firstName = userName?.trim().split(/\\s+/)[0];\n const greeting = now ? greetingFor(now) : \"Welcome back\";\n\n return (\n
\n \n
\n
\n {/* The date only exists once the visitor's clock is read. */}\n

{now ? longDate(now) : null}

\n

\n {firstName ? `${greeting}, ${firstName}` : greeting}\n

\n {summary && (\n

\n {summary}\n

\n )}\n
\n {totals.length > 0 && (\n
\n {totals.map((total) => (\n
\n
\n {total.icon}\n \n {total.label}\n \n
\n
\n {formatCompact(total.value)}\n
\n
\n ))}\n
\n )}\n
\n
\n );\n}\n\n// ==========================================\n// OVERVIEW (metric tabs + chart)\n// ==========================================\ntype ChartForm = \"columns\" | \"line\";\n\nconst CHART_HEIGHT = 304;\n\nfunction axisTicks(ceiling: number, money: boolean, empty: boolean) {\n if (empty) return [0];\n const half = ceiling / 2;\n return !money && !Number.isInteger(half) ? [0, ceiling] : [0, half, ceiling];\n}\n\ninterface ResolvedMetric {\n metric: DashboardMetric;\n points: DashboardPoint[];\n current: number;\n change: number | null;\n total: number;\n average: number;\n format: (value: number) => string;\n formatShort: (value: number) => string;\n}\n\n/** Each metric's series for the period, with its summary numbers and formatters. */\nfunction resolveMetrics(metrics: DashboardMetric[], period: DashboardPeriod): ResolvedMetric[] {\n return metrics.map((metric) => {\n const points = metric.series[period] ?? [];\n const total = sum(points.map((point) => point.value));\n const currency = metric.currency;\n return {\n metric,\n points,\n current: points[points.length - 1]?.value ?? 0,\n change: metric.change?.[period] ?? null,\n total,\n average: points.length ? total / points.length : 0,\n format: currency ? (value: number) => formatMoney(value, currency) : formatNumber,\n formatShort: currency ? (value: number) => formatMoney(value, currency, true) : formatNumber,\n };\n });\n}\n\n/** The chart's numbers as a table for screen readers. */\nfunction SeriesTable({ entry, caption }: { entry: ResolvedMetric; caption: string }) {\n return (\n \n \n \n \n \n \n \n \n \n {entry.points.map((point, index) => (\n \n \n \n \n ))}\n \n
\n {entry.metric.label}, {caption}\n
Period{entry.metric.label}
{point.fullLabel ?? point.label}{entry.format(point.value)}
\n );\n}\n\nfunction OverviewPanel({\n metrics,\n period,\n className,\n}: {\n metrics: DashboardMetric[];\n period: DashboardPeriod;\n className?: string;\n}) {\n const baseId = useId();\n const [activeId, setActiveId] = useState(metrics[0]?.id ?? \"\");\n const [form, setForm] = useState(\"columns\");\n const copy = PERIOD_COPY[period];\n\n const resolved = useMemo(() => resolveMetrics(metrics, period), [metrics, period]);\n\n const active = resolved.find((entry) => entry.metric.id === activeId) ?? resolved[0];\n\n const onTabKeyDown = (event: React.KeyboardEvent) => {\n const index = resolved.findIndex((entry) => entry.metric.id === active?.metric.id);\n const last = resolved.length - 1;\n const next =\n event.key === \"ArrowRight\"\n ? index >= last ? 0 : index + 1\n : event.key === \"ArrowLeft\"\n ? index <= 0 ? last : index - 1\n : event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? last\n : null;\n if (next === null) return;\n event.preventDefault();\n const target = resolved[next];\n if (!target) return;\n setActiveId(target.metric.id);\n document.getElementById(`${baseId}-tab-${target.metric.id}`)?.focus();\n };\n\n return (\n
\n

\n Overview\n

\n \n {resolved.map((entry) => {\n const selected = entry.metric.id === active?.metric.id;\n return (\n setActiveId(entry.metric.id)}\n className={cn(\n \"group relative flex min-w-0 flex-1 basis-0 flex-col items-start gap-1 bg-card px-2.5 py-3 text-left transition-colors hover:bg-[color-mix(in_oklab,var(--dash-accent)_4%,var(--card))] focus-visible:z-10 sm:flex-auto sm:gap-1.5 sm:px-4 sm:py-3.5\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color-mix(in_oklab,var(--primary)_60%,transparent)]\",\n )}\n >\n \n \n {entry.metric.icon && (\n \n {entry.metric.icon}\n \n )}\n {entry.metric.label}\n \n \n \n {entry.formatShort(entry.current)}\n \n {entry.change !== null && (\n \n )}\n \n \n );\n })}\n \n\n {active && (\n \n
\n
\n
\n {active.metric.label}, \n {copy.window}\n {active.change !== null && (\n <>\n \n vs {copy.previous}\n \n )}\n
\n
\n {active.points.length > 0 && (\n
\n
\n
Total
\n
{active.formatShort(active.total)}
\n
\n
\n
\n \n Avg\n Average\n
\n
\n {active.formatShort(active.average)}{\" \"}\n {copy.average}\n
\n
\n
\n )}\n {\n if (next === \"columns\" || next === \"line\") setForm(next);\n }}\n aria-label=\"Chart style\"\n >\n \n \n \n \n \n \n \n
\n
\n
\n {active.points.length === 0 ? (\n \n ) : form === \"line\" ? (\n ({ label: point.label, value: point.value }))}\n color=\"var(--primary)\"\n height={CHART_HEIGHT}\n valuePrefix={active.metric.currency ? currencySymbol(active.metric.currency) : \"\"}\n />\n ) : (\n \n )}\n
\n \n
\n \n )}\n
\n );\n}\n\nconst currencySymbol = (currency: string) =>\n new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency })\n .formatToParts(0)\n .find((part) => part.type === \"currency\")?.value ?? \"\";\n\n/**\n * Pill columns on full-height tracks: the current point in the accent with its\n * value on the cap, earlier points muted. Hover, tap or the arrow keys read any\n * column; the dashed rule is the average.\n */\nfunction ColumnsChart({ entry }: { entry: ResolvedMetric }) {\n const { points } = entry;\n const [inspected, setInspected] = useState(null);\n const lastIndex = points.length - 1;\n const ceiling = niceCeiling(Math.max(0, ...points.map((point) => point.value)));\n const empty = entry.total === 0;\n const ticks = axisTicks(ceiling, Boolean(entry.metric.currency), empty);\n const shown = empty ? inspected : (inspected ?? lastIndex);\n const inspectedPoint = inspected === null ? null : points[inspected];\n\n useEffect(() => {\n setInspected(null);\n }, [entry.points]);\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const from = inspected ?? lastIndex;\n const moves: Record = {\n ArrowLeft: Math.max(0, from - 1),\n ArrowRight: Math.min(lastIndex, from + 1),\n Home: 0,\n End: lastIndex,\n };\n const move = moves[event.key];\n if (move !== undefined) {\n event.preventDefault();\n setInspected(move);\n } else if (event.key === \"Escape\") {\n setInspected(null);\n }\n };\n\n return (\n
\n setInspected(null)}\n onPointerLeave={(event) => {\n if (event.pointerType !== \"touch\") setInspected(null);\n }}\n className={cn(\"relative rounded-2xl\", FOCUS)}\n >\n
\n
\n
\n {ticks.map((tick) => (\n \n {entry.formatShort(tick)}\n \n ))}\n
\n
\n {entry.average > 0 && !empty && (\n \n )}\n
\n {points.map((point, index) => {\n const percent = (point.value / ceiling) * 100;\n const isCurrent = index === lastIndex;\n const isInspected = index === inspected;\n return (\n setInspected(index)}\n onPointerDown={() => setInspected(index)}\n >\n
\n {point.value > 0 && (\n \n )}\n {index === shown && (\n \n {isInspected ? (\n
\n

{entry.format(point.value)}

\n

{point.fullLabel ?? point.label}

\n
\n ) : (\n \n {entry.formatShort(point.value)}\n \n )}\n
\n )}\n
\n
\n );\n })}\n
\n
\n
\n \n
\n {points.map((point, index) => (\n \n {point.shortLabel ?? point.label}\n {point.label}\n \n ))}\n
\n {empty && (\n
\n

\n Nothing recorded in this window yet.\n

\n
\n )}\n \n

\n {inspectedPoint ? `${inspectedPoint.fullLabel ?? inspectedPoint.label}: ${entry.format(inspectedPoint.value)}` : \"\"}\n

\n \n );\n}\n\n// ==========================================\n// ACTIVITY\n// ==========================================\nconst ACTIVITY_TABS: { value: \"all\" | DashboardActivityType; label: string; empty: string }[] = [\n { value: \"all\", label: \"All\", empty: \"No activity yet\" },\n { value: \"user\", label: \"Users\", empty: \"No sign-ups yet\" },\n { value: \"post\", label: \"Posts\", empty: \"No published posts yet\" },\n { value: \"payment\", label: \"Payments\", empty: \"No payments yet\" },\n { value: \"message\", label: \"Messages\", empty: \"No messages yet\" },\n];\n\nconst ACTIVITY_TYPES: Record<\n DashboardActivityType,\n { label: string; icon: React.ComponentType<{ className?: string }>; color: string }\n> = {\n user: { label: \"New user\", icon: UserPlus, color: \"var(--dash-cat-1)\" },\n post: { label: \"Post\", icon: PenLine, color: \"var(--dash-cat-2)\" },\n payment: { label: \"Payment\", icon: Wallet, color: \"var(--dash-cat-3)\" },\n message: { label: \"Message\", icon: Mail, color: \"var(--dash-cat-4)\" },\n};\n\nconst STATUS_STYLES: Record = {\n pending: \"bg-amber-500/15 text-amber-700 dark:text-amber-300\",\n failed: \"bg-[color-mix(in_oklab,var(--dash-down)_10%,transparent)] text-[var(--dash-down)]\",\n};\n\nconst FEED_LENGTH = 6;\n\nfunction ActivityPanel({\n activity,\n now,\n href,\n linkComponent: Link,\n className,\n}: {\n activity: DashboardActivity[];\n now: Date | null;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const [tab, setTab] = useState(\"all\");\n const tabPaneRef = useRef(null);\n\n // Each tab's list rises in as it replaces the last one.\n useEffect(() => {\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n tabPaneRef.current?.animate(\n [\n { opacity: 0, transform: \"translateY(3px)\" },\n { opacity: 1, transform: \"none\" },\n ],\n { duration: 220, easing: \"cubic-bezier(0.16, 1, 0.3, 1)\" },\n );\n }, [tab]);\n const current = ACTIVITY_TABS.find((option) => option.value === tab) ?? ACTIVITY_TABS[0];\n const feed = useMemo(\n () =>\n [...activity]\n .map((item) => ({ ...item, at: toDate(item.date) }))\n .sort((a, b) => b.at.getTime() - a.at.getTime()),\n [activity],\n );\n const items = (tab === \"all\" ? feed : feed.filter((item) => item.type === tab)).slice(0, FEED_LENGTH);\n\n // Grouped by day once the clock is known; before that, one plain list.\n const groups = now\n ? items.reduce<{ key: string; label: string; items: typeof items }[]>((list, item) => {\n const key = dayKey(item.at);\n const last = list[list.length - 1];\n if (last && last.key === key) last.items.push(item);\n else list.push({ key, label: dayLabel(item.at, now), items: [item] });\n return list;\n }, [])\n : [{ key: \"all\", label: \"\", items }];\n\n return (\n
\n \n
\n
\n {ACTIVITY_TABS.map((option) => {\n const selected = tab === option.value;\n return (\n setTab(option.value)}\n className={cn(\n \"shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150\",\n selected\n ? \"bg-card text-foreground shadow-sm ring-1 ring-foreground/[0.08]\"\n : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n {option.label}\n \n );\n })}\n
\n
\n {/* Permanently fixed height matching all 6 items: zero shrinkage, zero expansion */}\n
\n
\n {items.length ? (\n
\n {groups.map((group) => (\n
\n {group.label &&

{group.label}

}\n {/* The rail runs chip centre to chip centre; chips sit on top of it. */}\n
    \n {group.items.map((item) => {\n const type = ACTIVITY_TYPES[item.type];\n const Icon = type.icon;\n return (\n
  1. \n \n \n \n
    \n
    \n

    \n {type.label}: \n {item.href ? (\n \n {item.title}\n \n ) : (\n item.title\n )}\n

    \n {now && (\n \n {activityTime(item.at, now)}\n \n )}\n
    \n
    \n {item.subtitle && (\n

    {item.subtitle}

    \n )}\n {item.status && (\n \n {item.status}\n \n )}\n
    \n
    \n
    2. \n );\n })}\n
\n
\n ))}\n
\n ) : (\n } title={current?.empty ?? \"No activity yet\"} className=\"h-full min-h-[380px] flex flex-col items-center justify-center\">\n New events show up here as they happen.\n \n )}\n
\n
\n
\n );\n}\n\n// ==========================================\n// TRAFFIC, COUNTRIES, AUTHORS\n// ==========================================\nconst formatRate = (rate: number) =>\n rate === 0 ? \"0%\" : `${(rate * 100).toFixed(rate < 0.1 ? 1 : 0)}%`;\n\n// Tap-friendly explanation; a hover-only tooltip would hide it on touch.\nfunction RateExplainer() {\n return (\n \n \n \n \n \n New sign-ups divided by the visits in the same period.\n \n \n );\n}\n\nfunction TrafficSourcesPanel({\n shares,\n signUps,\n period,\n href,\n linkComponent,\n className,\n}: {\n shares?: DashboardShare[];\n signUps?: number;\n period: DashboardPeriod;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const [focus, setFocus] = useState(null);\n const copy = PERIOD_COPY[period];\n const { slices, total } = useMemo(() => compose(shares ?? []), [shares]);\n const gaugeLabel = total\n ? `Visits by source ${copy.trafficPhrase}: ${slices.map((slice) => `${slice.name} ${formatShare(slice.share)}`).join(\", \")}`\n : `No visits ${copy.trafficPhrase}`;\n\n return (\n
\n \n {!shares ? (\n } title=\"Traffic data is unavailable\" className=\"flex-1 py-12\">\n Connect visitor tracking to see where people come from.\n \n ) : (\n
\n \n \n {formatCompact(total)}\n \n {plural(total, [\"visit\", \"visits\"])}\n \n {total ? (\n <>\n \n {signUps !== undefined && }\n \n ) : (\n

\n No visits recorded {copy.trafficPhrase} yet.\n

\n )}\n
\n )}\n
\n );\n}\n\nfunction ConversionRate({ signUps, visits }: { signUps: number; visits: number }) {\n // Sign-ups can outnumber tracked visits (blocked trackers, invited users);\n // a rate above 100% would mislead, so that case is said plainly.\n const rate = signUps / visits;\n const valid = rate <= 1;\n return (\n
\n
\n
\n
\n Visit to sign-up rate\n \n
\n

{valid ? formatRate(rate) : \"—\"}

\n
\n
\n
\n
\n

\n {valid\n ? `${formatNumber(signUps)} ${plural(signUps, [\"sign-up\", \"sign-ups\"])} from ${formatNumber(visits)} ${plural(visits, [\"visit\", \"visits\"])}`\n : `${formatNumber(signUps)} sign-ups outnumber the ${formatNumber(visits)} tracked visits.`}\n

\n
\n
\n );\n}\n\nfunction CountriesPanel({\n shares,\n period,\n href,\n linkComponent,\n className,\n}: {\n shares?: DashboardShare[];\n period: DashboardPeriod;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const [focus, setFocus] = useState(null);\n const copy = PERIOD_COPY[period];\n const { slices, total } = useMemo(() => compose(shares ?? []), [shares]);\n const countryCount = (shares ?? []).filter((share) => share.value > 0).length;\n const leader = slices[0];\n\n return (\n
\n \n {!shares ? (\n } title=\"Country data is unavailable\" className=\"flex-1 py-12\">\n Connect visitor tracking to see where people are.\n \n ) : !total || !leader ? (\n } title={`No visits recorded ${copy.trafficPhrase} yet`} className=\"flex-1 py-12\">\n Countries appear here once visitors arrive.\n \n ) : (\n <>\n
\n

\n \n {formatNumber(countryCount)}\n \n {plural(countryCount, [\"country\", \"countries\"])}\n

\n

\n {leader.name} accounts for {formatShare(leader.share)} of visits.\n

\n
\n \n \n \n )}\n
\n );\n}\n\nfunction TopAuthorsPanel({\n authors,\n period,\n href,\n linkComponent,\n className,\n}: {\n authors: DashboardAuthor[];\n period: DashboardPeriod;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const copy = PERIOD_COPY[period];\n const ranked = [...authors].filter((author) => author.posts > 0).sort((a, b) => b.posts - a.posts);\n const shown = ranked.slice(0, 5);\n const totalPosts = sum(ranked.map((author) => author.posts));\n const leaderPosts = shown[0]?.posts ?? 0;\n\n return (\n
\n \n {shown.length ? (\n <>\n

\n {formatNumber(totalPosts)}{\" \"}\n {plural(totalPosts, [\"post\", \"posts\"])} from{\" \"}\n {formatNumber(ranked.length)}{\" \"}\n {plural(ranked.length, [\"author\", \"authors\"])}\n

\n
    \n {shown.map((author, index) => {\n const leads = index === 0;\n return (\n
  1. \n \n {initialsOf(author.name)}\n \n
    \n
    \n

    {author.name}

    \n

    \n {formatNumber(author.posts)}{\" \"}\n {plural(author.posts, [\"post\", \"posts\"])}\n

    \n
    \n
    \n \n
    \n
    \n
    2. \n );\n })}\n
\n \n ) : (\n } title={`No posts published ${copy.authorsPhrase}`} className=\"flex-1 py-12\">\n Authors are ranked here as posts go live.\n \n )}\n
\n );\n}\n\n// ==========================================\n// EXPORT\n// ==========================================\n/** The selected period's overview series as a CSV download. */\nfunction downloadCsv(metrics: DashboardMetric[], period: DashboardPeriod) {\n const longest = metrics.reduce(\n (best, metric) => ((metric.series[period]?.length ?? 0) > best.length ? metric.series[period] ?? [] : best),\n [],\n );\n const escape = (value: string) => `\"${value.replace(/\"/g, '\"\"')}\"`;\n const header = [\"Period\", ...metrics.map((metric) => metric.label)].map(escape).join(\",\");\n const rows = longest.map((point, index) =>\n [\n escape(point.fullLabel ?? point.label),\n ...metrics.map((metric) => String(metric.series[period]?.[index]?.value ?? \"\")),\n ].join(\",\"),\n );\n const blob = new Blob([\"\" + [header, ...rows].join(\"\\n\")], { type: \"text/csv;charset=utf-8;\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = `dashboard-${period}.csv`;\n document.body.appendChild(link);\n link.click();\n link.remove();\n URL.revokeObjectURL(url);\n}\n\n/** \"So far today: 12 new users, 4 messages and $1,240 in revenue.\" */\nfunction describeToday(metrics: DashboardMetric[]) {\n const parts = metrics.flatMap((metric) => {\n const points = metric.series.day ?? [];\n const value = points[points.length - 1]?.value ?? 0;\n if (!value) return [];\n if (metric.currency) return [`${formatMoney(value, metric.currency)} in ${metric.label.toLowerCase()}`];\n return [`${formatNumber(value)} ${metric.noun ? plural(value, metric.noun) : metric.label.toLowerCase()}`];\n });\n if (!parts.length) return \"Nothing new yet today.\";\n const list =\n parts.length < 2 ? parts[0] : `${parts.slice(0, -1).join(\", \")} and ${parts[parts.length - 1]}`;\n return `So far today: ${list}.`;\n}\n\n// ==========================================\n// GLASS VARIANT\n// ==========================================\n// Milky glass on a cool grey canvas. The canvas carries soft colour blobs\n// (the theme colour and two neighbouring hues) and a brand glow rising from\n// the bottom, so the translucent panes have something to show through; on a\n// flat grey they would read as solid. Layers, lightest to densest: panes,\n// cards inside panes, then tiles and round buttons. Each one catches the\n// light with a 150° sheen, a bright top edge and a light rim.\n//\n// Nothing here uses a backdrop blur: the canvas behind is already soft, so a\n// blur would show nothing and would still cost a repaint on every scroll frame.\n//\n// The tokens are unlayered so they win over the theme. The surface helpers\n// sit in the components layer so utilities on the same element (size,\n// radius, display) still win. Dark mode re-sets every token the light block\n// sets, because both selectors have the same specificity.\nconst GLASS_CSS = `\n[data-dashboard-glass] {\n --dash-accent: var(--primary);\n --muted-foreground: oklch(0.49 0.012 265);\n --dash-surface: #f4f5f7;\n --dash-well: rgb(15 23 42 / 0.05);\n --dash-hairline: rgb(15 23 42 / 0.07);\n --dash-track: color-mix(in oklab, var(--primary) 12%, transparent);\n --dash-mark-muted: color-mix(in oklab, var(--primary) 30%, #f4f5f7);\n --dash-cat-1: #5b7fd6;\n --dash-cat-2: #e0625f;\n --dash-cat-3: #e3a43b;\n --dash-cat-other: #c3c7cf;\n --dash-up: #137a39;\n --dash-down: #b91c1c;\n --dash-warn: #a3510a;\n --dash-ink: #464c5b;\n --dash-icon: #6b7180;\n --dash-canvas: #e7e7ee;\n --dash-glow: color-mix(in oklab, var(--primary) 30%, #a9bbe2);\n --dash-blob-1: color-mix(in oklab, var(--primary) 30%, transparent);\n --dash-blob-2: color-mix(in oklab, #6ea8ff 30%, transparent);\n --dash-blob-3: color-mix(in oklab, #ff8fc0 22%, transparent);\n --dash-sheen-1: rgb(255 255 255 / 0.5);\n --dash-sheen-2: rgb(255 255 255 / 0.06);\n --dash-sheen-3: rgb(255 255 255 / 0.16);\n --dash-edge: rgb(255 255 255 / 0.95);\n --dash-rim: rgb(255 255 255 / 0.6);\n --dash-border: rgb(15 23 42 / 0.045);\n --dash-shadow: 0 1px 2px rgb(31 41 72 / 0.04), 0 22px 44px -26px rgb(31 41 72 / 0.32);\n --dash-pane: rgb(255 255 255 / 0.3);\n --dash-card: rgb(255 255 255 / 0.36);\n --dash-card-strong: rgb(255 255 255 / 0.44);\n --dash-card-shadow: 0 1px 2px rgb(31 41 72 / 0.04), 0 12px 26px -18px rgb(31 41 72 / 0.26);\n --dash-round-shadow: 0 8px 18px -12px rgb(31 41 72 / 0.3);\n --dash-notch-shadow: drop-shadow(0 18px 22px rgb(31 41 72 / 0.12));\n --dash-hatch: color-mix(in oklab, var(--foreground) 14%, transparent);\n}\n\n:where(.dark) [data-dashboard-glass],\n[data-dashboard-glass]:where(.dark) {\n --dash-accent: color-mix(in oklab, var(--primary) 72%, #fff);\n --muted-foreground: oklch(0.72 0.01 265);\n --dash-surface: #1b1d23;\n --dash-well: rgb(255 255 255 / 0.05);\n --dash-hairline: rgb(255 255 255 / 0.07);\n --dash-track: color-mix(in oklab, var(--primary) 18%, transparent);\n --dash-mark-muted: color-mix(in oklab, var(--primary) 38%, #1b1d23);\n --dash-cat-1: #6286e3;\n --dash-cat-2: #e05a6c;\n --dash-cat-3: #b08c10;\n --dash-cat-other: #4b505c;\n --dash-up: #4ade80;\n --dash-down: #fa8585;\n --dash-warn: #fbbf24;\n --dash-ink: #c5cbd6;\n --dash-icon: #8f99ab;\n --dash-canvas: #0c0d12;\n --dash-glow: color-mix(in oklab, color-mix(in oklab, var(--primary) 45%, #1e2c52) 60%, transparent);\n --dash-blob-1: color-mix(in oklab, var(--primary) 24%, transparent);\n --dash-blob-2: color-mix(in oklab, #3f6fd8 20%, transparent);\n --dash-blob-3: color-mix(in oklab, #c2457e 14%, transparent);\n --dash-sheen-1: rgb(255 255 255 / 0.1);\n --dash-sheen-2: rgb(255 255 255 / 0.01);\n --dash-sheen-3: rgb(255 255 255 / 0.035);\n --dash-edge: rgb(255 255 255 / 0.12);\n --dash-rim: rgb(255 255 255 / 0.08);\n --dash-border: rgb(0 0 0 / 0.25);\n --dash-shadow: 0 22px 44px -24px rgb(0 0 0 / 0.75);\n --dash-pane: rgb(255 255 255 / 0.04);\n --dash-card: rgb(255 255 255 / 0.05);\n --dash-card-strong: rgb(255 255 255 / 0.07);\n --dash-card-shadow: 0 12px 26px -18px rgb(0 0 0 / 0.7);\n --dash-round-shadow: 0 8px 18px -12px rgb(0 0 0 / 0.6);\n --dash-notch-shadow: drop-shadow(0 18px 22px rgb(0 0 0 / 0.5));\n --dash-hatch: rgb(255 255 255 / 0.13);\n}\n\n/* Two blobs follow the theme colour where the browser can derive\n neighbouring hues (a violet theme gets blue and pink). */\n@supports (color: oklch(from red l c h)) {\n [data-dashboard-glass] {\n --dash-blob-2: oklch(from var(--primary) calc(l + 0.12) c calc(h + 55) / 0.3);\n --dash-blob-3: oklch(from var(--primary) calc(l + 0.12) c calc(h - 50) / 0.2);\n }\n\n :where(.dark) [data-dashboard-glass],\n [data-dashboard-glass]:where(.dark) {\n --dash-blob-2: oklch(from var(--primary) l c calc(h + 55) / 0.2);\n --dash-blob-3: oklch(from var(--primary) l c calc(h - 50) / 0.14);\n }\n}\n\n[data-dashboard-glass] {\n --dash-sheen: linear-gradient(150deg, var(--dash-sheen-1), var(--dash-sheen-2) 42%, var(--dash-sheen-3));\n --dash-lit: inset 0 1px 0 0 var(--dash-edge), inset 0 0 0 1px var(--dash-rim), 0 0 0 1px var(--dash-border);\n background-color: var(--dash-canvas);\n background-image:\n radial-gradient(40rem 30rem at 4% 6%, var(--dash-blob-1), transparent 70%),\n radial-gradient(44rem 34rem at 98% 28%, var(--dash-blob-2), transparent 70%),\n radial-gradient(38rem 30rem at 26% 80%, var(--dash-blob-3), transparent 70%),\n radial-gradient(84rem 34rem at 62% 122%, var(--dash-glow), transparent 72%);\n}\n\n[data-dashboard-glass][data-liquid=\"true\"] {\n --foreground: #ffffff;\n --muted-foreground: rgba(255, 255, 255, 0.75);\n --dash-ink: #ffffff;\n --dash-icon: rgba(255, 255, 255, 0.9);\n --dash-canvas: transparent;\n --dash-surface: rgba(255, 255, 255, 0.1);\n --dash-pane: rgba(255, 255, 255, 0.08);\n --dash-card: rgba(255, 255, 255, 0.12);\n --dash-card-strong: rgba(255, 255, 255, 0.18);\n --dash-well: rgba(0, 0, 0, 0.25);\n --dash-hairline: rgba(255, 255, 255, 0.18);\n --dash-border: rgba(255, 255, 255, 0.2);\n --dash-sheen-1: rgba(255, 255, 255, 0.25);\n --dash-sheen-2: rgba(255, 255, 255, 0.05);\n --dash-edge: rgba(255, 255, 255, 0.3);\n --dash-rim: rgba(255, 255, 255, 0.25);\n background-color: transparent !important;\n background-image: none !important;\n color: #ffffff !important;\n}\n\n[data-dashboard-glass][data-liquid=\"true\"] .dg-card,\n[data-dashboard-glass][data-liquid=\"true\"] .dg-pane {\n background: rgba(255, 255, 255, 0.12) !important;\n border-color: rgba(255, 255, 255, 0.2) !important;\n backdrop-filter: blur(12px) !important;\n color: #ffffff !important;\n}\n\n/* The period switch (the library's segmented toggle group): a glass track\n with the brand pill and white text. */\n[data-dashboard-glass] .dg-seg {\n background-color: var(--dash-card);\n box-shadow: inset 0 1px 0 0 var(--dash-edge), 0 0 0 1px var(--dash-border);\n}\n\n[data-dashboard-glass] .dg-seg > span[aria-hidden=\"true\"],\n[data-dashboard-glass] .dg-seg [aria-checked=\"true\"].bg-card {\n background-color: var(--primary);\n background-image: linear-gradient(150deg, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0) 55%);\n box-shadow: 0 8px 18px -10px color-mix(in oklab, var(--primary) 80%, transparent);\n}\n\n[data-dashboard-glass] .dg-seg [aria-checked=\"true\"] {\n color: var(--primary-foreground);\n}\n\n\n\n@layer components {\n [data-dashboard-glass] .dg-pane {\n background-color: var(--dash-pane);\n background-image: var(--dash-sheen);\n box-shadow: var(--dash-lit), var(--dash-shadow);\n }\n\n [data-dashboard-glass] .dg-card,\n [data-dashboard-glass] .dg-tile {\n background-color: var(--dash-card);\n background-image: var(--dash-sheen);\n box-shadow: var(--dash-lit), var(--dash-card-shadow);\n }\n\n [data-dashboard-glass] .dg-tile {\n background-color: var(--dash-card-strong);\n }\n\n /* Round glass buttons: panel actions, the export, the KPI links. */\n [data-dashboard-glass] .dg-round {\n display: inline-grid;\n place-items: center;\n flex-shrink: 0;\n border-radius: 999px;\n color: var(--dash-ink);\n background-color: var(--dash-card-strong);\n background-image: var(--dash-sheen);\n box-shadow: var(--dash-lit), var(--dash-round-shadow);\n transition: background-color 150ms, color 150ms, box-shadow 150ms;\n }\n\n [data-dashboard-glass] .dg-round:hover {\n color: var(--foreground);\n background-color: color-mix(in oklab, var(--dash-card-strong), var(--foreground) 6%);\n }\n\n [data-dashboard-glass] .dg-round:focus-visible {\n outline: 2px solid color-mix(in oklab, var(--dash-accent) 60%, transparent);\n outline-offset: 2px;\n }\n\n /* The selected or lead item: the brand fill, catching the light too. */\n [data-dashboard-glass] .dg-active {\n color: var(--primary-foreground);\n background-color: var(--primary);\n background-image: linear-gradient(150deg, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0) 55%);\n box-shadow:\n inset 0 1px 0 0 rgb(255 255 255 / 0.3),\n inset 0 0 0 1px rgb(255 255 255 / 0.12),\n 0 10px 22px -12px color-mix(in oklab, var(--primary) 80%, transparent);\n }\n\n /* Diagonal hatching, the texture for empty tracks and \"Other\". */\n [data-dashboard-glass] .dg-hatch {\n background-image: repeating-linear-gradient(135deg, var(--dash-hatch) 0 1.5px, transparent 1.5px 6px);\n }\n\n /* The lead KPI card: the brand colour with a soft light from the top-left. */\n [data-dashboard-glass] .dg-kpi-hero {\n color: var(--primary-foreground);\n background-color: var(--primary);\n background-image:\n radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / 0.22), transparent 60%),\n linear-gradient(160deg, transparent 40%, rgb(0 0 0 / 0.18));\n box-shadow:\n inset 0 1px 0 0 rgb(255 255 255 / 0.25),\n 0 22px 40px -24px color-mix(in oklab, var(--primary) 85%, transparent);\n }\n\n /* The notched pane's shape is an SVG; drop-shadow follows its outline. Its\n own layer, so the filter is drawn once rather than on every scroll frame. */\n [data-dashboard-glass] .dg-notch-bg {\n filter: var(--dash-notch-shadow);\n will-change: transform;\n }\n}\n\n/* People who ask for less transparency get solid surfaces. */\n@media (prefers-reduced-transparency: reduce) {\n [data-dashboard-glass] .dg-pane,\n [data-dashboard-glass] .dg-card,\n [data-dashboard-glass] .dg-tile,\n [data-dashboard-glass] .dg-round {\n background-color: var(--dash-surface);\n background-image: none;\n }\n}\n`;\n\nconst GLASS_FOCUS =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--dash-accent)_60%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent\";\nconst GLASS_PANE = \"dg-pane rounded-[28px] p-5 sm:p-6\";\nconst GLASS_CHART_HEIGHT = \"h-[15.5rem] @3xl:h-[20.5rem]\";\n\n// Server and client agree only on markup that never reads the clock or the\n// time zone, so layout effects run on the client alone.\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nconst capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);\n\n// Initials take a colour from the categorical slots by a hash of the name,\n// so a person keeps the same colour wherever they appear.\nconst AVATAR_HUES = [\"var(--dash-cat-1)\", \"var(--dash-cat-2)\", \"var(--dash-cat-3)\", \"var(--dash-accent)\"];\n\nfunction hueFor(name: string) {\n let hash = 0;\n for (let index = 0; index < name.length; index += 1) {\n hash = (hash * 31 + name.charCodeAt(index)) >>> 0;\n }\n return AVATAR_HUES[hash % AVATAR_HUES.length];\n}\n\n/** A round avatar: the photo when it loads, initials otherwise. Decorative; a name always sits beside it. */\nfunction GlassAvatar({ name, src, size = \"md\" }: { name: string; src?: string; size?: \"md\" | \"lg\" }) {\n const [failedSrc, setFailedSrc] = useState(null);\n const showImage = Boolean(src) && failedSrc !== src;\n const hue = hueFor(name);\n return (\n \n {showImage ? (\n setFailedSrc(src ?? null)}\n />\n ) : (\n initialsOf(name)\n )}\n \n );\n}\n\n/** Pane title row: a bold title, a muted caption, round actions on the right. */\nfunction GlassPaneHeader({\n id,\n title,\n caption,\n actions,\n}: {\n id: string;\n title: string;\n caption?: string;\n actions?: React.ReactNode;\n}) {\n return (\n
\n
\n

\n {title}\n

\n {caption &&

{caption}

}\n
\n {actions &&
{actions}
}\n
\n );\n}\n\nfunction GlassRoundLink({\n href,\n label,\n linkComponent: Link,\n}: {\n href: string;\n label: string;\n linkComponent: React.ElementType;\n}) {\n return (\n \n \n \n );\n}\n\n/** SVG hatch pattern; reference it as `url(#id)`. */\nfunction HatchPattern({ id, color = \"var(--dash-hatch)\", gap = 6 }: { id: string; color?: string; gap?: number }) {\n return (\n \n \n \n );\n}\n\nconst svgId = (prefix: string, id: string) => `${prefix}-${id.replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n// ------------------------------------------\n// Header and KPI cards\n// ------------------------------------------\nfunction GlassHeader({\n userName,\n summary,\n now,\n period,\n onPeriodChange,\n onExport,\n}: {\n userName?: string;\n summary: React.ReactNode;\n now: Date | null;\n period: DashboardPeriod;\n onPeriodChange: (period: DashboardPeriod) => void;\n onExport: () => void;\n}) {\n const firstName = userName?.trim().split(/\\s+/)[0];\n const greeting = now ? greetingFor(now) : \"Welcome back\";\n\n return (\n
\n
\n

{now ? longDate(now) : null}

\n

\n {firstName ? `${greeting}, ${firstName}` : greeting}\n

\n {summary && (\n

{summary}

\n )}\n
\n
\n {\n if (next === \"day\" || next === \"week\" || next === \"month\") onPeriodChange(next);\n }}\n aria-label=\"Reporting period\"\n className=\"dg-seg h-11\"\n >\n {PERIODS.map((option) => (\n \n {option.label}\n \n ))}\n \n \n \n Export\n \n
\n
\n );\n}\n\n/** What the current bucket of a metric added: \"+1,094 new users this month\". */\nfunction describeAdded(metric: DashboardMetric, period: DashboardPeriod) {\n const points = metric.series[period] ?? [];\n const value = points[points.length - 1]?.value ?? 0;\n const { current } = PERIOD_COPY[period];\n if (metric.currency) return `${formatMoney(value, metric.currency)} in ${metric.label.toLowerCase()} ${current}`;\n return `+${formatNumber(value)} ${metric.noun ? plural(value, metric.noun) : metric.label.toLowerCase()} ${current}`;\n}\n\n/** All-time totals as cards; the first carries the brand fill. */\nfunction GlassKpiCards({\n totals,\n metrics,\n period,\n linkComponent: Link,\n}: {\n totals: DashboardTotal[];\n metrics: DashboardMetric[];\n period: DashboardPeriod;\n linkComponent: React.ElementType;\n}) {\n return (\n
\n {totals.map((total, index) => {\n const hero = index === 0;\n const metric = total.metric ? metrics.find((entry) => entry.id === total.metric) : undefined;\n const linkLabel = `Open ${total.label.toLowerCase()}`;\n return (\n \n
\n

\n {total.icon && (\n \n {total.icon}\n \n )}\n {total.label}\n

\n {total.href && (\n \n \n \n )}\n
\n \n {formatCompact(total.value)}\n

\n {metric && (\n

\n {describeAdded(metric, period)}\n

\n )}\n \n );\n })}\n
\n );\n}\n\n// ------------------------------------------\n// Overview: metric tiles beside capsule columns\n// ------------------------------------------\nfunction GlassOverviewPanel({\n metrics,\n period,\n className,\n}: {\n metrics: DashboardMetric[];\n period: DashboardPeriod;\n className?: string;\n}) {\n const baseId = useId();\n const [activeId, setActiveId] = useState(metrics[0]?.id ?? \"\");\n const copy = PERIOD_COPY[period];\n const resolved = useMemo(() => resolveMetrics(metrics, period), [metrics, period]);\n const active = resolved.find((entry) => entry.metric.id === activeId) ?? resolved[0];\n\n // The tiles are a column from @3xl and a 2×2 grid below it, so every arrow moves.\n const onTabKeyDown = (event: React.KeyboardEvent) => {\n const index = resolved.findIndex((entry) => entry.metric.id === active?.metric.id);\n const last = resolved.length - 1;\n const next =\n event.key === \"ArrowDown\" || event.key === \"ArrowRight\"\n ? index >= last ? 0 : index + 1\n : event.key === \"ArrowUp\" || event.key === \"ArrowLeft\"\n ? index <= 0 ? last : index - 1\n : event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? last\n : null;\n if (next === null) return;\n event.preventDefault();\n const target = resolved[next];\n if (!target) return;\n setActiveId(target.metric.id);\n document.getElementById(`${baseId}-tab-${target.metric.id}`)?.focus();\n };\n\n return (\n
\n \n
\n \n {resolved.map((entry) => {\n const selected = entry.metric.id === active?.metric.id;\n return (\n setActiveId(entry.metric.id)}\n className={cn(\n \"flex min-w-0 flex-col items-start gap-1.5 rounded-2xl px-4 py-3 text-left transition-[background-color,color,box-shadow] duration-200\",\n GLASS_FOCUS,\n selected ? \"dg-active\" : \"dg-tile hover:bg-[var(--dash-card)]\",\n )}\n >\n \n {entry.metric.icon && {entry.metric.icon}}\n {entry.metric.label}\n \n \n \n {entry.formatShort(entry.current)}\n \n {entry.change !== null && }\n \n \n {capitalize(copy.current)}\n {entry.change !== null ? `, vs ${copy.previous}` : \"\"}\n \n \n );\n })}\n
\n\n {active && (\n \n
\n
\n \n {active.metric.label}, \n \n {active.format(active.total)}\n \n \n {active.metric.label} · {copy.window}\n \n \n {active.points.length > 0 && (\n \n \n \n Average{\" \"}\n \n {active.formatShort(active.average)}\n {\" \"}\n {copy.average}\n \n \n )}\n
\n
\n {active.points.length === 0 ? (\n \n ) : (\n \n )}\n
\n \n
\n
\n )}\n \n \n );\n}\n\n/**\n * Capsule columns on hatched full-height tracks. The current period wears the\n * brand fill with its value on a bubble; hover, tap or the arrow keys read any\n * other column. The dashed rule is the average.\n */\nfunction GlassCapsuleColumns({ entry }: { entry: ResolvedMetric }) {\n const { points } = entry;\n const [inspected, setInspected] = useState(null);\n const lastIndex = points.length - 1;\n const ceiling = niceCeiling(Math.max(0, ...points.map((point) => point.value)));\n const empty = entry.total === 0;\n const ticks = axisTicks(ceiling, Boolean(entry.metric.currency), empty);\n const shown = empty ? inspected : (inspected ?? lastIndex);\n const inspectedPoint = inspected === null ? null : points[inspected];\n\n useEffect(() => {\n setInspected(null);\n }, [entry.points]);\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const from = inspected ?? lastIndex;\n const moves: Record = {\n ArrowLeft: Math.max(0, from - 1),\n ArrowRight: Math.min(lastIndex, from + 1),\n Home: 0,\n End: lastIndex,\n };\n const move = moves[event.key];\n if (move !== undefined) {\n event.preventDefault();\n setInspected(move);\n } else if (event.key === \"Escape\") {\n setInspected(null);\n }\n };\n\n return (\n
\n setInspected(null)}\n onPointerLeave={(event) => {\n if (event.pointerType !== \"touch\") setInspected(null);\n }}\n className={cn(\"relative rounded-2xl\", GLASS_FOCUS, \"focus-visible:ring-offset-4\")}\n >\n
\n
\n
\n {ticks.map((tick) => (\n \n {entry.formatShort(tick)}\n \n ))}\n
\n
\n {entry.average > 0 && !empty && (\n \n )}\n
\n {points.map((point, index) => {\n const percent = (point.value / ceiling) * 100;\n const height = `max(${percent}%, 0.75rem)`;\n const isCurrent = index === lastIndex;\n const isInspected = index === inspected;\n return (\n setInspected(index)}\n onPointerDown={() => setInspected(index)}\n >\n
\n {point.value > 0 && (\n \n )}\n {index === shown && (\n \n {isInspected ? (\n
\n

{entry.format(point.value)}

\n

{point.fullLabel ?? point.label}

\n
\n ) : (\n \n {entry.formatShort(point.value)}\n \n )}\n
\n )}\n
\n
\n );\n })}\n
\n
\n
\n \n
\n {points.map((point, index) => (\n \n {point.shortLabel ?? point.label}\n {point.label}\n \n ))}\n
\n {empty && (\n
\n

\n Nothing recorded in this window yet.\n

\n
\n )}\n \n

\n {inspectedPoint ? `${inspectedPoint.fullLabel ?? inspectedPoint.label}: ${entry.format(inspectedPoint.value)}` : \"\"}\n

\n \n );\n}\n\n// ------------------------------------------\n// Traffic: a segmented half ring\n// ------------------------------------------\nconst RING_CX = 120;\nconst RING_CY = 118;\nconst RING_R = 94;\nconst RING_STROKE = 26;\nconst RING_GAP_DEG = 2.5;\nconst RING_MIN_DEG = 2;\n\nconst ringPoint = (deg: number) => {\n const rad = (deg * Math.PI) / 180;\n return [RING_CX + RING_R * Math.cos(rad), RING_CY - RING_R * Math.sin(rad)] as const;\n};\n\n// An arc from `from` to `to` degrees (180 = left, 0 = right), over the top.\nconst arcPath = (from: number, to: number) => {\n const [x1, y1] = ringPoint(from);\n const [x2, y2] = ringPoint(to);\n return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${RING_R} ${RING_R} 0 0 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`;\n};\n\nfunction layoutSegments(slices: Slice[]) {\n const total = sum(slices.map((slice) => slice.value));\n if (!total) return [];\n const gaps = RING_GAP_DEG * Math.max(0, slices.length - 1);\n const spans = slices.map((slice) => Math.max(RING_MIN_DEG, (slice.value / total) * (180 - gaps)));\n // Minimums can push past the half ring; scale back to fit.\n const scale = (180 - gaps) / sum(spans);\n let cursor = 180;\n return slices.map((slice, index) => {\n const span = (spans[index] ?? 0) * scale;\n const segment = { slice, from: cursor, to: cursor - span };\n cursor -= span + RING_GAP_DEG;\n return segment;\n });\n}\n\nconst isOther = (slice: Slice) => slice.key === \"__other\";\n\nfunction HalfRing({\n slices,\n focus,\n onFocus,\n label,\n children,\n}: {\n slices: Slice[];\n focus: string | null;\n onFocus: (key: string | null) => void;\n label: string;\n children: React.ReactNode;\n}) {\n const hatchId = svgId(\"dg-ring-hatch\", useId());\n const segments = layoutSegments(slices);\n\n return (\n
\n \n \n \n \n {segments.length === 0 ? (\n <>\n \n \n \n ) : (\n segments.map(({ slice, from, to }) => (\n onFocus(slice.key)}\n onPointerLeave={() => onFocus(null)}\n >\n \n {isOther(slice) && (\n \n )}\n \n ))\n )}\n \n
{children}
\n
\n );\n}\n\nfunction GlassTrafficPanel({\n shares,\n signUps,\n period,\n href,\n linkComponent,\n className,\n}: {\n shares?: DashboardShare[];\n signUps?: number;\n period: DashboardPeriod;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const [focus, setFocus] = useState(null);\n const copy = PERIOD_COPY[period];\n const { slices, total } = useMemo(() => compose(shares ?? []), [shares]);\n const ringLabel = total\n ? `Visits by source ${copy.trafficPhrase}: ${slices.map((slice) => `${slice.name} ${formatShare(slice.share)}`).join(\", \")}`\n : `No visits ${copy.trafficPhrase}`;\n\n return (\n
\n }\n />\n {!shares ? (\n } title=\"Traffic data is unavailable\" className=\"flex-1 py-12\">\n Connect visitor tracking to see where people come from.\n \n ) : (\n
\n \n \n {formatCompact(total)}\n \n \n {plural(total, [\"visit\", \"visits\"])} {copy.trafficPhrase}\n \n \n {total ? (\n <>\n \n {signUps !== undefined && }\n \n ) : (\n

\n No visits recorded {copy.trafficPhrase} yet.\n

\n )}\n
\n )}\n
\n );\n}\n\nfunction GlassConversion({ signUps, visits }: { signUps: number; visits: number }) {\n // Sign-ups can outnumber tracked visits (blocked trackers, invited users);\n // a rate above 100% would mislead, so that case is said plainly.\n const rate = signUps / visits;\n const valid = rate <= 1;\n return (\n
\n
\n
\n
\n Visit to sign-up rate\n \n
\n

{valid ? formatRate(rate) : \"—\"}

\n
\n
\n 0 ? `max(${rate * 100}%, 1.25rem)` : 0 }}\n />\n
\n

\n {valid\n ? `${formatNumber(signUps)} ${plural(signUps, [\"sign-up\", \"sign-ups\"])} from ${formatNumber(visits)} ${plural(visits, [\"visit\", \"visits\"])}`\n : `${formatNumber(signUps)} sign-ups outnumber the ${formatNumber(visits)} tracked visits.`}\n

\n
\n
\n );\n}\n\n// ------------------------------------------\n// Countries: a chunky segmented bar\n// ------------------------------------------\nfunction GlassCountriesPanel({\n shares,\n period,\n href,\n linkComponent,\n className,\n}: {\n shares?: DashboardShare[];\n period: DashboardPeriod;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const [focus, setFocus] = useState(null);\n const copy = PERIOD_COPY[period];\n const { slices, total } = useMemo(() => compose(shares ?? []), [shares]);\n const countryCount = (shares ?? []).filter((share) => share.value > 0).length;\n const leader = slices[0];\n\n return (\n
\n }\n />\n {!shares ? (\n } title=\"Country data is unavailable\" className=\"flex-1 py-12\">\n Connect visitor tracking to see where people are.\n \n ) : !total || !leader ? (\n } title={`No visits recorded ${copy.trafficPhrase} yet`} className=\"flex-1 py-12\">\n Countries appear here once visitors arrive.\n \n ) : (\n <>\n
\n

\n \n {formatNumber(countryCount)}\n \n {plural(countryCount, [\"country\", \"countries\"])}\n

\n

\n {formatNumber(total)} {plural(total, [\"visit\", \"visits\"])}\n

\n
\n

\n {leader.name} accounts for {formatShare(leader.share)} of visits.\n

\n {/* The legend rows below carry every value, so the bar is decoration. */}\n
setFocus(null)}>\n {slices.map((slice) => (\n setFocus(slice.key)}\n className={cn(\n \"min-w-2 rounded-[10px] transition-opacity duration-150\",\n isOther(slice) && \"dg-hatch\",\n focus !== null && focus !== slice.key && \"opacity-30\",\n )}\n style={{ flexGrow: slice.value / total, flexBasis: 0, backgroundColor: slice.color }}\n />\n ))}\n
\n \n \n )}\n
\n );\n}\n\n// ------------------------------------------\n// Payments: a quiet table\n// ------------------------------------------\nconst PAYMENT_HEAD = \"pb-3 text-left text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground\";\nconst PAYMENT_CELL = \"border-t border-[var(--dash-hairline)] py-3\";\n\nconst STATUS_TONES: Record = {\n completed: \"good\",\n complete: \"good\",\n paid: \"good\",\n succeeded: \"good\",\n success: \"good\",\n pending: \"warn\",\n processing: \"warn\",\n failed: \"bad\",\n declined: \"bad\",\n canceled: \"bad\",\n cancelled: \"bad\",\n};\n\nconst TONE_CLASSES = {\n good: \"bg-[color-mix(in_oklab,var(--dash-up)_10%,transparent)] text-[var(--dash-up)]\",\n warn: \"bg-[color-mix(in_oklab,var(--dash-warn)_12%,transparent)] text-[var(--dash-warn)]\",\n bad: \"bg-[color-mix(in_oklab,var(--dash-down)_10%,transparent)] text-[var(--dash-down)]\",\n neutral: \"bg-[var(--dash-well)] text-muted-foreground\",\n};\n\nconst isSettled = (status?: string) => !status || STATUS_TONES[status.toLowerCase()] === \"good\";\n\n/** A status pill: a dot and the label on a tint of its tone, never colour alone. */\nfunction GlassStatus({ status, className }: { status: string; className?: string }) {\n const tone = STATUS_TONES[status.toLowerCase()] ?? \"neutral\";\n return (\n \n \n {status}\n \n );\n}\n\nconst paymentDate = new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\" });\nconst paymentTime = new Intl.DateTimeFormat(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" });\n\nfunction GlassPaymentsPanel({\n payments,\n now,\n href,\n linkComponent,\n className,\n}: {\n payments: DashboardPayment[];\n now: Date | null;\n href?: string;\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const rows = useMemo(\n () =>\n payments\n .map((payment) => ({ ...payment, at: toDate(payment.date) }))\n .sort((a, b) => b.at.getTime() - a.at.getTime())\n .slice(0, 6),\n [payments],\n );\n\n return (\n
\n }\n />\n {rows.length ? (\n
\n \n \n \n \n \n \n \n \n \n \n \n {rows.map((row) => (\n \n \n \n \n \n \n ))}\n \n
Recent payments
\n Payment\n \n Status\n \n Amount\n \n Date\n
\n
\n {row.person ? (\n \n ) : (\n \n \n \n )}\n
\n

{row.person ?? row.method}

\n

{row.person ? row.method : \"Payment\"}

\n
\n
\n 		\n \n \n {formatMoney(row.amount, row.currency)}\n \n {/* Dates print in the visitor's time zone, so only after mount. */}\n {now && (\n \n )}\n
\n
\n ) : (\n } title=\"No payments yet\" className=\"flex-1 py-12\">\n Payments show up here as customers check out.\n \n )}\n
\n );\n}\n\n// ------------------------------------------\n// Activity: the notched pane\n// ------------------------------------------\nconst NOTCH_RADIUS = 28;\nconst NOTCH_SHOULDER = 18;\nconst NOTCH_INNER = 22;\nconst NOTCH_TRAY_PAD = 12;\n\nfunction notchPath(width: number, height: number, x1: number, x2: number, depth: number) {\n const r = NOTCH_RADIUS;\n const s = NOTCH_SHOULDER;\n const rn = NOTCH_INNER;\n return [\n `M 0 ${r}`,\n `A ${r} ${r} 0 0 1 ${r} 0`,\n `L ${x1 - s} 0`,\n `A ${s} ${s} 0 0 1 ${x1} ${s}`,\n `L ${x1} ${depth - rn}`,\n `A ${rn} ${rn} 0 0 0 ${x1 + rn} ${depth}`,\n `L ${x2 - rn} ${depth}`,\n `A ${rn} ${rn} 0 0 0 ${x2} ${depth - rn}`,\n `L ${x2} ${s}`,\n `A ${s} ${s} 0 0 1 ${x2 + s} 0`,\n `L ${width - r} 0`,\n `A ${r} ${r} 0 0 1 ${width} ${r}`,\n `L ${width} ${height - r}`,\n `A ${r} ${r} 0 0 1 ${width - r} ${height}`,\n `L ${r} ${height}`,\n `A ${r} ${r} 0 0 1 0 ${height - r}`,\n \"Z\",\n ].join(\" \");\n}\n\ninterface NotchShape {\n width: number;\n height: number;\n x1: number;\n x2: number;\n depth: number;\n}\n\n/**\n * A pane with a tray cut into the middle of its top edge: the tray holds a\n * row of people, and the pane's shoulders curve down around it so the canvas\n * shows through. The shape is an SVG drawn from the measured size, so its\n * fill, light edge and hairline match the other panes. Below `minWidth`, or\n * without a tray, it is a plain pane with the tray as a normal row.\n */\nfunction GlassNotchPane({\n title,\n tray,\n actions,\n minWidth = 860,\n className,\n children,\n ...props\n}: {\n title: React.ReactNode;\n tray?: React.ReactNode;\n actions?: React.ReactNode;\n minWidth?: number;\n className?: string;\n children: React.ReactNode;\n} & Omit, \"title\">) {\n const paneRef = useRef(null);\n const trayRef = useRef(null);\n const gradientId = useId();\n // Two phases: the pane's width decides whether the header takes the notched\n // layout; the notch is then measured from where the tray sits in that layout\n // (its size doesn't change when it moves, so a ResizeObserver alone wouldn't notice).\n const [wide, setWide] = useState(false);\n const [shape, setShape] = useState(null);\n const measureRef = useRef<() => void>(() => {});\n const hasTray = Boolean(tray);\n\n measureRef.current = () => {\n const pane = paneRef.current;\n const trayElement = trayRef.current;\n if (!pane || !trayElement) {\n setWide(false);\n setShape(null);\n return;\n }\n const box = pane.getBoundingClientRect();\n const nextWide = box.width >= minWidth;\n setWide(nextWide);\n if (!nextWide || !wide) {\n // Not wide, or the layout hasn't switched yet: the effect on `wide` measures again.\n if (!nextWide) setShape(null);\n return;\n }\n const trayBox = trayElement.getBoundingClientRect();\n const x1 = Math.round(trayBox.left - box.left - NOTCH_TRAY_PAD);\n const x2 = Math.round(trayBox.right - box.left + NOTCH_TRAY_PAD);\n const depth = Math.round(trayBox.bottom - box.top + NOTCH_TRAY_PAD);\n // The shoulders need room on both sides; otherwise draw a plain pane.\n if (x1 - NOTCH_SHOULDER < NOTCH_RADIUS + 8 || x2 + NOTCH_SHOULDER > box.width - NOTCH_RADIUS - 8) {\n setShape(null);\n return;\n }\n const next = { width: Math.round(box.width), height: Math.round(box.height), x1, x2, depth };\n setShape((previous) =>\n previous &&\n previous.width === next.width &&\n previous.height === next.height &&\n previous.x1 === next.x1 &&\n previous.x2 === next.x2 &&\n previous.depth === next.depth\n ? previous\n : next,\n );\n };\n\n useIsomorphicLayoutEffect(() => {\n const pane = paneRef.current;\n const trayElement = trayRef.current;\n if (!pane || !trayElement) return undefined;\n const observer = new ResizeObserver(() => measureRef.current());\n observer.observe(pane);\n observer.observe(trayElement);\n return () => observer.disconnect();\n }, [hasTray]);\n\n useIsomorphicLayoutEffect(() => {\n measureRef.current();\n }, [wide, minWidth, hasTray]);\n\n const notched = shape !== null;\n // Drawn half a pixel in, so the 1px strokes land on whole pixels.\n const path = shape ? notchPath(shape.width - 1, shape.height - 1, shape.x1, shape.x2, shape.depth) : null;\n const edgeId = svgId(\"dg-notch-edge\", gradientId);\n const sheenId = svgId(\"dg-notch-sheen\", gradientId);\n\n return (\n \n {shape && path && (\n \n \n \n \n \n \n {/* The same 150° sheen as the other panes. */}\n \n \n \n \n \n \n \n \n \n \n \n \n )}\n\n \n
{title}
\n {hasTray && (\n // In the notch the tray rides up to the pane's top edge.\n \n {tray}\n \n )}\n {actions ?
{actions}
:
}\n
\n {children}\n \n );\n}\n\n/** Top authors as a row of avatars with their post counts, the leader's badge in the brand colour. */\nfunction GlassAuthorTray({ authors, period }: { authors: DashboardAuthor[]; period: DashboardPeriod }) {\n const copy = PERIOD_COPY[period];\n const ranked = [...authors]\n .filter((author) => author.posts > 0)\n .sort((a, b) => b.posts - a.posts)\n .slice(0, 8);\n\n if (!ranked.length) {\n return (\n

\n No posts published {copy.authorsPhrase}\n

\n );\n }\n\n return (\n
\n

Top authors, {copy.authors}

\n
    \n {ranked.map((author, index) => {\n const label = `${author.name}, ${formatNumber(author.posts)} ${plural(author.posts, [\"post\", \"posts\"])} ${copy.authorsPhrase}`;\n return (\n
  1. \n \n \n \n \n \n \n {author.posts}\n \n
    2. \n );\n })}\n
\n
\n );\n}\n\n// The steps a customer takes, in order: a post brings them in, they sign up,\n// they pay, they write in.\nconst STAGES: { type: DashboardActivityType; label: string; noun: [string, string]; empty: string }[] = [\n { type: \"post\", label: \"Published\", noun: [\"post\", \"posts\"], empty: \"No posts yet\" },\n { type: \"user\", label: \"Signed up\", noun: [\"sign-up\", \"sign-ups\"], empty: \"No sign-ups yet\" },\n { type: \"payment\", label: \"Paid\", noun: [\"payment\", \"payments\"], empty: \"No payments yet\" },\n { type: \"message\", label: \"Wrote in\", noun: [\"message\", \"messages\"], empty: \"No messages yet\" },\n];\n\nconst ROWS_PER_STAGE = 3;\n\ntype TimedActivity = DashboardActivity & { at: Date };\n\n/** \"4m ago\" today; \"Yesterday, 3:12 PM\" or \"Mon, Oct 5, 3:12 PM\" before that. */\nfunction stageTime(date: Date, now: Date) {\n const time = activityTime(date, now);\n return dayKey(date) === dayKey(now) ? time : `${dayLabel(date, now)}, ${time}`;\n}\n\nfunction GlassStageRow({\n item,\n now,\n anchor,\n linkComponent: Link,\n}: {\n item: TimedActivity;\n now: Date | null;\n anchor: string;\n linkComponent: React.ElementType;\n}) {\n const type = ACTIVITY_TYPES[item.type];\n const Icon = type.icon;\n return (\n
  • \n {item.person || item.avatar ? (\n \n ) : (\n \n \n \n )}\n
    \n
    \n

    \n {type.label}: \n {item.href ? (\n \n {item.title}\n \n ) : (\n item.title\n )}\n

    \n {item.type === \"payment\" &&\n (isSettled(item.status) ? (\n \n ) : (\n \n ))}\n
    \n {item.subtitle &&

    {item.subtitle}

    }\n {now && (\n \n )}\n
    \n
    • \n );\n}\n\ninterface ConnectorPath {\n key: number;\n d: string;\n x1: number;\n y1: number;\n x2: number;\n y2: number;\n empty: boolean;\n}\n\n/**\n * Curved connectors from the last row of each stage to the first row of the\n * next, drawn only while the stages sit in one row. Solid in the accent when\n * the next stage has items, dashed when it is empty.\n */\nfunction useConnectors(gridRef: React.RefObject, deps: unknown[]) {\n const [paths, setPaths] = useState([]);\n\n useIsomorphicLayoutEffect(() => {\n const grid = gridRef.current;\n if (!grid) return undefined;\n\n const measure = () => {\n const box = grid.getBoundingClientRect();\n const stages = [...grid.querySelectorAll(\"[data-stage]\")];\n const first = stages[0];\n const inOneRow =\n first !== undefined && stages.length > 1 && stages.every((stage) => Math.abs(stage.offsetTop - first.offsetTop) < 2);\n if (!inOneRow) {\n setPaths([]);\n return;\n }\n const next: ConnectorPath[] = [];\n for (let index = 0; index < stages.length - 1; index += 1) {\n const fromStage = stages[index];\n const toStage = stages[index + 1];\n const from = fromStage?.querySelector('[data-anchor~=\"last\"]');\n const to = toStage?.querySelector('[data-anchor~=\"first\"]');\n const fromCard = fromStage?.firstElementChild;\n const toCard = toStage?.firstElementChild;\n if (!toStage || !from || !to || !fromCard || !toCard) continue;\n const a = from.getBoundingClientRect();\n const b = to.getBoundingClientRect();\n const x1 = fromCard.getBoundingClientRect().right - box.left;\n const x2 = toCard.getBoundingClientRect().left - box.left;\n const y1 = a.top + a.height / 2 - box.top;\n const y2 = b.top + b.height / 2 - box.top;\n const mid = (x1 + x2) / 2;\n next.push({\n key: index,\n d: `M ${x1} ${y1} C ${mid} ${y1}, ${mid} ${y2}, ${x2} ${y2}`,\n x1,\n y1,\n x2,\n y2,\n empty: toStage.hasAttribute(\"data-empty\"),\n });\n }\n setPaths(next);\n };\n\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(grid);\n return () => observer.disconnect();\n }, deps);\n\n return paths;\n}\n\n/**\n * Recent activity as a journey: the top authors sit in the notch with their\n * post counts; below, one card per step a customer takes, the newest few in\n * each, joined by connectors; beside them, the shortcut tiles.\n */\nfunction GlassActivityPanel({\n activity,\n authors,\n period,\n now,\n href,\n shortcuts,\n linkComponent,\n className,\n}: {\n activity: DashboardActivity[];\n authors?: DashboardAuthor[];\n period: DashboardPeriod;\n now: Date | null;\n href?: string;\n shortcuts: DashboardShortcut[];\n linkComponent: React.ElementType;\n className?: string;\n}) {\n const id = useId();\n const Link = linkComponent;\n const stages = useMemo(() => {\n const feed: TimedActivity[] = activity\n .map((item) => ({ ...item, at: toDate(item.date) }))\n .sort((a, b) => b.at.getTime() - a.at.getTime());\n return STAGES.map((stage) => {\n const all = feed.filter((item) => item.type === stage.type);\n return { ...stage, items: all.slice(0, ROWS_PER_STAGE), count: all.length };\n });\n }, [activity]);\n const gridRef = useRef(null);\n const connectors = useConnectors(gridRef, [stages, now]);\n\n return (\n \n }\n tray={authors && }\n actions={href && }\n >\n 0 && \"@7xl:grid-cols-[minmax(0,1fr)_14.5rem] @7xl:gap-8\",\n )}\n >\n
    \n {connectors.length > 0 && (\n \n {connectors.map((connector) => (\n \n \n {[\n [connector.x1, connector.y1],\n [connector.x2, connector.y2],\n ].map(([cx, cy]) => (\n \n ))}\n \n ))}\n \n )}\n {stages.map((stage) => {\n const Icon = ACTIVITY_TYPES[stage.type].icon;\n return (\n \n
    \n {stage.items.length ? (\n
      \n {stage.items.map((item, index) => (\n \n ))}\n
    \n ) : (\n \n \n \n \n

    {stage.empty}

    \n
    \n )}\n
    \n

    \n {stage.label}\n \n {formatNumber(stage.count)}\n recent {plural(stage.count, stage.noun)}\n \n

    \n \n );\n })}\n \n\n {shortcuts.length > 0 && (\n \n )}\n \n \n );\n}\n\nfunction GlassDashboard({\n isLiquid,\n userName,\n summary,\n totals,\n metrics,\n activity,\n sources,\n signUps,\n countries,\n authors,\n payments,\n shortcuts,\n links,\n linkComponent,\n period,\n onPeriodChange,\n onExport,\n now,\n className,\n style,\n ...props\n}: Omit & {\n isLiquid?: boolean;\n summary: React.ReactNode;\n totals: DashboardTotal[];\n metrics: DashboardMetric[];\n activity: DashboardActivity[];\n shortcuts: DashboardShortcut[];\n links: DashboardLinks;\n linkComponent: React.ElementType;\n period: DashboardPeriod;\n onPeriodChange: (period: DashboardPeriod) => void;\n onExport: () => void;\n now: Date | null;\n}) {\n return (\n \n \n
    \n \n\n {totals.length > 0 && (\n \n )}\n\n {/* One grid, so that between @3xl and @5xl traffic and countries pair\n up beside each other; from @5xl the desktop order returns. */}\n
    \n \n \n \n {payments && (\n \n )}\n \n
    \n
    \n \n );\n}\n\nfunction LiquidGlassDashboard({\n userName,\n summary,\n totals,\n metrics,\n activity,\n sources,\n signUps,\n countries,\n authors,\n payments,\n shortcuts,\n links,\n linkComponent,\n period,\n onPeriodChange,\n onExport,\n now,\n bgImage,\n className,\n style,\n ...props\n}: Omit & {\n summary: React.ReactNode;\n totals: DashboardTotal[];\n metrics: DashboardMetric[];\n activity: DashboardActivity[];\n shortcuts: DashboardShortcut[];\n links: DashboardLinks;\n linkComponent: React.ElementType;\n period: DashboardPeriod;\n onPeriodChange: (period: DashboardPeriod) => void;\n onExport: () => void;\n now: Date | null;\n}) {\n const liquidBg =\n bgImage ||\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1600,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\";\n\n const filterId = \"glass-blur-dashboard\";\n\n return (\n \n {/* Single Liquid Glass SVG Filter */}\n \n\n {/* Full-bleed background image */}\n \n\n \n \n \n \n );\n}\n\n// ==========================================\n// SECTION\n// ==========================================\n/**\n * An admin dashboard home: a greeting with all-time totals, a period switch,\n * an overview chart with a tab per metric, the activity feed, traffic\n * sources, visitors by country and the top authors. Every number comes from\n * props, so wire it to your API and the layout takes care of itself.\n *\n * `variant=\"glass\"` re-presents the same props as milky glass panes: KPI\n * cards with a brand-filled lead, metric tiles beside capsule columns, a\n * segmented half ring, the activity as a journey in a notched pane with the\n * top authors in the notch, a payments table and a chunky country bar.\n *\n * `variant=\"liquid-glass\"` wraps the glass dashboard with fluid SVG displacement map filters,\n * specular inner highlights, and ambient depth gradients using LiquidGlassWrapper, LiquidGlassBackground,\n * and LiquidGlassSvgFilter.\n */\nexport function Dashboard({\n variant = \"classic\",\n bgImage,\n userName,\n summary,\n totals = [],\n metrics = [],\n activity = [],\n sources,\n signUps,\n countries,\n authors,\n payments,\n shortcuts = [],\n defaultPeriod = \"month\",\n onExport,\n links = {},\n linkComponent = \"a\",\n now: fixedNow,\n className,\n style,\n ...props\n}: DashboardProps) {\n const [period, setPeriod] = useState(defaultPeriod);\n const now = useNow(fixedNow);\n const exportReport = () => (onExport ? onExport(period) : downloadCsv(metrics, period));\n\n if (variant === \"glass\") {\n return (\n \n );\n }\n\n if (variant === \"liquid-glass\") {\n return (\n \n );\n }\n\n return (\n \n
    \n \n\n
    \n {\n if (next === \"day\" || next === \"week\" || next === \"month\") setPeriod(next);\n }}\n aria-label=\"Reporting period\"\n >\n {PERIODS.map((option) => (\n \n {option.label}\n \n ))}\n \n \n \n Export\n \n
    \n\n
    \n {/* Side by side, the overview sets the row height: `contain: size`\n stops the activity feed from stretching the row, so it fills the\n row and scrolls instead. */}\n \n \n \n \n \n
    \n
    \n \n );\n}\n\nexport default Dashboard;\n", "type": "registry:component", "target": "components/custom/blocks/DashboardBlock.tsx" } ], "docs": "Named exports: Dashboard (also the default) plus LiquidGlassWrapper, LiquidGlassBackground, LiquidGlassSvgFilter, and the DashboardMetric, DashboardPoint, DashboardTotal, DashboardActivity, DashboardShare, DashboardAuthor, DashboardPayment, DashboardShortcut, DashboardLinks, DashboardPeriod and DashboardVariant types. variant: 'classic' (default) | 'glass' | 'liquid-glass'; all read the same props, and glass/liquid-glass also read `payments`, `shortcuts`, `totals[].metric` / `href` and `activity[].person` / `avatar`. Every number comes from props: `metrics` carry a series per period (day | week | month, oldest first) and an optional `change` per period; `sources`, `countries` and `authors` are keyed by period; `activity` items have a type of user | post | payment | message. Pass `linkComponent` (e.g. next/link) for the panel links and `onExport` to replace the built-in CSV. Composes toggle-group (segmented), chart and popover. Clock-dependent text renders after mount, so server and client markup agree.", "categories": [ "data-display", "layout" ], "type": "registry:component" }