Commit Graph

5 Commits

Author SHA1 Message Date
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
2a0394b5ab feat(frontend): Implement Epic detail page with Story management
Add comprehensive Epic detail page at /epics/[id] with full CRUD operations.

Changes:
- Created Epic detail page with breadcrumb navigation
- Display Epic details: name, description, status, priority, time estimates
- Show list of Stories belonging to the Epic with card view
- Add Edit Epic functionality (opens dialog with form)
- Add Create/Edit/Delete Story functionality under Epic
- Fix Epic type inconsistency (name vs title) across components
- Update Kanban page to map Epic.name to title for unified interface
- Update epic-form to use 'name' field and add createdBy support
- Update work-item-breadcrumb to use Epic.name instead of title

Technical improvements:
- Use Shadcn UI components for consistent design
- Implement optimistic updates with React Query
- Add loading and error states with skeletons
- Follow Next.js App Router patterns with async params
- Add delete confirmation dialogs for Epic and Stories

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 14:56:29 +01:00
Yaojia Wang
3fa43c5542 feat(frontend): Add SignalR Context for real-time event management
Create comprehensive SignalR Context infrastructure to support real-time updates across the application.

Changes:
- Created SignalRContext.tsx with React Context API for SignalR connection management
- Implemented useSignalREvent and useSignalREvents hooks for simplified event subscription
- Updated Kanban page to use new SignalR hooks (reduced from 150+ lines to ~50 lines)
- Updated root layout to use new SignalRProvider from SignalRContext
- Fixed login page Suspense boundary issue for Next.js 16 compatibility
- Fixed Kanban type issue: made description optional to match API response

Features:
- Auto-connect when user is authenticated
- Auto-reconnect with configurable delays (0s, 2s, 5s, 10s, 30s)
- Toast notifications for connection status changes
- Event subscription management with automatic cleanup
- Support for multiple hub connections (PROJECT, NOTIFICATION)
- TypeScript type safety with proper interfaces

Usage:
```tsx
// Subscribe to single event
useSignalREvent('TaskCreated', (task) => {
  console.log('Task created:', task);
});

// Subscribe to multiple events
useSignalREvents({
  'TaskCreated': (task) => handleTaskCreated(task),
  'TaskUpdated': (task) => handleTaskUpdated(task),
});
```

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 13:21:10 +01:00
Yaojia Wang
6c8ac6ee61 feat(frontend): Complete Story 3 - Kanban Board Updates (M1 Sprint 1)
Migrated Kanban board from Issue API to ProjectManagement API and added
real-time SignalR updates with hierarchy visualization.

Changes:
**Task 1: Migrate to ProjectManagement API (3h)**
- Replaced useIssues with useEpics/useStories/useTasks hooks
- Combined Epic/Story/Task into unified KanbanWorkItem interface
- Implemented useMemo for efficient work item grouping by status
- Maintained backward compatibility with existing drag-and-drop

**Task 2: Add Hierarchy Indicators (2h)**
- Replaced emoji icons with lucide-react icons (FolderKanban, FileText, CheckSquare)
- Added parent breadcrumb for Story (shows Epic) and Task (shows Story)
- Added child count badges for Epic (shows story count) and Story (shows task count)
- Enhanced card layout with description, priority, and estimated hours
- Improved visual hierarchy with proper spacing and truncation

**Task 3: Integrate SignalR Real-time Updates (3h)**
- Subscribed to 19 SignalR events (6 Epic + 6 Story + 7 Task events)
- Implemented automatic query invalidation on create/update/delete
- Implemented optimistic updates for status changes (instant UI feedback)
- Added comprehensive console logging for debugging
- Proper cleanup of all event subscriptions on unmount

Features:
- Epic/Story/Task all visible on Kanban board
- Real-time updates across all connected clients
- Hierarchy visualization (parent breadcrumbs + child counts)
- Optimistic UI updates (no waiting for API)
- Type-safe implementation with TypeScript
- Performance optimized with useMemo

Technical Stack:
- React Query for data fetching and caching
- SignalR for real-time WebSocket communication
- dnd-kit for drag-and-drop (preserved from existing implementation)
- lucide-react for consistent iconography

Acceptance Criteria Met:
 AC1: Kanban loads from ProjectManagement API
 AC2: Hierarchy indicators displayed on cards
 AC3: SignalR real-time updates working
 AC4: Performance maintained (useMemo optimizations)

Files Modified:
- app/(dashboard)/projects/[id]/kanban/page.tsx (170 lines added)
- components/features/kanban/IssueCard.tsx (90 lines added)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 23:16:01 +01:00
Yaojia Wang
de697d436b feat(frontend): Implement Issue management and Kanban board
Add comprehensive Issue management functionality with drag-and-drop Kanban board.

Changes:
- Created Issue API client (issues.ts) with CRUD operations
- Implemented React Query hooks for Issue data management
- Added IssueCard component with drag-and-drop support using @dnd-kit
- Created KanbanColumn component with droppable zones
- Built CreateIssueDialog with form validation using zod
- Implemented Kanban page at /projects/[id]/kanban with DnD status changes
- Added missing UI components (textarea, select, skeleton)
- Enhanced API client with helper methods (get, post, put, patch, delete)
- Installed dependencies: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @radix-ui/react-select, sonner
- Fixed SignalR ConnectionManager TypeScript error
- Preserved legacy KanbanBoard component for backward compatibility

Features:
- Drag and drop issues between Backlog, Todo, InProgress, and Done columns
- Real-time status updates via API
- Issue creation with type (Story, Task, Bug, Epic) and priority
- Visual feedback with priority colors and type icons
- Toast notifications for user actions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 11:50:01 +01:00