sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-10 11:06:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: pagination in PaymentsTable and TopupsTable components 🐛
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 7m35s
Details

Browse Source
This commit is contained in:
i701
2025-07-08 22:39:59 +05:00
parent fa12cd74d7
commit 783d4b360d
4 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/(dashboard)/top-ups/[topupId]/page.tsx
View File

@ -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"> <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> <h3 className="text-sarLinkOrange text-2xl">Topup</h3>
<div className="flex flex-col gap-4 items-end w-full"> <div className="flex flex-col gap-4 items-end w-full">
{!topup.is_expired || {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
(topup.status !== "PENDING" && ( <Button
<Button disabled
disabled className={cn(
className={cn( "rounded-md opacity-100! uppercase font-semibold",
"rounded-md opacity-100! uppercase font-semibold", topup?.paid
// topup?.paid ? "text-green-900 bg-green-500/20"
// ? "text-green-900 bg-green-500/20" : "text-inherit bg-yellow-400",
// : "text-inherit bg-yellow-400", )}
)} >
> {topup.status}
{topup?.paid ? <span>Paid</span> : ""} </Button>
</Button> )}
))}
{topup.status === "PENDING" && !topup.is_expired && ( {topup.status === "PENDING" && !topup.is_expired && (
<Button> <Button>
<TextShimmer>Payment Pending</TextShimmer>{" "} <TextShimmer>Payment Pending</TextShimmer>{" "}
@ -62,20 +61,20 @@ export default async function TopupPage({
))} ))}
</div> </div>
</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} />
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} /> )}
)
}
<div <div
id="user-topup-details" id="user-topup-details"
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start" className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
> >
<TopupToPay <TopupToPay
disabled={topup.paid || topup.is_expired || topup.status === "CANCELLED"} disabled={
topup.paid || topup.is_expired || topup.status === "CANCELLED"
}
topup={topup || undefined} topup={topup || undefined}
/> />
</div> </div>
</div > </div>
); );
} }

1
components/devices-table.tsx
View File

@ -52,7 +52,6 @@ export async function DevicesTable({
} }
apiParams.limit = limit; apiParams.limit = limit;
apiParams.offset = offset; apiParams.offset = offset;
console.log("API Params:", apiParams);
const [error, devices] = await tryCatch( const [error, devices] = await tryCatch(
getDevices(apiParams), getDevices(apiParams),
); );

7
components/payments-table.tsx
View File

@ -28,12 +28,17 @@ export async function PaymentsTable({
}>; }>;
}) { }) {
const resolvedParams = await searchParams; 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> = {}; const apiParams: Record<string, string | number | undefined> = {};
for (const [key, value] of Object.entries(resolvedParams)) { for (const [key, value] of Object.entries(resolvedParams)) {
if (value !== undefined && value !== "") { if (value !== undefined && value !== "") {
apiParams[key] = typeof value === "number" ? value : String(value); apiParams[key] = typeof value === "number" ? value : String(value);
} }
} }
apiParams.limit = limit;
apiParams.offset = offset;
const [error, payments] = await tryCatch(getPayments(apiParams)); const [error, payments] = await tryCatch(getPayments(apiParams));
if (error) { if (error) {
@ -166,7 +171,7 @@ export async function PaymentsTable({
</TableFooter> </TableFooter>
</Table> </Table>
<Pagination <Pagination
totalPages={meta.total / meta.per_page} totalPages={meta.last_page}
currentPage={meta.current_page} currentPage={meta.current_page}
/> />
</div> </div>

11
components/topups-table.tsx
View File

@ -27,7 +27,9 @@ export async function TopupsTable({
}>; }>;
}) { }) {
const resolvedParams = await searchParams; const resolvedParams = await searchParams;
const page = Number.parseInt(resolvedParams.page as string) || 1;
const limit = 10;
const offset = (page - 1) * limit;
// Build params object // Build params object
const apiParams: Record<string, string | number | undefined> = {}; const apiParams: Record<string, string | number | undefined> = {};
for (const [key, value] of Object.entries(resolvedParams)) { 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[key] = typeof value === "number" ? value : String(value);
} }
} }
apiParams.limit = limit;
apiParams.offset = offset;
const [error, topups] = await tryCatch(getTopups(apiParams)); const [error, topups] = await tryCatch(getTopups(apiParams));
if (error) { if (error) {
@ -151,8 +154,8 @@ export async function TopupsTable({
))} ))}
</div> </div>
<Pagination <Pagination
totalPages={meta.total / meta.per_page} totalPages={meta?.last_page}
currentPage={meta.current_page} currentPage={meta?.current_page}
/> />
</> </>
)} )}