denshooter
9072faae43
- Update Content Security Policy (CSP) in next.config.ts to avoid `unsafe-eval` in production, improving security against XSS attacks. - Refactor API routes to enforce admin authentication and session validation, ensuring secure access to sensitive endpoints. - Optimize analytics data retrieval by using database aggregation instead of loading all records into memory, improving performance and reducing memory usage. - Implement session token creation and verification for better session management and security across the application. - Enhance error handling and input validation in various API routes to ensure robustness and prevent potential issues.
673 lines
34 KiB
TypeScript
673 lines
34 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
Mail,
|
|
Settings,
|
|
TrendingUp,
|
|
Plus,
|
|
Shield,
|
|
Users,
|
|
Activity,
|
|
Database,
|
|
Home,
|
|
LogOut,
|
|
Menu,
|
|
X
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
const EmailManager = dynamic(
|
|
() => import('./EmailManager').then((m) => m.EmailManager),
|
|
{ ssr: false, loading: () => <div className="p-6 text-stone-500">Loading emails…</div> }
|
|
);
|
|
const AnalyticsDashboard = dynamic(
|
|
() => import('./AnalyticsDashboard').then((m) => m.default),
|
|
{ ssr: false, loading: () => <div className="p-6 text-stone-500">Loading analytics…</div> }
|
|
);
|
|
const ImportExport = dynamic(
|
|
() => import('./ImportExport').then((m) => m.default),
|
|
{ ssr: false, loading: () => <div className="p-6 text-stone-500">Loading tools…</div> }
|
|
);
|
|
const ProjectManager = dynamic(
|
|
() => import('./ProjectManager').then((m) => m.ProjectManager),
|
|
{ ssr: false, loading: () => <div className="p-6 text-stone-500">Loading projects…</div> }
|
|
);
|
|
|
|
interface Project {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
content?: string;
|
|
category: string;
|
|
difficulty?: string;
|
|
tags?: string[];
|
|
featured: boolean;
|
|
published: boolean;
|
|
github?: string;
|
|
live?: string;
|
|
image?: string;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
analytics?: {
|
|
views: number;
|
|
likes: number;
|
|
shares: number;
|
|
};
|
|
performance?: {
|
|
lighthouse: number;
|
|
};
|
|
}
|
|
|
|
interface ModernAdminDashboardProps {
|
|
isAuthenticated?: boolean;
|
|
}
|
|
|
|
const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthenticated = true }) => {
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [analytics, setAnalytics] = useState<Record<string, unknown> | null>(null);
|
|
const [emails, setEmails] = useState<Record<string, unknown>[]>([]);
|
|
const [systemStats, setSystemStats] = useState<Record<string, unknown> | null>(null);
|
|
|
|
const loadProjects = useCallback(async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const sessionToken = sessionStorage.getItem('admin_session_token');
|
|
const response = await fetch('/api/projects', {
|
|
headers: {
|
|
'x-admin-request': 'true',
|
|
'x-session-token': sessionToken || ''
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
console.warn('Failed to load projects:', response.status);
|
|
setProjects([]);
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
setProjects(data.projects || []);
|
|
} catch {
|
|
setProjects([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const loadAnalytics = useCallback(async () => {
|
|
try {
|
|
const sessionToken = sessionStorage.getItem('admin_session_token');
|
|
const response = await fetch('/api/analytics/dashboard', {
|
|
headers: {
|
|
'x-admin-request': 'true',
|
|
'x-session-token': sessionToken || ''
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setAnalytics(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading analytics:', error);
|
|
}
|
|
}, []);
|
|
|
|
const loadEmails = useCallback(async () => {
|
|
try {
|
|
const sessionToken = sessionStorage.getItem('admin_session_token');
|
|
const response = await fetch('/api/contacts', {
|
|
headers: {
|
|
'x-admin-request': 'true',
|
|
'x-session-token': sessionToken || ''
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setEmails(data.contacts || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading emails:', error);
|
|
}
|
|
}, []);
|
|
|
|
const loadSystemStats = useCallback(async () => {
|
|
try {
|
|
const sessionToken = sessionStorage.getItem('admin_session_token');
|
|
const response = await fetch('/api/health', {
|
|
headers: {
|
|
'x-admin-request': 'true',
|
|
'x-session-token': sessionToken || ''
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setSystemStats(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading system stats:', error);
|
|
}
|
|
}, []);
|
|
|
|
const loadAllData = useCallback(async () => {
|
|
await Promise.all([
|
|
loadProjects(),
|
|
loadAnalytics(),
|
|
loadEmails(),
|
|
loadSystemStats()
|
|
]);
|
|
}, [loadProjects, loadAnalytics, loadEmails, loadSystemStats]);
|
|
|
|
// Real stats from API data
|
|
const stats = {
|
|
totalProjects: projects.length,
|
|
publishedProjects: projects.filter(p => p.published).length,
|
|
totalViews: ((analytics?.overview as Record<string, unknown>)?.totalViews as number) || (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
|
|
unreadEmails: emails.filter(e => !(e.read as boolean)).length,
|
|
avgPerformance: (() => {
|
|
// Only show real performance data, not defaults
|
|
const projectsWithPerf = projects.filter(p => {
|
|
const perf = p.performance as Record<string, unknown> || {};
|
|
return (perf.lighthouse as number || 0) > 0;
|
|
});
|
|
if (projectsWithPerf.length === 0) return 0;
|
|
return Math.round(projectsWithPerf.reduce((sum, p) => {
|
|
const perf = p.performance as Record<string, unknown> || {};
|
|
return sum + (perf.lighthouse as number || 0);
|
|
}, 0) / projectsWithPerf.length);
|
|
})(),
|
|
systemHealth: (systemStats?.status as string) || 'unknown',
|
|
totalUsers: ((analytics?.metrics as Record<string, unknown>)?.totalUsers as number) || (analytics?.totalUsers as number) || 0,
|
|
bounceRate: ((analytics?.metrics as Record<string, unknown>)?.bounceRate as number) || (analytics?.bounceRate as number) || 0,
|
|
avgSessionDuration: ((analytics?.metrics as Record<string, unknown>)?.avgSessionDuration as number) || (analytics?.avgSessionDuration as number) || 0
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Prioritize the data needed for the initial dashboard render
|
|
void (async () => {
|
|
await Promise.all([loadProjects(), loadSystemStats()]);
|
|
|
|
const idle = (cb: () => void) => {
|
|
if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
|
|
(window as unknown as { requestIdleCallback: (fn: () => void) => void }).requestIdleCallback(cb);
|
|
} else {
|
|
setTimeout(cb, 300);
|
|
}
|
|
};
|
|
|
|
idle(() => {
|
|
void loadAnalytics();
|
|
void loadEmails();
|
|
});
|
|
})();
|
|
}, [loadProjects, loadSystemStats, loadAnalytics, loadEmails]);
|
|
|
|
const navigation = [
|
|
{ id: 'overview', label: 'Dashboard', icon: Home, color: 'blue', description: 'Overview & Statistics' },
|
|
{ id: 'projects', label: 'Projects', icon: Database, color: 'green', description: 'Manage Projects' },
|
|
{ id: 'emails', label: 'Emails', icon: Mail, color: 'purple', description: 'Email Management' },
|
|
{ id: 'analytics', label: 'Analytics', icon: Activity, color: 'orange', description: 'Site Analytics' },
|
|
{ id: 'settings', label: 'Settings', icon: Settings, color: 'gray', description: 'System Settings' }
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Animated Background - same as main site */}
|
|
<div className="fixed inset-0 animated-bg"></div>
|
|
|
|
{/* Admin Navbar - Horizontal Navigation */}
|
|
<div className="relative z-10">
|
|
<div className="admin-glass border-b border-white/20 sticky top-0">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Left side - Logo and Admin Panel */}
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center space-x-2 text-stone-900 hover:text-black transition-colors"
|
|
>
|
|
<Home size={20} className="text-stone-600" />
|
|
<span className="font-medium text-stone-900">Portfolio</span>
|
|
</Link>
|
|
<div className="h-6 w-px bg-stone-300" />
|
|
<div className="flex items-center space-x-2">
|
|
<Shield size={20} className="text-stone-600" />
|
|
<span className="text-stone-900 font-semibold">Admin Panel</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center - Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-1">
|
|
{navigation.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
|
|
className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
|
|
activeTab === item.id
|
|
? 'bg-stone-100 text-stone-900 font-medium shadow-sm border border-stone-200'
|
|
: 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
|
|
}`}
|
|
>
|
|
<item.icon size={16} className={activeTab === item.id ? 'text-stone-800' : 'text-stone-400'} />
|
|
<span className="text-sm">{item.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right side - User info and Logout */}
|
|
<div className="flex items-center space-x-4">
|
|
<div className="hidden sm:block text-sm text-stone-500">
|
|
Welcome, <span className="text-stone-800 font-semibold">Dennis</span>
|
|
</div>
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
sessionStorage.removeItem('admin_authenticated');
|
|
sessionStorage.removeItem('admin_session_token');
|
|
window.location.href = '/manage';
|
|
} catch (error) {
|
|
console.error('Logout failed:', error);
|
|
// Force logout anyway
|
|
sessionStorage.removeItem('admin_authenticated');
|
|
sessionStorage.removeItem('admin_session_token');
|
|
window.location.href = '/manage';
|
|
}
|
|
}}
|
|
className="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-red-50 text-stone-500 hover:text-red-600 transition-all duration-200 border border-transparent hover:border-red-100"
|
|
>
|
|
<LogOut size={16} />
|
|
<span className="hidden sm:inline text-sm font-medium">Logout</span>
|
|
</button>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
className="md:hidden flex items-center justify-center p-2 rounded-lg text-stone-600 hover:bg-stone-100 transition-colors"
|
|
>
|
|
{mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation Menu */}
|
|
<AnimatePresence>
|
|
{mobileMenuOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="md:hidden border-t border-stone-200 bg-white"
|
|
>
|
|
<div className="px-4 py-4 space-y-2">
|
|
{navigation.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings');
|
|
setMobileMenuOpen(false);
|
|
}}
|
|
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
|
|
activeTab === item.id
|
|
? 'bg-stone-100 text-stone-900 shadow-sm border border-stone-200'
|
|
: 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
|
|
}`}
|
|
>
|
|
<item.icon size={18} className={activeTab === item.id ? 'text-stone-800' : 'text-stone-400'} />
|
|
<div className="text-left">
|
|
<div className="font-medium text-sm">{item.label}</div>
|
|
<div className="text-xs opacity-70">{item.description}</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Main Content - Full Width Horizontal Layout */}
|
|
<div className="px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-6 lg:py-8">
|
|
{/* Content */}
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={activeTab}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-8">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-stone-900">Admin Dashboard</h1>
|
|
<p className="text-stone-500 text-lg">Manage your portfolio and monitor performance</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */}
|
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6">
|
|
<div
|
|
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
|
|
onClick={() => setActiveTab('projects')}
|
|
>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-stone-500 text-xs md:text-sm font-medium">Projects</p>
|
|
<Database size={20} className="text-stone-400" />
|
|
</div>
|
|
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalProjects}</p>
|
|
<p className="text-stone-600 text-xs font-medium">{stats.publishedProjects} published</p>
|
|
</div>
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
|
|
✅ REAL DATA: Total projects in your portfolio from the database. Shows published vs unpublished count.
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
|
|
onClick={() => setActiveTab('analytics')}
|
|
>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-stone-500 text-xs md:text-sm font-medium">Page Views</p>
|
|
<Activity size={20} className="text-stone-400" />
|
|
</div>
|
|
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalViews.toLocaleString()}</p>
|
|
<p className="text-stone-600 text-xs font-medium">{stats.totalUsers} users</p>
|
|
</div>
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
|
|
✅ REAL DATA: Total page views from PageView table (last 30 days). Each visit is tracked with IP, user agent, and timestamp. Users = unique IP addresses.
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
|
|
onClick={() => setActiveTab('emails')}
|
|
>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-stone-500 text-xs md:text-sm font-medium">Messages</p>
|
|
<Mail size={20} className="text-stone-400" />
|
|
</div>
|
|
<p className="text-xl md:text-2xl font-bold text-stone-900">{emails.length}</p>
|
|
<p className="text-red-500 text-xs font-medium">{stats.unreadEmails} unread</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
|
|
onClick={() => setActiveTab('analytics')}
|
|
>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-stone-500 text-xs md:text-sm font-medium">Performance</p>
|
|
<TrendingUp size={20} className="text-stone-400" />
|
|
</div>
|
|
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.avgPerformance || 'N/A'}</p>
|
|
<p className="text-stone-600 text-xs font-medium">Lighthouse Score</p>
|
|
</div>
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
|
|
{stats.avgPerformance > 0
|
|
? "✅ REAL DATA: Average Lighthouse score (0-100) calculated from real Web Vitals (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only averages projects with real performance data."
|
|
: "No performance data yet. Scores appear after visitors load pages and Web Vitals are tracked."}
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none group relative"
|
|
onClick={() => setActiveTab('analytics')}
|
|
>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-stone-500 text-xs md:text-sm font-medium">Bounce Rate</p>
|
|
<Users size={20} className="text-stone-400" />
|
|
</div>
|
|
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.bounceRate}%</p>
|
|
<p className="text-stone-600 text-xs font-medium">Exit rate</p>
|
|
</div>
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
|
|
✅ REAL DATA: Percentage of sessions with only 1 pageview (calculated from PageView records grouped by IP). Lower is better. Shows how many visitors leave after viewing just one page.
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
|
|
onClick={() => setActiveTab('settings')}
|
|
>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-stone-500 text-xs md:text-sm font-medium">System</p>
|
|
<Shield size={20} className="text-stone-400" />
|
|
</div>
|
|
<p className="text-xl md:text-2xl font-bold text-stone-900">Online</p>
|
|
<div className="flex items-center space-x-1">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
|
<p className="text-stone-600 text-xs font-medium">Operational</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Activity & Quick Actions - Mobile: vertical, Desktop: horizontal */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* Recent Activity */}
|
|
<div className="admin-glass-card p-6 rounded-xl md:col-span-2">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-stone-900">Recent Activity</h2>
|
|
<button
|
|
onClick={() => loadAllData()}
|
|
className="text-stone-500 hover:text-stone-800 text-sm font-medium px-3 py-1 bg-stone-100 rounded-lg transition-colors border border-stone-200"
|
|
>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile: vertical stack, Desktop: horizontal columns */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-6">
|
|
<h3 className="text-xs font-bold text-stone-400 uppercase tracking-wider">Projects</h3>
|
|
<div className="space-y-4">
|
|
{projects.slice(0, 3).map((project) => (
|
|
<div key={project.id} className="flex items-start space-x-3 p-4 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-stone-800 font-medium text-sm truncate">{project.title}</p>
|
|
<p className="text-stone-500 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
|
|
<div className="flex items-center space-x-2 mt-2">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${project.published ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>
|
|
{project.published ? 'Live' : 'Draft'}
|
|
</span>
|
|
{project.featured && (
|
|
<span className="px-2 py-1 bg-stone-200 text-stone-700 rounded-full text-xs font-medium">Featured</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-xs font-bold text-stone-400 uppercase tracking-wider">Messages</h3>
|
|
<div className="space-y-3">
|
|
{emails.slice(0, 3).map((email, index) => (
|
|
<div key={index} className="flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
|
|
<div className="w-8 h-8 bg-stone-200 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<Mail size={14} className="text-stone-600" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-stone-800 font-medium text-sm truncate">From {email.name as string}</p>
|
|
<p className="text-stone-500 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
|
|
</div>
|
|
{!(email.read as boolean) && (
|
|
<div className="w-2 h-2 bg-red-500 rounded-full flex-shrink-0"></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="admin-glass-card p-6 rounded-xl">
|
|
<h2 className="text-xl font-bold text-stone-900 mb-6">Quick Actions</h2>
|
|
<div className="space-y-4">
|
|
<button
|
|
onClick={() => window.location.href = '/editor'}
|
|
className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
|
|
>
|
|
<div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
|
|
<Plus size={18} className="text-stone-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-stone-800 font-medium text-sm">Ghost Editor</p>
|
|
<p className="text-stone-500 text-xs">Professional writing tool</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('analytics')}
|
|
className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
|
|
>
|
|
<div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
|
|
<Activity size={18} className="text-stone-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-stone-800 font-medium text-sm">Reset Analytics</p>
|
|
<p className="text-stone-500 text-xs">Clear analytics data</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('emails')}
|
|
className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
|
|
>
|
|
<div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
|
|
<Mail size={18} className="text-stone-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-stone-800 font-medium text-sm">View Messages</p>
|
|
<p className="text-stone-500 text-xs">{stats.unreadEmails} unread messages</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('analytics')}
|
|
className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
|
|
>
|
|
<div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
|
|
<TrendingUp size={18} className="text-stone-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-stone-800 font-medium text-sm">Analytics</p>
|
|
<p className="text-stone-500 text-xs">View detailed statistics</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('settings')}
|
|
className="w-full flex items-center space-x-3 p-3 bg-stone-50 border border-stone-100 rounded-lg hover:shadow-sm hover:bg-white transition-all duration-200 text-left group"
|
|
>
|
|
<div className="w-10 h-10 bg-white rounded-lg border border-stone-100 flex items-center justify-center group-hover:border-stone-300 transition-colors">
|
|
<Settings size={18} className="text-stone-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-stone-800 font-medium text-sm">Settings</p>
|
|
<p className="text-stone-500 text-xs">System configuration</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'projects' && (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-stone-900">Project Management</h2>
|
|
<p className="text-stone-500 mt-1">Manage your portfolio projects</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ProjectManager projects={projects} onProjectsChange={loadProjects} />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'emails' && (
|
|
<EmailManager />
|
|
)}
|
|
|
|
{activeTab === 'analytics' && (
|
|
<AnalyticsDashboard isAuthenticated={isAuthenticated} />
|
|
)}
|
|
|
|
{activeTab === 'settings' && (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-stone-900">System Settings</h1>
|
|
<p className="text-stone-500">Manage system configuration and preferences</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="admin-glass-card p-6 rounded-xl">
|
|
<h2 className="text-xl font-bold text-stone-900 mb-4">Import / Export</h2>
|
|
<p className="text-stone-500 mb-4">Backup and restore your portfolio data</p>
|
|
<ImportExport />
|
|
</div>
|
|
|
|
<div className="admin-glass-card p-6 rounded-xl">
|
|
<h2 className="text-xl font-bold text-stone-900 mb-4">System Status</h2>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
|
|
<span className="text-stone-600">Database</span>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span className="text-green-600 font-medium">Online</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
|
|
<span className="text-stone-600">Redis Cache</span>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span className="text-green-600 font-medium">Online</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 bg-stone-50 rounded-lg border border-stone-100">
|
|
<span className="text-stone-600">API Services</span>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span className="text-green-600 font-medium">Online</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModernAdminDashboard; |