From d6eb7d3e9b028a59c93ecbf39d9e37d4a3b3d6ef Mon Sep 17 00:00:00 2001
From: gabdevele <schiraldigabriele@gmail.com>
Date: Mon, 15 Jun 2026 13:00:22 +0200
Subject: [PATCH] feat: implement Bari bounds validation and update UI
 components for admin panel

---
 app/assets/css/style.css                    | 14 ++++++++
 app/components/Header.vue                   |  3 +-
 app/components/ReportForm.vue               | 38 +++++++++++++++------
 app/components/dashboard/AdminDashboard.vue | 10 ++----
 app/pages/admin/areas.vue                   | 33 +++++++++++++++---
 app/pages/admin/catalog.vue                 |  2 +-
 app/pages/admin/moderation.vue              |  2 +-
 app/pages/admin/users.vue                   |  3 +-
 app/pages/dashboard/index.vue               |  4 +--
 app/pages/info.vue                          |  4 +--
 app/pages/open-data.vue                     |  9 +++--
 app/pages/reports/index.vue                 |  5 ++-
 app/utils/bari.ts                           | 15 ++++++++
 13 files changed, 108 insertions(+), 34 deletions(-)
 create mode 100644 app/utils/bari.ts

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 88bdbf1..0d9bdeb 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -29,6 +29,20 @@ textarea {
     font-family: var(--visione-font-sans);
 }
 
+select,
+.form-select {
+    background-color: #f7f9fc !important;
+    border-color: #c5d0db !important;
+    color: var(--visione-text-body) !important;
+}
+
+.form-select:focus,
+select:focus {
+    background-color: #fff !important;
+    border-color: var(--visione-primary) !important;
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15) !important;
+}
+
 code,
 kbd,
 pre,
diff --git a/app/components/Header.vue b/app/components/Header.vue
index 274167c..151d3a7 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -18,6 +18,7 @@ const navLinks = [
 ]
 
 const { isAuthenticated, user, logout } = useAuth()
+const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello admin' : 'Dashboard')
 </script>
 
 <template>
@@ -49,7 +50,7 @@ const { isAuthenticated, user, logout } = useAuth()
                     <span class="rounded-icon" aria-hidden="true">
                       <BIIcon name="it-list" color="black" />
                     </span>
-                    <span class="d-none d-lg-block">Dashboard</span>
+                    <span class="d-none d-lg-block">{{ panelLabel }}</span>
                   </NuxtLink>
 
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
diff --git a/app/components/ReportForm.vue b/app/components/ReportForm.vue
index 598978b..ec546e8 100644
--- a/app/components/ReportForm.vue
+++ b/app/components/ReportForm.vue
@@ -2,6 +2,7 @@
 import type { Category, CreateReportRequest } from '~/types/api'
 import type { LeafletMouseEvent, Map as LeafletMap, Marker as LeafletMarker } from 'leaflet'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
 
 interface Props {
   isLoading?: boolean
@@ -65,18 +66,28 @@ const initMap = async () => {
   const L = await loadLeaflet()
   if (!mapContainer.value || map) return
 
-  // Centro Italia default
-  const defaultLat = 41.8719
-  const defaultLng = 12.5674
-  const zoom = 5
+  const bariBounds = L.latLngBounds(
+    [BARI_BOUNDS.south, BARI_BOUNDS.west],
+    [BARI_BOUNDS.north, BARI_BOUNDS.east]
+  )
 
-  map = L.map(mapContainer.value).setView([defaultLat, defaultLng], zoom)
+  map = L.map(mapContainer.value, {
+    maxBounds: bariBounds,
+    maxBoundsViscosity: 1,
+    minZoom: 12
+  }).setView(BARI_CENTER, 12)
 
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; OpenStreetMap contributors'
   }).addTo(map)
+  map.fitBounds(bariBounds)
 
   map.on('click', (e: LeafletMouseEvent) => {
+    if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
+      errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+      return
+    }
+
     updateLocation(e.latlng.lat, e.latlng.lng)
   })
 
