feat(dashboard): Enhance dashboard with PageHeader, StatCard, and auth fixes

- Create PageHeader component with title, description, and action slots
- Create StatCard component with trend indicators and icons
- Update dashboard with KPI cards, Quick Actions, and Allocation Preview
- Polish login page with branding and centered layout
- Fix auth redirect: authenticated users accessing /login go to dashboard
- Fix page refresh: auth state persists, no blank page
- Fix sidebar: visible after login, toggle works, state persists
- Fix CSS import: add app.css to layout, fix DaisyUI import path
- Fix breadcrumbs: home icon links to /dashboard
- Add comprehensive E2E and unit tests

Refs: openspec/changes/p03-dashboard-enhancement
Closes: p03-dashboard-enhancement
This commit is contained in:
2026-02-18 18:14:57 -05:00
parent 493cb78173
commit 96f1d0a6e5
22 changed files with 770 additions and 138 deletions

View File

@@ -155,7 +155,7 @@ scripts:
rules:
# Project-level standing instructions (from decision-log.md)
all_changes:
- Every change must follow SDD+TDD: specs → pending tests → implementation → refactor
- "Every change must follow SDD+TDD: specs → pending tests → implementation → refactor"
- Every spec scenario must have corresponding tests (E2E, API, Unit, Component)
- Pending tests must be committed before implementation (red phase)
- Changes must end with code review for style, standards, and security
@@ -177,7 +177,7 @@ rules:
# Workflow Loops
workflow:
- Follow capability-based workflow: Test → Implement → Refactor → Document
- "Follow capability-based workflow: Test → Implement → Refactor → Document"
- Do NOT skip phases - each phase has a specific commit
- Run full test suite after EACH implementation commit
- Fix failing tests before moving to next scenario
@@ -188,11 +188,11 @@ rules:
ui_standards:
- Use Lucide Svelte for ALL icons (no inline SVGs, no other icon libraries)
- DaisyUI-first approach - use DaisyUI components before building custom
- Sidebar pattern: Collapsible (expanded ↔ collapsed ↔ hidden)
- "Sidebar pattern: Collapsible (expanded ↔ collapsed ↔ hidden)"
- Global month selector in top bar (affects all views)
- Light mode default, dark mode available via toggle
- Table density: Use table-compact for data-heavy views
- Reference apps: Obsidian (minimal chrome) + Jira (hierarchical sidebar)
- "Table density: Use table-compact for data-heavy views"
- "Reference apps: Obsidian (minimal chrome) + Jira (hierarchical sidebar)"
# Component Patterns
component_patterns:
@@ -210,30 +210,29 @@ rules:
# Accessibility Requirements
accessibility:
- Keyboard navigation: Tab through sidebar, Enter/Space to activate
- "Keyboard navigation: Tab through sidebar, Enter/Space to activate"
- Escape to close mobile drawer
- Cmd/Ctrl + \ to toggle sidebar (desktop)
- ARIA: aria-expanded on sidebar toggle, aria-current="page" on active nav
- "Cmd/Ctrl + \ to toggle sidebar (desktop)"
- "ARIA: aria-expanded on sidebar toggle, aria-current='page' on active nav"
- Focus trap in mobile drawer
- Focus restored on drawer close
- All form inputs must have associated labels
# Responsive Design
responsive:
- ≥1280px (xl): Sidebar expanded by default, manual toggle
- 1024-1279px (lg): Sidebar collapsed by default, manual toggle
- 768-1023px (md): Sidebar hidden, hamburger menu (drawer overlay)
- <768px (sm): Sidebar hidden, hamburger menu (drawer overlay)
- Mobile drawer: Full-height overlay with backdrop
- "≥1280px (xl): Sidebar expanded by default, manual toggle"
- "1024-1279px (lg): Sidebar collapsed by default, manual toggle"
- "768-1023px (md): Sidebar hidden, hamburger menu (drawer overlay)"
- "<768px (sm): Sidebar hidden, hamburger menu (drawer overlay)"
- "Mobile drawer: Full-height overlay with backdrop"
- Close drawer on route change (mobile)
# State Management Patterns
state_management:
- Use Svelte stores for UI state only (not business data)
- Business data comes from API (no client-side caching beyond DaisyUI)
- Stores: auth, layout, period
- localStorage keys: headroom_access_token, headroom_refresh_token,
headroom_sidebar_state, headroom_theme
- "Stores: auth, layout, period"
- "localStorage keys: headroom_access_token, headroom_refresh_token, headroom_sidebar_state, headroom_theme"
- Store files go in src/lib/stores/
proposal:
@@ -260,7 +259,7 @@ rules:
tasks:
- Organize by capability (not by layer)
- Each capability has 4 phases: Test (Red) → Implement (Green) → Refactor → Document
- "Each capability has 4 phases: Test (Red) → Implement (Green) → Refactor → Document"
- Break implementation into individual scenarios
- Include explicit test tasks (write pending, enable one by one)
- Include API documentation updates as tasks