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

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

@@ -1,5 +1,5 @@
import { NextRequest, NextResponse } from 'next/server'; import { NextRequest, NextResponse } from 'next/server';
import { projectService } from '@/lib/prisma'; import { prisma, projectService } from '@/lib/prisma';
import { analyticsCache } from '@/lib/redis'; import { analyticsCache } from '@/lib/redis';
import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth'; import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
@@ -30,10 +30,15 @@ export async function GET(request: NextRequest) {
} }
} }
// Check cache first // Check cache first (but allow bypass with cache-bust parameter)
const cachedStats = await analyticsCache.getOverallStats(); const url = new URL(request.url);
if (cachedStats) { const bypassCache = url.searchParams.get('nocache') === 'true';
return NextResponse.json(cachedStats);
if (!bypassCache) {
const cachedStats = await analyticsCache.getOverallStats();
if (cachedStats) {
return NextResponse.json(cachedStats);
}
} }
// Get analytics data // Get analytics data
@@ -41,28 +46,84 @@ export async function GET(request: NextRequest) {
const projects = projectsResult.projects || projectsResult; const projects = projectsResult.projects || projectsResult;
const performanceStats = await projectService.getPerformanceStats(); 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 // Calculate analytics metrics
const analytics = { const analytics = {
overview: { overview: {
totalProjects: projects.length, totalProjects: projects.length,
publishedProjects: projects.filter(p => p.published).length, publishedProjects: projects.filter(p => p.published).length,
featuredProjects: projects.filter(p => p.featured).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), totalViews: allPageViews.length, // Real views from PageView table
totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0), totalLikes: 0, // Not implemented - no like buttons
totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0), totalShares: 0, // Not implemented - no share buttons
avgLighthouse: projects.length > 0 avgLighthouse: (() => {
? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length) // Only calculate if we have real performance data (not defaults)
: 0 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 => ({ projects: projects.map(project => ({
id: project.id, id: project.id,
title: project.title, title: project.title,
category: project.category, category: project.category,
difficulty: project.difficulty, difficulty: project.difficulty,
views: (project.analytics as Record<string, unknown>)?.views as number || 0, views: viewsByProject[project.id] || 0, // Only real views from PageView table
likes: (project.analytics as Record<string, unknown>)?.likes as number || 0, likes: 0, // Not implemented
shares: (project.analytics as Record<string, unknown>)?.shares as number || 0, shares: 0, // Not implemented
lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0, 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, published: project.published,
featured: project.featured, featured: project.featured,
createdAt: project.createdAt, createdAt: project.createdAt,
@@ -71,10 +132,25 @@ export async function GET(request: NextRequest) {
categories: performanceStats.byCategory, categories: performanceStats.byCategory,
difficulties: performanceStats.byDifficulty, difficulties: performanceStats.byDifficulty,
performance: { performance: {
avgLighthouse: performanceStats.avgLighthouse, avgLighthouse: (() => {
totalViews: performanceStats.totalViews, const projectsWithPerf = projects.filter(p => {
totalLikes: performanceStats.totalLikes, const perf = (p.performance as Record<string, unknown>) || {};
totalShares: performanceStats.totalShares 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 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 // Calculate performance metrics
const performance = { 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: { pageViews: {
total: pageViews.length, total: pageViews.length,
last24h: pageViews.filter(pv => { last24h: pageViews.filter(pv => {

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

@@ -33,86 +33,15 @@ export async function POST(request: NextRequest) {
switch (type) { switch (type) {
case 'analytics': case 'analytics':
// Reset all project analytics // Reset all project analytics (view counts in project.analytics JSON)
await prisma.project.updateMany({ const projects = await prisma.project.findMany();
data: { for (const project of projects) {
analytics: { const analytics = (project.analytics as Record<string, unknown>) || {};
views: 0, await prisma.project.update({
likes: 0, where: { id: project.id },
shares: 0,
comments: 0,
bookmarks: 0,
clickThroughs: 0,
bounceRate: 0,
avgTimeOnPage: 0,
uniqueVisitors: 0,
returningVisitors: 0,
conversionRate: 0,
socialShares: {
twitter: 0,
linkedin: 0,
facebook: 0,
github: 0
},
deviceStats: {
mobile: 0,
desktop: 0,
tablet: 0
},
locationStats: {},
referrerStats: {},
lastUpdated: new Date().toISOString()
}
}
});
break;
case 'pageviews':
// Clear PageView table
await prisma.pageView.deleteMany({});
break;
case 'interactions':
// Clear UserInteraction table
await prisma.userInteraction.deleteMany({});
break;
case 'performance':
// Reset performance metrics
await prisma.project.updateMany({
data: {
performance: {
lighthouse: 0,
loadTime: 0,
firstContentfulPaint: 0,
largestContentfulPaint: 0,
cumulativeLayoutShift: 0,
totalBlockingTime: 0,
speedIndex: 0,
accessibility: 0,
bestPractices: 0,
seo: 0,
performanceScore: 0,
mobileScore: 0,
desktopScore: 0,
coreWebVitals: {
lcp: 0,
fid: 0,
cls: 0
},
lastUpdated: new Date().toISOString()
}
}
});
break;
case 'all':
// Reset everything
await Promise.all([
// Reset analytics
prisma.project.updateMany({
data: { data: {
analytics: { analytics: {
...analytics,
views: 0, views: 0,
likes: 0, likes: 0,
shares: 0, shares: 0,
@@ -140,11 +69,30 @@ export async function POST(request: NextRequest) {
lastUpdated: new Date().toISOString() lastUpdated: new Date().toISOString()
} }
} }
}), });
// Reset performance }
prisma.project.updateMany({ break;
case 'pageviews':
// Clear PageView table
await prisma.pageView.deleteMany({});
break;
case 'interactions':
// Clear UserInteraction table
await prisma.userInteraction.deleteMany({});
break;
case 'performance':
// 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: { data: {
performance: { performance: {
...perf,
lighthouse: 0, lighthouse: 0,
loadTime: 0, loadTime: 0,
firstContentfulPaint: 0, firstContentfulPaint: 0,
@@ -166,6 +114,73 @@ export async function POST(request: NextRequest) {
lastUpdated: new Date().toISOString() lastUpdated: new Date().toISOString()
} }
} }
});
}
break;
case 'all':
// Reset everything
const allProjects = await prisma.project.findMany();
await Promise.all([
// 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,
comments: 0,
bookmarks: 0,
clickThroughs: 0,
bounceRate: 0,
avgTimeOnPage: 0,
uniqueVisitors: 0,
returningVisitors: 0,
conversionRate: 0,
socialShares: {
twitter: 0,
linkedin: 0,
facebook: 0,
github: 0
},
deviceStats: {
mobile: 0,
desktop: 0,
tablet: 0
},
locationStats: {},
referrerStats: {},
lastUpdated: new Date().toISOString()
},
performance: {
...perf,
lighthouse: 0,
loadTime: 0,
firstContentfulPaint: 0,
largestContentfulPaint: 0,
cumulativeLayoutShift: 0,
totalBlockingTime: 0,
speedIndex: 0,
accessibility: 0,
bestPractices: 0,
seo: 0,
performanceScore: 0,
mobileScore: 0,
desktopScore: 0,
coreWebVitals: {
lcp: 0,
fid: 0,
cls: 0
},
lastUpdated: new Date().toISOString()
}
}
});
}), }),
// Clear tracking tables // Clear tracking tables
prisma.pageView.deleteMany({}), 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 }
);
}
}

660
app/editor/page.tsx
View File

@@ -29,6 +29,7 @@ import {
Github, Github,
Tag, Tag,
} from "lucide-react"; } from "lucide-react";
import { useToast } from "@/components/Toast";
interface Project { interface Project {
id: string; id: string;
@@ -50,6 +51,7 @@ function EditorPageContent() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const projectId = searchParams.get("id"); const projectId = searchParams.get("id");
const contentRef = useRef<HTMLDivElement>(null); const contentRef = useRef<HTMLDivElement>(null);
const { showSuccess, showError } = useToast();
const [, setProject] = useState<Project | null>(null); const [, setProject] = useState<Project | null>(null);
const [isAuthenticated, setIsAuthenticated] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false);
@@ -58,6 +60,10 @@ function EditorPageContent() {
const [isCreating, setIsCreating] = useState(!projectId); const [isCreating, setIsCreating] = useState(!projectId);
const [showPreview, setShowPreview] = useState(false); const [showPreview, setShowPreview] = useState(false);
const [isTyping, setIsTyping] = 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 // Form state
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -84,8 +90,7 @@ function EditorPageContent() {
); );
if (foundProject) { if (foundProject) {
setProject(foundProject); const initialData = {
setFormData({
title: foundProject.title || "", title: foundProject.title || "",
description: foundProject.description || "", description: foundProject.description || "",
content: foundProject.content || "", content: foundProject.content || "",
@@ -96,7 +101,19 @@ function EditorPageContent() {
github: foundProject.github || "", github: foundProject.github || "",
live: foundProject.live || "", live: foundProject.live || "",
image: foundProject.image || "", 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 { } else {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
@@ -126,6 +143,30 @@ function EditorPageContent() {
await loadProject(projectId); await loadProject(projectId);
} else { } else {
setIsCreating(true); 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 { } else {
setIsAuthenticated(false); setIsAuthenticated(false);
@@ -143,18 +184,20 @@ function EditorPageContent() {
init(); init();
}, [projectId, loadProject]); }, [projectId, loadProject]);
const handleSave = async () => { const handleSave = useCallback(async () => {
try { try {
setIsSaving(true); setIsSaving(true);
// Validate required fields // Validate required fields
if (!formData.title.trim()) { if (!formData.title.trim()) {
alert("Please enter a project title"); showError("Validation Error", "Please enter a project title");
setIsSaving(false);
return; return;
} }
if (!formData.description.trim()) { if (!formData.description.trim()) {
alert("Please enter a project description"); showError("Validation Error", "Please enter a project description");
setIsSaving(false);
return; return;
} }
@@ -205,40 +248,156 @@ function EditorPageContent() {
image: savedProject.imageUrl || "", image: savedProject.imageUrl || "",
})); }));
// Show success and redirect // Show success toast (smaller, smoother)
alert("Project saved successfully!"); showSuccess("Saved", `"${savedProject.title}" saved`);
setTimeout(() => {
window.location.href = "/manage"; // Update project ID if it was a new project
}, 1000); if (!projectId && savedProject.id) {
const newUrl = `/editor?id=${savedProject.id}`;
window.history.replaceState({}, '', newUrl);
}
} else { } else {
const errorData = await response.json(); const errorData = await response.json();
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
console.error("Error saving project:", response.status, errorData); 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) { } catch (error) {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
console.error("Error saving project:", error); console.error("Error saving project:", error);
} }
alert( showError(
`Error saving project: ${error instanceof Error ? error.message : "Unknown error"}`, "Save Failed",
error instanceof Error ? error.message : "Failed to save"
); );
} finally { } finally {
setIsSaving(false); setIsSaving(false);
} }
}; }, [projectId, formData, showSuccess, showError]);
const handleInputChange = ( const handleInputChange = (
field: string, field: string,
value: string | boolean | string[], value: string | boolean | string[],
) => { ) => {
setFormData((prev) => ({ setFormData((prev) => {
...prev, const newData = {
[field]: value, ...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 handleTagsChange = (tagsString: string) => {
const tags = tagsString const tags = tagsString
.split(",") .split(",")
@@ -358,7 +517,7 @@ function EditorPageContent() {
<motion.div <motion.div
animate={{ rotate: 360 }} animate={{ rotate: 360 }}
transition={{ duration: 1, repeat: Infinity, ease: "linear" }} 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"> <h2 className="text-xl font-semibold gradient-text mb-2">
Loading Editor Loading Editor
@@ -390,7 +549,7 @@ function EditorPageContent() {
<button <button
onClick={() => (window.location.href = "/manage")} 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 Go to Admin Login
</button> </button>
@@ -400,15 +559,15 @@ function EditorPageContent() {
} }
return ( return (
<div className="min-h-screen animated-bg"> <div className="min-h-screen animated-bg flex flex-col overflow-hidden">
{/* Header */} {/* 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="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 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"> <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 <button
onClick={() => (window.location.href = "/manage")} 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" /> <ArrowLeft className="w-5 h-5" />
<span className="hidden sm:inline">Back to Dashboard</span> <span className="hidden sm:inline">Back to Dashboard</span>
@@ -427,8 +586,8 @@ function EditorPageContent() {
onClick={() => setShowPreview(!showPreview)} onClick={() => setShowPreview(!showPreview)}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm ${ className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm ${
showPreview showPreview
? "bg-blue-600 text-white shadow-lg" ? "bg-stone-600 text-white shadow-lg"
: "bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white" : "bg-gray-800/50 text-stone-300 hover:bg-gray-700/50 hover:text-stone-100"
}`} }`}
> >
<Eye className="w-4 h-4" /> <Eye className="w-4 h-4" />
@@ -452,9 +611,10 @@ function EditorPageContent() {
</div> </div>
</div> </div>
{/* Editor Content */} {/* Editor Content - Scrollable */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8"> <div className="flex-1 overflow-y-auto">
<div className="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
{/* Floating particles background */} {/* Floating particles background */}
<div className="particles"> <div className="particles">
{[...Array(20)].map((_, i) => ( {[...Array(20)].map((_, i) => (
@@ -469,187 +629,12 @@ function EditorPageContent() {
/> />
))} ))}
</div> </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 */} {/* Sidebar - Left (appears first in DOM for left positioning) */}
<motion.div <div className="w-full lg:w-80 flex-shrink-0 space-y-6 order-1 lg:order-1">
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">
{/* Project Settings */} {/* Project Settings */}
<motion.div <motion.div
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }} transition={{ delay: 0.4 }}
className="glass-card p-6 rounded-2xl" className="glass-card p-6 rounded-2xl"
@@ -660,7 +645,7 @@ function EditorPageContent() {
<div className="space-y-4"> <div className="space-y-4">
<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">
Category Category
</label> </label>
<div className="custom-select"> <div className="custom-select">
@@ -681,7 +666,7 @@ function EditorPageContent() {
</div> </div>
<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 Tags
</label> </label>
<input <input
@@ -697,7 +682,7 @@ function EditorPageContent() {
{/* Links */} {/* Links */}
<motion.div <motion.div
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }} transition={{ delay: 0.5 }}
className="glass-card p-6 rounded-2xl" className="glass-card p-6 rounded-2xl"
@@ -708,7 +693,7 @@ function EditorPageContent() {
<div className="space-y-4"> <div className="space-y-4">
<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">
GitHub URL GitHub URL
</label> </label>
<input <input
@@ -723,7 +708,7 @@ function EditorPageContent() {
</div> </div>
<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 Live URL
</label> </label>
<input <input
@@ -739,7 +724,7 @@ function EditorPageContent() {
{/* Publish */} {/* Publish */}
<motion.div <motion.div
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.6 }} transition={{ delay: 0.6 }}
className="glass-card p-6 rounded-2xl" className="glass-card p-6 rounded-2xl"
@@ -756,9 +741,9 @@ function EditorPageContent() {
onChange={(e) => onChange={(e) =>
handleInputChange("featured", e.target.checked) 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>
<label className="flex items-center space-x-3"> <label className="flex items-center space-x-3">
@@ -768,20 +753,20 @@ function EditorPageContent() {
onChange={(e) => onChange={(e) =>
handleInputChange("published", e.target.checked) 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> </label>
</div> </div>
<div className="mt-6 pt-4 border-t border-white/20"> <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 Preview
</h4> </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> <p>Status: {formData.published ? "Published" : "Draft"}</p>
{formData.featured && ( {formData.featured && (
<p className="text-blue-400">⭐ Featured</p> <p className="text-stone-400">⭐ Featured</p>
)} )}
<p>Category: {formData.category}</p> <p>Category: {formData.category}</p>
<p>Tags: {formData.tags.length} tags</p> <p>Tags: {formData.tags.length} tags</p>
@@ -789,8 +774,227 @@ function EditorPageContent() {
</div> </div>
</motion.div> </motion.div>
</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> </div>
</div>
{/* Preview Modal */} {/* Preview Modal */}
<AnimatePresence> <AnimatePresence>
@@ -806,7 +1010,7 @@ function EditorPageContent() {
initial={{ scale: 0.9, opacity: 0 }} initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }} animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }} 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()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
@@ -834,12 +1038,12 @@ function EditorPageContent() {
{/* Project Meta */} {/* Project Meta */}
<div className="flex flex-wrap justify-center gap-4 mb-6"> <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" /> <Tag className="w-4 h-4" />
<span className="capitalize">{formData.category}</span> <span className="capitalize">{formData.category}</span>
</div> </div>
{formData.featured && ( {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"> <span className="text-sm font-semibold">
⭐ Featured ⭐ Featured
</span> </span>
@@ -853,7 +1057,7 @@ function EditorPageContent() {
{formData.tags.map((tag, index) => ( {formData.tags.map((tag, index) => (
<span <span
key={index} 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} {tag}
</span> </span>
@@ -870,7 +1074,7 @@ function EditorPageContent() {
href={formData.github} href={formData.github}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <Github className="w-4 h-4" />
<span>GitHub</span> <span>GitHub</span>
@@ -881,7 +1085,7 @@ function EditorPageContent() {
href={formData.live} href={formData.live}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <ExternalLink className="w-4 h-4" />
<span>Live Demo</span> <span>Live Demo</span>
@@ -898,7 +1102,7 @@ function EditorPageContent() {
Content Content
</h3> </h3>
<div className="prose prose-invert max-w-none"> <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}> <ReactMarkdown components={markdownComponents}>
{formData.content} {formData.content}
</ReactMarkdown> </ReactMarkdown>
@@ -921,7 +1125,7 @@ function EditorPageContent() {
{formData.published ? "Published" : "Draft"} {formData.published ? "Published" : "Draft"}
</span> </span>
{formData.featured && ( {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 Featured
</span> </span>
)} )}

4
app/manage/page.tsx
View File

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

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

@@ -35,7 +35,28 @@ const ProjectDetail = () => {
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
if (data.projects && data.projects.length > 0) { 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) { } catch (error) {

152
components/AnalyticsDashboard.tsx
View File

@@ -18,6 +18,7 @@ import {
Trash2, Trash2,
AlertTriangle AlertTriangle
} from 'lucide-react'; } from 'lucide-react';
import { useToast } from '@/components/Toast';
interface AnalyticsData { interface AnalyticsData {
overview: { overview: {
@@ -25,8 +26,6 @@ interface AnalyticsData {
publishedProjects: number; publishedProjects: number;
featuredProjects: number; featuredProjects: number;
totalViews: number; totalViews: number;
totalLikes: number;
totalShares: number;
avgLighthouse: number; avgLighthouse: number;
}; };
projects: Array<{ projects: Array<{
@@ -35,8 +34,6 @@ interface AnalyticsData {
category: string; category: string;
difficulty: string; difficulty: string;
views: number; views: number;
likes: number;
shares: number;
lighthouse: number; lighthouse: number;
published: boolean; published: boolean;
featured: boolean; featured: boolean;
@@ -48,8 +45,6 @@ interface AnalyticsData {
performance: { performance: {
avgLighthouse: number; avgLighthouse: number;
totalViews: number; totalViews: number;
totalLikes: number;
totalShares: number;
}; };
metrics: { metrics: {
bounceRate: number; bounceRate: number;
@@ -71,6 +66,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
const [showResetModal, setShowResetModal] = useState(false); const [showResetModal, setShowResetModal] = useState(false);
const [resetType, setResetType] = useState<'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all'>('analytics'); const [resetType, setResetType] = useState<'analytics' | 'pageviews' | 'interactions' | 'performance' | 'all'>('analytics');
const [resetting, setResetting] = useState(false); const [resetting, setResetting] = useState(false);
const { showSuccess, showError } = useToast();
const fetchAnalyticsData = useCallback(async () => { const fetchAnalyticsData = useCallback(async () => {
if (!isAuthenticated) return; if (!isAuthenticated) return;
@@ -79,11 +75,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
setLoading(true); setLoading(true);
setError(null); 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([ const [analyticsRes, performanceRes] = await Promise.all([
fetch('/api/analytics/dashboard', { fetch(`/api/analytics/dashboard${cacheBust}`, {
headers: { 'x-admin-request': 'true' } headers: { 'x-admin-request': 'true' }
}), }),
fetch('/api/analytics/performance', { fetch(`/api/analytics/performance${cacheBust}`, {
headers: { 'x-admin-request': 'true' } headers: { 'x-admin-request': 'true' }
}) })
]); ]);
@@ -103,23 +101,19 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
publishedProjects: 0, publishedProjects: 0,
featuredProjects: 0, featuredProjects: 0,
totalViews: 0, totalViews: 0,
totalLikes: 0,
totalShares: 0,
avgLighthouse: 90 avgLighthouse: 90
}, },
projects: analytics.projects || [], projects: analytics.projects || [],
categories: analytics.categories || {}, categories: analytics.categories || {},
difficulties: analytics.difficulties || {}, difficulties: analytics.difficulties || {},
performance: performance.performance || { performance: {
avgLighthouse: 90, avgLighthouse: performance.avgLighthouse || analytics.overview?.avgLighthouse || 0,
totalViews: 0, totalViews: performance.totalViews || analytics.overview?.totalViews || 0,
totalLikes: 0,
totalShares: 0
}, },
metrics: performance.metrics || { metrics: performance.metrics || analytics.metrics || {
bounceRate: 35, bounceRate: 0,
avgSessionDuration: 180, avgSessionDuration: 0,
pagesPerSession: 2.5, pagesPerSession: 0,
newUsers: 0 newUsers: 0
} }
}); });
@@ -134,6 +128,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
if (!isAuthenticated || resetting) return; if (!isAuthenticated || resetting) return;
setResetting(true); setResetting(true);
setError(null);
try { try {
const response = await fetch('/api/analytics/reset', { const response = await fetch('/api/analytics/reset', {
method: 'POST', method: 'POST',
@@ -144,15 +139,25 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
body: JSON.stringify({ type: resetType }) body: JSON.stringify({ type: resetType })
}); });
const result = await response.json();
if (response.ok) { if (response.ok) {
await fetchAnalyticsData(); // Refresh data showSuccess(
'Analytics Reset',
`Successfully reset ${resetType === 'all' ? 'all analytics data' : resetType} data.`
);
setShowResetModal(false); setShowResetModal(false);
// Clear cache and refresh data
await fetchAnalyticsData();
} else { } else {
const errorData = await response.json(); const errorMsg = result.error || 'Failed to reset analytics';
setError(errorData.error || 'Failed to reset analytics'); setError(errorMsg);
showError('Reset Failed', errorMsg);
} }
} catch (err) { } 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); console.error('Reset error:', err);
} finally { } finally {
setResetting(false); setResetting(false);
@@ -165,19 +170,18 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
} }
}, [isAuthenticated, fetchAnalyticsData]); }, [isAuthenticated, fetchAnalyticsData]);
const StatCard = ({ title, value, icon: Icon, color, trend, trendValue, description }: { const StatCard = ({ title, value, icon: Icon, color, description, tooltip }: {
title: string; title: string;
value: number | string; value: number | string;
icon: React.ComponentType<{ className?: string; size?: number }>; icon: React.ComponentType<{ className?: string; size?: number }>;
color: string; color: string;
trend?: 'up' | 'down' | 'neutral';
trendValue?: string;
description?: string; description?: string;
tooltip?: string;
}) => ( }) => (
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} 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 items-start justify-between">
<div className="flex-1"> <div className="flex-1">
@@ -191,26 +195,23 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div> </div>
</div> </div>
<p className="text-3xl font-bold text-stone-900 mb-2">{value}</p> <p className="text-3xl font-bold text-stone-900 mb-2">{value}</p>
{trend && trendValue && (
<div className={`flex items-center space-x-1 text-sm ${
trend === 'up' ? 'text-green-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>
</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> </motion.div>
); );
const getDifficultyColor = (difficulty: string) => { const getDifficultyColor = (difficulty: string) => {
switch (difficulty) { switch (difficulty) {
case 'Beginner': return 'bg-green-50 text-green-700 border-green-200'; case 'Beginner': return 'bg-stone-50 text-stone-700 border-stone-200';
case 'Intermediate': return 'bg-yellow-50 text-yellow-700 border-yellow-200'; case 'Intermediate': return 'bg-stone-100 text-stone-700 border-stone-300';
case 'Advanced': return 'bg-orange-50 text-orange-700 border-orange-200'; case 'Advanced': return 'bg-stone-200 text-stone-800 border-stone-400';
case 'Expert': return 'bg-red-50 text-red-700 border-red-200'; case 'Expert': return 'bg-stone-300 text-stone-900 border-stone-500';
default: return 'bg-stone-50 text-stone-600 border-stone-200'; 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" /> <BarChart3 className="w-8 h-8 mr-3 text-stone-600" />
Analytics Dashboard Analytics Dashboard
</h1> </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>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
{/* Time Range Selector */} {/* Time Range Selector */}
@@ -307,45 +308,42 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
value={data.overview.totalViews.toLocaleString()} value={data.overview.totalViews.toLocaleString()}
icon={Eye} icon={Eye}
color="bg-stone-100 text-stone-600" color="bg-stone-100 text-stone-600"
trend="up"
trendValue="+12.5%"
description="All-time page views" 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 <StatCard
title="Projects" title="Projects"
value={data.overview.totalProjects} value={data.overview.totalProjects}
icon={Globe} icon={Globe}
color="bg-green-100 text-green-600" color="bg-stone-100 text-stone-600"
trend="up"
trendValue="+2"
description={`${data.overview.publishedProjects} published`} description={`${data.overview.publishedProjects} published`}
/> tooltip="✅ REAL DATA: Total number of projects in your portfolio. Shows published vs unpublished projects from your database."
<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"
/> />
<StatCard <StatCard
title="Performance" title="Performance"
value={data.overview.avgLighthouse} value={data.overview.avgLighthouse > 0 ? data.overview.avgLighthouse : 'N/A'}
icon={Zap} icon={Zap}
color="bg-orange-100 text-orange-600" color="bg-stone-100 text-stone-600"
trend="up" description={data.overview.avgLighthouse > 0 ? "Avg Lighthouse score" : "No performance data yet"}
trendValue="+5%" tooltip={data.overview.avgLighthouse > 0
description="Avg Lighthouse score" ? "✅ 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 <StatCard
title="Bounce Rate" title="Bounce Rate"
value={`${data.metrics.bounceRate}%`} value={`${data.metrics?.bounceRate || 0}%`}
icon={MousePointer} icon={MousePointer}
color="bg-stone-100 text-stone-600" color="bg-stone-100 text-stone-600"
trend="down"
trendValue="-2.1%"
description="User retention" 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>
</div> </div>
@@ -355,7 +353,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Top Projects */} {/* Top Projects */}
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm"> <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"> <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 Top Performing Projects
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
@@ -379,9 +377,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<p className="text-stone-500 text-sm">{project.category}</p> <p className="text-stone-500 text-sm">{project.category}</p>
</div> </div>
</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-900 font-bold">{project.views.toLocaleString()}</p>
<p className="text-stone-500 text-sm">views</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> </div>
</motion.div> </motion.div>
))} ))}
@@ -391,7 +393,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
{/* Categories Distribution */} {/* Categories Distribution */}
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm"> <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"> <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 Categories
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
@@ -422,12 +424,12 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
</div> </div>
</div> </div>
{/* Difficulty & Engagement */} {/* Difficulty & Activity */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Difficulty Distribution */} {/* Difficulty Distribution */}
<div className="bg-white border border-stone-200 p-6 rounded-xl shadow-sm"> <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"> <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 Difficulty Levels
</h3> </h3>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
@@ -465,7 +467,7 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className="flex items-center space-x-4 p-3 bg-stone-50 rounded-xl border border-stone-100" 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"> <div className="flex-1">
<p className="text-stone-900 font-medium text-sm">{project.title}</p> <p className="text-stone-900 font-medium text-sm">{project.title}</p>
<p className="text-stone-500 text-xs"> <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 ${ <span className={`px-2 py-1 rounded-full text-xs font-medium ${
project.published project.published
? 'bg-green-100 text-green-700' ? 'bg-stone-100 text-stone-700'
: 'bg-yellow-100 text-yellow-700' : 'bg-stone-200 text-stone-700'
}`}> }`}>
{project.published ? 'Live' : 'Draft'} {project.published ? 'Live' : 'Draft'}
</span> </span>
@@ -518,13 +520,13 @@ export function AnalyticsDashboard({ isAuthenticated }: AnalyticsDashboardProps)
<label className="block text-stone-600 text-sm mb-2">Reset Type</label> <label className="block text-stone-600 text-sm mb-2">Reset Type</label>
<select <select
value={resetType} 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" 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="analytics">Analytics Only (project view counts)</option>
<option value="pageviews">Page Views Only</option> <option value="pageviews">Page Views Only (all tracked visits)</option>
<option value="interactions">User Interactions Only</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> <option value="all">Everything (Complete Reset)</option>
</select> </select>
</div> </div>

85
components/AnalyticsProvider.tsx
View File

@@ -16,12 +16,37 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
if (typeof window === 'undefined') return; if (typeof window === 'undefined') return;
// Track page view // 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', { trackEvent('page-view', {
url: window.location.pathname, url: path,
referrer: document.referrer, referrer: document.referrer,
timestamp: Date.now(), 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 // Track page load performance
@@ -30,6 +55,62 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
// Track initial page view // Track initial page view
trackPageView(); 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) // Track route changes (for SPA navigation)
const handleRouteChange = () => { const handleRouteChange = () => {
setTimeout(() => { setTimeout(() => {

58
components/ModernAdminDashboard.tsx
View File

@@ -157,14 +157,24 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
const stats = { const stats = {
totalProjects: projects.length, totalProjects: projects.length,
publishedProjects: projects.filter(p => p.published).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, unreadEmails: emails.filter(e => !(e.read as boolean)).length,
avgPerformance: (analytics?.avgPerformance as number) || (projects.length > 0 ? avgPerformance: (() => {
Math.round(projects.reduce((sum, p) => sum + (p.performance?.lighthouse || 90), 0) / projects.length) : 90), // 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', systemHealth: (systemStats?.status as string) || 'unknown',
totalUsers: (analytics?.totalUsers as number) || 0, totalUsers: (analytics?.metrics?.totalUsers as number) || (analytics?.totalUsers as number) || 0,
bounceRate: (analytics?.bounceRate as number) || 0, bounceRate: (analytics?.metrics?.bounceRate as number) || (analytics?.bounceRate as number) || 0,
avgSessionDuration: (analytics?.avgSessionDuration as number) || 0 avgSessionDuration: (analytics?.metrics?.avgSessionDuration as number) || (analytics?.avgSessionDuration as number) || 0
}; };
useEffect(() => { useEffect(() => {
@@ -320,7 +330,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
{/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */} {/* Stats Grid - Mobile: 2x3, Desktop: 6x1 horizontal */}
<div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6"> <div className="grid grid-cols-2 md:grid-cols-6 gap-3 md:gap-6">
<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('projects')} onClick={() => setActiveTab('projects')}
> >
<div className="flex flex-col space-y-2"> <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" /> <Database size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.totalProjects}</p> <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> </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')} onClick={() => setActiveTab('analytics')}
> >
<div className="flex flex-col space-y-2"> <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-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> <p className="text-stone-600 text-xs font-medium">{stats.totalUsers} users</p>
</div> </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>
<div <div
@@ -362,7 +380,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
</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')} onClick={() => setActiveTab('analytics')}
> >
<div className="flex flex-col space-y-2"> <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> <p className="text-stone-500 text-xs md:text-sm font-medium">Performance</p>
<TrendingUp size={20} className="text-stone-400" /> <TrendingUp size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.avgPerformance}</p> <p className="text-xl md:text-2xl font-bold text-stone-900">{stats.avgPerformance || 'N/A'}</p>
<p className="text-orange-500 text-xs font-medium">Lighthouse Score</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> </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')} onClick={() => setActiveTab('analytics')}
> >
<div className="flex flex-col space-y-2"> <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" /> <Users size={20} className="text-stone-400" />
</div> </div>
<p className="text-xl md:text-2xl font-bold text-stone-900">{stats.bounceRate}%</p> <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>
</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> <p className="text-xl md:text-2xl font-bold text-stone-900">Online</p>
<div className="flex items-center space-x-1"> <div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div> <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> </div>
</div> </div>

42
components/Toast.tsx
View File

@@ -34,8 +34,8 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
useEffect(() => { useEffect(() => {
if (toast.duration !== 0) { if (toast.duration !== 0) {
const timer = setTimeout(() => { const timer = setTimeout(() => {
setTimeout(() => onRemove(toast.id), 300); setTimeout(() => onRemove(toast.id), 200);
}, toast.duration || 5000); }, toast.duration || 3000);
return () => clearTimeout(timer); return () => clearTimeout(timer);
} }
@@ -59,39 +59,39 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
const getColors = () => { const getColors = () => {
switch (toast.type) { switch (toast.type) {
case 'success': 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': 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': 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': 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: 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 ( return (
<motion.div <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 }} animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -50, scale: 0.9 }} exit={{ opacity: 0, y: -10, scale: 0.95 }}
transition={{ duration: 0.3, ease: "easeOut" }} transition={{ duration: 0.2, ease: "easeOut" }}
className={`relative p-4 rounded-xl border ${getColors()} shadow-xl hover:shadow-2xl transition-all duration-300 max-w-sm`} 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"> <div className="flex-shrink-0 mt-0.5">
{getIcon()} {getIcon()}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className="text-sm font-semibold mb-1">{toast.title}</h4> <h4 className="text-xs font-semibold mb-0.5 leading-tight">{toast.title}</h4>
<p className="text-sm opacity-90">{toast.message}</p> <p className="text-xs opacity-90 leading-tight">{toast.message}</p>
{toast.action && ( {toast.action && (
<button <button
onClick={toast.action.onClick} 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} {toast.action.label}
</button> </button>
@@ -100,9 +100,9 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
<button <button
onClick={() => onRemove(toast.id)} 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> </button>
</div> </div>
@@ -111,8 +111,8 @@ const ToastItem = ({ toast, onRemove }: ToastProps) => {
<motion.div <motion.div
initial={{ width: '100%' }} initial={{ width: '100%' }}
animate={{ width: '0%' }} animate={{ width: '0%' }}
transition={{ duration: (toast.duration || 5000) / 1000, ease: "linear" }} transition={{ duration: (toast.duration || 3000) / 1000, ease: "linear" }}
className="absolute bottom-0 left-0 h-1 bg-gradient-to-r from-stone-400 to-stone-600 rounded-b-xl" className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-stone-400 to-stone-600 rounded-b-lg"
/> />
)} )}
</motion.div> </motion.div>
@@ -195,7 +195,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
type: 'error', type: 'error',
title, title,
message: message || '', message: message || '',
duration: 6000 duration: 4000 // Shorter duration
}); });
}, [addToast]); }, [addToast]);
@@ -291,7 +291,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
{children} {children}
{/* Toast Container */} {/* 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> <AnimatePresence>
{toasts.map((toast) => ( {toasts.map((toast) => (
<ToastItem <ToastItem

47
lib/useWebVitals.ts
View File

@@ -118,45 +118,92 @@ export const useWebVitals = () => {
useEffect(() => { useEffect(() => {
if (typeof window === 'undefined') return; 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 // Track Core Web Vitals
getCLS((metric) => { getCLS((metric) => {
webVitals.CLS = metric.value;
trackWebVitals({ trackWebVitals({
...metric, ...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB', name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname, url: window.location.pathname,
}); });
sendWebVitals();
}); });
getFID((metric) => { getFID((metric) => {
webVitals.FID = metric.value;
trackWebVitals({ trackWebVitals({
...metric, ...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB', name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname, url: window.location.pathname,
}); });
sendWebVitals();
}); });
getFCP((metric) => { getFCP((metric) => {
webVitals.FCP = metric.value;
trackWebVitals({ trackWebVitals({
...metric, ...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB', name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname, url: window.location.pathname,
}); });
sendWebVitals();
}); });
getLCP((metric) => { getLCP((metric) => {
webVitals.LCP = metric.value;
trackWebVitals({ trackWebVitals({
...metric, ...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB', name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname, url: window.location.pathname,
}); });
sendWebVitals();
}); });
getTTFB((metric) => { getTTFB((metric) => {
webVitals.TTFB = metric.value;
trackWebVitals({ trackWebVitals({
...metric, ...metric,
name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB', name: metric.name as 'CLS' | 'FID' | 'FCP' | 'LCP' | 'TTFB',
url: window.location.pathname, url: window.location.pathname,
}); });
sendWebVitals();
}); });
// Track page load performance // Track page load performance