Epic 3: Dashboard

[Vitalisn4]

Issue #15: Build DashboardLayout with Sidebar

Labels: epic-3, components, layout, dashboard, priority-high
Milestone: Epic 3 - Dashboard
Dependencies: #7, #10

Description:
Create the main dashboard layout with responsive sidebar navigation.

Acceptance Criteria:

• Create DashboardLayout component
• Build sidebar with navigation items:
  • Dashboard (home icon)
  • Assignments
  • People
  • Tasks
  • Settings
• Add active route highlighting
• Implement collapsible sidebar on mobile/tablet
• Add logo/branding area at top
• Ensure smooth transitions
• Add mobile bottom navigation (alternative)
• Ensure keyboard navigation
• Write responsive tests (mobile, tablet, desktop)

Technical Notes:

• Use React Router for navigation
• Implement proper active route detection

---

Issue #16: Build Countdown Component with Circular Progress

Labels: epic-3, components, dashboard, priority-high
Milestone: Epic 3 - Dashboard
Dependencies: #12, #45

Description:
Create countdown component showing days until next assignment with circular progress.

Acceptance Criteria:

• Create Countdown component
• Display large number (days remaining)
• Add circular progress indicator
• Calculate progress from 14-day cycle
• Add smooth number transitions (use Framer Motion)
• Display "Next assignment in X days" text
• Add click handler to navigate to settings
• Handle edge cases (0 days, negative days)
• Add loading state
• Write unit tests

Technical Notes:

• Use date-fns for date calculations
• Use SVG or CSS for circular progress
• Animate number changes smoothly

---

Issue #17: Build Current Assignment Grid

Labels: epic-3, components, dashboard, priority-high
Milestone: Epic 3 - Dashboard
Dependencies: #22, #45

Description:
Create responsive grid displaying current assignments for all 7 tasks.

Acceptance Criteria:

• Create AssignmentGrid component
• Display all 7 tasks in responsive grid (1 col mobile, 2 col tablet, 3-4 col desktop)
• Each card shows:
  • Task name with icon
  • Required count
  • Assigned people (avatars)
• Add hover state (expand to show all assignees)
• Color-code by group restrictions (visual indicator)
• Add empty state if no current assignments
• Ensure smooth animations
• Write unit tests

Technical Notes:

• Reuse TaskCard component from Epic 4
• Use CSS Grid or Flexbox

---

Issue #18: Build Group Balance Visualization

Labels: epic-3, components, dashboard, charts, priority-medium
Milestone: Epic 3 - Dashboard
Dependencies: #45

Description:
Create visualization showing A/B group distribution across assignments.

Acceptance Criteria:

• Create GroupBalance component
• Display visual representation (pie chart or bar chart)
• Show count for Group A vs Group B
• Use group colors (blue for A, coral for B)
• Add percentage labels
• Ensure responsive design
• Add tooltip on hover
• Write unit tests

Technical Notes:

• Use Recharts for charting
• Keep it simple and clear

---

Issue #19: Build Activity Feed Component

Labels: epic-3, components, dashboard, priority-medium
Milestone: Epic 3 - Dashboard
Dependencies: #45

Description:
Create activity feed showing last 5 assignment events with timestamps.

Acceptance Criteria:

• Create ActivityFeed component
• Display last 5 events in chronological order (newest first)
• Each item shows:
  • Icon (assignment, person added, etc.)
  • Description text
  • Relative timestamp ("2 days ago")
  • Person avatar (if applicable)
• Add "View All" link to full history
• Ensure smooth list animations
• Add empty state
• Write unit tests

Technical Notes:

• Use date-fns for relative time formatting
• Use Framer Motion for list animations

---

Issue #20: Integrate Dashboard with API

Labels: epic-3, integration, api, dashboard, priority-high
Milestone: Epic 3 - Dashboard
Dependencies: #15, #16, #17, #18, #19, #45

Description:
Connect all dashboard components to backend API using TanStack Query.

Acceptance Criteria:

• Set up TanStack Query provider
• Create API hooks for:
  • Current assignments
  • Next assignment date
  • Group balance stats
  • Recent activity
• Add loading states (skeletons)
• Add error handling (error boundaries)
• Implement data refetching strategy
• Add optimistic updates where applicable
• Write integration tests
• Handle offline state

Technical Notes:

• Use React Query v5 (TanStack Query)
• Set appropriate cache times
• Handle API errors gracefully

---