Reina create line graph chart for cost breakdown by expenditure by ReinaT5678 · Pull Request #3458 · OneCommunityGlobal/HighestGoodNetworkApp

ReinaT5678 · 2025-05-01T17:52:21Z

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.

The new PR for this task is: #3906

Related PRS (if any):

This frontend PR is related to the #1357 backend PR.
…

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:

check into current branch
do npm install and npm run start:local to run this PR locally
Clear site data/cache
log as admin user
go to http://localhost:3000/bmdashboard/ExpenditureLineGraph
Check if graph renders some lines (these lines were generated by fake data, you can play around with this in MongoDB)
Check if the filter work
check light/dark mode

Screenshots or videos of changes:

Screen.Recording.2025-05-01.at.10.13.13.AM.mov

Note:

Include the information the reviewers need to know.

netlify · 2025-05-01T17:52:37Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

nikhilpittala16

I have tested the PR and everything works as expected.

…t-breakdown-by-expenditure

Venk-rgb

Tested the PR in UI. Everything looks good in light mode. In dark mode, the x-axis, y-axis labels and the type of expenditure is not visible. Adding screen recording of the same.

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

boppanapraveen

I tried to create frontend line graph chart that shows time in months (x-axis) and cost (y-axis) of projects. But getting error like page not found.

marcusyi1

In the Expenditure Line Graph, the graph was working fine and the filters were working. However, when I tried to do the total constructions summary, the site itself crashed.

Deekshith010905 · 2025-07-01T05:35:44Z

I encountered an error while reviewing this PR

shashank-madan

Works as expected in light mode.

In dark mode axis and legend labels are not visible.

Total construction summary gives error.

jaydeep138 · 2025-07-02T20:58:37Z

+
+.dark-mode .project-filter,
+.dark-mode .filter-group {
+    background-color: var (--card-bg);


There should be no space between var and (--card-bg).

jaydeep138

The functionality is working as expected in Light Mode. However, in Dark Mode, the text, as well as the X and Y axis labels for both the filters and the graph, are not visible — likely due to missing or incorrect styling for dark backgrounds.

Additionally, when navigating to http://localhost:3000/bmdashboard/totalconstructionsummary, the application crashes and throws errors during page load. Please check for potential issues causing the crash on that route.

Charitha2009 · 2025-07-04T17:39:19Z

Checked into the current branch and ran the app locally. The Expenditure Line Graph page loads, but the graph does not render any data, and filters have no effect.

The Total Construction Summary page fails to load due to a TypeError in WeeklyProjectSummaryHeader.jsx and shows a 404 error when fetching data.

Both pages need fixes before the PR can be approved.

pranavgovi

Both in light and dark mode, I am facing these errors for the mentioned 2 URLs

Varshakaranam18 · 2025-07-05T05:27:43Z

When checking out the 2 mentioned URLs , am facing these errors both in light and dark mode.

vamsidharpanithi

I encountered a 404 error on the /ExpenditureLineGraph page, and a TypeError related to projectFilter on the /totalconstructionsummary page due to undefined Redux state. Please find the screenshots attached below.

suparshwa31 · 2025-07-08T23:33:24Z

I'm currently unable to fetch the data, and the projects dropdown appears to be uneditable or disabled.

naiduajaykumar

Hi Reina,

In the first change you made I can see a graph with filters like by date and by project,
-> when I filter by project name I don't see project name instead I see their Id's for a user it will difficult to filter.
-> When I switched to dark mode the dark mode is not applied to filters section and graph section though the titles are changed to white text.

In the second change when run the url I got error that related to "projectFilter" because of this the website got crashed.

adithya-6101

Tested the PR thoroughly and everything works well now. The graph renders correctly, filters are working as expected, and both Light and Dark Mode are displaying properly — including the X and Y axis labels. Also confirmed that the issue on the /bmdashboard/totalconstructionsummary route is resolved, and the page no longer crashes. Approving this PR.

Neeraj-Kondaveeti

Tested the PR locally. The page at /bmdashboard/ExpenditureLineGraph loads, but the graph doesn't render. I'm getting a 404 error when it tries to fetch the data, which suggests the backend endpoint may be missing or misconfigured. Let me know once it's fixed—happy to retest.

uhakruthi1

Thoroughly tested the PR and everything functions correctly. The graph renders as expected, filters operate properly, and both Light and Dark Modes display correctly, including X and Y axis labels. Approving the PR.

Babu-kota

I tested the "Cost Breakdown by Type of Expenditure" line graph and confirmed that it renders correctly using the sample data. The time-series cost data displays properly on the x-axis (months) and y-axis (cost), and the graph is responsive in both light and dark modes. Filters for project and date range are working as expected.

graphs.mp4

shashankm9

I have tested this PR, Everything works as expected. Graph looks good with different colors and all the texts are clear and legible in dark mode as well. Good job.

PR.3458.mp4

gurusaichittoji7 · 2025-07-22T17:19:27Z

I checked out the current branch, installed dependencies, and started the app locally. Cleared cache and logged in as an admin. Navigated to /bmdashboard/ExpenditureLineGraph and verified the graph renders with data (using dummy data from MongoDB). Confirmed filter functionality and verified the UI in both light and dark modes. Encountered a 404 Error: Error fetching data — needs backend/API check.

harshavarma29

I have tested the PR in the local environment using admin credentials. Working well for positive scenarios, such as selecting different date ranges and projects, as shown below:

Different date ranges and projects:

positive-scenarios.mp4

However, the following negative scenarios are not handled as expected:
1) Selecting the same date:
When selecting the same start and end date, the expenditure information is displayed as a dot instead of a line.

