Shreevaths taking over for Vamsidhar - Create Line Graph For Cost Breakdown by Expenditure 20

[ReinaT5678]

Description

A frontend line graph chart that shows time in months (x-axis) and cost (y-axis) of projects. The chart can be filtered by projects and by date range.

Related PRS (if any):

This frontend PR is related to the #1357 backend PR.
This is a redo of #3458
…

Main changes explained:

• Added a new route to the page for the Expenditure Line Graph
• "Cost Breakdown by Type of Expenditure" page shows a line graph generated by Chart.js showing projects related to plumbing, electrical, mechanical, and structural.
• Component jsx file added as a simplified mini graph to fit in the weekly construction summary page.
  …

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 http://localhost:3000/bmdashboard/ExpenditureLineGraph
6. Check if graph renders some lines (these lines were generated by fake data, you can play around with this in MongoDB)
7. Check if the filter work
8. check light/dark mode

Screenshots or videos of changes:

Screen.Recording.2025-08-15.at.10.19.06.PM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[aseemdeshmukh]

Referred the backend PR #[1357](OneCommunityGlobal/HGNRest#1357 backend PR)

• After navigating to /bmdashboard/ExpenditureLineGraph), getting the error message:
  Error: Error fetching data: Request failed with status code 404 and I could not fetch the data
• Even the 'Filter by project' drop down is not working to navigate through the list of projects
• There was also a failure of GET request: GET https://api-staging.highestgood.com/api/bm/expenditure 404 (Not Found)
  

[Swetha-1306]

Tested the PR by checking out the backend PR#1357, I faced the error while fetching the data as shown below, the project drop down list is not working as well.

[JERRRRY]

Navigated to (bmdashboard/ExpenditureLineGraph) and shows 404 error. I can select the date range but the filter is not working.

[vishnu-ing]

Code changes have been reviewed and tested the changes in both light and dark mode by adding date and category filters. Everything looks good.

[aseemdeshmukh]

Works perfect! (Referred BE PR 1357)

• Tested in light and dark mode. Everything is clearly visible.
• Filters work properly.
• Getting the error when start date is greater than end date; which is expected
• Attached screenshots

NOTE (Whoever is getting Error 404 and the graph is not loading; check if the frontend API hitting the backend. Make sure your .env file has the same port as backend, and in the browser when loading the website check the API.)

[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

[kzou55]

Hi Saurabh,

I ran and tested the PR using the current branch and the associated backend.

However, I was unable to verify the implementation.

Issues:

• The line graph never appeared as I got the message "Loading Data".

• The filters(filter by project, From, To) were not responsive. They were not clickable. Not sure if that's related to the above issue.

  

[DeepighaJ]

Getting page not found error. Please check this

[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

[kzou55]

Hi Shreevaths,

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

Verified

• Lines for Structural, Mechanical, Electrical, and Plumbing present and each a different color
• Axes
  • X Axis the Month and Year
  • Y Axis the Costs
• Filters can be done by Project and Dates(From and To)
• Color coded legend present
• Title of the Graph present being "Cost Breakdown by Type of Expenditure[project filter])"
• Dark Mode looks good

Issue/Clarification

1. The PR description mentions that mock data is currently being used. However, based on my testing, it appears that the frontend initially retrieves the entire mock expenditure dataset from the backend, and the filter dropdown then filters the data on the frontend rather than making a new request to the backend for the filtered data. I observed that changing the filter did not result in any new network requests in the browser's Network tab.

Could you clarify if this is the intended behavior for the current implementation, or if the filter is expected to call the corresponding backend endpoint to retrieve the filtered data?

[shree-vaths]

Hello @kzou55 , please check this.

Clarification -

-Full dataset already required: date-range bounds (getDateRangeFromData) are computed across all records, so a full fetch happens on load regardless of filter state.
-No added client work: chart data is already reshaped in JS (buildGroupedData/buildLabels/buildDatasets); filtering is just one extra .filter() in that same pipeline.

• Instant UX, no spinners: dropdown/date changes render immediately with no network round-trip or debounce needed.
• Works offline after load: filtering keeps working even if the network drops mid-session.

[kzou55]

Hi Shreevaths,

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

Verified

• Lines for Structural, Mechanical, Electrical, and Plumbing present and each a different color

• Axes

  • X Axis the Month and Year
  • Y Axis the Costs

• Filters can be done by Project and Dates(From and To)

  • Start Date correctly cannot be after end date

• Color coded legend present

• Title of the Graph present being "Cost Breakdown by Type of Expenditure[project filter])"

• Dark Mode looks good

  Recording.2026-09-09.173949.mp4

Clarification

I confirmed that the graph renders the expected data and that the project/date filters work as expected. However, I noticed that the current implementation filters the data on the frontend after fetching /api/bm/expenditure once, rather than fetching the cost data from the backend based on the selected project and date range as described in requirement #6 (API integration).

Could you clarify whether this requirement has changed, or if the expectation is still for the backend to handle the project/date filtering?

[kzou55]

HI Shreevaths,

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

Verified

• Lines for Structural, Mechanical, Electrical, and Plumbing present and each a different color

• Axes

  • X Axis the Month and Year
  • Y Axis the Costs

• Filters can be done by Project and Dates(From and To)

• Start Date correctly cannot be after end date

• Color coded legend present

  

• Title of the Graph present being "Cost Breakdown by Type of Expenditure

• Dark Mode looks good

  

• Changes from previous review confirmed

  • Filters(Project, From, To) are now done by the backend rather than the frontend
  

Issues

1. Calendar Date Picker has some inconsistent behavior in Light/Dark Mode. In dark mode, the dates(except for the future dates) are look clickable(no dull greyed out color to make it look like its an invalid click). However, in light mode, dates not in the current month are greyed out.

2. When using the date picker, the endpoint is called each time I navigate between months, even though I’m only browsing the calendar. Could we update this so the endpoint is called only after a date is actually selected? This would avoid unnecessary API requests while navigating through the months.

Recording.2026-10-03.214752.mp4

[sonarqubecloud]

Quality Gate failed

Failed conditions
C 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