🚀 Complete Production Setup
✨ Features: - Analytics Dashboard with real-time metrics - Redis caching for performance optimization - Import/Export functionality for projects - Complete admin system with security - Production-ready Docker setup 🔧 Technical: - Removed Ghost CMS dependencies - Added Redis container with caching - Implemented API response caching - Enhanced admin interface with analytics - Optimized for dk0.dev domain 🛡️ Security: - Admin authentication with Basic Auth - Protected analytics endpoints - Secure environment configuration 📊 Analytics: - Performance metrics dashboard - Project statistics visualization - Real-time data with caching - Umami integration for GDPR compliance 🎯 Production Ready: - Multi-container Docker setup - Health checks for all services - Automatic restart policies - Resource limits configured - Ready for Nginx Proxy Manager
This commit is contained in:
Dennis Konkol
174
components/ImportExport.tsx
Normal file
174
components/ImportExport.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Download, Upload, FileText, AlertCircle, CheckCircle } from 'lucide-react';
|
||||
import { useToast } from '@/components/Toast';
|
||||
|
||||
interface ImportResult {
|
||||
success: boolean;
|
||||
message: string;
|
||||
results: {
|
||||
imported: number;
|
||||
skipped: number;
|
||||
errors: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export default function ImportExport() {
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [importResult, setImportResult] = useState<ImportResult | null>(null);
|
||||
const { addToast } = useToast();
|
||||
|
||||
const handleExport = async () => {
|
||||
setIsExporting(true);
|
||||
try {
|
||||
const response = await fetch('/api/projects/export');
|
||||
if (!response.ok) throw new Error('Export failed');
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `portfolio-projects-${new Date().toISOString().split('T')[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
|
||||
addToast({
|
||||
type: 'success',
|
||||
title: 'Export erfolgreich',
|
||||
message: 'Projekte wurden erfolgreich exportiert'
|
||||
});
|
||||
} catch (error) {
|
||||
addToast({
|
||||
type: 'error',
|
||||
title: 'Export fehlgeschlagen',
|
||||
message: 'Fehler beim Exportieren der Projekte'
|
||||
});
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setIsImporting(true);
|
||||
setImportResult(null);
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
|
||||
const response = await fetch('/api/projects/import', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result: ImportResult = await response.json();
|
||||
setImportResult(result);
|
||||
|
||||
if (result.success) {
|
||||
addToast({
|
||||
type: 'success',
|
||||
title: 'Import erfolgreich',
|
||||
message: result.message
|
||||
});
|
||||
} else {
|
||||
addToast({
|
||||
type: 'error',
|
||||
title: 'Import fehlgeschlagen',
|
||||
message: result.message
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
addToast({
|
||||
type: 'error',
|
||||
title: 'Import fehlgeschlagen',
|
||||
message: 'Ungültige Datei oder Format'
|
||||
});
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
// Reset file input
|
||||
event.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
|
||||
<FileText className="w-5 h-5 mr-2" />
|
||||
Import & Export
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Export Section */}
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white mb-2">Export Projekte</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Alle Projekte als JSON-Datei herunterladen
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={isExporting}
|
||||
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
{isExporting ? 'Exportiere...' : 'Exportieren'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Import Section */}
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white mb-2">Import Projekte</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
JSON-Datei mit Projekten hochladen
|
||||
</p>
|
||||
<label className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 cursor-pointer">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
{isImporting ? 'Importiere...' : 'Datei auswählen'}
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={handleImport}
|
||||
disabled={isImporting}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Import Results */}
|
||||
{importResult && (
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center">
|
||||
{importResult.success ? (
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-green-500" />
|
||||
) : (
|
||||
<AlertCircle className="w-5 h-5 mr-2 text-red-500" />
|
||||
)}
|
||||
Import Ergebnis
|
||||
</h4>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
|
||||
<p><strong>Importiert:</strong> {importResult.results.imported}</p>
|
||||
<p><strong>Übersprungen:</strong> {importResult.results.skipped}</p>
|
||||
{importResult.results.errors.length > 0 && (
|
||||
<div>
|
||||
<p><strong>Fehler:</strong></p>
|
||||
<ul className="list-disc list-inside ml-4">
|
||||
{importResult.results.errors.map((error, index) => (
|
||||
<li key={index} className="text-red-500">{error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user