Initial commit

components/features/kanban/KanbanBoard.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { KanbanColumn } from './KanbanColumn';
+import type { KanbanBoard as KanbanBoardType } from '@/types/kanban';
+
+interface KanbanBoardProps {
+  board: KanbanBoardType;
+}
+
+export function KanbanBoard({ board }: KanbanBoardProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold">{board.projectName}</h2>
+        <p className="text-sm text-muted-foreground">
+          Total tasks: {board.columns.reduce((acc, col) => acc + col.tasks.length, 0)}
+        </p>
+      </div>
+      <div className="flex gap-4 overflow-x-auto pb-4">
+        {board.columns.map((column) => (
+          <KanbanColumn key={column.status} column={column} />
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Note: Drag-and-drop functionality will be implemented in Sprint 2
+      </p>
+    </div>
+  );
+}

components/features/kanban/KanbanColumn.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { TaskCard } from './TaskCard';
+import type { KanbanColumn as KanbanColumnType } from '@/types/kanban';
+
+interface KanbanColumnProps {
+  column: KanbanColumnType;
+}
+
+export function KanbanColumn({ column }: KanbanColumnProps) {
+  const statusColors = {
+    ToDo: 'border-gray-300',
+    InProgress: 'border-blue-300',
+    InReview: 'border-yellow-300',
+    Done: 'border-green-300',
+    Blocked: 'border-red-300',
+  };
+
+  return (
+    <div className="flex min-w-[300px] flex-col rounded-lg border-2 bg-muted/50 p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-semibold">{column.title}</h3>
+        <span className="rounded-full bg-background px-2 py-0.5 text-xs font-medium">
+          {column.tasks.length}
+        </span>
+      </div>
+      <div className="flex-1 space-y-3">
+        {column.tasks.map((task) => (
+          <TaskCard key={task.id} task={task} />
+        ))}
+        {column.tasks.length === 0 && (
+          <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25">
+            <p className="text-sm text-muted-foreground">No tasks</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

components/features/kanban/TaskCard.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Clock, User } from 'lucide-react';
+import type { TaskCard as TaskCardType } from '@/types/kanban';
+
+interface TaskCardProps {
+  task: TaskCardType;
+  isDragging?: boolean;
+}
+
+export function TaskCard({ task, isDragging = false }: TaskCardProps) {
+  const priorityColors = {
+    Low: 'bg-blue-100 text-blue-700',
+    Medium: 'bg-yellow-100 text-yellow-700',
+    High: 'bg-orange-100 text-orange-700',
+    Urgent: 'bg-red-100 text-red-700',
+  };
+
+  return (
+    <Card
+      className={`cursor-move transition-shadow hover:shadow-md ${
+        isDragging ? 'opacity-50 shadow-lg' : ''
+      }`}
+    >
+      <CardHeader className="p-4 pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <h4 className="text-sm font-medium leading-tight">{task.title}</h4>
+          <span
+            className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+              priorityColors[task.priority as keyof typeof priorityColors] ||
+              priorityColors.Medium
+            }`}
+          >
+            {task.priority}
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 pt-0">
+        {task.description && (
+          <p className="mb-3 line-clamp-2 text-xs text-muted-foreground">
+            {task.description}
+          </p>
+        )}
+        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+          {task.estimatedHours && (
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              <span>{task.estimatedHours}h</span>
+            </div>
+          )}
+          {task.assigneeId && (
+            <div className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              <span>Assigned</span>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}