Enhance payment processing and user interaction features

- Updated createPayment function to log payment data more clearly.
- Introduced verifyPayment function for validating payments via an external API.
- Enhanced DevicesToPay component to include user information and payment verification functionality.
- Added formatDate utility for consistent date formatting across the application.
- Updated Prisma schema to include account number for users.
- Refactored layout and device cart components for improved user experience and responsiveness.

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

@@ -1,11 +1,22 @@
 import DevicesToPay from "@/components/devices-to-pay";
+import { auth } from "@/lib/auth";
 import { hasSession } from "@/lib/auth-guard";
 import prisma from "@/lib/db";
+import { headers } from "next/headers";
 import React from "react";
-
 export default async function PaymentPage({
   params,
-}: { params: Promise<{ paymentId: string }> }) {
+}: {
+  params: Promise<{ paymentId: string }>;
+}) {
+  const session = await auth.api.getSession({
+    headers: await headers()
+  })
+  const user = await prisma.user.findUnique({
+    where: {
+      id: session?.session.userId
+    }
+  })
   const paymentId = (await params).paymentId;
   const payment = await prisma.payment.findUnique({
     where: {
@@ -28,6 +39,7 @@ export default async function PaymentPage({
         className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
       >
         <DevicesToPay
+          user={user || undefined}
           billFormula={formula ?? undefined}
           payment={payment || undefined}
         />