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

README.md

@@ -29,6 +29,7 @@ This is a web portal for SAR Link customers.
 ## Admin Controls
 ### Users
 - [x] Show users table
+- [ ] handle verify api no response case
 - [ ] Add all relavant filters for users table
 - [x] Verify or reject users with a custom message
 - [ ] Add functionality to send custom sms to users in user:id page
@@ -40,6 +41,6 @@ This is a web portal for SAR Link customers.
 - [x] Add all relevant filters for user devices table
 
 ### User Payments
-- [ ] Show user payments table
-- [ ] Add relevant filters for user payments table
+- [x] Show user payments table
+- [x] Add relevant filters for user payments table
 - [ ] Add computation of total value for filtered results

actions/payment.ts

@@ -93,7 +93,7 @@ type GetPaymentProps = {
 	[key: string]: string | number | undefined; // Allow additional properties for flexibility
 };
 
-export async function getPayments(params: GetPaymentProps) {
+export async function getPayments(params: GetPaymentProps, allPayments = false) {
 	// Build query string from all defined params
 	const query = Object.entries(params)
 		.filter(([_, value]) => value !== undefined && value !== "")
@@ -101,7 +101,7 @@ export async function getPayments(params: GetPaymentProps) {
 		.join("&");
 	const session = await getServerSession(authOptions);
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/?${query}`,
+		`${process.env.SARLINK_API_BASE_URL}/api/billing/payment/?${query}&all_payments=${allPayments}`,
 		{
 			method: "GET",
 			headers: {

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>

components/admin/user-payments-table.tsx

@@ -1,236 +1,176 @@
-// import Pagination from "@/components/pagination";
-// import { Badge } from "@/components/ui/badge";
-// import { Button } from "@/components/ui/button";
-// import {
-// 	Table,
-// 	TableBody,
-// 	TableCaption,
-// 	TableCell,
-// 	TableFooter,
-// 	TableHead,
-// 	TableHeader,
-// 	TableRow,
-// } from "@/components/ui/table";
-// import Link from "next/link";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { getPayments } from "@/actions/payment";
+import { authOptions } from "@/app/auth";
+import Pagination from "@/components/pagination";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { tryCatch } from "@/utils/tryCatch";
+import ClientErrorMessage from "../client-error-message";
 
 export async function UsersPaymentsTable({
 	searchParams,
 }: {
 	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
+		[key: string]: unknown;
 	}>;
 }) {
-	const query = (await searchParams)?.query || "";
-	console.log(query);
-	// const page = (await searchParams)?.page;
-	// const sortBy = (await searchParams)?.sortBy || "asc";
-	// const totalPayments = await prisma.payment.count({
-	//   where: {
-	//     OR: [
-	//       {
-	//         user: {
-	//           name: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           phoneNumber: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           address: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           id_card: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//     ],
-	//   },
-	// });
+	const resolvedParams = await searchParams;
 
-	// const totalPages = Math.ceil(totalPayments / 10);
-	// const limit = 10;
-	// const offset = (Number(page) - 1) * limit || 0;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 
-	// const payments = await prisma.payment.findMany({
-	//   where: {
-	//     OR: [
-	//       {
-	//         user: {
-	//           name: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           phoneNumber: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           address: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//       {
-	//         user: {
-	//           id_card: {
-	//             contains: query || "",
-	//             mode: "insensitive",
-	//           }
-	//         },
-	//       },
-	//     ],
-	//   },
-	//   include: {
-	//     user: true,
-	//     devices: true,
-	//   },
-	//   skip: offset,
-	//   take: limit,
-	//   orderBy: {
-	//     id: `${sortBy}` as "asc" | "desc",
-	//   },
-	// });
+	// Build params object for getDevices
+	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);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
 
-	// const users = await prisma.user.findMany({
-	// 	where: {
-	// 		role: "USER",
-	// 	},
-	// 	include: {
-	// 		atoll: true,
-	// 		island: true,
-	// 	},
-	// });
-	return null;
-	// return (
-	// 	<div>
-	// 		{payments.length === 0 ? (
-	// 			<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-	// 				<h3>No user payments yet.</h3>
-	// 			</div>
-	// 		) : (
-	// 			<>
-	// 				<Table className="overflow-scroll">
-	// 					<TableCaption>Table of all users.</TableCaption>
-	// 					<TableHeader>
-	// 						<TableRow>
-	// 							<TableHead>Devices paid</TableHead>
-	// 							<TableHead>User</TableHead>
-	// 							<TableHead>Amount</TableHead>
-	// 							<TableHead>Duration</TableHead>
-	// 							<TableHead>Payment Status</TableHead>
-	// 							<TableHead>Payment Method</TableHead>
-	// 							<TableHead>Paid At</TableHead>
-	// 							<TableHead>Action</TableHead>
-	// 						</TableRow>
-	// 					</TableHeader>
-	// 					<TableBody className="overflow-scroll">
-	// 						{payments.map((payment) => (
-	// 							<TableRow
-	// 								className={`${payment.paid && "title-bg dark:bg-black"}`}
-	// 								key={payment.id}
-	// 							>
-	// 								<TableCell className="font-medium">
-	// 									<ol className="list-disc list-inside text-sm">
-	// 										{payment.devices.map((device) => (
-	// 											<li
-	// 												key={device.id}
-	// 												className="text-sm text-muted-foreground"
-	// 											>
-	// 												{device.name}
-	// 											</li>
-	// 										))}
-	// 									</ol>
-	// 								</TableCell>
-	// 								<TableCell className="font-medium">
-	// 									{payment.user.id_card}
-	// 								</TableCell>
-	// 								<TableCell>{payment.user?.name}</TableCell>
-	// 								<TableCell>{payment.user?.name}</TableCell>
-	// 								<TableCell>{payment.id}</TableCell>
+	const [error, payments] = await tryCatch(getPayments(apiParams, true));
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
+	const { meta, data } = payments;
 
-	// 								<TableCell>
-	// 									{payment.paid ? (
-	// 										<Badge
-	// 											variant="outline"
-	// 											className="bg-lime-100 text-black"
-	// 										>
-	// 											Verified
-	// 										</Badge>
-	// 									) : (
-	// 										<Badge
-	// 											variant="outline"
-	// 											className="bg-yellow-100 text-black"
-	// 										>
-	// 											Unverified
-	// 										</Badge>
-	// 									)}
-	// 								</TableCell>
-	// 								<TableCell>
-	// 									{new Date(payment.paidAt ?? "").toLocaleDateString(
-	// 										"en-US",
-	// 										{
-	// 											month: "short",
-	// 											day: "2-digit",
-	// 											year: "numeric",
-	// 										},
-	// 									)}
-	// 								</TableCell>
+	// return <pre>{JSON.stringify(payments, null, 2)}</pre>;
+	return (
+		<div>
+			{data.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No user payments yet.</h3>
+				</div>
+			) : (
+				<>
+					<Table className="overflow-scroll">
+						<TableCaption>Table of all users.</TableCaption>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Devices paid</TableHead>
+								<TableHead>User</TableHead>
+								<TableHead>Amount</TableHead>
+								<TableHead>Duration</TableHead>
+								<TableHead>Payment Status</TableHead>
+								<TableHead>Payment Method</TableHead>
+								<TableHead>MIB Reference</TableHead>
+								<TableHead>Paid At</TableHead>
+								<TableHead>Action</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody className="overflow-scroll">
+							{data.map((payment) => (
+								<TableRow
+									className={`${payment.paid && "title-bg dark:bg-black"}`}
+									key={payment.id}
+								>
+									<TableCell className="font-medium">
+										<ol className="list-disc list-inside text-sm">
+											{payment.devices.map((device) => (
+												<li
+													key={device.id}
+													className="text-sm text-muted-foreground"
+												>
+													{device.name}
+												</li>
+											))}
+										</ol>
+									</TableCell>
+									<TableCell className="font-medium">
+										{/* {payment.user.id_card} */}
+										<div className="flex flex-col items-start">
+											{payment.devices[0]?.user?.name}
+											<span className="text-muted-foreground">
+												{payment.devices[0]?.user?.id_card}
+											</span>
+										</div>{" "}
+									</TableCell>
+									<TableCell>{payment.amount}</TableCell>
+									<TableCell>{payment.number_of_months} Months</TableCell>
 
-	// 								<TableCell>{payment.id}</TableCell>
-	// 								<TableCell>
-	// 									<Link href={`/payments/${payment.id}/verify`}>
-	// 										<Button>Details</Button>
-	// 									</Link>
-	// 								</TableCell>
-	// 							</TableRow>
-	// 						))}
-	// 					</TableBody>
-	// 					<TableFooter>
-	// 						<TableRow>
-	// 							<TableCell colSpan={8}>
-	// 								{query.length > 0 && (
-	// 									<p className="text-sm text-muted-foreground">
-	// 										Showing {payments.length} locations for &quot;{query}
-	// 										&quot;
-	// 									</p>
-	// 								)}
-	// 							</TableCell>
-	// 							<TableCell className="text-muted-foreground">
-	// 								{totalPayments} payments
-	// 							</TableCell>
-	// 						</TableRow>
-	// 					</TableFooter>
-	// 				</Table>
-	// 				<Pagination totalPages={totalPages} currentPage={page} />
-	// 			</>
-	// 		)}
-	// 	</div>
-	// );
+									<TableCell>
+										{payment.status === "PENDING" ? (
+											<Badge
+												variant="outline"
+												className="bg-yellow-100 text-black"
+											>
+												{payment.status}
+											</Badge>
+										) : payment.status === "PAID" ? (
+											<Badge
+												variant="outline"
+												className="bg-lime-100 text-black"
+											>
+												{payment.status}
+											</Badge>
+										) : (
+											<Badge
+												variant="outline"
+												className="bg-red-100 text-black"
+											>
+												{payment.status}
+											</Badge>
+										)}
+									</TableCell>
+									<TableCell>{payment.method}</TableCell>
+									<TableCell>{payment.mib_reference}</TableCell>
+									<TableCell>
+										{new Date(payment.paid_at ?? "").toLocaleDateString(
+											"en-US",
+											{
+												month: "short",
+												day: "2-digit",
+												year: "numeric",
+												minute: "2-digit",
+												hour: "2-digit",
+											},
+										)}
+									</TableCell>
+
+									<TableCell>
+										<Link href={`/payments/${payment.id}/verify`}>
+											<Button>Details</Button>
+										</Link>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+						<TableFooter>
+							<TableRow>
+								<TableCell colSpan={10} className="text-muted-foreground">
+									{meta?.total === 1 ? (
+										<p className="text-center">Total {meta?.total} payment.</p>
+									) : (
+										<p className="text-center">Total {meta?.total} payments.</p>
+									)}{" "}
+								</TableCell>
+							</TableRow>
+						</TableFooter>
+					</Table>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }