feat: implement performance monitoring dashboard and web vitals tracking

[sweetesty]

📌 Pull Request

🔗 Related Issue
Closes #168

📝 Description

• Implements comprehensive Web Vitals tracking and analytics integration for TeachLink
• Necessary to monitor real-world performance metrics, identify regressions early, and provide actionable insights through the performance dashboard

🚀 Changes Made

• Feature implemented: reportVitalToAnalytics utility in src/utils/performanceUtils.ts

  • Uses fetch with keepalive: true for reliable metric delivery
  • Leverages requestIdleCallback to avoid blocking the main thread

• Feature implemented: New Next.js API route src/app/api/performance/vitals/route.ts

  • Receives POST requests with PerformanceMetric payloads
  • Logs alerts for "poor" and "needs-improvement" ratings
  • Easily extendable to connect with external alerting services

• Feature implemented: Updated usePerformanceMonitoring hook

  • Automatically reports every captured vital to the analytics service

• Feature implemented: Enhanced PerformanceDashboard UI

  • Added Analytics Status panel showing whether tracking is active
  • Added Global Average simulation for local metric context
  • Improved layout with a responsive grid

• Configuration: Updated .env.example

  • Added NEXT_PUBLIC_ENABLE_PERF_ANALYTICS flag to toggle analytics tracking

🧪 Testing & Validation

• Tested locally
• No runtime errors
• Existing features work as expected
• Edge cases handled (idle callback fallback, keepalive fetch reliability)
• Verified API route correctly receives POST requests with PerformanceMetric payloads
• Dashboard accurately reflects analytics tracking status

⚠️ Breaking Changes

• No breaking changes

📋 Contributor Checklist (MANDATORY)

• I was assigned to this issue
• My code follows the project structure and conventions
• I have tested my changes thoroughly
• I did not introduce unnecessary dependencies
• I have linked the issue (Closes Web Vitals Tracking #168)
• This PR is ready for review

💡 Notes for Reviewer

• Key areas to review: reportVitalToAnalytics utility, API route alert logic, dashboard Analytics Status panel
• Known limitations: Global Average is currently simulated; real aggregation can be connected once backend storage is in place

[RUKAYAT-CODER]

Kindly resolve conflict

[drips-wave]

@sweetesty Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[sweetesty]

Kindly resolve conflict

solved