Guide section 13 of 31

Page Composition Patterns

Default page anatomy

┌────────────────────────────────────────────────────────────┐
│ Page title / context / period / key actions               │
├────────────────────────────────────────────────────────────┤
│ Global / page filters + active filter state               │
├────────────┬────────────┬────────────┬────────────┤
│ KPI        │ KPI        │ KPI        │ KPI        │
├───────────────────────────────────┬────────────────────────┤
│ Primary analytical visual         │ Supporting explanation │
│                                   │ / breakdown             │
├───────────────────────────────────┴────────────────────────┤
│ Detail / exceptions / table / matrix / metadata           │
└────────────────────────────────────────────────────────────┘

Reusable composition models

Composition	Structure	Best for
Status-first overview	Header → filters → KPIs → dominant status/trend → exceptions → detail	Monitoring and recurring management review.
Trend-first analysis	Context KPI → time controls → main trend → benchmark/reference → breakdown	Development over time.
Comparison-first	Context/filters → comparison KPI → ranked bar/column → variance → detail table	Entity/period/peer comparison.
Root-cause	Problem KPI → contribution/waterfall/decomposition → ranked drivers → detail	Explaining change or variance.
Table-first operational	Context → filters/search → small summary → Table/Matrix → drillthrough	Exact records and worklists.
Entity detail	Entity header → KPI summary → trend → attributes/breakdown → related records	One selected store/item/customer/etc.
Print composition	Print-specific title/context → compact KPIs → essential visual(s) → table/definitions	A4/PDF requirement; do not assume the interactive page will print optimally.