feat: Add database backup export and import as ZIP in admin settings

shop/app/admin/einstellungen/page.tsx

@@ -1,11 +1,18 @@
-/* Admin Settings without Partner Management */
+/* Admin Settings with Database Import / Export functionality */
 'use client';
 
 import { useState, useEffect } from 'react';
 import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { Download, Upload, Database, AlertTriangle, Loader2 } from 'lucide-react';
 
 export default function AdminSettings() {
   const [demoActive, setDemoActive] = useState(true);
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [statusMsg, setStatusMsg] = useState('');
+  const [statusType, setStatusType] = useState<'success' | 'error' | 'info' | ''>('');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
   useEffect(() => {
     const state = localStorage.getItem('demo_banner_disabled') !== 'true';
@@ -18,6 +25,66 @@ export default function AdminSettings() {
     window.dispatchEvent(new Event('storage_demo_changed'));
   };
 
+  const handleExport = async () => {
+    setExporting(true);
+    setStatusMsg('Export läuft...');
+    setStatusType('info');
+    try {
+      const res = await fetch('/api/admin/db-backup');
+      if (!res.ok) throw new Error('Export fehlgeschlagen');
+      
+      const blob = await res.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `webshop_backup_${new Date().toISOString().split('T')[0]}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(url);
+      setStatusMsg('Export erfolgreich abgeschlossen.');
+      setStatusType('success');
+    } catch (err: any) {
+      console.error(err);
+      setStatusMsg(`Fehler beim Export: ${err.message}`);
+      setStatusType('error');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleImport = async () => {
+    if (!selectedFile) return;
+    if (!confirm('ACHTUNG: Dies löscht und überschreibt alle aktuellen Datenbankinhalte in dieser Instanz. Möchten Sie wirklich fortfahren?')) {
+      return;
+    }
+    setImporting(true);
+    setStatusMsg('Import läuft...');
+    setStatusType('info');
+    try {
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+
+      const res = await fetch('/api/admin/db-backup', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Import fehlgeschlagen');
+
+      setStatusMsg('Datenbank erfolgreich importiert!');
+      setStatusType('success');
+      setSelectedFile(null);
+    } catch (err: any) {
+      console.error(err);
+      setStatusMsg(`Fehler beim Import: ${err.message}`);
+      setStatusType('error');
+    } finally {
+      setImporting(false);
+    }
+  };
+
   return (
     <div className="p-6 max-w-4xl mx-auto text-slate-900 dark:text-white space-y-8">
       {/* Page Header */}
@@ -30,7 +97,9 @@ export default function AdminSettings() {
 
       {/* Allgemeine Einstellungen */}
       <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm space-y-4">
-        <h2 className="text-lg font-bold">Allgemeine Einstellungen</h2>
+        <h2 className="text-lg font-bold flex items-center gap-2">
+          Allgemeine Einstellungen
+        </h2>
         <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-white/5 rounded-lg border border-slate-100 dark:border-white/5">
           <div>
             <p className="font-medium text-sm text-slate-900 dark:text-white">Demo-Warnmeldungen</p>
@@ -39,6 +108,103 @@ export default function AdminSettings() {
           <Switch checked={demoActive} onCheckedChange={toggleDemo} />
         </div>
       </div>
+
+      {/* Datenimport & -export */}
+      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm space-y-6">
+        <div>
+          <h2 className="text-lg font-bold flex items-center gap-2">
+            <Database className="w-5 h-5 text-primary" />
+            Datenimport & -export
+          </h2>
+          <p className="text-slate-500 dark:text-slate-400 text-xs mt-1">
+            Sichern Sie Ihre gesamte Instanz oder stellen Sie Daten wieder her.
+          </p>
+        </div>
+
+        {statusMsg && (
+          <div className={`p-4 rounded-lg text-sm border ${
+            statusType === 'success' ? 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400' :
+            statusType === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
+            'bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400'
+          }`}>
+            {statusMsg}
+          </div>
+        )}
+
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Export Card */}
+          <div className="p-5 bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-xl flex flex-col justify-between space-y-4">
+            <div className="space-y-2">
+              <h3 className="font-bold text-sm flex items-center gap-2 text-slate-800 dark:text-white">
+                <Download className="w-4 h-4 text-primary" />
+                Daten exportieren
+              </h3>
+              <p className="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
+                Lädt alle Kategorien, Produkte, Module, Firmen, Endkunden, Bestellungen und SMTP-Einstellungen als ZIP-Datei herunter.
+              </p>
+            </div>
+            <Button 
+              onClick={handleExport} 
+              disabled={exporting || importing}
+              className="w-full bg-primary hover:bg-primary/90 text-white"
+            >
+              {exporting ? (
+                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Export läuft...</>
+              ) : (
+                <><Download className="w-4 h-4 mr-2" /> ZIP-Backup herunterladen</>
+              )}
+            </Button>
+          </div>
+
+          {/* Import Card */}
+          <div className="p-5 bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 rounded-xl flex flex-col justify-between space-y-4">
+            <div className="space-y-2">
+              <h3 className="font-bold text-sm flex items-center gap-2 text-slate-800 dark:text-white">
+                <Upload className="w-4 h-4 text-amber-500" />
+                Daten importieren
+              </h3>
+              <div className="flex items-start gap-2 bg-amber-500/10 border border-amber-500/20 p-2.5 rounded-lg text-amber-600 dark:text-amber-400 text-[11px] leading-snug">
+                <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+                <span>
+                  <strong>Warnung:</strong> Der Import überschreibt alle Daten dieser Instanz unwiderruflich!
+                </span>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="relative border border-dashed border-slate-200 dark:border-white/10 rounded-lg p-3 hover:bg-slate-100/50 dark:hover:bg-white/5 transition">
+                <input 
+                  type="file" 
+                  accept=".zip" 
+                  onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+                  disabled={exporting || importing}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                />
+                <div className="text-center text-xs text-slate-500 dark:text-slate-400">
+                  {selectedFile ? (
+                    <span className="text-primary font-semibold">{selectedFile.name}</span>
+                  ) : (
+                    "ZIP-Datei auswählen oder hierher ziehen"
+                  )}
+                </div>
+              </div>
+
+              <Button 
+                onClick={handleImport} 
+                disabled={!selectedFile || exporting || importing}
+                variant="secondary"
+                className="w-full border border-slate-200 dark:border-white/10"
+              >
+                {importing ? (
+                  <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Import läuft...</>
+                ) : (
+                  <><Upload className="w-4 h-4 mr-2" /> ZIP-Backup einspielen</>
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

shop/app/api/admin/db-backup/route.ts

@@ -0,0 +1,182 @@
+import { NextResponse } from 'next/server';
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+import AdmZip from 'adm-zip';
+import { Client } from 'pg';
+
+function getPgClient() {
+  const connectionString = process.env.DATABASE_URL || 'postgresql://postgres:postgres@localhost:54322/postgres';
+  return new Client({
+    connectionString,
+    connectionTimeoutMillis: 10000,
+  });
+}
+
+async function verifyAdmin() {
+  const cookieStore = await cookies();
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
+  const supabase = createServerClient(
+    supabaseUrl,
+    process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          } catch {
+            // Ignored
+          }
+        },
+      },
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    }
+  );
+
+  const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
+  if (authError || !authUser) {
+    return { errorResponse: NextResponse.json({ error: 'Not authenticated' }, { status: 401 }) };
+  }
+  const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
+  if (!user || user.role !== 'admin') {
+    return { errorResponse: NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 }) };
+  }
+  return { success: true };
+}
+
+export async function GET() {
+  const { errorResponse } = await verifyAdmin();
+  if (errorResponse) return errorResponse;
+
+  const client = getPgClient();
+  await client.connect();
+
+  try {
+    const tables = [
+      'categories',
+      'products',
+      'product_modules',
+      'companies',
+      'end_customers',
+      'orders',
+      'profiles',
+      'users',
+      'settings'
+    ];
+
+    const backupData: Record<string, any[]> = {};
+
+    for (const table of tables) {
+      const res = await client.query(`SELECT * FROM public.${table}`);
+      backupData[table] = res.rows;
+    }
+
+    const zip = new AdmZip();
+    const dataStr = JSON.stringify(backupData, null, 2);
+    zip.addFile('db_backup.json', Buffer.from(dataStr, 'utf8'));
+    const buffer = zip.toBuffer();
+
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'application/zip',
+        'Content-Disposition': 'attachment; filename=db_backup.zip',
+      },
+    });
+  } catch (err: any) {
+    console.error('Backup export failed:', err);
+    return NextResponse.json({ error: err.message }, { status: 500 });
+  } finally {
+    await client.end();
+  }
+}
+
+export async function POST(request: Request) {
+  const { errorResponse } = await verifyAdmin();
+  if (errorResponse) return errorResponse;
+
+  try {
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+    if (!file) {
+      return NextResponse.json({ error: 'No file provided' }, { status: 400 });
+    }
+
+    const arrayBuffer = await file.arrayBuffer();
+    const zip = new AdmZip(Buffer.from(arrayBuffer));
+    const zipEntries = zip.getEntries();
+    const backupEntry = zipEntries.find(entry => entry.entryName === 'db_backup.json');
+    if (!backupEntry) {
+      return NextResponse.json({ error: 'Invalid backup file structure' }, { status: 400 });
+    }
+
+    const dataStr = backupEntry.getData().toString('utf8');
+    const backupData = JSON.parse(dataStr);
+
+    const client = getPgClient();
+    await client.connect();
+
+    try {
+      await client.query('BEGIN');
+      
+      // Disable constraints
+      await client.query("SET session_replication_role = 'replica'");
+
+      const tables = [
+        'categories',
+        'products',
+        'product_modules',
+        'companies',
+        'end_customers',
+        'orders',
+        'profiles',
+        'users',
+        'settings'
+      ];
+
+      // Delete existing rows in all tables
+      for (const table of tables) {
+        await client.query(`DELETE FROM public.${table}`);
+      }
+
+      // Insert backup data
+      for (const table of tables) {
+        const rows = backupData[table];
+        if (!rows || rows.length === 0) continue;
+
+        const columns = Object.keys(rows[0]);
+        const columnNamesStr = columns.map(c => `"${c}"`).join(', ');
+
+        for (const row of rows) {
+          const values = columns.map(col => row[col]);
+          const placeholders = columns.map((_, idx) => `$${idx + 1}`).join(', ');
+          
+          await client.query(
+            `INSERT INTO public.${table} (${columnNamesStr}) VALUES (${placeholders})`,
+            values
+          );
+        }
+      }
+
+      // Re-enable constraints
+      await client.query("SET session_replication_role = 'origin'");
+      await client.query('COMMIT');
+
+      return NextResponse.json({ message: 'Database imported successfully.' });
+    } catch (err: any) {
+      await client.query('ROLLBACK');
+      console.error('Backup import failed:', err);
+      return NextResponse.json({ error: err.message }, { status: 500 });
+    } finally {
+      await client.end();
+    }
+  } catch (err: any) {
+    console.error('Backup import request processing failed:', err);
+    return NextResponse.json({ error: err.message }, { status: 500 });
+  }
+}