refactor: update payment types and user interface, enhance error handling, and adjust API base URL

components/payments-table.tsx

@@ -10,7 +10,10 @@ import {
 } from "@/components/ui/table";
 import Link from "next/link";
 
+import { getPayments } from "@/actions/payment";
+import type { Payment } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
+import { tryCatch } from "@/utils/tryCatch";
 import { Calendar } from "lucide-react";
 import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
@@ -26,6 +29,7 @@ export async function PaymentsTable({
 		sortBy: string;
 	}>;
 }) {
+	const query = (await searchParams)?.query || "";
 	// const session = await auth.api.getSession({
 	// 	headers: await headers(),
 	// });
@@ -79,11 +83,15 @@ export async function PaymentsTable({
 	// 		createdAt: "desc",
 	// 	},
 	// });
+	const [error, payments] = await tryCatch(getPayments());
 
-	return null;
+	if (error) {
+		return <pre>{JSON.stringify(error, null, 2)}</pre>;
+	}
+	const { data, meta, links } = payments;
 	return (
 		<div>
-			{payments.length === 0 ? (
+			{data?.length === 0 ? (
 				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
 					<h3>No Payments yet.</h3>
 				</div>
@@ -101,7 +109,7 @@ export async function PaymentsTable({
 								</TableRow>
 							</TableHeader>
 							<TableBody className="overflow-scroll">
-								{payments.map((payment) => (
+								{payments?.data?.map((payment) => (
 									<TableRow key={payment.id}>
 										<TableCell>
 											<div
@@ -115,7 +123,7 @@ export async function PaymentsTable({
 												<div className="flex items-center gap-2">
 													<Calendar size={16} opacity={0.5} />
 													<span className="text-muted-foreground">
-														{new Date(payment.createdAt).toLocaleDateString(
+														{new Date(payment.created_at).toLocaleDateString(
 															"en-US",
 															{
 																month: "short",
@@ -162,7 +170,7 @@ export async function PaymentsTable({
 											</div>
 										</TableCell>
 										<TableCell className="font-medium">
-											{payment.numberOfMonths} Months
+											{payment.number_of_months} Months
 										</TableCell>
 										<TableCell>
 											<span className="font-semibold pr-2">
@@ -178,21 +186,25 @@ export async function PaymentsTable({
 									<TableCell colSpan={2}>
 										{query.length > 0 && (
 											<p className="text-sm text-muted-foreground">
-												Showing {payments.length} locations for &quot;{query}
+												Showing {payments?.data?.length} locations for &quot;
+												{query}
 												&quot;
 											</p>
 										)}
 									</TableCell>
 									<TableCell className="text-muted-foreground">
-										{totalPayments} payments
+										{meta.total} payments
 									</TableCell>
 								</TableRow>
 							</TableFooter>
 						</Table>
-						<Pagination totalPages={totalPages} currentPage={page} />
+						<Pagination
+							totalPages={meta.total / meta.per_page}
+							currentPage={meta.current_page}
+						/>
 					</div>
 					<div className="sm:hidden block">
-						{payments.map((payment) => (
+						{data.map((payment) => (
 							<MobilePaymentDetails key={payment.id} payment={payment} />
 						))}
 					</div>
@@ -202,7 +214,7 @@ export async function PaymentsTable({
 	);
 }
 
-function MobilePaymentDetails({ payment }: { payment: PaymentWithDevices }) {
+function MobilePaymentDetails({ payment }: { payment: Payment }) {
 	return (
 		<div
 			className={cn(
@@ -215,7 +227,7 @@ function MobilePaymentDetails({ payment }: { payment: PaymentWithDevices }) {
 			<div className="flex items-center gap-2">
 				<Calendar size={16} opacity={0.5} />
 				<span className="text-muted-foreground text-sm">
-					{new Date(payment.createdAt).toLocaleDateString("en-US", {
+					{new Date(payment.created_at).toLocaleDateString("en-US", {
 						month: "short",
 						day: "2-digit",
 						year: "numeric",
@@ -256,7 +268,7 @@ function MobilePaymentDetails({ payment }: { payment: PaymentWithDevices }) {
 					<Separator className="my-2" />
 					<h3 className="text-sm font-medium">Duration</h3>
 					<span className="text-sm text-muted-foreground">
-						{payment.numberOfMonths} Months
+						{payment.number_of_months} Months
 					</span>
 					<Separator className="my-2" />
 					<h3 className="text-sm font-medium">Amount</h3>