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
2025-11-16 22:51:10 +00:00
parent 14a905a138
commit c70fc77fa7
5 changed files with 64 additions and 8 deletions
--- a/src/components/map/MapFilters.tsx
+++ b/src/components/map/MapFilters.tsx
@@ -218,6 +218,28 @@ export function MapFilters({
            </div>
          )}

+          {/* Show Cleaned Reports Toggle */}
+          <div className="flex items-center justify-between">
+            <label htmlFor="cleaned-toggle" className="text-sm font-medium text-gray-700">
+              Show Cleaned Reports
+            </label>
+            <button
+              id="cleaned-toggle"
+              onClick={() => onFiltersChange({ ...filters, showCleaned: filters.showCleaned !== false })}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                filters.showCleaned !== false ? 'bg-green-600' : 'bg-gray-200'
+              }`}
+              role="switch"
+              aria-checked={filters.showCleaned !== false}
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                  filters.showCleaned !== false ? 'translate-x-6' : 'translate-x-1'
+                }`}
+              />
+            </button>
+          </div>
+
          {/* Hotspot Legend */}
          {showHotspots && onToggleHotspots && (
            <div className="pt-2 border-t border-gray-200">
--- a/src/components/map/MapView.tsx
+++ b/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>
    `,
--- a/src/components/report/ReportDetailModal.tsx
+++ b/src/components/report/ReportDetailModal.tsx
@@ -211,6 +211,26 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
              )}
            </div>

+            {/* Cleaned Status */}
+            {report.cleanedAt && (
+              <div className="p-3 border border-green-200 bg-green-50 rounded-lg">
+                <div className="flex items-center gap-2 mb-2">
+                  <svg className="w-5 h-5 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>
+                  <p className="text-sm font-semibold text-green-800">Cleaned Up</p>
+                </div>
+                <p className="text-sm text-green-700">
+                  This litter was cleaned up on {format(new Date(report.cleanedAt), 'PPP')}
+                </p>
+                {report.cleanedByUserId && (
+                  <p className="text-xs text-green-600 mt-1">
+                    Marked as cleaned by a community member
+                  </p>
+                )}
+              </div>
+            )}
+
            {/* Description */}
            {report.description && (
              <div className="p-3 border border-gray-200 rounded-lg">
@@ -358,7 +378,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
            </div>

            {/* Action Buttons */}
-            {(onVerify || onDispute || onMarkCleaned) && (
+            {(onVerify || onDispute || onMarkCleaned) && !report.cleanedAt && (
              <div className="border-t border-gray-200 pt-4">
                {(onVerify || onDispute) && (
                  <p className="text-sm text-gray-700 mb-3">
@@ -398,7 +418,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
                        <svg className="w-5 h-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>
-                        Cleaned Up
+                        Mark as Cleaned
                      </button>
                    )}
                  </div>
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -141,6 +141,7 @@ export interface FilterState {
  litterTypes?: LitterType[];
  quantities?: QuantityLevel[];
  verificationStatus?: VerificationStatus[];
+  showCleaned?: boolean;
 }

 // Analytics types