sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-01 09:13:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: update axios client import, enhance device and payment handling, and add cancel payment button component
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 6m28s
Details

Browse Source
This commit is contained in:
i701
2025-04-08 21:37:51 +05:00
parent daab793592
commit 7e49bf119a
14 changed files with 270 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/device-card.tsx
View File

@ -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>
);
}