Nirali hours report individual group

.husky-disabled/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
+npm run test

src/components/Reports/ProjectTable.jsx

@@ -1,49 +1,101 @@
-import React from 'react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
 import { boxStyle, boxStyleDark } from '~/styles';
 import { Link } from 'react-router-dom';
 
 function ProjectTable({ projects, darkMode }) {
-  // Display project lists
-  let ProjectsList = [];
-  if (projects.length > 0) {
-    ProjectsList = projects.map((project, index) => (
-      <tr data-testid={`project-row-${project._id}`} key={project._id}>
-        <th scope="row" className={darkMode ? 'text-light' : ''}>
-          <div>{index + 1}</div>
-        </th>
-        <td>
-          <Link to={`/projectreport/${project._id}`} className={darkMode ? 'text-light' : ''}>{project.projectName}</Link>
-        </td>
-        <td>
-          {project.isActive ? (
-            <div className="isActive">
-              <i className="fa fa-circle" data-testid="status-icon" aria-hidden="true" />
-            </div>
-          ) : (
-            <div className="isNotActive">
-              <i className="fa fa-circle-o" data-testid="status-icon" aria-hidden="true" />
-            </div>
-          )}
-        </td>
-      </tr>
-    ));
-  }
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  const totalPages = Math.ceil(projects?.length / itemsPerPage);
+
+  const paginatedProjects = projects?.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage,
+  );
+
+  const ProjectsList = paginatedProjects.map((project, index) => (
+    <tr data-testid={`project-row-${project._id}`} key={project._id}>
+      <th scope="row" className={darkMode ? 'text-light' : ''}>
+        <div>{(currentPage - 1) * itemsPerPage + index + 1}</div>
+      </th>
+      <td>
+        <Link to={`/projectreport/${project._id}`} className={darkMode ? 'text-light' : ''}>
+          {project.projectName}
+        </Link>
+      </td>
+      <td>
+        {project.isActive ? (
+          <div className="isActive">
+            <i className="fa fa-circle" data-testid="status-icon" aria-hidden="true" />
+          </div>
+        ) : (
+          <div className="isNotActive">
+            <i className="fa fa-circle-o" data-testid="status-icon" aria-hidden="true" />
+          </div>
+        )}
+      </td>
+    </tr>
+  ));
 
   return (
-    <table className={`table ${darkMode ? 'bg-yinmn-blue' : 'table-bordered'}`} style={darkMode ? boxStyleDark : boxStyle}>
-      <thead>
-        <tr className={darkMode ? 'bg-space-cadet text-light' : ''}>
-          <th scope="col" id="projects__order">
-            #
-          </th>
-          <th scope="col">Project Name</th>
-          <th scope="col" id="projects__active">
-            Active
-          </th>
-        </tr>
-      </thead>
-      <tbody className={darkMode ? 'dark-mode' : ''}>{ProjectsList}</tbody>
-    </table>
+    <>
+      <table
+        className={`table ${darkMode ? 'bg-yinmn-blue' : 'table-bordered'}`}
+        style={darkMode ? boxStyleDark : boxStyle}
+      >
+        <thead>
+          <tr className={darkMode ? 'bg-space-cadet text-light' : ''}>
+            <th scope="col" id="projects__order">#</th>
+            <th scope="col">Project Name</th>
+            <th scope="col" id="projects__active">Active</th>
+          </tr>
+        </thead>
+        <tbody className={darkMode ? 'dark-mode' : ''}>{ProjectsList}</tbody>
+      </table>
+
+      {totalPages > 1 && (
+        <div className="d-flex justify-content-center align-items-center mt-3 gap-2">
+          <Button
+            size="sm"
+            disabled={currentPage === 1}
+            onClick={() => setCurrentPage(prev => prev - 1)}
+          >
+            Previous
+          </Button>
+
+          <span className={darkMode ? 'text-light' : ''}>
+            Page {currentPage} of {totalPages}
+          </span>
+
+          <Button
+            size="sm"
+            disabled={currentPage === totalPages}
+            onClick={() => setCurrentPage(prev => prev + 1)}
+          >
+            Next
+          </Button>
+        </div>
+      )}
+    </>
   );
 }
-export default ProjectTable;
+
+ProjectTable.propTypes = {
+  projects: PropTypes.arrayOf(
+    PropTypes.shape({
+      _id: PropTypes.string.isRequired,
+      projectName: PropTypes.string.isRequired,
+      isActive: PropTypes.bool.isRequired,
+    }),
+  ),
+  darkMode: PropTypes.bool,
+};
+
+ProjectTable.defaultProps = {
+  projects: [],
+  darkMode: false,
+};
+
+export default ProjectTable;

src/components/Reports/Reports.jsx

@@ -32,6 +32,7 @@ import TotalPeopleReport from './TotalReport/TotalPeopleReport';
 import TotalProjectReport from './TotalReport/TotalProjectReport';
 import TotalTeamReport from './TotalReport/TotalTeamReport';
 import ViewReportByDate from './ViewReportsByDate/ViewReportsByDate';
