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>
|
||||
|
||||
@@ -16,12 +16,37 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
// Track page view
|
||||
const trackPageView = () => {
|
||||
const trackPageView = async () => {
|
||||
const path = window.location.pathname;
|
||||
const projectMatch = path.match(/\/projects\/([^\/]+)/);
|
||||
const projectId = projectMatch ? projectMatch[1] : null;
|
||||
|
||||
// Track to Umami (if available)
|
||||
trackEvent('page-view', {
|
||||
url: window.location.pathname,
|
||||
url: path,
|
||||
referrer: document.referrer,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
// Track to our API
|
||||
try {
|
||||
await fetch('/api/analytics/track', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'pageview',
|
||||
projectId: projectId,
|
||||
page: path
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
// Silently fail
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('Error tracking page view:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Track page load performance
|
||||
@@ -30,6 +55,62 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
// Track initial page view
|
||||
trackPageView();
|
||||
|
||||
// Track performance metrics to our API
|
||||
const trackPerformanceToAPI = async () => {
|
||||
try {
|
||||
// Get current page path to extract project ID if on project page
|
||||
const path = window.location.pathname;
|
||||
const projectMatch = path.match(/\/projects\/([^\/]+)/);
|
||||
const projectId = projectMatch ? projectMatch[1] : null;
|
||||
|
||||
// Wait for page to fully load
|
||||
setTimeout(async () => {
|
||||
const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
|
||||
const paintEntries = performance.getEntriesByType('paint');
|
||||
const lcpEntries = performance.getEntriesByType('largest-contentful-paint');
|
||||
|
||||
const fcp = paintEntries.find((e: PerformanceEntry) => e.name === 'first-contentful-paint');
|
||||
const lcp = lcpEntries[lcpEntries.length - 1];
|
||||
|
||||
const performanceData = {
|
||||
loadTime: navigation ? navigation.loadEventEnd - navigation.fetchStart : 0,
|
||||
fcp: fcp ? fcp.startTime : 0,
|
||||
lcp: lcp ? lcp.startTime : 0,
|
||||
ttfb: navigation ? navigation.responseStart - navigation.fetchStart : 0,
|
||||
cls: 0, // Will be updated by CLS observer
|
||||
fid: 0, // Will be updated by FID observer
|
||||
si: 0 // Speed Index - would need to calculate
|
||||
};
|
||||
|
||||
// Send performance data
|
||||
await fetch('/api/analytics/track', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'performance',
|
||||
projectId: projectId,
|
||||
page: path,
|
||||
performance: performanceData
|
||||
})
|
||||
});
|
||||
}, 2000); // Wait 2 seconds for page to stabilize
|
||||
} catch (error) {
|
||||
// Silently fail
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error('Error tracking performance:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Track performance after page load
|
||||
if (document.readyState === 'complete') {
|
||||
trackPerformanceToAPI();
|
||||
} else {
|
||||
window.addEventListener('load', trackPerformanceToAPI);
|
||||
}
|
||||
|
||||
// Track route changes (for SPA navigation)
|
||||
const handleRouteChange = () => {
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -34,8 +34,8 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
|
||||
useEffect(() => {
|
||||
if (toast.duration !== 0) {
|
||||
const timer = setTimeout(() => {
|
||||
setTimeout(() => onRemove(toast.id), 300);
|
||||
}, toast.duration || 5000);
|
||||
setTimeout(() => onRemove(toast.id), 200);
|
||||
}, toast.duration || 3000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
@@ -59,39 +59,39 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
|
||||
const getColors = () => {
|
||||
switch (toast.type) {
|
||||
case 'success':
|
||||
return 'bg-white border-green-300 text-green-900 shadow-lg';
|
||||
return 'bg-stone-50 border-green-200 text-green-800 shadow-md';
|
||||
case 'error':
|
||||
return 'bg-white border-red-300 text-red-900 shadow-lg';
|
||||
return 'bg-stone-50 border-red-200 text-red-800 shadow-md';
|
||||
case 'warning':
|
||||
return 'bg-white border-yellow-300 text-yellow-900 shadow-lg';
|
||||
return 'bg-stone-50 border-yellow-200 text-yellow-800 shadow-md';
|
||||
case 'info':
|
||||
return 'bg-white border-blue-300 text-blue-900 shadow-lg';
|
||||
return 'bg-stone-50 border-stone-200 text-stone-800 shadow-md';
|
||||
default:
|
||||
return 'bg-white border-gray-300 text-gray-900 shadow-lg';
|
||||
return 'bg-stone-50 border-stone-200 text-stone-800 shadow-md';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -50, scale: 0.9 }}
|
||||
initial={{ opacity: 0, y: -20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -50, scale: 0.9 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className={`relative p-4 rounded-xl border ${getColors()} shadow-xl hover:shadow-2xl transition-all duration-300 max-w-sm`}
|
||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className={`relative p-3 rounded-lg border ${getColors()} shadow-lg hover:shadow-xl transition-all duration-200 max-w-xs text-sm`}
|
||||
>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex items-start space-x-2">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
{getIcon()}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-sm font-semibold mb-1">{toast.title}</h4>
|
||||
<p className="text-sm opacity-90">{toast.message}</p>
|
||||
<h4 className="text-xs font-semibold mb-0.5 leading-tight">{toast.title}</h4>
|
||||
<p className="text-xs opacity-90 leading-tight">{toast.message}</p>
|
||||
|
||||
{toast.action && (
|
||||
<button
|
||||
onClick={toast.action.onClick}
|
||||
className="mt-2 text-xs font-medium underline hover:no-underline transition-all"
|
||||
className="mt-1.5 text-xs font-medium underline hover:no-underline transition-all"
|
||||
>
|
||||
{toast.action.label}
|
||||
</button>
|
||||
@@ -100,9 +100,9 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
|
||||
|
||||
<button
|
||||
onClick={() => onRemove(toast.id)}
|
||||
className="flex-shrink-0 p-1 rounded-lg hover:bg-gray-100 transition-colors"
|
||||
className="flex-shrink-0 p-0.5 rounded hover:bg-gray-100/50 transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-500" />
|
||||
<X className="w-3 h-3 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -111,8 +111,8 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
|
||||
<motion.div
|
||||
initial={{ width: '100%' }}
|
||||
animate={{ width: '0%' }}
|
||||
transition={{ duration: (toast.duration || 5000) / 1000, ease: "linear" }}
|
||||
className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-stone-400 to-stone-600 rounded-b-xl"
|
||||
transition={{ duration: (toast.duration || 3000) / 1000, ease: "linear" }}
|
||||
className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-stone-400 to-stone-600 rounded-b-lg"
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
@@ -195,7 +195,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
type: 'error',
|
||||
title,
|
||||
message: message || '',
|
||||
duration: 6000
|
||||
duration: 4000 // Shorter duration
|
||||
});
|
||||
}, [addToast]);
|
||||
|
||||
@@ -291,7 +291,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
{children}
|
||||
|
||||
{/* Toast Container */}
|
||||
<div className="fixed top-4 right-4 z-50 space-y-3 max-w-sm">
|
||||
<div className="fixed top-4 right-4 z-50 space-y-2 max-w-xs">
|
||||
<AnimatePresence>
|
||||
{toasts.map((toast) => (
|
||||
<ToastItem
|
||||
|
||||
Reference in New Issue
Block a user