@moontra/moonui-pro 2.11.4 → 2.13.0

package/src/components/kanban/kanban.tsx

@@ -0,0 +1,1474 @@
+"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 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,
+  isDragging,
+  onEdit,
+  onDelete,
+  onClick,
+  showDetails,
+  disabled
+}: {
+  card: KanbanCard
+  isDragging: boolean
+  onEdit?: (e: React.MouseEvent) => void
+  onDelete?: (e: React.MouseEvent) => void
+  onClick?: () => void
+  showDetails: boolean
+  disabled: boolean
+}) => {
+  const [isEditingTitle, setIsEditingTitle] = useState(false)
+  const [title, setTitle] = useState(card.title)
+  const dragControls = useDragControls()
+
+  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
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      whileHover={{ scale: 1.02 }}
+      whileDrag={{ scale: 1.05, rotate: 3 }}
+      transition={{ duration: 0.2 }}
+      className={cn(
+        "relative group cursor-pointer select-none",
+        isDragging && "z-50"
+      )}
+    >
+      <Card 
+        className={cn(
+          "border hover:shadow-md transition-all duration-200",
+          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 */}
+        {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 */}
+          {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 */}
+            <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 */}
+          {card.description && (
+            <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
+              {card.description}
+            </p>
+          )}
+
+          {/* Progress bar */}
+          {(card.progress !== undefined || card.checklist) && (
+            <div className="mb-3">
+              <div className="flex justify-between text-xs text-muted-foreground mb-1">
+                <span>Progress</span>
+                <span>{Math.round(card.progress || checklistProgress)}%</span>
+              </div>
+              <Progress value={card.progress || checklistProgress} className="h-1" />
+            </div>
+          )}
+
+          {/* Tags */}
+          {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>{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 */}
+                {card.assignees && card.assignees.length > 0 && (
+                  <MoonUIAvatarGroupPro max={3} 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 = []
+}: 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()
+
+  // 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
+    setDraggedCard(card.id)
+  }
+
+  const handleDragOver = (e: React.DragEvent, columnId: string) => {
+    if (disabled) 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 = () => {
+    setDraggedCard(null)
+    setDraggedOverColumn(null)
+    stopAutoScroll()
+  }
+
+  const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
+    if (disabled || !draggedCard || !onCardMove) return
+    e.preventDefault()
+
+    // 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) {
+      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) => {
+    if (onCardClick) {
+      onCardClick(card)
+    } else {
+      setSelectedCard(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>) => {
+    if (onAddCard) {
+      onAddCard(columnId, newCard)
+    } else {
+      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
+    }
+    
+    setColumns(columns.map(col => {
+      if (col.id === addCardColumnId) {
+        return {
+          ...col,
+          cards: [...col.cards, newCard]
+        }
+      }
+      return col
+    }))
+    
+    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 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"
+                />
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex items-center gap-2">
+              {/* 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 
+        ref={scrollRef}
+        className="flex gap-6 overflow-x-auto pb-4"
+        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
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                className={cn(
+                  "flex-shrink-0 w-80 transition-all duration-200",
+                  isDraggedOver && "scale-105"
+                )}
+                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">
+                    <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">
+                          <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">
+                      <ScrollArea className="h-[calc(100vh-300px)]">
+                        <AnimatePresence mode="popLayout">
+                          {column.cards
+                            .sort((a, b) => a.position - b.position)
+                            .map((card, index) => (
+                              <div
+                                key={card.id}
+                                draggable={!disabled}
+                                onDragStart={() => handleDragStart(card, column.id)}
+                                onDragEnd={handleDragEnd}
+                                onDrop={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  handleDrop(e, column.id, index)
+                                }}
+                                className="mb-3"
+                              >
+                                <KanbanCardComponent
+                                  card={card}
+                                  isDragging={draggedCard === card.id}
+                                  onEdit={(e) => {
+                                    e.stopPropagation()
+                                    onCardEdit?.(card)
+                                  }}
+                                  onDelete={(e) => {
+                                    e.stopPropagation()
+                                    onCardDelete?.(card)
+                                  }}
+                                  onClick={() => handleCardClick(card)}
+                                  showDetails={showCardDetails}
+                                  disabled={disabled}
+                                />
+                              </div>
+                            ))}
+                        </AnimatePresence>
+                      </ScrollArea>
+
+                      {/* Add card button */}
+                      {onAddCard && !column.locked && !isOverLimit && (
+                        <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" />
+                              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>
+                      )}
+                    </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>
+
+      {/* 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>
+  )
+}