From 28ae768113d99ff3943c21b44777c22401d1810d Mon Sep 17 00:00:00 2001
From: saisandeepkoritala <saisandeep.koritala@gmail.com>
Date: Sat, 16 May 2026 02:15:14 -0500
Subject: [PATCH 1/2] Fixed filtering options issue

---
 .../BlueSquareStats/BlueSquareStats.jsx       |  2 +-
 .../RoleDistributionPieChart.jsx              | 30 ++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx b/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx
index 1c9dcdee28..581e55c695 100644
--- a/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx
+++ b/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx
@@ -49,7 +49,7 @@ function BlueSquareStats({ isLoading, blueSquareStats, comparisonType, darkMode
         <DonutChart
           title="TOTAL BLUE SQUARES"
           totalCount={totalBlueSquares.count}
-          percentageChange={pctChange}
+          percentageChange={Number(pctChange)}
           data={data}
           colors={BLUE_SQUARE_STATS_COLORS}
           comparisonType={comparisonType}
diff --git a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
index 54f126f1dd..f7ccd86cf1 100644
--- a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
+++ b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
@@ -28,6 +28,19 @@ const ROLE_COLOR_MAP = {
 import CustomTooltip from '../../CustomTooltip';
 
 const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkMode }) => {
+
+  // Reusable function to sort data and assign colors.
+  const sortDataAndAssignColors =(statsData)=>{
+    statsData?.sort((a, b) => b.count - a.count);
+    const mappedData = statsData?.map((item, index) => ({
+    name: item._id,
+    value: item.count,
+    // Use a stable role mapping first, otherwise fallback by index.
+    color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
+  }));
+  return  mappedData;
+  }
+
   if (isLoading) {
     return (
       <div className="d-flex justify-content-center align-items-center">
@@ -38,13 +51,16 @@ const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkM
     );
   }
 
-  roleDistributionStats.sort((a, b) => b.count - a.count);
-  const data = roleDistributionStats.map((item, index) => ({
-    name: item._id,
-    value: item.count,
-    // Use a stable role mapping first, otherwise fallback by index.
-    color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
-  }));
+  let data=[];
+  // This is to handle the case when we are comparing the data with other time periods. In that case, the data structure is different and we need to access the comparison data.
+  if(roleDistributionStats?.comparison){ 
+    data = sortDataAndAssignColors(roleDistributionStats?.comparison); 
+  }
+  // Fallback to the original data structure when we are not comparing the data with other time periods.
+  else{
+    data = sortDataAndAssignColors(roleDistributionStats);
+  }
+
   const totalValue = data.reduce((sum, entry) => sum + entry.value, 0);
 
   const RADIAN = Math.PI / 180;

From 2a27bb1f0de5cc170ada541fcd02fa9540e30bbb Mon Sep 17 00:00:00 2001
From: saisandeepkoritala <saisandeep.koritala@gmail.com>
Date: Sat, 16 May 2026 02:33:16 -0500
Subject: [PATCH 2/2] Made Recently modified file prettier

---
 .../RoleDistributionPieChart.jsx              | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
index f7ccd86cf1..ac34eedc74 100644
--- a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
+++ b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
@@ -28,18 +28,17 @@ const ROLE_COLOR_MAP = {
 import CustomTooltip from '../../CustomTooltip';
 
 const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkMode }) => {
-
   // Reusable function to sort data and assign colors.
-  const sortDataAndAssignColors =(statsData)=>{
+  const sortDataAndAssignColors = statsData => {
     statsData?.sort((a, b) => b.count - a.count);
     const mappedData = statsData?.map((item, index) => ({
-    name: item._id,
-    value: item.count,
-    // Use a stable role mapping first, otherwise fallback by index.
-    color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
-  }));
-  return  mappedData;
-  }
+      name: item._id,
+      value: item.count,
+      // Use a stable role mapping first, otherwise fallback by index.
+      color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
+    }));
+    return mappedData;
+  };
 
   if (isLoading) {
     return (
@@ -51,13 +50,13 @@ const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkM
     );
   }
 
-  let data=[];
+  let data = [];
   // This is to handle the case when we are comparing the data with other time periods. In that case, the data structure is different and we need to access the comparison data.
-  if(roleDistributionStats?.comparison){ 
-    data = sortDataAndAssignColors(roleDistributionStats?.comparison); 
+  if (roleDistributionStats?.comparison) {
+    data = sortDataAndAssignColors(roleDistributionStats?.comparison);
   }
   // Fallback to the original data structure when we are not comparing the data with other time periods.
-  else{
+  else {
     data = sortDataAndAssignColors(roleDistributionStats);
   }