feat: made catalog button better looking

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

app/assets/css/style.css

@@ -376,3 +376,11 @@ html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-fo
         max-width: 14rem;
     }
 }
+
+.alert-danger {
+    background-position-y: center;
+}
+
+.card::after {
+    margin-top: 0!important;
+}

app/components/ConfirmModal.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  open: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmClass?: string
+  pending?: boolean
+}>(), {
+  confirmLabel: 'Conferma',
+  cancelLabel: 'Annulla',
+  confirmClass: 'btn-danger',
+  pending: false,
+})
+
+const emit = defineEmits<{
+  cancel: []
+  confirm: []
+}>()
+
+const handleBackdropClick = (event: MouseEvent) => {
+  if (event.target === event.currentTarget && !props.pending) {
+    emit('cancel')
+  }
+}
+</script>
+
+<template>
+  <div v-if="open">
+    <div class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div
+      class="modal fade show d-block"
+      tabindex="-1"
+      style="z-index: 1050;"
+      @click="handleBackdropClick"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content shadow">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ title }}</h5>
+            <button type="button" class="btn-close" :disabled="pending" @click="emit('cancel')"></button>
+          </div>
+          <div class="modal-body">
+            <p class="mb-0">{{ message }}</p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-outline-secondary" :disabled="pending" @click="emit('cancel')">
+              {{ cancelLabel }}
+            </button>
+            <button type="button" class="btn" :class="confirmClass" :disabled="pending" @click="emit('confirm')">
+              <span v-if="pending" class="spinner-border spinner-border-sm me-2"></span>
+              {{ confirmLabel }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/components/Footer.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import MemberDot from "~/components/MemberDot.vue";
-import BIIcon from "~/components/BIIcon.vue";
 import { useMembers } from "~/composables/useMembers";
 
 const { sortedMembers } = useMembers();
@@ -15,7 +14,7 @@ const { sortedMembers } = useMembers();
             <div class="col-sm-12">
               <div class="it-brand-wrapper">
                 <a href="#" data-focus-mouse="false" class="d-flex align-items-center">
-                  <img src="/icon.svg" alt="Logo Visione" style="width: 42px; height: 42px; margin-right: 12px;" />
+                  <img alt="Logo Visione" src="/logo-light.svg" style="width: 42px; height: 42px; margin-right: 12px;"/>
                   
                   <div class="it-brand-text">
                     <h2>Visione</h2>

app/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import BIIcon from "~/components/BIIcon.vue";
 
@@ -10,15 +10,31 @@ watch(() => route.path, () => {
   isMobileMenuOpen.value = false
 })
 
+watch(isMobileMenuOpen, (isOpen) => {
+  if (typeof document !== 'undefined') {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+  }
+})
+
+onUnmounted(() => {
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = ''
+  }
+})
+
+const { isAuthenticated, user, logout } = useAuth()
+const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
+
 const navLinks = [
   { name: 'Home', path: '/' },
-  { name: 'Fai una segnalazione', path: '/reports/new' },
+  ...(isCitizen(user.value?.role) ? [{ name: 'Fai una segnalazione', path: '/reports/new' }] : []),
   { name: 'Esplora i dati', path: '/open-data' },
   { name: 'Come funziona', path: '/info' }
 ]
-
-const { isAuthenticated, user, logout } = useAuth()
-const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello' : 'Dashboard')
 </script>
 
 <template>
@@ -28,8 +44,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
         <div class="row">
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">
-              <a class="d-none d-lg-block navbar-brand"
+              <a class="d-none d-lg-block navbar-brand" href="https://www.cittametropolitana.ba.it/">
-                 href="https://www.cittametropolitana.ba.it/">
                 Città metropolitana di Bari
               </a>
               <div class="nav-mobile">
@@ -48,7 +63,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/dashboard"
                             data-element="personal-area-dashboard" data-focus-mouse="false">
                     <span class="rounded-icon" aria-hidden="true">
-                      <BIIcon name="it-list" color="black" />
+                      <BIIcon name="it-list" color="black"/>
                     </span>
                     <span class="d-none d-lg-block">{{ panelLabel }}</span>
                   </NuxtLink>
@@ -56,7 +71,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
                             data-element="personal-area-dashboard" data-focus-mouse="false">
                     <span class="rounded-icon" aria-hidden="true">
-                      <BIIcon name="it-user" color="black" />
+                      <BIIcon name="it-user" color="black"/>
                     </span>
                     <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                   </NuxtLink>
@@ -64,7 +79,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                   <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
                           data-element="personal-area-logout" data-focus-mouse="false">
                     <span class="rounded-icon" aria-hidden="true">
-                      <BIIcon name="it-logout" color="black" />
+                      <BIIcon name="it-logout" color="black"/>
                     </span>
                     <span class="d-none d-lg-block">Esci</span>
                   </button>
@@ -73,12 +88,11 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                 <NuxtLink v-else class="btn btn-primary btn-icon btn-full" to="/auth/login"
                           data-element="personal-area-login" data-focus-mouse="false">
                   <span class="rounded-icon" aria-hidden="true">
-                    <BIIcon name="it-user" color="black" />
+                    <BIIcon name="it-user" color="black"/>
                   </span>
                   <span class="d-none d-lg-block">Login</span>
                 </NuxtLink>
               </div>
-
             </div>
           </div>
         </div>
@@ -92,13 +106,13 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
             <div class="col-12">
               <div class="it-header-center-content-wrapper">
                 <div class="it-brand-wrapper">
-                <NuxtLink to="/">
+                  <NuxtLink to="/">
-                  <img src="/icon.svg" alt="Logo Visione" style="width: 48px; height: 48px; margin-right: 16px;" />
+                    <img alt="Logo Visione" class="logo" src="/logo-light.svg"/>
-                  <div class="it-brand-text">
+                    <div class="it-brand-text">
-                    <div class="it-brand-title">Visione</div>
+                      <div class="it-brand-title">Visione</div>
-                    <div class="it-brand-tagline d-none d-md-block">Un occhio per la sicurezza del cittadino.</div>
+                      <div class="it-brand-tagline d-none d-md-block">Un occhio per la sicurezza del cittadino.</div>
-                  </div>
+                    </div>
-                </NuxtLink>
+                  </NuxtLink>
                 </div>
               </div>
             </div>
@@ -111,6 +125,7 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
           <div class="row">
             <div class="col-12">
               <nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
+
                 <button
                     class="custom-navbar-toggler"
                     type="button"
@@ -124,19 +139,16 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
                     class="overlay"
                     :class="{ 'show': isMobileMenuOpen }"
                     @click="isMobileMenuOpen = false"
-                    style="display: block;"
-                    v-show="isMobileMenuOpen"
                 ></div>
 
                 <div
                     class="navbar-collapsable"
                     :class="{ 'expanded': isMobileMenuOpen }"
-                    style="display: block;"
                 >
                   <div class="close-div">
                     <button class="btn close-menu" type="button" @click="isMobileMenuOpen = false">
                       <span class="visually-hidden">Nascondi la navigazione</span>
-                      <BIIcon name="it-close-big"/>
+                      <BIIcon name="it-close-big" color="black"/>
                     </button>
                   </div>
 
@@ -184,14 +196,102 @@ const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ?
   background-color: rgb(0, 76.5, 153);
 }
 
