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/wallet.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import {
+  WalletDrawerOpenAtom,
+  walletTopUpValue,
+} from "@/lib/atoms";
+import { authClient } from "@/lib/auth-client";
+import type { TopupType } from "@/lib/types";
+import { useAtom, } from "jotai";
+import {
+  CircleDollarSign,
+  Loader2,
+  Wallet2,
+} from "lucide-react";
+import { usePathname, } from "next/navigation";
+import { useState } from "react";
+import NumberInput from "./number-input";
+
+
+
+export function Wallet({
+  walletBalance,
+}: {
+  walletBalance: number;
+}) {
+  const session = authClient.useSession();
+  const pathname = usePathname();
+  const [amount, setAmount] = useAtom(walletTopUpValue);
+  const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
+  const [disabled, setDisabled] = useState(false);
+  // const router = useRouter();
+
+  if (pathname === "/payment") {
+    return null;
+  }
+
+  const data: TopupType = {
+    userId: session?.data?.user.id ?? "",
+    amount: Number.parseFloat(amount.toFixed(2)),
+    paid: false,
+  };
+
+  return (
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
+      <DrawerTrigger asChild>
+        <Button onClick={() => setIsOpen(!isOpen)} variant="outline">
+          {walletBalance} MVR
+          <Wallet2 />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Wallet</DrawerTitle>
+            <DrawerDescription asChild>
+              <div>
+                Your wallet balance is{" "}
+                <span className="font-semibold">
+                  {walletBalance.toFixed(2)}
+                </span>{" "}
+              </div>
+            </DrawerDescription>
+          </DrawerHeader>
+
+          <div className="px-4 flex flex-col gap-4">
+            <NumberInput
+              label="Set amount to top up"
+              value={amount}
+              onChange={(value) => setAmount(value)}
+              maxAllowed={5000}
+              isDisabled={amount === 0}
+            />
+
+          </div>
+          <DrawerFooter>
+            <Button
+              onClick={async () => {
+                console.log(data)
+                setDisabled(true)
+                // const payment = await createPayment(data)
+                setDisabled(false)
+                // setMonths(1)
+                // if (payment) {
+                // router.push(`/payments/${payment.id}`);
+                // setIsOpen(!isOpen);
+                // } else {
+                // toast.error("Something went wrong.")
+                // }
+              }}
+              className="w-full"
+              disabled={amount === 0 || disabled}
+            >
+              {disabled ? (
+                <>
+                  <Loader2 className="ml-2 animate-spin" />
+                </>
+              ) : (
+                <>
+                  Go to payment
+                  <CircleDollarSign />
+                </>
+              )}
+            </Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+