Aseem - Phase 2 - Add filters for for Predicted vs Actual Cost Line chart and UI changes

[aseemdeshmukh]

Description

Related PRS (if any):

This frontend PR is related to the development backend
…

Main changes explained:

• Modified CostPredictionChart.jsx to add Date Filter, Project list drop down, reset filter, refined tooltip, UI changes for better readability
• Modified CostPredictionChart.module.css

How to test:

1. check into current branch

2. do npm install and ... to run this PR locally

3. Clear site data/cache

4. log as admin user

5. go to http://localhost:3000/bmdashboard/totalconstructionsummary

6. go to "Financial Tracking"
   verify if :
   a) tooltips are working properly for the bars in the graph
   b) text is readable
   c) reset filter button works
   

7. verify this new feature works in dark mode

Screenshots or videos of changes:

DemoAddFiltersFinancialTracking.mp4

Note:

This PR is modification of the related PR #3514. No functionality related to the line graph is changed. Only UI changes are made to the graph and to the container for better readability. Addition of functionality that is done in this PR is: 1. Adding Date and Project Filter, Adding reset filter.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	7c72417
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6983f340a0e6780008c32e10
😎 Deploy Preview	https://deploy-preview-4354--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.

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

[Sriamshreddy000]

Hi Aseem,
I tested this PR locally, logged in as admin, and navigated to Dashboard/TotalConstructionSummary and then "Financial Tracking". The date filter, project dropdown, tooltips, and reset filter button all work as expected. The text is clearly readable, and the chart displays properly in both light and dark modes. Everything looks good.

Attaching screenshots for reference.

[smohansatyaram]

Hi Aseem, I reviewed the PR and tested it locally. The filters, reset button, tooltip updates, and UI readability changes are working smoothly. The chart looks clean in both dark and light modes, and the filters behave correctly. No issues found on my end. Good work.

[bhanuanishakkineni]

Hello Aseem,
I have reviewed this PR though checking out to this branch and logging in as an admin.
From my testing, I observed that the filters like project, category, start date, end date are aligned and reset filters button are working fine. Even the tooltips are working fine.
The issues I observed are:
Tooltips are too big that they are covering the entire plot while hovering. Reduce the size such that they are readable and also the plot is visible
The grid of 'financial tracking' is not responsive for all screen sizes. For smaller screen sizes, Actual vs Planned costs plot is shrinking such that it is neither readable not visible. The other plot is not responsive and is not fully visible when the screen size gets shrank.

PR.4354.testing.mp4

[SwathiAngadi]

Hi Aseem,

I have tested your PR by checking out to your branch. Reset button Works, Tooltip works. Found font is little big for that chart. However I found charts are not responsive. Actual vs Planned Costs graph is breaking in most of the screen. When I tetsed for iphone 14pro max size, main graph was also breaking attached screenshot for reference.

[VijayAnirudh]

I tested the updated Predicted vs Actual Cost line chart. The new filters, reset button, and UI refinements all work as intended — the chart is responsive on desktop, labels and tooltips are accurate, and dark mode styling is consistent. The only issue I noticed is that when the page is opened in mobile dimensions, the site doesn’t switch to a mobile‑optimized view. I’m not sure if this PR was intended to address mobile responsiveness, but currently the layout remains in desktop mode. Aside from that, the changes behave as expected.

[rohanrastogi311]

HI Aseem,

Functionality and implementation look good and are working.

Can you give some dates that are functional for the time filters?

[Anusha-Gali]

Hi Aseem,

I have reviewed your PR locally and though the graph does work as per requirement, the graph is not mobile responsive.

[Vikas-8055]

Hi Aseem,

I tested PR #4354 locally and the desktop functionality works well, but there are mobile responsiveness issues.

I logged in as admin and navigated to the Financials Tracking section. The project dropdown and date range filters work correctly, updating the chart with accurate filtered data. The reset button clears all filters as expected, and tooltips display the planned, actual, and predicted cost values properly. Dark mode renders well with good contrast for both charts and controls.

However, when testing on iPhone 14 Pro Max dimensions, the layout breaks significantly. The "Actual vs Planned Costs" bar chart becomes cut off and is not visible on the mobile screen. The card sections appear as empty white boxes, and the grid layout doesn't adapt properly to smaller viewports.

