6c8ac6ee61
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>
ColaFlow Web
AI-Powered Project Management System - Frontend
Tech Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript 5.x
- UI Components: shadcn/ui + Radix UI
- Styling: Tailwind CSS 4
- State Management:
- TanStack Query v5 (server state)
- Zustand (client state)
- Form Handling: React Hook Form + Zod
- Icons: Lucide React
Project Structure
colaflow-web/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes
│ ├── (dashboard)/ # Main application routes
│ │ ├── dashboard/ # Dashboard page
│ │ ├── projects/ # Projects management
│ │ └── kanban/ # Kanban board
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page (redirects to dashboard)
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── features/ # Feature-specific components
│ │ ├── projects/ # Project components
│ │ └── kanban/ # Kanban components
│ └── layout/ # Layout components (Header, Sidebar)
├── lib/
│ ├── api/ # API client and endpoints
│ ├── hooks/ # Custom React hooks
│ ├── providers/ # Context providers
│ └── utils.ts # Utility functions
├── stores/ # Zustand stores
├── types/ # TypeScript type definitions
└── public/ # Static assets
Getting Started
Prerequisites
- Node.js 20 LTS or higher
- npm or yarn
Installation
- Install dependencies:
npm install
- Create
.env.localfile:
NEXT_PUBLIC_API_URL=http://localhost:5000/api/v1
Development
Start the development server:
npm run dev
Open http://localhost:3000 in your browser.
Build
Build the production application:
npm run build
Linting & Formatting
# Run ESLint
npm run lint
# Format code with Prettier
npm run format
Features Implemented (Sprint 1)
Core Pages
- Dashboard with project overview
- Projects list page with search and filtering
- Project detail page
- Kanban board (static, drag-and-drop in Sprint 2)
Components
- Responsive layout with sidebar navigation
- Project creation dialog with form validation
- Kanban board with column and task cards
- shadcn/ui integration (Button, Card, Dialog, Form, Input, Table)
State Management
- TanStack Query for server state
- Zustand for UI state (sidebar, theme, modals, notifications)
- Custom hooks for projects and kanban
API Integration
- Type-safe API client with error handling
- Projects API endpoints
- Kanban board API integration
TypeScript Types
All API responses and data models are fully typed:
types/project.ts- Project, Epic, Story, Task typestypes/kanban.ts- Kanban board typestypes/user.ts- User and authentication types
API Endpoints
The frontend expects the following API endpoints:
GET /api/v1/projects- List all projectsPOST /api/v1/projects- Create projectGET /api/v1/projects/{id}- Get project detailsPUT /api/v1/projects/{id}- Update projectDELETE /api/v1/projects/{id}- Delete projectGET /api/v1/projects/{id}/kanban- Get kanban board
Environment Variables
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_API_URL |
Backend API URL | http://localhost:5000/api/v1 |
Next Steps (Sprint 2)
- Implement drag-and-drop for Kanban board
- Add task creation and editing
- Implement authentication (login/register)
- Add user profile management
- Implement real-time updates with SignalR
- Add workflow customization
- Implement audit logs viewer
Architecture Reference
For complete architecture details, see: docs/M1-Architecture-Design.md
License
Proprietary - ColaFlow Project