Components
Every dashboard screen is built from these patterns. Start from the pattern and the route named beside it, not from the nearest file.
- Drawer
A record or a content-heavy flow opened from a page: header, optional pinned region, a body that scrolls, one footer band.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ settings/ locations - Modal
A small detail view or a single action over the page: header, a body that scrolls, one tinted footer band. A confirmation is ConfirmModal.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ forms - Wizard
Creating something in steps: the modal shell with a step bar, a fixed-height step area, Cancel on the first step and Back after, on the left, and the primary on the right.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ submitted-forms/ :kind - List page
Managing a set of records: the header with its actions, then the search, filter pills, Sort, and count line, then the rows.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ animal-list/ :group - Selection bar
Choosing several rows for one bulk action: the bar docked at the bottom with the count, Select all, Clear, Cancel, and the primary.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ animal-list/ :group - Review list
Values to check before a change goes ahead: a caption per group, then each label on the left and its value on the right.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ animal-list/ :group - Empty states
A collection with nothing in it yet, and a search or filter that matched nothing.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ settings/ locations - Section headings
The uppercase label that starts a section of a drawer or a step, or labels a group of values.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ fundraisers/ :slug/ edit - Tabs
Sections of a record or a page, as buttons that switch in place or links that navigate, with count pills.
/
dashboard/ accounts/ :acctId/ sites/ :siteId/ submitted-forms/ :kind?review=:id