[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 #5371 - 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:

• MonthPicker.jsx: Created a custom month/year calendar picker component with <dialog>, year navigation, month grid, and accessibility handlers (Esc/click-outside).
• LossTrackingLineChart.jsx:
  • Replaced native month inputs with MonthPicker.
  • Added constraints to enforce selectable dates within the dataset range and prevent endDate < startDate.
  • Scoped fixed height to the chart area wrapper to prevent legend overflow.
• LossTrackingLineChart.module.css: Added styling for .chartArea and the custom picker; removed unused native input[type="month"] styles.

How to test:

1. check into current branch
2. do npm install before running 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

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

[rahulrubugunday]

I have reviewed your PR locally (a8a3f22, backend on development) and the calendar works as per requirement, but the chart's x-axis labels are missing.

1. Start Date opens the custom month calendar, the year arrows work, and picking a month fills the field. The back arrow is disabled at 2022 and the range stops at Jun 2024, so invalid years can no longer be typed.
2. With Jun 2023 as the start, the End Date calendar disables Jan through May 2023.
3. Selecting Jun to Sep 2023 updates the chart to that range.
4. Clear empties only that date, and Reset Filters clears both dates and restores all 9 lines.
5. The legend shows all 9 items inside the chart card, with no horizontal scrolling.

Needs changes:

1. The x-axis month labels no longer render. Every tick is blank, so the chart shows only "Time (months)" with no dates. In LossTrackingLineChart.jsx the XAxis uses dataKey="month", but chartData rows carry the month text in displayLabel (development uses dataKey="displayLabel"). This does not match your screenshots, which show the month labels.

[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