@@ -87,6 +98,11 @@ const initMap = async () => {
 }
 
 const updateLocation = (lat: number, lng: number, zoomTo = false) => {
+  if (!isWithinBariBounds(lat, lng)) {
+    errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+    return
+  }
+
   form.value.latitude = Number(lat.toFixed(6))
   form.value.longitude = Number(lng.toFixed(6))
 
@@ -125,6 +141,8 @@ const validateForm = (): boolean => {
   }
   if (!form.value.latitude || !form.value.longitude) {
     errors.value.location = 'Imposta la posizione sulla mappa'
+  } else if (!isWithinBariBounds(form.value.latitude, form.value.longitude)) {
+    errors.value.location = 'La posizione deve essere nel Comune di Bari'
   }
   if (!form.value.address?.trim()) {
     errors.value.address = 'Inserisci l\'indirizzo'
@@ -186,7 +204,7 @@ const resetForm = () => {
   if (marker && map) {
     map.removeLayer(marker)
     marker = null
-    map.setView([41.8719, 12.5674], 5)
+    map.setView(BARI_CENTER, 12)
   }
 }
 
@@ -246,6 +264,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
           <BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
           Posizione *
         </label>
+        <p class="small text-muted mb-2">Le segnalazioni sono abilitate solo entro confini del Comune di Bari.</p>
 
         <button
           type="button"
@@ -275,7 +294,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
               step="0.000001"
               class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
-              placeholder="Latitudine (es. 45.5)"
+              placeholder="Latitudine (Bari)"
               required
             />
           </div>
@@ -286,7 +305,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
               step="0.000001"
               class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
-              placeholder="Longitudine (es. 10.2)"
+              placeholder="Longitudine (Bari)"
               required
             />
           </div>
@@ -307,7 +326,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
           type="text"
           class="form-control"
           :class="{ 'is-invalid': errors.address }"
-          placeholder="Es. Via Roma 123, Milano"
+          placeholder="Es. Via Sparano 12, Bari"
           required
         />
         <div v-if="errors.address" class="invalid-feedback">
@@ -393,4 +412,3 @@ textarea {
 </style>
 
 
-
diff --git a/app/components/dashboard/AdminDashboard.vue b/app/components/dashboard/AdminDashboard.vue
index 9598581..43def58 100644
--- a/app/components/dashboard/AdminDashboard.vue
+++ b/app/components/dashboard/AdminDashboard.vue
@@ -7,7 +7,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
 <template>
   <div>
     <div class="callout callout-highlight callout-danger mb-4">
-      <div class="callout-title">Pannello di Amministrazione</div>
+      <div class="callout-title">Pannello Admin</div>
       <p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
     </div>
 
@@ -48,7 +48,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
       <div class="col-12 col-md-4 mb-3">
         <NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
           <BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
-          Aree GeoJSON
+          Aree
         </NuxtLink>
       </div>
       <div class="col-12 col-md-4 mb-3">
@@ -63,12 +63,6 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
           Moderazione Abusi
         </NuxtLink>
       </div>
-      <div class="col-12 col-md-6 mb-3">
-        <NuxtLink to="/open-data" class="btn btn-outline-secondary w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-chart-line" size="sm" class="mb-2" />
-          Vista Open Data
-        </NuxtLink>
-      </div>
     </div>
   </div>
 </template>
diff --git a/app/pages/admin/areas.vue b/app/pages/admin/areas.vue
index 3de53a8..6b49fcf 100644
--- a/app/pages/admin/areas.vue
+++ b/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>
diff --git a/app/pages/admin/catalog.vue b/app/pages/admin/catalog.vue
index b3135b1..fedcaf3 100644
--- a/app/pages/admin/catalog.vue
+++ b/app/pages/admin/catalog.vue
@@ -86,7 +86,7 @@ const submitTeam = async () => {
         <h1 class="h3 font-weight-bold mb-1">Categorie e Team</h1>
         <p class="text-muted mb-0">Gestione dati di riferimento per segnalazioni e interventi.</p>
       </div>
-      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
     </div>
 
     <div class="row g-4">
diff --git a/app/pages/admin/moderation.vue b/app/pages/admin/moderation.vue
index 1ce774c..2c85838 100644
--- a/app/pages/admin/moderation.vue
+++ b/app/pages/admin/moderation.vue
@@ -65,7 +65,7 @@ const formatDate = (dateStr: string) => {
   <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">Moderazione Abusi</h1>
-      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
     </div>
 
     <div class="row mb-4">
diff --git a/app/pages/admin/users.vue b/app/pages/admin/users.vue
index e1d8a4a..4621031 100644
--- a/app/pages/admin/users.vue
+++ b/app/pages/admin/users.vue
@@ -76,7 +76,7 @@ const saveRoles = async () => {
   <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 Utenti</h1>
-      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
     </div>
 
     <div class="row mb-4">
@@ -162,6 +162,7 @@ const saveRoles = async () => {
                 type="checkbox" 
                 :value="role" 
                 :id="'role-'+role"
+                :checked="selectedRoles.includes(role)"
                 v-model="selectedRoles"
               >
               <label class="form-check-label" :for="'role-'+role">
diff --git a/app/pages/dashboard/index.vue b/app/pages/dashboard/index.vue
index 1dff1d9..f16106c 100644
--- a/app/pages/dashboard/index.vue
+++ b/app/pages/dashboard/index.vue
@@ -19,14 +19,14 @@ const currentDashboard = computed(() => {
 
 const heroTitle = computed(() => {
   const role = user.value?.role?.toUpperCase()
-  if (role === 'ADMIN') return 'Pannello di Amministrazione'
+  if (role === 'ADMIN') return 'Pannello Admin'
   if (role === 'OPERATOR') return 'Gestione Operativa'
   return 'Dashboard'
 })
 
 const heroSubtitle = computed(() => {
   const role = user.value?.role?.toUpperCase()
-  if (role === 'ADMIN') return 'Gestione del sistema, delle aree e moderazione utenti'
+  if (role === 'ADMIN') return 'Accesso amministrativo per configurazioni, utenti e moderazione'
   if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
   return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
 })
diff --git a/app/pages/info.vue b/app/pages/info.vue
index 5fb809e..129ba50 100644
--- a/app/pages/info.vue
+++ b/app/pages/info.vue
@@ -87,7 +87,7 @@ useHead({
                   <BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
                   <h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
                   <p class="card-text text-muted">
-                    Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane (tramite poligoni GeoJSON), gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
+                    Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
                     <br><br>
                     Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e monitorare i tempi medi di risoluzione.
                   </p>
@@ -175,4 +175,4 @@ useHead({
   list-style-type: none;
   padding-left: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/pages/open-data.vue b/app/pages/open-data.vue
index 9b61427..556987e 100644
--- a/app/pages/open-data.vue
+++ b/app/pages/open-data.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { isWithinBariBounds } from '~/utils/bari'
 
 // 1. API Fetching Logic
 const { getOpenDataReports } = usePublic()
@@ -15,6 +16,10 @@ const { data: openDataResponse, pending } = await useAsyncData(
     { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
 )
 
+const visibleReports = computed(() =>
+  (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+)
+
 // Pagination logic: If we receive less items than `perPage`, we are on the last page.
 const isLastPage = computed(() => {
   if (!openDataResponse.value?.reports) return true
@@ -102,7 +107,7 @@ const getStatusBadge = (status: string) => {
       <!-- GRID VIEW -->
       <div v-else-if="currentView === 'grid'">
         <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
-          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
+          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
             <!-- Strict BI Card -->
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100 shadow-sm">
@@ -179,7 +184,7 @@ const getStatusBadge = (status: string) => {
           <div class="text-center text-muted">
             <BIIcon name="it-map" size="xl" class="mb-3 opacity-50" />
             <h4 class="h5">Mappa Interattiva</h4>
-            <p>Caricamento dei {{ openDataResponse?.reports?.length || 0 }} punti geografici in corso...</p>
+            <p>Caricamento dei {{ visibleReports.length || 0 }} punti geografici in corso...</p>
           </div>
         </div>
       </div>
diff --git a/app/pages/reports/index.vue b/app/pages/reports/index.vue
index 2bd0989..50bfd57 100644
--- a/app/pages/reports/index.vue
+++ b/app/pages/reports/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Report } from '~/types/api'
+import { isWithinBariBounds } from '~/utils/bari'
 
 definePageMeta({
   middleware: 'auth',
@@ -15,7 +16,9 @@ const filterStatus = ref('')
 
 const { data: reportsRes, pending } = useAsyncData('citizen-reports-list', () => getReports({}))
 
-const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
+const reports = computed<Report[]>(() =>
+  (reportsRes.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+)
 const filteredReports = computed(() => {
   if (!filterStatus.value) return reports.value
   if (filterStatus.value === 'IN_PROGRESS') {
diff --git a/app/utils/bari.ts b/app/utils/bari.ts
new file mode 100644
index 0000000..abc17e7
--- /dev/null
+++ b/app/utils/bari.ts
@@ -0,0 +1,15 @@
+export const BARI_BOUNDS = {
+  south: 41.0160584,
+  north: 41.1697837,
+  west: 16.7172376,
+  east: 17.0334109,
+}
+
+export const BARI_CENTER: [number, number] = [41.1257843, 16.8620293]
+
+export const isWithinBariBounds = (latitude: number, longitude: number) =>
+  latitude >= BARI_BOUNDS.south &&
+  latitude <= BARI_BOUNDS.north &&
+  longitude >= BARI_BOUNDS.west &&
+  longitude <= BARI_BOUNDS.east
+