+import VolunteerHoursReport from './VolunteerHoursReport';
 
 const DATE_PICKER_MIN_DATE = '01/01/2010';
 
@@ -51,6 +52,7 @@ class ReportsPage extends Component {
       showAddTeamHistory: false,
       showAddProjHistory: false,
       showContributorsReport: false,
+      showVolunteerHoursReport: false,
       teamNameSearchText: '',
       wildCardSearchText: '',
       selectedTeamId: 0,
@@ -109,6 +111,7 @@ class ReportsPage extends Component {
     this.onDateChange = this.onDateChange.bind(this);
     this.handleClearFilters = this.handleClearFilters.bind(this);
     this.showContributorsReport = this.showContributorsReport.bind(this);
+    this.showVolunteerHoursReport = this.showVolunteerHoursReport.bind(this);
     this.handleSearchClick = this.handleSearchClick.bind(this);
   }
 
@@ -229,7 +232,6 @@ endDate: moment()
       }
       return false;
     });
-
     return filteredList;
   };
 
@@ -296,7 +298,8 @@ endDate: moment()
       showAddPersonHistory: false,
       showAddTeamHistory: false,
       showCharts: !prevState.showProjects,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -313,7 +316,8 @@ endDate: moment()
       showAddPersonHistory: false,
       showAddTeamHistory: false,
       showCharts: !prevState.showTeams,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -330,7 +334,8 @@ endDate: moment()
       showAddPersonHistory: false,
       showAddTeamHistory: false,
       showCharts: !prevState.showPeople,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -347,7 +352,8 @@ endDate: moment()
       showAddPersonHistory: false,
       showAddTeamHistory: false,
       showCharts: !prevState.showTotalPeople,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -364,7 +370,8 @@ endDate: moment()
       showAddPersonHistory: false,
       showAddTeamHistory: false,
       showCharts: !prevState.showTotalTeam,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -417,7 +424,8 @@ endDate: moment()
       showAddProjHistory: !prevState.showAddProjHistory,
       showAddPersonHistory: false,
       showAddTeamHistory: false,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -433,7 +441,8 @@ endDate: moment()
       showAddProjHistory: false,
       showAddPersonHistory: !prevState.showAddPersonHistory,
       showAddTeamHistory: false,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -449,7 +458,8 @@ endDate: moment()
       showAddProjHistory: false,
       showAddPersonHistory: false,
       showAddTeamHistory: !prevState.showAddTeamHistory,
-      showContributorsReport: false
+      showContributorsReport: false,
+      showVolunteerHoursReport: false
     }));
   }
 
@@ -466,7 +476,26 @@ endDate: moment()
       showAddProjHistory: false,
       showAddPersonHistory: false,
       showAddTeamHistory: false,
-      showCharts: !prevState.showContributorsReport
+      showCharts: !prevState.showContributorsReport,
+      showVolunteerHoursReport: false
+    }));
+  }
+
+  showVolunteerHoursReport() {
+    this.setState(prevState => ({
+      showVolunteerHoursReport: !prevState.showVolunteerHoursReport,
+      showProjects: false,
+      showPeople: false,
+      showTeams: false,
+      showTotalProject: false,
+      showTotalPeople: false,
+      showTotalTeam: false,
+      showAddTimeForm: false,
+      showAddProjHistory: false,
+      showAddPersonHistory: false,
+      showAddTeamHistory: false,
+      showContributorsReport: false,
+      showCharts: !prevState.showVolunteerHoursReport
     }));
   }
 
@@ -712,6 +741,28 @@ endDate: moment()
                         />
                       </div>
                     </div>
+                    <div className={styles['total-report-item']}>
+                      <Button
+                        type="button"
+                        color="success"
+                        onClick={this.showVolunteerHoursReport}
+                      >
+                        {this.state.showVolunteerHoursReport
+                        ? 'Hide Volunteer Hours Report'
+                        : 'Show Volunteer Hours Report'}
+                      </Button>
+                      <div style={{ display: 'inline-block', marginLeft: 10 }}>
+                        <EditableInfoModal
+                          areaName="volunteerHoursReportInfoPoint"
+                          areaTitle="Volunteer Hours Report"
+                          role={myRole}
+                          fontSize={15}
+                          isPermissionPage
+                          darkMode={darkMode}
+                          defaultText="Track total volunteer hours for nonprofit reporting. View hours by person, team, or project with customizable date ranges."
+                        />
+                      </div>
+                    </div>
                   </div>
                   {myRole !== 'Owner' && (
                     <div className={styles['lost-time-container']}>
@@ -895,7 +946,10 @@ endDate: moment()
                     darkMode={darkMode}
                     userRole={userRole}
                   />
-            )}
+                 )}
+                  {this.state.showVolunteerHoursReport && (
+                    <VolunteerHoursReport />
+                  )}
                   {this.state.showAddTimeForm && myRole === 'Owner' && (
                   <AddLostTime
                     isOpen={this.state.showAddTimeForm}