Epic 4: Assignments Feature

[Vitalisn4]

Issue #21: Build TaskCard Component

Labels: epic-4, components, assignments, priority-high
Milestone: Epic 4 - Assignments
Dependencies: #8, #9

Description:
Create TaskCard component for displaying task information with assignees.

Acceptance Criteria:

• Create TaskCard component
• Display task name with appropriate icon
• Show required people count
• Display assigned people (avatars with names)
• Add group restriction badge (A only, B only, Both)
• Support hover state (expand details)
• Add click handler for navigation
• Ensure responsive design
• Write unit tests

Technical Notes:

• Map task names to Lucide icons
• Use Avatar component from Epic 2

---

Issue #22: Build AssignmentGrid Organism

Labels: epic-4, components, assignments, priority-high
Milestone: Epic 4 - Assignments
Dependencies: #21

Description:
Create responsive grid layout for displaying multiple task cards.

Acceptance Criteria:

• Create AssignmentGrid component
• Display TaskCards in responsive grid
• Support filtering by group
• Support sorting (by name, by count)
• Add empty state
• Ensure smooth animations
• Add loading skeleton grid
• Write unit tests

---

Issue #23: Build History Table with Filters

Labels: epic-4, components, assignments, tables, priority-high
Milestone: Epic 4 - Assignments
Dependencies: #11, #45

Description:
Create sortable, filterable table for assignment history.

Acceptance Criteria:

• Create HistoryTable component
• Display columns: Date, Task, Assignee, Group
• Add sorting for all columns
• Add filters:
  • Date range picker
  • Task type dropdown
  • Person search
  • Group filter (A/B/All)
• Implement pagination (20 items per page)
• Add loading state
• Ensure responsive design (horizontal scroll on mobile)
• Write unit tests

Technical Notes:

• Use shadcn/ui Table component
• Use React Hook Form for filters
• Use date-fns for date formatting

---

Issue #24: Build Timeline Visualization

Labels: epic-4, components, assignments, charts, priority-medium
Milestone: Epic 4 - Assignments
Dependencies: #45

Description:
Create horizontal timeline showing assignment periods.

Acceptance Criteria:

• Create Timeline component
• Display horizontal scrollable timeline
• Each period as a column
• Show date range for each period
• Display task assignments in each period
• Add hover to show full details
• Support navigation (scroll, arrows)
• Ensure smooth scrolling
• Add loading state
• Write unit tests

Technical Notes:

• Use CSS for horizontal scrolling
• Consider virtualization for many periods

---

Issue #25: Implement Date Range Picker

Labels: epic-4, components, forms, priority-medium
Milestone: Epic 4 - Assignments
Dependencies: #3

Description:
Add date range picker component for filtering assignment history.

Acceptance Criteria:

• Install date picker library (react-day-picker or similar)
• Create DateRangePicker component
• Support selecting start and end dates
• Add preset options (Last week, Last month, Last 3 months)
• Display selected range clearly
• Ensure accessibility
• Add validation (end date after start date)
• Write unit tests

---

Issue #26: Add CSV Export Functionality

Labels: epic-4, features, assignments, priority-low
Milestone: Epic 4 - Assignments
Dependencies: #23

Description:
Implement CSV export for filtered assignment history.

Acceptance Criteria:

• Add "Export to CSV" button to history table
• Export current filtered/sorted data
• Include all visible columns
• Format dates properly in CSV
• Add loading state during export
• Show success toast notification
• Handle large datasets (streaming if needed)
• Write unit tests

Technical Notes:

• Use papaparse or similar library
• Trigger download via blob URL

---

Issue #27: Add Copy-to-Clipboard Feature

Labels: epic-4, features, assignments, priority-medium
Milestone: Epic 4 - Assignments
Dependencies: #17

Description:
Add ability to copy formatted assignment list (Discord-style) to clipboard.

Acceptance Criteria:

• Add "Copy to Clipboard" button to current assignments view
• Format assignments as Discord-style list:

  ➡️ Parlor: Alice, Bob, Charlie, Dave, Eve
  ➡️ Frontyard: Frank, Grace, Henry
  ...
  

• Show success toast on copy
• Handle clipboard API errors gracefully
• Add loading state
• Write unit tests

Technical Notes:

• Use Clipboard API
• Fallback for older browsers

---