From a11d05e720cedbd6e83fc975caad3ac8fab0f9a9 Mon Sep 17 00:00:00 2001
From: Adnan Zahir <adnanzaidanz@gmail.com>
Date: Sat, 25 Apr 2026 13:06:44 +0700
Subject: [PATCH] fix: pagination positioning

---
 .../report/finance/tab/CustomerPaymentTab.tsx | 44 +++++++++--------
 .../report/finance/tab/DebtSupplierTab.tsx    | 47 +++++++++----------
 2 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index 8ca4a3ec..9e60b177 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -731,29 +731,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           />
         )}
 
-        {!isLoading && data.length > 0 && meta && (
-          <div className='max-w-sm ml-auto'>
-            <Pagination
-              totalItems={meta.total_results || 0}
-              itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
-              onPrevPage={() =>
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
-              onNextPage={() =>
-                setCurrentPage((curr) =>
-                  meta.total_pages && curr < meta.total_pages
-                    ? curr + 1
-                    : curr
-                )
-              }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
-              rowOptions={[10, 20, 50, 100]}
-              onRowChange={setPageSize}
-            />
-          </div>
-        )}
-
         {!isLoading &&
           data.length > 0 &&
           data.map((customerReport) => {
@@ -848,6 +825,27 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
               </Card>
             );
           })}
+
+        {!isLoading && data.length > 0 && meta && (
+          <div className='mt-5 px-3'>
+            <Pagination
+              totalItems={meta.total_results || 0}
+              itemsPerPage={meta.limit || 0}
+              currentPage={meta.page || 0}
+              onPrevPage={() =>
+                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
+              }
+              onNextPage={() =>
+                setCurrentPage((curr) =>
+                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                )
+              }
+              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              rowOptions={[10, 20, 50, 100]}
+              onRowChange={setPageSize}
+            />
+          </div>
+        )}
       </div>
 
       {/* Filter Modal */}
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index c9a772b4..8d760208 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -149,7 +149,8 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
 
   handleFilterModalOpenRef.current = () => {
     const restoredFilterBy =
-      dataTypeOptions.find((opt) => opt.value === filterParams.filter_by) || null;
+      dataTypeOptions.find((opt) => opt.value === filterParams.filter_by) ||
+      null;
 
     const supplierIdList = filterParams.supplier_ids
       ? filterParams.supplier_ids.split(',')
@@ -662,29 +663,6 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
           />
         )}
 
-        {!isLoading && data.length > 0 && meta && (
-          <div className='max-w-sm ml-auto'>
-            <Pagination
-              totalItems={meta.total_results || 0}
-              itemsPerPage={meta.limit || 0}
-              currentPage={meta.page || 0}
-              onPrevPage={() =>
-                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
-              }
-              onNextPage={() =>
-                setCurrentPage((curr) =>
-                  meta.total_pages && curr < meta.total_pages
-                    ? curr + 1
-                    : curr
-                )
-              }
-              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
-              rowOptions={[10, 20, 50, 100]}
-              onRowChange={setPageSize}
-            />
-          </div>
-        )}
-
         {!isLoading &&
           data.length > 0 &&
           data.map((supplierReport) => {
@@ -772,6 +750,27 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
               </Card>
             );
           })}
+
+        {!isLoading && data.length > 0 && meta && (
+          <div className='mt-5 px-3'>
+            <Pagination
+              totalItems={meta.total_results || 0}
+              itemsPerPage={meta.limit || 0}
+              currentPage={meta.page || 0}
+              onPrevPage={() =>
+                setCurrentPage((curr) => (curr > 1 ? curr - 1 : curr))
+              }
+              onNextPage={() =>
+                setCurrentPage((curr) =>
+                  meta.total_pages && curr < meta.total_pages ? curr + 1 : curr
+                )
+              }
+              onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
+              rowOptions={[10, 20, 50, 100]}
+              onRowChange={setPageSize}
+            />
+          </div>
+        )}
       </div>
 
       {/* Filter Modal */}