@dset/dashboard

Layer 4 — dashboard composition primitives. Construction scaffolding for building dashboards: a responsive grid, titled sections, a page header and a state-aware widget container. No application logic, no data fetching — you place @dset/business components (and your data) inside these.

Layer rule: dashboard may import @dset/business, @dset/ui, @dset/tokens.

Primitives

| Component | Purpose | i3MS source | | ------------------ | -------------------------------------------------- | ------------------------- | | DashboardGrid | Equal-column responsive grid (collapses 4 → 2 → 1) | krow/krow3 (13 pages) | | DashboardHeader | Page header: title · subtitle · actions | topbar title pattern | | DashboardSection | Titled region grouping widgets | implicit section grouping | | Widget | Card with loading / error / empty / content states | hand-rolled per page |

Example

import { DashboardHeader, DashboardGrid, Widget } from '@dset/dashboard';
import { KpiCard } from '@dset/business';

<>
  <DashboardHeader title="Operations" subtitle="Live pipeline" actions={<RefreshButton />} />
  <DashboardGrid cols={4}>
    <KpiCard label="In queue" value={queue} />
    <KpiCard label="Failed" value={failed} deltaType="down" />
    {/* … */}
  </DashboardGrid>
  <Widget title="Backlog" loading={loading} error={error} isEmpty={!rows.length} onRetry={refetch}>
    <BacklogTable rows={rows} />
  </Widget>
</>;

Widget owns the tedious loading/error/empty branching every dashboard repeats; DashboardGrid/Header/Section own layout. The cards and data are the product's.

Why no data dependency

These are pure layout/scaffolding components. The app wires data (via @dset/data) and drops @dset/business cards into the grid/widgets — keeping this layer free of business and data concerns so it stays trivially reusable across products.

Deferred (audited)

Breadcrumb system — i3MS has no breadcrumbs, so there is nothing proven to extract (see @dset/admin). Widget variants (collapsible, draggable) — add when proven.