@moontra/moonui-pro 2.12.0 → 2.13.0

package/src/components/kanban/index.ts

@@ -0,0 +1,13 @@
+export { Kanban } from './kanban'
+export { CardDetailModal } from './card-detail-modal'
+export { AddCardModal } from './add-card-modal'
+export type { 
+  KanbanCard, 
+  KanbanColumn, 
+  KanbanProps, 
+  KanbanAssignee, 
+  KanbanLabel,
+  KanbanFilter,
+  KanbanActivity,
+  KanbanChecklist
+} from './types'

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

@@ -65,119 +65,22 @@ import {
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { useSubscription } from '../../hooks/use-subscription'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../ui/dialog'
+import { ColorPicker } from '../ui/color-picker'
+import { CardDetailModal } from './card-detail-modal'
+import { AddCardModal } from './add-card-modal'
+import type { 
+  KanbanAssignee, 
+  KanbanLabel, 
+  KanbanChecklist, 
+  KanbanActivity, 
+  KanbanCard, 
+  KanbanColumn, 
+  KanbanFilter, 
+  KanbanProps 
+} from './types'
+import { useToast } from '../../hooks/use-toast'
 
-// Enhanced types
-interface KanbanAssignee {
-  id: string
-  name: string
-  avatar?: string
-  email?: string
-}
-
-interface KanbanLabel {
-  id: string
-  name: string
-  color: string
-}
-
-interface KanbanChecklist {
-  id: string
-  title: string
-  items: {
-    id: string
-    text: string
-    completed: boolean
-  }[]
-}
-
-interface KanbanActivity {
-  id: string
-  user: KanbanAssignee
-  action: string
-  timestamp: Date
-  details?: string
-}
-
-interface KanbanCard {
-  id: string
-  title: string
-  description?: string
-  coverImage?: string
-  assignees?: KanbanAssignee[]
-  dueDate?: Date
-  startDate?: Date
-  priority?: 'low' | 'medium' | 'high' | 'urgent'
-  tags?: string[]
-  labels?: KanbanLabel[]
-  attachments?: {
-    id: string
-    name: string
-    type: string
-    url: string
-    size: number
-  }[]
-  comments?: number
-  completed?: boolean
-  progress?: number
-  checklist?: KanbanChecklist
-  activities?: KanbanActivity[]
-  customFields?: Record<string, any>
-  position: number
-}
-
-interface KanbanColumn {
-  id: string
-  title: string
-  color?: string
-  cards: KanbanCard[]
-  limit?: number
-  collapsed?: boolean
-  locked?: boolean
-  template?: 'todo' | 'inProgress' | 'done' | 'custom'
-}
-
-interface KanbanFilter {
-  id: string
-  name: string
-  query: string
-  assignees?: string[]
-  labels?: string[]
-  priority?: string[]
-  tags?: string[]
-  dueDate?: {
-    from?: Date
-    to?: Date
-  }
-}
-
-interface KanbanProps {
-  columns: KanbanColumn[]
-  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newPosition: number) => void
-  onCardClick?: (card: KanbanCard) => void
-  onCardEdit?: (card: KanbanCard) => void
-  onCardDelete?: (card: KanbanCard) => void
-  onCardUpdate?: (card: KanbanCard) => void
-  onAddCard?: (columnId: string, card?: Partial<KanbanCard>) => void
-  onAddColumn?: (column?: Partial<KanbanColumn>) => void
-  onColumnUpdate?: (column: KanbanColumn) => void
-  onColumnDelete?: (columnId: string) => void
-  onBulkAction?: (action: string, cardIds: string[]) => void
-  onExport?: (format: 'json' | 'csv') => void
-  className?: string
-  showAddColumn?: boolean
-  showCardDetails?: boolean
-  showFilters?: boolean
-  showSearch?: boolean
-  enableKeyboardShortcuts?: boolean
-  cardTemplates?: Partial<KanbanCard>[]
-  columnTemplates?: Partial<KanbanColumn>[]
-  filters?: KanbanFilter[]
-  defaultFilter?: string
-  loading?: boolean
-  disabled?: boolean
-  labels?: KanbanLabel[]
-  users?: KanbanAssignee[]
-}
 
 // Constants
 const PRIORITY_CONFIG = {
@@ -584,8 +487,21 @@ export function Kanban({
   const [draggedOverColumn, setDraggedOverColumn] = useState<string | null>(null)
   const [isCreatingColumn, setIsCreatingColumn] = useState(false)
   const [newColumnTitle, setNewColumnTitle] = useState('')
+  
+  // Modal states
+  const [selectedCard, setSelectedCard] = useState<KanbanCard | null>(null)
+  const [addCardColumnId, setAddCardColumnId] = useState<string | null>(null)
+  const [editingColumnId, setEditingColumnId] = useState<string | null>(null)
+  const [editingColumnTitle, setEditingColumnTitle] = useState('')
+  const [wipLimitModalOpen, setWipLimitModalOpen] = useState(false)
+  const [wipLimitColumnId, setWipLimitColumnId] = useState<string | null>(null)
+  const [wipLimit, setWipLimit] = useState<number | undefined>()
+  const [colorPickerOpen, setColorPickerOpen] = useState(false)
+  const [colorPickerColumnId, setColorPickerColumnId] = useState<string | null>(null)
+  const [selectedColor, setSelectedColor] = useState('#6B7280')
 
   const { scrollRef, startAutoScroll, stopAutoScroll } = useAutoScroll()
+  const { toast } = useToast()
 
   // Filter cards based on search and filters
   const filteredColumns = useMemo(() => {
@@ -729,17 +645,221 @@ export function Kanban({
   const handleColumnAction = (column: KanbanColumn, action: string) => {
     switch (action) {
       case 'rename':
-        // Implement inline rename
+        setEditingColumnId(column.id)
+        setEditingColumnTitle(column.title)
         break
       case 'delete':
         onColumnDelete?.(column.id)
+        toast({
+          title: "Column deleted",
+          description: `"${column.title}" has been deleted`
+        })
         break
       case 'collapse':
-        onColumnUpdate?.({ ...column, collapsed: !column.collapsed })
+        const updatedColumn = { ...column, collapsed: !column.collapsed }
+        onColumnUpdate?.(updatedColumn)
+        setColumns(columns.map(col => col.id === column.id ? updatedColumn : col))
         break
       case 'setLimit':
-        // Implement WIP limit dialog
+        setWipLimitColumnId(column.id)
+        setWipLimit(column.limit)
+        setWipLimitModalOpen(true)
+        break
+      case 'changeColor':
+        setColorPickerColumnId(column.id)
+        setSelectedColor(column.color || '#6B7280')
+        setColorPickerOpen(true)
         break
+      case 'sortByPriority':
+        const sortedCards = [...column.cards].sort((a, b) => {
+          const priorityOrder = { urgent: 4, high: 3, medium: 2, low: 1 }
+          return (priorityOrder[b.priority || 'medium'] || 2) - (priorityOrder[a.priority || 'medium'] || 2)
+        })
+        const sortedColumn = { ...column, cards: sortedCards }
+        onColumnUpdate?.(sortedColumn)
+        setColumns(columns.map(col => col.id === column.id ? sortedColumn : col))
+        toast({
+          title: "Cards sorted",
+          description: "Cards sorted by priority"
+        })
+        break
+      case 'sortByDueDate':
+        const dateCards = [...column.cards].sort((a, b) => {
+          if (!a.dueDate && !b.dueDate) return 0
+          if (!a.dueDate) return 1
+          if (!b.dueDate) return -1
+          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
+        })
+        const dateColumn = { ...column, cards: dateCards }
+        onColumnUpdate?.(dateColumn)
+        setColumns(columns.map(col => col.id === column.id ? dateColumn : col))
+        toast({
+          title: "Cards sorted",
+          description: "Cards sorted by due date"
+        })
+        break
+      case 'sortAlphabetically':
+        const alphaCards = [...column.cards].sort((a, b) => a.title.localeCompare(b.title))
+        const alphaColumn = { ...column, cards: alphaCards }
+        onColumnUpdate?.(alphaColumn)
+        setColumns(columns.map(col => col.id === column.id ? alphaColumn : col))
+        toast({
+          title: "Cards sorted",
+          description: "Cards sorted alphabetically"
+        })
+        break
+    }
+  }
+
+  // Card handlers
+  const handleCardClick = (card: KanbanCard) => {
+    if (onCardClick) {
+      onCardClick(card)
+    } else {
+      setSelectedCard(card)
+    }
+  }
+
+  const handleCardUpdate = (updatedCard: KanbanCard) => {
+    onCardUpdate?.(updatedCard)
+    setColumns(columns.map(col => ({
+      ...col,
+      cards: col.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
+    })))
+  }
+
+  const handleAddCard = (columnId: string, newCard?: Partial<KanbanCard>) => {
+    if (onAddCard) {
+      onAddCard(columnId, newCard)
+    } else {
+      setAddCardColumnId(columnId)
+    }
+  }
+
+  const handleAddNewCard = (card: Partial<KanbanCard>) => {
+    if (!addCardColumnId) return
+    
+    const newCard: KanbanCard = {
+      id: Date.now().toString(),
+      title: card.title || 'New Card',
+      position: Date.now(),
+      ...card
+    }
+    
+    setColumns(columns.map(col => {
+      if (col.id === addCardColumnId) {
+        return {
+          ...col,
+          cards: [...col.cards, newCard]
+        }
+      }
+      return col
+    }))
+    
+    onAddCard?.(addCardColumnId, newCard)
+    toast({
+      title: "Card added",
+      description: `"${newCard.title}" has been added`
+    })
+  }
+
+  // Column updates
+  const handleColumnRename = (columnId: string) => {
+    const column = columns.find(col => col.id === columnId)
+    if (!column || !editingColumnTitle.trim()) return
+    
+    const updatedColumn = { ...column, title: editingColumnTitle.trim() }
+    onColumnUpdate?.(updatedColumn)
+    setColumns(columns.map(col => col.id === columnId ? updatedColumn : col))
+    setEditingColumnId(null)
+    setEditingColumnTitle('')
+    
+    toast({
+      title: "Column renamed",
+      description: `Column renamed to "${editingColumnTitle.trim()}"`
+    })
+  }
+
+  const handleWipLimitUpdate = () => {
+    const column = columns.find(col => col.id === wipLimitColumnId)
+    if (!column) return
+    
+    const updatedColumn = { ...column, limit: wipLimit }
+    onColumnUpdate?.(updatedColumn)
+    setColumns(columns.map(col => col.id === wipLimitColumnId ? updatedColumn : col))
+    setWipLimitModalOpen(false)
+    
+    toast({
+      title: "WIP limit updated",
+      description: wipLimit ? `WIP limit set to ${wipLimit}` : "WIP limit removed"
+    })
+  }
+
+  const handleColorUpdate = () => {
+    const column = columns.find(col => col.id === colorPickerColumnId)
+    if (!column) return
+    
+    const updatedColumn = { ...column, color: selectedColor }
+    onColumnUpdate?.(updatedColumn)
+    setColumns(columns.map(col => col.id === colorPickerColumnId ? updatedColumn : col))
+    setColorPickerOpen(false)
+    
+    toast({
+      title: "Column color updated",
+      description: "Column color has been changed"
+    })
+  }
+
+  // Export functionality
+  const handleExport = (format: 'json' | 'csv') => {
+    if (onExport) {
+      onExport(format)
+    } else {
+      if (format === 'json') {
+        const data = JSON.stringify(columns, null, 2)
+        const blob = new Blob([data], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = 'kanban-board.json'
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        
+        toast({
+          title: "Board exported",
+          description: "Board exported as JSON file"
+        })
+      } else if (format === 'csv') {
+        let csv = 'Column,Card Title,Description,Priority,Assignees,Due Date,Tags\n'
+        columns.forEach(column => {
+          column.cards.forEach(card => {
+            csv += `"${column.title}",`
+            csv += `"${card.title}",`
+            csv += `"${card.description || ''}",`
+            csv += `"${card.priority || ''}",`
+            csv += `"${card.assignees?.map(a => a.name).join(', ') || ''}",`
+            csv += `"${card.dueDate ? new Date(card.dueDate).toLocaleDateString() : ''}",`
+            csv += `"${card.tags?.join(', ') || ''}"\n`
+          })
+        })
+        
+        const blob = new Blob([csv], { type: 'text/csv' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = 'kanban-board.csv'
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+        
+        toast({
+          title: "Board exported",
+          description: "Board exported as CSV file"
+        })
+      }
     }
   }
 
@@ -855,8 +975,7 @@ export function Kanban({
               )}
 
               {/* Export */}
-              {onExport && (
-                <DropdownMenu>
+              <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button variant="outline" size="sm">
                       <Download className="mr-2 h-4 w-4" />
@@ -864,15 +983,14 @@ export function Kanban({
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => onExport('json')}>
+                    <DropdownMenuItem onClick={() => handleExport('json')}>
                       Export as JSON
                     </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => onExport('csv')}>
+                    <DropdownMenuItem onClick={() => handleExport('csv')}>
                       Export as CSV
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
-              )}
             </div>
           </div>
 
@@ -940,8 +1058,30 @@ export function Kanban({
                         
                         {/* Column title */}
                         <CardTitle className="text-sm font-medium flex items-center gap-2">
-                          {column.title}
-                          {column.locked && <Lock className="h-3 w-3" />}
+                          {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 */}
@@ -986,14 +1126,27 @@ export function Kanban({
                                 <Timer className="mr-2 h-4 w-4" />
                                 Set WIP limit
                               </DropdownMenuItem>
-                              <DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => handleColumnAction(column, 'changeColor')}>
                                 <Palette className="mr-2 h-4 w-4" />
                                 Change color
                               </DropdownMenuItem>
-                              <DropdownMenuItem>
-                                <ArrowUpDown className="mr-2 h-4 w-4" />
-                                Sort cards
-                              </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 />
@@ -1056,7 +1209,7 @@ export function Kanban({
                                     e.stopPropagation()
                                     onCardDelete?.(card)
                                   }}
-                                  onClick={() => onCardClick?.(card)}
+                                  onClick={() => handleCardClick(card)}
                                   showDetails={showCardDetails}
                                   disabled={disabled}
                                 />
@@ -1082,14 +1235,14 @@ export function Kanban({
                           <DropdownMenuContent align="start" className="w-48">
                             <DropdownMenuLabel>Card Templates</DropdownMenuLabel>
                             <DropdownMenuSeparator />
-                            <DropdownMenuItem onClick={() => onAddCard(column.id)}>
+                            <DropdownMenuItem onClick={() => handleAddCard(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)}
+                                onClick={() => handleAddCard(column.id, template)}
                               >
                                 <Star className="mr-2 h-4 w-4" />
                                 {template.title || `Template ${index + 1}`}
@@ -1207,8 +1360,115 @@ export function Kanban({
           </motion.div>
         )}
       </div>
+
+      {/* Modals */}
+      {/* Card Detail Modal */}
+      {selectedCard && (
+        <CardDetailModal
+          card={selectedCard}
+          isOpen={!!selectedCard}
+          onClose={() => setSelectedCard(null)}
+          onUpdate={handleCardUpdate}
+          onDelete={(card) => {
+            onCardDelete?.(card)
+            toast({
+              title: "Card deleted",
+              description: `"${card.title}" has been deleted`
+            })
+          }}
+          availableAssignees={users}
+          availableLabels={labels}
+          currentColumn={columns.find(col => col.cards.some(c => c.id === selectedCard.id))?.title}
+          availableColumns={columns.map(col => ({ id: col.id, title: col.title }))}
+        />
+      )}
+
+      {/* Add Card Modal */}
+      {addCardColumnId && (
+        <AddCardModal
+          isOpen={!!addCardColumnId}
+          onClose={() => setAddCardColumnId(null)}
+          onAdd={handleAddNewCard}
+          columnId={addCardColumnId}
+          columnTitle={columns.find(col => col.id === addCardColumnId)?.title || ''}
+          availableAssignees={users}
+          availableLabels={labels}
+          templates={cardTemplates}
+        />
+      )}
+
+      {/* WIP Limit Modal */}
+      <Dialog open={wipLimitModalOpen} onOpenChange={setWipLimitModalOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Set WIP Limit</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="wip-limit">Work In Progress Limit</Label>
+              <Input
+                id="wip-limit"
+                type="number"
+                min="0"
+                value={wipLimit || ''}
+                onChange={(e) => setWipLimit(e.target.value ? parseInt(e.target.value) : undefined)}
+                placeholder="Enter a number (leave empty to remove limit)"
+              />
+              <p className="text-sm text-muted-foreground">
+                Set a maximum number of cards allowed in this column. Leave empty to remove the limit.
+              </p>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setWipLimitModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleWipLimitUpdate}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Color Picker Modal */}
+      <Dialog open={colorPickerOpen} onOpenChange={setColorPickerOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Change Column Color</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>Select a color</Label>
+              <div className="grid grid-cols-8 gap-2">
+                {[
+                  '#6B7280', '#EF4444', '#F59E0B', '#10B981', 
+                  '#3B82F6', '#8B5CF6', '#EC4899', '#06B6D4',
+                  '#F43F5E', '#84CC16', '#14B8A6', '#6366F1',
+                  '#A855F7', '#F472B6', '#0EA5E9', '#22D3EE'
+                ].map(color => (
+                  <button
+                    key={color}
+                    className={cn(
+                      "w-10 h-10 rounded-md border-2 transition-all",
+                      selectedColor === color ? "border-primary scale-110" : "border-transparent"
+                    )}
+                    style={{ backgroundColor: color }}
+                    onClick={() => setSelectedColor(color)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setColorPickerOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleColorUpdate}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
-}
-
-export default Kanban
+}