Commit Graph

13 Commits

Author SHA1 Message Date
Yaojia Wang
313989cb9e fix(frontend): Add health check API endpoint for Docker monitoring
Resolve BUG-004 - frontend container unhealthy status.

Changes:
- Created /api/health endpoint using Next.js 15 App Router
- Supports GET and HEAD requests for health checks
- Returns JSON with status, timestamp, uptime, environment info
- Docker container now shows 'healthy' status

Fixes:
- Docker healthcheck endpoint missing (BUG-004)
- Container status showing 'unhealthy' despite working correctly

Testing:
- Verified endpoint returns 200 OK with health data
- Confirmed Docker container status changed to 'healthy'
- Health check interval: 30s, timeout: 10s, retries: 3

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 00:07:34 +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
bfcbf6e350 feat(frontend): Implement Epic/Story/Task Management UI (Story 2)
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>
2025-11-04 22:58:44 +01:00
Yaojia Wang
2b134b0d6f feat(frontend): Implement Phase 2 - Complete Projects UI with CRUD operations
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>
2025-11-04 21:26:02 +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
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
Yaojia Wang
149bb9bd88 feat(frontend): Implement Project Detail Page with edit and archive functionality
Add complete project detail page with real-time updates via SignalR.

Changes:
- Updated project detail page with edit and archive buttons
- Created EditProjectDialog component for updating projects
- Created ArchiveProjectDialog component for archiving projects
- Integrated SignalR real-time updates (onProjectUpdated, onProjectArchived)
- Added SignalR connection status indicator
- Enhanced useProjectHub hook to support callback options
- Improved UI layout with two-column card grid
- Added toast notifications for user feedback

Features:
- View project details (name, description, status, timestamps)
- Edit project name and description
- Archive active projects
- Real-time updates when project is modified by other users
- Automatic redirect when project is archived

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 10:40:58 +01:00
Yaojia Wang
bdbb187ee4 feat(frontend): Implement SignalR client integration for real-time notifications
Add comprehensive SignalR client implementation with connection management,
React hooks, and UI components for real-time notifications and project updates.

Changes:
- Install @microsoft/signalr package (v9.0.6)
- Create SignalR connection manager with auto-reconnect
- Implement useNotificationHub hook for notification hub
- Implement useProjectHub hook for project hub with room-based subscriptions
- Add NotificationPopover UI component with badge and dropdown
- Create Badge UI component
- Add SignalRProvider for global connection initialization
- Update Header to display real-time notifications
- Update app layout to include SignalRProvider
- Add comprehensive documentation in SIGNALR_INTEGRATION.md

Features:
- JWT authentication with automatic token management
- Auto-reconnect with exponential backoff (0s, 2s, 5s, 10s, 30s)
- Connection state management and indicators
- Real-time notification push
- Project event subscriptions (create, update, delete, status change)
- Room-based project subscriptions
- Typing indicators support

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 09:41:13 +01:00
Yaojia Wang
e60b70de52 feat(frontend): Implement complete authentication system
Implemented comprehensive JWT-based authentication with token refresh mechanism, user state management, and protected routes.

Changes:
- Upgraded API client from fetch to Axios with automatic token refresh interceptors
- Created API configuration with centralized endpoint definitions
- Implemented Zustand auth store for user state management with persistence
- Created React Query hooks for login, register, logout, and current user
- Built login and registration pages with form validation (Zod + React Hook Form)
- Implemented AuthGuard component for route protection
- Enhanced Header with user dropdown menu and logout functionality
- Updated Sidebar with user information display at bottom
- Added Team navigation item to sidebar
- Configured environment variables for API base URL

Technical Details:
- JWT token storage in localStorage with secure key names
- Automatic token refresh on 401 responses
- Request queueing during token refresh to prevent race conditions
- TypeScript strict typing throughout
- ESLint compliant code (fixed type safety issues)
- Proper error handling with user-friendly messages

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 09:09:09 +01:00
Yaojia Wang
797b1f6eed In progress 2025-11-03 11:51:47 +01:00
Yaojia Wang
2ea3c93aa2 fix(frontend): Add comprehensive debugging for API connection issues
Enhanced error handling and debugging to diagnose API connection problems.

Changes:
- Added detailed console logging in API client (client.ts)
- Enhanced error display in projects page with troubleshooting steps
- Added logging in useProjects hook for better debugging
- Display API URL and error details on error screen
- Added retry button for easy error recovery

This will help diagnose why the backend API (localhost:5167) is not connecting.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-03 09:12:00 +01:00
Yaojia Wang
097300e8ec Initial commit 2025-11-03 00:04:07 +01:00
Yaojia Wang
34b701de48 Initial commit from Create Next App 2025-11-02 20:24:08 +01:00