feat: implement event creation and management interface (task 13)

- Create EventForm component with date/time picker and map-based location selection
- Implement EventList component with status badges and participant counts
- Add EventFilters component for filtering by status and date range
- Create EventDetailModal with registration functionality and event details
- Build eventService for API calls (getEvents, createEvent, register, etc.)
- Update EventsPage with full event management UI
- Support event creation, listing, filtering, and registration
- Requirements: 4.1, 4.2, 4.3, 4.4

src/components/event/EventDetailModal.tsx

@@ -0,0 +1,275 @@
+import { useEffect, useRef } from 'react';
+import { format } from 'date-fns';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import type { CleanupEvent } from '@/types';
+
+// Fix for default marker icons
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
+import markerIcon from 'leaflet/dist/images/marker-icon.png';
+import markerShadow from 'leaflet/dist/images/marker-shadow.png';
+
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconUrl: markerIcon,
+  iconRetinaUrl: markerIcon2x,
+  shadowUrl: markerShadow,
+});
+
+interface EventDetailModalProps {
+  event: CleanupEvent;
+  isRegistered: boolean;
+  onClose: () => void;
+  onRegister: () => void;
+  onUnregister: () => void;
+  isLoading?: boolean;
+}
+
+export function EventDetailModal({
+  event,
+  isRegistered,
+  onClose,
+  onRegister,
+  onUnregister,
+  isLoading = false,
+}: EventDetailModalProps) {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
+
+  // Initialize map
+  useEffect(() => {
+    if (!mapRef.current || mapInstanceRef.current) return;
+
+    const map = L.map(mapRef.current).setView([event.latitude, event.longitude], 13);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 19,
+    }).addTo(map);
+
+    L.marker([event.latitude, event.longitude]).addTo(map);
+
+    mapInstanceRef.current = map;
+
+    return () => {
+      map.remove();
+      mapInstanceRef.current = null;
+    };
+  }, [event.latitude, event.longitude]);
+
+  const formatEventDate = (date: Date) => {
+    return format(new Date(date), 'EEEE, MMMM d, yyyy');
+  };
+
+  const formatEventTime = (date: Date) => {
+    return format(new Date(date), 'h:mm a');
+  };
+
+  const formatDuration = (minutes: number) => {
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return mins > 0 ? `${hours} hour${hours > 1 ? 's' : ''} ${mins} minutes` : `${hours} hour${hours > 1 ? 's' : ''}`;
+  };
+
+  const getStatusBadge = () => {
+    const styles = {
+      upcoming: 'bg-blue-100 text-blue-800',
+      completed: 'bg-green-100 text-green-800',
+      cancelled: 'bg-red-100 text-red-800',
+    };
+
+    const labels = {
+      upcoming: 'Upcoming',
+      completed: 'Completed',
+      cancelled: 'Cancelled',
+    };
+
+    return (
+      <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${styles[event.status]}`}>
+        {labels[event.status]}
+      </span>
+    );
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+        {/* Background overlay */}
+        <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onClick={onClose}></div>
+
+        {/* Modal panel */}
+        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
+          {/* Header */}
+          <div className="bg-white px-6 pt-6 pb-4 border-b border-gray-200">
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <h2 className="text-2xl font-bold text-gray-900 mb-2">{event.title}</h2>
+                <div className="flex items-center gap-3">
+                  {getStatusBadge()}
+                  <span className="text-sm text-gray-500">
+                    {event.participantCount} {event.participantCount === 1 ? 'participant' : 'participants'}
+                  </span>
+                </div>
+              </div>
+              <button
+                onClick={onClose}
+                className="text-gray-400 hover:text-gray-500 transition-colors"
+              >
+                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="px-6 py-6 space-y-6">
+            {/* Event Details */}
+            <div className="space-y-4">
+              <div className="flex items-start">
+                <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                <div>
+                  <p className="text-sm font-medium text-gray-900">Date & Time</p>
+                  <p className="text-sm text-gray-600 mt-1">
+                    {formatEventDate(event.scheduledDate)} at {formatEventTime(event.scheduledDate)}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start">
+                <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <div>
+                  <p className="text-sm font-medium text-gray-900">Duration</p>
+                  <p className="text-sm text-gray-600 mt-1">{formatDuration(event.duration)}</p>
+                </div>
+              </div>
+
+              <div className="flex items-start">
+                <svg className="h-6 w-6 text-gray-400 mr-3 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                  />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                <div>
+                  <p className="text-sm font-medium text-gray-900">Location</p>
+                  <p className="text-sm text-gray-600 mt-1">{event.locationName}</p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    {event.latitude.toFixed(6)}, {event.longitude.toFixed(6)}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Description */}
+            <div>
+              <h3 className="text-sm font-medium text-gray-900 mb-2">Description</h3>
+              <p className="text-sm text-gray-600 whitespace-pre-wrap">{event.description}</p>
+            </div>
+
+            {/* Completed Event Info */}
+            {event.status === 'completed' && event.litterCollected !== undefined && (
+              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                <div className="flex items-center">
+                  <svg className="h-6 w-6 text-green-600 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <div>
+                    <p className="text-sm font-medium text-green-900">Event Completed</p>
+                    <p className="text-sm text-green-700 mt-1">
+                      {event.litterCollected} kg of litter collected
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Map */}
+            <div>
+              <h3 className="text-sm font-medium text-gray-900 mb-2">Event Location</h3>
+              <div className="border border-gray-300 rounded-lg overflow-hidden">
+                <div ref={mapRef} className="w-full h-64" />
+              </div>
+            </div>
+
+            {/* Photos (if completed) */}
+            {event.status === 'completed' && event.photos && event.photos.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium text-gray-900 mb-2">Event Photos</h3>
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                  {event.photos.map((photo, index) => (
+                    <img
+                      key={index}
+                      src={photo}
+                      alt={`Event photo ${index + 1}`}
+                      className="w-full h-32 object-cover rounded-lg"
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Footer Actions */}
+          {event.status === 'upcoming' && (
+            <div className="bg-gray-50 px-6 py-4 border-t border-gray-200">
+              {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">
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm font-medium">You're registered for this event</span>
+                  </div>
+                  <button
+                    onClick={onUnregister}
+                    disabled={isLoading}
+                    className="px-4 py-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm font-medium"
+                  >
+                    {isLoading ? 'Unregistering...' : 'Unregister'}
+                  </button>
+                </div>
+              ) : (
+                <button
+                  onClick={onRegister}
+                  disabled={isLoading}
+                  className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
+                >
+                  {isLoading ? 'Registering...' : 'Register for Event'}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/event/EventFilters.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import type { EventStatus } from '@/types';
+
+export interface EventFilterState {
+  status: EventStatus | 'all';
+  startDate?: string;
+  endDate?: string;
+}
+
+interface EventFiltersProps {
+  filters: EventFilterState;
+  onFiltersChange: (filters: EventFilterState) => void;
+}
+
+export function EventFilters({ filters, onFiltersChange }: EventFiltersProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleStatusChange = (status: EventStatus | 'all') => {
+    onFiltersChange({ ...filters, status });
+  };
+
+  const handleDateChange = (field: 'startDate' | 'endDate', value: string) => {
+    onFiltersChange({ ...filters, [field]: value || undefined });
+  };
+
+  const handleClearFilters = () => {
+    onFiltersChange({
+      status: 'all',
+      startDate: undefined,
+      endDate: undefined,
+    });
+  };
+
+  const hasActiveFilters = filters.status !== 'all' || filters.startDate || filters.endDate;
+
+  return (
+    <div className="bg-white rounded-lg shadow p-4 mb-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-gray-900">Filters</h3>
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="text-sm text-blue-600 hover:text-blue-700 font-medium"
+        >
+          {isExpanded ? 'Hide' : 'Show'} Filters
+        </button>
+      </div>
+
+      {/* Status Filter - Always Visible */}
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => handleStatusChange('all')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filters.status === 'all'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            All Events
+          </button>
+          <button
+            onClick={() => handleStatusChange('upcoming')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filters.status === 'upcoming'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            Upcoming
+          </button>
+          <button
+            onClick={() => handleStatusChange('completed')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filters.status === 'completed'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            Completed
+          </button>
+          <button
+            onClick={() => handleStatusChange('cancelled')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filters.status === 'cancelled'
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            Cancelled
+          </button>
+        </div>
+      </div>
+
+      {/* Expanded Filters */}
+      {isExpanded && (
+        <div className="space-y-4 pt-4 border-t border-gray-200">
+          {/* Date Range */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="startDate" className="block text-sm font-medium text-gray-700 mb-1">
+                Start Date
+              </label>
+              <input
+                type="date"
+                id="startDate"
+                value={filters.startDate || ''}
+                onChange={(e) => handleDateChange('startDate', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+            <div>
+              <label htmlFor="endDate" className="block text-sm font-medium text-gray-700 mb-1">
+                End Date
+              </label>
+              <input
+                type="date"
+                id="endDate"
+                value={filters.endDate || ''}
+                onChange={(e) => handleDateChange('endDate', e.target.value)}
+                min={filters.startDate}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+          </div>
+
+          {/* Clear Filters Button */}
+          {hasActiveFilters && (
+            <button
+              onClick={handleClearFilters}
+              className="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium"
+            >
+              Clear All Filters
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/event/EventForm.tsx

@@ -0,0 +1,430 @@
+import { useState, useRef, useEffect } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { isWithinIreland, IRELAND_BOUNDS } from '@/utils/coordinates';
+import type { Coordinates } from '@/types';
+
+// Fix for default marker icons in Leaflet with Vite
+import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
+import markerIcon from 'leaflet/dist/images/marker-icon.png';
+import markerShadow from 'leaflet/dist/images/marker-shadow.png';
+
+delete (L.Icon.Default.prototype as any)._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconUrl: markerIcon,
+  iconRetinaUrl: markerIcon2x,
+  shadowUrl: markerShadow,
+});
+
+interface EventFormData {
+  title: string;
+  description: string;
+  latitude: number;
+  longitude: number;
+  locationName: string;
+  scheduledDate: string;
+  scheduledTime: string;
+  duration: number;
+}
+
+interface EventFormProps {
+  onSubmit: (data: EventFormData) => void;
+  onCancel: () => void;
+  initialData?: Partial<EventFormData>;
+  isSubmitting?: boolean;
+}
+
+export function EventForm({ onSubmit, onCancel, initialData, isSubmitting = false }: EventFormProps) {
+  const [formData, setFormData] = useState<EventFormData>({
+    title: initialData?.title || '',
+    description: initialData?.description || '',
+    latitude: initialData?.latitude || 0,
+    longitude: initialData?.longitude || 0,
+    locationName: initialData?.locationName || '',
+    scheduledDate: initialData?.scheduledDate || '',
+    scheduledTime: initialData?.scheduledTime || '',
+    duration: initialData?.duration || 120,
+  });
+
+  const [selectedLocation, setSelectedLocation] = useState<Coordinates | null>(
+    initialData?.latitude && initialData?.longitude
+      ? { latitude: initialData.latitude, longitude: initialData.longitude }
+      : null
+  );
+  const [errors, setErrors] = useState<Partial<Record<keyof EventFormData, string>>>({});
+  const [locationError, setLocationError] = useState<string | null>(null);
+
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
+  const markerRef = useRef<L.Marker | null>(null);
+
+  // Initialize map
+  useEffect(() => {
+    if (!mapRef.current || mapInstanceRef.current) return;
+
+    // Default center: Dublin, Ireland
+    const defaultCenter: [number, number] = [53.3498, -6.2603];
+    const initialCenter: [number, number] = selectedLocation
+      ? [selectedLocation.latitude, selectedLocation.longitude]
+      : defaultCenter;
+
+    const map = L.map(mapRef.current).setView(initialCenter, selectedLocation ? 13 : 7);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 19,
+    }).addTo(map);
+
+    // Add Ireland boundary rectangle
+    const irelandBounds = L.latLngBounds(
+      [IRELAND_BOUNDS.minLat, IRELAND_BOUNDS.minLng],
+      [IRELAND_BOUNDS.maxLat, IRELAND_BOUNDS.maxLng]
+    );
+
+    L.rectangle(irelandBounds, {
+      color: '#3B82F6',
+      weight: 2,
+      fillOpacity: 0.05,
+      dashArray: '5, 5',
+    }).addTo(map);
+
+    // Add marker if location is already selected
+    if (selectedLocation) {
+      markerRef.current = L.marker([selectedLocation.latitude, selectedLocation.longitude], {
+        draggable: true,
+      }).addTo(map);
+
+      markerRef.current.on('dragend', () => {
+        if (markerRef.current) {
+          const position = markerRef.current.getLatLng();
+          handleMapLocationSelect(position.lat, position.lng);
+        }
+      });
+    }
+
+    // Handle map clicks
+    map.on('click', (e: L.LeafletMouseEvent) => {
+      handleMapLocationSelect(e.latlng.lat, e.latlng.lng);
+    });
+
+    mapInstanceRef.current = map;
+
+    return () => {
+      map.remove();
+      mapInstanceRef.current = null;
+      markerRef.current = null;
+    };
+  }, []);
+
+  // Update marker when location changes
+  useEffect(() => {
+    if (!mapInstanceRef.current || !selectedLocation) return;
+
+    const map = mapInstanceRef.current;
+
+    if (markerRef.current) {
+      map.removeLayer(markerRef.current);
+    }
+
+    markerRef.current = L.marker([selectedLocation.latitude, selectedLocation.longitude], {
+      draggable: true,
+    }).addTo(map);
+
+    markerRef.current.on('dragend', () => {
+      if (markerRef.current) {
+        const position = markerRef.current.getLatLng();
+        handleMapLocationSelect(position.lat, position.lng);
+      }
+    });
+
+    map.setView([selectedLocation.latitude, selectedLocation.longitude], 13);
+  }, [selectedLocation]);
+
+  const handleMapLocationSelect = (lat: number, lng: number) => {
+    if (!isWithinIreland(lat, lng)) {
+      setLocationError('Selected location is outside Ireland. Please select a location within Ireland.');
+      return;
+    }
+
+    const coords = { latitude: lat, longitude: lng };
+    setSelectedLocation(coords);
+    setLocationError(null);
+    setFormData(prev => ({
+      ...prev,
+      latitude: lat,
+      longitude: lng,
+    }));
+  };
+
+  const handleInputChange = (field: keyof EventFormData, value: string | number) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: Partial<Record<keyof EventFormData, string>> = {};
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Event title is required';
+    } else if (formData.title.length < 3) {
+      newErrors.title = 'Title must be at least 3 characters';
+    }
+
+    if (!formData.description.trim()) {
+      newErrors.description = 'Event description is required';
+    } else if (formData.description.length < 10) {
+      newErrors.description = 'Description must be at least 10 characters';
+    }
+
+    if (!formData.locationName.trim()) {
+      newErrors.locationName = 'Location name is required';
+    }
+
+    if (!selectedLocation) {
+      setLocationError('Please select a location on the map');
+    }
+
+    if (!formData.scheduledDate) {
+      newErrors.scheduledDate = 'Event date is required';
+    } else {
+      const selectedDate = new Date(formData.scheduledDate);
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      if (selectedDate < today) {
+        newErrors.scheduledDate = 'Event date must be in the future';
+      }
+    }
+
+    if (!formData.scheduledTime) {
+      newErrors.scheduledTime = 'Event time is required';
+    }
+
+    if (formData.duration < 30) {
+      newErrors.duration = 'Duration must be at least 30 minutes';
+    } else if (formData.duration > 480) {
+      newErrors.duration = 'Duration cannot exceed 8 hours';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0 && selectedLocation !== null;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    onSubmit(formData);
+  };
+
+  // Get minimum date (today)
+  const getMinDate = () => {
+    const today = new Date();
+    return today.toISOString().split('T')[0];
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Title */}
+      <div>
+        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+          Event Title <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          id="title"
+          value={formData.title}
+          onChange={(e) => handleInputChange('title', e.target.value)}
+          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+            errors.title ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="e.g., Sandymount Beach Cleanup"
+        />
+        {errors.title && <p className="mt-1 text-sm text-red-600">{errors.title}</p>}
+      </div>
+
+      {/* Description */}
+      <div>
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+          Description <span className="text-red-500">*</span>
+        </label>
+        <textarea
+          id="description"
+          value={formData.description}
+          onChange={(e) => handleInputChange('description', e.target.value)}
+          rows={4}
+          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+            errors.description ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="Describe the cleanup event, what to bring, meeting point, etc."
+        />
+        {errors.description && <p className="mt-1 text-sm text-red-600">{errors.description}</p>}
+      </div>
+
+      {/* Date and Time */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="scheduledDate" className="block text-sm font-medium text-gray-700 mb-1">
+            Date <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="date"
+            id="scheduledDate"
+            value={formData.scheduledDate}
+            onChange={(e) => handleInputChange('scheduledDate', e.target.value)}
+            min={getMinDate()}
+            className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.scheduledDate ? 'border-red-500' : 'border-gray-300'
+            }`}
+          />
+          {errors.scheduledDate && <p className="mt-1 text-sm text-red-600">{errors.scheduledDate}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="scheduledTime" className="block text-sm font-medium text-gray-700 mb-1">
+            Time <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="time"
+            id="scheduledTime"
+            value={formData.scheduledTime}
+            onChange={(e) => handleInputChange('scheduledTime', e.target.value)}
+            className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors.scheduledTime ? 'border-red-500' : 'border-gray-300'
+            }`}
+          />
+          {errors.scheduledTime && <p className="mt-1 text-sm text-red-600">{errors.scheduledTime}</p>}
+        </div>
+      </div>
+
+      {/* Duration */}
+      <div>
+        <label htmlFor="duration" className="block text-sm font-medium text-gray-700 mb-1">
+          Duration (minutes) <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="number"
+          id="duration"
+          value={formData.duration}
+          onChange={(e) => handleInputChange('duration', parseInt(e.target.value) || 0)}
+          min={30}
+          max={480}
+          step={15}
+          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+            errors.duration ? 'border-red-500' : 'border-gray-300'
+          }`}
+        />
+        <p className="mt-1 text-sm text-gray-500">
+          {formData.duration >= 60
+            ? `${Math.floor(formData.duration / 60)} hour${Math.floor(formData.duration / 60) > 1 ? 's' : ''} ${
+                formData.duration % 60 > 0 ? `${formData.duration % 60} minutes` : ''
+              }`
+            : `${formData.duration} minutes`}
+        </p>
+        {errors.duration && <p className="mt-1 text-sm text-red-600">{errors.duration}</p>}
+      </div>
+
+      {/* Location Name */}
+      <div>
+        <label htmlFor="locationName" className="block text-sm font-medium text-gray-700 mb-1">
+          Location Name <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          id="locationName"
+          value={formData.locationName}
+          onChange={(e) => handleInputChange('locationName', e.target.value)}
+          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+            errors.locationName ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="e.g., Sandymount Beach, Dublin"
+        />
+        {errors.locationName && <p className="mt-1 text-sm text-red-600">{errors.locationName}</p>}
+      </div>
+
+      {/* Map Location Selector */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Event Location on Map <span className="text-red-500">*</span>
+        </label>
+
+        {locationError && (
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mb-4">
+            <div className="flex items-start">
+              <svg className="h-5 w-5 text-yellow-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <p className="ml-2 text-sm text-yellow-700">{locationError}</p>
+            </div>
+          </div>
+        )}
+
+        {selectedLocation && (
+          <div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
+            <div className="flex items-start">
+              <svg className="h-5 w-5 text-green-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <div className="ml-3">
+                <p className="text-sm font-medium text-green-800">Location Selected</p>
+                <p className="text-sm text-green-700 mt-1">
+                  {selectedLocation.latitude.toFixed(6)}, {selectedLocation.longitude.toFixed(6)}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="border border-gray-300 rounded-lg overflow-hidden shadow-lg">
+          <div className="bg-blue-50 px-4 py-3 border-b border-blue-200">
+            <div className="flex items-start">
+              <svg className="h-5 w-5 text-blue-600 mt-0.5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <p className="text-sm text-blue-700">
+                Click on the map to select the event location, or drag the marker to adjust.
+              </p>
+            </div>
+          </div>
+          <div ref={mapRef} className="w-full h-96" />
+        </div>
+      </div>
+
+      {/* Form Actions */}
+      <div className="flex gap-3 pt-4">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="flex-1 bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
+        >
+          {isSubmitting ? 'Creating Event...' : 'Create Event'}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={isSubmitting}
+          className="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}

src/components/event/EventList.tsx

@@ -0,0 +1,188 @@
+import { format } from 'date-fns';
+import type { CleanupEvent, EventStatus } from '@/types';
+
+interface EventListProps {
+  events: CleanupEvent[];
+  onEventClick: (event: CleanupEvent) => void;
+  onRegister?: (eventId: string) => void;
+  isLoading?: boolean;
+}
+
+export function EventList({ events, onEventClick, onRegister, isLoading = false }: EventListProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="bg-white rounded-lg shadow p-6 animate-pulse">
+            <div className="h-6 bg-gray-200 rounded w-3/4 mb-4"></div>
+            <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
+            <div className="h-4 bg-gray-200 rounded w-2/3"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (events.length === 0) {
+    return (
+      <div className="bg-white rounded-lg shadow p-12 text-center">
+        <svg
+          className="mx-auto h-12 w-12 text-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+        <h3 className="mt-4 text-lg font-medium text-gray-900">No events found</h3>
+        <p className="mt-2 text-sm text-gray-500">
+          Try adjusting your filters or create a new cleanup event.
+        </p>
+      </div>
+    );
+  }
+
+  const getStatusBadge = (status: EventStatus) => {
+    const styles = {
+      upcoming: 'bg-blue-100 text-blue-800',
+      completed: 'bg-green-100 text-green-800',
+      cancelled: 'bg-red-100 text-red-800',
+    };
+
+    const labels = {
+      upcoming: 'Upcoming',
+      completed: 'Completed',
+      cancelled: 'Cancelled',
+    };
+
+    return (
+      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${styles[status]}`}>
+        {labels[status]}
+      </span>
+    );
+  };
+
+  const formatEventDate = (date: Date) => {
+    return format(new Date(date), 'EEEE, MMMM d, yyyy');
+  };
+
+  const formatEventTime = (date: Date) => {
+    return format(new Date(date), 'h:mm a');
+  };
+
+  const formatDuration = (minutes: number) => {
+    if (minutes < 60) {
+      return `${minutes} min`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+  };
+
+  return (
+    <div className="space-y-4">
+      {events.map((event) => (
+        <div
+          key={event.id}
+          className="bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+          onClick={() => onEventClick(event)}
+        >
+          <div className="p-6">
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-1">{event.title}</h3>
+                <div className="flex items-center gap-2">
+                  {getStatusBadge(event.status)}
+                  <span className="text-sm text-gray-500">
+                    {event.participantCount} {event.participantCount === 1 ? 'participant' : 'participants'}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2 mb-4">
+              {/* Date and Time */}
+              <div className="flex items-center text-sm text-gray-600">
+                <svg className="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                <span>
+                  {formatEventDate(event.scheduledDate)} at {formatEventTime(event.scheduledDate)}
+                </span>
+              </div>
+
+              {/* Duration */}
+              <div className="flex items-center text-sm text-gray-600">
+                <svg className="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span>{formatDuration(event.duration)}</span>
+              </div>
+
+              {/* Location */}
+              <div className="flex items-center text-sm text-gray-600">
+                <svg className="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                  />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                <span>{event.locationName}</span>
+              </div>
+            </div>
+
+            {/* Description Preview */}
+            <p className="text-sm text-gray-600 line-clamp-2 mb-4">{event.description}</p>
+
+            {/* Completed Event Info */}
+            {event.status === 'completed' && event.litterCollected !== undefined && (
+              <div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
+                <div className="flex items-center text-sm text-green-800">
+                  <svg className="h-5 w-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="font-medium">{event.litterCollected} kg of litter collected</span>
+                </div>
+              </div>
+            )}
+
+            {/* Action Button */}
+            {event.status === 'upcoming' && onRegister && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRegister(event.id);
+                }}
+                className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
+              >
+                Register for Event
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/event/index.ts

@@ -0,0 +1,6 @@
+// Event components barrel export
+export { EventForm } from './EventForm';
+export { EventList } from './EventList';
+export { EventFilters } from './EventFilters';
+export { EventDetailModal } from './EventDetailModal';
+export type { EventFilterState } from './EventFilters';