feat: update ProjectE application

apps/web/app/(dashboard)/settings/error-log/page.tsx

@@ -10,6 +10,16 @@ import {
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { AlertTriangle, Trash2 } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 
 interface ErrorLog {
   id: string;
@@ -23,33 +33,46 @@ interface ErrorLog {
 export default function ErrorLogPage() {
   const [errors, setErrors] = useState<ErrorLog[]>([]);
   const [loading, setLoading] = useState(true);
+  const [clearing, setClearing] = useState(false);
+  const [confirmClear, setConfirmClear] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
 
   useEffect(() => {
     fetchErrors();
   }, []);
 
   async function fetchErrors() {
+    setLoading(true);
+    setError(null);
     try {
       const response = await fetch('/api/error-logs?limit=50');
-      if (response.ok) {
-        const data = await response.json();
-        setErrors(data.items || []);
-      }
+      if (!response.ok) throw new Error('Unable to load error logs.');
+      const data = await response.json();
+      setErrors(data.items || []);
     } catch (error) {
       console.error('Failed to fetch error logs:', error);
+      setError('Unable to load error logs. Please try again.');
     } finally {
       setLoading(false);
     }
   }
 
   async function clearErrors() {
+    setClearing(true);
+    setError(null);
+    setStatus(null);
     try {
       const response = await fetch('/api/error-logs', { method: 'DELETE' });
-      if (response.ok) {
-        setErrors([]);
-      }
+      if (!response.ok) throw new Error('Unable to clear error logs.');
+      setErrors([]);
+      setConfirmClear(false);
+      setStatus('Error logs cleared successfully.');
     } catch (error) {
       console.error('Failed to clear error logs:', error);
+      setError('Unable to clear error logs. Please try again.');
+    } finally {
+      setClearing(false);
     }
   }
 
@@ -75,14 +98,35 @@ export default function ErrorLogPage() {
             </CardDescription>
           </div>
           {errors.length > 0 && (
-            <Button variant="outline" size="sm" onClick={clearErrors} aria-label="Clear all error logs">
-              <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
-              Clear all
-            </Button>
+            <AlertDialog open={confirmClear} onOpenChange={setConfirmClear}>
+              <Button variant="outline" size="sm" onClick={() => setConfirmClear(true)} aria-label="Clear all error logs">
+                <Trash2 className="mr-2 h-4 w-4" aria-hidden="true" />
+                Clear all
+              </Button>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Clear all error logs?</AlertDialogTitle>
+                  <AlertDialogDescription>This permanently removes all displayed error logs.</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={clearing}>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={clearErrors} disabled={clearing}>
+                    {clearing ? 'Clearing...' : 'Clear all'}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
           )}
         </div>
       </CardHeader>
       <CardContent>
+        {error && (
+          <div className="mb-4 flex items-center justify-between gap-3 text-sm text-destructive" role="alert">
+            <span>{error}</span>
+            <Button variant="outline" size="sm" onClick={fetchErrors} disabled={loading}>Retry</Button>
+          </div>
+        )}
+        {status && <p className="mb-4 text-sm text-muted-foreground" role="status">{status}</p>}
         {errors.length === 0 ? (
           <p className="text-center text-muted-foreground py-8">
             No errors logged