Commit Graph

4 Commits

Author SHA1 Message Date
Yaojia Wang
f7a17a3d1a feat(frontend): Implement Story detail page - Sprint 4 Story 1
Add complete Story detail page with two-column layout, breadcrumb navigation,
and full CRUD operations.

Key Features:
- Story detail page at /stories/[id] route
- Two-column layout (main content + metadata sidebar)
- Breadcrumb navigation: Projects > Project > Epics > Epic > Stories > Story
- Story header with title, status, priority badges, Edit/Delete actions
- Main content area with Story description and Tasks placeholder
- Metadata sidebar with:
  * Status selector (with optimistic updates)
  * Priority selector
  * Assignee display
  * Time tracking (estimated/actual hours)
  * Created/Updated dates
  * Parent Epic card (clickable link)
- Edit Story dialog (reuses StoryForm component)
- Delete Story confirmation dialog
- Loading state (skeleton loaders)
- Error handling with error.tsx
- Responsive design (mobile/tablet/desktop)
- Accessibility support (keyboard navigation, ARIA labels)

Technical Implementation:
- Uses Next.js 13+ App Router with dynamic routes
- React Query for data fetching and caching
- Optimistic updates for status/priority changes
- Proper TypeScript typing throughout
- Reuses existing components (StoryForm, shadcn/ui)
- 85% code reuse from Epic detail page pattern

Bug Fixes:
- Fixed TypeScript error in pm.ts (api.post generic type)

Files Created:
- app/(dashboard)/stories/[id]/page.tsx (478 lines)
- app/(dashboard)/stories/[id]/loading.tsx (66 lines)
- app/(dashboard)/stories/[id]/error.tsx (53 lines)

Files Modified:
- lib/api/pm.ts (added generic type to api.post<Epic>)

Verification:
- Build successful (npm run build)
- No TypeScript errors
- Route registered: /stories/[id] (Dynamic)

Next Steps:
- Task management functionality (Sprint 4 Story 2)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 22:00:24 +01:00
Yaojia Wang
b404fbb006 fix(frontend): Add comprehensive debug logging for Epic creation
Add detailed console logging to diagnose Epic creation issue where
no request is being sent to backend.

Changes:
- Add form submission event logging in epic-form.tsx
- Add API request/response logging in epicsApi.create
- Add HTTP client interceptor logging for all requests/responses
- Log authentication status, payload, and error details
- Log form validation state and errors

This will help identify:
- Whether form submit event fires
- Whether validation passes
- Whether API call is triggered
- Whether authentication token exists
- What errors occur (if any)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 20:50:34 +01:00
Yaojia Wang
90e3d2416c feat(frontend): Refactor Kanban board to focus on Story management
Refactored the Kanban board from a mixed Epic/Story/Task view to focus exclusively on Stories, which are the right granularity for Kanban management.

Changes:
- Created StoryCard component with Epic breadcrumb, priority badges, and estimated hours display
- Updated KanbanColumn to use Story type and display epic names
- Created CreateStoryDialog for story creation with epic selection
- Added useProjectStories hook to fetch all stories across epics for a project
- Refactored Kanban page to show Stories only with drag-and-drop status updates
- Updated SignalR event handlers to focus on Story events only
- Changed UI text from 'New Issue' to 'New Story' and 'update issue status' to 'update story status'
- Implemented story status change via useChangeStoryStatus hook

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 15:03:12 +01:00
Yaojia Wang
e52c8300de feat(frontend): Implement Phase 1 - ProjectManagement API Client & Hooks
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>
2025-11-04 20:58:59 +01:00