Skip to content

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

Open
aseemdeshmukh wants to merge 3 commits into
developmentfrom
aseem-predictedvsactualvsplanned-linechart
Open

Aseem - Phase 2 - Add filters for Predicted vs Actual Cost Line chart and UI changes#5403
aseemdeshmukh wants to merge 3 commits into
developmentfrom
aseem-predictedvsactualvsplanned-linechart

Conversation

@aseemdeshmukh

@aseemdeshmukh aseemdeshmukh commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Replacement PR for PR #5375

Description

This PR covers/solves both of these similar tasks:
image
And also this task:

image

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

netlify Bot commented Jul 24, 2026

Copy link
Copy Markdown

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 34c5469
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a67ec70cf232c0008ac4cad
😎 Deploy Preview https://deploy-preview-5403--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 kzou55 left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

    Image
  • 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
Image
  1. Filters(project, start date, end date, and reset) can be better aligned and same size.
Image

@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants