feat: Add comprehensive kanban board functionality with drag-and-drop task management

CLAUDE.md

@@ -1,4 +1,4 @@
-# Claude Code Task Management Guide
+# Codespace Task Management Guide
 
 ## Documentation Available
 

app/dashboard/data.json

@@ -1,4 +1,5 @@
-[
+{
+  "documents": [
   {
     "id": 1,
     "header": "Cover page",
@@ -611,4 +612,122 @@
     "limit": "29",
     "reviewer": "Assign reviewer"
   }
-]
+  ],
+  "kanban": {
+    "boards": [
+      {
+        "id": "main-board",
+        "title": "Project Management Board",
+        "description": "Main kanban board for tracking project tasks",
+        "createdAt": "2024-01-01T00:00:00Z",
+        "updatedAt": "2024-01-15T10:30:00Z",
+        "columns": [
+          {
+            "id": "todo-column",
+            "title": "To Do",
+            "status": "todo",
+            "maxTasks": 10,
+            "tasks": [
+              {
+                "id": "task-1",
+                "title": "Design user authentication flow",
+                "description": "Create wireframes and user flow for the authentication system",
+                "status": "todo",
+                "priority": "high",
+                "assignee": "Sarah Johnson",
+                "createdAt": "2024-01-01T09:00:00Z",
+                "updatedAt": "2024-01-01T09:00:00Z",
+                "dueDate": "2024-01-20T17:00:00Z"
+              },
+              {
+                "id": "task-2",
+                "title": "Set up development environment",
+                "description": "Configure Docker containers and development tools",
+                "status": "todo",
+                "priority": "medium",
+                "assignee": "Mike Chen",
+                "createdAt": "2024-01-02T10:00:00Z",
+                "updatedAt": "2024-01-02T10:00:00Z"
+              },
+              {
+                "id": "task-3",
+                "title": "Research accessibility requirements",
+                "description": "Investigate WCAG guidelines and compliance needs",
+                "status": "todo",
+                "priority": "medium",
+                "createdAt": "2024-01-03T11:00:00Z",
+                "updatedAt": "2024-01-03T11:00:00Z"
+              }
+            ]
+          },
+          {
+            "id": "inprogress-column",
+            "title": "In Progress",
+            "status": "in-progress",
+            "maxTasks": 5,
+            "tasks": [
+              {
+                "id": "task-4",
+                "title": "Implement user registration API",
+                "description": "Build REST endpoints for user registration with validation",
+                "status": "in-progress",
+                "priority": "high",
+                "assignee": "Alex Rodriguez",
+                "createdAt": "2024-01-04T08:00:00Z",
+                "updatedAt": "2024-01-10T14:30:00Z",
+                "dueDate": "2024-01-18T17:00:00Z"
+              },
+              {
+                "id": "task-5",
+                "title": "Create dashboard mockups",
+                "description": "Design main dashboard layout and components",
+                "status": "in-progress",
+                "priority": "medium",
+                "assignee": "Emma Davis",
+                "createdAt": "2024-01-05T09:30:00Z",
+                "updatedAt": "2024-01-12T16:45:00Z"
+              }
+            ]
+          },
+          {
+            "id": "done-column",
+            "title": "Done",
+            "status": "done",
+            "tasks": [
+              {
+                "id": "task-6",
+                "title": "Project planning and requirements",
+                "description": "Gather and document all project requirements",
+                "status": "done",
+                "priority": "high",
+                "assignee": "Lisa Wong",
+                "createdAt": "2023-12-20T10:00:00Z",
+                "updatedAt": "2024-01-05T15:00:00Z"
+              },
+              {
+                "id": "task-7",
+                "title": "Database schema design",
+                "description": "Design and implement the database schema",
+                "status": "done",
+                "priority": "high",
+                "assignee": "David Kim",
+                "createdAt": "2023-12-22T11:00:00Z",
+                "updatedAt": "2024-01-08T12:30:00Z"
+              },
+              {
+                "id": "task-8",
+                "title": "Set up CI/CD pipeline",
+                "description": "Configure automated testing and deployment",
+                "status": "done",
+                "priority": "medium",
+                "assignee": "James Wilson",
+                "createdAt": "2023-12-25T14:00:00Z",
+                "updatedAt": "2024-01-07T09:15:00Z"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

app/dashboard/kanban/kanban.css

@@ -0,0 +1,95 @@
+/* Import kanban component styles */
+@import '../../../components/kanban/kanban.css';
+
+/* Kanban Page Specific Styles */
+.kanban-page {
+  @apply min-h-screen bg-background;
+  overflow: hidden;
+}
+
+.kanban-page .kanban-board {
+  height: calc(100vh - var(--header-height, 64px));
+  padding: 1rem;
+}
+
+/* Override scrollbar for kanban page */
+.kanban-page .kanban-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--background));
+}
+
+.kanban-page .kanban-scroll::-webkit-scrollbar {
+  height: 6px;
+}
+
+.kanban-page .kanban-scroll::-webkit-scrollbar-track {
+  background: hsl(var(--background));
+  border-radius: 3px;
+}
+
+.kanban-page .kanban-scroll::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted));
+  border-radius: 3px;
+}
+
+.kanban-page .kanban-scroll::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground));
+}
+
+/* Loading state */
+.kanban-loading {
+  @apply flex items-center justify-center h-full;
+}
+
+.kanban-loading-spinner {
+  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
+}
+
+/* Error state */
+.kanban-error {
+  @apply flex items-center justify-center h-full text-center;
+}
+
+.kanban-error-icon {
+  @apply w-8 h-8 text-red-600 mx-auto mb-2;
+}
+
+/* Responsive adjustments for kanban page */
+@media (max-width: 768px) {
+  .kanban-page .kanban-board {
+    padding: 0.5rem;
+    height: calc(100vh - var(--header-height, 64px) - 1rem);
+  }
+
+  .kanban-page .kanban-columns {
+    gap: 1rem;
+    padding: 0.5rem;
+  }
+
+  .kanban-page .kanban-column {
+    min-width: 280px;
+    max-width: 280px;
+  }
+}
+
+@media (max-width: 640px) {
+  .kanban-page .kanban-board {
+    height: calc(100vh - var(--header-height, 56px) - 0.5rem);
+  }
+
+  .kanban-page .kanban-column {
+    min-width: 260px;
+    max-width: 260px;
+  }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .kanban-page {
+    background-color: hsl(var(--background));
+  }
+
+  .kanban-page .task-card:hover {
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+  }
+}

