Reina create interactive map showing location of projects 20

[ReinaT5678]

Description

This PR is for the HGN Phase 2 Implementation.
Create an interactive map that shows the location of projects under the title, Global Distribution and Project Status Overview. The map was created using LeafLet.js and dots are shown as markers for various locations of TEST organizations. A date filter is implemented on the top right of the map to allow results to be filtered so the data between those days are displayed.

The interactive map is also implemented in the construction weekly project summary dashboard page.

Related PRS (if any):

This frontend PR is related to the #1342 backend PR.
…

Main changes explained:

• Added a new route to bmdashboard/interactivemap
• Implemented a Leaflet.js map with color coded markers / dots to represent test organizations around the world.
• A date filter on the top right that filters results so only data with between those days are displayed.
  …

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:5173/bmdashboard/interactivemap
6. Verify that the map is interactive and the dots are clickable
7. Verify that the date filters work.

Screenshots or videos of changes:

Screen.Recording.2025-08-16.at.6.45.39.PM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	703995b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68a9bab6a5e1380008e9196c
😎 Deploy Preview	https://deploy-preview-3915--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[SallaguntaRaahul]

Tested PR #3915 locally: after install and cache clear, logged in as Admin and checked /bmdashboard/interactivemap. The map pans/zooms smoothly, dots/markers are clickable with the expected details, and the date filters correctly update and reset the results. Works fine across light/dark themes and different screen sizes—no issues found.

[aseemdeshmukh]

Referred PR1342 and checked all the date filters which are working fine. The map works perfect along with the dots.
Looks good in dark mode too. Nice job!

[vishnu-ing]

I have reviewed the PR and all the file changes looks good. The map UI with zoom in, zoom out with markers, details and rendering looks awesome in both light and dark modes.

A minor issue was noted while applying date filter to display the markers. The marker need to be displayed only when the filter criteria matches. It is displayed when giving one day later in the filter than the actual start date. I'm attaching a video of the issue with local time stamp.

map_marker_display_date_filter_issue.mp4

A small suggestion would be to limit the max zoom out size of the map.