I'll replace the dummy SVG map with a real Leaflet map showing ATM locations near Roma. Let me also check if the transaction detail map should be updated too.

I'll create a reusable Leaflet map component and use it in both the ATM map view and the transaction detail view.

Now update the ATM map view to use the real Leaflet map:

Now remove the old ATMMarker component since we no longer need it:

Now update the transaction detail to also use the real Leaflet map:

I created a reusable LeafletMap component that loads Leaflet dynamically and renders a real dark-themed CartoDB tile layer. Both the ATM nearby view and the transaction detail view now use actual interactive maps showing real Roma street data. The ATM map shows 3 numbered ATM markers (green for open, gray for closed) and a pulsing blue user location dot near Piazza di Spagna, while the transaction detail shows a red pin at the merchant location.

Now I have a full picture of the codebase. I need to:

1. Create a DocumentsScreen component where users can upload/view travel documents (passport, insurance, booking confirmations, etc.)
2. Add a "Documents" action button to the travel hub
3. Add the screen route to page.tsx
4. Store documents in state (with mock pre-existing ones)

Good, I have Dialog and all the UI components I need. Let me build the documents screen now.