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

import { Suspense } from "react";
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);
  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>
  );
}