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)/agreements/page.tsx

@@ -2,6 +2,12 @@ import React from 'react'
 
 export default function Agreements() {
   return (
-    <div>Agreements</div>
+    <div>
+      <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">
+          Agreements
+        </h3>
+      </div>
+    </div>
   )
 }

app/(dashboard)/devices/page.tsx

@@ -21,8 +21,8 @@ export default async function Devices({
 	const user = await getCurrentUser()
 	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>
+			<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">
 					My Devices
 				</h3>
 				<AddDeviceDialogForm user_id={user?.id} />

app/(dashboard)/parental-control/page.tsx

@@ -18,8 +18,8 @@ export default async function ParentalControl({
   const query = (await searchParams)?.query || "";
   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>
+      <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">
           Parental Control
         </h3>
       </div>

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>

app/(dashboard)/payments/page.tsx

@@ -15,8 +15,10 @@ export default async function Devices({
   const query = (await searchParams)?.query || "";
   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>My Payments</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">
+          My Payments
+        </h3>
       </div>
 
       <div

app/(dashboard)/user-devices/page.tsx

@@ -1,9 +1,11 @@
 export default async function UserDevcies() {
 	return (
 		<div>
-			<h3 className="text-2xl font-bold title-bg py-4 px-2 mb-4">
-				User Devices
-			</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">
+					User Devices
+				</h3>
+			</div>
 		</div>
 	);
 }

app/(dashboard)/user-payments/page.tsx

@@ -5,7 +5,11 @@ export default async function UserPayments() {
 	await AdminAuthGuard();
 	return (
 		<div>
-			<h3>User Payments</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">
+					User Payments
+				</h3>
+			</div>
 		</div>
 	);
 }

app/(dashboard)/users/page.tsx

@@ -38,9 +38,11 @@ export default async function AdminUsers({
 
 	return (
 		<div>
-			<h3 className="text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
-				Users
-			</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">
+					Users
+				</h3>
+			</div>
 
 			<div
 				id="user-table-filters"

app/(dashboard)/wallet/page.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function UserWallet() {
+  return (
+    <div>
+      <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">
+          My Wallet
+        </h3>
+      </div>
+    </div>
+  )
+}