The desktop functionality is well-implemented, but the mobile responsiveness needs to be fixed before this can be merged.

[abhinav-TB]

Hi Aseem, I have tested this PR locally and all graphs are rendered properly , however in the dark mode the header weekly project summary is not visible properlyl.

[Shravan-neelamsetty]

Hi Aseem, I tested this PR locally by logging in as admin and navigating to /bmdashboard/totalconstructionsummary and then to the "Financial Tracking" tab. The date filter, project dropdown, and reset filter button all work correctly, and the chart displays properly in both light and dark modes

[Ganesh112001]

Hi Aseem, I tested this PR locally following the provided steps and encountered some significant issues that prevent proper functionality. After checking out the aseem-add-filters-financial-tracking branch, installing dependencies, and navigating to /bmdashboard/totalconstructionsummary, I found that the Financial Tracking section has filtering problems. When I select different date ranges using the date filter, the graphs do not display or update as expected—the chart either remains empty or shows no changes despite the filter selection. Additionally, in the Labor and Time Tracking section, when I select the required dates and click the submit button, the button is unresponsive and does not trigger any action, preventing me from applying the selected filters or viewing the filtered data. These are blocking issues that prevent me from fully testing the tooltip improvements, reset filter functionality, and overall readability enhancements mentioned in the PR. There are a lot of space gaps as well in the structuring as well. The date filtering and submit button functionality need to be fixed before this PR can be properly reviewed and approved for merge.

[saitejakaasoju]

Hi Aseem, I tested this PR locally by logging in as an admin and navigating to /bmdashboard/totalconstructionsummary, then opening the Financial Tracking tab. The date filter, project dropdown, and reset filter button all work correctly, and the chart displays properly in both light and dark modes.

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

[maithili20]

Hi @aseemdeshmukh
I can’t see the chart. Is there anything I might be missing? I confirmed that the code I’m running does include your changes.

[Sakshitapkir03]

Hello Aseem,
I have reviewed your PR locally, I have logged in as admin directed to http://localhost:5173/bmdashboard/totalconstructionsummary/ url and checked the filters, date for planned vs actual chart and it works fine. It works well with light as well as dark mode, the only thing remaining is this is not mobile responsive and break when screen size is reduced. The Actual vs Planned chart is not visible when the screen size is for mobile screen. Below are the attached screenshot of my testing in both light and dark mode for both desktop size screen and mobile screen.

[naznin07]

Linechart declaration includes the date filtering logic.

[saisandeepkoritala]

Hi Aseem,

I ran your PR locally and I can’t see the chart. I am not sure what's going wrong for me.

[rajanidi1999]

Hi,
I have tested your PR locally and its running successfully.

[rithika-paii]

Hi Aseem,

I reviewed this PR #4354 and attempted to test the changes locally. After switching to the branch and restarting the setup, the application still does not load on localhost, so I was unable to verify the functionality.

Could you please check whether there are any missing setup steps, dependency issues, or build/runtime errors specific to this branch?

[kunchalasireesha]

Hi Aseem, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

[saurabhdipte]

Hi Aseem,

I tested the PR changes locally and the functionality looks good. One thing I noticed though, the graph readability in dark mode needs some improvement. The current styling makes it difficult to read.

[DeepighaJ]

Hi

• Checked out to the current branch and ran PR locally.
• I could not find the Planned Vs Actual Cost tracking chart mentioned in the requirement. Only the bar graph displays.
• The Project details like total project cost , material cost , labor cost and Equipment cost values are not visible in Dark mode.
• No tooltip available for the existing bar graph as well. Also please try to resolve the merge conflicts as well.

[Jaden300]

Tested the PR locally on the Financial Tracking dashboard.

The page and updated UI components load correctly, and overall readability in the chart area is good. Tooltip functionality appears to work properly on the visible graph elements, and no major dark mode or layout issues were observed during testing.

However, the actual chart data does not load, so the Predicted vs Actual Cost line chart could not be fully validated. Because the graph content is missing, it was not possible to verify filtering behavior against real dataset changes.

Additionally, the PR description references a “Reset Filter” button, but no reset filter control was visible during testing, so this functionality could not be tested.

