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>
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>
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>
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>
