Rearrangeable dashboard

Drag any dashboard section by its handle to put it where you want, and the order sticks for next time.

What it is

Each section carries a six-dot drag handle. Pointer or keyboard drag reorders the grid, and the arrangement is saved locally. On load the stored order is validated against the known section set — if a section has been added or removed since, it falls back to the default rather than rendering a broken layout.

Also called: drag to reorder dashboard · customise my dashboard · move the charts around

See it
Rearrangeable dashboard
New lead 2
Marlin Hoover
$48k
Delia Yoder
$36k
Contacted 4
Sutter Kline
$47k
Ronan Petsch
$42k
Estimate 3
Ivy Brubaker
$47k
Gideon Alt
$41k
Marlin Hoover
$51k
Sold 2
Marlin Hoover
$70k
Delia Yoder
$58k
Sutter Kline
$71k
A section mid-drag, lifted with a shadow, the six-dot handle visible at the left of its heading. DashboardView.tsx. Sample data — no customer information appears here.
How it works
  1. 1Pointer drag activates after 8 pixels of movement so a click never triggers a drag.
  2. 2A keyboard sensor supports reordering without a mouse.
  3. 3The new order is written to local storage on every drop.
  4. 4On load, the stored array must contain every default section, no extras, and the same length — otherwise the default order is used.
Why we built it

The validation exists because a stored order becomes stale the moment the product ships a new dashboard section; without the check, a returning user would silently lose the new widget or see an empty slot.

The problem
  • A fixed dashboard order suited nobody in particular.
  • Stored layouts broke when sections were added or removed.
Sound familiar?
What you get
Each person's dashboard opens in the order they read it.
New sections appear cleanly for existing users.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →