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,21 +273,41 @@ 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="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                <div className="space-y-3">
-                  <div className="flex items-center">
+                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                    <svg className="h-5 w-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                    <div className="flex items-center">
-                      <path
+                      <svg className="h-5 w-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                        fillRule="evenodd"
+                        <path
-                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                          fillRule="evenodd"
-                        clipRule="evenodd"
+                          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                      />
+                          clipRule="evenodd"
-                    </svg>
+                        />
-                    <span className="text-sm text-blue-800">
+                      </svg>
-                      You can complete this event after {format(new Date(event.scheduledDate), 'MMM d, yyyy')}
+                      <span className="text-sm text-blue-800">
-                    </span>
+                        You can complete this event after {format(new Date(event.scheduledDate), 'MMM d, yyyy')}
+                      </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">

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