Overview
Pages like the dashboard (no invoices), address book (no contacts), and leaderboard (no data) currently show nothing or plain text when empty. Add consistent illustrated empty states that guide the user to take action.
Acceptance Criteria
- Empty states for: Dashboard (no invoices), Groups (no groups), Address Book (no contacts), Leaderboard (no data), Search (no results), Notifications (no notifications)
- Each empty state has: an SVG illustration, a heading, a one-line description, and a primary CTA button
- Illustrations are custom inline SVGs (not raster images) — lightweight and themeable
- All illustrations work in both light and dark mode (colours via CSS variables)
- Empty state component accepts
illustration, heading, description, ctaLabel, ctaHref as props
- CTAs navigate to the relevant creation flow (e.g. "Create your first invoice")
- Empty states fully responsive — scale to fill container width
Overview
Pages like the dashboard (no invoices), address book (no contacts), and leaderboard (no data) currently show nothing or plain text when empty. Add consistent illustrated empty states that guide the user to take action.
Acceptance Criteria
illustration,heading,description,ctaLabel,ctaHrefas props