feat: enhance analytics and performance tracking with real data metrics
- Integrate real page view data from the database for accurate analytics. - Implement cache-busting for fresh data retrieval in analytics dashboard. - Calculate and display bounce rate, average session duration, and unique users. - Refactor performance metrics to ensure only real data is considered. - Improve user experience with toast notifications for success and error messages. - Update project editor with undo/redo functionality and enhanced content management.
This commit is contained in:
@@ -157,14 +157,24 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
const stats = {
|
||||
totalProjects: projects.length,
|
||||
publishedProjects: projects.filter(p => p.published).length,
|
||||
totalViews: (analytics?.totalViews as number) || projects.reduce((sum, p) => sum + (p.analytics?.views || 0), 0),
|
||||
totalViews: (analytics?.overview?.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: (analytics?.avgPerformance as number) || (projects.length > 0 ?
|
||||
Math.round(projects.reduce((sum, p) => sum + (p.performance?.lighthouse || 90), 0) / projects.length) : 90),
|
||||
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?.totalUsers as number) || 0,
|
||||
bounceRate: (analytics?.bounceRate as number) || 0,
|
||||
avgSessionDuration: (analytics?.avgSessionDuration as number) || 0
|
||||
totalUsers: (analytics?.metrics?.totalUsers as number) || (analytics?.totalUsers as number) || 0,
|
||||
bounceRate: (analytics?.metrics?.bounceRate as number) || (analytics?.bounceRate as number) || 0,
|
||||
avgSessionDuration: (analytics?.metrics?.avgSessionDuration as number) || (analytics?.avgSessionDuration as number) || 0
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -320,7 +330,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{/* 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"
|
||||
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">
|
||||
@@ -329,12 +339,16 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<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-green-600 text-xs font-medium">{stats.publishedProjects} published</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"
|
||||
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">
|
||||
@@ -345,6 +359,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<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
|
||||
@@ -362,7 +380,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="admin-glass-light p-4 rounded-xl cursor-pointer transition-all duration-200 transform-none hover:transform-none"
|
||||
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">
|
||||
@@ -370,13 +388,19 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<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}</p>
|
||||
<p className="text-orange-500 text-xs font-medium">Lighthouse Score</p>
|
||||
<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"
|
||||
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">
|
||||
@@ -385,7 +409,11 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<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-red-500 text-xs font-medium">Exit rate</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>
|
||||
|
||||
@@ -401,7 +429,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<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-green-600 text-xs font-medium">Operational</p>
|
||||
<p className="text-stone-600 text-xs font-medium">Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user