app/dashboard/kanban/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import * as React from 'react'
+import { KanbanBoard } from '@/components/kanban'
+import { KanbanData, KanbanBoard as KanbanBoardType } from '@/types/kanban'
+import data from '../data.json'
+import './kanban.css'
+
+// This would normally come from metadata API route, but we'll set it here for now
+const pageMetadata = {
+  title: 'Kanban Board - CodeGuide',
+  description: 'Manage your tasks and projects with our interactive Kanban board'
+}
+
+export default function KanbanPage() {
+  const [boardData, setBoardData] = React.useState<KanbanBoardType | null>(null)
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    // Set document title
+    document.title = pageMetadata.title
+
+    try {
+      const kanbanData = data.kanban as KanbanData
+      if (kanbanData.boards && kanbanData.boards.length > 0) {
+        setBoardData(kanbanData.boards[0])
+      } else {
+        setError('No kanban boards found')
+      }
+    } catch (err) {
+      setError('Failed to load kanban data')
+      console.error('Error loading kanban data:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  const handleBoardChange = React.useCallback((updatedBoard: KanbanBoardType) => {
+    setBoardData(updatedBoard)
+    // In a real app, you might want to save to an API here
+    console.log('Board updated:', updatedBoard)
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full min-h-[400px]">
+        <div className="text-center space-y-4">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto" />
+          <p className="text-muted-foreground">Loading kanban board...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !boardData) {
+    return (
+      <div className="flex items-center justify-center h-full min-h-[400px]">
+        <div className="text-center space-y-4">
+          <div className="rounded-full bg-red-100 p-3 w-16 h-16 flex items-center justify-center mx-auto">
+            <svg
+              className="w-8 h-8 text-red-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold">Failed to load kanban board</h3>
+            <p className="text-muted-foreground mt-1">
+              {error || 'An unexpected error occurred'}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col kanban-page">
+      <KanbanBoard 
+        initialBoard={boardData}
+        onBoardChange={handleBoardChange}
+        className="flex-1"
+      />
+    </div>
+  )
+}

components/app-sidebar.tsx

@@ -19,6 +19,7 @@ import {
   IconSearch,
   IconSettings,
   IconUsers,
+  IconLayoutKanban,
 } from "@tabler/icons-react"
 
 import { NavDocuments } from "@/components/nav-documents"
@@ -39,9 +40,14 @@ const staticData = {
   navMain: [
     {
       title: "Dashboard",
-      url: "#",
+      url: "/dashboard",
       icon: IconDashboard,
     },
+    {
+      title: "Kanban Board",
+      url: "/dashboard/kanban",
+      icon: IconLayoutKanban,
+    },
     {
       title: "Lifecycle",
       url: "#",