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

import DevicesToPay from "@/components/devices-to-pay";
import { auth } from "@/lib/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>
  );
}