refactor: fix indentation

Added dismissed card styling and reorganized error/empty state rendering in moderation. Added fixed width for catalog action buttons.

app/components/Header.vue

@@ -34,7 +34,7 @@ const navLinks = [
 ]
 
 const { isAuthenticated, user, logout } = useAuth()
-const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello' : 'Dashboard')
+const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
 </script>
 
 <template>

app/components/Pagination.vue

@@ -57,7 +57,6 @@ const pageNumbers = computed(() => {
 <template>
   <nav v-if="totalPages > 1" class="d-flex justify-content-center mt-5 mb-5">
     <ul class="pagination mb-0">
-      <!-- Pagina Precedente -->
       <li class="page-item" :class="{ disabled: currentPage === 1 }">
         <button
           class="page-link"
@@ -69,7 +68,6 @@ const pageNumbers = computed(() => {
         </button>
       </li>
 
-      <!-- Numeri Pagine -->
       <li v-for="page in pageNumbers" :key="`page-${page}`" class="page-item" :class="{ active: page === currentPage }">
         <template v-if="page === '...'">
           <span class="page-link">...</span>
@@ -86,7 +84,6 @@ const pageNumbers = computed(() => {
         </template>
       </li>
 
-      <!-- Pagina Successiva -->
       <li class="page-item" :class="{ disabled: currentPage === totalPages }">
         <button
           class="page-link"
@@ -100,7 +97,6 @@ const pageNumbers = computed(() => {
     </ul>
   </nav>
 
-  <!-- Info Pagina -->
   <div v-if="totalPages > 1" class="text-center text-muted small mt-3">
     Pagina {{ currentPage }} di {{ totalPages }} ({{ totalItems }} elementi totali)
   </div>

app/components/ReportForm.vue

@@ -45,7 +45,6 @@ const isResolvingAddress = ref(false)
 const addressSearchError = ref('')
 const showAddressSuggestions = ref(false)
 
-// Map variables
 const mapContainer = ref<HTMLElement | null>(null)
 let leaflet: typeof import('leaflet') | null = null
 let map: LeafletMap | null = null
@@ -62,7 +61,6 @@ const loadLeaflet = async () => {
 
   const leafletModule = await import('leaflet')
 
-  // Fix per le icone di Leaflet in Nuxt/Vite
   const defaultIcon = leafletModule.icon({
     iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
     iconRetinaUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
@@ -276,7 +274,6 @@ const initMap = async () => {
     void updateLocation(e.latlng.lat, e.latlng.lng)
   })
 
-  // Se c'è già una posizione, imposta il marker
   if (form.value.latitude && form.value.longitude) {
     void updateLocation(form.value.latitude, form.value.longitude, { zoomTo: true })
   }
@@ -435,7 +432,6 @@ watch(() => form.value.address, (newAddress) => {
   }, 350)
 })
 
-// Sincronizza input manuali con la mappa
 watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]) => {
   if (newLat && newLng && map && leaflet) {
     if (!marker || marker.getLatLng().lat !== newLat || marker.getLatLng().lng !== newLng) {
@@ -663,7 +659,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
 .map-container {
   height: 300px;
   width: 100%;
-  z-index: 1; /* Fix for Bootstrap elements overlapping map */
+  z-index: 1;
 }
 
 .address-suggestions {

app/components/dashboard/AdminDashboard.vue

@@ -11,7 +11,6 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
       <p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
     </div>
 
-    <!-- Statistiche Globali (Mock o Reali) -->
     <div class="row mb-5" v-if="!pending && statsRes?.ok">
       <div class="col-6 col-md-3 mb-3">
         <div class="card-wrapper card-space">

app/middleware/auth.ts

@@ -1,7 +1,6 @@
 export default defineNuxtRouteMiddleware(async (to) => {
   const auth = useAuth()
 
-  // Se c'è un token ma l'utente non è ancora caricato e non stiamo già sincronizzando, sincronizza
   if ((auth.token.value || auth.tokenState.value) && !auth.user.value && !auth.isSyncingUser.value) {
     try {
       await auth.syncUser({ currentPath: to.path })
@@ -11,28 +10,17 @@ export default defineNuxtRouteMiddleware(async (to) => {
     }
   }
 
-  // Se non autenticato, redirige al login
   if (!auth.isAuthenticated.value) {
     return navigateTo('/auth/login')
   }
 
-  // Verifica ruoli se richiesto
   const requiredRole = to.meta.auth?.role
 
   if (requiredRole && auth.user.value) {
-    const userRole = auth.user.value.role.toUpperCase()
+    const userRole = auth.user.value.role
 
-    const roleLevels: Record<string, number> = {
+    if (!hasMinimumRole(userRole, requiredRole)) {
-      'CITIZEN': 1,
+      console.warn(`[Auth] User role ${userRole} insufficient for required ${requiredRole}`)
-      'OPERATOR': 2,
-      'ADMIN': 3
-    }
-
-    const userLevel = roleLevels[userRole] || 0
-    const requiredLevel = roleLevels[requiredRole] || 0
-
-    if (userLevel < requiredLevel) {
-      console.warn(`[Auth] User role ${userRole} (level ${userLevel}) insufficient for required ${requiredRole} (level ${requiredLevel})`)
       return navigateTo('/')
     }
   }

app/pages/admin/areas.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, nextTick, onBeforeUnmount, computed } from 'vue'
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
 
 definePageMeta({
@@ -24,8 +24,8 @@ const actionError = ref('')
 const deletingAreaId = ref<number | null>(null)
 const areaPendingDelete = ref<any | null>(null)
 
-// Map variables
 let map: any = null
+let mainMap: any = null
 let polygon: any = null
 const mapPoints = ref<[number, number][]>([])
 
@@ -34,9 +34,98 @@ const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Cr
 const isEditing = computed(() => editingAreaId.value !== null)
 const areas = computed(() => areasRes.value?.areas || [])
 const areaDeleteMessage = computed(() =>
-  areaPendingDelete.value ? `Vuoi eliminare area "${areaPendingDelete.value.name}"? Operazione irreversibile.` : ''
+    areaPendingDelete.value ? `Vuoi eliminare area "${areaPendingDelete.value.name}"? Operazione irreversibile.` : ''
 )
 
+const initMainMap = async () => {
+  const mapElement = document.getElementById('mainMap')
+  if (!mapElement) return
+
+  const L = (await import('leaflet')).default
+
+  if (mainMap) {
+    mainMap.remove()
+    mainMap = null
+  }
+
+  const bariBounds = L.latLngBounds(
+      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+      [BARI_BOUNDS.north, BARI_BOUNDS.east]
+  )
+
+  mainMap = L.map('mainMap', {
+    maxBounds: bariBounds,
+    maxBoundsViscosity: 1,
+    minZoom: 11
+  }).setView(BARI_CENTER, 12)
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '© OpenStreetMap'
+  }).addTo(mainMap)
+
+  const featureGroup = L.featureGroup().addTo(mainMap)
+  let hasLayers = false
+
+  areas.value.forEach((area: any) => {
+    if (area.boundary_geojson) {
+      try {
+        const layer = L.geoJSON(JSON.parse(area.boundary_geojson), {
+          style: {
+            color: '#0d6efd',
+            weight: 2,
+            fillOpacity: 0.2
+          }
+        }).bindPopup(`<strong>${area.name}</strong><br/>${area.description || ''}`)
+
+        layer.addTo(featureGroup)
+        hasLayers = true
+      } catch (e) {
+        console.error('Invalid geojson for area', area.id, e)
+      }
+    }
+  })
+
+  if (hasLayers) {
+    mainMap.fitBounds(featureGroup.getBounds())
+  } else {
+    mainMap.fitBounds(bariBounds)
+  }
+}
+
+watch([areas, pending], () => {
+  if (!pending.value) {
+    if (areas.value.length > 0) {
+      nextTick(() => {
+        initMainMap()
+      })
+    } else if (mainMap) {
+      mainMap.remove()
+      mainMap = null
+    }
+  }
+}, { immediate: true })
+
+const renderExistingAreasInModal = (L: any, currentMap: any) => {
+  areas.value.forEach((area: any) => {
+    if (area.id === editingAreaId.value) return
+
+    if (area.boundary_geojson) {
+      try {
+        L.geoJSON(JSON.parse(area.boundary_geojson), {
+          style: {
+            color: '#6c757d',
+            weight: 2,
+            dashArray: '5, 5',
+            fillOpacity: 0.1
+          },
+          interactive: false
+        }).addTo(currentMap)
+      } catch(e) {}
+    }
+  })
+}
+
 const openCreateModal = () => {
   actionError.value = ''
   editingAreaId.value = null
@@ -46,19 +135,18 @@ const openCreateModal = () => {
   jsonError.value = ''
   mapPoints.value = []
   isCreating.value = true
-  
+
   nextTick(async () => {
-    // Import leaflet solo client-side
     const L = (await import('leaflet')).default
-    
+
     if (map) {
       map.remove()
       map = null
     }
 
     const bariBounds = L.latLngBounds(
-      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+        [BARI_BOUNDS.south, BARI_BOUNDS.west],
-      [BARI_BOUNDS.north, BARI_BOUNDS.east]
+        [BARI_BOUNDS.north, BARI_BOUNDS.east]
     )
 
     map = L.map('areaMap', {
@@ -74,6 +162,8 @@ const openCreateModal = () => {
     polygon = L.polygon([], { color: 'red' }).addTo(map)
     map.fitBounds(bariBounds)
 
+    renderExistingAreasInModal(L, map)
+
     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.'
@@ -96,8 +186,8 @@ const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
   }
 
   const normalized = coordinates
-    .slice(0, -1)
+      .slice(0, -1)
-    .map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
+      .map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
 
   mapPoints.value = normalized
   if (polygon) {
@@ -110,7 +200,7 @@ const openEditModal = (area: any) => {
   editingAreaId.value = area.id
   formData.name = area.name || ''
   formData.description = area.description || ''
-  formData.geojson = area.boundary_geojson ? JSON.stringify(area.boundary_geojson, null, 2) : ''
+  formData.geojson = area.boundary_geojson || ''
   jsonError.value = ''
   mapPoints.value = []
   isCreating.value = true
@@ -124,8 +214,8 @@ const openEditModal = (area: any) => {
     }
 
     const bariBounds = L.latLngBounds(
-      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+        [BARI_BOUNDS.south, BARI_BOUNDS.west],
-      [BARI_BOUNDS.north, BARI_BOUNDS.east]
+        [BARI_BOUNDS.north, BARI_BOUNDS.east]
     )
 
     map = L.map('areaMap', {
@@ -137,9 +227,20 @@ const openEditModal = (area: any) => {
       maxZoom: 19,
       attribution: '© OpenStreetMap'
     }).addTo(map)
+    console.log(JSON.parse(area.boundary_geojson))
+    L.geoJSON(JSON.parse(area.boundary_geojson), {
+      style: {
+        color: '#0d6efd',
+        weight: 2,
+        fillOpacity: 0.2
+      }
+    }).addTo(map)
 
     polygon = L.polygon([], { color: 'red' }).addTo(map)
     map.fitBounds(bariBounds)
+
+    renderExistingAreasInModal(L, map)
+
     loadPolygonFromGeoJson(area.boundary_geojson)
 
     map.on('click', (e: any) => {
@@ -171,7 +272,7 @@ const updateGeojson = () => {
   }
   const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
   if (coords[0]) {
-    coords.push([...coords[0]]) // Chiudi poligono
+    coords.push([...coords[0]])
   }
 
   formData.geojson = JSON.stringify({
@@ -191,12 +292,13 @@ const closeCreateModal = () => {
 
 onBeforeUnmount(() => {
   if (map) map.remove()
+  if (mainMap) mainMap.remove()
 })
 
 const handleCreate = async () => {
   jsonError.value = ''
   let parsedGeojson = null
-  
+
   try {
     parsedGeojson = JSON.parse(formData.geojson)
     if (!parsedGeojson.type || !parsedGeojson.coordinates) {
@@ -221,9 +323,9 @@ const handleCreate = async () => {
     }
 
     const res = editingAreaId.value
-      ? await updateArea(editingAreaId.value, payload)
+        ? await updateArea(editingAreaId.value, payload)
-      : await createArea(payload)
+        : await createArea(payload)
-    
+
     if (res.ok) {
       await refresh()
       closeCreateModal()
@@ -291,13 +393,18 @@ const handleDeleteArea = async () => {
       Nessuna area configurata.
     </div>
 
-    <div v-if="actionError" class="alert alert-danger">
+    <template v-else>
-      {{ actionError }}
+      <div class="card mb-4 shadow-sm border-0">
-    </div>
+        <div id="mainMap" class="rounded" style="height: 400px; width: 100%; z-index: 1;"></div>
+      </div>
 
-    <div v-else class="table-responsive">
+      <div v-if="actionError" class="alert alert-danger">
-      <table class="table table-hover align-middle bg-white shadow-sm rounded">
+        {{ actionError }}
-        <thead class="table-light">
+      </div>
+
+      <div v-else class="table-responsive">
+        <table class="table table-hover align-middle bg-white shadow-sm rounded">
+          <thead class="table-light">
           <tr>
             <th>ID</th>
             <th>Nome</th>
@@ -305,8 +412,8 @@ const handleDeleteArea = async () => {
             <th>GeoJSON</th>
             <th class="text-end">Azioni</th>
           </tr>
-        </thead>
+          </thead>
-        <tbody>
+          <tbody>
           <tr v-for="area in areas" :key="area.id">
             <td>{{ area.id }}</td>
             <td><strong>{{ area.name }}</strong></td>
@@ -320,20 +427,20 @@ const handleDeleteArea = async () => {
                 Modifica
               </button>
               <button
-                class="btn btn-sm btn-outline-danger ms-2"
+                  class="btn btn-sm btn-outline-danger ms-2"
-                :disabled="deletingAreaId === area.id"
+                  :disabled="deletingAreaId === area.id"
-                @click="askDeleteArea(area)"
+                  @click="askDeleteArea(area)"
               >
                 <span v-if="deletingAreaId === area.id" class="spinner-border spinner-border-sm me-1"></span>
                 Elimina
               </button>
             </td>
           </tr>
-        </tbody>
+          </tbody>
-      </table>
+        </table>
-    </div>
+      </div>
+    </template>
 
-    <!-- Modale Creazione -->
     <div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
     <div v-if="isCreating" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
       <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
@@ -356,18 +463,18 @@ const handleDeleteArea = async () => {
                   </div>
                   <div class="mb-3">
                     <label class="form-label">GeoJSON Generato</label>
-                    <textarea 
+                    <textarea
-                      class="form-control font-monospace text-sm" 
+                        class="form-control font-monospace text-sm"
-                      rows="6" 
+                        rows="6"
-                      v-model="formData.geojson" 
+                        v-model="formData.geojson"
-                      required
+                        required
-                      readonly
+                        readonly
-                      placeholder='{ "type": "Polygon", "coordinates": [...] }'
+                        placeholder='{ "type": "Polygon", "coordinates": [...] }'
                     ></textarea>
                     <div v-if="jsonError" class="form-text text-danger mt-1">{{ jsonError }}</div>
                   </div>
                 </div>
-                
+
                 <div class="col-md-7">
                   <div class="mb-2 d-flex justify-content-between align-items-center">
                     <label class="form-label mb-0">Disegna Poligono sulla Mappa</label>
@@ -394,24 +501,24 @@ const handleDeleteArea = async () => {
     </div>
 
     <ConfirmModal
-      :open="areaPendingDelete !== null"
+        :open="areaPendingDelete !== null"
-      title="Elimina area"
+        title="Elimina area"
-      :message="areaDeleteMessage"
+        :message="areaDeleteMessage"
-      confirm-label="Elimina area"
+        confirm-label="Elimina area"
-      confirm-class="btn-danger"
+        confirm-class="btn-danger"
-      :pending="deletingAreaId !== null"
+        :pending="deletingAreaId !== null"
-      @cancel="closeDeleteAreaModal"
+        @cancel="closeDeleteAreaModal"
-      @confirm="handleDeleteArea"
+        @confirm="handleDeleteArea"
     />
   </div>
 </template>
 
 <style scoped>
-#areaMap {
+#areaMap, #mainMap {
   background: #e9ecef;
 }
 
 .modal-dialog {
   margin-block: 0!important;
 }
-</style>
+</style>

app/pages/admin/catalog.vue

@@ -444,3 +444,10 @@ const handleDeleteTeam = async () => {
     />
   </div>
 </template>
+
+<style>
+.text-end .btn {
+  margin: 0 !important;
+  width: 120px;
+}
+</style>

app/pages/admin/moderation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref } from 'vue'
 
 definePageMeta({
   middleware: 'auth',
@@ -28,9 +28,9 @@ const dismissModal = reactive({
 })
 
 const { data: flagsRes, pending, refresh } = useAsyncData(
-  'admin-moderation-flags', 
+    'admin-moderation-flags',
-  () => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
+    () => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
-  { watch: [page, statusFilter] }
+    { watch: [page, statusFilter] }
 )
 
 const openResolveModal = (id: number, rejectReport: boolean) => {
@@ -54,15 +54,14 @@ const handleResolve = async () => {
   actionError.value = ''
 
   try {
-    const res = await updateModerationFlag(resolveModal.flagId, {
+    await updateModerationFlag(resolveModal.flagId, {
-      status: 'RESOLVED', 
+      status: 'RESOLVED',
       reject_report: resolveModal.rejectReport,
       resolution_note: resolveModal.note || undefined
     })
-    if (res.ok) {
+
-      await refresh()
+    await refresh()
-      closeResolveModal()
+    closeResolveModal()
-    }
   } catch (err) {
     console.error('Failed to resolve flag', err)
     actionError.value = 'Errore durante la risoluzione della segnalazione.'
@@ -89,11 +88,10 @@ const handleDismiss = async () => {
   actionError.value = ''
 
   try {
-    const res = await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
+    await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
-    if (res.ok) {
+
-      await refresh()
+    await refresh()
-      closeDismissModal()
+    closeDismissModal()
-    }
   } catch (err) {
     console.error('Failed to dismiss flag', err)
     actionError.value = 'Errore durante l\'aggiornamento.'
@@ -103,7 +101,7 @@ const handleDismiss = async () => {
 }
 
 const formatDate = (dateStr: string) => {
-  return new Date(dateStr).toLocaleString('it-IT', { 
+  return new Date(dateStr).toLocaleString('it-IT', {
     day: '2-digit', month: '2-digit', year: 'numeric',
     hour: '2-digit', minute: '2-digit'
   })
@@ -129,23 +127,28 @@ const formatDate = (dateStr: string) => {
       </div>
     </div>
 
+    <div v-if="actionError" class="alert alert-danger mb-4">
+      {{ actionError }}
+    </div>
+
     <div v-if="pending" class="text-center py-5">
       <div class="spinner-border text-danger" role="status"></div>
     </div>
 
-    <div v-else-if="!flagsRes?.flags || flagsRes.flags.length === 0" class="alert alert-success">
+    <div v-else-if="!flagsRes || !flagsRes.flags || flagsRes.flags.length === 0" class="alert alert-success">
       Nessun elemento da moderare al momento.
     </div>
 
-    <div v-if="actionError" class="alert alert-danger">
-      {{ actionError }}
-    </div>
-
     <div v-else>
-      <div class="card mb-3 shadow-sm border-0" v-for="flag in flagsRes.flags" :key="flag.id">
+      <div
-        <div class="card-header bg-light d-flex justify-content-between align-items-center">
+          class="card mb-3 border-0"
+          :class="flag.status === 'DISMISSED' ? 'dismissed-card shadow-none' : 'shadow-sm'"
+          v-for="flag in flagsRes.flags"
+          :key="flag.id"
+      >
+        <div class="card-header d-flex justify-content-between align-items-center" :class="flag.status === 'DISMISSED' ? 'bg-transparent' : 'bg-light'">
           <div>
-            <strong>Flag #{{ flag.id }}</strong> - 
+            <strong>Flag #{{ flag.id }}</strong> -
             <span class="badge" :class="{
               'bg-warning': flag.status === 'OPEN',
               'bg-success': flag.status === 'RESOLVED',
@@ -161,8 +164,8 @@ const formatDate = (dateStr: string) => {
               <p class="card-text text-muted mb-2">
                 {{ flag.details || 'Nessun dettaglio aggiuntivo fornito.' }}
               </p>
-              
+
-              <div class="mt-3">
+              <div class="mt-info">
                 <span class="badge bg-info me-2">{{ flag.content_type }}</span>
                 <span v-if="flag.report_id">
                   Rif: 
@@ -174,17 +177,17 @@ const formatDate = (dateStr: string) => {
                   | Messaggio #{{ flag.message_id }}
                 </span>
               </div>
-              
+
-              <div class="mt-3 small">
+              <div class="mt-info small text-muted">
                 Segnalato da: {{ flag.created_by_email }} (ID: {{ flag.created_by_user_id }})
               </div>
-              
+
               <div v-if="flag.status !== 'OPEN'" class="mt-2 small text-muted border-top pt-2">
                 <strong>Risolto/Ignorato da:</strong> {{ flag.resolved_by_email }} in data {{ flag.resolved_at ? formatDate(flag.resolved_at) : 'N/D' }}
                 <div v-if="flag.resolution_note"><strong>Nota:</strong> {{ flag.resolution_note }}</div>
               </div>
             </div>
-            
+
             <div class="col-md-4 text-end" v-if="flag.status === 'OPEN'">
               <div class="d-flex flex-column gap-2 mt-3 mt-md-0">
                 <button class="btn btn-outline-danger btn-sm" @click="openResolveModal(flag.id, true)">
@@ -202,12 +205,12 @@ const formatDate = (dateStr: string) => {
         </div>
       </div>
 
-      <Pagination 
+      <Pagination
-        v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
+          v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
-        :current-page="page"
+          :current-page="page"
-        :per-page="perPage"
+          :per-page="perPage"
-        :total-items="flagsRes.total || (page * perPage + 1)"
+          :total-items="flagsRes.total || (page * perPage + 1)"
-        @page-change="page = $event"
+          @page-change="page = $event"
       />
     </div>
 
@@ -235,14 +238,46 @@ const formatDate = (dateStr: string) => {
     </div>
 
     <ConfirmModal
-      :open="dismissModal.open"
+        :open="dismissModal.open"
-      title="Ignora flag"
+        title="Ignora flag"
-      message="Vuoi ignorare questo flag? Azione registrata in moderazione."
+        message="Vuoi ignorare questo flag? Azione registrata in moderazione."
-      confirm-label="Ignora flag"
+        confirm-label="Ignora flag"
-      confirm-class="btn-outline-secondary"
+        confirm-class="btn-outline-secondary"
-      :pending="dismissModal.pending"
+        :pending="dismissModal.pending"
-      @cancel="closeDismissModal"
+        @cancel="closeDismissModal"
-      @confirm="handleDismiss"
+        @confirm="handleDismiss"
     />
   </div>
 </template>
+
+<style scoped>
+.dismissed-card {
+  background-color: #f8f9fa;
+  opacity: 0.7;
+  border: 1px solid #e9ecef !important;
+}
+
+.dismissed-card .card-header {
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+
+.dismissed-card .card-body {
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
+.dismissed-card h5.card-title {
+  font-size: 1rem;
+  margin-bottom: 0.2rem;
+}
+
+.mt-info {
+  margin-top: 1rem;
+}
+
+.dismissed-card .mt-info {
+  margin-top: 0.4rem;
+}
+</style>

app/pages/admin/users.vue

@@ -17,7 +17,7 @@ const banError = ref('')
 const roleError = ref('')
 const pendingBanUser = ref<any | null>(null)
 const isUpdatingBan = ref(false)
-const parseRoles = (roles?: string) => roles ? roles.split(',').map((r) => r.trim().toUpperCase()).filter(Boolean) : []
+const parseRoles = (roles?: string) => roles ? roles.split(',').map(normalizeRole).filter(Boolean) : []
 const banConfirmMessage = computed(() =>
   pendingBanUser.value
     ? `Vuoi ${pendingBanUser.value.banned ? 'sbloccare' : 'bannare'} utente ${pendingBanUser.value.first_name} ${pendingBanUser.value.last_name}?`
@@ -68,7 +68,6 @@ const handleToggleBan = async () => {
   }
 }
 
-// Modal per i ruoli
 const editingUserId = ref<number | null>(null)
 const selectedRoles = ref<string[]>([])
 const availableRoles = ['CITIZEN', 'OPERATOR', 'ADMIN']

app/pages/auth/login.vue

@@ -9,7 +9,6 @@ useHead({ title: 'Accedi - Visione' })
 
 const { requestOtp, verifyOtp, handleLoginSuccess } = useAuth()
 
-// UI State
 const otpStep = ref<1 | 2>(1)
 const isLoading = ref(false)
 const errorMessage = ref('')

app/pages/auth/register.vue

@@ -97,7 +97,6 @@ const handleRegister = async () => {
 
                 <h2 class="h5 text-primary font-weight-bold mb-4 border-bottom pb-2">Dati Anagrafici</h2>
 
-                <!-- FIX LAYOUT: form-group separato da col -->
                 <div class="row mb-4">
                   <div class="col-12 col-md-6 mb-4 mb-md-0">
                     <div class="form-group">
@@ -136,7 +135,6 @@ const handleRegister = async () => {
                   <small class="form-text text-muted">Faciliterà il contatto da parte degli operatori comunali in caso di intervento.</small>
                 </div>
 
-                <!-- Privacy Checkbox -->
                 <div class="form-check mb-4">
                   <input class="form-check-input" type="checkbox" id="privacyCheck" v-model="form.privacy" required>
                   <label class="form-check-label small" for="privacyCheck">

app/pages/dashboard/index.vue

@@ -10,24 +10,21 @@ import OperatorDashboard from '~/components/dashboard/OperatorDashboard.vue'
 import AdminDashboard from '~/components/dashboard/AdminDashboard.vue'
 
 const currentDashboard = computed(() => {
-  const role = user.value?.role?.toUpperCase()
+  if (isCitizen(user.value?.role)) return CitizenDashboard
-  if (role === 'CITIZEN') return CitizenDashboard
+  if (isOperator(user.value?.role)) return OperatorDashboard
-  if (role === 'OPERATOR') return OperatorDashboard
+  if (isAdmin(user.value?.role)) return AdminDashboard
-  if (role === 'ADMIN') return AdminDashboard
   return null
 })
 
 const heroTitle = computed(() => {
-  const role = user.value?.role?.toUpperCase()
+  if (isAdmin(user.value?.role)) return 'Pannello Admin'
-  if (role === 'ADMIN') return 'Pannello Admin'
+  if (isOperator(user.value?.role)) return 'Gestione Operativa'
-  if (role === 'OPERATOR') return 'Gestione Operativa'
   return 'Dashboard'
 })
 
 const heroSubtitle = computed(() => {
-  const role = user.value?.role?.toUpperCase()
+  if (isAdmin(user.value?.role)) return 'Accesso amministrativo per configurazioni, utenti e moderazione'
-  if (role === 'ADMIN') return 'Accesso amministrativo per configurazioni, utenti e moderazione'
+  if (isOperator(user.value?.role)) return 'Prendi in carico e gestisci le segnalazioni in corso'
-  if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
   return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
 })
 </script>

app/pages/info.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// La pagina è statica, usiamo solo i componenti UI
 useHead({
   title: 'Informazioni sul Progetto - Visione',
 })
@@ -7,7 +6,6 @@ useHead({
 
 <template>
   <div>
-    <!-- HERO SECTION (Senza pt-5/mt-5 come richiesto) -->
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
@@ -24,72 +22,79 @@ useHead({
       </div>
     </div>
 
-    <!-- OBIETTIVO DEL PROGETTO -->
     <div class="container my-5 py-3">
       <div class="row">
         <div class="col-12 col-lg-8 offset-lg-2">
           <h2 class="mb-4 font-weight-bold">Migliorare la qualità della vita in città</h2>
           <p class="lead text-muted">
-            Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare, gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti abbandonati).
+            Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare,
+            gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti
+            abbandonati).
           </p>
           <p>
-            Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai cittadini tramite un portale Open Data dedicato.
+            Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti
+            tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai
+            cittadini tramite un portale Open Data dedicato.
           </p>
         </div>
       </div>
     </div>
 
-    <!-- RUOLI E FUNZIONALITÀ (Card Grid) -->
     <div class="bg-light py-5">
       <div class="container">
         <h2 class="text-center mb-5 font-weight-bold">Come funziona il sistema</h2>
         <div class="row">
 
-          <!-- Cittadino -->
           <div class="col-12 col-md-4 mb-4">
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100">
                 <div class="card-body">
-                  <BIIcon name="it-user" size="xl" color="primary" class="mb-3" />
+                  <BIIcon class="mb-3" color="primary" name="it-user" size="xl"/>
                   <h3 class="card-title h5 font-weight-bold">Cittadini</h3>
                   <p class="card-text text-muted">
-                    Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni geolocalizzate complete di foto.
+                    Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni
+                    geolocalizzate complete di foto.
                     <br><br>
-                    Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva. Possono inoltre chattare con gli operatori e lasciare un feedback finale.
+                    Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni
+                    segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva.
+                    Possono inoltre chattare con gli operatori e lasciare un feedback finale.
                   </p>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- Operatore -->
           <div class="col-12 col-md-4 mb-4">
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100">
                 <div class="card-body">
-                  <BIIcon name="it-tool" size="xl" color="primary" class="mb-3" />
+                  <BIIcon class="mb-3" color="primary" name="it-tool" size="xl"/>
                   <h3 class="card-title h5 font-weight-bold">Operatori e Squadre</h3>
                   <p class="card-text text-muted">
-                    Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
+                    Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in
+                    carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
                     <br><br>
-                    Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a <em>In Lavorazione</em> e <em>Risolta</em>.
+                    Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a
+                    <em>In Lavorazione</em> e <em>Risolta</em>.
                   </p>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- Amministratore -->
           <div class="col-12 col-md-4 mb-4">
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100">
                 <div class="card-body">
-                  <BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
+                  <BIIcon class="mb-3" color="primary" name="it-settings" size="xl"/>
                   <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.
+                    Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e
+                    monitorare i tempi medi di risoluzione.
                   </p>
                 </div>
               </div>
@@ -100,44 +105,46 @@ useHead({
       </div>
     </div>
 
-    <!-- STACK TECNOLOGICO E FILOSOFIA -->
     <div class="container my-5 py-4">
       <div class="row align-items-center">
         <div class="col-12 col-lg-6 mb-4 mb-lg-0">
           <h2 class="font-weight-bold mb-4">Tecnologia e Indipendenza</h2>
           <ul class="it-list">
             <li>
-              <BIIcon name="it-code-circle" color="primary" class="me-2" />
+              <BIIcon class="me-2" color="primary" name="it-code-circle"/>
-              <strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>. Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
+              <strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>.
+              Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
             </li>
             <li class="mt-3">
-              <BIIcon name="it-lock" color="primary" class="me-2" />
+              <BIIcon class="me-2" color="primary" name="it-lock"/>
               <strong>Sicurezza:</strong> Accesso con OTP e sistema di autorizzazione Role-Based basato su token JWT.
             </li>
             <li class="mt-3">
-              <BIIcon name="it-piu" color="primary" class="me-2" />
+              <BIIcon class="me-2" color="primary" name="it-piu"/>
-              <strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di dati anonimizzati accessibili al pubblico.
+              <strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di
+              dati anonimizzati accessibili al pubblico.
             </li>
           </ul>
         </div>
         <div class="col-12 col-lg-5 offset-lg-1">
-          <!-- Callout Ribellione Gitea -->
           <div class="callout callout-highlight callout-warning">
             <div class="callout-title">
-              <BIIcon name="it-warning-circle" />
+              <BIIcon name="it-warning-circle"/>
               Un approccio etico al codice sorgente
             </div>
             <p>
-              In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
+              In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo
+              l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo
+              di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
               <br><br>
-              Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul codice.
+              Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul
+              codice.
             </p>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- CREDITI ACCADEMICI (Footer Style Callout) -->
     <div class="container mb-5 pb-5">
       <div class="card-wrapper card-space">
         <div class="card card-bg border-start border-primary border-5">
@@ -146,7 +153,8 @@ useHead({
               <div class="col-12 col-md-8">
                 <h4 class="h5 font-weight-bold text-primary mb-2">Crediti Accademici</h4>
                 <p class="mb-1">
-                  Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di Programmazione</strong> (tenuto dal Prof. Vessio).
+                  Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di
+                  Programmazione</strong> (tenuto dal Prof. Vessio).
                 </p>
                 <p class="text-muted small mb-0">
                   Università degli Studi di Bari "Aldo Moro" - Dipartimento di Informatica.
@@ -170,7 +178,6 @@ useHead({
 </template>
 
 <style scoped>
-/* Leggere correzioni stilistiche per le liste */
 .it-list {
   list-style-type: none;
   padding-left: 0;

app/pages/note-legali.vue

@@ -6,7 +6,6 @@ useHead({
 
 <template>
   <div>
-    <!-- HERO SECTION -->
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
@@ -22,7 +21,6 @@ useHead({
       </div>
     </div>
 
-    <!-- CONTENUTO PRINCIPALE -->
     <div class="container my-5 py-4">
       <div class="row">
         <div class="col-12 col-lg-8 offset-lg-2">
@@ -53,7 +51,6 @@ useHead({
             Gli operatori e gli amministratori di sistema si riservano il diritto di moderare, nascondere o rimuovere segnalazioni contenenti materiale inappropriato, offensivo, non pertinente o illegale. L'abuso ripetuto del sistema comporterà il ban permanente dell'account dell'utente, associato al proprio Codice Fiscale.
           </p>
 
-          <!-- DISCLAIMER ACCADEMICO -->
           <div class="callout callout-highlight callout-info mt-5">
             <div class="callout-title">
               <BIIcon name="it-info-circle" />

app/pages/notifications.vue

@@ -92,7 +92,6 @@ const getNotificationColor = (type: string): string => {
 
 <template>
   <div>
-    <!-- HERO -->
     <div class="bg-light border-bottom py-4 mb-4">
       <div class="container">
         <div class="row">
@@ -109,18 +108,15 @@ const getNotificationColor = (type: string): string => {
       </div>
     </div>
 
-    <!-- CONTENUTO -->
     <div class="container mb-5">
       <div class="row">
         <div class="col-12 col-lg-10 offset-lg-1">
 
-          <!-- FILTRI (Opzionale) -->
           <div class="d-flex gap-2 mb-4">
             <button class="btn btn-sm btn-outline-primary active">Tutti</button>
             <button class="btn btn-sm btn-outline-secondary">Solo non letti</button>
           </div>
 
-          <!-- LISTA NOTIFICHE -->
           <div v-if="notifications.length === 0" class="text-center py-5">
             <BIIcon name="it-bell" size="xl" color="info" class="mb-3 d-block" />
             <h6 class="text-muted">Nessuna notifica</h6>
@@ -140,14 +136,12 @@ const getNotificationColor = (type: string): string => {
               @click="handleNotificationClick(notification)"
             >
               <div class="d-flex align-items-start gap-3">
-                <!-- ICONA -->
                 <div class="flex-shrink-0 mt-1">
                   <div class="rounded-circle p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                     <BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
                   </div>
                 </div>
 
-                <!-- CONTENUTO -->
                 <div class="flex-grow-1">
                   <div class="d-flex align-items-start justify-content-between">
                     <div>
@@ -162,13 +156,11 @@ const getNotificationColor = (type: string): string => {
                       </small>
                     </div>
 
-                    <!-- INDICATORE NON LETTO -->
                     <div v-if="!notification.read_at" class="flex-shrink-0">
                       <span class="badge bg-primary rounded-pill">Nuovo</span>
                     </div>
                   </div>
 
-                  <!-- AZIONI RAPIDE -->
                   <div v-if="notification.report_id" class="mt-2 d-flex gap-2">
                     <NuxtLink :to="`/reports/${notification.report_id}`" class="btn btn-sm btn-outline-primary">
                       <BIIcon name="it-arrow-right" size="xs" class="me-1" />
@@ -188,7 +180,6 @@ const getNotificationColor = (type: string): string => {
             </button>
           </div>
 
-          <!-- PAGINATION -->
           <Pagination
             v-if="notifications.length > 0"
             :current-page="page"

app/pages/open-data.vue

@@ -1,26 +1,22 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import type { Map as LeafletMap, CircleMarker, LatLngBoundsExpression } from 'leaflet'
+import type { CircleMarker, LatLngBoundsExpression, Map as LeafletMap } from 'leaflet'
 import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
 
 const { getOpenDataReports } = usePublic()
 
-// Reactive pagination state
 const currentPage = ref(1)
 const perPage = ref(9)
-
-// Fetch data automatically when currentPage changes
 const { data: openDataResponse, pending } = await useAsyncData(
     'open-data-reports',
     () => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
-    { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
+    { watch: [currentPage] }
 )
 
 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
   return openDataResponse.value.reports.length < perPage.value
@@ -143,7 +139,6 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <!-- HERO SECTION (Small version for internal pages) -->
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
@@ -159,13 +154,9 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <!-- MAIN CONTENT -->
     <div class="container my-5">
-
-      <!-- TOOLBAR: View Toggles & Export -->
       <div class="row align-items-center mb-5 pb-3 border-bottom">
         <div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
-          <!-- View Toggle Buttons -->
           <button
               class="btn btn-sm"
               :class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
@@ -184,7 +175,6 @@ onBeforeUnmount(() => {
           </button>
         </div>
         <div class="col-12 col-md-6 text-md-end">
-          <!-- Fake Export CTA (Very common in Open Data portals) -->
           <button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
             <BIIcon name="it-download" size="sm" class="me-1" />
             Scarica JSON
@@ -192,18 +182,15 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
-      <!-- LOADER -->
       <div v-if="pending" class="d-flex justify-content-center my-5 py-5">
         <div class="progress-spinner progress-spinner-active" role="status">
           <span class="visually-hidden">Caricamento in corso...</span>
         </div>
       </div>
 
-      <!-- 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 visibleReports" :key="report.id">
-            <!-- Strict BI Card -->
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100 shadow-sm">
                 <div class="card-body d-flex flex-column">
@@ -248,7 +235,6 @@ onBeforeUnmount(() => {
           Nessun dato pubblico disponibile al momento.
         </div>
 
-        <!-- BOOTSTRAP ITALIA PAGINATION -->
         <nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
           <ul class="pagination">
             <li class="page-item" :class="{ disabled: currentPage === 1 }">
@@ -270,7 +256,6 @@ onBeforeUnmount(() => {
         </nav>
       </div>
 
-      <!-- MAP VIEW -->
       <div v-else-if="currentView === 'map'" class="map-view-wrapper">
         <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
           <p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
@@ -286,7 +271,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* Ensures the cards inside the grid stretch to equal heights */
 .card-wrapper {
   height: 100%;
 }

app/pages/operator/reports/[id].vue

@@ -20,7 +20,6 @@ const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
 const { getInterventionSummary, updateReportStatus, assignTeam, getTeams, createInterventionLink, revokeInterventionLink } = useOperator()
 const { user } = useAuth()
 
-// Dati principali
 const { data: reportData, refresh: refreshReport } = await useAsyncData(`op-report-${reportId}`, () => getReportDetail(reportId))
 const { data: messagesData, refresh: refreshMessages } = await useAsyncData(`op-messages-${reportId}`, () => getMessages(reportId))
 const { data: summaryData, refresh: refreshSummary } = await useAsyncData(`op-summary-${reportId}`, () => getInterventionSummary(reportId))
@@ -81,7 +80,6 @@ const newStatus = ref<ReportStatus>('IN_PROGRESS')
 const statusNote = ref('')
 const isUpdatingStatus = ref(false)
 
-// Form Assegna Squadra
 const isAssignModalOpen = ref(false)
 const selectedTeamId = ref<number | null>(null)
 const isAssigning = ref(false)
@@ -93,7 +91,6 @@ const interventionLinkError = ref('')
 const interventionLinkSuccess = ref('')
 const isRevokeInterventionModalOpen = ref(false)
 
-// Messaggi
 const isSubmittingMessage = ref(false)
 const flaggedMessageIds = ref<number[]>([])
 const isFlagMessageModalOpen = ref(false)
@@ -129,7 +126,9 @@ const handleStatusUpdate = async () => {
 }
 
 const handleAssignTeam = async () => {
+  if (isAdmin(user.value?.role)) return
   if (!selectedTeamId.value) return
+
   isAssigning.value = true
   try {
     const res = await assignTeam(reportId, {
@@ -229,6 +228,8 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
 
 const canFlagMessage = (message: Message) => {
   if (!user.value) return false
+  if (isAdmin(user.value?.role)) return false
+
   const isCitizenMessage = message.user_id !== user.value.id && message.user_id === report.value?.user_id
   const isAlreadyFlagged = flaggedMessageIds.value.includes(message.id)
   return isCitizenMessage && !isAlreadyFlagged
@@ -408,7 +409,7 @@ const formattedInterventionLinkExpiry = computed(() =>
                   </p>
                 </div>
               </div>
-              <div class="card-body pt-0">
+              <div v-if="!isAdmin(user?.role)" class="card-body pt-0">
                 <button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
                   Assegna team
                 </button>
@@ -522,7 +523,6 @@ const formattedInterventionLinkExpiry = computed(() =>
       </div>
     </div>
 
-    <!-- Modale Assegnazione -->
     <div v-if="isAssignModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
     <div v-if="isAssignModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
       <div class="modal-dialog modal-dialog-centered">

app/pages/privacy.vue

@@ -6,7 +6,6 @@ useHead({
 
 <template>
   <div>
-    <!-- HERO SECTION -->
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
@@ -22,7 +21,6 @@ useHead({
       </div>
     </div>
 
-    <!-- CONTENUTO PRINCIPALE -->
     <div class="container my-5 py-4">
       <div class="row">
         <div class="col-12 col-lg-8 offset-lg-2">

app/pages/profile.vue

@@ -71,7 +71,7 @@ const formatDate = (dateString: string) =>
                 </div>
                 <div class="col-md-6 mb-0">
                   <small class="text-muted d-block">Ruolo</small>
-                  <span class="badge bg-info">{{ user?.role }}</span>
+                  <span class="badge bg-info">{{ normalizeRole(user?.role) }}</span>
                 </div>
               </div>
             </div>

app/pages/reports/[id].vue

@@ -16,7 +16,6 @@ if (!reportId) {
   navigateTo('/')
 }
 
-// Fetch dati
 const { data: reportData, refresh: refreshReport } = await useAsyncData(`report-${reportId}`, () =>
     getReportDetail(reportId)
 )
@@ -42,7 +41,6 @@ const isSubmittingFeedback = ref(false)
 const selectedMediaIndex = ref(0)
 const isGalleryOpen = ref(false)
 
-// Gestione selezione file
 const handleFileSelect = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files) {
@@ -50,7 +48,6 @@ const handleFileSelect = (event: Event) => {
   }
 }
 
-// Invia messaggio
 const handleSendMessage = async () => {
   if (!newMessage.value.trim() && selectedFiles.value.length === 0) return
 
@@ -58,7 +55,6 @@ const handleSendMessage = async () => {
   try {
     await addMessage(reportId, { body: newMessage.value })
 
-    // Pulisci i campi
     newMessage.value = ''
     selectedFiles.value = []
     if (fileInput.value) fileInput.value.value = ''
@@ -71,7 +67,6 @@ const handleSendMessage = async () => {
   }
 }
 
-// Invia feedback (solo se risolta)
 const handleSubmitFeedback = async () => {
   isSubmittingFeedback.value = true
   try {
@@ -92,7 +87,6 @@ const handleSubmitFeedback = async () => {
 
 const isOwner = computed(() => report.value?.user_id === user.value?.id)
 
-// Valutazione solo se lo stato è specificamente "RESOLVED"
 const canFeedback = computed(() => report.value?.status === 'RESOLVED')
 
 const statusMeta: Record<string, { label: string; tone: string }> = {

app/types/api.d.ts

@@ -4,430 +4,416 @@ export type FlagStatus = 'OPEN' | 'RESOLVED' | 'DISMISSED';
 export type FlagContentType = 'REPORT' | 'MESSAGE';
 
 export interface GeoJsonObject {
-    type: string;
+  type: string;
-    coordinates: any[];
+  coordinates: any[];
-    [key: string]: any;
+
+  [key: string]: any;
 }
 
 export interface ErrorResponse {
-    error: string;
+  error: string;
-    message?: string;
+  message?: string;
-    fields?: string[];
+  fields?: string[];
 }
 
 export interface OkResponse {
-    ok: boolean;
+  ok: boolean;
 }
 
-/**
- * USER & AUTHENTICATION
- */
 export interface CurrentUser {
-    id: number;
+  id: number;
-    first_name: string;
+  first_name: string;
-    last_name: string;
+  last_name: string;
-    email: string;
+  email: string;
-    fiscal_code: string;
+  fiscal_code: string;
-    points: number;
+  points: number;
-    role: string;
+  role: string;
-    roles: string[];
+  roles: string[];
-    permissions: string[];
+  permissions: string[];
-    phone?: string;
+  phone?: string;
 }
 
 export interface AdminUser {
-    id: number;
+  id: number;
-    email: string;
+  email: string;
-    first_name: string;
+  first_name: string;
-    last_name: string;
+  last_name: string;
-    fiscal_code: string;
+  fiscal_code: string;
-    phone?: string;
+  phone?: string;
-    banned?: boolean;
+  banned?: boolean;
-    points?: number;
+  points?: number;
-    roles?: string; // Comma-separated
+  roles?: string;
 }
 
 export interface TokenResponse {
-    ok: boolean;
+  ok: boolean;
-    token: string;
+  token: string;
-    token_type: string;
+  token_type: string;
-    expires_in_hours: number;
+  expires_in_hours: number;
 }
 
-/**
- * REPORTS & MEDIA
- */
 export interface Report {
-    id: number;
+  id: number;
-    category_id: number;
+  category_id: number;
-    latitude: number;
+  latitude: number;
-    longitude: number;
+  longitude: number;
-    address: string;
+  address: string;
-    description: string;
+  description: string;
-    status: ReportStatus;
+  status: ReportStatus;
-    area_id?: number;
+  area_id?: number;
-    area_name?: string;
+  area_name?: string;
-    category_name?: string;
+  category_name?: string;
-    assigned_operator_id?: number;
+  assigned_operator_id?: number;
-    created_at?: string;
+  created_at?: string;
-    updated_at?: string;
+  updated_at?: string;
-    user_id?: number;
+  user_id?: number;
 }
 
 export interface OpenDataReport {
-    id: number;
+  id: number;
-    category_id: number;
+  category_id: number;
-    category_name: string;
+  category_name: string;
-    latitude: number;
+  latitude: number;
-    longitude: number;
+  longitude: number;
-    status: ReportStatus;
+  status: ReportStatus;
-    created_at: string;
+  created_at: string;
-    updated_at: string;
+  updated_at: string;
-    area_id?: number | null;
+  area_id?: number | null;
-    area_name?: string | null;
+  area_name?: string | null;
 }
 
 export interface Media {
-    id: number;
+  id: number;
-    report_id: number;
+  report_id: number;
-    url: string;
+  url: string;
-    media_kind: MediaKind;
+  media_kind: MediaKind;
-    content_type: string;
+  content_type: string;
-    original_filename: string;
+  original_filename: string;
-    size_bytes: number;
+  size_bytes: number;
-    created_at: string;
+  created_at: string;
 }
 
 export interface StatusHistoryItem {
-    id: number;
+  id: number;
-    report_id: number;
+  report_id: number;
-    changed_by_user_id: number;
+  changed_by_user_id: number;
-    old_status: ReportStatus;
+  old_status: ReportStatus;
-    new_status: ReportStatus;
+  new_status: ReportStatus;
-    note?: string;
+  note?: string;
-    created_at: string;
+  created_at: string;
 }
 
 export interface Message {
-    id: number;
+  id: number;
-    report_id: number;
+  report_id: number;
-    user_id: number;
+  user_id: number;
-    first_name: string;
+  first_name: string;
-    last_name: string;
+  last_name: string;
-    body: string;
+  body: string;
-    created_at: string;
+  created_at: string;
 }
 
-/**
- * ENTITIES (Areas, Teams, Categories, Notifications, Rewards, Moderation)
- */
 export interface Area {
-    id: number;
+  id: number;
-    name: string;
+  name: string;
-    description?: string;
+  description?: string;
-    active?: boolean;
+  active?: boolean;
-    boundary_geojson?: GeoJsonObject;
+  boundary_geojson?: GeoJsonObject;
 }
 
 export interface Category {
-    id: number;
+  id: number;
-    name: string;
+  name: string;
-    description?: string;
+  description?: string;
-    active?: boolean;
+  active?: boolean;
 }
 
 export interface Team {
-    id: number;
+  id: number;
-    name: string;
+  name: string;
-    description?: string;
+  description?: string;
-    team_category_id: number;
+  team_category_id: number;
-    area_id?: number;
+  area_id?: number;
-    active?: boolean;
+  active?: boolean;
-    area_name?: string;
+  area_name?: string;
-    category_name?: string;
+  category_name?: string;
 }
 
 export interface Notification {
-    id: number;
+  id: number;
-    title: string;
+  title: string;
-    body: string;
+  body: string;
-    type: string;
+  type: string;
-    created_at: string;
+  created_at: string;
-    report_id?: number | null;
+  report_id?: number | null;
-    read_at?: string | null;
+  read_at?: string | null;
 }
 
 export interface RewardEvent {
-    id: number;
+  id: number;
-    report_id: number;
+  report_id: number;
-    points: number;
+  points: number;
-    reason: string;
+  reason: string;
-    created_at: string;
+  created_at: string;
 }
 
 export interface ModerationFlag {
-    id: number;
+  id: number;
-    report_id: number;
+  report_id: number;
-    message_id?: number | null;
+  message_id?: number | null;
-    reason: string;
+  reason: string;
-    details?: string;
+  details?: string;
-    status: FlagStatus;
+  status: FlagStatus;
-    content_type: FlagContentType;
+  content_type: FlagContentType;
-    created_by_user_id: number;
+  created_by_user_id: number;
-    created_by_email: string;
+  created_by_email: string;
-    created_at: string;
+  created_at: string;
-    resolved_by_user_id?: number | null;
+  resolved_by_user_id?: number | null;
-    resolved_by_email?: string | null;
+  resolved_by_email?: string | null;
-    resolution_note?: string | null;
+  resolution_note?: string | null;
-    resolved_at?: string | null;
+  resolved_at?: string | null;
 }
 
-/**
- * REQUEST BODIES
- */
 export interface RegisterCitizenRequest {
-    first_name: string;
+  first_name: string;
-    last_name: string;
+  last_name: string;
-    email: string;
+  email: string;
-    fiscal_code: string;
+  fiscal_code: string;
-    phone?: string;
+  phone?: string;
-    birth_date?: string;
+  birth_date?: string;
-    birth_place?: string;
+  birth_place?: string;
 }
 
 export interface UpdateProfileRequest {
-    first_name?: string;
+  first_name?: string;
-    last_name?: string;
+  last_name?: string;
-    phone?: string;
+  phone?: string;
 }
 
 export interface EmailRequest {
-    email: string;
+  email: string;
 }
 
 export interface VerifyOtpRequest {
-    email: string;
+  email: string;
-    code: string;
+  code: string;
 }
 
 export interface CreateReportRequest {
-    category_id: number;
+  category_id: number;
-    latitude: number;
+  latitude: number;
-    longitude: number;
+  longitude: number;
-    address: string;
+  address: string;
-    description: string;
+  description: string;
-    media?: string[]; // Array of URLs if already uploaded
+  media?: string[];
 }
 
 export interface UpdateStatusRequest {
-    status: ReportStatus;
+  status: ReportStatus;
-    note?: string;
+  note?: string;
 }
 
 export interface AssignTeamRequest {
-    team_id: number;
+  team_id: number;
 }
 
 export interface MessageRequest {
-    body: string;
+  body: string;
 }
 
 export interface FeedbackRequest {
-    rating: number; // 1 to 5
+  rating: number;
-comment?: string;
+  comment?: string;
 }
 
 export interface FlagRequest {
-    reason: string;
+  reason: string;
-    details?: string;
+  details?: string;
 }
 
 export interface UpdateModerationRequest {
-    status: 'RESOLVED' | 'DISMISSED';
+  status: 'RESOLVED' | 'DISMISSED';
-    reject_report?: boolean;
+  reject_report?: boolean;
-    resolution_note?: string;
+  resolution_note?: string;
 }
 
 export interface CreateAreaRequest {
-    name: string;
+  name: string;
-    boundary_geojson: GeoJsonObject;
+  boundary_geojson: GeoJsonObject;
-    description?: string;
+  description?: string;
 }
 
 export interface UpdateAreaRequest {
-    name?: string;
+  name?: string;
-    boundary_geojson?: GeoJsonObject;
+  boundary_geojson?: GeoJsonObject;
-    description?: string;
+  description?: string;
-    active?: boolean;
+  active?: boolean;
 }
 
 export interface CreateCategoryRequest {
-    name: string;
+  name: string;
-    description?: string;
+  description?: string;
 }
 
 export interface UpdateCategoryRequest {
-    name?: string;
+  name?: string;
-    description?: string;
+  description?: string;
-    active?: boolean;
+  active?: boolean;
 }
 
 export interface CreateTeamRequest {
-    team_category_id: number;
+  team_category_id: number;
-    name: string;
+  name: string;
-    description?: string;
+  description?: string;
-    area_id?: number;
+  area_id?: number;
 }
 
 export interface UpdateTeamRequest {
-    team_category_id?: number;
+  team_category_id?: number;
-    name?: string;
+  name?: string;
-    description?: string;
+  description?: string;
-    area_id?: number | null;
+  area_id?: number | null;
-    active?: boolean;
+  active?: boolean;
 }
 
 export interface UpdateUserBanRequest {
-    banned: boolean;
+  banned: boolean;
 }
 
 export interface UpdateUserRolesRequest {
-    roles: string[];
+  roles: string[];
 }
 
-/**
- * RESPONSE BODIES
- */
 export interface CurrentUserResponse {
-    ok: boolean;
+  ok: boolean;
-    user: CurrentUser;
+  user: CurrentUser;
 }
 
 export interface RegisterCitizenResponse {
-    ok: boolean;
+  ok: boolean;
-    user_id: number;
+  user_id: number;
 }
 
 export interface OtpRequestResponse {
-    ok: boolean;
+  ok: boolean;
-    delivery: string;
+  delivery: string;
-    expires_in_minutes: number;
+  expires_in_minutes: number;
 }
 
 export interface CreateReportResponse {
-    ok: boolean;
+  ok: boolean;
-    report_id: number;
+  report_id: number;
-    area_id?: number;
+  area_id?: number;
 }
 
 export interface ReportListResponse {
-    ok: boolean;
+  ok: boolean;
-    reports: Report[];
+  reports: Report[];
 }
 
 export interface PagedReportListResponse {
-    ok: boolean;
+  ok: boolean;
-    page: number;
+  page: number;
-    per_page: number;
+  per_page: number;
-    total?: number;
+  total?: number;
-    reports: Report[];
+  reports: Report[];
 }
 
 export interface OpenDataReportListResponse {
-    ok: boolean;
+  ok: boolean;
-    page: number;
+  page: number;
-    per_page: number;
+  per_page: number;
-    reports: OpenDataReport[];
+  reports: OpenDataReport[];
 }
 
 export interface ReportDetailResponse {
-    ok: boolean;
+  ok: boolean;
-    report: Report;
+  report: Report;
-    history: StatusHistoryItem[];
+  history: StatusHistoryItem[];
-    media: Media[];
+  media: Media[];
 }
 
 export interface InterventionSummaryResponse {
-    ok: boolean;
+  ok: boolean;
-    summary: Report;
+  summary: Report;
-    media: Media[];
+  media: Media[];
-    latest_messages: Message[];
+  latest_messages: Message[];
 }
 
 export interface AssignmentLinkResponse {
-    ok: boolean;
+  ok: boolean;
-    url: string;
+  url: string;
-    expires_at: string;
+  expires_at: string;
 }
 
 export interface MediaUploadResponse {
-    ok: boolean;
+  ok: boolean;
-    media: Media[];
+  media: Media[];
 }
 
 export interface MessageListResponse {
-    ok: boolean;
+  ok: boolean;
-    messages: Message[];
+  messages: Message[];
 }
 
 export interface FlagResponse {
-    ok: boolean;
+  ok: boolean;
-    flag_id: number;
+  flag_id: number;
 }
 
 export interface RewardsResponse {
-    ok: boolean;
+  ok: boolean;
-    points: number;
+  points: number;
-    page: number;
+  page: number;
-    per_page: number;
+  per_page: number;
-    reward_events: RewardEvent[];
+  reward_events: RewardEvent[];
 }
 
 export interface NotificationListResponse {
-    ok: boolean;
+  ok: boolean;
-    page: number;
+  page: number;
-    per_page: number;
+  per_page: number;
-    notifications: Notification[];
+  notifications: Notification[];
 }
 
 export interface AreaListResponse {
-    ok: boolean;
+  ok: boolean;
-    areas: Area[];
+  areas: Area[];
 }
 
 export interface CategoryListResponse {
-    ok: boolean;
+  ok: boolean;
-    categories: Category[];
+  categories: Category[];
 }
 
 export interface TeamListResponse {
-    ok: boolean;
+  ok: boolean;
-    teams: Team[];
+  teams: Team[];
 }
 
 export interface UserListResponse {
-    ok: boolean;
+  ok: boolean;
-    users: AdminUser[];
+  users: AdminUser[];
 }
 
 export interface ModerationListResponse {
-    ok: boolean;
+  ok: boolean;
-    page: number;
+  page: number;
-    per_page: number;
+  per_page: number;
-    total?: number;
+  total?: number;
-    flags: ModerationFlag[];
+  flags: ModerationFlag[];
 }
 
 export interface OverviewStatsResponse {
-    ok: boolean;
+  ok: boolean;
-    reports_by_status: { status: ReportStatus; total: number }[];
+  reports_by_status: { status: ReportStatus; total: number }[];
-    reports_by_area: { area: string; total: number }[];
+  reports_by_area: { area: string; total: number }[];
-    avg_resolution_hours: { value: number }[];
+  avg_resolution_hours: { value: number }[];
-    reports_by_category: { category: string; total: number }[];
+  reports_by_category: { category: string; total: number }[];
-    reports_by_team: { team: string; total: number }[];
+  reports_by_team: { team: string; total: number }[];
-    monthly_reports: { month: string; total: number }[];
+  monthly_reports: { month: string; total: number }[];
-    avg_resolution_hours_by_category: { category: string; value: number }[];
+  avg_resolution_hours_by_category: { category: string; value: number }[];
-    avg_resolution_hours_by_area: { area: string; value: number }[];
+  avg_resolution_hours_by_area: { area: string; value: number }[];
-    total_users?: number;
+  total_users?: number;
-    open_reports?: number;
+  open_reports?: number;
 }

app/utils/roles.ts

@@ -0,0 +1,43 @@
+export const ROLES = {
+  CITIZEN: 'CITIZEN',
+  OPERATOR: 'OPERATOR',
+  ADMIN: 'ADMIN'
+} as const
+
+export type Role = keyof typeof ROLES
+
+export const ROLE_LEVELS: Record<string, number> = {
+  [ROLES.CITIZEN]: 1,
+  [ROLES.OPERATOR]: 2,
+  [ROLES.ADMIN]: 3
+}
+
+export function normalizeRole(role?: string | null): string {
+  return role?.trim().toUpperCase() ?? ''
+}
+
+export function isRole(userRole: string | undefined | null, targetRole: string): boolean {
+  return normalizeRole(userRole) === targetRole.toUpperCase()
+}
+
+export function hasMinimumRole(userRole: string | undefined | null, requiredRole: string): boolean {
+  const userLvl = ROLE_LEVELS[normalizeRole(userRole)] || 0
+  const reqLvl = ROLE_LEVELS[requiredRole.toUpperCase()] || 0
+  return userLvl >= reqLvl
+}
+
+export function isAdmin(userRole?: string | null): boolean {
+  return isRole(userRole, ROLES.ADMIN)
+}
+
+export function isOperator(userRole?: string | null): boolean {
+  return isRole(userRole, ROLES.OPERATOR)
+}
+
+export function isCitizen(userRole?: string | null): boolean {
+  return isRole(userRole, ROLES.CITIZEN)
+}
+
+export function canAccess(userRole: string | undefined | null, requiredRole: string): boolean {
+  return hasMinimumRole(userRole, requiredRole)
+}