SaiSandeep Fix Calender for loss tracking

[saisandeepkoritala]

Description

The calendar feature in the Loss Tracking Line Chart is broken. The native <input type="month"> accepts invalid years (e.g. 0020, 0090), has a hidden native picker icon sitting under the custom icon, and behaves differently across browsers (Firefox has no month picker). This PR replaces the Start Date and End Date inputs with a custom month/year calendar picker for entering custom dates. It also fixes the chart legend overflowing outside the chart card and resolves the SonarCloud issues raised on these files.

Implements # PR 5317 - Implement Calendar feature for the loss tracking line graph (Priority High)

Related PRS (if any):

This PR is related to PR #5016 → #5371 (Loss Tracking Line Chart). No backend PR is required.

Main changes explained:

• Create MonthPicker.jsx for introducing a custom month/year calendar picker (year navigation, month grid, Clear button, Esc/click-outside to close, <dialog> element for accessibility).
• Update LossTrackingLineChart.jsx for replacing the native month inputs with MonthPicker, limiting selectable dates to the range in the data, and preventing the end date from being before the start date.
• Update LossTrackingLineChart.jsx for fixing Sonar issues (localeCompare in the sort compare function, .at(-1) instead of [length - 1]).
• Update LossTrackingLineChart.module.css for adding the calendar picker styles and the .chartArea wrapper, and removing the old native input[type="month"] styles.
• Update the chart layout so the fixed height applies to the chart area only, which stops the legend from overflowing the card.

How to test:

1. check into current branch
2. do npm install and npm start to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard → Total Construction Summary → Loss Tracking
6. Click the Start Date field and verify the calendar opens, you can change the year with the arrows, and you can pick a month
7. Click the End Date field and verify months before the selected start date are disabled
8. Verify the chart updates to the selected date range, the Clear button empties a date, and Reset Filters resets everything
9. Verify the legend is fully inside the chart card with all 9 items visible
10. verify this new feature works in dark mode

Screenshots or videos of changes:

Note:

Selectable dates are limited to the range available in the chart data (currently Jan 2022 to Jun 2024), so years like 0020 can no longer be entered. If more data is added later, the range extends automatically.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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