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.

components/device-card.tsx

@@ -0,0 +1,49 @@
+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>
+  )
+}