Implement event completion workflow (Task 14)

- Add completeEvent endpoint to backend API
- Create EventCompletionForm component with litter quantity input and photo upload
- Update EventDetailModal to show completion form for organizers
- Add isOrganizer check in EventsPage
- Update event service to support completion
- Display completion data (litter collected, photos) for completed events

src/components/event/EventCompletionForm.tsx

@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { PhotoUpload, type PhotoMetadata } from '@/components/report/PhotoUpload';
+
+interface EventCompletionFormProps {
+  eventId: string;
+  onSubmit: (data: { litterCollected: number; photos: string[] }) => Promise<void>;
+  onCancel: () => void;
+  isLoading?: boolean;
+}
+
+export function EventCompletionForm({
+  onSubmit,
+  onCancel,
+  isLoading = false,
+}: EventCompletionFormProps) {
+  const [litterCollected, setLitterCollected] = useState<string>('');
+  const [photos, setPhotos] = useState<PhotoMetadata[]>([]);
+  const [errors, setErrors] = useState<{ litterCollected?: string }>({});
+
+  const validateForm = (): boolean => {
+    const newErrors: { litterCollected?: string } = {};
+
+    if (!litterCollected || litterCollected.trim() === '') {
+      newErrors.litterCollected = 'Please enter the amount of litter collected';
+    } else {
+      const value = parseFloat(litterCollected);
+      if (isNaN(value) || value < 0) {
+        newErrors.litterCollected = 'Please enter a valid positive number';
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    try {
+      // In a real implementation, we would upload photos to the server
+      // For now, we'll just pass the preview URLs
+      const photoUrls = photos.map(photo => photo.preview);
+      
+      await onSubmit({
+        litterCollected: parseFloat(litterCollected),
+        photos: photoUrls,
+      });
+    } catch (error) {
+      console.error('Error completing event:', error);
+    }
+  };
+
+  const handlePhotosChange = (photoMetadata: PhotoMetadata[]) => {
+    setPhotos(photoMetadata);
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">Complete Event</h3>
+      
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Litter Collected Input */}
+        <div>
+          <label htmlFor="litterCollected" className="block text-sm font-medium text-gray-700 mb-2">
+            Litter Collected (kg) *
+          </label>
+          <input
+            type="number"
+            id="litterCollected"
+            step="0.1"
+            min="0"
+            value={litterCollected}
+            onChange={(e) => setLitterCollected(e.target.value)}
+            className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.litterCollected ? 'border-red-500' : 'border-gray-300'
+            }`}
+            placeholder="e.g., 25.5"
+          />
+          {errors.litterCollected && (
+            <p className="mt-1 text-sm text-red-600">{errors.litterCollected}</p>
+          )}
+          <p className="mt-1 text-xs text-gray-500">
+            Enter the total weight of litter collected during the event
+          </p>
+        </div>
+
+        {/* Photo Upload */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Event Photos (Optional)
+          </label>
+          <PhotoUpload
+            onPhotosChange={handlePhotosChange}
+            maxFiles={5}
+          />
+          <p className="mt-1 text-xs text-gray-500">
+            Upload photos from the cleanup event (max 5 photos)
+          </p>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex gap-3 pt-4">
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
+          >
+            {isLoading ? 'Completing...' : 'Complete Event'}
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isLoading}
+            className="flex-1 bg-gray-100 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/event/EventDetailModal.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { format } from 'date-fns';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import type { CleanupEvent } from '@/types';
+import { EventCompletionForm } from './EventCompletionForm';
 
 // Fix for default marker icons
 import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
@@ -19,22 +20,27 @@ L.Icon.Default.mergeOptions({
 interface EventDetailModalProps {
   event: CleanupEvent;
   isRegistered: boolean;
+  isOrganizer: boolean;
   onClose: () => void;
   onRegister: () => void;
   onUnregister: () => void;
+  onComplete: (data: { litterCollected: number; photos: string[] }) => Promise<void>;
   isLoading?: boolean;
 }
 
 export function EventDetailModal({
   event,
   isRegistered,
+  isOrganizer,
   onClose,
   onRegister,
   onUnregister,
+  onComplete,
   isLoading = false,
 }: EventDetailModalProps) {
   const mapRef = useRef<HTMLDivElement>(null);
   const mapInstanceRef = useRef<L.Map | null>(null);
+  const [showCompletionForm, setShowCompletionForm] = useState(false);
 
   // Initialize map
   useEffect(() => {
@@ -234,10 +240,35 @@ export function EventDetailModal({
             )}
           </div>
 
+          {/* Completion Form for Organizers */}
+          {isOrganizer && event.status === 'upcoming' && showCompletionForm && (
+            <div className="px-6 pb-6">
+              <EventCompletionForm
+                eventId={event.id}
+                onSubmit={async (data) => {
+                  await onComplete(data);
+                  setShowCompletionForm(false);
+                }}
+                onCancel={() => setShowCompletionForm(false)}
+                isLoading={isLoading}
+              />
+            </div>
+          )}
+
           {/* Footer Actions */}
           {event.status === 'upcoming' && (
             <div className="bg-gray-50 px-6 py-4 border-t border-gray-200">
-              {isRegistered ? (
+              {isOrganizer ? (
+                <div className="flex gap-3">
+                  <button
+                    onClick={() => setShowCompletionForm(!showCompletionForm)}
+                    disabled={isLoading}
+                    className="flex-1 bg-green-600 text-white py-3 px-6 rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
+                  >
+                    {showCompletionForm ? 'Hide Completion Form' : 'Complete Event'}
+                  </button>
+                </div>
+              ) : isRegistered ? (
                 <div className="flex items-center justify-between">
                   <div className="flex items-center text-green-600">
                     <svg className="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20">

src/components/event/index.ts

@@ -3,4 +3,5 @@ export { EventForm } from './EventForm';
 export { EventList } from './EventList';
 export { EventFilters } from './EventFilters';
 export { EventDetailModal } from './EventDetailModal';
+export { EventCompletionForm } from './EventCompletionForm';
 export type { EventFilterState } from './EventFilters';