Shreevaths taking over for Vamsidhar - Create a Line Graph Chart for Cost Breakdown by Type of Expenditure

[ReinaT5678]

Description

Backend for 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):

To test this backend PR you need to checkout the #3458 frontend PR --> Redone with OneCommunityGlobal/HighestGoodNetworkApp#3906
…

Main changes explained:

• Added a controller file to retrieve the sample expenditure data from the backend (id, date, category, cost)
• Schema for expenditure data
• Corresponding routes under '/expenditure'
  …

How to test:

1. check into current branch
2. do npm install and npm run start to run this PR locally
3. Check out the frontend for more details

[Venk-rgb]

Tested the PR with the corresponding UI. Approving changes in the backend. I have added comments in the frontend PR.

Screen.Recording.2025-06-27.at.9.46.48.AM.mov

[shashank-madan]

Works as expected in light mode.

In dark mode axis and legend labels are not visible. Added further comments in frontend pr.

[suparshwa31]

while I was testing of this PR I got an error fetching the data, the get request is failing

[vamsidharpanithi]

Checked out and tested the backend along with the related frontend PR. The routes under /expenditure are defined, and the controller for retrieving expenditure data is present. However, the /ExpenditureLineGraph page on the frontend returns a 404 error, and there is a TypeError related to an undefined projectFilter state. This may indicate a mismatch between the expected backend response and the frontend integration. Please review the route accessibility and ensure the endpoint is correctly connected to the frontend component.

[adithya-6101]

Verified the backend changes alongside the UI. The graph renders correctly, filters are working as expected, and both Light and Dark Mode are displaying properly and everything looks good. Approving this backend PR. I’ve shared my feedback separately on the frontend PR.

[Neeraj-Kondaveeti]

Tested the backend PR locally. The server runs without issues, but the /expenditure endpoint seems to return a 404 when accessed via the frontend in PR #3458. Happy to retest once it's addressed.

[shashankm9]

Tested this PR along with the frontend, Everything is working as expected.

PR.3458.mp4

[harshavarma29]

I have tested the related Frontend PR, and it's working as expected. However, I have left a few comments.

I noticed that an "undefined" category is being added next to the expenditures. Please refer to the screenshot below:

It seems the JSON property highlighted below leads to the "undefined" issue in the Frontend.

[kanishkagarwal6101]

Like few before me I am also getting the error in fetching data.

[aseemdeshmukh]

With reference to PR 3906, tested the backend:

• 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 related frontend PR #3906 by checking out this PR, got the following error while fetching the data: Error: Error fetching data: Request failed with status code 404

[vishnu-ing]

Tested the expenditure graph code changes and API in local and added comments in FE PR-3906.

[aseemdeshmukh]

Works perfect! (Referred FE PR 3906)

• 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
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 Saurabh,

I ran and tested the current branch locally alongside the associated frontend,

I could not verify the implementation as the line graph never loaded.

[DeepighaJ]

Added comment in frontend pr. The page not found is shown

[sonarqubecloud]

Quality Gate failed

Failed conditions
57.8% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[sawantgayatri19]

Hello everyone,

I have consolidated the feedback and tested the current implementation. Below are the key bugs and items that need to be addressed before this can be merged:

1.API 404 Error / Data Fetching Failures:
Multiple reviewers (aseemdeshmukh, Swetha-1306, kanishkagarwal6101, etc.) are consistently encountering Request failed with status code 404 when hitting the /api/bm/expenditure endpoint from the frontend. Please double-check the route registration and endpoint wiring to ensure the backend seamlessly connects with the frontend PR.
2. Dark Mode Label Visibility:
As noted by shashank-madan, axis and legend labels are not visible in dark mode and need proper styling adjustments.
3. "Undefined" Category Bug:
harshavarma29 pointed out that an "undefined" category appears next to expenditures due to a mismatch or missing property in the backend JSON response. Please sanitize/verify the payload fields.
4. SonarCloud Quality Gate (Code Coverage):
The current SonarCloud check is failing because the new code coverage is at 57.8% (falling short of the required 80%threshold). Please add unit tests to cover the new code paths and resolve the quality gate failures.

Looking forward to the updates so we can get this merged!

[kzou55]

Hi Shreevaths,

I ran and tested the PR locally alongside its associated frontend. See the frontend PR for its review.

Issue/Clarification

• Could you clarify if the PR description outdated? I tried running the endpoint api/projects/646be02cb56e486c046486b6/cost-breakdown but it does not appear to work.

  

[kzou55]

Hi Shreevaths,

Clarification

Could you confirm whether the backend API requirements in the task description are still current? The specification calls for GET /api/projects/:id/cost-breakdown with two date query parameters, but the current implementation uses GET /api/bm/expenditure and returns all expenditure records, with the frontend handling the filtering. Is the current endpoint/architecture intentional, or should it be updated to match the API requirements in the task description?

[kzou55]

Hi Shreevaths,

I ran and tested the PR locally again alongside its associated frontend

Verified

• api/projects/all/cost-breakdown
  

• Getting a specific project cost breakdown: api/projects/5a849085592ca46b43db272a/cost-breakdown
  

• Filtering by Date

  • Start Date
  
  • Both
  

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
93.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud