Merge pull request #463 from Namiiikaze/feat/#393

Add paginated notification search navigation with numbered pages and …

Author: Abd-Standard

dashboard/src/pages/NotificationSearchPage.tsx

@@ -203,6 +203,28 @@ export function NotificationSearchPage() {
 
   const totalPages = response ? response.totalPages : 0;
 
+  const getVisiblePages = () => {
+    if (totalPages <= 1) return [];
+
+    const pages: number[] = [];
+    const maxVisible = 5;
+    let startPage = Math.max(1, page - Math.floor(maxVisible / 2));
+    let endPage = startPage + maxVisible - 1;
+
+    if (endPage > totalPages) {
+      endPage = totalPages;
+      startPage = Math.max(1, endPage - maxVisible + 1);
+    }
+
+    for (let pageNumber = startPage; pageNumber <= endPage; pageNumber += 1) {
+      pages.push(pageNumber);
+    }
+
+    return pages;
+  };
+
+  const visiblePages = getVisiblePages();
+
   return (
     <main className="notif-search-page">
       <header className="notif-search-page__header">
@@ -431,6 +453,15 @@ export function NotificationSearchPage() {
 
             {totalPages > 1 && (
               <nav className="notif-search-page__pagination" aria-label="Pagination">
+                <button
+                  type="button"
+                  className="pagination__btn"
+                  disabled={page === 1}
+                  onClick={() => setPage(1)}
+                  aria-label="First page"
+                >
+                  «
+                </button>
                 <button
                   type="button"
                   className="pagination__btn"
@@ -440,9 +471,22 @@ export function NotificationSearchPage() {
                 >
                   ← Previous
                 </button>
-                <span className="pagination__info">
-                  Page {page} of {totalPages}
-                </span>
+
+                <div className="pagination__pages" role="list" aria-label="Page numbers">
+                  {visiblePages.map((pageNumber) => (
+                    <button
+                      key={pageNumber}
+                      type="button"
+                      className="pagination__page-btn"
+                      onClick={() => setPage(pageNumber)}
+                      aria-current={pageNumber === page ? 'page' : undefined}
+                      aria-label={`Page ${pageNumber}`}
+                    >
+                      {pageNumber}
+                    </button>
+                  ))}
+                </div>
+
                 <button
                   type="button"
                   className="pagination__btn"
@@ -452,6 +496,18 @@ export function NotificationSearchPage() {
                 >
                   Next →
                 </button>
+                <button
+                  type="button"
+                  className="pagination__btn"
+                  disabled={page >= totalPages}
+                  onClick={() => setPage(totalPages)}
+                  aria-label="Last page"
+                >
+                  »
+                </button>
+                <span className="pagination__info">
+                  Page {page} of {totalPages}
+                </span>
               </nav>
             )}
           </>