mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-10-05 16:05:23 +00:00
chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 12m20s
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 12m20s
This commit is contained in:
@@ -10,108 +10,108 @@ import BlockDeviceDialog from "./block-device-dialog";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
export default function DeviceCard({
|
||||
device,
|
||||
parentalControl,
|
||||
isAdmin,
|
||||
device,
|
||||
parentalControl,
|
||||
isAdmin,
|
||||
}: {
|
||||
device: Device;
|
||||
parentalControl?: boolean;
|
||||
isAdmin?: boolean;
|
||||
device: Device;
|
||||
parentalControl?: boolean;
|
||||
isAdmin?: boolean;
|
||||
}) {
|
||||
const [devices, setDeviceCart] = useAtom(deviceCartAtom);
|
||||
const [devices, setDeviceCart] = useAtom(deviceCartAtom);
|
||||
|
||||
const isChecked = devices.some((d) => d.id === device.id);
|
||||
const isChecked = devices.some((d) => d.id === device.id);
|
||||
|
||||
return (
|
||||
// biome-ignore lint/a11y/noStaticElementInteractions: <dw about it>
|
||||
<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" : "",
|
||||
device.is_active
|
||||
? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
|
||||
: "cursor-pointer hover:bg-muted-foreground/10",
|
||||
)}
|
||||
>
|
||||
<div className="">
|
||||
<div className="font-semibold flex flex-col items-start gap-2 mb-2">
|
||||
<Link
|
||||
className={cn(
|
||||
"font-medium hover:underline ml-0.5",
|
||||
device.is_active ? "text-green-600" : "",
|
||||
)}
|
||||
href={`/devices/${device.id}`}
|
||||
>
|
||||
{device.name}
|
||||
</Link>
|
||||
<Badge variant={"outline"}>
|
||||
<span className="font-medium">{device.mac}</span>
|
||||
</Badge>
|
||||
<Badge variant={"outline"}>
|
||||
<span className="font-medium">{device.vendor}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
return (
|
||||
// biome-ignore lint/a11y/noStaticElementInteractions: <dw about it>
|
||||
<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" : "",
|
||||
device.is_active
|
||||
? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
|
||||
: "cursor-pointer hover:bg-muted-foreground/10",
|
||||
)}
|
||||
>
|
||||
<div className="">
|
||||
<div className="font-semibold flex flex-col items-start gap-2 mb-2">
|
||||
<Link
|
||||
className={cn(
|
||||
"font-medium hover:underline ml-0.5",
|
||||
device.is_active ? "text-green-600" : "",
|
||||
)}
|
||||
href={`/devices/${device.id}`}
|
||||
>
|
||||
{device.name}
|
||||
</Link>
|
||||
<Badge variant={"outline"}>
|
||||
<span className="font-medium">{device.mac}</span>
|
||||
</Badge>
|
||||
<Badge variant={"outline"}>
|
||||
<span className="font-medium">{device.vendor}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{device.is_active ? (
|
||||
<div className="text-muted-foreground ml-0.5">
|
||||
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 ml-0.5">Device Inactive</p>
|
||||
)}
|
||||
{device.has_a_pending_payment && (
|
||||
<Link href={`/payments/${device.pending_payment_id}`}>
|
||||
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-yellow-600">
|
||||
Payment Pending{" "}
|
||||
<HandCoins className="animate-pulse" size={14} />
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
{device.is_active ? (
|
||||
<div className="text-muted-foreground ml-0.5">
|
||||
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 ml-0.5">Device Inactive</p>
|
||||
)}
|
||||
{device.has_a_pending_payment && (
|
||||
<Link href={`/payments/${device.pending_payment_id}`}>
|
||||
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-yellow-600">
|
||||
Payment Pending{" "}
|
||||
<HandCoins className="animate-pulse" size={14} />
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{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={isAdmin}
|
||||
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={isAdmin}
|
||||
type={device.blocked ? "unblock" : "block"}
|
||||
device={device}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user