From 06c427ee39aa07dc42a636194ec2d4ef6cca0239 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Tue, 19 May 2026 08:20:16 +0200
Subject: [PATCH] =?UTF-8?q?backup-restore:=20Toast=20bei=20Erfolg,=20ausf?=
 =?UTF-8?q?=C3=BChrliche=20Fehlermeldung=20im=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vorher: nach Klick auf "Ja, wiederherstellen" passierte UI-seitig
einfach … nichts Sichtbares außer dass der Dialog (irgendwann) zuging.
Bei einem 500er-Fehler blieb der Dialog offen ohne erkennbare
Begründung – der User dachte, die Aktion sei nicht durchgelaufen,
und klickte teils nochmal.

Jetzt:
- Erfolg → Dialog zu, grüne Toast-Meldung mit der Backend-Response
  ("X Datensätze und Y Dateien wiederhergestellt"), 6s sichtbar.
- Fehler → Dialog bleibt offen mit roter Detail-Box drinnen,
  Backend-Felder error + details zusammengefügt, plus
  Toast-Notification 8s. Button-Label wird zu "Erneut versuchen",
  Sekundär-Button zu "Schließen".
- Beim Schließen wird mutation.reset() aufgerufen, damit beim
  nächsten Öffnen keine alten Fehler dranhängen.

extractError-Helper ist allgemein – kann später für andere
Backup-Aktionen wiederverwendet werden.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/pages/settings/DatabaseBackup.tsx     | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/settings/DatabaseBackup.tsx b/frontend/src/pages/settings/DatabaseBackup.tsx
index 1d30a8c3..b4077908 100644
--- a/frontend/src/pages/settings/DatabaseBackup.tsx
+++ b/frontend/src/pages/settings/DatabaseBackup.tsx
@@ -1,10 +1,21 @@
 import { useState, useRef } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import toast from 'react-hot-toast';
 import { Database, Download, Upload, Trash2, RefreshCw, HardDrive, Clock, FileText, FolderOpen, Archive, AlertTriangle, Bomb } from 'lucide-react';
 import { backupApi, BackupInfo, getAccessToken } from '../../services/api';
 import { useAuth } from '../../context/AuthContext';
 import Button from '../../components/ui/Button';
 
+function extractError(err: any): string {
+  const data = err?.response?.data;
+  if (data) {
+    if (data.error && data.details) return `${data.error}: ${data.details}`;
+    if (data.error) return data.error;
+    if (typeof data === 'string') return data;
+  }
+  return err?.message || 'Unbekannter Fehler';
+}
+
 export default function DatabaseBackup() {
   const [showRestoreConfirm, setShowRestoreConfirm] = useState<string | null>(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
@@ -34,9 +45,17 @@ export default function DatabaseBackup() {
   // Backup wiederherstellen
   const restoreMutation = useMutation({
     mutationFn: (name: string) => backupApi.restore(name),
-    onSuccess: () => {
+    onSuccess: (response: any) => {
       queryClient.invalidateQueries({ queryKey: ['backups'] });
       setShowRestoreConfirm(null);
+      // Backend liefert message: "X Datensätze und Y Dateien wiederhergestellt"
+      const msg = response?.message || 'Backup erfolgreich wiederhergestellt.';
+      toast.success(msg, { duration: 6000 });
+    },
+    // Bei Fehler bleibt das Dialog absichtlich offen, damit der User
+    // die Detail-Message sehen + ggf. erneut versuchen kann.
+    onError: (err: any) => {
+      toast.error(extractError(err), { duration: 8000 });
     },
   });
 
@@ -329,13 +348,24 @@ export default function DatabaseBackup() {
               <strong>Achtung:</strong> Bestehende Daten und Dokumente werden mit dem Backup-Stand überschrieben.
               Dies kann nicht rückgängig gemacht werden.
             </p>
+            {restoreMutation.isError && (
+              <div className="mb-4 bg-red-50 border border-red-200 text-red-800 text-sm p-3 rounded-lg">
+                <div className="font-semibold mb-1">Wiederherstellung fehlgeschlagen</div>
+                <div className="whitespace-pre-wrap break-words">
+                  {extractError(restoreMutation.error)}
+                </div>
+              </div>
+            )}
             <div className="flex justify-end gap-3">
               <Button
                 variant="secondary"
-                onClick={() => setShowRestoreConfirm(null)}
+                onClick={() => {
+                  setShowRestoreConfirm(null);
+                  restoreMutation.reset();
+                }}
                 disabled={restoreMutation.isPending}
               >
-                Abbrechen
+                {restoreMutation.isError ? 'Schließen' : 'Abbrechen'}
               </Button>
               <Button
                 variant="primary"
@@ -347,6 +377,8 @@ export default function DatabaseBackup() {
                     <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                     Wird wiederhergestellt...
                   </>
+                ) : restoreMutation.isError ? (
+                  'Erneut versuchen'
                 ) : (
                   'Ja, wiederherstellen'
                 )}