diff --git a/docs/plans/sprint_1_story_2.md b/docs/plans/sprint_1_story_2.md new file mode 100644 index 0000000..ded2455 --- /dev/null +++ b/docs/plans/sprint_1_story_2.md @@ -0,0 +1,132 @@ +# 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