sarlink-portal/app/(dashboard)/payments/[paymentId]/page.tsx

import { getPayment } from "@/actions/payment";
import { authOptions } from "@/app/auth";
import CancelPaymentButton from "@/components/billing/cancel-payment-button";
import ClientErrorMessage from "@/components/client-error-message";
import DevicesToPay from "@/components/devices-to-pay";
import { cn } from "@/lib/utils";
import { tryCatch } from "@/utils/tryCatch";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
export default async function PaymentPage({
	params,
}: {
	params: Promise<{ paymentId: string }>;
}) {
	const session = await getServerSession(authOptions);

	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} />;
	}
	return (
		<div>
			<div className="flex justify-between items-center border-[1px] 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 gap-4 items-center">
					<span
						className={cn(
							"text-sm border px-4 py-2 rounded-md uppercase font-semibold",
							payment?.paid
								? "text-green-500 bg-green-500/20"
								: "text-yellow-500 bg-yellow-700",
						)}
					>
						{payment?.paid ? "Paid" : "Pending"}
					</span>
					<CancelPaymentButton paymentId={paymentId} />
				</div>
			</div>

			<div
				id="user-filters"
				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<DevicesToPay
					user={session?.user || undefined}
					payment={payment || undefined}
				/>
			</div>
		</div>
	);
}