ColaFlow/docs/plans/sprint_4_story_2.md

story_id, sprint, priority, status, story_points, estimated_days, created_date, assignee

story_id	sprint	priority	status	story_points	estimated_days	created_date	assignee
sprint_4_story_2	sprint_4	P0	not_started	5	2	2025-11-05	Frontend Team

Story 2: Task Management in Story Detail

Sprint: Sprint 4 Priority: P0 (Critical) Estimated: 2 days Owner: Frontend Team

Description

Implement comprehensive Task management within the Story detail page, including Task list display, inline Task creation, Task status updates via checkbox, Task filtering, and Task sorting. This enables users to break down Stories into granular implementation tasks and track their progress.

User Story

As a developer or project manager, I want to create and manage Tasks within a Story, So that I can break down Stories into smaller work items and track implementation progress.

Acceptance Criteria

• Task list displays all Tasks associated with the Story
• Empty state shows when Story has no Tasks
• "Add Task" button opens inline Task creation form
• Inline form allows creating Tasks without leaving the page
• Task checkbox toggles Task status (Todo ↔ Done)
• Task cards display title, priority, assignee, estimated hours
• Task count badge shows in Story header (e.g., "Tasks (8)")
• Task filters allow filtering by status, priority, assignee
• Task sorting allows sorting by priority, status, created date, assignee
• Task form validates inputs (title required, hours numeric)
• Success/error toast notifications for Task operations
• Loading states during Task creation/update
• Optimistic UI updates for instant feedback

Technical Requirements

New Components:

• components/projects/task-list.tsx - Task list container (300-400 lines)
• components/projects/task-card.tsx - Individual Task card (150-200 lines)
• components/projects/task-form.tsx - Inline Task creation form (200-250 lines)

New Hooks:

• lib/hooks/use-tasks.ts - Task CRUD hooks (150-200 lines)
  • useTasks(storyId) - List Tasks by Story
  • useCreateTask() - Create Task
  • useUpdateTask() - Update Task
  • useDeleteTask() - Delete Task
  • useChangeTaskStatus() - Change Task status (checkbox)

API Integration:

• GET /api/v1/stories/{storyId}/tasks - List Tasks
• POST /api/v1/tasks - Create Task
• PUT /api/v1/tasks/{id} - Update Task
• DELETE /api/v1/tasks/{id} - Delete Task
• PUT /api/v1/tasks/{id}/status - Change status

Task Types (add to types/project.ts):

export interface Task {
  id: string;
  title: string;
  description?: string;
  storyId: string;
  projectId: string;
  status: WorkItemStatus;
  priority: WorkItemPriority;
  estimatedHours?: number;
  actualHours?: number;
  assigneeId?: string;
  tenantId: string;
  createdAt: string;
  updatedAt: string;
}

export interface CreateTaskDto {
  storyId: string;
  title: string;
  description?: string;
  priority: WorkItemPriority;
  estimatedHours?: number;
}

export interface UpdateTaskDto {
  title?: string;
  description?: string;
  priority?: WorkItemPriority;
  estimatedHours?: number;
  actualHours?: number;
}

Tasks

• Task 1 - Verify Task API endpoints and create Task types
• Task 2 - Create Task API client and React Query hooks
• Task 3 - Implement TaskList component with filters and sorting
• Task 4 - Implement TaskCard component with checkbox status toggle
• Task 5 - Implement inline TaskForm for Task creation
• Task 6 - Integrate Task management into Story detail page

Progress: 0/6 tasks completed

Dependencies

Prerequisites:

• ✅ Task API endpoints ready (TasksController.cs)
• Story 1 completed (Story detail page must exist)

Blocks:

• None (independent feature after Story 1)

Definition of Done

• All 6 tasks completed
• Task list displays Tasks correctly
• Task creation form working (inline)
• Task checkbox status toggle working
• Task filters and sorting functional
• Task count badge updates in real-time
• Empty state displays when no Tasks
• Loading and error states implemented
• Optimistic UI updates for status changes
• Code reviewed and approved
• E2E tests passing
• Git commit created with descriptive message

