fix: update total mentors donut chart to use new donutChartData structure

Author: deep3072

src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css

@@ -57,8 +57,13 @@
   justify-content: center;
   align-items: center;
   gap: 16px;
-  margin-top: 28px;
-  flex-wrap: wrap;
+  margin-top: 48px;
+  margin-bottom: 24px;
+  flex-wrap: nowrap;
+  padding: 0 20px;
+  width: max-content;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .mentorStatusLabel {

src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusChart.jsx

@@ -54,16 +54,33 @@ function VolunteerStatusChart({
       return null;
     }
 
-    const { activeMentors, deactivatedMentors, newMentors, totalMentors } = mentorNumberStats;
+    const {
+      donutChartData,
+      activeMentors,
+      deactivatedMentors,
+      newMentors,
+      totalMentors,
+    } = mentorNumberStats;
 
-    return {
-      totalMentors: totalMentors.count,
-      percentageChange: Number(totalMentors.comparisonPercentage) || 0,
-      data: [
+    let chartDataValues;
+    if (donutChartData && donutChartData.existingActive !== undefined) {
+      chartDataValues = [
+        { label: 'Existing Active', value: donutChartData.existingActive.count },
+        { label: 'New Active', value: donutChartData.newActive.count },
+        { label: 'Deactivated', value: donutChartData.deactivated.count },
+      ];
+    } else {
+      chartDataValues = [
         { label: 'Active', value: activeMentors.count },
         { label: 'New', value: newMentors.count },
         { label: 'Deactivated This Week', value: deactivatedMentors.count },
-      ],
+      ];
+    }
+
+    return {
+      totalMentors: totalMentors.count,
+      percentageChange: Number(totalMentors.comparisonPercentage) || 0,
+      data: chartDataValues,
     };
   }, [mentorNumberStats]);
 
@@ -132,6 +149,32 @@ VolunteerStatusChart.propTypes = {
       comparisonPercentage: PropTypes.number,
     }),
   }),
+  mentorNumberStats: PropTypes.shape({
+    donutChartData: PropTypes.shape({
+      existingActive: PropTypes.shape({
+        count: PropTypes.number,
+      }),
+      newActive: PropTypes.shape({
+        count: PropTypes.number,
+      }),
+      deactivated: PropTypes.shape({
+        count: PropTypes.number,
+      }),
+    }),
+    activeMentors: PropTypes.shape({
+      count: PropTypes.number,
+    }),
+    newMentors: PropTypes.shape({
+      count: PropTypes.number,
+    }),
+    deactivatedMentors: PropTypes.shape({
+      count: PropTypes.number,
+    }),
+    totalMentors: PropTypes.shape({
+      count: PropTypes.number,
+      comparisonPercentage: PropTypes.number,
+    }),
+  }),
 };
 
 export default VolunteerStatusChart;

src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.jsx

@@ -26,21 +26,8 @@ function VolunteerStatusPieChart({
   const options = {
     plugins: {
       datalabels: {
-        color: '#000',
-        font: {
-          size: 20,
-          weight: 'bolder',
-          lineHeight: 1.8,
-        },
-        formatter: function(value, context) {
-          const percentage = ((value / totalVolunteers) * 100).toFixed(0);
-          // Show value and percent as two lines for clarity
-          return [`${value}`, `(${percentage}%)`];
-        },
-        display: true,
-        offset: 0,
-        align: 'center',
-        anchor: 'center',
+        // Hide in-slice labels because values are already shown with external guides.
+        display: false,
       },
       legend: {
         display: false,

src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.module.css

@@ -51,8 +51,11 @@
   align-items: center;
   gap: 16px;
   margin-top: 32px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   margin-bottom: 24px;
+  overflow-x: auto;
+  padding: 0 8px;
+  width: 100%;
 }
 
 .volunteerStatusLabel {