{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dashboard-1", "title": "Dashboard 1: sales overview", "author": "Ballmac ", "description": "A sales dashboard page: a date-range switch that recomputes everything, four KPI cards with change and trend, a revenue area chart against the previous period, revenue by channel and a recent-orders table.", "dependencies": [ "lucide-react", "recharts@^3" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/chart.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/sparkline.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/blocks/dashboard-1/dashboard-1.tsx", "content": "// Ballmac UI: Dashboard 1. https://ui.ballmac.com/blocks/dashboard-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDownRight, ArrowUpRight, Download } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { Button } from \"@/components/ballmac/button\"\nimport { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"@/components/ballmac/chart\"\nimport { SegmentedControl, SegmentedControlItem } from \"@/components/ballmac/segmented-control\"\nimport { Sparkline } from \"@/components/ballmac/sparkline\"\nimport { cn } from \"@/lib/utils\"\nimport { useLocale } from \"@/lib/ballmac/i18n\"\n\ntype Dashboard1Range = \"7d\" | \"30d\" | \"90d\"\n\ntype Dashboard1Order = {\n id: string\n customer: string\n email: string\n status: \"paid\" | \"pending\" | \"refunded\"\n total: number\n /** ISO date (YYYY-MM-DD), shown in UTC. */\n date: string\n}\n\ntype Dashboard1Channel = { name: string; share: number }\n\ntype Dashboard1Props = Omit, \"title\"> & {\n /** Page heading. */\n title?: string\n /** One line under the heading. */\n description?: string\n /** Range shown first. */\n defaultRange?: Dashboard1Range\n /** Called when the range changes. Pass your own data for each range with `getSeries`. */\n onRangeChange?: (range: Dashboard1Range) => void\n /**\n * Revenue per day for a range, and the same days a period earlier. Defaults to a built-in demo curve so the block\n * works with no data.\n */\n getSeries?: (range: Dashboard1Range) => { label: string; revenue: number; previous: number; orders: number }[]\n /** Share of revenue by channel, largest first. */\n channels?: Dashboard1Channel[]\n /** Recent orders, newest first. */\n orders?: Dashboard1Order[]\n /** ISO currency code. */\n currency?: string\n /** Locale for numbers and dates. Fixed by default so server and browser match. */\n locale?: string\n}\n\nconst DAYS: Record = { \"7d\": 7, \"30d\": 30, \"90d\": 90 }\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n\n/** A smooth, deterministic demo curve (no randomness, so the server and browser draw the same chart). */\nfunction demoSeries(range: Dashboard1Range) {\n const n = DAYS[range]\n const end = Date.UTC(2026, 8, 30)\n const point = (i: number, shift: number) => {\n const t = i + shift\n return Math.round(2900 + t * 6 + Math.sin(t / 2.3) * 520 + Math.cos(t / 5.1) * 380)\n }\n return Array.from({ length: n }, (_, i) => {\n const d = new Date(end - (n - 1 - i) * 86400000)\n const revenue = point(i, 0)\n return {\n label: `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`,\n revenue,\n previous: Math.round(point(i, -n) * 0.94),\n orders: Math.round(revenue / 54),\n }\n })\n}\n\nconst defaultChannels: Dashboard1Channel[] = [\n { name: \"Search\", share: 38 },\n { name: \"Direct\", share: 27 },\n { name: \"Email\", share: 19 },\n { name: \"Social\", share: 11 },\n { name: \"Referral\", share: 5 },\n]\n\nconst defaultOrders: Dashboard1Order[] = [\n { id: \"ORD-10482\", customer: \"Northwind Studio\", email: \"billing@northwind.co\", status: \"paid\", total: 4200, date: \"2026-09-30\" },\n { id: \"ORD-10481\", customer: \"Globex Corp\", email: \"ap@globex.com\", status: \"pending\", total: 12800, date: \"2026-09-30\" },\n { id: \"ORD-10480\", customer: \"Initech\", email: \"finance@initech.io\", status: \"paid\", total: 960, date: \"2026-09-29\" },\n { id: \"ORD-10479\", customer: \"Umbrella Labs\", email: \"pay@umbrella.dev\", status: \"refunded\", total: 3450, date: \"2026-09-29\" },\n { id: \"ORD-10478\", customer: \"Stark Supply\", email: \"accounts@stark.supply\", status: \"paid\", total: 7100, date: \"2026-09-28\" },\n { id: \"ORD-10477\", customer: \"Wayne Freight\", email: \"ops@wayne.co\", status: \"paid\", total: 2280, date: \"2026-09-27\" },\n]\n\nconst statusTone = { paid: \"success\", pending: \"warning\", refunded: \"neutral\" } as const\nconst statusLabel = { paid: \"Paid\", pending: \"Pending\", refunded: \"Refunded\" }\n\nconst config = {\n revenue: { label: \"This period\", color: \"var(--chart-1)\" },\n previous: { label: \"Previous period\", color: \"var(--muted-foreground)\" },\n} satisfies ChartConfig\n\n/** A short moving average, so a noisy ratio draws as a calm trend line. */\nfunction smooth(values: number[]) {\n return values.map((_, i) => {\n const slice = values.slice(Math.max(0, i - 3), i + 4)\n return slice.reduce((n, v) => n + v, 0) / slice.length\n })\n}\n\nfunction pctChange(now: number, before: number) {\n return before === 0 ? 0 : ((now - before) / before) * 100\n}\n\nfunction Dashboard1({\n title = \"Overview\",\n description = \"How the store is doing compared with the previous period.\",\n defaultRange = \"30d\",\n onRangeChange,\n getSeries = demoSeries,\n channels = defaultChannels,\n orders = defaultOrders,\n currency = \"USD\",\n locale,\n className,\n ...props\n}: Dashboard1Props) {\n const defaultLocale = useLocale()\n locale ??= defaultLocale\n const [range, setRange] = React.useState(defaultRange)\n const series = React.useMemo(() => getSeries(range), [getSeries, range])\n const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: \"currency\", currency, maximumFractionDigits: 0 }), [locale, currency])\n const compact = React.useMemo(() => new Intl.NumberFormat(locale, { style: \"currency\", currency, notation: \"compact\", minimumFractionDigits: 0, maximumFractionDigits: 1 }), [locale, currency])\n const int = React.useMemo(() => new Intl.NumberFormat(locale), [locale])\n const dateFmt = React.useMemo(() => new Intl.DateTimeFormat(locale, { month: \"short\", day: \"numeric\", timeZone: \"UTC\" }), [locale])\n\n const sum = (key: \"revenue\" | \"previous\" | \"orders\") => series.reduce((n, p) => n + p[key], 0)\n const revenue = sum(\"revenue\")\n const prevRevenue = sum(\"previous\")\n const orderCount = sum(\"orders\")\n const prevOrders = Math.round(prevRevenue / 54)\n const aov = orderCount ? revenue / orderCount : 0\n const prevAov = prevOrders ? prevRevenue / prevOrders : 0\n const kpis = [\n { label: \"Revenue\", value: compact.format(revenue), delta: pctChange(revenue, prevRevenue), trend: series.map((p) => p.revenue) },\n { label: \"Orders\", value: int.format(orderCount), delta: pctChange(orderCount, prevOrders), trend: series.map((p) => p.orders) },\n { label: \"Average order\", value: money.format(aov), delta: pctChange(aov, prevAov), trend: smooth(series.map((p) => p.revenue / Math.max(p.orders, 1))) },\n { label: \"Refund rate\", value: \"1.8%\", delta: -0.4, invert: true, trend: series.map((p, i) => 2.4 - Math.sin(i / 3) * 0.3 - i * 0.004) },\n ]\n const tickEvery = Math.max(1, Math.floor(series.length / 6))\n\n return (\n
\n
\n
\n

{title}

\n

{description}

\n
\n
\n { setRange(v as Dashboard1Range); onRangeChange?.(v as Dashboard1Range) }}>\n 7 days\n 30 days\n 90 days\n \n \n
\n
\n\n
\n {kpis.map((k) => {\n const good = k.invert ? k.delta <= 0 : k.delta >= 0\n const Arrow = k.delta >= 0 ? ArrowUpRight : ArrowDownRight\n return (\n
\n
{k.label}
\n
\n {k.value}\n \n \n {Math.abs(k.delta).toFixed(1)}%\n {k.delta >= 0 ? \"up\" : \"down\"} vs previous\n \n \n
\n
\n )\n })}\n
\n\n
\n
\n
\n

Revenue

\n

Daily, last {DAYS[range]} days

\n
\n = prevRevenue ? \"above\" : \"below\"} the previous period.`}\n className=\"mt-4 aspect-[16/8] w-full\"\n >\n \n \n \n \n \n \n \n \n \n `$${(v / 1000).toFixed(1)}k`} />\n money.format(Number(v))} />} />\n \n \n } />\n \n \n
\n\n
\n

Revenue by channel

\n
    \n {channels.map((c) => (\n
  • \n
    \n {c.name}\n {c.share}%\n
    \n
    \n
    \n
    \n
    • \n ))}\n
\n
\n
\n\n
\n
\n

Recent orders

\n View all\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n {orders.map((o) => (\n \n \n \n \n \n \n \n ))}\n \n
OrderCustomerStatusDateTotal
{o.id}\n {o.customer}\n {o.email}\n {statusLabel[o.status]}{dateFmt.format(new Date(`${o.date}T00:00:00Z`))}{money.format(o.total)}
\n
\n
\n
\n )\n}\n\nexport { Dashboard1, type Dashboard1Props, type Dashboard1Order, type Dashboard1Channel, type Dashboard1Range }\n", "type": "registry:component", "target": "@components/ballmac/blocks/dashboard-1/dashboard-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "dashboard", "analytics", "kpi", "chart", "orders", "sales", "table" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The first screen of a store or SaaS admin. Pass getSeries(range) returning { label, revenue, previous, orders }[], plus channels, orders and currency; the KPIs, deltas and chart are derived from the series.", "whenToUse": [ "Admin home pages", "Sales, billing and usage overviews" ], "whenNotToUse": [ "Traffic analytics (use dashboard-2)" ], "composesWith": [ "app-shell-1", "dashboard-2", "billing-1", "settings-1" ], "a11y": [ { "keys": "Arrow Left / Right", "action": "Changes the date range" }, { "keys": "Chart", "action": "Labelled figure with a plain-language summary; the same numbers are in the KPI cards and the table" }, { "keys": "Tab", "action": "The orders table scrolls sideways on phones and is focusable" } ], "customization": [ "getSeries(range) for your own data", "channels, orders, currency, locale", "onRangeChange to fetch" ] }, "examples": [ "dashboard-1-demo", "dashboard-1-week" ], "url": "https://ui.ballmac.com/components/dashboard-1" }, "categories": [ "blocks", "dashboard" ], "type": "registry:block" }