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

[aseemdeshmukh]

Description

This PR covers/solves both of these similar tasks:

And also this task:

Related PRS (if any):

This is a redo of PR #4354 Frontend PR, including fixes for all the feedback provided there.

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:

1.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[sonarqubecloud]

Quality Gate failed

Failed conditions
5.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[HemanthNidamanuru]

Hi Aseem,

I tested this PR locally. The Financial Tracking features, including tooltips, project and date filters, reset functionality, custom tooltips, pie chart values and percentages, cost variance indicators, and consistent color mapping, are working as expected in dark mode.

However, the calendar is not properly aligned in dark mode, and the SonarQube check is failing. Please review these issues before merging.

[beblicarl]

This feature works as intended and the code is great. However, you have some merge conflicts that needs to be resolved

https://www.loom.com/share/dbd016714126454c968ad63c70dbf023

[aseemdeshmukh]

Closing this PR and created a new PR #5403