'use client'; import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { cn } from '@/lib/utils'; import { router } from '@inertiajs/react'; import { Bell, Calendar, CheckSquare, ChevronDown, FileText, Plus, Repeat, Trash2, X, XCircle, } from 'lucide-react'; import { useEffect, useState } from 'react'; import { EventTab } from './ProductivityModalComponents/EventTab'; import { TaskTab } from './ProductivityModalComponents/TaskTab'; import { NoteTab } from './ProductivityModalComponents/NoteTab'; import { ReminderTab } from './ProductivityModalComponents/ReminderTab'; declare const route: (...args: any[]) => string; declare const can: (permission: string) => any; // Module types type ModuleType = 'event' | 'task' | 'note' | 'reminder'; type RecurrenceType = 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom'; interface Participant { id: number; name: string; email?: string; avatar?: string; } interface User { label: string; value: string; } // Recurrence config interface interface RecurrenceConfig { interval?: number; unit?: 'day' | 'week' | 'month' | 'year'; weekdays?: string[]; end_type?: 'never' | 'on' | 'after'; occurrences?: number; } // Event data for editing interface EventData { id?: number; uid?: string; title: string; description?: string; content?: string; // For notes meeting_type?: string; meeting_status?: string; location?: string; meeting_link?: string; meeting_date_time?: string; end_date_time?: string; duration?: number; is_all_day?: boolean; recurrence?: string; recurrence_config?: RecurrenceConfig; recurrence_end_date?: string; participants?: Participant[]; attendees?: number[]; // From calendar_events priority?: number; // For tasks status?: number; // For tasks/reminders/notes people?: Array<{ id: number } | number[]>; // For reminders/notes people_ids?: number[]; // For notes created_by?: number; // For tasks followers?: Array<{ id: number }>; // For notes due_date?: string; // For tasks/notes due_date_time?: string; // For reminders date?: string; // For notes calendar_event_id?: number; // Actual model ID from calendar_events } interface ProductivityModalProps { isOpen: boolean; onClose: () => void; initialDate?: Date; initialHour?: number; initialEndHour?: number; users?: User[]; onSuccess?: () => void; defaultModule?: ModuleType; event?: EventData | null; } // Module configurations with gradients const MODULES = [ { value: 'event', label: 'Event', icon: Calendar, gradient: 'from-violet-500 to-purple-600', bgLight: 'bg-violet-50', textColor: 'text-violet-600', borderColor: 'border-violet-200', hoverBg: 'hover:bg-violet-100', }, { value: 'task', label: 'Task', icon: CheckSquare, gradient: 'from-blue-500 to-cyan-500', bgLight: 'bg-blue-50', textColor: 'text-blue-600', borderColor: 'border-blue-200', hoverBg: 'hover:bg-blue-100', }, { value: 'note', label: 'Note', icon: FileText, gradient: 'from-emerald-500 to-teal-500', bgLight: 'bg-emerald-50', textColor: 'text-emerald-600', borderColor: 'border-emerald-200', hoverBg: 'hover:bg-emerald-100', }, { value: 'reminder', label: 'Reminder', icon: Bell, gradient: 'from-amber-500 to-orange-500', bgLight: 'bg-amber-50', textColor: 'text-amber-600', borderColor: 'border-amber-200', hoverBg: 'hover:bg-amber-100', }, ] as const; const EVENT_TYPES = [ { value: 'project_kickoff', label: 'Project Kickoff', color: 'bg-blue-500', lightColor: 'bg-blue-100 text-blue-700' }, { value: 'progress_review', label: 'Progress Review', color: 'bg-emerald-500', lightColor: 'bg-emerald-100 text-emerald-700' }, { value: 'emergency_review', label: 'Emergency Review', color: 'bg-red-500', lightColor: 'bg-red-100 text-red-700' }, { value: 'client_meeting', label: 'Client Meeting', color: 'bg-violet-500', lightColor: 'bg-violet-100 text-violet-700' }, { value: 'internal_meeting', label: 'Internal Meeting', color: 'bg-orange-500', lightColor: 'bg-orange-100 text-orange-700' }, { value: 'presentation', label: 'Presentation', color: 'bg-pink-500', lightColor: 'bg-pink-100 text-pink-700' }, { value: 'workshop', label: 'Workshop', color: 'bg-cyan-500', lightColor: 'bg-cyan-100 text-cyan-700' }, { value: 'other', label: 'Other', color: 'bg-slate-500', lightColor: 'bg-slate-100 text-slate-700' }, ]; const EVENT_STATUSES = [ { value: 'pending', label: 'Pending', color: 'bg-amber-500', lightColor: 'bg-amber-100 text-amber-700' }, { value: 'confirmed', label: 'Confirmed', color: 'bg-blue-500', lightColor: 'bg-blue-100 text-blue-700' }, { value: 'completed', label: 'Completed', color: 'bg-emerald-500', lightColor: 'bg-emerald-100 text-emerald-700' }, { value: 'cancelled', label: 'Cancelled', color: 'bg-red-500', lightColor: 'bg-red-100 text-red-700' }, { value: 'urgent', label: 'Urgent', color: 'bg-orange-500', lightColor: 'bg-orange-100 text-orange-700' }, { value: 'rescheduled', label: 'Rescheduled', color: 'bg-purple-500', lightColor: 'bg-purple-100 text-purple-700' }, ]; const TASK_PRIORITIES = [ { value: 1, label: 'Low', color: 'bg-slate-400', lightColor: 'bg-slate-100 text-slate-600' }, { value: 2, label: 'Medium', color: 'bg-amber-500', lightColor: 'bg-amber-100 text-amber-700' }, { value: 3, label: 'High', color: 'bg-orange-500', lightColor: 'bg-orange-100 text-orange-700' }, { value: 4, label: 'Urgent', color: 'bg-red-500', lightColor: 'bg-red-100 text-red-700' }, ]; const TASK_STATUSES = [ { value: 20, label: 'To Do', color: 'bg-slate-400', lightColor: 'bg-slate-100 text-slate-600' }, { value: 18, label: 'Important', color: 'bg-amber-500', lightColor: 'bg-amber-100 text-amber-700' }, { value: 5, label: 'Completed', color: 'bg-emerald-500', lightColor: 'bg-emerald-100 text-emerald-700' }, { value: 11, label: 'Archived', color: 'bg-slate-300', lightColor: 'bg-slate-50 text-slate-500' }, ]; const REMINDER_STATUSES = [ { value: 2, label: 'Pending', color: 'bg-amber-500', lightColor: 'bg-amber-100 text-amber-700' }, { value: 22, label: 'Snoozed', color: 'bg-purple-500', lightColor: 'bg-purple-100 text-purple-700' }, { value: 5, label: 'Completed', color: 'bg-emerald-500', lightColor: 'bg-emerald-100 text-emerald-700' }, { value: 21, label: 'Dismissed', color: 'bg-slate-400', lightColor: 'bg-slate-100 text-slate-600' }, { value: 11, label: 'Archived', color: 'bg-slate-300', lightColor: 'bg-slate-50 text-slate-500' }, ]; const NOTE_STATUSES = [ { value: 1, label: 'Active', color: 'bg-emerald-500', lightColor: 'bg-emerald-100 text-emerald-700' }, { value: 11, label: 'Archived', color: 'bg-slate-300', lightColor: 'bg-slate-50 text-slate-500' }, ]; const RECURRENCE_OPTIONS = [ { value: 'none', label: 'Does not repeat', icon: null }, { value: 'daily', label: 'Daily', icon: null }, { value: 'weekly', label: 'Weekly', icon: null }, { value: 'monthly', label: 'Monthly', icon: null }, { value: 'yearly', label: 'Yearly', icon: null }, { value: 'custom', label: 'Custom...', icon: null }, ]; const WEEKDAYS = [ { value: 'sun', label: 'S', fullLabel: 'Sunday' }, { value: 'mon', label: 'M', fullLabel: 'Monday' }, { value: 'tue', label: 'T', fullLabel: 'Tuesday' }, { value: 'wed', label: 'W', fullLabel: 'Wednesday' }, { value: 'thu', label: 'T', fullLabel: 'Thursday' }, { value: 'fri', label: 'F', fullLabel: 'Friday' }, { value: 'sat', label: 'S', fullLabel: 'Saturday' }, ]; export function ProductivityModal({ isOpen, onClose, initialDate, initialHour, initialEndHour, users = [], onSuccess, defaultModule = 'event', event, }: ProductivityModalProps) { const isEditMode = !!event?.id; // Permission checks const canCreateEvent = can('create_event') > 0; const canEditEvent = can('edit_event') > 0; const canDeleteEvent = can('delete_event') > 0; const canCreateTask = can('create_task') > 0; const canEditTask = can('edit_task') > 0; const canDeleteTask = can('delete_task') > 0; const canCreateNote = can('create_note') > 0; const canEditNote = can('edit_note') > 0; const canDeleteNote = can('delete_note') > 0; const canCreateReminder = can('create_reminder') > 0; const canEditReminder = can('edit_reminder') > 0; const canDeleteReminder = can('delete_reminder') > 0; // Check if user has permission to delete current module const canDeleteCurrentModule = () => { if (selectedModule === 'event') return canDeleteEvent; if (selectedModule === 'task') return canDeleteTask; if (selectedModule === 'note') return canDeleteNote; if (selectedModule === 'reminder') return canDeleteReminder; return false; }; // Check if user can save/update current module const canSaveCurrentModule = () => { if (selectedModule === 'event') return isEditMode ? canEditEvent : canCreateEvent; if (selectedModule === 'task') return isEditMode ? canEditTask : canCreateTask; if (selectedModule === 'note') return isEditMode ? canEditNote : canCreateNote; if (selectedModule === 'reminder') return isEditMode ? canEditReminder : canCreateReminder; return false; }; // Check if user can use current module (for filtering module selector) const canUseModule = (module: ModuleType) => { if (module === 'event') return isEditMode ? canEditEvent : canCreateEvent; if (module === 'task') return isEditMode ? canEditTask : canCreateTask; if (module === 'note') return isEditMode ? canEditNote : canCreateNote; if (module === 'reminder') return isEditMode ? canEditReminder : canCreateReminder; return false; }; // Check if current module is accessible const canAccessCurrentModule = () => { if (selectedModule === 'event') return isEditMode ? canEditEvent : canCreateEvent; if (selectedModule === 'task') return isEditMode ? canEditTask : canCreateTask; if (selectedModule === 'note') return isEditMode ? canEditNote : canCreateNote; if (selectedModule === 'reminder') return isEditMode ? canEditReminder : canCreateReminder; return false; }; // Check if user has access to ANY module const hasAccessToAnyModule = () => { return MODULES.some((module) => canUseModule(module.value as ModuleType)); }; // Module selection const [selectedModule, setSelectedModule] = useState(defaultModule); // Auto-switch to first accessible module if user doesn't have access to default module useEffect(() => { if (isOpen && !isEditMode && !canAccessCurrentModule()) { // Find first module user has access to const accessibleModule = MODULES.find((module) => canUseModule(module.value as ModuleType)); if (accessibleModule) { setSelectedModule(accessibleModule.value as ModuleType); } } }, [ isOpen, selectedModule, isEditMode, canCreateEvent, canEditEvent, canCreateTask, canEditTask, canCreateNote, canEditNote, canCreateReminder, canEditReminder, ]); // Common fields const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [date, setDate] = useState(''); const [startTime, setStartTime] = useState('09:00'); const [endTime, setEndTime] = useState('10:00'); const [isSubmitting, setIsSubmitting] = useState(false); const [showAdvanced, setShowAdvanced] = useState(false); // Event specific const [meetingType, setMeetingType] = useState('client_meeting'); const [meetingStatus, setMeetingStatus] = useState('pending'); const [location, setLocation] = useState(''); const [meetingLink, setMeetingLink] = useState(''); const [selectedParticipants, setSelectedParticipants] = useState([]); const [showParticipantPicker, setShowParticipantPicker] = useState(false); // All Day & Recurrence const [isAllDay, setIsAllDay] = useState(false); const [recurrence, setRecurrence] = useState('none'); const [showRecurrenceConfig, setShowRecurrenceConfig] = useState(false); const [showCustomRecurrenceModal, setShowCustomRecurrenceModal] = useState(false); const [recurrenceInterval, setRecurrenceInterval] = useState(1); const [recurrenceUnit, setRecurrenceUnit] = useState<'day' | 'week' | 'month' | 'year'>('week'); const [recurrenceWeekdays, setRecurrenceWeekdays] = useState([]); const [recurrenceEndType, setRecurrenceEndType] = useState<'never' | 'on' | 'after'>('never'); const [recurrenceEndDate, setRecurrenceEndDate] = useState(''); const [recurrenceCount, setRecurrenceCount] = useState(10); // Temp states for custom recurrence modal (to allow cancel) const [tempRecurrenceInterval, setTempRecurrenceInterval] = useState(1); const [tempRecurrenceUnit, setTempRecurrenceUnit] = useState<'day' | 'week' | 'month' | 'year'>('week'); const [tempRecurrenceWeekdays, setTempRecurrenceWeekdays] = useState([]); const [tempRecurrenceEndType, setTempRecurrenceEndType] = useState<'never' | 'on' | 'after'>('never'); const [tempRecurrenceEndDate, setTempRecurrenceEndDate] = useState(''); const [tempRecurrenceCount, setTempRecurrenceCount] = useState(10); // Task specific const [priority, setPriority] = useState(2); const [taskStatus, setTaskStatus] = useState(20); // Default TODO const [assignedUsers, setAssignedUsers] = useState([]); const [showAssignPicker, setShowAssignPicker] = useState(false); // Reminder specific const [reminderStatus, setReminderStatus] = useState(2); // Default PENDING // Note specific const [notePeople, setNotePeople] = useState([]); const [noteStatus, setNoteStatus] = useState(1); // Default ACTIVE const [showNotePeoplePicker, setShowNotePeoplePicker] = useState(false); // Get current module config const currentModule = MODULES.find((m) => m.value === selectedModule) || MODULES[0]; // Calculate duration in minutes from start and end time const calculateDuration = () => { if (!startTime || !endTime) return 60; const [startH, startM] = startTime.split(':').map(Number); const [endH, endM] = endTime.split(':').map(Number); let duration = endH * 60 + endM - (startH * 60 + startM); if (duration < 0) duration += 24 * 60; return duration; }; // Format duration for display const formatDuration = () => { const mins = calculateDuration(); const hours = Math.floor(mins / 60); const minutes = mins % 60; if (hours === 0) return `${minutes}m`; if (minutes === 0) return `${hours}h`; return `${hours}h ${minutes}m`; }; // Update end time when start time changes const handleStartTimeChange = (newStartTime: string) => { setStartTime(newStartTime); const currentDuration = calculateDuration(); const [hours, minutes] = newStartTime.split(':').map(Number); const totalMinutes = hours * 60 + minutes + currentDuration; const endH = Math.floor(totalMinutes / 60) % 24; const endM = totalMinutes % 60; setEndTime(`${String(endH).padStart(2, '0')}:${String(endM).padStart(2, '0')}`); }; // Initialize form when modal opens useEffect(() => { if (isOpen) { if (event) { console.log('Loading event data for', defaultModule, ':', event); setSelectedModule(defaultModule); setTitle(event.title || ''); // Handle content/description - Note uses 'content', others use 'description' setDescription(event.content || event.description || ''); setMeetingType(event.meeting_type || 'client_meeting'); setMeetingStatus(event.meeting_status || 'pending'); setLocation(event.location || ''); setMeetingLink(event.meeting_link || ''); // Handle both attendees (array of IDs) and participants (array of objects) const eventData = event as any; if (eventData.participants && Array.isArray(eventData.participants) && eventData.participants.length > 0) { setSelectedParticipants(eventData.participants.map((p: any) => String(p.id))); } else if (eventData.attendees && Array.isArray(eventData.attendees)) { setSelectedParticipants(eventData.attendees.map(String)); } else { setSelectedParticipants([]); } setIsAllDay(event.is_all_day || false); setShowAdvanced( !!( event.content || event.description || event.location || event.meeting_link || (event.participants && event.participants.length > 0) ), ); if (event.meeting_date_time) { const eventDate = new Date(event.meeting_date_time); setDate(eventDate.toISOString().split('T')[0]); setStartTime(eventDate.toTimeString().slice(0, 5)); if (event.end_date_time) { const endDate = new Date(event.end_date_time); setEndTime(endDate.toTimeString().slice(0, 5)); } else if (event.duration) { const startMinutes = eventDate.getHours() * 60 + eventDate.getMinutes(); const endMinutes = startMinutes + event.duration; const endH = Math.floor(endMinutes / 60) % 24; const endM = endMinutes % 60; setEndTime(`${String(endH).padStart(2, '0')}:${String(endM).padStart(2, '0')}`); } else { setEndTime('10:00'); } } if (event.recurrence) { setRecurrence(event.recurrence as RecurrenceType); if (event.recurrence === 'custom' && event.recurrence_config) { const config = event.recurrence_config; setRecurrenceInterval(config.interval || 1); setRecurrenceUnit(config.unit || 'week'); if (config.weekdays && config.weekdays.length > 0) { const dayMapReverse: Record = { SU: 'sun', MO: 'mon', TU: 'tue', WE: 'wed', TH: 'thu', FR: 'fri', SA: 'sat', }; setRecurrenceWeekdays(config.weekdays.map((d) => dayMapReverse[d] || d)); } setRecurrenceEndType(config.end_type || 'never'); if (config.occurrences) { setRecurrenceCount(config.occurrences); } } } if (event.recurrence_end_date) { setRecurrenceEndDate(event.recurrence_end_date); } // Task-specific fields if ('priority' in event && event.priority !== undefined) { setPriority(Number(event.priority)); } // Handle assigned users for tasks if (defaultModule === 'task') { let assignedUserIds: number[] = []; // Check for assigned_user_ids (from Task API) if ('assigned_user_ids' in event && Array.isArray(event.assigned_user_ids) && event.assigned_user_ids.length > 0) { assignedUserIds = event.assigned_user_ids; } // Otherwise check attendees (from calendar_events) else if ('attendees' in event && Array.isArray(event.attendees) && event.attendees.length > 0) { assignedUserIds = event.attendees; } // If still no assigned users, show created_by as self-assigned else if (event.created_by) { assignedUserIds = [event.created_by]; } setAssignedUsers(assignedUserIds.map((id: number) => String(id))); // Load task status if ('status' in event && event.status !== undefined) { setTaskStatus(Number(event.status)); } } // Note/Reminder specific - handle due_date for tasks, date for notes, due_date_time for reminders if ('date' in event && event.date) { setDate(event.date); } else if ('due_date' in event && event.due_date) { setDate(event.due_date); } else if ('due_date_time' in event && event.due_date_time) { // Parse date in local timezone to avoid UTC shift const dueDate = new Date(event.due_date_time); const year = dueDate.getFullYear(); const month = String(dueDate.getMonth() + 1).padStart(2, '0'); const day = String(dueDate.getDate()).padStart(2, '0'); setDate(`${year}-${month}-${day}`); setStartTime(dueDate.toTimeString().slice(0, 5)); } // Handle people for reminders if (defaultModule === 'reminder') { let peopleIds: number[] = []; // Check for people (from Reminder API) if ('people' in event && Array.isArray(event.people) && event.people.length > 0) { peopleIds = event.people.map((p: any) => p.id || p); } // Otherwise check attendees (from calendar_events) else if ('attendees' in event && Array.isArray(event.attendees) && event.attendees.length > 0) { peopleIds = event.attendees; } setSelectedParticipants(peopleIds.map((id: number) => String(id))); // Load reminder status if ('status' in event && event.status !== undefined) { setReminderStatus(Number(event.status)); } } } else { const targetDate = initialDate || new Date(); // Format date in local timezone to prevent UTC date shift const year = targetDate.getFullYear(); const month = String(targetDate.getMonth() + 1).padStart(2, '0'); const day = String(targetDate.getDate()).padStart(2, '0'); setDate(`${year}-${month}-${day}`); if (initialHour !== undefined) { const start = `${String(initialHour).padStart(2, '0')}:00`; const endH = initialEndHour !== undefined ? initialEndHour : (initialHour + 1) % 24; const end = `${String(endH).padStart(2, '0')}:00`; setStartTime(start); setEndTime(end); } else { const hours = targetDate.getHours(); const start = `${String(hours).padStart(2, '0')}:00`; const endH = (hours + 1) % 24; const end = `${String(endH).padStart(2, '0')}:00`; setStartTime(start); setEndTime(end); } setTitle(''); setDescription(''); setMeetingType('client_meeting'); setMeetingStatus('pending'); setLocation(''); setMeetingLink(''); setSelectedParticipants([]); setIsAllDay(false); setRecurrence('none'); setShowRecurrenceConfig(false); setRecurrenceInterval(1); setRecurrenceUnit('week'); setRecurrenceWeekdays([]); setRecurrenceEndType('never'); setRecurrenceEndDate(''); setRecurrenceCount(10); setPriority(2); setAssignedUsers([]); setShowAdvanced(false); setSelectedModule(defaultModule); // Reset note-specific state setNotePeople([]); setNoteStatus(1); } } }, [isOpen, event, initialDate, initialHour, initialEndHour, defaultModule]); // Update status when event data changes (after API fetch) useEffect(() => { if (event && defaultModule) { // Update task status when event data is available if (defaultModule === 'task' && 'status' in event && event.status !== undefined) { const newStatus = Number(event.status); console.log('Setting task status:', newStatus); setTaskStatus(newStatus); } else if (defaultModule === 'reminder' && 'status' in event && event.status !== undefined) { const newStatus = Number(event.status); console.log('Setting reminder status:', newStatus); setReminderStatus(newStatus); } else if (defaultModule === 'note') { // Handle note-specific fields console.log('Note event data:', event); if ('followers' in event && Array.isArray(event.followers)) { console.log('Setting note people from followers:', event.followers); setNotePeople(event.followers.map((f: any) => String(f.id))); } else if ('people' in event && Array.isArray(event.people)) { console.log('Setting note people from people array:', event.people); setNotePeople(event.people.map((p: any) => String(p.id))); } else if ('people_ids' in event && Array.isArray(event.people_ids)) { console.log('Setting note people from people_ids:', event.people_ids); setNotePeople(event.people_ids.map(String)); } if ('status' in event && event.status !== undefined) { const newStatus = Number(event.status); console.log('Setting note status:', newStatus); setNoteStatus(newStatus); } } } }, [event, defaultModule]); // Get recurrence display text const getRecurrenceDisplayText = () => { if (recurrence === 'none') return 'Does not repeat'; if (recurrence === 'daily') return 'Daily'; if (recurrence === 'weekly') return 'Weekly'; if (recurrence === 'monthly') return 'Monthly'; if (recurrence === 'yearly') return 'Yearly'; if (recurrence === 'custom') { let text = `Every ${recurrenceInterval} ${recurrenceUnit}${recurrenceInterval > 1 ? 's' : ''}`; if (recurrenceUnit === 'week' && recurrenceWeekdays.length > 0) { const dayNames = recurrenceWeekdays.map((d) => WEEKDAYS.find((w) => w.value === d)?.fullLabel).join(', '); text += ` on ${dayNames}`; } return text; } return 'Does not repeat'; }; // Handle recurrence change for EventTab const handleRecurrenceChange = (value: string) => { if (value === 'custom') { setShowRecurrenceConfig(false); openCustomRecurrenceModal(); } else { setRecurrence(value as RecurrenceType); setShowRecurrenceConfig(false); } }; // Toggle weekday selection const toggleWeekday = (day: string) => { if (tempRecurrenceWeekdays.includes(day)) { setTempRecurrenceWeekdays(tempRecurrenceWeekdays.filter((d) => d !== day)); } else { setTempRecurrenceWeekdays([...tempRecurrenceWeekdays, day]); } }; // Open custom recurrence modal with current values const openCustomRecurrenceModal = () => { setTempRecurrenceInterval(recurrenceInterval); setTempRecurrenceUnit(recurrenceUnit); setTempRecurrenceWeekdays([...recurrenceWeekdays]); setTempRecurrenceEndType(recurrenceEndType); setTempRecurrenceEndDate(recurrenceEndDate); setTempRecurrenceCount(recurrenceCount); setShowCustomRecurrenceModal(true); }; // Save custom recurrence from modal const saveCustomRecurrence = () => { setRecurrence('custom'); setRecurrenceInterval(tempRecurrenceInterval); setRecurrenceUnit(tempRecurrenceUnit); setRecurrenceWeekdays([...tempRecurrenceWeekdays]); setRecurrenceEndType(tempRecurrenceEndType); setRecurrenceEndDate(tempRecurrenceEndDate); setRecurrenceCount(tempRecurrenceCount); setShowCustomRecurrenceModal(false); }; // Cancel custom recurrence modal const cancelCustomRecurrence = () => { setShowCustomRecurrenceModal(false); }; // Handle form submission const handleSubmit = () => { if (!title.trim()) return; setIsSubmitting(true); let payload: any = { title }; let routeName = ''; let method: 'post' | 'put' = 'post'; switch (selectedModule) { case 'event': if (!date) { setIsSubmitting(false); return; } const recurrenceConfig = recurrence === 'custom' ? { interval: recurrenceInterval, unit: recurrenceUnit, weekdays: recurrenceUnit === 'week' ? recurrenceWeekdays.map((d) => { const dayMap: Record = { sun: 'SU', mon: 'MO', tue: 'TU', wed: 'WE', thu: 'TH', fri: 'FR', sat: 'SA', }; return dayMap[d] || d; }) : [], end_type: recurrenceEndType, occurrences: recurrenceEndType === 'after' ? recurrenceCount : null, } : null; payload = { title, description, meeting_type: meetingType, meeting_status: meetingStatus, meeting_date_time: isAllDay ? `${date}T00:00:00` : `${date}T${startTime}:00`, end_date_time: isAllDay ? `${date}T23:59:59` : `${date}T${endTime}:00`, duration: isAllDay ? 1440 : calculateDuration(), is_all_day: isAllDay, recurrence: recurrence === 'none' ? null : recurrence, recurrence_config: recurrenceConfig, recurrence_end_date: recurrenceEndType === 'on' ? recurrenceEndDate : null, location, meeting_link: meetingLink, attendees: selectedParticipants.map(Number), }; if (isEditMode && event?.id) { routeName = 'event.update'; method = 'put'; } else { routeName = 'event.store'; } break; case 'task': payload = { title, description, priority: Number(priority), due_date: date || null, assigned_user_ids: assignedUsers.map(Number), status: taskStatus, }; if (isEditMode && event?.id) { routeName = 'task.update'; method = 'put'; } else { routeName = 'task.store'; } break; case 'note': payload = { title, content: description, date: date || null, people: notePeople.map(Number), status: noteStatus, }; if (isEditMode && event?.id) { routeName = 'note.update'; method = 'put'; } else { routeName = 'note.store'; } break; case 'reminder': if (!date || !startTime) { setIsSubmitting(false); return; } payload = { title, description, due_date_time: `${date}T${startTime}:00`, people: selectedParticipants.map(Number), status: reminderStatus, }; if (isEditMode && event?.id) { routeName = 'reminder.update'; method = 'put'; } else { routeName = 'reminder.store'; } break; } // Use the correct ID for the route: // - For calendar events, event.calendar_event_id contains the actual model ID // - Otherwise, use event.id const modelId = (event as any)?.calendar_event_id || event?.id; const routeUrl = isEditMode && modelId ? route(routeName, modelId) : route(routeName); console.log('=== Event Update Debug ==='); console.log('Module:', selectedModule); console.log('Is Edit Mode:', isEditMode); console.log('Event:', event); console.log('Model ID:', modelId); console.log('Route Name:', routeName); console.log('Route URL:', routeUrl); console.log('Method:', method); console.log('Payload:', payload); if (method === 'put') { router.put(routeUrl, payload, { onSuccess: () => { console.log('Update successful'); setIsSubmitting(false); onClose(); onSuccess?.(); }, onError: (errors) => { console.log('Update error:', errors); setIsSubmitting(false); }, }); } else { router.post(routeUrl, payload, { onSuccess: () => { setIsSubmitting(false); onClose(); onSuccess?.(); }, onError: () => { setIsSubmitting(false); }, }); } }; // Handle delete const handleDelete = () => { if (!event?.id) return; if (confirm('Are you sure you want to delete this event?')) { router.delete(route('event.destroy', event.id), { onSuccess: () => { onClose(); onSuccess?.(); }, }); } }; // Add/remove participant const addParticipant = (userId: string, type: 'participants' | 'assigned' = 'participants') => { if (type === 'participants') { if (!selectedParticipants.includes(userId)) { setSelectedParticipants([...selectedParticipants, userId]); } setShowParticipantPicker(false); } else { if (!assignedUsers.includes(userId)) { setAssignedUsers([...assignedUsers, userId]); } setShowAssignPicker(false); } }; const removeParticipant = (userId: string, type: 'participants' | 'assigned' = 'participants') => { if (type === 'participants') { setSelectedParticipants(selectedParticipants.filter((id) => id !== userId)); } else { setAssignedUsers(assignedUsers.filter((id) => id !== userId)); } }; // Helpers for TaskTab const addAssignedUser = (userId: string) => addParticipant(userId, 'assigned'); const removeAssignedUser = (userId: string) => removeParticipant(userId, 'assigned'); const getUserDetails = (userId: string) => { const user = users.find((u) => u.value === userId); console.log('getUserDetails called for userId:', userId, 'found:', user, 'users array:', users); return user; }; return ( <> !open && onClose()}> {/* Clean Header */}

