@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/calendar-pro/index.tsx

@@ -1,1697 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import {
-  Calendar as CalendarIcon,
-  ChevronLeft,
-  ChevronRight,
-  Plus,
-  Search,
-  Filter,
-  MoreHorizontal,
-  Download,
-  Upload,
-  Settings,
-  X,
-  Clock,
-  MapPin,
-  Users,
-  Link,
-  Tag,
-  AlertCircle,
-  Check,
-  Edit,
-  Trash,
-  Copy,
-  Share2,
-  ExternalLink,
-  Repeat,
-  Bell,
-  Video,
-  Phone,
-  Mail,
-  FileText,
-  FileSpreadsheet,
-  FileCode,
-  User,
-  Briefcase,
-  Home,
-  Activity,
-  Cake,
-  Heart,
-  Star,
-  Flag,
-  Bookmark,
-  Archive,
-  Send,
-  Globe,
-  Zap,
-  Cpu,
-  Cloud,
-  Sun,
-  Moon,
-  Coffee,
-  Gift,
-  Plane,
-  Car,
-  Printer,
-  Music,
-  Camera,
-  Book,
-  Gamepad2,
-  Tv,
-  Bike,
-  Train,
-  Ship,
-  Rocket,
-  Mountain,
-  Trees,
-  CloudRain,
-  CloudSnow,
-  Sunrise,
-  Sunset,
-  Wind,
-  Droplets,
-  Thermometer,
-  Eye,
-  EyeOff,
-  Lock,
-  Unlock,
-  Shield,
-  ShieldAlert,
-  ShieldCheck,
-  CircleCheck,
-  CircleX,
-  CircleAlert,
-  Info,
-  HelpCircle,
-  FileImage,
-  FileVideo,
-  FileAudio,
-  FolderOpen,
-  Database,
-  Server,
-  Monitor,
-  Smartphone,
-  Tablet,
-  Watch,
-  Headphones,
-  Speaker,
-  Mic,
-  MicOff,
-  Volume2,
-  VolumeX,
-  Wifi,
-  WifiOff,
-  Bluetooth,
-  Battery,
-  BatteryLow,
-  Power,
-  Plug,
-  Lightbulb,
-  Flashlight,
-  Sparkles,
-  Stars,
-  Crown,
-  Trophy,
-  Medal,
-  Award,
-  Stamp,
-  Ticket,
-  Receipt,
-  CreditCard,
-  Wallet,
-  DollarSign,
-  Euro,
-  IndianRupee,
-  Bitcoin,
-  Coins,
-  PiggyBank,
-  Calculator,
-  BarChart,
-  LineChart,
-  PieChart,
-  TrendingUp,
-  TrendingDown,
-  Target,
-  Crosshair,
-  Compass,
-  Map,
-  Navigation,
-  Milestone,
-  Signpost,
-  Construction,
-  Hammer,
-  Wrench,
-  Paintbrush,
-  Palette as PaletteIcon,
-  Layers,
-  Layout,
-  Grid,
-  Columns,
-  Rows,
-  PanelLeft,
-  PanelRight,
-  PanelTop,
-  PanelBottom,
-  Sidebar,
-  Terminal,
-  Code,
-  CodeSquare,
-  Binary,
-  Braces,
-  Brackets,
-  Hash,
-  Bug,
-  GitBranch,
-  GitCommit,
-  GitMerge,
-  GitPullRequest,
-  Github,
-  Gitlab,
-  Package,
-  Box,
-  Archive as ArchiveIcon,
-  SendHorizontal,
-  Reply,
-  Forward,
-  Undo,
-  Redo,
-  RotateCw,
-  RotateCcw,
-  Shuffle,
-  Play,
-  Pause,
-  Square,
-  Circle,
-  Triangle,
-  Hexagon,
-  Diamond,
-  Gem,
-  Shapes,
-  Brush,
-  Eraser,
-  Pen,
-  PenTool,
-  Pencil,
-  Highlighter,
-  Type,
-  Bold,
-  Italic,
-  Underline,
-  Strikethrough,
-  AlignLeft,
-  AlignCenter,
-  AlignRight,
-  AlignJustify,
-  Indent,
-  Outdent,
-  ListOrdered,
-  ListTree,
-  ListChecks,
-  ListX,
-  CheckSquare,
-  Square as SquareIcon,
-  CircleDot,
-  CircleDashed,
-  CircleEllipsis,
-  CirclePlus,
-  CircleMinus,
-  CircleEqual,
-  CircleSlash,
-  CircleSlash2,
-  CircleOff,
-  CircleUser,
-  CircleUserRound,
-  CircleFadingPlus,
-  UserPlus,
-  UserMinus,
-  UserCheck,
-  UserX,
-  UsersRound,
-  Building,
-  Building2,
-  Warehouse,
-  Factory,
-  Store,
-  ShoppingBag,
-  Package2,
-  Truck,
-  Ship as ShipIcon,
-  Anchor,
-  Waves,
-  Fish,
-  Shell,
-  Bug as BugIcon,
-  Bird,
-  GraduationCap,
-  ClipboardList,
-  ShoppingCart
-} from 'lucide-react'
-import { cn } from '../../lib/utils'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Button } from '../ui/button'
-import { Badge } from '../ui/badge'
-import { Input } from '../ui/input'
-import { Label } from '../ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog'
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import { Textarea } from '../ui/textarea'
-import { Switch } from '../ui/switch'
-import { Checkbox } from '../ui/checkbox'
-import { RadioGroup, RadioGroupItem } from '../ui/radio-group'
-import { Separator } from '../ui/separator'
-import { ScrollArea } from '../ui/scroll-area'
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '../ui/dropdown-menu'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
-import { motion, AnimatePresence, LayoutGroup, useMotionValue, useTransform, animate } from 'framer-motion'
-import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addWeeks, addMonths, addYears, subMonths, subYears, isSameMonth, isSameDay, isToday, isBefore, isAfter, differenceInDays, differenceInWeeks, differenceInMonths, parseISO, startOfDay, endOfDay, isWithinInterval, eachDayOfInterval, getDay, setHours, setMinutes, startOfYear, endOfYear, eachMonthOfInterval, getDaysInMonth, getWeek, startOfISOWeek, endOfISOWeek, addHours, subHours, isSameHour, differenceInHours, differenceInMinutes, addMinutes, subMinutes, isSameMinute, setSeconds, setMilliseconds, subDays, subWeeks } from 'date-fns'
-// Removed react-beautiful-dnd imports - using HTML5 drag & drop instead
-import { Calendar as CalendarBase } from '../ui/calendar'
-import { HexColorPicker } from 'react-colorful'
-
-// Types
-export interface CalendarEvent {
-  id: string
-  title: string
-  description?: string
-  start: Date
-  end: Date
-  allDay?: boolean
-  color?: string
-  category?: string
-  location?: string
-  attendees?: Array<{
-    id: string
-    name: string
-    email: string
-    avatar?: string
-    status?: 'accepted' | 'declined' | 'tentative' | 'pending'
-  }>
-  reminders?: Array<{
-    type: 'email' | 'notification' | 'sms'
-    before: number // minutes before event
-  }>
-  recurring?: {
-    pattern: 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom'
-    interval: number
-    endDate?: Date
-    endAfter?: number // number of occurrences
-    daysOfWeek?: number[] // 0-6 for weekly pattern
-    dayOfMonth?: number // for monthly pattern
-    monthOfYear?: number // for yearly pattern
-    exceptions?: Date[] // dates to skip
-  }
-  status?: 'confirmed' | 'tentative' | 'cancelled'
-  visibility?: 'public' | 'private' | 'confidential'
-  priority?: 'low' | 'medium' | 'high'
-  tags?: string[]
-  attachments?: Array<{
-    id: string
-    name: string
-    url: string
-    type: string
-    size: number
-  }>
-  meetingUrl?: string
-  phoneNumber?: string
-  reminder?: boolean
-  reminderTime?: number
-  notes?: string
-  createdAt?: Date
-  updatedAt?: Date
-  createdBy?: string
-  updatedBy?: string
-}
-
-export interface CalendarCategory {
-  id: string
-  name: string
-  color: string
-  icon?: React.ReactNode
-}
-
-export interface CalendarView {
-  id: string
-  name: string
-  type: 'day' | 'week' | 'month' | 'year' | 'agenda' | 'custom'
-  default?: boolean
-  config?: any
-}
-
-export interface CalendarProProps {
-  events?: CalendarEvent[]
-  categories?: CalendarCategory[]
-  views?: CalendarView[]
-  defaultView?: string
-  height?: string | number
-  className?: string
-  sidebarCollapsed?: boolean
-  onSidebarToggle?: (collapsed: boolean) => void
-  onEventClick?: (event: CalendarEvent, e: React.MouseEvent) => void
-  onEventCreate?: (event: Partial<CalendarEvent>) => void
-  onEventUpdate?: (event: CalendarEvent) => void
-  onEventDelete?: (eventId: string) => void
-  onEventDrop?: (eventId: string, start: Date, end: Date) => void
-  onDateSelect?: (date: Date) => void
-  onViewChange?: (viewId: string) => void
-  allowEventCreation?: boolean
-  allowEventDeletion?: boolean
-  allowEventDragging?: boolean
-  showWeekNumbers?: boolean
-  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
-  timeFormat?: '12h' | '24h'
-  locale?: string
-  workingHours?: { start: number; end: number }
-  nonWorkingDays?: number[]
-  holidays?: Array<{ date: Date; name: string }>
-  customEventRenderer?: (event: CalendarEvent, view: string) => React.ReactNode
-  customHeaderRenderer?: (date: Date, view: string) => React.ReactNode
-  customCellRenderer?: (date: Date, events: CalendarEvent[], view: string) => React.ReactNode
-  eventColors?: Record<string, string>
-  onExport?: (format: 'ics' | 'csv' | 'json', events: CalendarEvent[]) => void
-  onImport?: (file: File) => void
-  integrations?: {
-    google?: boolean
-    outlook?: boolean
-    apple?: boolean
-  }
-  theme?: 'light' | 'dark' | 'system'
-}
-
-// Default categories
-const defaultCategories: CalendarCategory[] = [
-  { id: 'personal', name: 'Personal', color: '#3b82f6', icon: <User className="h-4 w-4" /> },
-  { id: 'work', name: 'Work', color: '#10b981', icon: <Briefcase className="h-4 w-4" /> },
-  { id: 'meeting', name: 'Meeting', color: '#f59e0b', icon: <Users className="h-4 w-4" /> },
-  { id: 'task', name: 'Task', color: '#8b5cf6', icon: <ClipboardList className="h-4 w-4" /> },
-  { id: 'reminder', name: 'Reminder', color: '#ef4444', icon: <Bell className="h-4 w-4" /> },
-  { id: 'holiday', name: 'Holiday', color: '#ec4899', icon: <CalendarIcon className="h-4 w-4" /> },
-  { id: 'birthday', name: 'Birthday', color: '#f472b6', icon: <Cake className="h-4 w-4" /> },
-  { id: 'other', name: 'Other', color: '#6b7280', icon: <Tag className="h-4 w-4" /> }
-]
-
-// Default views
-const defaultViews: CalendarView[] = [
-  { id: 'day', name: 'Day', type: 'day' },
-  { id: 'week', name: 'Week', type: 'week', default: true },
-  { id: 'month', name: 'Month', type: 'month' },
-  { id: 'year', name: 'Year', type: 'year' },
-  { id: 'agenda', name: 'Agenda', type: 'agenda' }
-]
-
-export const CalendarPro = React.forwardRef<HTMLDivElement, CalendarProProps>(({
-  events = [],
-  categories = defaultCategories,
-  views = defaultViews,
-  defaultView,
-  height = '100vh',
-  className,
-  sidebarCollapsed: controlledSidebarCollapsed,
-  onSidebarToggle,
-  onEventClick,
-  onEventCreate,
-  onEventUpdate,
-  onEventDelete,
-  onEventDrop,
-  onDateSelect,
-  onViewChange,
-  allowEventCreation = true,
-  allowEventDeletion = true,
-  allowEventDragging = true,
-  showWeekNumbers = true,
-  firstDayOfWeek = 1,
-  timeFormat = '24h',
-  locale = 'en-US',
-  workingHours = { start: 9, end: 17 },
-  nonWorkingDays = [0, 6],
-  holidays = [],
-  customEventRenderer,
-  customHeaderRenderer,
-  customCellRenderer,
-  eventColors = {},
-  onExport,
-  onImport,
-  integrations = {},
-  theme = 'system',
-  ...props
-}, ref) => {
-  // Drag state
-  const [draggedEventId, setDraggedEventId] = useState<string | null>(null)
-  const [dragOverInfo, setDragOverInfo] = useState<{ date: Date; hour?: number } | null>(null)
-  const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false)
-  const sidebarCollapsed = controlledSidebarCollapsed ?? internalSidebarCollapsed
-  
-  const setSidebarCollapsed = useCallback((collapsed: boolean) => {
-    setInternalSidebarCollapsed(collapsed)
-    onSidebarToggle?.(collapsed)
-  }, [onSidebarToggle])
-  
-  const [currentDate, setCurrentDate] = useState(new Date())
-  const [currentView, setCurrentView] = useState(() => {
-    if (defaultView) {
-      return defaultView
-    }
-    const defaultViewObj = views.find(v => v.default)
-    return defaultViewObj ? defaultViewObj.id : views[0].id
-  })
-  
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
-  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
-  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false)
-  const [isCreating, setIsCreating] = useState(false)
-  const [newEventStart, setNewEventStart] = useState<Date | null>(null)
-  const [newEventEnd, setNewEventEnd] = useState<Date | null>(null)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
-  const [editingEvent, setEditingEvent] = useState<Partial<CalendarEvent>>({})
-  const [isDragging, setIsDragging] = useState(false)
-  const [draggedEvent, setDraggedEvent] = useState<CalendarEvent | null>(null)
-  const [dropTarget, setDropTarget] = useState<{ date: Date; time?: string } | null>(null)
-  
-  const calendarRef = useRef<HTMLDivElement>(null)
-  
-  // Get current view config
-  const currentViewConfig = useMemo(() => {
-    return views.find(v => v.id === currentView) || views[0]
-  }, [currentView, views])
-  
-  // Filter events based on search and categories
-  const filteredEvents = useMemo(() => {
-    return events.filter(event => {
-      const matchesSearch = !searchQuery || 
-        event.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        event.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        event.location?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        event.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
-      
-      const matchesCategory = selectedCategories.length === 0 || 
-        (event.category && selectedCategories.includes(event.category))
-      
-      return matchesSearch && matchesCategory
-    })
-  }, [events, searchQuery, selectedCategories])
-  
-  // Get events for current view
-  const eventsInView = useMemo(() => {
-    const viewType = currentViewConfig.type
-    let start: Date
-    let end: Date
-    
-    switch (viewType) {
-      case 'day':
-        start = startOfDay(currentDate)
-        end = endOfDay(currentDate)
-        break
-      case 'week':
-        start = startOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
-        end = endOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
-        break
-      case 'month':
-        start = startOfMonth(currentDate)
-        end = endOfMonth(currentDate)
-        break
-      case 'year':
-        start = startOfYear(currentDate)
-        end = endOfYear(currentDate)
-        break
-      case 'agenda':
-        start = startOfDay(currentDate)
-        end = addDays(currentDate, 30)
-        break
-      default:
-        start = startOfDay(currentDate)
-        end = endOfDay(currentDate)
-    }
-    
-    return filteredEvents.filter(event => {
-      const eventStart = new Date(event.start)
-      const eventEnd = new Date(event.end)
-      return isWithinInterval(eventStart, { start, end }) ||
-             isWithinInterval(eventEnd, { start, end }) ||
-             (isBefore(eventStart, start) && isAfter(eventEnd, end))
-    })
-  }, [filteredEvents, currentDate, currentViewConfig, firstDayOfWeek])
-  
-  // Handle view change
-  const handleViewChange = useCallback((viewId: string) => {
-    setCurrentView(viewId)
-    onViewChange?.(viewId)
-  }, [onViewChange])
-  
-  // Handle date navigation
-  const navigateDate = useCallback((direction: 'prev' | 'next') => {
-    const viewType = currentViewConfig.type
-    let newDate: Date
-    
-    switch (viewType) {
-      case 'day':
-        newDate = direction === 'prev' ? subDays(currentDate, 1) : addDays(currentDate, 1)
-        break
-      case 'week':
-        newDate = direction === 'prev' ? subWeeks(currentDate, 1) : addWeeks(currentDate, 1)
-        break
-      case 'month':
-        newDate = direction === 'prev' ? subMonths(currentDate, 1) : addMonths(currentDate, 1)
-        break
-      case 'year':
-        newDate = direction === 'prev' ? subYears(currentDate, 1) : addYears(currentDate, 1)
-        break
-      default:
-        newDate = currentDate
-    }
-    
-    setCurrentDate(newDate)
-  }, [currentDate, currentViewConfig])
-  
-  // Handle date selection
-  const handleDateSelect = useCallback((date: Date) => {
-    setSelectedDate(date)
-    setCurrentDate(date)
-    onDateSelect?.(date)
-    
-    if (allowEventCreation && currentViewConfig.type !== 'year') {
-      setNewEventStart(date)
-      setNewEventEnd(addHours(date, 1))
-      setIsCreating(true)
-      setIsEventDialogOpen(true)
-    }
-  }, [allowEventCreation, currentViewConfig, onDateSelect])
-  
-  // Handle event click
-  const handleEventClick = useCallback((event: CalendarEvent, e: React.MouseEvent) => {
-    e.stopPropagation()
-    setSelectedEvent(event)
-    setEditingEvent(event)
-    setIsEventDialogOpen(true)
-    setIsCreating(false)
-    onEventClick?.(event, e)
-  }, [onEventClick])
-  
-  // Handle event save
-  const handleEventSave = useCallback(() => {
-    if (isCreating && onEventCreate) {
-      onEventCreate(editingEvent)
-    } else if (selectedEvent && onEventUpdate) {
-      onEventUpdate({ ...selectedEvent, ...editingEvent } as CalendarEvent)
-    }
-    
-    setIsEventDialogOpen(false)
-    setSelectedEvent(null)
-    setEditingEvent({})
-    setIsCreating(false)
-    setNewEventStart(null)
-    setNewEventEnd(null)
-  }, [isCreating, selectedEvent, editingEvent, onEventCreate, onEventUpdate])
-  
-  // Handle event delete
-  const handleEventDelete = useCallback(() => {
-    if (selectedEvent && onEventDelete) {
-      onEventDelete(selectedEvent.id)
-      setIsEventDialogOpen(false)
-      setSelectedEvent(null)
-      setEditingEvent({})
-    }
-  }, [selectedEvent, onEventDelete])
-  
-  // Handle drag start
-  const handleDragStart = useCallback((e: React.DragEvent, event: CalendarEvent) => {
-    if (!allowEventDragging) return
-    
-    setDraggedEventId(event.id)
-    setIsDragging(true)
-    
-    // Store event data in dataTransfer
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', event.id)
-    
-    // Create drag image with preserved dimensions
-    const dragImage = e.currentTarget.cloneNode(true) as HTMLElement
-    const originalRect = e.currentTarget.getBoundingClientRect()
-    dragImage.style.opacity = '0.8'
-    dragImage.style.position = 'absolute'
-    dragImage.style.top = '-1000px'
-    dragImage.style.width = `${originalRect.width}px`
-    dragImage.style.height = `${originalRect.height}px`
-    dragImage.style.boxSizing = 'border-box'
-    document.body.appendChild(dragImage)
-    e.dataTransfer.setDragImage(dragImage, e.nativeEvent.offsetX, e.nativeEvent.offsetY)
-    setTimeout(() => document.body.removeChild(dragImage), 0)
-  }, [allowEventDragging])
-  
-  // Handle drag over
-  const handleDragOver = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
-    e.preventDefault()
-    e.dataTransfer.dropEffect = 'move'
-    setDragOverInfo({ date, hour })
-  }, [])
-  
-  // Handle drag leave
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    // Only clear if we're leaving the drop zone entirely
-    const rect = e.currentTarget.getBoundingClientRect()
-    const x = e.clientX
-    const y = e.clientY
-    
-    if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
-      setDragOverInfo(null)
-    }
-  }, [])
-  
-  // Handle drop
-  const handleDrop = useCallback((e: React.DragEvent, date: Date, hour?: number) => {
-    e.preventDefault()
-    
-    const eventId = e.dataTransfer.getData('text/plain')
-    const draggedEvent = events.find(ev => ev.id === eventId)
-    
-    if (!draggedEvent || !onEventDrop) return
-    
-    // Calculate new start and end times
-    let newStart: Date
-    let newEnd: Date
-    
-    if (hour !== undefined) {
-      // Dropped on a specific hour slot
-      newStart = setHours(setMinutes(date, 0), hour)
-    } else {
-      // Dropped on a day (keep original time)
-      const originalHours = draggedEvent.start.getHours()
-      const originalMinutes = draggedEvent.start.getMinutes()
-      newStart = setHours(setMinutes(date, originalMinutes), originalHours)
-    }
-    
-    // Keep the same duration
-    const duration = differenceInMinutes(draggedEvent.end, draggedEvent.start)
-    newEnd = addMinutes(newStart, duration)
-    
-    // Update event
-    onEventDrop(draggedEvent.id, newStart, newEnd)
-    
-    // Reset drag state
-    setDraggedEventId(null)
-    setDragOverInfo(null)
-    setIsDragging(false)
-  }, [events, onEventDrop])
-  
-  // Handle drag end (cleanup)
-  const handleDragEnd = useCallback(() => {
-    setDraggedEventId(null)
-    setDragOverInfo(null)
-    setIsDragging(false)
-  }, [])
-  
-  // Export calendar
-  const exportCalendar = useCallback((format: 'ics' | 'csv' | 'json') => {
-    if (onExport) {
-      onExport(format, eventsInView)
-    } else {
-      // Default export implementation
-      const data = eventsInView
-      let content: string
-      let mimeType: string
-      let filename: string
-      
-      switch (format) {
-        case 'json':
-          content = JSON.stringify(data, null, 2)
-          mimeType = 'application/json'
-          filename = 'calendar.json'
-          break
-        case 'csv':
-          // Simple CSV export
-          const headers = ['Title', 'Start', 'End', 'Location', 'Description']
-          const rows = data.map(event => [
-            event.title,
-            event.start.toISOString(),
-            event.end.toISOString(),
-            event.location || '',
-            event.description || ''
-          ])
-          content = [headers, ...rows].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n')
-          mimeType = 'text/csv'
-          filename = 'calendar.csv'
-          break
-        case 'ics':
-          // Simple ICS export
-          const icsEvents = data.map(event => {
-            const start = event.start.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
-            const end = event.end.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
-            return `BEGIN:VEVENT
-UID:${event.id}@calendar.app
-DTSTART:${start}Z
-DTEND:${end}Z
-SUMMARY:${event.title}
-${event.description ? `DESCRIPTION:${event.description}` : ''}
-${event.location ? `LOCATION:${event.location}` : ''}
-END:VEVENT`
-          }).join('\n')
-          
-          content = `BEGIN:VCALENDAR
-VERSION:2.0
-PRODID:-//Calendar App//EN
-${icsEvents}
-END:VCALENDAR`
-          mimeType = 'text/calendar'
-          filename = 'calendar.ics'
-          break
-        default:
-          return
-      }
-      
-      const blob = new Blob([content], { type: mimeType })
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = url
-      link.download = filename
-      link.click()
-      URL.revokeObjectURL(url)
-    }
-  }, [eventsInView, onExport])
-  
-  // Render day view
-  const renderDayView = () => {
-    const hours = Array.from({ length: 24 }, (_, i) => i)
-    const dayEvents = eventsInView.filter(event => 
-      isSameDay(new Date(event.start), currentDate)
-    )
-    
-    return (
-      <div className="flex flex-1 overflow-hidden">
-        <div className="flex-1 overflow-auto">
-          <div className="min-h-full">
-            {/* All day events */}
-            <div 
-              className={cn(
-                "border-b p-2",
-                dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
-              )}
-              onDragOver={(e) => handleDragOver(e, currentDate)}
-              onDragLeave={handleDragLeave}
-              onDrop={(e) => handleDrop(e, currentDate)}
-            >
-              <div className="text-xs text-muted-foreground mb-1">All Day</div>
-              <div className="space-y-1">
-                {dayEvents
-                  .filter(event => event.allDay)
-                  .map(event => (
-                    <div
-                      key={event.id}
-                      draggable={allowEventDragging}
-                      onDragStart={(e) => handleDragStart(e, event)}
-                      onDragEnd={handleDragEnd}
-                      className="p-2 rounded text-xs cursor-pointer hover:opacity-80"
-                      style={{ 
-                        backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                        color: '#ffffff',
-                        opacity: draggedEventId === event.id ? 0.5 : 1
-                      }}
-                      onClick={(e) => handleEventClick(event, e)}
-                    >
-                      {event.title}
-                    </div>
-                  ))}
-              </div>
-            </div>
-            
-            {/* Time slots */}
-            <div className="relative">
-              {hours.map(hour => (
-                <div key={hour} className="flex border-b" style={{ height: '60px' }}>
-                  <div className="w-16 p-2 text-xs text-muted-foreground text-right">
-                    {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
-                  </div>
-                  <div 
-                    className={cn(
-                      "flex-1 relative border-l cursor-pointer hover:bg-muted/20",
-                      dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, currentDate) && "bg-primary/10"
-                    )}
-                    onDragOver={(e) => handleDragOver(e, currentDate, hour)}
-                    onDragLeave={handleDragLeave}
-                    onDrop={(e) => handleDrop(e, currentDate, hour)}
-                    onClick={() => {
-                      if (allowEventCreation) {
-                        const clickedTime = setHours(setMinutes(currentDate, 0), hour)
-                        setNewEventStart(clickedTime)
-                        setNewEventEnd(addHours(clickedTime, 1))
-                        setEditingEvent({
-                          title: '',
-                          start: clickedTime,
-                          end: addHours(clickedTime, 1),
-                          allDay: false
-                        })
-                        setIsCreating(true)
-                        setIsEventDialogOpen(true)
-                      }
-                    }}
-                  >
-                    {/* Events in this hour */}
-                    {dayEvents
-                      .filter(event => {
-                        if (event.allDay) return false
-                        const eventHour = new Date(event.start).getHours()
-                        return eventHour === hour
-                      })
-                      .map(event => {
-                        const startMinutes = new Date(event.start).getMinutes()
-                        const duration = differenceInMinutes(new Date(event.end), new Date(event.start))
-                        const height = (duration / 60) * 60
-                        const top = (startMinutes / 60) * 60
-                        
-                        return (
-                          <div
-                            key={event.id}
-                            draggable={allowEventDragging}
-                            onDragStart={(e) => handleDragStart(e, event)}
-                            onDragEnd={handleDragEnd}
-                            className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
-                            style={{
-                              top: `${top}px`,
-                              height: `${height}px`,
-                              backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                              color: '#ffffff',
-                              zIndex: 10,
-                              opacity: draggedEventId === event.id ? 0.5 : 1,
-                              cursor: allowEventDragging ? 'move' : 'pointer'
-                            }}
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              handleEventClick(event, e)
-                            }}
-                          >
-                            <div className="font-medium">{event.title}</div>
-                            <div className="text-xs opacity-80">
-                              {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
-                            </div>
-                          </div>
-                        )
-                      })}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-  
-  // Render week view
-  const renderWeekView = () => {
-    const weekStart = startOfWeek(currentDate, { weekStartsOn: firstDayOfWeek })
-    const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
-    const hours = Array.from({ length: 24 }, (_, i) => i)
-    
-    return (
-      <div className="flex flex-1 overflow-hidden">
-        <div className="flex-1 overflow-auto">
-          <div className="min-h-full">
-            {/* Header */}
-            <div className="sticky top-0 z-20 bg-background border-b">
-              <div className="flex">
-                <div className="w-16" />
-                {weekDays.map(day => (
-                  <div 
-                    key={day.toISOString()} 
-                    className={cn(
-                      "flex-1 p-2 text-center border-l",
-                      isToday(day) && "bg-primary/10"
-                    )}
-                  >
-                    <div className="text-xs text-muted-foreground">
-                      {format(day, 'EEE')}
-                    </div>
-                    <div className={cn(
-                      "text-lg font-medium",
-                      isToday(day) && "text-primary"
-                    )}>
-                      {format(day, 'd')}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            
-            {/* Time grid */}
-            <div className="relative">
-              {hours.map(hour => (
-                <div key={hour} className="flex" style={{ height: '60px' }}>
-                  <div className="w-16 p-2 text-xs text-muted-foreground text-right border-b">
-                    {format(setHours(new Date(), hour), timeFormat === '12h' ? 'h a' : 'HH:00')}
-                  </div>
-                  {weekDays.map(day => {
-                    const dayEvents = eventsInView.filter(event => 
-                      isSameDay(new Date(event.start), day) && !event.allDay
-                    )
-                    return (
-                      <div 
-                        key={day.toISOString()} 
-                        className={cn(
-                          "flex-1 relative border-l border-b cursor-pointer hover:bg-muted/20",
-                          isToday(day) && "bg-primary/5",
-                          dragOverInfo?.date && dragOverInfo?.hour === hour && isSameDay(dragOverInfo.date, day) && "bg-primary/10"
-                        )}
-                        onDragOver={(e) => handleDragOver(e, day, hour)}
-                        onDragLeave={handleDragLeave}
-                        onDrop={(e) => handleDrop(e, day, hour)}
-                        onClick={() => {
-                          if (allowEventCreation) {
-                            const clickedTime = setHours(setMinutes(day, 0), hour)
-                            setNewEventStart(clickedTime)
-                            setNewEventEnd(addHours(clickedTime, 1))
-                            setEditingEvent({
-                              title: '',
-                              start: clickedTime,
-                              end: addHours(clickedTime, 1),
-                              allDay: false
-                            })
-                            setIsCreating(true)
-                            setIsEventDialogOpen(true)
-                          }
-                        }}
-                      >
-                        {dayEvents
-                          .filter(event => {
-                            const eventHour = new Date(event.start).getHours()
-                            return eventHour === hour
-                          })
-                          .map(event => {
-                            const startMinutes = new Date(event.start).getMinutes()
-                            const duration = differenceInMinutes(new Date(event.end), new Date(event.start))
-                            const height = (duration / 60) * 60
-                            const top = (startMinutes / 60) * 60
-                            
-                            return (
-                              <div
-                                key={event.id}
-                                draggable={allowEventDragging}
-                                onDragStart={(e) => handleDragStart(e, event)}
-                                onDragEnd={handleDragEnd}
-                                className="absolute left-0 right-0 mx-1 p-1 rounded text-xs cursor-pointer hover:opacity-80 overflow-hidden"
-                                style={{
-                                  top: `${top}px`,
-                                  height: `${height}px`,
-                                  backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                                  color: '#ffffff',
-                                  zIndex: 10,
-                                  opacity: draggedEventId === event.id ? 0.5 : 1,
-                                  cursor: allowEventDragging ? 'move' : 'pointer'
-                                }}
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  handleEventClick(event, e)
-                                }}
-                              >
-                                {event.title}
-                              </div>
-                            )
-                          })}
-                      </div>
-                    )
-                  })}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-  
-  // Render month view
-  const renderMonthView = () => {
-    const monthStart = startOfMonth(currentDate)
-    const monthEnd = endOfMonth(currentDate)
-    const startDate = startOfWeek(monthStart, { weekStartsOn: firstDayOfWeek })
-    const endDate = endOfWeek(monthEnd, { weekStartsOn: firstDayOfWeek })
-    const days = eachDayOfInterval({ start: startDate, end: endDate })
-    const weeks = []
-    
-    for (let i = 0; i < days.length; i += 7) {
-      weeks.push(days.slice(i, i + 7))
-    }
-    
-    return (
-      <div className="flex-1 p-4 overflow-auto">
-        <div className="min-h-full">
-          {/* Weekday headers */}
-          <div className="grid grid-cols-7 gap-px mb-2">
-            {weeks[0].map(day => (
-              <div 
-                key={day.toISOString()} 
-                className="p-2 text-center text-sm font-medium text-muted-foreground"
-              >
-                {format(day, 'EEE')}
-              </div>
-            ))}
-          </div>
-          
-          {/* Calendar grid */}
-          {weeks.map((week, weekIndex) => (
-            <div key={weekIndex} className="grid grid-cols-7 gap-px">
-              {week.map(day => {
-                const dayEvents = eventsInView.filter(event => 
-                  isSameDay(new Date(event.start), day)
-                )
-                const isCurrentMonth = isSameMonth(day, currentDate)
-                
-                return (
-                  <div
-                    key={day.toISOString()}
-                    className={cn(
-                      "min-h-[100px] p-2 border rounded-lg cursor-pointer transition-colors",
-                      !isCurrentMonth && "opacity-50",
-                      isToday(day) && "bg-primary/10 border-primary",
-                      "hover:bg-muted/50",
-                      dragOverInfo?.date && !dragOverInfo?.hour && isSameDay(dragOverInfo.date, day) && "bg-primary/20 border-primary"
-                    )}
-                    onDragOver={(e) => handleDragOver(e, day)}
-                    onDragLeave={handleDragLeave}
-                    onDrop={(e) => handleDrop(e, day)}
-                    onClick={() => handleDateSelect(day)}
-                  >
-                    <div className={cn(
-                      "text-sm font-medium mb-1",
-                      isToday(day) && "text-primary"
-                    )}>
-                      {format(day, 'd')}
-                    </div>
-                    <div className="space-y-1">
-                      {dayEvents.slice(0, 3).map(event => {
-                        return (
-                          <div
-                            key={event.id}
-                            draggable={allowEventDragging}
-                            onDragStart={(e) => handleDragStart(e, event)}
-                            onDragEnd={handleDragEnd}
-                            className="text-xs p-1 rounded cursor-pointer truncate"
-                            style={{
-                              backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6',
-                              color: '#ffffff',
-                              opacity: draggedEventId === event.id ? 0.5 : 1,
-                              cursor: allowEventDragging ? 'move' : 'pointer'
-                            }}
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              handleEventClick(event, e)
-                            }}
-                          >
-                            {event.allDay ? (
-                              event.title
-                            ) : (
-                              <>
-                                {format(new Date(event.start), 'HH:mm')} {event.title}
-                              </>
-                            )}
-                          </div>
-                        )
-                      })}
-                      {dayEvents.length > 3 && (
-                        <div className="text-xs text-muted-foreground text-center">
-                          +{dayEvents.length - 3} more
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-  
-  const renderYearView = () => {
-    const yearStart = startOfYear(currentDate)
-    const yearEnd = endOfYear(currentDate)
-    const months = eachMonthOfInterval({ start: yearStart, end: yearEnd })
-    
-    return (
-      <div className="flex-1 overflow-auto p-4">
-        <div className="grid grid-cols-3 gap-4">
-          {months.map(month => {
-            const monthEvents = eventsInView.filter(event => {
-              const eventStart = new Date(event.start)
-              return isSameMonth(eventStart, month)
-            })
-            
-            return (
-              <Card
-                key={month.toISOString()}
-                className="cursor-pointer hover:shadow-lg transition-shadow"
-                onClick={() => {
-                  setCurrentDate(month)
-                  handleViewChange('month')
-                }}
-              >
-                <CardHeader className="pb-2">
-                  <CardTitle className="text-lg">
-                    {format(month, 'MMMM')}
-                  </CardTitle>
-                  <CardDescription>
-                    {monthEvents.length} events
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="grid grid-cols-7 gap-1 text-xs">
-                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
-                      <div key={`${day}-${index}`} className="text-center text-muted-foreground p-1">
-                        {day}
-                      </div>
-                    ))}
-                    {Array.from({ length: getDay(startOfMonth(month)) }, (_, i) => (
-                      <div key={`empty-${i}`} />
-                    ))}
-                    {Array.from({ length: getDaysInMonth(month) }, (_, i) => {
-                      const day = new Date(month.getFullYear(), month.getMonth(), i + 1)
-                      const hasEvents = monthEvents.some(event => 
-                        isSameDay(new Date(event.start), day)
-                      )
-                      
-                      return (
-                        <div
-                          key={i}
-                          className={cn(
-                            "text-center p-1 rounded",
-                            isToday(day) && "bg-primary text-primary-foreground",
-                            hasEvents && !isToday(day) && "bg-primary/20 font-medium"
-                          )}
-                        >
-                          {i + 1}
-                        </div>
-                      )
-                    })}
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-  
-  const renderAgendaView = () => {
-    const agendaDays = Array.from({ length: 30 }, (_, i) => addDays(currentDate, i))
-    
-    return (
-      <div className="flex-1 overflow-auto p-4">
-        <div className="space-y-4">
-          {agendaDays.map(day => {
-            const dayEvents = eventsInView.filter(event => 
-              isSameDay(new Date(event.start), day)
-            ).sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
-            
-            if (dayEvents.length === 0) return null
-            
-            return (
-              <Card key={day.toISOString()}>
-                <CardHeader className="pb-2">
-                  <CardTitle className="text-lg">
-                    {format(day, 'EEEE, MMMM d, yyyy')}
-                  </CardTitle>
-                  <CardDescription>
-                    {dayEvents.length} events
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="space-y-2">
-                    {dayEvents.map(event => (
-                      <div
-                        key={event.id}
-                        className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted/50 cursor-pointer"
-                        onClick={(e) => handleEventClick(event, e)}
-                      >
-                        <div
-                          className="w-1 h-full rounded"
-                          style={{
-                            backgroundColor: event.color || eventColors[event.category || ''] || '#3b82f6'
-                          }}
-                        />
-                        <div className="flex-1">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="font-medium">{event.title}</span>
-                            {event.priority && (
-                              <Badge variant={
-                                event.priority === 'high' ? 'destructive' :
-                                event.priority === 'medium' ? 'secondary' :
-                                'secondary'
-                              }>
-                                {event.priority}
-                              </Badge>
-                            )}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {event.allDay ? (
-                              'All day'
-                            ) : (
-                              <>
-                                {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
-                              </>
-                            )}
-                            {event.location && (
-                              <span className="ml-2">
-                                <MapPin className="inline h-3 w-3 mr-1" />
-                                {event.location}
-                              </span>
-                            )}
-                          </div>
-                          {event.description && (
-                            <p className="text-sm text-muted-foreground mt-1">
-                              {event.description}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-  
-  return (
-    <TooltipProvider>
-      <div className={cn("flex h-full w-full bg-background", className)} style={{ height }}>
-        {/* Sidebar */}
-        <motion.div
-          className={cn(
-            "border-r bg-muted/30 flex flex-col flex-shrink-0",
-            sidebarCollapsed ? "w-16" : "w-64"
-          )}
-          animate={{ width: sidebarCollapsed ? 64 : 256 }}
-          transition={{ type: "spring", stiffness: 300, damping: 30 }}
-        >
-          {/* Mini Calendar */}
-          {!sidebarCollapsed && (
-            <div className="p-4">
-              <CalendarBase
-                mode="single"
-                selected={currentDate}
-                onSelect={(date) => {
-                  if (date instanceof Date) {
-                    handleDateSelect(date);
-                  }
-                }}
-                className="rounded-md border"
-              />
-            </div>
-          )}
-          
-          {/* Categories */}
-          <div className="flex-1 overflow-auto p-4">
-            {sidebarCollapsed ? (
-              <div className="space-y-2">
-                {categories.map(category => (
-                  <Tooltip key={category.id}>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="w-full"
-                        onClick={() => {
-                          setSelectedCategories(prev =>
-                            prev.includes(category.id)
-                              ? prev.filter(c => c !== category.id)
-                              : [...prev, category.id]
-                          )
-                        }}
-                      >
-                        <div
-                          className="w-4 h-4 rounded"
-                          style={{ backgroundColor: category.color }}
-                        />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent side="right">
-                      {category.name}
-                    </TooltipContent>
-                  </Tooltip>
-                ))}
-              </div>
-            ) : (
-              <div className="space-y-2">
-                <div className="flex items-center justify-between mb-2">
-                  <h3 className="font-medium">Categories</h3>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => setSelectedCategories([])}
-                  >
-                    Clear
-                  </Button>
-                </div>
-                {categories.map(category => (
-                  <div
-                    key={category.id}
-                    className={cn(
-                      "flex items-center gap-2 p-2 rounded-lg cursor-pointer hover:bg-muted",
-                      selectedCategories.includes(category.id) && "bg-muted"
-                    )}
-                    onClick={() => {
-                      setSelectedCategories(prev =>
-                        prev.includes(category.id)
-                          ? prev.filter(c => c !== category.id)
-                          : [...prev, category.id]
-                      )
-                    }}
-                  >
-                    <Checkbox
-                      checked={selectedCategories.includes(category.id)}
-                      onCheckedChange={() => {}}
-                    />
-                    <div
-                      className="w-4 h-4 rounded"
-                      style={{ backgroundColor: category.color }}
-                    />
-                    {category.icon}
-                    <span className="text-sm">{category.name}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-          
-          {/* Sidebar Toggle */}
-          <div className="p-2 border-t">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="w-full"
-              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-            >
-              {sidebarCollapsed ? <PanelLeft /> : <PanelRight />}
-            </Button>
-          </div>
-        </motion.div>
-        
-        {/* Main Content */}
-        <div className="flex-1 flex flex-col overflow-hidden min-w-0">
-          {/* Header */}
-          <div className="border-b p-4 flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => navigateDate('prev')}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => navigateDate('next')}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => setCurrentDate(new Date())}
-                >
-                  Today
-                </Button>
-              </div>
-              
-              <h2 className="text-xl font-semibold">
-                {format(currentDate, 
-                  currentViewConfig.type === 'day' ? 'EEEE, MMMM d, yyyy' :
-                  currentViewConfig.type === 'week' ? "'Week of' MMMM d, yyyy" :
-                  currentViewConfig.type === 'month' ? 'MMMM yyyy' :
-                  currentViewConfig.type === 'year' ? 'yyyy' :
-                  'MMMM yyyy'
-                )}
-              </h2>
-            </div>
-            
-            <div className="flex items-center gap-2">
-              {/* Search */}
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-                <Input
-                  placeholder="Search events..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9 w-64"
-                />
-              </div>
-              
-              {/* View Selector */}
-              <Tabs value={currentView} onValueChange={handleViewChange}>
-                <TabsList>
-                  {views.map(view => (
-                    <TabsTrigger key={view.id} value={view.id}>
-                      {view.name}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
-              </Tabs>
-              
-              {/* Actions */}
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" size="icon">
-                    <MoreHorizontal className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-48">
-                  <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  {allowEventCreation && (
-                    <DropdownMenuItem
-                      onClick={() => {
-                        setNewEventStart(new Date())
-                        setNewEventEnd(addHours(new Date(), 1))
-                        setIsCreating(true)
-                        setIsEventDialogOpen(true)
-                      }}
-                    >
-                      <Plus className="h-4 w-4 mr-2" />
-                      Create Event
-                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <Download className="h-4 w-4 mr-2" />
-                      Export
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent>
-                      <DropdownMenuItem onClick={() => exportCalendar('ics')}>
-                        <FileText className="h-4 w-4 mr-2" />
-                        Export as ICS
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => exportCalendar('csv')}>
-                        <FileSpreadsheet className="h-4 w-4 mr-2" />
-                        Export as CSV
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => exportCalendar('json')}>
-                        <FileCode className="h-4 w-4 mr-2" />
-                        Export as JSON
-                      </DropdownMenuItem>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                  <DropdownMenuItem>
-                    <Printer className="h-4 w-4 mr-2" />
-                    Print
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Share2 className="h-4 w-4 mr-2" />
-                    Share
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <Settings className="h-4 w-4 mr-2" />
-                    Settings
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
-          
-          {/* Calendar View */}
-          <LayoutGroup>
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={currentView}
-                className="flex-1 overflow-hidden"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -20 }}
-                transition={{ duration: 0.2 }}
-              >
-                {currentViewConfig.type === 'day' && renderDayView()}
-                {currentViewConfig.type === 'week' && renderWeekView()}
-                {currentViewConfig.type === 'month' && renderMonthView()}
-                {currentViewConfig.type === 'year' && renderYearView()}
-                {currentViewConfig.type === 'agenda' && renderAgendaView()}
-              </motion.div>
-            </AnimatePresence>
-          </LayoutGroup>
-        </div>
-        
-        {/* Event Dialog */}
-        <Dialog open={isEventDialogOpen} onOpenChange={setIsEventDialogOpen}>
-          <DialogContent className="sm:max-w-[600px]">
-            <DialogHeader>
-              <DialogTitle>
-                {isCreating ? 'Create Event' : 'Edit Event'}
-              </DialogTitle>
-              <DialogDescription>
-                {isCreating ? 'Add a new event to your calendar' : 'Update event details'}
-              </DialogDescription>
-            </DialogHeader>
-            
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="title">Title</Label>
-                <Input
-                  id="title"
-                  value={editingEvent.title || ''}
-                  onChange={(e) => setEditingEvent({ ...editingEvent, title: e.target.value })}
-                  placeholder="Event title"
-                />
-              </div>
-              
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="start">Start</Label>
-                  <Input
-                    id="start"
-                    type="datetime-local"
-                    value={editingEvent.start ? format(editingEvent.start, "yyyy-MM-dd'T'HH:mm") : ''}
-                    onChange={(e) => setEditingEvent({ ...editingEvent, start: new Date(e.target.value) })}
-                  />
-                </div>
-                
-                <div className="space-y-2">
-                  <Label htmlFor="end">End</Label>
-                  <Input
-                    id="end"
-                    type="datetime-local"
-                    value={editingEvent.end ? format(editingEvent.end, "yyyy-MM-dd'T'HH:mm") : ''}
-                    onChange={(e) => setEditingEvent({ ...editingEvent, end: new Date(e.target.value) })}
-                  />
-                </div>
-              </div>
-              
-              <div className="flex items-center space-x-2">
-                <Switch
-                  id="allDay"
-                  checked={editingEvent.allDay || false}
-                  onCheckedChange={(checked) => setEditingEvent({ ...editingEvent, allDay: checked })}
-                />
-                <Label htmlFor="allDay">All day</Label>
-              </div>
-              
-              <div className="space-y-2">
-                <Label htmlFor="category">Category</Label>
-                <Select
-                  value={editingEvent.category || ''}
-                  onValueChange={(value) => setEditingEvent({ ...editingEvent, category: value })}
-                >
-                  <SelectTrigger id="category">
-                    <SelectValue placeholder="Select a category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {categories.map(category => (
-                      <SelectItem key={category.id} value={category.id}>
-                        <div className="flex items-center gap-2">
-                          <div
-                            className="w-3 h-3 rounded"
-                            style={{ backgroundColor: category.color }}
-                          />
-                          {category.name}
-                        </div>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              
-              <div className="space-y-2">
-                <Label htmlFor="location">Location</Label>
-                <Input
-                  id="location"
-                  value={editingEvent.location || ''}
-                  onChange={(e) => setEditingEvent({ ...editingEvent, location: e.target.value })}
-                  placeholder="Event location"
-                />
-              </div>
-              
-              <div className="space-y-2">
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  value={editingEvent.description || ''}
-                  onChange={(e) => setEditingEvent({ ...editingEvent, description: e.target.value })}
-                  placeholder="Event description"
-                />
-              </div>
-              
-              <div className="space-y-2">
-                <Label>Priority</Label>
-                <RadioGroup
-                  value={editingEvent.priority || 'medium'}
-                  onValueChange={(value) => setEditingEvent({ ...editingEvent, priority: value as any })}
-                >
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="low" id="low" />
-                    <Label htmlFor="low">Low</Label>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="medium" id="medium" />
-                    <Label htmlFor="medium">Medium</Label>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="high" id="high" />
-                    <Label htmlFor="high">High</Label>
-                  </div>
-                </RadioGroup>
-              </div>
-            </div>
-            
-            <DialogFooter>
-              {!isCreating && allowEventDeletion && (
-                <Button
-                  variant="destructive"
-                  onClick={handleEventDelete}
-                >
-                  Delete
-                </Button>
-              )}
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setIsEventDialogOpen(false)
-                  setEditingEvent({})
-                  setSelectedEvent(null)
-                  setIsCreating(false)
-                }}
-              >
-                Cancel
-              </Button>
-              <Button onClick={handleEventSave}>
-                {isCreating ? 'Create' : 'Save'}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    </TooltipProvider>
-  )
-})
-
-CalendarPro.displayName = 'CalendarPro'
-
-export default CalendarPro