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

[aseemdeshmukh]

Replacement PR for PR #5375

Description

This PR covers/solves both of these similar tasks:

And also this task:

Related PRS (if any):

This frontend PR is related to the #4354 and #5375

Main changes explained:

• Updated file CostPredictionChart.jsx
• Updated file 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"
7. verify if :
   a) For dark mode, tooltips and texts are readable and can be distinguished --> * tooltip explanations for Planned, Actual, and Predicted costs exist
   b) Filters for Projects and date filter work
   c) reset filter button works
   d) custom tooltip is working
   e) There are numeric values and percentages on pie charts (Labor, Equipment, Materials).
   f) Highlight cost overruns/underspends using color indicators or badges.
   g) Ensure consistent color mapping across all charts (same color = same cost type).
8. verify this new feature works in dark mode

Screenshots or videos of changes:

DemoAddFiltersFinancialTracking.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[kzou55]

Hi Aseem,

I ran and tested the PR locally.

Verified

• Start Date and End Date filters work

• Reset filters work

  Recording.2026-07-25.144523.mp4

• Pie chart have numeric values and percentages on pie charts (Labor, Equipment, Materials).

  

• Color overall seems consistent across the charts

Issues

1. Only 1 project available in the project filter. Need more projects to fully test if the filter is working

2. Filters(project, start date, end date, and reset) can be better aligned and same size.

[aseemdeshmukh]

Issues

1. Only 1 project available in the project filter. Need more projects to fully test if the filter is working

Hello,

Thank you for reviewing the task.
I have added more projects to make it easier to test the project filter and other filters. I have also fixed the size of the Filters(project, start date, end date, and reset) and aligned them. Attached the video.

CR1.mp4

[kzou55]

Hi Aseem,

I ran and tested the PR locally again.

Issues

1. The "Reset Filters" could be better aligned. Unless you intended for it to always be centered after main filter buttons. Personally found it to be taking up lots of unneeded spaces especially when it was full screen size as it looked like it could just be on the same line.

   

2. Start Date and End Date filter not fully working. Seems like anything before February 2026 and anything after July isn't getting rendered.

   

Recording.2026-07-27.234353.mp4

[DeepighaJ]

Tested the PR locally. Verified that the Project, Category, and Date filters function correctly, Reset/Clear Filters work as expected, tooltips display accurate and dynamically updated information, color mapping is consistent across charts, pie chart tooltips show amount and percentage, and the implementation works properly in dark mode.
Issues:

• In dark mode the date picker inputs remain white in Cost Breakdown by Category.
• Tooltip overlaps the donut in some cases.

[aseemdeshmukh]

Issues

1. The "Reset Filters" could be better aligned. Unless you intended for it to always be centered after main filter buttons. Personally found it to be taking up lots of unneeded spaces especially when it was full screen size as it looked like it could just be on the same line.

2. Start Date and End Date filter not fully working. Seems like anything before February 2026 and anything after July isn't getting rendered.

Hello,

Thank you for reviewing.

1. I have removed the restriction of the Reset filter to be center aligned. The button now moves as it fits the different screen resolutions. The Reset button filter will now stay left aligned when it does not fit in a single line with the other filters. Please remember the button will adjust as per the size and resolution.
   (Attached screenshots of different resolutions)

3. The start date filter is fixed, you can select the previous dates. However, for the End date the last date you can choose is the current date that is the End date cannot be after Today's date which is how it is supposed to be.
   Attached video of both the change requests

CR2.mp4

[aseemdeshmukh]

Tested the PR locally. Verified that the Project, Category, and Date filters function correctly, Reset/Clear Filters work as expected, tooltips display accurate and dynamically updated information, color mapping is consistent across charts, pie chart tooltips show amount and percentage, and the implementation works properly in dark mode. Issues:

• In dark mode the date picker inputs remain white in Cost Breakdown by Category.
• Tooltip overlaps the donut in some cases.

Hi Deepigha,

You are testing a different requirement. Please check the video for reference that I have uploaded to review this PR. Thanks!

[DeepighaJ]

Tested the Financial Tracking and below are my observations.
@aseemdeshmukh according to your comment, the End Date should not allow selecting a date later than the current date. However, I was able to select an End Date of 10/01/2026, which appears to contradict the expected behavior. Could you please verify whether future End Dates should be restricted in the Calendar?

In the below snap i have selected start date in March but the x axis of chart starts from April, similarly if startdate in Feb, chart displays from March.


Pie chart displays as expected.



While testing the responsive/mobile layout, I observed that the chart tooltip flickers, making it difficult to read the values. Could you please confirm the tooltip hover behavior on smaller screen sizes? The hover area also seems quite small, affecting usability.

[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

[aseemdeshmukh]

Tested the Financial Tracking and below are my observations. @aseemdeshmukh according to your comment, the End Date should not allow selecting a date later than the current date. However, I was able to select an End Date of 10/01/2026, which appears to contradict the expected behavior. Could you please verify whether future End Dates should be restricted in the Calendar?

1. Disabled the future dates for end dates. Refer Screenshot.

In the below snap i have selected start date in March but the x axis of chart starts from April, similarly if startdate in Feb, chart displays from March.

2. Fixed this, refer screenshot.

While testing the responsive/mobile layout, I observed that the chart tooltip flickers, making it difficult to read the values. Could you please confirm the tooltip hover behavior on smaller screen sizes? The hover area also seems quite small, affecting usability.

3. The hover works perfectly fine for mobile resolution. I have attached screenshot below. There is no more changes that can be done in this as the data is huge and this is a line chart so the behaviour is expected as seen for mobile resolution.