jettypod 4.4.74 → 4.4.75

package/apps/dashboard/components/KanbanBoard.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import type { WorkItem, InFlightItem, KanbanGroup } from '@/lib/db';
 import { EditableTitle } from './EditableTitle';
 import { CardMenu } from './CardMenu';
+import { DragProvider, useDragContext } from './DragContext';
+import { DraggableCard } from './DraggableCard';
+import { DropZone } from './DropZone';
 
 const typeIcons: Record<string, string> = {
   epic: '🎯',
@@ -29,20 +32,74 @@ function getModeLabel(item: WorkItem): string {
   return base;
 }
 
+// Copy icon SVG
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+    </svg>
+  );
+}
+
+// Checkmark icon SVG
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}
+
+// Copyable work item ID component
+function CopyableId({ id, title, type }: { id: number; title: string; type: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent card navigation
+    // Template literal preserves special characters and handles empty titles correctly
+    const text = `#${id} ${title} (${type})`;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Silently fail - clipboard API unavailable or permission denied
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="flex items-center gap-1 text-xs text-zinc-400 font-mono px-1 py-0.5 -mx-1 rounded cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-700 active:scale-95 transition-all"
+      title={`Copy: #${id} ${title} (${type})`}
+    >
+      <span>#{id}</span>
+      {copied ? (
+        <CheckIcon className="w-3 h-3 text-green-500" />
+      ) : (
+        <CopyIcon className="w-3 h-3 text-zinc-300 dark:text-zinc-500" />
+      )}
+    </button>
+  );
+}
+
 interface KanbanCardProps {
   item: WorkItem;
   epicTitle?: string | null;
   showEpic?: boolean;
+  isInFlight?: boolean;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
   onStatusChange?: (id: number, newStatus: string) => Promise<void>;
 }
 
