@moontra/moonui-pro 2.11.3 → 2.12.0

package/src/components/kanban/index.tsx

@@ -1,10 +1,22 @@
 "use client"
 
-import React from 'react'
+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 } from '../ui/avatar'
+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, 
@@ -16,27 +28,101 @@ import {
   Trash2,
   GripVertical,
   Lock,
-  Sparkles
+  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'
-// Note: DocsProAccess should be handled by consuming application
 import { useSubscription } from '../../hooks/use-subscription'
 
+// 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
-  assignee?: {
-    name: string
-    avatar?: string
-    email?: string
-  }
+  coverImage?: string
+  assignees?: KanbanAssignee[]
   dueDate?: Date
+  startDate?: Date
   priority?: 'low' | 'medium' | 'high' | 'urgent'
   tags?: string[]
-  attachments?: number
+  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 {
@@ -45,55 +131,422 @@ interface KanbanColumn {
   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, newIndex: number) => void
+  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newPosition: number) => void
   onCardClick?: (card: KanbanCard) => void
   onCardEdit?: (card: KanbanCard) => void
   onCardDelete?: (card: KanbanCard) => void
-  onAddCard?: (columnId: string) => void
-  onAddColumn?: () => 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 = {
+  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 PRIORITY_COLORS = {
-  low: 'bg-green-100 text-green-800 border-green-200',
-  medium: 'bg-yellow-100 text-yellow-800 border-yellow-200',
-  high: 'bg-orange-100 text-orange-800 border-orange-200',
-  urgent: 'bg-red-100 text-red-800 border-red-200'
+const COLUMN_TEMPLATES = {
+  todo: { title: 'To Do', color: '#6B7280' },
+  inProgress: { title: 'In Progress', color: '#3B82F6' },
+  done: { title: 'Done', color: '#10B981' }
 }
 
-const PRIORITY_DOTS = {
-  low: 'bg-green-500',
-  medium: 'bg-yellow-500',
-  high: 'bg-orange-500',
-  urgent: 'bg-red-500'
+// 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,
+  columns: initialColumns,
   onCardMove,
   onCardClick,
   onCardEdit,
   onCardDelete,
+  onCardUpdate,
   onAddCard,
   onAddColumn,
+  onColumnUpdate,
+  onColumnDelete,
+  onBulkAction,
+  onExport,
   className,
   showAddColumn = true,
   showCardDetails = true,
-  disabled = false
+  showFilters = true,
+  showSearch = true,
+  enableKeyboardShortcuts = true,
+  cardTemplates = [],
+  columnTemplates = [],
+  filters = [],
+  defaultFilter,
+  loading = false,
+  disabled = false,
+  labels = [],
+  users = []
 }: KanbanProps) {
-  // Check if we're in docs mode or have pro access
+  // Check pro access
   const { hasProAccess, isLoading } = useSubscription()
   
-  // In docs mode, always show the component
-  
-  // If not in docs mode and no pro access, show upgrade prompt
   if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-full", className)}>
@@ -121,310 +574,637 @@ export function Kanban({
       </Card>
     )
   }
-  
-  const [draggedCard, setDraggedCard] = React.useState<string | null>(null)
-  const [draggedOverColumn, setDraggedOverColumn] = React.useState<string | null>(null)
-  const [draggedFromColumn, setDraggedFromColumn] = React.useState<string | null>(null)
 
-  const handleDragStart = (e: React.DragEvent, cardId: string) => {
-    if (disabled) return
-    
-    // Find which column this card belongs to
-    const sourceColumn = columns.find(col => 
-      col.cards.some(card => card.id === cardId)
-    )
-    
-    setDraggedCard(cardId)
-    setDraggedFromColumn(sourceColumn?.id || null)
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', cardId)
-    
-    // Add visual feedback
-    e.currentTarget.classList.add('opacity-50')
-  }
+  // 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('')
+
+  const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll()
 
-  const handleDragEnd = (e: React.DragEvent) => {
+  // 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
-    
-    // Reset all states
-    setDraggedCard(null)
-    setDraggedOverColumn(null)
-    setDraggedFromColumn(null)
-    
-    // Remove visual feedback
-    e.currentTarget.classList.remove('opacity-50')
+    setDraggedCard(card.id)
   }
 
   const handleDragOver = (e: React.DragEvent, columnId: string) => {
     if (disabled) return
     e.preventDefault()
-    e.dataTransfer.dropEffect = 'move'
     setDraggedOverColumn(columnId)
-  }
 
-  const handleDragEnter = (e: React.DragEvent, columnId: string) => {
-    if (disabled) return
-    e.preventDefault()
-    setDraggedOverColumn(columnId)
-  }
+    // Auto-scroll logic
+    const container = scrollRef.current
+    if (!container) return
 
-  const handleDragLeave = (e: React.DragEvent, columnId: string) => {
-    if (disabled) return
-    e.preventDefault()
-    
-    // Only clear if we're leaving the column entirely
-    const rect = e.currentTarget.getBoundingClientRect()
-    const isLeavingColumn = (
-      e.clientX < rect.left || 
-      e.clientX > rect.right || 
-      e.clientY < rect.top || 
-      e.clientY > rect.bottom
-    )
-    
-    if (isLeavingColumn) {
-      setDraggedOverColumn(null)
+    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 handleDrop = (e: React.DragEvent, columnId: string) => {
-    if (disabled) return
-    e.preventDefault()
-    
-    const cardId = e.dataTransfer.getData('text/plain') || draggedCard
-    
-    if (cardId && onCardMove && draggedFromColumn && draggedFromColumn !== columnId) {
-      const targetColumn = columns.find(col => col.id === columnId)
-      const newIndex = targetColumn?.cards.length || 0
-      onCardMove(cardId, draggedFromColumn, columnId, newIndex)
-    }
-    
-    // Reset all states
+  const handleDragEnd = () => {
     setDraggedCard(null)
     setDraggedOverColumn(null)
-    setDraggedFromColumn(null)
+    stopAutoScroll()
   }
 
-  const handleCardClick = (card: KanbanCard) => {
-    if (disabled) return
-    onCardClick?.(card)
-  }
+  const handleDrop = (e: React.DragEvent, targetColumnId: string, targetIndex: number) => {
+    if (disabled || !draggedCard || !onCardMove) return
+    e.preventDefault()
 
-  const handleCardEdit = (card: KanbanCard, e: React.MouseEvent) => {
-    if (disabled) return
-    e.stopPropagation()
-    onCardEdit?.(card)
-  }
+    // Find source column and card
+    let sourceColumnId: string | null = null
+    let sourceCard: KanbanCard | null = null
 
-  const handleCardDelete = (card: KanbanCard, e: React.MouseEvent) => {
-    if (disabled) return
-    e.stopPropagation()
-    onCardDelete?.(card)
+    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()
   }
 
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString('en-US', { 
-      month: 'short', 
-      day: 'numeric' 
-    })
+  // Bulk actions
+  const handleBulkAction = (action: string) => {
+    if (onBulkAction && selectedCards.length > 0) {
+      onBulkAction(action, selectedCards)
+      setSelectedCards([])
+    }
   }
 
-  const isOverdue = (dueDate: Date) => {
-    return dueDate < new Date()
+  // Column actions
+  const handleColumnAction = (column: KanbanColumn, action: string) => {
+    switch (action) {
+      case 'rename':
+        // Implement inline rename
+        break
+      case 'delete':
+        onColumnDelete?.(column.id)
+        break
+      case 'collapse':
+        onColumnUpdate?.({ ...column, collapsed: !column.collapsed })
+        break
+      case 'setLimit':
+        // Implement WIP limit dialog
+        break
+    }
   }
 
-  const getInitials = (name: string) => {
-    return name.split(' ').map(n => n[0]).join('').toUpperCase()
+  // 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)}>
-      <div className="flex gap-6 overflow-x-auto pb-4">
-        {columns.map((column) => {
-          const isOverLimit = column.limit && column.cards.length > column.limit
-          const isDraggedOver = draggedOverColumn === column.id
-          
-          return (
-            <div
-              key={column.id}
-              className={cn(
-                "flex-shrink-0 w-80 transition-colors duration-200",
-                isDraggedOver && "bg-primary/5 rounded-lg border-2 border-primary/20"
-              )}
-              onDragOver={(e) => handleDragOver(e, column.id)}
-              onDragEnter={(e) => handleDragEnter(e, column.id)}
-              onDragLeave={(e) => handleDragLeave(e, column.id)}
-              onDrop={(e) => handleDrop(e, column.id)}
-            >
-              <Card className="h-full">
-                <CardHeader className="pb-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      {column.color && (
-                        <div 
-                          className="w-3 h-3 rounded-full" 
-                          style={{ backgroundColor: column.color }}
-                        />
+      {/* 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>
                       )}
-                      <CardTitle className="text-sm font-medium">
-                        {column.title}
-                      </CardTitle>
-                      <Badge variant="secondary" className="text-xs">
-                        {column.cards.length}
-                      </Badge>
-                    </div>
-                    <Button variant="ghost" size="sm">
-                      <MoreHorizontal className="h-4 w-4" />
                     </Button>
-                  </div>
-                  {column.limit && (
-                    <CardDescription className={cn(
-                      "text-xs",
-                      isOverLimit && "text-destructive"
-                    )}>
-                      {isOverLimit ? 'Over limit' : `${column.cards.length}/${column.limit} cards`}
-                    </CardDescription>
-                  )}
-                </CardHeader>
-                
-                <CardContent className="space-y-3">
-                  {/* Cards */}
-                  {column.cards.map((card) => (
-                    <div
-                      key={card.id}
-                      draggable={!disabled}
-                      onDragStart={(e) => handleDragStart(e, card.id)}
-                      onDragEnd={handleDragEnd}
-                      onClick={() => handleCardClick(card)}
-                      className={cn(
-                        "p-3 bg-background border rounded-lg cursor-pointer hover:shadow-md transition-all duration-200",
-                        "group relative select-none",
-                        draggedCard === card.id && "opacity-50 scale-95",
-                        disabled && "cursor-not-allowed"
-                      )}
-                    >
-                      <div className="flex items-start justify-between gap-2">
-                        <div className="flex-1">
-                          <h4 className="font-medium text-sm mb-1">{card.title}</h4>
-                          {card.description && (
-                            <p className="text-xs text-muted-foreground mb-2 line-clamp-2">
-                              {card.description}
-                            </p>
+                  </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"
                           )}
-                        </div>
-                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 w-6 p-0"
-                            onClick={(e) => handleCardEdit(card, e)}
-                          >
-                            <Edit className="h-3 w-3" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 w-6 p-0"
-                            onClick={(e) => handleCardDelete(card, e)}
-                          >
-                            <Trash2 className="h-3 w-3" />
-                          </Button>
-                          <div className="cursor-move">
-                            <GripVertical className="h-3 w-3 text-muted-foreground" />
-                          </div>
-                        </div>
-                      </div>
+                        />
+                        {filter.name}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
 
-                      {/* Tags */}
-                      {card.tags && card.tags.length > 0 && (
-                        <div className="flex flex-wrap gap-1 mb-2">
-                          {card.tags.map((tag, index) => (
-                            <Badge key={index} variant="outline" className="text-xs px-1 py-0">
-                              {tag}
-                            </Badge>
-                          ))}
-                        </div>
-                      )}
+              {/* 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>
+              )}
 
-                      {/* Card Details */}
-                      {showCardDetails && (
-                        <div className="flex items-center justify-between text-xs text-muted-foreground">
-                          <div className="flex items-center gap-2">
-                            {card.priority && (
-                              <div className="flex items-center gap-1">
-                                <div className={cn("w-2 h-2 rounded-full", PRIORITY_DOTS[card.priority])} />
-                                <span className="capitalize">{card.priority}</span>
-                              </div>
-                            )}
-                            {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>
-                            )}
-                          </div>
-                          
-                          <div className="flex items-center gap-2">
-                            {card.comments && card.comments > 0 && (
-                              <div className="flex items-center gap-1">
-                                <MessageCircle className="h-3 w-3" />
-                                <span>{card.comments}</span>
-                              </div>
+              {/* Export */}
+              {onExport && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <Download className="mr-2 h-4 w-4" />
+                      Export
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => onExport('json')}>
+                      Export as JSON
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => onExport('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">
+                          {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
+                              </>
                             )}
-                            {card.attachments && card.attachments > 0 && (
-                              <div className="flex items-center gap-1">
-                                <Paperclip className="h-3 w-3" />
-                                <span>{card.attachments}</span>
+                          </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>
+                    )}
+                  </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={() => onCardClick?.(card)}
+                                  showDetails={showCardDetails}
+                                  disabled={disabled}
+                                />
                               </div>
-                            )}
-                            {card.assignee && (
-                              <MoonUIAvatarPro className="h-5 w-5">
-                                <MoonUIAvatarImagePro src={card.assignee.avatar} />
-                                <MoonUIAvatarFallbackPro className="text-xs">
-                                  {getInitials(card.assignee.name)}
-                                </MoonUIAvatarFallbackPro>
-                              </MoonUIAvatarPro>
-                            )}
-                          </div>
-                        </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={() => 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)}
+                              >
+                                <Star className="mr-2 h-4 w-4" />
+                                {template.title || `Template ${index + 1}`}
+                              </DropdownMenuItem>
+                            ))}
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       )}
-                    </div>
-                  ))}
+                    </CardContent>
+                  )}
+                </Card>
+              </motion.div>
+            )
+          })}
+        </AnimatePresence>
 
-                  {/* Add Card Button */}
-                  {onAddCard && (
+        {/* 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
-                      variant="ghost"
                       size="sm"
-                      onClick={() => onAddCard(column.id)}
-                      className="w-full justify-start text-muted-foreground hover:text-foreground"
-                      disabled={disabled}
+                      onClick={() => {
+                        if (newColumnTitle) {
+                          onAddColumn({ title: newColumnTitle })
+                          setNewColumnTitle('')
+                          setIsCreatingColumn(false)
+                        }
+                      }}
                     >
-                      <Plus className="h-4 w-4 mr-2" />
-                      Add card
+                      Add column
                     </Button>
-                  )}
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => {
+                        setNewColumnTitle('')
+                        setIsCreatingColumn(false)
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
                 </CardContent>
               </Card>
-            </div>
-          )
-        })}
-
-        {/* Add Column Button */}
-        {showAddColumn && onAddColumn && (
-          <div className="flex-shrink-0 w-80">
-            <Button
-              variant="outline"
-              onClick={onAddColumn}
-              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>
-          </div>
+            ) : (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    className="w-full h-full min-h-[200px] border-dashed justify-center items-center"
+                    disabled={disabled}
+                  >
+                    <Plus className="h-6 w-6 mr-2" />
+                    Add column
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="w-48">
+                  <DropdownMenuLabel>Column Templates</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => setIsCreatingColumn(true)}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    Blank column
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.todo)}>
+                    <Square className="mr-2 h-4 w-4" />
+                    To Do
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.inProgress)}>
+                    <Clock className="mr-2 h-4 w-4" />
+                    In Progress
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onAddColumn(COLUMN_TEMPLATES.done)}>
+                    <CheckSquare className="mr-2 h-4 w-4" />
+                    Done
+                  </DropdownMenuItem>
+                  {columnTemplates.map((template, index) => (
+                    <DropdownMenuItem 
+                      key={index}
+                      onClick={() => onAddColumn(template)}
+                    >
+                      <Star className="mr-2 h-4 w-4" />
+                      {template.title || `Template ${index + 1}`}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </motion.div>
         )}
       </div>
     </div>