From 3f951f98e9efc03e713fbda9869598842c4d751f Mon Sep 17 00:00:00 2001
From: clocko <locko.charles@gmail.com>
Date: Wed, 24 Jun 2026 16:43:21 +0100
Subject: [PATCH] fix: consolidate duplicate TransactionPagination into single
 correct implementation

---
 components/transactions/pagination.tsx | 140 +++++++++++++++----------
 1 file changed, 83 insertions(+), 57 deletions(-)

diff --git a/components/transactions/pagination.tsx b/components/transactions/pagination.tsx
index 81f3ea2..037fae5 100644
--- a/components/transactions/pagination.tsx
+++ b/components/transactions/pagination.tsx
@@ -1,67 +1,93 @@
 "use client";
 
-import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
-interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    totalItems: number;
-    itemsPerPage: number;
+interface TransactionPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  totalItems: number;
+  itemsPerPage: number;
 }
 
-export function TransactionPagination({ 
-    currentPage, 
-    totalPages, 
-    onPageChange,
-    totalItems,
-    itemsPerPage
-}: PaginationProps) {
-    const startItem = ((currentPage - 1) * itemsPerPage) + 1;
-    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+export function TransactionPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  totalItems,
+  itemsPerPage,
+}: TransactionPaginationProps) {
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
 
-    return (
-        <div className="flex flex-col md:flex-row items-center justify-between gap-4 py-4 px-2">
-            <p className="text-sm text-muted-foreground">
-                Showing {startItem} to {endItem} of {totalItems} entries
-            </p>
+  const getVisiblePages = () => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
 
-            <div className="flex items-center gap-2">
-                <button
-                    onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-                    disabled={currentPage === 1}
-                    className="px-3 py-1 text-xs font-medium border rounded-md hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >
-                    Previous
-                </button>
+    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
+      range.push(i);
+    }
 
-                {/* Simplified page numbers for now */}
-                <div className="flex items-center gap-1">
-                    {[1, 2, 3, 4, 5].map((page) => (
-                         <button
-                            key={page}
-                            onClick={() => onPageChange(page)}
-                            className={cn(
-                                "h-7 w-7 flex items-center justify-center text-xs rounded-md transition-colors",
-                                currentPage === page 
-                                    ? "bg-orange-500 text-white font-bold" 
-                                    : "bg-muted/50 hover:bg-muted text-foreground"
-                            )}
-                        >
-                            {page}
-                        </button>
-                    ))}
-                    <span className="text-xs text-muted-foreground px-1">...</span>
-                </div>
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, '...');
+    } else {
+      rangeWithDots.push(1);
+    }
 
-                <button
-                    onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-                    disabled={currentPage === totalPages}
-                    className="px-3 py-1 text-xs font-medium border rounded-md hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >
-                    Next
-                </button>
-            </div>
-        </div>
-    );
+    rangeWithDots.push(...range);
+
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push('...', totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+
+    return rangeWithDots;
+  };
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6 pt-4 border-t border-border">
+      <div className="text-sm text-muted-foreground">
+        Showing {startItem} to {endItem} of {totalItems} results
+      </div>
+      
+      <div className="flex items-center gap-1">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-border bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        
+        {getVisiblePages().map((page, index) => (
+          <button
+            key={index}
+            onClick={() => typeof page === 'number' && onPageChange(page)}
+            disabled={page === '...'}
+            className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
+              page === currentPage
+                ? 'bg-primary text-primary-foreground'
+                : page === '...'
+                ? 'cursor-default text-muted-foreground'
+                : 'border border-border bg-background text-foreground hover:bg-muted'
+            }`}
+          >
+            {page}
+          </button>
+        ))}
+        
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-border bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
 }