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/devices-to-pay.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/table";
 import { formatDate } from "@/lib/utils";
 import type { BillFormula, Prisma, User } from "@prisma/client";
-import { Clipboard, ClipboardCheck, Loader2, Wallet } from "lucide-react";
+import { BadgeDollarSign, Clipboard, ClipboardCheck, Loader2, Wallet } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "./ui/button";
@@ -36,7 +36,8 @@ export default function DevicesToPay({
   const discountPercentage = billFormula?.discountPercentage ?? 75;
   // 100+(n−1)×75
   const total = baseAmount + (devices?.length ?? 1 - 1) * discountPercentage;
-
+  const walletBalance = user?.walletBalance ?? 0;
+  const isWalletPayVisible = walletBalance > total;
 
 
   return (
@@ -73,33 +74,59 @@ export default function DevicesToPay({
               {payment?.paid ? (
                 <Button size={"lg"} variant={"secondary"} disabled className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold">Payment Verified</Button>
               ) : (
-                <Button
-                  disabled={verifying}
-                  onClick={async () => {
-                    setVerifying(true);
-                    await verifyPayment({
-                      paymentId: payment?.id,
-                      benefName: user?.name ?? "",
-                      accountNo: user?.accNo ?? "",
-                      absAmount: String(total),
-                      time: formatDate(new Date(payment?.createdAt || "")),
-                    });
-                    setVerifying(false);
-                    // switch (true) {
-                    //   case res?.success === true:
-                    //     toast.success(res.message);
-                    //     break;
-                    //   case res.success === false:
-                    //     toast.error(res.message);
-                    //     break;
-                    //   default:
-                    //     toast.error("Unexpected error occurred.");
-                    // }
-                  }}
-                  size={"lg"} className="mb-4">
-                  {verifying ? "Verifying..." : "Verify Payment"}
-                  {verifying ? <Loader2 className="animate-spin" /> : <Wallet />}
-                </Button>
+                <div className="flex flex-col gap-2">
+                  {isWalletPayVisible && (
+                    <Button
+                      disabled={verifying}
+                      onClick={async () => {
+                        setVerifying(true);
+                        await verifyPayment({
+                          userId: user?.id ?? "",
+                          paymentId: payment?.id,
+                          benefName: user?.name ?? "",
+                          accountNo: user?.accNo ?? "",
+                          absAmount: String(total),
+                          time: formatDate(new Date(payment?.createdAt || "")),
+                          type: "WALLET",
+                        });
+                        setVerifying(false);
+                      }}
+                      variant={"secondary"} size={"lg"}>
+                      {verifying ? "Paying..." : "Pay with wallet"}
+                      <Wallet />
+                    </Button>
+                  )}
+                  <Button
+                    disabled={verifying}
+                    onClick={async () => {
+                      setVerifying(true);
+                      const res = await verifyPayment({
+                        userId: user?.id ?? "",
+                        paymentId: payment?.id,
+                        benefName: user?.name ?? "",
+                        accountNo: user?.accNo ?? "",
+                        absAmount: String(total),
+                        type: "TRANSFER",
+                        time: formatDate(new Date(payment?.createdAt || "")),
+                      });
+                      setVerifying(false);
+                      switch (true) {
+                        case res?.success === true:
+                          toast.success(res.message);
+                          break;
+                        case res.success === false:
+                          toast.error(res.message);
+                          break;
+                        default:
+                          toast.error("Unexpected error occurred.");
+                      }
+                    }}
+                    size={"lg"} className="mb-4">
+                    {verifying ? "Verifying..." : "Verify Payment"}
+                    {verifying ? <Loader2 className="animate-spin" /> : <BadgeDollarSign />}
+                  </Button>
+                </div>
+
               )}
 
             </div>