@moontra/moonui-pro 2.12.0 → 2.14.0

package/src/components/kanban/{index.tsx → kanban.tsx}

@@ -65,119 +65,23 @@ import {
 } 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'
 
-// Enhanced types
-interface KanbanAssignee {
-  id: string
-  name: string
-  avatar?: string
-  email?: string
-}
-
-interface KanbanLabel {
-  id: string
-  name: string
-  color: string
-}
-
-interface KanbanChecklist {
-  id: string
-  title: string
-  items: {
-    id: string
-    text: string
-    completed: boolean
-  }[]
-}
-
-interface KanbanActivity {
-  id: string
-  user: KanbanAssignee
-  action: string
-  timestamp: Date
-  details?: string
-}
-
-interface KanbanCard {
-  id: string
-  title: string
-  description?: string
-  coverImage?: string
-  assignees?: KanbanAssignee[]
-  dueDate?: Date
-  startDate?: Date
-  priority?: 'low' | 'medium' | 'high' | 'urgent'
-  tags?: string[]
-  labels?: KanbanLabel[]
-  attachments?: {
-    id: string
-    name: string
-    type: string
-    url: string
-    size: number
-  }[]
-  comments?: number
-  completed?: boolean
-  progress?: number
-  checklist?: KanbanChecklist
-  activities?: KanbanActivity[]
-  customFields?: Record<string, any>
-  position: number
-}
-
-interface KanbanColumn {
-  id: string
-  title: string
-  color?: string
-  cards: KanbanCard[]
-  limit?: number
-  collapsed?: boolean
-  locked?: boolean
-  template?: 'todo' | 'inProgress' | 'done' | 'custom'
-}
-
-interface KanbanFilter {
-  id: string
-  name: string
-  query: string
-  assignees?: string[]
-  labels?: string[]
-  priority?: string[]
-  tags?: string[]
-  dueDate?: {
-    from?: Date
-    to?: Date
-  }
-}
-
-interface KanbanProps {
-  columns: KanbanColumn[]
-  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newPosition: number) => void
-  onCardClick?: (card: KanbanCard) => void
-  onCardEdit?: (card: KanbanCard) => void
-  onCardDelete?: (card: KanbanCard) => void
-  onCardUpdate?: (card: KanbanCard) => void
-  onAddCard?: (columnId: string, card?: Partial<KanbanCard>) => void
-  onAddColumn?: (column?: Partial<KanbanColumn>) => void
-  onColumnUpdate?: (column: KanbanColumn) => void
-  onColumnDelete?: (columnId: string) => void
-  onBulkAction?: (action: string, cardIds: string[]) => void
-  onExport?: (format: 'json' | 'csv') => void
-  className?: string
-  showAddColumn?: boolean
-  showCardDetails?: boolean
-  showFilters?: boolean
-  showSearch?: boolean
-  enableKeyboardShortcuts?: boolean
-  cardTemplates?: Partial<KanbanCard>[]
-  columnTemplates?: Partial<KanbanColumn>[]
-  filters?: KanbanFilter[]
-  defaultFilter?: string
-  loading?: boolean
-  disabled?: boolean
-  labels?: KanbanLabel[]
-  users?: KanbanAssignee[]
-}
 
 // Constants
 const PRIORITY_CONFIG = {
@@ -267,38 +171,80 @@ const useAutoScroll = () => {
 // Card component
 const KanbanCardComponent = ({
   card,
+  column,
   isDragging,
   onEdit,
   onDelete,
   onClick,
   showDetails,
-  disabled
+  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: 0, y: 20 }}
+      initial={{ opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? 20 : 0 }}
       animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -20 }}
