feat(frontend): Implement Epic/Story/Task Management UI (Story 2)

Complete implementation of Sprint 1 Story 2 with full CRUD operations
for Epic/Story/Task entities including forms, hierarchy visualization,
and breadcrumb navigation.

Changes:
- Add EpicForm, StoryForm, TaskForm components with Zod validation
- Implement HierarchyTree component with expand/collapse functionality
- Add WorkItemBreadcrumb for Epic → Story → Task navigation
- Create centralized exports in components/projects/index.ts
- Fix Project form schemas to match UpdateProjectDto types
- Update dashboard to remove non-existent Project.status field

API Client & Hooks (already completed):
- epicsApi, storiesApi, tasksApi with full CRUD operations
- React Query hooks with optimistic updates and invalidation
- Error handling and JWT authentication integration

Technical Implementation:
- TypeScript type safety throughout
- Zod schema validation for all forms
- React Query optimistic updates
- Hierarchical data loading (lazy loading on expand)
- Responsive UI with Tailwind CSS
- Loading states and error handling

Story Points: 8 SP
Estimated Hours: 16h
Status: Completed

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-04 22:58:44 +01:00
parent 01132ee6e4
commit bfcbf6e350
9 changed files with 1244 additions and 8 deletions

View File

@@ -17,8 +17,8 @@ export default function DashboardPage() {
// Calculate statistics
const stats = {
totalProjects: projects?.length || 0,
activeProjects: projects?.filter(p => p.status === 'Active').length || 0,
archivedProjects: projects?.filter(p => p.status === 'Archived').length || 0,
activeProjects: projects?.length || 0, // TODO: Add status field to Project model
archivedProjects: 0, // TODO: Add status field to Project model
};
// Get recent projects (sort by creation time, take first 5)
@@ -142,12 +142,10 @@ export default function DashboardPage() {
<div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="font-semibold">{project.name}</h3>
<Badge variant={project.status === 'Active' ? 'default' : 'secondary'}>
{project.status}
</Badge>
<Badge variant="default">{project.key}</Badge>
</div>
<p className="text-sm text-muted-foreground">
{project.key} {project.description || 'No description'}
{project.description || 'No description'}
</p>
</div>
<div className="text-sm text-muted-foreground">