From 75699342c7f23d16f270c928478e9cf5241760eb Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 10 May 2024 11:58:34 +0100
Subject: [PATCH] modified table pagination

---
 .../paginatedListing/RecentBVNList.tsx        | 19 +++++++++++--------
 .../paginatedListing/RecentLoanAppList.tsx    | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx b/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx
index 2c49f2c..c12b353 100644
--- a/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx
+++ b/src/_digifi/layout/components/paginatedListing/RecentBVNList.tsx
@@ -89,17 +89,18 @@ export default function RecentBVNList({
         <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
         <button
           onClick={handlePrev}
-          className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
             currentPage == 0
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage == 0}
+          // style={{width:'30px', height:'30px'}}
         >
-          &lt;
+          &lt; Previous
         </button>
 
-        {data.length && data.map((item, index)=>{
+        {/* {data.length && data.map((item, index)=>{
           item = item
           if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
             return (
@@ -111,24 +112,26 @@ export default function RecentBVNList({
                     ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
                     : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
                 }`}
+                disabled={currentPage != index}
                 style={{width:'30px', height:'30px'}}
               >
                 {index/itemsPerPage +1}
               </button>
             )
           }
-        })}
+        })} */}
 
         <button
           onClick={handleNext}
-          className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
             currentPage + numberOfSelection >= data.length
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage + numberOfSelection >= data.length}
+          // style={{width:'30px', height:'30px'}}
         >
-          &gt;
+          Next &gt;
         </button>
       </div>
       )}
diff --git a/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx b/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx
index 271dbea..8b15af1 100644
--- a/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx
+++ b/src/_digifi/layout/components/paginatedListing/RecentLoanAppList.tsx
@@ -89,17 +89,18 @@ export default function RecentLoanAppList({
         <div className="mt-2 mt-sm-5 w-full d-flex gap-4 justify-content-center align-items-center">
         <button
           onClick={handlePrev}
-          className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
             currentPage == 0
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage == 0}
+          // style={{width:'30px', height:'30px'}}
         >
-          &lt;
+          &lt; Previous
         </button>
 
-        {data.length && data.map((item, index)=>{
+        {/* {data.length && data.map((item, index)=>{
           item = item
           if(index%itemsPerPage == 0 && index >= currentPage && index <= currentPage+itemsPerPage){
             return (
@@ -111,24 +112,26 @@ export default function RecentLoanAppList({
                     ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400"
                     : "text-slate-600 border-slate-600 dark:text-white dark:border-white pe-none"
                 }`}
+                disabled={currentPage != index}
                 style={{width:'30px', height:'30px'}}
               >
                 {index/itemsPerPage +1}
               </button>
             )
           }
-        })}
+        })} */}
 
         <button
           onClick={handleNext}
-          className={`text-sm md:text-lg rounded-circle d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
+          className={`text-sm md:text-lg d-flex justify-content-center align-items-center border-1 transition-all duration-300 ${
             currentPage + numberOfSelection >= data.length
               ? "text-slate-400 border-slate-400 dark:text-slate-400 dark:border-slate-400 pe-none"
               : "text-slate-600 border-slate-600 dark:text-white dark:border-white"
           }`}
-          style={{width:'30px', height:'30px'}}
+          disabled={currentPage + numberOfSelection >= data.length}
+          // style={{width:'30px', height:'30px'}}
         >
-          &gt;
+          Next &gt;
         </button>
       </div>
       )}