Fix remaining merge conflicts and linter errors
- Remove merge conflict markers from AnalyticsDashboard.tsx - Fix merge conflicts in email/respond/route.tsx - Use dev versions of EmailManager and ModernAdminDashboard - Add eslint-disable for Image icon in editor
This commit is contained in:
@@ -319,8 +319,6 @@ const emailTemplates = {
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
},
|
||||
reply: {
|
||||
subject: "Antwort auf deine Nachricht 📧",
|
||||
@@ -419,11 +417,7 @@ export async function POST(request: NextRequest) {
|
||||
const body = (await request.json()) as {
|
||||
to: string;
|
||||
name: string;
|
||||
<<<<<<< HEAD
|
||||
template: 'welcome' | 'project' | 'quick';
|
||||
=======
|
||||
template: 'welcome' | 'project' | 'quick' | 'reply';
|
||||
>>>>>>> dev
|
||||
originalMessage: string;
|
||||
};
|
||||
|
||||
|
||||
@@ -567,6 +567,7 @@ function EditorPageContent() {
|
||||
className="p-2 rounded-lg text-gray-300"
|
||||
title="Image"
|
||||
>
|
||||
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
||||
<Image className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +66,6 @@ interface AnalyticsDashboardProps {
|
||||
export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps) {
|
||||
const [data, setData] = useState<AnalyticsData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
>>>>>>> dev
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | '1y'>('30d');
|
||||
const [showResetModal, setShowResetModal] = useState(false);
|
||||
|
||||
@@ -1,255 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
<<<<<<< HEAD
|
||||
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>
|
||||
);
|
||||
};
|
||||
=======
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
@@ -610,5 +361,4 @@ export const EmailManager: React.FC = () => {
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
>>>>>>> dev
|
||||
};
|
||||
@@ -1,22 +1,5 @@
|
||||
'use client';
|
||||
|
||||
<<<<<<< HEAD
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
BarChart3,
|
||||
Zap,
|
||||
Globe,
|
||||
Settings,
|
||||
FileText,
|
||||
TrendingUp,
|
||||
ArrowLeft,
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye
|
||||
=======
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
@@ -32,48 +15,11 @@ import {
|
||||
LogOut,
|
||||
Menu,
|
||||
X
|
||||
>>>>>>> dev
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { EmailManager } from './EmailManager';
|
||||
import { AnalyticsDashboard } from './AnalyticsDashboard';
|
||||
import ImportExport from './ImportExport';
|
||||
<<<<<<< HEAD
|
||||
|
||||
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: {
|
||||
=======
|
||||
import { ProjectManager } from './ProjectManager';
|
||||
|
||||
interface Project {
|
||||
@@ -92,197 +38,10 @@ interface Project {
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
analytics?: {
|
||||
>>>>>>> dev
|
||||
views: number;
|
||||
likes: number;
|
||||
shares: number;
|
||||
};
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
|
||||
const ModernAdminDashboard: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// 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) => {
|
||||
// TODO: Implement edit functionality
|
||||
console.log('Edit project:', project);
|
||||
};
|
||||
|
||||
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 = () => {
|
||||
// TODO: Implement form reset functionality
|
||||
console.log('Reset form');
|
||||
};
|
||||
|
||||
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' }
|
||||
];
|
||||
|
||||
|
||||
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 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
|
||||
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" />
|
||||
=======
|
||||
performance?: {
|
||||
lighthouse: number;
|
||||
};
|
||||
@@ -632,177 +391,11 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<p className="text-green-400 text-xs font-medium">All systems operational</p>
|
||||
>>>>>>> dev
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
{/* 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>
|
||||
=======
|
||||
{/* Recent Activity & Quick Actions - Mobile: vertical, Desktop: horizontal */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Recent Activity */}
|
||||
@@ -1003,15 +596,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
>>>>>>> dev
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
export default ModernAdminDashboard;
|
||||
=======
|
||||
export default ModernAdminDashboard;
|
||||
>>>>>>> dev
|
||||
export default ModernAdminDashboard;
|
||||
Reference in New Issue
Block a user