Files
PROJECT-CONTORL/openspec/changes/archive/2026-01-07-add-dashboard-widgets/tasks.md
beabigegg 4860704543 feat: implement dashboard widgets functionality
Backend:
- Add dashboard API router with widget endpoints
- Create dashboard schemas for widget data
- Add dashboard tests

Frontend:
- Enhance Dashboard page with widget components
- Add dashboard service for API calls
- Create reusable dashboard components

OpenSpec:
- Archive add-dashboard-widgets change
- Add dashboard capability specs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-08 22:52:28 +08:00

2.2 KiB

Implementation Tasks

Phase 1: Backend API

Task 1.1: Create Dashboard Schema

  • Create backend/app/schemas/dashboard.py with response models
    • TaskStatistics: assigned_count, due_this_week, overdue_count, completion_rate
    • DashboardResponse: task_stats, workload_summary, health_summary
  • Validation: Schema imports without errors

Task 1.2: Create Dashboard Router

  • Create backend/app/api/dashboard/router.py
  • Implement GET /api/dashboard endpoint
    • Query tasks assigned to current user
    • Reuse workload service for current week summary
    • Reuse health service for project summary
  • Register router in backend/app/main.py
  • Validation: curl -H "Authorization: Bearer $TOKEN" http://localhost:8000/api/dashboard returns valid JSON

Phase 2: Frontend Implementation

Task 2.1: Create Dashboard Service

  • Create frontend/src/services/dashboard.ts
  • Define TypeScript interfaces matching backend schema
  • Implement getDashboard() API function
  • Validation: TypeScript compiles without errors

Task 2.2: Implement Dashboard Components

  • Create StatisticsCard component for task stats
  • Create WorkloadWidget component (reuse styles from WorkloadPage)
  • Create HealthSummaryWidget component
  • Create QuickActions component with navigation links
  • Validation: Components render without console errors

Task 2.3: Integrate Dashboard Page

  • Replace placeholder content in Dashboard.tsx
  • Add loading state with Skeleton components
  • Add error handling with retry
  • Style components to match existing UI
  • Validation: Dashboard displays data correctly after login

Phase 3: Testing & Polish

Task 3.1: Add Backend Tests

  • Create backend/tests/test_dashboard.py
  • Test endpoint returns correct structure
  • Test data aggregation logic
  • Validation: pytest tests/test_dashboard.py -v passes

Task 3.2: Visual Polish

  • Ensure responsive layout for mobile
  • Match color scheme with existing pages
  • Add subtle animations for loading states
  • Validation: Manual visual review on different screen sizes

Dependencies

  • Tasks 2.x depend on Task 1.2 completion
  • Task 3.1 can run in parallel with Phase 2