@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/calendar/event-dialog.tsx

@@ -1,377 +0,0 @@
-"use client"
-
-import React, { useState, useEffect } from 'react'
-import { Button } from '../ui/button'
-import { Input } from '../ui/input'
-import { Label } from '../ui/label'
-import { Textarea } from '../ui/textarea'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from '../ui/dialog'
-import { CalendarEvent } from './index'
-import { Calendar, Clock, MapPin, Palette, Type } from 'lucide-react'
-import { cn } from '../../lib/utils'
-
-interface EventDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  event?: CalendarEvent | null
-  selectedDate?: Date | null
-  onSave: (event: Omit<CalendarEvent, 'id'> & { id?: string }) => void
-  onDelete?: (eventId: string) => void
-  mode?: 'create' | 'edit'
-}
-
-const EVENT_TYPES = [
-  { value: 'meeting', label: 'Meeting', color: '#3b82f6' },
-  { value: 'task', label: 'Task', color: '#10b981' },
-  { value: 'reminder', label: 'Reminder', color: '#f59e0b' },
-  { value: 'event', label: 'Event', color: '#8b5cf6' },
-] as const
-
-const PRESET_COLORS = [
-  '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6',
-  '#ef4444', '#06b6d4', '#84cc16', '#f97316',
-  '#ec4899', '#6366f1', '#14b8a6', '#eab308',
-  '#f43f5e', '#a855f7', '#22c55e', '#64748b',
-]
-
-export function EventDialog({
-  open,
-  onOpenChange,
-  event,
-  selectedDate,
-  onSave,
-  onDelete,
-  mode = 'create'
-}: EventDialogProps) {
-  const [formData, setFormData] = useState<{
-    title: string
-    description: string
-    date: string
-    startTime: string
-    endTime: string
-    location: string
-    type: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference'
-    color: string
-    attendees: string
-  }>({
-    title: '',
-    description: '',
-    date: '',
-    startTime: '',
-    endTime: '',
-    location: '',
-    type: 'meeting',
-    color: '#3b82f6',
-    attendees: ''
-  })
-
-  const [errors, setErrors] = useState<Record<string, string>>({})
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  // Initialize form data
-  useEffect(() => {
-    if (mode === 'edit' && event) {
-      setFormData({
-        title: event.title || '',
-        description: event.description || '',
-        date: event.date.toISOString().split('T')[0],
-        startTime: event.startTime || '',
-        endTime: event.endTime || '',
-        location: event.location || '',
-        type: event.type || 'meeting',
-        color: event.color || '#3b82f6',
-        attendees: event.attendees?.join(', ') || ''
-      })
-    } else if (mode === 'create') {
-      const dateStr = selectedDate ? selectedDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0]
-      setFormData({
-        title: '',
-        description: '',
-        date: dateStr,
-        startTime: '',
-        endTime: '',
-        location: '',
-        type: 'meeting',
-        color: '#3b82f6',
-        attendees: ''
-      })
-    }
-    setErrors({})
-  }, [event, selectedDate, mode, open])
-
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {}
-
-    if (!formData.title.trim()) {
-      newErrors.title = 'Title is required'
-    }
-
-    if (!formData.date) {
-      newErrors.date = 'Date is required'
-    }
-
-    if (formData.startTime && formData.endTime) {
-      if (formData.startTime >= formData.endTime) {
-        newErrors.endTime = 'End time must be after start time'
-      }
-    }
-
-    setErrors(newErrors)
-    return Object.keys(newErrors).length === 0
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    
-    if (!validateForm()) {
-      return
-    }
-
-    setIsSubmitting(true)
-
-    try {
-      const eventData = {
-        ...(mode === 'edit' && event ? { id: event.id } : {}),
-        title: formData.title.trim(),
-        description: formData.description.trim(),
-        date: new Date(formData.date + 'T00:00:00'),
-        startTime: formData.startTime || undefined,
-        endTime: formData.endTime || undefined,
-        location: formData.location.trim() || undefined,
-        type: formData.type,
-        color: formData.color,
-        attendees: formData.attendees 
-          ? formData.attendees.split(',').map(a => a.trim()).filter(Boolean)
-          : undefined
-      }
-
-      await onSave(eventData)
-      onOpenChange(false)
-    } catch (error) {
-      console.error('Error saving event:', error)
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  const handleDelete = () => {
-    if (event && onDelete) {
-      onDelete(event.id)
-      onOpenChange(false)
-    }
-  }
-
-  const handleTypeChange = (type: string) => {
-    const selectedType = EVENT_TYPES.find(t => t.value === type)
-    setFormData(prev => ({
-      ...prev,
-      type: type as typeof formData.type,
-      color: selectedType?.color || prev.color
-    }))
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Calendar className="w-5 h-5" />
-            {mode === 'create' ? 'Create Event' : 'Edit Event'}
-          </DialogTitle>
-          <DialogDescription>
-            {mode === 'create' 
-              ? 'Add a new event to your calendar.' 
-              : 'Edit the event details.'}
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {/* Title */}
-          <div className="space-y-2">
-            <Label htmlFor="title">Title *</Label>
-            <Input
-              id="title"
-              value={formData.title}
-              onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
-              placeholder="Event title"
-              className={cn(errors.title && "border-red-500")}
-            />
-            {errors.title && <p className="text-sm text-red-500">{errors.title}</p>}
-          </div>
-
-          {/* Description */}
-          <div className="space-y-2">
-            <Label htmlFor="description">Description</Label>
-            <Textarea
-              id="description"
-              value={formData.description}
-              onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
-              placeholder="Event description (optional)"
-              rows={3}
-            />
-          </div>
-
-          {/* Date and Time */}
-          <div className="grid grid-cols-3 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="date">Date *</Label>
-              <Input
-                id="date"
-                type="date"
-                value={formData.date}
-                onChange={(e) => setFormData(prev => ({ ...prev, date: e.target.value }))}
-                className={cn(errors.date && "border-red-500")}
-              />
-              {errors.date && <p className="text-sm text-red-500">{errors.date}</p>}
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="startTime">Start Time</Label>
-              <Input
-                id="startTime"
-                type="time"
-                value={formData.startTime}
-                onChange={(e) => setFormData(prev => ({ ...prev, startTime: e.target.value }))}
-                placeholder="09:00"
-              />
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="endTime">End Time</Label>
-              <Input
-                id="endTime"
-                type="time"
-                value={formData.endTime}
-                onChange={(e) => setFormData(prev => ({ ...prev, endTime: e.target.value }))}
-                placeholder="10:00"
-                className={cn(errors.endTime && "border-red-500")}
-              />
-              {errors.endTime && <p className="text-sm text-red-500">{errors.endTime}</p>}
-            </div>
-          </div>
-
-          {/* Location */}
-          <div className="space-y-2">
-            <Label htmlFor="location" className="flex items-center gap-2">
-              <MapPin className="w-4 h-4" />
-              Location
-            </Label>
-            <Input
-              id="location"
-              value={formData.location}
-              onChange={(e) => setFormData(prev => ({ ...prev, location: e.target.value }))}
-              placeholder="Meeting room, address, or link"
-            />
-          </div>
-
-          {/* Type and Color */}
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label className="flex items-center gap-2">
-                <Type className="w-4 h-4" />
-                Type
-              </Label>
-              <Select value={formData.type} onValueChange={handleTypeChange}>
-                <SelectTrigger>
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {EVENT_TYPES.map((type) => (
-                    <SelectItem key={type.value} value={type.value}>
-                      <div className="flex items-center gap-2">
-                        <div 
-                          className="w-3 h-3 rounded-full" 
-                          style={{ backgroundColor: type.color }}
-                        />
-                        {type.label}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-2">
-              <Label className="flex items-center gap-2">
-                <Palette className="w-4 h-4" />
-                Color
-              </Label>
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <input
-                    type="color"
-                    value={formData.color}
-                    onChange={(e) => setFormData(prev => ({ ...prev, color: e.target.value }))}
-                    className="w-8 h-8 rounded border cursor-pointer flex-shrink-0"
-                  />
-                  <span className="text-sm text-muted-foreground">Custom color</span>
-                </div>
-                <div className="grid grid-cols-8 gap-1">
-                  {PRESET_COLORS.map((color) => (
-                    <button
-                      key={color}
-                      type="button"
-                      onClick={() => setFormData(prev => ({ ...prev, color }))}
-                      className={cn(
-                        "w-full aspect-square rounded border-2 hover:scale-110 transition-transform",
-                        formData.color === color ? "border-foreground shadow-sm" : "border-transparent"
-                      )}
-                      style={{ backgroundColor: color }}
-                      aria-label={`Select color ${color}`}
-                    />
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Attendees */}
-          <div className="space-y-2">
-            <Label htmlFor="attendees">Attendees</Label>
-            <Input
-              id="attendees"
-              value={formData.attendees}
-              onChange={(e) => setFormData(prev => ({ ...prev, attendees: e.target.value }))}
-              placeholder="John Doe, Jane Smith (comma-separated)"
-            />
-          </div>
-
-          <DialogFooter className="gap-2">
-            {mode === 'edit' && onDelete && (
-              <Button
-                type="button"
-                variant="destructive"
-                onClick={handleDelete}
-                className="mr-auto"
-              >
-                Delete Event
-              </Button>
-            )}
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSubmitting}
-            >
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              {isSubmitting 
-                ? (mode === 'create' ? 'Creating...' : 'Saving...')
-                : (mode === 'create' ? 'Create Event' : 'Save Changes')
-              }
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}