Epic 5: People Management

[Vitalisn4]

Issue #28: Build PeopleTable with Sorting

Labels: epic-5, components, people, tables, priority-high
Milestone: Epic 5 - People Management
Dependencies: #8, #9, #11, #45

Description:
Create sortable, filterable table for managing people.

Acceptance Criteria:

• Create PeopleTable component
• Display columns: Avatar, Name, Group, Status, Last Assignment, Actions
• Add sorting for: Name, Group, Last Assignment
• Add group filter tabs (All | Group A | Group B)
• Add search by name
• Support bulk selection (checkboxes)
• Add bulk actions (Activate/Deactivate)
• Ensure responsive design
• Add loading skeleton
• Write unit tests

---

Issue #29: Build Add/Edit Person Modal

Labels: epic-5, components, people, forms, priority-high
Milestone: Epic 5 - People Management
Dependencies: #14, #11, #45

Description:
Create modal form for adding or editing person information.

Acceptance Criteria:

• Create PersonForm component
• Form fields:
  • Name input (required, validation)
  • Group selector (A/B radio buttons)
  • Active toggle switch
  • Avatar upload (optional, with preview)
• Support both "Add" and "Edit" modes
• Add form validation (React Hook Form + Zod)
• Show validation errors
• Add loading state on submit
• Show success toast on save
• Close modal on successful save
• Write unit tests

Technical Notes:

• Use React Hook Form for form management
• Use Zod for schema validation
• Handle avatar upload (base64 or file upload)

---

Issue #30: Build Person Detail Page

Labels: epic-5, components, people, priority-high
Milestone: Epic 5 - People Management
Dependencies: #8, #9, #23, #45

Description:
Create detailed view page for individual person with history and stats.

Acceptance Criteria:

• Create PersonDetail page/component
• Display profile header:
  • Large avatar
  • Name
  • Group badge
  • Status badge
• Show assignment history table (filtered to this person)
• Display stats:
  • Total assignments count
  • Most frequent task
  • Last assigned date
• Add "Fairness score" visualization (comparison to average)
• Add edit button (opens modal)
• Ensure responsive design
• Add loading states
• Write unit tests

---

Issue #31: Implement Bulk Actions

Labels: epic-5, features, people, priority-medium
Milestone: Epic 5 - People Management
Dependencies: #28, #45

Description:
Add bulk activate/deactivate functionality for selected people.

Acceptance Criteria:

• Add checkboxes to PeopleTable rows
• Add "Select All" checkbox in header
• Show count of selected items
• Add bulk action buttons (Activate Selected, Deactivate Selected)
• Show confirmation modal for bulk actions
• Implement API calls for bulk updates
• Show success/error toasts
• Refresh table after bulk action
• Write unit tests

---

Issue #32: Build Fairness Score Visualization

Labels: epic-5, components, people, charts, priority-medium
Milestone: Epic 5 - People Management
Dependencies: #30, #45

Description:
Create visualization comparing person's assignment frequency to group average.

Acceptance Criteria:

• Calculate fairness metrics:
  • Person's total assignments
  • Group average assignments
  • Deviation percentage
• Create visual comparison (bar chart or gauge)
• Color-code (green = fair, yellow = slightly off, red = unfair)
• Display percentage difference
• Add tooltip with explanation
• Ensure responsive design
• Write unit tests

Technical Notes:

• Use Recharts for visualization
• Calculate metrics on backend or frontend

---

Issue #33: Add Avatar Upload Functionality

Labels: epic-5, features, people, priority-low
Milestone: Epic 5 - People Management
Dependencies: #29, #45

Description:
Implement avatar image upload for people.

Acceptance Criteria:

• Add file input to PersonForm
• Support image formats (JPG, PNG, WebP)
• Validate file size (max 2MB)
• Show image preview before upload
• Crop/resize image to square (optional, use library)
• Upload to backend or convert to base64
• Show loading state during upload
• Handle upload errors
• Write unit tests

Technical Notes:

• Use react-image-crop or similar for cropping
• Consider image optimization

---