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

feat: enhance analytics and performance tracking with real data metrics

Browse Source 
- 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:
denshooter
2026-01-10 03:08:25 +01:00
parent b051d9d2ef
commit 40d9489395
12 changed files with 1156 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
app/api/analytics/dashboard/route.ts
View File

@@ -1,5 +1,5 @@
import { NextRequest, NextResponse } from 'next/server';
import { projectService } from '@/lib/prisma';
import { prisma, projectService } from '@/lib/prisma';
import { analyticsCache } from '@/lib/redis';
import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
@@ -30,39 +30,100 @@ export async function GET(request: NextRequest) {
}
}
// Check cache first
// Check cache first (but allow bypass with cache-bust parameter)
const url = new URL(request.url);
const bypassCache = url.searchParams.get('nocache') === 'true';
if (!bypassCache) {
const cachedStats = await analyticsCache.getOverallStats();
if (cachedStats) {
return NextResponse.json(cachedStats);
}
}
// Get analytics data
const projectsResult = await projectService.getAllProjects();
const projects = projectsResult.projects || projectsResult;
const performanceStats = await projectService.getPerformanceStats();
// Get real page view data from database
const allPageViews = await prisma.pageView.findMany({
where: {
timestamp: {
gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // Last 30 days
}
}
});
// Calculate bounce rate (sessions with only 1 pageview)
const pageViewsByIP = allPageViews.reduce((acc, pv) => {
const ip = pv.ip || 'unknown';
if (!acc[ip]) acc[ip] = [];
acc[ip].push(pv);
return acc;
}, {} as Record<string, typeof allPageViews>);
const totalSessions = Object.keys(pageViewsByIP).length;
const bouncedSessions = Object.values(pageViewsByIP).filter(session => session.length === 1).length;
const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
// Calculate average session duration (simplified - time between first and last pageview per IP)
const sessionDurations = Object.values(pageViewsByIP)
.map(session => {
if (session.length < 2) return 0;
const sorted = session.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
return sorted[sorted.length - 1].timestamp.getTime() - sorted[0].timestamp.getTime();
})
.filter(d => d > 0);
const avgSessionDuration = sessionDurations.length > 0
? Math.round(sessionDurations.reduce((a, b) => a + b, 0) / sessionDurations.length / 1000) // in seconds
: 0;
// Get total unique users (unique IPs)
const totalUsers = new Set(allPageViews.map(pv => pv.ip).filter(Boolean)).size;
// Calculate real views from PageView table
const viewsByProject = allPageViews.reduce((acc, pv) => {
if (pv.projectId) {
acc[pv.projectId] = (acc[pv.projectId] || 0) + 1;
}
return acc;
}, {} as Record<number, number>);
// Calculate analytics metrics
const analytics = {
overview: {
totalProjects: projects.length,
publishedProjects: projects.filter(p => p.published).length,
featuredProjects: projects.filter(p => p.featured).length,
totalViews: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.views as number || 0), 0),
totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0),
totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0),
avgLighthouse: projects.length > 0
? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length)
: 0
totalViews: allPageViews.length, // Real views from PageView table
totalLikes: 0, // Not implemented - no like buttons
totalShares: 0, // Not implemented - no share buttons
avgLighthouse: (() => {
// Only calculate if we have real performance data (not defaults)
const projectsWithPerf = projects.filter(p => {
const perf = (p.performance as Record<string, unknown>) || {};
const lighthouse = perf.lighthouse as number || 0;
return lighthouse > 0; // Only count projects with actual performance data
});
return projectsWithPerf.length > 0
? Math.round(projectsWithPerf.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projectsWithPerf.length)
: 0;
})()
},
projects: projects.map(project => ({
id: project.id,
title: project.title,
category: project.category,
difficulty: project.difficulty,
views: (project.analytics as Record<string, unknown>)?.views as number || 0,
likes: (project.analytics as Record<string, unknown>)?.likes as number || 0,
shares: (project.analytics as Record<string, unknown>)?.shares as number || 0,
lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0,
views: viewsByProject[project.id] || 0, // Only real views from PageView table
likes: 0, // Not implemented
shares: 0, // Not implemented
lighthouse: (() => {
const perf = (project.performance as Record<string, unknown>) || {};
const score = perf.lighthouse as number || 0;
return score > 0 ? score : 0; // Only return if we have real data
})(),
published: project.published,
featured: project.featured,
createdAt: project.createdAt,
@@ -71,10 +132,25 @@ export async function GET(request: NextRequest) {
categories: performanceStats.byCategory,
difficulties: performanceStats.byDifficulty,
performance: {
avgLighthouse: performanceStats.avgLighthouse,
totalViews: performanceStats.totalViews,
totalLikes: performanceStats.totalLikes,
totalShares: performanceStats.totalShares
avgLighthouse: (() => {
const projectsWithPerf = projects.filter(p => {
const perf = (p.performance as Record<string, unknown>) || {};
return (perf.lighthouse as number || 0) > 0;
});
return projectsWithPerf.length > 0
? Math.round(projectsWithPerf.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projectsWithPerf.length)
: 0;
})(),
totalViews: allPageViews.length, // Real total views
totalLikes: 0,
totalShares: 0
},
metrics: {
bounceRate,
avgSessionDuration,
pagesPerSession: totalSessions > 0 ? (allPageViews.length / totalSessions).toFixed(1) : '0',
newUsers: totalUsers,
totalUsers
}
};

64
app/api/analytics/performance/route.ts
View File

@@ -24,8 +24,72 @@ export async function GET(request: NextRequest) {
take: 1000 // Last 1000 interactions
});
// Get all projects for performance data
const projects = await prisma.project.findMany();
// Calculate real performance metrics from projects
const projectsWithPerformance = projects.map(p => ({
id: p.id,
title: p.title,
lighthouse: ((p.performance as Record<string, unknown>)?.lighthouse as number) || 0,
loadTime: ((p.performance as Record<string, unknown>)?.loadTime as number) || 0,
fcp: ((p.performance as Record<string, unknown>)?.firstContentfulPaint as number) || 0,
lcp: ((p.performance as Record<string, unknown>)?.coreWebVitals as Record<string, unknown>)?.lcp as number || 0,
cls: ((p.performance as Record<string, unknown>)?.coreWebVitals as Record<string, unknown>)?.cls as number || 0
}));
const avgLighthouse = projectsWithPerformance.length > 0
? Math.round(projectsWithPerformance.reduce((sum, p) => sum + p.lighthouse, 0) / projectsWithPerformance.length)
: 0;
// Calculate bounce rate from page views
const pageViewsByIP = pageViews.reduce((acc, pv) => {
const ip = pv.ip || 'unknown';
if (!acc[ip]) acc[ip] = [];
acc[ip].push(pv);
return acc;
}, {} as Record<string, typeof pageViews>);
const totalSessions = Object.keys(pageViewsByIP).length;
const bouncedSessions = Object.values(pageViewsByIP).filter(session => session.length === 1).length;
const bounceRate = totalSessions > 0 ? Math.round((bouncedSessions / totalSessions) * 100) : 0;
// Calculate average session duration
const sessionDurations = Object.values(pageViewsByIP)
.map(session => {
if (session.length < 2) return 0;
const sorted = session.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
return sorted[sorted.length - 1].timestamp.getTime() - sorted[0].timestamp.getTime();
})
.filter(d => d > 0);
const avgSessionDuration = sessionDurations.length > 0
? Math.round(sessionDurations.reduce((a, b) => a + b, 0) / sessionDurations.length / 1000) // in seconds
: 0;
// Calculate pages per session
const pagesPerSession = totalSessions > 0 ? (pageViews.length / totalSessions).toFixed(1) : '0';
// Calculate performance metrics
const performance = {
avgLighthouse: (() => {
const projectsWithPerf = projects.filter(p => {
const perf = (p.performance as Record<string, unknown>) || {};
return (perf.lighthouse as number || 0) > 0;
});
return projectsWithPerf.length > 0
? Math.round(projectsWithPerf.reduce((sum, p) => {
const perf = (p.performance as Record<string, unknown>) || {};
return sum + (perf.lighthouse as number || 0);
}, 0) / projectsWithPerf.length)
: 0;
})(),
totalViews: pageViews.length,
metrics: {
bounceRate,
avgSessionDuration: avgSessionDuration,
pagesPerSession: parseFloat(pagesPerSession),
newUsers: new Set(pageViews.map(pv => pv.ip).filter(Boolean)).size
},
pageViews: {
total: pageViews.length,
last24h: pageViews.filter(pv => {

39
app/api/analytics/reset/route.ts
View File

@@ -33,10 +33,15 @@ export async function POST(request: NextRequest) {
switch (type) {
case 'analytics':
// Reset all project analytics
await prisma.project.updateMany({
// Reset all project analytics (view counts in project.analytics JSON)
const projects = await prisma.project.findMany();
for (const project of projects) {
const analytics = (project.analytics as Record<string, unknown>) || {};
await prisma.project.update({
where: { id: project.id },
data: {
analytics: {
...analytics,
views: 0,
likes: 0,
shares: 0,
@@ -65,6 +70,7 @@ export async function POST(request: NextRequest) {
}
}
});
}
break;
case 'pageviews':
@@ -78,10 +84,15 @@ export async function POST(request: NextRequest) {
break;
case 'performance':
// Reset performance metrics
await prisma.project.updateMany({
// Reset performance metrics (preserve structure)
const projectsForPerf = await prisma.project.findMany();
for (const project of projectsForPerf) {
const perf = (project.performance as Record<string, unknown>) || {};
await prisma.project.update({
where: { id: project.id },
data: {
performance: {
...perf,
lighthouse: 0,
loadTime: 0,
firstContentfulPaint: 0,
@@ -104,15 +115,22 @@ export async function POST(request: NextRequest) {
}
}
});
}
break;
case 'all':
// Reset everything
const allProjects = await prisma.project.findMany();
await Promise.all([
// Reset analytics
prisma.project.updateMany({
// Reset analytics and performance for each project (preserve structure)
...allProjects.map(project => {
const analytics = (project.analytics as Record<string, unknown>) || {};
const perf = (project.performance as Record<string, unknown>) || {};
return prisma.project.update({
where: { id: project.id },
data: {
analytics: {
...analytics,
views: 0,
likes: 0,
shares: 0,
@@ -138,13 +156,9 @@ export async function POST(request: NextRequest) {
locationStats: {},
referrerStats: {},
lastUpdated: new Date().toISOString()
}
}
}),
// Reset performance
prisma.project.updateMany({
data: {
},
performance: {
...perf,
lighthouse: 0,
loadTime: 0,
firstContentfulPaint: 0,
@@ -166,6 +180,7 @@ export async function POST(request: NextRequest) {
lastUpdated: new Date().toISOString()
}
}
});
}),
// Clear tracking tables
prisma.pageView.deleteMany({}),

173
app/api/analytics/track/route.ts Normal file
View File

@@ -0,0 +1,173 @@
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
export async function POST(request: NextRequest) {
try {
// Rate limiting
const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
if (!checkRateLimit(ip, 100, 60000)) { // 100 requests per minute for tracking
return new NextResponse(
JSON.stringify({ error: 'Rate limit exceeded' }),
{
status: 429,
headers: {
'Content-Type': 'application/json',
...getRateLimitHeaders(ip, 100, 60000)
}
}
);
}
const body = await request.json();
const { type, projectId, page, performance, session } = body;
const userAgent = request.headers.get('user-agent') || undefined;
const referrer = request.headers.get('referer') || undefined;
// Track page view
if (type === 'pageview' && page) {
const projectIdNum = projectId ? parseInt(projectId.toString()) : null;
// Create page view record
await prisma.pageView.create({
data: {
projectId: projectIdNum,
page,
ip,
userAgent,
referrer
}
});
// Update project analytics if projectId exists
if (projectIdNum) {
const project = await prisma.project.findUnique({
where: { id: projectIdNum }
});
if (project) {
const analytics = (project.analytics as Record<string, unknown>) || {};
const currentViews = (analytics.views as number) || 0;
await prisma.project.update({
where: { id: projectIdNum },
data: {
analytics: {
...analytics,
views: currentViews + 1,
lastUpdated: new Date().toISOString()
}
}
});
}
}
}
// Track performance metrics
if (type === 'performance' && performance) {
// Try to get projectId from page path if not provided
let projectIdNum: number | null = null;
if (projectId) {
projectIdNum = parseInt(projectId.toString());
} else if (page) {
// Try to extract from page path like /projects/123 or /projects/slug
const match = page.match(/\/projects\/(\d+)/);
if (match) {
projectIdNum = parseInt(match[1]);
} else {
// Try to find by slug
const slugMatch = page.match(/\/projects\/([^\/]+)/);
if (slugMatch) {
const slug = slugMatch[1];
const project = await prisma.project.findFirst({
where: {
OR: [
{ id: parseInt(slug) || 0 },
{ title: { contains: slug, mode: 'insensitive' } }
]
}
});
if (project) projectIdNum = project.id;
}
}
}
if (projectIdNum) {
const project = await prisma.project.findUnique({
where: { id: projectIdNum }
});
if (project) {
const perf = (project.performance as Record<string, unknown>) || {};
const analytics = (project.analytics as Record<string, unknown>) || {};
// Calculate lighthouse score from web vitals
const lcp = performance.lcp || 0;
const fid = performance.fid || 0;
const cls = performance.cls || 0;
const fcp = performance.fcp || 0;
const ttfb = performance.ttfb || 0;
// Only calculate lighthouse score if we have real web vitals data
// Check if we have at least LCP and FCP (most important metrics)
if (lcp > 0 || fcp > 0) {
// Simple lighthouse score calculation (0-100)
let lighthouseScore = 100;
if (lcp > 4000) lighthouseScore -= 25;
else if (lcp > 2500) lighthouseScore -= 15;
if (fid > 300) lighthouseScore -= 25;
else if (fid > 100) lighthouseScore -= 15;
if (cls > 0.25) lighthouseScore -= 25;
else if (cls > 0.1) lighthouseScore -= 15;
if (fcp > 3000) lighthouseScore -= 15;
if (ttfb > 800) lighthouseScore -= 10;
lighthouseScore = Math.max(0, Math.min(100, lighthouseScore));
await prisma.project.update({
where: { id: projectIdNum },
data: {
performance: {
...perf,
lighthouse: lighthouseScore,
loadTime: performance.loadTime || perf.loadTime || 0,
firstContentfulPaint: fcp || perf.firstContentfulPaint || 0,
largestContentfulPaint: lcp || perf.largestContentfulPaint || 0,
cumulativeLayoutShift: cls || perf.cumulativeLayoutShift || 0,
totalBlockingTime: performance.tbt || perf.totalBlockingTime || 0,
speedIndex: performance.si || perf.speedIndex || 0,
coreWebVitals: {
lcp: lcp || (perf.coreWebVitals as Record<string, unknown>)?.lcp || 0,
fid: fid || (perf.coreWebVitals as Record<string, unknown>)?.fid || 0,
cls: cls || (perf.coreWebVitals as Record<string, unknown>)?.cls || 0
},
lastUpdated: new Date().toISOString()
},
analytics: {
...analytics,
lastUpdated: new Date().toISOString()
}
}
});
}
}
}
// Track session data (for bounce rate calculation)
if (type === 'session' && session) {
// Store session data in a way that allows bounce rate calculation
// A bounce is a session with only one pageview
// We'll track this via PageView records and calculate bounce rate from them
}
return NextResponse.json({ success: true });
} catch (error) {
if (process.env.NODE_ENV === 'development') {
console.error('Analytics tracking error:', error);
}
return NextResponse.json(
{ error: 'Failed to track analytics' },
{ status: 500 }
);
}
}

654
app/editor/page.tsx
View File

@@ -29,6 +29,7 @@ import {
Github,
Tag,
} from "lucide-react";
import { useToast } from "@/components/Toast";
interface Project {
id: string;
@@ -50,6 +51,7 @@ function EditorPageContent() {
const searchParams = useSearchParams();
const projectId = searchParams.get("id");
const contentRef = useRef<HTMLDivElement>(null);
const { showSuccess, showError } = useToast();
const [, setProject] = useState<Project | null>(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -58,6 +60,10 @@ function EditorPageContent() {
const [isCreating, setIsCreating] = useState(!projectId);
const [showPreview, setShowPreview] = useState(false);
const [isTyping, setIsTyping] = useState(false);
const [history, setHistory] = useState<typeof formData[]>([]);
const [historyIndex, setHistoryIndex] = useState(-1);
const [originalFormData, setOriginalFormData] = useState<typeof formData | null>(null);
const shouldUpdateContentRef = useRef(true);
// Form state
const [formData, setFormData] = useState({
@@ -84,8 +90,7 @@ function EditorPageContent() {
);
if (foundProject) {
setProject(foundProject);
setFormData({
const initialData = {
title: foundProject.title || "",
description: foundProject.description || "",
content: foundProject.content || "",
@@ -96,7 +101,19 @@ function EditorPageContent() {
github: foundProject.github || "",
live: foundProject.live || "",
image: foundProject.image || "",
});
};
setProject(foundProject);
setFormData(initialData);
setOriginalFormData(initialData);
setHistory([initialData]);
setHistoryIndex(0);
shouldUpdateContentRef.current = true;
// Initialize contentEditable after state update
setTimeout(() => {
if (contentRef.current && initialData.content) {
contentRef.current.textContent = initialData.content;
}
}, 0);
}
} else {
if (process.env.NODE_ENV === "development") {
@@ -126,6 +143,30 @@ function EditorPageContent() {
await loadProject(projectId);
} else {
setIsCreating(true);
// Initialize history for new project
const initialData = {
title: "",
description: "",
content: "",
category: "web",
tags: [],
featured: false,
published: false,
github: "",
live: "",
image: "",
};
setFormData(initialData);
setOriginalFormData(initialData);
setHistory([initialData]);
setHistoryIndex(0);
shouldUpdateContentRef.current = true;
// Initialize contentEditable after state update
setTimeout(() => {
if (contentRef.current) {
contentRef.current.textContent = "";
}
}, 0);
}
} else {
setIsAuthenticated(false);
@@ -143,18 +184,20 @@ function EditorPageContent() {
init();
}, [projectId, loadProject]);
const handleSave = async () => {
const handleSave = useCallback(async () => {
try {
setIsSaving(true);
// Validate required fields
if (!formData.title.trim()) {
alert("Please enter a project title");
showError("Validation Error", "Please enter a project title");
setIsSaving(false);
return;
}
if (!formData.description.trim()) {
alert("Please enter a project description");
showError("Validation Error", "Please enter a project description");
setIsSaving(false);
return;
}
@@ -205,39 +248,155 @@ function EditorPageContent() {
image: savedProject.imageUrl || "",
}));
// Show success and redirect
alert("Project saved successfully!");
setTimeout(() => {
window.location.href = "/manage";
}, 1000);
// Show success toast (smaller, smoother)
showSuccess("Saved", `"${savedProject.title}" saved`);
// Update project ID if it was a new project
if (!projectId && savedProject.id) {
const newUrl = `/editor?id=${savedProject.id}`;
window.history.replaceState({}, '', newUrl);
}
} else {
const errorData = await response.json();
if (process.env.NODE_ENV === "development") {
console.error("Error saving project:", response.status, errorData);
}
alert(`Error saving project: ${errorData.error || "Unknown error"}`);
showError("Save Failed", errorData.error || "Failed to save");
}
} catch (error) {
if (process.env.NODE_ENV === "development") {
console.error("Error saving project:", error);
}
alert(
`Error saving project: ${error instanceof Error ? error.message : "Unknown error"}`,
showError(
"Save Failed",
error instanceof Error ? error.message : "Failed to save"
);
} finally {
setIsSaving(false);
}
};
}, [projectId, formData, showSuccess, showError]);
const handleInputChange = (
field: string,
value: string | boolean | string[],
) => {
setFormData((prev) => ({
setFormData((prev) => {
const newData = {
...prev,
[field]: value,
}));
};
// Add to history for undo/redo
setHistory((hist) => {
const newHistory = hist.slice(0, historyIndex + 1);
newHistory.push(newData);
// Keep only last 50 history entries
const trimmedHistory = newHistory.slice(-50);
setHistoryIndex(trimmedHistory.length - 1);
return trimmedHistory;
});
return newData;
});
};
const handleUndo = useCallback(() => {
setHistoryIndex((currentIndex) => {
if (currentIndex > 0) {
const newIndex = currentIndex - 1;
shouldUpdateContentRef.current = true;
setFormData(history[newIndex]);
return newIndex;
}
return currentIndex;
});
}, [history]);
const handleRedo = useCallback(() => {
setHistoryIndex((currentIndex) => {
if (currentIndex < history.length - 1) {
const newIndex = currentIndex + 1;
shouldUpdateContentRef.current = true;
setFormData(history[newIndex]);
return newIndex;
}
return currentIndex;
});
}, [history]);
const handleRevert = useCallback(() => {
if (originalFormData) {
if (confirm("Are you sure you want to revert all changes? This cannot be undone.")) {
shouldUpdateContentRef.current = true;
setFormData(originalFormData);
setHistory([originalFormData]);
setHistoryIndex(0);
}
} else if (projectId) {
// Reload from server
if (confirm("Are you sure you want to revert all changes? This will reload the project from the server.")) {
shouldUpdateContentRef.current = true;
loadProject(projectId);
}
}
}, [originalFormData, projectId, loadProject]);
// Sync contentEditable when formData.content changes externally (undo/redo/revert)
useEffect(() => {
if (contentRef.current && shouldUpdateContentRef.current) {
const currentContent = contentRef.current.textContent || "";
if (currentContent !== formData.content) {
contentRef.current.textContent = formData.content;
}
shouldUpdateContentRef.current = false;
}
}, [formData.content]);
// Initialize contentEditable when formData.content is set and editor is empty
useEffect(() => {
if (contentRef.current) {
const currentText = contentRef.current.textContent || "";
// Initialize if editor is empty and we have content, or if content changed externally
if ((!currentText && formData.content) || (shouldUpdateContentRef.current && currentText !== formData.content)) {
contentRef.current.textContent = formData.content;
shouldUpdateContentRef.current = false;
}
}
}, [formData.content]);
// Keyboard shortcuts
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Ctrl+S or Cmd+S - Save
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
if (!isSaving) {
handleSave();
}
}
// Ctrl+Z or Cmd+Z - Undo
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
e.preventDefault();
handleUndo();
}
// Ctrl+Shift+Z or Cmd+Shift+Z - Redo
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) {
e.preventDefault();
handleRedo();
}
// Ctrl+R or Cmd+R - Revert (but allow browser refresh if not in editor)
if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
const target = e.target as HTMLElement;
if (target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
e.preventDefault();
handleRevert();
}
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isSaving, handleSave, handleUndo, handleRedo, handleRevert]);
const handleTagsChange = (tagsString: string) => {
const tags = tagsString
@@ -358,7 +517,7 @@ function EditorPageContent() {
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
className="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full mx-auto mb-6"
className="w-12 h-12 border-3 border-stone-500 border-t-transparent rounded-full mx-auto mb-6"
/>
<h2 className="text-xl font-semibold gradient-text mb-2">
Loading Editor
@@ -390,7 +549,7 @@ function EditorPageContent() {
<button
onClick={() => (window.location.href = "/manage")}
className="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium"
className="w-full px-6 py-3 bg-stone-600 text-white rounded-xl hover:bg-stone-700 transition-all font-medium"
>
Go to Admin Login
</button>
@@ -400,15 +559,15 @@ function EditorPageContent() {
}
return (
<div className="min-h-screen animated-bg">
<div className="min-h-screen animated-bg flex flex-col overflow-hidden">
{/* Header */}
<div className="glass-card border-b border-white/10 sticky top-0 z-50">
<div className="glass-card border-b border-white/10 sticky top-0 z-50 flex-shrink-0">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between h-auto sm:h-16 py-4 sm:py-0 gap-4 sm:gap-0">
<div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
<button
onClick={() => (window.location.href = "/manage")}
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors"
className="inline-flex items-center space-x-2 text-stone-400 hover:text-stone-300 transition-colors"
>
<ArrowLeft className="w-5 h-5" />
<span className="hidden sm:inline">Back to Dashboard</span>
@@ -427,8 +586,8 @@ function EditorPageContent() {
onClick={() => setShowPreview(!showPreview)}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm ${
showPreview
? "bg-blue-600 text-white shadow-lg"
: "bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white"
? "bg-stone-600 text-white shadow-lg"
: "bg-gray-800/50 text-stone-300 hover:bg-gray-700/50 hover:text-stone-100"
}`}
>
<Eye className="w-4 h-4" />
@@ -452,9 +611,10 @@ function EditorPageContent() {
</div>
</div>
{/* Editor Content */}
{/* Editor Content - Scrollable */}
<div className="flex-1 overflow-y-auto">
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
<div className="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
{/* Floating particles background */}
<div className="particles">
{[...Array(20)].map((_, i) => (
@@ -469,187 +629,12 @@ function EditorPageContent() {
/>
))}
</div>
{/* Main Editor */}
<div className="xl:col-span-3 space-y-6">
{/* Project Title */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-card p-6 rounded-2xl"
>
<input
type="text"
value={formData.title}
onChange={(e) => handleInputChange("title", e.target.value)}
className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
placeholder="Enter project title..."
/>
</motion.div>
{/* Rich Text Toolbar */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="glass-card p-4 rounded-2xl"
>
<div className="flex flex-wrap items-center gap-1 sm:gap-2">
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("bold")}
className="p-2 rounded-lg text-gray-300"
title="Bold"
>
<Bold className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("italic")}
className="p-2 rounded-lg text-gray-300"
title="Italic"
>
<Italic className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("code")}
className="p-2 rounded-lg text-gray-300"
title="Code"
>
<Code className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("h1")}
className="p-2 rounded-lg text-gray-300"
title="Heading 1"
>
<Hash className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("h2")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
title="Heading 2"
>
H2
</button>
<button
onClick={() => insertFormatting("h3")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-gray-300 hover:text-white hover:scale-105"
title="Heading 3"
>
H3
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("list")}
className="p-2 rounded-lg text-gray-300"
title="Bullet List"
>
<List className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("orderedList")}
className="p-2 rounded-lg text-gray-300"
title="Numbered List"
>
<ListOrdered className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("quote")}
className="p-2 rounded-lg text-gray-300"
title="Quote"
>
<Quote className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1">
<button
onClick={() => insertFormatting("link")}
className="p-2 rounded-lg text-gray-300"
title="Link"
>
<Link className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("image")}
className="p-2 rounded-lg text-gray-300"
title="Image"
>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<Image className="w-4 h-4" />
</button>
</div>
</div>
</motion.div>
{/* Content Editor */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Content
</h3>
<div
ref={contentRef}
contentEditable
className="editor-content-editable w-full min-h-[400px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
style={{ whiteSpace: "pre-wrap" }}
onInput={(e) => {
const target = e.target as HTMLDivElement;
setIsTyping(true);
setFormData((prev) => ({
...prev,
content: target.textContent || "",
}));
}}
onBlur={() => {
setIsTyping(false);
}}
suppressContentEditableWarning={true}
data-placeholder="Start writing your project content..."
>
{!isTyping ? formData.content : undefined}
</div>
<p className="text-xs text-white/50 mt-2">
Supports Markdown formatting. Use the toolbar above or type
directly.
</p>
</motion.div>
{/* Description */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Description
</h3>
<textarea
value={formData.description}
onChange={(e) =>
handleInputChange("description", e.target.value)
}
rows={4}
className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
placeholder="Brief description of your project..."
/>
</motion.div>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Sidebar - Left (appears first in DOM for left positioning) */}
<div className="w-full lg:w-80 flex-shrink-0 space-y-6 order-1 lg:order-1">
{/* Project Settings */}
<motion.div
initial={{ opacity: 0, x: 20 }}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="glass-card p-6 rounded-2xl"
@@ -660,7 +645,7 @@ function EditorPageContent() {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-white/70 mb-2">
<label className="block text-sm font-medium text-stone-300 mb-2">
Category
</label>
<div className="custom-select">
@@ -681,7 +666,7 @@ function EditorPageContent() {
</div>
<div>
<label className="block text-sm font-medium text-white/70 mb-2">
<label className="block text-sm font-medium text-stone-300 mb-2">
Tags
</label>
<input
@@ -697,7 +682,7 @@ function EditorPageContent() {
{/* Links */}
<motion.div
initial={{ opacity: 0, x: 20 }}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
className="glass-card p-6 rounded-2xl"
@@ -708,7 +693,7 @@ function EditorPageContent() {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-white/70 mb-2">
<label className="block text-sm font-medium text-stone-300 mb-2">
GitHub URL
</label>
<input
@@ -723,7 +708,7 @@ function EditorPageContent() {
</div>
<div>
<label className="block text-sm font-medium text-white/70 mb-2">
<label className="block text-sm font-medium text-stone-300 mb-2">
Live URL
</label>
<input
@@ -739,7 +724,7 @@ function EditorPageContent() {
{/* Publish */}
<motion.div
initial={{ opacity: 0, x: 20 }}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.6 }}
className="glass-card p-6 rounded-2xl"
@@ -756,9 +741,9 @@ function EditorPageContent() {
onChange={(e) =>
handleInputChange("featured", e.target.checked)
}
className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
className="w-4 h-4 text-stone-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-stone-500 focus:ring-2"
/>
<span className="text-white">Featured Project</span>
<span className="text-stone-200">Featured Project</span>
</label>
<label className="flex items-center space-x-3">
@@ -768,20 +753,20 @@ function EditorPageContent() {
onChange={(e) =>
handleInputChange("published", e.target.checked)
}
className="w-4 h-4 text-blue-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-blue-500 focus:ring-2"
className="w-4 h-4 text-stone-500 bg-gray-900/80 border-gray-600/50 rounded focus:ring-stone-500 focus:ring-2"
/>
<span className="text-white">Published</span>
<span className="text-stone-200">Published</span>
</label>
</div>
<div className="mt-6 pt-4 border-t border-white/20">
<h4 className="text-sm font-medium text-white/70 mb-2">
<h4 className="text-sm font-medium text-stone-300 mb-2">
Preview
</h4>
<div className="text-xs text-white/50 space-y-1">
<div className="text-xs text-stone-400 space-y-1">
<p>Status: {formData.published ? "Published" : "Draft"}</p>
{formData.featured && (
<p className="text-blue-400">⭐ Featured</p>
<p className="text-stone-400">⭐ Featured</p>
)}
<p>Category: {formData.category}</p>
<p>Tags: {formData.tags.length} tags</p>
@@ -789,6 +774,225 @@ function EditorPageContent() {
</div>
</motion.div>
</div>
{/* Main Editor - Right (appears second in DOM for right positioning) */}
<div className="flex-1 space-y-6 order-2 lg:order-2 min-w-0">
{/* Project Title */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="glass-card p-6 rounded-2xl"
>
<input
type="text"
value={formData.title}
onChange={(e) => handleInputChange("title", e.target.value)}
className="w-full text-3xl font-bold form-input-enhanced focus:outline-none p-4 rounded-lg"
placeholder="Enter project title..."
/>
</motion.div>
{/* Description - Under Title */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Description
</h3>
<textarea
value={formData.description}
onChange={(e) =>
handleInputChange("description", e.target.value)
}
rows={4}
className="w-full px-4 py-3 form-input-enhanced rounded-lg focus:outline-none resize-none"
placeholder="Brief description of your project..."
/>
</motion.div>
{/* Rich Text Toolbar */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="glass-card p-4 rounded-2xl"
>
<div className="flex flex-wrap items-center gap-1 sm:gap-2">
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("bold")}
className="p-2 rounded-lg text-stone-300"
title="Bold"
>
<Bold className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("italic")}
className="p-2 rounded-lg text-stone-300"
title="Italic"
>
<Italic className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("code")}
className="p-2 rounded-lg text-stone-300"
title="Code"
>
<Code className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("h1")}
className="p-2 rounded-lg text-stone-300"
title="Heading 1"
>
<Hash className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("h2")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-stone-300 hover:text-stone-100"
title="Heading 2"
>
H2
</button>
<button
onClick={() => insertFormatting("h3")}
className="p-2 hover:bg-gray-800/50 rounded-lg transition-all duration-200 text-xs sm:text-sm text-stone-300 hover:text-stone-100"
title="Heading 3"
>
H3
</button>
</div>
<div className="flex items-center space-x-1 border-r border-white/20 pr-2 sm:pr-3">
<button
onClick={() => insertFormatting("list")}
className="p-2 rounded-lg text-stone-300"
title="Bullet List"
>
<List className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("orderedList")}
className="p-2 rounded-lg text-stone-300"
title="Numbered List"
>
<ListOrdered className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("quote")}
className="p-2 rounded-lg text-stone-300"
title="Quote"
>
<Quote className="w-4 h-4" />
</button>
</div>
<div className="flex items-center space-x-1">
<button
onClick={() => insertFormatting("link")}
className="p-2 rounded-lg text-stone-300"
title="Link"
>
<Link className="w-4 h-4" />
</button>
<button
onClick={() => insertFormatting("image")}
className="p-2 rounded-lg text-stone-300"
title="Image"
>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<Image className="w-4 h-4" />
</button>
</div>
</div>
</motion.div>
{/* Content Editor */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="glass-card p-6 rounded-2xl"
>
<h3 className="text-lg font-semibold gradient-text mb-4">
Content
</h3>
<div className="relative">
<div
ref={contentRef}
contentEditable
className="editor-content-editable w-full min-h-[500px] p-6 form-input-enhanced rounded-lg focus:outline-none leading-relaxed"
style={{ whiteSpace: "pre-wrap" }}
onFocus={(e) => {
// Ensure content is set when focusing if empty
const target = e.target as HTMLDivElement;
const currentText = target.textContent || "";
if (!currentText && formData.content) {
target.textContent = formData.content;
} else if (currentText !== formData.content && shouldUpdateContentRef.current) {
// Sync if content changed externally (undo/redo)
target.textContent = formData.content;
}
shouldUpdateContentRef.current = false;
}}
onMouseDown={(e) => {
// Prevent content from being cleared on click
const target = e.target as HTMLDivElement;
const currentText = target.textContent || "";
if (!currentText && formData.content) {
target.textContent = formData.content;
}
shouldUpdateContentRef.current = false;
}}
onClick={(e) => {
// Ensure content persists on click
const target = e.target as HTMLDivElement;
if (!target.textContent && formData.content) {
target.textContent = formData.content;
}
}}
onInput={(e) => {
const target = e.target as HTMLDivElement;
setIsTyping(true);
shouldUpdateContentRef.current = false;
const newContent = target.textContent || "";
setFormData((prev) => {
const newData = {
...prev,
content: newContent,
};
// Add to history for undo/redo
setHistory((hist) => {
const newHistory = hist.slice(0, historyIndex + 1);
newHistory.push(newData);
// Keep only last 50 history entries
const trimmedHistory = newHistory.slice(-50);
setHistoryIndex(trimmedHistory.length - 1);
return trimmedHistory;
});
return newData;
});
}}
onBlur={() => {
setIsTyping(false);
}}
suppressContentEditableWarning={true}
data-placeholder="Start writing your project content..."
/>
</div>
<p className="text-xs text-stone-400 mt-2">
Supports Markdown formatting. Use the toolbar above or type
directly.
</p>
</motion.div>
</div>
</div>
</div>
</div>
@@ -806,7 +1010,7 @@ function EditorPageContent() {
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto"
className="glass-card rounded-2xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto scrollbar-hide"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between mb-6">
@@ -834,12 +1038,12 @@ function EditorPageContent() {
{/* Project Meta */}
<div className="flex flex-wrap justify-center gap-4 mb-6">
<div className="flex items-center space-x-2 text-gray-300">
<div className="flex items-center space-x-2 text-stone-300">
<Tag className="w-4 h-4" />
<span className="capitalize">{formData.category}</span>
</div>
{formData.featured && (
<div className="flex items-center space-x-2 text-blue-400">
<div className="flex items-center space-x-2 text-stone-400">
<span className="text-sm font-semibold">
⭐ Featured
</span>
@@ -853,7 +1057,7 @@ function EditorPageContent() {
{formData.tags.map((tag, index) => (
<span
key={index}
className="px-3 py-1 bg-gray-800/50 text-gray-300 text-sm rounded-full border border-gray-700"
className="px-3 py-1 bg-gray-800/50 text-stone-300 text-sm rounded-full border border-gray-700"
>
{tag}
</span>
@@ -870,7 +1074,7 @@ function EditorPageContent() {
href={formData.github}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-gray-300 rounded-lg"
className="flex items-center space-x-2 px-4 py-2 bg-gray-800/50 text-stone-300 rounded-lg"
>
<Github className="w-4 h-4" />
<span>GitHub</span>
@@ -881,7 +1085,7 @@ function EditorPageContent() {
href={formData.live}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 px-4 py-2 bg-blue-600/80 text-white rounded-lg"
className="flex items-center space-x-2 px-4 py-2 bg-stone-600/80 text-white rounded-lg"
>
<ExternalLink className="w-4 h-4" />
<span>Live Demo</span>
@@ -898,7 +1102,7 @@ function EditorPageContent() {
Content
</h3>
<div className="prose prose-invert max-w-none">
<div className="markdown text-gray-300 leading-relaxed">
<div className="markdown text-stone-300 leading-relaxed">
<ReactMarkdown components={markdownComponents}>
{formData.content}
</ReactMarkdown>
@@ -921,7 +1125,7 @@ function EditorPageContent() {
{formData.published ? "Published" : "Draft"}
</span>
{formData.featured && (
<span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium">
<span className="px-3 py-1 bg-stone-500/20 text-stone-400 rounded-full text-sm font-medium">
Featured
</span>
)}

4
app/manage/page.tsx
View File

@@ -322,10 +322,10 @@ const AdminPage = () => {
{authState.isLoading ? (
<div className="flex items-center justify-center space-x-2">
<Loader2 className="w-5 h-5 animate-spin" />
<span>Authenticating...</span>
<span className="text-stone-50">Authenticating...</span>
</div>
) : (
<span>Sign In</span>
<span className="text-stone-50">Sign In</span>
)}
</button>
</form>

23
app/projects/[slug]/page.tsx
View File

@@ -35,7 +35,28 @@ const ProjectDetail = () => {
if (response.ok) {
const data = await response.json();
if (data.projects && data.projects.length > 0) {
setProject(data.projects[0]);
const loadedProject = data.projects[0];
setProject(loadedProject);
// Track page view
try {
await fetch('/api/analytics/track', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: 'pageview',
projectId: loadedProject.id.toString(),
page: `/projects/${slug}`
})
});
} catch (trackError) {
// Silently fail tracking
if (process.env.NODE_ENV === 'development') {
console.error('Error tracking page view:', trackError);
}
}
}
}
} catch (error) {

152
components/AnalyticsDashboard.tsx
View File

@@ -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>
{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>
)}
</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>

85
components/AnalyticsProvider.tsx
View File

@@ -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(() => {

58
components/ModernAdminDashboard.tsx
View File

@@ -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>

42
components/Toast.tsx
View File

@@ -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

47
lib/useWebVitals.ts
View File

@@ -118,45 +118,92 @@ export const useWebVitals = () => {
useEffect(() => {
if (typeof window === 'undefined') return;
// Store web vitals for batch sending
const webVitals: Record<string, number> = {};
const path = window.location.pathname;
const projectMatch = path.match(/\/projects\/([^\/]+)/);
const projectId = projectMatch ? projectMatch[1] : null;
const sendWebVitals = async () => {
if (Object.keys(webVitals).length >= 3) { // Wait for at least FCP, LCP, CLS
try {
await fetch('/api/analytics/track', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: 'performance',
projectId: projectId,
page: path,
performance: {
fcp: webVitals.FCP || 0,
lcp: webVitals.LCP || 0,
cls: webVitals.CLS || 0,
fid: webVitals.FID || 0,
ttfb: webVitals.TTFB || 0,
loadTime: performance.now()
}
})
});
} catch (error) {
// Silently fail
if (process.env.NODE_ENV === 'development') {
console.error('Error sending web vitals:', error);
}
}
}
};
// Track Core Web Vitals
getCLS((metric) => {
webVitals.CLS = metric.value;
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
getFID((metric) => {
webVitals.FID = metric.value;
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
getFCP((metric) => {
webVitals.FCP = metric.value;
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
getLCP((metric) => {
webVitals.LCP = metric.value;
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
getTTFB((metric) => {
webVitals.TTFB = metric.value;
trackWebVitals({
...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname,
});
sendWebVitals();
});
// Track page load performance