Linh - fix: resolve PR 4246 issues in listing and bidding dashboard

[linh2020]

Description

Fixes the reported UI and interaction bugs from PR 4246 for the Listing and Bidding Dashboard work in progress. This update addresses chart readability issues, light-mode text visibility, the grading rubric modal close behavior, and the dropdown filter behavior that was not updating the pie chart correctly.

Result:
Users can now view chart text more clearly and interact with the dashboard without the reported blockers:

• Text is readable in light mode
• Pie chart labels are more visible and less likely to be cut off
• Pie chart text supports improved wrapping/readability
• View Grading Rubric closes correctly with a single click on the close icon
• Logged-hours dropdown selection now affects the pie chart as expected

Related PRs (if any): #4246

Main changes explained:

• Fixed the logged-hours dropdown option mapping so filter selections correctly update the pie chart data.
• Updated the pie chart label rendering to improve visibility, wrap longer labels, and reduce clipping.
• Added theme-aware label styling so chart text is readable in light mode.
• Removed duplicate rubric modal rendering in the student tasks flow, which was causing the modal close action to require two clicks.
• Passed the correct dark-mode context into the chart component so empty-state and label text render with proper contrast.

How to test:

Check into the current branch.

1. Run the frontend locally:

   • npm install

2. Clear site data/cache.

3. Log in as an authorized user.

4. Go to the relevant dashboard/student task views used in PR 4246.

5. Verify light mode behavior:

   • Switch to light mode.
   • Confirm previously hard-to-read text is now visible.

6. Verify pie chart label behavior:

   • Open the page containing the pie chart.
   • Confirm labels are not cut off as easily.
   • Confirm long labels are easier to read and percentage text remains visible.

7. Verify dropdown filtering:

   • Change the logged-hours dropdown selection.
   • Confirm the pie chart updates based on the selected range.
   • Specifically verify the 0 hours case updates correctly.

8. Verify grading rubric modal:

   • Click View Grading Rubric.
   • Close the popup using the X icon.
   • Confirm it closes on the first click.
   • Also verify overlay/Escape close behavior still works if applicable.

Notes:

• This update is frontend-focused.
• The fix includes both dashboard filtering/chart rendering changes and the rubric modal close issue found in the related student task flow.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	597e1de
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e2cd753a57af0007d784da
😎 Deploy Preview	https://deploy-preview-5165--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
4 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

[Rajasrivatsansrinivasan]

Reviewed PR #5165 by Linh. Checked out the branch locally and tested the Listing and Bidding Dashboard updates along with the related student task flow. Verified that chart text is readable in light mode, pie chart labels are more visible and less likely to be cut off, the logged-hours dropdown updates the pie chart correctly including the 0-hours case, and the View Grading Rubric modal now closes properly on the first click. No issues were observed during testing. Approving.