2) Start date greater than end date / Date ranges with no data:
No error message is shown in the following cases. It would be great if you could add relevant error messages.

i) Start date is greater than end date:

ii) Date ranges with no data:

ShravyaKudlu

Tested in dark and light mode and clicked on all buttons, everything seams to be working as expected

kanishkagarwal6101

I am seeing error in fetching the graph when i go to the page. Will re-review this later.

ReinaT5678 added 2 commits May 1, 2025 10:05

reina create line graph chart for cost breakdown by expenditure

32879da

Reina create line graph chart for cost breakdown by expenditure

730d32a

ReinaT5678 mentioned this pull request May 1, 2025

Shreya P taking over for Vamsidhar - Create a Line Graph Chart for Cost Breakdown by Type of Expenditure OneCommunityGlobal/HGNRest#1357

Open

Reina create line graph chart for cost breakdown by expenditure

07ca848

nikhilpittala16 approved these changes May 2, 2025

View reviewed changes

ReinaT5678 added the High Priority label May 6, 2025

strallia added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Jun 2, 2025

1709abhishek self-requested a review June 13, 2025 23:41

1709abhishek suggested changes Jun 14, 2025

View reviewed changes

Comment thread src/components/BMDashboard/ExpenditureGraph/ExpenditureLineGraph.jsx Outdated

Comment thread src/components/BMDashboard/ExpenditureGraph/ExpenditureLineGraph.jsx Outdated

ReinaT5678 and others added 4 commits June 18, 2025 20:52

feedback changes

4ff0574

Merge branch 'development' into reina-create-line-graph-chart-for-cos…

32c6e47

…t-breakdown-by-expenditure

test issues

38bfb7d

lint errors

bfd83bd

Venk-rgb self-assigned this Jun 27, 2025

Venk-rgb reviewed Jun 27, 2025

View reviewed changes

ReinaT5678 requested a review from 1709abhishek June 27, 2025 22:58

boppanapraveen reviewed Jun 28, 2025

View reviewed changes

marcusyi1 requested changes Jun 29, 2025

View reviewed changes

shashank-madan reviewed Jul 2, 2025

View reviewed changes

1709abhishek removed their request for review July 2, 2025 20:38

