From fa0d088f7fb8d004f52e2e8d4fc761da642df3da Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 5 Jul 2025 20:39:28 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20enhance=20payment=20retrieval=20with=20?=
 =?UTF-8?q?flexible=20query=20parameters=20and=20add=20dynamic=20filters?=
 =?UTF-8?q?=20to=20payments=20page=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 actions/payment.ts                | 13 ++++++++++--
 app/(dashboard)/payments/page.tsx | 35 ++++++++++++++++++++++++++++---
 components/devices-table.tsx      |  1 -
 components/payments-table.tsx     | 35 +++++++++++++++++--------------
 4 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/actions/payment.ts b/actions/payment.ts
index 3a3f478..6098869 100644
--- a/actions/payment.ts
+++ b/actions/payment.ts
@@ -90,10 +90,19 @@ export async function getPayment({ id }: { id: string }) {
 	return data;
 }
 
-export async function getPayments() {
+type GetPaymentProps = {
+	[key: string]: string | number | undefined; // Allow additional properties for flexibility
+};
+
+export async function getPayments(params: GetPaymentProps) {
+	// Build query string from all defined params
+	const query = Object.entries(params)
+		.filter(([_, value]) => value !== undefined && value !== "")
+		.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+		.join("&");
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/`,
+		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/?${query}`,
 		{
 			method: "GET",
 			headers: {
diff --git a/app/(dashboard)/payments/page.tsx b/app/(dashboard)/payments/page.tsx
index 2b6f207..d8b7fb4 100644
--- a/app/(dashboard)/payments/page.tsx
+++ b/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} />
diff --git a/components/devices-table.tsx b/components/devices-table.tsx
index c28fdf3..9c82bce 100644
--- a/components/devices-table.tsx
+++ b/components/devices-table.tsx
@@ -22,7 +22,6 @@ export async function DevicesTable({
 	searchParams,
 	parentalControl,
 	additionalFilters = {},
-
 }: {
 	searchParams: Promise<{
 		[key: string]: unknown;
diff --git a/components/payments-table.tsx b/components/payments-table.tsx
index 5e6bbbd..014593a 100644
--- a/components/payments-table.tsx
+++ b/components/payments-table.tsx
@@ -24,13 +24,17 @@ export async function PaymentsTable({
 	searchParams,
 }: {
 	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
+		[key: string]: unknown;
 	}>;
 }) {
-	const query = (await searchParams)?.query || "";
-	const [error, payments] = await tryCatch(getPayments());
+	const resolvedParams = await searchParams;
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	const [error, payments] = await tryCatch(getPayments(apiParams));
 
 	if (error) {
 		if (error.message.includes("Unauthorized")) {
@@ -134,18 +138,17 @@ export async function PaymentsTable({
 							</TableBody>
 							<TableFooter>
 								<TableRow>
-									<TableCell colSpan={2}>
-										{query.length > 0 && (
-											<p className="text-sm text-muted-foreground">
-												Showing {payments?.data?.length} payments for &quot;
-												{query}
-												&quot;
+
+									<TableCell colSpan={3} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">
+												Total {meta?.total} payment.
 											</p>
-										)}
-									</TableCell>
-									<TableCell className="text-muted-foreground">
-										{meta.total} payments
-									</TableCell>
+										) : (
+											<p className="text-center">
+												Total {meta?.total} payments.
+											</p>
+										)}									</TableCell>
 								</TableRow>
 							</TableFooter>
 						</Table>