Sphurthy - fix: analytics dashboard integration

[sphurthy]

Description

Related PRS (if any):

This frontend PR is related to this backend PR: OneCommunityGlobal/HGNRest#1917

Main changes explained:

• Created src/components/EductionPortal/Analytics/AnalyticsDashboard.jsx: main dashboard component that fetches and displays analytics data with metric cards and charts.
• Created src/components/EductionPortal/Analytics/MetricCard.jsx: component for displaying individual metrics with icons.
• Created src/components/EductionPortal/Analytics/ReportChart.jsx: chart component using Recharts for line and bar visualizations.
• Created src/components/EductionPortal/Analytics/FilterPanel.jsx: filter panel with student, class, and date range filters.
• Created src/components/EductionPortal/Analytics/AnalyticsDashboard.module.css: CSS module with theme-aware styling and dark mode support.
• Updated src/utils/URL.js: added ANALYTICS_OVERVIEW and ANALYTICS_STUDENT endpoints.
• Updated src/routes.jsx: added /educator/analytics route using EPProtectedRoute.

How to test:

1. Checkout branch.
2. Run npm install.
3. Start the development server with npm run start:local.
4. Ensure backend is running on localhost:4500 (or set REACT_APP_APIENDPOINT in .env.local).
5. Log in with an account that has Education Portal access.
6. Navigate to /educator/analytics.
7. Verify dashboard loads with metric cards and charts.
8. Test filters: select student, class, and date range; verify data updates.
9. Toggle dark mode and verify styling adapts.
10. Test responsive design by resizing the browser window.

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	196e272
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/692e05f18c24190007b18833
😎 Deploy Preview	https://deploy-preview-4482--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
32 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kzou55]

Hi Sphurthy,

I ran the current branch locally(alongside the related backend pr), and I tried to access the Good Education Portal. However, I ran into an issue where I couldn't login. So I can't access /educator/analytics and verify the implementations.

• 

And by "Log in with an account that has Education Portal access.", do you mean the role of my account should be "Educator" because that is what I have.

• 

[Jaden300]

I was unable to access the Education Portal to test this PR. When attempting to log in, the portal returns a login error and does not grant access even with an Educator role account. This is the same issue reported by the previous reviewer.

Please clarify what account setup or role configuration is required to access /educator/analytics, or provide test credentials that work. Until the feature is accessible locally, the implementation cannot be verified.

[one-community]

Hi Sphurthy,

I ran the current branch locally(alongside the related backend pr), and I tried to access the Good Education Portal. However, I ran into an issue where I couldn't login. So I can't access /educator/analytics and verify the implementations.

• 

And by "Log in with an account that has Education Portal access.", do you mean the role of my account should be "Educator" because that is what I have.

• 

You need to log in with your PRODUCTION credentials

[kzou55]

Hi Sphurthy,
I ran the current branch locally(alongside the related backend pr), and I tried to access the Good Education Portal. However, I ran into an issue where I couldn't login. So I can't access /educator/analytics and verify the implementations.

• 

And by "Log in with an account that has Education Portal access.", do you mean the role of my account should be "Educator" because that is what I have.

• 

You need to log in with your PRODUCTION credentials

A bit confused on what you mean by PRODUCTION credentials? Are you referring to the one we log in to at https://www.highestgood.com? Because the development/running locally(localhost:5173) doesn't have those credentials. And when trying to logging to the Good Education Portal, it states two things "Enter your current user credentials to access the Good Education Portal. Note: You must use your Production/Main credentials for this login.". And using those credentials at that education page, it says the email must match. But, none of my admin, owner, educator, etc. accounts work.

[HemanthNidamanuru]

Hi Sphurthy,

I tested this PR locally.

The analytics dashboard loads with the metric cards and charts, but no data is showing on the dashboard. Because of that, I’m unable to properly verify the student, class, and date range filters.

I also noticed that the calendar is not aligned properly in dark mode.

[DeepighaJ]

Checked in to current branch and navigated to /educator/analytics. I'm getting below error.

[kzou55]

Hi Sphurthy,

Still getting the same issue with being unable to log in to the Good Education Portal.

• Tried using the same test account login credential, but nothing happens when I click submit.

  

• Trying to use my Production/Main credentials, it just tells me my email must match