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

@@ -0,0 +1,36 @@
+'use client' // Error boundaries must be Client Components
+
+import { Button } from '@/components/ui/button'
+import { TriangleAlert } from "lucide-react";
+import { useEffect } from 'react'
+export default function DashboardError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className='error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center'>
+      <div className='bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4'>
+        <TriangleAlert color='red' />
+        <h2 className='text-red-500 text-xl font-semibold'>Something went wrong!</h2>
+        <Button
+          variant={"destructive"}
+          size={"lg"}
+          onClick={
+            // Attempt to recover by trying to re-render the segment
+            () => reset()
+          }
+        >
+          Try again
+        </Button>
+      </div>
+    </div>
+  )
+}