fixes

components/EventDetailsDialog.vue

@@ -260,6 +260,18 @@
       </v-card-text>
 
       <v-card-actions class="pa-4">
+        <!-- Delete button for admin/board -->
+        <v-btn
+          v-if="canDeleteEvent"
+          @click="showDeleteConfirm = true"
+          color="error"
+          variant="outlined"
+          prepend-icon="mdi-delete"
+          :loading="deleteLoading"
+        >
+          Delete Event
+        </v-btn>
+        
         <v-spacer />
         <v-btn
           @click="close"
@@ -269,12 +281,59 @@
         </v-btn>
       </v-card-actions>
     </v-card>
+
+    <!-- Delete Confirmation Dialog -->
+    <v-dialog v-model="showDeleteConfirm" max-width="500" persistent>
+      <v-card>
+        <v-card-title class="d-flex align-center">
+          <v-icon class="me-2 text-error">mdi-alert</v-icon>
+          Delete Event
+        </v-card-title>
+        
+        <v-card-text>
+          <v-alert type="warning" variant="tonal" class="mb-4">
+            <v-alert-title>Warning: This action cannot be undone</v-alert-title>
+            This will permanently delete the event and all associated RSVP data.
+          </v-alert>
+          
+          <p class="text-body-1 mb-4">
+            Are you sure you want to delete "<strong>{{ event?.title }}</strong>"?
+          </p>
+          
+          <div class="text-body-2 text-medium-emphasis">
+            <div v-if="event?.current_attendees && parseInt(event.current_attendees) > 0">
+              <v-icon size="small" class="me-1">mdi-information</v-icon>
+              This event has {{ event.current_attendees }} confirmed attendees. Their RSVPs will also be deleted.
+            </div>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            @click="showDeleteConfirm = false"
+            variant="outlined"
+            :disabled="deleteLoading"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            @click="handleDeleteEvent"
+            color="error"
+            :loading="deleteLoading"
+          >
+            Delete Event
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
 import type { Event, EventRSVP } from '~/utils/types';
 import { useEvents } from '~/composables/useEvents';
+import { useAuth } from '~/composables/useAuth';
 import { format } from 'date-fns';
 
 interface Props {
@@ -289,13 +348,16 @@ const emit = defineEmits<{
   'rsvp-updated': [event: Event];
 }>();
 
-const { rsvpToEvent } = useEvents();
+const { rsvpToEvent, deleteEvent } = useEvents();
+const { isAdmin, isBoard } = useAuth();
 
 // Reactive state
 const rsvpValid = ref(false);
 const rsvpLoading = ref(false);
 const rsvpNotes = ref('');
 const selectedGuests = ref(0);
+const deleteLoading = ref(false);
+const showDeleteConfirm = ref(false);
 
 // Computed properties
 const show = computed({
@@ -472,6 +534,11 @@ const guestOptions = computed(() => {
   return options;
 });
 
+// Admin/Board permissions
+const canDeleteEvent = computed(() => {
+  return isAdmin.value || isBoard.value;
+});
+
 // Methods
 const close = () => {
   show.value = false;
@@ -577,6 +644,40 @@ Reference: ${userRSVP.value?.payment_reference}
     console.error('Error copying to clipboard:', error);
   }
 };
+
+const handleDeleteEvent = async () => {
+  if (!props.event) return;
+  
+  deleteLoading.value = true;
+  
+  try {
+    // Use the correct event identifier for deletion
+    const eventId = (props.event as any).Id || props.event.id || props.event.event_id;
+    
+    if (!eventId) {
+      throw new Error('Unable to determine event ID for deletion');
+    }
+    
+    console.log('[EventDetailsDialog] Deleting event with ID:', eventId);
+    
+    const result = await deleteEvent(eventId.toString());
+    
+    console.log('[EventDetailsDialog] Event deleted successfully:', result);
+    
+    // Close both dialogs
+    showDeleteConfirm.value = false;
+    show.value = false;
+    
+    // Emit event for parent component to refresh
+    emit('rsvp-updated', props.event);
+    
+  } catch (error) {
+    console.error('[EventDetailsDialog] Error deleting event:', error);
+    // TODO: Show error message to user
+  } finally {
+    deleteLoading.value = false;
+  }
+};
 </script>
 
 <style scoped>