Adithya Improve Expense Chart

[adithya-6101]

Description

This PR enhances the "Planned vs Actual Cost" graph on the Financials dashboard to provide immediate, actionable insights into project budgets. It introduces dynamic variance calculations, custom tooltips, and clear visual indicators for over/under-budget status.

Related PRs (if any):

• Frontend PR jaissica - created actual vs planned expense bar chart #3456 (Original Chart Implementation)

Main changes explained:

• Variance Indicators: Added dynamic calculations to determine cost variance (Actual - Planned). The chart now renders positive variance (Over Budget) in red and negative variance (Under Budget) in green.
• Custom Tooltips: Built a custom Recharts tooltip that cleanly displays the specific Planned cost, Actual cost, Variance amount, and Variance percentage.
• Dark Mode Compatibility: Configured the layout and tooltip rendering to seamlessly inherit the darkMode state from the parent component.
  • Props Validation: Added prop-types validation for active, payload, label, darkMode, and nested payload structures to ensure data reliability.

How to test:

1. Checkout Branch: git checkout adithya_improve_expense_chart
2. Setup: Run npm install and npm run start:local.
3. Navigation Test:
   • Navigate to BM Dashboard > Total Construction Summary (or the relevant Weekly Project Summary page).
   • Locate the Planned vs Actual Cost graph under the Financials section.
4. Functionality Test:
   • Hover over the bars to verify the custom tooltip displays the correct Planned, Actual, and Variance data.
   • Adjust the Project, Category, and Date filters. Ensure the graph updates dynamically and displays "No data available" when no matches are found.

Screenshots or videos of changes:

Fix.Actual.vs.planned.cost.graph.visuals.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[HemanthNidamanuru]

Hi,

I tested this PR locally and found the following issues:

Variance color coding not visible in dark mode - the color coded variance text on hover is not visible/readable in dark mode.
Calendar misaligned in dark mode - the date picker calendar is not properly aligned when dark mode is enabled.
Future dates selectable in calendar - users can select future dates in the date filter, which should not be allowed for expense data.

[adithya-6101]

Hi,

I tested this PR locally and found the following issues:

Variance color coding not visible in dark mode - the color coded variance text on hover is not visible/readable in dark mode. Calendar misaligned in dark mode - the date picker calendar is not properly aligned when dark mode is enabled. Future dates selectable in calendar - users can select future dates in the date filter, which should not be allowed for expense data.

Hi @HemanthNidamanuru, thank you for the feedback! I have pushed a new commit addressing all of your points:

Variance Colors: Updated the dark mode theme variables to use high-contrast neon red/green so the text is fully readable on hover and above the bars.

Calendar Alignment: Refactored the filter container to use a clean 2x2 grid, ensuring the End Date input no longer wraps awkwardly. Added color-scheme support so the native calendar renders properly in dark mode.

Future Dates: Fixed the date logic to use the user's local timezone (preventing UTC offset bugs) and applied it to the max attribute, successfully disabling all future dates.

Can you please re-review this pr and approve it.

Thank you.

[DeepighaJ]

• Tested the PR locaaly and Planned and Actual cost works as expected.
• The Previous issues are issues are resolved and tooltip, calendar and filters are working as expected.
• But Cost Breakdown by Category as show in the last screenshot doesn't display the From and To dates properly in dark mode. Is this scoped for this PR?

[adithya-6101]

• Tested the PR locaaly and Planned and Actual cost works as expected.
• The Previous issues are issues are resolved and tooltip, calendar and filters are working as expected.
• But Cost Breakdown by Category as show in the last screenshot doesn't display the From and To dates properly in dark mode. Is this scoped for this PR?

Hi @DeepighaJ,

Thank you so much for testing this and confirming that the tooltip, calendar, and filter fixes are working perfectly!

Regarding the "Cost Breakdown by Category" dates in dark mode: You are exactly right, that is outside the scope of this PR. This ticket was strictly focused on rebuilding the "Planned vs Actual Cost" graph.

To avoid scope creep and prevent potential merge conflicts with any other developers working on the Financials dashboard, I purposefully haven't modified the neighboring CostBreakDown component. I highly recommend we open a separate ticket to track and fix the dark mode date display for that specific chart.

Since the in-scope items are functioning as expected, could you please approve this PR so we can get these improvements merged? Thank you again for your help!

[HemanthNidamanuru]

Hi,

I tested this PR locally. The calendar alignment and future date restriction issues have been fixed. However, the variance color coding on hover is still not working in dark mode and the text remains white instead of showing the correct color. Please fix this before merge.

[adithya-6101]

Hi,

I tested this PR locally. The calendar alignment and future date restriction issues have been fixed. However, the variance color coding on hover is still not working in dark mode and the text remains white instead of showing the correct color. Please fix this before merge.

Hi @HemanthNidamanuru,

Thank you for testing the latest changes! I have just pushed an update to address the dark mode tooltip issue.

Could you please pull the latest changes, clear your cache, and test the hover colors in dark mode once more? Let me know if everything looks good on your end!

[HemanthNidamanuru]

Hi Adithya,

I tested this PR locally. The variance color coding on hover is now working correctly in dark mode. All previously reported issues have been resolved.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
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

[one-community]

Thank you all, merging!