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.

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -26,12 +26,13 @@ export default async function PaymentPage({
       devices: true,
     },
   });
-  const formula = await prisma.billFormula.findFirst();
   return (
     <div>
-      <div className="flex justify-between items-center text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
-        <h3>Payment</h3>
-        <span className={cn("text-sm border px-4 py-2 rounded-md uppercase font-semibold", payment?.paid ? "text-green-500 bg-green-500/20" : "text-yellow-500 bg-yellow-500/20")}>
+      <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">
+          Payment
+        </h3>
+        <span className={cn("text-sm border px-4 py-2 rounded-md uppercase font-semibold", payment?.paid ? "text-green-500 bg-green-500/20" : "text-yellow-500 bg-yellow-700")}>
           {payment?.paid ? "Paid" : "Pending"}
         </span>
       </div>
@@ -42,7 +43,6 @@ export default async function PaymentPage({
       >
         <DevicesToPay
           user={user || undefined}
-          billFormula={formula ?? undefined}
           payment={payment || undefined}
         />
       </div>