@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/kanban/kanban.tsx

@@ -1,1689 +0,0 @@
-"use client"
-
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
-import { motion, AnimatePresence, Reorder, useDragControls } from 'framer-motion'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Button } from '../ui/button'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
-import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, AvatarGroup as MoonUIAvatarGroupPro } from '../ui/avatar'
-import { Input } from '../ui/input'
-import { Textarea } from '../ui/textarea'
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../ui/dropdown-menu'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
-import { ScrollArea } from '../ui/scroll-area'
-import { Skeleton } from '../ui/skeleton'
-import { Switch } from '../ui/switch'
-import { Label } from '../ui/label'
-import { Progress } from '../ui/progress'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
-import { 
-  Plus, 
-  MoreHorizontal, 
-  User, 
-  Calendar, 
-  MessageCircle, 
-  Paperclip,
-  Edit,
-  Trash2,
-  GripVertical,
-  Lock,
-  Sparkles,
-  Search,
-  Filter,
-  Download,
-  Upload,
-  Copy,
-  Move,
-  Archive,
-  Eye,
-  EyeOff,
-  ChevronDown,
-  ChevronRight,
-  X,
-  Check,
-  Clock,
-  AlertCircle,
-  Tag,
-  Users,
-  FileText,
-  Image,
-  Link2,
-  Activity,
-  Settings,
-  Palette,
-  Star,
-  Flag,
-  CheckSquare,
-  Square,
-  MoreVertical,
-  ArrowUpDown,
-  ArrowUp,
-  ArrowDown,
-  Zap,
-  Timer
-} from 'lucide-react'
-import { cn } from '../../lib/utils'
-import { useSubscription } from '../../hooks/use-subscription'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../ui/dialog'
-import { ColorPicker } from '../ui/color-picker'
-import { CardDetailModal } from './card-detail-modal'
-import { AddCardModal } from './add-card-modal'
-import { format } from 'date-fns'
-import type { 
-  KanbanAssignee, 
-  KanbanLabel, 
-  KanbanChecklist, 
-  KanbanActivity, 
-  KanbanCard, 
-  KanbanColumn, 
-  KanbanFilter, 
-  KanbanProps 
-} from './types'
-import { useToast } from '../../hooks/use-toast'
-
-
-// Constants
-const PRIORITY_CONFIG = {
-  low: { 
-    color: 'bg-green-100 text-green-800 border-green-200', 
-    dot: 'bg-green-500',
-    icon: ArrowDown 
-  },
-  medium: { 
-    color: 'bg-yellow-100 text-yellow-800 border-yellow-200', 
-    dot: 'bg-yellow-500',
-    icon: ArrowUp 
-  },
-  high: { 
-    color: 'bg-orange-100 text-orange-800 border-orange-200', 
-    dot: 'bg-orange-500',
-    icon: Zap 
-  },
-  urgent: { 
-    color: 'bg-red-100 text-red-800 border-red-200', 
-    dot: 'bg-red-500',
-    icon: AlertCircle 
-  }
-}
-
-const COLUMN_TEMPLATES = {
-  todo: { title: 'To Do', color: '#6B7280' },
-  inProgress: { title: 'In Progress', color: '#3B82F6' },
-  done: { title: 'Done', color: '#10B981' }
-}
-
-// Helper functions
-const formatDate = (date: Date) => {
-  return date.toLocaleDateString('en-US', { 
-    month: 'short', 
-    day: 'numeric',
-    year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
-  })
-}
-
-const isOverdue = (dueDate: Date) => {
-  return dueDate < new Date()
-}
-
-const getInitials = (name: string) => {
-  return name.split(' ').map(n => n[0]).join('').toUpperCase()
-}
-
-const formatFileSize = (bytes: number) => {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-// Custom hook for auto-scroll while dragging
-const useAutoScroll = () => {
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null)
-
-  const startAutoScroll = useCallback((direction: 'left' | 'right') => {
-    if (scrollIntervalRef.current) return
-
-    scrollIntervalRef.current = setInterval(() => {
-      if (scrollRef.current) {
-        const scrollAmount = direction === 'left' ? -10 : 10
-        scrollRef.current.scrollLeft += scrollAmount
-      }
-    }, 20)
-  }, [])
-
-  const stopAutoScroll = useCallback(() => {
-    if (scrollIntervalRef.current) {
-      clearInterval(scrollIntervalRef.current)
-      scrollIntervalRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    return () => stopAutoScroll()
-  }, [stopAutoScroll])
-
-  return { scrollRef, startAutoScroll, stopAutoScroll }
-}
-
-// Card component
-const KanbanCardComponent = ({
-  card,
-  column,
-  isDragging,
-  onEdit,
-  onDelete,
-  onClick,
-  showDetails,
-  disabled,
-  renderCard,
-  renderCardPreview,
-  renderCardBadge,
-  renderCardActions,
-  cardCompactMode,
-  cardShowCoverImage,
-  cardShowAssignees,
-  cardShowLabels,
-  cardShowProgress,
-  cardDateFormat,
-  cardMaxAssigneesToShow,
-  provided,
-  enableAnimations,
-  animationDuration,
-  cardVariant
-}: {
-  card: KanbanCard
-  column: KanbanColumn
-  isDragging: boolean
-  onEdit?: (e: React.MouseEvent) => void
-  onDelete?: (e: React.MouseEvent) => void
-  onClick?: () => void
-  showDetails: boolean
-  disabled: boolean
-  renderCard?: (card: KanbanCard, column: KanbanColumn, provided: any) => React.ReactNode
-  renderCardPreview?: (card: KanbanCard) => React.ReactNode
-  renderCardBadge?: (card: KanbanCard) => React.ReactNode
-  renderCardActions?: (card: KanbanCard) => React.ReactNode
-  cardCompactMode?: boolean
-  cardShowCoverImage?: boolean
-  cardShowAssignees?: boolean
-  cardShowLabels?: boolean
-  cardShowProgress?: boolean
-  cardDateFormat?: string
-  cardMaxAssigneesToShow?: number
-  provided?: any
-  enableAnimations?: boolean
-  animationDuration?: number
-  cardVariant?: 'default' | 'bordered' | 'elevated' | 'flat'
-}) => {
-  const [isEditingTitle, setIsEditingTitle] = useState(false)
-  const [title, setTitle] = useState(card.title)
-  const dragControls = useDragControls()
-  
-  // Default values
-  const animationsEnabled = enableAnimations ?? true
-  const animDuration = animationDuration ?? 0.2
-  const variant = cardVariant ?? 'default'
-
-  const completedChecklistItems = card.checklist?.items.filter(item => item.completed).length || 0
-  const totalChecklistItems = card.checklist?.items.length || 0
-  const checklistProgress = totalChecklistItems > 0 ? (completedChecklistItems / totalChecklistItems) * 100 : 0
-
-  // If custom render function is provided, use it
-  if (renderCard) {
-    return renderCard(card, column, provided || {})
-  }
-
-  return (
-    <motion.div
-      layout
-      initial={{ opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? 20 : 0 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? -20 : 0 }}
-      whileHover={animationsEnabled ? { scale: 1.02 } : {}}
-      whileDrag={animationsEnabled ? { scale: 1.05, rotate: 3 } : {}}
-      transition={{ duration: animationsEnabled ? animDuration : 0 }}
-      className={cn(
-        "relative group cursor-pointer select-none",
-        isDragging && "z-50"
-      )}
-    >
-      <Card 
-        className={cn(
-          "border transition-all duration-200",
-          variant === 'bordered' && "border-2",
-          variant === 'elevated' && "shadow-lg hover:shadow-xl",
-          variant === 'flat' && "border-0 bg-muted/30",
-          variant === 'default' && "hover:shadow-md",
-          isDragging && "shadow-2xl ring-2 ring-primary ring-offset-2",
-          disabled && "cursor-not-allowed opacity-50"
-        )}
-        onClick={onClick}
-      >
-        {/* Drag handle */}
-        <div 
-          className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-primary/20 to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity cursor-move"
-          onPointerDown={(e) => dragControls.start(e)}
-        />
-
-        {/* Cover image */}
-        {cardShowCoverImage && card.coverImage && (
-          <div className="relative h-32 -mx-px -mt-px rounded-t-lg overflow-hidden">
-            <img 
-              src={card.coverImage} 
-              alt=""
-              className="w-full h-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-          </div>
-        )}
-
-        <CardContent className="p-3">
-          {/* Labels */}
-          {cardShowLabels && card.labels && card.labels.length > 0 && (
-            <div className="flex flex-wrap gap-1 mb-2">
-              {card.labels.map((label) => (
-                <div
-                  key={label.id}
-                  className="h-2 w-12 rounded-full"
-                  style={{ backgroundColor: label.color }}
-                  title={label.name}
-                />
-              ))}
-            </div>
-          )}
-
-          {/* Title and actions */}
-          <div className="flex items-start justify-between gap-2 mb-2">
-            <div className="flex-1">
-              {isEditingTitle ? (
-                <Input
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  onBlur={() => setIsEditingTitle(false)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      setIsEditingTitle(false)
-                      // Call update handler
-                    }
-                    if (e.key === 'Escape') {
-                      setTitle(card.title)
-                      setIsEditingTitle(false)
-                    }
-                  }}
-                  className="h-6 px-1 py-0 text-sm font-medium"
-                  autoFocus
-                  onClick={(e) => e.stopPropagation()}
-                />
-              ) : (
-                <h4 className="font-medium text-sm line-clamp-2">{card.title}</h4>
-              )}
-            </div>
-
-            {/* Quick actions */}
-            {renderCardActions ? (
-              <div className="opacity-0 group-hover:opacity-100 transition-opacity">
-                {renderCardActions(card)}
-              </div>
-            ) : (
-              <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-6 w-6 p-0"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <MoreVertical className="h-3 w-3" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-48">
-                    <DropdownMenuItem onClick={onEdit}>
-                      <Edit className="mr-2 h-4 w-4" />
-                      Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <Copy className="mr-2 h-4 w-4" />
-                      Duplicate
-                    </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Move className="mr-2 h-4 w-4" />
-                    Move
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Archive className="mr-2 h-4 w-4" />
-                    Archive
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem 
-                    onClick={onDelete}
-                    className="text-destructive"
-                  >
-                    <Trash2 className="mr-2 h-4 w-4" />
-                    Delete
-                  </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            )}
-          </div>
-
-          {/* Description */}
-          {!cardCompactMode && card.description && (
-            <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
-              {card.description}
-            </p>
-          )}
-
-          {/* Progress bar */}
-          {cardShowProgress && (card.progress !== undefined || card.checklist) && (
-            <div className="mb-3 px-2">
-              <div className="flex justify-between text-xs text-muted-foreground mb-1">
-                <span>Progress</span>
-                <span>{Math.round(card.progress || checklistProgress)}%</span>
-              </div>
-              <div className="flex items-center">
-                <Progress value={card.progress || checklistProgress} className="h-1.5 w-full" />
-              </div>
-            </div>
-          )}
-
-          {/* Tags */}
-          {!cardCompactMode && card.tags && card.tags.length > 0 && (
-            <div className="flex flex-wrap gap-1 mb-3">
-              {card.tags.map((tag, index) => (
-                <Badge key={index} variant="secondary" className="text-xs px-1.5 py-0">
-                  {tag}
-                </Badge>
-              ))}
-            </div>
-          )}
-
-          {/* Card details */}
-          {showDetails && (
-            <div className="flex items-center justify-between text-xs">
-              <div className="flex items-center gap-2">
-                {/* Priority */}
-                {card.priority && (
-                  <div className="flex items-center gap-1">
-                    <div className={cn("w-2 h-2 rounded-full", PRIORITY_CONFIG[card.priority].dot)} />
-                    <span className="capitalize">{card.priority}</span>
-                  </div>
-                )}
-
-                {/* Due date */}
-                {card.dueDate && (
-                  <div className={cn(
-                    "flex items-center gap-1",
-                    isOverdue(card.dueDate) && "text-destructive"
-                  )}>
-                    <Calendar className="h-3 w-3" />
-                    <span>{cardDateFormat ? format(card.dueDate, cardDateFormat) : formatDate(card.dueDate)}</span>
-                  </div>
-                )}
-
-                {/* Checklist */}
-                {card.checklist && (
-                  <div className="flex items-center gap-1">
-                    <CheckSquare className="h-3 w-3" />
-                    <span>{completedChecklistItems}/{totalChecklistItems}</span>
-                  </div>
-                )}
-              </div>
-              
-              <div className="flex items-center gap-2">
-                {/* Comments */}
-                {card.comments && card.comments > 0 && (
-                  <div className="flex items-center gap-1">
-                    <MessageCircle className="h-3 w-3" />
-                    <span>{card.comments}</span>
-                  </div>
-                )}
-
-                {/* Attachments */}
-                {card.attachments && card.attachments.length > 0 && (
-                  <div className="flex items-center gap-1">
-                    <Paperclip className="h-3 w-3" />
-                    <span>{card.attachments.length}</span>
-                  </div>
-                )}
-
-                {/* Assignees */}
-                {cardShowAssignees && card.assignees && card.assignees.length > 0 && (
-                  <MoonUIAvatarGroupPro max={cardMaxAssigneesToShow} size="xs">
-                    {card.assignees.map((assignee) => (
-                      <MoonUIAvatarPro key={assignee.id} className="h-5 w-5">
-                        <MoonUIAvatarImagePro src={assignee.avatar} />
-                        <MoonUIAvatarFallbackPro className="text-xs">
-                          {getInitials(assignee.name)}
-                        </MoonUIAvatarFallbackPro>
-                      </MoonUIAvatarPro>
-                    ))}
-                  </MoonUIAvatarGroupPro>
-                )}
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </motion.div>
-  )
-}
-
-// Main Kanban component
-export function Kanban({
-  columns: initialColumns,
-  onCardMove,
-  onCardClick,
-  onCardEdit,
-  onCardDelete,
-  onCardUpdate,
-  onAddCard,
-  onAddColumn,
-  onColumnUpdate,
-  onColumnDelete,
-  onBulkAction,
-  onExport,
-  className,
-  showAddColumn = true,
-  showCardDetails = true,
-  showFilters = true,
-  showSearch = true,
-  enableKeyboardShortcuts = true,
-  cardTemplates = [],
-  columnTemplates = [],
-  filters = [],
-  defaultFilter,
-  loading = false,
-  disabled = false,
-  labels = [],
-  users = [],
-  // Card Render Customization
-  renderCard,
-  renderCardPreview,
-  renderCardBadge,
-  renderCardActions,
-  cardCompactMode = false,
-  cardShowCoverImage = true,
-  cardShowAssignees = true,
-  cardShowLabels = true,
-  cardShowProgress = true,
-  cardDateFormat,
-  cardMaxAssigneesToShow = 3,
-  // Add Card Customization
-  renderAddCardButton,
-  renderAddCardForm,
-  addCardButtonText,
-  addCardPosition = 'bottom',
-  allowQuickAdd = true,
-  quickAddFields = ['title'],
-  validateCard,
-  onBeforeCardAdd,
-  // Column Customization
-  renderColumnHeader,
-  renderColumnFooter,
-  renderEmptyColumn,
-  columnMenuActions,
-  allowColumnReorder = true,
-  columnColorOptions,
-  columnDefaultColor = '#6B7280',
-  // Drag & Drop Enhancement
-  dragDisabled = false,
-  dropDisabled = false,
-  dragPreview = 'card',
-  renderDragPreview,
-  canDrop,
-  onDragStart,
-  onDragEnd,
-  // UI/UX Customization
-  theme = 'default',
-  cardVariant = 'default',
-  enableAnimations = true,
-  animationDuration = 0.2,
-  columnWidth,
-  columnGap = 24,
-  cardGap = 12,
-  showTooltips = true,
-  tooltipDelay = 500
-}: KanbanProps) {
-  // Check pro access
-  const { hasProAccess, isLoading } = useSubscription()
-  
-  if (!isLoading && !hasProAccess) {
-    return (
-      <Card className={cn("w-full", className)}>
-        <CardContent className="py-12 text-center">
-          <div className="max-w-md mx-auto space-y-4">
-            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
-              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
-              <p className="text-muted-foreground text-sm mb-4">
-                Kanban Board is available exclusively to MoonUI Pro subscribers.
-              </p>
-              <div className="flex gap-3 justify-center">
-                <a href="/pricing">
-                  <Button size="sm">
-                    <Sparkles className="mr-2 h-4 w-4" />
-                    Upgrade to Pro
-                  </Button>
-                </a>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  // State
-  const [columns, setColumns] = useState(initialColumns)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [activeFilter, setActiveFilter] = useState(defaultFilter)
-  const [selectedCards, setSelectedCards] = useState<string[]>([])
-  const [draggedCard, setDraggedCard] = useState<string | null>(null)
-  const [draggedOverColumn, setDraggedOverColumn] = useState<string | null>(null)
-  const [isCreatingColumn, setIsCreatingColumn] = useState(false)
-  const [newColumnTitle, setNewColumnTitle] = useState('')
-  
-  // Modal states
-  const [selectedCard, setSelectedCard] = useState<KanbanCard | null>(null)
-  const [addCardColumnId, setAddCardColumnId] = useState<string | null>(null)
-  const [editingColumnId, setEditingColumnId] = useState<string | null>(null)
-  const [editingColumnTitle, setEditingColumnTitle] = useState('')
-  const [wipLimitModalOpen, setWipLimitModalOpen] = useState(false)
-  const [wipLimitColumnId, setWipLimitColumnId] = useState<string | null>(null)
-  const [wipLimit, setWipLimit] = useState<number | undefined>()
-  const [colorPickerOpen, setColorPickerOpen] = useState(false)
-  const [colorPickerColumnId, setColorPickerColumnId] = useState<string | null>(null)
-  const [selectedColor, setSelectedColor] = useState('#6B7280')
-
-  const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll()
-  const { toast } = useToast()
-
-  // Update state when props change
-  useEffect(() => {
-    setColumns(initialColumns)
-  }, [initialColumns])
-
-  // Filter cards based on search and filters
-  const filteredColumns = useMemo(() => {
-    if (!searchQuery && !activeFilter) return columns
-
-    return columns.map(column => ({
-      ...column,
-      cards: column.cards.filter(card => {
-        // Search filter
-        if (searchQuery) {
-          const query = searchQuery.toLowerCase()
-          const matchesSearch = 
-            card.title.toLowerCase().includes(query) ||
-            card.description?.toLowerCase().includes(query) ||
-            card.tags?.some(tag => tag.toLowerCase().includes(query)) ||
-            card.assignees?.some(a => a.name.toLowerCase().includes(query))
-
-          if (!matchesSearch) return false
-        }
-
-        // Active filter
-        if (activeFilter) {
-          const filter = filters.find(f => f.id === activeFilter)
-          if (filter) {
-            // Apply filter logic here
-            // This is a simplified example
-            if (filter.assignees?.length && !card.assignees?.some(a => filter.assignees!.includes(a.id))) {
-              return false
-            }
-            if (filter.priority?.length && !filter.priority.includes(card.priority || '')) {
-              return false
-            }
-            if (filter.labels?.length && !card.labels?.some(l => filter.labels!.includes(l.id))) {
-              return false
-            }
-          }
-        }
-
-        return true
-      })
-    }))
-  }, [columns, searchQuery, activeFilter, filters])
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    if (!enableKeyboardShortcuts) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Cmd/Ctrl + F: Focus search
-      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
-        e.preventDefault()
-        document.getElementById('kanban-search')?.focus()
-      }
-
-      // Cmd/Ctrl + N: Add new card
-      if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
-        e.preventDefault()
-        // Add to first column by default
-        const firstColumn = columns[0]
-        if (firstColumn && onAddCard) {
-          onAddCard(firstColumn.id)
-        }
-      }
-
-      // Escape: Clear selection
-      if (e.key === 'Escape') {
-        setSelectedCards([])
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [enableKeyboardShortcuts, columns, onAddCard])
-
-  // Drag handlers
-  const handleDragStart = (card: KanbanCard, columnId: string) => {
-    if (disabled) return
-    if (typeof dragDisabled === 'function' && dragDisabled(card)) return
-    if (dragDisabled === true) return
-    
-    setDraggedCard(card.id)
-    const column = columns.find(col => col.id === columnId)
-    if (column && onDragStart) {
-      onDragStart(card, column)
-    }
-  }
-
-  const handleDragOver = (e: React.DragEvent, columnId: string) => {
-    if (disabled) return
-    const column = columns.find(col => col.id === columnId)
-    if (column && typeof dropDisabled === 'function' && dropDisabled(column)) return
-    if (dropDisabled === true) return
-    
-    e.preventDefault()
-    setDraggedOverColumn(columnId)
-
-    // Auto-scroll logic
-    const container = scrollRef.current
-    if (!container) return
-
-    const rect = container.getBoundingClientRect()
-    const x = e.clientX
-
-    if (x < rect.left + 100) {
-      startAutoScroll('left')
-    } else if (x > rect.right - 100) {
-      startAutoScroll('right')
-    } else {
-      stopAutoScroll()
-    }
-  }
-
-  const handleDragEnd = () => {
-    if (draggedCard) {
-      const card = columns.flatMap(col => col.cards).find(c => c.id === draggedCard)
-      const column = columns.find(col => col.cards.some(c => c.id === draggedCard))
-      if (card && column && onDragEnd) {
-        onDragEnd(card, column)
-      }
-    }
-    setDraggedCard(null)
-    setDraggedOverColumn(null)
-    stopAutoScroll()
-  }
-
-  const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
-    if (disabled || !draggedCard) return
-    e.preventDefault()
-    
-    const targetColumn = columns.find(col => col.id === targetColumnId)
-    const draggedCardObj = columns.flatMap(col => col.cards).find(card => card.id === draggedCard)
-    
-    if (targetColumn && draggedCardObj && canDrop && !canDrop(draggedCardObj, targetColumn, targetIndex)) {
-      return
-    }
-
-    // Find source column and card
-    let sourceColumnId: string | null = null
-    let sourceCard: KanbanCard | null = null
-
-    for (const column of columns) {
-      const card = column.cards.find(c => c.id === draggedCard)
-      if (card) {
-        sourceColumnId = column.id
-        sourceCard = card
-        break
-      }
-    }
-
-    if (sourceColumnId && sourceCard) {
-      // Update local state immediately for better UX
-      const newColumns = columns.map(col => {
-        if (col.id === sourceColumnId) {
-          return {
-            ...col,
-            cards: col.cards.filter(c => c.id !== draggedCard)
-          }
-        }
-        if (col.id === targetColumnId) {
-          const newCards = [...col.cards]
-          newCards.splice(targetIndex, 0, sourceCard!)
-          return {
-            ...col,
-            cards: newCards
-          }
-        }
-        return col
-      })
-      setColumns(newColumns)
-      
-      // Call the callback if provided
-      if (onCardMove) {
-        onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex)
-      }
-    }
-
-    handleDragEnd()
-  }
-
-  // Bulk actions
-  const handleBulkAction = (action: string) => {
-    if (onBulkAction && selectedCards.length > 0) {
-      onBulkAction(action, selectedCards)
-      setSelectedCards([])
-    }
-  }
-
-  // Column actions
-  const handleColumnAction = (column: KanbanColumn, action: string) => {
-    switch (action) {
-      case 'rename':
-        setEditingColumnId(column.id)
-        setEditingColumnTitle(column.title)
-        break
-      case 'delete':
-        onColumnDelete?.(column.id)
-        toast({
-          title: "Column deleted",
-          description: `"${column.title}" has been deleted`
-        })
-        break
-      case 'collapse':
-        const updatedColumn = { ...column, collapsed: !column.collapsed }
-        onColumnUpdate?.(updatedColumn)
-        setColumns(columns.map(col => col.id === column.id ? updatedColumn : col))
-        break
-      case 'setLimit':
-        setWipLimitColumnId(column.id)
-        setWipLimit(column.limit)
-        setWipLimitModalOpen(true)
-        break
-      case 'changeColor':
-        setColorPickerColumnId(column.id)
-        setSelectedColor(column.color || '#6B7280')
-        setColorPickerOpen(true)
-        break
-      case 'sortByPriority':
-        const sortedCards = [...column.cards].sort((a, b) => {
-          const priorityOrder = { urgent: 4, high: 3, medium: 2, low: 1 }
-          return (priorityOrder[b.priority || 'medium'] || 2) - (priorityOrder[a.priority || 'medium'] || 2)
-        })
-        const sortedColumn = { ...column, cards: sortedCards }
-        onColumnUpdate?.(sortedColumn)
-        setColumns(columns.map(col => col.id === column.id ? sortedColumn : col))
-        toast({
-          title: "Cards sorted",
-          description: "Cards sorted by priority"
-        })
-        break
-      case 'sortByDueDate':
-        const dateCards = [...column.cards].sort((a, b) => {
-          if (!a.dueDate && !b.dueDate) return 0
-          if (!a.dueDate) return 1
-          if (!b.dueDate) return -1
-          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
-        })
-        const dateColumn = { ...column, cards: dateCards }
-        onColumnUpdate?.(dateColumn)
-        setColumns(columns.map(col => col.id === column.id ? dateColumn : col))
-        toast({
-          title: "Cards sorted",
-          description: "Cards sorted by due date"
-        })
-        break
-      case 'sortAlphabetically':
-        const alphaCards = [...column.cards].sort((a, b) => a.title.localeCompare(b.title))
-        const alphaColumn = { ...column, cards: alphaCards }
-        onColumnUpdate?.(alphaColumn)
-        setColumns(columns.map(col => col.id === column.id ? alphaColumn : col))
-        toast({
-          title: "Cards sorted",
-          description: "Cards sorted alphabetically"
-        })
-        break
-    }
-  }
-
-  // Card handlers
-  const handleCardClick = (card: KanbanCard) => {
-    setSelectedCard(card)
-    if (onCardClick) {
-      onCardClick(card)
-    }
-  }
-
-  const handleCardUpdate = (updatedCard: KanbanCard) => {
-    onCardUpdate?.(updatedCard)
-    setColumns(columns.map(col => ({
-      ...col,
-      cards: col.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
-    })))
-  }
-
-  const handleAddCard = (columnId: string, newCard?: Partial<KanbanCard>) => {
-    setAddCardColumnId(columnId)
-  }
-
-  const handleAddNewCard = (card: Partial<KanbanCard>) => {
-    if (!addCardColumnId) return
-    
-    const newCard: KanbanCard = {
-      id: Date.now().toString(),
-      title: card.title || 'New Card',
-      position: Date.now(),
-      ...card
-    }
-    
-    // Update local state
-    setColumns(columns.map(col => {
-      if (col.id === addCardColumnId) {
-        return {
-          ...col,
-          cards: [...col.cards, newCard]
-        }
-      }
-      return col
-    }))
-    
-    // Call the callback if provided
-    if (onAddCard) {
-      onAddCard(addCardColumnId, newCard)
-    }
-    
-    toast({
-      title: "Card added",
-      description: `"${newCard.title}" has been added`
-    })
-  }
-
-  // Column updates
-  const handleColumnRename = (columnId: string) => {
-    const column = columns.find(col => col.id === columnId)
-    if (!column || !editingColumnTitle.trim()) return
-    
-    const updatedColumn = { ...column, title: editingColumnTitle.trim() }
-    onColumnUpdate?.(updatedColumn)
-    setColumns(columns.map(col => col.id === columnId ? updatedColumn : col))
-    setEditingColumnId(null)
-    setEditingColumnTitle('')
-    
-    toast({
-      title: "Column renamed",
-      description: `Column renamed to "${editingColumnTitle.trim()}"`
-    })
-  }
-
-  const handleWipLimitUpdate = () => {
-    const column = columns.find(col => col.id === wipLimitColumnId)
-    if (!column) return
-    
-    const updatedColumn = { ...column, limit: wipLimit }
-    onColumnUpdate?.(updatedColumn)
-    setColumns(columns.map(col => col.id === wipLimitColumnId ? updatedColumn : col))
-    setWipLimitModalOpen(false)
-    
-    toast({
-      title: "WIP limit updated",
-      description: wipLimit ? `WIP limit set to ${wipLimit}` : "WIP limit removed"
-    })
-  }
-
-  const handleColorUpdate = () => {
-    const column = columns.find(col => col.id === colorPickerColumnId)
-    if (!column) return
-    
-    const updatedColumn = { ...column, color: selectedColor }
-    onColumnUpdate?.(updatedColumn)
-    setColumns(columns.map(col => col.id === colorPickerColumnId ? updatedColumn : col))
-    setColorPickerOpen(false)
-    
-    toast({
-      title: "Column color updated",
-      description: "Column color has been changed"
-    })
-  }
-
-  // Export functionality
-  const handleExport = (format: 'json' | 'csv') => {
-    if (onExport) {
-      onExport(format)
-    } else {
-      if (format === 'json') {
-        const data = JSON.stringify(columns, null, 2)
-        const blob = new Blob([data], { type: 'application/json' })
-        const url = URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = 'kanban-board.json'
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-        URL.revokeObjectURL(url)
-        
-        toast({
-          title: "Board exported",
-          description: "Board exported as JSON file"
-        })
-      } else if (format === 'csv') {
-        let csv = 'Column,Card Title,Description,Priority,Assignees,Due Date,Tags\n'
-        columns.forEach(column => {
-          column.cards.forEach(card => {
-            csv += `"${column.title}",`
-            csv += `"${card.title}",`
-            csv += `"${card.description || ''}",`
-            csv += `"${card.priority || ''}",`
-            csv += `"${card.assignees?.map(a => a.name).join(', ') || ''}",`
-            csv += `"${card.dueDate ? new Date(card.dueDate).toLocaleDateString() : ''}",`
-            csv += `"${card.tags?.join(', ') || ''}"\n`
-          })
-        })
-        
-        const blob = new Blob([csv], { type: 'text/csv' })
-        const url = URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = 'kanban-board.csv'
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-        URL.revokeObjectURL(url)
-        
-        toast({
-          title: "Board exported",
-          description: "Board exported as CSV file"
-        })
-      }
-    }
-  }
-
-  // Loading state
-  if (loading) {
-    return (
-      <div className={cn("w-full", className)}>
-        <div className="flex gap-6 overflow-x-auto pb-4">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="flex-shrink-0 w-80">
-              <Card>
-                <CardHeader>
-                  <Skeleton className="h-4 w-24" />
-                </CardHeader>
-                <CardContent className="space-y-3">
-                  {[1, 2, 3].map((j) => (
-                    <Skeleton key={j} className="h-24 w-full" />
-                  ))}
-                </CardContent>
-              </Card>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn("w-full", className)}>
-      {/* Header with search and filters */}
-      {(showSearch || showFilters) && (
-        <div className="mb-6 p-4 bg-muted/30 rounded-lg space-y-4">
-          <div className="flex items-center justify-between gap-4">
-            {/* Search */}
-            {showSearch && (
-              <div className="relative flex-1 max-w-md">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  id="kanban-search"
-                  placeholder="Search cards..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9 bg-background"
-                />
-              </div>
-            )}
-
-            {/* Actions */}
-            <div className="flex items-center gap-2 flex-shrink-0">
-              {/* Filters */}
-              {showFilters && filters.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm">
-                      <Filter className="mr-2 h-4 w-4" />
-                      Filter
-                      {activeFilter && (
-                        <Badge variant="secondary" className="ml-2">
-                          {filters.find(f => f.id === activeFilter)?.name}
-                        </Badge>
-                      )}
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-48">
-                    <DropdownMenuLabel>Quick Filters</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem onClick={() => setActiveFilter(undefined)}>
-                      <X className="mr-2 h-4 w-4" />
-                      Clear filter
-                    </DropdownMenuItem>
-                    {filters.map((filter) => (
-                      <DropdownMenuItem
-                        key={filter.id}
-                        onClick={() => setActiveFilter(filter.id)}
-                      >
-                        <Check 
-                          className={cn(
-                            "mr-2 h-4 w-4",
-                            activeFilter === filter.id ? "opacity-100" : "opacity-0"
-                          )}
-                        />
-                        {filter.name}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-
-              {/* Bulk actions */}
-              {selectedCards.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm">
-                      <span className="mr-2">{selectedCards.length} selected</span>
-                      <ChevronDown className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => handleBulkAction('move')}>
-                      <Move className="mr-2 h-4 w-4" />
-                      Move cards
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleBulkAction('archive')}>
-                      <Archive className="mr-2 h-4 w-4" />
-                      Archive cards
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleBulkAction('delete')}>
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      Delete cards
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-
-              {/* Export */}
-              <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm">
-                      <Download className="mr-2 h-4 w-4" />
-                      Export
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => handleExport('json')}>
-                      Export as JSON
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleExport('csv')}>
-                      Export as CSV
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-            </div>
-          </div>
-
-          {/* Active filters display */}
-          {activeFilter && (
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-muted-foreground">Active filters:</span>
-              <Badge variant="secondary">
-                {filters.find(f => f.id === activeFilter)?.name}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="ml-1 h-auto p-0"
-                  onClick={() => setActiveFilter(undefined)}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              </Badge>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Kanban board */}
-      <div className="w-full overflow-x-auto py-6">
-        <div 
-          ref={scrollRef}
-          className="flex min-w-fit mx-auto px-4"
-          style={{ gap: `${columnGap}px` }}
-          onDragOver={(e) => e.preventDefault()}
-        >
-          <AnimatePresence mode="sync">
-            {filteredColumns.map((column) => {
-            const isOverLimit = column.limit && column.cards.length >= column.limit
-            const isDraggedOver = draggedOverColumn === column.id
-            
-            return (
-              <motion.div
-                key={column.id}
-                layout={enableAnimations}
-                initial={{ opacity: enableAnimations ? 0 : 1, x: enableAnimations ? -20 : 0 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: enableAnimations ? 0 : 1, x: enableAnimations ? 20 : 0 }}
-                className={cn(
-                  "flex-shrink-0 transition-all",
-                  isDraggedOver && "scale-105"
-                )}
-                style={{ 
-                  width: columnWidth === 'auto' ? 'auto' : (columnWidth || 360) + 'px',
-                  minWidth: columnWidth === 'auto' ? '320px' : undefined,
-                  flexShrink: 0,
-                  transitionDuration: enableAnimations ? `${animationDuration}s` : '0s'
-                }}
-                onDragOver={(e) => handleDragOver(e, column.id)}
-                onDragLeave={() => setDraggedOverColumn(null)}
-                onDrop={(e) => handleDrop(e, column.id, column.cards.length)}
-              >
-                <Card className={cn(
-                  "h-full transition-all duration-200",
-                  isDraggedOver && "ring-2 ring-primary ring-offset-2 bg-primary/5",
-                  column.collapsed && "opacity-60"
-                )}>
-                  <CardHeader className="pb-3">
-                    {renderColumnHeader ? (
-                      renderColumnHeader(column)
-                    ) : (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-2">
-                            {/* Column color indicator */}
-                            {column.color && (
-                              <div 
-                                className="w-3 h-3 rounded-full" 
-                                style={{ backgroundColor: column.color }}
-                              />
-                            )}
-                            
-                            {/* Column title */}
-                            <CardTitle className="text-sm font-medium flex items-center gap-2">
-                              {editingColumnId === column.id ? (
-                                <Input
-                                  value={editingColumnTitle}
-                                  onChange={(e) => setEditingColumnTitle(e.target.value)}
-                                  onBlur={() => handleColumnRename(column.id)}
-                                  onKeyDown={(e) => {
-                                    if (e.key === 'Enter') {
-                                      handleColumnRename(column.id)
-                                    }
-                                    if (e.key === 'Escape') {
-                                      setEditingColumnId(null)
-                                      setEditingColumnTitle('')
-                                    }
-                                  }}
-                                  className="h-6 w-32 text-sm"
-                                  autoFocus
-                                  onClick={(e) => e.stopPropagation()}
-                                />
-                              ) : (
-                                <>
-                                  {column.title}
-                                  {column.locked && <Lock className="h-3 w-3" />}
-                                </>
-                              )}
-                            </CardTitle>
-                            
-                            {/* Card count */}
-                            <Badge variant="secondary" className="text-xs">
-                              {column.cards.length}
-                            </Badge>
-                          </div>
-
-                          {/* Column actions */}
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
-                                <MoreHorizontal className="h-4 w-4" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              {columnMenuActions ? (
-                                columnMenuActions.map((action, index) => {
-                                  if (action.visible && !action.visible(column)) return null
-                                  return (
-                                    <DropdownMenuItem
-                                      key={index}
-                                      onClick={() => action.action(column)}
-                                    >
-                                      {action.icon || null}
-                                      {action.label}
-                                    </DropdownMenuItem>
-                                  )
-                                })
-                              ) : (
-                                <>
-                                  <DropdownMenuItem onClick={() => handleColumnAction(column, 'rename')}>
-                                    <Edit className="mr-2 h-4 w-4" />
-                                    Rename
-                                  </DropdownMenuItem>
-                                  <DropdownMenuItem onClick={() => handleColumnAction(column, 'collapse')}>
-                                    {column.collapsed ? (
-                                      <>
-                                        <Eye className="mr-2 h-4 w-4" />
-                                        Expand
-                                      </>
-                                    ) : (
-                                      <>
-                                        <EyeOff className="mr-2 h-4 w-4" />
-                                        Collapse
-                                      </>
-                                    )}
-                                  </DropdownMenuItem>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger>
-                                      <Settings className="mr-2 h-4 w-4" />
-                                      Settings
-                                    </DropdownMenuSubTrigger>
-                                    <DropdownMenuSubContent>
-                                      <DropdownMenuItem onClick={() => handleColumnAction(column, 'setLimit')}>
-                                        <Timer className="mr-2 h-4 w-4" />
-                                        Set WIP limit
-                                      </DropdownMenuItem>
-                                      <DropdownMenuItem onClick={() => handleColumnAction(column, 'changeColor')}>
-                                        <Palette className="mr-2 h-4 w-4" />
-                                        Change color
-                                      </DropdownMenuItem>
-                                      <DropdownMenuSub>
-                                        <DropdownMenuSubTrigger>
-                                          <ArrowUpDown className="mr-2 h-4 w-4" />
-                                          Sort cards
-                                        </DropdownMenuSubTrigger>
-                                        <DropdownMenuSubContent>
-                                          <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortByPriority')}>
-                                            By Priority
-                                          </DropdownMenuItem>
-                                          <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortByDueDate')}>
-                                            By Due Date
-                                          </DropdownMenuItem>
-                                          <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortAlphabetically')}>
-                                            Alphabetically
-                                          </DropdownMenuItem>
-                                        </DropdownMenuSubContent>
-                                      </DropdownMenuSub>
-                                    </DropdownMenuSubContent>
-                                  </DropdownMenuSub>
-                                  <DropdownMenuSeparator />
-                                  <DropdownMenuItem 
-                                    onClick={() => handleColumnAction(column, 'delete')}
-                                    className="text-destructive"
-                                  >
-                                    <Trash2 className="mr-2 h-4 w-4" />
-                                    Delete column
-                                  </DropdownMenuItem>
-                                </>
-                              )}
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-
-                        {/* WIP limit warning */}
-                        {column.limit && (
-                          <CardDescription className={cn(
-                            "text-xs flex items-center gap-1 mt-1",
-                            isOverLimit && "text-destructive"
-                          )}>
-                            {isOverLimit ? (
-                              <>
-                                <AlertCircle className="h-3 w-3" />
-                                Over WIP limit ({column.cards.length}/{column.limit})
-                              </>
-                            ) : (
-                              `WIP limit: ${column.cards.length}/${column.limit}`
-                            )}
-                          </CardDescription>
-                        )}
-                      </>
-                    )}
-                  </CardHeader>
-                  
-                  {!column.collapsed && (
-                    <CardContent className="space-y-3" style={{ gap: `${cardGap}px` }}>
-                      <ScrollArea className="h-[calc(100vh-300px)]">
-                        {column.cards.length === 0 && renderEmptyColumn ? (
-                          renderEmptyColumn(column)
-                        ) : (
-                          <AnimatePresence mode={enableAnimations ? "popLayout" : undefined}>
-                            {column.cards
-                              .sort((a, b) => a.position - b.position)
-                              .map((card, index) => (
-                              <div
-                                key={card.id}
-                                draggable={
-                                  !disabled && 
-                                  (typeof dragDisabled === 'function' ? !dragDisabled(card) : !dragDisabled)
-                                }
-                                onDragStart={() => handleDragStart(card, column.id)}
-                                onDragEnd={handleDragEnd}
-                                onDrop={(e) => {
-                                  e.preventDefault()
-                                  e.stopPropagation()
-                                  handleDrop(e, column.id, index)
-                                }}
-                                className="mb-3"
-                              >
-                                <KanbanCardComponent
-                                  card={card}
-                                  column={column}
-                                  isDragging={draggedCard === card.id}
-                                  onEdit={(e) => {
-                                    e.stopPropagation()
-                                    onCardEdit?.(card)
-                                  }}
-                                  onDelete={(e) => {
-                                    e.stopPropagation()
-                                    onCardDelete?.(card)
-                                  }}
-                                  onClick={() => handleCardClick(card)}
-                                  showDetails={showCardDetails}
-                                  disabled={disabled}
-                                  renderCard={renderCard}
-                                  renderCardPreview={renderCardPreview}
-                                  renderCardBadge={renderCardBadge}
-                                  renderCardActions={renderCardActions}
-                                  cardCompactMode={cardCompactMode}
-                                  cardShowCoverImage={cardShowCoverImage}
-                                  cardShowAssignees={cardShowAssignees}
-                                  cardShowLabels={cardShowLabels}
-                                  cardShowProgress={cardShowProgress}
-                                  cardDateFormat={cardDateFormat}
-                                  cardMaxAssigneesToShow={cardMaxAssigneesToShow}
-                                  enableAnimations={enableAnimations}
-                                  animationDuration={animationDuration}
-                                  cardVariant={cardVariant}
-                                />
-                              </div>
-                            ))}
-                          </AnimatePresence>
-                        )}
-                      </ScrollArea>
-
-                      {/* Add card button */}
-                      {onAddCard && !column.locked && !isOverLimit && (
-                        renderAddCardButton ? (
-                          renderAddCardButton(column.id)
-                        ) : (
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="w-full justify-start text-muted-foreground hover:text-foreground"
-                                disabled={disabled}
-                              >
-                                <Plus className="h-4 w-4 mr-2" />
-                                {typeof addCardButtonText === 'function' ? addCardButtonText(column.id) : (addCardButtonText || 'Add card')}
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="start" className="w-48">
-                              <DropdownMenuLabel>Card Templates</DropdownMenuLabel>
-                              <DropdownMenuSeparator />
-                              <DropdownMenuItem onClick={() => handleAddCard(column.id)}>
-                                <FileText className="mr-2 h-4 w-4" />
-                                Blank card
-                              </DropdownMenuItem>
-                              {cardTemplates.map((template, index) => (
-                                <DropdownMenuItem 
-                                  key={index}
-                                  onClick={() => handleAddCard(column.id, template)}
-                                >
-                                  <Star className="mr-2 h-4 w-4" />
-                                  {template.title || `Template ${index + 1}`}
-                                </DropdownMenuItem>
-                              ))}
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        )
-                      )}
-                      {/* Column footer */}
-                      {renderColumnFooter && renderColumnFooter(column)}
-                    </CardContent>
-                  )}
-                </Card>
-              </motion.div>
-            )
-          })}
-          </AnimatePresence>
-
-          {/* Add column */}
-          {showAddColumn && onAddColumn && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="flex-shrink-0 w-80"
-          >
-            {isCreatingColumn ? (
-              <Card>
-                <CardHeader>
-                  <Input
-                    placeholder="Enter column title..."
-                    value={newColumnTitle}
-                    onChange={(e) => setNewColumnTitle(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' && newColumnTitle) {
-                        onAddColumn({ title: newColumnTitle })
-                        setNewColumnTitle('')
-                        setIsCreatingColumn(false)
-                      }
-                      if (e.key === 'Escape') {
-                        setNewColumnTitle('')
-                        setIsCreatingColumn(false)
-                      }
-                    }}
-                    autoFocus
-                  />
-                </CardHeader>
-                <CardContent>
-                  <div className="flex gap-2">
-                    <Button
-                      size="sm"
-                      onClick={() => {
-                        if (newColumnTitle) {
-                          onAddColumn({ title: newColumnTitle })
-                          setNewColumnTitle('')
-                          setIsCreatingColumn(false)
-                        }
-                      }}
-                    >
-                      Add column
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      onClick={() => {
-                        setNewColumnTitle('')
-                        setIsCreatingColumn(false)
-                      }}
-                    >
-                      Cancel
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
-            ) : (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="w-full h-full min-h-[200px] border-dashed justify-center items-center"
-                    disabled={disabled}
-                  >
-                    <Plus className="h-6 w-6 mr-2" />
-                    Add column
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="w-48">
-                  <DropdownMenuLabel>Column Templates</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => setIsCreatingColumn(true)}>
-                    <Plus className="mr-2 h-4 w-4" />
-                    Blank column
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.todo)}>
-                    <Square className="mr-2 h-4 w-4" />
-                    To Do
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.inProgress)}>
-                    <Clock className="mr-2 h-4 w-4" />
-                    In Progress
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.done)}>
-                    <CheckSquare className="mr-2 h-4 w-4" />
-                    Done
-                  </DropdownMenuItem>
-                  {columnTemplates.map((template, index) => (
-                    <DropdownMenuItem 
-                      key={index}
-                      onClick={() => onAddColumn(template)}
-                    >
-                      <Star className="mr-2 h-4 w-4" />
-                      {template.title || `Template ${index + 1}`}
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </motion.div>
-        )}
-        </div>
-      </div>
-
-      {/* Modals */}
-      {/* Card Detail Modal */}
-      {selectedCard && (
-        <CardDetailModal
-          card={selectedCard}
-          isOpen={!!selectedCard}
-          onClose={() => setSelectedCard(null)}
-          onUpdate={handleCardUpdate}
-          onDelete={(card) => {
-            onCardDelete?.(card)
-            toast({
-              title: "Card deleted",
-              description: `"${card.title}" has been deleted`
-            })
-          }}
-          availableAssignees={users}
-          availableLabels={labels}
-          currentColumn={columns.find(col => col.cards.some(c => c.id === selectedCard.id))?.title}
-          availableColumns={columns.map(col => ({ id: col.id, title: col.title }))}
-        />
-      )}
-
-      {/* Add Card Modal */}
-      {addCardColumnId && (
-        <AddCardModal
-          isOpen={!!addCardColumnId}
-          onClose={() => setAddCardColumnId(null)}
-          onAdd={handleAddNewCard}
-          columnId={addCardColumnId}
-          columnTitle={columns.find(col => col.id === addCardColumnId)?.title || ''}
-          availableAssignees={users}
-          availableLabels={labels}
-          templates={cardTemplates}
-        />
-      )}
-
-      {/* WIP Limit Modal */}
-      <Dialog open={wipLimitModalOpen} onOpenChange={setWipLimitModalOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Set WIP Limit</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="wip-limit">Work In Progress Limit</Label>
-              <Input
-                id="wip-limit"
-                type="number"
-                min="0"
-                value={wipLimit || ''}
-                onChange={(e) => setWipLimit(e.target.value ? parseInt(e.target.value) : undefined)}
-                placeholder="Enter a number (leave empty to remove limit)"
-              />
-              <p className="text-sm text-muted-foreground">
-                Set a maximum number of cards allowed in this column. Leave empty to remove the limit.
-              </p>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setWipLimitModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleWipLimitUpdate}>
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Color Picker Modal */}
-      <Dialog open={colorPickerOpen} onOpenChange={setColorPickerOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Change Column Color</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label>Select a color</Label>
-              <div className="grid grid-cols-8 gap-2">
-                {[
-                  '#6B7280', '#EF4444', '#F59E0B', '#10B981', 
-                  '#3B82F6', '#8B5CF6', '#EC4899', '#06B6D4',
-                  '#F43F5E', '#84CC16', '#14B8A6', '#6366F1',
-                  '#A855F7', '#F472B6', '#0EA5E9', '#22D3EE'
-                ].map(color => (
-                  <button
-                    key={color}
-                    className={cn(
-                      "w-10 h-10 rounded-md border-2 transition-all",
-                      selectedColor === color ? "border-primary scale-110" : "border-transparent"
-                    )}
-                    style={{ backgroundColor: color }}
-                    onClick={() => setSelectedColor(color)}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setColorPickerOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleColorUpdate}>
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}