feat: update environment variables in docker-compose and .env.example

- Create info page with project overview and system architecture
- Document user roles: Citizens, Operators, and Administrators
- Add technology stack details (Vue/Nuxt frontend, C++/Drogon backend)
- Include open data and ethical code philosophy sections
- Add privacy policy page with data processing information
- Add legal terms page (note-legali)
- Add open data page for transparency
- Set appropriate page titles via useHead composable

Co-authored-by: Copilot <[email protected]>

.env.example

@@ -1,2 +1,2 @@
-# Public URL of the website 
+NUXT_PUBLIC_URL=http://localhost:3000
-NUXT_SITE_URL=http://localhost:3000
+NUXT_PUBLIC_API=http://localhost:5555

Dockerfile

@@ -0,0 +1,28 @@
+# BUILD
+FROM node:22-bookworm AS build
+WORKDIR /app
+
+ARG NUXT_PUBLIC_API
+ENV NUXT_PUBLIC_API $NUXT_PUBLIC_API
+
+COPY package.json yarn.lock ./
+RUN yarn install
+
+COPY . ./
+
+RUN yarn run build
+
+# RUN
+FROM node:22-bookworm AS run
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+RUN yarn install --production
+
+COPY --from=build /app/.output/ ./
+
+ENV PORT=80
+ENV HOST=0.0.0.0
+
+EXPOSE 80
+CMD ["node", "/app/server/index.mjs"]

app/components/Footer.vue

@@ -47,8 +47,8 @@ const { sortedMembers } = useMembers();
     <div class="it-footer-small-prints clearfix">
       <div class="container">
           <ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
-            <li class="list-inline-item"><a href="#">Note legali</a></li>
+            <li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
-            <li class="list-inline-item"><a href="#">Privacy policy</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>

app/components/Header.vue

@@ -28,26 +28,30 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
         <div class="row">
           <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</a>
+              <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</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" role="button" aria-expanded="false" >
+                  <a class="it-opener d-lg-none" data-bs-toggle="collapse"
+                     href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza"
+                     role="button" aria-expanded="false">
                     <span>Dipartmento della Pubblica Sicureazza</span>
-                    <BIIcon name="it-expand" />
+                    <BIIcon name="it-expand"/>
                   </a>
                 </nav>
               </div>
-              <div class="it-header-slim-right-zone">
+              <div class="header-slim-right-zone" role="navigation">
-                <div class="it-access-top-wrapper">
+                <a class="btn btn-primary btn-icon btn-full" href="/auth/login"
-                  <!-- Dynamic Login / Area Personale Button -->
+                   data-element="personal-area-login" data-focus-mouse="false">
-                  <NuxtLink v-if="!isAuthenticated" class="btn btn-primary btn-sm" to="/auth/login">
+                  <span class="rounded-icon" aria-hidden="true">
-                    Accedi
+                    <svg class="custom-rounded-icon icon-primary">
-                  </NuxtLink>
+                                          <use
-                  <NuxtLink v-else class="btn btn-primary btn-sm" to="/dashboard">
+                                              xlink:href="https://www.cartaidentita.interno.gov.it/./wp-content/themes/design-italia/lib/bootstrap-italia/svg/sprite.svg#it-user"></use>
-                    Area Personale
+                    </svg>
-                  </NuxtLink>
+                  </span>
-                </div>
+                  <span class="d-none d-lg-block">Login</span>
-              </div>
+                </a></div>
             </div>
           </div>
         </div>
@@ -63,7 +67,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
               <div class="it-header-center-content-wrapper">
                 <div class="it-brand-wrapper">
                   <NuxtLink to="/">
-                    <BIIcon name="it-pa" />
+                    <BIIcon name="it-pa"/>
                     <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>
@@ -87,7 +91,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
                     aria-label="Mostra la navigazione"
                     @click="isMobileMenuOpen = true"
                 >
-                  <BIIcon name="it-burger" />
+                  <BIIcon name="it-burger"/>
                 </button>
 
                 <div
@@ -106,7 +110,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
                   <div class="close-div">
                     <button class="btn close-menu" type="button" @click="isMobileMenuOpen = false">
                       <span class="visually-hidden">Nascondi la navigazione</span>
