sarlink-portal/components/clickable-row.tsx

"use client";
import { TableCell, TableRow } from "@/components/ui/table";
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";
export default function ClickableRow({
	device,
	parentalControl,
	admin = false,
}: { device: Device; parentalControl?: boolean; admin?: boolean }) {
	const [devices, setDeviceCart] = useAtom(deviceCartAtom);

	return (
		<TableRow
			key={device.id}
			className={cn(
				(parentalControl === false && device.blocked) || device.is_active
					? "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)
						? prev.filter((d) => d.id !== device.id)
						: [...prev, device],
				);
			}}
		>
			<TableCell>
				<div className="flex flex-col items-start">
					<Link
						className={cn(
							"hover:underline font-semibold",
							device.is_active ? "text-green-600" : "",
						)}
						href={`/devices/${device.id}`}
						onClick={(e) => e.stopPropagation()}
					>
						{device.name}
					</Link>
					{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_by === "ADMIN" && device.blocked && (
						<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>
			</TableCell>
			<TableCell className="font-medium">{device.mac}</TableCell>
			<TableCell>
				{!parentalControl ? (
					<AddDevicesToCartButton device={device} />
				) : (
					<BlockDeviceDialog
						admin={admin}
						type={device.blocked ? "unblock" : "block"}
						device={device}
					/>
				)}
			</TableCell>
		</TableRow>
	);
}