@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/calendar/index.tsx

@@ -1,1220 +0,0 @@
-"use client"
-
-import React from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Button } from '../ui/button'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
-import { Input } from '../ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
-import { 
-  ChevronLeft, 
-  ChevronRight,
-  Calendar as CalendarIcon,
-  Plus,
-  Edit,
-  Trash2,
-  Clock,
-  MapPin,
-  User,
-  Lock,
-  Sparkles,
-  Search,
-  Filter,
-  Download,
-  Upload,
-  Grid3X3,
-  List,
-  CalendarDays,
-  Repeat,
-  Bell,
-  ChevronDown,
-  MoreHorizontal,
-  Tag,
-  Users,
-  Video,
-  Phone,
-  Globe,
-  Zap,
-  Sun,
-  Moon,
-  Palette,
-  Menu,
-  X
-} from 'lucide-react'
-import { cn } from '../../lib/utils'
-import { EventDialog } from './event-dialog'
-import { motion, AnimatePresence } from 'framer-motion'
-
-export interface CalendarEvent {
-  id: string
-  title: string
-  description?: string
-  date: Date
-  startTime?: string
-  endTime?: string
-  location?: string
-  attendees?: string[]
-  color?: string
-  type?: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference'
-  recurring?: {
-    pattern: 'daily' | 'weekly' | 'monthly' | 'yearly'
-    interval: number
-    endDate?: Date
-    daysOfWeek?: number[] // For weekly pattern
-    dayOfMonth?: number // For monthly pattern
-  }
-  reminder?: {
-    type: 'email' | 'notification' | 'sms'
-    before: number // minutes before event
-  }
-  priority?: 'low' | 'medium' | 'high'
-  status?: 'confirmed' | 'tentative' | 'cancelled'
-  attachments?: string[]
-  tags?: string[]
-  isAllDay?: boolean
-  isPrivate?: boolean
-  meetingLink?: string
-  phoneNumber?: string
-  timeZone?: string
-}
-
-interface CalendarProps {
-  events?: CalendarEvent[]
-  onEventClick?: (event: CalendarEvent) => void
-  onEventAdd?: (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => void
-  onEventEdit?: (eventData: Omit<CalendarEvent, 'id'> & { id: string }) => void
-  onEventDelete?: (eventId: string) => void
-  onDateChange?: (date: Date) => void
-  onViewChange?: (view: 'month' | 'week' | 'day' | 'year' | 'agenda') => void
-  onEventDrop?: (event: CalendarEvent, newDate: Date) => void
-  className?: string
-  showWeekends?: boolean
-  showEventDetails?: boolean
-  disabled?: boolean
-  minDate?: Date
-  maxDate?: Date
-  highlightToday?: boolean
-  height?: number
-  defaultView?: 'month' | 'week' | 'day' | 'year' | 'agenda'
-  enableDragDrop?: boolean
-  enableSearch?: boolean
-  enableFilters?: boolean
-  enableExport?: boolean
-  enableImport?: boolean
-  enableRecurringEvents?: boolean
-  enableReminders?: boolean
-  eventCategories?: Array<{ value: string; label: string; color: string }>
-  workingHours?: { start: string; end: string }
-  holidays?: Array<{ date: Date; name: string }>
-  locale?: string
-  timeFormat?: '12h' | '24h'
-  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6
-  theme?: 'light' | 'dark' | 'auto' | 'custom'
-  customTheme?: {
-    primary: string
-    secondary: string
-    accent: string
-    background: string
-    foreground: string
-  }
-  compactMode?: boolean
-  // For NPM package usage - allows external control of pro access
-  showProUpgrade?: boolean
-}
-
-const DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-const MONTHS = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December'
-]
-
-const EVENT_COLORS = {
-  meeting: 'bg-blue-500',
-  task: 'bg-green-500',
-  reminder: 'bg-yellow-500',
-  event: 'bg-purple-500',
-  birthday: 'bg-pink-500',
-  holiday: 'bg-orange-500',
-  conference: 'bg-indigo-500'
-}
-
-const PRIORITY_COLORS = {
-  low: 'border-l-4 border-l-muted-foreground',
-  medium: 'border-l-4 border-l-yellow-500',
-  high: 'border-l-4 border-l-red-500'
-}
-
-const STATUS_STYLES = {
-  confirmed: '',
-  tentative: 'opacity-70 border-dashed',
-  cancelled: 'opacity-50 line-through'
-}
-
-export function Calendar({
-  events = [],
-  onEventClick,
-  onEventAdd,
-  onEventEdit,
-  onEventDelete,
-  onDateChange,
-  onViewChange,
-  onEventDrop,
-  className,
-  showWeekends = true,
-  showEventDetails = true,
-  disabled = false,
-  minDate,
-  maxDate,
-  highlightToday = true,
-  height,
-  defaultView = 'month',
-  enableDragDrop = true,
-  enableSearch = true,
-  enableFilters = true,
-  enableExport = true,
-  enableImport = false,
-  enableRecurringEvents = true,
-  enableReminders = true,
-  eventCategories,
-  workingHours = { start: '09:00', end: '18:00' },
-  holidays = [],
-  locale = 'en-US',
-  timeFormat = '12h',
-  firstDayOfWeek = 0,
-  theme = 'auto',
-  customTheme,
-  compactMode = false,
-  showProUpgrade = false
-}: CalendarProps) {
-  // For NPM package usage, show upgrade prompt if specified
-  if (showProUpgrade) {
-    return (
-      <Card className={cn("w-full", className)}>
-        <CardContent className="py-12 text-center">
-          <div className="max-w-md mx-auto space-y-4">
-            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
-              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
-              <p className="text-muted-foreground text-sm mb-4">
-                Calendar is available exclusively to MoonUI Pro subscribers.
-              </p>
-              <div className="flex gap-3 justify-center">
-                <a href="/pricing">
-                  <Button size="sm">
-                    <Sparkles className="mr-2 h-4 w-4" />
-                    Upgrade to Pro
-                  </Button>
-                </a>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  const [currentDate, setCurrentDate] = React.useState(new Date())
-  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null)
-  const [view, setView] = React.useState<'month' | 'week' | 'day' | 'year' | 'agenda'>(defaultView)
-  const [eventDialogOpen, setEventDialogOpen] = React.useState(false)
-  const [eventDialogMode, setEventDialogMode] = React.useState<'create' | 'edit'>('create')
-  const [selectedEvent, setSelectedEvent] = React.useState<CalendarEvent | null>(null)
-  const [draggedEvent, setDraggedEvent] = React.useState<CalendarEvent | null>(null)
-  const [dragTargetDate, setDragTargetDate] = React.useState<Date | null>(null)
-  const [searchQuery, setSearchQuery] = React.useState('')
-  const [filterType, setFilterType] = React.useState<string>('all')
-  const [filterPriority, setFilterPriority] = React.useState<string>('all')
-  const [showFiltersPanel, setShowFiltersPanel] = React.useState(false)
-  const [selectedTags, setSelectedTags] = React.useState<string[]>([])
-  const [miniCalendarDate, setMiniCalendarDate] = React.useState(new Date())
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false) // Mobile sidebar state
-  const [isDesktopSidebarCollapsed, setIsDesktopSidebarCollapsed] = React.useState(false) // Desktop sidebar state
-
-  const today = new Date()
-  const currentMonth = currentDate.getMonth()
-  const currentYear = currentDate.getFullYear()
-
-  const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
-  const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0)
-  const startDate = new Date(firstDayOfMonth)
-  
-  // Adjust start date based on firstDayOfWeek setting
-  const daysToSubtract = (startDate.getDay() - firstDayOfWeek + 7) % 7
-  startDate.setDate(startDate.getDate() - daysToSubtract)
-
-  const endDate = new Date(lastDayOfMonth)
-  const daysToAdd = (6 - endDate.getDay() + firstDayOfWeek) % 7
-  endDate.setDate(endDate.getDate() + daysToAdd)
-
-  const calendarDays = []
-  const currentDateIterator = new Date(startDate)
-
-  while (currentDateIterator <= endDate) {
-    calendarDays.push(new Date(currentDateIterator))
-    currentDateIterator.setDate(currentDateIterator.getDate() + 1)
-  }
-
-  // Get all unique tags from events
-  const allTags = React.useMemo(() => {
-    const tags = new Set<string>()
-    events.forEach(event => {
-      event.tags?.forEach(tag => tags.add(tag))
-    })
-    return Array.from(tags)
-  }, [events])
-
-  // Filter events based on search and filters
-  const filteredEvents = React.useMemo(() => {
-    return events.filter(event => {
-      // Search filter
-      if (searchQuery && !event.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
-          !event.description?.toLowerCase().includes(searchQuery.toLowerCase())) {
-        return false
-      }
-      
-      // Type filter
-      if (filterType !== 'all' && event.type !== filterType) {
-        return false
-      }
-      
-      // Priority filter
-      if (filterPriority !== 'all' && event.priority !== filterPriority) {
-        return false
-      }
-      
-      // Tags filter
-      if (selectedTags.length > 0 && (!event.tags || !event.tags.some(tag => selectedTags.includes(tag)))) {
-        return false
-      }
-      
-      return true
-    })
-  }, [events, searchQuery, filterType, filterPriority, selectedTags])
-
-  const getEventsForDate = (date: Date) => {
-    return filteredEvents.filter(event => {
-      const eventDate = new Date(event.date)
-      
-      // Check for recurring events
-      if (event.recurring) {
-        return isDateInRecurringPattern(date, event)
-      }
-      
-      return eventDate.toDateString() === date.toDateString()
-    })
-  }
-
-  const isDateInRecurringPattern = (date: Date, event: CalendarEvent): boolean => {
-    if (!event.recurring) return false
-    
-    const eventDate = new Date(event.date)
-    const daysDiff = Math.floor((date.getTime() - eventDate.getTime()) / (1000 * 60 * 60 * 24))
-    
-    if (daysDiff < 0) return false
-    if (event.recurring.endDate && date > event.recurring.endDate) return false
-    
-    switch (event.recurring.pattern) {
-      case 'daily':
-        return daysDiff % event.recurring.interval === 0
-      case 'weekly':
-        if (daysDiff % (event.recurring.interval * 7) !== 0) return false
-        if (event.recurring.daysOfWeek) {
-          return event.recurring.daysOfWeek.includes(date.getDay())
-        }
-        return date.getDay() === eventDate.getDay()
-      case 'monthly':
-        const monthsDiff = (date.getFullYear() - eventDate.getFullYear()) * 12 + 
-                          (date.getMonth() - eventDate.getMonth())
-        if (monthsDiff % event.recurring.interval !== 0) return false
-        if (event.recurring.dayOfMonth) {
-          return date.getDate() === event.recurring.dayOfMonth
-        }
-        return date.getDate() === eventDate.getDate()
-      case 'yearly':
-        const yearsDiff = date.getFullYear() - eventDate.getFullYear()
-        if (yearsDiff % event.recurring.interval !== 0) return false
-        return date.getMonth() === eventDate.getMonth() && 
-               date.getDate() === eventDate.getDate()
-      default:
-        return false
-    }
-  }
-
-  const isToday = (date: Date) => {
-    return date.toDateString() === today.toDateString()
-  }
-
-  const isCurrentMonth = (date: Date) => {
-    return date.getMonth() === currentMonth
-  }
-
-  const isSelected = (date: Date) => {
-    return selectedDate && date.toDateString() === selectedDate.toDateString()
-  }
-
-  const isDisabled = (date: Date) => {
-    if (disabled) return true
-    if (minDate && date < minDate) return true
-    if (maxDate && date > maxDate) return true
-    return false
-  }
-
-  const navigateMonth = (direction: 'prev' | 'next') => {
-    const newDate = new Date(currentDate)
-    if (direction === 'prev') {
-      newDate.setMonth(currentMonth - 1)
-    } else {
-      newDate.setMonth(currentMonth + 1)
-    }
-    setCurrentDate(newDate)
-    onDateChange?.(newDate)
-  }
-
-  const changeView = (newView: 'month' | 'week' | 'day' | 'year' | 'agenda') => {
-    setView(newView)
-    onViewChange?.(newView)
-  }
-
-  const exportCalendar = () => {
-    // Create iCal format
-    const icalContent = generateICalContent(filteredEvents)
-    const blob = new Blob([icalContent], { type: 'text/calendar' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'calendar.ics'
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const generateICalContent = (events: CalendarEvent[]): string => {
-    let content = 'BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-//MoonUI//Calendar//EN\r\n'
-    
-    events.forEach(event => {
-      content += 'BEGIN:VEVENT\r\n'
-      content += `UID:${event.id}@moonui.com\r\n`
-      content += `DTSTART:${formatDateToICS(event.date, event.startTime)}\r\n`
-      content += `DTEND:${formatDateToICS(event.date, event.endTime || event.startTime)}\r\n`
-      content += `SUMMARY:${event.title}\r\n`
-      if (event.description) content += `DESCRIPTION:${event.description}\r\n`
-      if (event.location) content += `LOCATION:${event.location}\r\n`
-      content += 'END:VEVENT\r\n'
-    })
-    
-    content += 'END:VCALENDAR\r\n'
-    return content
-  }
-
-  const formatDateToICS = (date: Date, time?: string): string => {
-    const d = new Date(date)
-    if (time) {
-      const [hours, minutes] = time.split(':')
-      d.setHours(parseInt(hours), parseInt(minutes))
-    }
-    return d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z'
-  }
-
-  const handleDateClick = (date: Date) => {
-    if (isDisabled(date)) return
-    
-    setSelectedDate(date)
-    const dateEvents = getEventsForDate(date)
-    
-    if (dateEvents.length === 0) {
-      // Open dialog for creating new event
-      setEventDialogMode('create')
-      setSelectedEvent(null)
-      setEventDialogOpen(true)
-    } else if (dateEvents.length === 1) {
-      onEventClick?.(dateEvents[0])
-    }
-  }
-
-  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {
-    e.stopPropagation()
-    onEventClick?.(event)
-  }
-
-  const handleEventDragStart = (event: CalendarEvent, e: React.DragEvent) => {
-    setDraggedEvent(event)
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', event.id)
-    
-    // Add visual feedback
-    const target = e.target as HTMLElement
-    target.style.opacity = '0.5'
-  }
-
-  const handleEventDragEnd = (e: React.DragEvent) => {
-    setDraggedEvent(null)
-    setDragTargetDate(null)
-    
-    // Remove visual feedback
-    const target = e.target as HTMLElement
-    target.style.opacity = '1'
-  }
-
-  const handleDateDragOver = (date: Date, e: React.DragEvent) => {
-    if (isDisabled(date) || !draggedEvent) return
-    e.preventDefault()
-    e.dataTransfer.dropEffect = 'move'
-    setDragTargetDate(date)
-  }
-
-  const handleDateDrop = (date: Date, e: React.DragEvent) => {
-    e.preventDefault()
-    
-    if (!draggedEvent || isDisabled(date)) return
-    
-    // Only move if it's a different date
-    if (draggedEvent.date.toDateString() !== date.toDateString()) {
-      const updatedEvent = {
-        ...draggedEvent,
-        date: date
-      }
-      
-      onEventEdit?.(updatedEvent)
-    }
-    
-    setDraggedEvent(null)
-    setDragTargetDate(null)
-  }
-
-  const handleEventEdit = (event: CalendarEvent, e: React.MouseEvent) => {
-    e.stopPropagation()
-    setEventDialogMode('edit')
-    setSelectedEvent(event)
-    setEventDialogOpen(true)
-  }
-
-  const handleEventDelete = (event: CalendarEvent, e: React.MouseEvent) => {
-    e.stopPropagation()
-    onEventDelete?.(event.id)
-  }
-
-  const handleEventSave = (eventData: Omit<CalendarEvent, 'id'> & { id?: string }) => {
-    if (eventDialogMode === 'create') {
-      onEventAdd?.(eventData)
-    } else if (eventDialogMode === 'edit' && eventData.id) {
-      onEventEdit?.(eventData as Omit<CalendarEvent, 'id'> & { id: string })
-    }
-  }
-
-  const handleEventDialogDelete = (eventId: string) => {
-    onEventDelete?.(eventId)
-  }
-
-  const goToToday = () => {
-    const today = new Date()
-    setCurrentDate(today)
-    setSelectedDate(today)
-    onDateChange?.(today)
-  }
-
-  const isHoliday = (date: Date) => {
-    return holidays.some(holiday => {
-      const holidayDate = new Date(holiday.date)
-      return holidayDate.toDateString() === date.toDateString()
-    })
-  }
-
-  const getHolidayName = (date: Date) => {
-    const holiday = holidays.find(h => {
-      const holidayDate = new Date(h.date)
-      return holidayDate.toDateString() === date.toDateString()
-    })
-    return holiday?.name
-  }
-
-  const formatTime = (time?: string): string => {
-    if (!time) return ''
-    if (timeFormat === '24h') return time
-    
-    const [hours, minutes] = time.split(':')
-    const h = parseInt(hours)
-    const period = h >= 12 ? 'PM' : 'AM'
-    const displayHours = h === 0 ? 12 : h > 12 ? h - 12 : h
-    return `${displayHours}:${minutes} ${period}`
-  }
-
-  const filteredDays = showWeekends ? calendarDays : calendarDays.filter(day => {
-    const dayOfWeek = day.getDay()
-    return dayOfWeek !== 0 && dayOfWeek !== 6
-  })
-
-  // Reorder days of week based on firstDayOfWeek setting
-  const orderedDaysOfWeek = [...DAYS_OF_WEEK.slice(firstDayOfWeek), ...DAYS_OF_WEEK.slice(0, firstDayOfWeek)]
-  const visibleDaysOfWeek = showWeekends ? orderedDaysOfWeek : orderedDaysOfWeek.filter((_, index) => {
-    const actualDay = (index + firstDayOfWeek) % 7
-    return actualDay !== 0 && actualDay !== 6
-  })
-
-  return (
-    <>
-      <div className={cn("w-full flex relative", className)} style={{ height: height ? `${height}px` : undefined }}>
-        {/* Mobile Sidebar Overlay */}
-        {isSidebarOpen && (
-          <div 
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-            onClick={() => setIsSidebarOpen(false)}
-          />
-        )}
-        
-        {/* Sidebar */}
-        <aside className={cn(
-          "bg-card border-r transition-all duration-300 flex-shrink-0 overflow-hidden",
-          // Mobile styles
-          "fixed inset-y-0 left-0 z-50 lg:relative lg:inset-auto",
-          isSidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
-          // Desktop styles
-          isDesktopSidebarCollapsed ? "lg:w-0" : "lg:w-64"
-        )}>
-          <div className="w-64 h-full flex flex-col">
-            {/* Sidebar Header */}
-            <div className="p-4 border-b">
-              <div className="flex items-center justify-between">
-                <h3 className="font-semibold text-sm">Calendar</h3>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="lg:hidden"
-                  onClick={() => setIsSidebarOpen(false)}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-            
-            {/* Mini Calendar */}
-            <div className="p-4 border-b">
-              <div className="text-xs font-medium mb-2">
-                {MONTHS[miniCalendarDate.getMonth()]} {miniCalendarDate.getFullYear()}
-              </div>
-              <div className="grid grid-cols-7 gap-1 text-xs">
-                {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, index) => (
-                  <div key={`mini-day-${index}`} className="text-center text-muted-foreground">
-                    {day}
-                  </div>
-                ))}
-                {Array.from({ length: 35 }, (_, i) => {
-                  const date = new Date(miniCalendarDate.getFullYear(), miniCalendarDate.getMonth(), i - new Date(miniCalendarDate.getFullYear(), miniCalendarDate.getMonth(), 1).getDay() + 1)
-                  const isCurrentMonth = date.getMonth() === miniCalendarDate.getMonth()
-                  const isToday = date.toDateString() === today.toDateString()
-                  const hasEvents = getEventsForDate(date).length > 0
-                  
-                  return (
-                    <button
-                      key={i}
-                      className={cn(
-                        "p-1 rounded hover:bg-muted/50 transition-colors",
-                        !isCurrentMonth && "text-muted-foreground/50",
-                        isToday && "bg-primary text-primary-foreground",
-                        hasEvents && !isToday && "font-bold"
-                      )}
-                      onClick={() => {
-                        setCurrentDate(date)
-                        setSelectedDate(date)
-                        setIsSidebarOpen(false)
-                      }}
-                    >
-                      {date.getDate()}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-            
-            {/* Categories Filter */}
-            <div className="p-4 space-y-2 flex-1 overflow-y-auto">
-              <h4 className="text-xs font-medium mb-2">Categories</h4>
-              <button
-                onClick={() => setFilterType('all')}
-                className={cn(
-                  "w-full text-left px-2 py-1 rounded text-xs hover:bg-muted/50 transition-colors",
-                  filterType === 'all' && "bg-muted"
-                )}
-              >
-                All Events
-              </button>
-              {['Personal', 'Work', 'Meeting', 'Task', 'Reminder', 'Holiday', 'Birthday', 'Other'].map((type) => (
-                <button
-                  key={type}
-                  onClick={() => setFilterType(type.toLowerCase())}
-                  className={cn(
-                    "w-full text-left px-2 py-1 rounded text-xs hover:bg-muted/50 transition-colors flex items-center gap-2",
-                    filterType === type.toLowerCase() && "bg-muted"
-                  )}
-                >
-                  <div className={cn("w-2 h-2 rounded-full", EVENT_COLORS[type.toLowerCase() as keyof typeof EVENT_COLORS] || "bg-gray-500")} />
-                  {type}
-                </button>
-              ))}
-              
-              <div className="pt-4">
-                <Button
-                  className="w-full"
-                  size="sm"
-                  onClick={() => {
-                    setEventDialogMode('create')
-                    setSelectedEvent(null)
-                    setEventDialogOpen(true)
-                    setIsSidebarOpen(false)
-                  }}
-                  disabled={disabled}
-                >
-                  <Plus className="h-4 w-4 mr-2" />
-                  New Event
-                </Button>
-              </div>
-            </div>
-          </div>
-        </aside>
-        
-        {/* Main Content */}
-        <Card className="flex-1 border-0 rounded-none">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                {/* Mobile Menu Button */}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="lg:hidden"
-                  onClick={() => setIsSidebarOpen(true)}
-                >
-                  <Menu className="h-4 w-4" />
-                </Button>
-                
-                {/* Desktop Sidebar Toggle */}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="hidden lg:block"
-                  onClick={() => setIsDesktopSidebarCollapsed(!isDesktopSidebarCollapsed)}
-                >
-                  <Menu className="h-4 w-4" />
-                </Button>
-                
-                <div>
-                  <CardTitle className="flex items-center gap-2">
-                    <CalendarIcon className="h-5 w-5" />
-                    {view === 'month' && `${MONTHS[currentMonth]} ${currentYear}`}
-                    {view === 'week' && `Week of ${currentDate.toLocaleDateString()}`}
-                    {view === 'day' && currentDate.toLocaleDateString()}
-                    {view === 'agenda' && 'Agenda'}
-                  </CardTitle>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button variant="outline" size="sm" onClick={goToToday} className="hidden sm:flex">
-                  Today
-                </Button>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  onClick={() => navigateMonth('prev')}
-                  disabled={disabled}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  onClick={() => navigateMonth('next')}
-                  disabled={disabled}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-        <div className="space-y-4">
-          {/* Calendar View */}
-          {view === 'month' && (
-            <div className="grid grid-cols-7 gap-1 w-full">
-              {/* Day Headers */}
-              {visibleDaysOfWeek.map((day) => (
-                <div key={day} className="p-1 text-center text-xs font-medium text-muted-foreground">
-                  {day}
-                </div>
-              ))}
-
-              {/* Calendar Days */}
-              {filteredDays.map((date, index) => {
-              const dayEvents = getEventsForDate(date)
-              const isCurrentMonthDate = isCurrentMonth(date)
-              const isTodayDate = isToday(date)
-              const isSelectedDate = isSelected(date)
-              const isDisabledDate = isDisabled(date)
-
-              return (
-                <div
-                  key={index}
-                  className={cn(
-                    "min-h-[80px] p-1 border border-border/50 cursor-pointer hover:bg-muted/50 transition-colors text-xs flex flex-col",
-                    !isCurrentMonthDate && "text-muted-foreground bg-muted/20",
-                    isTodayDate && highlightToday && "bg-primary/10 border-primary/50",
-                    isSelectedDate && "bg-primary/20 border-primary",
-                    isDisabledDate && "cursor-not-allowed opacity-50",
-                    dragTargetDate && dragTargetDate.toDateString() === date.toDateString() && "bg-primary/30 border-primary"
-                  )}
-                  onClick={() => handleDateClick(date)}
-                  onDragOver={(e) => handleDateDragOver(date, e)}
-                  onDrop={(e) => handleDateDrop(date, e)}
-                >
-                  <div className="flex items-center justify-between mb-1">
-                    <div className="flex flex-col">
-                      <span className={cn(
-                        "text-sm font-medium",
-                        isTodayDate && "text-primary font-bold",
-                        isHoliday(date) && "text-orange-600 dark:text-orange-400"
-                      )}>
-                        {date.getDate()}
-                      </span>
-                      {isHoliday(date) && (
-                        <span className="text-[10px] text-orange-600 dark:text-orange-400 truncate">
-                          {getHolidayName(date)}
-                        </span>
-                      )}
-                    </div>
-                    {dayEvents.length > 0 && (
-                      <Badge variant="secondary" className="text-xs px-1">
-                        {dayEvents.length}
-                      </Badge>
-                    )}
-                  </div>
-
-                  {/* Events */}
-                  <div className="flex-1 space-y-1 overflow-hidden">
-                    {dayEvents.slice(0, 3).map((event) => (
-                      <div
-                        key={event.id}
-                        className={cn(
-                          "text-xs p-1 mb-1 rounded text-white cursor-move group relative select-none block w-full truncate",
-                          event.color || EVENT_COLORS[event.type || 'event'],
-                          event.priority && PRIORITY_COLORS[event.priority],
-                          event.status && STATUS_STYLES[event.status]
-                        )}
-                        draggable={!disabled && enableDragDrop}
-                        onClick={(e) => handleEventClick(event, e)}
-                        onDragStart={(e) => handleEventDragStart(event, e)}
-                        onDragEnd={handleEventDragEnd}
-                        style={{
-                          backgroundColor: event.color || undefined
-                        }}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-1 flex-1 min-w-0">
-                            {event.isPrivate && <Lock className="h-3 w-3 flex-shrink-0" />}
-                            {event.recurring && <Repeat className="h-3 w-3 flex-shrink-0" />}
-                            <span className="truncate">{event.title}</span>
-                          </div>
-                          {showEventDetails && (
-                            <div className="hidden group-hover:flex items-center gap-1 ml-1">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-4 w-4 p-0 text-white/80 hover:text-white"
-                                onClick={(e) => handleEventEdit(event, e)}
-                              >
-                                <Edit className="h-3 w-3" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-4 w-4 p-0 text-white/80 hover:text-white"
-                                onClick={(e) => handleEventDelete(event, e)}
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </Button>
-                            </div>
-                          )}
-                        </div>
-                        {event.startTime && !compactMode && (
-                          <div className="flex items-center gap-1 mt-1">
-                            <Clock className="h-3 w-3" />
-                            <span className="text-[10px]">{formatTime(event.startTime)}</span>
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                    {dayEvents.length > 3 && (
-                      <div className="text-xs text-muted-foreground text-center">
-                        +{dayEvents.length - 3} more
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )
-            })}
-            </div>
-          )}
-          
-          {/* Week View */}
-          {view === 'week' && (
-            <div className="space-y-4">
-              <div className="grid grid-cols-8 gap-2">
-                <div className="text-xs font-medium text-muted-foreground">Time</div>
-                {Array.from({ length: 7 }, (_, i) => {
-                  const date = new Date(currentDate)
-                  date.setDate(date.getDate() - date.getDay() + i)
-                  return (
-                    <div key={i} className="text-center">
-                      <div className="text-xs font-medium text-muted-foreground">
-                        {DAYS_OF_WEEK[i]}
-                      </div>
-                      <div className={cn(
-                        "text-sm font-medium",
-                        isToday(date) && "text-primary"
-                      )}>
-                        {date.getDate()}
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-              
-              {/* Time slots */}
-              <div className="border rounded-lg overflow-hidden">
-                <div className="max-h-[500px] overflow-y-auto">
-                  {Array.from({ length: 24 }, (_, hour) => (
-                    <div key={hour} className="grid grid-cols-8 border-b last:border-b-0">
-                      <div className="p-2 text-xs text-muted-foreground border-r">
-                        {formatTime(`${hour.toString().padStart(2, '0')}:00`)}
-                      </div>
-                      {Array.from({ length: 7 }, (_, dayIndex) => {
-                        const date = new Date(currentDate)
-                        date.setDate(date.getDate() - date.getDay() + dayIndex)
-                        const hourEvents = getEventsForDate(date).filter(event => {
-                          if (!event.startTime) return false
-                          const eventHour = parseInt(event.startTime.split(':')[0])
-                          return eventHour === hour
-                        })
-                        
-                        return (
-                          <div
-                            key={dayIndex}
-                            className={cn(
-                              "p-1 min-h-[60px] border-r last:border-r-0 hover:bg-muted/50 transition-colors",
-                              isToday(date) && "bg-primary/5"
-                            )}
-                            onClick={() => handleDateClick(date)}
-                          >
-                            {hourEvents.map(event => (
-                              <div
-                                key={event.id}
-                                className={cn(
-                                  "text-xs p-1 rounded text-white mb-1 cursor-pointer",
-                                  event.color || EVENT_COLORS[event.type || 'event']
-                                )}
-                                onClick={(e) => handleEventClick(event, e)}
-                              >
-                                <div className="font-medium truncate">{event.title}</div>
-                                {event.location && (
-                                  <div className="text-[10px] opacity-80 truncate">{event.location}</div>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          )}
-          
-          {/* Day View */}
-          {view === 'day' && (
-            <div className="space-y-4">
-              <div className="text-center">
-                <h3 className="text-lg font-semibold">
-                  {currentDate.toLocaleDateString(locale, { 
-                    weekday: 'long', 
-                    year: 'numeric', 
-                    month: 'long', 
-                    day: 'numeric' 
-                  })}
-                </h3>
-              </div>
-              
-              <div className="border rounded-lg overflow-hidden">
-                <div className="max-h-[500px] overflow-y-auto">
-                  {Array.from({ length: 24 }, (_, hour) => {
-                    const hourEvents = getEventsForDate(currentDate).filter(event => {
-                      if (!event.startTime) return false
-                      const eventHour = parseInt(event.startTime.split(':')[0])
-                      return eventHour === hour
-                    })
-                    
-                    return (
-                      <div key={hour} className="flex border-b last:border-b-0">
-                        <div className="w-20 p-3 text-sm text-muted-foreground border-r">
-                          {formatTime(`${hour.toString().padStart(2, '0')}:00`)}
-                        </div>
-                        <div className="flex-1 p-2 min-h-[80px]">
-                          {hourEvents.map(event => (
-                            <div
-                              key={event.id}
-                              className={cn(
-                                "p-2 rounded text-white mb-2 cursor-pointer",
-                                event.color || EVENT_COLORS[event.type || 'event']
-                              )}
-                              onClick={(e) => handleEventClick(event, e)}
-                            >
-                              <div className="flex items-center justify-between">
-                                <div>
-                                  <div className="font-medium">{event.title}</div>
-                                  {event.description && (
-                                    <div className="text-sm opacity-80">{event.description}</div>
-                                  )}
-                                  <div className="flex items-center gap-3 text-xs mt-1">
-                                    {event.startTime && (
-                                      <div className="flex items-center gap-1">
-                                        <Clock className="h-3 w-3" />
-                                        {formatTime(event.startTime)} - {formatTime(event.endTime || event.startTime)}
-                                      </div>
-                                    )}
-                                    {event.location && (
-                                      <div className="flex items-center gap-1">
-                                        <MapPin className="h-3 w-3" />
-                                        {event.location}
-                                      </div>
-                                    )}
-                                  </div>
-                                </div>
-                                <div className="flex gap-1">
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-6 w-6 p-0 text-white/80 hover:text-white"
-                                    onClick={(e) => handleEventEdit(event, e)}
-                                  >
-                                    <Edit className="h-3 w-3" />
-                                  </Button>
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-6 w-6 p-0 text-white/80 hover:text-white"
-                                    onClick={(e) => handleEventDelete(event, e)}
-                                  >
-                                    <Trash2 className="h-3 w-3" />
-                                  </Button>
-                                </div>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-          )}
-          
-          {/* Agenda View */}
-          {view === 'agenda' && (
-            <div className="space-y-4">
-              <div className="max-h-[500px] overflow-y-auto space-y-4">
-                {Array.from({ length: 30 }, (_, i) => {
-                  const date = new Date(currentDate)
-                  date.setDate(date.getDate() + i)
-                  const dayEvents = getEventsForDate(date)
-                  
-                  if (dayEvents.length === 0) return null
-                  
-                  return (
-                    <div key={i} className="border rounded-lg p-4">
-                      <h4 className="font-medium mb-3">
-                        {date.toLocaleDateString(locale, { 
-                          weekday: 'long', 
-                          year: 'numeric', 
-                          month: 'long', 
-                          day: 'numeric' 
-                        })}
-                      </h4>
-                      <div className="space-y-2">
-                        {dayEvents.map(event => (
-                          <div
-                            key={event.id}
-                            className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer"
-                            onClick={() => onEventClick?.(event)}
-                          >
-                            <div className={cn(
-                              "w-3 h-3 rounded-full mt-1 flex-shrink-0",
-                              event.color || EVENT_COLORS[event.type || 'event']
-                            )} />
-                            <div className="flex-1">
-                              <div className="flex items-center justify-between">
-                                <h5 className="font-medium">{event.title}</h5>
-                                <div className="flex gap-1">
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-7 w-7 p-0"
-                                    onClick={(e) => handleEventEdit(event, e)}
-                                  >
-                                    <Edit className="h-3 w-3" />
-                                  </Button>
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-7 w-7 p-0"
-                                    onClick={(e) => handleEventDelete(event, e)}
-                                  >
-                                    <Trash2 className="h-3 w-3" />
-                                  </Button>
-                                </div>
-                              </div>
-                              {event.description && (
-                                <p className="text-sm text-muted-foreground mt-1">
-                                  {event.description}
-                                </p>
-                              )}
-                              <div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
-                                {event.startTime && (
-                                  <div className="flex items-center gap-1">
-                                    <Clock className="h-3 w-3" />
-                                    {formatTime(event.startTime)} - {formatTime(event.endTime || event.startTime)}
-                                  </div>
-                                )}
-                                {event.location && (
-                                  <div className="flex items-center gap-1">
-                                    <MapPin className="h-3 w-3" />
-                                    {event.location}
-                                  </div>
-                                )}
-                                {event.attendees && event.attendees.length > 0 && (
-                                  <div className="flex items-center gap-1">
-                                    <Users className="h-3 w-3" />
-                                    {event.attendees.length} attendees
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )
-                }).filter(Boolean)}
-              </div>
-            </div>
-          )}
-
-          {/* Selected Date Details */}
-          {selectedDate && view === 'month' && (
-            <div className="border rounded-lg p-4 bg-muted/50">
-              <h4 className="font-medium mb-2">
-                {selectedDate.toLocaleDateString('en-US', { 
-                  weekday: 'long', 
-                  year: 'numeric', 
-                  month: 'long', 
-                  day: 'numeric' 
-                })}
-              </h4>
-              
-              <div className="space-y-2">
-                {getEventsForDate(selectedDate).map((event) => (
-                  <div key={event.id} className="flex items-start gap-3 p-2 border rounded">
-                    <div className={cn(
-                      "w-3 h-3 rounded-full mt-1 flex-shrink-0",
-                      event.color || EVENT_COLORS[event.type || 'event']
-                    )} />
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between">
-                        <h5 className="font-medium">{event.title}</h5>
-                        <div className="flex items-center gap-1">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={(e) => handleEventEdit(event, e)}
-                          >
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={(e) => handleEventDelete(event, e)}
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
-                      {event.description && (
-                        <p className="text-sm text-muted-foreground mt-1">
-                          {event.description}
-                        </p>
-                      )}
-                      <div className="flex items-center gap-4 text-xs text-muted-foreground mt-2">
-                        {event.startTime && (
-                          <div className="flex items-center gap-1">
-                            <Clock className="h-3 w-3" />
-                            <span>{event.startTime} - {event.endTime}</span>
-                          </div>
-                        )}
-                        {event.location && (
-                          <div className="flex items-center gap-1">
-                            <MapPin className="h-3 w-3" />
-                            <span>{event.location}</span>
-                          </div>
-                        )}
-                        {event.attendees && event.attendees.length > 0 && (
-                          <div className="flex items-center gap-1">
-                            <User className="h-3 w-3" />
-                            <span>{event.attendees.length} attendees</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-                
-                {getEventsForDate(selectedDate).length === 0 && (
-                  <div className="text-center py-4">
-                    <p className="text-sm text-muted-foreground mb-2">
-                      No events scheduled for this date
-                    </p>
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      onClick={() => {
-                        setEventDialogMode('create')
-                        setSelectedEvent(null)
-                        setEventDialogOpen(true)
-                      }}
-                    >
-                      <Plus className="h-4 w-4 mr-1" />
-                      Add Event
-                    </Button>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Event Dialog */}
-      <EventDialog
-        open={eventDialogOpen}
-        onOpenChange={setEventDialogOpen}
-        event={selectedEvent}
-        selectedDate={selectedDate}
-        onSave={handleEventSave}
-        onDelete={handleEventDialogDelete}
-        mode={eventDialogMode}
-      />
-    </>
-  )
-}
-
-export default Calendar