fix: update admin dashboard styles
Fix white text color on cream background in Project Management section. Remove hover scaling effect from login button.
This commit is contained in:
@@ -231,10 +231,10 @@ const AdminPage = () => {
|
||||
// Loading state
|
||||
if (authState.isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-blue-500" />
|
||||
<p className="text-white">Loading...</p>
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-stone-600" />
|
||||
<p className="text-stone-500">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -243,17 +243,19 @@ const AdminPage = () => {
|
||||
// Lockout state
|
||||
if (authState.isLocked) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#fdfcf8]">
|
||||
<div className="text-center">
|
||||
<Lock className="w-16 h-16 mx-auto mb-4 text-red-500" />
|
||||
<h2 className="text-2xl font-bold text-white mb-2">Account Locked</h2>
|
||||
<p className="text-white/60">Too many failed attempts. Please try again in 15 minutes.</p>
|
||||
<div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<Lock className="w-8 h-8 text-red-500" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-stone-900 mb-2">Account Locked</h2>
|
||||
<p className="text-stone-500">Too many failed attempts. Please try again in 15 minutes.</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
localStorage.removeItem('admin_lockout');
|
||||
window.location.reload();
|
||||
}}
|
||||
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
className="mt-4 px-6 py-2 bg-stone-900 text-stone-50 rounded-xl hover:bg-stone-800 transition-colors"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
@@ -265,22 +267,25 @@ const AdminPage = () => {
|
||||
// Login form
|
||||
if (authState.showLogin || !authState.isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
||||
{/* Animated Background */}
|
||||
<div className="animated-bg"></div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="w-full max-w-md p-8"
|
||||
className="w-full max-w-md p-6"
|
||||
>
|
||||
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
|
||||
<div className="bg-white/80 backdrop-blur-xl rounded-3xl p-8 border border-stone-200 shadow-2xl relative z-10">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<Lock className="w-8 h-8 text-white" />
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-stone-100 to-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-sm border border-stone-100">
|
||||
<Lock className="w-6 h-6 text-stone-600" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">Admin Access</h1>
|
||||
<p className="text-white/60">Enter your password to continue</p>
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2 tracking-tight">Admin Access</h1>
|
||||
<p className="text-stone-500">Enter your password to continue</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<form onSubmit={handleLogin} className="space-y-5">
|
||||
<div>
|
||||
<div className="relative">
|
||||
<input
|
||||
@@ -288,37 +293,41 @@ const AdminPage = () => {
|
||||
value={authState.password}
|
||||
onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
|
||||
placeholder="Enter password"
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-4 py-3.5 bg-white border border-stone-200 rounded-xl text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all shadow-sm"
|
||||
disabled={authState.isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-white/50 hover:text-white"
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-stone-400 hover:text-stone-600 p-1"
|
||||
>
|
||||
{authState.showPassword ? '👁️' : '👁️🗨️'}
|
||||
</button>
|
||||
</div>
|
||||
{authState.error && (
|
||||
<p className="mt-2 text-red-400 text-sm">{authState.error}</p>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-red-500 text-sm font-medium flex items-center"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full mr-2" />
|
||||
{authState.error}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={authState.isLoading || !authState.password}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg"
|
||||
className="w-full bg-stone-900 text-stone-50 py-3.5 px-6 rounded-xl font-semibold text-lg hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:ring-offset-2 focus:ring-offset-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg flex items-center justify-center"
|
||||
>
|
||||
{authState.isLoading ? (
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Authenticating...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<Lock size={18} />
|
||||
<span>Secure Login</span>
|
||||
</div>
|
||||
<span>Sign In</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -194,15 +194,15 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center space-x-2 text-white/90 hover:text-white transition-colors"
|
||||
className="flex items-center space-x-2 text-stone-600 hover:text-stone-900 transition-colors"
|
||||
>
|
||||
<Home size={20} className="text-blue-400" />
|
||||
<span className="font-medium text-white">Portfolio</span>
|
||||
<Home size={20} className="text-stone-500" />
|
||||
<span className="font-medium text-stone-800">Portfolio</span>
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-white/30" />
|
||||
<div className="h-6 w-px bg-stone-200" />
|
||||
<div className="flex items-center space-x-2">
|
||||
<Shield size={20} className="text-purple-400" />
|
||||
<span className="text-white font-semibold">Admin Panel</span>
|
||||
<Shield size={20} className="text-stone-500" />
|
||||
<span className="text-stone-800 font-semibold">Admin Panel</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -214,20 +214,20 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
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
|
||||
? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
|
||||
: 'text-white/80 hover:text-white hover:admin-glass-light'
|
||||
? '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-blue-400' : 'text-white/70'} />
|
||||
<span className="font-medium text-sm">{item.label}</span>
|
||||
<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-white/80">
|
||||
Welcome, <span className="text-white font-semibold">Dennis</span>
|
||||
<div className="hidden sm:block text-sm text-stone-500">
|
||||
Welcome, <span className="text-stone-800 font-semibold">Dennis</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={async () => {
|
||||
@@ -244,7 +244,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
window.location.href = '/manage';
|
||||
}
|
||||
}}
|
||||
className="flex items-center space-x-2 px-3 py-2 rounded-lg admin-glass-light hover:bg-red-500/20 text-red-300 hover:text-red-200 transition-all duration-200"
|
||||
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>
|
||||
@@ -253,7 +253,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="md:hidden flex items-center justify-center p-2 rounded-lg admin-glass-light text-white hover:text-blue-300 transition-colors"
|
||||
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>
|
||||
@@ -268,7 +268,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="md:hidden border-t border-white/20 admin-glass-light"
|
||||
className="md:hidden border-t border-stone-200 bg-white"
|
||||
>
|
||||
<div className="px-4 py-4 space-y-2">
|
||||
{navigation.map((item) => (
|
||||
@@ -280,11 +280,11 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
}}
|
||||
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
|
||||
activeTab === item.id
|
||||
? 'admin-glass-light border border-blue-500/40 text-blue-300 shadow-lg'
|
||||
: 'text-white/80 hover:text-white hover:admin-glass-light'
|
||||
? '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-blue-400' : 'text-white/70'} />
|
||||
<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>
|
||||
@@ -312,96 +312,96 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<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-white">Admin Dashboard</h1>
|
||||
<p className="text-white/80 text-lg">Manage your portfolio and monitor performance</p>
|
||||
<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 hover:scale-105 transition-all duration-200 cursor-pointer"
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200"
|
||||
onClick={() => setActiveTab('projects')}
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-white/80 text-xs md:text-sm font-medium">Projects</p>
|
||||
<Database size={20} className="text-blue-400" />
|
||||
<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-white">{stats.totalProjects}</p>
|
||||
<p className="text-green-400 text-xs font-medium">{stats.publishedProjects} published</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.totalProjects}</p>
|
||||
<p className="text-green-600 text-xs font-medium">{stats.publishedProjects} published</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200"
|
||||
onClick={() => setActiveTab('analytics')}
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-white/80 text-xs md:text-sm font-medium">Page Views</p>
|
||||
<Activity size={20} className="text-purple-400" />
|
||||
<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-white">{stats.totalViews.toLocaleString()}</p>
|
||||
<p className="text-blue-400 text-xs font-medium">{stats.totalUsers} users</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.totalViews.toLocaleString()}</p>
|
||||
<p className="text-blue-600 text-xs font-medium">{stats.totalUsers} users</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200"
|
||||
onClick={() => setActiveTab('emails')}
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-white/80 text-xs md:text-sm font-medium">Messages</p>
|
||||
<Mail size={20} className="text-green-400" />
|
||||
<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-white">{emails.length}</p>
|
||||
<p className="text-red-400 text-xs font-medium">{stats.unreadEmails} unread</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-stone-800">{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 hover:scale-105 transition-all duration-200 cursor-pointer"
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200"
|
||||
onClick={() => setActiveTab('analytics')}
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-white/80 text-xs md:text-sm font-medium">Performance</p>
|
||||
<TrendingUp size={20} className="text-orange-400" />
|
||||
<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-white">{stats.avgPerformance}</p>
|
||||
<p className="text-orange-400 text-xs font-medium">Lighthouse Score</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.avgPerformance}</p>
|
||||
<p className="text-orange-500 text-xs font-medium">Lighthouse Score</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200"
|
||||
onClick={() => setActiveTab('analytics')}
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-white/80 text-xs md:text-sm font-medium">Bounce Rate</p>
|
||||
<Users size={20} className="text-red-400" />
|
||||
<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-white">{stats.bounceRate}%</p>
|
||||
<p className="text-red-400 text-xs font-medium">Exit rate</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-stone-800">{stats.bounceRate}%</p>
|
||||
<p className="text-red-500 text-xs font-medium">Exit rate</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="admin-glass-light p-4 rounded-xl hover:scale-105 transition-all duration-200 cursor-pointer"
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer hover:shadow-md transition-all duration-200"
|
||||
onClick={() => setActiveTab('settings')}
|
||||
>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-white/80 text-xs md:text-sm font-medium">System</p>
|
||||
<Shield size={20} className="text-green-400" />
|
||||
<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-white">Online</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-stone-800">Online</p>
|
||||
<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>
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<p className="text-green-600 text-xs font-medium">Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -412,10 +412,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{/* 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-white">Recent Activity</h2>
|
||||
<h2 className="text-xl font-bold text-stone-900">Recent Activity</h2>
|
||||
<button
|
||||
onClick={() => loadAllData()}
|
||||
className="text-blue-400 hover:text-blue-300 text-sm font-medium px-3 py-1 admin-glass-light rounded-lg transition-colors"
|
||||
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>
|
||||
@@ -424,19 +424,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{/* 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-sm font-medium text-white/60 uppercase tracking-wider">Projects</h3>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('projects')}>
|
||||
<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-white font-medium text-sm truncate">{project.title}</p>
|
||||
<p className="text-white/60 text-xs">{project.published ? 'Published' : 'Draft'} • {project.analytics?.views || 0} views</p>
|
||||
<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 ${project.published ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}`}>
|
||||
<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-purple-500/20 text-purple-400 rounded-full text-xs">Featured</span>
|
||||
<span className="px-2 py-1 bg-stone-200 text-stone-700 rounded-full text-xs font-medium">Featured</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -446,19 +446,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium text-white/60 uppercase tracking-wider">Messages</h3>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 cursor-pointer" onClick={() => setActiveTab('emails')}>
|
||||
<div className="w-8 h-8 bg-green-500/30 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Mail size={14} className="text-green-400" />
|
||||
<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-white font-medium text-sm truncate">From {email.name as string}</p>
|
||||
<p className="text-white/60 text-xs truncate">{(email.subject as string) || 'No subject'}</p>
|
||||
<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-400 rounded-full flex-shrink-0"></div>
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full flex-shrink-0"></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -469,70 +469,70 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="admin-glass-card p-6 rounded-xl">
|
||||
<h2 className="text-xl font-bold text-white mb-6">Quick Actions</h2>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
|
||||
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-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
|
||||
<Plus size={18} className="text-green-400" />
|
||||
<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-white font-medium text-sm">Ghost Editor</p>
|
||||
<p className="text-white/60 text-xs">Professional writing tool</p>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
|
||||
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-red-500/30 rounded-lg flex items-center justify-center group-hover:bg-red-500/40 transition-colors">
|
||||
<Activity size={18} className="text-red-400" />
|
||||
<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-white font-medium text-sm">Reset Analytics</p>
|
||||
<p className="text-white/60 text-xs">Clear analytics data</p>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
|
||||
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-green-500/30 rounded-lg flex items-center justify-center group-hover:bg-green-500/40 transition-colors">
|
||||
<Mail size={18} className="text-green-400" />
|
||||
<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-white font-medium text-sm">View Messages</p>
|
||||
<p className="text-white/60 text-xs">{stats.unreadEmails} unread messages</p>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
|
||||
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-purple-500/30 rounded-lg flex items-center justify-center group-hover:bg-purple-500/40 transition-colors">
|
||||
<TrendingUp size={18} className="text-purple-400" />
|
||||
<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-white font-medium text-sm">Analytics</p>
|
||||
<p className="text-white/60 text-xs">View detailed statistics</p>
|
||||
<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 admin-glass-light rounded-lg hover:scale-[1.02] transition-all duration-200 text-left group"
|
||||
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-gray-500/30 rounded-lg flex items-center justify-center group-hover:bg-gray-500/40 transition-colors">
|
||||
<Settings size={18} className="text-gray-400" />
|
||||
<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-white font-medium text-sm">Settings</p>
|
||||
<p className="text-white/60 text-xs">System configuration</p>
|
||||
<p className="text-stone-800 font-medium text-sm">Settings</p>
|
||||
<p className="text-stone-500 text-xs">System configuration</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@@ -545,8 +545,8 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Project Management</h2>
|
||||
<p className="text-white/70 mt-1">Manage your portfolio projects</p>
|
||||
<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>
|
||||
|
||||
@@ -565,39 +565,39 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{activeTab === 'settings' && (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">System Settings</h1>
|
||||
<p className="text-white/60">Manage system configuration and preferences</p>
|
||||
<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-white mb-4">Import / Export</h2>
|
||||
<p className="text-white/70 mb-4">Backup and restore your portfolio data</p>
|
||||
<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-white mb-4">System Status</h2>
|
||||
<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-white/5 rounded-lg">
|
||||
<span className="text-white/80">Database</span>
|
||||
<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-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-green-400 font-medium">Online</span>
|
||||
<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-white/5 rounded-lg">
|
||||
<span className="text-white/80">Redis Cache</span>
|
||||
<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-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-green-400 font-medium">Online</span>
|
||||
<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-white/5 rounded-lg">
|
||||
<span className="text-white/80">API Services</span>
|
||||
<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-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-green-400 font-medium">Online</span>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user