feat: enhance analytics and performance tracking with real data metrics

- Integrate real page view data from the database for accurate analytics.
- Implement cache-busting for fresh data retrieval in analytics dashboard.
- Calculate and display bounce rate, average session duration, and unique users.
- Refactor performance metrics to ensure only real data is considered.
- Improve user experience with toast notifications for success and error messages.
- Update project editor with undo/redo functionality and enhanced content management.

lib/useWebVitals.ts

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