feat: implement location management with interactive maps

- Introduced a new `LocationMap` component for handling latitude and longitude inputs in forms and detail views.
- Updated form and detail components to utilize the `LocationMap`, enhancing user experience by allowing map-based location selection.
- Added internationalization support for map-related labels in English and Indonesian.
- Developed unit tests for the `LocationMap` to ensure functionality and reliability.

This commit enhances the application by providing a user-friendly interface for managing geographical locations, improving data accuracy and user interaction.

packages/ui/src/components/map/route-map.tsx

@@ -3,6 +3,7 @@ import { CircleMarker, MapContainer, Polyline, TileLayer, Tooltip, useMap } from
 import { Box, Text } from '@mantine/core';
 import type { RouteGeometry } from './route-geometry';
 import { toLeafletLatLngs } from './route-geometry';
+import { OSM_ATTRIBUTION, OSM_TILE_URL } from './osm';
 import 'leaflet/dist/leaflet.css';
 
 function FitRouteBounds({ positions }: { positions: Array<[number, number]> }) {
@@ -39,7 +40,7 @@ export function RouteMap({ geometry, height = 280 }: RouteMapProps) {
   return (
     <Box h={height} bdrs="md" style={{ overflow: 'hidden' }}>
       <MapContainer center={positions[0]} zoom={12} style={{ height: '100%', width: '100%' }} scrollWheelZoom>
-        <TileLayer attribution="&copy; OpenStreetMap contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        <TileLayer attribution={OSM_ATTRIBUTION} url={OSM_TILE_URL} />
         <Polyline positions={positions} pathOptions={{ color: 'var(--mantine-color-blue-6)', weight: 4 }} />
         {positions.map((position, index) => (
           <CircleMarker key={`${position[0]}-${position[1]}-${index}`} center={position} radius={8} pathOptions={{ color: 'var(--mantine-color-blue-8)' }}>