feat: add topup management features including topup creation, cancellation, and countdown timer ✨

app/(dashboard)/top-ups/page.tsx

@@ -0,0 +1,63 @@
+import { Suspense } from "react";
+import DynamicFilter from "@/components/generic-filter";
+import { TopupsTable } from "@/components/topups-table";
+
+export default async function Topups({
+  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">My Topups</h3>
+      </div>
+      <div
+        id="topup-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <DynamicFilter
+          inputs={[
+            {
+              label: "Paid",
+              name: "paid",
+              type: "radio-group",
+              options: [
+                {
+                  label: "All",
+                  value: "",
+                },
+                {
+                  label: "Paid",
+                  value: "true",
+                },
+                {
+                  label: "Pending",
+                  value: "false",
+                },
+              ],
+            },
+            {
+              label: "Topup Amount",
+              name: "amount",
+              type: "dual-range-slider",
+              min: 0,
+              max: 1000,
+              step: 10,
+            },
+          ]}
+        />
+      </div>
+      <Suspense key={query} fallback={"loading...."}>
+        <TopupsTable searchParams={searchParams} />
+      </Suspense>
+    </div>
+  );
+}