Test Plan

Manual Testing:

1. Navigate to Story detail page
2. Verify "Add Task" button visible
3. Click "Add Task" → Verify inline form appears
4. Create Task with title "Implement login API" → Verify Task appears in list
5. Create Task without title → Verify validation error
6. Click Task checkbox → Verify status changes to Done
7. Uncheck Task checkbox → Verify status changes back to Todo
8. Verify Task count badge updates (e.g., "Tasks (3)")
9. Filter by status: "Done" → Verify only Done Tasks show
10. Sort by priority → Verify Tasks reorder correctly
11. Create 10+ Tasks → Verify list scrolls properly
12. Test on mobile → Verify responsive layout

E2E Test (Playwright):

test('user can create and manage tasks', async ({ page }) => {
  await page.goto('/stories/story-123');

  // Create Task
  await page.click('[data-testid="add-task-button"]');
  await page.fill('[name="title"]', 'Implement login form');
  await page.selectOption('[name="priority"]', 'High');
  await page.fill('[name="estimatedHours"]', '8');
  await page.click('[data-testid="submit-task"]');

  // Verify Task appears
  await expect(page.locator('[data-testid="task-item"]')).toContainText('Implement login form');

  // Toggle status
  await page.click('[data-testid="task-checkbox"]');
  await expect(page.locator('[data-testid="task-status"]')).toContainText('Done');

  // Verify count updates
  await expect(page.locator('[data-testid="task-count"]')).toContainText('1');
});

test('task filters work correctly', async ({ page }) => {
  await page.goto('/stories/story-123');

  // Create Done Task
  await page.click('[data-testid="add-task-button"]');
  await page.fill('[name="title"]', 'Task 1');
  await page.click('[data-testid="submit-task"]');
  await page.click('[data-testid="task-checkbox"]');

  // Create Todo Task
  await page.click('[data-testid="add-task-button"]');
  await page.fill('[name="title"]', 'Task 2');
  await page.click('[data-testid="submit-task"]');

  // Filter by Done
  await page.selectOption('[data-testid="task-filter"]', 'Done');
  await expect(page.locator('[data-testid="task-item"]')).toHaveCount(1);
  await expect(page.locator('[data-testid="task-item"]')).toContainText('Task 1');
});

Verification Commands:

# Start dev server
npm run dev

# Navigate to Story detail page
# Create Tasks and test functionality

# Run E2E tests
npm run test:e2e -- tasks

UX Design Reference

Design Document: docs/designs/STORY_UX_UI_DESIGN.md

• Section: "Tasks Section" (lines 305-348)
• Layout: Task cards with checkbox, metadata, actions
• Interaction: Checkbox toggles status, click card to expand details
• Filters: All, Todo, InProgress, Done
• Sorting: Priority, Status, Created date, Assignee

Design Tokens:

/* Task Card */
.task-card {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.task-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Task Checkbox */
.task-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.task-checkbox:hover {
  transform: scale(1.1);
}

/* Task Count Badge */
.task-count-badge {
  background: var(--muted);
  color: var(--muted-foreground);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

Notes

Why This Matters:

• Core Feature: Tasks are essential for breaking down Stories into implementation steps
• User Experience: Inline Task creation enables fast workflow without navigation
• Real-time Feedback: Optimistic UI updates make the app feel instant
• Epic → Story → Task: Completes the full project management hierarchy

Performance Considerations:

• Use React.memo for TaskCard to prevent unnecessary re-renders
• Debounce filter/sort operations (300ms delay)
• Virtual scrolling for lists > 50 Tasks (Phase 3)
• Optimistic updates for status changes (instant UI feedback)

Future Enhancements (Post-Sprint 4):

• Task drag-and-drop reordering
• Task bulk operations (multi-select)
• Task due dates and reminders
• Task comments and activity log
• Task templates for common patterns
• Task time tracking (start/stop timer)

---

Created: 2025-11-05 by Frontend Agent Updated: 2025-11-05