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

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>