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

import { Suspense } from "react";
import DynamicFilter from "@/components/generic-filter";
import { WalletTransactionsTable } from "@/components/wallet-transactions-table";

export default async function Wallet({
  searchParams,
}: {
  searchParams: Promise<{
    query: string;
    page: number;
    sortBy: string;
    status: string;
  }>;
}) {
  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">Transaction History</h3>
      </div>
      <div
        id="wallet-filters"
        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <DynamicFilter
          inputs={[
            {
              label: "Type",
              name: "transaction_type",
              type: "radio-group",
              options: [
                {
                  label: "All",
                  value: "",
                },
                {
                  label: "Debit",
                  value: "debit",
                },
                {
                  label: "Credit",
                  value: "credit",
                },
              ],
            },
            {
              label: "Topup Amount",
              name: "amount",
              type: "dual-range-slider",
              min: 0,
              max: 1000,
              step: 10,
            },
          ]}
        />
      </div>
      <Suspense key={query} fallback={"loading...."}>
        <WalletTransactionsTable searchParams={searchParams} />
      </Suspense>
    </div>
  );
}