Implement new features and enhance existing components for improved user experience

- Added a new `bun.lockb` file for dependency management.
- Updated `next.config.ts` to set output to "standalone" for better deployment options.
- Removed `package-lock.json` to streamline package management.
- Modified `package.json` to update dependencies, including `@prisma/client` and `sonner`, and adjusted build scripts for improved functionality.
- Enhanced Tailwind CSS configuration to include new animations and color schemes.
- Refactored various dashboard components to improve UI consistency, including adding a new `My Wallet` page and updating existing pages to use a unified styling approach.
- Introduced a new `BlockDeviceDialog` component for managing device blocking with user-defined reasons.
- Improved logging and error handling in payment verification and device management functions.

These changes enhance the overall functionality, maintainability, and user experience of the application.

components/auth/application-layout.tsx

@@ -30,6 +30,7 @@ export async function ApplicationLayout({
 	return (
 		<SidebarProvider>
 			<AppSidebar role={session?.user?.role || "USER"} />
+			<DeviceCartDrawer billFormula={billFormula || null} />
 			<SidebarInset>
 				<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4 z-10">
 					<div className="flex items-center gap-2 ">
@@ -39,7 +40,6 @@ export async function ApplicationLayout({
 
 					<div className="flex items-center gap-2">
 						<Wallet walletBalance={user?.walletBalance || 0} />
-						<DeviceCartDrawer billFormula={billFormula || null} />
 						<ModeToggle />
 						<AccountPopover />
 					</div>

components/block-device-dialog.tsx

@@ -1,35 +1,135 @@
-'use client'
+"use client"
 
-import { blockDevice } from "@/actions/omada-actions";
-import { Button } from "@/components/ui/button";
-import type { Device } from "@prisma/client";
-import { useState } from "react";
-import { toast } from "sonner";
-import { TextShimmer } from "./ui/text-shimmer";
+import { blockDevice } from "@/actions/omada-actions"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { Device, } from "@prisma/client"
+import { OctagonX } from "lucide-react"
+import { useState } from "react"
+import { type SubmitHandler, useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { Textarea } from "./ui/textarea"
+import { TextShimmer } from "./ui/text-shimmer"
+
+
+
+const validationSchema = z.object({
+  reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
+})
+
+export default function BlockDeviceDialog({ device, type }: { device: Device, type: "block" | "unblock" }) {
+  const [disabled, setDisabled] = useState(false)
+  const [open, setOpen] = useState(false)
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<z.infer<typeof validationSchema>>({
+    resolver: zodResolver(validationSchema),
+  })
+
+  const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
+    setDisabled(true)
+    console.log(data)
+    toast.promise(blockDevice({
+      macAddress: device.mac,
+      type: type,
+      reason: data.reasonForBlocking,
+      // reason: data.reasonForBlocking,
+    }), {
+      loading: "Blocking...",
+      success: () => {
+        setDisabled(false)
+        setOpen((prev) => !prev)
+        return "Blocked!"
+      },
+      error: (error) => {
+        setDisabled(false)
+        return error || "Something went wrong"
+      },
+    })
+    setDisabled(false)
+
+  }
 
-export default function BlockDeviceDialog({ device }: { device: Device }) {
-  const [disabled, setDisabled] = useState(false);
   return (
-    <Button
-      className="w-full mt-2"
-      disabled={disabled}
-      onClick={() => {
-        setDisabled(true);
-        toast.promise(blockDevice({ macAddress: device.mac, type: device.blocked ? "unblock" : "block" }), {
-          loading: device.blocked ? "Unblocking..." : "Blocking...",
-          success: () => {
-            setDisabled(false);
-            return `Device ${device.name} successfully ${device.blocked ? "unblocked" : "blocked"
-              }!`;
-          },
-          error: () => {
-            setDisabled(false);
-            return "Something went wrong";
-          },
-        });
-      }}
-    >
-      {disabled ? <TextShimmer>{device.blocked ? "Unblocking..." : "Blocking..."}</TextShimmer> : (device?.blocked ? "Unblock" : "Block")}
-    </Button>
+    <div>
+      {device.blocked ? (
+        <Button onClick={
+          () => {
+            setDisabled(true);
+            toast.promise(blockDevice({
+              macAddress: device.mac,
+              type: "unblock",
+              reason: '',
+            }), {
+              loading: "unblockinig...",
+              success: () => {
+                setDisabled(false);
+                return "Unblocked!";
+              },
+              error: () => {
+                setDisabled(false);
+                return "Something went wrong";
+              },
+            })
+          }
+        }>
+          {disabled ? (
+            <TextShimmer>
+              Unblocking
+            </TextShimmer>
+          ) : "Unblock"}
+        </Button>
+
+      ) : (
+
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button disabled={disabled} variant="destructive">
+              <OctagonX />
+              Block
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>Please provide a reason for blocking this device.</DialogTitle>
+
+            </DialogHeader>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="grid gap-4 py-4">
+                <div className="flex flex-col items-start gap-1">
+                  <Label htmlFor="reason" className="text-right">
+                    Reason for blocking
+                  </Label>
+                  <Textarea rows={10} {...register("reasonForBlocking")} id="reasonForBlocking" className={cn("col-span-5", errors.reasonForBlocking && "ring-2 ring-red-500")} />
+                  <span className="text-sm text-red-500">
+                    {errors.reasonForBlocking?.message}
+                  </span>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button variant={"destructive"} disabled={disabled} type="submit">
+                  Block
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
+
+    </div>
+
   )
 }

components/clickable-row.tsx

@@ -45,11 +45,11 @@ export default function ClickableRow({ device, parentalControl }: { device: Devi
               year: "numeric",
             })}
           </span>
-          {parentalControl && (
+          {(parentalControl && device.blocked) && (
             <div className="p-2 rounded border my-2">
               <span>Comment: </span>
               <p className="text-neutral-500">
-                blocked because he was watching youtube
+                {device?.reasonForBlocking}
               </p>
             </div>
           )}
@@ -60,7 +60,7 @@ export default function ClickableRow({ device, parentalControl }: { device: Devi
         {!parentalControl ? (
           <AddDevicesToCartButton device={device} />
         ) : (
-          <BlockDeviceDialog device={device} />
+          <BlockDeviceDialog type={device.blocked ? "unblock" : "block"} device={device} />
         )}
       </TableCell>
     </TableRow >

components/device-card.tsx

@@ -55,7 +55,7 @@ export default function DeviceCard({ device, parentalControl }: { device: Device
 
           {device.blocked && (
             <div className="p-2 rounded border my-2 w-full">
-              <span>Comment: </span>
+              <span className='uppercase text-red-500'>Blocked by admin </span>
               <p className="text-neutral-500">
                 blocked because he was watching youtube
               </p>
@@ -67,7 +67,7 @@ export default function DeviceCard({ device, parentalControl }: { device: Device
           {!parentalControl ? (
             <AddDevicesToCartButton device={device} />
           ) : (
-            <BlockDeviceDialog device={device} />
+            <BlockDeviceDialog type={device.blocked ? "unblock" : "block"} device={device} />
           )}
         </div>
       </div>

components/device-cart.tsx

@@ -33,7 +33,6 @@ import { toast } from "sonner";
 import NumberInput from "./number-input";
 
 
-
 export function DeviceCartDrawer({
   billFormula,
 }: {
@@ -74,83 +73,88 @@ export function DeviceCartDrawer({
     paid: false,
   };
 
+  if (devices.length === 0) return null
   return (
-    <Drawer open={isOpen} onOpenChange={setIsOpen}>
-      <DrawerTrigger asChild>
-        <Button onClick={() => setIsOpen(!isOpen)} variant="outline">
-          <MonitorSmartphone />
-          {devices.length > 0 && `(${devices.length})`}
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Selected Devices</DrawerTitle>
-            <DrawerDescription>Selected devices pay.</DrawerDescription>
-          </DrawerHeader>
-          <div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto px-4 pb-4 gap-4">
-            {devices.map((device) => (
-              <DeviceCard key={device.id} device={device} />
-            ))}
-          </div>
-          <div className="px-4 flex flex-col gap-4">
-            <NumberInput
-              label="Set No of Months"
-              value={months}
-              onChange={(value) => setMonths(value)}
-              maxAllowed={12}
-              isDisabled={devices.length === 0}
-            />
-            {message && (
-              <span className="title-bg text-lime-800 bg-lime-100/50 dark:text-lime-100 rounded text-center p-2 w-full">
-                {message}
-              </span>
-            )}
-          </div>
-          <DrawerFooter>
-            <Button
-              onClick={async () => {
-                setDisabled(true)
-                const payment = await createPayment(data)
-                setDisabled(false)
-                setDeviceCart([])
-                setMonths(1)
-                if (payment) {
-                  router.push(`/payments/${payment.id}`);
-                  setTimeout(() => setIsOpen(!isOpen), 2000);
-                } else {
-                  toast.error("Something went wrong.")
-                }
-              }}
-              className="w-full"
-              disabled={devices.length === 0 || disabled}
-            >
-              {disabled ? (
-                <>
-                  <Loader2 className="ml-2 animate-spin" />
-                </>
-              ) : (
-                <>
-                  Go to payment
-                  <CircleDollarSign />
-                </>
+    <>
+      <Drawer open={isOpen} onOpenChange={setIsOpen}>
+        <DrawerTrigger asChild>
+          <Button size={"lg"} className="bg-sarLinkOrange absolute bottom-10  w-fit z-20 left-1/2 transform -translate-x-1/2" onClick={() => setIsOpen(!isOpen)} variant="outline">
+            <MonitorSmartphone />
+            Pay {devices.length > 0 && `(${devices.length})`} Device
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <DrawerHeader>
+              <DrawerTitle>Selected Devices</DrawerTitle>
+              <DrawerDescription>Selected devices pay.</DrawerDescription>
+            </DrawerHeader>
+            <div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto px-4 pb-4 gap-4">
+              {devices.map((device) => (
+                <DeviceCard key={device.id} device={device} />
+              ))}
+            </div>
+            <div className="px-4 flex flex-col gap-4">
+              <NumberInput
+                label="Set No of Months"
+                value={months}
+                onChange={(value) => setMonths(value)}
+                maxAllowed={12}
+                isDisabled={devices.length === 0}
+              />
+              {message && (
+                <span className="title-bg text-lime-800 bg-lime-100/50 dark:text-lime-100 rounded text-center p-2 w-full">
+                  {message}
+                </span>
               )}
-            </Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-            <Button
-              onClick={() => {
-                setDeviceCart([]);
-              }}
-              variant="outline"
-            >
-              Reset
-            </Button>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
+            </div>
+            <DrawerFooter>
+              <Button
+                onClick={async () => {
+                  setDisabled(true)
+                  const payment = await createPayment(data)
+                  setDisabled(false)
+                  setDeviceCart([])
+                  setMonths(1)
+                  if (payment) {
+                    router.push(`/payments/${payment.id}`);
+                    setTimeout(() => setIsOpen(!isOpen), 2000);
+                  } else {
+                    toast.error("Something went wrong.")
+                  }
+                }}
+                className="w-full"
+                disabled={devices.length === 0 || disabled}
+              >
+                {disabled ? (
+                  <>
+                    <Loader2 className="ml-2 animate-spin" />
+                  </>
+                ) : (
+                  <>
+                    Go to payment
+                    <CircleDollarSign />
+                  </>
+                )}
+              </Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+              <Button
+                onClick={() => {
+                  setDeviceCart([]);
+                  setIsOpen(!isOpen);
+                }}
+                variant="outline"
+              >
+                Clear Selection
+              </Button>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </>
+
   );
 }
 

components/devices-to-pay.tsx

@@ -9,7 +9,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { formatDate } from "@/lib/utils";
-import type { BillFormula, Prisma, User } from "@prisma/client";
+import type { Prisma, User } from "@prisma/client";
 import { BadgeDollarSign, Clipboard, ClipboardCheck, Loader2, Wallet } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -22,28 +22,24 @@ type PaymentWithDevices = Prisma.PaymentGetPayload<{
 }>;
 
 export default function DevicesToPay({
-  billFormula,
   payment,
   user
-}: { billFormula?: BillFormula; payment?: PaymentWithDevices, user?: User }) {
+}: { payment?: PaymentWithDevices, user?: User }) {
   const [verifying, setVerifying] = useState(false)
 
   const devices = payment?.devices;
   if (devices?.length === 0) {
     return null;
   }
-  const baseAmount = billFormula?.baseAmount ?? 100;
-  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;
+  const isWalletPayVisible = walletBalance > (payment?.amount ?? 0);
 
 
   return (
     <div className="w-full">
       <div className="p-2 flex flex-col gap-2">
-        <h3 className="title-bg my-1 p-2 font-semibold text-lg">
+        <h3 className="title-bg my-1 p-2 border border-dashed rounded-md font-semibold text-lg">
           {!payment?.paid ? "Devices to pay" : "Devices Paid"}
         </h3>
         <div className="flex flex-col gap-2">
@@ -85,7 +81,7 @@ export default function DevicesToPay({
                           paymentId: payment?.id,
                           benefName: user?.name ?? "",
                           accountNo: user?.accNo ?? "",
-                          absAmount: String(total),
+                          absAmount: String(payment?.amount),
                           time: formatDate(new Date(payment?.createdAt || "")),
                           type: "WALLET",
                         });
@@ -105,7 +101,7 @@ export default function DevicesToPay({
                         paymentId: payment?.id,
                         benefName: user?.name ?? "",
                         accountNo: user?.accNo ?? "",
-                        absAmount: String(total),
+                        absAmount: String(payment?.amount),
                         type: "TRANSFER",
                         time: formatDate(new Date(payment?.createdAt || "")),
                       });
@@ -140,7 +136,7 @@ export default function DevicesToPay({
           <TableFooter>
             <TableRow className="">
               <TableCell colSpan={1}>Total Due</TableCell>
-              <TableCell className="text-right text-3xl font-bold">{total.toFixed(2)}</TableCell>
+              <TableCell className="text-right text-3xl font-bold">{payment?.amount.toFixed(2)}</TableCell>
             </TableRow>
           </TableFooter>
         </Table>

components/payments-table.tsx

@@ -104,7 +104,7 @@ export async function PaymentsTable({
               {payments.map((payment) => (
                 <TableRow key={payment.id}>
                   <TableCell>
-                    <div className={cn("flex flex-col items-start title-bg border rounded p-2", payment?.paid ? "bg-green-500/10 border-dashed border-green=500" : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50")}>
+                    <div className={cn("flex flex-col items-start border rounded p-2", payment?.paid ? "bg-green-500/10 border-dashed border-green=500" : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50")}>
                       <div className="flex items-center gap-2">
                         <Calendar size={16} opacity={0.5} />
                         <span className="text-muted-foreground">

components/price-calculator.tsx

@@ -35,8 +35,10 @@ export default function PriceCalculator() {
 
   return (
     <div className="border p-2 rounded-xl">
-      <div className="flex flex-col justify-between items-start text-gray-500 title-bg p-2 mb-4">
-        <h3 className="text-2xl font-semibold">Price Calculator</h3>
+      <div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <h3 className="text-sarLinkOrange text-2xl">
+          Price Calculator
+        </h3>
       </div>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {/* Initial Price Input */}