Implement Mark as Cleaned functionality

- Add showCleaned filter to FilterState type
- Update MapView to show green markers with checkmark for cleaned reports
- Add cleaned status filter toggle in MapFilters component
- Display cleaned information in ReportDetailModal
- Hide action buttons for already cleaned reports
- Wire up markAsCleaned functionality in MapPage
- Backend endpoint and database fields already in place

src/components/map/MapView.tsx

@@ -152,6 +152,11 @@ export function MapView({
         }
       }
 
+      // Filter by cleaned status
+      if (filters.showCleaned === false && report.cleanedAt) {
+        return false;
+      }
+
       return true;
     });
   };
@@ -181,7 +186,8 @@ export function MapView({
 
     // Add report markers
     filteredReports.forEach((report) => {
-      const icon = createCustomMarkerIcon(report.litterType, report.quantity);
+      const isCleaned = !!report.cleanedAt;
+      const icon = createCustomMarkerIcon(report.litterType, report.quantity, isCleaned);
       const marker = L.marker([report.latitude, report.longitude], { icon });
 
       // Add popup with report details
@@ -204,7 +210,12 @@ export function MapView({
           <h3 class="font-bold text-sm mb-1">${getLitterTypeLabel(report.litterType)}</h3>
           <p class="text-xs text-gray-600">Quantity: ${report.quantity}</p>
           <p class="text-xs text-gray-600">Status: ${report.verificationStatus}</p>
-          <p class="text-xs text-gray-600">Date: ${new Date(report.createdAt).toLocaleDateString()}</p>
+          ${isCleaned && report.cleanedAt ? `
+            <p class="text-xs text-green-600 font-semibold">✓ Cleaned up</p>
+            <p class="text-xs text-gray-600">Cleaned: ${new Date(report.cleanedAt).toLocaleDateString()}</p>
+          ` : `
+            <p class="text-xs text-gray-600">Date: ${new Date(report.createdAt).toLocaleDateString()}</p>
+          `}
           ${report.description ? `<p class="text-xs mt-1">${report.description}</p>` : ''}
         </div>
       `);
@@ -503,7 +514,7 @@ export function MapView({
 }
 
 // Helper function to create custom marker icons based on litter type
-function createCustomMarkerIcon(litterType: string, quantity: string): L.DivIcon {
+function createCustomMarkerIcon(litterType: string, quantity: string, isCleaned: boolean = false): L.DivIcon {
   const colors = {
     plastic: '#3B82F6', // blue
     metal: '#6B7280', // gray
@@ -520,7 +531,8 @@ function createCustomMarkerIcon(litterType: string, quantity: string): L.DivIcon
     severe: 36,
   };
 
-  const color = colors[litterType as keyof typeof colors] || colors.other;
+  // Use green color for cleaned reports, otherwise use litter type color
+  const color = isCleaned ? '#10B981' : (colors[litterType as keyof typeof colors] || colors.other);
   const size = sizes[quantity as keyof typeof sizes] || sizes.moderate;
 
   return L.divIcon({
@@ -534,6 +546,7 @@ function createCustomMarkerIcon(litterType: string, quantity: string): L.DivIcon
         border-radius: 50% 50% 50% 0;
         transform: rotate(-45deg);
         box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        ${isCleaned ? 'opacity: 0.7;' : ''}
       ">
         <div style="
           width: 100%;
@@ -546,7 +559,7 @@ function createCustomMarkerIcon(litterType: string, quantity: string): L.DivIcon
           font-size: ${size * 0.4}px;
           font-weight: bold;
         ">
-          ${getLitterTypeIcon(litterType)}
+          ${isCleaned ? '✓' : getLitterTypeIcon(litterType)}
         </div>
       </div>
     `,