added Ellipsis Pagination

src/components/Activities/Attendance.jsx

@@ -11,6 +11,7 @@ import { useSelector } from "react-redux";
 import { useQueryClient } from "@tanstack/react-query";
 import eventBus from "../../services/eventBus";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import Pagination from "../common/Pagination";
 
 const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizationId, includeInactive, date }) => {
   const queryClient = useQueryClient();
@@ -108,6 +109,8 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+
+  
   return (
     <>
       <div
@@ -226,46 +229,12 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
 
 
             {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
-              <nav aria-label="Page ">
+              
-                <ul className="pagination pagination-sm justify-content-end py-1">
+              <Pagination
-                  <li
+                currentPage={currentPage}
-                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
+                totalPages={totalPages}
-                      }`}
+                onPageChange={paginate}
-                  >
+              />
-                    <button
-                      className="page-link btn-xs"
-                      onClick={() => paginate(currentPage - 1)}
-                    >
-                      &laquo;
-                    </button>
-                  </li>
-                  {[...Array(totalPages)].map((_, index) => (
-                    <li
-                      key={index}
-                      className={`page-item ${currentPage === index + 1 ? "active" : ""
-                        }`}
-                    >
-                      <button
-                        className="page-link "
-                        onClick={() => paginate(index + 1)}
-                      >
-                        {index + 1}
-                      </button>
-                    </li>
-                  ))}
-                  <li
-                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                      }`}
-                  >
-                    <button
-                      className="page-link "
-                      onClick={() => paginate(currentPage + 1)}
-                    >
-                      &raquo;
-                    </button>
-                  </li>
-                </ul>
-              </nav>
             )}
           </>
         ) : (

src/components/Activities/AttendcesLogs.jsx

@@ -11,6 +11,7 @@ import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
 import { queryClient } from "../../layouts/AuthLayout";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import Pagination from "../common/Pagination";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -372,45 +373,11 @@ const AttendanceLog = ({ handleModalData, searchTerm ,organizationId}) => {
         </div>
       )}
       {filteredSearchData.length > ITEMS_PER_PAGE && (
-        <nav aria-label="Page ">
+      <Pagination
-          <ul className="pagination pagination-sm justify-content-end py-1">
+                currentPage={currentPage}
-            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+                totalPages={totalPages}
-              <button
+                onPageChange={paginate}
-                className="page-link btn-xs"
+              />
-                onClick={() => paginate(currentPage - 1)}
-              >
-                &laquo;
-              </button>
-            </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-              (pageNumber) => (
-                <li
-                  key={pageNumber}
-                  className={`page-item ${currentPage === pageNumber ? "active" : ""
-                    }`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => paginate(pageNumber)}
-                  >
-                    {pageNumber}
-                  </button>
-                </li>
-              )
-            )}
-            <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                }`}
-            >
-              <button
-                className="page-link"
-                onClick={() => paginate(currentPage + 1)}
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
       )}
     </>
   );

src/components/Activities/Regularization.jsx

@@ -9,6 +9,7 @@ import usePagination from "../../hooks/usePagination";
 import eventBus from "../../services/eventBus";
 import { cacheData, clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
+import Pagination from "../common/Pagination";
 
 const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, IncludeInActive  }) => {
   const queryClient = useQueryClient();
@@ -189,43 +190,11 @@ const Regularization = ({ handleRequest, searchTerm,projectId, organizationId, I
         </div>
       )}
       {!loading && totalPages > 1 && (
-        <nav aria-label="Page ">
+        <Pagination
-          <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
+                currentPage={currentPage}
-            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
+                totalPages={totalPages}
-              <button
+                onPageChange={paginate}
-                className="page-link btn-xs"
+              />
-                onClick={() => paginate(currentPage - 1)}
-              >
-                &laquo;
-              </button>
-            </li>
-            {[...Array(totalPages)].map((_, index) => (
-              <li
-                key={index}
-                className={`page-item ${currentPage === index + 1 ? "active" : ""
-                  }`}
-              >
-                <button
-                  className="page-link "
-                  onClick={() => paginate(index + 1)}
-                >
-                  {index + 1}
-                </button>
-              </li>
-            ))}
-            <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                }`}
-            >
-              <button
-                className="page-link "
-                onClick={() => paginate(currentPage + 1)}
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
       )}
     </div>
   );