@moontra/moonui-pro 2.13.0 → 2.14.1

package/src/components/kanban/kanban.tsx

@@ -69,6 +69,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 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, 
@@ -170,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"
@@ -209,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"
         )}
@@ -222,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} 
@@ -235,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
@@ -276,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
@@ -313,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>
@@ -337,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">
@@ -366,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>
                 )}
 
@@ -397,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} />
@@ -445,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()
@@ -503,6 +603,11 @@ export function Kanban({
   const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll()
   const { toast } = useToast()
 
+  // Update state when props change
+  useEffect(() => {
+    setColumns(initialColumns)
+  }, [initialColumns])
+
   // Filter cards based on search and filters
   const filteredColumns = useMemo(() => {
     if (!searchQuery && !activeFilter) return columns
@@ -579,11 +684,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)
 
@@ -604,14 +720,28 @@ 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()
   }
 
   const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
-    if (disabled || !draggedCard || !onCardMove) return
+    if (disabled || !draggedCard) return
     e.preventDefault()
+    
+    const targetColumn = columns.find(col => col.id === targetColumnId)
+    const draggedCardObj = columns.flatMap(col => col.cards).find(card => card.id === draggedCard)
+    
+    if (targetColumn && draggedCardObj && canDrop && !canDrop(draggedCardObj, targetColumn, targetIndex)) {
+      return
+    }
 
     // Find source column and card
     let sourceColumnId: string | null = null
@@ -627,7 +757,30 @@ export function Kanban({
     }
 
     if (sourceColumnId && sourceCard) {
-      onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex)
+      // Update local state immediately for better UX
+      const newColumns = columns.map(col => {
+        if (col.id === sourceColumnId) {
+          return {
+            ...col,
+            cards: col.cards.filter(c => c.id !== draggedCard)
+          }
+        }
+        if (col.id === targetColumnId) {
+          const newCards = [...col.cards]
+          newCards.splice(targetIndex, 0, sourceCard!)
+          return {
+            ...col,
+            cards: newCards
+          }
+        }
+        return col
+      })
+      setColumns(newColumns)
+      
+      // Call the callback if provided
+      if (onCardMove) {
+        onCardMove(draggedCard, sourceColumnId, targetColumnId, targetIndex)
+      }
     }
 
     handleDragEnd()
@@ -713,10 +866,9 @@ export function Kanban({
 
   // Card handlers
   const handleCardClick = (card: KanbanCard) => {
+    setSelectedCard(card)
     if (onCardClick) {
       onCardClick(card)
-    } else {
-      setSelectedCard(card)
     }
   }
 
@@ -729,11 +881,7 @@ export function Kanban({
   }
 
   const handleAddCard = (columnId: string, newCard?: Partial<KanbanCard>) => {
-    if (onAddCard) {
-      onAddCard(columnId, newCard)
-    } else {
-      setAddCardColumnId(columnId)
-    }
+    setAddCardColumnId(columnId)
   }
 
   const handleAddNewCard = (card: Partial<KanbanCard>) => {
@@ -746,6 +894,7 @@ export function Kanban({
       ...card
     }
     
+    // Update local state
     setColumns(columns.map(col => {
       if (col.id === addCardColumnId) {
         return {
@@ -756,7 +905,11 @@ export function Kanban({
       return col
     }))
     
-    onAddCard?.(addCardColumnId, newCard)
+    // Call the callback if provided
+    if (onAddCard) {
+      onAddCard(addCardColumnId, newCard)
+    }
+    
     toast({
       title: "Card added",
       description: `"${newCard.title}" has been added`
@@ -1017,7 +1170,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">
@@ -1028,14 +1182,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)}
@@ -1046,149 +1205,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">
-                          {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
-                              </>
+                    {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 }}
+                              />
                             )}
-                          </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
+                            
+                            {/* 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, 'sortByDueDate')}>
-                                    By Due Date
+                                  <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>
-                                  <DropdownMenuItem onClick={() => handleColumnAction(column, 'sortAlphabetically')}>
-                                    Alphabetically
+                                  <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>
-                                </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}`
+                                </>
+                              )}
+                            </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) => {
@@ -1200,6 +1388,7 @@ export function Kanban({
                               >
                                 <KanbanCardComponent
                                   card={card}
+                                  column={column}
                                   isDragging={draggedCard === card.id}
                                   onEdit={(e) => {
                                     e.stopPropagation()
@@ -1212,45 +1401,66 @@ export function Kanban({
                                   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={() => 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)}
+                        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>