feat: implement Bari bounds validation and update UI components for admin panel

app/pages/admin/areas.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick, onBeforeUnmount } from 'vue'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
 
 definePageMeta({
   middleware: 'auth',
   auth: { role: 'ADMIN' }
 })
 
-useHead({ title: 'Gestione Aree - Admin' })
+useHead({ title: 'Aree - Admin' })
 
 const { getAreas, createArea } = useAdmin()
 const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
@@ -41,15 +42,31 @@ const openCreateModal = () => {
       map = null
     }
 
-    map = L.map('areaMap').setView([41.9028, 12.4964], 6)
+    const bariBounds = L.latLngBounds(
+      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+      [BARI_BOUNDS.north, BARI_BOUNDS.east]
+    )
+
+    map = L.map('areaMap', {
+      maxBounds: bariBounds,
+      maxBoundsViscosity: 1,
+      minZoom: 12
+    }).setView(BARI_CENTER, 12)
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 19,
       attribution: '© OpenStreetMap'
     }).addTo(map)
 
     polygon = L.polygon([], { color: 'red' }).addTo(map)
+    map.fitBounds(bariBounds)
 
     map.on('click', (e: any) => {
+      if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
+        jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
+        return
+      }
+
+      jsonError.value = ''
       mapPoints.value.push([e.latlng.lat, e.latlng.lng])
       polygon.setLatLngs(mapPoints.value)
       updateGeojson()
@@ -102,6 +119,12 @@ const handleCreate = async () => {
     if (!parsedGeojson.type || !parsedGeojson.coordinates) {
       throw new Error('GeoJSON non valido. Richiesto "type" e "coordinates".')
     }
+
+    const coordinates = parsedGeojson.coordinates?.[0] || []
+    const outsideBari = coordinates.some(([longitude, latitude]: [number, number]) => !isWithinBariBounds(latitude, longitude))
+    if (outsideBari) {
+      throw new Error('Area non valida. Tutti i punti devono essere nel Comune di Bari.')
+    }
   } catch (e: any) {
     jsonError.value = e.message || 'Formato JSON non valido.'
     return
@@ -128,9 +151,9 @@ const handleCreate = async () => {
 <template>
   <div class="container my-5">
     <div class="d-flex justify-content-between align-items-center mb-4">
-      <h1 class="h3 font-weight-bold mb-0">Gestione Aree GeoJSON</h1>
+      <h1 class="h3 font-weight-bold mb-0">Gestione Aree</h1>
       <div>
-        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna alla Dashboard</NuxtLink>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna al pannello admin</NuxtLink>
         <button class="btn btn-primary btn-sm" @click="openCreateModal">
           <BIIcon name="it-plus" size="xs" class="me-1" />
           Nuova Area
@@ -218,7 +241,7 @@ const handleCreate = async () => {
                     </button>
                   </div>
                   <div class="alert alert-light border small mb-2 p-2">
-                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti.
+                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi solo punti nel Comune di Bari.
                   </div>
                   <div id="areaMap" class="rounded border" style="height: 400px; width: 100%; z-index: 1;"></div>
                 </div>