fix: ROLE parsing in users.vue

Reviewed-on: #5

.gitignore

@@ -22,3 +22,7 @@ logs
 .env
 .env.*
 !.env.example
+
+pnpm-*.yaml
+.pnpm-store/
+AGENTS.md

app/assets/css/style.css

@@ -1,7 +1,378 @@
+:root {
+    --visione-primary: #06c;
+    --visione-primary-dark: #17324d;
+    --visione-text-muted: #455b71;
+    --visione-text-body: #17324d;
+    --visione-text-soft: #455b71;
+    --visione-success: #008758;
+    --visione-warning: #a66300;
+    --visione-danger: #d9364f;
+    --visione-info: #2f80ed;
+    --visione-light-bg: #f0f6fc;
+    --visione-home-hero-bg: var(--visione-light-bg);
+    --visione-font-sans: "Titillium Web", Arial, sans-serif;
+    --visione-font-mono: "Roboto Mono", monospace;
+}
+
+html,
+body {
+    color: var(--visione-text-body);
+    font-family: var(--visione-font-sans);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea {
+    font-family: var(--visione-font-sans);
+}
+
+select,
+.form-select {
+    background-color: #f7f9fc !important;
+    border-color: #c5d0db !important;
+    color: var(--visione-text-body) !important;
+}
+
+.form-select:focus,
+select:focus {
+    background-color: #fff !important;
+    border-color: var(--visione-primary) !important;
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15) !important;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--visione-font-mono);
+}
+
 a {
-    text-decoration: none!important;
+    text-decoration: none !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.card-title,
+.callout-title {
+    color: var(--visione-primary-dark);
+    font-family: var(--visione-font-sans);
+    line-height: 1.2;
+}
+
+p,
+li,
+td,
+th,
+label,
+small,
+.card-text,
+.card .card-body .card-text,
+.callout p,
+.form-text {
+    color: inherit;
+    font-family: var(--visione-font-sans) !important;
+}
+
+.lead {
+    color: var(--visione-text-soft);
+    font-size: 1.125rem;
+    line-height: 1.55;
+}
+
+.text-muted,
+.text-secondary {
+    color: var(--visione-text-soft) !important;
+}
+
+.text-dark {
+    color: var(--visione-text-body) !important;
+}
+
+.text-primary,
+.category.text-primary {
+    color: var(--visione-primary) !important;
+}
+
+.text-success,
+.category.text-success {
+    color: var(--visione-success) !important;
+}
+
+.text-warning {
+    color: var(--visione-warning) !important;
+}
+
+.text-danger {
+    color: var(--visione-danger) !important;
+}
+
+.text-info {
+    color: var(--visione-info) !important;
+}
+
+.display-1 {
+    font-size: clamp(3rem, 5vw, 4.75rem);
+    line-height: 1;
+}
+
+.display-3 {
+    font-size: clamp(2.5rem, 4vw, 3.5rem);
+    line-height: 1;
+}
+
+.display-6 {
+    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
+    line-height: 1.1;
+}
+
+.bg-light {
+    background-color: var(--visione-home-hero-bg) !important;
 }
 
 html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-focus-mouse="true"], .navbar .navbar-collapsable .navbar-nav li.nav-item button.nav-link[data-focus-mouse="true"] {
     border-color: inherit !important
 }