Overall UI changes appear stable, but missing chart data and the absence of the reset filter functionality prevent full verification of the feature set described in the PR.

[amaresh2001]

Tested locally on branch: aseem-add-filters-financial-tracking, with backend on development, with admin user

Issues:
The main feature of this PR, the "Planned Vs Actual costs tracking" line chart with Project and Date Range filters, is not visible in the Financials Tracking section. Only the "Actual vs Planned Costs" bar chart renders. The line chart with the new filters does not appear at all.

Merge conflicts:
This PR has active merge conflicts that must be resolved before it can be merged.

[YSWFelicity]

Tested locally on branch aseem-add-filters-financial-tracking against the development backend, logged in as an admin user.

🔴 Blocking issues

1. Main feature is not rendering
   The core deliverable of this PR — the "Planned vs Actual Costs" line chart with the new Project and Date Range filters — does not appear at all in the Financial Tracking section. Only the existing "Actual vs Planned Costs" bar chart renders. Since the line chart and its filters are the entire point of this PR, this needs to be fixed before it can move forward.

Could you confirm:

Whether the CostPredictionChart component is actually mounted/imported on the Financial Tracking page on this branch?
Whether it depends on a backend endpoint that isn't yet available on development (any console/network errors on your side)?
2. Merge conflicts
This PR currently has active merge conflicts with development. Please merge in / rebase onto the latest development and resolve them so the branch is mergeable.

Next steps
Once the line chart renders correctly and the conflicts are resolved, I'll re-test and re-review. Happy to pair if it helps narrow down why the chart isn't showing.

[Mahitha-pasupuleti]

Tested this PR locally on the specified branch with the backend on the development branch and logged in as an Admin user.

The Financial Tracking section renders correctly; however, the newly added Date Filter, Project dropdown, and Reset Filter button described in the PR are not visible. Since the new filtering controls do not appear, their functionality cannot be verified.

Requesting changes until the new UI elements are visible and testable.

[Abhi-R0211]

I tested this PR locally by checking out your branch, and navigating to /bmdashboard/totalconstructionsummary as an admin user.

What's Working Well

The existing "Actual vs Planned Costs" bar chart renders correctly in both light and dark mode. The Project and Category dropdowns update the chart as expected, tooltips display Actual and Planned values clearly, and the dark mode contrast on the bar chart is readable. The mobile layout at iPhone 14 Pro Max dimensions holds together without breaking.

Issues

1. Main feature - Planned vs Actual Cost line chart is not rendering

The "Planned Vs Actual costs tracking" line chart with Project filter, Date Range filter, and Reset button does not appear in the Financial Tracking section. Only the pre-existing "Actual vs Planned Costs" bar chart renders. As a result, the new improvements described in the PR could not be tested at all.

[AmaanSyed09]

Hi Aseem,

I verified the following during testing:

1. The "Actual vs Planned Costs" chart renders correctly.

2. Project and Category filters update the displayed values as expected.

3. Tooltips are working properly.

4. Dark mode appears to be functioning correctly.

5. The chart remains usable on smaller screen sizes.

6. The page loads successfully without any obvious issues.

Issues Found:

1. I was unable to verify the "Planned Vs Actual Costs Tracking" chart shown in the PR screenshots. It does not appear in my testing environment.

2. Another reviewer also reported that the chart is not visible during testing.

3. Since one of the primary features shown in the PR cannot currently be validated, I'm requesting changes until its visibility and expected behavior are clarified.

Screenshots Attached:

[Dnagabahiru]

Tested the Financial Tracking feature in both light and dark modes. Tooltips are working properly for the bars in the graph, the text is readable, and the Reset Filter button functions as expected. The chart heading displayed differs from the heading shown in the PR screenshot/specification; otherwise, the feature is working as expected in both modes.

[shree-vaths]

Hello I tested #4354 on my local,

Passed Scenarios
-The bar chart shows based on project and category filters.
-The readability is improved beucause of legeng on bar graph.
-The feature works in both light and dark mode.

Failing Scenario
-The line chart does not show up. Its been replaced by pie-chart.

Please comment if this change of chart type is new requirement or line chart is mising.

Screen.Recording.2026-07-06.at.4.22.07.PM.mov

[aseemdeshmukh]

Created a new PR #5375 and closing this current PR