@moontra/moonui-pro 2.12.0 → 2.14.0

package/src/components/kanban/card-detail-modal.tsx

@@ -0,0 +1,769 @@
+"use client"
+
+import React, { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Textarea } from '../ui/textarea'
+import { Label } from '../ui/label'
+import { MoonUIBadgePro as Badge } from '../ui/badge'
+import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, AvatarGroup as MoonUIAvatarGroupPro } from '../ui/avatar'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
+import { Calendar as CalendarComponent } from '../ui/calendar'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
+import { ScrollArea } from '../ui/scroll-area'
+import { Progress } from '../ui/progress'
+import { Separator } from '../ui/separator'
+import { Checkbox } from '../ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../ui/dropdown-menu'
+import { 
+  X, 
+  Calendar, 
+  User, 
+  Tag, 
+  Paperclip, 
+  MessageCircle,
+  Clock,
+  Flag,
+  CheckSquare,
+  Plus,
+  MoreHorizontal,
+  Edit2,
+  Trash2,
+  Download,
+  Eye,
+  Link2,
+  Archive,
+  Copy,
+  Activity,
+  AlertCircle,
+  Check,
+  ChevronDown,
+  Upload,
+  FileText,
+  Image,
+  FileIcon,
+  Send,
+  Star,
+  StarOff
+} from 'lucide-react'
+import { format } from 'date-fns'
+import { cn } from '../../lib/utils'
+import type { KanbanCard, KanbanAssignee, KanbanLabel, KanbanActivity, KanbanChecklist } from './types'
+
+interface CardDetailModalProps {
+  card: KanbanCard
+  isOpen: boolean
+  onClose: () => void
+  onUpdate: (card: KanbanCard) => void
+  onDelete: (card: KanbanCard) => void
+  availableAssignees?: KanbanAssignee[]
+  availableLabels?: KanbanLabel[]
+  currentColumn?: string
+  availableColumns?: { id: string; title: string }[]
+}
+
+const PRIORITY_OPTIONS = [
+  { value: 'low', label: 'Low', icon: Flag, color: 'text-green-600' },
+  { value: 'medium', label: 'Medium', icon: Flag, color: 'text-yellow-600' },
+  { value: 'high', label: 'High', icon: Flag, color: 'text-orange-600' },
+  { value: 'urgent', label: 'Urgent', icon: AlertCircle, color: 'text-red-600' }
+]
+
+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]
+}
+
+const getInitials = (name: string) => {
+  return name.split(' ').map(n => n[0]).join('').toUpperCase()
+}
+
+export function CardDetailModal({
+  card: initialCard,
+  isOpen,
+  onClose,
+  onUpdate,
+  onDelete,
+  availableAssignees = [],
+  availableLabels = [],
+  currentColumn,
+  availableColumns = []
+}: CardDetailModalProps) {
+  const [card, setCard] = useState(initialCard)
+  const [isEditingTitle, setIsEditingTitle] = useState(false)
+  const [isEditingDescription, setIsEditingDescription] = useState(false)
+  const [newComment, setNewComment] = useState('')
+  const [newChecklistItem, setNewChecklistItem] = useState('')
+  const [selectedTab, setSelectedTab] = useState('overview')
+
+  useEffect(() => {
+    setCard(initialCard)
+  }, [initialCard])
+
+  const updateCard = (updates: Partial<KanbanCard>) => {
+    const updatedCard = { ...card, ...updates }
+    setCard(updatedCard)
+    onUpdate(updatedCard)
+  }
+
+  const addComment = () => {
+    if (!newComment.trim()) return
+
+    const newActivity: KanbanActivity = {
+      id: Date.now().toString(),
+      user: {
+        id: 'current-user',
+        name: 'Current User',
+        email: 'user@example.com'
+      },
+      action: 'commented',
+      timestamp: new Date(),
+      details: newComment
+    }
+
+    updateCard({
+      activities: [newActivity, ...(card.activities || [])],
+      comments: (card.comments || 0) + 1
+    })
+    setNewComment('')
+  }
+
+  const addChecklistItem = () => {
+    if (!newChecklistItem.trim()) return
+
+    const checklist = card.checklist || {
+      id: Date.now().toString(),
+      title: 'Checklist',
+      items: []
+    }
+
+    checklist.items.push({
+      id: Date.now().toString(),
+      text: newChecklistItem,
+      completed: false
+    })
+
+    updateCard({ checklist })
+    setNewChecklistItem('')
+  }
+
+  const toggleChecklistItem = (itemId: string) => {
+    if (!card.checklist) return
+
+    const updatedChecklist = {
+      ...card.checklist,
+      items: card.checklist.items.map(item =>
+        item.id === itemId ? { ...item, completed: !item.completed } : item
+      )
+    }
+
+    updateCard({ checklist: updatedChecklist })
+  }
+
+  const deleteChecklistItem = (itemId: string) => {
+    if (!card.checklist) return
+
+    const updatedChecklist = {
+      ...card.checklist,
+      items: card.checklist.items.filter(item => item.id !== itemId)
+    }
+
+    updateCard({ checklist: updatedChecklist })
+  }
+
+  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
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files) return
+
+    const newAttachments = Array.from(files).map(file => ({
+      id: Date.now().toString() + Math.random(),
+      name: file.name,
+      type: file.type,
+      url: URL.createObjectURL(file),
+      size: file.size
+    }))
+
+    updateCard({
+      attachments: [...(card.attachments || []), ...newAttachments]
+    })
+  }
+
+  const removeAttachment = (attachmentId: string) => {
+    updateCard({
+      attachments: card.attachments?.filter(a => a.id !== attachmentId)
+    })
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
+        {/* Header */}
+        <div className="p-6 pb-0">
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              {isEditingTitle ? (
+                <Input
+                  value={card.title}
+                  onChange={(e) => updateCard({ title: e.target.value })}
+                  onBlur={() => setIsEditingTitle(false)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') setIsEditingTitle(false)
+                    if (e.key === 'Escape') {
+                      setCard(initialCard)
+                      setIsEditingTitle(false)
+                    }
+                  }}
+                  className="text-xl font-semibold"
+                  autoFocus
+                />
+              ) : (
+                <h2 
+                  className="text-xl font-semibold cursor-pointer hover:bg-muted rounded px-2 -mx-2 py-1"
+                  onClick={() => setIsEditingTitle(true)}
+                >
+                  {card.title}
+                </h2>
+              )}
+              {currentColumn && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  in {currentColumn}
+                </p>
+              )}
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className="h-8 w-8"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex-1">
+          <div className="px-6 pt-4">
+            <TabsList>
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="activity">
+                Activity
+                {card.activities && card.activities.length > 0 && (
+                  <Badge variant="secondary" className="ml-2">
+                    {card.activities.length}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="comments">
+                Comments
+                {card.comments && card.comments > 0 && (
+                  <Badge variant="secondary" className="ml-2">
+                    {card.comments}
+                  </Badge>
+                )}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <ScrollArea className="flex-1 max-h-[calc(90vh-200px)]">
+            <div className="p-6">
+              <TabsContent value="overview" className="mt-0">
+                <div className="space-y-6">
+                  {/* Description */}
+                  <div>
+                    <Label className="text-base font-semibold mb-2 block">Description</Label>
+                    {isEditingDescription ? (
+                      <div className="space-y-2">
+                        <Textarea
+                          value={card.description || ''}
+                          onChange={(e) => updateCard({ description: e.target.value })}
+                          placeholder="Add a description..."
+                          className="min-h-[100px]"
+                          autoFocus
+                        />
+                        <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            onClick={() => setIsEditingDescription(false)}
+                          >
+                            Save
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                              setCard(initialCard)
+                              setIsEditingDescription(false)
+                            }}
+                          >
+                            Cancel
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div
+                        className="min-h-[50px] p-3 rounded-md border cursor-pointer hover:bg-muted/50"
+                        onClick={() => setIsEditingDescription(true)}
+                      >
+                        {card.description || (
+                          <span className="text-muted-foreground">Add a description...</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Details Grid */}
+                  <div className="grid grid-cols-2 gap-4">
+                    {/* Assignees */}
+                    <div>
+                      <Label className="text-sm font-medium mb-2 block">Assignees</Label>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button variant="outline" className="w-full justify-start">
+                            {card.assignees && card.assignees.length > 0 ? (
+                              <div className="flex items-center gap-2">
+                                <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>
+                                <span className="text-sm">
+                                  {card.assignees.map(a => a.name).join(', ')}
+                                </span>
+                              </div>
+                            ) : (
+                              <span className="text-muted-foreground">Add assignee</span>
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="p-0" align="start">
+                          <Command>
+                            <CommandInput placeholder="Search assignees..." />
+                            <CommandEmpty>No assignees found.</CommandEmpty>
+                            <CommandGroup>
+                              {availableAssignees.map((assignee) => {
+                                const isSelected = card.assignees?.some(a => a.id === assignee.id)
+                                return (
+                                  <CommandItem
+                                    key={assignee.id}
+                                    onSelect={() => {
+                                      if (isSelected) {
+                                        updateCard({
+                                          assignees: card.assignees?.filter(a => a.id !== assignee.id)
+                                        })
+                                      } else {
+                                        updateCard({
+                                          assignees: [...(card.assignees || []), assignee]
+                                        })
+                                      }
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        isSelected ? "opacity-100" : "opacity-0"
+                                      )}
+                                    />
+                                    <MoonUIAvatarPro className="h-6 w-6 mr-2">
+                                      <MoonUIAvatarImagePro src={assignee.avatar} />
+                                      <MoonUIAvatarFallbackPro className="text-xs">
+                                        {getInitials(assignee.name)}
+                                      </MoonUIAvatarFallbackPro>
+                                    </MoonUIAvatarPro>
+                                    <span>{assignee.name}</span>
+                                  </CommandItem>
+                                )
+                              })}
+                            </CommandGroup>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* Priority */}
+                    <div>
+                      <Label className="text-sm font-medium mb-2 block">Priority</Label>
+                      <Select value={card.priority || 'medium'} onValueChange={(value: any) => updateCard({ priority: value })}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {PRIORITY_OPTIONS.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              <div className="flex items-center gap-2">
+                                <option.icon className={cn("h-4 w-4", option.color)} />
+                                <span>{option.label}</span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Due Date */}
+                    <div>
+                      <Label className="text-sm font-medium mb-2 block">Due Date</Label>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button variant="outline" className="w-full justify-start">
+                            {card.dueDate ? (
+                              <>
+                                <Calendar className="mr-2 h-4 w-4" />
+                                {format(card.dueDate, 'PPP')}
+                              </>
+                            ) : (
+                              <span className="text-muted-foreground">Set due date</span>
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <CalendarComponent
+                            mode="single"
+                            selected={card.dueDate}
+                            onSelect={(date) => {
+                              if (date instanceof Date) {
+                                updateCard({ dueDate: date })
+                              } else {
+                                updateCard({ dueDate: undefined })
+                              }
+                            }}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* Labels */}
+                    <div>
+                      <Label className="text-sm font-medium mb-2 block">Labels</Label>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button variant="outline" className="w-full justify-start">
+                            {card.labels && card.labels.length > 0 ? (
+                              <div className="flex flex-wrap gap-1">
+                                {card.labels.map((label) => (
+                                  <div
+                                    key={label.id}
+                                    className="px-2 py-0.5 rounded text-xs text-white"
+                                    style={{ backgroundColor: label.color }}
+                                  >
+                                    {label.name}
+                                  </div>
+                                ))}
+                              </div>
+                            ) : (
+                              <span className="text-muted-foreground">Add labels</span>
+                            )}
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="p-3" align="start">
+                          <div className="space-y-2">
+                            {availableLabels.map((label) => {
+                              const isSelected = card.labels?.some(l => l.id === label.id)
+                              return (
+                                <div
+                                  key={label.id}
+                                  className={cn(
+                                    "flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-muted",
+                                    isSelected && "bg-muted"
+                                  )}
+                                  onClick={() => {
+                                    if (isSelected) {
+                                      updateCard({
+                                        labels: card.labels?.filter(l => l.id !== label.id)
+                                      })
+                                    } else {
+                                      updateCard({
+                                        labels: [...(card.labels || []), label]
+                                      })
+                                    }
+                                  }}
+                                >
+                                  <div
+                                    className="w-6 h-6 rounded"
+                                    style={{ backgroundColor: label.color }}
+                                  />
+                                  <span className="text-sm">{label.name}</span>
+                                  {isSelected && <Check className="h-4 w-4 ml-auto" />}
+                                </div>
+                              )
+                            })}
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+
+                  {/* Checklist */}
+                  <div>
+                    <div className="flex items-center justify-between mb-3">
+                      <Label className="text-base font-semibold">Checklist</Label>
+                      {totalChecklistItems > 0 && (
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm text-muted-foreground">
+                            {completedChecklistItems}/{totalChecklistItems}
+                          </span>
+                          <Progress value={checklistProgress} className="w-20 h-2" />
+                        </div>
+                      )}
+                    </div>
+                    <div className="space-y-2">
+                      {card.checklist?.items.map((item) => (
+                        <div key={item.id} className="flex items-center gap-2 group">
+                          <Checkbox
+                            checked={item.completed}
+                            onCheckedChange={() => toggleChecklistItem(item.id)}
+                          />
+                          <span className={cn(
+                            "flex-1",
+                            item.completed && "line-through text-muted-foreground"
+                          )}>
+                            {item.text}
+                          </span>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 opacity-0 group-hover:opacity-100"
+                            onClick={() => deleteChecklistItem(item.id)}
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      ))}
+                      <div className="flex items-center gap-2">
+                        <Checkbox disabled className="invisible" />
+                        <Input
+                          placeholder="Add an item..."
+                          value={newChecklistItem}
+                          onChange={(e) => setNewChecklistItem(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault()
+                              addChecklistItem()
+                            }
+                          }}
+                        />
+                        <Button
+                          size="sm"
+                          onClick={addChecklistItem}
+                          disabled={!newChecklistItem.trim()}
+                        >
+                          Add
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Attachments */}
+                  <div>
+                    <Label className="text-base font-semibold mb-3 block">Attachments</Label>
+                    <div className="space-y-2">
+                      {card.attachments?.map((attachment) => (
+                        <div key={attachment.id} className="flex items-center gap-3 p-3 border rounded-lg group">
+                          <div className="flex-shrink-0">
+                            {attachment.type.startsWith('image/') ? (
+                              <Image className="h-8 w-8 text-muted-foreground" />
+                            ) : (
+                              <FileText className="h-8 w-8 text-muted-foreground" />
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium truncate">{attachment.name}</p>
+                            <p className="text-xs text-muted-foreground">{formatFileSize(attachment.size)}</p>
+                          </div>
+                          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8"
+                              onClick={() => window.open(attachment.url, '_blank')}
+                            >
+                              <Download className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8"
+                              onClick={() => removeAttachment(attachment.id)}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                      <div>
+                        <input
+                          type="file"
+                          id="file-upload"
+                          className="hidden"
+                          multiple
+                          onChange={handleFileUpload}
+                        />
+                        <Button
+                          variant="outline"
+                          className="w-full"
+                          onClick={() => document.getElementById('file-upload')?.click()}
+                        >
+                          <Upload className="mr-2 h-4 w-4" />
+                          Add attachment
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="activity" className="mt-0">
+                <div className="space-y-4">
+                  {card.activities?.map((activity) => (
+                    <div key={activity.id} className="flex gap-3">
+                      <MoonUIAvatarPro className="h-8 w-8">
+                        <MoonUIAvatarImagePro src={activity.user.avatar} />
+                        <MoonUIAvatarFallbackPro className="text-xs">
+                          {getInitials(activity.user.name)}
+                        </MoonUIAvatarFallbackPro>
+                      </MoonUIAvatarPro>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="font-medium text-sm">{activity.user.name}</span>
+                          <span className="text-sm text-muted-foreground">{activity.action}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {format(activity.timestamp, 'PPp')}
+                          </span>
+                        </div>
+                        {activity.details && (
+                          <p className="text-sm text-muted-foreground">{activity.details}</p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                  {(!card.activities || card.activities.length === 0) && (
+                    <div className="text-center py-8 text-muted-foreground">
+                      <Activity className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                      <p>No activity yet</p>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              <TabsContent value="comments" className="mt-0">
+                <div className="space-y-4">
+                  {/* Comment Input */}
+                  <div className="flex gap-3">
+                    <MoonUIAvatarPro className="h-8 w-8">
+                      <MoonUIAvatarFallbackPro>U</MoonUIAvatarFallbackPro>
+                    </MoonUIAvatarPro>
+                    <div className="flex-1 space-y-2">
+                      <Textarea
+                        placeholder="Add a comment..."
+                        value={newComment}
+                        onChange={(e) => setNewComment(e.target.value)}
+                        className="min-h-[80px]"
+                      />
+                      <div className="flex justify-end">
+                        <Button
+                          size="sm"
+                          onClick={addComment}
+                          disabled={!newComment.trim()}
+                        >
+                          <Send className="mr-2 h-4 w-4" />
+                          Comment
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Separator />
+
+                  {/* Comments List */}
+                  {card.activities?.filter(a => a.action === 'commented').map((comment) => (
+                    <div key={comment.id} className="flex gap-3">
+                      <MoonUIAvatarPro className="h-8 w-8">
+                        <MoonUIAvatarImagePro src={comment.user.avatar} />
+                        <MoonUIAvatarFallbackPro className="text-xs">
+                          {getInitials(comment.user.name)}
+                        </MoonUIAvatarFallbackPro>
+                      </MoonUIAvatarPro>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="font-medium text-sm">{comment.user.name}</span>
+                          <span className="text-xs text-muted-foreground">
+                            {format(comment.timestamp, 'PPp')}
+                          </span>
+                        </div>
+                        <p className="text-sm">{comment.details}</p>
+                      </div>
+                    </div>
+                  ))}
+                  {!card.activities?.some(a => a.action === 'commented') && (
+                    <div className="text-center py-8 text-muted-foreground">
+                      <MessageCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                      <p>No comments yet</p>
+                      <p className="text-sm">Be the first to comment</p>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+            </div>
+          </ScrollArea>
+        </Tabs>
+
+        {/* Footer Actions */}
+        <div className="border-t p-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <MoreHorizontal className="h-4 w-4 mr-2" />
+                  Actions
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>
+                  <Copy className="mr-2 h-4 w-4" />
+                  Duplicate card
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Archive className="mr-2 h-4 w-4" />
+                  Archive card
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Link2 className="mr-2 h-4 w-4" />
+                  Copy link
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => {
+                    onDelete(card)
+                    onClose()
+                  }}
+                  className="text-destructive"
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete card
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <Button onClick={onClose}>Close</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}