mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-22 16:42:00 +00:00
i701
745f8d8fad
- Updated `package.json` to include the latest version of `@radix-ui/react-separator` and added `moment` for date handling. - Modified `blockDevice` function in `omada-actions.ts` to include a `blockedBy` parameter, allowing differentiation between admin and parent actions. - Refactored `payment.ts` to include expiry date handling for devices during payment processing. - Improved `DevicesTable` and `ClickableRow` components to support admin functionalities and enhance device interaction. - Updated `BlockDeviceDialog` to accept an `admin` prop, allowing for tailored blocking actions based on user role. - Enhanced UI components for better consistency and responsiveness across the dashboard. These changes improve the overall functionality and maintainability of the application, providing a better user experience in device management.
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
'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'
|
|
|
|
export default function DeviceCard({ device, parentalControl }: { device: Device, parentalControl?: boolean }) {
|
|
const [devices, setDeviceCart] = useAtom(deviceCartAtom)
|
|
|
|
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>
|
|
|
|
{device.isActive && (
|
|
<span className="text-muted-foreground">
|
|
Active until{" "}
|
|
{new Date().toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "2-digit",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
)}
|
|
|
|
{(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>
|
|
)
|
|
}
|