e2bf245e86
✅ Resolved: - Removed unused imports (Database, BarChart3, Filter, etc.) - Fixed TypeScript 'any' types to proper types - Removed unused variables and parameters - Cleaned up import statements 🎯 Results: - ESLint errors: 0 ❌ → ✅ - Only 2 non-critical warnings remain (img vs Image) - Code is now production-ready for CI/CD 📊 Performance: - Type safety improved - Bundle size optimized through tree-shaking - Better developer experience
578 lines
22 KiB
TypeScript
578 lines
22 KiB
TypeScript
"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: unknown, bValue: unknown;
|
|
|
|
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>
|
|
);
|
|
}
|