From 783d4b360d2c299a74ea7d253ecff79ede40b312 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Tue, 8 Jul 2025 22:39:59 +0500
Subject: [PATCH] =?UTF-8?q?fix:=20pagination=20in=20PaymentsTable=20and=20?=
 =?UTF-8?q?TopupsTable=20components=20=F0=9F=90=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(dashboard)/top-ups/[topupId]/page.tsx | 41 +++++++++++-----------
 components/devices-table.tsx               |  1 -
 components/payments-table.tsx              |  7 +++-
 components/topups-table.tsx                | 11 +++---
 4 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/app/(dashboard)/top-ups/[topupId]/page.tsx b/app/(dashboard)/top-ups/[topupId]/page.tsx
index c981875..a36e23f 100644
--- a/app/(dashboard)/top-ups/[topupId]/page.tsx
+++ b/app/(dashboard)/top-ups/[topupId]/page.tsx
@@ -25,20 +25,19 @@ export default async function TopupPage({
       <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
         <h3 className="text-sarLinkOrange text-2xl">Topup</h3>
         <div className="flex flex-col gap-4 items-end w-full">
-          {!topup.is_expired ||
-            (topup.status !== "PENDING" && (
-              <Button
-                disabled
-                className={cn(
-                  "rounded-md opacity-100! uppercase font-semibold",
-                  // topup?.paid
-                  // ? "text-green-900 bg-green-500/20"
-                  // : "text-inherit bg-yellow-400",
-                )}
-              >
-                {topup?.paid ? <span>Paid</span> : ""}
-              </Button>
-            ))}
+          {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
+            <Button
+              disabled
+              className={cn(
+                "rounded-md opacity-100! uppercase font-semibold",
+                topup?.paid
+                  ? "text-green-900 bg-green-500/20"
+                  : "text-inherit bg-yellow-400",
+              )}
+            >
+              {topup.status}
+            </Button>
+          )}
           {topup.status === "PENDING" && !topup.is_expired && (
             <Button>
               <TextShimmer>Payment Pending</TextShimmer>{" "}
@@ -62,20 +61,20 @@ export default async function TopupPage({
             ))}
         </div>
       </div>
-      {
-        (!topup.paid && topup.status === "PENDING" && !topup.is_expired) && (
-          <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
-        )
-      }
+      {!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
+        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
+      )}
       <div
         id="user-topup-details"
         className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
       >
         <TopupToPay
-          disabled={topup.paid || topup.is_expired || topup.status === "CANCELLED"}
+          disabled={
+            topup.paid || topup.is_expired || topup.status === "CANCELLED"
+          }
           topup={topup || undefined}
         />
       </div>
-    </div >
+    </div>
   );
 }
diff --git a/components/devices-table.tsx b/components/devices-table.tsx
index 9c82bce..85ddcdf 100644
--- a/components/devices-table.tsx
+++ b/components/devices-table.tsx
@@ -52,7 +52,6 @@ export async function DevicesTable({
 	}
 	apiParams.limit = limit;
 	apiParams.offset = offset;
-	console.log("API Params:", apiParams);
 	const [error, devices] = await tryCatch(
 		getDevices(apiParams),
 	);
diff --git a/components/payments-table.tsx b/components/payments-table.tsx
index 4b79ec5..c85cc7b 100644
--- a/components/payments-table.tsx
+++ b/components/payments-table.tsx
@@ -28,12 +28,17 @@ export async function PaymentsTable({
 	}>;
 }) {
 	const resolvedParams = await searchParams;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 	const apiParams: Record<string, string | number | undefined> = {};
 	for (const [key, value] of Object.entries(resolvedParams)) {
 		if (value !== undefined && value !== "") {
 			apiParams[key] = typeof value === "number" ? value : String(value);
 		}
 	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
 	const [error, payments] = await tryCatch(getPayments(apiParams));
 
 	if (error) {
@@ -166,7 +171,7 @@ export async function PaymentsTable({
 							</TableFooter>
 						</Table>
 						<Pagination
-							totalPages={meta.total / meta.per_page}
+							totalPages={meta.last_page}
 							currentPage={meta.current_page}
 						/>
 					</div>
diff --git a/components/topups-table.tsx b/components/topups-table.tsx
index f85e3eb..a312f3e 100644
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -27,7 +27,9 @@ export async function TopupsTable({
 	}>;
 }) {
 	const resolvedParams = await searchParams;
-
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 	// Build params object
 	const apiParams: Record<string, string | number | undefined> = {};
 	for (const [key, value] of Object.entries(resolvedParams)) {
@@ -35,7 +37,8 @@ export async function TopupsTable({
 			apiParams[key] = typeof value === "number" ? value : String(value);
 		}
 	}
-
+	apiParams.limit = limit;
+	apiParams.offset = offset;
 	const [error, topups] = await tryCatch(getTopups(apiParams));
 
 	if (error) {
@@ -151,8 +154,8 @@ export async function TopupsTable({
 						))}
 					</div>
 					<Pagination
-						totalPages={meta.total / meta.per_page}
-						currentPage={meta.current_page}
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
 					/>
 				</>
 			)}