Mahika - fix: label Team Stats axis as Volunteers

src/components/CustomTooltip.jsx

@@ -38,7 +38,15 @@ const getTooltipData = (payload, label) => {
   };
 };
 
-function CustomTooltip({ active, payload, label, tooltipType, darkMode = false }) {
+function CustomTooltip({
+  active,
+  payload,
+  label,
+  tooltipType,
+  darkMode = false,
+  valueLabel = 'Total Hours',
+  formatValue = false,
+}) {
   if (!active || !payload || !payload.length) return null;
 
   const isDarkMode = darkMode;
@@ -63,7 +71,12 @@ function CustomTooltip({ active, payload, label, tooltipType, darkMode = false }
     }
 
     if (totalHours !== undefined) {
-      return <div style={{ color: textColor, fontWeight: 'bold' }}>Total Hours: {totalHours}</div>;
+      const displayValue = formatValue ? formatNumber(totalHours) : totalHours;
+      return (
+        <div style={{ color: textColor, fontWeight: 'bold' }}>
+          {valueLabel}: {displayValue}
+        </div>
+      );
     }
 
     return null;
@@ -102,13 +115,17 @@ CustomTooltip.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   tooltipType: PropTypes.string,
   darkMode: PropTypes.bool,
+  valueLabel: PropTypes.string,
+  formatValue: PropTypes.bool,
 };
 
 CustomTooltip.defaultProps = {
   active: false,
   payload: null,
   label: '',
   tooltipType: undefined,
+  valueLabel: 'Total Hours',
+  formatValue: false,
   darkMode: false,
 };
 

src/components/TotalOrgSummary/TeamStats/TeamStatsBarChart.jsx

@@ -48,7 +48,14 @@ function createTeamStatsTooltipContent(yAxisLabel, darkMode) {
       payload: { ...item.payload, change: formatChangePercent(item.payload?.change) },
     }));
     return (
-      <CustomTooltip {...props} payload={formatted} yAxisLabel={yAxisLabel} darkMode={darkMode} />
+      <CustomTooltip
+        {...props}
+        payload={formatted}
+        yAxisLabel={yAxisLabel}
+        darkMode={darkMode}
+        valueLabel="Volunteers"
+        formatValue
+      />
     );
   }
   TeamStatsTooltipContent.displayName = 'TeamStatsTooltipContent';
@@ -72,7 +79,7 @@ function TeamStatsBarChart({ data, yAxisLabel }) {
         >
           <XAxis type="number" tick={{ fill: darkMode ? 'white' : '#666' }}>
             <Label
-              value="Total Hours Contributed"
+              value="Volunteers"
               position="insideBottom"
               offset={-10}
               style={{

src/components/__tests__/CustomTooltip.test.jsx

@@ -28,4 +28,21 @@ describe('CustomTooltip', () => {
     expect(screen.getByText(/Total Hours: 12/)).toBeInTheDocument();
     expect(screen.getByText(/Percentage: 50%/)).toBeInTheDocument();
   });
+
+  it('uses a custom valueLabel when provided (e.g. Team Stats showing Volunteers, not Total Hours)', () => {
+    const payload2 = [{ payload: { name: 'In Team', totalHours: 963 } }];
+    render(<CustomTooltip active payload={payload2} valueLabel="Volunteers" />, container);
+    expect(screen.getByText(/Volunteers: 963/)).toBeInTheDocument();
+    expect(screen.queryByText(/Total Hours/)).not.toBeInTheDocument();
+  });
+
+  it('rounds the value to a whole number when formatValue is set, without affecting callers that leave it off', () => {
+    const payload2 = [{ payload: { name: 'In Team', totalHours: 963.7 } }];
+    render(
+      <CustomTooltip active payload={payload2} valueLabel="Volunteers" formatValue />,
+      container,
+    );
+    expect(screen.getByText(/Volunteers: 964/)).toBeInTheDocument();
+    expect(screen.queryByText(/963\.7/)).not.toBeInTheDocument();
+  });
 });