Dashboards

Anatomy of a dashboard

A dashboard is a page type, not a blank canvas. Four bands, top to bottom, and the reason each sits where it does.

Four bands

1. The numbers. A row of stat cards: what somebody opening this screen at 08:30 needs before anything else.
2. The shape. One or two charts, showing the trend behind those numbers.
3. The detail. A table or list: what to actually act on.
4. The rest. Secondary panels and activity, which a reader scrolls to rather than looks for.

The order is not decoration. Summary, then trend, then detail, because that is the order the questions arrive in: what is happening, is it getting worse, and which one.

the frame

<div className="flex h-full flex-col">
  <PageChrome title="Dashboard" />
  <div className={PAGE_SCROLL}>
    <div className="grid gap-4 p-4 md:p-6">
      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {/* 1. stat cards */}
      </section>
      <section className="grid gap-4 lg:grid-cols-3">
        {/* 2. a wide chart and a narrow one */}
      </section>
      {/* 3. the table */}
    </div>
  </div>
</div>

This is page type 3

A dashboard is the manual one: you compose the frame rather than handing a field list to a component. Say which of the five types you are building before you start.

Three rules that keep it readable

Four stat cards, not seven. Past four, nobody reads any of them. If you have seven numbers, two are the headline and five belong in the table.
Every number needs a period.“Revenue 42,300” is not information until it says over what. Put the range on the card or in the page header, and never in neither.
Design the empty and the failing state first. A new tenant sees zeroes and a failed query sees nothing. A dashboard that only looks right with good data looks broken exactly when somebody is looking hardest.