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	ca2e7e1
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a220eb6db092f0009d1e6a2
😎 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.

[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