feat(admin): add admin payment tables + filters✨

app/(dashboard)/user-payments/page.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
+import DynamicFilter from "@/components/generic-filter";
 
 export default async function UserPayments({
 	searchParams,
@@ -18,6 +19,62 @@ export default async function UserPayments({
 			<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 Payments</h3>
 			</div>
+			<DynamicFilter
+				description="Filter user payments by name, MAC address, or vendor."
+				title="User Payments Filter"
+				inputs={[
+					{
+						name: "user",
+						label: "User",
+						type: "string",
+						placeholder: "Enter user name",
+					},
+					{
+						name: "mib_reference",
+						label: "MIB Reference",
+						type: "string",
+						placeholder: "Enter MIB Reference",
+					},
+					{
+						type: "dual-range-slider",
+						label: "Amount Range",
+						name: "amount",
+						max: 1200,
+						min: 0,
+						step: 10,
+					},
+					{
+						type: "dual-range-slider",
+						label: "Duration Range",
+						name: "number_of_months",
+						max: 12,
+						min: 1,
+						step: 1,
+					},
+					{
+						type: "radio-group",
+						label: "Payment Status",
+						name: "status",
+						options: [
+							{ label: "All", value: "" },
+							{ label: "Pending", value: "PENDING" },
+							{ label: "Paid", value: "PAID" },
+							{ label: "Cancelled", value: "CANCELLED" },
+						],
+					},
+					{
+						type: "radio-group",
+						label: "Payment Method",
+						name: "method",
+						options: [
+							{ label: "All", value: "" },
+							{ label: "Wallet", value: "WALLET" },
+							{ label: "Transfer", value: "TRANSFER" },
+						]
+					},
+
+				]}
+			/>
 			<Suspense key={query} fallback={"loading...."}>
 				<UsersPaymentsTable searchParams={searchParams} />
 			</Suspense>