Roshini Seelamsetty - (PRIORITY HIGH) Yagna: Hours Completed / Tasks Report – Data Accuracy Needs Review

[roshini1212]

Description

Related PRS (if any):

This frontend PR is related to the backend PR (roshini_fix_hours_completed_accuracy).
OneCommunityGlobal/HGNRest#2104
To test this frontend PR you need to checkout the roshini_fix_hours_completed_accuracy backend PR.

Main changes explained:

• Update src/components/TotalOrgSummary/HoursCompleted/HoursCompletedBarChart.jsx to use backend-provided hoursSubmittedToTasksPercentage for the header text instead of recalculating locally
• Update src/components/TotalOrgSummary/HoursCompleted/HoursCompletedBarChart.jsx to display a dynamic distribution label below the chart showing "X% Tasks (hours) | Y% Projects (hours) (Total = 100%)" using the hoursDistributionLabel field from the API response

How to test:

1. Check out roshini_feat_hours_chart_percentage_label branch (frontend) and roshini_fix_hours_completed_accuracy branch (backend)
2. Run npm install then npm start for both repos
3. Clear site data/cache
4. Log in as Owner
5. Go to Reports → Hours Completed (Tasks view)
6. Set a historical date range with known data (e.g. Nov 2024 – Mar 2026)
7. Verify the header shows a reasonable percentage (e.g. "50.0% of Total Tangible Hours Submitted to Tasks") and not thousands of %
8. Verify the label below the chart shows "X% Tasks (hours) | Y% Projects (hours) (Total = 100%)" with percentages summing to 100%
9. Verify the feature works correctly in dark mode

Screenshots or videos of changes:

Before:

After:

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[Anusha-Gali]

Hi Roshini,

I have reviewed your PR locally and though the functionality works as per requirement below is a UI issue identified in light and dark mode.

• As you can see the text in the bar is not visible in light mode.
• The "X% Tasks | Y% Projects" part is not visible in dark mode and the "(Total = 100%)" goes out of the boundary.
  Issues

Working screenshots

[sonarqubecloud]

Quality Gate passed

Issues
9 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