feat(pagination): implement windowed pagination for improved navigation

- Introduced windowed pagination logic in the TendersTable component to enhance user experience by allowing for a more manageable view of pages.
- Updated the pagination component to accept new props for page range and margin pages, enabling customizable pagination display.
- Refactored the useTenderListPresenter to utilize the new windowed pagination functionality, improving clarity and maintainability of pagination handling.

src/components/Tables/tenders/index.tsx

@@ -42,6 +42,7 @@ const TendersTable = () => {
     navigateToTenderDetails,
     navigateToTenderFeedback,
     handlePaginationChange,
+    buildWindowedPageLabel,
     getRowNumber,
     formatDateTimeCell,
     pagination,
@@ -157,6 +158,9 @@ const TendersTable = () => {
           currentPage={pagination.currentPage}
           totalPages={pagination.totalPages}
           onPageChange={handlePaginationChange}
+          pageRangeDisplayed={3}
+          marginPagesDisplayed={1}
+          pageLabelBuilder={buildWindowedPageLabel}
         />
       </IsVisible>
     </ListWrapper>

src/components/Tables/tenders/useTenderListPresenter.ts

@@ -346,6 +346,42 @@ const useTenderListPresenter = () => {
       error,
     });
 
+  const MAX_PAGE_JUMP = 10;
+  const paginationWindow = useMemo(() => {
+    const windowStart = Math.max(0, pagination.currentPage - MAX_PAGE_JUMP);
+    const windowEnd = Math.min(
+      Math.max(pagination.totalPages - 1, 0),
+      pagination.currentPage + MAX_PAGE_JUMP,
+    );
+    return {
+      windowStart,
+      virtualCurrent: pagination.currentPage - windowStart,
+      virtualTotal: Math.max(windowEnd - windowStart + 1, 1),
+    };
+  }, [pagination.currentPage, pagination.totalPages]);
+
+  const handleWindowedPaginationChange = useCallback(
+    (e: { selected: number }) => {
+      handlePaginationChange({
+        selected: e.selected + paginationWindow.windowStart,
+      });
+    },
+    [handlePaginationChange, paginationWindow.windowStart],
+  );
+
+  const buildWindowedPageLabel = useCallback(
+    (virtualPage: number) => String(virtualPage + paginationWindow.windowStart),
+    [paginationWindow.windowStart],
+  );
+
+  const windowedPagination = useMemo(
+    () => ({
+      currentPage: paginationWindow.virtualCurrent,
+      totalPages: paginationWindow.virtualTotal,
+    }),
+    [paginationWindow.virtualCurrent, paginationWindow.virtualTotal],
+  );
+
   const shouldShowPagination =
     !isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
 
@@ -498,10 +534,11 @@ const useTenderListPresenter = () => {
     tendersList,
     navigateToTenderDetails,
     navigateToTenderFeedback,
-    handlePaginationChange,
+    handlePaginationChange: handleWindowedPaginationChange,
+    buildWindowedPageLabel,
     getRowNumber,
     formatDateTimeCell,
-    pagination,
+    pagination: windowedPagination,
   };
 };