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

import { Suspense } from "react";
import DynamicFilter from "@/components/generic-filter";
import { PaymentsTable } from "@/components/payments-table";
import Search from "@/components/search";

export default async function Payments({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
	}>;
}) {
	const query = (await searchParams)?.query || "";

	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">My Payments</h3>
			</div>
			<div
				id="user-filters"
				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<DynamicFilter
					inputs={[
						{
							label: "Payment",
							name: "paid",
							type: "radio-group",
							options: [
								{
									label: "All",
									value: "",
								},
								{
									label: "Paid",
									value: "true",
								},
								{
									label: "Unpaid",
									value: "false",
								},
							],
						},
						{
							label: "Number of months",
							name: "number_of_months",
							type: "dual-range-slider",
							min: 1,
							max: 12,
							step: 1,
						},
					]}
				/>{" "}
			</div>
			<Suspense key={query} fallback={"loading...."}>
				<PaymentsTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}