{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-atlas", "title": "Atlas: store admin", "author": "Ballmac ", "description": "A dense, quiet six-page admin for an online store: a dashboard with a live date range, sortable orders with bulk actions, an order page with a refund flow, products, customers and settings.", "dependencies": [ "lucide-react", "recharts@^3" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/checkbox.json", "https://ui.ballmac.com/r/chart.json", "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/dropdown-menu.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/sheet.json", "https://ui.ballmac.com/r/sparkline.json", "https://ui.ballmac.com/r/switch.json" ], "files": [ { "path": "registry/ballmac/components/templates/atlas/atlas-fonts.ts", "content": "// Ballmac UI: Atlas template fonts. https://ui.ballmac.com/templates/template-atlas\nimport { Geist_Mono, Manrope } from \"next/font/google\"\n\nexport const atlasSans = Manrope({ variable: \"--atlas-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\nexport const atlasMono = Geist_Mono({ variable: \"--atlas-mono\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/atlas/atlas-fonts.ts" }, { "path": "registry/ballmac/components/templates/atlas/atlas-data.ts", "content": "// Ballmac UI: Atlas sample data. https://ui.ballmac.com/templates/template-atlas\n\nexport type AtlasPayment = \"paid\" | \"pending\" | \"refunded\"\nexport type AtlasFulfillment = \"unfulfilled\" | \"shipped\" | \"delivered\"\nexport type AtlasChannel = \"Online store\" | \"Instagram\" | \"Wholesale\" | \"Pop-up\"\n\nexport type AtlasOrder = {\n id: string\n /** ISO date-time, shown in UTC. */\n date: string\n customerId: string\n channel: AtlasChannel\n payment: AtlasPayment\n fulfillment: AtlasFulfillment\n items: { productId: string; qty: number }[]\n}\n\nexport type AtlasProduct = { id: string; name: string; category: string; price: number; stock: number; status: \"active\" | \"draft\"; hue: number; sold: number }\nexport type AtlasCustomer = { id: string; name: string; email: string; city: string; segment: \"VIP\" | \"New\" | \"At risk\" | \"Regular\"; tone: number }\n\nexport const products: AtlasProduct[] = [\n { id: \"p-01\", name: \"Field notebook, set of 3\", category: \"Paper\", price: 24, stock: 142, status: \"active\", hue: 85, sold: 812 },\n { id: \"p-02\", name: \"Brass pen, matte\", category: \"Writing\", price: 58, stock: 7, status: \"active\", hue: 70, sold: 244 },\n { id: \"p-03\", name: \"Waxed canvas tote\", category: \"Bags\", price: 96, stock: 38, status: \"active\", hue: 150, sold: 301 },\n { id: \"p-04\", name: \"Linen desk mat\", category: \"Desk\", price: 68, stock: 55, status: \"active\", hue: 40, sold: 187 },\n { id: \"p-05\", name: \"Graphite pencils, 12\", category: \"Writing\", price: 16, stock: 260, status: \"active\", hue: 260, sold: 1204 },\n { id: \"p-06\", name: \"Ceramic ink well\", category: \"Desk\", price: 42, stock: 0, status: \"active\", hue: 200, sold: 98 },\n { id: \"p-07\", name: \"Leather pen roll\", category: \"Bags\", price: 74, stock: 21, status: \"active\", hue: 30, sold: 156 },\n { id: \"p-08\", name: \"Stitched journal, A5\", category: \"Paper\", price: 32, stock: 9, status: \"active\", hue: 120, sold: 530 },\n { id: \"p-09\", name: \"Wooden letter tray\", category: \"Desk\", price: 54, stock: 33, status: \"draft\", hue: 55, sold: 0 },\n { id: \"p-10\", name: \"Wax seal kit\", category: \"Paper\", price: 28, stock: 64, status: \"active\", hue: 15, sold: 219 },\n { id: \"p-11\", name: \"Fountain pen, steel\", category: \"Writing\", price: 120, stock: 12, status: \"active\", hue: 230, sold: 143 },\n { id: \"p-12\", name: \"Travel ink, three colours\", category: \"Writing\", price: 36, stock: 5, status: \"active\", hue: 300, sold: 267 },\n]\n\nexport const customers: AtlasCustomer[] = [\n { id: \"c-01\", name: \"Amara Okafor\", email: \"amara@fernhill.co\", city: \"Lagos\", segment: \"VIP\", tone: 1 },\n { id: \"c-02\", name: \"Lucas Meyer\", email: \"lucas.meyer@mail.de\", city: \"Berlin\", segment: \"Regular\", tone: 2 },\n { id: \"c-03\", name: \"Sofia Alvarez\", email: \"sofia@alvarez.studio\", city: \"Mexico City\", segment: \"VIP\", tone: 3 },\n { id: \"c-04\", name: \"Hana Kobayashi\", email: \"hana.k@tokyo.jp\", city: \"Tokyo\", segment: \"New\", tone: 4 },\n { id: \"c-05\", name: \"Daniel Reyes\", email: \"dreyes@harbor.io\", city: \"Manila\", segment: \"At risk\", tone: 5 },\n { id: \"c-06\", name: \"Priya Raman\", email: \"priya@raman.in\", city: \"Chennai\", segment: \"Regular\", tone: 1 },\n { id: \"c-07\", name: \"Marcus Lindqvist\", email: \"marcus@fjord.se\", city: \"Stockholm\", segment: \"VIP\", tone: 2 },\n { id: \"c-08\", name: \"Elena Rossi\", email: \"elena@rossi.it\", city: \"Milan\", segment: \"Regular\", tone: 3 },\n { id: \"c-09\", name: \"Tomás Beltrán\", email: \"tomas@beltran.ar\", city: \"Buenos Aires\", segment: \"New\", tone: 4 },\n { id: \"c-10\", name: \"Grace Mutasa\", email: \"grace@mutasa.zw\", city: \"Harare\", segment: \"At risk\", tone: 5 },\n { id: \"c-11\", name: \"Noah Fischer\", email: \"noah.fischer@web.ch\", city: \"Zürich\", segment: \"Regular\", tone: 1 },\n { id: \"c-12\", name: \"Yuki Tanaka\", email: \"yuki@tanaka.jp\", city: \"Osaka\", segment: \"VIP\", tone: 2 },\n]\n\nconst channels: AtlasChannel[] = [\"Online store\", \"Online store\", \"Instagram\", \"Online store\", \"Wholesale\", \"Pop-up\", \"Online store\", \"Instagram\"]\nconst payments: AtlasPayment[] = [\"paid\", \"paid\", \"paid\", \"pending\", \"paid\", \"paid\", \"refunded\", \"paid\", \"paid\", \"pending\"]\nconst fulfilments: AtlasFulfillment[] = [\"delivered\", \"shipped\", \"unfulfilled\", \"delivered\", \"unfulfilled\", \"shipped\", \"delivered\", \"unfulfilled\", \"delivered\", \"shipped\"]\n\n/** 36 orders over three weeks, newest first. Built from fixed arithmetic so the server and browser agree. */\nexport const orders: AtlasOrder[] = Array.from({ length: 36 }, (_, i) => {\n const n = 10480 - i\n const day = 29 - Math.floor(i / 2)\n const hour = i % 2 === 0 ? 14 + (i % 5) : 8 + (i % 4)\n const minute = (i * 13) % 60\n const lines = 1 + (i % 3)\n const age = i < 6 ? 0 : i < 14 ? 1 : 2\n const payment = payments[i % payments.length]\n const fulfillment: AtlasFulfillment = payment === \"pending\" ? \"unfulfilled\" : age === 0 ? (i % 2 ? \"unfulfilled\" : \"shipped\") : fulfilments[i % fulfilments.length]\n return {\n id: `ORD-${n}`,\n date: `2026-09-${String(day).padStart(2, \"0\")}T${String(hour).padStart(2, \"0\")}:${String(minute).padStart(2, \"0\")}:00Z`,\n customerId: customers[(i * 5 + 1) % customers.length].id,\n channel: channels[i % channels.length],\n payment,\n fulfillment,\n items: Array.from({ length: lines }, (_, k) => ({ productId: products[(i * 3 + k * 4) % products.length].id, qty: 1 + ((i + k) % 3) })),\n }\n})\n\nexport const getCustomer = (id: string) => customers.find((c) => c.id === id) ?? customers[0]\nexport const getProduct = (id: string) => products.find((p) => p.id === id) ?? products[0]\nexport const orderTotal = (o: AtlasOrder) => o.items.reduce((n, l) => n + getProduct(l.productId).price * l.qty, 0)\nexport const orderShipping = (o: AtlasOrder) => (orderTotal(o) >= 100 ? 0 : 8)\nexport const orderGrand = (o: AtlasOrder) => orderTotal(o) + orderShipping(o)\n\nexport const money = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 })\nexport const moneyExact = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\", minimumFractionDigits: 2 })\nconst dateFmt = new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\", timeZone: \"UTC\" })\nconst timeFmt = new Intl.DateTimeFormat(\"en-US\", { hour: \"numeric\", minute: \"2-digit\", timeZone: \"UTC\" })\nexport const formatDate = (iso: string) => dateFmt.format(new Date(iso))\nexport const formatTime = (iso: string) => timeFmt.format(new Date(iso))\n\nexport const initials = (name: string) => name.split(\" \").map((w) => w[0]).join(\"\").slice(0, 2)\n\n/** Thirty daily revenue figures, the last one being today. */\nexport const revenueSeries = Array.from({ length: 30 }, (_, i) => {\n const base = 3200 + i * 46 + Math.round(Math.sin(i * 0.9) * 520) + (i % 7 === 5 ? 700 : 0)\n const previous = 2900 + i * 30 + Math.round(Math.cos(i * 0.8) * 430)\n return { day: `Sep ${i + 1}`, revenue: base, previous }\n})\n", "type": "registry:component", "target": "@components/ballmac/templates/atlas/atlas-data.ts" }, { "path": "registry/ballmac/components/templates/atlas/atlas-theme.tsx", "content": "// Ballmac UI: Atlas template shell. https://ui.ballmac.com/templates/template-atlas\n\"use client\"\n\nimport * as React from \"react\"\nimport { Bell, ChevronsUpDown, CircleHelp, LayoutDashboard, Menu, Package, Receipt, Search, Settings, Users } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from \"@/components/ballmac/command\"\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from \"@/components/ballmac/sheet\"\nimport { atlasMono, atlasSans } from \"@/components/ballmac/templates/atlas/atlas-fonts\"\nimport { cn } from \"@/lib/utils\"\n\ntype AtlasPage = \"dashboard\" | \"orders\" | \"products\" | \"customers\" | \"settings\"\n/** Where each page lives. `order` is the order detail page. */\ntype AtlasHrefs = Record\n\nconst defaultHrefs: AtlasHrefs = {\n dashboard: \"/atlas\",\n orders: \"/atlas/orders\",\n order: \"/atlas/orders/ORD-10479\",\n products: \"/atlas/products\",\n customers: \"/atlas/customers\",\n settings: \"/atlas/settings\",\n}\n\n/** Atlas's palette: warm stone neutrals with one teal. Dense, quiet and easy to read all day. */\nconst atlasCss = `\n.atlas-theme,body:not(:has([data-gallery])):has(.atlas-theme){--background:oklch(0.985 0.004 90);--foreground:oklch(0.2 0.012 80);--card:oklch(1 0 0);--card-foreground:oklch(0.2 0.012 80);--popover:oklch(1 0 0);--popover-foreground:oklch(0.2 0.012 80);--primary:oklch(0.26 0.012 80);--primary-foreground:oklch(0.985 0.004 90);--secondary:oklch(0.955 0.006 90);--secondary-foreground:oklch(0.2 0.012 80);--muted:oklch(0.955 0.006 90);--muted-foreground:oklch(0.47 0.015 85);--accent:oklch(0.94 0.008 90);--accent-foreground:oklch(0.2 0.012 80);--border:oklch(0.2 0.012 80 / 11%);--input:oklch(0.2 0.012 80 / 16%);--ring:oklch(0.5 0.1 190);--surface:oklch(0.968 0.006 90);--destructive:oklch(0.55 0.21 27);--chart-1:oklch(0.5 0.1 190);--chart-2:oklch(0.5 0.13 150);--chart-3:oklch(0.62 0.14 70);--chart-4:oklch(0.5 0.14 320);--chart-5:oklch(0.52 0.12 250);--radius:0.625rem}\n.dark .atlas-theme,.dark body:not(:has([data-gallery])):has(.atlas-theme){--background:oklch(0.165 0.008 80);--foreground:oklch(0.95 0.006 90);--card:oklch(0.2 0.009 80);--card-foreground:oklch(0.95 0.006 90);--popover:oklch(0.22 0.01 80);--popover-foreground:oklch(0.95 0.006 90);--primary:oklch(0.95 0.006 90);--primary-foreground:oklch(0.2 0.012 80);--secondary:oklch(0.25 0.01 80);--secondary-foreground:oklch(0.95 0.006 90);--muted:oklch(0.24 0.01 80);--muted-foreground:oklch(0.72 0.015 85);--accent:oklch(0.27 0.012 80);--accent-foreground:oklch(0.95 0.006 90);--border:oklch(1 0 0 / 10%);--input:oklch(1 0 0 / 14%);--ring:oklch(0.74 0.11 190);--surface:oklch(0.185 0.009 80);--destructive:oklch(0.7 0.19 25);--chart-1:oklch(0.78 0.11 190);--chart-2:oklch(0.78 0.14 150);--chart-3:oklch(0.82 0.14 80);--chart-4:oklch(0.76 0.13 320);--chart-5:oklch(0.76 0.11 250)}\n`\n\n/** Dialogs, sheets and menus render in a portal on , so the font is set there too while an Atlas page is mounted. */\nconst atlasBodyCss = `body:not(:has([data-gallery])):has(.atlas-theme){font-family:var(--atlas-sans),ui-sans-serif,system-ui,sans-serif}`\n\nconst nav: { key: AtlasPage; label: string; icon: typeof Receipt; badge?: string }[] = [\n { key: \"dashboard\", label: \"Dashboard\", icon: LayoutDashboard },\n { key: \"orders\", label: \"Orders\", icon: Receipt, badge: \"8\" },\n { key: \"products\", label: \"Products\", icon: Package },\n { key: \"customers\", label: \"Customers\", icon: Users },\n { key: \"settings\", label: \"Settings\", icon: Settings },\n]\n\nfunction AtlasMark({ className }: { className?: string }) {\n return (\n \n \n \n \n )\n}\n\nfunction SidebarNav({ page, hrefs, onNavigate }: { page: AtlasPage; hrefs: AtlasHrefs; onNavigate?: () => void }) {\n return (\n
\n
\n \n
\n

Atlas

\n

Fieldnote Goods

\n
\n
\n \n
\n \n
\n
\n )\n}\n\ntype AtlasShellProps = Omit, \"title\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: AtlasPage\n /** Page title shown in the top bar. */\n title: string\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n /** Controls on the right of the top bar. */\n actions?: React.ReactNode\n}\n\n/** Atlas's frame: sidebar, top bar with a command menu (⌘K), and a drawer on phones. Wrap every Atlas page in it. */\nfunction AtlasShell({ page, title, hrefs: overrides, actions, className, style, children, ...props }: AtlasShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [drawer, setDrawer] = React.useState(false)\n const [palette, setPalette] = React.useState(false)\n // Portaled UI (command menu, sheet) lives outside this element; give the font variables too.\n React.useEffect(() => {\n const classes = [atlasSans.variable, atlasMono.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n return (\n \n \n \n \n \n Navigation\n Pages in the Fieldnote Goods store\n setDrawer(false)} />\n \n \n\n
\n
\n \n

