feat: punkt 6 (backup) — ARQ cron job, backup config in settings, backup-now trigger, backup history, migration 0130

frontend/src/pages/SettingsBackup.tsx

@@ -1,18 +1,27 @@
 /**
- * SettingsBackup page — Backup & Restore management.
+ * SettingsBackup page — Backup & Restore management with automation config.
  *
  * Features:
- * - "Backup jetzt erstellen" button (POST)
+ * - Backup automation config (enabled, interval, retention, destination)
+ * - "Backup jetzt" button (POST /backup-now)
  * - List of backups: date, size, status badge, restore/delete buttons
+ * - Backup history (last 10 backup results from audit log)
  * - Restore dialog with warning text + type "RESTORE" to confirm
  * - Auto-refresh when backup is pending
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { Plus, Download, Trash2, AlertTriangle, HardDrive, CheckCircle, XCircle, Clock } from 'lucide-react';
-import { useBackups, useCreateBackup, useRestoreBackup, useDeleteBackup, type Backup } from '@/api/backups';
+import {
+  Plus, Download, Trash2, AlertTriangle, HardDrive, CheckCircle, XCircle, Clock,
+  Settings, Play, History, Save,
+} from 'lucide-react';
+import {
+  useBackups, useCreateBackup, useRestoreBackup, useDeleteBackup,
+  useBackupConfig, useUpdateBackupConfig, useTriggerBackupNow, useBackupHistory,
+  type Backup, type BackupConfig, type BackupHistoryEntry,
+} from '@/api/backups';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Modal } from '@/components/ui/Modal';
@@ -71,7 +80,7 @@ function StatusBadge({ status }: { status: string }) {
     <span
       className={clsx(
         'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium',
-        c.classes
+        c.classes,
       )}
     >
       {c.icon}
@@ -242,6 +251,289 @@ function DeleteModal({ open, backup, onConfirm, onCancel, isDeleting }: DeleteMo
   );
 }
 
+// ─── Backup Config Section ──────────────────────────────────────────────────
+
+function BackupConfigSection() {
+  const { t } = useTranslation();
+  const { data: config, isLoading } = useBackupConfig();
+  const updateMutation = useUpdateBackupConfig();
+  const triggerMutation = useTriggerBackupNow();
+
+  const [localConfig, setLocalConfig] = useState<BackupConfig | null>(null);
+
+  useEffect(() => {
+    if (config) {
+      setLocalConfig(config);
+    }
+  }, [config]);
+
+  const handleSave = useCallback(() => {
+    if (localConfig) {
+      updateMutation.mutate(localConfig);
+    }
+  }, [localConfig, updateMutation]);
+
+  const handleTriggerNow = useCallback(() => {
+    triggerMutation.mutate();
+  }, [triggerMutation]);
+
+  if (isLoading || !localConfig) {
+    return (
+      <Card>
+        <div className="py-8 text-center">
+          <div className="inline-flex items-center gap-2 text-secondary-500">
+            <Settings className="h-5 w-5 animate-pulse" aria-hidden="true" />
+            {t('common.loading', 'Laden...')}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <div className="p-4 space-y-4">
+        {/* Section header */}
+        <div className="flex items-center gap-2">
+          <Settings className="h-5 w-5 text-secondary-400" aria-hidden="true" />
+          <div>
+            <h2 className="text-base font-semibold text-secondary-900">
+              {t('backup.configTitle', 'Backup-Automatisierung')}
+            </h2>
+            <p className="text-sm text-secondary-500">
+              {t('backup.configSubtitle', 'Konfigurieren Sie automatische Backups')}
+            </p>
+          </div>
+        </div>
+
+        {/* Enabled toggle */}
+        <div className="flex items-center justify-between rounded-md border border-secondary-200 p-3">
+          <div>
+            <p className="text-sm font-medium text-secondary-900">
+              {t('backup.configEnabled', 'Automatische Backups aktiviert')}
+            </p>
+            <p className="text-xs text-secondary-500">
+              {t('backup.configEnabledDesc', 'Aktiviert geplante Backups über den ARQ Worker')}
+            </p>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={localConfig.backup_enabled}
+            onClick={() => setLocalConfig({ ...localConfig, backup_enabled: !localConfig.backup_enabled })}
+            className={clsx(
+              'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',
+              localConfig.backup_enabled ? 'bg-primary-600' : 'bg-secondary-300',
+            )}
+            data-testid="backup-enabled-toggle"
+          >
+            <span
+              className={clsx(
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition',
+                localConfig.backup_enabled ? 'translate-x-5' : 'translate-x-0',
+              )}
+            />
+          </button>
+        </div>
+
+        {/* Interval select */}
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('backup.configInterval', 'Intervall')}
+          </label>
+          <p className="text-xs text-secondary-500 mb-2">
+            {t('backup.configIntervalDesc', 'Wie oft Backups erstellt werden')}
+          </p>
+          <select
+            value={localConfig.backup_interval}
+            onChange={(e) => setLocalConfig({ ...localConfig, backup_interval: e.target.value })}
+            className={clsx(
+              'block w-full rounded-md border border-secondary-300 px-3 py-2 text-base min-h-touch',
+              'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
+              'text-secondary-900',
+            )}
+            data-testid="backup-interval-select"
+          >
+            <option value="6h">{t('backup.interval6h', 'Alle 6 Stunden')}</option>
+            <option value="12h">{t('backup.interval12h', 'Alle 12 Stunden')}</option>
+            <option value="24h">{t('backup.interval24h', 'Täglich (24 Stunden)')}</option>
+            <option value="48h">{t('backup.interval48h', 'Alle 48 Stunden')}</option>
+            <option value="weekly">{t('backup.intervalWeekly', 'Wöchentlich')}</option>
+          </select>
+        </div>
+
+        {/* Retention select */}
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('backup.configRetention', 'Aufbewahrung (Tage)')}
+          </label>
+          <p className="text-xs text-secondary-500 mb-2">
+            {t('backup.configRetentionDesc', 'Anzahl der Tage, die Backups aufbewahrt werden')}
+          </p>
+          <select
+            value={String(localConfig.backup_retention_days)}
+            onChange={(e) => setLocalConfig({ ...localConfig, backup_retention_days: parseInt(e.target.value, 10) })}
+            className={clsx(
+              'block w-full rounded-md border border-secondary-300 px-3 py-2 text-base min-h-touch',
+              'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
+              'text-secondary-900',
+            )}
+            data-testid="backup-retention-select"
+          >
+            <option value="7">7</option>
+            <option value="14">14</option>
+            <option value="30">30</option>
+            <option value="90">90</option>
+          </select>
+        </div>
+
+        {/* Destination select */}
+        <div>
+          <label className="block text-sm font-medium text-secondary-700 mb-1">
+            {t('backup.configDestination', 'Ziel')}
+          </label>
+          <p className="text-xs text-secondary-500 mb-2">
+            {t('backup.configDestinationDesc', 'Wo Backups gespeichert werden')}
+          </p>
+          <select
+            value={localConfig.backup_destination}
+            onChange={(e) => setLocalConfig({ ...localConfig, backup_destination: e.target.value })}
+            className={clsx(
+              'block w-full rounded-md border border-secondary-300 px-3 py-2 text-base min-h-touch',
+              'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
+              'text-secondary-900',
+            )}
+            data-testid="backup-destination-select"
+          >
+            <option value="local">{t('backup.destLocal', 'Lokal')}</option>
+            <option value="s3">{t('backup.destS3', 'S3')}</option>
+            <option value="nextcloud">{t('backup.destNextcloud', 'Nextcloud')}</option>
+          </select>
+        </div>
+
+        {/* Save + Trigger buttons */}
+        <div className="flex items-center justify-between gap-2 pt-2">
+          <Button
+            variant="secondary"
+            icon={<Play className="h-4 w-4" />}
+            onClick={handleTriggerNow}
+            isLoading={triggerMutation.isPending}
+            disabled={triggerMutation.isPending}
+            data-testid="backup-now-btn"
+          >
+            {t('backup.backupNow', 'Backup jetzt ausführen')}
+          </Button>
+          <Button
+            variant="primary"
+            icon={<Save className="h-4 w-4" />}
+            onClick={handleSave}
+            isLoading={updateMutation.isPending}
+            disabled={updateMutation.isPending}
+            data-testid="backup-config-save-btn"
+          >
+            {t('backup.configSave', 'Konfiguration speichern')}
+          </Button>
+        </div>
+
+        {/* Success / Error messages */}
+        {updateMutation.isSuccess && (
+          <div className="rounded-md bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-700">
+            {t('backup.configSaved', 'Konfiguration gespeichert')}
+          </div>
+        )}
+        {updateMutation.isError && (
+          <div className="rounded-md bg-danger-50 border border-danger-200 px-3 py-2 text-sm text-danger-700">
+            {t('backup.configSaveError', 'Fehler beim Speichern der Konfiguration')}
+          </div>
+        )}
+        {triggerMutation.isSuccess && (
+          <div className="rounded-md bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-700">
+            {t('backup.backupNowSuccess', 'Backup-Auftrag gestartet')}
+          </div>
+        )}
+        {triggerMutation.isError && (
+          <div className="rounded-md bg-danger-50 border border-danger-200 px-3 py-2 text-sm text-danger-700">
+            {t('backup.backupNowError', 'Fehler beim Starten des Backups')}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+// ─── Backup History Section ─────────────────────────────────────────────────
+
+function BackupHistorySection() {
+  const { t } = useTranslation();
+  const { data, isLoading } = useBackupHistory();
+  const history = data?.history ?? [];
+
+  return (
+    <Card>
+      <div className="p-4">
+        <div className="flex items-center gap-2 mb-3">
+          <History className="h-5 w-5 text-secondary-400" aria-hidden="true" />
+          <h2 className="text-base font-semibold text-secondary-900">
+            {t('backup.historyTitle', 'Backup-Historie')}
+          </h2>
+        </div>
+
+        {isLoading ? (
+          <div className="py-6 text-center text-sm text-secondary-500">
+            {t('common.loading', 'Laden...')}
+          </div>
+        ) : history.length === 0 ? (
+          <div className="py-6 text-center text-sm text-secondary-500">
+            {t('backup.historyEmpty', 'Noch keine Backup-Historie vorhanden.')}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full" data-testid="backup-history-table">
+              <thead>
+                <tr className="border-b border-secondary-200">
+                  <th className="text-left text-sm font-medium text-secondary-500 px-3 py-2">
+                    {t('backup.historyDate', 'Datum')}
+                  </th>
+                  <th className="text-center text-sm font-medium text-secondary-500 px-3 py-2">
+                    {t('backup.historyStatus', 'Status')}
+                  </th>
+                  <th className="text-left text-sm font-medium text-secondary-500 px-3 py-2">
+                    {t('backup.historyDestination', 'Ziel')}
+                  </th>
+                  <th className="text-left text-sm font-medium text-secondary-500 px-3 py-2">
+                    {t('backup.historyError', 'Fehler')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-secondary-100">
+                {history.map((entry: BackupHistoryEntry) => (
+                  <tr key={entry.id} className="hover:bg-secondary-50 transition-colors">
+                    <td className="px-3 py-2">
+                      <span className="text-sm text-secondary-900">{formatDate(entry.timestamp)}</span>
+                    </td>
+                    <td className="px-3 py-2 text-center">
+                      <StatusBadge status={entry.success ? 'completed' : 'failed'} />
+                    </td>
+                    <td className="px-3 py-2">
+                      <span className="text-sm text-secondary-700">{entry.destination}</span>
+                    </td>
+                    <td className="px-3 py-2 max-w-xs">
+                      <span className="text-sm text-secondary-500 truncate block">
+                        {entry.error || '—'}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
+
 // ─── SettingsBackup Page ─────────────────────────────────────────────────────
 
 export function SettingsBackupPage() {
@@ -355,6 +647,9 @@ export function SettingsBackupPage() {
         </div>
       )}
 
+      {/* Backup Config Section */}
+      <BackupConfigSection />
+
       {/* Backups list */}
       <Card>
         {isLoading ? (
@@ -446,7 +741,7 @@ export function SettingsBackupPage() {
                             'min-h-touch min-w-touch',
                             backup.status === 'completed'
                               ? 'text-secondary-400 hover:text-primary-600 hover:bg-primary-50'
-                              : 'text-secondary-300 cursor-not-allowed'
+                              : 'text-secondary-300 cursor-not-allowed',
                           )}
                           aria-label={t('backup.restoreLabel', 'Backup wiederherstellen')}
                           data-testid={`backup-restore-btn-${backup.id}`}
@@ -460,7 +755,7 @@ export function SettingsBackupPage() {
                             'inline-flex items-center justify-center rounded-md p-1.5',
                             'text-secondary-400 hover:text-danger-600 hover:bg-danger-50',
                             'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-danger-500',
-                            'min-h-touch min-w-touch'
+                            'min-h-touch min-w-touch',
                           )}
                           aria-label={t('backup.deleteLabel', 'Backup löschen')}
                           data-testid={`backup-delete-btn-${backup.id}`}
@@ -477,6 +772,9 @@ export function SettingsBackupPage() {
         )}
       </Card>
 
+      {/* Backup History Section */}
+      <BackupHistorySection />
+
       {/* Restore Modal */}
       <RestoreModal
         open={showRestoreModal}