denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine admin dashboard and project management UI with cohesive color palette and improved readability

Browse Source 
- Update background colors and text styles for better contrast and legibility.
- Enhance button styles and hover effects for a more modern look.
- Remove unnecessary scaling effects and adjust border styles for consistency.
- Introduce a cohesive design language across components to improve user experience.
This commit is contained in:
denshooter
2026-01-10 02:40:50 +01:00
parent 7d84d35f09
commit b051d9d2ef
14 changed files with 387 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
components/AnalyticsDashboard.tsx
View File

@@ -177,24 +177,24 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="admin-glass-card p-6 rounded-xl hover:scale-105 transition-all duration-200"
className="bg-white border border-stone-200 p-6 rounded-xl hover:shadow-md transition-all duration-200"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center space-x-3 mb-4">
<div className={`p-3 rounded-xl ${color}`}>
<Icon className="w-6 h-6 text-white" size={24} />
<Icon className="w-6 h-6" size={24} />
</div>
<div>
<p className="text-white/60 text-sm font-medium">{title}</p>
{description && <p className="text-white/40 text-xs">{description}</p>}
<p className="text-stone-500 text-sm font-medium">{title}</p>
{description && <p className="text-stone-400 text-xs">{description}</p>}
</div>
</div>
<p className="text-3xl font-bold text-white mb-2">{value}</p>
<p className="text-3xl font-bold text-stone-900 mb-2">{value}</p>
{trend && trendValue && (
<div className={`flex items-center space-x-1 text-sm ${
trend === 'up' ? 'text-green-400' :
trend === 'down' ? 'text-red-400' : 'text-yellow-400'
trend === 'up' ? 'text-green-600' :
trend === 'down' ? 'text-red-600' : 'text-yellow-600'
}`}>
<TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} />
<span>{trendValue}</span>
@@ -207,21 +207,21 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
const getDifficultyColor = (difficulty: string) => {
switch (difficulty) {
case 'Beginner': return 'bg-green-500/30 text-green-400 border-green-500/40';
case 'Intermediate': return 'bg-yellow-500/30 text-yellow-400 border-yellow-500/40';
case 'Advanced': return 'bg-orange-500/30 text-orange-400 border-orange-500/40';
case 'Expert': return 'bg-red-500/30 text-red-400 border-red-500/40';
default: return 'bg-gray-500/30 text-gray-400 border-gray-500/40';
case 'Beginner': return 'bg-green-50 text-green-700 border-green-200';
case 'Intermediate': return 'bg-yellow-50 text-yellow-700 border-yellow-200';
case 'Advanced': return 'bg-orange-50 text-orange-700 border-orange-200';
case 'Expert': return 'bg-red-50 text-red-700 border-red-200';
default: return 'bg-stone-50 text-stone-600 border-stone-200';
}
};
const getCategoryColor = (index: number) => {
const colors = [
'bg-blue-500/30 text-blue-400',
'bg-purple-500/30 text-purple-400',
'bg-green-500/30 text-green-400',
'bg-pink-500/30 text-pink-400',
'bg-indigo-500/30 text-indigo-400'
'bg-stone-100 text-stone-700',
'bg-stone-200 text-stone-800',
'bg-stone-300 text-stone-900',
'bg-stone-100 text-stone-700',
'bg-stone-200 text-stone-800'
];
return colors[index % colors.length];
};
@@ -233,23 +233,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 className="text-3xl font-bold text-white flex items-center">
<BarChart3 className="w-8 h-8 mr-3 text-blue-400" />
<h1 className="text-3xl font-bold text-stone-900 flex items-center">
<BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
Analytics Dashboard
</h1>
<p className="text-white/80 mt-2">Portfolio performance and user engagement metrics</p>
<p className="text-stone-500 mt-2">Portfolio performance and user engagement metrics</p>
</div>
<div className="flex items-center space-x-3">
{/* Time Range Selector */}
<div className="flex items-center space-x-1 admin-glass-light rounded-xl p-1">
<div className="flex items-center space-x-1 bg-white border border-stone-200 rounded-xl p-1">
{(['7d', '30d', '90d', '1y'] as const).map((range) => (
<button
key={range}
onClick={() => setTimeRange(range)}
className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
timeRange === range
? 'bg-blue-500/40 text-blue-300 shadow-lg'
: 'text-white/70 hover:text-white hover:bg-white/10'
? 'bg-stone-100 text-stone-900 shadow-sm'
: 'text-stone-500 hover:text-stone-800 hover:bg-stone-50'
}`}
>
{range === '7d' ? '7 Days' : range === '30d' ? '30 Days' : range === '90d' ? '90 Days' : '1 Year'}
@@ -259,15 +259,15 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<button
onClick={fetchAnalyticsData}
disabled={loading}
className="flex items-center space-x-2 px-4 py-2 admin-glass-light rounded-xl hover:scale-105 transition-all duration-200 disabled:opacity-50"
className="flex items-center space-x-2 px-4 py-2 bg-white border border-stone-200 rounded-xl hover:bg-stone-50 transition-all duration-200 disabled:opacity-50 text-stone-600"
>
<RefreshCw className={`w-4 h-4 text-blue-400 ${loading ? 'animate-spin' : ''}`} />
<span className="text-white font-medium">Refresh</span>
<RefreshCw className={`w-4 h-4 text-stone-600 ${loading ? 'animate-spin' : ''}`} />
<span className="font-medium">Refresh</span>
</button>
<button
onClick={() => setShowResetModal(true)}
className="flex items-center space-x-2 px-4 py-2 bg-red-600/20 text-red-400 border border-red-500/30 rounded-xl hover:bg-red-600/30 hover:scale-105 transition-all"
className="flex items-center space-x-2 px-4 py-2 bg-red-50 text-red-600 border border-red-100 rounded-xl hover:bg-red-100 transition-all"
>
<RotateCcw className="w-4 h-4" />
<span>Reset</span>
@@ -276,17 +276,17 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div>
{loading && (
<div className="admin-glass-card p-8 rounded-xl">
<div className="bg-white border border-stone-200 p-8 rounded-xl shadow-sm">
<div className="flex items-center justify-center space-x-3">
<RefreshCw className="w-6 h-6 text-blue-400 animate-spin" />
<span className="text-white/80 text-lg">Loading analytics data...</span>
<RefreshCw className="w-6 h-6 text-stone-600 animate-spin" />
<span className="text-stone-500 text-lg">Loading analytics data...</span>
</div>
</div>
)}
{error && (
<div className="admin-glass-card p-6 rounded-xl border border-red-500/40">
<div className="flex items-center space-x-3 text-red-300">
<div className="bg-white border border-red-200 p-6 rounded-xl">
<div className="flex items-center space-x-3 text-red-600">
<Activity className="w-5 h-5" />
<span>Error: {error}</span>
</div>
@@ -297,8 +297,8 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<>
{/* Overview Stats */}
<div>
<h2 className="text-xl font-bold text-white mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-purple-400" />
<h2 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-stone-600" />
Overview
</h2>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
@@ -306,7 +306,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Total Views"
value={data.overview.totalViews.toLocaleString()}
icon={Eye}
color="bg-blue-500/30"
color="bg-stone-100 text-stone-600"
trend="up"
trendValue="+12.5%"
description="All-time page views"
@@ -315,7 +315,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Projects"
value={data.overview.totalProjects}
icon={Globe}
color="bg-green-500/30"
color="bg-green-100 text-green-600"
trend="up"
trendValue="+2"
description={`${data.overview.publishedProjects} published`}
@@ -324,7 +324,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Engagement"
value={data.overview.totalLikes}
icon={Heart}
color="bg-pink-500/30"
color="bg-pink-100 text-pink-600"
trend="up"
trendValue="+8.2%"
description="Total likes & shares"
@@ -333,7 +333,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Performance"
value={data.overview.avgLighthouse}
icon={Zap}
color="bg-orange-500/30"
color="bg-orange-100 text-orange-600"
trend="up"
trendValue="+5%"
description="Avg Lighthouse score"
@@ -342,7 +342,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
title="Bounce Rate"
value={`${data.metrics.bounceRate}%`}
icon={MousePointer}
color="bg-purple-500/30"
color="bg-stone-100 text-stone-600"
trend="down"
trendValue="-2.1%"
description="User retention"
@@ -353,9 +353,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Project Performance */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Top Projects */}
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<Award className="w-5 h-5 mr-2 text-yellow-400" />
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Award className="w-5 h-5 mr-2 text-yellow-500" />
Top Performing Projects
</h3>
<div className="space-y-4">
@@ -368,20 +368,20 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
className="flex items-center justify-between p-4 admin-glass-light rounded-xl"
className="flex items-center justify-between p-4 bg-stone-50 rounded-xl border border-stone-100"
>
<div className="flex items-center space-x-4">
<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-bold">
<div className="w-8 h-8 bg-stone-600 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">
#{index + 1}
</div>
<div>
<p className="text-white font-medium">{project.title}</p>
<p className="text-white/60 text-sm">{project.category}</p>
<p className="text-stone-900 font-medium">{project.title}</p>
<p className="text-stone-500 text-sm">{project.category}</p>
</div>
</div>
<div className="text-right">
<p className="text-white font-bold">{project.views.toLocaleString()}</p>
<p className="text-white/60 text-sm">views</p>
<p className="text-stone-900 font-bold">{project.views.toLocaleString()}</p>
<p className="text-stone-500 text-sm">views</p>
</div>
</motion.div>
))}
@@ -389,9 +389,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div>
{/* Categories Distribution */}
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<BarChart3 className="w-5 h-5 mr-2 text-green-400" />
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<BarChart3 className="w-5 h-5 mr-2 text-green-600" />
Categories
</h3>
<div className="space-y-4">
@@ -405,16 +405,16 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
>
<div className="flex items-center space-x-3">
<div className={`w-4 h-4 rounded-full ${getCategoryColor(index)}`}></div>
<span className="text-white font-medium">{category}</span>
<span className="text-stone-700 font-medium">{category}</span>
</div>
<div className="flex items-center space-x-3">
<div className="w-32 h-2 bg-white/10 rounded-full overflow-hidden">
<div className="w-32 h-2 bg-stone-100 rounded-full overflow-hidden">
<div
className={`h-full ${getCategoryColor(index)} transition-all duration-500`}
style={{ width: `${(count / Math.max(...Object.values(data.categories))) * 100}%` }}
></div>
</div>
<span className="text-white/80 font-medium w-8 text-right">{count}</span>
<span className="text-stone-500 font-medium w-8 text-right">{count}</span>
</div>
</motion.div>
))}
@@ -425,9 +425,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Difficulty & Engagement */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Difficulty Distribution */}
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-red-400" />
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Target className="w-5 h-5 mr-2 text-red-500" />
Difficulty Levels
</h3>
<div className="grid grid-cols-2 gap-4">
@@ -448,9 +448,9 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div>
{/* Recent Activity */}
<div className="admin-glass-card p-6 rounded-xl">
<h3 className="text-xl font-bold text-white mb-6 flex items-center">
<Activity className="w-5 h-5 mr-2 text-blue-400" />
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm">
<h3 className="text-xl font-bold text-stone-900 mb-6 flex items-center">
<Activity className="w-5 h-5 mr-2 text-blue-600" />
Recent Activity
</h3>
<div className="space-y-4">
@@ -463,25 +463,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="flex items-center space-x-4 p-3 admin-glass-light rounded-xl"
className="flex items-center space-x-4 p-3 bg-stone-50 rounded-xl border border-stone-100"
>
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<div className="flex-1">
<p className="text-white font-medium text-sm">{project.title}</p>
<p className="text-white/60 text-xs">
<p className="text-stone-900 font-medium text-sm">{project.title}</p>
<p className="text-stone-500 text-xs">
Updated {new Date(project.updatedAt).toLocaleDateString()}
</p>
</div>
<div className="flex items-center space-x-2">
{project.featured && (
<span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded-full text-xs">
<span className="px-2 py-1 bg-stone-100 text-stone-700 rounded-full text-xs font-medium">
Featured
</span>
)}
<span className={`px-2 py-1 rounded-full text-xs ${
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
project.published
? 'bg-green-500/20 text-green-400'
: 'bg-yellow-500/20 text-yellow-400'
? 'bg-green-100 text-green-700'
: 'bg-yellow-100 text-yellow-700'
}`}>
{project.published ? 'Live' : 'Draft'}
</span>
@@ -496,30 +496,30 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Reset Modal */}
{showResetModal && (
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
className="admin-glass-card rounded-2xl p-6 w-full max-w-md"
className="bg-white border border-stone-200 rounded-2xl p-6 w-full max-w-md shadow-xl"
>
<div className="flex items-center space-x-3 mb-4">
<div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-red-400" />
<div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-red-600" />
</div>
<div>
<h3 className="text-lg font-bold text-white">Reset Analytics Data</h3>
<p className="text-white/60 text-sm">This action cannot be undone</p>
<h3 className="text-lg font-bold text-stone-900">Reset Analytics Data</h3>
<p className="text-stone-500 text-sm">This action cannot be undone</p>
</div>
</div>
<div className="space-y-4 mb-6">
<div>
<label className="block text-white/80 text-sm mb-2">Reset Type</label>
<label className="block text-stone-600 text-sm mb-2">Reset Type</label>
<select
value={resetType}
onChange={(e) => setResetType(e.target.value as 'all' | 'performance' | 'analytics')}
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-red-500"
className="w-full px-3 py-2 bg-stone-50 border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-red-500"
>
<option value="analytics">Analytics Only (views, likes, shares)</option>
<option value="pageviews">Page Views Only</option>
@@ -529,10 +529,10 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</select>
</div>
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
<div className="bg-red-50 border border-red-100 rounded-lg p-3">
<div className="flex items-start space-x-2">
<AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
<div className="text-sm text-red-300">
<AlertTriangle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
<div className="text-sm text-red-700">
<p className="font-medium mb-1">Warning:</p>
<p>This will permanently delete the selected analytics data. This action cannot be reversed.</p>
</div>
@@ -544,14 +544,14 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<button
onClick={() => setShowResetModal(false)}
disabled={resetting}
className="flex-1 px-4 py-2 admin-glass-light text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50"
className="flex-1 px-4 py-2 bg-white border border-stone-200 text-stone-700 rounded-lg hover:bg-stone-50 transition-all disabled:opacity-50"
>
Cancel
</button>
<button
onClick={resetAnalytics}
disabled={resetting}
className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg hover:scale-105 transition-all disabled:opacity-50"
className="flex-1 flex items-center justify-center space-x-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all disabled:opacity-50"
>
{resetting ? (
<>