refactor: update axios client import, enhance device and payment handling, and add cancel payment button component

components/add-devices-to-cart-button.tsx

@@ -10,6 +10,9 @@ export default function AddDevicesToCartButton({ device }: { device: Device }) {
 
 	const isChecked = devices.some((d) => d.id === device.id);
 
+	if (device.has_a_pending_payment || device.is_active) {
+		return null;
+	}
 	return (
 		<input
 			type="checkbox"

components/billing/cancel-payment-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { cancelPayment } from "@/actions/payment";
+import { tryCatch } from "@/utils/tryCatch";
+import { Loader2, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+
+export default function CancelPaymentButton({
+	paymentId,
+}: { paymentId: string }) {
+	const router = useRouter();
+	const [loading, setLoading] = React.useState(false);
+	return (
+		<Button
+			onClick={async () => {
+				setLoading(true);
+				const [error, _] = await tryCatch(cancelPayment({ id: paymentId }));
+				if (error) {
+					toast.error(error.message);
+					setLoading(false);
+				} else {
+					router.replace("/devices");
+				}
+			}}
+			disabled={loading}
+			variant={"destructive"}
+		>
+			Cancel Payment
+			{loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
+		</Button>
+	);
+}

components/clickable-row.tsx

@@ -5,6 +5,7 @@ import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { pl } from "date-fns/locale";
 import { useAtom } from "jotai";
+import { Hourglass } from "lucide-react";
 import Link from "next/link";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import BlockDeviceDialog from "./block-device-dialog";
@@ -20,12 +21,13 @@ export default function ClickableRow({
 			key={device.id}
 			className={cn(
 				(parentalControl === false && device.blocked) || device.is_active
-					? "cursor-not-allowed title-bg"
+					? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
 					: "cursor-pointer hover:bg-muted",
 			)}
 			onClick={() => {
 				if (device.blocked) return;
 				if (device.is_active === true) return;
+				if (device.has_a_pending_payment === true) return;
 				if (parentalControl === true) return;
 				setDeviceCart((prev) =>
 					devices.some((d) => d.id === device.id)
@@ -47,22 +49,34 @@ export default function ClickableRow({
 						{device.name}
 					</Link>
 					{device.is_active ? (
-						<span className="text-muted-foreground">
+						<div className="text-muted-foreground">
 							Active until{" "}
-							{new Date(device.expiry_date || "").toLocaleDateString("en-US", {
-								month: "short",
-								day: "2-digit",
-								year: "numeric",
-							})}
-						</span>
+							<span className="font-semibold">
+								{new Date(device.expiry_date || "").toLocaleDateString(
+									"en-US",
+									{
+										month: "short",
+										day: "2-digit",
+										year: "numeric",
+									},
+								)}
+							</span>
+						</div>
 					) : (
 						<p className="text-muted-foreground">Device Inactive</p>
 					)}
+					{device.has_a_pending_payment && (
+						<Link href={`/payments/${device.pending_payment_id}`}>
+							<span className="flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+								Payment Pending <Hourglass size={14} />
+							</span>
+						</Link>
+					)}
 
 					{device.blocked_by === "ADMIN" && device.blocked && (
-						<div className="p-2 rounded border my-2">
-							<span>Comment: </span>
-							<p className="text-neutral-500">{device?.reason_for_blocking}</p>
+						<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
+							<span className="font-semibold">Comment</span>
+							<p className="text-neutral-400">{device?.reason_for_blocking}</p>
 						</div>
 					)}
 				</div>

components/device-card.tsx

@@ -1,76 +1,104 @@
-'use client'
-import { deviceCartAtom } from '@/lib/atoms'
-import { cn } from '@/lib/utils'
-import type { Device } from '@prisma/client'
-import { useAtom } from 'jotai'
-import Link from 'next/link'
-import AddDevicesToCartButton from './add-devices-to-cart-button'
-import BlockDeviceDialog from './block-device-dialog'
-import { Badge } from './ui/badge'
+"use client";
+import { deviceCartAtom } from "@/lib/atoms";
+import type { Device } from "@/lib/backend-types";
+import { cn } from "@/lib/utils";
+import { useAtom } from "jotai";
+import { Hourglass } from "lucide-react";
+import Link from "next/link";
+import AddDevicesToCartButton from "./add-devices-to-cart-button";
+import BlockDeviceDialog from "./block-device-dialog";
+import { Badge } from "./ui/badge";
 
-export default function DeviceCard({ device, parentalControl }: { device: Device, parentalControl?: boolean }) {
-  const [devices, setDeviceCart] = useAtom(deviceCartAtom)
+export default function DeviceCard({
+	device,
+	parentalControl,
+}: { device: Device; parentalControl?: boolean }) {
+	const [devices, setDeviceCart] = useAtom(deviceCartAtom);
 
-  const isChecked = devices.some((d) => d.id === device.id);
+	const isChecked = devices.some((d) => d.id === device.id);
 
-  return (
-    <div
-      onKeyUp={() => { }}
-      onClick={() => {
-        if (parentalControl === true) return
-        setDeviceCart((prev) =>
-          devices.some((d) => d.id === device.id)
-            ? prev.filter((d) => d.id !== device.id)
-            : [...prev, device]
-        )
-      }
-      }
-      className="w-full">
-      <div className={cn("flex text-sm justify-between items-center my-2 p-4 border rounded-md", isChecked ? "bg-accent" : "bg-")}>
-        <div className=''>
-          <div className="font-semibold flex flex-col items-start gap-2 mb-2">
-            <Link
-              className="font-medium hover:underline"
-              href={`/devices/${device.id}`}
-            >
-              {device.name}
-            </Link>
-            <Badge variant={"secondary"}>
-              <span className="font-medium">
-                {device.mac}
-              </span>
-            </Badge>
-          </div>
+	return (
+		<div
+			onKeyUp={() => {}}
+			onClick={() => {
+				if (device.blocked) return;
+				if (device.is_active === true) return;
+				if (device.has_a_pending_payment === true) return;
+				if (parentalControl === true) return;
+				setDeviceCart((prev) =>
+					devices.some((d) => d.id === device.id)
+						? prev.filter((d) => d.id !== device.id)
+						: [...prev, device],
+				);
+			}}
+			className="w-full"
+		>
+			<div
+				className={cn(
+					"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
+					isChecked ? "bg-accent" : "bg-",
+					device.is_active
+						? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
+						: "cursor-pointer hover:bg-muted",
+				)}
+			>
+				<div className="">
+					<div className="font-semibold flex flex-col items-start gap-2 mb-2">
+						<Link
+							className="font-medium hover:underline"
+							href={`/devices/${device.id}`}
+						>
+							{device.name}
+						</Link>
+						<Badge variant={"secondary"}>
+							<span className="font-medium">{device.mac}</span>
+						</Badge>
+					</div>
 
-          {device.isActive && (
-            <span className="text-muted-foreground">
-              Active until{" "}
-              {new Date().toLocaleDateString("en-US", {
-                month: "short",
-                day: "2-digit",
-                year: "numeric",
-              })}
-            </span>
-          )}
+					{device.is_active ? (
+						<div className="text-muted-foreground">
+							Active until{" "}
+							<span className="font-semibold">
+								{new Date(device.expiry_date || "").toLocaleDateString(
+									"en-US",
+									{
+										month: "short",
+										day: "2-digit",
+										year: "numeric",
+									},
+								)}
+							</span>
+						</div>
+					) : (
+						<p className="text-muted-foreground">Device Inactive</p>
+					)}
+					{device.has_a_pending_payment && (
+						<Link href={`/payments/${device.pending_payment_id}`}>
+							<span className="flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+								Payment Pending <Hourglass size={14} />
+							</span>
+						</Link>
+					)}
 
-          {(device.blocked && device.blockedBy === "ADMIN") && (
-            <div className="p-2 rounded border my-2 w-full">
-              <span className='uppercase text-red-500'>Blocked by admin </span>
-              <p className="text-neutral-500">
-                {device?.reasonForBlocking}
-              </p>
-            </div>
-          )}
-
-        </div>
-        <div>
-          {!parentalControl ? (
-            <AddDevicesToCartButton device={device} />
-          ) : (
-            <BlockDeviceDialog admin={false} type={device.blocked ? "unblock" : "block"} device={device} />
-          )}
-        </div>
-      </div>
-    </div>
-  )
+					{device.blocked && device.blocked_by === "ADMIN" && (
+						<div className="p-2 rounded border my-2 w-full">
+							<span className="uppercase text-red-500">Blocked by admin </span>
+							<p className="text-neutral-500">{device?.reason_for_blocking}</p>
+						</div>
+					)}
+				</div>
+				<div>
+					{!parentalControl ? (
+						<AddDevicesToCartButton device={device} />
+					) : (
+						<BlockDeviceDialog
+							admin={false}
+							type={device.blocked ? "unblock" : "block"}
+							device={device}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
 }

components/devices-for-payment.tsx

@@ -10,7 +10,7 @@ import { tryCatch } from "@/utils/tryCatch";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { CircleDollarSign, Loader2 } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { usePathname } from "next/navigation";
+import { redirect, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 export default function DevicesForPayment() {
@@ -35,7 +35,7 @@ export default function DevicesForPayment() {
 		setTotal(baseAmount + (devices.length + 1 - 1) * discountPercentage);
 	}, [months, devices.length]);
 
-	if (pathname === "/payment") {
+	if (pathname === "/payments") {
 		return null;
 	}
 
@@ -45,6 +45,9 @@ export default function DevicesForPayment() {
 		device_ids: devices.map((device) => device.id),
 	};
 
+	if (disabled) {
+		return "Please wait...";
+	}
 	return (
 		<div className="max-w-lg mx-auto space-y-4 px-4">
 			<div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto pb-4 gap-4">
@@ -69,15 +72,15 @@ export default function DevicesForPayment() {
 			<Button
 				onClick={async () => {
 					setDisabled(true);
-					const [error, respose] = await tryCatch(createPayment(data));
+					const [error, response] = await tryCatch(createPayment(data));
 					if (error) {
 						setDisabled(false);
-						toast.error(error.message);
+						toast.error(JSON.stringify(error, null, 2));
 						return;
 					}
 					setDeviceCart([]);
 					setMonths(1);
-					setDisabled(false);
+					redirect(`/payments/${response.id}`);
 				}}
 				className="w-full"
 				disabled={devices.length === 0 || disabled}

components/devices-table.tsx

@@ -56,43 +56,6 @@ export async function DevicesTable({
 							</TableHeader>
 							<TableBody className="overflow-scroll">
 								{data.map((device) => (
-									// <TableRow key={device.id}>
-									// 	<TableCell>
-									// 		<div className="flex flex-col items-start">
-									// 			<Link
-									// 				className="font-medium hover:underline"
-									// 				href={`/devices/${device.id}`}
-									// 			>
-									// 				{device.name}
-									// 			</Link>
-									// 			<span className="text-muted-foreground">
-									// 				Active until{" "}
-									// 				{new Date().toLocaleDateString("en-US", {
-									// 					month: "short",
-									// 					day: "2-digit",
-									// 					year: "numeric",
-									// 				})}
-									// 			</span>
-									// 			{parentalControl && (
-									// 				<div className="p-2 rounded border my-2">
-									// 					<span>Comment: </span>
-									// 					<p className="text-neutral-500">
-									// 						blocked because he was watching youtube
-									// 					</p>
-									// 				</div>
-									// 			)}
-
-									// 		</div>
-									// 	</TableCell>
-									// 	<TableCell className="font-medium">{device.mac}</TableCell>
-									// 	<TableCell>
-									// 		{!parentalControl ? (
-									// 			<AddDevicesToCartButton device={device} />
-									// 		) : (
-									// 			<BlockDeviceButton device={device} />
-									// 		)}
-									// 	</TableCell>
-									// </TableRow>
 									<ClickableRow
 										admin={isAdmin}
 										key={device.id}

components/payments-table.tsx

@@ -15,6 +15,7 @@ import type { Payment } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 import { Calendar } from "lucide-react";
+import { redirect } from "next/navigation";
 import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
@@ -86,7 +87,11 @@ export async function PaymentsTable({
 	const [error, payments] = await tryCatch(getPayments());
 
 	if (error) {
-		return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		if (error.message.includes("Unauthorized")) {
+			redirect("/auth/signin");
+		} else {
+			return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		}
 	}
 	const { data, meta, links } = payments;
 	return (