Link map items with events - Display cleanup events on interactive map

- Added event fetching in MapPage component
- Events now display on map with custom markers (calendar emoji)
- Enhanced event popup with detailed information (date, time, participants, litter collected)
- Added event visibility toggle in MapFilters
- Events use different colors based on status (upcoming=amber, completed=green, cancelled=gray)
- Sample event data provided as fallback
- Fixed date filter type conversion for API calls

src/components/map/MapView.tsx

@@ -229,12 +229,54 @@ export function MapView({
       const icon = createEventMarkerIcon(event.status);
       const marker = L.marker([event.latitude, event.longitude], { icon });
 
+      const scheduledDate = new Date(event.scheduledDate).toLocaleDateString('en-IE', {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+
       marker.bindPopup(`
-        <div class="p-2">
-          <h3 class="font-bold text-sm mb-1">${event.title}</h3>
-          <p class="text-xs text-gray-600">${event.locationName}</p>
-          <p class="text-xs text-gray-600">Participants: ${event.participantCount}</p>
-          <p class="text-xs text-gray-600">Status: ${event.status}</p>
+        <div class="p-3 min-w-[250px]">
+          <h3 class="font-bold text-base mb-2">${event.title}</h3>
+          <div class="space-y-1 text-sm">
+            <p class="flex items-start gap-2">
+              <span class="text-gray-500">📍</span>
+              <span>${event.locationName}</span>
+            </p>
+            <p class="flex items-start gap-2">
+              <span class="text-gray-500">📅</span>
+              <span>${scheduledDate}</span>
+            </p>
+            <p class="flex items-start gap-2">
+              <span class="text-gray-500">⏱️</span>
+              <span>${event.duration} minutes</span>
+            </p>
+            <p class="flex items-start gap-2">
+              <span class="text-gray-500">👥</span>
+              <span>${event.participantCount} participant${event.participantCount !== 1 ? 's' : ''}</span>
+            </p>
+            ${event.status === 'completed' && event.litterCollected ? `
+              <p class="flex items-start gap-2">
+                <span class="text-gray-500">♻️</span>
+                <span>${event.litterCollected} kg collected</span>
+              </p>
+            ` : ''}
+            <p class="mt-2 pt-2 border-t">
+              <span class="inline-block px-2 py-1 text-xs font-semibold rounded ${
+                event.status === 'upcoming' ? 'bg-amber-100 text-amber-800' :
+                event.status === 'completed' ? 'bg-green-100 text-green-800' :
+                'bg-gray-100 text-gray-800'
+              }">
+                ${event.status.charAt(0).toUpperCase() + event.status.slice(1)}
+              </span>
+            </p>
+          </div>
+          ${event.description ? `
+            <p class="text-xs text-gray-600 mt-2 pt-2 border-t">${event.description}</p>
+          ` : ''}
         </div>
       `);