Commit Graph

3 Commits

Author SHA1 Message Date
Yaojia Wang
358ee9b7f4 perf(frontend): Optimize component rendering with React.memo and hooks - Sprint 3 Story 2
Add React.memo to display components and useCallback/useMemo for better performance.

Changes:
- Added React.memo to TaskCard component
- Added React.memo to StoryCard component
- Added React.memo to KanbanBoard component
- Added React.memo to KanbanColumn component
- Added useCallback to kanban page drag handlers (handleDragStart, handleDragEnd)
- Added useCallback to epics page handlers (handleDelete, getStatusColor, getPriorityColor)
- Added useMemo for expensive computations in dashboard page (stats, recentProjects sorting)
- Added useMemo for total tasks calculation in KanbanBoard
- Removed unused isConnected variable from kanban page

Performance improvements:
- Reduced unnecessary re-renders in Card components
- Optimized list rendering performance with memoized callbacks
- Improved filtering and sorting performance with useMemo
- Better React DevTools Profiler metrics

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 19:57:07 +01:00
Yaojia Wang
04ba00d108 fix(frontend): Align Epic field names with backend API
Fix frontend-backend API field mismatches for Epic entity by:
1. Changed Epic.title to Epic.name in type definitions
2. Added Epic.createdBy field (required by backend)
3. Updated all Epic references from epic.title to epic.name
4. Fixed Epic form to use name field and include createdBy

Files modified:
- types/project.ts: Updated Epic, CreateEpicDto, UpdateEpicDto interfaces
- components/epics/epic-form.tsx: Fixed defaultValues to use epic.name
- components/projects/hierarchy-tree.tsx: Replaced epic.title with epic.name
- components/projects/story-form.tsx: Fixed epic dropdown to show epic.name
- app/(dashboard)/projects/[id]/epics/page.tsx: Display epic.name in list
- app/(dashboard)/projects/[id]/page.tsx: Display epic.name in preview
- app/(dashboard)/api-test/page.tsx: Display epic.name in test page

This resolves the 400 Bad Request error when creating Epics caused by
missing 'Name' field (was sending 'title' instead) and missing 'CreatedBy' field.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 13:30:48 +01:00
Yaojia Wang
71895f328d feat(frontend): Implement Epic management page with full CRUD operations
Add comprehensive Epic management functionality at /projects/{projectId}/epics route.

Changes:
- Created EpicForm component with validation (title, description, priority, estimated hours)
- Implemented Epics list page with Create/Edit/Delete operations
- Added breadcrumb navigation (Projects > Project Name > Epics)
- Included loading states with Skeletons
- Added error handling and user feedback with toast notifications
- Implemented responsive grid layout (mobile/tablet/desktop)
- Added hover effects and inline edit/delete actions
- Integrated with existing hooks (useEpics, useCreateEpic, useUpdateEpic, useDeleteEpic)
- Used shadcn/ui components (Card, Dialog, AlertDialog, Badge, Select)
- Added status and priority color coding
- Displayed estimated/actual hours and creation time
- Implemented empty state for projects with no epics

Technical details:
- Used react-hook-form with zod validation
- Implemented optimistic UI updates
- Followed existing patterns from Projects page
- Full TypeScript type safety

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 13:11:35 +01:00