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>
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>
Implemented comprehensive Projects UI with full CRUD functionality following
modern React best practices and using shadcn/ui components.
Changes:
- Created ProjectForm component with react-hook-form + zod validation
- Auto-uppercase project key input
- Comprehensive field validation (name, key, description)
- Support for both create and edit modes
- Toast notifications for success/error states
- Enhanced Projects List Page (app/(dashboard)/projects/page.tsx)
- Beautiful card-based grid layout with hover effects
- Skeleton loading states for better UX
- Empty state with call-to-action
- Project metadata display (key badge, created date)
- Integrated ProjectForm in Dialog for creation
- Enhanced Project Detail Page (app/(dashboard)/projects/[id]/page.tsx)
- Comprehensive project information display
- Edit functionality with dialog form
- Delete functionality with confirmation AlertDialog
- Epics preview section with stats
- Quick actions sidebar (Kanban, Epics)
- Statistics card (Total/Active/Completed epics)
- Skeleton loading states
- Error handling with retry capability
- Added toast notifications (Sonner)
- Installed and configured sonner package
- Added Toaster component to root layout
- Success/error notifications for all CRUD operations
- Installed required dependencies
- date-fns for date formatting
- sonner for toast notifications
- shadcn/ui alert-dialog component
Technical highlights:
- TypeScript with strict type checking
- React Query for data fetching and caching
- Optimistic updates with automatic rollback
- Responsive design (mobile-friendly)
- Accessibility-focused components
- Clean error handling throughout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
