sarlink-portal/app/(dashboard)/user-payments/page.tsx

import { authOptions } from "@/app/auth";
import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
import { getServerSession } from "next-auth";
import React, { Suspense } from "react";

export default async function UserPayments({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	const query = (await searchParams)?.query || "";
	const session = await getServerSession(authOptions);
	return (
		<div>
			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
				<h3 className="text-sarLinkOrange text-2xl">User Payments</h3>
			</div>
			<pre>{JSON.stringify(session, null, 2)}</pre>
			<Suspense key={query} fallback={"loading...."}>
				<UsersPaymentsTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}