Add rich text editor and enhanced date picker to event dialogs

Replace basic textarea with VuetifyTiptap rich text editor for event descriptions, supporting formatting options like bold, italic, headings, and lists. Replace native datetime inputs with VueDatePicker components featuring timezone support (Monaco/UTC) and improved UX. Update dependencies and add necessary plugins to support the new components.

pages/dashboard/events.vue

@@ -335,14 +335,77 @@ const clearFilters = async () => {
 };
 
 const handleEventClick = (eventInfo: any) => {
-  selectedEvent.value = (eventInfo.eventData || eventInfo.event || eventInfo) as Event;
+  // Extract the original event data from FullCalendar's extendedProps
+  const calendarEvent = eventInfo.event || eventInfo;
+  const originalEvent = calendarEvent.extendedProps?.originalEvent;
+  
+  // Use original event if available, otherwise reconstruct from calendar event
+  if (originalEvent) {
+    selectedEvent.value = originalEvent as Event;
+  } else {
+    // Fallback: reconstruct event from FullCalendar event data
+    selectedEvent.value = {
+      id: calendarEvent.id,
+      title: calendarEvent.title,
+      description: calendarEvent.extendedProps?.description || '',
+      event_type: calendarEvent.extendedProps?.event_type || 'meeting',
+      start_datetime: calendarEvent.start?.toISOString() || calendarEvent.startStr,
+      end_datetime: calendarEvent.end?.toISOString() || calendarEvent.endStr,
+      location: calendarEvent.extendedProps?.location || '',
+      visibility: calendarEvent.extendedProps?.visibility || 'public',
+      is_paid: calendarEvent.extendedProps?.is_paid ? 'true' : 'false',
+      cost_members: calendarEvent.extendedProps?.cost_members || '',
+      cost_non_members: calendarEvent.extendedProps?.cost_non_members || '',
+      max_attendees: calendarEvent.extendedProps?.max_attendees?.toString() || '',
+      current_attendees: calendarEvent.extendedProps?.current_attendees?.toString() || '0',
+      user_rsvp: calendarEvent.extendedProps?.user_rsvp || null,
+      creator: calendarEvent.extendedProps?.creator || '',
+      status: 'active'
+    } as Event;
+  }
+  
+  console.log('[Events] Selected event for dialog:', {
+    id: selectedEvent.value.id,
+    title: selectedEvent.value.title,
+    event_type: selectedEvent.value.event_type
+  });
+  
   showDetailsDialog.value = true;
 };
 
 const handleDateClick = (dateInfo: any) => {
   if (isBoard.value || isAdmin.value) {
-    prefilledDate.value = dateInfo.date;
-    prefilledEndDate.value = dateInfo.endDate || '';
+    // Debug: Log the date format being passed
+    console.log('[Events] Date clicked:', dateInfo);
+    
+    // Ensure proper ISO format for datetime-local inputs
+    let formattedDate = '';
+    let formattedEndDate = '';
+    
+    if (dateInfo.date) {
+      // Convert to local datetime-local format: YYYY-MM-DDTHH:mm
+      const clickedDate = new Date(dateInfo.date);
+      clickedDate.setHours(18, 0, 0, 0); // Default to 6 PM
+      formattedDate = clickedDate.toISOString().slice(0, 16);
+      
+      // Set end date 2 hours later if not provided
+      if (dateInfo.endDate) {
+        formattedEndDate = new Date(dateInfo.endDate).toISOString().slice(0, 16);
+      } else {
+        const endDate = new Date(clickedDate);
+        endDate.setHours(20, 0, 0, 0); // Default to 8 PM
+        formattedEndDate = endDate.toISOString().slice(0, 16);
+      }
+    }
+    
+    prefilledDate.value = formattedDate;
+    prefilledEndDate.value = formattedEndDate;
+    
+    console.log('[Events] Prefilled dates:', {
+      date: formattedDate,
+      endDate: formattedEndDate
+    });
+    
     showCreateDialog.value = true;
   }
 };