feat(dashboard): geographic map with pins for all reports#69
Merged
eliaschikwanda merged 1 commit intoMay 22, 2026
Merged
Conversation
Adds a Leaflet-powered map between the stats row and report list that plots every report with valid coordinates. Pins use the app's purple/ green palette to mirror status pill colors, and clicking a pin opens a popup with issue type, short address, status, and relative time. Uses free OpenStreetMap/CARTO tiles rather than the server-side Google Maps key so the unrestricted API key stays out of the browser bundle. Leaflet is loaded only on the client (dynamic import in useEffect) to avoid SSR access to `window`. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
eliaschikwanda
merged commit e94fa34
into
feat/dashboard-report-details
2 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a geographic map to the dashboard showing every report with valid coordinates as a pin, sitting between the stats tiles and the report list.
GOOGLE_MAPS_API_KEYin the repo is an unrestricted server-side key used by/api/location/suggest. Exposing it viaNEXT_PUBLIC_*would let anyone scrape it from the client bundle. The OSM/CARTO path is consistent with the Nominatim fallback already used in that route.window, so the component is"use client"and the library is dynamically imported insideuseEffect. The Leaflet CSS is a static client-side import that Next.js bundles normally.divIconmarkers colored to match the existing status pill palette — purple (#9b87f5) for draft/classifying, green (#22c55e) for confirmed and beyond.setViewat zoom 14 for a single pin,fitBoundswith padding for multiple.--card,--border,--ep-green-light,--ep-purple-light) so they feel native.Reports without finite
latitude/longitudeare silently skipped; the map only renders when at least one mappable point exists.Stacking note
Based on
feat/dashboard-report-details(#68) because it builds on the same dashboard refactor (reusesISSUE_TYPE_LABELS,shortenAddress, and the new dashboard layout). Once #68 merges, please retarget this PR tomain.Files changed
nexa/src/components/dashboard/reports-map.tsx— new client componentnexa/src/app/dashboard/page.tsx— selectslatitude/longitude, buildsmapPoints, renders<ReportsMap />nexa/src/app/globals.css— Leaflet popup/pin styling that matchesep-cardnexa/package.json/package-lock.json— addsleafletand@types/leafletTest plan
npm run lint— clean (verified locally: only pre-existing<img>warnings unrelated to this change)tsc --noEmit— clean (verified locally)/dashboardwith at least one report that has coordinates — map renders, pin appears at the right location/dashboardwith no geocoded reports — map is hidden, stats and report list unaffectedMade with Cursor