{title}

\n
\n setPalette(true)}\n className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 bg-card flex h-9 items-center gap-2 rounded-lg border px-2.5 text-sm outline-none transition-colors focus-visible:ring-[3px] sm:w-56\"\n >\n \n Search\n \n Search the store\n \n {actions}\n \n
\n
\n {children}\n
\n\n \n \n \n No results.\n \n {nav.map((n) => (\n { setPalette(false); window.location.assign(hrefs[n.key]) }}>\n {n.label}\n \n ))}\n \n \n {[\"ORD-10479\", \"ORD-10479\", \"ORD-10476\"].map((id) => (\n { setPalette(false); window.location.assign(hrefs.order) }}>\n {id}\n Order\n \n ))}\n \n \n Help center\n \n \n \n \n )\n}\n\n/** The heading row of a page: title text, a description and actions. */\nfunction AtlasPageHeader({ title, description, children }: { title: string; description?: string; children?: React.ReactNode }) {\n return (\n
\n
\n

{title}

\n {description &&

{description}

}\n
\n {children &&
{children}
}\n
\n )\n}\n\nconst buttonBase = \"focus-visible:ring-ring/50 inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-lg px-3.5 text-sm font-semibold outline-none transition-colors focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4\"\n/** Class names for Atlas buttons, so links and buttons match. */\nconst atlasButton = {\n primary: cn(buttonBase, \"bg-primary text-primary-foreground hover:opacity-90\"),\n outline: cn(buttonBase, \"bg-card hover:bg-accent border\"),\n ghost: cn(buttonBase, \"hover:bg-accent\"),\n danger: cn(buttonBase, \"bg-card text-destructive border-destructive/40 hover:bg-destructive/10 border\"),\n}\n\nconst paymentTone = { paid: \"success\", pending: \"warning\", refunded: \"neutral\" } as const\nconst fulfilmentTone = { unfulfilled: \"warning\", shipped: \"neutral\", delivered: \"success\" } as const\nconst label = (s: string) => s[0].toUpperCase() + s.slice(1)\n\n/** Payment status as a badge. */\nfunction PaymentBadge({ value }: { value: keyof typeof paymentTone }) {\n return {label(value)}\n}\n/** Fulfilment status as a badge. */\nfunction FulfilmentBadge({ value }: { value: keyof typeof fulfilmentTone }) {\n return {label(value)}\n}\n\n/** A small painted tile standing in for a product photo. */\nfunction ProductTile({ hue, className }: { hue: number; className?: string }) {\n return (\n \n \n \n )\n}\n\nexport { AtlasMark, AtlasPageHeader, AtlasShell, FulfilmentBadge, PaymentBadge, ProductTile, atlasButton, defaultHrefs as atlasDefaultHrefs, type AtlasHrefs, type AtlasPage, type AtlasShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/atlas/atlas-theme.tsx" }, { "path": "registry/ballmac/components/templates/atlas/atlas-dashboard.tsx", "content": "// Ballmac UI: Atlas dashboard page. https://ui.ballmac.com/templates/template-atlas\n\"use client\"\n\nimport * as React from \"react\"\nimport { AlertTriangle, ArrowDownRight, ArrowRight, ArrowUpRight, Download, PackageX, Truck } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\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 { formatDate, getCustomer, initials, money, moneyExact, orderGrand, orders, products, revenueSeries } from \"@/components/ballmac/templates/atlas/atlas-data\"\nimport { AtlasPageHeader, AtlasShell, FulfilmentBadge, PaymentBadge, ProductTile, atlasButton, type AtlasHrefs } from \"@/components/ballmac/templates/atlas/atlas-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype Range = \"7\" | \"30\"\n\nconst config = { revenue: { label: \"This period\", color: \"var(--chart-1)\" }, previous: { label: \"Previous period\", color: \"var(--chart-3)\" } } satisfies ChartConfig\n\nconst sum = (xs: number[]) => xs.reduce((a, b) => a + b, 0)\nconst pct = (a: number, b: number) => ((a - b) / b) * 100\n\ntype AtlasDashboardProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Atlas dashboard: a date range that recomputes the KPIs and chart, work that needs attention, top products and recent orders. */\nfunction AtlasDashboard({ hrefs, ...props }: AtlasDashboardProps) {\n const [range, setRange] = React.useState(\"30\")\n const n = Number(range)\n const data = revenueSeries.slice(-n)\n const revenue = sum(data.map((d) => d.revenue))\n const previous = sum(data.map((d) => d.previous))\n const orderCount = Math.round(revenue / 71)\n const prevOrders = Math.round(previous / 69)\n const conversion = 2.1 + n * 0.004\n const aov = revenue / orderCount\n\n const kpis = [\n { label: \"Revenue\", value: money.format(revenue), delta: pct(revenue, previous), trend: data.map((d) => d.revenue) },\n { label: \"Orders\", value: orderCount.toLocaleString(\"en-US\"), delta: pct(orderCount, prevOrders), trend: data.map((d) => Math.round(d.revenue / 70)) },\n { label: \"Conversion\", value: `${conversion.toFixed(1)}%`, delta: 4.2, trend: data.map((d, i) => 2 + Math.sin(i * 0.5) * 0.3 + i * 0.01) },\n { label: \"Average order\", value: moneyExact.format(aov), delta: -1.8, trend: data.map((d, i) => 70 + Math.cos(i * 0.7) * 6 - i * 0.1) },\n ]\n\n const unfulfilled = orders.filter((o) => o.fulfillment === \"unfulfilled\" && o.payment !== \"pending\").length\n const pending = orders.filter((o) => o.payment === \"pending\").length\n const low = products.filter((p) => p.stock <= 10 && p.status === \"active\")\n const top = [...products].filter((p) => p.status === \"active\").sort((a, b) => b.sold * b.price - a.sold * a.price).slice(0, 5)\n const topMax = top[0].sold * top[0].price\n const recent = orders.slice(0, 6)\n const h = { orders: hrefs?.orders ?? \"/atlas/orders\", order: hrefs?.order ?? \"/atlas/orders/ORD-10479\", products: hrefs?.products ?? \"/atlas/products\" }\n\n return (\n View orders}\n {...props}\n >\n
\n \n setRange(v as Range)} size=\"sm\">\n 7 days\n 30 days\n \n \n \n\n
\n {kpis.map((k) => {\n const up = k.delta >= 0\n const Arrow = up ? ArrowUpRight : ArrowDownRight\n return (\n
\n

{k.label}

\n
\n

{k.value}

\n \n
\n

\n \n {Math.abs(k.delta).toFixed(1)}%\n {up ? \"up\" : \"down\"} from the previous {n} days\n

\n
\n )\n })}\n
\n\n
\n
\n
\n

Revenue

\n

Daily, last {n} days

\n
\n = previous ? \"above\" : \"below\"} the previous period.`}\n className=\"mt-4 aspect-[16/7] 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

Needs attention

\n
    \n {[\n { icon: Truck, text: `${unfulfilled} orders to fulfil`, hint: \"Oldest from 2 days ago\", href: h.orders, tone: \"bg-chart-3/20\" },\n { icon: AlertTriangle, text: `${pending} payments pending`, hint: \"Bank transfers, 1 to 3 days\", href: h.orders, tone: \"bg-chart-5/20\" },\n { icon: PackageX, text: `${low.length} products low on stock`, hint: low.slice(0, 2).map((p) => p.name.split(\",\")[0]).join(\", \") + \" and more\", href: h.products, tone: \"bg-destructive/15\" },\n ].map((a) => (\n
  • \n \n \n {a.text}{a.hint}\n \n \n
    • \n ))}\n
\n
\n

Top products

\n
    \n {top.map((p) => (\n
  • \n \n
    \n

    {p.name}

    \n
    \n
    \n

    {money.format(p.sold * p.price)}

    \n
    • \n ))}\n
\n
\n
\n
\n\n
\n
\n

Recent orders

\n View all\n
\n
\n \n \n \n \n {[\"Order\", \"Date\", \"Customer\", \"Payment\", \"Fulfilment\", \"Total\"].map((c, i) => )}\n \n \n \n {recent.map((o) => {\n const c = getCustomer(o.customerId)\n return (\n \n \n \n \n \n \n \n \n )\n })}\n \n
Most recent orders
{c}
{o.id}{formatDate(o.date)}{initials(c.name)}{c.name}{moneyExact.format(orderGrand(o))}
\n
\n
\n
\n \n )\n}\n\nexport { AtlasDashboard, type AtlasDashboardProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/atlas/atlas-dashboard.tsx" }, { "path": "registry/ballmac/components/templates/atlas/atlas-orders.tsx", "content": "// Ballmac UI: Atlas orders page. https://ui.ballmac.com/templates/template-atlas\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Download, Printer, Search, Truck, X } from \"lucide-react\"\n\nimport { Checkbox } from \"@/components/ballmac/checkbox\"\nimport { formatDate, formatTime, getCustomer, initials, moneyExact, orderGrand, orders as seed, type AtlasOrder } from \"@/components/ballmac/templates/atlas/atlas-data\"\nimport { AtlasPageHeader, AtlasShell, FulfilmentBadge, PaymentBadge, atlasButton, type AtlasHrefs } from \"@/components/ballmac/templates/atlas/atlas-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype Tab = \"all\" | \"unfulfilled\" | \"unpaid\" | \"shipped\" | \"delivered\"\ntype SortKey = \"date\" | \"customer\" | \"channel\" | \"total\"\n\nconst tabs: { id: Tab; label: string; test: (o: AtlasOrder) => boolean }[] = [\n { id: \"all\", label: \"All\", test: () => true },\n { id: \"unfulfilled\", label: \"Unfulfilled\", test: (o) => o.fulfillment === \"unfulfilled\" },\n { id: \"unpaid\", label: \"Unpaid\", test: (o) => o.payment === \"pending\" },\n { id: \"shipped\", label: \"Shipped\", test: (o) => o.fulfillment === \"shipped\" },\n { id: \"delivered\", label: \"Delivered\", test: (o) => o.fulfillment === \"delivered\" },\n]\n\nconst PAGE = 10\nconst tones = [\"bg-chart-1/20\", \"bg-chart-2/20\", \"bg-chart-3/25\", \"bg-chart-4/20\", \"bg-chart-5/20\"]\n\ntype AtlasOrdersProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Atlas orders page: status tabs with counts, search, sortable columns, row selection with bulk actions, and pagination. */\nfunction AtlasOrders({ hrefs, ...props }: AtlasOrdersProps) {\n const [rows, setRows] = React.useState(seed)\n const [tab, setTab] = React.useState(\"all\")\n const [query, setQuery] = React.useState(\"\")\n const [sort, setSort] = React.useState<{ key: SortKey; dir: \"asc\" | \"desc\" }>({ key: \"date\", dir: \"desc\" })\n const [page, setPage] = React.useState(0)\n const [selected, setSelected] = React.useState>(new Set())\n const orderHref = hrefs?.order ?? \"/atlas/orders/ORD-10479\"\n\n const q = query.trim().toLowerCase()\n const filtered = rows\n .filter(tabs.find((t) => t.id === tab)!.test)\n .filter((o) => !q || [o.id, getCustomer(o.customerId).name, o.channel].join(\" \").toLowerCase().includes(q))\n const sorted = [...filtered].sort((a, b) => {\n const dir = sort.dir === \"asc\" ? 1 : -1\n const val = (o: AtlasOrder) => (sort.key === \"date\" ? o.date : sort.key === \"customer\" ? getCustomer(o.customerId).name : sort.key === \"channel\" ? o.channel : orderGrand(o))\n const x = val(a)\n const y = val(b)\n return (x < y ? -1 : x > y ? 1 : 0) * dir\n })\n const pages = Math.max(1, Math.ceil(sorted.length / PAGE))\n const safePage = Math.min(page, pages - 1)\n const view = sorted.slice(safePage * PAGE, safePage * PAGE + PAGE)\n const allOnPage = view.length > 0 && view.every((o) => selected.has(o.id))\n const someOnPage = view.some((o) => selected.has(o.id))\n\n function toggleSort(key: SortKey) {\n setSort((s) => (s.key === key ? { key, dir: s.dir === \"asc\" ? \"desc\" : \"asc\" } : { key, dir: key === \"total\" || key === \"date\" ? \"desc\" : \"asc\" }))\n setPage(0)\n }\n function toggleAll(on: boolean) {\n setSelected((s) => {\n const next = new Set(s)\n for (const o of view) on ? next.add(o.id) : next.delete(o.id)\n return next\n })\n }\n function toggleOne(id: string, on: boolean) {\n setSelected((s) => {\n const next = new Set(s)\n on ? next.add(id) : next.delete(id)\n return next\n })\n }\n function markShipped() {\n setRows((all) => all.map((o) => (selected.has(o.id) && o.fulfillment === \"unfulfilled\" && o.payment !== \"pending\" ? { ...o, fulfillment: \"shipped\" } : o)))\n setSelected(new Set())\n }\n\n const head = (k: SortKey, children: React.ReactNode, right?: boolean) => (\n \n \n \n )\n\n return (\n Export} {...props}>\n
\n \n\n
\n
\n
\n {tabs.map((t) => {\n const count = rows.filter(t.test).length\n const on = tab === t.id\n return (\n { setTab(t.id); setPage(0); setSelected(new Set()) }}\n className={cn(\"focus-visible:ring-ring/50 flex shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-semibold outline-none transition-colors focus-visible:ring-[3px]\", on ? \"bg-accent text-foreground\" : \"text-muted-foreground hover:text-foreground\")}\n >\n {t.label} {count}\n \n )\n })}\n
\n
\n \n { setQuery(e.target.value); setPage(0) }}\n placeholder=\"Search order, customer or channel\"\n className=\"bg-background focus-visible:ring-ring/50 placeholder:text-muted-foreground h-9 w-full rounded-lg border pe-3 ps-9 text-sm outline-none focus-visible:ring-[3px]\"\n />\n
\n
\n\n {selected.size > 0 && (\n
\n

{selected.size} selected

\n \n \n \n
\n )}\n\n
\n \n \n \n \n \n \n {head(\"date\", \"Date\")}\n {head(\"customer\", \"Customer\")}\n {head(\"channel\", \"Channel\")}\n \n \n {head(\"total\", \"Total\", true)}\n \n \n \n {view.map((o) => {\n const c = getCustomer(o.customerId)\n const on = selected.has(o.id)\n return (\n \n \n \n \n \n \n \n \n \n \n )\n })}\n {view.length === 0 && (\n \n )}\n \n
Orders, {sorted.length} shown
toggleAll(v === true)} />OrderPaymentFulfilment
toggleOne(o.id, v === true)} />{o.id}{formatDate(o.date)}{formatTime(o.date)}{initials(c.name)}{c.name}{o.channel}{moneyExact.format(orderGrand(o))}
No orders match. Try another status or clear the search.
\n
\n\n
\n

\n {sorted.length === 0 ? \"No orders\" : `Showing ${safePage * PAGE + 1}–${safePage * PAGE + view.length} of ${sorted.length}`}\n

\n
\n \n Page {safePage + 1} of {pages}\n \n
\n
\n
\n
\n \n )\n}\n\nexport { AtlasOrders, type AtlasOrdersProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/atlas/atlas-orders.tsx" }, { "path": "registry/ballmac/components/templates/atlas/atlas-order.tsx", "content": "// Ballmac UI: Atlas order detail page. https://ui.ballmac.com/templates/template-atlas\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronRight, CreditCard, Mail, MapPin, MoreHorizontal, Printer, RotateCcw, Truck } from \"lucide-react\"\n\nimport { Checkbox } from \"@/components/ballmac/checkbox\"\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from \"@/components/ballmac/dialog\"\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from \"@/components/ballmac/dropdown-menu\"\nimport { formatDate, formatTime, getCustomer, getProduct, initials, moneyExact, orderShipping, orderTotal, orders } from \"@/components/ballmac/templates/atlas/atlas-data\"\nimport { AtlasShell, FulfilmentBadge, PaymentBadge, ProductTile, atlasButton, type AtlasHrefs } from \"@/components/ballmac/templates/atlas/atlas-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype Event = { id: string; title: string; detail?: string; at: string }\n\ntype AtlasOrderProps = React.ComponentProps<\"div\"> & {\n /** Which sample order to show. */\n orderId?: string\n hrefs?: Partial\n}\n\n/** The Atlas order page: items and totals, a live timeline, fulfilment and a refund flow with validation, plus customer and notes. */\nfunction AtlasOrder({ orderId = \"ORD-10479\", hrefs, ...props }: AtlasOrderProps) {\n const base = orders.find((o) => o.id === orderId) ?? orders[1]\n const customer = getCustomer(base.customerId)\n const [fulfillment, setFulfillment] = React.useState(base.fulfillment)\n const [payment, setPayment] = React.useState(base.payment)\n const [refunded, setRefunded] = React.useState(0)\n const [events, setEvents] = React.useState([\n { id: \"e3\", title: \"Payment captured\", detail: `${moneyExact.format(orderTotal(base) + orderShipping(base))} on Visa ending 4242`, at: base.date },\n { id: \"e2\", title: \"Order confirmation sent\", detail: `Emailed to ${customer.email}`, at: base.date },\n { id: \"e1\", title: \"Order placed\", detail: `via ${base.channel}`, at: base.date },\n ])\n const [note, setNote] = React.useState(\"Gift wrap please. Leave with the neighbour if nobody is home.\")\n const [savedNote, setSavedNote] = React.useState(note)\n const [refundOpen, setRefundOpen] = React.useState(false)\n const [picked, setPicked] = React.useState>({})\n const [reason, setReason] = React.useState(\"\")\n const [error, setError] = React.useState(\"\")\n const [announce, setAnnounce] = React.useState(\"\")\n\n const subtotal = orderTotal(base)\n const shipping = orderShipping(base)\n const total = subtotal + shipping\n const refundAmount = base.items.reduce((n, l) => n + (picked[l.productId] ? getProduct(l.productId).price * l.qty : 0), 0)\n const stamp = \"2026-09-29T14:20:00Z\"\n\n function addEvent(title: string, detail?: string) {\n setEvents((all) => [{ id: `e${all.length + 1}-${title}`, title, detail, at: stamp }, ...all])\n }\n function ship() {\n setFulfillment(\"shipped\")\n addEvent(\"Marked as shipped\", \"Tracking sent to the customer\")\n setAnnounce(`${base.id} marked as shipped`)\n }\n function refund() {\n if (refundAmount === 0) return setError(\"Choose at least one item to refund.\")\n if (!reason) return setError(\"Pick a reason so your team can follow up.\")\n setRefunded(refundAmount)\n if (refundAmount === subtotal) setPayment(\"refunded\")\n addEvent(`Refunded ${moneyExact.format(refundAmount)}`, `Reason: ${reason}`)\n setAnnounce(`Refunded ${moneyExact.format(refundAmount)}`)\n setRefundOpen(false)\n setPicked({})\n setReason(\"\")\n setError(\"\")\n }\n\n return (\n \n
\n \n\n
\n
\n
\n

{base.id}

\n \n \n
\n

{formatDate(base.date)} at {formatTime(base.date)} · {base.channel}

\n
\n
\n \n {fulfillment === \"unfulfilled\" && payment !== \"pending\" ? (\n \n ) : (\n \n )}\n \n \n \n Duplicate order\n Download invoice\n \n Cancel order\n \n \n
\n
\n

{announce}

\n\n
\n
\n
\n

Items

\n
    \n {base.items.map((l) => {\n const p = getProduct(l.productId)\n return (\n
  • \n \n
    \n

    {p.name}

    \n

    {p.category} · {moneyExact.format(p.price)} each

    \n
    \n

    × {l.qty}

    \n

    {moneyExact.format(p.price * l.qty)}

    \n
    • \n )\n })}\n
\n
\n
Subtotal
{moneyExact.format(subtotal)}
\n
Shipping
{shipping === 0 ? \"Free\" : moneyExact.format(shipping)}
\n {refunded > 0 &&
Refunded
−{moneyExact.format(refunded)}
}\n
Total
{moneyExact.format(total - refunded)}
\n
\n
\n\n
\n

Timeline

\n
    \n {events.map((e, i) => (\n
  1. \n {i < events.length - 1 && }\n \n
    \n

    {e.title}

    \n {e.detail &&

    {e.detail}

    }\n
    \n

    {formatDate(e.at)}, {formatTime(e.at)}

    \n
    2. \n ))}\n
\n
\n
\n\n