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

@@ -119,33 +119,39 @@ const SharedTable = ({
         </div>
       </div>
 
-      <div className="paginationContainer">
+      <div className="paginationBar">
-        <div className="paginationLeft">
+        <div className="paginationPerPage">
-          <label>
+          <span className="paginationLabel">Show</span>
-            Records per page:
+          <div className="paginationSizeGroup">
-            <select
+            {[12, 24, 48, 96].map((size) => (
-              value={pageSize}
+              <button
-              onChange={(e) => setPageSize(Number(e.target.value))}
+                key={size}
-              style={{ marginLeft: "10px" }}
+                className={`paginationSizeBtn ${pageSize === size ? "active" : ""}`}
-            >
+                onClick={() => { setPageSize(size); setPage(1); }}
-              <option>12</option>
+              >
-              <option>24</option>
+                {size}
-              <option>48</option>
+              </button>
-              <option>96</option>
+            ))}
-            </select>
+          </div>
-          </label>
+          <span className="paginationLabel">per page</span>
         </div>
-        <div className="paginationRight">
+        <div className="paginationNav">
-          <span>
+          <span className="paginationInfo">
-            Showing {Math.min(page * pageSize, totalCount)} of {totalCount}
+            {Math.min((page - 1) * pageSize + 1, totalCount)}–{Math.min(page * pageSize, totalCount)} of {totalCount}
           </span>
-          <div className="pagination">
+          <div className="paginationButtons">
-            <button onClick={() => setPage(page - 1)} disabled={page === 1}>
+            <button className="paginationBtn" onClick={() => setPage(1)} disabled={page === 1} title="First">
-              ← Previous
+              «
             </button>
-            <span>Page {page} of {totalPages}</span>
+            <button className="paginationBtn" onClick={() => setPage(page - 1)} disabled={page === 1} title="Previous">
-            <button onClick={() => setPage(page + 1)} disabled={page >= totalPages}>
+              ‹
-              Next →
+            </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>

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 {
+.paginationLabel {
-  padding: 6px 12px;
+  color: #999;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 3px;
-  cursor: pointer;
   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 {
+.paginationSizeBtn.active {
-  opacity: 0.5;
+  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;