Reina - Create Map Showing Location of Organizations

[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.

The new PR for this task is #3915

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:3000/bmdashboard/interactivemap
6. Verify that the map is interactive and the dots are clickable
7. Verify that the date filters work.
8. go to http://localhost:3000/bmdashboard/totalconstructionsummary
9. verify that the map is displayed under "Global Distribution and Project Status"

Screenshots or videos of changes:

Screen.Recording.2025-04-21.at.12.50.26.PM.mov

Note:

The 'view details' button is just a placeholder for now!

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	9f9bff6
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/688911fd0e7acd0007428ca2
😎 Deploy Preview	https://deploy-preview-3432--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.

[pranavgovi]

Maps are visible at http://localhost:3000/bmdashboard/interactivemap and http://localhost:3000/bmdashboard/totalconstructionsummary

But I dont see any projects (points) in the map. Is that expected?

[Varshakaranam18]

Interactive map is visible. Currently I don't see any projects (points)
map is displayed under "Global Distribution and Project Status"
Good work

[naiduajaykumar]

1. I don't see any points on the map when we entered or before entering dates. I also noticed that there is a 400 code in the console that might be issue related
   a) Bad URL request
   b) Request Headers like authorization/token missing?
   c) Request Body (Payload) like malformed JSON? missing fields?

2. I see a map under "Global Distribution and Project Status".
   

[pranavgovi]

By running the backend branch I am able to see the points

[shashank-madan]

Changes work as expected. The map is interactive, dots are visible and clickable to open a popup, and the date range filter works. The map is displayed under "Global Distribution and Project Status" in the totalconstructionsummary page. Works in both dark mode and light mode. Approving this PR. Good Job!

pr3432_video.mp4

[ReinaT5678]

1. I don't see any points on the map when we entered or before entering dates. I also noticed that there is a 400 code in the console that might be issue related
   a) Bad URL request
   b) Request Headers like authorization/token missing?
   c) Request Body (Payload) like malformed JSON? missing fields?

2. I see a map under "Global Distribution and Project Status".
   

Hi, I couldn't find your name in Slack, so I'll reply here! I wanted to check that you were running the correct backend and connected to MongoDB? That was an issue with a few users before and wanted to double check everything was running correctly on your side.

[vamsidharpanithi]

Tested the interactive map implementation on both /bmdashboard/interactivemap and within the weekly summary page under Global Distribution and Project Status. The map loads correctly. markers are displayed, and the date filter is working as expected. Markers are clickable and the overall map interactivity functions well. Everything looks good!

Please find the Screenshots below.

[sphurthy]

Everything is working well — the map is interactive, the dots are visible and clickable to open popups, and the date range filter functions correctly. The map appears under the "Global Distribution and Project Status" section on the totalconstructionsummary page, and it works seamlessly in both dark and light modes.

Map is also displayed under "Global Distribution and Project Status"

[ManviKishore]

1. Map is interactive but not able to see any projects.
2. Can see map under "Global Distribution and Project Status"

[adithya-6101]

Tested this PR and everything works well. The interactive map loads correctly, the dots are clickable, and the date filters are functioning as expected. Also confirmed that the map appears properly under "Global Distribution and Project Status" on the Total Construction Summary page. Looks great approving this!

[Neeraj-Kondaveeti]

Tested the PR locally. The interactive map renders correctly with clickable markers and integrates well into both the Interactive Map page and the Construction Weekly Summary dashboard. The date filter functions as expected, filtering the data based on the selected range. Everything looks good—approving the PR.

[Teja-Sri-Surya]

Bug Found During Local Testing

While testing this PR locally, I encountered a ReferenceError: messageReducer is not defined at the following location:
/src/reducers/index.js:132

[uhakruthi1]

The changes function well—the map is interactive, with visible and clickable dots that trigger popups. The date range filter is working correctly, and the map appears under "Global Distribution and Project Status" on the totalconstructionsummary page. Verified in both dark and light modes. Approving this PR—great work!

[suparshwa31]

I Tested the changes:

1. the map is interactive.
2. the dots on the map are clickable
3. tried the date filter, and the dots on the map are updating as per the date range.

when I check http://localhost:3000/bmdashboard/totalconstructionsummary page, the map does appear under Global distribution and Org status overview but the layout was not correct, as seen in the screenshot

everything looks good expect the map display on the http://localhost:3000/bmdashboard/totalconstructionsummary page

[harshavarma29]

I have tested the PR locally using the Admin account. Everything is working as expected. The UI looks good in dark mode, and the map is displayed on the /totalconstructionsummary page. However, I noticed two minor issues:

1. No warning message when the start date is greater than the end date:

2. Project details are not easily visible in dark mode due to the dark text color: