fix: pagination in PaymentsTable and TopupsTable components 🐛

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" && (
+          {!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?.paid
+                  ? "text-green-900 bg-green-500/20"
+                  : "text-inherit bg-yellow-400",
               )}
             >
-                {topup?.paid ? <span>Paid</span> : ""}
+              {topup.status}
             </Button>
-            ))}
+          )}
           {topup.status === "PENDING" && !topup.is_expired && (
             <Button>
               <TextShimmer>Payment Pending</TextShimmer>{" "}
@@ -62,17 +61,17 @@ export default async function TopupPage({
             ))}
         </div>
       </div>
-      {
-        (!topup.paid && topup.status === "PENDING" && !topup.is_expired) && (
+      {!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>

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),
 	);

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>

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}
 					/>
 				</>
 			)}