Purav Taking over unfinished PR #3861 - PR Review Team Analytics Dashboard

[pixelpix13]

Description

This PR is a takeover of the unfinished frontend work from #3861 (Manvitha-PR-Review-Team-Analytics-Dashboard).

Manvitha's branch was outdated and conflicting with development, so this PR rebuilds the feature on latest development and only brings over the analytics feature work (not a full merge of the old branch).

What this adds

• Horizontal stacked bar chart: Reviewers Ranked by Requirement Satisfied
• Duration filter: Last Week / Last 2 weeks / Last Month / All Time
• Calls backend GET /api/analytics/review-summary
• Responsive layout + dark mode support
• Header nav entry under PR Dashboard → Reviewers by Requirement

---

Related PRs

Type	PR
Backend (required to test)	HGNRest #2285 — Purav takeover of unfinished backend #1648
Previous unfinished backend	HGNRest #1648
Previous unfinished frontend (takeover source)	#3861
Closed older frontend version	#3829

Important: This frontend PR depends on backend PR #2285 (updated takeover of #1648). Please check out and run that backend branch while testing.

---

Main changes explained

1. Added Analytics dashboard components that render reviewer review-quality counts (Exceptional / Sufficient / Needs Changes / Did Not Review).
2. Wired GITHUB_REVIEW_SUMMARY endpoint helper in URL.js.
3. Added routes:
   • /pr-dashboard/reviewers (preferred / linked from Header)
   • /analytics/dashboard (kept for original test path from XXXX taking over for Manvitha pr review team analytics dashboard #3861)
4. Improved UI vs old PR: layout alignment, responsive behavior, dark mode, readable tooltips.

---

Backend + .env setup (required)

Reviewers must run the related backend PR and set a GitHub token, or the chart will stay empty / show an error.

1. Backend

1. Clone / open HGNRest
2. Check out the branch for #2285
   (feature/Purav-PR-Review-Team-Analytics-Dashboard)
3. Install deps and start the API as usual (backend typically on http://localhost:4500)

2. Environment variable

In the backend .env, add a valid GitHub token:

GITHUB_TOKEN=your_github_personal_access_token

How to create the token (same guidance as #2285 / #1648 / #3861):

• Follow: https://www.youtube.com/watch?v=3y5GrgzIVmI&t=15s
• Classic PAT with public_repo/repo, or fine-grained with Pull requests: Read
• Restart backend after adding the token

3. Frontend

1. Check out this branch: feature/Purav-PR-Review-Team-Analytics-Dashboard
2. npm install (or project equivalent)
3. Start frontend (Vite): usually https://localhost:5173 or http://localhost:5173
4. Clear site data / cache if needed
5. Log in as any user that can access PR Dashboard

---

How to test

Primary path (recommended)

1. Open PR Dashboard → Reviewers by Requirement
2. Or go directly to: http://localhost:5173/pr-dashboard/reviewers
3. Confirm page title: Reviewers Ranked by Requirement Satisfied
4. Switch each duration and confirm chart updates:
   • Last Week
   • Last 2 weeks
   • Last Month
   • All Time
5. Confirm stacked bars + totals + tooltips look correct in light mode and dark mode
6. Confirm reviewer names are readable (not only on hover)
7. Confirm loading / empty / error states behave reasonably if API is slow or failing

Alternate path (legacy from #3861)

• http://localhost:5173/analytics/dashboard
  (same component as /pr-dashboard/reviewers)

Not this PR

These are different existing pages:

• /pr-dashboard/analytics → Top Popular PRs
• Do not expect this reviewers chart there

Network check (optional)

In DevTools → Network, selecting a duration should call:

GET /api/analytics/review-summary?duration=<lastWeek|last2weeks|lastMonth|allTime>&sort=desc

---

Screenshots

Reviewers: please attach your own verification screenshots too if possible.

Light mode

Dark mode

Navigation

---

Video of changes

PR.2285+5413.mp4

---

Notes for reviewers

• This is a takeover of unfinished frontend work from XXXX taking over for Manvitha pr review team analytics dashboard #3861, rebuilt on latest development.
• Pair this with backend takeover #2285 (not the old unfinished Ziming add google doc icon #1648).
• Backend XiaoW_Hotfix of refresh cause app to return to dashboard #2285 + GITHUB_TOKEN are required for real data.
• Without the backend token/setup, the UI may show loading then empty/error — that does not mean the frontend route is broken.
• The frontend may take some time (around 5–10 seconds) when loading data for the first time.
• All Time can take longer because the backend aggregates more GitHub data.
• Chart row count is driven by backend results for the selected duration (not a hardcoded frontend limit).

---

Test plan

• Backend #2285 is running with GITHUB_TOKEN set
• Can open /pr-dashboard/reviewers from Header → PR Dashboard
• /analytics/dashboard also loads the same dashboard
• All 4 duration options return/render data (or a clear empty/error state)
• Chart segments + tooltips readable in light mode
• Chart segments + tooltips readable in dark mode
• Layout looks aligned / usable on desktop and a narrower viewport
• Confirmed this is different from /pr-dashboard/analytics (Popular PRs)

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	9657dae
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a63d59e4a06e400083e9e0c
😎 Deploy Preview	https://deploy-preview-5413--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

Issues
2 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 Purav,

I ran and tested the PR locally alongside its associated backend.

Verified

• Page title is "Reviewers Ranked by Requirement Satisfied"

  

• Duration Filter works: Last Week, Last 2 weeks, Last Month, All Time

  

• Chart has correct stacked bars, totals, and tooltips

• Dark Mode looks good
  

• Reviewer names are readable (not only on hover)

• Loading State looks good(used a slow network)

  Recording.2026-07-27.201255.mp4

• Choosing a duration from the dropdown shows the network make the request

  

• http://localhost:5173/analytics/dashboard has the same component

  

• Confirmed /pr-dashboard/analytics does not contain the stated PR Review Team Analytics component