AdminDashboardGrid

Implemented

Responsive grid of admin stat cards (title, value, optional hint) in 2, 3, or 4 columns, with an aria-live empty state.

Categoryorganisms

Sourcecomponents/organisms/AdminDashboardGrid/AdminDashboardGrid.tsx

AI HintPass AdminDashboardGridItem[] and pick columns 2/3/4; an empty items array renders the dashed no-data placeholder.

Responsive grid of admin stat cards (title, value, optional hint) in 2, 3, or 4 columns with an aria-live empty state — one article per KPI, labeled for screen readers.

AdminDashboardGrid

Organism — Admin family

Renders one article per item (muted title, prominent value, optional hint exposed via aria-describedby) in a responsive grid: single column on mobile, stepping up to 2/3/4 columns at md/lg per the columns prop. An empty items array renders the dashed no-data placeholder with emptyMessage announced via aria-live.

Ventes brutes

124 310,00 $

+12% vs août

Commandes

1 204

Remboursements

812,40 $

7 demandes

Versements

98 500,00 $

This component supports light and dark mode.

EmptyState

Organism — Admin family

items={[]}: the dashed no-data placeholder. emptyMessage ("Aucun KPI pour cette période" here) renders in an aria-live="polite" paragraph — announced without stealing focus.

— Aucun KPI pour cette période

This component supports light and dark mode.

TwoColumns

Organism — Admin family

columns={2}: two cards per row from md up — the responsive shape for paired KPIs (single column on mobile).

Revenus nets

113 797,60 $

Après frais

Frais de service

2 486,20 $

This component supports light and dark mode.

Usage

Format value strings at the call site (the grid renders them verbatim), pick columns to match the card count, and name the grid with ariaLabel describing the period. An empty items array renders the designed dashed placeholder with emptyMessage — no call-site branching needed.

import { AdminDashboardGrid } from '@epasslive/design-system'

const kpis = [
  { id: 'gross', title: 'Gross sales', value: '124 310,00 $', hint: '+12% vs last month' },
  { id: 'orders', title: 'Orders', value: '1 204' },
  { id: 'refunds', title: 'Refunds', value: '812,40 $', hint: '7 requests' },
  { id: 'payouts', title: 'Payouts', value: '98 500,00 $' },
]

<AdminDashboardGrid items={kpis} columns={4} ariaLabel="Monthly statistics" />

Conventions

Keep the unit in value ("1 204 tickets") and reserve hint for deltas ("+12% vs last month"). Pick columns so the last row doesn't orphan a single stretched card — odd counts read best as columns={3}. The cards are static figures: no links, charts or interactive controls. All colors are token-driven (bg-ep-surface-card, border-ep-border-subtle, text-ep-text-muted, text-ep-text-heading) — dark mode is automatic.

Accessibility

Each card is an <article> labeled by its own title via aria-labelledby, with its hint exposed via aria-describedby(WCAG 1.3.1); the grid section is named by ariaLabel (WCAG 4.1.2). Cards render <h3> titles — place the grid under an <h2> section heading, typically inside AdminLayout's <main> region. The empty state renders emptyMessage in an aria-live="polite" paragraph — announced without stealing focus.

Props

Prop

Type

Default

Description

items*

AdminDashboardGridItem[]

—

Stat cards to render — one grid cell per item (see the item table below).

columns

2 | 3 | 4

3

Column count at the widest breakpoint; collapses on narrower viewports.

ariaLabel

string

"Dashboard statistics"

Accessible name for the grid section.

emptyMessage

string

"No data to display"

Empty-state text announced via aria-live when items is empty.

className

string

—

Extra classes appended to the grid section wrapper.

id

string

—

Stable id prefix for generated DOM ids (defaults to React.useId(), so sibling grids stay unique).

Item definition

AdminDashboardGridItem — the stat-card shape.

Prop

Type

Default

Description

id*

string

—

Item identifier — React key and title-id suffix.

title*

string

—

Card label (e.g. 'Gross sales') — rendered as the card heading.

value*

string

—

The stat itself — pre-formatted (e.g. '124 310,00 $').

hint

string

—

Secondary line (e.g. '+12% vs last month'), exposed via aria-describedby.

Used By

storefront/src/components/dashboard/LegacyStatisticsProfile.tsx — 2-tile KPI strip (columns=2)
storefront/src/components/dashboard/LegacyStatisticsScope.tsx — 4-counter summary grid (columns=4)
docs/components/AdminShell.tsx — AdminShell demo KPI tiles (columns=3)

Props

Preview

AdminDashboardGrid

Prop

Type

Required

Default

Description

items

AdminDashboardGridItem[]

Required

—

Stat cards to render; an empty array renders the aria-live empty state.

columns

2 | 3 | 4

Optional

3

Column definitions.

ariaLabel

string

Optional

'Dashboard statistics'

Accessible name for the grid <section>.

emptyMessage

string

Optional

'No data to display'

Message announced via the aria-live region when items is empty.

className

string

Optional

—

Extra classes appended to the grid <section>.

id

string

Optional

—

Prefix for generated DOM ids; defaults to React.useId() so sibling grids stay unique.

Quick use:<AdminDashboardGrid />