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/components/event/EventDetailModal.tsx

@@ -25,6 +25,7 @@ interface EventDetailModalProps {
   onRegister: () => void;
   onUnregister: () => void;
   onComplete: (data: { litterCollected: number; photos: string[] }) => Promise<void>;
+  onCancel?: () => void;
   isLoading?: boolean;
 }
 
@@ -36,6 +37,7 @@ export function EventDetailModal({
   onRegister,
   onUnregister,
   onComplete,
+  onCancel,
   isLoading = false,
 }: EventDetailModalProps) {
   const mapRef = useRef<HTMLDivElement>(null);
@@ -271,8 +273,18 @@ export function EventDetailModal({
                   >
                     {showCompletionForm ? 'Hide Completion Form' : 'Complete Event'}
                   </button>
+                  {onCancel && (
+                    <button
+                      onClick={onCancel}
+                      disabled={isLoading}
+                      className="px-6 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                    >
+                      Cancel Event
+                    </button>
+                  )}
                 </div>
               ) : isOrganizer && !hasEventPassed ? (
+                <div className="space-y-3">
                   <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                     <div className="flex items-center">
                       <svg className="h-5 w-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
@@ -287,6 +299,16 @@ export function EventDetailModal({
                       </span>
                     </div>
                   </div>
+                  {onCancel && (
+                    <button
+                      onClick={onCancel}
+                      disabled={isLoading}
+                      className="w-full px-6 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                    >
+                      Cancel Event
+                    </button>
+                  )}
+                </div>
               ) : isRegistered ? (
                 <div className="flex items-center justify-between">
                   <div className="flex items-center text-green-600">

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}
         />
       )}