Enhanced the Story creation and editing form with 4 new UX-designed fields to
improve Story planning capabilities and align with comprehensive UX specifications.
New Features:
1. **Acceptance Criteria Editor**: Dynamic checkbox list for defining completion conditions
- Add/remove criteria with Enter key
- Inline editing with visual checkboxes
- Empty state handling
2. **Assignee Selector**: Dropdown for team member assignment
- Shows current user by default
- Unassigned option available
- Ready for future user list integration
3. **Tags Input**: Multi-select tags for categorization
- Add tags with Enter key
- Remove with Backspace or X button
- Lowercase normalization for consistency
4. **Story Points**: Numeric field for estimation
- Accepts 0-100 range (Fibonacci scale suggested)
- Optional field with validation
- Integer-only input
Components Created:
- components/projects/acceptance-criteria-editor.tsx (92 lines)
- components/projects/tags-input.tsx (70 lines)
Files Modified:
- components/projects/story-form.tsx: Added 4 new form fields (410 lines total)
- types/project.ts: Updated Story/CreateStoryDto/UpdateStoryDto interfaces
Technical Implementation:
- Zod schema validation for all new fields
- Backward compatible (all fields optional)
- Form default values from existing Story data
- TypeScript type safety throughout
- shadcn/ui component consistency
- Responsive two-column layout
- Clear field descriptions and placeholders
Validation Rules:
- Acceptance criteria: Array of strings (default: [])
- Assignee ID: Optional string
- Tags: Array of strings (default: [], lowercase)
- Story points: Optional number (0-100 range)
Testing:
- Frontend compilation: ✅ No errors
- Type checking: ✅ All types valid
- Form submission: Create and Update operations both supported
- Backward compatibility: Existing Stories work without new fields
Sprint 4 Story 3 Status: COMPLETE ✅
All acceptance criteria met:
✅ Form includes all 4 new fields
✅ Acceptance criteria can be added/removed dynamically
✅ Tags support multi-select
✅ Assignee selector shows user list (current user)
✅ Story Points accepts 0-100 integers
✅ Form validation works for all fields
✅ Backward compatible with existing Stories
✅ No TypeScript errors
✅ Frontend compiles successfully
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Address all Critical and High Priority issues identified in frontend code review report:
Critical Issues Fixed:
- Created unified logger utility (lib/utils/logger.ts) to replace all console.log statements
- Consolidated User type definitions - removed duplicate from authStore, using single source from types/user.ts
- Eliminated 'any' types in API client - added proper generic types with AxiosRequestConfig
- Fixed SignalR ConnectionManager - replaced 'any' with generic types <T>
- Created API error types (lib/types/errors.ts) with ApiError and getErrorMessage helper
- Fixed IssueCard component - removed all type assertions, created discriminated union types for Kanban items
- Added React.memo to IssueCard for performance optimization
- Added proper ARIA labels and accessibility attributes to IssueCard
High Priority Issues Fixed:
- Fixed hardcoded user ID in CreateProjectDialog - now uses actual user from authStore
- Added useCallback to CreateProjectDialog onSubmit handler
- Fixed error handlers in use-epics.ts - replaced 'any' with ApiError type
- Updated all error handling to use logger and getErrorMessage
Type Safety Improvements:
- Created KanbanItem discriminated union (KanbanEpic | KanbanStory | KanbanTask) with proper type guards
- Added 'never' types to prevent invalid property access
- Fixed User interface to include all required fields (createdAt, updatedAt)
- Maintained backward compatibility with LegacyKanbanBoard for existing code
Files Changed:
- lib/utils/logger.ts - New centralized logging utility
- lib/types/errors.ts - New API error types and helpers
- types/user.ts - Consolidated User type with TenantRole
- types/kanban.ts - New discriminated union types for type-safe Kanban items
- components/features/kanban/IssueCard.tsx - Type-safe with React.memo
- components/features/projects/CreateProjectDialog.tsx - Fixed hardcoded user ID, added useCallback
- lib/api/client.ts - Eliminated 'any', added proper generics
- lib/signalr/ConnectionManager.ts - Replaced console.log, added generics
- lib/hooks/use-epics.ts - Fixed error handler types
- stores/authStore.ts - Removed duplicate User type
- lib/hooks/useAuth.ts - Added createdAt field to User
TypeScript compilation: ✅ All type checks passing (0 errors)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Add complete API integration for ProjectManagement module:
- Epics, Stories, Tasks API clients
- React Query hooks for all entities
- Updated type definitions to match backend API
- API test page for connection verification
Changes:
- Update lib/api/config.ts: Add all ProjectManagement endpoints
- Update types/project.ts: Match backend API models (Epic, Story, Task)
- Create lib/api/pm.ts: API clients for Epics, Stories, Tasks
- Create lib/hooks/use-epics.ts: React Query hooks for Epic CRUD
- Create lib/hooks/use-stories.ts: React Query hooks for Story CRUD
- Create lib/hooks/use-tasks.ts: React Query hooks for Task CRUD
- Create app/(dashboard)/api-test/page.tsx: API connection test page
Features:
- Full CRUD operations for Epics, Stories, Tasks
- Status change and assignment operations
- Optimistic updates for better UX
- Error handling with toast notifications
- Query invalidation for cache consistency
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
