Merge pull request #3882 from OneCommunityGlobal/shashank-madan-change-css-to-module-css

Shashank madan change css to module css

Author: one-community

package-lock.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@babel/runtime-corejs3": "^7.27.6",
+    "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
     "@date-io/dayjs": "^3.2.0",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.14.0",
@@ -81,7 +82,6 @@
     "react-dom": "^18.3.1",
     "react-icons": "^4.12.0",
     "react-leaflet": "4.2.1",
-    "react-leaflet-cluster": "^3.1.1",
     "react-multi-select-component": "^4.0.2",
     "react-phone-input-2": "^2.14.0",
     "react-redux": "^7.2.0",
@@ -106,7 +106,6 @@
     "redux-concatenate-reducers": "^1.0.0",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.4.2",
-    "reselect": "^5.1.1",
     "semver": "^7.7.2",
     "stream-browserify": "^3.0.0",
     "tinymce": "^7.2.0",

package.json

@@ -593,8 +593,8 @@ export const userProfileMock = {
   },
   mediaUrl: 'http://dropbox.com',
   weeklySummariesCount: 0,
-  savedTangibleHrs: [
-    0, 0, 0, 0, 0, 0, 0, 0
+  savedTangibleHrs:[
+    0,0,0,0,0,0,0,0
   ],
 };
 
@@ -1095,7 +1095,6 @@ export const rolesMock = {
           'swapTask',
           'deleteTask',
           'updateNum',
-          'viewTaskExtensionCount',
           // Teams
           'postTeam',
           'deleteTeam',
@@ -1255,7 +1254,6 @@ export const rolesMock = {
           'updateTask',
           'swapTask',
           'deleteTask',
-          'viewTaskExtensionCount',
           'postTeam',
           'deleteTeam',
           'putTeam',
@@ -1329,9 +1327,9 @@ export const createAuthMocks = (permissions) => {
       frontPermissions: []
     },
     firstName: 'Dev',
-    profilePic: ''
+    profilePic:''
   };
-  const onlyPermissions = { ...authTemplate, permissions: { frontPermissions: permissions } };
-  const allOtherPermissions = { ...authTemplate, permissions: { frontPermissions: allPermissionsExcept(permissions) } };
+  const onlyPermissions = {...authTemplate, permissions: {frontPermissions: permissions}};
+  const allOtherPermissions = {...authTemplate, permissions: {frontPermissions: allPermissionsExcept(permissions)}};
   return [onlyPermissions, allOtherPermissions];
 };

public/avatar.png

@@ -30,7 +30,7 @@ function ApplicantVolunteerRatio() {
         // Set all roles as selected by default
         setSelectedRoles(roleOptions);
       } catch (err) {
-        // Error fetching all roles
+        console.error('Error fetching all roles:', err);
         setError('Failed to load roles. Please try again.');
       }
     };
@@ -73,7 +73,7 @@ function ApplicantVolunteerRatio() {
 
         setData(transformedData);
       } catch (err) {
-        // Error fetching applicant volunteer ratio data
+        console.error('Error fetching applicant volunteer ratio data:', err);
         setError('Failed to load data. Please try again.');
       } finally {
         setLoading(false);

src/__tests__/mockStates.js

@@ -1,15 +1,13 @@
-/* eslint-disable */
-/* prettier-ignore */
-
+/* eslint-disable */ /* prettier-ignore */
 import { useState, useEffect } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, Tooltip, Title } from 'chart.js';
 import axios from 'axios';
 import Select from 'react-select';
 import DatePicker from 'react-datepicker';
 
+import styles from './LessonsLearntChart.module.css';
 import 'react-datepicker/dist/react-datepicker.css';
-import './LessonsLearntChart.css';
 
 ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Title);
 
@@ -45,146 +43,92 @@ const useLessonsData = (selectedProjects, startDate, endDate) => {
         setIsLoading(false);
       }
     };
-
     fetchLessons();
   }, [selectedProjects, startDate, endDate]);
 
   return { allProjects, lessonsData, isLoading };
 };
 
 function ChartTitle({ title }) {
-  return <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem' }}>{title}</h2>;
+  return <h2 className={styles.chartTitle}>{title}</h2>;
 }
 
