Skip to Content
StyleguideTemplatesDashboard

Dashboard

A dashboard you would build for your app’s home route: what needs doing today, how the numbers are moving and where to go next. It is composed entirely from stock Mantine components inside the CLI’s app shell. buildpad init itself writes the minimal Welcome page shown on App shell. Scroll inside the frame to see the whole page; hover the bars for values.

What generates this

No CLI template produces this screen. buildpad init writes app/[lang]/(authenticated)/page.tsx from packages/cli/templates/app/authenticated-page.tsx: a Welcome title, an intro line and a Next steps card. Replace that page with a composition like this one, built from the parts listed under Built from. Only the surrounding app shell is generated.

Overview

A greeting with date range and actions, a dismissible budget banner, four KPI cards with sparklines, spend and budget charts, the approvals queue, activity, deliveries and shortcuts.

Northwind Ops

/

Dashboard

Good morning, Amelia

Wednesday, 28 October · 2 approvals and 7 overdue deliveries need your attention.

Open purchase orders

128

+12

vs. last week

Spend this month

$412,380

+4.1%

of $520k budget

Avg. approval time

6.4 h

-1.2 h

faster than target

Overdue deliveries

7

+2

needs attention

Spend by month

Committed spend · May – Oct 2026

$2,203,000

+8.2% vs. prior 6 months
$412k
Previous monthsCurrent monthMonthly budget

Budget by category

October · $412k of $520k

Freight

$148k / $160k

93%

Packaging

$96k / $90k

107%

Software

$72k / $110k

65%

Facilities

$41k / $70k

59%

Catering

$33k / $50k

66%

Office

$22k / $40k

55%

Approvals waiting on you
2

Oldest first · you approve for Finance and Procurement
OrderRequested byAmountActions

PO-2041

Atlas Packaging

DO

Daniel Osei

Pending approval

$12,840

Due 04 Nov

PO-2032

Northgate Workwear

MS

Marco Silva

Pending approval

$5,480

Due 06 Nov

Recent activity

View all
PR

Priya Raman approved

PO-2040 · Keystone Logistics

12 min ago

DO

Daniel Osei submitted

PO-2041 · Atlas Packaging

1 hour ago

AH

Amelia Hart invited

Marco Silva to Procurement

3 hours ago

HK

Hana Kobayashi commented on

PO-2038 · Meridian Foods

Yesterday

Upcoming deliveries

Next 7 days and overdue

Harbor Office Supply

PO-2034 · Printer paper and toner

Due 25 Oct
3 days late

Cobalt IT Services

PO-2037 · 12 × laptop docks

Due 30 Oct
In 2 days

Keystone Logistics

PO-2040 · Pallet freight, 3 trucks

Due 31 Oct
In 3 days

Atlas Packaging

PO-2041 · Corrugated boxes

Due 04 Nov
In 7 days

Quick actions

Loading

The same grid while its queries resolve. Headings and the static quick actions render at once; Skeleton blocks hold the place of each KPI, the chart bars (inside a visible axis frame), budget rows, approvals and activity, so nothing jumps when data lands.

Northwind Ops

/

Dashboard

Loading dashboard

Good morning, Amelia

Spend by month

Committed spend · May – Oct 2026

Budget by category

Approvals waiting on you

Oldest first · you approve for Finance and Procurement

Recent activity

Upcoming deliveries

Next 7 days and overdue

Quick actions

First-run state

The same screen on a brand-new workspace: a setup checklist leads, KPIs read “No data yet”, export is disabled, and each panel explains what will appear.

Northwind Ops

/

Dashboard

Welcome to Northwind Ops, Amelia

Let's get your workspace ready — it takes about five minutes.

Get set up

1 of 4 steps complete

Create your workspace

Northwind Ops is ready to use.

Done

Invite your team

Add requesters, approvers and finance.

Add your first supplier

Import a CSV or add vendors one by one.

Raise a purchase order

Send it through your approval workflow.

Open purchase orders

—

No data yet

Spend this month

—

No data yet

Avg. approval time

—

No data yet

Overdue deliveries

—

No data yet

Spend by month

Committed spend · last 6 months

No spend yet

Bars appear here once your first purchase order is approved.

Approvals waiting on you

You're all caught up

Orders that need your sign-off land here.

Built from

  • App shell: sidebar, glass header and user menu from the CLI’s AuthenticatedShell.
  • Page headers: title, subtitle, SegmentedControl date range, an Export default button and the ink New purchase order CTA.
  • Banners: the light yellow Alert with a close button.
  • Stat cards: KPI cards whose delta Badge is coloured by meaning, not direction. Faster approvals are green; more overdue deliveries are red.
  • Charts: the spend bars and the sparklines.
  • Table in a Card.Section, with Avatar, status Badge and compact Buttons for the approvals queue.
  • Progress: budget by category. Over-budget rows switch to color="red" and near-limit rows to color="yellow", and each row also shows a % badge, so colour is never the only signal.
  • Timeline with avatar bullets for recent activity, and ThemeIcon for the KPI and quick-action icons.
  • Skeleton blocks for the loading frame, sized to the content they stand in for.
  • Onboarding checklist and empty states for the first-run frame.

The charts use tokens, not a chart library. Buildpad doesn’t ship @mantine/charts. The bar chart and sparklines here are plain boxes coloured with --ds-primary-200 (earlier periods) and --ds-primary-500 (current period). Gridlines use --ds-divider and the dashed budget line uses --ds-gray-400. Each bar’s hover tooltip is a Mantine Tooltip.Floating, and the whole column is the hover target. If your app needs real charting, add @mantine/charts (Recharts) and colour it with the same tokens.

Last updated on
App shellList page