[Isha2303165]

Task:
Implement the BM Dashboard rental cost visualizations and connect them to backend APIs.

The page should include:

1. Total Rentals Cost Over Time

   • Display a line chart showing total rental cost over time.
   • X-axis: date.
   • Y-axis: total rental cost.
   • Show data labels.
   • Provide project and date range filters.
   • Update the chart dynamically when filters change.

2. How Much of Tools Costs Are Due to Rentals?

   • Display a stacked bar chart grouped by project.
   • X-axis: project.
   • Y-axis: cost.
   • Include separate categories for:
     • tools costs due to owned tools
     • tools costs due to rented tools
   • Include a color legend.
   • Show data labels.
   • Provide project and date range filters.
   • Update the chart dynamically using backend API data.

The charts should work with the existing BM Dashboard styling and support both light and dark mode.

Description

Implements the frontend charts for displaying rental and tool costs in the BM Dashboard.

This PR adds API integration for the rental cost dashboard and introduces a stacked bar chart titled:

“How Much of Tools Costs Are Due to Rentals?”

The page now displays:

• Total Rental Cost Over Time as a line chart
• Owned vs Rented Tool Costs by Project as a stacked bar chart
• Project filtering
• Date range filtering
• Data labels
• Dark mode compatible chart styling

Implements # (WBS)

Related PRS (if any):

Backend: OneCommunityGlobal/HGNRest#2429

To test this frontend PR, checkout the related HGNRest backend PR #XXX.

Main changes explained:

• Updated RentalChart.jsx to integrate the new rental cost APIs.
• Added the Total Rental Cost Over Time API integration.
• Added a stacked bar chart showing:
  • Tools costs due to owned tools
  • Tools costs due to rented tools
• Added Chart.js BarElement and bar chart rendering.
• Added project names to the stacked bar chart using the existing available-projects API.
• Connected project and date filters to both new APIs.
• Added data labels displaying monetary values.
• Added dark mode support for chart titles, legends, axes, labels, and grid lines.
• Added loading/no-data handling for the new chart.
• Added API endpoint constants in src/utils/URL.js.
• Preserved the existing rental chart API because it is still used for project and tool dropdown data.

How to test:

1. Checkout this branch:
   isha-rental-cost-breakdown-chart
2. Run:
   npm install
3. Start the frontend:
   npm start
4. Checkout and start the related backend PR #XXX.
5. Clear site data/cache if needed.
6. Log in as an admin user.
7. Navigate to:
   BM Dashboard → Rental Cost Over Time
8. Verify the Total Rental Cost Over Time line chart loads.
9. Verify the stacked bar chart titled “How Much of Tools Costs Are Due to Rentals?” appears below the line chart.
10. Verify the stacked bar chart displays separate values for:
    • Owned tool costs
    • Rented tool costs
11. Verify project names such as Project 1, Project 2, and Project 3 display correctly.
12. Change the Project filter and verify both charts update.
13. Change the From and To date filters and verify both charts update.
14. Verify monetary data labels display on the charts.
15. Switch to dark mode and verify chart text, legends, axes, and labels remain readable.

Screenshots or videos of changes:

Note:

This PR depends on the related backend PR because the new charts consume:

• /api/bm/rentals/cost-over-time
• /api/bm/tools/cost-breakdown

The existing /api/bm/rentalChart endpoint remains in use for the current project/tool dropdown data.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[rahulrubugunday]

I have reviewed your PR locally (e471881, backend on #2429) and it works as per requirement.

1. BM Dashboard > Rental Cost Over Time: the Total Rental Cost line chart loads, with the "How Much of Tools Costs Are Due to Rentals" stacked bar chart below it showing owned and rented tool costs for Project 1, 2 and 3.
2. Changing Project to Project 1 updated both charts, and the line points add up to the rented bar ($605.75).
3. Setting From 05/01/2024 and To 08/31/2024 updated both charts (two points, rented bar $178.50).
4. Money data labels show on both charts, and text, legends and axes are readable in both light and dark mode.

[iAbhi001]

I tested frontend PR #5704 locally at commit e471881 paired with backend PR #2429, but encountered a blocking data fetching issue on the Rental Cost Over Time dashboard. Navigating to /bmdashboard/rentalchart loads the filter controls, but both the line chart and the stacked bar chart fail to render, displaying an "Error loading rental cost chart data" screen. The underlying API calls fail to return a valid response with the local development dataset. Please verify that the frontend handles empty, missing, or unseeded rental records gracefully without crashing the view, and share instructions on any required local database seeding or fixtures needed to populate the charts. Requesting changes until the dashboard loads and displays data reliably in local testing environments.

[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