+
+.it-hero-wrapper.it-primary,
+.it-hero-wrapper.it-primary-bg {
+    background: var(--visione-primary) !important;
+    color: #fff;
+}
+
+.it-hero-wrapper.it-primary h1,
+.it-hero-wrapper.it-primary p,
+.it-hero-wrapper.it-primary-bg h1,
+.it-hero-wrapper.it-primary-bg p {
+    color: #fff !important;
+}
+
+.it-hero-wrapper .container {
+    min-height: 240px;
+    display: flex;
+    align-items: center;
+}
+
+.it-hero-wrapper.hero-compact .container {
+    min-height: 132px;
+}
+
+.it-hero-wrapper .container > .row {
+    width: 100%;
+    justify-content: center;
+}
+
+.it-hero-wrapper .it-hero-text-wrapper {
+    max-width: 820px;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.it-hero-wrapper .it-hero-text-wrapper h1,
+.it-hero-wrapper .it-hero-text-wrapper p {
+    width: 100%;
+}
+
+.it-hero-wrapper.bg-light .it-hero-text-wrapper p {
+    font-size: 1.3rem;
+}
+
+.bg-light h1,
+.bg-light h2,
+.bg-light h3,
+.bg-light h4,
+.bg-light h5,
+.bg-light h6 {
+    color: var(--visione-primary-dark) !important;
+}
+
+.bg-light p,
+.bg-light .lead,
+.bg-light .text-muted,
+.bg-light .text-secondary {
+    color: var(--visione-text-soft) !important;
+}
+
+.icon {
+    color: currentColor;
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+.icon-primary {
+    color: var(--visione-primary) !important;
+    fill: var(--visione-primary) !important;
+}
+
+.icon-success {
+    color: var(--visione-success) !important;
+    fill: var(--visione-success) !important;
+}
+
+.icon-warning {
+    color: var(--visione-warning) !important;
+    fill: var(--visione-warning) !important;
+}
+
+.icon-danger {
+    color: var(--visione-danger) !important;
+    fill: var(--visione-danger) !important;
+}
+
+.icon-info {
+    color: var(--visione-info) !important;
+    fill: var(--visione-info) !important;
+}
+
+.btn-primary .icon:not([class*="icon-"]),
+.badge[class*="bg-"] .icon:not([class*="icon-"]),
+.rounded-circle[class*="bg-"] .icon:not([class*="icon-"]) {
+    color: #fff;
+    fill: #fff;
+}
+
+.btn-xs {
+    --bs-btn-padding-y: 0.25rem;
+    --bs-btn-padding-x: 0.55rem;
+    --bs-btn-font-size: 0.875rem;
+    line-height: 1.2;
+}
+
+.btn-icon.btn-xs {
+    align-items: center;
+    display: inline-flex;
+    height: 2rem;
+    justify-content: center;
+    padding: 0;
+    width: 2rem;
+}
+
+.report-table-wrapper {
+    border: 1px solid #dfe4ea;
+    border-radius: 4px;
+}
+
+.report-table thead th {
+    background: #f7f9fa;
+    color: var(--visione-text-soft);
+    font-size: 0.8125rem;
+    font-weight: 700;
+    padding: 0.65rem 0.75rem;
+    text-transform: uppercase;
+}
+
+.report-table tbody td {
+    font-size: 0.9375rem;
+    padding: 0.75rem;
+    vertical-align: middle;
+}
+
+.report-table-id {
+    color: var(--visione-primary-dark);
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.report-address {
+    color: var(--visione-text-soft);
+    display: inline-block;
+    max-width: min(36vw, 26rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    white-space: nowrap;
+}
+
+.dashboard-stat {
+    border-left: 4px solid var(--visione-primary);
+}
+
+.dashboard-stat .stat-value {
+    color: var(--visione-primary-dark);
+    font-size: 1.75rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.page-shell {
+    padding-block: 3rem;
+}
+
+.page-shell-header {
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+}
+
+.page-shell-title {
+    margin-bottom: 0.25rem;
+}
+
+.page-shell-subtitle {
+    color: var(--visione-text-soft);
+    margin-bottom: 0;
+    max-width: 48rem;
+}
+
+.surface-card {
+    background: #fff;
+    border: 1px solid #dfe4ea;
+    border-radius: 4px;
+}
+
+.it-header-wrapper .header-slim-right-zone .btn .rounded-icon,
+.it-header-wrapper .header-slim-right-zone .btn .rounded-icon .icon {
+
+}
+
+.it-footer,
+.it-footer a,
+.it-footer h2,
+.it-footer h3,
+.it-footer h4,
+.it-footer .it-brand-text,
+.it-footer .it-brand-text h2,
+.it-footer .it-brand-text h3,
+.it-footer .member-name,
+.it-footer .icon {
+    color: #fff !important;
+    fill: #fff !important;
+}
+
+@media (max-width: 767.98px) {
+    .page-shell {
+        padding-block: 2rem;
+    }
+
+    .it-hero-wrapper .container {
+        min-height: 220px;
+    }
+
+    .it-hero-wrapper .it-hero-text-wrapper {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+
+    .report-address {
+        max-width: 14rem;
+    }
+}

app/components/BIIcon.vue

@@ -1,9 +1,24 @@
 <script setup lang="ts">
-defineProps<{
+const iconAliases: Record<string, string> = {
+  'it-bell': 'it-info-circle',
+  'it-grid': 'it-list',
+  'it-history': 'it-clock',
+  'it-home': 'it-pa',
+  'it-image': 'it-file-image',
+  'it-location': 'it-map-marker-circle',
+  'it-map': 'it-map-marker-circle',
+  'it-piu': 'it-plus',
+  'it-star': 'it-star-full',
+  'it-write': 'it-pencil',
+}
+
+const props = defineProps<{
   name: string
   size?: 'xs' | 'sm' | 'lg' | 'xl'
   color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'white'
 }>()
+
+const resolvedName = computed(() => iconAliases[props.name] || props.name)
 </script>
 
 <template>
@@ -15,6 +30,6 @@ defineProps<{
     ]"
       aria-hidden="true"
   >
-    <use :href="`/sprites.svg#${name}`"></use>
+    <use :href="`/sprites.svg#${resolvedName}`"></use>
   </svg>
 </template>

app/components/Footer.vue

@@ -14,8 +14,9 @@ const { sortedMembers } = useMembers();
           <div class="row clearfix">
             <div class="col-sm-12">
               <div class="it-brand-wrapper">
-                <a href="#" data-focus-mouse="false">
-                  <BIIcon name="it-code-circle" />
+                <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;" />
+                  
                   <div class="it-brand-text">
                     <h2>Visione</h2>
                     <h3 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>
@@ -50,7 +51,6 @@ const { sortedMembers } = useMembers();
             <li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
             <li class="list-inline-item"><a href="/privacy">Privacy policy</a></li>
             <li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
-            <li class="list-inline-item"><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità <span class="visually-hidden">(link esterno su sito AgID)</span></a></li>
           </ul>
       </div>
     </div>

app/components/Header.vue

@@ -12,12 +12,13 @@ watch(() => route.path, () => {
 
 const navLinks = [
   { name: 'Home', path: '/' },
-  { name: 'Fai una segnalazione', path: '/reports/create' },
+  { 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,27 +29,34 @@ const { isAuthenticated, user, logout } = useAuth()
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">
               <a class="d-none d-lg-block navbar-brand"
-                 href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza">
-                Dipartimento della Pubblica Sicurezza
+                 href="https://www.cittametropolitana.ba.it/">
+                Città metropolitana di Bari
               </a>
               <div class="nav-mobile">
                 <nav aria-label="Navigazione secondaria">
                   <a class="it-opener d-lg-none" data-bs-toggle="collapse"
-                     href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza"
+                     href="https://www.cittametropolitana.ba.it/"
                      role="button" aria-expanded="false">
-                    <span>Dipartimento della Pubblica Sicurezza</span>
+                    <span>Città metropolitana di Bari</span>
                     <BIIcon name="it-expand"/>
                   </a>
                 </nav>
               </div>
 
               <div class="header-slim-right-zone" role="navigation">
-                <!-- Utente Autenticato: Bottone Utente + Bottone Esci -->
                 <div v-if="isAuthenticated" class="d-flex align-items-center gap-2">
                   <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-user" />
+                      <BIIcon name="it-list" color="black" />
+                    </span>
+                    <span class="d-none d-lg-block">{{ panelLabel }}</span>
+                  </NuxtLink>
+
+                  <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" />
                     </span>
                     <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                   </NuxtLink>
@@ -56,17 +64,16 @@ const { isAuthenticated, user, logout } = useAuth()
                   <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" /> <!-- usa it-unlocked se it-logout non è presente -->
+                      <BIIcon name="it-logout" color="black" />
                     </span>
                     <span class="d-none d-lg-block">Esci</span>
                   </button>
                 </div>
 
-                <!-- Utente NON Autenticato: Bottone Login -->
                 <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" />
+                    <BIIcon name="it-user" color="black" />
                   </span>
                   <span class="d-none d-lg-block">Login</span>
                 </NuxtLink>
@@ -86,7 +93,7 @@ const { isAuthenticated, user, logout } = useAuth()
               <div class="it-header-center-content-wrapper">
                 <div class="it-brand-wrapper">
                 <NuxtLink to="/">
-                    <BIIcon name="it-pa"/>
+                  <img src="/icon.svg" alt="Logo Visione" style="width: 48px; height: 48px; margin-right: 16px;" />
                   <div class="it-brand-text">
                     <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>

app/components/MediaUploader.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
   maxFiles: 5,
   acceptedTypes: 'image/*,video/*',
-  maxFileSize: 50, // 50MB
+  maxFileSize: 50,
   disabled: false
 })
 
@@ -36,16 +36,14 @@ const handleFilesSelected = (selectedFiles: FileList | null) => {
 
   const newFiles = Array.from(selectedFiles)
   
-  // Validazione numero file
   if (files.value.length + newFiles.length > props.maxFiles) {
     error.value = `Massimo ${props.maxFiles} file consentiti`
     return
   }
 
-  // Validazione dimensione
   for (const file of newFiles) {
     if (file.size > props.maxFileSize! * 1024 * 1024) {
-      error.value = `File ${file.name} supera il limite di ${props.maxFileSize}MB`
+      error.value = `Il file ${file.name} supera il limite di ${props.maxFileSize}MB`
       return
     }
   }
@@ -66,17 +64,16 @@ const formatFileSize = (bytes: number): string => {
   return mb > 0 ? `${mb}MB` : 'Piccolo'
 }
 
-const getMediaType = (file: File): string => {
-  return file.type.startsWith('video/') ? 'Video' : 'Immagine'
+const getFileUrl = (file: File) => {
+  return URL.createObjectURL(file)
 }
 </script>
 
 <template>
   <div class="media-uploader">
-    <!-- Area trascinamento -->
     <div
-      class="upload-area border-2 border-dashed rounded-3 p-4 text-center cursor-pointer"
-      :class="{ 'border-primary': isDragging, 'bg-light': !isDragging }"
+      class="upload-area border-2 border-dashed rounded-3 p-4 text-center cursor-pointer position-relative"
+      :class="{ 'border-primary bg-primary bg-opacity-10': isDragging, 'bg-light': !isDragging }"
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
       @drop.prevent="isDragging = false; handleFilesSelected(($event as DragEvent).dataTransfer?.files || null)"
@@ -84,54 +81,58 @@ const getMediaType = (file: File): string => {
     >
       <BIIcon name="it-upload" size="xl" color="primary" class="mb-3" />
       <div class="h6 font-weight-bold">
-        Trascina i file qui o <span class="text-primary">clicca per selezionare</span>
+        Trascina i file qui o <span class="text-primary text-decoration-underline">clicca per selezionare</span>
       </div>
-      <small class="text-muted d-block">
-        Massimo {{ maxFiles }} file, fino a {{ maxFileSize }}MB per file
+      <small class="text-muted d-block mt-2">
+        Massimo {{ maxFiles }} file ({{ maxFileSize }}MB max per file). Tipi: {{ acceptedTypes }}
       </small>
     </div>
 
-    <!-- Input nascosto -->
     <input
       ref="fileInputRef"
       type="file"
-      :multiple="props.maxFiles > 1"
+      :multiple="maxFiles > 1"
       :accept="acceptedTypes"
       :disabled="disabled"
-      style="display: none"
+      class="d-none"
       @change="handleFilesSelected(($event.target as HTMLInputElement).files)"
     />
 
-    <!-- Errori -->
-    <div v-if="error" class="alert alert-danger mt-3 mb-0" role="alert">
+    <div v-if="error" class="alert alert-danger mt-3 py-2 small" role="alert">
       {{ error }}
     </div>
 
-    <!-- Lista file -->
-    <div v-if="files.length > 0" class="mt-4">
-      <h6 class="font-weight-bold mb-3">File caricati ({{ files.length }}/{{ maxFiles }})</h6>
-      <div class="list-group">
-        <div v-for="(file, idx) in files" :key="`file-${idx}`" class="list-group-item d-flex justify-content-between align-items-center">
-          <div class="d-flex align-items-center gap-3">
-            <BIIcon 
-              :name="file.type.startsWith('video/') ? 'it-video' : 'it-image'" 
-              size="lg"
-              color="primary"
-            />
-            <div>
-              <div class="font-weight-semibold small">{{ file.name }}</div>
-              <small class="text-muted">{{ getMediaType(file) }} • {{ formatFileSize(file.size) }}</small>
+    <div v-if="files.length > 0" class="mt-4 row g-3">
+      <div v-for="(file, idx) in files" :key="`file-${idx}`" class="col-6 col-md-4 col-lg-3">
+        <div class="card h-100 position-relative shadow-sm border-0">
+          <div class="ratio ratio-1x1 bg-light rounded-top overflow-hidden">
+            <img v-if="file.type.startsWith('image/')" :src="getFileUrl(file)" class="object-fit-cover" :alt="file.name" />
+            <video v-else-if="file.type.startsWith('video/')" :src="getFileUrl(file)" class="object-fit-cover"></video>
+            <div v-else class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-25">
+              <BIIcon name="it-file" size="xl" color="secondary" />
             </div>
           </div>
+          
           <button
             type="button"
-            class="btn btn-sm btn-link p-0"
-            @click="removeFile(idx)"
+            class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 rounded-circle p-1 d-flex align-items-center justify-content-center shadow"
+            style="width: 28px; height: 28px; z-index: 10;"
+            @click.stop="removeFile(idx)"
             :disabled="disabled"
-            :aria-label="`Rimuovi ${file.name}`"
+            title="Rimuovi file"
           >
-            <BIIcon name="it-close-circle" />
+            <BIIcon name="it-close" size="sm" color="white" />
           </button>
+          
+          <div class="card-body p-2 d-flex flex-column justify-content-between">
+            <div class="small text-truncate fw-semibold" :title="file.name">{{ file.name }}</div>
+            <div class="small text-muted d-flex justify-content-between align-items-center mt-1">
+              <span>{{ formatFileSize(file.size) }}</span>
+              <div class="progress flex-grow-1 ms-2" style="height: 4px;" title="Pronto per l'upload">
+                <div class="progress-bar bg-success w-100" role="progressbar"></div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -140,21 +141,26 @@ const getMediaType = (file: File): string => {
 
 <style scoped>
 .upload-area {
-  transition: all 0.3s ease;
-  cursor: pointer;
-  
-  &:hover:not(.border-primary) {
-    background-color: rgba(0, 111, 157, 0.05);
-  }
+  transition: all 0.2s ease-in-out;
+}
+.upload-area:hover:not(.border-primary) {
+  background-color: #f8f9fa !important;
+  border-color: #0066cc !important;
 }
-
 .cursor-pointer {
   cursor: pointer;
 }
-
+.border-dashed {
+  border-style: dashed !important;
+}
 .border-2 {
   border-width: 2px !important;
 }
+.object-fit-cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
 </style>
 
 

app/components/MessageComposer.vue

@@ -1,56 +1,99 @@
 <script setup lang="ts">
 interface Emits {
-  (e: 'send', message: string): void
+  (e: 'send', message: string, files: File[]): void
 }
 
-// Unica dichiarazione di defineEmits
 const emit = defineEmits<Emits>()
 
 const message = ref('')
 const isSubmitting = ref(false)
+const files = ref<File[]>([])
+const fileInputRef = ref<HTMLInputElement>()
 
 const handleSubmit = () => {
-  if (message.value.trim() === '') return
+  if (message.value.trim() === '' && files.value.length === 0) return
 
-  emit('send', message.value)
+  emit('send', message.value, [...files.value])
   message.value = ''
+  files.value = []
 }
 
 const handleKeydown = (e: KeyboardEvent) => {
-  // Ctrl/Cmd + Enter per inviare
   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-    // Previene l'andata a capo predefinita della textarea
     e.preventDefault()
     handleSubmit()
   }
 }
+
+const handleFileSelect = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  if (target.files) {
+    const newFiles = Array.from(target.files)
+    files.value = [...files.value, ...newFiles].slice(0, 5) // max 5
+  }
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const removeFile = (idx: number) => {
+  files.value.splice(idx, 1)
+}
 </script>
 
 <template>
-  <div class="message-composer mt-4 border-top pt-3">
-    <!-- Non serve passare emit qui -->
+  <div class="message-composer mt-3">
     <form @submit.prevent="handleSubmit">
-      <div class="input-group">
+      <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" />
+          <span class="text-truncate file-name">{{ file.name }}</span>
+          <button type="button" class="btn-close btn-close-sm" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
+        </div>
+      </div>
+
+      <div class="composer-shell">
+        <input 
+          ref="fileInputRef"
+          type="file" 
+          multiple 
+          class="d-none" 
+          @change="handleFileSelect"
+          accept="image/*,video/*,.pdf,.doc,.docx"
+        />
+
+        <button
+          type="button"
+          class="btn btn-outline-primary btn-icon composer-attach"
+          title="Allega file"
+          @click="fileInputRef?.click()"
+          :disabled="isSubmitting || files.length >= 5"
+        >
+          <BIIcon name="it-clip" size="sm" />
+        </button>
+
         <textarea
           v-model="message"
-            class="form-control"
-            placeholder="Scrivi un messaggio... (Ctrl+Enter per inviare)"
+          class="form-control composer-textarea"
+          placeholder="Scrivi aggiornamento o domanda"
           rows="2"
           :disabled="isSubmitting"
           @keydown="handleKeydown"
         />
+
         <button
           type="submit"
-            class="btn btn-primary"
-            :disabled="isSubmitting || message.trim() === ''"
+          class="btn btn-primary composer-submit"
+          :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
         >
           <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
           <BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
           Invia
         </button>
       </div>
+
       <small class="text-muted d-block mt-2">
-        💡 <strong>Tip:</strong> Premi Ctrl+Enter per inviare velocemente
+        `Ctrl` + `Invio` per inviare. Fino a 5 allegati.
       </small>
     </form>
   </div>
@@ -58,26 +101,79 @@ const handleKeydown = (e: KeyboardEvent) => {
 
 <style scoped>
 .message-composer {
-  background-color: #f9f9f9;
-  border-radius: 0.5rem;
-  padding: 1rem;
+  border-top: 1px solid #d9e3ee;
+  padding-top: 1rem;
 }
 
-textarea {
-  resize: vertical;
-  font-family: inherit;
-}
-
-.input-group {
+.message-files {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-textarea {
-  flex: 1;
+.message-file-chip {
+  align-items: center;
+  background: #fff;
+  border: 1px solid #d9e3ee;
+  border-radius: 4px;
+  display: inline-flex;
+  gap: 0.5rem;
+  max-width: 100%;
+  padding: 0.4rem 0.75rem;
 }
 
-button {
+.file-name {
+  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) {
+  .composer-shell {
+    grid-template-columns: auto 1fr;
+  }
+
+  .composer-textarea {
+    grid-column: 1 / -1;
+  }
+
+  .composer-submit {
+    grid-column: 2;
+    justify-self: end;
+  }
+}
 </style>

app/components/MessageList.vue

@@ -4,12 +4,20 @@ import type { Message } from '~/types/api'
 interface Props {
   messages: Message[]
   isLoading?: boolean
+  canFlagMessage?: (message: Message) => boolean
+  isFlaggingMessageId?: number | null
 }
 
 withDefaults(defineProps<Props>(), {
-  isLoading: false
+  isLoading: false,
+  canFlagMessage: () => false,
+  isFlaggingMessageId: null,
 })
 
+const emit = defineEmits<{
+  (e: 'flag', message: Message): void
+}>()
+
 const formatDate = (dateString: string): string => {
   const date = new Date(dateString)
   const today = new Date()
@@ -28,6 +36,9 @@ const formatDate = (dateString: string): string => {
 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() || '?'
 </script>
 
 <template>
@@ -38,32 +49,58 @@ const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userI
       </div>
     </div>
 
-    <div v-else-if="messages.length === 0" class="alert alert-info text-center" role="alert">
-      Nessun messaggio disponibile. Sii il primo a scrivere!
+    <div v-else-if="messages.length === 0" class="message-empty-state" role="alert">
+      <BIIcon name="it-comment" size="lg" color="primary" class="mb-2" />
+      <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" :key="msg.id" class="message-bubble mb-3">
       <div
-          class="message-bubble-content p-3 rounded-3"
+        v-for="msg in messages"
+        :key="msg.id"
+        class="message-row"
+        :class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
+      >
+        <div v-if="!isCurrentUser(msg.user_id)" class="message-avatar" aria-hidden="true">
+          {{ senderInitials(msg) }}
+        </div>
+        <div
+          class="message-bubble-content"
           :class="{
-            'bg-primary text-white': isCurrentUser(msg.user_id),
-            'bg-light border': !isCurrentUser(msg.user_id)
+            'message-bubble-outgoing': isCurrentUser(msg.user_id),
+            'message-bubble-incoming': !isCurrentUser(msg.user_id)
           }"
         >
-          <!-- Nome mittente (solo per messaggi non miei) -->
-          <div v-if="!isCurrentUser(msg.user_id)" class="small font-weight-bold mb-2 text-primary">
+          <div class="message-meta">
+            <span v-if="!isCurrentUser(msg.user_id)" class="message-author">
+              {{ msg.first_name }} {{ msg.last_name }}
+            </span>
+            <span v-else class="message-author">Tu</span>
+            <span class="message-time">
+              {{ formatDate(msg.created_at) }}
+            </span>
+          </div>
+
+          <div v-if="!isCurrentUser(msg.user_id)" class="small font-weight-bold mb-2 text-primary d-none">
             {{ msg.first_name }} {{ msg.last_name }}
           </div>
 
-          <!-- Corpo messaggio -->
-          <div class="message-body" :class="{ 'text-break': true }">
+          <div class="message-body">
             {{ msg.body }}
           </div>
 
-          <!-- Timestamp -->
-          <div class="small mt-2" :class="{ 'text-white-50': isCurrentUser(msg.user_id), 'text-muted': !isCurrentUser(msg.user_id) }">
-            {{ formatDate(msg.created_at) }}
+          <div v-if="canFlagMessage(msg)" class="message-actions">
+            <button
+              type="button"
+              class="btn btn-link btn-xs px-0"
+              :disabled="isFlaggingMessageId === msg.id"
+              @click="emit('flag', msg)"
+            >
+              <span v-if="isFlaggingMessageId === msg.id" class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
+              <BIIcon v-else name="it-flag" size="xs" class="me-1" />
+              Segnala messaggio
+            </button>
           </div>
         </div>
       </div>
@@ -73,34 +110,107 @@ const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userI
 
 <style scoped>
 .message-list {
-  max-height: 500px;
+  border: 1px solid #d9e3ee;
+  border-radius: 4px;
+  max-height: 34rem;
   overflow-y: auto;
   padding: 1rem;
-  background-color: #f9f9f9;
-  border-radius: 0.5rem;
-  border: 1px solid #e9ecef;
 }
 
 .messages-container {
   display: flex;
   flex-direction: column;
+  gap: 0.875rem;
 }
 
-.message-bubble {
+.message-empty-state {
+  align-items: center;
+  color: #5c6f82;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 14rem;
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.message-row {
+  align-items: flex-end;
+  display: flex;
+  gap: 0.75rem;
   justify-content: flex-start;
 }
 
+.message-row.is-current-user {
+  justify-content: flex-end;
+}
+
+.message-avatar {
+  align-items: center;
+  background: #e6f0fa;
+  border-radius: 999px;
+  color: #17324d;
+  display: inline-flex;
+  flex: 0 0 2.25rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  height: 2.25rem;
+  justify-content: center;
+}
+
 .message-bubble-content {
-  max-width: 75%;
-  word-wrap: break-word;
+  border-radius: 4px;
+  max-width: min(100%, 40rem);
+  padding: 0.875rem 1rem;
+  word-break: break-word;
+}
+
+.message-bubble-incoming {
+  background: #f5f7f9;
+  border: 1px solid #d9e3ee;
+  color: #17324d;
+}
+
+.message-bubble-outgoing {
+  background: #06c;
+  color: #fff;
+}
+
+.message-meta {
+  align-items: center;
+  display: flex;
+  font-size: 0.8125rem;
+  gap: 0.75rem;
+  justify-content: space-between;
+  margin-bottom: 0.375rem;
+}
+
+.message-author {
+  font-weight: 700;
+}
+
+.message-time {
+  opacity: 0.78;
+  white-space: nowrap;
 }
 
 .message-body {
-  white-space: pre-wrap;
   line-height: 1.4;
+  white-space: pre-wrap;
+}
+
+.message-actions {
+  margin-top: 0.5rem;
+  text-align: right;
+}
+
+.message-actions .btn {
+  font-size: 0.75rem;
+}
+
+@media (max-width: 767.98px) {
+  .message-bubble-content {
+    max-width: calc(100% - 3rem);
+  }
 }
 </style>
-
-
-

app/components/ReportForm.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import type { Category, CreateReportRequest } from '~/types/api'
+import type { LeafletMouseEvent, Map as LeafletMap, Marker as LeafletMarker } from 'leaflet'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
+import { reverseGeocode, searchAddresses } from '~/utils/geocoding'
 
 interface Props {
   isLoading?: boolean
@@ -10,6 +14,12 @@ interface Emits {
   (e: 'submit', report: CreateReportRequest, media: File[]): void
 }
 
+interface GeocodingSuggestion {
+  label: string
+  latitude: number
+  longitude: number
+}
+
 const props = withDefaults(defineProps<Props>(), {
   isLoading: false,
   categories: () => []
@@ -29,6 +39,285 @@ const media = ref<File[]>([])
 const errors = ref<Record<string, string>>({})
 const successMessage = ref(false)
 const isGettingLocation = ref(false)
+const addressSuggestions = ref<GeocodingSuggestion[]>([])
+const isSearchingAddress = ref(false)
+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
+let marker: LeafletMarker | null = null
+let addressSearchTimeout: ReturnType<typeof setTimeout> | null = null
+let manualLocationSyncTimeout: ReturnType<typeof setTimeout> | null = null
+let addressSearchRequestId = 0
+let reverseGeocodeRequestId = 0
+let lastSyncedLocationKey = ''
+let skipNextAddressSearch = false
+
+const loadLeaflet = async () => {
+  if (leaflet) return leaflet
+
+  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',
+    shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41]
+  })
+  leafletModule.Marker.prototype.options.icon = defaultIcon
+
+  leaflet = leafletModule
+  return leaflet
+}
+
+const toLocationKey = (lat: number, lng: number) => `${lat.toFixed(6)}:${lng.toFixed(6)}`
+
+const clearAddressSuggestions = () => {
+  addressSuggestions.value = []
+  showAddressSuggestions.value = false
+}
+
+const cancelPendingAddressSearch = () => {
+  addressSearchRequestId += 1
+  isSearchingAddress.value = false
+
+  if (addressSearchTimeout) {
+    clearTimeout(addressSearchTimeout)
+    addressSearchTimeout = null
+  }
+}
+
+const cancelPendingReverseGeocode = () => {
+  reverseGeocodeRequestId += 1
+  isResolvingAddress.value = false
+}
+
+const setAddressValue = (address: string) => {
+  cancelPendingAddressSearch()
+  skipNextAddressSearch = true
+  form.value.address = address
+
+  if (errors.value.address && address.trim()) {
+    errors.value.address = ''
+  }
+}
+
+const fetchAddressSuggestions = async (query: string) => {
+  const requestId = ++addressSearchRequestId
+  isSearchingAddress.value = true
+  addressSearchError.value = ''
+
+  try {
+    if (requestId !== addressSearchRequestId) {
+      return
+    }
+
+    const suggestions = await searchAddresses(query)
+
+    if (requestId !== addressSearchRequestId) {
+      return
+    }
+
+    addressSuggestions.value = suggestions
+    showAddressSuggestions.value = suggestions.length > 0
+
+    if (!suggestions.length) {
+      addressSearchError.value = 'Nessun indirizzo trovato nel Comune di Bari.'
+    }
+  } catch {
+    if (requestId !== addressSearchRequestId) {
+      return
+    }
+
+    clearAddressSuggestions()
+    addressSearchError.value = 'Ricerca indirizzi non disponibile al momento.'
+  } finally {
+    if (requestId === addressSearchRequestId) {
+      isSearchingAddress.value = false
+    }
+  }
+}
+
+const resolveAddressFromCoordinates = async (lat: number, lng: number, fallbackAddress = '') => {
+  const requestId = ++reverseGeocodeRequestId
+  isResolvingAddress.value = true
+  addressSearchError.value = ''
+
+  try {
+    if (requestId !== reverseGeocodeRequestId) {
+      return
+    }
+
+    const resolvedAddress = (await reverseGeocode(lat, lng))?.trim() || fallbackAddress.trim()
+
+    if (resolvedAddress) {
+      setAddressValue(resolvedAddress)
+      clearAddressSuggestions()
+      return
+    }
+
+    if (!form.value.address.trim()) {
+      addressSearchError.value = 'Indirizzo non trovato per coordinate selezionate.'
+    }
+  } catch {
+    if (requestId !== reverseGeocodeRequestId) {
+      return
+    }
+
+    if (fallbackAddress.trim()) {
+      setAddressValue(fallbackAddress.trim())
+      clearAddressSuggestions()
+      return
+    }
+
+    if (!form.value.address.trim()) {
+      addressSearchError.value = 'Impossibile recuperare indirizzo da coordinate.'
+    }
+  } finally {
+    if (requestId === reverseGeocodeRequestId) {
+      isResolvingAddress.value = false
+    }
+  }
+}
+
+const handleAddressFocus = () => {
+  if (addressSuggestions.value.length > 0) {
+    showAddressSuggestions.value = true
+  }
+}
+
+const handleAddressBlur = () => {
+  setTimeout(() => {
+    showAddressSuggestions.value = false
+  }, 150)
+}
+
+const updateLocation = async (
+  lat: number,
+  lng: number,
+  options: {
+    zoomTo?: boolean
+    syncAddress?: boolean
+    fallbackAddress?: string
+  } = {}
+) => {
+  const { zoomTo = false, syncAddress = true, fallbackAddress = '' } = options
+
+  if (!isWithinBariBounds(lat, lng)) {
+    errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+    return
+  }
+
+  const roundedLat = Number(lat.toFixed(6))
+  const roundedLng = Number(lng.toFixed(6))
+
+  lastSyncedLocationKey = toLocationKey(roundedLat, roundedLng)
+  form.value.latitude = roundedLat
+  form.value.longitude = roundedLng
+
+  if (map && leaflet) {
+    if (!marker) {
+      marker = leaflet.marker([roundedLat, roundedLng]).addTo(map)
+    } else {
+      marker.setLatLng([roundedLat, roundedLng])
+    }
+    if (zoomTo) {
+      map.setView([roundedLat, roundedLng], 16)
+    }
+  }
+  
+  if (errors.value.location) {
+    errors.value.location = ''
+  }
+
+  if (syncAddress) {
+    await resolveAddressFromCoordinates(roundedLat, roundedLng, fallbackAddress)
+  } else if (fallbackAddress.trim()) {
+    setAddressValue(fallbackAddress.trim())
+  }
+}
+
+const initMap = async () => {
+  if (!import.meta.client || !mapContainer.value || map) return
+
+  const L = await loadLeaflet()
+  if (!mapContainer.value || map) return
+
+  const bariBounds = L.latLngBounds(
+    [BARI_BOUNDS.south, BARI_BOUNDS.west],
+    [BARI_BOUNDS.north, BARI_BOUNDS.east]
+  )
+
+  map = L.map(mapContainer.value, {
+    maxBounds: bariBounds,
+    maxBoundsViscosity: 1,
+    minZoom: 12
+  }).setView(BARI_CENTER, 12)
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; OpenStreetMap contributors'
+  }).addTo(map)
+  map.fitBounds(bariBounds)
+
+  map.on('click', (e: LeafletMouseEvent) => {
+    if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
+      errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+      return
+    }
+
+    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 })
+  }
+}
+
+const selectAddressSuggestion = async (suggestion: GeocodingSuggestion) => {
+  addressSearchError.value = ''
+  clearAddressSuggestions()
+  setAddressValue(suggestion.label)
+  await updateLocation(suggestion.latitude, suggestion.longitude, {
+    zoomTo: true,
+    syncAddress: false
+  })
+}
+
+const handleAddressEnter = async () => {
+  if (addressSuggestions.value.length === 0) {
+    return
+  }
+
+  await selectAddressSuggestion(addressSuggestions.value[0])
+}
+
+onMounted(() => {
+  void initMap()
+})
+
+onUnmounted(() => {
+  cancelPendingAddressSearch()
+  cancelPendingReverseGeocode()
+
+  if (manualLocationSyncTimeout) {
+    clearTimeout(manualLocationSyncTimeout)
+    manualLocationSyncTimeout = null
+  }
+
+  if (map) {
+    map.remove()
+    map = null
+  }
+})
 
 const validateForm = (): boolean => {
   errors.value = {}
@@ -37,7 +326,9 @@ const validateForm = (): boolean => {
     errors.value.category_id = 'Seleziona una categoria'
   }
   if (!form.value.latitude || !form.value.longitude) {
-    errors.value.location = 'Imposta la posizione'
+    errors.value.location = 'Imposta la posizione sulla mappa'
+  } else if (!isWithinBariBounds(form.value.latitude, form.value.longitude)) {
+    errors.value.location = 'La posizione deve essere nel Comune di Bari'
   }
   if (!form.value.address?.trim()) {
     errors.value.address = 'Inserisci l\'indirizzo'
@@ -63,13 +354,9 @@ const getGeolocation = async () => {
       navigator.geolocation.getCurrentPosition(resolve, reject)
     })
 
-    form.value.latitude = Number(position.coords.latitude.toFixed(6))
-    form.value.longitude = Number(position.coords.longitude.toFixed(6))
-
-    // Richiedi indirizzo da coordinate (reverse geocoding)
-    // Se il backend non lo fa, userà le coord così come sono
+    await updateLocation(position.coords.latitude, position.coords.longitude, { zoomTo: true })
   } catch (error: any) {
-    errors.value.location = 'Impossibile ottenere la posizione. Inserisci manualmente.'
+    errors.value.location = 'Impossibile ottenere la posizione. Clicca sulla mappa per inserirla manualmente.'
   } finally {
     isGettingLocation.value = false
   }
@@ -99,26 +386,95 @@ const resetForm = () => {
   }
   media.value = []
   errors.value = {}
+  addressSearchError.value = ''
+  clearAddressSuggestions()
+  cancelPendingAddressSearch()
+  cancelPendingReverseGeocode()
+  lastSyncedLocationKey = ''
+  skipNextAddressSearch = false
+  
+  if (marker && map) {
+    map.removeLayer(marker)
+    marker = null
+    map.setView(BARI_CENTER, 12)
+  }
 }
 
-// Osserva cambio categoria
 watch(() => form.value.category_id, () => {
   if (errors.value.category_id) {
     errors.value.category_id = ''
   }
 })
+
+watch(() => form.value.address, (newAddress) => {
+  if (skipNextAddressSearch) {
+    skipNextAddressSearch = false
+    return
+  }
+
+  cancelPendingReverseGeocode()
+
+  if (errors.value.address && newAddress.trim()) {
+    errors.value.address = ''
+  }
+
+  if (addressSearchTimeout) {
+    clearTimeout(addressSearchTimeout)
+    addressSearchTimeout = null
+  }
+
+  if (newAddress.trim().length < 3) {
+    isSearchingAddress.value = false
+    addressSearchError.value = ''
+    clearAddressSuggestions()
+    return
+  }
+
+  addressSearchTimeout = setTimeout(() => {
+    void fetchAddressSuggestions(newAddress.trim())
+  }, 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) {
+      if (!marker) {
+        marker = leaflet.marker([newLat, newLng]).addTo(map)
+      } else {
+        marker.setLatLng([newLat, newLng])
+      }
+      map.setView([newLat, newLng], 16)
+    }
+  }
+
+  if (!newLat || !newLng) {
+    return
+  }
+
+  const locationKey = toLocationKey(newLat, newLng)
+  if (locationKey === lastSyncedLocationKey) {
+    return
+  }
+
+  if (manualLocationSyncTimeout) {
+    clearTimeout(manualLocationSyncTimeout)
+  }
+
+  manualLocationSyncTimeout = setTimeout(() => {
+    void updateLocation(newLat, newLng, { zoomTo: true })
+  }, 500)
+})
 </script>
 
 <template>
   <div class="report-form">
-    <!-- Successo -->
     <div v-if="successMessage" class="alert alert-success alert-dismissible fade show" role="alert">
       Segnalazione creata con successo! Reindirizzamento...
       <button type="button" class="btn-close" @click="successMessage = false"></button>
     </div>
 
     <form @submit.prevent="handleSubmit">
-      <!-- CATEGORIA -->
       <div class="mb-4">
         <label for="category" class="form-label fw-bold">
           <BIIcon name="it-list" size="sm" color="primary" class="me-2" />
@@ -141,19 +497,12 @@ watch(() => form.value.category_id, () => {
         </div>
       </div>
 
-      <!-- GEOLOCALIZZAZIONE -->
       <div class="mb-4">
         <label class="form-label fw-bold">
           <BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
           Posizione *
         </label>
-
-        <div v-if="form.latitude && form.longitude" class="alert alert-info mb-3">
-          <strong>Coordinate:</strong> {{ form.latitude }}, {{ form.longitude }}
-          <button type="button" class="btn btn-sm btn-link float-end" @click="form.latitude = null; form.longitude = null">
-            Cancella
-          </button>
-        </div>
+        <p class="small text-muted mb-2">Le segnalazioni sono abilitate solo entro confini del Comune di Bari.</p>
 
         <button
           type="button"
@@ -166,9 +515,14 @@ watch(() => form.value.category_id, () => {
           {{ isGettingLocation ? 'Localizzazione in corso...' : 'Usa posizione attuale' }}
         </button>
 
-        <div class="alert alert-warning mb-3 small" role="alert">
-          Se la geolocalizzazione non funziona, inserisci manualmente coordinate o indirizzo approssimativo.
-        </div>
+        <ClientOnly>
+          <div 
+            ref="mapContainer" 
+            class="map-container mb-3 border rounded" 
+            :class="{ 'border-danger': errors.location }"
+            @vue:mounted="initMap"
+          ></div>
+        </ClientOnly>
 
         <div class="row">
           <div class="col-md-6 mb-3">
@@ -176,7 +530,7 @@ watch(() => form.value.category_id, () => {
               v-model.number="form.latitude"
               type="number"
               step="0.000001"
-              class="form-control"
+              class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
               placeholder="Latitudine (es. 45.5)"
               required
@@ -187,39 +541,66 @@ watch(() => form.value.category_id, () => {
               v-model.number="form.longitude"
               type="number"
               step="0.000001"
-              class="form-control"
+              class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
               placeholder="Longitudine (es. 10.2)"
               required
             />
           </div>
         </div>
-        <div v-if="errors.location" class="invalid-feedback d-block">
+        <div v-if="errors.location" class="invalid-feedback d-block mt-0 mb-3">
           {{ errors.location }}
         </div>
       </div>
 
-      <!-- INDIRIZZO -->
       <div class="mb-4">
         <label for="address" class="form-label fw-bold">
           <BIIcon name="it-home" size="sm" color="primary" class="me-2" />
           Indirizzo *
         </label>
+        <div class="position-relative">
           <input
             id="address"
             v-model="form.address"
             type="text"
             class="form-control"
             :class="{ 'is-invalid': errors.address }"
-          placeholder="Es. Via Roma 123, Milano"
+            placeholder="Es. Via Sparano 12, Bari"
+            autocomplete="street-address"
             required
+            @focus="handleAddressFocus"
+            @blur="handleAddressBlur"
+            @keydown.enter.prevent="handleAddressEnter"
           />
+          <div
+            v-if="showAddressSuggestions && addressSuggestions.length > 0"
+            class="list-group position-absolute w-100 shadow-sm rounded-3 overflow-hidden address-suggestions"
+          >
+            <button
+              v-for="suggestion in addressSuggestions"
+              :key="`${suggestion.latitude}-${suggestion.longitude}-${suggestion.label}`"
+              type="button"
+              class="list-group-item list-group-item-action text-start"
+              @mousedown.prevent="selectAddressSuggestion(suggestion)"
+            >
+              {{ suggestion.label }}
+            </button>
+          </div>
+        </div>
+        <div v-if="isSearchingAddress" class="form-text">
+          Ricerca indirizzi in corso...
+        </div>
+        <div v-else-if="isResolvingAddress" class="form-text">
+          Recupero indirizzo da coordinate...
+        </div>
+        <div v-else-if="addressSearchError" class="form-text text-muted">
+          {{ addressSearchError }}
+        </div>
         <div v-if="errors.address" class="invalid-feedback">
           {{ errors.address }}
         </div>
       </div>
 
-      <!-- DESCRIZIONE -->
       <div class="mb-4">
         <label for="description" class="form-label fw-bold">
           <BIIcon name="it-write" size="sm" color="primary" class="me-2" />
@@ -242,7 +623,6 @@ watch(() => form.value.category_id, () => {
         </div>
       </div>
 
-      <!-- MEDIA -->
       <div class="mb-4">
         <label class="form-label fw-bold">
           <BIIcon name="it-camera" size="sm" color="primary" class="me-2" />
@@ -251,7 +631,6 @@ watch(() => form.value.category_id, () => {
         <MediaUploader v-model="media" :max-files="5" :max-file-size="50" />
       </div>
 
-      <!-- BOTTONI -->
       <div class="d-grid gap-2 d-md-flex justify-content-md-between">
         <button
           type="button"
@@ -281,6 +660,20 @@ watch(() => form.value.category_id, () => {
   padding: 2rem;
 }
 
+.map-container {
+  height: 300px;
+  width: 100%;
+  z-index: 1; /* Fix for Bootstrap elements overlapping map */
+}
+
+.address-suggestions {
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 10;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
 textarea {
   font-family: inherit;
   resize: vertical;
@@ -292,7 +685,3 @@ textarea {
   align-items: center;
 }
 </style>
-
-
-
-

app/components/ReportTable.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { Report } from '~/types/api'
+
+type ActionVariant = 'open' | 'manage'
+
+interface Props {
+  reports: Report[]
+  detailBasePath?: string
+  actionVariant?: ActionVariant
+  actionLabel?: string
+  showAssignee?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  detailBasePath: '/reports',
+  actionVariant: 'open',
+  actionLabel: 'Open report',
+  showAssignee: false,
+})
+
+const emit = defineEmits<{
+  (e: 'take', id: number): void
+}>()
+
+const formatDate = (dateString?: string): string => {
+  if (!dateString) return '-'
+  return new Date(dateString).toLocaleDateString('it-IT', {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+  })
+}
+
+const reportHref = (report: Report) => `${props.detailBasePath}/${report.id}`
+</script>
+
+<template>
+  <div class="table-responsive report-table-wrapper">
+    <table class="table table-hover report-table mb-0">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">Categoria</th>
+          <th scope="col">Indirizzo</th>
+          <th scope="col">Stato</th>
+          <th v-if="showAssignee" scope="col">Operatore</th>
+          <th scope="col">Creazione</th>
+          <th scope="col" class="text-end">Azioni</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="report in reports" :key="report.id" class="align-middle">
+          <td class="report-table-id">#{{ report.id }}</td>
+          <td class="text-nowrap">{{ report.category_name || '-' }}</td>
+          <td>
+            <span class="report-address" :title="report.address">
+              {{ report.address || '-' }}
+            </span>
+          </td>
+          <td>
+            <StatusBadge :status="report.status" />
+          </td>
+          <td v-if="showAssignee" class="text-muted">
+            {{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}
+          </td>
+          <td class="text-muted text-nowrap">{{ formatDate(report.created_at) }}</td>
+          <td class="text-end">
+            <button
+              v-if="actionVariant === 'manage'"
+              type="button"
+              class="btn btn-primary btn-xs"
+              @click="emit('take', report.id)"
+            >
+              Prendi in carico
+            </button>
+            <NuxtLink
+              v-else
+              :to="reportHref(report)"
+              class="btn btn-outline-primary btn-xs btn-icon"
+              :aria-label="actionLabel"
+              :title="actionLabel"
+            >
+              <BIIcon name="it-arrow-right" size="xs" />
+            </NuxtLink>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

app/components/StatusBadge.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ReportStatus } from '~/types/api'
+
+interface Props {
+  status: ReportStatus
+}
+
+const props = defineProps<Props>()
+
+const badgeConfig = computed(() => {
+  const config: Record<ReportStatus, { color: string, text: string, icon: string }> = {
+    OPEN: { color: 'info', text: 'Aperta', icon: 'it-info-circle' },
+    UNDER_REVIEW: { color: 'warning', text: 'In Revisione', icon: 'it-clock' },
+    ASSIGNED: { color: 'primary', text: 'Assegnata', icon: 'it-user' },
+    IN_PROGRESS: { color: 'primary', text: 'In Lavorazione', icon: 'it-settings' },
+    RESOLVED: { color: 'success', text: 'Risolta', icon: 'it-check-circle' },
+    REJECTED: { color: 'danger', text: 'Rifiutata', icon: 'it-close-circle' },
+    CLOSED: { color: 'secondary', text: 'Chiusa', icon: 'it-locked' }
+  }
+  
+  return config[props.status] || { color: 'secondary', text: props.status, icon: 'it-info-circle' }
+})
+</script>
+
+<template>
+  <span class="badge badge-pill rounded-pill d-inline-flex align-items-center gap-1" :class="`bg-${badgeConfig.color}`">
+    <BIIcon :name="badgeConfig.icon" size="xs" color="white" />
+    {{ badgeConfig.text }}
+  </span>
+</template>
+
+<style scoped>
+.badge {
+  font-weight: 600;
+  padding: 0.35em 0.65em;
+}
+</style>

app/components/dashboard/AdminDashboard.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// Presumo tu abbia un useAdmin.ts (come da tuo elenco file) per le statistiche
 const { getOverviewStats } = useAdmin()
 
 const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
@@ -8,7 +7,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
 <template>
   <div>
     <div class="callout callout-highlight callout-danger mb-4">
-      <div class="callout-title">Pannello di Amministrazione</div>
+      <div class="callout-title">Pannello Admin</div>
       <p>Accesso di livello 1. Da qui puoi gestire le configurazioni di sistema, le categorie e moderare le segnalazioni.</p>
     </div>
 
@@ -18,7 +17,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
         <div class="card-wrapper card-space">
           <div class="card card-bg text-center">
             <div class="card-body">
-              <h2 class="text-primary">{{ statsRes.data?.total_users || 0 }}</h2>
+              <h2 class="text-primary">{{ statsRes.total_users || 0 }}</h2>
               <p class="card-text">Utenti Registrati</p>
             </div>
           </div>
@@ -28,7 +27,9 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
         <div class="card-wrapper card-space">
           <div class="card card-bg text-center">
             <div class="card-body">
-              <h2 class="text-warning">{{ statsRes.data?.open_reports || 0 }}</h2>
+              <h2 class="text-warning">
+                {{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
+              </h2>
               <p class="card-text">Segn. Aperte</p>
             </div>
           </div>
@@ -38,10 +39,16 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
 
     <h3 class="mb-3">Gestione Sistema</h3>
     <div class="row">
+      <div class="col-12 col-md-4 mb-3">
+        <NuxtLink to="/admin/catalog" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
+          <BIIcon name="it-list" size="sm" color="primary" class="mb-2" />
+          Categorie e Team
+        </NuxtLink>
+      </div>
       <div class="col-12 col-md-4 mb-3">
         <NuxtLink to="/admin/areas" class="btn btn-outline-primary w-100 py-3 d-flex flex-column align-items-center">
           <BIIcon name="it-map-marker" size="sm" color="primary" class="mb-2" />
-          Aree GeoJSON
+          Aree
         </NuxtLink>
       </div>
       <div class="col-12 col-md-4 mb-3">
@@ -50,7 +57,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
           Gestione Utenti
         </NuxtLink>
       </div>
-      <div class="col-12 col-md-4 mb-3">
+      <div class="col-12 col-md-6 mb-3">
         <NuxtLink to="/admin/moderation" class="btn btn-outline-danger w-100 py-3 d-flex flex-column align-items-center">
           <BIIcon name="it-warning" size="sm" color="danger" class="mb-2" />
           Moderazione Abusi

app/components/dashboard/CitizenDashboard.vue

@@ -4,247 +4,90 @@ import type { Report } from '~/types/api'
 const { user } = useAuth()
 const { getReports } = useReports()
 
-const page = ref(1)
-const perPage = ref(10)
-const filterStatus = ref<string>('') // Stringa vuota = "Tutte"
+const { data: reportsRes, pending } = useAsyncData('citizen-dashboard-reports', () => getReports({}))
 
-// Carichiamo TUTTE le segnalazioni per avere statistiche globali e filtri veloci
-const { data: reportsRes, pending } = useAsyncData('citizen-reports-all', () =>
-    getReports({}) // Non passiamo filtri alla chiamata API
-)
+const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
+const recentReports = computed(() => reports.value.slice(0, 4))
 
-// Dati grezzi dal server
-const rawReports = computed<Report[]>(() => reportsRes.value?.reports || [])
-
-// 1. STATISTICHE GLOBALI (Sempre basate su tutti i dati, ignorano i filtri)
-const statsGlobal = computed(() => {
-  const stats = { total: 0, OPEN: 0, IN_PROGRESS: 0, RESOLVED: 0 }
-  rawReports.value.forEach((report: Report) => {
-    stats.total++
-    if (report.status === 'OPEN') stats.OPEN++
-    if (report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED') stats.IN_PROGRESS++
-    if (report.status === 'RESOLVED') stats.RESOLVED++
-  })
-  return stats
+const stats = computed(() => {
+  return reports.value.reduce(
+    (acc, report) => {
+      acc.total++
+      if (report.status === 'OPEN') acc.open++
+      if (report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED') acc.inProgress++
+      if (report.status === 'RESOLVED' || report.status === 'CLOSED') acc.resolved++
+      return acc
+    },
+    { total: 0, open: 0, inProgress: 0, resolved: 0 }
+  )
 })
-
-// 2. FILTRO LATO CLIENT (Rende il cambio filtro istantaneo)
-const filteredReports = computed(() => {
-  if (!filterStatus.value) return rawReports.value
-
-  return rawReports.value.filter((report: Report) => {
-    // Raggruppiamo IN_PROGRESS e ASSIGNED sotto la stessa voce per l'utente
-    if (filterStatus.value === 'IN_PROGRESS') {
-      return report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED'
-    }
-    return report.status === filterStatus.value
-  })
-})
-
-// 3. PAGINAZIONE LATO CLIENT
-const paginatedReports = computed(() => {
-  const start = (page.value - 1) * perPage.value
-  const end = start + perPage.value
-  return filteredReports.value.slice(start, end)
-})
-
-const totalFiltered = computed(() => filteredReports.value.length)
-
-// GESTIONE FILTRI (Evita reload se clicchi il filtro attivo)
-const handleStatusFilter = (status: string) => {
-  const targetStatus = status === 'all' ? '' : status
-
-  // Se clicco sullo stesso filtro, non fare nulla
-  if (filterStatus.value === targetStatus) return
-
-  filterStatus.value = targetStatus
-  page.value = 1 // Reset alla prima pagina
-}
-
-const handlePageChange = (newPage: number) => {
-  page.value = newPage
-}
-
-// Helpers grafici
-const getStatusColor = (status: string): string => {
-  const colors: Record<string, string> = {
-    OPEN: 'primary', UNDER_REVIEW: 'info', ASSIGNED: 'warning',
-    IN_PROGRESS: 'warning', RESOLVED: 'success', REJECTED: 'danger', CLOSED: 'secondary',
-  }
-  return colors[status] || 'secondary'
-}
-
-const getStatusLabel = (status: string): string => {
-  const labels: Record<string, string> = {
-    OPEN: 'Aperta', UNDER_REVIEW: 'In revisione', ASSIGNED: 'Assegnata',
-    IN_PROGRESS: 'In corso', RESOLVED: 'Risolta', REJECTED: 'Rifiutata', CLOSED: 'Chiusa',
-  }
-  return labels[status] || status
-}
-
-const formatDate = (dateString: string): string => {
-  return new Date(dateString).toLocaleDateString('it-IT', {
-    day: '2-digit', month: '2-digit', year: '2-digit',
-  })
-}
 </script>
 
 <template>
   <div>
-    <!-- Callout Gamification -->
-    <div class="callout callout-highlight callout-success mb-4">
-      <div class="callout-title d-flex align-items-center">
-        <BIIcon name="it-star-full" size="sm" color="success" class="me-2" />
-        I tuoi Punti Cittadino
-      </div>
-      <p>
-        Hai accumulato <strong>{{ user?.points || 0 }} punti</strong>! Continua ad aiutare la comunità segnalando i problemi urbani.
-      </p>
-    </div>
-
-    <!-- STATISTICHE RAPIDE (Basate su statsGlobal, non cambiano filtrando) -->
-    <div class="row mb-5">
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card card-bg text-center">
-          <div class="card-body">
-            <div class="display-6 text-primary font-weight-bold">{{ statsGlobal.total }}</div>
-            <small class="text-muted">Totali</small>
+    <div class="row g-3 mb-4">
+      <div class="col-6 col-lg-3">
+        <div class="card card-bg dashboard-stat h-100">
+          <div class="card-body py-3">
+            <div class="stat-value">{{ stats.total }}</div>
+            <div class="small text-muted">Segnalazioni</div>
           </div>
         </div>
       </div>
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card card-bg text-center">
-          <div class="card-body">
-            <div class="display-6 text-warning font-weight-bold">{{ statsGlobal.OPEN }}</div>
-            <small class="text-muted">Aperte</small>
+      <div class="col-6 col-lg-3">
+        <div class="card card-bg dashboard-stat h-100">
+          <div class="card-body py-3">
+            <div class="stat-value">{{ stats.open }}</div>
+            <div class="small text-muted">Aperte</div>
           </div>
         </div>
       </div>
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card card-bg text-center">
-          <div class="card-body">
-            <div class="display-6 text-info font-weight-bold">{{ statsGlobal.IN_PROGRESS }}</div>
-            <small class="text-muted">In corso</small>
+      <div class="col-6 col-lg-3">
+        <div class="card card-bg dashboard-stat h-100">
+          <div class="card-body py-3">
+            <div class="stat-value">{{ stats.inProgress }}</div>
+            <div class="small text-muted">In corso</div>
           </div>
         </div>
       </div>
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card card-bg text-center">
-          <div class="card-body">
-            <div class="display-6 text-success font-weight-bold">{{ statsGlobal.RESOLVED }}</div>
-            <small class="text-muted">Risolte</small>
+      <div class="col-6 col-lg-3">
+        <div class="card card-bg dashboard-stat h-100">
+          <div class="card-body py-3">
+            <div class="stat-value">{{ user?.points || 0 }}</div>
+            <div class="small text-muted">Punti cittadino</div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- AZIONI RAPIDE E FILTRI -->
-    <div class="row mb-4">
-      <div class="col-12">
-        <div class="d-flex gap-2 flex-wrap align-items-center">
-          <NuxtLink to="/reports/create" class="btn btn-primary me-md-3">
+    <div class="d-flex flex-wrap gap-2 mb-4">
+      <NuxtLink to="/reports/new" class="btn btn-primary">
         <BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
         Nuova segnalazione
       </NuxtLink>
-
-          <div class="btn-group" role="group" aria-label="Filtri segnalazioni">
-            <button
-                type="button"
-                class="btn btn-sm"
-                :class="filterStatus === '' ? 'btn-primary' : 'btn-outline-primary'"
-                @click="handleStatusFilter('all')"
-            >
-              Tutte
-            </button>
-            <button
-                type="button"
-                class="btn btn-sm"
-                :class="filterStatus === 'OPEN' ? 'btn-primary' : 'btn-outline-primary'"
-                @click="handleStatusFilter('OPEN')"
-            >
-              Aperte
-            </button>
-            <button
-                type="button"
-                class="btn btn-sm"
-                :class="filterStatus === 'IN_PROGRESS' ? 'btn-primary' : 'btn-outline-primary'"
-                @click="handleStatusFilter('IN_PROGRESS')"
-            >
-              In corso
-            </button>
-            <button
-                type="button"
-                class="btn btn-sm"
-                :class="filterStatus === 'RESOLVED' ? 'btn-primary' : 'btn-outline-primary'"
-                @click="handleStatusFilter('RESOLVED')"
-            >
-              Risolte
-            </button>
-          </div>
-        </div>
-      </div>
+      <NuxtLink to="/reports" class="btn btn-outline-primary">
+        <BIIcon name="it-list" size="sm" class="me-2" />
+        Le mie segnalazioni
+      </NuxtLink>
     </div>
 
-    <div v-if="pending" class="progress-spinner progress-spinner-active my-5 mx-auto">
+    <div class="card card-bg">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+          <h2 class="h5 card-title mb-0">Aggiornamenti recenti</h2>
+          <NuxtLink to="/reports" class="btn btn-link btn-sm pe-0">Vedi tutte</NuxtLink>
+        </div>
+
+        <div v-if="pending" class="text-center py-4">
+          <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Caricamento...</span>
           </div>
-
-    <!-- TABELLA SEGNALAZIONI -->
-    <div class="row" v-else>
-      <div class="col-12">
-        <div v-if="filteredReports.length === 0" class="alert alert-info text-center" role="alert">
-          <h6>Nessuna segnalazione trovata</h6>
-          <p class="small text-muted mb-0">Non ci sono segnalazioni con lo stato "{{ filterStatus || 'Tutte' }}".</p>
         </div>
-
-        <div v-else class="table-responsive">
-          <table class="table table-hover border-bottom">
-            <thead class="table-light">
-            <tr>
-              <th scope="col" class="small">#ID</th>
-              <th scope="col" class="small">Categoria</th>
-              <th scope="col" class="small">Indirizzo</th>
-              <th scope="col" class="small">Stato</th>
-              <th scope="col" class="small">Creazione</th>
-              <th scope="col" class="text-center small">Azioni</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr v-for="report in paginatedReports" :key="report.id" class="align-middle">
-              <td class="small font-weight-semibold">#{{ report.id }}</td>
-              <td class="small">{{ report.category_name }}</td>
-              <td class="small">
-                  <span class="text-muted text-truncate" style="max-width: 200px; display: inline-block;">
-                    {{ report.address }}
-                  </span>
-              </td>
-              <td class="small">
-                  <span class="badge" :class="`bg-${getStatusColor(report.status)}`">
-                    {{ getStatusLabel(report.status) }}
-                  </span>
-              </td>
-              <td class="small text-muted">{{ formatDate(report.created_at) }}</td>
-              <td class="text-center">
-                <NuxtLink :to="`/reports/${report.id}`" class="btn btn-sm btn-outline-primary p-1">
-                  <BIIcon name="it-arrow-right" size="xs" />
-                </NuxtLink>
-              </td>
-            </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- Paginazione Client-Side (Opzionale: implementare se hai molti dati) -->
-        <div v-if="totalFiltered > perPage" class="d-flex justify-content-center mt-4">
-          <!-- Qui potresti inserire un componente Pagination se ne hai uno -->
+        <div v-else-if="recentReports.length === 0" class="alert alert-info mb-0" role="alert">
+          Non hai ancora creato segnalazioni.
         </div>
+        <ReportTable v-else :reports="recentReports" action-label="Apri segnalazione" />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.display-6 { font-size: 2.2rem; line-height: 1; }
-.table-hover tbody tr:hover { background-color: rgba(0, 111, 157, 0.03); }
-.btn-group .btn { min-width: 80px; }
-</style>

app/components/dashboard/OperatorDashboard.vue

@@ -14,46 +14,44 @@ const handleTakeReport = async (id: number) => {
 
 <template>
   <div class="row">
-    <!-- Colonna Sinistra: Segnalazioni da prendere in carico -->
     <div class="col-12 col-lg-6 mb-4">
-      <h3 class="mb-3 border-bottom pb-2">Da prendere in carico (OPEN)</h3>
-      <div class="list-group">
-        <div v-if="openReportsRes?.ok && openReportsRes.data?.items.length === 0" class="text-muted">
+      <div class="card card-bg h-100">
+        <div class="card-body">
+          <div class="d-flex justify-content-between align-items-center mb-3">
+            <h3 class="h5 mb-0">Da prendere in carico</h3>
+            <NuxtLink to="/operator" class="btn btn-link btn-sm pe-0">Apri coda</NuxtLink>
+          </div>
+          <div v-if="openReportsRes?.ok && openReportsRes.reports.length === 0" class="alert alert-info mb-0">
             Nessuna nuova segnalazione in ingresso.
           </div>
-        <div
-            v-for="report in openReportsRes?.data?.items" :key="report.id"
-            class="list-group-item d-flex justify-content-between align-items-center"
-        >
-          <div>
-            <h6 class="mb-1">{{ report.address }}</h6>
-            <small class="text-muted">{{ report.created_at }}</small>
-          </div>
-          <button @click="handleTakeReport(report.id)" class="btn btn-outline-primary btn-sm">
-            Prendi in carico
-          </button>
+          <ReportTable
+            v-else
+            :reports="openReportsRes?.reports || []"
+            action-variant="manage"
+            detail-base-path="/operator/reports"
+            @take="handleTakeReport"
+          />
         </div>
       </div>
     </div>
 
-    <!-- Colonna Destra: Segnalazioni in gestione dell'operatore -->
     <div class="col-12 col-lg-6 mb-4">
-      <h3 class="mb-3 border-bottom pb-2">Le mie assegnazioni</h3>
-      <div class="list-group">
-        <div v-if="assignedReportsRes?.ok && assignedReportsRes.data?.items.length === 0" class="text-muted">
+      <div class="card card-bg h-100">
+        <div class="card-body">
+          <div class="d-flex justify-content-between align-items-center mb-3">
+            <h3 class="h5 mb-0">Le mie assegnazioni</h3>
+            <NuxtLink to="/operator/assigned" class="btn btn-link btn-sm pe-0">Vedi tutte</NuxtLink>
+          </div>
+          <div v-if="assignedReportsRes?.ok && assignedReportsRes.reports.length === 0" class="alert alert-info mb-0">
             Non hai segnalazioni in carico.
           </div>
-        <NuxtLink
-            v-for="report in assignedReportsRes?.data?.items" :key="report.id"
-            :to="`/operator/reports/${report.id}`"
-            class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
-        >
-          <div>
-            <h6 class="mb-1">{{ report.address }}</h6>
-            <span class="badge bg-warning text-dark">{{ report.status }}</span>
+          <ReportTable
+            v-else
+            :reports="assignedReportsRes?.reports || []"
+            detail-base-path="/operator/reports"
+            action-label="Apri segnalazione"
+          />
         </div>
-          <BIIcon name="it-chevron-right" size="sm" color="primary" />
-        </NuxtLink>
       </div>
     </div>
   </div>

app/composables/useAdmin.ts

@@ -21,7 +21,7 @@ export const useAdmin = () => {
       useApiFetch<OkResponse>(`/api/v1/admin/users/${id}/roles`, { method: 'PATCH', body })
 
   const getAreas = () =>
-      useApiFetch<AreaListResponse>('/api/v1/admin/areas', { method: 'GET' })
+      useApiFetch<AreaListResponse>('/api/v1/areas', { method: 'GET' })
 
   const createArea = (body: CreateAreaRequest) =>
       useApiFetch<OkResponse>('/api/v1/admin/areas', { method: 'POST', body })

app/composables/useApiFetch.ts

@@ -2,7 +2,8 @@ import { defu } from 'defu'
 
 export const useApiFetch = <T>(request: string, options: Parameters<typeof $fetch>[1] = {}) => {
   const config = useRuntimeConfig()
-  const tokenCookie = useCookie('auth_token')
+  const nuxtApp = useNuxtApp()
+  const tokenCookie = useCookie('auth_token', { path: '/' })
   const tokenState = useState<string | null>('auth_token_state')
 
   const tokenValue = tokenState.value ?? tokenCookie.value
@@ -26,22 +27,7 @@ export const useApiFetch = <T>(request: string, options: Parameters<typeof $fetc
     const status = err?.statusCode || err?.status || err?.response?.status
 
     if (status === 401 || status === 403) {
-      try {
-        tokenCookie.value = null
-        tokenState.value = null
-        const authUser = useState('auth_user')
-        authUser.value = null
-        
-        console.error(`[API] Authentication error (${status}) - token cleared`)
-      } catch (e) {
-        console.error('[API] Error clearing auth state:', e)
-      }
-
-      try {
-        navigateTo('/auth/login')
-      } catch (e) { 
-        console.error('[API] Error navigating to login:', e)
-      }
+      console.error(`[API] Authentication error (${status})`)
     }
 
     throw err

app/composables/useAuth.ts

@@ -4,13 +4,16 @@ import type {
   OkResponse,
   OtpRequestResponse, PasswordLoginRequest, RegisterCitizenRequest,
   RegisterCitizenResponse, RewardsResponse,
-  TokenResponse, VerifyOtpRequest
+  TokenResponse, VerifyOtpRequest, UpdateProfileRequest
 } from "~/types/api";
 
 export const useAuth = () => {
-  const token = useCookie('auth_token', {
+  const nuxtApp = useNuxtApp()
+
+  const token = useCookie<string | null>('auth_token', {
     maxAge: 60 * 60 * 12,
     sameSite: 'lax',
+    path: '/',
     watch: true
   })
 
@@ -20,12 +23,17 @@ export const useAuth = () => {
   const user = useState<UserContext | null>('auth_user', () => null)
   const isSyncingUser = useState<boolean>('auth_syncing', () => false)
   const isAuthenticated = computed(() => !!(tokenState.value || token.value))
+  const isAuthStatusError = (error: any) => {
+    const status = error?.statusCode || error?.status || error?.response?.status
+    return status === 401 || status === 403
+  }
 
   watch(() => token.value, (newVal) => {
     tokenState.value = newVal || null
   })
 
-  const syncUser = async () => {
+  const syncUser = async (options: { redirectOnSuccess?: boolean; currentPath?: string } = {}) => {
+    const { redirectOnSuccess = false, currentPath } = options
     const tokenVal = tokenState.value || token.value
     if (!tokenVal || isSyncingUser.value) return
     
@@ -33,10 +41,21 @@ export const useAuth = () => {
     try {
       const res = await fetchCurrentUser()
       if (res.ok) {
-        console.log('[Auth] User synced successfully')
         user.value = res.user
+        const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
+
+        if (res.user.must_change_password && path !== '/auth/change-password') {
+          await nuxtApp.runWithContext(() => navigateTo('/auth/change-password'))
+        } else if (redirectOnSuccess && path.startsWith('/auth')) {
+          await nuxtApp.runWithContext(() => navigateTo('/dashboard'))
+        }
       }
     } catch (error) {
+      if (isAuthStatusError(error)) {
+        console.error('[Auth] Sync failed with authentication error, keeping session state:', error)
+        return
+      }
+
       console.error('[Auth] Sync failed, logging out:', error)
       logout()
     } finally {
@@ -47,14 +66,14 @@ export const useAuth = () => {
   const handleLoginSuccess = async (jwtToken: string) => {
     token.value = jwtToken
     tokenState.value = jwtToken
-    await syncUser()
+    await syncUser({ redirectOnSuccess: true })
   }
 
   const logout = () => {
     token.value = null
     tokenState.value = null
     user.value = null
-    navigateTo('/auth/login')
+    nuxtApp.runWithContext(() => navigateTo('/auth/login'))
   }
 
   const register = (body: RegisterCitizenRequest) =>
@@ -72,6 +91,9 @@ export const useAuth = () => {
   const changePassword = (body: ChangePasswordRequest) =>
       useApiFetch<OkResponse>('/api/v1/auth/change-password', { method: 'POST', body })
 
+  const updateProfile = (body: UpdateProfileRequest) =>
+      useApiFetch<CurrentUserResponse>('/api/v1/me', { method: 'PATCH', body })
+
   const fetchCurrentUser = () =>
       useApiFetch<CurrentUserResponse>('/api/v1/me', { method: 'GET' })
 
@@ -99,6 +121,7 @@ export const useAuth = () => {
     verifyOtp,
     loginWithPassword,
     changePassword,
+    updateProfile,
     fetchCurrentUser,
     fetchRewards,
     fetchNotifications,

app/composables/useOperator.ts

@@ -3,6 +3,7 @@ import type {
   InterventionSummaryResponse,
   OkResponse,
   PagedReportListResponse,
+  TeamListResponse,
   UpdateStatusRequest
 } from "~/types/api";
 
@@ -16,6 +17,9 @@ export const useOperator = () => {
   const getOtherOperatorReports = (query?: { page?: number; per_page?: number }) =>
       useApiFetch<PagedReportListResponse>('/api/v1/operator/reports/others', { method: 'GET', query })
 
+  const getTeams = () =>
+      useApiFetch<TeamListResponse>('/api/v1/operator/teams', { method: 'GET' })
+
   const takeReport = (id: number) =>
       useApiFetch<OkResponse>(`/api/v1/reports/${id}/take`, { method: 'POST' })
 
@@ -32,6 +36,7 @@ export const useOperator = () => {
     getOpenReports,
     getAssignedReports,
     getOtherOperatorReports,
+    getTeams,
     takeReport,
     updateReportStatus,
     assignTeam,

app/composables/useReports.ts

@@ -1,4 +1,5 @@
 import type {
+  CategoryListResponse,
   CreateReportRequest,
   CreateReportResponse, FeedbackRequest, FlagRequest, FlagResponse,
   MediaUploadResponse,
@@ -11,6 +12,9 @@ export const useReports = () => {
   const getReports = (query?: { area_id?: number; category_id?: number; status?: string }) =>
       useApiFetch<ReportListResponse>('/api/v1/reports', { method: 'GET', query })
 
+  const getCategories = () =>
+      useApiFetch<CategoryListResponse>('/api/v1/report-categories', { method: 'GET' })
+
   const createReport = (body: CreateReportRequest) =>
       useApiFetch<CreateReportResponse>('/api/v1/reports', { method: 'POST', body })
 
@@ -37,6 +41,7 @@ export const useReports = () => {
 
   return {
     getReports,
+    getCategories,
     createReport,
     getReportDetail,
     uploadMedia,

app/middleware/auth.ts

@@ -4,7 +4,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   // 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()
+      await auth.syncUser({ currentPath: to.path })
     } catch (error) {
       console.error('[Auth Middleware] Sync failed:', error)
       return navigateTo('/auth/login')
@@ -20,7 +20,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const requiredRole = to.meta.auth?.role
 
   if (requiredRole && auth.user.value) {
-    const userRole = auth.user.value.role
+    const userRole = auth.user.value.role.toUpperCase()
 
     const roleLevels: Record<string, number> = {
       'CITIZEN': 1,

app/middleware/guest.ts

@@ -1,16 +1,14 @@
-export default defineNuxtRouteMiddleware(async () => {
+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()
+      await auth.syncUser({ currentPath: to.path })
     } catch (error) {
       console.error('[Guest Middleware] Sync failed:', error)
     }
   }
 
-  // Se autenticato, redirige al dashboard
   if (auth.isAuthenticated.value && auth.user.value) {
     return navigateTo('/dashboard')
   }

app/pages/admin/areas.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import { ref, reactive, nextTick, onBeforeUnmount } from 'vue'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'ADMIN' }
+})
+
+useHead({ title: 'Aree - Admin' })
+
+const { getAreas, createArea } = useAdmin()
+const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
+
+const isCreating = ref(false)
+const formData = reactive({
+  name: '',
+  description: '',
+  geojson: ''
+})
+const jsonError = ref('')
+
+// Map variables
+let map: any = null
+let polygon: any = null
+const mapPoints = ref<[number, number][]>([])
+
+const openCreateModal = () => {
+  formData.name = ''
+  formData.description = ''
+  formData.geojson = ''
+  jsonError.value = ''
+  mapPoints.value = []
+  isCreating.value = true
+  
+  nextTick(async () => {
+    // Import leaflet solo client-side
+    const L = (await import('leaflet')).default
+    
+    if (map) {
+      map.remove()
+      map = null
+    }
+
+    const bariBounds = L.latLngBounds(
+      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+      [BARI_BOUNDS.north, BARI_BOUNDS.east]
+    )
+
+    map = L.map('areaMap', {
+      maxBounds: bariBounds,
+      maxBoundsViscosity: 1,
+      minZoom: 12
+    }).setView(BARI_CENTER, 12)
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap'
+    }).addTo(map)
+
+    polygon = L.polygon([], { color: 'red' }).addTo(map)
+    map.fitBounds(bariBounds)
+
+    map.on('click', (e: any) => {
+      if (!isWithinBariBounds(e.latlng.lat, e.latlng.lng)) {
+        jsonError.value = 'Puoi disegnare aree solo entro confini del Comune di Bari.'
+        return
+      }
+
+      jsonError.value = ''
+      mapPoints.value.push([e.latlng.lat, e.latlng.lng])
+      polygon.setLatLngs(mapPoints.value)
+      updateGeojson()
+    })
+  })
+}
+
+const clearMap = () => {
+  mapPoints.value = []
+  if (polygon) {
+    polygon.setLatLngs([])
+  }
+  formData.geojson = ''
+}
+
+const updateGeojson = () => {
+  if (mapPoints.value.length < 3) {
+    formData.geojson = ''
+    return
+  }
+  const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
+  if (coords[0]) {
+    coords.push([...coords[0]]) // Chiudi poligono
+  }
+
+  formData.geojson = JSON.stringify({
+    type: "Polygon",
+    coordinates: [coords]
+  }, null, 2)
+}
+
+const closeCreateModal = () => {
+  isCreating.value = false
+  if (map) {
+    map.remove()
+    map = null
+  }
+}
+
+onBeforeUnmount(() => {
+  if (map) map.remove()
+})
+
+const handleCreate = async () => {
+  jsonError.value = ''
+  let parsedGeojson = null
+  
+  try {
+    parsedGeojson = JSON.parse(formData.geojson)
+    if (!parsedGeojson.type || !parsedGeojson.coordinates) {
+      throw new Error('GeoJSON non valido. Richiesto "type" e "coordinates".')
+    }
+
+    const coordinates = parsedGeojson.coordinates?.[0] || []
+    const outsideBari = coordinates.some(([longitude, latitude]: [number, number]) => !isWithinBariBounds(latitude, longitude))
+    if (outsideBari) {
+      throw new Error('Area non valida. Tutti i punti devono essere nel Comune di Bari.')
+    }
+  } catch (e: any) {
+    jsonError.value = e.message || 'Formato JSON non valido.'
+    return
+  }
+
+  try {
+    const res = await createArea({
+      name: formData.name,
+      description: formData.description || undefined,
+      boundary_geojson: parsedGeojson
+    })
+    
+    if (res.ok) {
+      await refresh()
+      closeCreateModal()
+    }
+  } catch (err) {
+    console.error('Failed to create area', err)
+    alert('Errore durante la creazione dell\'area.')
+  }
+}
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 font-weight-bold mb-0">Gestione Aree</h1>
+      <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" />
+          Nuova Area
+        </button>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!areasRes?.areas || areasRes.areas.length === 0" class="alert alert-info">
+      Nessuna area configurata.
+    </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>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="area in areasRes.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>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Modale Creazione -->
+    <div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div v-if="isCreating" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
+      <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Nuova Area</h5>
+            <button type="button" class="btn-close" @click="closeCreateModal"></button>
+          </div>
+          <div class="modal-body">
+            <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" />
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label">Descrizione (opzionale)</label>
+                    <textarea class="form-control" v-model="formData.description" rows="3"></textarea>
+                  </div>
+                  <div class="mb-3">
+                    <label class="form-label">GeoJSON Generato</label>
+                    <textarea 
+                      class="form-control font-monospace text-sm" 
+                      rows="6" 
+                      v-model="formData.geojson" 
+                      required
+                      readonly
+                      placeholder='{ "type": "Polygon", "coordinates": [...] }'
+                    ></textarea>
+                    <div v-if="jsonError" class="form-text text-danger mt-1">{{ jsonError }}</div>
+                  </div>
+                </div>
+                
+                <div class="col-md-7">
+                  <div class="mb-2 d-flex justify-content-between align-items-center">
+                    <label class="form-label mb-0">Disegna Poligono sulla Mappa</label>
+                    <button type="button" class="btn btn-outline-danger btn-sm" @click="clearMap">
+                      Pulisci Mappa
+                    </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.
+                  </div>
+                  <div id="areaMap" class="rounded border" style="height: 400px; width: 100%; z-index: 1;"></div>
+                </div>
+              </div>
+            </form>
+          </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">
+              Crea Area
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#areaMap {
+  background: #e9ecef;
+}
+
+.modal-dialog {
+  margin-block: 0!important;
+}
+</style>

app/pages/admin/catalog.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'ADMIN' }
+})
+
+useHead({ title: 'Categorie e Team - Admin' })
+
+const { createCategory, getTeams, createTeam, getAreas } = useAdmin()
+const { getCategories } = useReports()
+
+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())
+
+const categoryForm = reactive({
+  name: '',
+  description: '',
+})
+
+const teamForm = reactive({
+  name: '',
+  description: '',
+  team_category_id: null as number | null,
+  area_id: null as number | null,
+})
+
+const isSavingCategory = ref(false)
+const isSavingTeam = ref(false)
+const categoryError = ref('')
+const teamError = ref('')
+
+const categories = computed(() => categoriesRes.value?.categories || [])
+const teams = computed(() => teamsRes.value?.teams || [])
+const areas = computed(() => areasRes.value?.areas || [])
+
+const submitCategory = async () => {
+  categoryError.value = ''
+  isSavingCategory.value = true
+
+  try {
+    await createCategory({
+      name: categoryForm.name.trim(),
+      description: categoryForm.description.trim() || undefined,
+    })
+    categoryForm.name = ''
+    categoryForm.description = ''
+    await refreshCategories()
+  } catch (error: any) {
+    categoryError.value = error?.data?.message || 'Creazione categoria non riuscita.'
+  } finally {
+    isSavingCategory.value = false
+  }
+}
+
+const submitTeam = async () => {
+  if (!teamForm.team_category_id) return
+
+  teamError.value = ''
+  isSavingTeam.value = true
+
+  try {
+    await createTeam({
+      name: teamForm.name.trim(),
+      description: teamForm.description.trim() || undefined,
+      team_category_id: teamForm.team_category_id,
+      area_id: teamForm.area_id || undefined,
+    })
+    teamForm.name = ''
+    teamForm.description = ''
+    teamForm.team_category_id = null
+    teamForm.area_id = null
+    await refreshTeams()
+  } catch (error: any) {
+    teamError.value = error?.data?.message || 'Creazione team non riuscita.'
+  } finally {
+    isSavingTeam.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
+      <div>
+        <h1 class="h3 font-weight-bold mb-1">Categorie e Team</h1>
+        <p class="text-muted mb-0">Gestione dati di riferimento per segnalazioni e interventi.</p>
+      </div>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
+    </div>
+
+    <div class="row g-4">
+      <div class="col-12 col-xl-5">
+        <div class="card card-bg border-0 shadow-sm h-100">
+          <div class="card-body">
+            <div class="d-flex align-items-center justify-content-between mb-3">
+              <h2 class="h5 mb-0">Categorie</h2>
+              <span class="badge bg-light text-dark border">{{ categories.length }}</span>
+            </div>
+
+            <div v-if="categoryError" class="alert alert-danger py-2" role="alert">
+              {{ categoryError }}
+            </div>
+
+            <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 />
+              </div>
+              <div class="mb-3">
+                <label class="form-label">Descrizione</label>
+                <textarea v-model="categoryForm.description" class="form-control" rows="3"></textarea>
+              </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
+              </button>
+            </form>
+
+            <div class="table-responsive report-table-wrapper">
+              <table class="table table-hover report-table mb-0">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Nome</th>
+                    <th>Stato</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="category in categories" :key="category.id">
+                    <td class="report-table-id">#{{ category.id }}</td>
+                    <td>
+                      <strong>{{ category.name }}</strong>
+                      <div v-if="category.description" class="small text-muted mt-1">{{ category.description }}</div>
+                    </td>
+                    <td>
+                      <span class="badge" :class="category.active === false ? 'bg-secondary' : 'bg-success'">
+                        {{ category.active === false ? 'Inattiva' : 'Attiva' }}
+                      </span>
+                    </td>
+                  </tr>
+                  <tr v-if="categories.length === 0">
+                    <td colspan="3" class="text-muted">Nessuna categoria configurata.</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-xl-7">
+        <div class="card card-bg border-0 shadow-sm h-100">
+          <div class="card-body">
+            <div class="d-flex align-items-center justify-content-between mb-3">
+              <h2 class="h5 mb-0">Team di intervento</h2>
+              <span class="badge bg-light text-dark border">{{ teams.length }}</span>
+            </div>
+
+            <div v-if="teamError" class="alert alert-danger py-2" role="alert">
+              {{ teamError }}
+            </div>
+
+            <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 />
+              </div>
+              <div class="col-12 col-md-6">
+                <label class="form-label">Categoria coperta</label>
+                <select v-model.number="teamForm.team_category_id" class="form-select" required>
+                  <option :value="null">Seleziona categoria</option>
+                  <option v-for="category in categories" :key="category.id" :value="category.id">
+                    {{ category.name }}
+                  </option>
+                </select>
+              </div>
+              <div class="col-12 col-md-6">
+                <label class="form-label">Area</label>
+                <select v-model.number="teamForm.area_id" class="form-select">
+                  <option :value="null">Tutte le aree</option>
+                  <option v-for="area in areas" :key="area.id" :value="area.id">
+                    {{ area.name }}
+                  </option>
+                </select>
+              </div>
+              <div class="col-12 col-md-6">
+                <label class="form-label">Descrizione</label>
+                <input v-model="teamForm.description" type="text" class="form-control" />
+              </div>
+              <div class="col-12">
+                <button type="submit" class="btn btn-primary" :disabled="isSavingTeam || !teamForm.name.trim() || !teamForm.team_category_id">
+                  <span v-if="isSavingTeam" class="spinner-border spinner-border-sm me-2"></span>
+                  Crea team
+                </button>
+              </div>
+            </form>
+
+            <div class="table-responsive report-table-wrapper">
+              <table class="table table-hover report-table mb-0">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Team</th>
+                    <th>Categoria</th>
+                    <th>Area</th>
+                    <th>Stato</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="team in teams" :key="team.id">
+                    <td class="report-table-id">#{{ team.id }}</td>
+                    <td>
+                      <strong>{{ team.name }}</strong>
+                      <div v-if="team.description" class="small text-muted mt-1">{{ team.description }}</div>
+                    </td>
+                    <td>{{ team.category_name || '-' }}</td>
+                    <td>{{ team.area_name || 'Tutte' }}</td>
+                    <td>
+                      <span class="badge" :class="team.active === false ? 'bg-secondary' : 'bg-success'">
+                        {{ team.active === false ? 'Inattivo' : 'Attivo' }}
+                      </span>
+                    </td>
+                  </tr>
+                  <tr v-if="teams.length === 0">
+                    <td colspan="5" class="text-muted">Nessun team configurato.</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/admin/moderation.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'ADMIN' }
+})
+
+useHead({ title: 'Moderazione Abusi - Admin' })
+
+const { getModerationFlags, updateModerationFlag } = useAdmin()
+
+const page = ref(1)
+const perPage = ref(10)
+const statusFilter = ref('')
+
+const { data: flagsRes, pending, refresh } = useAsyncData(
+  'admin-moderation-flags', 
+  () => getModerationFlags({ page: page.value, per_page: perPage.value, status: statusFilter.value || undefined }),
+  { watch: [page, statusFilter] }
+)
+
+const handleResolve = async (id: number, rejectReport: boolean) => {
+  const note = prompt('Inserisci una nota di risoluzione (opzionale):')
+  if (note === null) return // cancelled
+  
+  try {
+    const res = await updateModerationFlag(id, { 
+      status: 'RESOLVED', 
+      reject_report: rejectReport,
+      resolution_note: note
+    })
+    if (res.ok) {
+      await refresh()
+    }
+  } catch (err) {
+    console.error('Failed to resolve flag', err)
+    alert('Errore durante la risoluzione della segnalazione.')
+  }
+}
+
+const handleDismiss = async (id: number) => {
+  if (!confirm('Sei sicuro di voler ignorare (dismiss) questo flag?')) return
+  
+  try {
+    const res = await updateModerationFlag(id, { status: 'DISMISSED' })
+    if (res.ok) {
+      await refresh()
+    }
+  } catch (err) {
+    console.error('Failed to dismiss flag', err)
+    alert('Errore durante l\'aggiornamento.')
+  }
+}
+
+const formatDate = (dateStr: string) => {
+  return new Date(dateStr).toLocaleString('it-IT', { 
+    day: '2-digit', month: '2-digit', year: 'numeric',
+    hour: '2-digit', minute: '2-digit'
+  })
+}
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 font-weight-bold mb-0">Moderazione Abusi</h1>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
+    </div>
+
+    <div class="row mb-4">
+      <div class="col-md-4">
+        <label class="form-label">Filtra per Stato</label>
+        <select class="form-select" v-model="statusFilter">
+          <option value="">Tutti</option>
+          <option value="OPEN">Aperti</option>
+          <option value="RESOLVED">Risolti</option>
+          <option value="DISMISSED">Ignorati</option>
+        </select>
+      </div>
+    </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">
+      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 class="card-header bg-light d-flex justify-content-between align-items-center">
+          <div>
+            <strong>Flag #{{ flag.id }}</strong> - 
+            <span class="badge" :class="{
+              'bg-warning': flag.status === 'OPEN',
+              'bg-success': flag.status === 'RESOLVED',
+              'bg-secondary': flag.status === 'DISMISSED'
+            }">{{ flag.status }}</span>
+          </div>
+          <small class="text-muted">{{ formatDate(flag.created_at) }}</small>
+        </div>
+        <div class="card-body">
+          <div class="row">
+            <div class="col-md-8">
+              <h5 class="card-title">Motivo: {{ flag.reason }}</h5>
+              <p class="card-text text-muted mb-2">
+                {{ flag.details || 'Nessun dettaglio aggiuntivo fornito.' }}
+              </p>
+              
+              <div class="mt-3">
+                <span class="badge bg-info me-2">{{ flag.content_type }}</span>
+                <span v-if="flag.report_id">
+                  Rif: 
+                  <NuxtLink :to="`/operator/reports/${flag.report_id}`" class="text-decoration-none">
+                    Segnalazione #{{ flag.report_id }}
+                  </NuxtLink>
+                </span>
+                <span v-if="flag.message_id" class="ms-2">
+                  | Messaggio #{{ flag.message_id }}
+                </span>
+              </div>
+              
+              <div class="mt-3 small">
+                Segnalato da: {{ flag.created_by_email }} (ID: {{ flag.created_by_user_id }})
+              </div>
+              
+              <div v-if="flag.status !== 'OPEN'" class="mt-2 small text-muted border-top pt-2">
+                <strong>Risolto/Ignorato da:</strong> {{ flag.resolved_by_email }} in data {{ flag.resolved_at ? formatDate(flag.resolved_at) : 'N/D' }}
+                <div v-if="flag.resolution_note"><strong>Nota:</strong> {{ flag.resolution_note }}</div>
+              </div>
+            </div>
+            
+            <div class="col-md-4 text-end" v-if="flag.status === 'OPEN'">
+              <div class="d-flex flex-column gap-2 mt-3 mt-md-0">
+                <button class="btn btn-outline-danger btn-sm" @click="handleResolve(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)">
+                  <BIIcon name="it-check" size="xs" /> Risolvi (Solo Avviso)
+                </button>
+                <button class="btn btn-outline-secondary btn-sm" @click="handleDismiss(flag.id)">
+                  <BIIcon name="it-close" size="xs" /> Ignora Flag
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Pagination 
+        v-if="(flagsRes.total || flagsRes.flags.length) > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="flagsRes.total || (page * perPage + 1)"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>

app/pages/admin/users.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'ADMIN' }
+})
+
+useHead({ title: 'Gestione Utenti - Admin' })
+
+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 filteredUsers = computed(() => {
+  if (!usersRes.value?.users) return []
+  if (!search.value) return usersRes.value.users
+  const s = search.value.toLowerCase()
+  return usersRes.value.users.filter(u => 
+    u.first_name.toLowerCase().includes(s) || 
+    u.last_name.toLowerCase().includes(s) || 
+    u.email.toLowerCase().includes(s) ||
+    u.fiscal_code?.toLowerCase().includes(s)
+  )
+})
+
+const handleToggleBan = async (id: number, currentBanStatus: boolean) => {
+  if (!confirm(`Sei sicuro di voler ${currentBanStatus ? 'sbloccare' : 'bannare'} questo utente?`)) return
+  
+  try {
+    const res = await updateUserBan(id, { banned: !currentBanStatus })
+    if (res.ok) {
+      await refresh()
+    }
+  } catch (err) {
+    console.error('Failed to update user ban status', err)
+    alert('Errore durante l\'aggiornamento dello stato di ban.')
+  }
+}
+
+// Modal per i ruoli
+const editingUserId = ref<number | null>(null)
+const selectedRoles = ref<string[]>([])
+const availableRoles = ['CITIZEN', 'OPERATOR', 'ADMIN']
+
+const openRoleModal = (user: any) => {
+  editingUserId.value = user.id
+  selectedRoles.value = parseRoles(user.roles)
+}
+
+const closeRoleModal = () => {
+  editingUserId.value = null
+  selectedRoles.value = []
+}
+
+const saveRoles = async () => {
+  if (!editingUserId.value) return
+  
+  try {
+    const res = await updateUserRoles(editingUserId.value, { roles: selectedRoles.value })
+    if (res.ok) {
+      await refresh()
+      closeRoleModal()
+    }
+  } catch (err) {
+    console.error('Failed to update roles', err)
+    alert('Errore durante l\'aggiornamento dei ruoli.')
+  }
+}
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 font-weight-bold mb-0">Gestione Utenti</h1>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
+    </div>
+
+    <div class="row mb-4">
+      <div class="col-md-6">
+        <div class="input-group">
+          <input type="text" class="form-control" placeholder="Cerca per nome, email o CF..." v-model="search">
+        </div>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!usersRes?.users || usersRes.users.length === 0" class="alert alert-info">
+      Nessun utente trovato.
+    </div>
+
+    <div v-else class="table-responsive">
+      <table class="table table-hover align-middle">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Nome</th>
+            <th>Email / CF</th>
+            <th>Ruoli</th>
+            <th>Punti</th>
+            <th>Stato</th>
+            <th class="text-end">Azioni</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="user in filteredUsers" :key="user.id">
+            <td>{{ user.id }}</td>
+            <td>
+              <strong>{{ user.first_name }} {{ user.last_name }}</strong>
+            </td>
+            <td>
+              <div>{{ user.email }}</div>
+              <small class="text-muted">{{ user.fiscal_code }}</small>
+            </td>
+            <td>
+              <span v-for="r in parseRoles(user.roles)" :key="r" class="badge bg-primary me-1">
+                {{ r }}
+              </span>
+            </td>
+            <td>{{ user.points || 0 }}</td>
+            <td>
+              <span v-if="user.banned" class="badge bg-danger">Bannato</span>
+              <span v-else class="badge bg-success">Attivo</span>
+            </td>
+            <td class="text-end">
+              <button 
+                class="btn btn-sm btn-outline-primary me-2"
+                @click="openRoleModal(user)"
+              >
+                Ruoli
+              </button>
+              <button 
+                class="btn btn-sm"
+                :class="user.banned ? 'btn-outline-success' : 'btn-outline-danger'"
+                @click="handleToggleBan(user.id, !!user.banned)"
+              >
+                {{ user.banned ? 'Sblocca' : 'Banna' }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    
+    <div v-if="editingUserId !== null" class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,0.5)">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Modifica Ruoli Utente</h5>
+            <button type="button" class="btn-close" aria-label="Close" @click="closeRoleModal"></button>
+          </div>
+          <div class="modal-body">
+            <div class="form-check mb-2" v-for="role in availableRoles" :key="role">
+              <input 
+                class="form-check-input" 
+                type="checkbox" 
+                :value="role" 
+                :id="'role-'+role"
+                :checked="selectedRoles.includes(role)"
+                v-model="selectedRoles"
+              >
+              <label class="form-check-label" :for="'role-'+role">
+                {{ role }}
+              </label>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeRoleModal">Annulla</button>
+            <button type="button" class="btn btn-primary" @click="saveRoles">Salva</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/auth/change-password.vue

@@ -0,0 +1,217 @@
+<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/login.vue

@@ -16,7 +16,7 @@ const otpStep = ref<1 | 2>(1)
 const isLoading = ref(false)
 const errorMessage = ref('')
 
-// Form State
+
 const email = ref('')
 const password = ref('')
 const otpCode = ref('')
@@ -41,7 +41,6 @@ const handleVerifyOtp = async () => {
   try {
     const res = await verifyOtp({ email: email.value, code: otpCode.value })
     await handleLoginSuccess(res.token)
-    router.push('/dashboard')
   } catch (err: any) {
     errorMessage.value = 'Codice OTP non valido o scaduto.'
   } finally {
@@ -55,7 +54,6 @@ const handlePasswordLogin = async () => {
   try {
     const res = await loginWithPassword({ email: email.value, password: password.value })
     await handleLoginSuccess(res.token)
-    router.push('/dashboard')
   } catch (err: any) {
     errorMessage.value = 'Credenziali non valide.'
   } finally {
@@ -70,9 +68,9 @@ const handlePasswordLogin = async () => {
       <div class="row justify-content-center">
         <div class="col-12 col-md-8 col-lg-5">
 
-          <!-- Intestazione istituzionale -->
+          
           <div class="text-center mb-4">
-            <BIIcon name="it-pa" size="xl" color="primary" class="mb-2" />
+            <BIIcon name="it-user" size="xl" color="primary" class="mb-2" />
             <h1 class="h3 font-weight-bold">Accedi a Visione</h1>
             <p class="text-muted">Il portale delle segnalazioni urbane</p>
           </div>
@@ -80,7 +78,7 @@ const handlePasswordLogin = async () => {
           <div class="card card-bg shadow-sm">
             <div class="card-body p-4 p-md-5">
 
-              <!-- Finto Bottone CIE -->
+              
               <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">
                 <BIIcon name="it-card" size="sm" color="white" />
                 Entra con CIE (Presto disponibile)
@@ -96,7 +94,7 @@ const handlePasswordLogin = async () => {
                 {{ errorMessage }}
               </div>
 
-              <!-- FLUSSO OTP -->
+              
               <div v-if="loginMethod === 'otp'">
                 <form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
                   <div class="form-group mb-4">
@@ -127,14 +125,14 @@ const handlePasswordLogin = async () => {
                 </form>
               </div>
 
-              <!-- FLUSSO PASSWORD -->
+              
               <form v-else @submit.prevent="handlePasswordLogin">
                 <div class="form-group mb-4">
                   <input type="email" class="form-control" id="emailPwd" v-model="email" required>
                   <label for="emailPwd" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
                 </div>
 
-                <!-- INPUT PASSWORD FIXATO -->
+               
                 <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>
@@ -157,7 +155,7 @@ const handlePasswordLogin = async () => {
                 </button>
               </form>
 
-              <!-- Switch Method -->
+              
               <div class="text-center mt-4">
                 <a href="#" class="small text-decoration-none" @click.prevent="loginMethod = loginMethod === 'otp' ? 'password' : 'otp'; errorMessage = ''">
                   {{ loginMethod === 'otp' ? 'Vuoi usare la password? Clicca qui' : 'Usa il login sicuro senza password (OTP)' }}

app/pages/auth/register.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import CodiceFiscale from 'codice-fiscale-js'
 import { ref } from 'vue'
 
 definePageMeta({
@@ -25,22 +26,7 @@ const form = ref({
   privacy: false
 })
 
-const computeSurnameCode = (surname = '') => {
-  const s = surname.toUpperCase().replace(/[^A-Z]/g, '')
-  const consonants = s.replace(/[AEIOU]/g, '')
-  const vowels = s.replace(/[^AEIOU]/g, '')
-  return (consonants + vowels + 'XXX').slice(0, 3)
-}
-
-const computeNameCode = (name = '') => {
-  const s = name.toUpperCase().replace(/[^A-Z]/g, '')
-  const consonants = s.replace(/[AEIOU]/g, '')
-  const vowels = s.replace(/[^AEIOU]/g, '')
-  if (consonants.length >= 4) {
-    return consonants.charAt(0) + consonants.charAt(2) + consonants.charAt(3)
-  }
-  return (consonants + vowels + 'XXX').slice(0, 3)
-}
+const normalizeFiscalCode = (fiscalCode = '') => fiscalCode.trim().toUpperCase()
 
 const handleRegister = async () => {
   if (!form.value.privacy) {
@@ -48,13 +34,17 @@ const handleRegister = async () => {
     return
   }
 
-  const expected = computeSurnameCode(form.value.last_name) + computeNameCode(form.value.first_name)
-  if (form.value.fiscal_code.trim().length >= 6) {
-    const provided = form.value.fiscal_code.trim().toUpperCase().slice(0, 6)
-    if (provided !== expected) {
-      errorMessage.value = `Il Codice Fiscale non sembra corrispondere a nome/cognome. Atteso: ${expected}`
+  const fiscalCode = normalizeFiscalCode(form.value.fiscal_code)
+  const expected = CodiceFiscale.surnameCode(form.value.last_name) + CodiceFiscale.nameCode(form.value.first_name)
+
+  if (!CodiceFiscale.check(fiscalCode)) {
+    errorMessage.value = 'Il Codice Fiscale inserito non è valido.'
     return
   }
+
+  if (fiscalCode.slice(0, 6) !== expected) {
+    errorMessage.value = 'Il Codice Fiscale non corrisponde a nome e cognome inseriti.'
+    return
   }
 
   isLoading.value = true
@@ -64,7 +54,7 @@ const handleRegister = async () => {
     await register({
       first_name: form.value.first_name,
       last_name: form.value.last_name,
-      fiscal_code: form.value.fiscal_code.toUpperCase(),
+      fiscal_code: fiscalCode,
       email: form.value.email,
       password: form.value.password,
       phone: form.value.phone || undefined

app/pages/dashboard/index.vue

@@ -9,7 +9,6 @@ import CitizenDashboard from '~/components/dashboard/CitizenDashboard.vue'
 import OperatorDashboard from '~/components/dashboard/OperatorDashboard.vue'
 import AdminDashboard from '~/components/dashboard/AdminDashboard.vue'
 
-// Normalizziamo in uppercase nel caso il backend risponda con 'citizen' o 'CITIZEN'
 const currentDashboard = computed(() => {
   const role = user.value?.role?.toUpperCase()
   if (role === 'CITIZEN') return CitizenDashboard
@@ -18,28 +17,27 @@ const currentDashboard = computed(() => {
   return null
 })
 
-// Testi dinamici per l'Hero (la fascia blu in alto) in base al ruolo
 const heroTitle = computed(() => {
   const role = user.value?.role?.toUpperCase()
-  if (role === 'ADMIN') return 'Pannello di Amministrazione'
+  if (role === 'ADMIN') return 'Pannello Admin'
   if (role === 'OPERATOR') return 'Gestione Operativa'
-  return 'Le Mie Segnalazioni' // Cittadino
+  return 'Dashboard'
 })
 
 const heroSubtitle = computed(() => {
   const role = user.value?.role?.toUpperCase()
-  if (role === 'ADMIN') return 'Gestione del sistema, delle aree e moderazione utenti'
+  if (role === 'ADMIN') return 'Accesso amministrativo per configurazioni, utenti e moderazione'
   if (role === 'OPERATOR') return 'Prendi in carico e gestisci le segnalazioni in corso'
-  return 'Traccia lo stato di tutte le tue segnalazioni e comunica con gli operatori' // Cittadino
+  return 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
 })
 </script>
 
 <template>
   <div>
-    <div class="it-hero-wrapper it-primary">
+    <div class="it-hero-wrapper it-primary hero-compact">
       <div class="container">
         <div class="row">
-          <div class="col-12">
+          <div class="col-12 text-center">
             <div class="it-hero-text-wrapper p-4">
               <h1 class="text-white font-weight-bold">{{ heroTitle }}</h1>
               <p class="text-white mt-2 lead">
@@ -53,7 +51,7 @@ const heroSubtitle = computed(() => {
 
     <div class="container my-5">
 
-      <div class="row mb-4">
+      <div class="row mb-3">
         <div class="col-12">
           <h4 class="mb-2 text-muted">
             Benvenuto, <strong>{{ user?.first_name }} {{ user?.last_name }}</strong>.
@@ -61,7 +59,6 @@ const heroSubtitle = computed(() => {
         </div>
       </div>
 
-      <!-- Qui viene montato CitizenDashboard.vue, OperatorDashboard.vue o AdminDashboard.vue -->
       <component :is="currentDashboard" v-if="currentDashboard" />
 
       <div v-else class="alert alert-warning" role="alert">
@@ -71,10 +68,3 @@ const heroSubtitle = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped>
-/* Il gradiente originale della pagina rotta */
-.it-primary {
-  background: linear-gradient(135deg, #006f9d 0%, #003d5c 100%);
-}
-</style>

app/pages/index.vue

@@ -19,10 +19,10 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     <div class="it-hero-wrapper bg-light">
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-8 offset-lg-2 text-center">
+          <div class="col-12 col-lg-8 mx-auto text-center">
             <div class="it-hero-text-wrapper p-4">
-              <h1 class="no_toc font-weight-bold text-dark">Miglioriamo insieme la città</h1>
-              <p class="d-none d-lg-block mt-3 mb-4 text-secondary">
+              <h1 class="no_toc font-weight-bold">Miglioriamo insieme la città</h1>
+              <p class="d-none d-lg-block mt-3 mb-4 text-muted">
                 Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
                 e monitora l'intervento in totale trasparenza.
               </p>
@@ -68,7 +68,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
       </div>
     </div>
 
-    <div class="bg-light py-5 border-top border-bottom">
+    <div class="bg-light py-5">
       <div class="container my-4">
         <h2 class="text-center mb-5 font-weight-bold">I numeri del nostro Comune</h2>
         <div class="row text-center">

app/pages/info.vue

@@ -87,7 +87,7 @@ useHead({
                   <BIIcon name="it-settings" size="xl" color="primary" class="mb-3" />
                   <h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
                   <p class="card-text text-muted">
-                    Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane (tramite poligoni GeoJSON), gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
+                    Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare eventuali abusi.
                     <br><br>
                     Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e monitorare i tempi medi di risoluzione.
                   </p>

app/pages/me.vue

@@ -1,259 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  middleware: 'auth',
-})
-
-useHead({ title: 'Il Mio Profilo - Visione' })
-
-const { user, fetchRewards } = useAuth()
-
-// Fetch rewards/punti
-const page = ref(1)
-const perPage = ref(10)
-
-const { data: rewardsData } = await useAsyncData(() =>
-  fetchRewards({ page: page.value, per_page: perPage.value })
-)
-
-const rewards = computed(() => (rewardsData.value as any)?.reward_events || [])
-const totalPoints = computed(() => (rewardsData.value as any)?.points || 0)
-const totalRewards = computed(() => rewards.value.length)
-
-const handlePageChange = (newPage: number) => {
-  page.value = newPage
-}
-
-const formatDate = (dateString: string): string => {
-  return new Date(dateString).toLocaleDateString('it-IT', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  })
-}
-
-const handleLogout = () => {
-  useAuth().logout()
-}
-</script>
-
-<template>
-  <div>
-    <!-- HERO -->
-    <div class="bg-light border-bottom py-4 mb-5">
-      <div class="container">
-        <div class="row">
-          <div class="col-12">
-            <h1 class="h3 font-weight-bold mb-3">Il Mio Profilo</h1>
-            <p class="text-muted">Gestisci i tuoi dati, visualizza i tuoi punti e la cronologia delle segnalazioni</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- CONTENUTO -->
-    <div class="container mb-5">
-      <div class="row">
-
-        <!-- SINISTRA: Profilo -->
-        <div class="col-12 col-lg-8">
-
-          <!-- DATI PERSONALI -->
-          <div class="card card-bg mb-4">
-            <div class="card-body">
-              <div class="d-flex align-items-center justify-content-between mb-4">
-                <h5 class="card-title font-weight-bold mb-0">
-                  <BIIcon name="it-user" size="sm" color="primary" class="me-2" />
-                  Dati Personali
-                </h5>
-                <NuxtLink to="/settings/profile" class="btn btn-sm btn-outline-primary">
-                  <BIIcon name="it-pencil" size="xs" class="me-1" />
-                  Modifica
-                </NuxtLink>
-              </div>
-
-              <div class="row">
-                <div class="col-md-6 mb-3">
-                  <small class="text-muted d-block">Nome</small>
-                  <strong>{{ user?.first_name }}</strong>
-                </div>
-                <div class="col-md-6 mb-3">
-                  <small class="text-muted d-block">Cognome</small>
-                  <strong>{{ user?.last_name }}</strong>
-                </div>
-                <div class="col-md-6 mb-3">
-                  <small class="text-muted d-block">Email</small>
-                  <strong>{{ user?.email }}</strong>
-                </div>
-                <div class="col-md-6 mb-3">
-                  <small class="text-muted d-block">Codice Fiscale</small>
-                  <strong>{{ user?.fiscal_code }}</strong>
-                </div>
-                <div class="col-md-6 mb-3">
-                  <small class="text-muted d-block">Telefono</small>
-                  <strong>{{ user?.phone || 'Non fornito' }}</strong>
-                </div>
-                <div class="col-md-6 mb-3">
-                  <small class="text-muted d-block">Ruolo</small>
-                  <span class="badge bg-info">{{ user?.role }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- PUNTI CITTADINO -->
-          <div class="card card-bg card-highlight mb-4">
-            <div class="card-body">
-              <h5 class="card-title font-weight-bold mb-4">
-                <BIIcon name="it-star" size="sm" color="warning" class="me-2" />
-                I Tuoi Punti Cittadino
-              </h5>
-
-              <div class="text-center p-4 bg-light rounded mb-4">
-                <div class="display-3 font-weight-bold text-primary">{{ totalPoints }}</div>
-                <small class="text-muted">Segnalazioni risolte completate con successo</small>
-              </div>
-
-              <div class="alert alert-info" role="alert">
-                <small>
-                  <strong>Come guadagni punti?</strong><br>
-                  Ricevi 1 punto per ogni segnalazione che risolviamo. Quando raggiungi determinati traguardi, potrai sbloccare riconoscimenti speciali!
-                </small>
-              </div>
-            </div>
-          </div>
-
-          <!-- CRONOLOGIA PUNTI -->
-          <div class="card card-bg">
-            <div class="card-body">
-              <h5 class="card-title font-weight-bold mb-4">
-                <BIIcon name="it-history" size="sm" color="primary" class="me-2" />
-                Cronologia Punti (ultimi {{ rewards.length }})
-              </h5>
-
-              <div v-if="rewards.length === 0" class="alert alert-info" role="alert">
-                Non hai ancora accumulato punti. Crea la tua prima segnalazione!
-              </div>
-
-              <div v-else class="table-responsive">
-                <table class="table table-hover mb-0">
-                  <thead class="table-light">
-                    <tr>
-                      <th scope="col" class="small">Data</th>
-                      <th scope="col" class="small">Segnalazione</th>
-                      <th scope="col" class="text-center small">Punti</th>
-                      <th scope="col" class="small">Motivo</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="reward in rewards" :key="reward.id">
-                      <td class="small">
-                        <small class="text-muted">{{ formatDate(reward.created_at) }}</small>
-                      </td>
-                      <td class="small">
-                        <NuxtLink :to="`/reports/${reward.report_id}`" class="text-decoration-none">
-                          #{{ reward.report_id }}
-                        </NuxtLink>
-                      </td>
-                      <td class="text-center">
-                        <span class="badge bg-success">+{{ reward.points }}</span>
-                      </td>
-                      <td class="small">{{ reward.reason }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-
-              <!-- PAGINATION -->
-              <Pagination
-                v-if="rewards.length > 0"
-                :current-page="page"
-                :per-page="perPage"
-                :total-items="totalRewards"
-                @page-change="handlePageChange"
-              />
-            </div>
-          </div>
-
-        </div>
-
-        <!-- DESTRA: Azioni rapide -->
-        <div class="col-12 col-lg-4">
-
-          <!-- NUOVA SEGNALAZIONE -->
-          <div class="card card-bg card-highlight mb-4">
-            <div class="card-body text-center">
-              <BIIcon name="it-plus-circle" size="xl" color="primary" class="mb-3" />
-              <h6 class="font-weight-bold mb-3">Crea una nuova segnalazione</h6>
-              <p class="small text-muted mb-3">Aiutaci a migliorare il tuo quartiere</p>
-              <NuxtLink to="/reports/create" class="btn btn-primary w-100">
-                Segnala ora
-              </NuxtLink>
-            </div>
-          </div>
-
-          <!-- LE MIE SEGNALAZIONI -->
-          <div class="card card-bg mb-4">
-            <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-list" size="sm" color="primary" class="me-2" />
-                Le Mie Segnalazioni
-              </h6>
-              <NuxtLink to="/dashboard" class="btn btn-outline-primary w-100 btn-sm">
-                Vai alla Dashboard
-              </NuxtLink>
-            </div>
-          </div>
-
-          <!-- NOTIFICHE -->
-          <div class="card card-bg mb-4">
-            <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-bell" size="sm" color="primary" class="me-2" />
-                Centro Notifiche
-              </h6>
-              <NuxtLink to="/notifications" class="btn btn-outline-primary w-100 btn-sm">
-                Visualizza notifiche
-              </NuxtLink>
-            </div>
-          </div>
-
-          <!-- IMPOSTAZIONI & LOGOUT -->
-          <div class="card card-bg">
-            <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-settings" size="sm" color="primary" class="me-2" />
-                Account
-              </h6>
-              <NuxtLink to="/settings/password" class="btn btn-outline-secondary w-100 btn-sm mb-2">
-                Cambia Password
-              </NuxtLink>
-              <button type="button" class="btn btn-outline-danger w-100 btn-sm" @click="handleLogout">
-                Logout
-              </button>
-            </div>
-          </div>
-
-        </div>
-
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<style scoped>
-.card-highlight {
-  border-color: #ffc107;
-}
-
-.display-3 {
-  font-size: 3.5rem;
-  line-height: 1;
-}
-
-.table-hover tbody tr:hover {
-  background-color: rgba(0, 111, 157, 0.05);
-}
-</style>
-
-

app/pages/open-data.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import type { Map as LeafletMap, CircleMarker, LatLngBoundsExpression } from 'leaflet'
+import { BARI_BOUNDS, BARI_CENTER, isWithinBariBounds } from '~/utils/bari'
 
 // 1. API Fetching Logic
 const { getOpenDataReports } = usePublic()
@@ -15,6 +17,10 @@ const { data: openDataResponse, pending } = await useAsyncData(
     { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
 )
 
+const visibleReports = computed(() =>
+  (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+)
+
 // Pagination logic: If we receive less items than `perPage`, we are on the last page.
 const isLastPage = computed(() => {
   if (!openDataResponse.value?.reports) return true
@@ -30,6 +36,10 @@ const prevPage = () => {
 
 // 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) => {
@@ -39,6 +49,99 @@ const getStatusBadge = (status: string) => {
     default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
   }
 }
+
+const loadLeaflet = async () => {
+  if (leaflet) return leaflet
+  leaflet = await import('leaflet')
+  return leaflet
+}
+
+const clearMarkers = () => {
+  if (!map) return
+  markers.forEach((marker) => marker.removeFrom(map!))
+  markers = []
+}
+
+const renderMapMarkers = async () => {
+  if (!import.meta.client || !mapContainer.value) return
+
+  const L = await loadLeaflet()
+  if (!map) return
+
+  clearMarkers()
+
+  if (visibleReports.value.length === 0) {
+    map.setView(BARI_CENTER, 12)
+    return
+  }
+
+  visibleReports.value.forEach((report) => {
+    const marker = L.circleMarker([report.latitude, report.longitude], {
+      radius: 8,
+      weight: 2,
+      color: '#ffffff',
+      fillColor: getStatusBadge(report.status).class === 'bg-success' ? '#008758' : getStatusBadge(report.status).class === 'bg-secondary' ? '#5c6f82' : '#2f80ed',
+      fillOpacity: 0.95,
+    })
+
+    marker.bindPopup(`
+      <div class="open-data-popup">
+        <strong>${report.category_name}</strong><br/>
+        <span>ID #${report.id}</span><br/>
+        <span>${report.area_name || 'Area comunale non specificata'}</span><br/>
+        <span>Segnalato ${new Date(report.created_at).toLocaleDateString('it-IT')}</span>
+      </div>
+    `)
+
+    marker.addTo(map!)
+    markers.push(marker)
+  })
+
+  const fitBounds: LatLngBoundsExpression = visibleReports.value.map((report) => [report.latitude, report.longitude])
+  map.fitBounds(fitBounds, { padding: [32, 32], maxZoom: 15 })
+}
+
+const initMap = async () => {
+  if (!import.meta.client || !mapContainer.value || map) return
+
+  const L = await loadLeaflet()
+  const bariBounds = L.latLngBounds(
+    [BARI_BOUNDS.south, BARI_BOUNDS.west],
+    [BARI_BOUNDS.north, BARI_BOUNDS.east]
+  )
+
+  map = L.map(mapContainer.value, {
+    maxBounds: bariBounds,
+    maxBoundsViscosity: 1,
+    minZoom: 11,
+  }).setView(BARI_CENTER, 12)
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; OpenStreetMap contributors'
+  }).addTo(map)
+
+  await renderMapMarkers()
+}
+
+watch(currentView, async (view) => {
+  if (view !== 'map') return
+  await nextTick()
+  await initMap()
+  map?.invalidateSize()
+  await renderMapMarkers()
+})
+
+watch(visibleReports, async () => {
+  if (currentView.value === 'map' && map) {
+    await renderMapMarkers()
+  }
+})
+
+onBeforeUnmount(() => {
+  clearMarkers()
+  map?.remove()
+  map = null
+})
 </script>
 
 <template>
@@ -47,7 +150,7 @@ const getStatusBadge = (status: string) => {
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
-          <div class="col-12">
+          <div class="col-12 text-center">
             <div class="it-hero-text-wrapper p-4">
               <h1 class="text-white font-weight-bold">Open Data Interventi</h1>
               <p class="text-white mt-2 lead">
@@ -102,7 +205,7 @@ const getStatusBadge = (status: string) => {
       <!-- GRID VIEW -->
       <div v-else-if="currentView === 'grid'">
         <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
-          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
+          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
             <!-- Strict BI Card -->
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100 shadow-sm">
@@ -170,18 +273,15 @@ const getStatusBadge = (status: string) => {
         </nav>
       </div>
 
-      <!-- MAP VIEW (Placeholder for Leaflet/Mapbox) -->
+      <!-- MAP VIEW -->
       <div v-else-if="currentView === 'map'" class="map-view-wrapper">
-        <div class="alert alert-info d-flex align-items-center" role="alert">
-          <span>La visualizzazione mappa è un modulo interattivo (ad es. Leaflet o Mapbox) che utilizzerà le coordinate <strong>latitudine</strong> e <strong>longitudine</strong> fornite dalle API.</span>
-        </div>
-        <div class="bg-light border rounded d-flex align-items-center justify-content-center" style="height: 500px;">
-          <div class="text-center text-muted">
-            <BIIcon name="it-map" size="xl" class="mb-3 opacity-50" />
-            <h4 class="h5">Mappa Interattiva</h4>
-            <p>Caricamento dei {{ openDataResponse?.reports?.length || 0 }} punti geografici in corso...</p>
-          </div>
+        <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>
         </div>
+        <ClientOnly>
+          <div ref="mapContainer" class="open-data-map rounded border"></div>
+        </ClientOnly>
       </div>
 
     </div>
@@ -201,4 +301,18 @@ const getStatusBadge = (status: string) => {
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
 }
+
+.open-data-map {
+  height: 520px;
+  width: 100%;
+  z-index: 1;
+}
+
+:global(.open-data-popup) {
+  color: #17324d;
+  font-family: "Titillium Web", Arial, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  min-width: 12rem;
+}
 </style>

app/pages/operator/assigned.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Mie Assegnazioni - Operatore' })
+
+const { getAssignedReports } = useOperator()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: reportsRes, pending } = useAsyncData(
+  'operator-assigned-reports', 
+  () => getAssignedReports({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 font-weight-bold mb-0">Le Mie Assegnazioni</h1>
+      <div>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
+        <NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</NuxtLink>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
+      Non hai segnalazioni in carico al momento.
+    </div>
+
+    <div v-else>
+      <ReportTable
+        :reports="reportsRes.reports"
+        detail-base-path="/operator/reports"
+        action-label="Apri segnalazione"
+      />
+
+      <Pagination 
+        v-if="reportsRes.total > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="reportsRes.total"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>

app/pages/operator/index.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Segnalazioni Aperte - Operatore' })
+
+const { getOpenReports, takeReport } = useOperator()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: reportsRes, pending, refresh } = useAsyncData(
+  'operator-open-reports', 
+  () => getOpenReports({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+const handleTakeReport = async (id: number) => {
+  try {
+    const res = await takeReport(id)
+    if (res.ok) {
+          await refresh()
+    }
+  } catch (err) {
+    console.error('Failed to take report', err)
+  }
+}
+
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 font-weight-bold mb-0">Segnalazioni da prendere in carico (OPEN)</h1>
+      <div>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
+        <NuxtLink to="/operator/assigned" class="btn btn-outline-primary btn-sm">Le mie assegnazioni</NuxtLink>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
+      Non ci sono segnalazioni aperte in questo momento.
+    </div>
+
+    <div v-else>
+      <ReportTable
+        :reports="reportsRes.reports"
+        action-variant="manage"
+        detail-base-path="/operator/reports"
+        @take="handleTakeReport"
+      />
+
+      <Pagination 
+        v-if="reportsRes.total > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="reportsRes.total"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>

app/pages/operator/others.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Gestite da Altri - Operatore' })
+
+const { getOtherOperatorReports } = useOperator()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: reportsRes, pending } = useAsyncData(
+  'operator-other-reports', 
+  () => getOtherOperatorReports({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+</script>
+
+<template>
+  <div class="container my-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 font-weight-bold mb-0">Gestite da altri Operatori</h1>
+      <div>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
+        <NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</NuxtLink>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
+      Non ci sono segnalazioni gestite da altri.
+    </div>
+
+    <div v-else>
+      <ReportTable
+        :reports="reportsRes.reports"
+        detail-base-path="/operator/reports"
+        action-label="Apri segnalazione"
+      />
+
+      <Pagination 
+        v-if="reportsRes.total > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="reportsRes.total"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+import type { Message, ReportStatus } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Gestione Segnalazione - Operatore' })
+
+const route = useRoute()
+const runtimeConfig = useRuntimeConfig()
+const reportId = Number(route.params.id)
+
+if (!reportId) {
+  navigateTo('/operator')
+}
+
+const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
+const { getInterventionSummary, updateReportStatus, assignTeam, getTeams } = 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))
+const { data: teamsData } = await useAsyncData('operator-teams', () => getTeams())
+
+const report = computed(() => (reportData.value as any)?.report)
+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 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',
+  ASSIGNED: 'Assegnata',
+  IN_PROGRESS: 'In lavorazione',
+  RESOLVED: 'Risolta',
+  REJECTED: 'Respinta',
+  CLOSED: 'Chiusa'
+}
+
+// Form Cambia Stato
+const newStatus = ref<ReportStatus>('IN_PROGRESS')
+const statusNote = ref('')
+const isUpdatingStatus = ref(false)
+
+// Form Assegna Squadra
+const isAssignModalOpen = ref(false)
+const selectedTeamId = ref<number | null>(null)
+const isAssigning = ref(false)
+
+// Messaggi
+const isSubmittingMessage = ref(false)
+const isFlaggingMessageId = ref<number | null>(null)
+
+const availableStatuses: { value: ReportStatus, label: string }[] = [
+  { value: 'OPEN', label: 'Aperta' },
+  { value: 'UNDER_REVIEW', label: 'In Revisione' },
+  { value: 'ASSIGNED', label: 'Assegnata' },
+  { value: 'IN_PROGRESS', label: 'In Lavorazione' },
+  { value: 'RESOLVED', label: 'Risolta' },
+  { value: 'REJECTED', label: 'Rifiutata' },
+  { value: 'CLOSED', label: 'Chiusa' }
+]
+
+// Inizializza lo stato nel form
+watch(() => report.value?.status, (val) => {
+  if (val) newStatus.value = val as ReportStatus
+}, { immediate: true })
+
+const handleStatusUpdate = async () => {
+  isUpdatingStatus.value = true
+  try {
+    const res = await updateReportStatus(reportId, {
+      status: newStatus.value,
+      note: statusNote.value || undefined
+    })
+    if (res.ok) {
+      statusNote.value = ''
+      await Promise.all([refreshReport(), refreshSummary()])
+    }
+  } catch (e) {
+    console.error('Failed to update status', e)
+  } finally {
+    isUpdatingStatus.value = false
+  }
+}
+
+const handleAssignTeam = async () => {
+  if (!selectedTeamId.value) return
+  isAssigning.value = true
+  try {
+    const res = await assignTeam(reportId, {
+      team_id: selectedTeamId.value
+    })
+    if (res.ok) {
+      isAssignModalOpen.value = false
+      selectedTeamId.value = null
+      await Promise.all([refreshReport(), refreshSummary()])
+    }
+  } catch (e) {
+    console.error('Failed to assign team', e)
+  } finally {
+    isAssigning.value = false
+  }
+}
+
+const handleSendMessage = async (msgText: string, files: File[]) => {
+  if (!msgText.trim() && files.length === 0) return
+  isSubmittingMessage.value = true
+  try {
+    await addMessage(reportId, { body: msgText })
+    await refreshMessages()
+  } catch (e) {
+    console.error('Failed to send message', e)
+  } finally {
+    isSubmittingMessage.value = false
+  }
+}
+
+const canFlagMessage = (message: Message) => {
+  if (!user.value) return false
+  return message.user_id !== user.value.id && message.user_id === report.value?.user_id
+}
+
+const handleFlagMessage = async (message: Message) => {
+  if (!canFlagMessage(message)) return
+
+  isFlaggingMessageId.value = message.id
+  try {
+    await flagMessage(reportId, message.id, {
+      reason: 'Messaggio segnalato da operatore responsabile per verifica moderazione',
+    })
+  } catch (e) {
+    console.error('Failed to flag message', e)
+  } finally {
+    isFlaggingMessageId.value = null
+  }
+}
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '-'
+  return new Date(dateString).toLocaleDateString('it-IT', {
+    day: '2-digit', month: '2-digit', year: 'numeric',
+    hour: '2-digit', minute: '2-digit'
+  })
+}
+
+const latestCitizenMessage = computed(() => {
+  const reportUserId = report.value?.user_id
+  if (!reportUserId) return null
+
+  return [...messages.value]
+    .reverse()
+    .find((message) => message.user_id === reportUserId) || null
+})
+</script>
+
+<template>
+  <div v-if="report">
+    <div class="report-hero py-4">
+      <div class="container">
+        <NuxtLink to="/operator/assigned" class="btn btn-sm btn-link text-decoration-none ps-0 mb-2">
+          &larr; Torna alle assegnazioni
+        </NuxtLink>
+        <div class="row g-3 align-items-end">
+          <div class="col-12 col-lg-8">
+            <div class="report-hero-meta mb-2">
+              <span class="report-id">Intervento #{{ reportId }}</span>
+              <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>
+          </div>
+          <div class="col-12 col-lg-4">
+            <div class="report-hero-stats">
+              <div class="hero-stat">
+                <span class="hero-stat-label">Stato</span>
+                <strong>{{ statusMeta[report.status] || report.status }}</strong>
+              </div>
+              <div class="hero-stat">
+                <span class="hero-stat-label">Aperta</span>
+                <strong>{{ formatDate(report.created_at) }}</strong>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container my-5">
+      <div class="row g-4">
+        <div class="col-12 col-xl-7">
+          <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" />
+                <h2 class="h6 mb-0">Dettagli segnalazione</h2>
+              </div>
+              <dl class="report-detail-grid mb-0">
+                <div>
+                  <dt>Indirizzo</dt>
+                  <dd>{{ report.address }}</dd>
+                </div>
+                <div>
+                  <dt>Coordinate</dt>
+                  <dd>{{ report.latitude }}, {{ report.longitude }}</dd>
+                </div>
+                <div>
+                  <dt>Area</dt>
+                  <dd>{{ report.area_name || 'Non specificata' }}</dd>
+                </div>
+                <div>
+                  <dt>Operatore assegnato</dt>
+                  <dd>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : 'Non assegnato' }}</dd>
+                </div>
+              </dl>
+
+              <div class="report-description mt-4">
+                <h3 class="h6 mb-2">Descrizione</h3>
+                <p class="mb-0 text-break">{{ report.description }}</p>
+              </div>
+
+              <div v-if="media.length > 0">
+                <h3 class="h6 mt-4 mb-3">Allegati del cittadino</h3>
+                <div class="row g-2">
+                  <div v-for="m in media" :key="m.id" class="col-4 col-md-3">
+                    <img v-if="m.media_kind === 'IMAGE'" :src="runtimeConfig.public.api + m.url" class="img-fluid rounded object-fit-cover shadow-sm report-media-frame" style="aspect-ratio: 1;" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card card-bg border-0 shadow-sm mb-4">
+            <div class="card-body">
+              <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" />
+                    <h2 class="h6 mb-0">Comunicazioni con cittadino</h2>
+                  </div>
+                  <p class="text-muted small mb-0">Chat unica pratica. Mantieni aggiornamenti chiari e brevi.</p>
+                </div>
+                <span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
+              </div>
+              <MessageList
+                :messages="messages"
+                :can-flag-message="canFlagMessage"
+                :is-flagging-message-id="isFlaggingMessageId"
+                @flag="handleFlagMessage"
+              />
+              <MessageComposer @send="handleSendMessage" />
+            </div>
+          </div>
+        </div>
+
+        <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-body">
+              <h2 class="h6 mb-3">Quadro operativo</h2>
+              <ul class="report-summary-list list-unstyled mb-4">
+                <li>
+                  <span>Operatore</span>
+                  <strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
+                </li>
+                <li>
+                  <span>Team disponibili</span>
+                  <strong>{{ teams.length }}</strong>
+                </li>
+                <li>
+                  <span>Allegati</span>
+                  <strong>{{ summaryMedia.length || media.length }}</strong>
+                </li>
+              </ul>
+              <div class="report-description">
+                <h3 class="h6 mb-2">Ultimo messaggio cittadino</h3>
+                <p class="small mb-0">
+                  {{ latestCitizenMessage?.body || 'Nessun messaggio del cittadino disponibile.' }}
+                </p>
+              </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-body">
+              <h2 class="h6 mb-3">Aggiorna stato</h2>
+              <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 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 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>
+
+    <!-- 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">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Gestione Intervento</h5>
+            <button type="button" class="btn-close" @click="isAssignModalOpen = false"></button>
+          </div>
+          <div class="modal-body">
+            <form @submit.prevent="handleAssignTeam">
+              <div class="mb-3">
+                <label class="form-label">Team incaricato</label>
+                <select v-model.number="selectedTeamId" class="form-select" required>
+                  <option :value="null">Seleziona team</option>
+                  <option v-for="team in teams" :key="team.id" :value="team.id">
+                    {{ team.name }}<template v-if="team.category_name"> · {{ team.category_name }}</template>
+                    <template v-if="team.area_name"> · {{ team.area_name }}</template>
+                  </option>
+                </select>
+                <small v-if="teams.length === 0" class="form-text text-danger">
+                  Nessun team attivo disponibile.
+                </small>
+              </div>
+              <div class="d-flex justify-content-end gap-2 mt-4">
+                <button type="button" class="btn btn-outline-secondary" @click="isAssignModalOpen = false">Annulla</button>
+                <button type="submit" class="btn btn-primary" :disabled="isAssigning || !selectedTeamId">
+                  <span v-if="isAssigning" class="spinner-border spinner-border-sm me-2"></span>
+                  Salva Assegnazione
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <div v-else class="text-center py-5">
+    <div class="spinner-border text-primary" role="status"></div>
+  </div>
+</template>
+
+<style scoped>
+.report-hero {
+  background: #f5f7f9;
+  border-bottom: 1px solid #d9e3ee;
+}
+
+.report-hero-meta,
+.report-section-head {
+  align-items: center;
+  display: flex;
+}
+
+.report-hero-meta {
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.report-id {
+  color: #5c6f82;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.report-hero-address {
+  color: #455b71;
+  font-size: 1.05rem;
+}
+
+.report-hero-stats {
+  background: #fff;
+  border: 1px solid #d9e3ee;
+  border-radius: 4px;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 1rem;
+}
+
+.hero-stat {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.hero-stat-label,
+.report-detail-grid dt {
+  color: #5c6f82;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+  text-transform: uppercase;
+}
+
+.report-detail-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.report-detail-grid dd {
+  color: #17324d;
+  font-weight: 600;
+  margin: 0;
+}
+
+.report-description {
+  background: #f5f7f9;
+  border: 1px solid #e4ebf1;
+  border-radius: 4px;
+  padding: 1rem;
+}
+
+.report-chat-header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.report-summary-list {
+  display: grid;
+  gap: 0.875rem;
+}
+
+.report-summary-list li {
+  align-items: baseline;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.report-sidebar {
+  position: sticky;
+  top: 1.5rem;
+}
+
+.report-media-frame {
+  border: 1px solid #d9e3ee;
+}
+
+.object-fit-cover {
+  object-fit: cover;
+}
+
+@media (max-width: 991.98px) {
+  .report-detail-grid,
+  .report-hero-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .report-sidebar {
+    position: static;
+  }
+}
+</style>

app/pages/profile.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'Profilo - Visione' })
+
+const { user, fetchRewards, logout } = useAuth()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: rewardsData } = await useAsyncData(
+  'profile-rewards',
+  () => fetchRewards({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+const rewards = computed(() => rewardsData.value?.reward_events || [])
+const totalPoints = computed(() => rewardsData.value?.points || 0)
+const totalRewards = computed(() => rewards.value.length)
+
+const formatDate = (dateString: string) =>
+  new Date(dateString).toLocaleDateString('it-IT', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+</script>
+
+<template>
+  <div>
+    <div class="bg-light border-bottom py-4 mb-4">
+      <div class="container">
+        <h1 class="h3 font-weight-bold mb-1">Profilo</h1>
+        <p class="text-muted mb-0">Dati account, punti cittadino e impostazioni personali.</p>
+      </div>
+    </div>
+
+    <div class="container mb-5">
+      <div class="row g-4">
+        <div class="col-12 col-lg-8">
+          <div class="card card-bg mb-4">
+            <div class="card-body">
+              <div class="d-flex justify-content-between align-items-center mb-3">
+                <h2 class="h5 card-title mb-0">Dati personali</h2>
+                <NuxtLink to="/settings/profile" class="btn btn-outline-primary btn-sm">
+                  Modifica
+                </NuxtLink>
+              </div>
+              <div class="row">
+                <div class="col-md-6 mb-3">
+                  <small class="text-muted d-block">Nome</small>
+                  <strong>{{ user?.first_name }}</strong>
+                </div>
+                <div class="col-md-6 mb-3">
+                  <small class="text-muted d-block">Cognome</small>
+                  <strong>{{ user?.last_name }}</strong>
+                </div>
+                <div class="col-md-6 mb-3">
+                  <small class="text-muted d-block">Email</small>
+                  <strong>{{ user?.email }}</strong>
+                </div>
+                <div class="col-md-6 mb-3">
+                  <small class="text-muted d-block">Telefono</small>
+                  <strong>{{ user?.phone || 'Non fornito' }}</strong>
+                </div>
+                <div class="col-md-6 mb-0">
+                  <small class="text-muted d-block">Codice fiscale</small>
+                  <strong>{{ user?.fiscal_code }}</strong>
+                </div>
+                <div class="col-md-6 mb-0">
+                  <small class="text-muted d-block">Ruolo</small>
+                  <span class="badge bg-info">{{ user?.role }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card card-bg">
+            <div class="card-body">
+              <div class="d-flex justify-content-between align-items-center mb-3">
+                <h2 class="h5 card-title mb-0">Cronologia punti</h2>
+                <span class="badge bg-primary">{{ totalPoints }} punti</span>
+              </div>
+
+              <div v-if="rewards.length === 0" class="alert alert-info mb-0" role="alert">
+                Nessun punto registrato.
+              </div>
+
+              <template v-else>
+                <div class="table-responsive">
+                  <table class="table table-hover mb-0">
+                    <thead class="table-light">
+                      <tr>
+                        <th scope="col">Data</th>
+                        <th scope="col">Segnalazione</th>
+                        <th scope="col">Motivo</th>
+                        <th scope="col" class="text-end">Punti</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="reward in rewards" :key="reward.id">
+                        <td class="text-muted">{{ formatDate(reward.created_at) }}</td>
+                        <td>
+                          <NuxtLink :to="`/reports/${reward.report_id}`">#{{ reward.report_id }}</NuxtLink>
+                        </td>
+                        <td>{{ reward.reason }}</td>
+                        <td class="text-end">
+                          <span class="badge bg-success">+{{ reward.points }}</span>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <Pagination
+                  v-if="totalRewards > perPage"
+                  :current-page="page"
+                  :per-page="perPage"
+                  :total-items="totalRewards"
+                  @page-change="page = $event"
+                />
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-lg-4">
+          <div class="card card-bg mb-4">
+            <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 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>
+              </div>
+            </div>
+          </div>
+
+          <div class="card card-bg">
+            <div class="card-body">
+              <h2 class="h6 card-title mb-2">Punti cittadino</h2>
+              <div class="display-6 text-primary font-weight-bold mb-2">{{ totalPoints }}</div>
+              <p class="small text-muted mb-0">
+                I punti vengono accreditati sulle segnalazioni concluse con esito positivo.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/reports/[id].vue

@@ -8,7 +8,7 @@ useHead({ title: 'Dettaglio Segnalazione - Visione' })
 const runtimeConfig = useRuntimeConfig()
 
 const route = useRoute()
-const { getReportDetail, getMessages, addMessage, addFeedback, flagReport } = useReports()
+const { getReportDetail, getMessages, addMessage, addFeedback } = useReports()
 const { user } = useAuth()
 
 const reportId = Number(route.params.id)
@@ -36,47 +36,17 @@ const isFeedbackOpen = ref(false)
 const feedbackRating = ref(5)
 const feedbackComment = ref('')
 const isSubmittingFeedback = ref(false)
-const flagMessage = ref('')
-const isFlagging = ref(false)
 const selectedMediaIndex = ref(0)
 const isGalleryOpen = ref(false)
 
-// Status badge color
-const getStatusColor = (status: string): string => {
-  const colors: Record<string, string> = {
-    OPEN: 'primary',
-    UNDER_REVIEW: 'info',
-    ASSIGNED: 'warning',
-    IN_PROGRESS: 'warning',
-    RESOLVED: 'success',
-    REJECTED: 'danger',
-    CLOSED: 'secondary',
-  }
-  return colors[status] || 'secondary'
-}
-
-// Status label italiano
-const getStatusLabel = (status: string): string => {
-  const labels: Record<string, string> = {
-    OPEN: 'Aperta',
-    UNDER_REVIEW: 'In revisione',
-    ASSIGNED: 'Assegnata',
-    IN_PROGRESS: 'In corso',
-    RESOLVED: 'Risolta',
-    REJECTED: 'Rifiutata',
-    CLOSED: 'Chiusa',
-  }
-  return labels[status] || status
-}
-
 // Invia messaggio
-const handleSendMessage = async () => {
-  if (!newMessage.value.trim()) return
+const handleSendMessage = async (msgText: string, files: File[]) => {
+  if (!msgText.trim() && files.length === 0) return
 
   isSubmittingMessage.value = true
   try {
-    await addMessage(reportId, { body: newMessage.value })
-    newMessage.value = ''
+    // Gestione mock di file, nella realtà si usa FormData o simle
+    await addMessage(reportId, { body: msgText })
     await refreshMessages()
   } catch (error) {
     console.error('Error sending message:', error)
@@ -104,26 +74,17 @@ const handleSubmitFeedback = async () => {
   }
 }
 
-// Segnala abuso
-const handleFlag = async () => {
-  if (!flagMessage.value.trim()) return
-
-  isFlagging.value = true
-  try {
-    await flagReport(reportId, {
-      reason: flagMessage.value,
-    })
-    flagMessage.value = ''
-    // Mostra messaggio di successo
-  } catch (error) {
-    console.error('Error flagging report:', error)
-  } finally {
-    isFlagging.value = false
-  }
-}
-
 const isOwner = computed(() => report.value?.user_id === user.value?.id)
 const canFeedback = computed(() => report.value?.status === 'RESOLVED' || report.value?.status === 'CLOSED')
+const statusMeta: Record<string, { label: string; tone: string }> = {
+  OPEN: { label: 'Aperta', tone: 'info' },
+  UNDER_REVIEW: { label: 'In revisione', tone: 'warning' },
+  ASSIGNED: { label: 'Assegnata', tone: 'info' },
+  IN_PROGRESS: { label: 'In lavorazione', tone: 'primary' },
+  RESOLVED: { label: 'Risolta', tone: 'success' },
+  REJECTED: { label: 'Respinta', tone: 'danger' },
+  CLOSED: { label: 'Chiusa', tone: 'secondary' },
+}
 
 const formatDate = (dateString: string): string => {
   return new Date(dateString).toLocaleDateString('it-IT', {
@@ -138,76 +99,80 @@ const formatDate = (dateString: string): string => {
 
 <template>
   <div v-if="report">
-    <!-- HEADER -->
-    <div class="bg-light border-bottom py-4">
+    <div class="report-hero py-4 py-lg-5">
       <div class="container">
-        <div class="row">
-          <div class="col-12 col-md-8">
+        <div class="row align-items-end g-3">
+          <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" />
+            </div>
             <h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
-            <div class="d-flex align-items-center gap-3">
-              <span class="badge" :class="`bg-${getStatusColor(report.status)}`">
-                {{ getStatusLabel(report.status) }}
-              </span>
-              <small class="text-muted">
-                <BIIcon name="it-clock" size="xs" class="me-1" />
-                Creata il {{ formatDate(report.created_at) }}
-              </small>
+            <p class="mb-0 report-hero-address">{{ report.address }}</p>
+          </div>
+          <div class="col-12 col-lg-4">
+            <div class="report-hero-stats">
+              <div class="hero-stat">
+                <span class="hero-stat-label">Stato</span>
+                <strong>{{ statusMeta[report.status]?.label || report.status }}</strong>
+              </div>
+              <div class="hero-stat">
+                <span class="hero-stat-label">Creata</span>
+                <strong>{{ formatDate(report.created_at) }}</strong>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- CONTENUTO PRINCIPALE -->
     <div class="container my-5">
-      <div class="row">
-
-        <!-- SINISTRA: Dettagli segnalazione -->
-        <div class="col-12 col-lg-8 mb-4">
-
-          <!-- INDIRIZZO E COORDINATE -->
-          <div class="card card-bg mb-4">
+      <div class="row g-4">
+        <div class="col-12 col-xl-8">
+          <div class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
+              <div class="report-section-head mb-3">
                 <BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
-                Posizione
-              </h6>
-              <div class="mb-2">
-                <strong>{{ report.address }}</strong>
+                <h2 class="h6 mb-0">Posizione e dettagli</h2>
+              </div>
+              <dl class="report-detail-grid mb-0">
+                <div>
+                  <dt>Indirizzo</dt>
+                  <dd>{{ report.address }}</dd>
+                </div>
+                <div>
+                  <dt>Coordinate</dt>
+                  <dd>{{ report.latitude }}, {{ report.longitude }}</dd>
+                </div>
+                <div v-if="report.area_name">
+                  <dt>Area</dt>
+                  <dd>{{ report.area_name }}</dd>
+                </div>
+                <div>
+                  <dt>Ultimo aggiornamento</dt>
+                  <dd>{{ formatDate(report.updated_at || report.created_at) }}</dd>
+                </div>
+              </dl>
+
+              <div class="report-description mt-4">
+                <h3 class="h6 mb-2">Descrizione</h3>
+                <p class="mb-0 text-break">{{ report.description }}</p>
               </div>
-              <small class="text-muted d-block">
-                Coordinate: {{ report.latitude }}, {{ report.longitude }}
-              </small>
-              <small v-if="report.area_name" class="text-muted d-block">
-                Area: {{ report.area_name }}
-              </small>
             </div>
           </div>
 
-          <!-- DESCRIZIONE -->
-          <div class="card card-bg mb-4">
+          <div v-if="media.length > 0" class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-write" size="sm" color="primary" class="me-2" />
-                Descrizione
-              </h6>
-              <p class="card-text text-break">{{ report.description }}</p>
-            </div>
-          </div>
-
-          <!-- GALLERY MEDIA -->
-          <div v-if="media.length > 0" class="card card-bg mb-4">
-            <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
+              <div class="report-section-head mb-3">
                 <BIIcon name="it-camera" size="sm" color="primary" class="me-2" />
-                Allegati ({{ media.length }})
-              </h6>
-              <div class="row">
-                <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">
-                    <img :src="runtimeConfig.public.api + m.url" :alt="`Allegato ${idx + 1}`" class="object-fit-cover" />
+                <h2 class="h6 mb-0">Allegati ({{ media.length }})</h2>
               </div>
-                  <div v-else class="ratio ratio-1x1 bg-dark rounded d-flex align-items-center justify-content-center">
+              <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">
+                    <img :src="runtimeConfig.public.api + m.url" :alt="`Allegato ${Number(idx) + 1}`" 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">
                     <BIIcon name="it-video" size="xl" color="white" />
                   </div>
                 </div>
@@ -215,13 +180,12 @@ const formatDate = (dateString: string): string => {
             </div>
           </div>
 
-          <!-- CRONOLOGIA STATI -->
-          <div v-if="statusHistory.length > 0" class="card card-bg mb-4">
+          <div v-if="statusHistory.length > 0" class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-4">
+              <div class="report-section-head mb-4">
                 <BIIcon name="it-history" size="sm" color="primary" class="me-2" />
-                Cronologia
-              </h6>
+                <h2 class="h6 mb-0">Cronologia</h2>
+              </div>
               <div class="timeline">
                 <div v-for="item in statusHistory" :key="item.id" class="timeline-item mb-3">
                   <div class="d-flex gap-3">
@@ -230,8 +194,10 @@ const formatDate = (dateString: string): string => {
                     </div>
                     <div class="flex-grow-1">
                       <small class="text-muted">{{ formatDate(item.created_at) }}</small>
-                      <div class="small font-weight-semibold">
-                        {{ getStatusLabel(item.old_status) }} → {{ getStatusLabel(item.new_status) }}
+                      <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>
@@ -241,36 +207,57 @@ const formatDate = (dateString: string): string => {
             </div>
           </div>
 
-          <!-- MESSAGGI -->
-          <div class="card card-bg">
+          <div class="card card-bg border-0 shadow-sm">
             <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
+              <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" />
-                Chat ({{ messages.length }})
-              </h6>
+                    <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>
+                </div>
+                <span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
+              </div>
               <MessageList :messages="messages" />
-              <MessageComposer @send="(msg) => { newMessage = msg; handleSendMessage() }" />
+              <MessageComposer @send="handleSendMessage" />
             </div>
           </div>
         </div>
 
-        <!-- DESTRA: Sidebar azioni -->
-        <div class="col-12 col-lg-4">
-
-          <!-- FEEDBACK (se risolta) -->
-          <div v-if="canFeedback && isOwner" class="card card-bg card-highlight mb-4">
+        <div class="col-12 col-xl-4">
+          <div class="report-sidebar">
+            <div class="card card-bg border-0 shadow-sm mb-4">
               <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-star-outline" size="sm" color="primary" class="me-2" />
-                Lascia un feedback
-              </h6>
+                <h2 class="h6 mb-3">Riepilogo pratica</h2>
+                <ul class="report-summary-list list-unstyled mb-0">
+                  <li>
+                    <span>Cittadino proprietario</span>
+                    <strong>{{ isOwner ? 'Sì' : 'No' }}</strong>
+                  </li>
+                  <li>
+                    <span>Stato corrente</span>
+                    <strong>{{ statusMeta[report.status]?.label || report.status }}</strong>
+                  </li>
+                  <li>
+                    <span>Canale</span>
+                    <strong>Portale Visione</strong>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div v-if="canFeedback && isOwner" class="card card-bg border-0 shadow-sm mb-4">
+              <div class="card-body">
+                <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"
                   type="button"
                   class="btn btn-primary w-100"
                   @click="isFeedbackOpen = true"
                 >
-                Valuta l'intervento
+                  Valuta intervento
                 </button>
 
                 <template v-else>
@@ -280,7 +267,7 @@ 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' : 'it-star-outline'" 
+                          :name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
                           size="lg"
                           :color="n <= feedbackRating ? 'warning' : 'primary'"
                         />
@@ -292,7 +279,7 @@ const formatDate = (dateString: string): string => {
                     <textarea
                       v-model="feedbackComment"
                       class="form-control"
-                    placeholder="Commento (opzionale)"
+                      placeholder="Commento opzionale"
                       rows="3"
                     />
                   </div>
@@ -302,47 +289,19 @@ const formatDate = (dateString: string): string => {
                       <span v-if="isSubmittingFeedback" class="spinner-border spinner-border-sm me-2"></span>
                       Invia
                     </button>
-                  <button type="button" class="btn btn-light" @click="isFeedbackOpen = false">
-                    Cancella
+                    <button type="button" class="btn btn-outline-secondary" @click="isFeedbackOpen = false">
+                      Annulla
                     </button>
                   </div>
                 </template>
               </div>
             </div>
 
-          <!-- SEGNALA ABUSO -->
-          <div class="card card-bg">
-            <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-flag" size="sm" color="danger" class="me-2" />
-                Segnala abuso
-              </h6>
-              <textarea
-                v-model="flagMessage"
-                class="form-control form-control-sm mb-2"
-                placeholder="Specifica il motivo dell'abuso..."
-                rows="2"
-              />
-              <button
-                type="button"
-                class="btn btn-sm btn-outline-danger w-100"
-                @click="handleFlag"
-                :disabled="isFlagging || !flagMessage.trim()"
-              >
-                <BIIcon name="it-flag" size="xs" class="me-1" />
-                Invia segnalazione
-              </button>
           </div>
         </div>
-
-        </div>
-
       </div>
     </div>
-
   </div>
-
-  <!-- LOADING STATE -->
   <div v-else class="container my-5 text-center">
     <div class="spinner-border text-primary" role="status">
       <span class="visually-hidden">Caricamento...</span>
@@ -351,8 +310,102 @@ const formatDate = (dateString: string): string => {
 </template>
 
 <style scoped>
-.card-highlight {
-  border-color: #006f9d;
+.report-hero {
+  background: #f5f7f9;
+  border-bottom: 1px solid #d9e3ee;
+}
+
+.report-hero-meta,
+.report-section-head {
+  align-items: center;
+  display: flex;
+}
+
+.report-hero-meta {
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.report-id {
+  color: #5c6f82;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.report-hero-address {
+  color: #455b71;
+  font-size: 1.05rem;
+}
+
+.report-hero-stats {
+  background: #fff;
+  border: 1px solid #d9e3ee;
+  border-radius: 4px;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 1rem;
+}
+
+.hero-stat {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.hero-stat-label,
+.report-detail-grid dt {
+  color: #5c6f82;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+  text-transform: uppercase;
+}
+
+.report-detail-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.report-detail-grid dd {
+  color: #17324d;
+  font-weight: 600;
+  margin: 0;
+}
+
+.report-description {
+  background: #f5f7f9;
+  border: 1px solid #e4ebf1;
+  border-radius: 4px;
+  padding: 1rem;
+}
+
+.report-media-frame {
+  border: 1px solid #d9e3ee;
+}
+
+.report-chat-header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.report-sidebar {
+  position: sticky;
+  top: 1.5rem;
+}
+
+.report-summary-list {
+  display: grid;
+  gap: 0.875rem;
+}
+
+.report-summary-list li {
+  align-items: baseline;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
 }
 
 .timeline-marker {
@@ -392,9 +445,18 @@ const formatDate = (dateString: string): string => {
   width: 100%;
   height: 100%;
 }
+
+@media (max-width: 991.98px) {
+  .report-detail-grid,
+  .report-hero-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .report-sidebar {
+    position: static;
+  }
+}
 </style>
 
 
 
-
-

app/pages/reports/create.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import type { CreateReportRequest } from '~/types/api'
-
-definePageMeta({
-  middleware: 'auth',
-})
-
-useHead({ title: 'Crea Segnalazione - Visione' })
-
-const router = useRouter()
-const { createReport, uploadMedia } = useReports()
-const { user } = useAuth()
-
-// Fetch categories
-const { data: categoriesData } = await useAsyncData('categories', () =>
-    $fetch('/api/v1/admin/categories')
-)
-const categories = computed(() => (categoriesData.value as any)?.categories || [])
-
-// 👇 Manteniamo una sola dichiarazione per queste variabili
-const isLoading = ref(false)
-const errorMessage = ref('')
-
-// 👇 Manteniamo una sola funzione handleReportSubmit
-const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: File[]) => {
-  isLoading.value = true
-  errorMessage.value = ''
-
-  try {
-    // Step 1: Carica i file media se presenti
-    let uploadedMediaUrls: string[] = []
-
-    if (mediaFiles.length > 0) {
-      console.log('📸 Media files to upload:', mediaFiles)
-    }
-
-    // Step 2: Crea la segnalazione
-    const response = await createReport({
-      ...reportData,
-      media: uploadedMediaUrls, // Se l'API richiede stringhe pre-uploadate, va bene. Altrimenti passa array vuoto.
-    })
-
-    if (response.ok) {
-      // Step 3: Se ha media, carica dopo la creazione usando l'ID
-      if (mediaFiles.length > 0 && response.report_id) {
-        try {
-          const formData = new FormData()
-          mediaFiles.forEach((file) => {
-            formData.append('files', file)
-          })
-
-          await uploadMedia(response.report_id, formData)
-          console.log('✅ Media uploaded successfully')
-        } catch (err) {
-          console.error('⚠️ Media upload failed (non-critical):', err)
-        }
-      }
-
-      console.log('✅ Segnalazione creata:', response.report_id)
-
-      // Redirect al dettaglio della segnalazione
-      await router.push(`/reports/${response.report_id}`)
-    }
-  } catch (error: any) {
-    errorMessage.value = error.data?.message || 'Errore durante la creazione della segnalazione. Riprova.'
-    console.error('❌ Error creating report:', error)
-  } finally {
-    isLoading.value = false
-  }
-}
-</script>
-
-<template>
-  <div>
-    <!-- HERO -->
-    <div class="it-hero-wrapper it-primary-bg">
-      <div class="container">
-        <div class="row">
-          <div class="col-12">
-            <div class="it-hero-text-wrapper p-4">
-              <h1 class="text-white font-weight-bold">Segnala un problema</h1>
-              <p class="text-white mt-2 lead">
-                Aiutaci a migliorare la città condividendo i disservizi che noti
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- CONTENUTO -->
-    <div class="container my-5">
-      <div class="row">
-        <div class="col-12 col-lg-8 offset-lg-2">
-
-          <!-- CALLOUT INFO -->
-          <div class="callout callout-highlight callout-primary mb-4">
-            <div class="callout-title">
-              <BIIcon name="it-info-circle" />
-              La tua segnalazione è anonima
-            </div>
-            <p>
-              I tuoi dati personali non saranno visibili pubblicamente. La segnalazione verrà elaborata dagli operatori comunali e potrai tracciare lo stato dell'intervento in tempo reale.
-            </p>
-          </div>
-
-          <!-- ERRORE GLOBALE -->
-          <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
-            {{ errorMessage }}
-            <button type="button" class="btn-close" @click="errorMessage = ''"></button>
-          </div>
-
-          <!-- INFO UTENTE -->
-          <div class="card card-bg mb-4">
-            <div class="card-body">
-              <h6 class="card-title font-weight-bold mb-3">
-                <BIIcon name="it-user" size="sm" color="primary" class="me-2" />
-                Stai segnalando come:
-              </h6>
-              <div class="small">
-                <strong>{{ user?.first_name }} {{ user?.last_name }}</strong><br>
-                <span class="text-muted">{{ user?.email }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- FORM PRINCIPALE -->
-          <ReportForm :categories="categories" :is-loading="isLoading" @submit="handleReportSubmit" />
-
-          <!-- NOTE LEGALI -->
-          <div class="alert alert-info mt-5" role="alert">
-            <small class="d-block">
-              Sottoponendo questa segnalazione accetti i nostri <NuxtLink to="/privacy" target="_blank">Termini di Servizio</NuxtLink>
-              e l'<NuxtLink to="/privacy" target="_blank">Informativa sulla Privacy</NuxtLink>.
-              Le segnalazioni con contenuti abusivi o offensivi verranno rimosse e l'utente potrebbe essere sanzionato.
-            </small>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<style scoped>
-.it-primary-bg {
-  background: linear-gradient(135deg, #006f9d 0%, #003d5c 100%);
-}
-</style>

app/pages/reports/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { Report } from '~/types/api'
+import { isWithinBariBounds } from '~/utils/bari'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'Le mie segnalazioni - Visione' })
+
+const { getReports } = useReports()
+
+const page = ref(1)
+const perPage = ref(10)
+const filterStatus = ref('')
+
+const { data: reportsRes, pending } = useAsyncData('citizen-reports-list', () => getReports({}))
+
+const reports = computed<Report[]>(() =>
+  (reportsRes.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+)
+const filteredReports = computed(() => {
+  if (!filterStatus.value) return reports.value
+  if (filterStatus.value === 'IN_PROGRESS') {
+    return reports.value.filter((report) => report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED')
+  }
+  return reports.value.filter((report) => report.status === filterStatus.value)
+})
+
+const paginatedReports = computed(() => {
+  const start = (page.value - 1) * perPage.value
+  return filteredReports.value.slice(start, start + perPage.value)
+})
+
+const handleStatusFilter = (status: string) => {
+  filterStatus.value = status === 'all' ? '' : status
+  page.value = 1
+}
+</script>
+
+<template>
+  <div>
+    <div class="bg-light border-bottom py-4 mb-4">
+      <div class="container">
+        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
+          <div>
+            <h1 class="h3 font-weight-bold mb-1">Le mie segnalazioni</h1>
+            <p class="text-muted mb-0">Consulta stato, cronologia e conversazioni con gli operatori.</p>
+          </div>
+          <NuxtLink to="/reports/new" class="btn btn-primary">
+            <BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
+            Nuova segnalazione
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div class="container mb-5">
+      <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
+        <div class="btn-group" role="group" aria-label="Filtri segnalazioni">
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === '' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('all')"
+          >
+            Tutte
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === 'OPEN' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('OPEN')"
+          >
+            Aperte
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === 'IN_PROGRESS' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('IN_PROGRESS')"
+          >
+            In corso
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === 'RESOLVED' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('RESOLVED')"
+          >
+            Risolte
+          </button>
+        </div>
+      </div>
+
+      <div v-if="pending" class="text-center py-5">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Caricamento...</span>
+        </div>
+      </div>
+
+      <div v-else-if="filteredReports.length === 0" class="alert alert-info" role="alert">
+        Nessuna segnalazione trovata.
+      </div>
+
+      <template v-else>
+        <ReportTable :reports="paginatedReports" action-label="Apri segnalazione" />
+        <Pagination
+          v-if="filteredReports.length > perPage"
+          :current-page="page"
+          :per-page="perPage"
+          :total-items="filteredReports.length"
+          @page-change="page = $event"
+        />
+      </template>
+    </div>
+  </div>
+</template>

app/pages/reports/new.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { CreateReportRequest } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'Nuova segnalazione - Visione' })
+
+const router = useRouter()
+const { createReport, uploadMedia, getCategories } = useReports()
+const { data: categoriesData } = await useAsyncData('categories', () => getCategories())
+const categories = computed(() => categoriesData.value?.categories || [])
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: File[]) => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await createReport({
+      ...reportData,
+      media: [],
+    })
+
+    if (response.ok && response.report_id) {
+      if (mediaFiles.length > 0) {
+        try {
+          const formData = new FormData()
+          mediaFiles.forEach((file) => formData.append('files', file))
+          await uploadMedia(response.report_id, formData)
+        } catch (error) {
+          console.error('Media upload failed:', error)
+        }
+      }
+
+      await router.push(`/reports/${response.report_id}`)
+    }
+  } catch (error: any) {
+    errorMessage.value = error.data?.message || 'Errore durante la creazione della segnalazione. Riprova.'
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="it-hero-wrapper it-primary-bg hero-compact">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Nuova segnalazione</h1>
+              <p class="text-white mt-2 lead">
+                Descrivi il problema urbano, indica la posizione e allega eventuali media.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container my-5">
+      <div class="row justify-content-center">
+        <div class="col-12 col-xl-10">
+          <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
+            {{ errorMessage }}
+            <button type="button" class="btn-close" aria-label="Chiudi" @click="errorMessage = ''"></button>
+          </div>
+
+          <ReportForm :categories="categories" :is-loading="isLoading" @submit="handleReportSubmit" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/settings/profile.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth'
+})
+
+useHead({ title: 'Modifica Profilo - Visione' })
+
+const { user, updateProfile, syncUser } = useAuth()
+const router = useRouter()
+
+const formData = reactive({
+  first_name: user.value?.first_name || '',
+  last_name: user.value?.last_name || '',
+  phone: user.value?.phone || ''
+})
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const canSubmit = computed(() => {
+  return formData.first_name.trim().length > 0 && formData.last_name.trim().length > 0
+})
+
+const handleSubmit = async () => {
+  if (!canSubmit.value) return
+
+  isLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const res = await updateProfile({
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      phone: formData.phone || undefined
+    })
+
+    if (res.ok || res.user) {
+      await syncUser()
+      successMessage.value = 'Profilo aggiornato con successo.'
+      setTimeout(() => {
+        router.push('/profile')
+      }, 1500)
+    }
+  } catch (error: any) {
+    errorMessage.value = error.data?.message || 'Errore durante l\'aggiornamento del profilo.'
+  } 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 class="card card-bg border-0 shadow-sm">
+            <div class="card-body p-4 p-lg-5">
+              <div class="d-flex align-items-center mb-3">
+                <NuxtLink to="/profile" class="btn btn-sm btn-link text-decoration-none ps-0 me-3">
+                  <BIIcon name="it-arrow-left" size="sm" />
+                </NuxtLink>
+                <h1 class="h3 mb-0">Modifica Profilo</h1>
+              </div>
+              <p class="text-muted mb-4">
+                Aggiorna i tuoi dati personali. Email e Codice Fiscale non sono modificabili.
+              </p>
+
+              <form @submit.prevent="handleSubmit" class="d-grid gap-4">
+                <div class="input-field">
+                  <label for="first_name" class="form-label">Nome</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-user" size="sm" class="input-field-icon" />
+                    <input
+                      id="first_name"
+                      v-model="formData.first_name"
+                      type="text"
+                      class="form-control"
+                      required
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field">
+                  <label for="last_name" class="form-label">Cognome</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-user" size="sm" class="input-field-icon" />
+                    <input
+                      id="last_name"
+                      v-model="formData.last_name"
+                      type="text"
+                      class="form-control"
+                      required
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field">
+                  <label for="phone" class="form-label">Telefono (opzionale)</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-telephone" size="sm" class="input-field-icon" />
+                    <input
+                      id="phone"
+                      v-model="formData.phone"
+                      type="tel"
+                      class="form-control"
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field opacity-50">
+                  <label class="form-label">Email</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-mail" size="sm" class="input-field-icon" />
+                    <input
+                      type="email"
+                      class="form-control disabled"
+                      :value="user?.email"
+                      disabled
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field opacity-50">
+                  <label class="form-label">Codice Fiscale</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-card" size="sm" class="input-field-icon" />
+                    <input
+                      type="text"
+                      class="form-control disabled"
+                      :value="user?.fiscal_code"
+                      disabled
+                    >
+                  </div>
+                </div>
+
+                <div v-if="errorMessage" class="alert alert-danger mb-0" role="alert">
+                  {{ errorMessage }}
+                </div>
+                
+                <div v-if="successMessage" class="alert alert-success mb-0" role="alert">
+                  {{ successMessage }}
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-primary w-100 py-2 mt-2"
+                  :disabled="!canSubmit || isLoading"
+                >
+                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
+                  {{ isLoading ? 'Aggiornamento in corso...' : 'Salva modifiche' }}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.input-field {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.input-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);
+  padding-left: 0.875rem;
+}
+
+.input-field-control:focus-within {
+  border-color: #06c;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.16);
+}
+
+.input-field-icon {
+  color: #5c6f82;
+}
+
+.input-field-control .form-control {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  min-width: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>

app/plugins/auth.client.ts

@@ -1,16 +1,20 @@
 export default defineNuxtPlugin(async () => {
   const auth = useAuth()
+  const currentPath = useNuxtApp().$router.currentRoute.value.path
 
   if ((auth.token.value || auth.tokenState.value) && !auth.user.value) {
     try {
-      await auth.syncUser()
+      await auth.syncUser({ currentPath })
     } catch (error) {
+      const status = (error as any)?.statusCode || (error as any)?.status || (error as any)?.response?.status
+
+      if (status === 401 || status === 403) {
+        console.error('[Auth Plugin] Sync failed with authentication error, keeping session state:', error)
+        return
+      }
+
       console.error('[Auth Plugin] Sync failed:', error)
       auth.logout()
     }
   }
-
-  console.log('[Auth Plugin] Initialized - User:', auth.user.value?.id || 'None', 'Authenticated:', auth.isAuthenticated.value)
 })
-
-

app/types/api.d.ts

@@ -208,6 +208,12 @@ export interface ChangePasswordRequest {
     new_password: string;
 }
 
+export interface UpdateProfileRequest {
+    first_name?: string;
+    last_name?: string;
+    phone?: string;
+}
+
 export interface EmailRequest {
     email: string;
 }
@@ -315,6 +321,7 @@ export interface PagedReportListResponse {
     ok: boolean;
     page: number;
     per_page: number;
+    total?: number;
     reports: Report[];
 }
 
@@ -393,6 +400,7 @@ export interface ModerationListResponse {
     ok: boolean;
     page: number;
     per_page: number;
+    total?: number;
     flags: ModerationFlag[];
 }
 
@@ -406,4 +414,6 @@ export interface OverviewStatsResponse {
     monthly_reports: { month: string; total: number }[];
     avg_resolution_hours_by_category: { category: string; value: number }[];
     avg_resolution_hours_by_area: { area: string; value: number }[];
+    total_users?: number;
+    open_reports?: number;
 }

app/utils/bari.ts

@@ -0,0 +1,15 @@
+export const BARI_BOUNDS = {
+  south: 41.0160584,
+  north: 41.1697837,
+  west: 16.7172376,
+  east: 17.0334109,
+}
+
+export const BARI_CENTER: [number, number] = [41.1257843, 16.8620293]
+
+export const isWithinBariBounds = (latitude: number, longitude: number) =>
+  latitude >= BARI_BOUNDS.south &&
+  latitude <= BARI_BOUNDS.north &&
+  longitude >= BARI_BOUNDS.west &&
+  longitude <= BARI_BOUNDS.east
+

app/utils/geocoding.ts

@@ -0,0 +1,103 @@
+import { BARI_BOUNDS, isWithinBariBounds } from '~/utils/bari'
+
+interface NominatimAddress {
+  road?: string
+  house_number?: string
+  pedestrian?: string
+  footway?: string
+  path?: string
+  cycleway?: string
+  suburb?: string
+  neighbourhood?: string
+  city?: string
+  town?: string
+  village?: string
+  municipality?: string
+}
+
+interface NominatimResult {
+  lat: string
+  lon: string
+  display_name: string
+  address?: NominatimAddress
+}
+
+export interface GeocodingSuggestion {
+  label: string
+  latitude: number
+  longitude: number
+}
+
+const NOMINATIM_BASE_URL = 'https://nominatim.openstreetmap.org'
+const bariViewbox = `${BARI_BOUNDS.west},${BARI_BOUNDS.north},${BARI_BOUNDS.east},${BARI_BOUNDS.south}`
+
+const compactAddress = (displayName: string, address?: NominatimAddress) => {
+  if (!address) {
+    return displayName
+  }
+
+  const streetName = address.road || address.pedestrian || address.footway || address.path || address.cycleway
+  const street = [streetName, address.house_number].filter(Boolean).join(' ')
+  const locality = address.city || address.town || address.village || address.municipality || 'Bari'
+  const area = address.suburb || address.neighbourhood
+  const formatted = [street, locality, area]
+    .filter(Boolean)
+    .filter((part, index, all) => all.indexOf(part) === index)
+    .join(', ')
+
+  return formatted || displayName
+}
+
+const toSuggestion = (result: NominatimResult): GeocodingSuggestion | null => {
+  const latitude = Number.parseFloat(result.lat)
+  const longitude = Number.parseFloat(result.lon)
+
+  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+    return null
+  }
+
+  return {
+    label: compactAddress(result.display_name, result.address),
+    latitude,
+    longitude
+  }
+}
+
+export const searchAddresses = async (query: string, limit = 5) => {
+  const params = new URLSearchParams({
+    q: query,
+    format: 'jsonv2',
+    addressdetails: '1',
+    'accept-language': 'it',
+    countrycodes: 'it',
+    bounded: '1',
+    viewbox: bariViewbox,
+    limit: String(limit)
+  })
+
+  const results = await $fetch<NominatimResult[]>(`${NOMINATIM_BASE_URL}/search?${params.toString()}`)
+
+  return results
+    .map(toSuggestion)
+    .filter((result): result is GeocodingSuggestion => Boolean(result))
+    .filter((result) => isWithinBariBounds(result.latitude, result.longitude))
+}
+
+export const reverseGeocode = async (latitude: number, longitude: number) => {
+  const params = new URLSearchParams({
+    lat: String(latitude),
+    lon: String(longitude),
+    zoom: '18',
+    format: 'jsonv2',
+    addressdetails: '1',
+    'accept-language': 'it'
+  })
+
+  const result = await $fetch<NominatimResult | null>(`${NOMINATIM_BASE_URL}/reverse?${params.toString()}`)
+
+  if (!result) {
+    return ''
+  }
+
+  return compactAddress(result.display_name, result.address)
+}

nuxt.config.ts

@@ -8,6 +8,8 @@ export default defineNuxtConfig({
     '@nuxtjs/sitemap',
     '@nuxtjs/robots'
   ],
+  // TODO: riattivare prima di pubblicare il sito
+  ssr: false,
   
   runtimeConfig: {
     public: {
@@ -17,36 +19,14 @@ export default defineNuxtConfig({
   },
 
   site: {
-    url: 'http://localhost:3000',
+    url: 'https://visione.studentindipendenti.it',
     name: 'Visione - Un\'occhio per la sicurezza del cittadino.',
   },
   
-  nitro: {
-    devProxy: {
-      '/api/v1': {
-        target: 'https://bk.visione.studentindipendenti.it/api/v1',
-        changeOrigin: true,
-        headers: {
-          host: 'bk.visione.studentindipendenti.it',
-          origin: 'https://visione.studentindipendenti.it',
-          referer: 'https://visione.studentindipendenti.it/'
-        }
-      },
-      '/uploads': {
-        target: 'https://bk.visione.studentindipendenti.it/uploads',
-        changeOrigin: true,
-        headers: {
-          host: 'bk.visione.studentindipendenti.it',
-          origin: 'https://visione.studentindipendenti.it',
-          referer: 'https://visione.studentindipendenti.it/'
-        }
-      }
-    }
-  },
-  
   css: [
-    '@/assets/css/style.css',
-    'bootstrap-italia/dist/css/bootstrap-italia.min.css'
+    'leaflet/dist/leaflet.css',
+    'bootstrap-italia/dist/css/bootstrap-italia.min.css',
+    '@/assets/css/style.css'
   ],
 
   fonts: {
@@ -55,5 +35,13 @@ export default defineNuxtConfig({
       { name: 'Roboto Mono', provider: 'google' },
       { name: 'Titillium Web', provider: 'google' }
     ]
+  },
+
+  app: {
+    head: {
+      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+      ]
+    }
   }
 })

package.json

@@ -15,11 +15,14 @@
     "@nuxtjs/robots": "6.0.9",
     "@nuxtjs/sitemap": "8.0.15",
     "bootstrap-italia": "^2.18.1",
+    "codice-fiscale-js": "^2.3.23",
+    "leaflet": "^1.9.4",
     "nuxt": "^4.4.7",
     "vue": "^3.5.35",
     "vue-router": "^5.1.0"
   },
   "devDependencies": {
-    "@nuxt/fonts": "^0.14.0"
+    "@nuxt/fonts": "^0.14.0",
+    "@types/leaflet": "^1.9.21"
   }
 }