sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-11-01 04:26:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: add skeletons to paymentId and deviceId pages ♻️
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 10m58s
Details

Browse Source
This commit is contained in:
i701
2025-09-24 17:46:04 +05:00
parent 5dab74b14b
commit 31a05ae917
8 changed files with 501 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/(dashboard)/payments/[paymentId]/loading.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@/components/ui/table";
export default function PaymentLoading() {
return (
<div className="mx-2">
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4">
<Skeleton className="h-8 w-48" />
</div>
<div className="flex flex-col gap-4 mt-7 w-full border rounded-md border-dashed title-bg py-3 px-2 mb-3">
<Skeleton className="h-5 w-36" />
</div>
<div className="flex flex-col gap-3 w-full">
{Array.from({ length: 1 }).map((_, i) => (
<Skeleton
key={`${i + 1}`}
className="w-full border border-gray-300 h-13 rounded-sm"
/>
))}
<div className="pb-4 w-full gap-4 flex sm:flex-row flex-col items-start justify-start">
<div className="my-1 w-full flex items-center justify-between p-2 text-sm text-foreground border rounded">
<Table>
<TableBody className="">
<TableRow>
<TableCell>Payment created</TableCell>
<TableCell className="text-right">
<Skeleton className="h-5 inline-block w-24" />
</TableCell>
</TableRow>
<TableRow>
<TableCell>Total Devices</TableCell>
<TableCell className="text-right text-xl">
<Skeleton className="h-5 w-24 inline-block" />
</TableCell>
</TableRow>
<TableRow>
<TableCell>Duration</TableCell>
<TableCell className="text-right text-xl">
<Skeleton className="h-5 w-24 inline-block" />
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow className="">
<TableCell colSpan={1}>Total Due</TableCell>
<TableCell className="text-right text-3xl font-bold">
<Skeleton className="h-5 w-24 inline-block" />
</TableCell>
</TableRow>
</TableFooter>
</Table>
</div>
</div>
</div>
</div>
);
}

140
app/(dashboard)/payments/[paymentId]/page.tsx
View File

@@ -10,77 +10,77 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
import { cn } from "@/lib/utils";
import { tryCatch } from "@/utils/tryCatch";
export default async function PaymentPage({
params,
params,
}: {
params: Promise<{ paymentId: string }>;
params: Promise<{ paymentId: string }>;
}) {
const paymentId = (await params).paymentId;
const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={error.message} />;
}
const [userError, userProfile] = await tryCatch(getProfile());
if (userError) {
if (userError.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={userError.message} />;
}
const paymentId = (await params).paymentId;
const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={error.message} />;
}
const [userError, userProfile] = await tryCatch(getProfile());
if (userError) {
if (userError.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={userError.message} />;
}
return (
<div>
<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">Payment</h3>
<div className="flex flex-col gap-4 items-end w-full">
{!payment.is_expired &&
payment.paid &&
payment.status !== "PENDING" && (
<Button
disabled
className={cn(
"rounded-md opacity-100! uppercase font-semibold",
payment?.paid
? "text-green-900 bg-green-500/20"
: "text-inherit bg-yellow-400",
)}
>
{payment.status}
</Button>
)}
{payment.status === "PENDING" && !payment.is_expired && (
<Button>
<TextShimmer>Payment Pending</TextShimmer>{" "}
</Button>
)}
{!payment.paid &&
(payment.is_expired ? (
<Button
disabled
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
>
Payment Expired
</Button>
) : payment.status === "PENDING" ? (
<CancelPaymentButton paymentId={paymentId} />
) : payment.status === "CANCELLED" ? (
<Button disabled>Payment Cancelled</Button>
) : (
""
))}
</div>
</div>
{!payment.paid && (
<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
)}
<div
id="user-device-payments"
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
>
<DevicesToPay
disabled={payment.paid || payment.is_expired}
user={userProfile || undefined}
payment={payment || undefined}
/>
</div>
</div>
);
return (
<div>
<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">Payment</h3>
<div className="flex flex-col gap-4 items-end w-full">
{!payment.is_expired &&
payment.paid &&
payment.status !== "PENDING" && (
<Button
disabled
className={cn(
"rounded-md opacity-100! uppercase font-semibold",
payment?.paid
? "text-green-900 bg-green-500/20"
: "text-inherit bg-yellow-400",
)}
>
{payment.status}
</Button>
)}
{payment.status === "PENDING" && !payment.is_expired && (
<Button>
<TextShimmer>Payment Pending</TextShimmer>{" "}
</Button>
)}
{!payment.paid &&
(payment.is_expired ? (
<Button
disabled
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
>
Payment Expired
</Button>
) : payment.status === "PENDING" ? (
<CancelPaymentButton paymentId={paymentId} />
) : payment.status === "CANCELLED" ? (
<Button disabled>Payment Cancelled</Button>
) : (
""
))}
</div>
</div>
{!payment.paid && (
<ExpiryCountDown expiryLabel="Payment" expiresAt={payment.expires_at} />
)}
<div
id="user-device-payments"
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
>
<DevicesToPay
disabled={payment.paid || payment.is_expired}
user={userProfile || undefined}
payment={payment || undefined}
/>
</div>
</div>
);
}