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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
`
|
||||||
<<<<<<< HEAD
|
|
||||||
=======
|
|
||||||
},
|
},
|
||||||
reply: {
|
reply: {
|
||||||
subject: "Antwort auf deine Nachricht 📧",
|
subject: "Antwort auf deine Nachricht 📧",
|
||||||
@@ -419,11 +417,7 @@ export async function POST(request: NextRequest) {
|
|||||||
const body = (await request.json()) as {
|
const body = (await request.json()) as {
|
||||||
to: string;
|
to: string;
|
||||||
name: string;
|
name: string;
|
||||||
<<<<<<< HEAD
|
|
||||||
template: 'welcome' | 'project' | 'quick';
|
|
||||||
=======
|
|
||||||
template: 'welcome' | 'project' | 'quick' | 'reply';
|
template: 'welcome' | 'project' | 'quick' | 'reply';
|
||||||
>>>>>>> dev
|
|
||||||
originalMessage: string;
|
originalMessage: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -567,6 +567,7 @@ function EditorPageContent() {
|
|||||||
className="p-2 rounded-lg text-gray-300"
|
className="p-2 rounded-lg text-gray-300"
|
||||||
title="Image"
|
title="Image"
|
||||||
>
|
>
|
||||||
|
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
||||||
<Image className="w-4 h-4" />
|
<Image className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -66,7 +66,6 @@ interface AnalyticsDashboardProps {
|
|||||||
export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps) {
|
export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps) {
|
||||||
const [data, setData] = useState<AnalyticsData | null>(null);
|
const [data, setData] = useState<AnalyticsData | null>(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
>>>>>>> dev
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | '1y'>('30d');
|
const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | '1y'>('30d');
|
||||||
const [showResetModal, setShowResetModal] = useState(false);
|
const [showResetModal, setShowResetModal] = useState(false);
|
||||||
|
|||||||
@@ -1,255 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useState, useEffect } from 'react';
|
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 { motion, AnimatePresence } from 'framer-motion';
|
||||||
import {
|
import {
|
||||||
Mail,
|
Mail,
|
||||||
@@ -611,4 +362,3 @@ export const EmailManager: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
>>>>>>> dev
|
|
||||||
|
|||||||
@@ -1,22 +1,5 @@
|
|||||||
'use client';
|
'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 React, { useState, useEffect, useCallback } from 'react';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
import {
|
import {
|
||||||
@@ -32,48 +15,11 @@ import {
|
|||||||
LogOut,
|
LogOut,
|
||||||
Menu,
|
Menu,
|
||||||
X
|
X
|
||||||
>>>>>>> dev
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { EmailManager } from './EmailManager';
|
import { EmailManager } from './EmailManager';
|
||||||
import { AnalyticsDashboard } from './AnalyticsDashboard';
|
import { AnalyticsDashboard } from './AnalyticsDashboard';
|
||||||
import ImportExport from './ImportExport';
|
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';
|
import { ProjectManager } from './ProjectManager';
|
||||||
|
|
||||||
interface Project {
|
interface Project {
|
||||||
@@ -92,197 +38,10 @@ interface Project {
|
|||||||
createdAt: string;
|
createdAt: string;
|
||||||
updatedAt: string;
|
updatedAt: string;
|
||||||
analytics?: {
|
analytics?: {
|
||||||
>>>>>>> dev
|
|
||||||
views: number;
|
views: number;
|
||||||
likes: number;
|
likes: number;
|
||||||
shares: 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?: {
|
performance?: {
|
||||||
lighthouse: number;
|
lighthouse: number;
|
||||||
};
|
};
|
||||||
@@ -632,177 +391,11 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
|||||||
<div className="flex items-center space-x-1">
|
<div className="flex items-center space-x-1">
|
||||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
<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>
|
<p className="text-green-400 text-xs font-medium">All systems operational</p>
|
||||||
>>>>>>> dev
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* Recent Activity & Quick Actions - Mobile: vertical, Desktop: horizontal */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
{/* Recent Activity */}
|
{/* Recent Activity */}
|
||||||
@@ -1003,15 +596,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
|||||||
)}
|
)}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
>>>>>>> dev
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
export default ModernAdminDashboard;
|
export default ModernAdminDashboard;
|
||||||
=======
|
|
||||||
export default ModernAdminDashboard;
|
|
||||||
>>>>>>> dev
|
|
||||||
|
|||||||
Reference in New Issue
Block a user