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

import { Suspense } from "react";
import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
import DynamicFilter from "@/components/generic-filter";

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>
			<DynamicFilter
				description="Filter user payments by name, MAC address, or vendor."
				title="User Payments Filter"
				inputs={[
					{
						name: "user",
						label: "User",
						type: "string",
						placeholder: "Enter user name",
					},
					{
						name: "mib_reference",
						label: "MIB Reference",
						type: "string",
						placeholder: "Enter MIB Reference",
					},
					{
						type: "dual-range-slider",
						label: "Amount Range",
						name: "amount",
						max: 1200,
						min: 0,
						step: 10,
					},
					{
						type: "dual-range-slider",
						label: "Duration Range",
						name: "number_of_months",
						max: 12,
						min: 1,
						step: 1,
					},
					{
						type: "radio-group",
						label: "Payment Status",
						name: "status",
						options: [
							{ label: "All", value: "" },
							{ label: "Pending", value: "PENDING" },
							{ label: "Paid", value: "PAID" },
							{ label: "Cancelled", value: "CANCELLED" },
						],
					},
					{
						type: "radio-group",
						label: "Payment Method",
						name: "method",
						options: [
							{ label: "All", value: "" },
							{ label: "Wallet", value: "WALLET" },
							{ label: "Transfer", value: "TRANSFER" },
						]
					},

				]}
			/>
			<Suspense key={query} fallback={"loading...."}>
				<UsersPaymentsTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}