Skip to content
v1.0
Blocks

Admin console

The operator surface: a side rail, metric cards, the full data table, roles as list rows and the audit log as an activity feed.

What it is made of

  • GdSideNav — the console rail: brand header, account footer, counts as badges
  • A navbar per view — title, a status chip, the range control, one primary action
  • GdMetricCard — the row across the top
  • GdDataTable — selectable, sortable, with a toolbar slot
  • GdListRow + GdBadge — roles and their counts
  • GdActivityFeed — the audit log, with a view-all link

The block

Sources
12+1
3 councils
Rows synced
1.2M
last 30 days
Stale overlays
1+1
flood — 14 months
Data sources (demo)
SourceFreshness
Cadastre — state parcel fabric02/08/2026Fresh703,000
City Plan zoning31/07/2026Fresh412,006
Flood overlay14/06/2025Stale88,420

Roles & permissions

OperatorsPackage, bake, publish3
ReviewersRead-only, with the audit log2

Activity

  1. Priya packaged the Northbank ruleset.14:02 · 2 Aug
  2. Tiers rebaked for Riverton — no assessment changes.09:15 · 2 Aug
  3. Flood overlay flagged stale by the freshness check.17:44 · 1 Aug
View the full log
Demo data, labelled as such. Sort the table, tick a row, filter the sources — every control is the real component.
Code 
<GdSideNav :sections="CONSOLE_NAV" label="Console" />   <!-- --gd-size-nav -->

<GdMetricCard label="Sources" value="12" delta="+1" delta-tone="success" sub="3 councils" />

<GdDataTable
  v-model:selected="selected"
  v-model:sort="sort"
  :columns="COLUMNS"
  :rows="ROWS"
  row-key="id"
  label="Data sources"
  selectable
>
  <template #toolbar>
    <GdInput sunken size="sm" placeholder="Filter 12 sources…" />
  </template>
  <template #cell-state="{ row }">…freshness dot…</template>
</GdDataTable>

<GdListRow title="Operators" sub="Package, bake, publish">
  <template #trailing><GdBadge :value="3" tone="neutral" /></template>
</GdListRow>

<GdActivityFeed :events="EVENTS" log-to="/audit" />

Rules

  • Compose only from documented components. If the console needs a shape the system lacks, that is a finding about the system.
  • Leave the rail at its default width — --gd-size-nav, 200px. GdSideNav takes a width prop for a rail whose labels genuinely need more; this site's own passes 268px.
  • Give each view its own navbar — title, a status chip, the range control, one primary action.
  • Order the page: metric cards, then the table, then roles as list rows, then the audit log.
  • Carry counts as badges on rows, not as parenthesised numbers in labels.
  • Never retype the console's real figures here. They live in the vault's Current State; anything on this page is demo data and is labelled so.

Behavior & Anatomy

“This can only be made with actual GRIDD components”

That is the rule for this surface, and it is a test rather than a restriction. An operator console is the densest thing the system will ever be asked to draw — table, filters, selection, counts, an audit trail. Anything it cannot build from documented parts is a hole in the system that would otherwise have been patched locally and never reported.

The rail's width, stated once

GdSideNav defaults to --gd-size-nav, whose value is 200px — the wide end of the design's 184–200 range, because a tree level indents 26px and the labels must survive it. The width is a prop rather than a fork: this site's rail passes 268px, which is what a nav with a deep tree and long section names needs. Both are the same component, and neither number is redefined anywhere else.

Demo data, said out loud

The figures above are invented. The console's real figures live in the vault's Current State and are never retyped here, because a docs page carrying a stale operational number is worse than one carrying none: nobody can tell which it is by looking.

Navigate

Esc