jaydeep138 reviewed Jul 2, 2025

View reviewed changes

jaydeep138 suggested changes Jul 2, 2025

View reviewed changes

pranavgovi suggested changes Jul 4, 2025

View reviewed changes

vamsidharpanithi reviewed Jul 7, 2025

View reviewed changes

naiduajaykumar suggested changes Jul 9, 2025

View reviewed changes

ReinaT5678 requested review from 1709abhishek, jaydeep138, naiduajaykumar and pranavgovi July 13, 2025 20:21

test errors

b9057f4

adithya-6101 previously approved these changes Jul 15, 2025

View reviewed changes

Neeraj-Kondaveeti reviewed Jul 15, 2025

View reviewed changes

uhakruthi1 previously approved these changes Jul 16, 2025

View reviewed changes

fixed filter layout

a584543

ReinaT5678 dismissed stale reviews from uhakruthi1 and adithya-6101 via a584543 July 16, 2025 20:50

Babu-kota previously approved these changes Jul 18, 2025

View reviewed changes

This comment was marked as resolved.

Sign in to view

shashankm9 previously approved these changes Jul 20, 2025

View reviewed changes

styling changes and test changes

1bf8efb

ReinaT5678 dismissed stale reviews from shashankm9 and Babu-kota via 1bf8efb July 25, 2025 16:31

harshavarma29 requested changes Jul 26, 2025

View reviewed changes

ReinaT5678 requested review from Neeraj-Kondaveeti, boppanapraveen, shashank-madan, sphurthy and vamsidharpanithi July 29, 2025 19:22

ReinaT5678 added 2 commits July 30, 2025 11:52

feedback fixes for errors

9dec5f2

fixed lint issues

6ac2087

ShravyaKudlu approved these changes Aug 1, 2025

View reviewed changes

kanishkagarwal6101 reviewed Aug 4, 2025

View reviewed changes

ReinaT5678 closed this Aug 16, 2025

one-community mentioned this pull request Aug 26, 2025

Saurabh taking over for Vamsidhar - Create Line Graph For Cost Breakdown by Expenditure 20 #3906

Open

Uh oh!

Conversation

ReinaT5678 commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Note:

Uh oh!

netlify Bot commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

nikhilpittala16 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Venk-rgb left a comment

Choose a reason for hiding this comment

Uh oh!

boppanapraveen left a comment

Choose a reason for hiding this comment

Uh oh!

marcusyi1 left a comment

Choose a reason for hiding this comment

Uh oh!

Deekshith010905 commented Jul 1, 2025

Uh oh!

shashank-madan left a comment

Choose a reason for hiding this comment

Uh oh!

jaydeep138 Jul 2, 2025

Choose a reason for hiding this comment

Uh oh!

jaydeep138 left a comment

Choose a reason for hiding this comment

Uh oh!

Charitha2009 commented Jul 4, 2025

Uh oh!

pranavgovi left a comment

Choose a reason for hiding this comment

Uh oh!

Varshakaranam18 commented Jul 5, 2025

Uh oh!

vamsidharpanithi left a comment

Choose a reason for hiding this comment

Uh oh!

suparshwa31 commented Jul 8, 2025

Uh oh!

naiduajaykumar left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adithya-6101 left a comment

Choose a reason for hiding this comment

Uh oh!

Neeraj-Kondaveeti left a comment

Choose a reason for hiding this comment

Uh oh!

uhakruthi1 left a comment

Choose a reason for hiding this comment

Uh oh!

Babu-kota left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

shashankm9 left a comment

Choose a reason for hiding this comment

Uh oh!

gurusaichittoji7 commented Jul 22, 2025

Uh oh!

harshavarma29 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ReinaT5678 commented May 1, 2025 •

edited

Loading

netlify Bot commented May 1, 2025 •

edited

Loading

nikhilpittala16 left a comment •

edited

Loading

naiduajaykumar left a comment •

edited

Loading

harshavarma29 left a comment •

edited

Loading