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>

app/(dashboard)/dashboard/page.tsx

@@ -1,108 +1,204 @@
 'use client';
 
 import Link from 'next/link';
-import { FolderKanban, Plus } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { Plus, FolderKanban, Archive, TrendingUp, ArrowRight } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
 import { useProjects } from '@/lib/hooks/use-projects';
+import { CreateProjectDialog } from '@/components/features/projects/CreateProjectDialog';
 
 export default function DashboardPage() {
-  const { data: projects } = useProjects();
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const { data: projects, isLoading } = useProjects();
+
+  // Calculate statistics
+  const stats = {
+    totalProjects: projects?.length || 0,
+    activeProjects: projects?.filter(p => p.status === 'Active').length || 0,
+    archivedProjects: projects?.filter(p => p.status === 'Archived').length || 0,
+  };
+
+  // Get recent projects (sort by creation time, take first 5)
+  const recentProjects = projects
+    ?.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .slice(0, 5) || [];
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
-        <p className="text-muted-foreground">
-          Welcome to ColaFlow - Your AI-powered project management system
-        </p>
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground">
+            Welcome back! Here&apos;s an overview of your projects.
+          </p>
+        </div>
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          New Project
+        </Button>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {/* Statistics Cards */}
+      <div className="grid gap-4 md:grid-cols-3">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Total Projects</CardTitle>
             <FolderKanban className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{projects?.length || 0}</div>
-            <p className="text-xs text-muted-foreground">
-              Active projects in your workspace
-            </p>
+            {isLoading ? (
+              <Skeleton className="h-8 w-16" />
+            ) : (
+              <>
+                <div className="text-2xl font-bold">{stats.totalProjects}</div>
+                <p className="text-xs text-muted-foreground">
+                  Projects in your workspace
+                </p>
+              </>
+            )}
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Active Projects</CardTitle>
-            <FolderKanban className="h-4 w-4 text-muted-foreground" />
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">
-              {projects?.filter((p) => p.status === 'Active').length || 0}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Currently in progress
-            </p>
+            {isLoading ? (
+              <Skeleton className="h-8 w-16" />
+            ) : (
+              <>
+                <div className="text-2xl font-bold text-green-600">{stats.activeProjects}</div>
+                <p className="text-xs text-muted-foreground">
+                  Currently in progress
+                </p>
+              </>
+            )}
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Quick Actions</CardTitle>
-            <Plus className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">Archived Projects</CardTitle>
+            <Archive className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <Link href="/projects">
-              <Button className="w-full" variant="outline">
-                View All Projects
-              </Button>
-            </Link>
+            {isLoading ? (
+              <Skeleton className="h-8 w-16" />
+            ) : (
+              <>
+                <div className="text-2xl font-bold text-gray-600">{stats.archivedProjects}</div>
+                <p className="text-xs text-muted-foreground">
+                  Completed or on hold
+                </p>
+              </>
+            )}
           </CardContent>
         </Card>
       </div>
 
+      {/* Recent Projects */}
       <Card>
         <CardHeader>
-          <CardTitle>Recent Projects</CardTitle>
-          <CardDescription>
-            Your most recently updated projects
-          </CardDescription>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Recent Projects</CardTitle>
+              <CardDescription>Your recently created projects</CardDescription>
+            </div>
+            <Button variant="ghost" asChild>
+              <Link href="/projects">
+                View All
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Link>
+            </Button>
+          </div>
         </CardHeader>
         <CardContent>
-          {projects && projects.length > 0 ? (
-            <div className="space-y-2">
-              {projects.slice(0, 5).map((project) => (
+          {isLoading ? (
+            <div className="space-y-3">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex items-center space-x-4">
+                  <Skeleton className="h-12 w-12 rounded" />
+                  <div className="space-y-2 flex-1">
+                    <Skeleton className="h-4 w-[200px]" />
+                    <Skeleton className="h-3 w-[150px]" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : recentProjects.length > 0 ? (
+            <div className="space-y-4">
+              {recentProjects.map((project) => (
                 <Link
                   key={project.id}
                   href={`/projects/${project.id}`}
-                  className="block rounded-lg border p-3 transition-colors hover:bg-accent"
+                  className="flex items-center justify-between rounded-lg border p-4 transition-colors hover:bg-accent"
                 >
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium">{project.name}</h3>
-                      <p className="text-sm text-muted-foreground">{project.key}</p>
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold">{project.name}</h3>
+                      <Badge variant={project.status === 'Active' ? 'default' : 'secondary'}>
+                        {project.status}
+                      </Badge>
                     </div>
-                    <span
-                      className={`rounded-full px-2 py-1 text-xs font-medium ${
-                        project.status === 'Active'
-                          ? 'bg-green-100 text-green-700'
-                          : 'bg-gray-100 text-gray-700'
-                      }`}
-                    >
-                      {project.status}
-                    </span>
+                    <p className="text-sm text-muted-foreground">
+                      {project.key} • {project.description || 'No description'}
+                    </p>
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {new Date(project.createdAt).toLocaleDateString()}
                   </div>
                 </Link>
               ))}
             </div>
           ) : (
-            <p className="text-sm text-muted-foreground">
-              No projects yet. Create your first project to get started.
-            </p>
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <FolderKanban className="h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-sm text-muted-foreground mb-4">
+                No projects yet. Create your first project to get started.
+              </p>
+              <Button onClick={() => setIsCreateDialogOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Project
+              </Button>
+            </div>
           )}
         </CardContent>
       </Card>
+
+      {/* Quick Actions Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Quick Actions</CardTitle>
+          <CardDescription>Common tasks to get you started</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-2 md:grid-cols-2">
+          <Button
+            variant="outline"
+            className="justify-start"
+            onClick={() => setIsCreateDialogOpen(true)}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            Create Project
+          </Button>
+          <Button variant="outline" className="justify-start" asChild>
+            <Link href="/projects">
+              <FolderKanban className="mr-2 h-4 w-4" />
+              View All Projects
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <CreateProjectDialog
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+      />
     </div>
   );
 }

app/(dashboard)/projects/[id]/kanban/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  closestCorners,
+} from '@dnd-kit/core';
+import { useState } from 'react';
+import { useIssues, useChangeIssueStatus } from '@/lib/hooks/use-issues';
+import { Button } from '@/components/ui/button';
+import { Plus, Loader2 } from 'lucide-react';
+import { Issue } from '@/lib/api/issues';
+import { KanbanColumn } from '@/components/features/kanban/KanbanColumn';
+import { IssueCard } from '@/components/features/kanban/IssueCard';
+import { CreateIssueDialog } from '@/components/features/issues/CreateIssueDialog';
+
+const COLUMNS = [
+  { id: 'Backlog', title: 'Backlog', color: 'bg-gray-100' },
+  { id: 'Todo', title: 'To Do', color: 'bg-blue-100' },
+  { id: 'InProgress', title: 'In Progress', color: 'bg-yellow-100' },
+  { id: 'Done', title: 'Done', color: 'bg-green-100' },
+];
+
+export default function KanbanPage() {
+  const params = useParams();
+  const projectId = params.id as string;
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [activeIssue, setActiveIssue] = useState<Issue | null>(null);
+
+  const { data: issues, isLoading } = useIssues(projectId);
+  const changeStatusMutation = useChangeIssueStatus(projectId);
+
+  // Group issues by status
+  const issuesByStatus = {
+    Backlog: issues?.filter((i) => i.status === 'Backlog') || [],
+    Todo: issues?.filter((i) => i.status === 'Todo') || [],
+    InProgress: issues?.filter((i) => i.status === 'InProgress') || [],
+    Done: issues?.filter((i) => i.status === 'Done') || [],
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const issue = issues?.find((i) => i.id === event.active.id);
+    setActiveIssue(issue || null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveIssue(null);
+
+    if (!over || active.id === over.id) return;
+
+    const newStatus = over.id as string;
+    const issue = issues?.find((i) => i.id === active.id);
+
+    if (issue && issue.status !== newStatus) {
+      changeStatusMutation.mutate({ issueId: issue.id, status: newStatus });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Kanban Board</h1>
+          <p className="text-muted-foreground">
+            Drag and drop to update issue status
+          </p>
+        </div>
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          New Issue
+        </Button>
+      </div>
+
+      <DndContext
+        collisionDetection={closestCorners}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="grid grid-cols-4 gap-4">
+          {COLUMNS.map((column) => (
+            <KanbanColumn
+              key={column.id}
+              id={column.id}
+              title={column.title}
+              issues={issuesByStatus[column.id as keyof typeof issuesByStatus]}
+            />
+          ))}
+        </div>
+
+        <DragOverlay>
+          {activeIssue && <IssueCard issue={activeIssue} />}
+        </DragOverlay>
+      </DndContext>
+
+      <CreateIssueDialog
+        projectId={projectId}
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+      />
+    </div>
+  );
+}