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.

2025-01-15 10:35:03 +05:00
parent d14b0b35a3
commit 8ffabb1fcb
23 changed files with 535 additions and 303 deletions
@@ -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>
+  )
+}