-      whileHover={{ scale: 1.02 }}
-      whileDrag={{ scale: 1.05, rotate: 3 }}
-      transition={{ duration: 0.2 }}
+      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"
@@ -306,7 +252,11 @@ const KanbanCardComponent = ({
     >
       <Card 
         className={cn(
-          "border hover:shadow-md transition-all duration-200",
+          "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"
         )}
@@ -319,7 +269,7 @@ const KanbanCardComponent = ({
         />
 
         {/* Cover image */}
-        {card.coverImage && (
+        {cardShowCoverImage && card.coverImage && (
           <div className="relative h-32 -mx-px -mt-px rounded-t-lg overflow-hidden">
             <img 
               src={card.coverImage} 
@@ -332,7 +282,7 @@ const KanbanCardComponent = ({
 
         <CardContent className="p-3">
           {/* Labels */}
-          {card.labels && card.labels.length > 0 && (
+          {cardShowLabels && card.labels && card.labels.length > 0 && (
             <div className="flex flex-wrap gap-1 mb-2">
               {card.labels.map((label) => (
                 <div
@@ -373,27 +323,32 @@ const KanbanCardComponent = ({
             </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>
+            {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
@@ -410,20 +365,21 @@ const KanbanCardComponent = ({
                     <Trash2 className="mr-2 h-4 w-4" />
                     Delete
                   </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
           </div>
 
           {/* Description */}
-          {card.description && (
+          {!cardCompactMode && card.description && (
             <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
               {card.description}
             </p>
           )}
 
           {/* Progress bar */}
-          {(card.progress !== undefined || card.checklist) && (
+          {cardShowProgress && (card.progress !== undefined || card.checklist) && (
             <div className="mb-3">
               <div className="flex justify-between text-xs text-muted-foreground mb-1">
                 <span>Progress</span>
@@ -434,7 +390,7 @@ const KanbanCardComponent = ({
           )}
 
           {/* Tags */}
-          {card.tags && card.tags.length > 0 && (
+          {!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">
@@ -463,7 +419,7 @@ const KanbanCardComponent = ({
                     isOverdue(card.dueDate) && "text-destructive"
                   )}>
                     <Calendar className="h-3 w-3" />
-                    <span>{formatDate(card.dueDate)}</span>
+                    <span>{cardDateFormat ? format(card.dueDate, cardDateFormat) : formatDate(card.dueDate)}</span>
                   </div>
                 )}
 
@@ -494,8 +450,8 @@ const KanbanCardComponent = ({
                 )}
 
                 {/* Assignees */}
-                {card.assignees && card.assignees.length > 0 && (
-                  <MoonUIAvatarGroupPro max={3} size="xs">
+                {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} />
@@ -542,7 +498,54 @@ export function Kanban({
   loading = false,
   disabled = false,
   labels = [],
-  users = []
+  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()
@@ -584,8 +587,21 @@ export function Kanban({
   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(() => {
@@ -663,11 +679,22 @@ export function Kanban({
   // 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)
 
@@ -688,6 +715,13 @@ export function Kanban({
   }
 
   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()
@@ -696,6 +730,13 @@ export function Kanban({
   const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
     if (disabled || !draggedCard || !onCardMove) 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
@@ -729,20 +770,224 @@ export function Kanban({
   const handleColumnAction = (column: KanbanColumn, action: string) => {
     switch (action) {
       case 'rename':
-        // Implement inline 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':
-        onColumnUpdate?.({ ...column, collapsed: !column.collapsed })
+        const updatedColumn = { ...column, collapsed: !column.collapsed }
+        onColumnUpdate?.(updatedColumn)
+        setColumns(columns.map(col => col.id === column.id ? updatedColumn : col))
         break
       case 'setLimit':
-        // Implement WIP limit dialog
+        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 (
@@ -855,8 +1100,7 @@ export function Kanban({
               )}
 
               {/* Export */}
-              {onExport && (
-                <DropdownMenu>
+              <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button variant="outline" size="sm">
                       <Download className="mr-2 h-4 w-4" />
@@ -864,15 +1108,14 @@ export function Kanban({
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => onExport('json')}>
+                    <DropdownMenuItem onClick={() => handleExport('json')}>
                       Export as JSON
                     </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => onExport('csv')}>
+                    <DropdownMenuItem onClick={() => handleExport('csv')}>
                       Export as CSV
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
-              )}
             </div>
           </div>
 
@@ -899,7 +1142,8 @@ export function Kanban({
       {/* Kanban board */}
       <div 
         ref={scrollRef}
-        className="flex gap-6 overflow-x-auto pb-4"
+        className="flex overflow-x-auto pb-4"
+        style={{ gap: `${columnGap}px` }}
         onDragOver={(e) => e.preventDefault()}
       >
         <AnimatePresence mode="sync">
@@ -910,14 +1154,19 @@ export function Kanban({
             return (
               <motion.div
                 key={column.id}
-                layout
-                initial={{ opacity: 0, x: -20 }}
+                layout={enableAnimations}
+                initial={{ opacity: enableAnimations ? 0 : 1, x: enableAnimations ? -20 : 0 }}
                 animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: 20 }}
+                exit={{ opacity: enableAnimations ? 0 : 1, x: enableAnimations ? 20 : 0 }}
                 className={cn(
-                  "flex-shrink-0 w-80 transition-all duration-200",
+                  "flex-shrink-0 transition-all",
                   isDraggedOver && "scale-105"
                 )}
+                style={{ 
+                  width: columnWidth === 'auto' ? 'auto' : (columnWidth || 320) + 'px',
+                  minWidth: columnWidth === 'auto' ? '300px' : undefined,
+                  transitionDuration: enableAnimations ? `${animationDuration}s` : '0s'
+                }}
                 onDragOver={(e) => handleDragOver(e, column.id)}
                 onDragLeave={() => setDraggedOverColumn(null)}
                 onDrop={(e) => handleDrop(e, column.id, column.cards.length)}
@@ -928,114 +1177,178 @@ export function Kanban({
                   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">
-                          {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 ? (
+                    {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 ? (
                               <>
-                                <Eye className="mr-2 h-4 w-4" />
-                                Expand
+                                <AlertCircle className="h-3 w-3" />
+                                Over WIP limit ({column.cards.length}/{column.limit})
                               </>
                             ) : (
-                              <>
-                                <EyeOff className="mr-2 h-4 w-4" />
-                                Collapse
-                              </>
+                              `WIP limit: ${column.cards.length}/${column.limit}`
                             )}
-                          </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>
-                                <Palette className="mr-2 h-4 w-4" />
-                                Change color
-                              </DropdownMenuItem>
-                              <DropdownMenuItem>
-                                <ArrowUpDown className="mr-2 h-4 w-4" />
-                                Sort cards
-                              </DropdownMenuItem>
-                            </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>
                         )}
-                      </CardDescription>
+                      </>
                     )}
                   </CardHeader>
                   
                   {!column.collapsed && (
-                    <CardContent className="space-y-3">
+                    <CardContent className="space-y-3" style={{ gap: `${cardGap}px` }}>
                       <ScrollArea className="h-[calc(100vh-300px)]">
-                        <AnimatePresence mode="popLayout">
-                          {column.cards
-                            .sort((a, b) => a.position - b.position)
-                            .map((card, index) => (
+                        {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}
+                                draggable={
+                                  !disabled && 
+                                  (typeof dragDisabled === 'function' ? !dragDisabled(card) : !dragDisabled)
+                                }
                                 onDragStart={() => handleDragStart(card, column.id)}
                                 onDragEnd={handleDragEnd}
                                 onDrop={(e) => {
@@ -1047,6 +1360,7 @@ export function Kanban({
                               >
                                 <KanbanCardComponent
                                   card={card}
+                                  column={column}
                                   isDragging={draggedCard === card.id}
                                   onEdit={(e) => {
                                     e.stopPropagation()
@@ -1056,48 +1370,69 @@ export function Kanban({
                                     e.stopPropagation()
                                     onCardDelete?.(card)
                                   }}
-                                  onClick={() => onCardClick?.(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>
+                          </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={() => onAddCard(column.id)}>
-                              <FileText className="mr-2 h-4 w-4" />
-                              Blank card
-                            </DropdownMenuItem>
-                            {cardTemplates.map((template, index) => (
-                              <DropdownMenuItem 
-                                key={index}
-                                onClick={() => onAddCard(column.id, template)}
+                        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}
                               >
-                                <Star className="mr-2 h-4 w-4" />
-                                {template.title || `Template ${index + 1}`}
+                                <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>
-                            ))}
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                              {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>
@@ -1207,8 +1542,115 @@ export function Kanban({
           </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>
   )
-}
-
-export default Kanban
+}