Refactor authentication middleware to use native fetch, update dependencies, and enhance error handling. Add new error boundary component for dashboard and improve user verification UI. Update payment handling and device management components for better user experience. Adjust CSS for error backgrounds and refine input read-only components with validation indicators.

app/(dashboard)/devices-to-pay/page.tsx

@@ -0,0 +1,12 @@
+import DevicesForPayment from '@/components/devices-for-payment'
+import prisma from '@/lib/db';
+import React from 'react'
+
+export default async function DevicesToPay() {
+  const billFormula = await prisma.billFormula.findFirst();
+  return (
+    <div>
+      <DevicesForPayment billFormula={billFormula ?? undefined} />
+    </div>
+  )
+}