Billets vendus
4 482
+12,4 %vs semaine derniere
Skip to main content
DashboardBody
ImplementedAuthenticated dashboard scaffold — greeting header (period caption + H1), KPI strip (1 col mobile → 2 cols sm → 4 cols lg, each tile with label/value/optional delta chip), 2fr/1fr main+side grid (side rail collapses below on <lg) and optional activity feed section. Root is a <main role="main" id="main"> skip-link target; every section landmark is labelled via the bilingual SECTION_LABELS map (locale prop, fr default).
Categorytemplates
Source
components/templates/dashboardbody/DashboardBody.tsxAI HintUse for page layouts. Define structure and composition patterns.
Corps du tableau de bord : salutation, KPI en grille, graphique principal + rail lateral, activite. FR-CA : « Bonjour, Marie · Indicateurs cles · Performance principale · Activite ».
DashboardBody
Template - Admin family (Family 9)
Template de page dashboard. Le parent fournit les KPIs (calcules par le backend), le graphique principal (un composant chart a choisir) et optionnellement un rail lateral et une activite recente.
7 derniers jours · 28 juillet au 4 aout 2026
Bonjour, Marie
Revenus bruts
228 642 $
+18,1 %
Taux de remboursement
2,1 %
-0,4 pt
Scans portes
3 921
+8,2 %
Ventes par jour
L
M
M
J
V
S
D
Activite recente
- 2 billets vendus - Festival Jazz MTL Caisse 4 - Marie T.
- Remboursement 48,00 $ - Lionel P. Annulation Maison symphonique
- 12 arrivees - Place des Festivals Concert quartet Jazz MTL
This component supports light and dark mode.
Composition
DashboardBody est compose de : en-tete (greeting + periode), grille de 4 KPIs, zone graphique principale (2/3) + rail lateral (1/3), bloc activite optionnel.
Prop
Type
Default
Description
greeting*string—
Salutation localisee (Bonjour, Good morning).
userName*string—
Nom de l utilisateur.
periodLabel*string—
Libelle de la periode (7 derniers jours, etc.).
kpis*DashboardKpi[]—
Indicateurs cles.
mainChart*React.ReactNode—
Graphique principal.
sideRailReact.ReactNode—
Rail lateral optionnel.
activityReact.ReactNode—
Bloc activite optionnel.
locale"fr" | "en"—
Locale des libelles de sections integres ("fr" par defaut, "en" supporte).
classNamestring—
Classes additionnelles appended au <main> racine.
Props
Preview
DashboardBody
Prop
Type
Required
Default
Description
greetingstringRequired
—Greeting sentence opener, e.g. "Bonjour" — combined with userName in the H1.
userNamestringRequired
—Name of the signed-in user shown in the greeting heading.
periodLabelstringRequired
—Small uppercase period caption above the greeting, e.g. "Aujourd'hui · 7 derniers jours".
kpisDashboardKpi[]Required
—KPI tiles: { id; label; value; delta?: { value; trend: 'up' | 'down' | 'flat' }; hint? } — id is the React key, value renders with tabular numerals, trend colors the delta chip (up=success-fg, down=error-fg, flat=muted).
mainChartReact.ReactNodeRequired
—Primary content of the main column (typically a chart organism).
sideRailReact.ReactNodeOptional
—Optional content of the narrow side column (aside landmark). Omitted → the main chart spans the full width.
activityReact.ReactNodeOptional
—Optional activity feed section rendered below the main/side grid.
locale"fr" | "en"Optional
'fr'Switches every built-in section label via the SECTION_LABELS map (Indicateurs clés / Key metrics, Performance principale / Main performance, Panneau latéral / Side panel, Activité / Activity).
classNamestringOptional
—Appended to the root <main> class list.
Quick use:
<DashboardBody />Accessibility
ARIA rolemain
Type
1 ruleARIA
1 ruleUsage
Import
tsxSnippet
import { DashboardBody } from "@epasslive/design-system"Example 1
tsxSnippet
<DashboardBody greeting="Bonjour" userName="Camille" periodLabel="Aujourd'hui" kpis={[{ id: "rev", label: "Revenus", value: "$48,250", delta: { value: "+12 %", trend: "up" } }]} mainChart={<ChartCard />} sideRail={<QuickActions />} activity={<ActivityList />} />Example 2
tsxSnippet
<DashboardBody greeting="Good evening" userName="Camille" periodLabel="Today" kpis={kpis} mainChart={<ChartCard />} locale="en" />Anti-patterns
— Do not include business logic in templates
— Avoid hardcoded content in templates