From b26fde454dcebdd458fc0f5f21f08f30a04b50fe Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:26:11 -0400
Subject: [PATCH] Redesign pagination bar with button group page size selector

- Records per page as a button group (12/24/48/96) with active highlight
- First/prev/next/last navigation buttons
- Current page number as blue badge
- Showing X-Y of Z range display
- Resets to page 1 when changing page size
---
 src/components/SharedTable.js |  54 ++++++++++--------
 src/site.css                  | 101 ++++++++++++++++++++++++++++------
 2 files changed, 113 insertions(+), 42 deletions(-)

diff --git a/src/components/SharedTable.js b/src/components/SharedTable.js
index 381e44fb..19954411 100644
--- a/src/components/SharedTable.js
+++ b/src/components/SharedTable.js
@@ -119,33 +119,39 @@ const SharedTable = ({
         </div>
       </div>
 
-      <div className="paginationContainer">
-        <div className="paginationLeft">
-          <label>
-            Records per page:
-            <select
-              value={pageSize}
-              onChange={(e) => setPageSize(Number(e.target.value))}
-              style={{ marginLeft: "10px" }}
-            >
-              <option>12</option>
-              <option>24</option>
-              <option>48</option>
-              <option>96</option>
-            </select>
-          </label>
+      <div className="paginationBar">
+        <div className="paginationPerPage">
+          <span className="paginationLabel">Show</span>
+          <div className="paginationSizeGroup">
+            {[12, 24, 48, 96].map((size) => (
+              <button
+                key={size}
+                className={`paginationSizeBtn ${pageSize === size ? "active" : ""}`}
+                onClick={() => { setPageSize(size); setPage(1); }}
+              >
+                {size}
+              </button>
+            ))}
+          </div>
+          <span className="paginationLabel">per page</span>
         </div>
-        <div className="paginationRight">
-          <span>
-            Showing {Math.min(page * pageSize, totalCount)} of {totalCount}
+        <div className="paginationNav">
+          <span className="paginationInfo">
+            {Math.min((page - 1) * pageSize + 1, totalCount)}–{Math.min(page * pageSize, totalCount)} of {totalCount}
           </span>
-          <div className="pagination">
-            <button onClick={() => setPage(page - 1)} disabled={page === 1}>
-              ← Previous
+          <div className="paginationButtons">
+            <button className="paginationBtn" onClick={() => setPage(1)} disabled={page === 1} title="First">
+              «
             </button>
-            <span>Page {page} of {totalPages}</span>
-            <button onClick={() => setPage(page + 1)} disabled={page >= totalPages}>
-              Next →
+            <button className="paginationBtn" onClick={() => setPage(page - 1)} disabled={page === 1} title="Previous">
+              ‹
+            </button>
+            <span className="paginationPage">{page}</span>
+            <button className="paginationBtn" onClick={() => setPage(page + 1)} disabled={page >= totalPages} title="Next">
+              ›
+            </button>
+            <button className="paginationBtn" onClick={() => setPage(totalPages)} disabled={page >= totalPages} title="Last">
+              »
             </button>
           </div>
         </div>
diff --git a/src/site.css b/src/site.css
index 26493063..9209da05 100644
--- a/src/site.css
+++ b/src/site.css
@@ -251,45 +251,110 @@ body {
 }
 
 /* Pagination */
-.paginationContainer {
+.paginationBar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 12px 16px;
   border-top: 1px solid #eee;
   font-size: 13px;
+  background: #fafafa;
 }
 
-.paginationLeft, .paginationRight {
+.paginationPerPage {
   display: flex;
   align-items: center;
-  gap: 15px;
-}
-
-.pagination {
-  display: flex;
   gap: 8px;
-  align-items: center;
 }
 
-.pagination button {
-  padding: 6px 12px;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 3px;
-  cursor: pointer;
+.paginationLabel {
+  color: #999;
   font-size: 12px;
 }
 
-.pagination button:hover:not(:disabled) {
+.paginationSizeGroup {
+  display: flex;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.paginationSizeBtn {
+  padding: 4px 12px;
+  border: none;
+  border-right: 1px solid #ddd;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  color: #666;
+}
+
+.paginationSizeBtn:last-child {
+  border-right: none;
+}
+
+.paginationSizeBtn:hover {
   background: #f0f0f0;
 }
 
-.pagination button:disabled {
-  opacity: 0.5;
+.paginationSizeBtn.active {
+  background: #007bff;
+  color: #fff;
+}
+
+.paginationNav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.paginationInfo {
+  color: #999;
+  font-size: 12px;
+}
+
+.paginationButtons {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.paginationBtn {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #333;
+}
+
+.paginationBtn:hover:not(:disabled) {
+  background: #f0f0f0;
+}
+
+.paginationBtn:disabled {
+  opacity: 0.3;
   cursor: not-allowed;
 }
 
+.paginationPage {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #007bff;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
 /* Form Styles */
 .formWrapper {
   padding: 20px;