-                      <BIIcon name="it-close-big" />
+                      <BIIcon name="it-close-big"/>
                     </button>
                   </div>
 
@@ -141,11 +145,25 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
 </template>
 
 <style scoped>
+:deep(.it-header-slim-wrapper) {
+  background-color: #036;
+}
+
+:deep(.it-nav-wrapper > div) {
+  background-color: rgb(0, 76.5, 153);
+}
+
+:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone a) {
+
+  background-color: rgb(0, 76.5, 153);
+}
+
 .overlay {
   transition: opacity 0.3s ease;
   opacity: 0;
   pointer-events: none;
 }
+
 .overlay.show {
   opacity: 1;
   pointer-events: auto;

app/pages/auth/login.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+useHead({ title: 'Accedi - Visione' })
+
+const { requestOtp, verifyOtp, loginWithPassword } = useAuth()
+const router = useRouter()
+
+// UI State
+const loginMethod = ref<'otp' | 'password'>('otp')
+const otpStep = ref<1 | 2>(1)
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+// Form State
+const email = ref('')
+const password = ref('')
+const otpCode = ref('')
+
+// Azione 1: Richiedi OTP
+const handleRequestOtp = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+  try {
+    await requestOtp({ email: email.value })
+    otpStep.value = 2
+  } catch (err: any) {
+    errorMessage.value = err.data?.message || 'Errore durante la richiesta OTP. Riprova.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Azione 2: Verifica OTP
+const handleVerifyOtp = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+  try {
+    const res = await verifyOtp({ email: email.value, code: otpCode.value })
+    // Salva il token in un cookie (gestito automaticamente da Nuxt e accessibile in useApiFetch)
+    const tokenCookie = useCookie('auth_token', { maxAge: res.expires_in_hours * 3600 })
+    tokenCookie.value = res.token
+    router.push('/dashboard') // O qualsiasi pagina post-login
+  } catch (err: any) {
+    errorMessage.value = 'Codice OTP non valido o scaduto.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Azione 3: Login con Password (Fallback)
+const handlePasswordLogin = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+  try {
+    const res = await loginWithPassword({ email: email.value, password: password.value })
+    const tokenCookie = useCookie('auth_token', { maxAge: res.expires_in_hours * 3600 })
+    tokenCookie.value = res.token
+    router.push('/dashboard')
+  } catch (err: any) {
+    errorMessage.value = 'Credenziali non valide.'
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="d-flex align-items-center min-vh-100 bg-light py-5">
+    <div class="container">
+      <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" />
+            <h1 class="h3 font-weight-bold">Accedi a Visione</h1>
+            <p class="text-muted">Il portale delle segnalazioni urbane</p>
+          </div>
+
+          <div class="card card-bg shadow-sm">
+            <div class="card-body p-4 p-md-5">
+
+              <!-- Finto Bottone CIE (Stile Istituzionale) -->
+              <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)
+              </button>
+
+              <div class="d-flex align-items-center my-4">
+                <hr class="flex-grow-1">
+                <span class="mx-3 text-muted small text-uppercase">Oppure accedi con Email</span>
+                <hr class="flex-grow-1">
+              </div>
+
+              <!-- Messaggio di errore -->
+              <div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
+                {{ errorMessage }}
+              </div>
+
+              <!-- FLUSSO OTP -->
+              <div v-if="loginMethod === 'otp'">
+
+                <!-- Step 1: Inserisci Email -->
+                <form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
+                  <div class="form-group mb-4">
+                    <input type="email" class="form-control" id="email" v-model="email" required>
+                    <!-- Label flottante di Bootstrap Italia (attiva se c'è testo) -->
+                    <label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
+                  </div>
+                  <button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
+                    <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
+                    Ricevi codice OTP
+                  </button>
+                </form>
+
+                <!-- Step 2: Inserisci Codice -->
+                <form v-else @submit.prevent="handleVerifyOtp">
+                  <div class="alert alert-success mb-4 small">
+                    Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
+                  </div>
+                  <div class="form-group mb-4">
+                    <input type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
+                    <label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
+                  </div>
+                  <button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
+                    <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
+                    Verifica e Accedi
+                  </button>
+                  <div class="text-center">
+                    <a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
+                  </div>
+                </form>
+
+              </div>
+
+              <!-- FLUSSO PASSWORD (Fallback) -->
+              <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>
+                <div class="form-group mb-4">
+                  <input type="password" class="form-control" id="password" v-model="password" required>
+                  <label for="password" :class="{ 'active': password.length > 0 }">Password</label>
+                </div>
+                <button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
+                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
+                  Accedi
+                </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)' }}
+                </a>
+              </div>
+
+            </div>
+          </div>
+
+          <div class="text-center mt-4">
+            <p class="small text-muted">Non hai un account? <NuxtLink to="/auth/register" class="font-weight-bold">Registrati ora</NuxtLink></p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-tracking-widest {
+  letter-spacing: 0.5em;
+}
+</style>

app/pages/auth/register.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+useHead({ title: 'Registrazione - Visione' })
+
+const { register } = useAuth()
+const router = useRouter()
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref(false)
+
+// Form State mappato sull'API RegisterCitizenRequest
+const form = ref({
+  first_name: '',
+  last_name: '',
+  fiscal_code: '',
+  email: '',
+  password: '',
+  phone: '',
+  privacy: false
+})
+
+const handleRegister = async () => {
+  if (!form.value.privacy) {
+    errorMessage.value = "È necessario accettare l'informativa sulla privacy."
+    return
+  }
+
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    await register({
+      first_name: form.value.first_name,
+      last_name: form.value.last_name,
+      fiscal_code: form.value.fiscal_code.toUpperCase(),
+      email: form.value.email,
+      password: form.value.password,
+      phone: form.value.phone || undefined
+    })
+
+    successMessage.value = true
+    // Ritarda il redirect per far leggere il messaggio
+    setTimeout(() => {
+      router.push('/auth/login')
+    }, 3000)
+
+  } catch (err: any) {
+    errorMessage.value = err.data?.message || 'Errore durante la registrazione. Controlla i dati inseriti.'
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="d-flex align-items-center min-vh-100 bg-light py-5">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-12 col-lg-8">
+
+          <div class="text-center mb-4">
+            <BIIcon name="it-user" size="xl" color="primary" class="mb-2" />
+            <h1 class="h3 font-weight-bold">Registrazione Cittadino</h1>
+            <p class="text-muted">Crea il tuo profilo per iniziare a segnalare</p>
+          </div>
+
+          <div class="card card-bg shadow-sm">
+            <div class="card-body p-4 p-md-5">
+
+              <div v-if="successMessage" class="alert alert-success" role="alert">
+                <BIIcon name="it-check-circle" size="sm" class="me-2" />
+                Registrazione completata con successo! Reindirizzamento al login...
+              </div>
+
+              <div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
+                {{ errorMessage }}
+              </div>
+
+              <form v-if="!successMessage" @submit.prevent="handleRegister">
+
+                <h2 class="h5 text-primary font-weight-bold mb-4 border-bottom pb-2">Dati Anagrafici</h2>
+                <div class="row">
+                  <div class="col-12 col-md-6 form-group mb-4">
+                    <input type="text" class="form-control" id="nome" v-model="form.first_name" required>
+                    <label for="nome" :class="{ 'active': form.first_name.length > 0 }">Nome</label>
+                  </div>
+                  <div class="col-12 col-md-6 form-group mb-4">
+                    <input type="text" class="form-control" id="cognome" v-model="form.last_name" required>
+                    <label for="cognome" :class="{ 'active': form.last_name.length > 0 }">Cognome</label>
+                  </div>
+                </div>
+
+                <div class="form-group mb-4">
+                  <input type="text" class="form-control text-uppercase" id="cf" v-model="form.fiscal_code" required maxlength="16">
+                  <label for="cf" :class="{ 'active': form.fiscal_code.length > 0 }">Codice Fiscale</label>
+                  <small class="form-text text-muted">Sarà utilizzato come identificativo univoco nel sistema PA.</small>
+                </div>
+
+                <h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Credenziali e Contatti</h2>
+                <div class="row">
+                  <div class="col-12 col-md-6 form-group mb-4">
+                    <input type="email" class="form-control" id="regEmail" v-model="form.email" required>
+                    <label for="regEmail" :class="{ 'active': form.email.length > 0 }">Indirizzo Email</label>
+                  </div>
+                  <div class="col-12 col-md-6 form-group mb-4">
+                    <input type="password" class="form-control" id="regPwd" v-model="form.password" required minlength="10">
+                    <label for="regPwd" :class="{ 'active': form.password.length > 0 }">Password (min. 10 crt)</label>
+                  </div>
+                </div>
+
+                <div class="form-group mb-5">
+                  <input type="tel" class="form-control" id="phone" v-model="form.phone">
+                  <label for="phone" :class="{ 'active': form.phone.length > 0 }">Numero di telefono (Opzionale)</label>
+                  <small class="form-text text-muted">Faciliterà il contatto da parte degli operatori comunali in caso di intervento.</small>
+                </div>
+
+                <!-- Privacy Checkbox -->
+                <div class="form-check mb-4">
+                  <input class="form-check-input" type="checkbox" id="privacyCheck" v-model="form.privacy" required>
+                  <label class="form-check-label small" for="privacyCheck">
+                    Dichiaro di aver letto l'<NuxtLink to="/privacy" target="_blank">Informativa sulla Privacy</NuxtLink> e accetto il trattamento dei dati personali ai fini dell'erogazione del servizio.
+                  </label>
+                </div>
+
+                <button type="submit" class="btn btn-primary w-100 btn-lg" :disabled="isLoading">
+                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
+                  Registra Profilo
+                </button>
+              </form>
+
+            </div>
+          </div>
+
+          <div class="text-center mt-4">
+            <p class="small text-muted">Hai già un account? <NuxtLink to="/auth/login" class="font-weight-bold">Torna al Login</NuxtLink></p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/info.vue

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

app/pages/note-legali.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+useHead({
+  title: 'Note Legali - Visione',
+})
+</script>
+
+<template>
+  <div>
+    <!-- HERO SECTION -->
+    <div class="it-hero-wrapper it-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 text-center">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Note Legali</h1>
+              <p class="text-white mt-3 lead font-weight-semibold">
+                Termini e condizioni di utilizzo della piattaforma Visione.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CONTENUTO PRINCIPALE -->
+    <div class="container my-5 py-4">
+      <div class="row">
+        <div class="col-12 col-lg-8 offset-lg-2">
+
+          <h2 class="h3 font-weight-bold mb-3">1. Condizioni generali d'uso</h2>
+          <p class="text-muted mb-4">
+            Il presente documento definisce le condizioni generali di utilizzo del portale web "Visione" (di seguito, "Piattaforma"). L'accesso, la navigazione e l'utilizzo della Piattaforma comportano l'accettazione esplicita delle presenti note legali. Gli utenti sono invitati a leggere attentamente questo documento prima di utilizzare i servizi offerti.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">2. Finalità della piattaforma</h2>
+          <p class="text-muted mb-4">
+            Visione è uno strumento digitale concepito per facilitare la comunicazione tra i cittadini e la Pubblica Amministrazione. Consente agli utenti registrati di inviare segnalazioni relative a disservizi urbani (es. buche, guasti all'illuminazione, rifiuti), allegando materiale fotografico e dati di geolocalizzazione, al fine di snellire i processi di intervento delle squadre comunali.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">3. Proprietà intellettuale e Codice Sorgente</h2>
+          <p class="text-muted mb-4">
+            In un'ottica di totale trasparenza e indipendenza etica, il codice sorgente del progetto "Visione" è sviluppato e mantenuto su un'istanza self-hosted di <strong>Gitea</strong>. Tutti i diritti sui loghi, testi, e architettura del software, ove non diversamente specificato da licenze Open Source, appartengono ai rispettivi autori.
+            È severamente vietato l'utilizzo di script automatizzati per l'estrazione massiva di dati dalla Piattaforma, ad eccezione degli endpoint ufficiali forniti nella sezione Open Data.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">4. Limitazione di responsabilità</h2>
+          <p class="text-muted mb-4">
+            L'Amministrazione e gli sviluppatori si impegnano a garantire l'aggiornamento e l'accuratezza delle informazioni presenti sulla Piattaforma. Tuttavia, non si assumono alcuna responsabilità per eventuali ritardi, disservizi o per la mancata e/o ritardata risoluzione delle problematiche segnalate dagli utenti. Le segnalazioni inserite non hanno valore di denuncia formale alle Autorità di Pubblica Sicurezza. In caso di emergenze, i cittadini sono tenuti a contattare direttamente il Numero Unico Europeo per le Emergenze (112).
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">5. Moderazione e Abusi</h2>
+          <p class="text-muted mb-5">
+            Gli operatori e gli amministratori di sistema si riservano il diritto di moderare, nascondere o rimuovere segnalazioni contenenti materiale inappropriato, offensivo, non pertinente o illegale. L'abuso ripetuto del sistema comporterà il ban permanente dell'account dell'utente, associato al proprio Codice Fiscale.
+          </p>
+
+          <!-- DISCLAIMER ACCADEMICO -->
+          <div class="callout callout-highlight callout-info mt-5">
+            <div class="callout-title">
+              <BIIcon name="it-info-circle" />
+              Disclaimer di Progetto Accademico
+            </div>
+            <p>
+              "Visione" è un progetto software realizzato esclusivamente per finalità didattiche all'interno del corso di <em>Laboratorio di Programmazione</em> (Prof. Vessio) presso l'<strong>Università degli Studi di Bari "Aldo Moro"</strong>.
+              <br>Autori: Renato Loiacono, Michelangelo Parisi e Gabriele Schiraldi. <br>I dati elaborati in questa istanza hanno scopo puramente dimostrativo e non costituiscono un reale servizio comunale attivo.
+            </p>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/pages/open-data.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+// 1. API Fetching Logic
+const { getOpenDataReports } = usePublic()
+
+// Reactive pagination state
+const currentPage = ref(1)
+const perPage = ref(9)
+
+// Fetch data automatically when currentPage changes
+const { data: openDataResponse, pending } = await useAsyncData(
+    'open-data-reports',
+    () => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
+    { watch: [currentPage] } // Nuxt will re-fetch when currentPage changes
+)
+
+// Pagination logic: If we receive less items than `perPage`, we are on the last page.
+const isLastPage = computed(() => {
+  if (!openDataResponse.value?.reports) return true
+  return openDataResponse.value.reports.length < perPage.value
+})
+
+const nextPage = () => {
+  if (!isLastPage.value) currentPage.value++
+}
+const prevPage = () => {
+  if (currentPage.value > 1) currentPage.value--
+}
+
+// 2. View Toggle (Grid vs Map)
+const currentView = ref<'grid' | 'map'>('grid')
+
+// 3. Helper to style status badges
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
+    case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+    default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- HERO SECTION (Small version for internal pages) -->
+    <div class="it-hero-wrapper it-primary">
+      <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">Open Data Interventi</h1>
+              <p class="text-white mt-2 lead">
+                Esplora i dati pubblici degli interventi urbani risolti. La trasparenza al servizio del cittadino.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="container my-5">
+
+      <!-- TOOLBAR: View Toggles & Export -->
+      <div class="row align-items-center mb-5 pb-3 border-bottom">
+        <div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
+          <!-- View Toggle Buttons -->
+          <button
+              class="btn btn-sm"
+              :class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
+              @click="currentView = 'grid'"
+          >
+            <BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
+            Griglia Dati
+          </button>
+          <button
+              class="btn btn-sm"
+              :class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
+              @click="currentView = 'map'"
+          >
+            <BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
+            Mappa
+          </button>
+        </div>
+        <div class="col-12 col-md-6 text-md-end">
+          <!-- Fake Export CTA (Very common in Open Data portals) -->
+          <button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
+            <BIIcon name="it-download" size="sm" class="me-1" />
+            Scarica JSON
+          </button>
+        </div>
+      </div>
+
+      <!-- LOADER -->
+      <div v-if="pending" class="d-flex justify-content-center my-5 py-5">
+        <div class="progress-spinner progress-spinner-active" role="status">
+          <span class="visually-hidden">Caricamento in corso...</span>
+        </div>
+      </div>
+
+      <!-- GRID VIEW -->
+      <div v-else-if="currentView === 'grid'">
+        <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
+          <div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
+            <!-- Strict BI Card -->
+            <div class="card-wrapper card-space h-100">
+              <div class="card card-bg h-100 shadow-sm">
+                <div class="card-body d-flex flex-column">
+
+                  <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div class="category-top m-0">
+                      <span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
+                        <BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
+                        {{ getStatusBadge(report.status).text }}
+                      </span>
+                    </div>
+                    <span class="text-muted small">ID: #{{ report.id }}</span>
+                  </div>
+
+                  <h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
+
+                  <p class="card-text text-muted mb-4">
+                    <BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
+                    {{ report.area_name || 'Area comunale non specificata' }}
+                  </p>
+
+                  <div class="mt-auto pt-3 border-top">
+                    <div class="row text-muted small">
+                      <div class="col-6">
+                        <div class="fw-bold text-uppercase">Segnalato</div>
+                        <div>{{ new Date(report.created_at).toLocaleDateString('it-IT') }}</div>
+                      </div>
+                      <div class="col-6 text-end">
+                        <div class="fw-bold text-uppercase">Risolto</div>
+                        <div>{{ new Date(report.updated_at).toLocaleDateString('it-IT') }}</div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="alert alert-warning text-center" role="alert">
+          Nessun dato pubblico disponibile al momento.
+        </div>
+
+        <!-- BOOTSTRAP ITALIA PAGINATION -->
+        <nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
+          <ul class="pagination">
+            <li class="page-item" :class="{ disabled: currentPage === 1 }">
+              <a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
+                <BIIcon name="it-chevron-left" size="sm" />
+                <span class="visually-hidden">Pagina precedente</span>
+              </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>
+
+      <!-- MAP VIEW (Placeholder for Leaflet/Mapbox) -->
+      <div v-else-if="currentView === 'map'" class="map-view-wrapper">
+        <div class="alert alert-info d-flex align-items-center" role="alert">
+          <BIIcon name="it-info-circle" size="sm" class="me-3" />
+          <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>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Ensures the cards inside the grid stretch to equal heights */
+.card-wrapper {
+  height: 100%;
+}
+.card-bg {
+  border: 1px solid rgba(0,0,0,0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.card-bg:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+}
+</style>

app/pages/privacy.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+useHead({
+  title: 'Privacy Policy - Visione',
+})
+</script>
+
+<template>
+  <div>
+    <!-- HERO SECTION -->
+    <div class="it-hero-wrapper it-primary">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 text-center">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Informativa sulla Privacy</h1>
+              <p class="text-white mt-3 lead font-weight-semibold">
+                Trattamento dei dati personali ai sensi del Regolamento (UE) 2016/679 (GDPR).
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CONTENUTO PRINCIPALE -->
+    <div class="container my-5 py-4">
+      <div class="row">
+        <div class="col-12 col-lg-8 offset-lg-2">
+
+          <div class="alert alert-info mb-5" role="alert">
+            <BIIcon name="it-info-circle" class="me-2" size="sm" />
+            La presente informativa descrive le modalità di gestione della piattaforma <strong>Visione</strong> in riferimento al trattamento dei dati personali degli utenti che la consultano e vi si registrano.
+          </div>
+
+          <h2 class="h3 font-weight-bold mb-3">1. Titolare del Trattamento</h2>
+          <p class="text-muted mb-4">
+            Ai fini dell'attuale istanza dimostrativa, il Titolare del trattamento dei dati coincide con gli sviluppatori del progetto afferenti all'Università degli Studi di Bari "Aldo Moro" (Progetto Accademico). In uno scenario di produzione, il Titolare del trattamento sarà il Comune o l'Ente della Pubblica Amministrazione che adotta e ospita il software.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">2. Quali dati raccogliamo</h2>
+          <p class="text-muted mb-2">Per garantire il corretto funzionamento della piattaforma e prevenire abusi, vengono raccolte le seguenti categorie di dati:</p>
+          <ul class="mb-4 text-muted">
+            <li><strong>Dati anagrafici e di contatto:</strong> Nome, cognome, Codice Fiscale, indirizzo email, numero di telefono (opzionale), data e luogo di nascita.</li>
+            <li><strong>Dati di geolocalizzazione:</strong> Coordinate geografiche (Latitudine e Longitudine) e indirizzo associato alla segnalazione inviata dall'utente.</li>
+            <li><strong>Contenuti multimediali:</strong> Fotografie e descrizioni testuali caricate spontaneamente dall'utente per documentare il disservizio.</li>
+            <li><strong>Dati di navigazione:</strong> Indirizzi IP e timestamp generati automaticamente dai log di sistema per finalità di sicurezza e prevenzione frodi (accesso OTP).</li>
+          </ul>
+
+          <h2 class="h3 font-weight-bold mb-3">3. Finalità del Trattamento</h2>
+          <p class="text-muted mb-4">
+            I dati forniti verranno trattati esclusivamente per le seguenti finalità:
+            <br>- Consentire la registrazione e l'autenticazione sicura (incluso login Passwordless tramite OTP).
+            <br>- Gestire la presa in carico e la risoluzione delle segnalazioni urbane da parte delle squadre operative.
+            <br>- Fornire comunicazioni di servizio relative allo stato di avanzamento delle segnalazioni.
+            <br>- Attribuire punteggi virtuali all'utente nell'ambito del sistema di <em>Gamification</em> volto a incentivare la cittadinanza attiva.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">4. Dati Pubblici e Portale Open Data</h2>
+          <div class="card card-bg border-start border-info border-4 mb-4">
+            <div class="card-body">
+              <p class="mb-0 text-muted">
+                Visione promuove la trasparenza amministrativa. Tutte le segnalazioni chiuse o risolte confluiscono nel nostro Portale Open Data.
+                <strong>Prima della pubblicazione, i dati vengono severamente anonimizzati.</strong> Nessun dato personale (nome, cognome, codice fiscale o chat private) viene esposto. Vengono resi pubblici unicamente: Categoria dell'intervento, area geografica (es. quartiere), coordinate, e data di risoluzione.
+              </p>
+            </div>
+          </div>
+
+          <h2 class="h3 font-weight-bold mb-3">5. Misure di Sicurezza</h2>
+          <p class="text-muted mb-4">
+            Il trattamento dei dati è realizzato tramite strumenti informatici e telematici, con logiche strettamente correlate alle finalità sopra evidenziate. Il backend (sviluppato in ambiente C++ ad alte prestazioni) adotta protocolli sicuri di trasmissione e tecniche di cifratura avanzata per lo stoccaggio delle credenziali.
+          </p>
+
+          <h2 class="h3 font-weight-bold mb-3">6. Diritti dell'interessato</h2>
+          <p class="text-muted mb-5">
+            Ai sensi degli artt. 15-22 del GDPR, l'utente ha diritto di:
+            <br>- Ottenere la conferma dell'esistenza di dati personali che lo riguardano.
+            <br>- Chiedere la rettifica, l'aggiornamento o la cancellazione del proprio account e dei dati connessi.
+            <br>- Opporti al trattamento o chiederne la limitazione.
+            <br>Per esercitare tali diritti nell'ambito di questa istanza accademica, è possibile contattare gli sviluppatori o richiedere l'eliminazione direttamente dalla propria area riservata.
+          </p>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docker-compose.yml

@@ -0,0 +1,14 @@
+services:
+  visione-frontend:
+    build:
+      context: .
+      args:
+        NUXT_SITE_URL: ${NUXT_PUBLIC_URL}
+        NUXT_PUBLIC_URL: ${NUXT_PUBLIC_URL}
+        NUXT_PUBLIC_API: ${NUXT_PUBLIC_API}
+    environment:
+      NODE_ENV: ${NODE_ENV:-production}
+      NUXT_SITE_URL: ${NUXT_PUBLIC_URL}
+      NUXT_PUBLIC_URL: ${NUXT_PUBLIC_URL}
+      NUXT_PUBLIC_API: ${NUXT_PUBLIC_API}
+    restart: always

nuxt.config.ts

@@ -33,12 +33,4 @@ export default defineNuxtConfig({
       { name: 'Titillium Web', provider: 'google' }
     ]
   }
-
-  app: {
-    head: {
-      link: [
-        { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
-      ]
-    }
-  }
 })