# Story 2: Epic/Story/Task Management UI

**Story ID**: STORY-002
**Sprint**: [Sprint 1](sprint_1.md)
**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 ✅
- [x] EpicApiClient with CRUD methods
- [x] StoryApiClient with CRUD methods
- [x] TaskApiClient with CRUD methods
- [x] Axios interceptors for authentication
- [x] Error handling and validation

### AC2: React Query Hooks ✅
- [x] useEpics, useCreateEpic, useUpdateEpic, useDeleteEpic
- [x] useStories, useCreateStory, useUpdateStory, useDeleteStory
- [x] useTasks, useCreateTask, useUpdateTask, useDeleteTask
- [x] Query invalidation after mutations
- [x] Optimistic updates

### AC3: Epic/Story/Task Forms ✅
- [x] EpicForm component with all fields
- [x] StoryForm component with parent epic selection
- [x] TaskForm component with parent story selection
- [x] Form validation (Zod schemas)
- [x] Loading and error states

### AC4: Hierarchy Visualization ✅
- [x] Tree view showing Epic → Story → Task
- [x] Breadcrumb navigation
- [x] Parent-child relationship indicators
- [x] Expand/collapse functionality

---

## Tasks Breakdown

### Task 1: Create API Client Services (4h)
- [TASK-005](sprint_1_story_2_task_1.md)

### Task 2: Build React Query Hooks (3h)
- [TASK-006](sprint_1_story_2_task_2.md)

### Task 3: Implement Epic/Story/Task Forms (5h)
- [TASK-007](sprint_1_story_2_task_3.md)

### Task 4: Add Hierarchy Visualization (4h)
- [TASK-008](sprint_1_story_2_task_4.md)

---

## 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

- [x] All CRUD operations working
- [x] Forms validate input correctly
- [x] 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