{isEditMode ? `Edit ${currentModule.label}` : `New ${currentModule.label}`}

{/* Permission Denied Message - Only show if user has NO access to any module */} {!hasAccessToAnyModule() && (

Access Denied

You don't have permission to create or edit any productivity items.

)} {/* Module Selector - Only show in Add mode and if user has access to any module */} {!isEditMode && hasAccessToAnyModule() && (
{MODULES.filter((module) => canUseModule(module.value as ModuleType)).map((module) => { const Icon = module.icon; const isSelected = selectedModule === module.value; return ( ); })}
)} {/* Main Form */} {canAccessCurrentModule() && hasAccessToAnyModule() && (
{/* Title Input */}
setTitle(e.target.value)} placeholder={`${currentModule.label} title`} className="h-11 border-slate-200" autoFocus />
{/* Form Fields - Using Tab Components */}
{/* Event Tab */} {selectedModule === 'event' && ( <> addParticipant(userId, 'participants')} removeParticipant={removeParticipant} getUserDetails={getUserDetails} showAdvanced={showAdvanced} setShowAdvanced={setShowAdvanced} description={description} setDescription={setDescription} isEditMode={isEditMode} handleStartTimeChange={handleStartTimeChange} formatDuration={formatDuration} EVENT_TYPES={EVENT_TYPES} EVENT_STATUSES={EVENT_STATUSES} /> {/* More Options Toggle */} )} {/* Task Tab */} {selectedModule === 'task' && ( <> {/* More Options Toggle */} )} {/* Note Tab */} {selectedModule === 'note' && ( <> {/* More Options Toggle */} )} {/* Reminder Tab */} {selectedModule === 'reminder' && ( <> addParticipant(userId, 'participants')} removeParticipant={removeParticipant} getUserDetails={getUserDetails} showAdvanced={showAdvanced} setShowAdvanced={setShowAdvanced} description={description} setDescription={setDescription} REMINDER_STATUSES={REMINDER_STATUSES} /> {/* More Options Toggle */} )}
)}
{/* Footer */} {canAccessCurrentModule() && (
{isEditMode && canDeleteCurrentModule() && ( )}
{canSaveCurrentModule() && ( )}
)} {/* Custom Recurrence Modal */} {/* Header */}

Custom Recurrence

{/* Content */}
{/* Repeat Every */}
setTempRecurrenceInterval(Number(e.target.value) || 1)} className="h-10 w-20 text-center border-slate-200" />
{/* Weekday Selection (for weekly) */} {tempRecurrenceUnit === 'week' && (
{WEEKDAYS.map((day) => ( ))}
)} {/* End Condition */}
{/* Summary Preview */}

Every {tempRecurrenceInterval} {tempRecurrenceUnit} {tempRecurrenceInterval > 1 ? 's' : ''} {tempRecurrenceUnit === 'week' && tempRecurrenceWeekdays.length > 0 && ( <> on {tempRecurrenceWeekdays.map((d) => WEEKDAYS.find((w) => w.value === d)?.label).join(', ')} )} {tempRecurrenceEndType === 'on' && tempRecurrenceEndDate && ( <> {' '} until{' '} {new Date(tempRecurrenceEndDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', })} )} {tempRecurrenceEndType === 'after' && <>, {tempRecurrenceCount} times}

{/* Footer */}
); } export default ProductivityModal;