Roshini Seelamsetty : Fix Global Volunteer Network map Not Populating (Total Org Summary Dashboard)

src/components/TotalOrgSummary/GlobalVolunteerMap/GlobalVolunteerMap.jsx

@@ -1,8 +1,10 @@
-import { useEffect } from 'react';
+/* eslint-disable react/no-array-index-key */
+import { useEffect, useMemo } from 'react';
 import L from 'leaflet';
 import { MapContainer, TileLayer, useMap, CircleMarker } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.heat';
+
 import Loading from '~/components/common/Loading';
 
 const volunteerColors = {
@@ -13,86 +15,138 @@
   const map = useMap();
 
   useEffect(() => {
-    if (points.length > 0) {
-      const heat = L.heatLayer(points, {
-        radius: 20,
-        blur: 20,
-        maxZoom: 2,
-        gradient: {
-          0.4: '#00f',
-          0.6: '#0f0',
-          0.7: '#ff0',
-          0.8: '#ffa500',
-          1.0: '#f00',
-        },
-      }).addTo(map);
-
-      return () => {
-        map.removeLayer(heat);
-      };
-    }
-    return undefined;
-  }, [points, map]);
+    if (!map || !points.length) return undefined;
+
+    const heatLayer = L.heatLayer(points, {
+      radius: 20,
+      blur: 20,
+      maxZoom: 4,
+      gradient: {
+        0.2: '#00f',
+        0.4: '#0f0',
+        0.6: '#ff0',
+        0.8: '#ffa500',
+        1.0: '#f00',
+      },
+    });
+
+    heatLayer.addTo(map);
+
+    return () => {
+      map.removeLayer(heatLayer);
+    };
+  }, [map, points]);
 
   return null;
 }
 
-function MapComponent({ locations = [], isLoading, error }) {
-  const heatMapPoints = (locations || []).map(location => [
-    location._id.lat,
-    location._id.lng,
-    location.count,
-  ]);
+function GlobalVolunteerMap({ locations = [], isLoading, error }) {
+  /**
+   * Normalize backend response safely
+   */
+  const normalizedLocations = useMemo(() => {
+    if (!Array.isArray(locations)) return [];
+
+    return locations
+      .map(location => {
+        const lat = location?._id?.lat ?? location?.lat ?? location?.latitude;
+
+        const lng = location?._id?.lng ?? location?.lng ?? location?.longitude;
 
-  const activeVolunteers = (locations || []).filter(v => v.status === 'active');
+        const count = Number(location?.count || 1);
+
+        return {
+          lat: Number(lat),
+          lng: Number(lng),
+          count,
+        };
+      })
+      .filter(
+        item =>
+          !Number.isNaN(item.lat) &&
+          !Number.isNaN(item.lng) &&
+          item.lat >= -90 &&
+          item.lat <= 90 &&
+          item.lng >= -180 &&
+          item.lng <= 180,
+      );
+  }, [locations]);
+
+  /**
+   * Build heatmap points
+   */
+  const heatMapPoints = useMemo(
+    () => normalizedLocations.map(location => [location.lat, location.lng, location.count]),
+    [normalizedLocations],
+  );
 
   if (isLoading) {
     return (
       <div className="d-flex justify-content-center align-items-center">
-        <div className="w-100vh">
+        <div className="w-100">
           <Loading />
         </div>
       </div>
     );
   }
 
+  if (error) {
+    return (
+      <div className="error-container text-center p-4">
+        <p>Error loading map data</p>
+      </div>
+    );
+  }
+
+  if (!normalizedLocations.length) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{
+          height: '500px',
+          border: '1px solid #ddd',
+          borderRadius: '8px',
+        }}
+      >
+        <p>No volunteer location data available</p>
+      </div>
+    );
+  }
+
   return (
     <div className="map-container" style={{ marginTop: '20px' }}>
-      {error && (
-        <div className="error-container">
-          <p>Error: {error}</p>
-          <button
-            type="button"
-            onClick={() => {
-              /* Add retry logic here */
-            }}
-          >
-            Retry
-          </button>
-        </div>
-      )}
-      <MapContainer center={[20, 0]} zoom={2} style={{ height: '500px', width: '100%' }}>
+      <MapContainer
+        center={[20, 0]}
+        zoom={2}
+        scrollWheelZoom
+        style={{
+          height: '500px',
+          width: '100%',
+          borderRadius: '8px',
+        }}
+      >
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          attribution="&copy; OpenStreetMap contributors"
         />
+
         <HeatMap points={heatMapPoints} />
-        {activeVolunteers.length > 0 &&
-          activeVolunteers.map(volunteer => (
-            <CircleMarker
-              key={`active-${volunteer._id.lat}-${volunteer._id.lng}`}
-              center={[volunteer._id.lat, volunteer._id.lng]}
-              radius={8}
-              pathOptions={{
-                color: volunteerColors.active,
-                fillColor: volunteerColors.active,
-                fillOpacity: 0.8,
-              }}
-            />
-          ))}
+
+        {normalizedLocations.map((location, index) => (
+          <CircleMarker
+            key={`${location.lat}-${location.lng}-${index}`}
+            center={[location.lat, location.lng]}
+            radius={Math.min(10, Math.max(4, location.count))}
+            pathOptions={{
+              color: volunteerColors.active,
+              fillColor: volunteerColors.active,
+              fillOpacity: 0.7,
+            }}
+          />
+        ))}
       </MapContainer>
     </div>
   );
 }
 
