Jaydeep create map showing locations of orgs

[jaydeep138]

Description

This PR implements an interactive map visualization showing project locations with comprehensive filtering and navigation capabilities. The map displays project markers with color-coded status indicators and provides seamless integration with the project management system.

Implements: Interactive Map Feature for Project Location Visualization

Related PRS (if any):

This frontend PR is related to the #1342 backend PR.
To test this frontend PR you need to checkout the #1342 backend PR.

Main changes explained:

• Create InteractiveMap.jsx - Main interactive map component with Leaflet.js integration
• Create EmbedInteractiveMap.jsx - Embeddable version of the map for dashboard widgets
• Create InteractiveMap.css - Comprehensive styling including dark mode support
• Create projectLocationActions.js - Redux actions for fetching project location data
• Create projectLocationReducer.js - Redux reducer for managing project location state
• Update routes.jsx - Add new route for interactive map (/bmdashboard/InteractiveMap)
• Update URL.js - Add new API endpoints for project location data
• Update WeeklyProjectSummary.jsx - Minor integration updates for map compatibility
• Update WeeklyProjectSummary.module.css - Styling updates for enhanced UI consistency

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 BM Dashboard → Interactive Map (or navigate to /bmdashboard/InteractiveMap)
6. Verify map functionality:
   • Map loads with world view and country borders visible
   • Project markers appear as colored dots (Red=Active, Blue=Completed, Yellow=Delayed)
   • Legend displays in bottom-left corner with color explanations
7. Verify interactivity:
   • Hover over markers shows "Click here to View Project #XXX details" tooltip
   • Click on markers navigates to project details page (/bmdashboard/projects/{projectId})
   • Map supports smooth zoom and pan operations
8. Verify date filtering:
   • Use date range picker in top-right overlay
   • Apply filters and verify project count updates
   • Test validation (end date cannot be before start date)
   • Reset filters functionality works correctly
9. Verify clustering:
   • Zoom out to see marker clustering at high zoom levels
   • Zoom in to see individual markers at detailed levels
10. Verify this new feature works in dark mode:
    • Toggle dark mode and verify map tiles switch to dark theme
    • Verify popups, tooltips, and controls adapt to dark theme
    • Verify legend and filter overlay styling in dark mode

Screenshots or videos of changes:

https://www.dropbox.com/scl/fi/lvm80ka3qydok1fi4mtkd/Screen-Recording-2025-10-03-at-10.26.44.mov?rlkey=j91ypuiepnjqon0roy1aqe7y8&st=c3wb7gh8&dl=0

The implementation follows all established patterns in the codebase and maintains consistency with existing BM Dashboard components.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	7620ab5
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68e00a20b1a4380008bd01ec
😎 Deploy Preview	https://deploy-preview-4160--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.