Adithya Fix Labor Cost Variance

[adithya-6101]

Description

Enhances the Paid Labor Cost chart to include budget comparison and variance indicators. Previously, the view only showed actual paid labor costs, making it difficult for project managers to assess cost overruns or financial risks. This PR introduces a dual-bar chart and a dynamic summary section to display budgeted amounts alongside actuals, complete with color-coded variance tracking.

This PR implements:

1. Dual-Bar Chart Visualization: Updated the Chart.js configuration to render two bars per task—one solid bar for Actual Cost and one semi-transparent, dashed-border bar for Budgeted Cost.
2. Variance Calculation & Indicators: Added a summary section below the chart that automatically calculates Actual - Budget. Uses color indicators (Red for over-budget, Green for under-budget) and displays the percentage variance.
3. Robust Local Mock Data: Implemented a local MOCK_DB spanning 30 days. Since the backend endpoint does not yet support budget data, the component intercepts API calls in development mode to allow full testing of the UI and filters without throwing 404 errors.
4. Dynamic Filtering: Refactored the aggregateData function so that filtering by Task, Project, or Date Range instantly recalculates both the chart rendering and the bottom summary numbers.

---

Related PRS (if any):

#4105

---

Main changes explained:

• Modified PaidLaborCost.jsx:
  • aggregateData: Rewritten to calculate and store totalCost and totalBudget simultaneously across all active filters.
  • processApiResponse: Added a fallback mechanism that injects calculated budget data if the live database is missing it, ensuring the UI always has data to render.
  • fetchData & fetchLaborCostData: Added short-circuit logic (isDevelopmentEnvironment()) to intercept 404 errors and route the component to use the expanded 30-day MOCK_DB.
  • Chart Configuration: Mapped the datasets to push two objects per task (Actual and Budget) with distinct styling properties (e.g., borderDash).
  • Summary UI: Added a flexbox container at the bottom of the component to display Total Budget, Total Actual, and the color-coded Variance string.

---

How to test:

1. Checkout the current branch.
2. Do npm install and npm start to run this PR locally.
3. Clear site data/cache.
4. Log in as an Admin or Owner.
5. Navigate to BM Dashboard → Total Construction Summary (or the respective Labor Tracking page).
6. Verify Data & Filters:
   • Select specific Projects and Tasks from the dropdowns to ensure the aggregation isolates the correct data.
7. Verify Visual Enhancements:
   • Check the chart legend and verify it shows both (Actual) and (Budget) entries.
   • Verify the actual bars are solid and the budget bars are slightly transparent with a dashed outline.
   • Check the Variance numbers at the bottom. Verify the text turns Green when actuals are under budget, and Red when actuals exceed the budget.
8. Verify this new feature works in dark mode and that the text colors remain readable.

---

Screenshots or videos of changes:

Total.Construction.Summary.-.Google.Chrome.2026-05-28.14-11-37.mp4

---

Note:

The backend endpoint (/api/labor-cost) is currently mocked via MOCK_DB for local development to prevent 404 crashes and allow full interaction with the Date/Project/Task filters.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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