sarlink-portal/components/device-card.tsx
i701 75ad431160 Enhance payment processing and device management features
- Introduced wallet payment option in verifyPayment function to allow users to pay using their wallet balance.
- Added new BlockDeviceDialog component for managing device blocking and unblocking actions.
- Updated DeviceCard component to display device status and integrate blocking functionality.
- Refactored DevicesTable to utilize DeviceCard for better UI representation of devices.
- Implemented Wallet component to manage wallet balance and top-up functionality.
- Enhanced API routes and Prisma schema to support wallet transactions and device blocking reasons.
- Improved overall user experience with responsive design adjustments and new UI elements.

These changes improve user control over payments and device management, enhancing the overall functionality of the application.
2024-12-25 17:21:04 +05:00

50 lines
1.5 KiB
TypeScript

import type { Device } from '@prisma/client'
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 }) {
return (
<div>
<div className="flex text-sm shadow flex-col items-start p-2 border rounded border-dashed">
<div className="font-semibold flex gap-2 mb-2">
<Link
className="font-medium hover:underline"
href={`/devices/${device.id}`}
>
{device.name}
</Link>
<Badge variant={"outline"}>
<span className="font-medium">
{device.mac}
</span>
</Badge>
</div>
<span className="text-muted-foreground">
Active until{" "}
{new Date().toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
})}
</span>
{device.blocked && (
<div className="p-2 rounded border my-2 w-full">
<span>Comment: </span>
<p className="text-neutral-500">
blocked because he was watching youtube
</p>
</div>
)}
{!parentalControl ? (
<AddDevicesToCartButton device={device} />
) : (
<BlockDeviceDialog device={device} />
)}
</div>
</div>
)
}