Radia : Fix - Loss Tracking calendar picker feature

[Radia731]

Description

This PR resolves the high-priority bug regarding the broken calendar feature on the Loss Tracking line graph. The previous implementation used a native <input type="month"> which prevented users from entering custom specific dates and caused UI inconsistencies. This PR implements a standard date picker, safely reformats the date strings for the chart's data filtering logic, and resolves lingering CSS linter errors.

Fixes # (Priority High - Loss Tracking Calendar Fix)

Related PRS (if any):

This frontend PR fixes the broken calendar implementation originally introduced in PR #5016.

Main changes explained:

• Update LossTrackingLineChart.jsx to replace <input type="month"> with a standard <input type="date"> picker. Restored the custom SVG calendar icon JSX. Updated the chartData filtering logic to safely slice standard YYYY-MM-DD string outputs down to YYYY-MM so they correctly filter the chart's raw data.
• Update LossTrackingLineChart.module.css to update all styling selectors from [type="month"] to [type="date"]. Reactivated the custom SVG icon styling and expanded the invisible native calendar picker indicator to 100% width/height so clicking anywhere in the input box opens the calendar.

How to test:

1. check into current branch (radia-loss-tracking-calendar-fix)
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 BM Dashboard → Total Construction Summary
6. Scroll down and click the "Loss Tracking ∨" accordion to expand the section.
7. Verify that clicking the "Start Date" or "End Date" boxes now opens a standard calendar that allows you to pick specific custom days
8. Verify that selecting a specific date range successfully filters the line graph data.
9. Set a Start Date that is after the End Date and verify the red validation error message still appears.
10. verify this new feature works and the custom calendar icon is visible in dark mode.

Screenshots or videos of changes:

Screen.Recording.2026-07-05.at.2.06.59.AM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

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

[kzou55]

Hi Radia,

I ran and tested the PR locally

Verified

• Start Date and End Date component opens up a date picker
• There is a error message when Start Date > End Date

Testing

Recording.2026-07-20.142844.mp4

Issues

1. Error Message is not red in Dark Mode

   

2. Suggested Changes - Is there a reason why you can't already limit what a user can choose for the date so they can never even choose invalid dates(start date > end date)? Like couldn't you make it so invalid dates are greyed out.

[DeepighaJ]

Tested the PR locally, the filter functionality works as expected. Calendar looks good.
Issue:

• The inline error message "Startdate before or equal to enddate" not in RED in dark mode.
• The legend of the Loss Tracking Line Chart overflows its container and overlaps the next dashboard section ("Global Distribution and Project Status Overview")

[beblicarl]

Tested the PR locally, and the filter functionality works as expected. The calendar also displays correctly.

Issues identified:

In dark mode, the inline validation message, "Start date must be before or equal to end date," is not displayed in red.
The legend for the Loss Tracking Line Chart overflows its container and overlaps the Global Distribution and Project Status Overview section below.

[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

[Radia731]

Hello Team,

confirming that i have fixed the reviewers flag. please see the attached screenshots

Thanks!