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

import DevicesToPay from "@/components/devices-to-pay";
import { auth } from "@/app/auth";
import prisma from "@/lib/db";
import { cn } from "@/lib/utils";
import { headers } from "next/headers";
import React from "react";
export default async function PaymentPage({
	params,
}: {
	params: Promise<{ paymentId: string }>;
}) {
	const session = await auth.api.getSession({
		headers: await headers(),
	});
	const user = await prisma.user.findUnique({
		where: {
			id: session?.session.userId,
		},
	});
	const paymentId = (await params).paymentId;
	const payment = await prisma.payment.findUnique({
		where: {
			id: paymentId,
		},
		include: {
			devices: true,
		},
	});
	return (
		<div>
			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
				<h3 className="text-sarLinkOrange text-2xl">Payment</h3>
				<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>
			</div>

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