Ui fixings

Frontend/erp-system/components/hrm/CodeNameMasterPage.tsx

@@ -4,7 +4,7 @@
 // (Branch, Designation, EmploymentType) — identical shape to each other, so one
 // component parameterized by the resource's api/labels replaces 3 near-duplicate pages.
 import { useEffect, useState } from "react"
-import { CheckCircle2, ChevronLeft, ChevronRight, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"
+import { CheckCircle2, Pencil, Plus, Search, Trash2, XCircle, X } from "lucide-react"
 
 import { errorMessage } from "@/lib/error-map"
 import { cn } from "@/lib/utils"
@@ -16,6 +16,7 @@ import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { PaginationFooter } from "@/components/ui/pagination-footer"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"
@@ -507,54 +508,13 @@ export function CodeNameMasterPage<T extends CodeNamed>({
       )}
 
       {pagination && pagination.totalItems > 0 && (
-        <div className="hidden items-center gap-3 md:flex md:justify-between">
-          <div className="flex items-center gap-3">
-            <p className="text-sm text-muted-foreground">
-              Showing <span className="font-medium text-foreground">{(pagination.page - 1) * pagination.pageSize + 1}</span>–
-              <span className="font-medium text-foreground">
-                {Math.min(pagination.page * pagination.pageSize, pagination.totalItems)}
-              </span>{" "}
-              of <span className="font-medium text-foreground">{pagination.totalItems}</span> {title.toLowerCase()}
-            </p>
-            <label className="flex items-center gap-1.5 text-sm text-muted-foreground">
-              Rows per page
-              <select
-                value={pageSize}
-                onChange={(e) => { setPage(1); setPageSize(Number(e.target.value)) }}
-                className="h-8 rounded-md border border-black bg-white px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-                aria-label="Rows per page"
-              >
-                {PAGE_SIZE_OPTIONS.map((size) => (
-                  <option key={size} value={size}>{size}</option>
-                ))}
-              </select>
-            </label>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              disabled={pagination.page <= 1}
-              onClick={() => setPage((p) => Math.max(1, p - 1))}
-            >
-              <ChevronLeft className="size-4" />
-              Previous
-            </Button>
-            <span className="min-w-20 text-center text-sm text-muted-foreground">
-              Page {pagination.page} of {pagination.totalPages}
-            </span>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              disabled={pagination.page >= pagination.totalPages}
-              onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
-            >
-              Next
-              <ChevronRight className="size-4" />
-            </Button>
-          </div>
+        <div className="hidden md:block">
+          <PaginationFooter
+            pagination={pagination}
+            onPageChange={setPage}
+            pageSizeOptions={PAGE_SIZE_OPTIONS}
+            onPageSizeChange={(size) => { setPage(1); setPageSize(size) }}
+          />
         </div>
       )}
     </div>