-.overlay {
+@media (max-width: 991.98px) {
-  transition: opacity 0.3s ease;
+  .overlay {
-  opacity: 0;
+    position: fixed;
-  pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+
+  .overlay.show {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .navbar-collapsable {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    width: 320px;
+    max-width: 85vw;
+    height: 100vh;
+    background-color: #ffffff !important;
+    z-index: 1050 !important;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
+    overflow-y: auto;
+  }
+
+  .navbar-collapsable.expanded {
+    transform: translateX(0);
+  }
+
+  .close-div {
+    display: flex;
+    justify-content: flex-end;
+    padding: 1rem 1.5rem;
+  }
+
+  .close-menu {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+
+  .close-menu :deep(svg) {
+    width: 32px;
+    height: 32px;
+  }
+
+  .menu-wrapper {
+    padding: 1rem 0;
+  }
+
+  .navbar-nav {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .nav-item {
+    width: 100%;
+  }
+
+  .nav-link {
+    display: block;
+    padding: 1rem 1.5rem;
+    color: #1a1a1a !important;
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .nav-link.active {
+    color: #004c99 !important;
+    background-color: #f8f9fa;
+  }
 }
 
-.overlay.show {
+.btn-full {
-  opacity: 1;
+  padding: 14px;
-  pointer-events: auto;
+}
+
+.logo {
+  width: 48px;
+  height: 48px;
+  margin-inline: 16px;
 }
 </style>

app/components/MessageComposer.vue

@@ -44,6 +44,7 @@ const removeFile = (idx: number) => {
 <template>
   <div class="message-composer mt-3">
     <form @submit.prevent="handleSubmit">
+
       <div v-if="files.length > 0" class="message-files mb-3">
         <div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
           <BIIcon name="it-clip" size="xs" />
@@ -52,43 +53,42 @@ const removeFile = (idx: number) => {
         </div>
       </div>
 
-      <div class="composer-shell">
+      <div class="d-flex align-items-stretch gap-2">
         <input
-          ref="fileInputRef"
+            ref="fileInputRef"
-          type="file" 
+            type="file"
-          multiple 
+            multiple
-          class="d-none" 
+            class="d-none"
-          @change="handleFileSelect"
+            @change="handleFileSelect"
-          accept="image/*,video/*,.pdf,.doc,.docx"
+            accept="image/*,video/*,.pdf,.doc,.docx"
         />
 
         <button
-          type="button"
+            type="button"
-          class="btn btn-outline-primary btn-icon composer-attach"
+            class="btn btn-outline-primary btn-square flex-shrink-0"
-          title="Allega file"
+            title="Allega file"
-          @click="fileInputRef?.click()"
+            @click="fileInputRef?.click()"
-          :disabled="isSubmitting || files.length >= 5"
+            :disabled="isSubmitting || files.length >= 5"
         >
           <BIIcon name="it-clip" size="sm" />
         </button>
 
         <textarea
-          v-model="message"
+            v-model="message"
-          class="form-control composer-textarea"
+            class="form-control chat-textarea m-0"
-          placeholder="Scrivi aggiornamento o domanda"
+            placeholder="Scrivi aggiornamento o domanda"
-          rows="2"
+            :disabled="isSubmitting"
-          :disabled="isSubmitting"
+            @keydown="handleKeydown"
-          @keydown="handleKeydown"
+        ></textarea>
-        />
 
         <button
-          type="submit"
+            type="submit"
-          class="btn btn-primary composer-submit"
+            class="btn btn-primary btn-square flex-shrink-0"
-          :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
+            :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
+            title="Invia"
         >
-          <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+          <span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-          <BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
+          <BIIcon v-else name="it-arrow-right" size="sm" color="white" />
-          Invia
         </button>
       </div>
 
@@ -126,54 +126,32 @@ const removeFile = (idx: number) => {
   max-width: 14rem;
 }
 
-.composer-shell {
-  align-items: flex-end;
-  background: #fff;
-  border: 1px solid #c5d0db;
-  border-radius: 4px;
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  padding: 0.75rem;
-}
-
-.composer-shell:focus-within {
-  border-color: #06c;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
-}
-
-.composer-attach {
-  flex-shrink: 0;
-}
-
-.composer-textarea {
-  border: 0;
-  box-shadow: none;
-  min-height: 4rem;
-  padding: 0;
-  resize: vertical;
-}
-
-.composer-submit {
-  min-width: 7rem;
-}
-
 .btn-close-sm {
   font-size: 0.55rem;
 }
 
-@media (max-width: 767.98px) {
+.chat-textarea {
-  .composer-shell {
+  resize: none !important;
-    grid-template-columns: auto 1fr;
+  height: 48px;
-  }
+  min-height: 48px;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-radius: 6px;
+}
 
-  .composer-textarea {
+.chat-textarea:focus {
-    grid-column: 1 / -1;
+  border-color: #06c;
-  }
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
+}
 
-  .composer-submit {
+.btn-square {
-    grid-column: 2;
+  width: 48px;
-    justify-self: end;
+  height: 48px;
-  }
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
 }
 </style>

app/components/MessageList.vue

@@ -38,7 +38,7 @@ const auth = useAuth()
 const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userId
 
 const senderInitials = (msg: Message): string =>
-  `${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
+    `${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
 </script>
 
 <template>
@@ -50,27 +50,27 @@ const senderInitials = (msg: Message): string =>
     </div>
 
     <div v-else-if="messages.length === 0" class="message-empty-state" role="alert">
-      <BIIcon name="it-comment" size="lg" color="primary" class="mb-2" />
+      <BIIcon class="mb-2" color="primary" name="it-comment" size="lg"/>
       <strong class="d-block mb-1">Nessun messaggio</strong>
       <span>Usa chat per aggiornamenti rapidi tra cittadino e operatori.</span>
     </div>
 
     <div v-else class="messages-container">
       <div
-        v-for="msg in messages"
+          v-for="msg in messages"
-        :key="msg.id"
+          :key="msg.id"
-        class="message-row"
+          :class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
-        :class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
+          class="message-row"
       >
         <div v-if="!isCurrentUser(msg.user_id)" class="message-avatar" aria-hidden="true">
           {{ senderInitials(msg) }}
         </div>
         <div
-          class="message-bubble-content"
+            :class="{
-          :class="{
             'message-bubble-outgoing': isCurrentUser(msg.user_id),
             'message-bubble-incoming': !isCurrentUser(msg.user_id)
           }"
+            class="message-bubble-content"
         >
           <div class="message-meta">
             <span v-if="!isCurrentUser(msg.user_id)" class="message-author">
@@ -90,15 +90,16 @@ const senderInitials = (msg: Message): string =>
             {{ msg.body }}
           </div>
 
-          <div v-if="canFlagMessage(msg)" class="message-actions">
+          <div v-if="canFlagMessage?.(msg)" class="message-actions">
             <button
-              type="button"
+                :disabled="isFlaggingMessageId === msg.id"
-              class="btn btn-link btn-xs px-0"
+                class="btn btn-link btn-xs px-0"
-              :disabled="isFlaggingMessageId === msg.id"
+                type="button"
-              @click="emit('flag', msg)"
+                @click="emit('flag', msg)"
             >
-              <span v-if="isFlaggingMessageId === msg.id" class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
+              <span v-if="isFlaggingMessageId === msg.id" aria-hidden="true"
-              <BIIcon v-else name="it-flag" size="xs" class="me-1" />
+                    class="spinner-border spinner-border-sm me-1"></span>
+              <BIIcon v-else class="me-1" name="it-flag" size="xs"/>
               Segnala messaggio
             </button>
           </div>
@@ -112,9 +113,12 @@ const senderInitials = (msg: Message): string =>
 .message-list {
   border: 1px solid #d9e3ee;
   border-radius: 4px;
-  max-height: 34rem;
+  height: 34rem;
+
   overflow-y: auto;
   padding: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .messages-container {
@@ -129,7 +133,7 @@ const senderInitials = (msg: Message): string =>
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 14rem;
+  flex: 1;
   padding: 2rem 1rem;
   text-align: center;
 }

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,8 @@ 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;
+  overflow: hidden;
 }
 
 .address-suggestions {

app/components/ReportTable.vue

@@ -9,6 +9,7 @@ interface Props {
   actionVariant?: ActionVariant
   actionLabel?: string
   showAssignee?: boolean
+  processingIds?: number[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   actionVariant: 'open',
   actionLabel: 'Open report',
   showAssignee: false,
+  processingIds: () => [],
 })
 
 const emit = defineEmits<{
@@ -38,52 +40,54 @@ const reportHref = (report: Report) => `${props.detailBasePath}/${report.id}`
   <div class="table-responsive report-table-wrapper">
     <table class="table table-hover report-table mb-0">
       <thead>
-        <tr>
+      <tr>
-          <th scope="col">ID</th>
+        <th scope="col">ID</th>
-          <th scope="col">Categoria</th>
+        <th scope="col">Categoria</th>
-          <th scope="col">Indirizzo</th>
+        <th scope="col">Indirizzo</th>
-          <th scope="col">Stato</th>
+        <th scope="col">Stato</th>
-          <th v-if="showAssignee" scope="col">Operatore</th>
+        <th v-if="showAssignee" scope="col">Operatore</th>
-          <th scope="col">Creazione</th>
+        <th scope="col">Creazione</th>
-          <th scope="col" class="text-end">Azioni</th>
+        <th scope="col" class="text-end">Azioni</th>
-        </tr>
+      </tr>
       </thead>
       <tbody>
-        <tr v-for="report in reports" :key="report.id" class="align-middle">
+      <tr v-for="report in reports" :key="report.id" class="align-middle">
-          <td class="report-table-id">#{{ report.id }}</td>
+        <td class="report-table-id">#{{ report.id }}</td>
-          <td class="text-nowrap">{{ report.category_name || '-' }}</td>
+        <td class="text-nowrap">{{ report.category_name || '-' }}</td>
-          <td>
+        <td>
-            <span class="report-address" :title="report.address">
+          <span class="report-address d-inline-block text-truncate align-middle" style="max-width: 10ch;" :title="report.address">
               {{ report.address || '-' }}
             </span>
-          </td>
+        </td>
-          <td>
+        <td>
-            <StatusBadge :status="report.status" />
+          <StatusBadge :status="report.status" />
-          </td>
+        </td>
-          <td v-if="showAssignee" class="text-muted">
+        <td v-if="showAssignee" class="text-muted">
-            {{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
+          {{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
-          </td>
+        </td>
-          <td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
+        <td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
-          <td class="text-end">
+        <td class="text-end">
-            <button
+          <button
               v-if="actionVariant === 'manage'"
               type="button"
               class="btn btn-primary btn-xs"
+              :disabled="processingIds.includes(report.id)"
               @click="emit('take', report.id)"
-            >
+          >
-              Prendi in carico
+            <span v-if="processingIds.includes(report.id)" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
-            </button>
+            Prendi in carico
-            <NuxtLink
+          </button>
+          <NuxtLink
               v-else
               :to="reportHref(report)"
-              class="btn btn-outline-primary btn-xs btn-icon"
+              class="btn btn-outline-primary btn-xs btn-icon d-inline-flex align-items-center justify-content-center"
               :aria-label="actionLabel"
               :title="actionLabel"
-            >
+          >
-              <BIIcon name="it-arrow-right" size="xs" />
+            <BIIcon name="it-arrow-right" size="xs" />
-            </NuxtLink>
+          </NuxtLink>
-          </td>
+        </td>
-        </tr>
+      </tr>
       </tbody>
     </table>
   </div>

app/components/dashboard/AdminDashboard.vue

@@ -11,30 +11,60 @@ 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">
           <div class="card card-bg text-center">
             <div class="card-body">
-              <h2 class="text-primary">{{ statsRes.total_users || 0 }}</h2>
+              <h2 class="text-primary">
-              <p class="card-text">Utenti Registrati</p>
+                {{ statsRes.reports_by_status?.reduce((sum, item) => sum + Number(item.total), 0) || 0 }}
+              </h2>
+              <p class="card-text">Totale Segnalazioni</p>
             </div>
           </div>
         </div>
       </div>
+
+      <div class="col-6 col-md-3 mb-3">
+        <div class="card-wrapper card-space">
+          <div class="card card-bg text-center">
+            <div class="card-body">
+              <h2 class="text-danger">
+                {{ statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
+              </h2>
+              <p class="card-text">Aperte (Da Gestire)</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="col-6 col-md-3 mb-3">
         <div class="card-wrapper card-space">
           <div class="card card-bg text-center">
             <div class="card-body">
               <h2 class="text-warning">
-                {{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
+                {{ statsRes.reports_by_status?.find(s => s.status === 'ASSIGNED')?.total ?? 0 }}
               </h2>
-              <p class="card-text">Segn. Aperte</p>
+              <p class="card-text">In Carico (Assegnate)</p>
             </div>
           </div>
         </div>
       </div>
+
+      <div class="col-6 col-md-3 mb-3">
+        <div class="card-wrapper card-space">
+          <div class="card card-bg text-center">
+            <div class="card-body">
+              <h2 class="text-success">
+                {{ statsRes.reports_by_status?.find(s => s.status === 'CLOSED')?.total ?? 0 }}
+              </h2>
+              <p class="card-text">Risolte (Chiuse)</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
 
     <h3 class="mb-3">Gestione Sistema</h3>

app/components/dashboard/OperatorDashboard.vue

@@ -4,10 +4,17 @@ const { getOpenReports, getAssignedReports, takeReport } = useOperator()
 const { data: openReportsRes, refresh: refreshOpen } = useAsyncData('open-reports', () => getOpenReports({ per_page: 5 }))
 const { data: assignedReportsRes, refresh: refreshAssigned } = useAsyncData('assigned-reports', () => getAssignedReports({ per_page: 5 }))
 
+const processingIds = ref<number[]>([])
+
 const handleTakeReport = async (id: number) => {
-  const res = await takeReport(id)
+  processingIds.value.push(id)
-  if (res.ok) {
+  try {
-    await Promise.all([refreshOpen(), refreshAssigned()])
+    const res = await takeReport(id)
+    if (res.ok) {
+      await Promise.all([refreshOpen(), refreshAssigned()])
+    }
+  } finally {
+    processingIds.value = processingIds.value.filter(pid => pid !== id)
   }
 }
 </script>

app/composables/useAdmin.ts

@@ -1,9 +1,18 @@
 import type {
-  AreaListResponse, CategoryListResponse, CreateAreaRequest, CreateCategoryRequest, CreateTeamRequest,
+  AreaListResponse,
+  CategoryListResponse,
+  CreateAreaRequest,
+  CreateCategoryRequest,
+  CreateTeamRequest,
   ModerationListResponse,
   OkResponse,
-  OverviewStatsResponse, TeamListResponse, UpdateModerationRequest,
+  OverviewStatsResponse,
-  UpdateUserBanRequest, UpdateUserRolesRequest,
+  UpdateAreaRequest,
+  UpdateCategoryRequest,
+  UpdateModerationRequest,
+  UpdateTeamRequest,
+  UpdateUserBanRequest,
+  UpdateUserRolesRequest,
   UserListResponse
 } from "~/types/api";
 
@@ -26,18 +35,33 @@ export const useAdmin = () => {
   const createArea = (body: CreateAreaRequest) =>
       useApiFetch<OkResponse>('/api/v1/admin/areas', { method: 'POST', body })
 
+  const updateArea = (id: number, body: UpdateAreaRequest) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/areas/${id}`, { method: 'PATCH', body })
+
+  const deleteArea = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/areas/${id}`, { method: 'DELETE' })
+
   const getCategories = () =>
       useApiFetch<CategoryListResponse>('/api/v1/admin/categories', { method: 'GET' })
 
   const createCategory = (body: CreateCategoryRequest) =>
       useApiFetch<OkResponse>('/api/v1/admin/categories', { method: 'POST', body })
 
-  const getTeams = () =>
+  const updateCategory = (id: number, body: UpdateCategoryRequest) =>
-      useApiFetch<TeamListResponse>('/api/v1/admin/teams', { method: 'GET' })
+      useApiFetch<OkResponse>(`/api/v1/admin/categories/${id}`, { method: 'PATCH', body })
+
+  const deleteCategory = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/categories/${id}`, { method: 'DELETE' })
 
   const createTeam = (body: CreateTeamRequest) =>
       useApiFetch<OkResponse>('/api/v1/admin/teams', { method: 'POST', body })
 
+  const updateTeam = (id: number, body: UpdateTeamRequest) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/teams/${id}`, { method: 'PATCH', body })
+
+  const deleteTeam = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/teams/${id}`, { method: 'DELETE' })
+  
   const getModerationFlags = (query?: { status?: string; page?: number; per_page?: number }) =>
       useApiFetch<ModerationListResponse>('/api/v1/admin/moderation', { method: 'GET', query })
 
@@ -51,10 +75,15 @@ export const useAdmin = () => {
     updateUserRoles,
     getAreas,
     createArea,
+    updateArea,
+    deleteArea,
     getCategories,
     createCategory,
-    getTeams,
+    updateCategory,
+    deleteCategory,
     createTeam,
+    updateTeam,
+    deleteTeam,
     getModerationFlags,
     updateModerationFlag,
   }

app/composables/useAuth.ts

@@ -1,10 +1,17 @@
 import type {
-  ChangePasswordRequest,
+  CieSessionResponse,
-  CurrentUserResponse, EmailRequest, NotificationListResponse,
+  CieStartResponse,
+  CurrentUserResponse,
+  EmailRequest,
+  NotificationListResponse,
   OkResponse,
-  OtpRequestResponse, PasswordLoginRequest, RegisterCitizenRequest,
+  OtpRequestResponse,
-  RegisterCitizenResponse, RewardsResponse,
+  RegisterCitizenRequest,
-  TokenResponse, VerifyOtpRequest, UpdateProfileRequest
+  RegisterCitizenResponse,
+  RewardsResponse,
+  TokenResponse,
+  UpdateProfileRequest,
+  VerifyOtpRequest
 } from "~/types/api";
 
 export const useAuth = () => {
@@ -44,9 +51,7 @@ export const useAuth = () => {
         user.value = res.user
         const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
 
-        if (res.user.must_change_password && path !== '/auth/change-password') {
+        if (redirectOnSuccess && path.startsWith('/auth')) {
-          await nuxtApp.runWithContext(() => navigateTo('/auth/change-password'))
-        } else if (redirectOnSuccess && path.startsWith('/auth')) {
           await nuxtApp.runWithContext(() => navigateTo('/dashboard'))
         }
       }
@@ -66,7 +71,8 @@ export const useAuth = () => {
   const handleLoginSuccess = async (jwtToken: string) => {
     token.value = jwtToken
     tokenState.value = jwtToken
-    await syncUser({ redirectOnSuccess: true })
+    await syncUser()
+    window.location.reload();
   }
 
   const logout = () => {
@@ -85,11 +91,14 @@ export const useAuth = () => {
   const verifyOtp = (body: VerifyOtpRequest) =>
       useApiFetch<TokenResponse>('/api/v1/auth/otp/verify', { method: 'POST', body })
 
-  const loginWithPassword = (body: PasswordLoginRequest) =>
+  const startCieLogin = (frontendRedirectUri: string) =>
-      useApiFetch<TokenResponse>('/api/v1/auth/login/password', { method: 'POST', body })
+      useApiFetch<CieStartResponse>('/api/v1/auth/cie/start', {
+        method: 'POST',
+        body: { frontend_redirect_uri: frontendRedirectUri }
+      })
 
-  const changePassword = (body: ChangePasswordRequest) =>
+  const fetchCieSession = (id: string) =>
-      useApiFetch<OkResponse>('/api/v1/auth/change-password', { method: 'POST', body })
+      useApiFetch<CieSessionResponse>(`/api/v1/auth/cie/session/${id}`, { method: 'GET' })
 
   const updateProfile = (body: UpdateProfileRequest) =>
       useApiFetch<CurrentUserResponse>('/api/v1/me', { method: 'PATCH', body })
@@ -119,8 +128,8 @@ export const useAuth = () => {
     register,
     requestOtp,
     verifyOtp,
-    loginWithPassword,
+    startCieLogin,
-    changePassword,
+    fetchCieSession,
     updateProfile,
     fetchCurrentUser,
     fetchRewards,

app/composables/useMembers.ts

@@ -7,9 +7,9 @@ export interface Member {
 
 export function useMembers() {
   const members: Member[] = [
-    { name: "Renato Loiacono", image: "https://placehold.co/50x50" },
+    { name: "Renato Loiacono", image: "/renatoloiacono.webp" },
-    { name: "Michelangelo Parisi", image: "https://placehold.co/50x50" },
+    { name: "Michelangelo Parisi", image: "/michelangeloparisi.webp" },
-    { name: "Gabriele Schiraldi", image: "https://placehold.co/50x50" },
+    { name: "Gabriele Schiraldi", image: "/gabrielepaoloschiraldi.webp" },
   ];
 
   const sortedMembers = computed(() => {

app/composables/useOperator.ts

@@ -1,4 +1,5 @@
 import type {
+  AssignmentLinkResponse,
   AssignTeamRequest,
   InterventionSummaryResponse,
   OkResponse,
@@ -32,6 +33,12 @@ export const useOperator = () => {
   const getInterventionSummary = (id: number) =>
       useApiFetch<InterventionSummaryResponse>(`/api/v1/reports/${id}/intervention-summary`, { method: 'GET' })
 
+  const createInterventionLink = (id: number) =>
+      useApiFetch<AssignmentLinkResponse>(`/api/v1/reports/${id}/intervention-link`, { method: 'POST' })
+
+  const revokeInterventionLink = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/reports/${id}/intervention-link`, { method: 'DELETE' })
+
   return {
     getOpenReports,
     getAssignedReports,
@@ -41,5 +48,7 @@ export const useOperator = () => {
     updateReportStatus,
     assignTeam,
     getInterventionSummary,
+    createInterventionLink,
+    revokeInterventionLink,
   }
 }

app/layouts/default.vue

@@ -11,6 +11,7 @@ import Footer from "~/components/Footer.vue";
       <slot />
     </main>
 
+    <div class="italian-flag"></div>
     <Footer />
   </div>
 </template>
@@ -22,6 +23,19 @@ import Footer from "~/components/Footer.vue";
   min-height: 100vh;
 }
 
+div.italian-flag {
+  height: 8px;
+  width: 100%;
+  background: linear-gradient(to right, #009246 0%, #009246 33.33%, #F1F2F1 33.33%, #F1F2F1 66.66%, #CE2B37 66.66%, #CE2B37 100%);
+}
+
+div.italian-flag {
+  height: 8px;
+  width: 100%;
+  box-shadow: rgb(0 0 0 / 0.7) 0 0 30px;
+  background: linear-gradient(to right, #009246 0%, #009246 33.33%, #F1F2F1 33.33%, #F1F2F1 66.66%, #CE2B37 66.66%, #CE2B37 100%);
+}
+
 .app-main {
   flex-grow: 1;
 }

app/middleware/auth.ts

@@ -1,7 +1,8 @@
+import { checkRoleAccess, type MetaRoleRequirement } from '~/utils/roles'
+
 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 +12,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 as MetaRoleRequirement | undefined
-  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 (!checkRoleAccess(userRole, requiredRole)) {
-      'CITIZEN': 1,
+      console.warn(`[Auth] User role '${userRole}' rejected for route requirement:`, 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 } from 'vue'
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
 
 definePageMeta({
@@ -9,23 +9,129 @@ definePageMeta({
 
 useHead({ title: 'Aree - Admin' })
 
-const { getAreas, createArea } = useAdmin()
+const { getAreas, createArea, updateArea, deleteArea } = useAdmin()
 const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
 
 const isCreating = ref(false)
+const editingAreaId = ref<number | null>(null)
 const formData = reactive({
   name: '',
   description: '',
   geojson: ''
 })
 const jsonError = ref('')
+const actionError = ref('')
+const modalError = 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][]>([])
 
+const modalTitle = computed(() => editingAreaId.value ? 'Modifica Area' : 'Nuova Area')
+const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Crea Area')
+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.` : ''
+)
+
+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 = ''
+  modalError.value = ''
+  editingAreaId.value = null
   formData.name = ''
   formData.description = ''
   formData.geojson = ''
@@ -34,7 +140,6 @@ const openCreateModal = () => {
   isCreating.value = true
 
   nextTick(async () => {
-    // Import leaflet solo client-side
     const L = (await import('leaflet')).default
 
     if (map) {
@@ -43,8 +148,8 @@ const openCreateModal = () => {
     }
 
     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', {
@@ -60,6 +165,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.'
@@ -67,6 +174,88 @@ const openCreateModal = () => {
       }
 
       jsonError.value = ''
+      modalError.value = ''
+      mapPoints.value.push([e.latlng.lat, e.latlng.lng])
+      polygon.setLatLngs(mapPoints.value)
+      updateGeojson()
+    })
+  })
+}
+
+const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
+  const coordinates = boundaryGeojson?.coordinates?.[0]
+  if (!Array.isArray(coordinates)) {
+    mapPoints.value = []
+    return
+  }
+
+  const normalized = coordinates
+      .slice(0, -1)
+      .map(([longitude, latitude]: [number, number]) => [latitude, longitude] as [number, number])
+
+  mapPoints.value = normalized
+  if (polygon) {
+    polygon.setLatLngs(mapPoints.value)
+  }
+}
+
+const openEditModal = (area: any) => {
+  actionError.value = ''
+  modalError.value = ''
+  editingAreaId.value = area.id
+  formData.name = area.name || ''
+  formData.description = area.description || ''
+  formData.geojson = area.boundary_geojson || ''
+  jsonError.value = ''
+  mapPoints.value = []
+  isCreating.value = true
+
+  nextTick(async () => {
+    const L = (await import('leaflet')).default
+
+    if (map) {
+      map.remove()
+      map = null
+    }
+
+    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)
+    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) => {
+      if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
+        jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
+        return
+      }
+
+      jsonError.value = ''
+      modalError.value = ''
       mapPoints.value.push([e.latlng.lat, e.latlng.lng])
       polygon.setLatLngs(mapPoints.value)
       updateGeojson()
@@ -80,6 +269,7 @@ const clearMap = () => {
     polygon.setLatLngs([])
   }
   formData.geojson = ''
+  modalError.value = ''
 }
 
 const updateGeojson = () => {
@@ -87,9 +277,9 @@ const updateGeojson = () => {
     formData.geojson = ''
     return
   }
-  const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
+  const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number])
   if (coords[0]) {
-    coords.push([...coords[0]]) // Chiudi poligono
+    coords.push([...coords[0]])
   }
 
   formData.geojson = JSON.stringify({
@@ -100,6 +290,7 @@ const updateGeojson = () => {
 
 const closeCreateModal = () => {
   isCreating.value = false
+  editingAreaId.value = null
   if (map) {
     map.remove()
     map = null
@@ -108,10 +299,12 @@ const closeCreateModal = () => {
 
 onBeforeUnmount(() => {
   if (map) map.remove()
+  if (mainMap) mainMap.remove()
 })
 
 const handleCreate = async () => {
   jsonError.value = ''
+  modalError.value = ''
   let parsedGeojson = null
 
   try {
@@ -131,19 +324,65 @@ const handleCreate = async () => {
   }
 
   try {
-    const res = await createArea({
+    const payload = {
       name: formData.name,
       description: formData.description || undefined,
       boundary_geojson: parsedGeojson
-    })
+    }
+
+    const res = editingAreaId.value
+        ? await updateArea(editingAreaId.value, payload)
+        : await createArea(payload)
 
     if (res.ok) {
       await refresh()
       closeCreateModal()
+      actionError.value = ''
     }
-  } catch (err) {
+  } catch (err: any) {
-    console.error('Failed to create area', err)
+    console.error('Failed to save area', err)
-    alert('Errore durante la creazione dell\'area.')
+
+    const backendError = err?.data?.error || err?.response?.data?.error || err?.response?._data?.error;
+
+    if (backendError === 'area_outside_allowed_boundary') {
+      modalError.value = "Attenzione: l'area disegnata esce dai confini consentiti per il Comune di Bari.";
+    } else {
+      modalError.value = err?.data?.message || err?.message || "Errore durante il salvataggio dell'area.";
+    }
+  }
+}
+
+const askDeleteArea = (area: any) => {
+  areaPendingDelete.value = area
+}
+
+const closeDeleteAreaModal = () => {
+  if (deletingAreaId.value) return
+  areaPendingDelete.value = null
+}
+
+const handleDeleteArea = async () => {
+  if (!areaPendingDelete.value) return
+
+  const area = areaPendingDelete.value
+
+  deletingAreaId.value = area.id
+  actionError.value = ''
+
+  try {
+    const res = await deleteArea(area.id)
+    if (res.ok) {
+      if (editingAreaId.value === area.id) {
+        closeCreateModal()
+      }
+      await refresh()
+      areaPendingDelete.value = null
+    }
+  } catch (err: any) {
+    console.error('Failed to delete area', err)
+    actionError.value = err?.data?.message || 'Errore durante eliminazione area.'
+  } finally {
+    deletingAreaId.value = null
   }
 }
 </script>
@@ -155,7 +394,7 @@ const handleCreate = async () => {
       <div>
         <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" />
+          <BIIcon class="me-1" name="it-plus" size="xs"/>
           Nuova Area
         </button>
       </div>
@@ -165,55 +404,81 @@ const handleCreate = async () => {
       <div class="spinner-border text-primary" role="status"></div>
     </div>
 
-    <div v-else-if="!areasRes?.areas || areasRes.areas.length === 0" class="alert alert-info">
+    <div v-else-if="areas.length === 0" class="alert alert-info">
       Nessuna area configurata.
     </div>
 
-    <div v-else class="table-responsive">
+    <template v-else>
-      <table class="table table-hover align-middle bg-white shadow-sm rounded">
+      <div class="card mb-4 shadow-sm border-0">
-        <thead class="table-light">
+        <div id="mainMap" class="rounded" style="height: 400px; width: 100%; z-index: 1;"></div>
+      </div>
+
+      <div v-if="actionError" class="alert alert-danger">
+        {{ actionError }}
+      </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>
             <th>Descrizione</th>
-            <th>Stato</th>
             <th>GeoJSON</th>
+            <th class="text-end">Azioni</th>
           </tr>
-        </thead>
+          </thead>
-        <tbody>
+          <tbody>
-          <tr v-for="area in areasRes.areas" :key="area.id">
+          <tr v-for="area in areas" :key="area.id">
             <td>{{ area.id }}</td>
             <td><strong>{{ area.name }}</strong></td>
             <td>{{ area.description || '-' }}</td>
-            <td>
-              <span v-if="area.active" class="badge bg-success">Attiva</span>
-              <span v-else class="badge bg-secondary">Inattiva</span>
-            </td>
             <td>
               <span v-if="area.boundary_geojson" class="badge border border-primary text-primary">Configurato</span>
               <span v-else class="badge border border-danger text-danger">Mancante</span>
             </td>
+            <td class="text-end">
+              <button class="btn btn-sm btn-outline-primary me-2" @click="openEditModal(area)">
+                Modifica
+              </button>
+              <button
+                  class="btn btn-sm btn-outline-danger ms-2"
+                  :disabled="deletingAreaId === area.id"
+                  @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"
-    <div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+         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">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title">Nuova Area</h5>
+            <h5 class="modal-title">{{ modalTitle }}</h5>
             <button type="button" class="btn-close" @click="closeCreateModal"></button>
           </div>
           <div class="modal-body">
+
+            <!-- ALERT ERRORE DEL BACKEND -->
+            <div v-if="modalError" class="alert alert-danger mb-4 d-flex align-items-center" role="alert">
+              <strong>Errore:</strong>&nbsp;{{ modalError }}
+            </div>
+
             <form @submit.prevent="handleCreate">
               <div class="row">
                 <div class="col-md-5">
                   <div class="mb-3">
                     <label class="form-label">Nome Area</label>
-                    <input type="text" class="form-control" v-model="formData.name" required placeholder="Es. Centro Storico" />
+                    <input v-model="formData.name" class="form-control" placeholder="Es. Centro Storico" required
+                           type="text"/>
                   </div>
                   <div class="mb-3">
                     <label class="form-label">Descrizione (opzionale)</label>
@@ -222,12 +487,12 @@ const handleCreate = async () => {
                   <div class="mb-3">
                     <label class="form-label">GeoJSON Generato</label>
                     <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>
@@ -241,7 +506,8 @@ 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. Sono ammessi solo punti nel Comune di Bari.
+                    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>
@@ -250,22 +516,34 @@ const handleCreate = async () => {
           </div>
           <div class="modal-footer d-flex justify-content-end gap-2">
             <button type="button" class="btn btn-outline-secondary" @click="closeCreateModal">Annulla</button>
-            <button type="button" class="btn btn-primary" :disabled="!formData.name || !formData.geojson" @click="handleCreate">
+            <button :disabled="!formData.name || !formData.geojson" class="btn btn-primary" type="button"
-              Crea Area
+                    @click="handleCreate">
+              {{ submitLabel }}
             </button>
           </div>
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+        :open="areaPendingDelete !== null"
+        title="Elimina area"
+        :message="areaDeleteMessage"
+        confirm-label="Elimina area"
+        confirm-class="btn-danger"
+        :pending="deletingAreaId !== null"
+        @cancel="closeDeleteAreaModal"
+        @confirm="handleDeleteArea"
+    />
   </div>
 </template>
 
 <style scoped>
-#areaMap {
+#areaMap, #mainMap {
   background: #e9ecef;
 }
 
 .modal-dialog {
-  margin-block: 0!important;
+  margin-block: 0 !important;
 }
 </style>

app/pages/admin/catalog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Category, Team } from '~/types/api'
+
 definePageMeta({
   middleware: 'auth',
   auth: { role: 'ADMIN' }
@@ -6,10 +8,14 @@ definePageMeta({
 
 useHead({ title: 'Categorie e Team - Admin' })
 
-const { createCategory, getTeams, createTeam, getAreas } = useAdmin()
+const { createCategory, updateCategory, deleteCategory, createTeam, updateTeam, deleteTeam, getAreas } = useAdmin()
 const { getCategories } = useReports()
+const { getTeams } = useOperator()
 
-const { data: categoriesRes, refresh: refreshCategories } = await useAsyncData('report-categories-admin-view', () => getCategories())
+const {
+  data: categoriesRes,
+  refresh: refreshCategories
+} = await useAsyncData('report-categories-admin-view', () => getCategories())
 const { data: teamsRes, refresh: refreshTeams } = await useAsyncData('admin-teams', () => getTeams())
 const { data: areasRes } = await useAsyncData('admin-team-areas', () => getAreas())
 
@@ -18,6 +24,8 @@ const categoryForm = reactive({
   description: '',
 })
 
+const editingCategoryId = ref<number | null>(null)
+
 const teamForm = reactive({
   name: '',
   description: '',
@@ -25,26 +33,70 @@ const teamForm = reactive({
   area_id: null as number | null,
 })
 
+const editingTeamId = ref<number | null>(null)
+
 const isSavingCategory = ref(false)
 const isSavingTeam = ref(false)
 const categoryError = ref('')
 const teamError = ref('')
+const deletingCategoryId = ref<number | null>(null)
+const deletingTeamId = ref<number | null>(null)
+const categoryPendingDelete = ref<Category | null>(null)
+const teamPendingDelete = ref<Team | null>(null)
 
 const categories = computed(() => categoriesRes.value?.categories || [])
 const teams = computed(() => teamsRes.value?.teams || [])
 const areas = computed(() => areasRes.value?.areas || [])
+const categoryDeleteMessage = computed(() =>
+    categoryPendingDelete.value ? `Vuoi eliminare categoria "${categoryPendingDelete.value.name}"? Operazione irreversibile.` : ''
+)
+const teamDeleteMessage = computed(() =>
+    teamPendingDelete.value ? `Vuoi eliminare team "${teamPendingDelete.value.name}"? Operazione irreversibile.` : ''
+)
+
+const resetCategoryForm = () => {
+  editingCategoryId.value = null
+  categoryForm.name = ''
+  categoryForm.description = ''
+}
+
+const resetTeamForm = () => {
+  editingTeamId.value = null
+  teamForm.name = ''
+  teamForm.description = ''
+  teamForm.team_category_id = null
+  teamForm.area_id = null
+}
+
+const editCategory = (category: Category) => {
+  editingCategoryId.value = category.id
+  categoryForm.name = category.name
+  categoryForm.description = category.description || ''
+}
+
+const editTeam = (team: Team) => {
+  editingTeamId.value = team.id
+  teamForm.name = team.name
+  teamForm.description = team.description || ''
+  teamForm.team_category_id = team.team_category_id
+  teamForm.area_id = team.area_id ?? null
+}
 
 const submitCategory = async () => {
   categoryError.value = ''
   isSavingCategory.value = true
 
   try {
-    await createCategory({
+    const payload = {
       name: categoryForm.name.trim(),
       description: categoryForm.description.trim() || undefined,
-    })
+    }
-    categoryForm.name = ''
+    if (editingCategoryId.value) {
-    categoryForm.description = ''
+      await updateCategory(editingCategoryId.value, payload)
+    } else {
+      await createCategory(payload)
+    }
+    resetCategoryForm()
     await refreshCategories()
   } catch (error: any) {
     categoryError.value = error?.data?.message || 'Creazione categoria non riuscita.'
@@ -60,16 +112,18 @@ const submitTeam = async () => {
   isSavingTeam.value = true
 
   try {
-    await createTeam({
+    const payload = {
       name: teamForm.name.trim(),
       description: teamForm.description.trim() || undefined,
       team_category_id: teamForm.team_category_id,
       area_id: teamForm.area_id || undefined,
-    })
+    }
-    teamForm.name = ''
+    if (editingTeamId.value) {
-    teamForm.description = ''
+      await updateTeam(editingTeamId.value, payload)
-    teamForm.team_category_id = null
+    } else {
-    teamForm.area_id = null
+      await createTeam(payload)
+    }
+    resetTeamForm()
     await refreshTeams()
   } catch (error: any) {
     teamError.value = error?.data?.message || 'Creazione team non riuscita.'
@@ -77,6 +131,86 @@ const submitTeam = async () => {
     isSavingTeam.value = false
   }
 }
+
+const toggleCategoryActive = async (category: Category) => {
+  try {
+    await updateCategory(category.id, { active: category.active === false })
+    await refreshCategories()
+  } catch (error: any) {
+    categoryError.value = error?.data?.message || 'Aggiornamento categoria non riuscito.'
+  }
+}
+
+const askDeleteCategory = (category: Category) => {
+  categoryPendingDelete.value = category
+}
+
+const closeDeleteCategoryModal = () => {
+  if (deletingCategoryId.value) return
+  categoryPendingDelete.value = null
+}
+
+const handleDeleteCategory = async () => {
+  if (!categoryPendingDelete.value) return
+
+  const category = categoryPendingDelete.value
+
+  deletingCategoryId.value = category.id
+  categoryError.value = ''
+
+  try {
+    await deleteCategory(category.id)
+    if (editingCategoryId.value === category.id) {
+      resetCategoryForm()
+    }
+    await refreshCategories()
+    categoryPendingDelete.value = null
+  } catch (error: any) {
+    categoryError.value = error?.data?.message || 'Eliminazione categoria non riuscita.'
+  } finally {
+    deletingCategoryId.value = null
+  }
+}
+
+const toggleTeamActive = async (team: Team) => {
+  try {
+    await updateTeam(team.id, { active: team.active === false })
+    await refreshTeams()
+  } catch (error: any) {
+    teamError.value = error?.data?.message || 'Aggiornamento team non riuscito.'
+  }
+}
+
+const askDeleteTeam = (team: Team) => {
+  teamPendingDelete.value = team
+}
+
+const closeDeleteTeamModal = () => {
+  if (deletingTeamId.value) return
+  teamPendingDelete.value = null
+}
+
+const handleDeleteTeam = async () => {
+  if (!teamPendingDelete.value) return
+
+  const team = teamPendingDelete.value
+
+  deletingTeamId.value = team.id
+  teamError.value = ''
+
+  try {
+    await deleteTeam(team.id)
+    if (editingTeamId.value === team.id) {
+      resetTeamForm()
+    }
+    await refreshTeams()
+    teamPendingDelete.value = null
+  } catch (error: any) {
+    teamError.value = error?.data?.message || 'Eliminazione team non riuscita.'
+  } finally {
+    deletingTeamId.value = null
+  }
+}
 </script>
 
 <template>
@@ -105,7 +239,7 @@ const submitTeam = async () => {
             <form class="mb-4" @submit.prevent="submitCategory">
               <div class="mb-3">
                 <label class="form-label">Nome categoria</label>
-                <input v-model="categoryForm.name" type="text" class="form-control" required />
+                <input v-model="categoryForm.name" class="form-control" required type="text"/>
               </div>
               <div class="mb-3">
                 <label class="form-label">Descrizione</label>
@@ -113,35 +247,68 @@ const submitTeam = async () => {
               </div>
               <button type="submit" class="btn btn-primary" :disabled="isSavingCategory || !categoryForm.name.trim()">
                 <span v-if="isSavingCategory" class="spinner-border spinner-border-sm me-2"></span>
-                Crea categoria
+                {{ editingCategoryId ? 'Salva categoria' : 'Crea categoria' }}
+              </button>
+              <button
+                  v-if="editingCategoryId"
+                  class="btn btn-outline-secondary ms-2"
+                  type="button"
+                  @click="resetCategoryForm"
+              >
+                Annulla
               </button>
             </form>
 
             <div class="table-responsive report-table-wrapper">
-              <table class="table table-hover report-table mb-0">
+              <table class="table table-hover report-table mb-0 align-middle">
                 <thead>
-                  <tr>
+                <tr>
-                    <th>ID</th>
+                  <th>ID</th>
-                    <th>Nome</th>
+                  <th>Nome</th>
-                    <th>Stato</th>
+                  <th>Stato</th>
-                  </tr>
+                  <th class="text-end">Azioni</th>
+                </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="category in categories" :key="category.id">
+                <tr v-for="category in categories" :key="category.id">
-                    <td class="report-table-id">#{{ category.id }}</td>
+                  <td class="report-table-id">#{{ category.id }}</td>
-                    <td>
+                  <td>
-                      <strong>{{ category.name }}</strong>
+                    <strong>{{ category.name }}</strong>
-                      <div v-if="category.description" class="small text-muted mt-1">{{ category.description }}</div>
+                    <div v-if="category.description" class="small text-muted mt-1">{{ category.description }}</div>
-                    </td>
+                  </td>
-                    <td>
+                  <td>
                       <span class="badge" :class="category.active === false ? 'bg-secondary' : 'bg-success'">
                         {{ category.active === false ? 'Inattiva' : 'Attiva' }}
                       </span>
-                    </td>
+                  </td>
-                  </tr>
+                  <td class="text-end">
-                  <tr v-if="categories.length === 0">
+                    <div class="d-flex justify-content-end gap-2">
-                    <td colspan="3" class="text-muted">Nessuna categoria configurata.</td>
+                      <button class="btn btn-outline-primary btn-icon" title="Modifica" @click="editCategory(category)">
-                  </tr>
+                        <Icon name="lucide:pencil" size="16"/>
+                      </button>
+                      <button
+                          :class="category.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
+                          :title="category.active === false ? 'Attiva' : 'Disattiva'"
+                          class="btn btn-icon"
+                          @click="toggleCategoryActive(category)"
+                      >
+                        <Icon :name="category.active === false ? 'lucide:check-circle' : 'lucide:ban'" size="16"/>
+                      </button>
+                      <button
+                          :disabled="deletingCategoryId === category.id"
+                          class="btn btn-outline-danger btn-icon"
+                          title="Elimina"
+                          @click="askDeleteCategory(category)"
+                      >
+                        <span v-if="deletingCategoryId === category.id" class="spinner-border spinner-icon"></span>
+                        <Icon v-else name="lucide:trash-2" size="16"/>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="categories.length === 0">
+                  <td class="text-muted text-center py-4" colspan="4">Nessuna categoria configurata.</td>
+                </tr>
                 </tbody>
               </table>
             </div>
@@ -164,7 +331,7 @@ const submitTeam = async () => {
             <form class="row g-3 mb-4" @submit.prevent="submitTeam">
               <div class="col-12 col-md-6">
                 <label class="form-label">Nome team</label>
-                <input v-model="teamForm.name" type="text" class="form-control" required />
+                <input v-model="teamForm.name" class="form-control" required type="text"/>
               </div>
               <div class="col-12 col-md-6">
                 <label class="form-label">Categoria coperta</label>
@@ -186,45 +353,79 @@ const submitTeam = async () => {
               </div>
               <div class="col-12 col-md-6">
                 <label class="form-label">Descrizione</label>
-                <input v-model="teamForm.description" type="text" class="form-control" />
+                <input v-model="teamForm.description" class="form-control" type="text"/>
               </div>
               <div class="col-12">
-                <button type="submit" class="btn btn-primary" :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id">
+                <button :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id" class="btn btn-primary"
+                        type="submit">
                   <span v-if="isSavingTeam" class="spinner-border spinner-border-sm me-2"></span>
-                  Crea team
+                  {{ editingTeamId ? 'Salva team' : 'Crea team' }}
+                </button>
+                <button
+                    v-if="editingTeamId"
+                    class="btn btn-outline-secondary ms-2"
+                    type="button"
+                    @click="resetTeamForm"
+                >
+                  Annulla
                 </button>
               </div>
             </form>
 
             <div class="table-responsive report-table-wrapper">
-              <table class="table table-hover report-table mb-0">
+              <table class="table table-hover report-table mb-0 align-middle">
                 <thead>
-                  <tr>
+                <tr>
-                    <th>ID</th>
+                  <th>ID</th>
-                    <th>Team</th>
+                  <th>Team</th>
-                    <th>Categoria</th>
+                  <th>Categoria</th>
-                    <th>Area</th>
+                  <th>Area</th>
-                    <th>Stato</th>
+                  <th>Stato</th>
-                  </tr>
+                  <th class="text-end">Azioni</th>
+                </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="team in teams" :key="team.id">
+                <tr v-for="team in teams" :key="team.id">
-                    <td class="report-table-id">#{{ team.id }}</td>
+                  <td class="report-table-id">#{{ team.id }}</td>
-                    <td>
+                  <td>
-                      <strong>{{ team.name }}</strong>
+                    <strong>{{ team.name }}</strong>
-                      <div v-if="team.description" class="small text-muted mt-1">{{ team.description }}</div>
+                    <div v-if="team.description" class="small text-muted mt-1">{{ team.description }}</div>
-                    </td>
+                  </td>
-                    <td>{{ team.category_name || '-' }}</td>
+                  <td>{{ team.category_name || '-' }}</td>
-                    <td>{{ team.area_name || 'Tutte' }}</td>
+                  <td>{{ team.area_name || 'Tutte' }}</td>
-                    <td>
+                  <td>
                       <span class="badge" :class="team.active === false ? 'bg-secondary' : 'bg-success'">
                         {{ team.active === false ? 'Inattivo' : 'Attivo' }}
                       </span>
-                    </td>
+                  </td>
-                  </tr>
+                  <td class="text-end">
-                  <tr v-if="teams.length === 0">
+                    <div class="d-flex justify-content-end gap-2">
-                    <td colspan="5" class="text-muted">Nessun team configurato.</td>
+                      <button class="btn btn-outline-primary btn-icon" title="Modifica" @click="editTeam(team)">
-                  </tr>
+                        <Icon name="lucide:pencil" size="16"/>
+                      </button>
+                      <button
+                          :class="team.active === false ? 'btn-outline-success' : 'btn-outline-secondary'"
+                          :title="team.active === false ? 'Attiva' : 'Disattiva'"
+                          class="btn btn-icon"
+                          @click="toggleTeamActive(team)"
+                      >
+                        <Icon :name="team.active === false ? 'lucide:check-circle' : 'lucide:ban'" size="16"/>
+                      </button>
+                      <button
+                          :disabled="deletingTeamId === team.id"
+                          class="btn btn-outline-danger btn-icon"
+                          title="Elimina"
+                          @click="askDeleteTeam(team)"
+                      >
+                        <span v-if="deletingTeamId === team.id" class="spinner-border spinner-icon"></span>
+                        <Icon v-else name="lucide:trash-2" size="16"/>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="teams.length === 0">
+                  <td class="text-muted text-center py-4" colspan="6">Nessun team configurato.</td>
+                </tr>
                 </tbody>
               </table>
             </div>
@@ -232,5 +433,45 @@ const submitTeam = async () => {
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+        :message="categoryDeleteMessage"
+        :open="categoryPendingDelete !== null"
+        :pending="deletingCategoryId !== null"
+        confirm-class="btn-danger"
+        confirm-label="Elimina categoria"
+        title="Elimina categoria"
+        @cancel="closeDeleteCategoryModal"
+        @confirm="handleDeleteCategory"
+    />
+
+    <ConfirmModal
+        :message="teamDeleteMessage"
+        :open="teamPendingDelete !== null"
+        :pending="deletingTeamId !== null"
+        confirm-class="btn-danger"
+        confirm-label="Elimina team"
+        title="Elimina team"
+        @cancel="closeDeleteTeamModal"
+        @confirm="handleDeleteTeam"
+    />
   </div>
 </template>
+
+<style scoped>
+.btn-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.spinner-icon {
+  width: 14px;
+  height: 14px;
+  border-width: 2px;
+}
+</style>

app/pages/admin/moderation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { reactive, ref } from 'vue'
 
 definePageMeta({
   middleware: 'auth',
@@ -13,43 +13,90 @@ const { getModerationFlags, updateModerationFlag } = useAdmin()
 const page = ref(1)
 const perPage = ref(10)
 const statusFilter = ref('')
+const actionError = ref('')
+const resolveModal = reactive({
+  open: false,
+  flagId: null as number | null,
+  rejectReport: false,
+  note: '',
+  pending: false,
+})
+const dismissModal = reactive({
+  open: false,
+  flagId: null as number | null,
+  pending: false,
+})
 
 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 handleResolve = async (id: number, rejectReport: boolean) => {
+const openResolveModal = (id: number, rejectReport: boolean) => {
-  const note = prompt('Inserisci una nota di risoluzione (opzionale):')
+  resolveModal.open = true
-  if (note === null) return // cancelled
+  resolveModal.flagId = id
+  resolveModal.rejectReport = rejectReport
+  resolveModal.note = ''
+}
+
+const closeResolveModal = () => {
+  if (resolveModal.pending) return
+  resolveModal.open = false
+  resolveModal.flagId = null
+  resolveModal.note = ''
+}
+
+const handleResolve = async () => {
+  if (!resolveModal.flagId) return
+
+  resolveModal.pending = true
+  actionError.value = ''
 
   try {
-    const res = await updateModerationFlag(id, { 
+    await updateModerationFlag(resolveModal.flagId, {
       status: 'RESOLVED',
-      reject_report: rejectReport,
+      reject_report: resolveModal.rejectReport,
-      resolution_note: note
+      resolution_note: resolveModal.note || undefined
     })
-    if (res.ok) {
+
-      await refresh()
+    await refresh()
-    }
+    closeResolveModal()
   } catch (err) {
     console.error('Failed to resolve flag', err)
-    alert('Errore durante la risoluzione della segnalazione.')
+    actionError.value = 'Errore durante la risoluzione della segnalazione.'
+  } finally {
+    resolveModal.pending = false
   }
 }
 
-const handleDismiss = async (id: number) => {
+const openDismissModal = (id: number) => {
-  if (!confirm('Sei sicuro di voler ignorare (dismiss) questo flag?')) return
+  dismissModal.open = true
+  dismissModal.flagId = id
+}
+
+const closeDismissModal = () => {
+  if (dismissModal.pending) return
+  dismissModal.open = false
+  dismissModal.flagId = null
+}
+
+const handleDismiss = async () => {
+  if (!dismissModal.flagId) return
+
+  dismissModal.pending = true
+  actionError.value = ''
 
   try {
-    const res = await updateModerationFlag(id, { status: 'DISMISSED' })
+    await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
-    if (res.ok) {
+
-      await refresh()
+    await refresh()
-    }
+    closeDismissModal()
   } catch (err) {
     console.error('Failed to dismiss flag', err)
-    alert('Errore durante l\'aggiornamento.')
+    actionError.value = 'Errore durante l\'aggiornamento.'
+  } finally {
+    dismissModal.pending = false
   }
 }
 
@@ -80,17 +127,26 @@ 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-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> -
             <span class="badge" :class="{
@@ -109,7 +165,7 @@ const formatDate = (dateStr: string) => {
                 {{ 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: 
@@ -122,7 +178,7 @@ const formatDate = (dateStr: string) => {
                 </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>
 
@@ -134,13 +190,13 @@ const formatDate = (dateStr: string) => {
 
             <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="handleResolve(flag.id, true)">
+                <button class="btn btn-outline-danger btn-sm" @click="openResolveModal(flag.id, true)">
                   <BIIcon name="it-ban" size="xs" /> Risolvi & Rigetta Segn.
                 </button>
-                <button class="btn btn-outline-warning btn-sm" @click="handleResolve(flag.id, false)">
+                <button class="btn btn-outline-warning btn-sm" @click="openResolveModal(flag.id, false)">
                   <BIIcon name="it-check" size="xs" /> Risolvi (Solo Avviso)
                 </button>
-                <button class="btn btn-outline-secondary btn-sm" @click="handleDismiss(flag.id)">
+                <button class="btn btn-outline-secondary btn-sm" @click="openDismissModal(flag.id)">
                   <BIIcon name="it-close" size="xs" /> Ignora Flag
                 </button>
               </div>
@@ -150,12 +206,78 @@ const formatDate = (dateStr: string) => {
       </div>
 
       <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>
+
+    <div v-if="resolveModal.open" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div v-if="resolveModal.open" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ resolveModal.rejectReport ? 'Risolvi e rigetta segnalazione' : 'Risolvi flag' }}</h5>
+            <button type="button" class="btn-close" :disabled="resolveModal.pending" @click="closeResolveModal"></button>
+          </div>
+          <div class="modal-body">
+            <label class="form-label">Nota di risoluzione</label>
+            <textarea v-model="resolveModal.note" class="form-control" rows="4" placeholder="Nota opzionale"></textarea>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-outline-secondary" :disabled="resolveModal.pending" @click="closeResolveModal">Annulla</button>
+            <button type="button" class="btn btn-primary" :disabled="resolveModal.pending" @click="handleResolve">
+              <span v-if="resolveModal.pending" class="spinner-border spinner-border-sm me-2"></span>
+              Conferma
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ConfirmModal
+        :open="dismissModal.open"
+        title="Ignora flag"
+        message="Vuoi ignorare questo flag? Azione registrata in moderazione."
+        confirm-label="Ignora flag"
+        confirm-class="btn-outline-secondary"
+        :pending="dismissModal.pending"
+        @cancel="closeDismissModal"
+        @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

@@ -13,7 +13,18 @@ const { getUsers, updateUserBan, updateUserRoles } = useAdmin()
 const { data: usersRes, pending, refresh } = useAsyncData('admin-users', () => getUsers())
 
 const search = ref('')
-const parseRoles = (roles?: string) => roles ? roles.split(',').map((r) => r.trim().toUpperCase()).filter(Boolean) : []
+const banError = ref('')
+const roleError = ref('')
+const pendingBanUser = ref<any | null>(null)
+const isUpdatingBan = ref(false)
+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}?`
+    : ''
+)
+const banConfirmLabel = computed(() => pendingBanUser.value?.banned ? 'Sblocca utente' : 'Banna utente')
+const banConfirmClass = computed(() => pendingBanUser.value?.banned ? 'btn-success' : 'btn-danger')
 
 const filteredUsers = computed(() => {
   if (!usersRes.value?.users) return []
@@ -27,21 +38,36 @@ const filteredUsers = computed(() => {
   )
 })
 
-const handleToggleBan = async (id: number, currentBanStatus: boolean) => {
+const askToggleBan = (user: any) => {
-  if (!confirm(`Sei sicuro di voler ${currentBanStatus ? 'sbloccare' : 'bannare'} questo utente?`)) return
+  pendingBanUser.value = user
+}
+
+const closeBanModal = () => {
+  if (isUpdatingBan.value) return
+  pendingBanUser.value = null
+}
+
+const handleToggleBan = async () => {
+  if (!pendingBanUser.value) return
+
+  const user = pendingBanUser.value
+  isUpdatingBan.value = true
+  banError.value = ''
 
   try {
-    const res = await updateUserBan(id, { banned: !currentBanStatus })
+    const res = await updateUserBan(user.id, { banned: !user.banned })
     if (res.ok) {
       await refresh()
+      pendingBanUser.value = null
     }
   } catch (err) {
     console.error('Failed to update user ban status', err)
-    alert('Errore durante l\'aggiornamento dello stato di ban.')
+    banError.value = 'Errore durante l\'aggiornamento dello stato di ban.'
+  } finally {
+    isUpdatingBan.value = false
   }
 }
 
-// Modal per i ruoli
 const editingUserId = ref<number | null>(null)
 const selectedRoles = ref<string[]>([])
 const availableRoles = ['CITIZEN', 'OPERATOR', 'ADMIN']
@@ -59,6 +85,7 @@ const closeRoleModal = () => {
 const saveRoles = async () => {
   if (!editingUserId.value) return
 
+  roleError.value = ''
   try {
     const res = await updateUserRoles(editingUserId.value, { roles: selectedRoles.value })
     if (res.ok) {
@@ -67,7 +94,7 @@ const saveRoles = async () => {
     }
   } catch (err) {
     console.error('Failed to update roles', err)
-    alert('Errore durante l\'aggiornamento dei ruoli.')
+    roleError.value = 'Errore durante l\'aggiornamento dei ruoli.'
   }
 }
 </script>
@@ -95,6 +122,14 @@ const saveRoles = async () => {
       Nessun utente trovato.
     </div>
 
+    <div v-if="banError" class="alert alert-danger">
+      {{ banError }}
+    </div>
+
+    <div v-if="roleError" class="alert alert-danger">
+      {{ roleError }}
+    </div>
+
     <div v-else class="table-responsive">
       <table class="table table-hover align-middle">
         <thead>
@@ -138,7 +173,7 @@ const saveRoles = async () => {
               <button 
                 class="btn btn-sm"
                 :class="user.banned ? 'btn-outline-success' : 'btn-outline-danger'"
-                @click="handleToggleBan(user.id, !!user.banned)"
+                @click="askToggleBan(user)"
               >
                 {{ user.banned ? 'Sblocca' : 'Banna' }}
               </button>
@@ -177,5 +212,16 @@ const saveRoles = async () => {
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+      :open="pendingBanUser !== null"
+      title="Conferma stato utente"
+      :message="banConfirmMessage"
+      :confirm-label="banConfirmLabel"
+      :confirm-class="banConfirmClass"
+      :pending="isUpdatingBan"
+      @cancel="closeBanModal"
+      @confirm="handleToggleBan"
+    />
   </div>
 </template>

app/pages/auth/change-password.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  middleware: 'auth'
-})
-
-useHead({ title: 'Cambio Password - Visione' })
-
-const { changePassword, user, syncUser } = useAuth()
-const router = useRouter()
-
-const formData = reactive({
-  current_password: '',
-  new_password: '',
-  confirm_password: ''
-})
-
-const isLoading = ref(false)
-const errorMessage = ref('')
-
-const showCurrent = ref(false)
-const showNew = ref(false)
-const showConfirm = ref(false)
-
-const canSubmit = computed(() => {
-  return (
-      formData.current_password.length > 0 &&
-      formData.new_password.length >= 8 &&
-      formData.new_password === formData.confirm_password
-  )
-})
-
-const handleSubmit = async () => {
-  if (!canSubmit.value) return
-
-  isLoading.value = true
-  errorMessage.value = ''
-
-  try {
-    const res = await changePassword({
-      current_password: formData.current_password,
-      new_password: formData.new_password
-    })
-
-    if (res.ok) {
-      await syncUser()
-      await router.push('/profile')
-    }
-  } catch (error: any) {
-    errorMessage.value = error.data?.message || 'Errore. Verifica la password attuale.'
-  } finally {
-    isLoading.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="py-5">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-12 col-lg-8 col-xl-6">
-          <div v-if="user?.must_change_password" class="callout callout-highlight callout-warning mb-4">
-            <div class="callout-title d-flex align-items-center">
-              <BIIcon name="it-warning-circle" size="sm" color="warning" class="me-2" />
-              Azione richiesta
-            </div>
-            <p class="mb-0">Per motivi di sicurezza, imposta una nuova password per il tuo account.</p>
-          </div>
-
-          <div class="card card-bg border-0 shadow-sm">
-            <div class="card-body p-4 p-lg-5">
-              <h1 class="h3 mb-3">Cambia password</h1>
-              <p class="text-muted mb-4">
-                Aggiorna credenziali prima di continuare. Password nuova deve essere diversa da quella attuale.
-              </p>
-
-              <form @submit.prevent="handleSubmit" class="d-grid gap-4">
-                <div class="password-field">
-                  <label for="current_password" class="form-label">Password attuale</label>
-                  <div class="password-field-control">
-                    <BIIcon name="it-lock" size="sm" class="password-field-icon" />
-                    <input
-                      id="current_password"
-                      v-model="formData.current_password"
-                      :type="showCurrent ? 'text' : 'password'"
-                      class="form-control"
-                      autocomplete="current-password"
-                    >
-                    <button
-                      type="button"
-                      class="btn btn-password-toggle"
-                      :aria-label="showCurrent ? 'Nascondi password attuale' : 'Mostra password attuale'"
-                      @click="showCurrent = !showCurrent"
-                    >
-                      <BIIcon :name="showCurrent ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
-                    </button>
-                  </div>
-                </div>
-
-                <div class="password-field">
-                  <label for="new_password" class="form-label">Nuova password</label>
-                  <div class="password-field-control">
-                    <BIIcon name="it-lock" size="sm" class="password-field-icon" />
-                    <input
-                      id="new_password"
-                      v-model="formData.new_password"
-                      :type="showNew ? 'text' : 'password'"
-                      class="form-control"
-                      autocomplete="new-password"
-                    >
-                    <button
-                      type="button"
-                      class="btn btn-password-toggle"
-                      :aria-label="showNew ? 'Nascondi nuova password' : 'Mostra nuova password'"
-                      @click="showNew = !showNew"
-                    >
-                      <BIIcon :name="showNew ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
-                    </button>
-                  </div>
-                  <div class="form-text">Minimo 8 caratteri.</div>
-                </div>
-
-                <div class="password-field">
-                  <label for="confirm_password" class="form-label">Conferma nuova password</label>
-                  <div class="password-field-control">
-                    <BIIcon name="it-lock" size="sm" class="password-field-icon" />
-                    <input
-                      id="confirm_password"
-                      v-model="formData.confirm_password"
-                      :type="showConfirm ? 'text' : 'password'"
-                      :class="{ 'is-invalid': formData.confirm_password && formData.confirm_password !== formData.new_password }"
-                      class="form-control"
-                      autocomplete="new-password"
-                    >
-                    <button
-                      type="button"
-                      class="btn btn-password-toggle"
-                      :aria-label="showConfirm ? 'Nascondi conferma password' : 'Mostra conferma password'"
-                      @click="showConfirm = !showConfirm"
-                    >
-                      <BIIcon :name="showConfirm ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
-                    </button>
-                  </div>
-                </div>
-
-                <div v-if="errorMessage" class="alert alert-danger mb-0" role="alert">
-                  {{ errorMessage }}
-                </div>
-
-                <button
-                  type="submit"
-                  class="btn btn-primary w-100 py-2"
-                  :disabled="!canSubmit || isLoading"
-                >
-                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
-                  {{ isLoading ? 'Aggiornamento in corso' : 'Aggiorna password' }}
-                </button>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.password-field {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.password-field-control {
-  align-items: center;
-  background: #fff;
-  border: 1px solid #c5d0db;
-  border-radius: 8px;
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  padding-left: 0.875rem;
-}
-
-.password-field-control:focus-within {
-  border-color: #06c;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.16);
-}
-
-.password-field-icon {
-  color: #5c6f82;
-}
-
-.password-field-control .form-control {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  min-width: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.btn-password-toggle {
-  align-items: center;
-  color: #06c;
-  display: inline-flex;
-  height: 100%;
-  justify-content: center;
-  min-height: 3rem;
-  padding: 0 0.875rem;
-}
-
-.btn-password-toggle:hover,
-.btn-password-toggle:focus {
-  background: rgba(0, 102, 204, 0.08);
-  color: #06c;
-}
-</style>

app/pages/auth/cie/callback.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+definePageMeta({
+  middleware: 'guest'
+})
+
+useHead({ title: 'Accesso CIE - Visione' })
+
+const route = useRoute()
+const router = useRouter()
+const { fetchCieSession, handleLoginSuccess } = useAuth()
+
+const state = computed(() => {
+  const value = route.query.state
+  return typeof value === 'string' ? value : ''
+})
+
+const isLoading = ref(true)
+const errorMessage = ref('')
+const statusMessage = ref('Verifica dell’autenticazione CIE in corso...')
+
+let pollTimer: ReturnType<typeof setTimeout> | null = null
+let attempts = 0
+const maxAttempts = 30
+
+const stopPolling = () => {
+  if (pollTimer) {
+    clearTimeout(pollTimer)
+    pollTimer = null
+  }
+}
+
+const scheduleNextPoll = () => {
+  pollTimer = setTimeout(checkSession, 2000)
+}
+
+const checkSession = async () => {
+  if (!state.value) {
+    isLoading.value = false
+    errorMessage.value = 'Sessione CIE non valida: parametro state mancante.'
+    return
+  }
+
+  attempts += 1
+
+  try {
+    const res = await fetchCieSession(state.value)
+
+    if (res.status === 'authenticated' && res.auth?.token) {
+      stopPolling()
+      await handleLoginSuccess(res.auth.token)
+      return
+    }
+
+    if (['failed', 'expired', 'cancelled', 'error'].includes(res.status)) {
+      stopPolling()
+      isLoading.value = false
+      errorMessage.value = 'Autenticazione CIE non completata. Riprova dal login.'
+      return
+    }
+
+    if (attempts >= maxAttempts) {
+      stopPolling()
+      isLoading.value = false
+      errorMessage.value = 'Tempo di attesa scaduto durante la verifica CIE. Riprova.'
+      return
+    }
+
+    statusMessage.value = 'Autenticazione completata sul provider. Attendo conferma finale da Visione...'
+    scheduleNextPoll()
+  } catch (err: any) {
+    stopPolling()
+    isLoading.value = false
+    errorMessage.value = err.data?.message || 'Errore durante la verifica della sessione CIE.'
+  }
+}
+
+onMounted(() => {
+  checkSession()
+})
+
+onBeforeUnmount(() => {
+  stopPolling()
+})
+</script>
+
+<template>
+  <div class="d-flex align-items-center bg-light py-5">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-12 col-md-8 col-lg-6">
+          <div class="card card-bg shadow-sm">
+            <div class="card-body p-4 p-md-5 text-center">
+              <BIIcon name="it-card" size="xl" color="primary" class="mb-3" />
+              <h1 class="h3 font-weight-bold mb-3">Accesso con CIE</h1>
+
+              <div v-if="isLoading" class="py-3">
+                <div class="spinner-border text-primary mb-3" role="status">
+                  <span class="visually-hidden">Caricamento...</span>
+                </div>
+                <p class="text-muted mb-0">{{ statusMessage }}</p>
+              </div>
+
+              <div v-else-if="errorMessage" class="py-2">
+                <div class="alert alert-danger text-start mb-4" role="alert">
+                  {{ errorMessage }}
+                </div>
+                <button class="btn btn-primary" @click="router.push('/auth/login')">
+                  Torna al login
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/auth/login.vue

@@ -7,20 +7,18 @@ definePageMeta({
 
 useHead({ title: 'Accedi - Visione' })
 
-const { requestOtp, verifyOtp, loginWithPassword, handleLoginSuccess } = useAuth()
+const runtimeConfig = useRuntimeConfig()
-const router = useRouter()
+const { requestOtp, verifyOtp, handleLoginSuccess, startCieLogin } = useAuth()
 
-// UI State
-const loginMethod = ref<'otp' | 'password'>('otp')
 const otpStep = ref<1 | 2>(1)
 const isLoading = ref(false)
+const isCieLoading = ref(false)
 const errorMessage = ref('')
 
-
 const email = ref('')
-const password = ref('')
 const otpCode = ref('')
-const showPassword = ref(false)
+
+const cieCallbackUrl = `${runtimeConfig.public.url}/auth/cie/callback`
 
 const handleRequestOtp = async () => {
   isLoading.value = true
@@ -48,16 +46,18 @@ const handleVerifyOtp = async () => {
   }
 }
 
-const handlePasswordLogin = async () => {
+const handleCieLogin = async () => {
-  isLoading.value = true
+  isCieLoading.value = true
   errorMessage.value = ''
   try {
-    const res = await loginWithPassword({ email: email.value, password: password.value })
+    const res = await startCieLogin(cieCallbackUrl)
-    await handleLoginSuccess(res.token)
+    await navigateTo(res.authorization_url, {
+      external: true,
+      replace: true,
+    })
   } catch (err: any) {
-    errorMessage.value = 'Credenziali non valide.'
+    errorMessage.value = err.data?.message || 'Avvio autenticazione CIE non riuscito. Riprova.'
-  } finally {
+    isCieLoading.value = false
-    isLoading.value = false
   }
 }
 </script>
@@ -79,9 +79,13 @@ const handlePasswordLogin = async () => {
             <div class="card-body p-4 p-md-5">
 
               
-              <button class="btn btn-primary w-100 mb-4 d-flex align-items-center justify-content-center gap-2" disabled title="Integrazione CIE prevista per la fase successiva">
+              <button
-                <BIIcon name="it-card" size="sm" color="white" />
+                  class="btn btn-primary w-100 mb-4 d-flex align-items-center justify-content-center gap-2 entraconcie"
-                Entra con CIE (Presto disponibile)
+                :disabled="isCieLoading || isLoading"
+                @click="handleCieLogin"
+              >
+                <span v-if="isCieLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                &#8203;
               </button>
 
               <div class="d-flex align-items-center my-4">
@@ -94,73 +98,33 @@ const handlePasswordLogin = async () => {
                 {{ errorMessage }}
               </div>
 
-              
+              <form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
-              <div v-if="loginMethod === 'otp'">
-                <form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
-                  <div class="form-group mb-4">
-                    <input type="email" class="form-control" id="email" v-model="email" required>
-                    <label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
-                  </div>
-                  <button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
-                    <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
-                    Ricevi codice OTP
-                  </button>
-                </form>
-
-                <form v-else @submit.prevent="handleVerifyOtp">
-                  <div class="alert alert-success mb-4 small">
-                    Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
-                  </div>
-                  <div class="form-group mb-4">
-                    <input type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
-                    <label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
-                  </div>
-                  <button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
-                    <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
-                    Verifica e Accedi
-                  </button>
-                  <div class="text-center">
-                    <a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
-                  </div>
-                </form>
-              </div>
-
-              
-              <form v-else @submit.prevent="handlePasswordLogin">
                 <div class="form-group mb-4">
-                  <input type="email" class="form-control" id="emailPwd" v-model="email" required>
+                  <input type="email" class="form-control" id="email" v-model="email" required>
-                  <label for="emailPwd" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
+                  <label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
                 </div>
-
+                <button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
-               
-                <div class="form-group mb-4 position-relative">
-                  <input :type="showPassword ? 'text' : 'password'" class="form-control pe-5" id="password" v-model="password" required>
-                  <label for="password" :class="{ 'active': password.length > 0 }">Password</label>
-
-                  <button
-                      type="button"
-                      class="btn bg-transparent border-0 shadow-none position-absolute p-2"
-                      style="right: 0; top: 2px; z-index: 10;"
-                      @click="showPassword = !showPassword"
-                      :aria-pressed="showPassword"
-                      aria-label="Mostra/Nascondi password"
-                  >
-                    <BIIcon :name="showPassword ? 'it-password-visible' : 'it-password-invisible'" color="primary" size="sm" />
-                  </button>
-                </div>
-
-                <button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
                   <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
-                  Accedi
+                  Entra
                 </button>
               </form>
 
-              
+              <form v-else @submit.prevent="handleVerifyOtp">
-              <div class="text-center mt-4">
+                <div class="alert alert-success mb-4 small">
-                <a href="#" class="small text-decoration-none" @click.prevent="loginMethod = loginMethod === 'otp' ? 'password' : 'otp'; errorMessage = ''">
+                  Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
-                  {{ loginMethod === 'otp' ? 'Vuoi usare la password? Clicca qui' : 'Usa il login sicuro senza password (OTP)' }}
+                </div>
-                </a>
+                <div class="form-group mb-4">
-              </div>
+                  <input type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
+                  <label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
+                </div>
+                <button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
+                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
+                  Verifica e Accedi
+                </button>
+                <div class="text-center">
+                  <a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
+                </div>
+              </form>
 
             </div>
           </div>
@@ -182,4 +146,11 @@ const handlePasswordLogin = async () => {
 .pe-5 {
   padding-right: 3rem !important;
 }
+
+button.entraconcie {
+  background-image: url('/entraconcie.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100%;
+}
 </style>

app/pages/auth/register.vue

@@ -14,14 +14,12 @@ const router = useRouter()
 const isLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref(false)
-const showPassword = ref(false)
 
 const form = ref({
   first_name: '',
   last_name: '',
   fiscal_code: '',
   email: '',
-  password: '',
   phone: '',
   privacy: false
 })
@@ -56,7 +54,6 @@ const handleRegister = async () => {
       last_name: form.value.last_name,
       fiscal_code: fiscalCode,
       email: form.value.email,
-      password: form.value.password,
       phone: form.value.phone || undefined
     })
 
@@ -89,7 +86,7 @@ const handleRegister = async () => {
             <div class="card-body p-4 p-md-5">
 
               <div v-if="successMessage" class="alert alert-success" role="alert">
-                Registrazione completata con successo! Reindirizzamento al login...
+                Registrazione completata con successo! Reindirizzamento all'accesso con OTP...
               </div>
 
               <div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
@@ -100,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">
@@ -122,33 +118,15 @@ const handleRegister = async () => {
                   <small class="form-text text-muted">Sarà utilizzato come identificativo univoco nel sistema PA.</small>
                 </div>
 
-                <h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Credenziali e Contatti</h2>
+                <h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Contatti</h2>
 
                 <div class="row mb-4">
-                  <div class="col-12 col-md-6 mb-4 mb-md-0">
+                  <div class="col-12">
-                    <div class="form-group">
+                    <div class="form-group position-relative">
                       <input type="email" class="form-control" id="regEmail" v-model="form.email" required>
                       <label for="regEmail" :class="{ 'active': form.email.length > 0 }">Indirizzo Email</label>
                     </div>
                   </div>
-                  <div class="col-12 col-md-6">
-                    <!-- INPUT PASSWORD FIXATO -->
-                    <div class="form-group position-relative">
-                      <input :type="showPassword ? 'text' : 'password'" class="form-control pe-5" id="regPwd" v-model="form.password" required minlength="10">
-                      <label for="regPwd" :class="{ 'active': form.password.length > 0 }">Password (min. 10 crt)</label>
-
-                      <button
-                          type="button"
-                          class="btn bg-transparent border-0 shadow-none position-absolute p-2"
-                          style="right: 0; top: 2px; z-index: 10;"
-                          @click="showPassword = !showPassword"
-                          :aria-pressed="showPassword"
-                          aria-label="Mostra/Nascondi password"
-                      >
-                        <BIIcon :name="showPassword ? 'it-password-visible' : 'it-password-invisible'" color="primary" size="sm" />
-                      </button>
-                    </div>
-                  </div>
                 </div>
 
                 <div class="form-group mb-5">
@@ -157,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">
@@ -169,6 +146,9 @@ const handleRegister = async () => {
                   <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
                   Registra Profilo
                 </button>
+                <p class="small text-muted mt-3 mb-0">
+                  Dopo la registrazione potrai accedere usando OTP via email o CIE, quando disponibile.
+                </p>
               </form>
 
             </div>
@@ -185,8 +165,4 @@ const handleRegister = async () => {
 </template>
 
 <style scoped>
-/* Previene che il testo finisca sotto l'icona */
-.pe-5 {
-  padding-right: 3rem !important;
-}
 </style>

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/index.vue

@@ -3,6 +3,8 @@ import BIIcon from "~/components/BIIcon.vue";
 
 const { getOpenDataReports } = usePublic()
 
+const { user } = useAuth();
+
 const stats = {
   total_reports: 14523,
   resolved_reports: 13890,
@@ -12,6 +14,17 @@ const stats = {
 const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     getOpenDataReports({ page: 1, per_page: 3 })
 )
+
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case 'RESOLVED':
+      return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
+    case 'CLOSED':
+      return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+    default:
+      return { class: 'bg-info', text: status, icon: 'it-info-circle' }
+  }
+}
 </script>
 
 <template>
@@ -27,7 +40,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
                 e monitora l'intervento in totale trasparenza.
               </p>
               <div class="it-btn-container d-flex justify-content-center gap-3">
-                <NuxtLink class="btn btn-primary" to="/auth/login">
+                <NuxtLink v-if="!user || isCitizen(user.role)" class="btn btn-primary" to="/auth/login">
                   Fai una segnalazione
                 </NuxtLink>
                 <NuxtLink class="btn btn-outline-primary" to="/open-data">
@@ -45,7 +58,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
       <div class="row text-center">
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
-            <BIIcon name="it-camera" size="xl" color="primary" />
+            <BIIcon color="primary" name="it-camera" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">1. Segnala</h3>
           <p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
@@ -53,14 +66,14 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
         </div>
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
-            <BIIcon name="it-tool" size="xl" color="primary" />
+            <BIIcon color="primary" name="it-tool" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">2. Intervento</h3>
           <p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
         </div>
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
-            <BIIcon name="it-star-outline" size="xl" color="primary" />
+            <BIIcon color="primary" name="it-star-outline" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
           <p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
@@ -96,31 +109,47 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
         <h2 class="font-weight-bold">Ultimi interventi risolti</h2>
         <NuxtLink to="/open-data" class="read-more">
           <span class="text">Vedi tutti</span>
-          <BIIcon name="it-arrow-right" />
+          <BIIcon name="it-arrow-right"/>
         </NuxtLink>
       </div>
 
       <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
         <div class="col-12 col-md-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
-          <div class="card-wrapper card-space">
+          <div class="card-wrapper card-space h-100">
-            <div class="card card-bg card-big">
+            <div class="card card-bg h-100 shadow-sm">
-              <div class="card-body">
+              <div class="card-body d-flex flex-column">
-                <div class="category-top">
-                  <BIIcon name="it-check-circle" size="sm" color="success" />
-                  <span class="category text-success font-weight-semibold">Risolto</span>
-                </div>
-                <h3 class="card-title h5 mt-2">{{ report.category_name }}</h3>
 
-                <p class="card-text text-muted">
+                <div class="d-flex justify-content-between align-items-start mb-3">
-                  <span class="me-1"><BIIcon name="it-map-marker-circle" size="xs" /></span>
+                  <div class="category-top m-0">
-                  {{ report.area_name || 'Area comunale' }}
+                    <span :class="getStatusBadge(report.status).class"
+                          class="badge rounded-pill text-white px-3 py-1">
+                      <BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
+                      {{ getStatusBadge(report.status).text }}
+                    </span>
+                  </div>
+                  <span class="text-muted small">ID: #{{ report.id }}</span>
+                </div>
+
+                <h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
+
+                <p class="card-text text-muted mb-4">
+                  <BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
+                  {{ report.area_name || 'Area comunale non specificata' }}
                 </p>
 
-                <div class="it-card-footer mt-4">
+                <div class="mt-auto pt-3 border-top">
-                  <span class="card-signature">
+                  <div class="row text-muted small">
-                    Aggiornato il {{ new Date(report.updated_at).toLocaleDateString('it-IT') }}
+                    <div class="col-6">
-                  </span>
+                      <div class="fw-bold text-uppercase">Segnalato</div>
+                      <div>{{ new Date(report.created_at).toLocaleDateString('it-IT') }}</div>
+                    </div>
+                    <div class="col-6 text-end">
+                      <div class="fw-bold text-uppercase">Risolto</div>
+                      <div>{{ new Date(report.updated_at).toLocaleDateString('it-IT') }}</div>
+                    </div>
+                  </div>
                 </div>
+
               </div>
             </div>
           </div>
@@ -135,7 +164,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     <div class="container my-5 pb-5">
       <div class="callout callout-highlight callout-primary">
         <div class="callout-title">
-          <BIIcon name="it-info-circle" />
+          <BIIcon name="it-info-circle"/>
           Partecipa alla cura della tua città
         </div>
         <p>
@@ -150,3 +179,19 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     </div>
   </div>
 </template>
+
+<style scoped>
+.card-wrapper {
+  height: 100%;
+}
+
+.card-bg {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-bg:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+}
+</style>

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> Login Passwordless (OTP nativo) e sistema di autorizzazione Role-Based basato su token JWT.
+              <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,27 +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'
 
-// 1. API Fetching Logic
 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))
+    (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
@@ -34,19 +29,20 @@ const prevPage = () => {
   if (currentPage.value > 1) currentPage.value--
 }
 
-// 2. View Toggle (Grid vs Map)
 const currentView = ref<'grid' | 'map'>('grid')
 const mapContainer = ref<HTMLElement | null>(null)
 let leaflet: typeof import('leaflet') | null = null
 let map: LeafletMap | null = null
 let markers: CircleMarker[] = []
 
-// 3. Helper to style status badges
 const getStatusBadge = (status: string) => {
   switch (status) {
-    case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
+    case 'RESOLVED':
-    case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+      return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
-    default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
+    case 'CLOSED':
+      return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+    default:
+      return { class: 'bg-info', text: status, icon: 'it-info-circle' }
   }
 }
 
@@ -106,8 +102,8 @@ const initMap = async () => {
 
   const L = await loadLeaflet()
   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(mapContainer.value, {
@@ -126,9 +122,12 @@ const initMap = async () => {
 watch(currentView, async (view) => {
   if (view !== 'map') return
   await nextTick()
-  await initMap()
+  if (!map) {
-  map?.invalidateSize()
+    await initMap()
-  await renderMapMarkers()
+  } else {
+    map.invalidateSize()
+    await renderMapMarkers()
+  }
 })
 
 watch(visibleReports, async () => {
@@ -146,7 +145,6 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <!-- HERO SECTION (Small version for internal pages) -->
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
@@ -162,19 +160,15 @@ 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'"
               @click="currentView = 'grid'"
           >
-            <BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
+            <BIIcon :color="currentView === 'grid' ? 'white' : 'primary'" class="me-1" name="it-grid" size="sm"/>
             Griglia Dati
           </button>
           <button
@@ -182,39 +176,37 @@ onBeforeUnmount(() => {
               :class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
               @click="currentView = 'map'"
           >
-            <BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
+            <BIIcon :color="currentView === 'map' ? 'white' : 'primary'" class="me-1" name="it-map-marker" size="sm"/>
             Mappa
           </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" />
+            <BIIcon class="me-1" name="it-download" size="sm"/>
             Scarica JSON
           </button>
         </div>
       </div>
 
-      <!-- LOADER -->
+      <!-- Sostituito v-else-if con v-show -->
       <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-show="!pending && currentView === 'grid'">
-      <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">
 
                   <div class="d-flex justify-content-between align-items-start mb-3">
                     <div class="category-top m-0">
-                      <span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
+                      <span :class="getStatusBadge(report.status).class"
-                        <BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
+                            class="badge rounded-pill text-white px-3 py-1">
+                        <BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
                         {{ getStatusBadge(report.status).text }}
                       </span>
                     </div>
@@ -224,7 +216,7 @@ onBeforeUnmount(() => {
                   <h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
 
                   <p class="card-text text-muted mb-4">
-                    <BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
+                    <BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
                     {{ report.area_name || 'Area comunale non specificata' }}
                   </p>
 
@@ -251,12 +243,11 @@ 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 }">
               <a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
-                <BIIcon name="it-chevron-left" size="sm" />
+                <BIIcon name="it-chevron-left" size="sm"/>
                 <span class="visually-hidden">Pagina precedente</span>
               </a>
             </li>
@@ -266,15 +257,14 @@ onBeforeUnmount(() => {
             <li class="page-item" :class="{ disabled: isLastPage }">
               <a class="page-link" href="#" @click.prevent="nextPage">
                 <span class="visually-hidden">Pagina successiva</span>
-                <BIIcon name="it-chevron-right" size="sm" />
+                <BIIcon name="it-chevron-right" size="sm"/>
               </a>
             </li>
           </ul>
         </nav>
       </div>
 
-      <!-- MAP VIEW -->
+      <div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
-      <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>
           <span class="badge bg-light text-dark border">{{ visibleReports.length }} punti</span>
@@ -289,17 +279,18 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* Ensures the cards inside the grid stretch to equal heights */
 .card-wrapper {
   height: 100%;
 }
+
 .card-bg {
-  border: 1px solid rgba(0,0,0,0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
+
 .card-bg:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
 }
 
 .open-data-map {

app/pages/operator/assigned.vue

@@ -45,10 +45,10 @@ const { data: reportsRes, pending } = useAsyncData(
       />
 
       <Pagination
-        v-if="reportsRes.total > perPage"
+          v-if="(reportsRes.total || 0) > perPage"
         :current-page="page"
         :per-page="perPage"
-        :total-items="reportsRes.total"
+          :total-items="reportsRes.total!"
         @page-change="page = $event"
       />
     </div>

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

@@ -17,10 +17,9 @@ if (!reportId) {
 }
 
 const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
-const { getInterventionSummary, updateReportStatus, assignTeam, getTeams } = useOperator()
+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))
@@ -33,6 +32,7 @@ const messages = computed(() => (messagesData.value as any)?.messages || [])
 const summary = computed(() => (summaryData.value as any)?.summary)
 const summaryMedia = computed(() => (summaryData.value as any)?.media || [])
 const teams = computed(() => teamsData.value?.teams || [])
+
 const statusMeta: Record<string, string> = {
   OPEN: 'Aperta',
   UNDER_REVIEW: 'In revisione',
@@ -43,19 +43,15 @@ const statusMeta: Record<string, string> = {
   CLOSED: 'Chiusa'
 }
 
-// Form Cambia Stato
+const statusTransitions: Record<string, string[]> = {
-const newStatus = ref<ReportStatus>('IN_PROGRESS')
+  OPEN: ['UNDER_REVIEW', 'REJECTED'],
-const statusNote = ref('')
+  UNDER_REVIEW: ['ASSIGNED', 'REJECTED'],
-const isUpdatingStatus = ref(false)
+  ASSIGNED: ['IN_PROGRESS', 'REJECTED'],
-
+  IN_PROGRESS: ['RESOLVED', 'REJECTED'],
-// Form Assegna Squadra
+  RESOLVED: ['CLOSED'],
-const isAssignModalOpen = ref(false)
+  REJECTED: ['CLOSED'],
-const selectedTeamId = ref<number | null>(null)
+  CLOSED: []
-const isAssigning = ref(false)
+}
-
-// Messaggi
-const isSubmittingMessage = ref(false)
-const isFlaggingMessageId = ref<number | null>(null)
 
 const availableStatuses: { value: ReportStatus, label: string }[] = [
   { value: 'OPEN', label: 'Aperta' },
@@ -67,9 +63,48 @@ const availableStatuses: { value: ReportStatus, label: string }[] = [
   { value: 'CLOSED', label: 'Chiusa' }
 ]
 
-// Inizializza lo stato nel form
+const selectableStatuses = computed(() => {
+  if (!report.value?.status) return []
+  const allowed = statusTransitions[report.value.status] || []
+  return availableStatuses.filter(s => allowed.includes(s.value))
+})
+
+const canCreateInterventionLink = computed(() => {
+  if (summary.value?.assignments && Array.isArray(summary.value.assignments)) {
+    return summary.value.assignments.some((a: any) => !a.ended_at)
+  }
+  return ['ASSIGNED', 'IN_PROGRESS'].includes(report.value?.status)
+})
+
+const newStatus = ref<ReportStatus>('IN_PROGRESS')
+const statusNote = ref('')
+const isUpdatingStatus = ref(false)
+
+const isAssignModalOpen = ref(false)
+const selectedTeamId = ref<number | null>(null)
+const isAssigning = ref(false)
+const interventionLink = ref('')
+const interventionLinkExpiresAt = ref('')
+const isGeneratingInterventionLink = ref(false)
+const isRevokingInterventionLink = ref(false)
+const interventionLinkError = ref('')
+const interventionLinkSuccess = ref('')
+const isRevokeInterventionModalOpen = ref(false)
+
+const isSubmittingMessage = ref(false)
+const flaggedMessageIds = ref<number[]>([])
+const isFlagMessageModalOpen = ref(false)
+const messageToFlag = ref<Message | null>(null)
+const isFlaggingMessage = ref(false)
+const isFlaggingMessageId = computed(() => isFlaggingMessage.value ? messageToFlag.value?.id : null)
+
 watch(() => report.value?.status, (val) => {
-  if (val) newStatus.value = val as ReportStatus
+  if (val) {
+    const allowed = statusTransitions[val] || []
+    if (allowed.length > 0) {
+      newStatus.value = allowed[0] as ReportStatus
+    }
+  }
 }, { immediate: true })
 
 const handleStatusUpdate = async () => {
@@ -91,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, {
@@ -109,6 +146,73 @@ const handleAssignTeam = async () => {
   }
 }
 
+const copyInterventionLink = async () => {
+  if (!interventionLink.value || !navigator?.clipboard) return
+
+  try {
+    await navigator.clipboard.writeText(interventionLink.value)
+    interventionLinkSuccess.value = 'Link copiato negli appunti.'
+    interventionLinkError.value = ''
+  } catch {
+    interventionLinkError.value = 'Copia automatica non riuscita.'
+    interventionLinkSuccess.value = ''
+  }
+}
+
+const handleCreateInterventionLink = async () => {
+  if (!canCreateInterventionLink.value) return
+  isGeneratingInterventionLink.value = true
+  interventionLinkError.value = ''
+  interventionLinkSuccess.value = ''
+
+  try {
+    const res = await createInterventionLink(reportId)
+    if (res.ok) {
+      interventionLink.value = res.url
+      interventionLinkExpiresAt.value = res.expires_at
+      interventionLinkSuccess.value = 'Link intervento generato.'
+    }
+  } catch (e: any) {
+    console.error('Failed to create intervention link', e)
+    interventionLinkError.value = e?.data?.message || 'Generazione link non riuscita.'
+  } finally {
+    isGeneratingInterventionLink.value = false
+  }
+}
+
+const openRevokeInterventionLinkModal = () => {
+  if (!interventionLink.value) return
+  isRevokeInterventionModalOpen.value = true
+}
+
+const closeRevokeInterventionLinkModal = () => {
+  if (isRevokingInterventionLink.value) return
+  isRevokeInterventionModalOpen.value = false
+}
+
+const handleRevokeInterventionLink = async () => {
+  if (!interventionLink.value) return
+
+  isRevokingInterventionLink.value = true
+  interventionLinkError.value = ''
+  interventionLinkSuccess.value = ''
+
+  try {
+    const res = await revokeInterventionLink(reportId)
+    if (res.ok) {
+      interventionLink.value = ''
+      interventionLinkExpiresAt.value = ''
+      interventionLinkSuccess.value = 'Link intervento revocato.'
+      isRevokeInterventionModalOpen.value = false
+    }
+  } catch (e: any) {
+    console.error('Failed to revoke intervention link', e)
+    interventionLinkError.value = e?.data?.message || 'Revoca link non riuscita.'
+  } finally {
+    isRevokingInterventionLink.value = false
+  }
+}
+
 const handleSendMessage = async (msgText: string, files: File[]) => {
   if (!msgText.trim() && files.length === 0) return
   isSubmittingMessage.value = true
@@ -124,21 +228,37 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
 
 const canFlagMessage = (message: Message) => {
   if (!user.value) return false
-  return message.user_id !== user.value.id && message.user_id === report.value?.user_id
+  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
 }
 
-const handleFlagMessage = async (message: Message) => {
+const handleFlagMessage = (message: Message) => {
   if (!canFlagMessage(message)) return
 
-  isFlaggingMessageId.value = message.id
+  messageToFlag.value = message
+  isFlagMessageModalOpen.value = true
+}
+
+const executeFlagMessage = async () => {
+  if (!messageToFlag.value) return
+
+  isFlaggingMessage.value = true
   try {
-    await flagMessage(reportId, message.id, {
+    await flagMessage(reportId, messageToFlag.value.id, {
       reason: 'Messaggio segnalato da operatore responsabile per verifica moderazione',
     })
+
+    flaggedMessageIds.value.push(messageToFlag.value.id)
+
+    isFlagMessageModalOpen.value = false
+    messageToFlag.value = null
   } catch (e) {
     console.error('Failed to flag message', e)
   } finally {
-    isFlaggingMessageId.value = null
+    isFlaggingMessage.value = false
   }
 }
 
@@ -155,9 +275,13 @@ const latestCitizenMessage = computed(() => {
   if (!reportUserId) return null
 
   return [...messages.value]
-    .reverse()
+      .reverse()
-    .find((message) => message.user_id === reportUserId) || null
+      .find((message) => message.user_id === reportUserId) || null
 })
+
+const formattedInterventionLinkExpiry = computed(() =>
+    interventionLinkExpiresAt.value ? formatDate(interventionLinkExpiresAt.value) : ''
+)
 </script>
 
 <template>
@@ -249,10 +373,10 @@ const latestCitizenMessage = computed(() => {
                 <span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
               </div>
               <MessageList
-                :messages="messages"
+                  :messages="messages"
-                :can-flag-message="canFlagMessage"
+                  :can-flag-message="canFlagMessage"
-                :is-flagging-message-id="isFlaggingMessageId"
+                  :is-flagging-message-id="isFlaggingMessageId"
-                @flag="handleFlagMessage"
+                  @flag="handleFlagMessage"
               />
               <MessageComposer @send="handleSendMessage" />
             </div>
@@ -261,84 +385,144 @@ const latestCitizenMessage = computed(() => {
 
         <div class="col-12 col-xl-5">
           <div class="report-sidebar">
-          <div class="card card-bg border-0 shadow-sm mb-4" v-if="summary">
+            <div class="card card-bg border-0 shadow-sm mb-4" v-if="summary">
-            <div class="card-body">
+              <div class="card-body">
-              <h2 class="h6 mb-3">Quadro operativo</h2>
+                <h2 class="h6 mb-3">Quadro operativo</h2>
-              <ul class="report-summary-list list-unstyled mb-4">
+                <ul class="report-summary-list list-unstyled mb-4">
-                <li>
+                  <li>
-                  <span>Operatore</span>
+                    <span>Operatore</span>
-                  <strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
+                    <strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
-                </li>
+                  </li>
-                <li>
+                  <li>
-                  <span>Team disponibili</span>
+                    <span>Team disponibili</span>
-                  <strong>{{ teams.length }}</strong>
+                    <strong>{{ teams.length }}</strong>
-                </li>
+                  </li>
-                <li>
+                  <li>
-                  <span>Allegati</span>
+                    <span>Allegati</span>
-                  <strong>{{ summaryMedia.length || media.length }}</strong>
+                    <strong>{{ summaryMedia.length || media.length }}</strong>
-                </li>
+                  </li>
-              </ul>
+                </ul>
-              <div class="report-description">
+                <div class="report-description">
-                <h3 class="h6 mb-2">Ultimo messaggio cittadino</h3>
+                  <h3 class="h6 mb-2">Ultimo messaggio cittadino</h3>
-                <p class="small mb-0">
+                  <p class="small mb-0">
-                  {{ latestCitizenMessage?.body || 'Nessun messaggio del cittadino disponibile.' }}
+                    {{ latestCitizenMessage?.body || 'Nessun messaggio del cittadino disponibile.' }}
-                </p>
+                  </p>
+                </div>
+              </div>
+              <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>
               </div>
             </div>
-            <div class="card-body pt-0">
-              <button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
-                Assegna team
-              </button>
-            </div>
-          </div>
 
-          <div class="card card-bg border-0 shadow-sm mb-4">
+            <div class="card card-bg border-0 shadow-sm mb-4">
-            <div class="card-body">
+              <div class="card-body">
-              <h2 class="h6 mb-3">Aggiorna stato</h2>
+                <h2 class="h6 mb-3">Link intervento pubblico</h2>
-              <form @submit.prevent="handleStatusUpdate">
+                <p class="text-muted small mb-3">Genera link temporaneo per team esterno. Nuova generazione ruota link esistente.</p>
-                <div class="mb-3">
-                  <label class="form-label">Nuovo Stato</label>
-                  <select class="form-select" v-model="newStatus">
-                    <option v-for="st in availableStatuses" :key="st.value" :value="st.value">
-                      {{ st.label }}
-                    </option>
-                  </select>
-                </div>
-                <div class="mb-3">
-                  <label class="form-label">Nota (visibile nella cronologia)</label>
-                  <textarea class="form-control" v-model="statusNote" rows="2" placeholder="Motivazione o dettaglio..."></textarea>
-                </div>
-                <button type="submit" class="btn btn-primary w-100" :disabled="isUpdatingStatus || newStatus === report.status">
-                  <span v-if="isUpdatingStatus" class="spinner-border spinner-border-sm me-2"></span>
-                  Aggiorna Stato
-                </button>
-              </form>
-            </div>
-          </div>
 
-          <div class="card card-bg border-0 shadow-sm">
+                <div v-if="interventionLinkError" class="alert alert-danger py-2" role="alert">
-            <div class="card-body">
+                  {{ interventionLinkError }}
-              <h2 class="h6 mb-3">Cronologia eventi</h2>
+                </div>
-              <div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
+                <div v-if="interventionLinkSuccess" class="alert alert-success py-2" role="alert">
-              <ul class="list-unstyled mb-0 ms-2">
+                  {{ interventionLinkSuccess }}
-                <li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
+                </div>
-                  <small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
+
-                  <div class="d-flex align-items-center gap-2 mt-1">
+                <template v-if="interventionLink">
-                    <StatusBadge :status="item.old_status" />
+                  <label class="form-label">URL attivo</label>
-                    <BIIcon name="it-arrow-right" size="xs" />
+                  <div class="input-group mb-2">
-                    <StatusBadge :status="item.new_status" />
+                    <input type="text" class="form-control" :value="interventionLink" readonly />
+                    <button type="button" class="btn btn-outline-primary" @click="copyInterventionLink">
+                      Copia
+                    </button>
                   </div>
-                  <div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
+                  <p class="small text-muted mb-3">
-                </li>
+                    Scade: {{ formattedInterventionLinkExpiry || '-' }}
-              </ul>
+                  </p>
+                  <div class="d-grid gap-2">
+                    <button type="button" class="btn btn-outline-primary" :disabled="isGeneratingInterventionLink || !canCreateInterventionLink" @click="handleCreateInterventionLink">
+                      <span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
+                      Rigenera link
+                    </button>
+                    <button type="button" class="btn btn-outline-danger" :disabled="isRevokingInterventionLink" @click="openRevokeInterventionLinkModal">
+                      <span v-if="isRevokingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
+                      Revoca link
+                    </button>
+                  </div>
+                </template>
+
+                <button
+                    v-else
+                    type="button"
+                    class="btn btn-outline-primary w-100"
+                    :disabled="isGeneratingInterventionLink || !canCreateInterventionLink"
+                    @click="handleCreateInterventionLink"
+                >
+                  <span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
+                  Genera link
+                </button>
+
+                <div v-if="!canCreateInterventionLink" class="text-danger small mt-2">
+                  È necessaria un'assegnazione in corso per generare o rigenerare questo link.
+                </div>
+              </div>
+            </div>
+
+            <div class="card card-bg border-0 shadow-sm mb-4">
+              <div class="card-body">
+                <h2 class="h6 mb-3">Aggiorna stato</h2>
+
+                <template v-if="selectableStatuses.length > 0">
+                  <form @submit.prevent="handleStatusUpdate">
+                    <div class="mb-3">
+                      <label class="form-label">Nuovo Stato</label>
+                      <select class="form-select" v-model="newStatus">
+                        <option v-for="st in selectableStatuses" :key="st.value" :value="st.value">
+                          {{ st.label }}
+                        </option>
+                      </select>
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label">Nota (visibile nella cronologia)</label>
+                      <textarea class="form-control" v-model="statusNote" rows="2" placeholder="Motivazione o dettaglio..."></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-100" :disabled="isUpdatingStatus">
+                      <span v-if="isUpdatingStatus" class="spinner-border spinner-border-sm me-2"></span>
+                      Aggiorna Stato
+                    </button>
+                  </form>
+                </template>
+
+                <template v-else>
+                  <div class="alert alert-info mb-0 small">
+                    La segnalazione è attualmente in stato <strong>{{ statusMeta[report.status] }}</strong>. Non sono consentite ulteriori transizioni.
+                  </div>
+                </template>
+              </div>
+            </div>
+
+            <div class="card card-bg border-0 shadow-sm">
+              <div class="card-body">
+                <h2 class="h6 mb-3">Cronologia eventi</h2>
+                <div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
+                <ul class="list-unstyled mb-0 ms-2">
+                  <li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
+                    <small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
+                    <div class="d-flex align-items-center gap-2 mt-1">
+                      <StatusBadge :status="item.old_status" />
+                      <BIIcon name="it-arrow-right" size="xs" />
+                      <StatusBadge :status="item.new_status" />
+                    </div>
+                    <div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
+                  </li>
+                </ul>
+              </div>
             </div>
-          </div>
           </div>
         </div>
       </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">
@@ -375,6 +559,27 @@ const latestCitizenMessage = computed(() => {
       </div>
     </div>
 
+    <ConfirmModal
+        :open="isRevokeInterventionModalOpen"
+        title="Revoca link intervento"
+        message="Vuoi revocare link pubblico per team esterno? Link non sara piu utilizzabile."
+        confirm-label="Revoca link"
+        confirm-class="btn-danger"
+        :pending="isRevokingInterventionLink"
+        @cancel="closeRevokeInterventionLinkModal"
+        @confirm="handleRevokeInterventionLink"
+    />
+
+    <ConfirmModal
+        :open="isFlagMessageModalOpen"
+        title="Segnala messaggio"
+        message="Sei sicuro di voler segnalare questo messaggio al team di moderazione per una verifica?"
+        confirm-label="Segnala"
+        confirm-class="btn-warning"
+        :pending="isFlaggingMessage"
+        @cancel="isFlagMessageModalOpen = false; messageToFlag = null"
+        @confirm="executeFlagMessage"
+    />
   </div>
   <div v-else class="text-center py-5">
     <div class="spinner-border text-primary" role="status"></div>

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">
@@ -48,7 +46,7 @@ useHead({
           <h2 class="h3 font-weight-bold mb-3">3. Finalità del Trattamento</h2>
           <p class="text-muted mb-4">
             I dati forniti verranno trattati esclusivamente per le seguenti finalità:
-            <br>- Consentire la registrazione e l'autenticazione sicura (incluso login Passwordless tramite OTP).
+            <br>- Consentire la registrazione e l'autenticazione sicura tramite OTP.
             <br>- Gestire la presa in carico e la risoluzione delle segnalazioni urbane da parte delle squadre operative.
             <br>- Fornire comunicazioni di servizio relative allo stato di avanzamento delle segnalazioni.
             <br>- Attribuire punteggi virtuali all'utente nell'ambito del sistema di <em>Gamification</em> volto a incentivare la cittadinanza attiva.

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>
@@ -130,9 +130,9 @@ const formatDate = (dateString: string) =>
             <div class="card-body">
               <h2 class="h6 card-title mb-3">Azioni account</h2>
               <div class="d-grid gap-2">
-                <NuxtLink to="/reports/new" class="btn btn-primary">Nuova segnalazione</NuxtLink>
+                <NuxtLink v-if="isCitizen(user?.role)" class="btn btn-primary" to="/reports/new">Nuova segnalazione
+                </NuxtLink>
                 <NuxtLink to="/notifications" class="btn btn-outline-primary">Notifiche</NuxtLink>
-                <NuxtLink to="/auth/change-password" class="btn btn-outline-secondary">Cambia password</NuxtLink>
                 <button type="button" class="btn btn-outline-danger" @click="logout">
                   Logout
                 </button>
@@ -154,3 +154,9 @@ const formatDate = (dateString: string) =>
     </div>
   </div>
 </template>
+
+<style>
+.card .card-body .d-grid > a {
+  padding-block: 8px;
+}
+</style>

app/pages/reports/[id].vue

@@ -6,7 +6,6 @@ definePageMeta({
 useHead({ title: 'Dettaglio Segnalazione - Visione' })
 
 const runtimeConfig = useRuntimeConfig()
-
 const route = useRoute()
 const { getReportDetail, getMessages, addMessage, addFeedback } = useReports()
 const { user } = useAuth()
@@ -16,13 +15,12 @@ if (!reportId) {
   navigateTo('/')
 }
 
-// Fetch dati
 const { data: reportData, refresh: refreshReport } = await useAsyncData(`report-${reportId}`, () =>
-  getReportDetail(reportId)
+    getReportDetail(reportId)
 )
 
 const { data: messagesData, refresh: refreshMessages } = await useAsyncData(`messages-${reportId}`, () =>
-  getMessages(reportId)
+    getMessages(reportId)
 )
 
 const report = computed(() => (reportData.value as any)?.report)
@@ -30,23 +28,18 @@ const media = computed(() => (reportData.value as any)?.media || [])
 const statusHistory = computed(() => (reportData.value as any)?.history || [])
 const messages = computed(() => (messagesData.value as any)?.messages || [])
 
-const newMessage = ref('')
 const isSubmittingMessage = ref(false)
+
 const isFeedbackOpen = ref(false)
 const feedbackRating = ref(5)
 const feedbackComment = ref('')
 const isSubmittingFeedback = ref(false)
-const selectedMediaIndex = ref(0)
-const isGalleryOpen = ref(false)
-
-// Invia messaggio
-const handleSendMessage = async (msgText: string, files: File[]) => {
-  if (!msgText.trim() && files.length === 0) return
 
+const handleSendMessage = async (messageText: string, files: File[]) => {
   isSubmittingMessage.value = true
   try {
-    // Gestione mock di file, nella realtà si usa FormData o simle
+    await addMessage(reportId, { body: messageText })
-    await addMessage(reportId, { body: msgText })
+
     await refreshMessages()
   } catch (error) {
     console.error('Error sending message:', error)
@@ -55,7 +48,6 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
   }
 }
 
-// Invia feedback (solo se risolta)
 const handleSubmitFeedback = async () => {
   isSubmittingFeedback.value = true
   try {
@@ -75,7 +67,8 @@ const handleSubmitFeedback = async () => {
 }
 
 const isOwner = computed(() => report.value?.user_id === user.value?.id)
-const canFeedback = computed(() => report.value?.status === 'RESOLVED' || report.value?.status === 'CLOSED')
+const canFeedback = computed(() => report.value?.status === 'RESOLVED')
+
 const statusMeta: Record<string, { label: string; tone: string }> = {
   OPEN: { label: 'Aperta', tone: 'info' },
   UNDER_REVIEW: { label: 'In revisione', tone: 'warning' },
@@ -105,7 +98,7 @@ const formatDate = (dateString: string): string => {
           <div class="col-12 col-lg-8">
             <div class="report-hero-meta mb-2">
               <span class="report-id">Segnalazione #{{ report.id }}</span>
-              <StatusBadge :status="report.status" />
+              <StatusBadge :status="report.status"/>
             </div>
             <h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
             <p class="mb-0 report-hero-address">{{ report.address }}</p>
@@ -132,7 +125,7 @@ const formatDate = (dateString: string): string => {
           <div class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
               <div class="report-section-head mb-3">
-                <BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
+                <BIIcon class="me-2" color="primary" name="it-map-marker-circle" size="sm"/>
                 <h2 class="h6 mb-0">Posizione e dettagli</h2>
               </div>
               <dl class="report-detail-grid mb-0">
@@ -164,46 +157,40 @@ const formatDate = (dateString: string): string => {
           <div v-if="media.length > 0" class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
               <div class="report-section-head mb-3">
-                <BIIcon name="it-camera" size="sm" color="primary" class="me-2" />
+                <BIIcon class="me-2" color="primary" name="it-camera" size="sm"/>
                 <h2 class="h6 mb-0">Allegati ({{ media.length }})</h2>
               </div>
               <div class="row g-3">
                 <div v-for="(m, idx) in media" :key="m.id" class="col-6 col-md-4 mb-3">
-                  <div v-if="m.media_kind === 'IMAGE'" class="ratio ratio-1x1 bg-light rounded overflow-hidden report-media-frame">
+                  <div v-if="m.media_kind === 'IMAGE'"
-                    <img :src="runtimeConfig.public.api + m.url" :alt="`Allegato ${Number(idx) + 1}`" class="object-fit-cover" />
+                       class="ratio ratio-1x1 bg-light rounded overflow-hidden report-media-frame">
+                    <img :alt="`Allegato ${Number(idx) + 1}`" :src="runtimeConfig.public.api + m.url"
+                         class="object-fit-cover"/>
                   </div>
-                  <div v-else class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center report-media-frame">
+                  <div v-else
-                    <BIIcon name="it-video" size="xl" color="white" />
+                       class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center report-media-frame">
+                    <BIIcon color="white" name="it-video" size="xl"/>
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div v-if="statusHistory.length > 0" class="card card-bg border-0 shadow-sm mb-4">
+          <div class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
-              <div class="report-section-head mb-4">
+              <h2 class="h6 mb-3">Cronologia eventi</h2>
-                <BIIcon name="it-history" size="sm" color="primary" class="me-2" />
+              <div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
-                <h2 class="h6 mb-0">Cronologia</h2>
+              <ul class="list-unstyled mb-0 ms-2">
-              </div>
+                <li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
-              <div class="timeline">
+                  <small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
-                <div v-for="item in statusHistory" :key="item.id" class="timeline-item mb-3">
+                  <div class="d-flex align-items-center gap-2 mt-1">
-                  <div class="d-flex gap-3">
+                    <StatusBadge :status="item.old_status"/>
-                    <div class="flex-shrink-0">
+                    <BIIcon name="it-arrow-right" size="xs"/>
-                      <div class="timeline-marker"></div>
+                    <StatusBadge :status="item.new_status"/>
-                    </div>
-                    <div class="flex-grow-1">
-                      <small class="text-muted">{{ formatDate(item.created_at) }}</small>
-                      <div class="small font-weight-semibold d-flex align-items-center gap-2 mt-1">
-                        <StatusBadge :status="item.old_status" />
-                        <BIIcon name="it-arrow-right" size="xs" />
-                        <StatusBadge :status="item.new_status" />
-                      </div>
-                      <small v-if="item.note" class="text-muted d-block">{{ item.note }}</small>
-                    </div>
                   </div>
-                </div>
+                  <div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
-              </div>
+                </li>
+              </ul>
             </div>
           </div>
 
@@ -212,15 +199,18 @@ const formatDate = (dateString: string): string => {
               <div class="report-chat-header mb-3">
                 <div>
                   <div class="report-section-head mb-1">
-                    <BIIcon name="it-comment" size="sm" color="primary" class="me-2" />
+                    <BIIcon class="me-2" color="primary" name="it-comment" size="sm"/>
                     <h2 class="h6 mb-0">Chat segnalazione</h2>
                   </div>
-                  <p class="text-muted small mb-0">Usa chat per chiarimenti, aggiornamenti operativi e richieste rapide.</p>
+                  <p class="text-muted small mb-0">Usa chat per chiarimenti, aggiornamenti operativi e richieste
+                    rapide.</p>
                 </div>
                 <span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
               </div>
-              <MessageList :messages="messages" />
+
-              <MessageComposer @send="handleSendMessage" />
+              <MessageList :messages="messages"/>
+
+              <MessageComposer @send="handleSendMessage"/>
             </div>
           </div>
         </div>
@@ -252,10 +242,10 @@ const formatDate = (dateString: string): string => {
                 <h2 class="h6 mb-3">Valuta intervento</h2>
                 <p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p>
                 <button
-                  v-if="!isFeedbackOpen"
+                    v-if="!isFeedbackOpen"
-                  type="button"
+                    type="button"
-                  class="btn btn-primary w-100"
+                    class="btn btn-primary w-100"
-                  @click="isFeedbackOpen = true"
+                    @click="isFeedbackOpen = true"
                 >
                   Valuta intervento
                 </button>
@@ -267,9 +257,9 @@ const formatDate = (dateString: string): string => {
                       <button v-for="n in 5" :key="n" type="button" class="btn btn-link p-0"
                               @click="feedbackRating = n" :aria-label="`${n} stelle`">
                         <BIIcon
-                          :name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
+                            :name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
-                          size="lg"
+                            size="lg"
-                          :color="n <= feedbackRating ? 'warning' : 'primary'"
+                            :color="n <= feedbackRating ? 'warning' : 'primary'"
                         />
                       </button>
                     </div>
@@ -277,15 +267,16 @@ const formatDate = (dateString: string): string => {
 
                   <div class="mb-3">
                     <textarea
-                      v-model="feedbackComment"
+                        v-model="feedbackComment"
-                      class="form-control"
+                        class="form-control"
-                      placeholder="Commento opzionale"
+                        placeholder="Commento opzionale"
-                      rows="3"
+                        rows="3"
                     />
                   </div>
 
                   <div class="d-grid gap-2">
-                    <button type="button" class="btn btn-primary" @click="handleSubmitFeedback" :disabled="isSubmittingFeedback">
+                    <button :disabled="isSubmittingFeedback" class="btn btn-primary" type="button"
+                            @click="handleSubmitFeedback">
                       <span v-if="isSubmittingFeedback" class="spinner-border spinner-border-sm me-2"></span>
                       Invia
                     </button>
@@ -408,25 +399,6 @@ const formatDate = (dateString: string): string => {
   justify-content: space-between;
 }
 
-.timeline-marker {
-  width: 12px;
-  height: 12px;
-  background-color: #006f9d;
-  border-radius: 50%;
-  border: 3px solid #f0f0f0;
-}
-
-.timeline-item:not(:last-child) .timeline-marker::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 20px;
-  width: 2px;
-  height: calc(100% + 20px);
-  background-color: #006f9d;
-  transform: translateX(-50%);
-}
-
 .ratio {
   position: relative;
   display: block;
@@ -457,6 +429,3 @@ const formatDate = (dateString: string): string => {
   }
 }
 </style>
-
-
-

app/pages/reports/new.vue

@@ -3,6 +3,9 @@ import type { CreateReportRequest } from '~/types/api'
 
 definePageMeta({
   middleware: 'auth',
+  auth: {
+    role: ['!ADMIN', '!OPERATOR']
+  }
 })
 
 useHead({ title: 'Nuova segnalazione - Visione' })

app/types/api.d.ts

@@ -4,416 +4,451 @@ 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;
-    must_change_password: boolean;
+  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;
-    must_change_password?: boolean;
+  roles?: string;
-    roles?: string; // Comma-separated
 }
 
 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;
+}
+
+export interface CieStartRequest {
+  frontend_redirect_uri: string;
+}
+
+export interface CieStartResponse {
+  ok: boolean;
+  authorization_url: string;
+  state: string;
+  status: string;
+}
+
+export interface CieExchangeRequest {
+  state: string;
+  issuer: string;
+  subject: string;
+  fiscal_code: string;
+  first_name?: string;
+  last_name?: string;
+  email?: string;
+}
+
+export interface CieSessionAuth {
+  token?: string;
+  token_type?: string;
+  expires_in_hours?: number;
+  [key: string]: any;
+}
+
+export interface CieSessionResponse {
+  ok: boolean;
+  status: string;
+  user_id?: number;
+  auth?: CieSessionAuth;
 }
 
-/**
- * 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;
-    password: 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 PasswordLoginRequest {
-    email: string;
-    password: string;
-}
-
-export interface ChangePasswordRequest {
-    current_password: string;
-    new_password: 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;
+  boundary_geojson?: GeoJsonObject;
+  description?: string;
+  active?: boolean;
 }
 
 export interface CreateCategoryRequest {
-    name: string;
+  name: string;
-    description?: string;
+  description?: string;
+}
+
+export interface UpdateCategoryRequest {
+  name?: string;
+  description?: string;
+  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;
+  name?: string;
+  description?: string;
+  area_id?: number | null;
+  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;
+  url: 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,74 @@
+export const ROLES = {
+  CITIZEN: 'CITIZEN',
+  OPERATOR: 'OPERATOR',
+  ADMIN: 'ADMIN'
+} as const
+
+export type Role = keyof typeof ROLES
+export type NegatedRole = `!${Role}`
+export type MetaRoleRequirement = Role | NegatedRole | Array<Role | NegatedRole>
+
+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) === normalizeRole(targetRole)
+}
+
+export function hasMinimumRole(userRole: string | undefined | null, requiredRole: string): boolean {
+  const userLvl = ROLE_LEVELS[normalizeRole(userRole)] || 0
+  const reqLvl = ROLE_LEVELS[normalizeRole(requiredRole)] || 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)
+}
+
+export function checkRoleAccess(userRole: string | undefined | null, requirement: MetaRoleRequirement | undefined): boolean {
+  if (!requirement) return true
+
+  const normalizedUserRole = normalizeRole(userRole)
+  if (!normalizedUserRole) return false
+
+  const requirements = Array.isArray(requirement) ? requirement : [requirement]
+
+  for (const req of requirements) {
+    const isNegated = req.startsWith('!')
+
+    const rawTarget = isNegated ? req.substring(1) : req
+    const targetRole = normalizeRole(rawTarget)
+
+    if (isNegated) {
+      console.log("negated", normalizedUserRole, targetRole)
+      if (normalizedUserRole === targetRole) {
+        return false
+      }
+    } else {
+      if (!hasMinimumRole(normalizedUserRole, targetRole)) {
+        return false
+      }
+    }
+  }
+
+  return true
+}

public/logo-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1940.28 1402.502">
+    <path d="M1750.752 723.02a183 183 0 0 0-.378-15.172c-12.607-201.546-306.563-352.873-691.458-375.02L1104.93 0c-32.106 110.228-64.212 220.499-96.318 330.727-52.026-1.47-105.564-.546-160.069 2.858C365.313 363.842-14.414 580.516.42 817.489c14.877 236.972 418.642 404.52 901.83 374.263 115.02-7.186 224.197-24.962 323.584-51.059l255.63 261.809-207.975-275.172c271.389-81.148 459.572-225.752 476.087-383.425 63.582-4.329 127.122-8.657 190.704-12.985-63.162-2.648-126.366-5.253-189.528-7.9M1022.27 597.998c256.178 5.84 455.202 49.924 515.884 116.153-176.29-7.312-352.621-14.666-528.91-22.02 4.328-31.392 8.656-62.742 13.027-94.133ZM39.713 849.637C34.628 768.32 215.876 686.753 480.08 639.182c-69.381 32.568-116.742 97.747-116.742 172.801 0 100.605 85.056 183.392 194.234 193.814-296.562-8.867-512.438-69.381-517.86-156.16m771.22 151.664c-73.878 4.623-145.444 6.303-213.27 5.379 16.599-.84 32.652-3.74 47.906-8.531-16.64 4.664-34.207 7.564-52.32 8.447-2.898.168-5.882.252-8.824.294a165 165 0 0 1-13.742-.714c-99.765-8.573-178.055-92.285-178.055-194.277 0-78.71 46.605-146.536 113.8-177.34 22.778-10.464 47.95-16.641 74.467-17.523h.294q3.214-.127 6.43-.127c9.287 0 18.364.63 27.315 1.891.547-.084 1.093-.126 1.64-.21a77 77 0 0 1-2.396-1.554l6.009 1.134c53.244-6.514 108.758-11.64 165.826-15.213 49.504-3.11 97.915-4.874 144.898-5.421-7.229 24.879-14.499 49.715-21.727 74.592L620.187 618.17a106 106 0 0 0-3.614.42c.252.21.504.378.756.547h.043c11.052 1.722 21.81 4.328 32.19 7.858.21.042.42.084.588.168 28.66 9.666 54.379 25.845 75.307 46.773 35.342 35.3 57.194 84.047 57.194 137.963 0 2.27-.042 4.497-.126 6.724-2.774 82.493-56.816 152.042-131.324 177.72-.841.293-1.724.587-2.606.881 10.338-2.941 20.298-6.64 29.837-10.926 90.561-37.023 159.648-102.664 250-150.193 44.923 46.016 89.846 91.99 134.77 138.006-78.669 12.313-163.557 21.642-252.269 27.19m335.686-41.814-125.483-165.994c178.727-12.145 357.412-24.332 536.139-36.519 1.513 77.408-165.195 154.774-410.656 202.513"/>
+</svg>

public/logo-light.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1940.28 1402.502">
+    <path d="M1750.752 723.02a183 183 0 0 0-.378-15.172c-12.607-201.546-306.563-352.873-691.458-375.02L1104.93 0c-32.106 110.228-64.212 220.499-96.318 330.727-52.026-1.47-105.564-.546-160.069 2.858C365.313 363.842-14.414 580.516.42 817.489c14.877 236.972 418.642 404.52 901.83 374.263 115.02-7.186 224.197-24.962 323.584-51.059l255.63 261.809-207.975-275.172c271.389-81.148 459.572-225.752 476.087-383.425 63.582-4.329 127.122-8.657 190.704-12.985-63.162-2.648-126.366-5.253-189.528-7.9M1022.27 597.998c256.178 5.84 455.202 49.924 515.884 116.153-176.29-7.312-352.621-14.666-528.91-22.02 4.328-31.392 8.656-62.742 13.027-94.133ZM39.713 849.637C34.628 768.32 215.876 686.753 480.08 639.182c-69.381 32.568-116.742 97.747-116.742 172.801 0 100.605 85.056 183.392 194.234 193.814-296.562-8.867-512.438-69.381-517.86-156.16m771.22 151.664c-73.878 4.623-145.444 6.303-213.27 5.379 16.599-.84 32.652-3.74 47.906-8.531-16.64 4.664-34.207 7.564-52.32 8.447-2.898.168-5.882.252-8.824.294a165 165 0 0 1-13.742-.714c-99.765-8.573-178.055-92.285-178.055-194.277 0-78.71 46.605-146.536 113.8-177.34 22.778-10.464 47.95-16.641 74.467-17.523h.294q3.214-.127 6.43-.127c9.287 0 18.364.63 27.315 1.891.547-.084 1.093-.126 1.64-.21a77 77 0 0 1-2.396-1.554l6.009 1.134c53.244-6.514 108.758-11.64 165.826-15.213 49.504-3.11 97.915-4.874 144.898-5.421-7.229 24.879-14.499 49.715-21.727 74.592L620.187 618.17a106 106 0 0 0-3.614.42c.252.21.504.378.756.547h.043c11.052 1.722 21.81 4.328 32.19 7.858.21.042.42.084.588.168 28.66 9.666 54.379 25.845 75.307 46.773 35.342 35.3 57.194 84.047 57.194 137.963 0 2.27-.042 4.497-.126 6.724-2.774 82.493-56.816 152.042-131.324 177.72-.841.293-1.724.587-2.606.881 10.338-2.941 20.298-6.64 29.837-10.926 90.561-37.023 159.648-102.664 250-150.193 44.923 46.016 89.846 91.99 134.77 138.006-78.669 12.313-163.557 21.642-252.269 27.19m335.686-41.814-125.483-165.994c178.727-12.145 357.412-24.332 536.139-36.519 1.513 77.408-165.195 154.774-410.656 202.513"
+          style="fill:#fff"/>
+</svg>