increase page size

src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -32,7 +32,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
 
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredData,
-    5
+    10
   );
   return (
     <>
@@ -116,7 +116,7 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                         </td>
                       </tr>
                     ))}
-                    {!attendance && (
+                {!attendance && (
                   <span>No employees assigned to the project</span>
                 )}
               </tbody>

src/components/Activities/AttendcesLogs.jsx

@@ -66,7 +66,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    5
+    10
   );
 
   useEffect(() => {
@@ -86,8 +86,8 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
     const attendanceDate = [
       ...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
     ].sort((a, b) => new Date(b) - new Date(a));
-    if(attendanceDate != dates){
+    if (attendanceDate != dates) {
-    setDates(attendanceDate);
+      setDates(attendanceDate);
     }
   }, [data]);
 
@@ -134,11 +134,15 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
               {dates.map((date, i) => {
                 return (
                   <React.Fragment key={i}>
-                    {currentItems.some(item => item.checkInTime.split("T")[0] === date) && <tr className="table-row-header">
+                    {currentItems.some(
-                      <td colSpan={7} className="text-start">
+                      (item) => item.checkInTime.split("T")[0] === date
-                        <strong>{date}</strong>
+                    ) && (
-                      </td>
+                      <tr className="table-row-header">
-                    </tr>}
+                        <td colSpan={7} className="text-start">
+                          <strong>{date}</strong>
+                        </td>
+                      </tr>
+                    )}
                     {currentItems
                       ?.filter((item) => item.checkInTime.includes(date))
                       .map((attendance, index) => (

src/components/Activities/Regularization.jsx

@@ -23,11 +23,11 @@ const Regularization = ({ handleRequest }) => {
     return nameA.localeCompare(nameB);
   };
 
-  const filteredData = regularizesList.sort(sortByName)
+  const filteredData = regularizesList.sort(sortByName);
-  
+
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredData,
-    5
+    10
   );
 
   return (
@@ -94,50 +94,46 @@ const Regularization = ({ handleRequest }) => {
         </tbody>
       </table>
       {!loading && (
-              <nav aria-label="Page ">
+        <nav aria-label="Page ">
-                <ul className="pagination pagination-sm justify-content-end py-1">
+          <ul className="pagination pagination-sm justify-content-end py-1">
-                  <li
+            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
-                    className={`page-item  ${
+              <button
-                      currentPage === 1 ? "disabled" : ""
+                className="page-link btn-xs"
-                    }`}
+                onClick={() => paginate(currentPage - 1)}
-                  >
+              >
-                    <button
+                &laquo;
-                      className="page-link btn-xs"
+              </button>
-                      onClick={() => paginate(currentPage - 1)}
+            </li>
-                    >
+            {[...Array(totalPages)].map((_, index) => (
-                      &laquo;
+              <li
-                    </button>
+                key={index}
-                  </li>
+                className={`page-item ${
-                  {[...Array(totalPages)].map((_, index) => (
+                  currentPage === index + 1 ? "active" : ""
-                    <li
+                }`}
-                      key={index}
+              >
-                      className={`page-item ${
+                <button
-                        currentPage === index + 1 ? "active" : ""
+                  className="page-link "
-                      }`}
+                  onClick={() => paginate(index + 1)}
-                    >
+                >
-                      <button
+                  {index + 1}
-                        className="page-link "
+                </button>
-                        onClick={() => paginate(index + 1)}
+              </li>
-                      >
+            ))}
-                        {index + 1}
+            <li
-                      </button>
+              className={`page-item ${
-                    </li>
+                currentPage === totalPages ? "disabled" : ""
-                  ))}
+              }`}
-                  <li
+            >
-                    className={`page-item ${
+              <button
-                      currentPage === totalPages ? "disabled" : ""
+                className="page-link "
-                    }`}
+                onClick={() => paginate(currentPage + 1)}
-                  >
+              >
-                    <button
+                &raquo;
-                      className="page-link "
+              </button>
-                      onClick={() => paginate(currentPage + 1)}
+            </li>
-                    >
+          </ul>
-                      &raquo;
+        </nav>
-                    </button>
+      )}
-                  </li>
-                </ul>
-              </nav>
-            )}
     </div>
   );
 };

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -70,7 +70,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    5
+    10
   );
 
   useEffect(() => {
@@ -84,7 +84,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
         })
       );
     }
-  }, [dateRange, employee,isRefreshing]);
+  }, [dateRange, employee, isRefreshing]);
 
   const openModal = (id) => {
     setAttendanecId(id);
@@ -132,20 +132,18 @@ const AttendancesEmployeeRecords = ({ employee }) => {
             <i
               className={`bx bx-refresh cursor-pointer fs-4 ${
                 loading ? "spin" : ""
-                }`}
+              }`}
-              data-toggle="tooltip" 
+              data-toggle="tooltip"
               title="Refresh"
               onClick={() => setIsRefreshing(!isRefreshing)}
             />
           </div>
         </div>
         <div className="table-responsive text-nowrap">
-        {(!loading && data.length === 0) &&
+          {!loading && data.length === 0 && <span>No employee logs</span>}
-             <span>No employee logs</span>
+          {error && <div className="text-center">{error}</div>}
-          }
+          {loading && !data && <div className="text-center">Loading...</div>}
-          {error && <div className="text-center">{error }</div>}
+          {data && data.length > 0 && (
-          {(loading && !data ) && <div className="text-center">Loading...</div>}
-          {(data && data.length > 0 ) && (
             <table className="table mb-0">
               <thead>
                 <tr>
@@ -165,7 +163,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 </tr>
               </thead>
               <tbody>
-                {currentItems?.map( ( attendance, index ) => (
+                {currentItems?.map((attendance, index) => (
                   <tr key={index}>
                     <td colSpan={2}>
                       <div className="d-flex justify-content-start align-items-center">
@@ -184,12 +182,12 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                     </td>
                     <td>
                       {" "}
-                      {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
+                      {moment(attendance.checkInTime).format("DD-MMM-YYYY")}
                     </td>
-                    <td>{convertShortTime( attendance.checkInTime )}</td>
+                    <td>{convertShortTime(attendance.checkInTime)}</td>
                     <td>
                       {attendance.checkOutTime
-                        ? convertShortTime( attendance.checkOutTime )
+                        ? convertShortTime(attendance.checkOutTime)
                         : "--"}
                     </td>
 
@@ -200,18 +198,18 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                         tabIndex="0"
                         aria-controls="DataTables_Table_0"
                         data-bs-toggle="modal"
-                        onClick={() => openModal( attendance.id )}
+                        onClick={() => openModal(attendance.id)}
                       >
                         View
                       </button>
                     </td>
                   </tr>
-                ) )}
+                ))}
               </tbody>
             </table>
-          ) } 
+          )}
         </div>
-        {(!loading && data.length  > 5) && (
+        {!loading && data.length > 5 && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li