Merge pull request #3872 from OneCommunityGlobal/feat/css-modules-totalorgsummary

Sai Siri Sudheeksha Vavila: Switch /totalorgsummary to CSS Modules an…

Author: one-community

package-lock.json

@@ -38,6 +38,7 @@
     "chart.js": "^4.1.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.2.6",
+    "clsx": "^2.1.1",
     "cross-spawn": "^7.0.6",
     "crypto-browserify": "^3.12.1",
     "d3": "^7.8.5",

package.json

@@ -1,14 +1,18 @@
-import '../TotalOrgSummary.css';
-
+import styles from '../TotalOrgSummary.module.css';
+import cx from 'clsx';
 export default function NumbersVolunteerWorked({ isLoading, data, darkMode }) {
   return (
     <div>
       <p
-        className={`${
-          darkMode ? 'text-light' : 'text-dark'
-        } component-border component-pie-chart-label p-2`}
+        data-pdf-label
+        className={cx(
+          darkMode ? 'text-light' : 'text-dark',
+          styles.componentBorder,
+          styles.componentPieChartLabel,
+          'p-2',
+        )}
       >
-        {isLoading ? '...' : data.count} Volunteers worked 1+ hours over assigned time
+        {isLoading ? '...' : data?.count ?? 0} Volunteers worked 1+ hours over assigned time
       </p>
     </div>
   );