[Frontend] Add analytics and user behavior tracking

[Chigybillionz]

---

Close #200

Summary of the issue

The platform lacked visibility into user behavior, feature adoption, and performance metrics. To better understand how users engage with the application and to identify areas for improvement, we needed an analytics solution. Crucially, this had to be privacy-respecting, GDPR compliant with a cookie consent banner, and capable of tracking Web Vitals, feature usage (like course enrollments and credential verifications), and providing an admin dashboard.

Root cause

The application had no analytics provider integrated, meaning no data was being collected for page views, routing events, Web Vitals, or custom user interactions.

Solution implemented

Integrated next-plausible (a lightweight, privacy-focused analytics tracker) as the analytics provider. Wrapped the application with <PlausibleProvider> and enabled custom event tracking. Added a CookieConsentBanner to request user permission, tracked Web Vitals natively through Next.js reportWebVitals, and added custom event triggers to core interactions. Additionally, created a dedicated /admin/analytics page that embeds the Plausible shared dashboard for administrators.

Key changes made

• Dependencies: Added next-plausible, js-cookie, and @types/js-cookie to package.json.
• Global Provider & Web Vitals: Updated src/pages/_app.tsx to include <PlausibleProvider domain="starked-education.com"> and exported the Next.js reportWebVitals function to pipe performance metrics (like CLS, FID, LCP) directly to Plausible.
• Cookie Consent: Created src/components/CookieConsentBanner.tsx to handle GDPR compliance, storing the user's preference securely in a cookie.
• Feature Tracking:
  • Updated src/store/courseStore.ts to emit a custom 'Course Enrollment' event when a user successfully enrolls in a course.
  • Updated src/components/CredentialList.tsx to emit a custom 'Credential Verification' event when a user verifies a credential.
• Admin Dashboard: Created src/pages/admin/analytics.tsx with a responsive layout and an embedded Plausible analytics iframe so admins can view insights without leaving the platform.

---

Any trade-offs or considerations

• Plausible is largely cookieless and inherently GDPR-compliant out of the box, but we still implemented a cookie consent banner to be extra cautious and transparent with our users.
• Custom events (Course Enrollment, Credential Verification) use the window.plausible function directly; they will gracefully fail without errors if the analytics script is blocked by an adblocker.
• You will need to replace the YOUR_AUTH_TOKEN in the iframe source URL inside admin/analytics.tsx with a real shared link token from your Plausible account once it is set up.

---

Testing steps (how to verify the fix)

1. Run npm install next-plausible js-cookie and npm install -D @types/js-cookie in the frontend directory.
2. Start the development server with npm run dev.
3. Open the application. You should see the Cookie Consent Banner at the bottom. Click "Accept Analytics".
4. Navigate to a course and click "Enroll". Check the Network tab in your browser DevTools to ensure an event payload for Course Enrollment was sent to the Plausible endpoint.
5. Go to your credentials and click "Verify" on a credential, ensuring the custom Credential Verification event is dispatched.
6. Navigate to http://localhost:3000/admin/analytics and verify the dashboard layout renders correctly.

---

Please kindly review this task. If there are any corrections, improvements, adjustments, or merge conflicts that you notice regarding my implementation, I'd really appreciate your feedback. I'd also love to hear your overall review of my work on this branch. Thank you!