feat: enhance payment retrieval with flexible query parameters and add dynamic filters to payments page ✨

app/(dashboard)/payments/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DynamicFilter from "@/components/generic-filter";
 import { PaymentsTable } from "@/components/payments-table";
 import Search from "@/components/search";
 
@@ -8,8 +9,6 @@ export default async function Payments({
 	searchParams: Promise<{
 		query: string;
 		page: number;
-		sortBy: string;
-		status: string;
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
@@ -23,7 +22,37 @@ export default async function Payments({
 				id="user-filters"
 				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
-				<Search />
+				<DynamicFilter
+					inputs={[
+						{
+							label: "Payment",
+							name: "paid",
+							type: "radio-group",
+							options: [
+								{
+									label: "All",
+									value: "",
+								},
+								{
+									label: "Paid",
+									value: "true",
+								},
+								{
+									label: "Unpaid",
+									value: "false",
+								},
+							],
+						},
+						{
+							label: "Number of months",
+							name: "number_of_months",
+							type: "dual-range-slider",
+							min: 1,
+							max: 12,
+							step: 1,
+						},
+					]}
+				/>{" "}
 			</div>
 			<Suspense key={query} fallback={"loading...."}>
 				<PaymentsTable searchParams={searchParams} />