update
This commit is contained in:
@@ -1,577 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Database,
|
||||
Search,
|
||||
BarChart3,
|
||||
Download,
|
||||
Upload,
|
||||
Edit,
|
||||
Eye,
|
||||
Plus,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Star,
|
||||
Tag,
|
||||
FolderOpen,
|
||||
Calendar,
|
||||
Activity
|
||||
} from 'lucide-react';
|
||||
import { projectService } from '@/lib/prisma';
|
||||
import { useToast } from './Toast';
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
imageUrl?: string | null;
|
||||
github?: string | null;
|
||||
liveUrl?: string | null;
|
||||
tags: string[];
|
||||
category: string;
|
||||
difficulty: string;
|
||||
featured: boolean;
|
||||
published: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
_count?: {
|
||||
pageViews: number;
|
||||
userInteractions: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface AdminDashboardProps {
|
||||
onProjectSelect: (project: Project) => void;
|
||||
onNewProject: () => void;
|
||||
}
|
||||
|
||||
export default function AdminDashboard({ onProjectSelect, onNewProject }: AdminDashboardProps) {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('');
|
||||
const [sortBy, setSortBy] = useState<'date' | 'title' | 'difficulty' | 'views'>('date');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
||||
const [selectedProjects, setSelectedProjects] = useState<Set<number>>(new Set());
|
||||
const [showStats, setShowStats] = useState(false);
|
||||
const { showImportSuccess, showImportError, showError } = useToast();
|
||||
|
||||
// Load projects from database
|
||||
useEffect(() => {
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await projectService.getAllProjects();
|
||||
setProjects(data.projects);
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
// Fallback to localStorage if database fails
|
||||
const savedProjects = localStorage.getItem('portfolio-projects');
|
||||
if (savedProjects) {
|
||||
setProjects(JSON.parse(savedProjects));
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Filter and sort projects
|
||||
const filteredProjects = projects
|
||||
.filter(project => {
|
||||
const matchesSearch = project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
project.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
const matchesCategory = !selectedCategory || project.category === selectedCategory;
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
let aValue: string | number | Date, bValue: string | number | Date;
|
||||
|
||||
switch (sortBy) {
|
||||
case 'date':
|
||||
aValue = new Date(a.createdAt);
|
||||
bValue = new Date(b.createdAt);
|
||||
break;
|
||||
case 'title':
|
||||
aValue = a.title.toLowerCase();
|
||||
bValue = b.title.toLowerCase();
|
||||
break;
|
||||
case 'difficulty':
|
||||
const difficultyOrder = { 'Beginner': 1, 'Intermediate': 2, 'Advanced': 3, 'Expert': 4 };
|
||||
aValue = difficultyOrder[a.difficulty as keyof typeof difficultyOrder];
|
||||
bValue = difficultyOrder[b.difficulty as keyof typeof difficultyOrder];
|
||||
break;
|
||||
case 'views':
|
||||
aValue = a._count?.pageViews || 0;
|
||||
bValue = b._count?.pageViews || 0;
|
||||
break;
|
||||
default:
|
||||
aValue = a.createdAt;
|
||||
bValue = b.createdAt;
|
||||
}
|
||||
|
||||
if (sortOrder === 'asc') {
|
||||
return aValue > bValue ? 1 : -1;
|
||||
} else {
|
||||
return aValue < bValue ? 1 : -1;
|
||||
}
|
||||
});
|
||||
|
||||
// Statistics
|
||||
const stats = {
|
||||
total: projects.length,
|
||||
published: projects.filter(p => p.published).length,
|
||||
featured: projects.filter(p => p.featured).length,
|
||||
categories: new Set(projects.map(p => p.category)).size,
|
||||
totalViews: projects.reduce((sum, p) => sum + (p._count?.pageViews || 0), 0),
|
||||
totalLikes: projects.reduce((sum, p) => sum + (p._count?.userInteractions || 0), 0),
|
||||
avgLighthouse: 0
|
||||
};
|
||||
|
||||
// Bulk operations
|
||||
const handleBulkDelete = async () => {
|
||||
if (selectedProjects.size === 0) return;
|
||||
|
||||
if (confirm(`Are you sure you want to delete ${selectedProjects.size} projects?`)) {
|
||||
try {
|
||||
for (const id of selectedProjects) {
|
||||
await projectService.deleteProject(id);
|
||||
}
|
||||
setSelectedProjects(new Set());
|
||||
await loadProjects();
|
||||
showImportSuccess(selectedProjects.size); // Reuse for success message
|
||||
} catch (error) {
|
||||
console.error('Error deleting projects:', error);
|
||||
showError('Fehler beim Löschen', 'Einige Projekte konnten nicht gelöscht werden.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkPublish = async (published: boolean) => {
|
||||
if (selectedProjects.size === 0) return;
|
||||
|
||||
try {
|
||||
for (const id of selectedProjects) {
|
||||
await projectService.updateProject(id, { published });
|
||||
}
|
||||
setSelectedProjects(new Set());
|
||||
await loadProjects();
|
||||
showImportSuccess(selectedProjects.size); // Reuse for success message
|
||||
} catch (error) {
|
||||
console.error('Error updating projects:', error);
|
||||
showError('Fehler beim Aktualisieren', 'Einige Projekte konnten nicht aktualisiert werden.');
|
||||
}
|
||||
};
|
||||
|
||||
// Export/Import
|
||||
const exportProjects = () => {
|
||||
const dataStr = JSON.stringify(projects, null, 2);
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `portfolio-projects-${new Date().toISOString().split('T')[0]}.json`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const importProjects = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (e) => {
|
||||
try {
|
||||
const importedProjects = JSON.parse(e.target?.result as string);
|
||||
// Validate and import projects
|
||||
let importedCount = 0;
|
||||
for (const project of importedProjects) {
|
||||
if (project.id) delete project.id; // Remove ID for new import
|
||||
await projectService.createProject(project);
|
||||
importedCount++;
|
||||
}
|
||||
await loadProjects();
|
||||
showImportSuccess(importedCount);
|
||||
} catch (error) {
|
||||
console.error('Error importing projects:', error);
|
||||
showImportError('Bitte überprüfe das Dateiformat und versuche es erneut.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
const categories = Array.from(new Set(projects.map(p => p.category)));
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header with Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="glass-card p-6 rounded-2xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-white flex items-center">
|
||||
<Database className="mr-3 text-blue-400" />
|
||||
Project Database
|
||||
</h2>
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
onClick={() => setShowStats(!showStats)}
|
||||
className={`px-4 py-2 rounded-lg transition-colors flex items-center space-x-2 ${
|
||||
showStats ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<BarChart3 size={20} />
|
||||
<span>Stats</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={exportProjects}
|
||||
className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<Download size={20} />
|
||||
<span>Export</span>
|
||||
</button>
|
||||
<label className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors flex items-center space-x-2 cursor-pointer">
|
||||
<Upload size={20} />
|
||||
<span>Import</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".json"
|
||||
onChange={importProjects}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-gradient-to-br from-blue-500/20 to-blue-600/20 p-4 rounded-xl border border-blue-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-blue-300">Total Projects</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.total}</p>
|
||||
</div>
|
||||
<FolderOpen className="text-blue-400" size={24} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-green-500/20 to-green-600/20 p-4 rounded-xl border border-green-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-green-300">Published</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.published}</p>
|
||||
</div>
|
||||
<Eye className="text-green-400" size={24} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 p-4 rounded-xl border border-yellow-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-yellow-300">Featured</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.featured}</p>
|
||||
</div>
|
||||
<Star className="text-yellow-400" size={24} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-purple-500/20 to-purple-600/20 p-4 rounded-xl border border-purple-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-purple-300">Categories</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.categories}</p>
|
||||
</div>
|
||||
<Tag className="text-purple-400" size={24} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Extended Stats */}
|
||||
{showStats && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"
|
||||
>
|
||||
<div className="bg-gradient-to-br from-indigo-500/20 to-indigo-600/20 p-4 rounded-xl border border-indigo-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-indigo-300">Total Views</p>
|
||||
<p className="text-xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
|
||||
</div>
|
||||
<TrendingUp className="text-indigo-400" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-pink-500/20 to-pink-600/20 p-4 rounded-xl border border-pink-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-pink-300">Total Likes</p>
|
||||
<p className="text-xl font-bold text-white">{stats.totalLikes.toLocaleString()}</p>
|
||||
</div>
|
||||
<Users className="text-pink-400" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-orange-500/20 to-orange-600/20 p-4 rounded-xl border border-orange-500/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-orange-300">Avg Lighthouse</p>
|
||||
<p className="text-xl font-bold text-white">{stats.avgLighthouse}/100</p>
|
||||
</div>
|
||||
<Activity className="text-orange-400" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Controls */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="glass-card p-6 rounded-2xl"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search projects..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div>
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">All Categories</option>
|
||||
{categories.map(cat => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Sort By */}
|
||||
<div>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as 'date' | 'title' | 'difficulty' | 'views')}
|
||||
className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="date">Sort by Date</option>
|
||||
<option value="title">Sort by Title</option>
|
||||
<option value="difficulty">Sort by Difficulty</option>
|
||||
<option value="views">Sort by Views</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Sort Order */}
|
||||
<div>
|
||||
<select
|
||||
value={sortOrder}
|
||||
onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')}
|
||||
className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="desc">Descending</option>
|
||||
<option value="asc">Ascending</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk Actions */}
|
||||
{selectedProjects.size > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex items-center space-x-4 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg"
|
||||
>
|
||||
<span className="text-blue-300 font-medium">
|
||||
{selectedProjects.size} project(s) selected
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleBulkPublish(true)}
|
||||
className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-sm transition-colors"
|
||||
>
|
||||
Publish All
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleBulkPublish(false)}
|
||||
className="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 text-white rounded text-sm transition-colors"
|
||||
>
|
||||
Unpublish All
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBulkDelete}
|
||||
className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm transition-colors"
|
||||
>
|
||||
Delete All
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedProjects(new Set())}
|
||||
className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm transition-colors"
|
||||
>
|
||||
Clear Selection
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Projects List */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="glass-card p-6 rounded-2xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-bold text-white">
|
||||
Projects ({filteredProjects.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onNewProject}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<Plus size={20} />
|
||||
<span>New Project</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{filteredProjects.map((project) => (
|
||||
<motion.div
|
||||
key={project.id}
|
||||
layout
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
className={`p-4 rounded-lg cursor-pointer transition-all border ${
|
||||
selectedProjects.has(project.id)
|
||||
? 'bg-blue-600/20 border-blue-500/50'
|
||||
: 'bg-gray-800/30 hover:bg-gray-700/30 border-gray-700/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4 flex-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedProjects.has(project.id)}
|
||||
onChange={(e) => {
|
||||
const newSelected = new Set(selectedProjects);
|
||||
if (e.target.checked) {
|
||||
newSelected.add(project.id);
|
||||
} else {
|
||||
newSelected.delete(project.id);
|
||||
}
|
||||
setSelectedProjects(newSelected);
|
||||
}}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-800 border-gray-700 rounded focus:ring-blue-500 focus:ring-2"
|
||||
/>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<h4 className="font-medium text-white">{project.title}</h4>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
project.difficulty === 'Beginner' ? 'bg-green-500/20 text-green-400' :
|
||||
project.difficulty === 'Intermediate' ? 'bg-yellow-500/20 text-yellow-400' :
|
||||
project.difficulty === 'Advanced' ? 'bg-orange-500/20 text-orange-400' :
|
||||
'bg-red-500/20 text-red-400'
|
||||
}`}>
|
||||
{project.difficulty}
|
||||
</span>
|
||||
{project.featured && (
|
||||
<span className="px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded text-xs font-medium">
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
{project.published ? (
|
||||
<span className="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs font-medium">
|
||||
Published
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 bg-gray-500/20 text-gray-400 rounded text-xs font-medium">
|
||||
Draft
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-400 mb-2">{project.description}</p>
|
||||
|
||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<span className="flex items-center">
|
||||
<Tag className="mr-1" size={14} />
|
||||
{project.category}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<Calendar className="mr-1" size={14} />
|
||||
{new Date(project.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<Eye className="mr-1" size={14} />
|
||||
{project._count?.pageViews || 0} views
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<Activity className="mr-1" size={14} />
|
||||
N/A
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => onProjectSelect(project)}
|
||||
className="p-2 text-gray-400 hover:text-blue-400 transition-colors"
|
||||
title="Edit Project"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.open(`/projects/${project.id}`, '_blank')}
|
||||
className="p-2 text-gray-400 hover:text-green-400 transition-colors"
|
||||
title="View Project"
|
||||
>
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredProjects.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<FolderOpen className="mx-auto mb-4" size={48} />
|
||||
<p className="text-lg font-medium">No projects found</p>
|
||||
<p className="text-sm">Try adjusting your search or filters</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
250
components/EmailManager.tsx
Normal file
250
components/EmailManager.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { EmailResponder } from './EmailResponder';
|
||||
|
||||
interface ContactMessage {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
subject: string;
|
||||
message: string;
|
||||
timestamp: string;
|
||||
responded: boolean;
|
||||
}
|
||||
|
||||
export const EmailManager: React.FC = () => {
|
||||
const [messages, setMessages] = useState<ContactMessage[]>([]);
|
||||
const [selectedMessage, setSelectedMessage] = useState<ContactMessage | null>(null);
|
||||
const [showResponder, setShowResponder] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<'all' | 'unread' | 'responded'>('all');
|
||||
|
||||
// Mock data for demonstration - in real app, fetch from API
|
||||
useEffect(() => {
|
||||
const mockMessages: ContactMessage[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Max Mustermann',
|
||||
email: 'max@example.com',
|
||||
subject: 'Projekt-Anfrage',
|
||||
message: 'Hallo Dennis,\n\nich interessiere mich für eine Zusammenarbeit an einem Web-Projekt. Können wir uns mal unterhalten?\n\nViele Grüße\nMax',
|
||||
timestamp: new Date().toISOString(),
|
||||
responded: false
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Anna Schmidt',
|
||||
email: 'anna@example.com',
|
||||
subject: 'Frage zu deinem Portfolio',
|
||||
message: 'Hi Dennis,\n\nsehr cooles Portfolio! Wie lange hast du an dem Design gearbeitet?\n\nLG Anna',
|
||||
timestamp: new Date(Date.now() - 86400000).toISOString(),
|
||||
responded: true
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Tom Weber',
|
||||
email: 'tom@example.com',
|
||||
subject: 'Job-Anfrage',
|
||||
message: 'Hallo,\n\nwir suchen einen Full-Stack Developer. Bist du interessiert?\n\nTom',
|
||||
timestamp: new Date(Date.now() - 172800000).toISOString(),
|
||||
responded: false
|
||||
}
|
||||
];
|
||||
|
||||
setTimeout(() => {
|
||||
setMessages(mockMessages);
|
||||
setIsLoading(false);
|
||||
}, 1000);
|
||||
}, []);
|
||||
|
||||
const filteredMessages = messages.filter(message => {
|
||||
switch (filter) {
|
||||
case 'unread':
|
||||
return !message.responded;
|
||||
case 'responded':
|
||||
return message.responded;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
const handleRespond = (message: ContactMessage) => {
|
||||
setSelectedMessage(message);
|
||||
setShowResponder(true);
|
||||
};
|
||||
|
||||
const handleResponseSent = () => {
|
||||
if (selectedMessage) {
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === selectedMessage.id
|
||||
? { ...msg, responded: true }
|
||||
: msg
|
||||
));
|
||||
}
|
||||
setShowResponder(false);
|
||||
setSelectedMessage(null);
|
||||
};
|
||||
|
||||
const formatDate = (timestamp: string) => {
|
||||
return new Date(timestamp).toLocaleString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const getMessagePreview = (message: string) => {
|
||||
return message.length > 100 ? message.substring(0, 100) + '...' : message;
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-xl shadow-sm border p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">📧 E-Mail Manager</h2>
|
||||
<p className="text-gray-600 mt-1">Verwalte Kontaktanfragen und sende schöne Antworten</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-sm text-gray-600">
|
||||
{filteredMessages.length} von {messages.length} Nachrichten
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white rounded-xl shadow-sm border p-4">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setFilter('all')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
filter === 'all'
|
||||
? 'bg-blue-100 text-blue-700 border border-blue-200'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
Alle ({messages.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('unread')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
filter === 'unread'
|
||||
? 'bg-red-100 text-red-700 border border-red-200'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
Ungelesen ({messages.filter(m => !m.responded).length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('responded')}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
filter === 'responded'
|
||||
? 'bg-green-100 text-green-700 border border-green-200'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
Beantwortet ({messages.filter(m => m.responded).length})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages List */}
|
||||
<div className="space-y-4">
|
||||
{filteredMessages.length === 0 ? (
|
||||
<div className="bg-white rounded-xl shadow-sm border p-12 text-center">
|
||||
<div className="text-6xl mb-4">📭</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">Keine Nachrichten</h3>
|
||||
<p className="text-gray-600">
|
||||
{filter === 'unread' && 'Alle Nachrichten wurden beantwortet!'}
|
||||
{filter === 'responded' && 'Noch keine Nachrichten beantwortet.'}
|
||||
{filter === 'all' && 'Noch keine Kontaktanfragen eingegangen.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredMessages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`bg-white rounded-xl shadow-sm border p-6 transition-all hover:shadow-md ${
|
||||
!message.responded ? 'border-l-4 border-l-red-500' : 'border-l-4 border-l-green-500'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
message.responded ? 'bg-green-500' : 'bg-red-500'
|
||||
}`}></div>
|
||||
<h3 className="font-semibold text-gray-900">{message.name}</h3>
|
||||
<span className="text-sm text-gray-500">{message.email}</span>
|
||||
{!message.responded && (
|
||||
<span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full font-medium">
|
||||
Neu
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h4 className="font-medium text-gray-800 mb-2">{message.subject}</h4>
|
||||
|
||||
<p className="text-gray-600 text-sm mb-3 whitespace-pre-wrap">
|
||||
{getMessagePreview(message.message)}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span>📅 {formatDate(message.timestamp)}</span>
|
||||
{message.responded && (
|
||||
<span className="text-green-600 font-medium">✅ Beantwortet</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 ml-4">
|
||||
{!message.responded && (
|
||||
<button
|
||||
onClick={() => handleRespond(message)}
|
||||
className="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all font-medium text-sm flex items-center gap-2"
|
||||
>
|
||||
📧 Antworten
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedMessage(message);
|
||||
// Show full message modal
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium text-sm"
|
||||
>
|
||||
👁️ Ansehen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email Responder Modal */}
|
||||
{showResponder && selectedMessage && (
|
||||
<EmailResponder
|
||||
contactEmail={selectedMessage.email}
|
||||
contactName={selectedMessage.name}
|
||||
originalMessage={selectedMessage.message}
|
||||
onClose={handleResponseSent}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
234
components/EmailResponder.tsx
Normal file
234
components/EmailResponder.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Toast } from './Toast';
|
||||
|
||||
interface EmailResponderProps {
|
||||
contactEmail: string;
|
||||
contactName: string;
|
||||
originalMessage: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const EmailResponder: React.FC<EmailResponderProps> = ({
|
||||
contactEmail,
|
||||
contactName,
|
||||
originalMessage,
|
||||
onClose
|
||||
}) => {
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<'welcome' | 'project' | 'quick'>('welcome');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const [toastMessage, setToastMessage] = useState('');
|
||||
const [toastType, setToastType] = useState<'success' | 'error'>('success');
|
||||
|
||||
const templates = {
|
||||
welcome: {
|
||||
name: 'Willkommen',
|
||||
description: 'Freundliche Begrüßung mit Portfolio-Links',
|
||||
icon: '👋',
|
||||
color: 'from-green-500 to-emerald-600'
|
||||
},
|
||||
project: {
|
||||
name: 'Projekt-Anfrage',
|
||||
description: 'Professionelle Antwort für Projekt-Diskussionen',
|
||||
icon: '🚀',
|
||||
color: 'from-purple-500 to-violet-600'
|
||||
},
|
||||
quick: {
|
||||
name: 'Schnelle Antwort',
|
||||
description: 'Kurze, schnelle Bestätigung',
|
||||
icon: '⚡',
|
||||
color: 'from-amber-500 to-orange-600'
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendEmail = async () => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/email/respond', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
to: contactEmail,
|
||||
name: contactName,
|
||||
template: selectedTemplate,
|
||||
originalMessage: originalMessage
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setToastMessage(`✅ ${data.message}`);
|
||||
setToastType('success');
|
||||
setShowToast(true);
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 2000);
|
||||
} else {
|
||||
setToastMessage(`❌ ${data.error}`);
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
}
|
||||
} catch (error) {
|
||||
setToastMessage('❌ Fehler beim Senden der E-Mail');
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2>
|
||||
<p className="text-blue-100 mt-1">Wähle ein schönes Template für deine Antwort</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white hover:text-gray-200 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="bg-gray-50 rounded-xl p-4 mb-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-sm text-gray-600">Name:</span>
|
||||
<p className="font-medium text-gray-900">{contactName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm text-gray-600">E-Mail:</span>
|
||||
<p className="font-medium text-gray-900">{contactEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Original Message Preview */}
|
||||
<div className="bg-blue-50 rounded-xl p-4 mb-6">
|
||||
<h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3>
|
||||
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500">
|
||||
<p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Template Selection */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-4">🎨 Template auswählen</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{Object.entries(templates).map(([key, template]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${
|
||||
selectedTemplate === key
|
||||
? 'border-blue-500 bg-blue-50 shadow-lg scale-105'
|
||||
: 'border-gray-200 hover:border-gray-300 hover:shadow-md'
|
||||
}`}
|
||||
onClick={() => setSelectedTemplate(key as any)}
|
||||
>
|
||||
<div className={`bg-gradient-to-r ${template.color} text-white p-4 rounded-t-xl`}>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">{template.icon}</div>
|
||||
<h4 className="font-bold text-lg">{template.name}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 text-center">{template.description}</p>
|
||||
</div>
|
||||
{selectedTemplate === key && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="mb-6">
|
||||
<h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3>
|
||||
<div className="bg-gray-100 rounded-xl p-4">
|
||||
<div className="bg-white rounded-lg shadow-sm border">
|
||||
<div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}>
|
||||
<h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
|
||||
<p className="text-sm opacity-90">An: {contactName}</p>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'}
|
||||
{selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'}
|
||||
{selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSendEmail}
|
||||
disabled={isLoading}
|
||||
className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Sende...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
📧 E-Mail senden
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toast */}
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
type={toastType}
|
||||
onClose={() => setShowToast(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
545
components/ModernAdminDashboard.tsx
Normal file
545
components/ModernAdminDashboard.tsx
Normal file
@@ -0,0 +1,545 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
Users,
|
||||
BarChart3,
|
||||
Database,
|
||||
Zap,
|
||||
Globe,
|
||||
Shield,
|
||||
Bell,
|
||||
Settings,
|
||||
FileText,
|
||||
TrendingUp,
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
Save,
|
||||
Upload,
|
||||
Bold,
|
||||
Italic,
|
||||
List,
|
||||
Link as LinkIcon,
|
||||
Image as ImageIcon,
|
||||
Code,
|
||||
Quote,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Palette,
|
||||
Smile
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { EmailManager } from './EmailManager';
|
||||
import { AnalyticsDashboard } from './AnalyticsDashboard';
|
||||
import ImportExport from './ImportExport';
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
tags: string[];
|
||||
featured: boolean;
|
||||
category: string;
|
||||
date: string;
|
||||
github?: string;
|
||||
live?: string;
|
||||
published: boolean;
|
||||
imageUrl?: string;
|
||||
metaDescription?: string;
|
||||
keywords?: string;
|
||||
ogImage?: string;
|
||||
schema?: Record<string, unknown>;
|
||||
difficulty: 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert';
|
||||
timeToComplete?: string;
|
||||
technologies: string[];
|
||||
challenges: string[];
|
||||
lessonsLearned: string[];
|
||||
futureImprovements: string[];
|
||||
demoVideo?: string;
|
||||
screenshots: string[];
|
||||
colorScheme: string;
|
||||
accessibility: boolean;
|
||||
performance: {
|
||||
lighthouse: number;
|
||||
bundleSize: string;
|
||||
loadTime: string;
|
||||
};
|
||||
analytics: {
|
||||
views: number;
|
||||
likes: number;
|
||||
shares: number;
|
||||
};
|
||||
}
|
||||
|
||||
const ModernAdminDashboard: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [showProjectEditor, setShowProjectEditor] = useState(false);
|
||||
const [isPreview, setIsPreview] = useState(false);
|
||||
const [markdownContent, setMarkdownContent] = useState('');
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
content: '',
|
||||
tags: '',
|
||||
category: '',
|
||||
featured: false,
|
||||
github: '',
|
||||
live: '',
|
||||
published: true,
|
||||
imageUrl: '',
|
||||
difficulty: 'Intermediate' as 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert',
|
||||
timeToComplete: '',
|
||||
technologies: '',
|
||||
challenges: '',
|
||||
lessonsLearned: '',
|
||||
futureImprovements: '',
|
||||
demoVideo: '',
|
||||
screenshots: '',
|
||||
colorScheme: 'Dark',
|
||||
accessibility: true,
|
||||
performance: {
|
||||
lighthouse: 90,
|
||||
bundleSize: '50KB',
|
||||
loadTime: '1.5s'
|
||||
},
|
||||
analytics: {
|
||||
views: 0,
|
||||
likes: 0,
|
||||
shares: 0
|
||||
}
|
||||
});
|
||||
|
||||
// Mock stats for overview
|
||||
const stats = {
|
||||
totalProjects: projects.length,
|
||||
publishedProjects: projects.filter(p => p.published).length,
|
||||
totalViews: projects.reduce((sum, p) => sum + p.analytics.views, 0),
|
||||
unreadEmails: 3, // This would come from your email API
|
||||
avgPerformance: Math.round(projects.reduce((sum, p) => sum + p.performance.lighthouse, 0) / projects.length) || 90
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadProjects();
|
||||
}, []);
|
||||
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await fetch('/api/projects');
|
||||
const data = await response.json();
|
||||
setProjects(data.projects || []);
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (project: Project) => {
|
||||
setSelectedProject(project);
|
||||
setFormData({
|
||||
title: project.title,
|
||||
description: project.description,
|
||||
content: project.content,
|
||||
tags: project.tags.join(', '),
|
||||
category: project.category,
|
||||
featured: project.featured,
|
||||
github: project.github || '',
|
||||
live: project.live || '',
|
||||
published: project.published,
|
||||
imageUrl: project.imageUrl || '',
|
||||
difficulty: project.difficulty,
|
||||
timeToComplete: project.timeToComplete || '',
|
||||
technologies: project.technologies.join(', '),
|
||||
challenges: project.challenges.join(', '),
|
||||
lessonsLearned: project.lessonsLearned.join(', '),
|
||||
futureImprovements: project.futureImprovements.join(', '),
|
||||
demoVideo: project.demoVideo || '',
|
||||
screenshots: project.screenshots.join(', '),
|
||||
colorScheme: project.colorScheme,
|
||||
accessibility: project.accessibility,
|
||||
performance: project.performance,
|
||||
analytics: project.analytics
|
||||
});
|
||||
setMarkdownContent(project.content);
|
||||
setShowProjectEditor(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
// Save logic here
|
||||
console.log('Saving project...');
|
||||
await loadProjects();
|
||||
setShowProjectEditor(false);
|
||||
setSelectedProject(null);
|
||||
};
|
||||
|
||||
const handleDelete = async (projectId: number) => {
|
||||
if (confirm('Are you sure you want to delete this project?')) {
|
||||
try {
|
||||
await fetch(`/api/projects/${projectId}`, { method: 'DELETE' });
|
||||
await loadProjects();
|
||||
} catch (error) {
|
||||
console.error('Error deleting project:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setSelectedProject(null);
|
||||
setFormData({
|
||||
title: '',
|
||||
description: '',
|
||||
content: '',
|
||||
tags: '',
|
||||
category: '',
|
||||
featured: false,
|
||||
github: '',
|
||||
live: '',
|
||||
published: true,
|
||||
imageUrl: '',
|
||||
difficulty: 'Intermediate' as 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert',
|
||||
timeToComplete: '',
|
||||
technologies: '',
|
||||
challenges: '',
|
||||
lessonsLearned: '',
|
||||
futureImprovements: '',
|
||||
demoVideo: '',
|
||||
screenshots: '',
|
||||
colorScheme: 'Dark',
|
||||
accessibility: true,
|
||||
performance: {
|
||||
lighthouse: 90,
|
||||
bundleSize: '50KB',
|
||||
loadTime: '1.5s'
|
||||
},
|
||||
analytics: {
|
||||
views: 0,
|
||||
likes: 0,
|
||||
shares: 0
|
||||
}
|
||||
});
|
||||
setMarkdownContent('');
|
||||
setShowProjectEditor(false);
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ id: 'overview', label: 'Overview', icon: BarChart3, color: 'blue' },
|
||||
{ id: 'projects', label: 'Projects', icon: FileText, color: 'green' },
|
||||
{ id: 'emails', label: 'Emails', icon: Mail, color: 'purple' },
|
||||
{ id: 'analytics', label: 'Analytics', icon: TrendingUp, color: 'orange' },
|
||||
{ id: 'settings', label: 'Settings', icon: Settings, color: 'gray' }
|
||||
];
|
||||
|
||||
const categories = [
|
||||
"Web Development", "Full-Stack", "Web Application", "Mobile App",
|
||||
"Desktop App", "API Development", "Database Design", "DevOps",
|
||||
"UI/UX Design", "Game Development", "Machine Learning", "Data Science",
|
||||
"Blockchain", "IoT", "Cybersecurity"
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||
{/* Header */}
|
||||
<div className="bg-white/5 backdrop-blur-md border-b border-white/10 sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center space-x-2 text-white/80 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>Back to Portfolio</span>
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-white/20" />
|
||||
<h1 className="text-xl font-bold text-white">Admin Dashboard</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2 text-sm text-white/60">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||
<span>Live</span>
|
||||
</div>
|
||||
<div className="text-sm text-white/60 font-mono">
|
||||
dk<span className="text-red-500">0</span>.dev
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<nav className="space-y-2">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as any)}
|
||||
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all duration-200 ${
|
||||
activeTab === tab.id
|
||||
? `bg-${tab.color}-500/20 text-${tab.color}-400 border border-${tab.color}-500/30`
|
||||
: 'text-white/60 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<Icon size={20} />
|
||||
<span className="font-medium">{tab.label}</span>
|
||||
{tab.id === 'emails' && stats.unreadEmails > 0 && (
|
||||
<span className="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">
|
||||
{stats.unreadEmails}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-3">
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === 'overview' && (
|
||||
<motion.div
|
||||
key="overview"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Total Projects</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.totalProjects}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
|
||||
<FileText className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Published</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.publishedProjects}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
||||
<Globe className="w-6 h-6 text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Total Views</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
|
||||
<Eye className="w-6 h-6 text-purple-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-white/60 text-sm">Avg Performance</p>
|
||||
<p className="text-2xl font-bold text-white">{stats.avgPerformance}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-orange-500/20 rounded-xl flex items-center justify-center">
|
||||
<Zap className="w-6 h-6 text-orange-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Projects */}
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-white">Recent Projects</h2>
|
||||
<button
|
||||
onClick={() => setActiveTab('projects')}
|
||||
className="text-blue-400 hover:text-blue-300 text-sm font-medium"
|
||||
>
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{projects.slice(0, 3).map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="flex items-center space-x-4 p-4 bg-white/5 rounded-xl border border-white/10 hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">
|
||||
{project.title.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-white">{project.title}</h3>
|
||||
<p className="text-white/60 text-sm">{project.category}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
project.published
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'bg-gray-500/20 text-gray-400'
|
||||
}`}>
|
||||
{project.published ? 'Published' : 'Draft'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleEdit(project)}
|
||||
className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activeTab === 'projects' && (
|
||||
<motion.div
|
||||
key="projects"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-white">Projects</h2>
|
||||
<button
|
||||
onClick={resetForm}
|
||||
className="flex items-center space-x-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-colors"
|
||||
>
|
||||
<Plus size={20} />
|
||||
<span>New Project</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{projects.map((project) => (
|
||||
<div
|
||||
key={project.id}
|
||||
className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6 hover:bg-white/10 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">
|
||||
{project.title.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => handleEdit(project)}
|
||||
className="p-2 text-white/60 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
||||
>
|
||||
<Edit size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(project.id)}
|
||||
className="p-2 text-white/60 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold text-white mb-2">{project.title}</h3>
|
||||
<p className="text-white/60 text-sm mb-4 line-clamp-2">{project.description}</p>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">
|
||||
{project.category}
|
||||
</span>
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
project.published
|
||||
? 'bg-green-500/20 text-green-400'
|
||||
: 'bg-gray-500/20 text-gray-400'
|
||||
}`}>
|
||||
{project.published ? 'Published' : 'Draft'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activeTab === 'emails' && (
|
||||
<motion.div
|
||||
key="emails"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
>
|
||||
<EmailManager />
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activeTab === 'analytics' && (
|
||||
<motion.div
|
||||
key="analytics"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
>
|
||||
<AnalyticsDashboard />
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activeTab === 'settings' && (
|
||||
<motion.div
|
||||
key="settings"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-white">Settings</h2>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Import/Export</h3>
|
||||
<ImportExport />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModernAdminDashboard;
|
||||
Reference in New Issue
Block a user