Add event cancellation functionality for organizers

- Add Cancel Event button in event detail modal for organizers
- Show cancel button both before and after event date (if not completed)
- Add confirmation dialog before cancelling
- Update event status to 'cancelled' when cancelled
- Only organizers can cancel their events

src/pages/EventsPage.tsx

@@ -186,6 +186,27 @@ export function EventsPage() {
     }
   };
 
+  const handleCancelEvent = async () => {
+    if (!selectedEvent) return;
+
+    if (!confirm('Are you sure you want to cancel this event? This action cannot be undone.')) {
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      setError(null);
+      await eventService.updateEvent(selectedEvent.id, { status: 'cancelled' });
+      setSelectedEvent(null);
+      await loadEvents();
+    } catch (err: any) {
+      setError(err.message || 'Failed to cancel event. Please try again.');
+      console.error('Error cancelling event:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
     <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
       {/* Header */}
@@ -279,6 +300,7 @@ export function EventsPage() {
           onRegister={() => handleRegister(selectedEvent.id)}
           onUnregister={handleUnregister}
           onComplete={handleCompleteEvent}
+          onCancel={isOrganizer ? handleCancelEvent : undefined}
           isLoading={isSubmitting}
         />
       )}