-export default MapComponent;
+export default GlobalVolunteerMap;

src/components/TotalOrgSummary/PieChart.jsx

@@ -1,44 +1,52 @@
-// // import * as React from 'react';
-// import { DefaultizedPieValueType } from '@mui/x-charts/models';
-// import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
+import * as React from 'react';
+import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
 
-// const data = [
-//   { label: 'Group A', value: 400, color: '#0088FE' },
-//   { label: 'Group B', value: 300, color: '#00C49F' },
-//   { label: 'Group C', value: 300, color: '#FFBB28' },
-//   { label: 'Group D', value: 200, color: '#FF8042' },
-// ];
+const data = [
+  { id: 0, label: 'Administrator', value: 6, color: '#fb0505' },
+  { id: 1, label: 'Volunteer', value: 4, color: '#8ebfff' },
+  { id: 2, label: 'Owner', value: 3, color: '#f68d42' },
+  { id: 3, label: 'Mentor', value: 1, color: '#f2ff00' },
+];
 
-// const sizing = {
-//   margin: { right: 5 },
-//   width: 200,
-//   height: 200,
-//   legend: { hidden: true },
-// };
-// const TOTAL = data.map(item => item.value).reduce((a, b) => a + b, 0);
+const TOTAL = data.reduce((sum, item) => sum + item.value, 0);
 
-// const getArcLabel = (params: DefaultizedPieValueType) => {
-//   const percent = params.value / TOTAL;
-//   return `${(percent * 100).toFixed(0)}%`;
-// };
+const getArcLabel = params => {
+  const percent = params.value / TOTAL;
+  return `${params.value}\n(${(percent * 100).toFixed(0)}%)`;
+};
 
-// export default function PieChartWithCustomizedLabel() {
-//   return (
-//     <PieChart
-//       series={[
-//         {
-//           outerRadius: 80,
-//           data,
-//           arcLabel: getArcLabel,
-//         },
-//       ]}
-//       sx={{
-//         [`& .${pieArcLabelClasses.root}`]: {
-//           fill: 'white',
-//           fontSize: 14,
-//         },
-//       }}
-//       {...sizing}
-//     />
-//   );
-// }
+export default function RoleDistributionPieChart() {
+  return (
+    <PieChart
+      series={[
+        {
+          data,
+          innerRadius: 70,
+          outerRadius: 145,
+          arcLabel: getArcLabel,
+          arcLabelMinAngle: 10,
+          arcLabelRadius: 105,
+          cornerRadius: 0,
+          paddingAngle: 0,
+        },
+      ]}
+      width={520}
+      height={430}
+      slotProps={{
+        legend: {
+          hidden: false,
+        },
+      }}
+      sx={{
+        [`& .${pieArcLabelClasses.root}`]: {
+          fill: '#ffffff',
+          fontSize: 14,
+          fontWeight: 700,
+        },
+        [`& .${pieArcLabelClasses.root}`]: {
+          whiteSpace: 'pre',
+        },
+      }}
+    />
+  );
+}

src/components/TotalOrgSummary/TotalOrgSummary.module.css

@@ -34,7 +34,7 @@
     padding-top: 10px !important;
     padding-bottom: 10px !important;
   }
-  
+
   .containerTotalOrgWrapper:global(.mb-5) {
     margin-bottom: 20px !important;
   }
@@ -215,6 +215,29 @@
   color: #fff !important;
 }
 
+/* Role Distribution slice label overrides */
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-dark),
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-dark)
+  tspan {
+  fill: #000 !important;
+  color: #000 !important;
+}
+
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-light),
+.containerTotalOrgWrapper:global(.bg-oxford-blue)
+  .componentContainer
+  :global(.role-distribution-label-light)
+  tspan {
+  fill: #fff !important;
+  color: #fff !important;
+}
+
 .containerTotalOrgWrapper.bg-oxford-blue h3 {
   color: #fff;
 }
@@ -382,8 +405,6 @@
   transform: translateX(4px) !important;
 }
 
-/* Dark mode dropdown consistency */
-
 /* Component containers - Clean borderless design */
 .componentContainer {
   margin: 0 0 15px;
@@ -696,4 +717,4 @@
   }
 }
 
-/* stylelint-enable no-descending-specificity */
+/* stylelint-enable no-descending-specificity */