Julia - Integrate the Frontend with Backend for Material Graph

[JuliaHa0902]

Description

Related PRS (if any):

This frontend PR is related to the #1888 backend PR.
To test this frontend PR you need to checkout the #1888 backend PR.
…

Main changes explained:

• Implement the backend, add endpoint http://localhost:4500/api/material-costs
  GET http://localhost:4500/api/material-costs
  => Return a list of project Id and totalCostK
  GET http://localhost:4500/api/material-costs?projectId={projectId}
GET http://localhost:4500/api/material-costs?projectId={projectId1,projectId2,projectId3}
  Return the cost of all the project ids in the parameter
• Update the frontend to get the projects from bm/projects endpoint and get the cost from /material-cost endpoint
• Fix some responsive errors

How to test:

** This PR uses Node v 20

0. Change REACT_APP_APIENDPOINT value in .env file of the frontend to:
   REACT_APP_APIENDPOINT="http://localhost:4500/api"
   so the app can use the localhost api
1. check into this current front end branch and backend branch julia-create-backend-for-material-cost-graph
2. do npm install and ... to run this PR locally
3. Open Postman
4. Send POST request with email and password to http://localhost:4500/api/login to get access token
5. Paste access token to the Header
6. Send GET request to http://localhost:4500/api/material-costs and confirm that it returns a list of project and totalCostK
7. Send GET request to http://localhost:4500/api/material-costs?projectId={projectId} and confirm that it returns the cost of projectId
8. Open browser, nagivate to Dashboard → Reports → Total Construction Summary
   or http://localhost:3000/bmdashboard/totalconstructionsummary
9. Open the tab Material Consumption
10. Verify that the Total Material Cost Per Project shows the data from the material-cost API

Screenshots or videos of changes:

PR.review.mp4

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	e1add6a
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69277e1881bd98000802a176
😎 Deploy Preview	https://deploy-preview-4344--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.

[Sriamshreddy000]

Hi Julia,
I tested this PR along with the related backend [PR #1888]. Changed REACT_APP_APIENDPOINT value in .env file, Tested the API endpoint GET http://localhost:4500/api/material-costs in Thunder Client with a valid token, it returned a 404 Not Found response, "Cannot GET /api/material-costs." This suggests that the endpoint might not be active or properly registered in the backend branch, And when log in as admin and navigate to Dashboard → Reports → Total Construction Summary → Material Consumption, I can see the UI loads correctly and the charts appear. However, the banner “Using mock data as fallback” is displayed. The filters on the frontend appear functional, but the data is not being fetched from the backend and is instead using mock data for display.

I’m attaching screenshots from both Thunder Client and the frontend view for reference.

[Anusha-Gali]

Hi Julia,

I have reviewed your PR locally and the graph does work as intended.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[one-community]

Thank you all, merging!