-function Filters({
-  allProjects,
-  selectedProjects,
-  setSelectedProjects,
-  startDate,
-  setStartDate,
-  endDate,
-  setEndDate,
-}) {
-  return (
-    <div className="filter-row">
-      <div className="filter">
-        <label>Project:</label>
-        <Select
-          options={allProjects?.map(p => ({ label: p.name, value: p.id })) || []}
-          isMulti
-          placeholder="All"
-          onChange={setSelectedProjects}
-        />
-      </div>
-      <div className="filter">
-        <label>From:</label>
-        <DatePicker
-          selected={startDate}
-          onChange={setStartDate}
-          selectsStart
-          startDate={startDate}
-          endDate={endDate}
-          placeholderText="Start Date"
-        />
-      </div>
-      <div className="filter">
-        <label>To:</label>
-        <DatePicker
-          selected={endDate}
-          onChange={setEndDate}
-          selectsEnd
-          startDate={startDate}
-          endDate={endDate}
-          placeholderText="End Date"
-        />
-      </div>
-    </div>
-  );
-}
+export default function LessonsLearntChart() {
+  const [selectedProjects, setSelectedProjects] = useState([]);
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
 
-const PercentageLabels = ({ data }) => {
-  return (
-    <div className="percentage-labels">
-      {data?.map(item => (
-        <div
-          key={item.id || item.name} // use a stable, unique identifier
-          className="percentage-label"
-          style={{ left: `${(data.indexOf(item) + 0.5) * (100 / data.length)}%` }}
-        >
-          {item.trend > 0 ? `+${item.trend}%` : `${item.trend}%`}
-        </div>
-      ))}
-    </div>
+  const { allProjects, lessonsData, isLoading } = useLessonsData(
+    selectedProjects,
+    startDate,
+    endDate,
   );
-};
 
-const LessonsBarChart = ({ data, isLoading }) => {
+  const handleProjectChange = selected => {
+    setSelectedProjects(selected || []);
+  };
+
   const chartData = {
-    labels: data?.map(item => item.project) || [],
+    labels: lessonsData.map(d => d.projectName),
     datasets: [
       {
-        label: 'No. of Lessons Learnt',
-        data: data?.map(item => item.count) || [],
-        backgroundColor: '#4F46E5',
-        borderRadius: 4,
+        label: 'Lessons Learnt',
+        data: lessonsData.map(d => d.percentage),
+        backgroundColor: '#10b981',
       },
     ],
   };
 
   const chartOptions = {
     responsive: true,
     plugins: {
-      tooltip: {
-        callbacks: {
-          label: () => 'Click to view the Tags',
-        },
+      title: {
+        display: false,
       },
     },
-    onClick: (_, elements) => {
-      if (elements.length > 0) {
-        const index = elements[0].index;
-        const project = chartData.labels[index];
-        window.location.href = `/project-issues/${project}`;
-      }
-    },
   };
 
-  if (isLoading) return <div className="loading">Loading...</div>;
-
   return (
-    <div className="chart-wrapper">
-      <Bar data={chartData} options={chartOptions} />
-      <PercentageLabels data={data} />
-    </div>
-  );
-};
-
-const LessonsLearntChart = () => {
-  const [selectedProjects, setSelectedProjects] = useState([]);
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
+    <div className={styles.chartContainer}>
+      <ChartTitle title="Lessons Learnt" />
 
-  const { allProjects, lessonsData, isLoading } = useLessonsData(
-    selectedProjects,
-    startDate,
-    endDate,
-  );
+      <div className={styles.filterRow}>
+        <div className={styles.filter}>
+          <label>Select Projects</label>
+          <Select
+            isMulti
+            options={allProjects.map(proj => ({
+              value: proj.id,
+              label: proj.name,
+            }))}
+            value={selectedProjects}
+            onChange={handleProjectChange}
+          />
+        </div>
+        <div className={styles.filter}>
+          <label>From</label>
+          <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
+        </div>
+        <div className={styles.filter}>
+          <label>To</label>
+          <DatePicker selected={endDate} onChange={date => setEndDate(date)} />
+        </div>
+      </div>
 
-  return (
-    <div className="chart-container">
-      <ChartTitle title="Lessons Learnt" />
-      <Filters
-        allProjects={allProjects}
-        selectedProjects={selectedProjects}
-        setSelectedProjects={setSelectedProjects}
-        startDate={startDate}
-        setStartDate={setStartDate}
-        endDate={endDate}
-        setEndDate={setEndDate}
-      />
-      <LessonsBarChart data={lessonsData} isLoading={isLoading} />
+      <div className={styles.chartWrapper}>
+        {isLoading ? <p>Loading...</p> : <Bar data={chartData} options={chartOptions} />}
+        <div className={styles.percentageLabels}>
+          {lessonsData.map((d, idx) => (
+            <span
+              key={idx}
+              className={styles.percentageLabel}
+              style={{ left: `${(idx + 0.5) * (100 / lessonsData.length)}%` }}
+            >
+              {d.percentage}%
+            </span>
+          ))}
+        </div>
+      </div>
     </div>
   );
-};
-
-export default LessonsLearntChart;
+}