-function KanbanCard({ item, epicTitle, showEpic = false, onTitleSave, onStatusChange }: KanbanCardProps) {
+function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange }: KanbanCardProps) {
   const [expanded, setExpanded] = useState(false);
   const router = useRouter();
 
-  // Calculate incomplete chores - only show section if there are incomplete ones
-  const incompleteChores = item.chores?.filter(c => c.status !== 'done') || [];
+  // Calculate chores for expandable section
+  const allChores = item.chores || [];
+  const incompleteChores = allChores.filter(c => c.status !== 'done');
+  const hasChores = allChores.length > 0;
   const hasIncompleteChores = incompleteChores.length > 0;
 
   const handleCardClick = () => {
@@ -63,13 +120,19 @@ function KanbanCard({ item, epicTitle, showEpic = false, onTitleSave, onStatusCh
 
   const isDone = item.status === 'done';
 
+  const getCardStyles = () => {
+    if (isDone) {
+      return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 hover:border-green-300 dark:hover:border-green-700';
+    }
+    if (isInFlight) {
+      return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 hover:border-blue-300 dark:hover:border-blue-700';
+    }
+    return 'bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600';
+  };
+
   return (
     <div
-      className={`rounded-lg border hover:shadow-sm transition-all ${
-        isDone
-          ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 hover:border-green-300 dark:hover:border-green-700'
-          : 'bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
-      }`}
+      className={`rounded-lg border hover:shadow-sm transition-all ${getCardStyles()}`}
       data-testid={`kanban-card-${item.id}`}>
       <div
         onClick={handleCardClick}
@@ -78,19 +141,32 @@ function KanbanCard({ item, epicTitle, showEpic = false, onTitleSave, onStatusCh
         <div className="flex items-start gap-2">
           <span className="text-sm flex-shrink-0">{typeIcons[item.type] || '📄'}</span>
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1 flex-wrap">
-              <span className="text-xs text-zinc-400 font-mono">#{item.id}</span>
-              {item.mode && modeLabels[item.mode] && (
-                <span className={`text-xs px-1.5 py-0.5 rounded ${modeLabels[item.mode].color}`}>
-                  {getModeLabel(item)}
+            {isDone ? (
+              /* Compact layout for done cards: ID and title inline, no mode badge */
+              <div className="flex items-start gap-2">
+                <CopyableId id={item.id} title={item.title} type={item.type} />
+                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                  {item.title || <span className="text-zinc-400 italic">(Untitled)</span>}
                 </span>
-              )}
-            </div>
-            <EditableTitle
-              title={item.title}
-              itemId={item.id}
-              onSave={handleTitleSave}
-            />
+              </div>
+            ) : (
+              /* Standard layout: ID + mode badge on line 1, title below */
+              <>
+                <div className="flex items-center gap-2 mb-1 flex-wrap">
+                  <CopyableId id={item.id} title={item.title} type={item.type} />
+                  {item.mode && modeLabels[item.mode] && (
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${modeLabels[item.mode].color}`}>
+                      {getModeLabel(item)}
+                    </span>
+                  )}
+                </div>
+                <EditableTitle
+                  title={item.title}
+                  itemId={item.id}
+                  onSave={handleTitleSave}
+                />
+              </>
+            )}
             {showEpic && epicTitle && (
               <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-1.5 flex items-center gap-1">
                 <span>🎯</span>
@@ -107,19 +183,28 @@ function KanbanCard({ item, epicTitle, showEpic = false, onTitleSave, onStatusCh
           )}
         </div>
       </div>
-      {hasIncompleteChores && (
-        <div className="border-t border-zinc-200 dark:border-zinc-700">
+      {/* Show expandable chores section for features with chores */}
+      {hasChores && (
+        <div className={`border-t ${isDone ? 'border-green-200 dark:border-green-800' : 'border-zinc-200 dark:border-zinc-700'}`}>
           <button
             onClick={() => setExpanded(!expanded)}
-            className="w-full px-3 py-1.5 flex items-center gap-1.5 text-xs text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors"
+            className={`w-full px-3 py-1.5 flex items-center gap-1.5 text-xs transition-colors ${
+              isDone
+                ? 'text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30'
+                : 'text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/50'
+            }`}
           >
             <span>{expanded ? '▼' : '▶'}</span>
             <span>🔧</span>
-            <span>{incompleteChores.length} chore{incompleteChores.length !== 1 ? 's' : ''} left</span>
+            <span>
+              {isDone
+                ? `${allChores.length === 0 ? 'no' : allChores.length} chore${allChores.length !== 1 ? 's' : ''}`
+                : `${incompleteChores.length === 0 ? 'no' : incompleteChores.length}${item.mode ? ` ${item.mode} mode` : ''} chore${incompleteChores.length !== 1 ? 's' : ''} left`}
+            </span>
           </button>
           {expanded && (
             <div className="px-3 pb-2 space-y-1">
-              {item.chores!.map((chore) => {
+              {allChores.map((chore) => {
                 const isComplete = chore.status === 'done';
                 return (
                   <Link
@@ -133,14 +218,14 @@ function KanbanCard({ item, epicTitle, showEpic = false, onTitleSave, onStatusCh
                   >
                     <div className="flex items-center gap-2">
                       <span className={`font-mono ${isComplete ? 'text-zinc-500' : 'text-zinc-400'}`}>#{chore.id}</span>
-                      {chore.mode && modeLabels[chore.mode] && (
+                      {!isDone && chore.mode && modeLabels[chore.mode] && (
                         <span className={`px-1 py-0.5 rounded text-[10px] ${modeLabels[chore.mode].color}`}>
                           {getModeLabel(chore)}
                         </span>
                       )}
                       <span className={`truncate ${
                         isComplete
-                          ? 'text-zinc-500 line-through'
+                          ? 'text-zinc-500'
                           : 'text-zinc-700 dark:text-zinc-300'
                       }`}>
                         {chore.title || <span className="text-zinc-400 italic">(Untitled)</span>}
@@ -162,15 +247,110 @@ interface EpicGroupProps {
   epicTitle: string | null;
   items: WorkItem[];
   isInFlight?: boolean;
+  isDraggable?: boolean;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
   onStatusChange?: (id: number, newStatus: string) => Promise<void>;
+  onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
+  onOrderChange?: (id: number, newOrder: number) => Promise<void>;
 }
 
-function EpicGroup({ epicId, epicTitle, items, isInFlight = false, onTitleSave, onStatusChange }: EpicGroupProps) {
-  if (items.length === 0) return null;
+function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onEpicAssign, onOrderChange }: EpicGroupProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { isDragging, draggedItem, activeEpicZone, registerEpicDropZone, unregisterEpicDropZone } = useDragContext();
+
+  // Handle reorder within this epic - calculate new display_order based on pointer Y
+  const handleEpicReorder = useCallback(async (itemId: number, pointerY: number) => {
+    if (!onOrderChange || !containerRef.current) return;
+
+    // Find all card elements in this epic container
+    const cardElements = containerRef.current.querySelectorAll('[data-item-id]');
+    const cardPositions: { id: number; midY: number }[] = [];
+
+    cardElements.forEach((el) => {
+      const id = parseInt(el.getAttribute('data-item-id') || '0', 10);
+      if (id !== itemId) {
+        const rect = el.getBoundingClientRect();
+        cardPositions.push({
+          id,
+          midY: (rect.top + rect.bottom) / 2,
+        });
+      }
+    });
+
+    // Skip reorder if this is the only item in the epic (no other cards to reorder against)
+    if (cardPositions.length === 0) {
+      return;
+    }
+
+    // Sort by Y position
+    cardPositions.sort((a, b) => a.midY - b.midY);
+
+    // Find insertion index based on pointer Y
+    let insertIndex = cardPositions.length;
+    for (let i = 0; i < cardPositions.length; i++) {
+      if (pointerY < cardPositions[i].midY) {
+        insertIndex = i;
+        break;
+      }
+    }
+
+    // Calculate new display_order using index * 10
+    const newOrder = insertIndex * 10;
+
+    try {
+      await onOrderChange(itemId, newOrder);
+    } catch (error) {
+      // Log error and notify user - items remain in original order since state wasn't updated
+      console.error('Failed to reorder item:', error);
+      // Show user-friendly error notification
+      alert('Failed to reorder item. Please try again.');
+    }
+  }, [onOrderChange]);
+
+  // Register as epic drop zone
+  useEffect(() => {
+    if (!containerRef.current || !onEpicAssign || epicId === null) return;
+
+    const zoneId = `epic-${epicId}`;
+    registerEpicDropZone(zoneId, {
+      epicId,
+      element: containerRef.current,
+      onEpicAssign,
+      onReorder: onOrderChange ? handleEpicReorder : undefined,
+    });
+
+    return () => {
+      unregisterEpicDropZone(zoneId);
+    };
+  }, [epicId, onEpicAssign, onOrderChange, handleEpicReorder, registerEpicDropZone, unregisterEpicDropZone]);
+
+  // Check if this epic zone is the active drop target
+  const isActiveTarget = activeEpicZone === `epic-${epicId}`;
+
+  // Check if the dragged item is from a different epic or same epic
+  const draggedItemEpicId = draggedItem ? (draggedItem.parent_id || draggedItem.epic_id) : null;
+  const isDifferentEpic = isDragging && draggedItem && draggedItemEpicId !== epicId;
+  const isSameEpic = isDragging && draggedItem && draggedItemEpicId === epicId;
+
+  // Show highlight when dragging an item from different epic over this group (indigo)
+  const showHighlight = isActiveTarget && isDifferentEpic;
+  // Show reorder highlight when dragging within same epic (purple)
+  const showReorderHighlight = isActiveTarget && isSameEpic;
+
+  if (items.length === 0 && !showHighlight && !showReorderHighlight) return null;
 
   return (
-    <div className="mb-4">
+    <div
+      ref={containerRef}
+      className={`mb-4 p-2 -mx-2 rounded-lg transition-all ${
+        showHighlight
+          ? 'ring-2 ring-indigo-400 bg-indigo-100/50 dark:bg-indigo-900/30'
+          : showReorderHighlight
+          ? 'ring-2 ring-purple-400 bg-purple-100/50 dark:bg-purple-900/30'
+          : ''
+      }`}
+      data-epic-id={epicId}
+    >
       {epicTitle && (
         <div className="flex items-center gap-2 mb-2">
           <Link
@@ -185,11 +365,23 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, onTitleSave,
               in flight
             </span>
           )}
+          {showHighlight && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300">
+              drop to assign
+            </span>
+          )}
+          {showReorderHighlight && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
+              reorder
+            </span>
+          )}
         </div>
       )}
       <div className="space-y-2">
         {items.map((item) => (
-          <KanbanCard key={item.id} item={item} onTitleSave={onTitleSave} onStatusChange={onStatusChange} />
+          <DraggableCard key={item.id} item={item} disabled={!isDraggable}>
+            <KanbanCard item={item} onTitleSave={onTitleSave} onStatusChange={onStatusChange} />
+          </DraggableCard>
         ))}
       </div>
     </div>
@@ -205,15 +397,15 @@ interface KanbanColumnProps {
 function KanbanColumn({ title, children, count }: KanbanColumnProps) {
   const testId = title.toLowerCase().replace(/\s+/g, '-') + '-column';
   return (
-    <div className="flex-1 min-w-[300px] max-w-[400px]" data-testid={testId}>
-      <div className="bg-zinc-100 dark:bg-zinc-900 rounded-lg p-3 h-full">
-        <div className="flex items-center justify-between mb-3">
+    <div className="flex-1 min-w-[300px] max-w-[400px] flex flex-col min-h-0" data-testid={testId}>
+      <div className="bg-zinc-100 dark:bg-zinc-900 rounded-lg p-3 flex flex-col flex-1 min-h-0">
+        <div className="flex items-center justify-between mb-3 flex-shrink-0">
           <h2 className="font-semibold text-zinc-900 dark:text-zinc-100">{title}</h2>
           <span className="text-xs bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 px-2 py-0.5 rounded-full">
             {count}
           </span>
         </div>
-        <div className="overflow-y-auto max-h-[calc(100vh-180px)]">
+        <div className="overflow-y-auto flex-1 min-h-0">
           {children}
         </div>
       </div>
@@ -227,11 +419,14 @@ interface KanbanBoardProps {
   done: Map<string, KanbanGroup>;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
   onStatusChange?: (id: number, newStatus: string) => Promise<void>;
+  onOrderChange?: (id: number, newOrder: number) => Promise<void>;
+  onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange }: KanbanBoardProps) {
+export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onOrderChange, onEpicAssign }: KanbanBoardProps) {
   const backlogCount = inFlight.length + Array.from(backlog.values()).reduce((sum, g) => sum + g.items.length, 0);
   const doneCount = Array.from(done.values()).reduce((sum, g) => sum + g.items.length, 0);
+  const backlogContainerRef = useRef<HTMLDivElement>(null);
 
   // Build a set of epic IDs that have in-flight items
   const inFlightEpicIds = new Set<number>();
@@ -242,72 +437,178 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
     }
   }
 
+  // Get flat list of all backlog items for reordering
+  const getAllBacklogItems = useCallback((): WorkItem[] => {
+    const items: WorkItem[] = [];
+    for (const group of backlog.values()) {
+      items.push(...group.items);
+    }
+    return items;
+  }, [backlog]);
+
+  // Handle reorder within backlog - calculate new display_order based on pointer Y
+  const handleBacklogReorder = useCallback(async (itemId: number, pointerY: number) => {
+    if (!onOrderChange || !backlogContainerRef.current) return;
+
+    const items = getAllBacklogItems();
+    const draggedItem = items.find(item => item.id === itemId);
+    if (!draggedItem) return;
+
+    // Find all card elements in the backlog container
+    const cardElements = backlogContainerRef.current.querySelectorAll('[data-item-id]');
+    const cardPositions: { id: number; top: number; bottom: number; midY: number }[] = [];
+
+    cardElements.forEach((el) => {
+      const id = parseInt(el.getAttribute('data-item-id') || '0', 10);
+      if (id !== itemId) {
+        const rect = el.getBoundingClientRect();
+        cardPositions.push({
+          id,
+          top: rect.top,
+          bottom: rect.bottom,
+          midY: (rect.top + rect.bottom) / 2,
+        });
+      }
+    });
+
+    // Sort by Y position
+    cardPositions.sort((a, b) => a.midY - b.midY);
+
+    // Find insertion index based on pointer Y
+    let insertIndex = cardPositions.length;
+    for (let i = 0; i < cardPositions.length; i++) {
+      if (pointerY < cardPositions[i].midY) {
+        insertIndex = i;
+        break;
+      }
+    }
+
+    // Calculate new display_order
+    // Use index * 10 to leave room for future insertions
+    const newOrder = insertIndex * 10;
+
+    await onOrderChange(itemId, newOrder);
+  }, [getAllBacklogItems, onOrderChange]);
+
   return (
-    <div className="flex gap-4 overflow-x-auto pb-4" data-testid="kanban-board">
+    <DragProvider>
+    <div className="flex gap-4 overflow-x-auto h-full" data-testid="kanban-board">
       {/* Backlog Column */}
       <KanbanColumn title="Backlog" count={backlogCount}>
-        {/* In Flight Section */}
-        {inFlight.length > 0 && (
-          <div className="mb-4" data-testid="in-flight-section">
-            <div className="flex items-center gap-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 mb-2">
-              <span>🔥</span>
-              <span>In Flight</span>
+        {/* In Flight Section - Drop Zone */}
+        <DropZone
+          targetStatus="in_progress"
+          onDrop={async (itemId, newStatus) => {
+            if (onStatusChange) await onStatusChange(itemId, newStatus);
+          }}
+          className="rounded-lg mb-4 p-2 -m-2"
+          highlightClassName="ring-2 ring-blue-400 bg-blue-100/50 dark:bg-blue-900/30"
+          data-testid="in-flight-drop-zone"
+        >
+          {inFlight.length > 0 ? (
+            <div data-testid="in-flight-section">
+              <div className="flex items-center gap-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 mb-2">
+                <span>🔥</span>
+                <span>In Flight</span>
+              </div>
+              <div className="space-y-2">
+                {inFlight.map((item) => (
+                  <DraggableCard key={item.id} item={item}>
+                    <KanbanCard
+                      item={item}
+                      epicTitle={item.epicTitle}
+                      showEpic={true}
+                      isInFlight={true}
+                      onTitleSave={onTitleSave}
+                      onStatusChange={onStatusChange}
+                    />
+                  </DraggableCard>
+                ))}
+              </div>
             </div>
-            <div className="space-y-2">
-              {inFlight.map((item) => (
-                <KanbanCard
-                  key={item.id}
-                  item={item}
-                  epicTitle={item.epicTitle}
-                  showEpic={true}
-                  onTitleSave={onTitleSave}
-                  onStatusChange={onStatusChange}
-                />
-              ))}
+          ) : (
+            <div className="flex items-center gap-1.5 text-xs font-medium text-zinc-400 dark:text-zinc-500 py-2">
+              <span>🔥</span>
+              <span>Drop here to start work</span>
             </div>
-          </div>
-        )}
+          )}
+        </DropZone>
 
         {/* Divider if both sections have content */}
-        {inFlight.length > 0 && backlog.size > 0 && (
+        {(inFlight.length > 0 || backlog.size > 0) && (
           <hr className="border-zinc-300 dark:border-zinc-700 my-4" />
         )}
 
-        {/* Grouped Backlog Items */}
-        {Array.from(backlog.entries()).map(([key, group]) => (
-          <EpicGroup
-            key={key}
-            epicId={group.epicId}
-            epicTitle={group.epicTitle}
-            items={group.items}
-            isInFlight={group.epicId ? inFlightEpicIds.has(group.epicId) : false}
-            onTitleSave={onTitleSave}
-            onStatusChange={onStatusChange}
-          />
-        ))}
+        {/* Backlog Section - Drop Zone with Reordering */}
+        <DropZone
+          targetStatus="backlog"
+          onDrop={async (itemId, newStatus) => {
+            if (onStatusChange) await onStatusChange(itemId, newStatus);
+          }}
+          onReorder={handleBacklogReorder}
+          allowReorder={true}
+          className="rounded-lg p-2 -m-2 min-h-[100px]"
+          highlightClassName="ring-2 ring-amber-400 bg-amber-100/50 dark:bg-amber-900/30"
+          reorderHighlightClassName="ring-2 ring-purple-400 bg-purple-100/50 dark:bg-purple-900/30"
+          data-testid="backlog-drop-zone"
+        >
+          <div ref={backlogContainerRef}>
+            {/* Grouped Backlog Items */}
+            {Array.from(backlog.entries()).map(([key, group]) => (
+              <EpicGroup
+                key={key}
+                epicId={group.epicId}
+                epicTitle={group.epicTitle}
+                items={group.items}
+                isInFlight={group.epicId ? inFlightEpicIds.has(group.epicId) : false}
+                onTitleSave={onTitleSave}
+                onStatusChange={onStatusChange}
+                onEpicAssign={onEpicAssign}
+                onOrderChange={onOrderChange}
+              />
+            ))}
+
+            {backlog.size === 0 && (
+              <p className="text-sm text-zinc-500 text-center py-4">Drop items here for backlog</p>
+            )}
+          </div>
+        </DropZone>
 
-        {backlogCount === 0 && (
+        {backlogCount === 0 && inFlight.length === 0 && (
           <p className="text-sm text-zinc-500 text-center py-4">No items in backlog</p>
         )}
       </KanbanColumn>
 
       {/* Done Column */}
       <KanbanColumn title="Done" count={doneCount}>
-        {Array.from(done.entries()).map(([key, group]) => (
-          <EpicGroup
-            key={key}
-            epicId={group.epicId}
-            epicTitle={group.epicTitle}
-            items={group.items}
-            onTitleSave={onTitleSave}
-            onStatusChange={onStatusChange}
-          />
-        ))}
+        <DropZone
+          targetStatus="done"
+          onDrop={async (itemId, newStatus) => {
+            if (onStatusChange) await onStatusChange(itemId, newStatus);
+          }}
+          className="rounded-lg p-2 -m-2 min-h-[100px]"
+          highlightClassName="ring-2 ring-green-400 bg-green-100/50 dark:bg-green-900/30"
+          data-testid="done-drop-zone"
+        >
+          {Array.from(done.entries()).map(([key, group]) => (
+            <EpicGroup
+              key={key}
+              epicId={group.epicId}
+              epicTitle={group.epicTitle}
+              items={group.items}
+              isDraggable={false}
+              onTitleSave={onTitleSave}
+              onStatusChange={onStatusChange}
+              onEpicAssign={onEpicAssign}
+            />
+          ))}
 
-        {doneCount === 0 && (
-          <p className="text-sm text-zinc-500 text-center py-4">No completed items</p>
-        )}
+          {doneCount === 0 && (
+            <p className="text-sm text-zinc-500 text-center py-4">Drop here to mark complete</p>
+          )}
+        </DropZone>
       </KanbanColumn>
     </div>
+    </DragProvider>
   );
 }