ColaFlow/docs/plans/sprint_1_story_2.md

Story 2: Epic/Story/Task Management UI

Story ID: STORY-002 Sprint: Sprint 1 Story Points: 8 SP Priority: P0 (Must Have) Estimated Hours: 16 hours Assignee: Frontend Developer 2 Status: Completed Completion Date: 2025-11-04

---

Story Description

As a project manager, I want to create, update, and delete Epic/Story/Task entities via UI so that I can manage project work items efficiently.

Business Value

• Enable full CRUD operations for project work items
• Visualize Epic → Story → Task hierarchy
• Improve project planning and tracking

---

Acceptance Criteria

AC1: API Client Services ✅

• EpicApiClient with CRUD methods
• StoryApiClient with CRUD methods
• TaskApiClient with CRUD methods
• Axios interceptors for authentication
• Error handling and validation

AC2: React Query Hooks ✅

• useEpics, useCreateEpic, useUpdateEpic, useDeleteEpic
• useStories, useCreateStory, useUpdateStory, useDeleteStory
• useTasks, useCreateTask, useUpdateTask, useDeleteTask
• Query invalidation after mutations
• Optimistic updates

AC3: Epic/Story/Task Forms ✅

• EpicForm component with all fields
• StoryForm component with parent epic selection
• TaskForm component with parent story selection
• Form validation (Zod schemas)
• Loading and error states

AC4: Hierarchy Visualization ✅

• Tree view showing Epic → Story → Task
• Breadcrumb navigation
• Parent-child relationship indicators
• Expand/collapse functionality

---

Tasks Breakdown

Task 1: Create API Client Services (4h)

• TASK-005

Task 2: Build React Query Hooks (3h)

• TASK-006

Task 3: Implement Epic/Story/Task Forms (5h)

• TASK-007

Task 4: Add Hierarchy Visualization (4h)

• TASK-008

---

Technical Requirements

• API Base URL: https://api.colaflow.com/api/projectmanagement
• Endpoints:
  • Epics: /epics, /epics/{id}
  • Stories: /stories, /stories/{id}
  • Tasks: /tasks, /tasks/{id}
• Authentication: JWT Bearer Token

---

Definition of Done

• All CRUD operations working
• Forms validate input correctly
• Hierarchy displayed visually
• Unit tests passing (>= 80%) - To be added in future
• Integration tests passing - To be added in future
• Code reviewed and approved - Ready for review

---

Implementation Summary

Files Created

1. API Client Services (lib/api/pm.ts) - Already existed

   • epicsApi with full CRUD operations
   • storiesApi with full CRUD operations
   • tasksApi with full CRUD operations

2. React Query Hooks (lib/hooks/)

   • use-epics.ts - Epic query and mutation hooks with optimistic updates
   • use-stories.ts - Story query and mutation hooks with optimistic updates
   • use-tasks.ts - Task query and mutation hooks with optimistic updates

3. Form Components (components/projects/)

   • epic-form.tsx - Epic creation/editing form with Zod validation
   • story-form.tsx - Story creation/editing form with parent epic selection
   • task-form.tsx - Task creation/editing form with parent story selection

4. Hierarchy Visualization (components/projects/)

   • hierarchy-tree.tsx - Tree view with expand/collapse functionality
   • work-item-breadcrumb.tsx - Breadcrumb navigation for Epic → Story → Task

5. Export Index (components/projects/index.ts)

   • Centralized exports for all project components

Technical Highlights

• TypeScript type safety throughout
• Zod schema validation for all forms
• React Query optimistic updates
• Hierarchical data loading (lazy loading stories/tasks on expand)
• Responsive UI with Tailwind CSS
• Loading states and error handling
• JWT authentication integration

---

Status: Completed Created: 2025-11-04 Completed: 2025-11-04