feat: Add database backup export and import as ZIP in admin settings
All checks were successful
Staging Build / build (push) Successful in 2m39s

This commit is contained in:
DanielS
2026-06-25 15:18:41 +02:00
parent 47928fad3f
commit d3df9998f0
4 changed files with 403 additions and 2 deletions

View File

@@ -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>
);
}

View File

@@ -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 });
}
}

50
shop/package-lock.json generated
View File

@@ -20,6 +20,7 @@
"@supabase/ssr": "latest",
"@supabase/supabase-js": "latest",
"@types/nodemailer": "^8.0.1",
"adm-zip": "^0.5.17",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion": "^12.38.0",
@@ -37,7 +38,9 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/adm-zip": "^0.5.8",
"@types/node": "^20",
"@types/pg": "^8.20.0",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.20",
@@ -3116,6 +3119,7 @@
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.105.1.tgz",
"integrity": "sha512-4gn6HmsAkCCVU7p8JmgKGhHJ5Btod4ZzSp8qKZf4JHaTxbhaIK86/usHzeLxWv7EJJDhBmILDmJOSOf9iF4CLA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@supabase/auth-js": "2.105.1",
"@supabase/functions-js": "2.105.1",
@@ -3147,6 +3151,16 @@
"tslib": "^2.4.0"
}
},
"node_modules/@types/adm-zip": {
"version": "0.5.8",
"resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.8.tgz",
"integrity": "sha512-RVVH7QvZYbN+ihqZ4kX/dMiowf6o+Jk1fNwiSdx0NahBJLU787zkULhGhJM8mf/obmLGmgdMM0bXsQTmyfbR7Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/estree": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3186,12 +3200,25 @@
"@types/node": "*"
}
},
"node_modules/@types/pg": {
"version": "8.20.0",
"resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.20.0.tgz",
"integrity": "sha512-bEPFOaMAHTEP1EzpvHTbmwR8UsFyHSKsRisLIHVMXnpNefSbGA1bD6CVy+qKjGSqmZqNqBDV2azOBo8TgkcVow==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/node": "*",
"pg-protocol": "*",
"pg-types": "^2.2.0"
}
},
"node_modules/@types/react": {
"version": "19.2.14",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.2.2"
}
@@ -3202,6 +3229,7 @@
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "^19.2.0"
}
@@ -3260,6 +3288,7 @@
"integrity": "sha512-HDQH9O/47Dxi1ceDhBXdaldtf/WV9yRYMjbjCuNk3qnaTD564qwv61Y7+gTxwxRKzSrgO5uhtw584igXVuuZkA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "8.59.1",
"@typescript-eslint/types": "8.59.1",
@@ -3778,6 +3807,7 @@
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -3795,6 +3825,15 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
"node_modules/adm-zip": {
"version": "0.5.17",
"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.17.tgz",
"integrity": "sha512-+Ut8d9LLqwEvHHJl1+PIHqoyDxFgVN847JTVM3Izi3xHDWPE4UtzzXysMZQs64DMcrJfBeS/uoEP4AD3HQHnQQ==",
"license": "MIT",
"engines": {
"node": ">=12.0"
}
},
"node_modules/ajv": {
"version": "6.15.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -4258,6 +4297,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.10.12",
"caniuse-lite": "^1.0.30001782",
@@ -4971,6 +5011,7 @@
"integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1",
@@ -5144,6 +5185,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9",
@@ -6436,6 +6478,7 @@
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"jiti": "bin/jiti.js"
}
@@ -7192,6 +7235,7 @@
"resolved": "https://registry.npmjs.org/pg/-/pg-8.22.0.tgz",
"integrity": "sha512-8wih1vVIBMxoUM2oB4soJsD9tDnDpLv4OXBJ+EJzFsvycD+lfyIreC2gGHq78f8jbLLt+bvlPTFdFZfJkOuzAA==",
"license": "MIT",
"peer": true,
"dependencies": {
"pg-connection-string": "^2.14.0",
"pg-pool": "^3.14.0",
@@ -7353,6 +7397,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -7763,6 +7808,7 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
"integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -7772,6 +7818,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
"integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.27.0"
},
@@ -7784,6 +7831,7 @@
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.74.0.tgz",
"integrity": "sha512-yR6wHr99p9wFv686jhRWVSFhUvDvNbdUf2dKlbno8/VKOCuoNobDGC6S+M2dua9A9Yo8vpcrp8assIYbsZCQ9g==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=18.0.0"
},
@@ -8760,6 +8808,7 @@
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@@ -8916,6 +8965,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"

View File

@@ -22,6 +22,7 @@
"@supabase/ssr": "latest",
"@supabase/supabase-js": "latest",
"@types/nodemailer": "^8.0.1",
"adm-zip": "^0.5.17",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion": "^12.38.0",
@@ -39,7 +40,9 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/adm-zip": "^0.5.8",
"@types/node": "^20",
"@types/pg": "^8.20.0",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.20",