fix: actualy center README

Closes #12

README.md

@@ -1,75 +1,125 @@
-# Nuxt Minimal Starter
+<div align="center">
+  <img src="https://git.reloia.uk/SnitchItaly/frontend/raw/branch/master/public/icon-512.webp" width="128" height="128" alt="Logo Visione">
+  <h1>Visione</h1>
+  <p><b>Un'occhio per la sicurezza del cittadino.</b></p>
+</div>
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+**Visione** è una piattaforma progettata per gestire le segnalazioni dei cittadini, implementando un flusso operativo
+sicuro, trasparente e istituzionalmente conforme.
 
-## Setup
+## Punti di Forza e Funzionalità Principali
 
-Make sure to install dependencies:
+- **Conformità Istituzionale e UX/UI Standardizzata:** Il frontend è sviluppato utilizzando **Bootstrap Italia** (creato
+  da Designers Italia). Questa scelta assicura un'identità visiva coerente con i servizi pubblici italiani, garantendo
+  uniformità, riconoscibilità e accessibilità.
+- **Trasparenza e Open Data:** Il sistema espone un endpoint pubblico Open Data con dataset anonimizzati relativi alle
+  segnalazioni chiuse o risolte, favorendo la trasparenza amministrativa.
+- **Automazione e Smistamento Intelligente:** Il calcolo automatico della "Zona" di competenza tramite le coordinate
+  geografiche elimina i colli di bottiglia durante il triage iniziale, instradando immediatamente la segnalazione
+  all'operatore corretto.
+- **Sicurezza e Onboarding Smart:** L'autenticazione è gestita tramite **OTP (One-Time Password)** e integrazione con *
+  *CIE (Carta d'Identità Elettronica)**, riducendo l'uso di password statiche e garantendo identità verificate.
+- **Infrastruttura DevOps e CI/CD:** Sfruttiamo un'istanza self-hosted di **Gitea** per il versionamento del codice e un
+  flusso di deployment automatizzato basato su webhook con **Dokploy**, assicurando un rilascio continuo e stabile.
+- **Ottimizzazione SEO e Reperibilità:** Configurazione avanzata per sitemap e `robots.txt` (via `@nuxtjs/robots` e
+  `@nuxtjs/sitemap`) per esplicitare chiaramente le pagine pubbliche e separarle dalle aree private.
+
+## Tecnologie Utilizzate
+
+Il progetto è costruito su uno stack moderno orientato a performance, accessibilità e manutenibilità:
+
+- **Framework Core:** [Nuxt 4](https://nuxt.com/) (Vue 3) con rendering SSR attivato.
+- **UI / Styling:** [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) per componenti accessibili e conformi
+  agli standard AGID.
+- **Mappe e Georeferenziazione:** [Leaflet](https://leafletjs.com/) interfacciato con Nominatim/OpenStreetMap per il
+  suggerimento e la validazione degli indirizzi.
+- **PWA e Ottimizzazione:** Modulo `@vite-pwa/nuxt` per Progressive Web App (manifest auto-generato) e moduli ufficiali
+  Nuxt per icone, font (Google Fonts: Lora, Roboto Mono, Titillium Web) ed elaborazione immagini.
+- **Infrastruttura:** Docker, Docker Compose, NodeJS 22.
+- **Package Manager:** **Yarn**.
+
+## Limiti e Punti di Attenzione
+
+L'attuale architettura presenta alcune criticità e aree di miglioramento individuate durante i test:
+
+1. **Rischio di Abuso e Moderazione:** L'apertura della piattaforma all'invio di messaggi e allegati potrebbe generare
+   un elevato carico di moderazione. In futuro, andranno valutati filtri automatici o code dedicate.
+2. **Dipendenza da API Cartografiche di Terze Parti:** L'utilizzo di Nominatim/OpenStreetMap per il geocoding esonera
+   dal lock-in di provider commerciali (es. Google Maps), ma introduce dipendenze su disponibilità e policy d'uso di
+   servizi esterni.
+3. **Barriere all'Ingresso:** I flussi OTP e CIE, seppur estremamente sicuri, possono rappresentare un "attrito" (
+   digital divide) per le fasce di utenza più anziane o meno avvezze agli strumenti digitali.
+
+---
+
+## Come utilizzare il progetto (Sviluppo)
+
+### Requisiti
+
+- Node.js (v22 o superiore consigliato)
+- **Yarn** (utilizza esclusivamente `yarn`, non `npm`)
+
+### 1. Installazione Dipendenze
 
 ```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
 yarn install
-
-# bun
-bun install
 ```
 
-## Development Server
+### 2. Configurazione Variabili d'Ambiente (.env)
 
-Start the development server on `http://localhost:3000`:
+Copia il file di esempio per creare la tua configurazione locale:
 
 ```bash
-# npm
+cp .env.example .env
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
+Il file `.env` richiede le seguenti chiavi:
 
-Build the application for production:
+- `NUXT_PUBLIC_URL`: URL pubblico dell'applicativo frontend (es. `http://localhost:3000`).
+- `NUXT_PUBLIC_API`: URL base per il backend API (es. `http://localhost:5555`).
+
+*(Nota: il proxy integrato in `nuxt.config.ts` inoltrerà già le richieste di `/api/v1` al target di staging
+configurato `https://api.visionebari.it` in ambiente di sviluppo).*
+
+### 3. Avvio del Server di Sviluppo
 
 ```bash
-# npm
+yarn run dev
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
-Locally preview production build:
+Il server sarà accessibile all'indirizzo [http://localhost:3000](http://localhost:3000).
+
+---
+
+## Distribuzione e Produzione (Docker)
+
+Il progetto è ottimizzato per essere deployato tramite container Docker, sfruttando processi multi-stage per generare
+un'immagine finale snella e performante basata su `node:22-bookworm`.
+
+### Build locale e avvio tramite Docker Compose
+
+Il file `docker-compose.yml` espone il servizio `visione-frontend`.
+
+1. Assicurati che il file `.env` sia valorizzato correttamente.
+2. Esegui il build e avvia in background:
 
 ```bash
-# npm
+docker compose up -d --build
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+### Dettagli sul Dockerfile
+
+- **Fase di Build (`AS build`):** Copia `package.json` e `yarn.lock`, esegue `yarn install`, copia i sorgenti ed esegue
+  `yarn run build`. Iniettando gli argomenti di environment per le API.
+- **Fase di Run (`AS run`):** Esegue `yarn install --production` per alleggerire le dipendenze finali. Trasferisce
+  l'artefatto compilato `.output` e avvia il webserver sulla porta `80` tramite `node /app/server/index.mjs`.
+
+## Testing e Azioni Migliorative Future
+
+I test attuali coprono con successo i flussi primari (registrazione, autenticazione, gestione segnalazioni,
+moderazione).
+Prossimi step suggeriti:
+
+- Consolidamento con test end-to-end (E2E) automatici per le rotte critiche (in particolare CIE/OTP).
+- Verifiche di regressione per gli endpoint Open Data per garantirne l'integrità.
+- Monitoraggio della qualità del dato geografico (segnalazioni in aree limite).

app/app.vue

@@ -9,6 +9,7 @@ useSeoMeta({
 });
 </script>
 <template>
+  <NuxtPwaManifest/>
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

app/components/Header.vue

@@ -74,7 +74,7 @@ const navLinks = [
                       <BIIcon name="it-user" color="black"/>
                       <span v-if="hasUnreadNotifications" class="notification-dot"></span>
                     </span>
-                    <span class="d-none d-lg-block">{{ user?.first_name }}</span>
+                    <span class="d-none d-lg-block username">{{ user?.first_name }}</span>
                   </NuxtLink>
 
                   <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
@@ -310,4 +310,11 @@ const navLinks = [
   background: #d9364f;
   border: 2px solid #ffffff;
 }
+
+.username {
+  max-width: 8ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

app/composables/useAuth.ts

@@ -70,8 +70,8 @@ export const useAuth = () => {
       const res = await fetchCurrentUser()
       if (res.ok) {
         user.value = res.user
-        await refreshUnreadNotifications()
+        await nuxtApp.runWithContext(() => refreshUnreadNotifications())
-        const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
+        const path = currentPath ?? nuxtApp.$router.currentRoute.value.path
 
         if (redirectOnSuccess && path.startsWith('/auth')) {
           await nuxtApp.runWithContext(() => navigateTo('/dashboard'))

app/composables/useReports.ts

@@ -1,11 +1,17 @@
 import type {
   CategoryListResponse,
   CreateReportRequest,
-  CreateReportResponse, FeedbackRequest, FlagRequest, FlagResponse,
+  CreateReportResponse,
+  FeedbackRequest,
+  FlagRequest,
+  FlagResponse,
   MediaUploadResponse,
-  MessageListResponse, MessageRequest, OkResponse,
+  MessageListResponse,
+  MessageRequest,
+  OkResponse,
   ReportDetailResponse,
-  ReportListResponse
+  ReportListResponse,
+  TeamListResponse
 } from "~/types/api";
 
 export const useReports = () => {
@@ -20,7 +26,7 @@ export const useReports = () => {
 
   const getReportDetail = (id: number) =>
       useApiFetch<ReportDetailResponse>(`/api/v1/reports/${id}`, { method: 'GET' })
-  
+
   const uploadMedia = (id: number, formData: FormData) =>
       useApiFetch<MediaUploadResponse>(`/api/v1/reports/${id}/media`, { method: 'POST', body: formData })
 
@@ -39,6 +45,9 @@ export const useReports = () => {
   const flagMessage = (reportId: number, messageId: number, body: FlagRequest) =>
       useApiFetch<FlagResponse>(`/api/v1/reports/${reportId}/messages/${messageId}/flags`, { method: 'POST', body })
 
+  const getTeamSuggestions = (id: number) =>
+      useApiFetch<TeamListResponse>(`/api/v1/reports/${id}/team-suggestions`, { method: 'GET' })
+
   return {
     getReports,
     getCategories,
@@ -50,5 +59,6 @@ export const useReports = () => {
     addFeedback,
     flagReport,
     flagMessage,
+    getTeamSuggestions,
   }
-}
+}

app/pages/admin/reports.vue

@@ -60,21 +60,37 @@ const activeReports = computed(() => reports.value.filter((report) => ['UNDER_RE
 const closedReports = computed(() => reports.value.filter((report) => ['RESOLVED', 'CLOSED'].includes(report.status)).length)
 
 const reportsByStatus = computed(() =>
-  Object.entries(statusMeta)
+    Object.entries(statusMeta)
-    .map(([status, meta]) => ({
+        .map(([status, meta]) => ({
-      status: status as ReportStatus,
+          status: status as ReportStatus,
-      label: meta.label,
+          label: meta.label,
-      tone: meta.tone,
+          tone: meta.tone,
-      total: reports.value.filter((report) => report.status === status).length
+          total: reports.value.filter((report) => report.status === status).length
-    }))
+        }))
-    .filter((item) => item.total > 0)
+        .filter((item) => item.total > 0)
 )
 
-const recentReports = computed(() =>
+const currentPage = ref(1)
-  [...filteredReports.value]
+const itemsPerPage = ref(12)
-    .sort((a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime())
+
-    .slice(0, 12)
+watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
-)
+  currentPage.value = 1
+})
+
+const totalPages = computed(() => Math.ceil(filteredReports.value.length / itemsPerPage.value))
+
+const paginatedReports = computed(() => {
+  const sorted = [...filteredReports.value].sort(
+      (a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime()
+  )
+  const start = (currentPage.value - 1) * itemsPerPage.value
+  const end = start + itemsPerPage.value
+  return sorted.slice(start, end)
+})
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+}
 
 const formatDate = (value?: string) => {
   if (!value) return '-'
@@ -160,71 +176,82 @@ const truncate = (value?: string, max = 120) => {
         <div class="card-body">
           <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
             <h2 class="h5 mb-0">Distribuzione stati</h2>
-            <span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
+            <span class="text-muted small">{{ filteredReports.length }} elementi trovati</span>
           </div>
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
               <thead>
-                <tr>
+              <tr>
-                  <th>Stato</th>
+                <th>Stato</th>
-                  <th class="text-end">Totale</th>
+                <th class="text-end">Totale</th>
-                </tr>
+              </tr>
               </thead>
               <tbody>
-                <tr v-for="item in reportsByStatus" :key="item.status">
+              <tr v-for="item in reportsByStatus" :key="item.status">
-                  <td>
+                <td>
                     <span class="badge" :class="`bg-${item.tone}`">
                       {{ item.label }}
                     </span>
-                  </td>
+                </td>
-                  <td class="text-end">{{ item.total }}</td>
+                <td class="text-end">{{ item.total }}</td>
-                </tr>
+              </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
 
-      <div v-if="recentReports.length === 0" class="alert alert-info">
+      <div v-if="filteredReports.length === 0" class="alert alert-info">
         Nessuna segnalazione trovata con filtri correnti.
       </div>
 
-      <div v-else class="card card-bg border-0 shadow-sm">
+      <div v-else class="card card-bg border-0 shadow-sm mb-5">
         <div class="card-body p-0">
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
               <thead>
-                <tr>
+              <tr>
-                  <th>ID</th>
+                <th>ID</th>
-                  <th>Categoria</th>
+                <th>Categoria</th>
-                  <th>Indirizzo</th>
+                <th>Indirizzo</th>
-                  <th>Area</th>
+                <th>Area</th>
-                  <th>Stato</th>
+                <th>Stato</th>
-                  <th>Operatore</th>
+                <th>Operatore</th>
-                  <th>Aggiornata</th>
+                <th>Aggiornata</th>
-                </tr>
+              </tr>
               </thead>
               <tbody>
-                <tr v-for="report in recentReports" :key="report.id">
+              <tr v-for="report in paginatedReports" :key="report.id">
-                  <td class="report-table-id">#{{ report.id }}</td>
+                <td class="report-table-id">#{{ report.id }}</td>
-                  <td>
+                <td>
-                    <div class="fw-semibold">{{ report.category_name || '-' }}</div>
+                  <div class="fw-semibold">{{ report.category_name || '-' }}</div>
-                    <small class="text-muted">{{ truncate(report.description, 72) }}</small>
+                  <small class="text-muted">{{ truncate(report.description, 72) }}</small>
-                  </td>
+                </td>
-                  <td>{{ report.address || '-' }}</td>
+                <td>{{ report.address || '-' }}</td>
-                  <td>{{ report.area_name || 'Non assegnata' }}</td>
+                <td>{{ report.area_name || 'Non assegnata' }}</td>
-                  <td>
+                <td>
                     <span class="badge" :class="`bg-${statusMeta[report.status].tone}`">
                       {{ statusMeta[report.status].label }}
                     </span>
-                  </td>
+                </td>
-                  <td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
+                <td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
-                  <td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
+                <td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
-                </tr>
+              </tr>
               </tbody>
             </table>
           </div>
         </div>
+
+        <div class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1">
+          <span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
+
+          <Pagination
+              :current-page="currentPage"
+              :per-page="itemsPerPage"
+              :total-items="filteredReports.length"
+              @page-change="handlePageChange"
+          />
+        </div>
       </div>
     </template>
   </div>

app/pages/index.vue

@@ -36,7 +36,7 @@ const getStatusBadge = (status: string) => {
             <div class="it-hero-text-wrapper p-4">
               <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
+                Il portale ufficiale della città metropolitana di Bari per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
                 e monitora l'intervento in totale trasparenza.
               </p>
               <div class="it-btn-container d-flex justify-content-center gap-3">
@@ -61,22 +61,21 @@ const getStatusBadge = (status: string) => {
             <BIIcon color="primary" name="it-camera" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">1. Segnala</h3>
-          <p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
+          <p class="text-muted">Fotografa il problema stradale e condividi la tua posizione.</p>
-            esatta.</p>
         </div>
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
             <BIIcon color="primary" name="it-tool" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">2. Intervento</h3>
-          <p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
+          <p class="text-muted">Il Comune attiva subito le squadre operative per risolvere il problema.</p>
         </div>
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
             <BIIcon color="primary" name="it-star-outline" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
-          <p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
+          <p class="text-muted">Problema risolto! Guadagna Punti Cittadino e valuta l'intervento.</p>
         </div>
       </div>
     </div>

app/pages/open-data.vue

@@ -7,37 +7,27 @@ const { getOpenDataReports } = usePublic()
 
 const currentPage = ref(1)
 const perPage = ref(9)
+
 const { data: openDataResponse, pending } = await useAsyncData(
     'open-data-reports',
-    () => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
+    () => getOpenDataReports({ page: 1, per_page: 200 })
-    { watch: [currentPage] }
 )
 
-const visibleReports = computed(() =>
+const allVisibleReports = computed(() =>
     (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
 )
 
-const isLastPage = computed(() => {
+const visibleReports = computed(() => {
-  if (!openDataResponse.value?.reports) return true
+  const start = (currentPage.value - 1) * perPage.value
-  return openDataResponse.value.reports.length < perPage.value
+  const end = start + perPage.value
+  return allVisibleReports.value.slice(start, end)
 })
 
-const nextPage = () => {
+const handlePageChange = (page: number) => {
-  if (!isLastPage.value) currentPage.value++
+  currentPage.value = page
-}
-const prevPage = () => {
-  if (currentPage.value > 1) currentPage.value--
 }
 
-const { data: mapOpenDataResponse, pending: mapPending } = useAsyncData(
+const mapVisibleReports = computed(() => allVisibleReports.value)
-    'open-data-map-reports',
-    () => getOpenDataReports({ page: 1, per_page: 200 }),
-    { lazy: true }
-)
-
-const mapVisibleReports = computed(() =>
-    (mapOpenDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
-)
 
 const currentView = ref<'grid' | 'map'>('grid')
 const mapContainer = ref<HTMLElement | null>(null)
@@ -170,7 +160,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div class="container my-5">
+    <div class="container my-5" id="grid-start">
       <div class="row align-items-center mb-5 pb-3 border-bottom">
         <div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
           <button
@@ -205,7 +195,7 @@ onBeforeUnmount(() => {
       </div>
 
       <div v-show="!pending && currentView === 'grid'">
-        <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
+        <div class="row" v-if="allVisibleReports.length > 0">
           <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
             <div class="card-wrapper card-space h-100">
               <div class="card card-bg h-100 shadow-sm">
@@ -251,32 +241,20 @@ onBeforeUnmount(() => {
           Nessun dato pubblico disponibile al momento.
         </div>
 
-        <nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
+        <Pagination
-          <ul class="pagination">
+            v-if="allVisibleReports.length > 0"
-            <li class="page-item" :class="{ disabled: currentPage === 1 }">
+            :current-page="currentPage"
-              <a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
+            :per-page="perPage"
-                <BIIcon name="it-chevron-left" size="sm"/>
+            :total-items="allVisibleReports.length"
-                <span class="visually-hidden">Pagina precedente</span>
+            @page-change="handlePageChange"
-              </a>
+        />
-            </li>
-            <li class="page-item">
-              <span class="page-link font-weight-semibold">Pagina {{ currentPage }}</span>
-            </li>
-            <li class="page-item" :class="{ disabled: isLastPage }">
-              <a class="page-link" href="#" @click.prevent="nextPage">
-                <span class="visually-hidden">Pagina successiva</span>
-                <BIIcon name="it-chevron-right" size="sm"/>
-              </a>
-            </li>
-          </ul>
-        </nav>
       </div>
 
       <div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
         <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
           <p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
           <span class="badge bg-light text-dark border">
-            <template v-if="mapPending">Caricamento...</template>
+            <template v-if="pending">Caricamento...</template>
             <template v-else>{{ mapVisibleReports.length }} punti</template>
           </span>
         </div>

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

@@ -16,7 +16,7 @@ if (!reportId) {
   navigateTo('/operator')
 }
 
-const { getReportDetail, getMessages, addMessage, flagMessage, flagReport } = useReports()
+const { getReportDetail, getMessages, addMessage, flagMessage, flagReport, getTeamSuggestions } = useReports()
 const {
   takeReport,
   getInterventionSummary,
@@ -31,7 +31,9 @@ const { user } = useAuth()
 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 { data: allTeamsData } = await useAsyncData('operator-teams', () => getTeams())
+const { data: suggestedTeamsData } = await useAsyncData(`op-team-suggestions-${reportId}`, () => getTeamSuggestions(reportId))
 
 const report = computed<Report | undefined>(() => (reportData.value as any)?.report)
 const media = computed(() => (reportData.value as any)?.media || [])
@@ -39,7 +41,14 @@ const statusHistory = computed(() => (reportData.value as any)?.history || [])
 const messages = computed<Message[]>(() => (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 allTeams = computed(() => (allTeamsData.value as any)?.teams || [])
+const suggestedTeams = computed(() => (suggestedTeamsData.value as any)?.suggestions || [])
+
+const otherTeams = computed(() => {
+  const suggestedIds = new Set(suggestedTeams.value.map((t: any) => Number(t.id)))
+  return allTeams.value.filter((t: any) => !suggestedIds.has(Number(t.id)))
+})
 
 const currentUserId = computed(() => user.value?.id ?? null)
 const isTakenByCurrentOperator = computed(() => report.value?.assigned_operator_id === currentUserId.value)
@@ -47,7 +56,7 @@ const isOpenAndUnassigned = computed(() => report.value?.status === 'OPEN' && !r
 const isReadOnlyPreview = computed(() => !isTakenByCurrentOperator.value)
 const canTakeReport = computed(() => isOpenAndUnassigned.value && !isTakenByCurrentOperator.value)
 const isFinalStatus = computed(() => ['REJECTED', 'RESOLVED', 'CLOSED'].includes(report.value?.status || ''))
-const canAssignTeam = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value && teams.value.length > 0)
+const canAssignTeam = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value && allTeams.value.length > 0)
 const canSendMessage = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value)
 const canChangeStatus = computed(() => !isReadOnlyPreview.value && !isFinalStatus.value && selectableStatuses.value.length > 0)
 
@@ -131,6 +140,26 @@ const reportFlagForm = reactive<FlagRequest>({
   details: ''
 })
 
+// === GESTIONE SCROLL SCHERMO CON MODALI ===
+watch(
+    () => isAssignModalOpen.value || isFlagReportModalOpen.value || isRevokeInterventionModalOpen.value || isFlagMessageModalOpen.value,
+    (isOpen) => {
+      if (import.meta.client) {
+        if (isOpen) {
+          document.body.style.overflow = 'hidden'
+        } else {
+          document.body.style.overflow = ''
+        }
+      }
+    }
+)
+
+onUnmounted(() => {
+  if (import.meta.client) {
+    document.body.style.overflow = ''
+  }
+})
+
 watch(() => report.value?.status, (val) => {
   if (val) {
     const allowed = statusTransitions[val] || []
@@ -550,8 +579,8 @@ const formattedInterventionLinkExpiry = computed(() =>
                     <strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
                   </li>
                   <li>
-                    <span>Team disponibili</span>
+                    <span>Team suggeriti</span>
-                    <strong>{{ teams.length }}</strong>
+                    <strong :class="{'text-primary': suggestedTeams.length > 0}">{{ suggestedTeams.length }}</strong>
                   </li>
                   <li>
                     <span>Allegati</span>
@@ -688,48 +717,69 @@ const formattedInterventionLinkExpiry = computed(() =>
       </div>
     </div>
 
-    <div v-if="isAssignModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <!-- BACKGROUND MODALE COMUNE -->
-    <div v-if="isAssignModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
+    <div v-if="isAssignModalOpen || isFlagReportModalOpen" class="modal-backdrop fade show d-block"
+         style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+
+    <!-- MODALE: GESTIONE INTERVENTO -->
+    <div v-if="isAssignModalOpen" class="modal fade show d-block" style="z-index: 1050; overflow-y: auto;"
+         tabindex="-1">
       <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 AGGIORNATO CON MODAL-BODY E MODAL-FOOTER -->
-            <form @submit.prevent="handleAssignTeam">
+          <form @submit.prevent="handleAssignTeam">
-              <div class="mb-3">
+            <div class="modal-body">
+              <div class="mb-0">
                 <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>
+                  <optgroup v-if="suggestedTeams.length > 0" label="Team Suggeriti">
-                    <template v-if="team.area_name"> · {{ team.area_name }}</template>
+                    <option v-for="team in suggestedTeams" :key="'sug-' + team.id" :value="Number(team.id)">
-                  </option>
+                      {{ team.name }}
+                      <template v-if="team.is_recommended"> ★</template>
+                      <template v-if="team.category_name"> · {{ team.category_name }}</template>
+                      <template v-if="team.area_name"> · {{ team.area_name }}</template>
+                    </option>
+                  </optgroup>
+
+                  <optgroup :label="suggestedTeams.length > 0 ? 'Altri Team' : 'Tutti i Team'">
+                    <option v-for="team in otherTeams" :key="'oth-' + team.id" :value="Number(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>
+                  </optgroup>
                 </select>
-                <small v-if="teams.length === 0" class="form-text text-danger">
+                <small v-if="allTeams.length === 0" class="form-text text-danger mt-1">
                   Nessun team attivo disponibile.
                 </small>
               </div>
-              <div class="d-flex justify-content-end gap-2 mt-4">
+            </div>
-                <button type="button" class="btn btn-outline-secondary" @click="isAssignModalOpen = false">Annulla</button>
+            <div class="modal-footer">
-                <button type="submit" class="btn btn-primary" :disabled="isAssigning || !selectedTeamId">
+              <button class="btn btn-outline-secondary" type="button" @click="isAssignModalOpen = false">Annulla
-                  <span v-if="isAssigning" class="spinner-border spinner-border-sm me-2"></span>
+              </button>
-                  Salva Assegnazione
+              <button :disabled="isAssigning || !selectedTeamId" class="btn btn-primary" type="submit">
-                </button>
+                <span v-if="isAssigning" class="spinner-border spinner-border-sm me-2"></span>
-              </div>
+                Salva Assegnazione
-            </form>
+              </button>
-          </div>
+            </div>
+          </form>
         </div>
       </div>
     </div>
 
-    <div v-if="isFlagReportModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <!-- MODALE: SEGNALA ALLA MODERAZIONE -->
-    <div v-if="isFlagReportModalOpen" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
+    <div v-if="isFlagReportModalOpen" class="modal fade show d-block" style="z-index: 1050; overflow-y: auto;"
+         tabindex="-1">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title">Segnala segnalazione alla moderazione</h5>
+            <h5 class="modal-title">Segnala alla moderazione</h5>
             <button type="button" class="btn-close" :disabled="isFlaggingReport" @click="isFlagReportModalOpen = false; resetReportFlagForm()"></button>
           </div>
           <div class="modal-body">
@@ -738,7 +788,7 @@ const formattedInterventionLinkExpiry = computed(() =>
               <label class="form-label">Motivo</label>
               <input v-model="reportFlagForm.reason" type="text" class="form-control" maxlength="200" />
             </div>
-            <div>
+            <div class="mb-0">
               <label class="form-label">Dettagli</label>
               <textarea v-model="reportFlagForm.details" class="form-control" rows="4" placeholder="Dettagli aggiuntivi opzionali"></textarea>
             </div>

app/pages/reports/[id].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
 definePageMeta({
   middleware: 'auth',
 })
@@ -34,6 +36,19 @@ const isFeedbackOpen = ref(false)
 const feedbackRating = ref(5)
 const feedbackComment = ref('')
 const isSubmittingFeedback = ref(false)
+const submittedFeedback = ref<{ rating: number; comment?: string } | null>(null)
+
+// Carica l'eventuale feedback da local storage dopo il mount (per evitare mismatch nel SSR)
+onMounted(() => {
+  try {
+    const saved = localStorage.getItem(`feedback_${reportId}`)
+    if (saved) {
+      submittedFeedback.value = JSON.parse(saved)
+    }
+  } catch (error) {
+    console.error('Errore nel recupero del feedback da local storage:', error)
+  }
+})
 
 const handleSendMessage = async (messageText: string, files: File[]) => {
   isSubmittingMessage.value = true
@@ -51,13 +66,18 @@ const handleSendMessage = async (messageText: string, files: File[]) => {
 const handleSubmitFeedback = async () => {
   isSubmittingFeedback.value = true
   try {
-    await addFeedback(reportId, {
+    const feedbackData = {
       rating: feedbackRating.value,
       comment: feedbackComment.value || undefined,
-    })
+    }
+
+    await addFeedback(reportId, feedbackData)
+
+    // Salva in local storage in mancanza di un endpoint dal backend
+    localStorage.setItem(`feedback_${reportId}`, JSON.stringify(feedbackData))
+    submittedFeedback.value = feedbackData
+
     isFeedbackOpen.value = false
-    feedbackRating.value = 5
-    feedbackComment.value = ''
     await refreshReport()
   } catch (error) {
     console.error('Error submitting feedback:', error)
@@ -251,50 +271,75 @@ const formatDate = (dateString: string): string => {
             <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 intervento
-                </button>
 
-                <template v-else>
+                <template v-if="submittedFeedback">
+                  <div class="alert alert-success small mb-3">
+                    Grazie! Il tuo feedback è stato inviato con successo.
+                  </div>
                   <div class="mb-3">
-                    <label class="form-label">Valutazione</label>
+                    <span class="d-block text-muted small mb-1">La tua valutazione</span>
-                    <div class="d-flex gap-2">
+                    <div class="d-flex gap-1">
-                      <button v-for="n in 5" :key="n" type="button" class="btn btn-link p-0"
+                      <BIIcon
-                              @click="feedbackRating = n" :aria-label="`${n} stelle`">
+                          v-for="n in 5"
-                        <BIIcon
+                          :key="n"
-                            :name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
+                          :name="n <= submittedFeedback.rating ? 'it-star-full' : 'it-star-outline'"
-                            size="lg"
+                          size="sm"
-                            :color="n <= feedbackRating ? 'warning' : 'primary'"
+                          :color="n <= submittedFeedback.rating ? 'warning' : 'primary'"
-                        />
+                      />
-                      </button>
                     </div>
                   </div>
-
+                  <div v-if="submittedFeedback.comment">
-                  <div class="mb-3">
+                    <span class="d-block text-muted small mb-1">Il tuo commento</span>
-                    <textarea
+                    <p class="mb-0 small text-break">{{ submittedFeedback.comment }}</p>
-                        v-model="feedbackComment"
-                        class="form-control"
-                        placeholder="Commento opzionale"
-                        rows="3"
-                    />
                   </div>
+                </template>
 
-                  <div class="d-grid gap-2">
+                <template v-else>
-                    <button :disabled="isSubmittingFeedback" class="btn btn-primary" type="button"
+                  <p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p>
-                            @click="handleSubmitFeedback">
+                  <button
-                      <span v-if="isSubmittingFeedback" class="spinner-border spinner-border-sm me-2"></span>
+                      v-if="!isFeedbackOpen"
-                      Invia
+                      type="button"
-                    </button>
+                      class="btn btn-primary w-100"
-                    <button type="button" class="btn btn-outline-secondary" @click="isFeedbackOpen = false">
+                      @click="isFeedbackOpen = true"
-                      Annulla
+                  >
-                    </button>
+                    Valuta intervento
-                  </div>
+                  </button>
+
+                  <template v-else>
+                    <div class="mb-3">
+                      <label class="form-label">Valutazione</label>
+                      <div class="d-flex gap-2">
+                        <button v-for="n in 5" :key="n" type="button" class="btn btn-link p-0"
+                                @click="feedbackRating = n" :aria-label="`${n} stelle`">
+                          <BIIcon
+                              :name="n <= feedbackRating ? 'it-star-full' : 'it-star-outline'"
+                              size="lg"
+                              :color="n <= feedbackRating ? 'warning' : 'primary'"
+                          />
+                        </button>
+                      </div>
+                    </div>
+
+                    <div class="mb-3">
+                      <textarea
+                          v-model="feedbackComment"
+                          class="form-control"
+                          placeholder="Commento opzionale"
+                          rows="3"
+                      />
+                    </div>
+
+                    <div class="d-grid gap-2">
+                      <button :disabled="isSubmittingFeedback" class="btn btn-primary" type="button"
+                              @click="handleSubmitFeedback">
+                        <span v-if="isSubmittingFeedback" class="spinner-border spinner-border-sm me-2"></span>
+                        Invia
+                      </button>
+                      <button type="button" class="btn btn-outline-secondary" @click="isFeedbackOpen = false">
+                        Annulla
+                      </button>
+                    </div>
+                  </template>
                 </template>
               </div>
             </div>

nuxt.config.ts

@@ -6,11 +6,12 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/fonts',
     '@nuxtjs/sitemap',
-    '@nuxtjs/robots'
+    '@nuxtjs/robots',
+    '@vite-pwa/nuxt'
   ],
-  // TODO: riattivare prima di pubblicare il sito
+
-  ssr: false,
+  ssr: true,
-  
+
   runtimeConfig: {
     public: {
       url: 'http://localhost:3000',
@@ -22,7 +23,7 @@ export default defineNuxtConfig({
     url: 'https://visione.studentindipendenti.it',
     name: 'Visione - Un\'occhio per la sicurezza del cittadino.',
   },
-  
+
   css: [
     'leaflet/dist/leaflet.css',
     'bootstrap-italia/dist/css/bootstrap-italia.min.css',
@@ -39,9 +40,47 @@ export default defineNuxtConfig({
 
   app: {
     head: {
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' },
+        { name: 'theme-color', content: '#003366' },
+        { name: 'description', content: 'Visione - Un\'occhio per la sicurezza' },
+        { name: 'apple-mobile-web-app-capable', content: 'yes' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+        { name: 'apple-mobile-web-app-title', content: 'Visione' }
+      ],
       link: [
         { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
       ]
     }
+  },
+
+
+  pwa: {
+    registerType: 'autoUpdate',
+    manifest: {
+      name: 'Visione - Un\'occhio per la sicurezza',
+      short_name: 'Visione',
+      theme_color: '#003366',
+      background_color: '#003366',
+      display: 'standalone',
+      orientation: 'portrait',
+      icons: [
+        {
+          src: '/icon-192.webp',
+          sizes: '192x192',
+          type: 'image/webp',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-512.webp',
+          sizes: '512x512',
+          type: 'image/webp',
+          purpose: 'any'
+        }
+      ]
+    },
+    workbox: {
+      globPatterns: ['**/*.{js,css,html,png,svg,ico,webp}']
+    }
   }
 })

package.json

@@ -14,6 +14,7 @@
     "@nuxt/image": "^2.0.0",
     "@nuxtjs/robots": "6.0.9",
     "@nuxtjs/sitemap": "8.0.15",
+    "@vite-pwa/nuxt": "1.1.1",
     "bootstrap-italia": "^2.18.1",
     "codice-fiscale-js": "^2.3.23",
     "leaflet": "^1.9.4",