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

import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { Suspense } from "react";
import { authOptions } from "@/app/auth";
import { AdminTopupsTable } from "@/components/admin/admin-topup-table";
import DynamicFilter from "@/components/generic-filter";

export default async function UserTopups({
	searchParams,
}: {
	searchParams: Promise<{
		[key: string]: string;
	}>;
}) {
	const query = (await searchParams)?.query || "";
	const session = await getServerSession(authOptions);
	if (!session?.user?.is_admin) redirect("/top-ups?page=1");
	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 Topups</h3>
			</div>
			<DynamicFilter
				title="User Topups Filter"
				description="Filter user topups by status, topup expiry, or amount."
				inputs={[
					{
						name: "user",
						label: "User",
						type: "string",
						placeholder: "Enter user name",
					},
					{
						label: "Status",
						name: "status",
						type: "radio-group",
						options: [
							{
								label: "All",
								value: "",
							},
							{
								label: "Pending",
								value: "PENDING",
							},
							{
								label: "Cancelled",
								value: "CANCELLED",
							},
							{
								label: "Paid",
								value: "PAID",
							},
						],
					},
					{
						label: "Topup Expiry",
						name: "is_expired",
						type: "radio-group",
						options: [
							{
								label: "All",
								value: "",
							},
							{
								label: "Expired",
								value: "true",
							},
							{
								label: "Not Expired",
								value: "false",
							},
						],
					},
					{
						label: "Topup Amount",
						name: "amount",
						type: "dual-range-slider",
						min: 0,
						max: 1000,
						step: 10,
					},
				]}
			/>
			<Suspense key={query} fallback={"loading...."}>
				<AdminTopupsTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}