Amaresh taking over for Nikita phase 2 summary dashboard making the horizontal bar graph of p5 fe

[ArtemisNyx3]

Description

Related PRS (if any):

This frontend PR is related to the #1463 backend PR. (closed) --> New PR: OneCommunityGlobal/HGNRest#2256
…

Main changes explained:

• Added the required graph and redux actions for data retrival
  …

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ Rerports→ total construction summary→…
6. verify function the graphs
7. verify this new feature works in dark mode

Screenshots or videos of changes:

Demo.webm
Note: The data for the expenses is null in the backend so it shows null

Note:

Include the information the reviewers need to know.
Old PR was removed since branch name isnt up to spec linking for reference here

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	99b9ec3
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a446b8e10f71400082dc677
😎 Deploy Preview	https://deploy-preview-4608--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 failed

Failed conditions
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[kzou55]

Hi Amaresh,

I ran and tested the current branch locally(alongside the associated backend).

I can verify that the date and project filter work. And that the dropdown menu for the either Longest Open or Most Expensive Work. And that the elements of the bar chart has the associated values and information.

Video of Test:

• Light Mode

Recording.2026-06-22.174224.mp4

• Dark Mode

Recording.2026-06-22.174845.mp4

Issues:

1. Date Picker:

   • Contrast for the date picker's back and forward arrow buttons have low contrast in Light Mode. It only has clear contrast when it's hovered. Note: this is not a problem in Dark Mode.
   
   • Could also have a "x" or clear button to clear the start and end date field. So users can easily know how to reset the date filters.

2. Most Expensive Chart is blank when filtering projects:

   • Confused on how there be a chart/data for the Most Expensive graph yet when I use the filter dropdown and select all the projects, the result is no issues found? Could you clarify this?

     

[Jaden300]

Tested locally on branch Nikita-Phase-2-Summary-Dashboard--Making-the-Horizontal-Bar-Graph-of-P5-FE at http://localhost:5173/bmdashboard/totalconstructionsummary logged in as admin.

The chart components render correctly and dark mode styling looks good. However, no graph data appeared during testing - the charts were empty throughout. This may be due to the backend not having test data available in my local environment, as the associated backend PR (#2256) is still open. The previous reviewer was able to see data, so this may be an environment-specific issue rather than a bug in the implementation.

The date filter, project filter dropdown, and Longest Open vs Most Expensive toggle all appear to function as expected based on UI behavior. Approving given the implementation looks correct and dark mode is solid, but recommend verifying data rendering once the backend PR is merged.

[DeepighaJ]

Tested the PR locally and see i issues found for any/all projects.

[sonarqubecloud]

Quality Gate passed

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

[amaresh2001]

Hi @kzou55

Thanks for the thorough testing, I resolved the issues you flagged

1. Most Expensive Chart blank when filtering projects
   Cause: the injuryIssue model (which feeds this chart) had its projectId field referencing the wrong collection, a generic Project model instead of buildingProject (the collection your project filter dropdown actually uses). So with no filter, all injury issues showed up regardless of project; but filtering by any real building project ID matched nothing, since no injury issue's projectId pointed there.

   Fixed in backend commit c2369e6:

• Corrected injuryIssue.projectId to reference buildingProject.
• Also updated the existing test injury-issue records in the dev DB to point at real building project IDs, so filtering now actually returns data.

2. Fixed date picker arrow contrast in Light Mode & added a clear button for date filters

Could you please re-review when you get a chance?

[amaresh2001]

Hi @DeepighaJ

This should be fixed now

Please pull the latest and re-test when you get a chance!

[DeepighaJ]

• Tested the PR locally. The x axis shows id instead of name under Longest open.
• The graph can be improved when 1 or 2 items are displayed.
• Calendar allows future dates to pick in end date.

[kzou55]

Hi Amaresh,

I ran and tested the PR locally again.

Verified

• The functionality of the horizontal bar graph working

• The filters(start date, end date, and project) behave correctly
  

  

• The changes you made for the date picker and fixing the filters for the most expensive.

  

• Dark Mode looks good
  

[shree-vaths]

Hello, I reviewed #4608 on my local. This is working as expected.

Passing Cases
-The chart shows data in both dark and light mode.
-The chart loads for total data on both longest-open and expensive issues without date filter.
-The chart shows issues data with startDate, endDate and project filters data on both long-open and expensive issues.
-Upon clearing the filter, the chart shows total issues for all projects.
-The tooltip show useful data for good understanding.