EPIC-09: Dashboard & Project Health Center

[steilerDev]

Epic: Dashboard & Project Health Center

Epic ID: EPIC-09
Priority: Should Have
Sprint: Sprint 5

Description

Implement the project dashboard and health center that gives homeowners an at-a-glance understanding of their project health. This includes budget health cards, timeline status cards, a mini Gantt preview, invoice and subsidy pipeline cards, quick actions, and server-side user preferences for dashboard customization. The dashboard uses parallel data fetching, responsive card grids, and progressive disclosure on mobile.

Requirements Coverage

• Section 2.2: Budget Management — budget variance alerts, planned vs actual tracking, available amounts, outstanding balances (aggregated views)
• Section 2.3: Timeline Management — project schedule overview, milestone tracking, critical path visibility
• Section 4: User Stories — "See planned vs actual costs to identify budget overruns early"
• Section 5: Focus — Usability and simplicity (dashboard is the primary entry point)

Dependencies

• EPIC-02 (EPIC-02: Application Shell & Infrastructure #2): Application Shell & Infrastructure (app shell, routing)
• EPIC-03 (EPIC-03: Work Items - Core CRUD & Properties #3): Work Items Core CRUD (work item status data)
• EPIC-05 (EPIC-05: Budget Management #5): Budget Management (budget data to aggregate)
• EPIC-06 (EPIC-06: Timeline, Gantt Chart & Dependency Management #6): Timeline & Gantt (timeline data, scheduling engine)

Stories

• 9.1: User Preferences Infrastructure #470 — 9.1: User Preferences Infrastructure (Must Have)
• 9.2: Dashboard Layout & Data Shell #471 — 9.2: Dashboard Layout & Data Shell (Must Have)
• 9.3: Budget Summary Card #472 — 9.3: Budget Summary Card (Must Have)
• 9.4: Budget Alerts & Source Utilization Cards #473 — 9.4: Budget Alerts & Source Utilization Cards (Must Have)
• 9.5: Timeline Status Cards #474 — 9.5: Timeline Status Cards (Should Have)
• 9.6: Mini Gantt Preview Card #475 — 9.6: Mini Gantt Preview Card (Should Have)
• 9.7: Invoice & Subsidy Pipeline Cards #476 — 9.7: Invoice & Subsidy Pipeline Cards (Must Have)
• 9.8: Quick Actions & Navigation Card #477 — 9.8: Quick Actions & Navigation Card (Should Have)
• 9.9: Responsive, Dark Mode & Accessibility Polish #478 — 9.9: Responsive, Dark Mode & Accessibility Polish (Must Have)

Dependency Graph

9.1 (Preferences)
 └─► 9.2 (Layout Shell)
      ├─► 9.3 (Budget Summary)
      │    └─► 9.4 (Alerts & Utilization)
      ├─► 9.5 (Timeline Cards)
      │    └─► 9.6 (Mini Gantt)
      ├─► 9.7 (Invoice & Subsidy)
      └─► 9.8 (Quick Actions)
           │
9.3 + 9.4 + 9.5 + 9.6 + 9.7 + 9.8 ──► 9.9 (Polish)

Goals

• Project dashboard showing overall project health at a glance
• Budget health: available funds, planned range, actual spend, remaining indicator
• Budget alerts for over-budget and near-budget categories
• Budget source utilization overview
• Timeline: upcoming milestones, work item progress, at-risk items, critical path
• Mini Gantt preview (next 30 days, read-only)
• Pending invoices and subsidy pipeline tracking
• Quick actions for common navigation
• Server-side user preferences (theme sync, card hide/show)
• Fully responsive with progressive disclosure on mobile
• WCAG 2.1 AA accessible with dark mode support