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:
@@ -18,6 +18,7 @@ import {
|
||||
Trash2,
|
||||
AlertTriangle
|
||||
} from 'lucide-react';
|
||||
import { useToast } from '@/components/Toast';
|
||||
|
||||
interface AnalyticsData {
|
||||
overview: {
|
||||
@@ -25,8 +26,6 @@ interface AnalyticsData {
|
||||
publishedProjects: number;
|
||||
featuredProjects: number;
|
||||
totalViews: number;
|
||||
totalLikes: number;
|
||||
totalShares: number;
|
||||
avgLighthouse: number;
|
||||
};
|
||||
projects: Array<{
|
||||
@@ -35,8 +34,6 @@ interface AnalyticsData {
|
||||
category: string;
|
||||
difficulty: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
shares: number;
|
||||
lighthouse: number;
|
||||
published: boolean;
|
||||
featured: boolean;
|
||||
@@ -48,8 +45,6 @@ interface AnalyticsData {
|
||||
performance: {
|
||||
avgLighthouse: number;
|
||||
totalViews: number;
|
||||
totalLikes: number;
|
||||
totalShares: number;
|
||||
};
|
||||
metrics: {
|
||||
bounceRate: number;
|
||||
@@ -71,6 +66,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
const [showResetModal, setShowResetModal] = useState(false);
|
||||
const [resetType, setResetType] = useState<'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all'>('analytics');
|
||||
const [resetting, setResetting] = useState(false);
|
||||
const { showSuccess, showError } = useToast();
|
||||
|
||||
const fetchAnalyticsData = useCallback(async () => {
|
||||
if (!isAuthenticated) return;
|
||||
@@ -79,11 +75,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Add cache-busting parameter to ensure fresh data after reset
|
||||
const cacheBust = `?nocache=true&t=${Date.now()}`;
|
||||
const [analyticsRes, performanceRes] = await Promise.all([
|
||||
fetch('/api/analytics/dashboard', {
|
||||
fetch(`/api/analytics/dashboard${cacheBust}`, {
|
||||
headers: { 'x-admin-request': 'true' }
|
||||
}),
|
||||
fetch('/api/analytics/performance', {
|
||||
fetch(`/api/analytics/performance${cacheBust}`, {
|
||||
headers: { 'x-admin-request': 'true' }
|
||||
})
|
||||
]);
|
||||
@@ -103,23 +101,19 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
publishedProjects: 0,
|
||||
featuredProjects: 0,
|
||||
totalViews: 0,
|
||||
totalLikes: 0,
|
||||
totalShares: 0,
|
||||
avgLighthouse: 90
|
||||
},
|
||||
projects: analytics.projects || [],
|
||||
categories: analytics.categories || {},
|
||||
difficulties: analytics.difficulties || {},
|
||||
performance: performance.performance || {
|
||||
avgLighthouse: 90,
|
||||
totalViews: 0,
|
||||
totalLikes: 0,
|
||||
totalShares: 0
|
||||
performance: {
|
||||
avgLighthouse: performance.avgLighthouse || analytics.overview?.avgLighthouse || 0,
|
||||
totalViews: performance.totalViews || analytics.overview?.totalViews || 0,
|
||||
},
|
||||
metrics: performance.metrics || {
|
||||
bounceRate: 35,
|
||||
avgSessionDuration: 180,
|
||||
pagesPerSession: 2.5,
|
||||
metrics: performance.metrics || analytics.metrics || {
|
||||
bounceRate: 0,
|
||||
avgSessionDuration: 0,
|
||||
pagesPerSession: 0,
|
||||
newUsers: 0
|
||||
}
|
||||
});
|
||||
@@ -134,6 +128,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
if (!isAuthenticated || resetting) return;
|
||||
|
||||
setResetting(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch('/api/analytics/reset', {
|
||||
method: 'POST',
|
||||
@@ -144,15 +139,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
body: JSON.stringify({ type: resetType })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
await fetchAnalyticsData(); // Refresh data
|
||||
showSuccess(
|
||||
'Analytics Reset',
|
||||
`Successfully reset ${resetType === 'all' ? 'all analytics data' : resetType} data.`
|
||||
);
|
||||
setShowResetModal(false);
|
||||
// Clear cache and refresh data
|
||||
await fetchAnalyticsData();
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
setError(errorData.error || 'Failed to reset analytics');
|
||||
const errorMsg = result.error || 'Failed to reset analytics';
|
||||
setError(errorMsg);
|
||||
showError('Reset Failed', errorMsg);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to reset analytics');
|
||||
const errorMsg = 'Failed to reset analytics. Please try again.';
|
||||
setError(errorMsg);
|
||||
showError('Reset Failed', errorMsg);
|
||||
console.error('Reset error:', err);
|
||||
} finally {
|
||||
setResetting(false);
|
||||
@@ -165,19 +170,18 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
}
|
||||
}, [isAuthenticated, fetchAnalyticsData]);
|
||||
|
||||
const StatCard = ({ title, value, icon: Icon, color, trend, trendValue, description }: {
|
||||
const StatCard = ({ title, value, icon: Icon, color, description, tooltip }: {
|
||||
title: string;
|
||||
value: number | string;
|
||||
icon: React.ComponentType<{ className?: string; size?: number }>;
|
||||
color: string;
|
||||
trend?: 'up' | 'down' | 'neutral';
|
||||
trendValue?: string;
|
||||
description?: string;
|
||||
tooltip?: string;
|
||||
}) => (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white border border-stone-200 p-6 rounded-xl hover:shadow-md transition-all duration-200"
|
||||
className="bg-white border border-stone-200 p-6 rounded-xl hover:shadow-md transition-all duration-200 group relative"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
@@ -191,26 +195,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
</div>
|
||||
</div>
|
||||
<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-600' :
|
||||
trend === 'down' ? 'text-red-600' : 'text-yellow-600'
|
||||
}`}>
|
||||
<TrendingUp className={`w-4 h-4 ${trend === 'down' ? 'rotate-180' : ''}`} />
|
||||
<span>{trendValue}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{tooltip && (
|
||||
<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">
|
||||
{tooltip}
|
||||
<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>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
const getDifficultyColor = (difficulty: string) => {
|
||||
switch (difficulty) {
|
||||
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';
|
||||
case 'Beginner': return 'bg-stone-50 text-stone-700 border-stone-200';
|
||||
case 'Intermediate': return 'bg-stone-100 text-stone-700 border-stone-300';
|
||||
case 'Advanced': return 'bg-stone-200 text-stone-800 border-stone-400';
|
||||
case 'Expert': return 'bg-stone-300 text-stone-900 border-stone-500';
|
||||
default: return 'bg-stone-50 text-stone-600 border-stone-200';
|
||||
}
|
||||
};
|
||||
@@ -237,7 +238,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
<BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
|
||||
Analytics Dashboard
|
||||
</h1>
|
||||
<p className="text-stone-500 mt-2">Portfolio performance and user engagement metrics</p>
|
||||
<p className="text-stone-500 mt-2">Portfolio performance and analytics metrics</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* Time Range Selector */}
|
||||
@@ -307,45 +308,42 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
value={data.overview.totalViews.toLocaleString()}
|
||||
icon={Eye}
|
||||
color="bg-stone-100 text-stone-600"
|
||||
trend="up"
|
||||
trendValue="+12.5%"
|
||||
description="All-time page views"
|
||||
tooltip="✅ REAL DATA: Total page views tracked from the PageView database table. Each visit to a project page or the homepage is automatically recorded with IP, user agent, and timestamp."
|
||||
/>
|
||||
<StatCard
|
||||
title="Projects"
|
||||
value={data.overview.totalProjects}
|
||||
icon={Globe}
|
||||
color="bg-green-100 text-green-600"
|
||||
trend="up"
|
||||
trendValue="+2"
|
||||
color="bg-stone-100 text-stone-600"
|
||||
description={`${data.overview.publishedProjects} published`}
|
||||
/>
|
||||
<StatCard
|
||||
title="Engagement"
|
||||
value={data.overview.totalLikes}
|
||||
icon={Heart}
|
||||
color="bg-pink-100 text-pink-600"
|
||||
trend="up"
|
||||
trendValue="+8.2%"
|
||||
description="Total likes & shares"
|
||||
tooltip="✅ REAL DATA: Total number of projects in your portfolio. Shows published vs unpublished projects from your database."
|
||||
/>
|
||||
<StatCard
|
||||
title="Performance"
|
||||
value={data.overview.avgLighthouse}
|
||||
value={data.overview.avgLighthouse > 0 ? data.overview.avgLighthouse : 'N/A'}
|
||||
icon={Zap}
|
||||
color="bg-orange-100 text-orange-600"
|
||||
trend="up"
|
||||
trendValue="+5%"
|
||||
description="Avg Lighthouse score"
|
||||
color="bg-stone-100 text-stone-600"
|
||||
description={data.overview.avgLighthouse > 0 ? "Avg Lighthouse score" : "No performance data yet"}
|
||||
tooltip={data.overview.avgLighthouse > 0
|
||||
? "✅ REAL DATA: Average Lighthouse performance score (0-100) calculated from real Web Vitals metrics (LCP, FCP, CLS, FID, TTFB) collected from actual page visits. Only shown when real performance data exists."
|
||||
: "No performance data collected yet. Scores will appear after visitors load your pages and Web Vitals are tracked."}
|
||||
/>
|
||||
<StatCard
|
||||
title="Bounce Rate"
|
||||
value={`${data.metrics.bounceRate}%`}
|
||||
value={`${data.metrics?.bounceRate || 0}%`}
|
||||
icon={MousePointer}
|
||||
color="bg-stone-100 text-stone-600"
|
||||
trend="down"
|
||||
trendValue="-2.1%"
|
||||
description="User retention"
|
||||
tooltip="✅ REAL DATA: Percentage of sessions where users viewed only one page before leaving. Calculated from PageView records grouped by IP address. Lower is better."
|
||||
/>
|
||||
<StatCard
|
||||
title="Avg Session"
|
||||
value={data.metrics?.avgSessionDuration ? `${Math.round(data.metrics.avgSessionDuration / 60)}m` : '0m'}
|
||||
icon={Activity}
|
||||
color="bg-stone-100 text-stone-600"
|
||||
description="Average session duration"
|
||||
tooltip="✅ REAL DATA: Average time users spend on your site per session, calculated from the time difference between first and last pageview per IP address. Only calculated for sessions with multiple pageviews."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -355,7 +353,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
{/* Top Projects */}
|
||||
<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" />
|
||||
<Award className="w-5 h-5 mr-2 text-stone-600" />
|
||||
Top Performing Projects
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
@@ -379,9 +377,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
<p className="text-stone-500 text-sm">{project.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-right group/views relative">
|
||||
<p className="text-stone-900 font-bold">{project.views.toLocaleString()}</p>
|
||||
<p className="text-stone-500 text-sm">views</p>
|
||||
<div className="absolute bottom-full right-0 mb-2 px-3 py-2 bg-stone-900/95 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover/views:opacity-100 transition-opacity whitespace-normal max-w-xs z-50 shadow-xl backdrop-blur-sm pointer-events-none">
|
||||
✅ REAL DATA: Page views tracked from PageView table for this project. Each visit is automatically recorded.
|
||||
<div className="absolute top-full right-4 -mt-1 w-2 h-2 bg-stone-900/95 rotate-45"></div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -391,7 +393,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
{/* Categories Distribution */}
|
||||
<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" />
|
||||
<BarChart3 className="w-5 h-5 mr-2 text-stone-600" />
|
||||
Categories
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
@@ -422,12 +424,12 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Difficulty & Engagement */}
|
||||
{/* Difficulty & Activity */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Difficulty Distribution */}
|
||||
<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" />
|
||||
<Target className="w-5 h-5 mr-2 text-stone-600" />
|
||||
Difficulty Levels
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
@@ -465,7 +467,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
transition={{ delay: index * 0.1 }}
|
||||
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-500 rounded-full animate-pulse"></div>
|
||||
<div className="w-2 h-2 bg-stone-500 rounded-full animate-pulse"></div>
|
||||
<div className="flex-1">
|
||||
<p className="text-stone-900 font-medium text-sm">{project.title}</p>
|
||||
<p className="text-stone-500 text-xs">
|
||||
@@ -480,8 +482,8 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
)}
|
||||
<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'
|
||||
? 'bg-stone-100 text-stone-700'
|
||||
: 'bg-stone-200 text-stone-700'
|
||||
}`}>
|
||||
{project.published ? 'Live' : 'Draft'}
|
||||
</span>
|
||||
@@ -518,13 +520,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
|
||||
<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')}
|
||||
onChange={(e) => setResetType(e.target.value as 'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all')}
|
||||
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>
|
||||
<option value="analytics">Analytics Only (project view counts)</option>
|
||||
<option value="pageviews">Page Views Only (all tracked visits)</option>
|
||||
<option value="interactions">User Interactions Only</option>
|
||||
<option value="performance">Performance Metrics Only</option>
|
||||
<option value="performance">Performance Metrics Only (Lighthouse scores)</option>
|
||||
<option value="all">Everything (Complete Reset)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user