From 8bf6f29561cda118d8edce7735da2ae15c61f22a Mon Sep 17 00:00:00 2001
From: gabdevele <schiraldigabriele@gmail.com>
Date: Mon, 15 Jun 2026 12:48:18 +0200
Subject: [PATCH 1/4] feat(admin): add categories and teams management page

---
 .gitignore                                  |   1 +
 app/assets/css/style.css                    |  33 +++
 app/components/dashboard/AdminDashboard.vue |  17 +-
 app/composables/useAuth.ts                  |  11 +-
 app/composables/useOperator.ts              |   7 +-
 app/composables/useReports.ts               |   7 +-
 app/middleware/auth.ts                      |   4 +-
 app/middleware/guest.ts                     |   4 +-
 app/pages/admin/catalog.vue                 | 236 ++++++++++++++++++++
 app/pages/admin/users.vue                   |   7 +-
 app/pages/operator/reports/[id].vue         |  73 +++---
 app/pages/reports/new.vue                   |   3 +-
 app/plugins/auth.client.ts                  |   3 +-
 13 files changed, 354 insertions(+), 52 deletions(-)
 create mode 100644 app/pages/admin/catalog.vue

diff --git a/.gitignore b/.gitignore
index ad774cb..3f78594 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,4 +24,5 @@ logs
 !.env.example
 
 pnpm-*.yaml
+.pnpm-store/
 AGENTS.md
\ No newline at end of file
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 814b736..88bdbf1 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -296,6 +296,35 @@ html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-fo
     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 {
 
@@ -316,6 +345,10 @@ html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-fo
 }
 
 @media (max-width: 767.98px) {
+    .page-shell {
+        padding-block: 2rem;
+    }
+
     .it-hero-wrapper .container {
         min-height: 220px;
     }
diff --git a/app/components/dashboard/AdminDashboard.vue b/app/components/dashboard/AdminDashboard.vue
index b60eacf..9598581 100644
--- a/app/components/dashboard/AdminDashboard.vue
+++ b/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())
@@ -40,6 +39,12 @@ 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" />
@@ -52,12 +57,18 @@ 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
         </NuxtLink>
       </div>
+      <div class="col-12 col-md-6 mb-3">
+        <NuxtLink to="/open-data" class="btn btn-outline-secondary w-100 py-3 d-flex flex-column align-items-center">
+          <BIIcon name="it-chart-line" size="sm" class="mb-2" />
+          Vista Open Data
+        </NuxtLink>
+      </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index a6dc2da..274f72c 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -8,7 +8,6 @@ import type {
 } from "~/types/api";
 
 export const useAuth = () => {
-  const route = useRoute()
   const nuxtApp = useNuxtApp()
 
   const token = useCookie<string | null>('auth_token', {
@@ -33,7 +32,8 @@ export const useAuth = () => {
     tokenState.value = newVal || null
   })
 
-  const syncUser = async (redirectOnSuccess = false) => {
+  const syncUser = async (options: { redirectOnSuccess?: boolean; currentPath?: string } = {}) => {
+    const { redirectOnSuccess = false, currentPath } = options
     const tokenVal = tokenState.value || token.value
     if (!tokenVal || isSyncingUser.value) return
     
@@ -42,10 +42,11 @@ export const useAuth = () => {
       const res = await fetchCurrentUser()
       if (res.ok) {
         user.value = res.user
+        const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
 
-        if (res.user.must_change_password && route.path !== '/auth/change-password') {
+        if (res.user.must_change_password && path !== '/auth/change-password') {
           await nuxtApp.runWithContext(() => navigateTo('/auth/change-password'))
-        } else if (redirectOnSuccess && route.path.startsWith('/auth')) {
+        } else if (redirectOnSuccess && path.startsWith('/auth')) {
           await nuxtApp.runWithContext(() => navigateTo('/dashboard'))
         }
       }
@@ -65,7 +66,7 @@ export const useAuth = () => {
   const handleLoginSuccess = async (jwtToken: string) => {
     token.value = jwtToken
     tokenState.value = jwtToken
-    await syncUser(true)
+    await syncUser({ redirectOnSuccess: true })
   }
 
   const logout = () => {
diff --git a/app/composables/useOperator.ts b/app/composables/useOperator.ts
index 713a9bc..c10b51f 100644
--- a/app/composables/useOperator.ts
+++ b/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,9 +36,10 @@ export const useOperator = () => {
     getOpenReports,
     getAssignedReports,
     getOtherOperatorReports,
+    getTeams,
     takeReport,
     updateReportStatus,
     assignTeam,
     getInterventionSummary,
   }
-}
\ No newline at end of file
+}
diff --git a/app/composables/useReports.ts b/app/composables/useReports.ts
index be90186..57ebc23 100644
--- a/app/composables/useReports.ts
+++ b/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,
@@ -46,4 +51,4 @@ export const useReports = () => {
     flagReport,
     flagMessage,
   }
-}
\ No newline at end of file
+}
diff --git a/app/middleware/auth.ts b/app/middleware/auth.ts
index e48882e..9cd2cd5 100644
--- a/app/middleware/auth.ts
+++ b/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')
@@ -36,4 +36,4 @@ export default defineNuxtRouteMiddleware(async (to) => {
       return navigateTo('/')
     }
   }
-})
\ No newline at end of file
+})
diff --git a/app/middleware/guest.ts b/app/middleware/guest.ts
index 848281f..5cded4b 100644
--- a/app/middleware/guest.ts
+++ b/app/middleware/guest.ts
@@ -1,9 +1,9 @@
-export default defineNuxtRouteMiddleware(async () => {
+export default defineNuxtRouteMiddleware(async (to) => {
   const auth = useAuth()
 
   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)
     }
diff --git a/app/pages/admin/catalog.vue b/app/pages/admin/catalog.vue
new file mode 100644
index 0000000..b3135b1
--- /dev/null
+++ b/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 alla Dashboard</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>
diff --git a/app/pages/admin/users.vue b/app/pages/admin/users.vue
index 96af45d..e1d8a4a 100644
--- a/app/pages/admin/users.vue
+++ b/app/pages/admin/users.vue
@@ -13,6 +13,7 @@ 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()).filter(Boolean) : []
 
 const filteredUsers = computed(() => {
   if (!usersRes.value?.users) return []
@@ -47,7 +48,7 @@ const availableRoles = ['CITIZEN', 'OPERATOR', 'ADMIN']
 
 const openRoleModal = (user: any) => {
   editingUserId.value = user.id
-  selectedRoles.value = user.roles ? user.roles.split(',').map((r: string) => r.trim()) : []
+  selectedRoles.value = parseRoles(user.roles)
 }
 
 const closeRoleModal = () => {
@@ -118,8 +119,8 @@ const saveRoles = async () => {
               <small class="text-muted">{{ user.fiscal_code }}</small>
             </td>
             <td>
-              <span v-for="r in (user.roles ? user.roles.split(',') : [])" :key="r" class="badge bg-primary me-1">
-                {{ r.trim() }}
+              <span v-for="r in parseRoles(user.roles)" :key="r" class="badge bg-primary me-1">
+                {{ r }}
               </span>
             </td>
             <td>{{ user.points || 0 }}</td>
diff --git a/app/pages/operator/reports/[id].vue b/app/pages/operator/reports/[id].vue
index d45ff33..af8c7c9 100644
--- a/app/pages/operator/reports/[id].vue
+++ b/app/pages/operator/reports/[id].vue
@@ -17,19 +17,22 @@ if (!reportId) {
 }
 
 const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
-const { getInterventionSummary, updateReportStatus, assignTeam } = useOperator()
+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',
@@ -47,9 +50,7 @@ const isUpdatingStatus = ref(false)
 
 // Form Assegna Squadra
 const isAssignModalOpen = ref(false)
-const teamName = ref('')
-const assignNote = ref('')
-const estimatedDate = ref('')
+const selectedTeamId = ref<number | null>(null)
 const isAssigning = ref(false)
 
 // Messaggi
@@ -90,19 +91,15 @@ const handleStatusUpdate = async () => {
 }
 
 const handleAssignTeam = async () => {
-  if (!teamName.value) return
+  if (!selectedTeamId.value) return
   isAssigning.value = true
   try {
     const res = await assignTeam(reportId, {
-      assigned_to_team: teamName.value,
-      estimated_resolution_date: estimatedDate.value || undefined,
-      internal_notes: assignNote.value || undefined
+      team_id: selectedTeamId.value
     })
     if (res.ok) {
       isAssignModalOpen.value = false
-      teamName.value = ''
-      assignNote.value = ''
-      estimatedDate.value = ''
+      selectedTeamId.value = null
       await Promise.all([refreshReport(), refreshSummary()])
     }
   } catch (e) {
@@ -152,6 +149,15 @@ const formatDate = (dateString: string) => {
     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>
@@ -257,29 +263,31 @@ const formatDate = (dateString: string) => {
           <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">Riepilogo intervento</h2>
+              <h2 class="h6 mb-3">Quadro operativo</h2>
               <ul class="report-summary-list list-unstyled mb-4">
                 <li>
                   <span>Operatore</span>
-                  <strong>{{ summary.operator_id ? `#${summary.operator_id}` : 'Nessuno' }}</strong>
+                  <strong>{{ summary.assigned_operator_id ? `#${summary.assigned_operator_id}` : 'Nessuno' }}</strong>
                 </li>
                 <li>
-                  <span>Squadra</span>
-                  <strong>{{ summary.assigned_to_team || 'Nessuna' }}</strong>
+                  <span>Team disponibili</span>
+                  <strong>{{ teams.length }}</strong>
                 </li>
                 <li>
-                  <span>Data prevista</span>
-                  <strong>{{ summary.estimated_resolution_date ? formatDate(summary.estimated_resolution_date) : 'Non impostata' }}</strong>
+                  <span>Allegati</span>
+                  <strong>{{ summaryMedia.length || media.length }}</strong>
                 </li>
               </ul>
               <div class="report-description">
-                <h3 class="h6 mb-2">Note interne</h3>
-                <p class="small mb-0">{{ summary.internal_notes || 'Nessuna nota interna' }}</p>
+                <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">
-                Gestisci Squadra e Note
+              <button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true" :disabled="teams.length === 0">
+                Assegna team
               </button>
             </div>
           </div>
@@ -342,20 +350,21 @@ const formatDate = (dateString: string) => {
           <div class="modal-body">
             <form @submit.prevent="handleAssignTeam">
               <div class="mb-3">
-                <label class="form-label">Squadra / Ditta Incaricata</label>
-                <input type="text" class="form-control" v-model="teamName" placeholder="Es. Squadra Verde SPA" required />
-              </div>
-              <div class="mb-3">
-                <label class="form-label">Data Prevista Risoluzione (opzionale)</label>
-                <input type="date" class="form-control" v-model="estimatedDate" />
-              </div>
-              <div class="mb-3">
-                <label class="form-label">Note Interne (private)</label>
-                <textarea class="form-control" v-model="assignNote" rows="3" placeholder="Note ad uso interno, non visibili al cittadino..."></textarea>
+                <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 || !teamName.trim()">
+                <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>
diff --git a/app/pages/reports/new.vue b/app/pages/reports/new.vue
index 0f418a5..6b7e005 100644
--- a/app/pages/reports/new.vue
+++ b/app/pages/reports/new.vue
@@ -8,8 +8,7 @@ definePageMeta({
 useHead({ title: 'Nuova segnalazione - Visione' })
 
 const router = useRouter()
-const { createReport, uploadMedia } = useReports()
-const { getCategories } = useAdmin()
+const { createReport, uploadMedia, getCategories } = useReports()
 const { data: categoriesData } = await useAsyncData('categories', () => getCategories())
 const categories = computed(() => categoriesData.value?.categories || [])
 
diff --git a/app/plugins/auth.client.ts b/app/plugins/auth.client.ts
index 540720a..cadc292 100644
--- a/app/plugins/auth.client.ts
+++ b/app/plugins/auth.client.ts
@@ -1,9 +1,10 @@
 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
 

From d6eb7d3e9b028a59c93ecbf39d9e37d4a3b3d6ef Mon Sep 17 00:00:00 2001
From: gabdevele <schiraldigabriele@gmail.com>
Date: Mon, 15 Jun 2026 13:00:22 +0200
Subject: [PATCH 2/4] feat: implement Bari bounds validation and update UI
 components for admin panel

---
 app/assets/css/style.css                    | 14 ++++++++
 app/components/Header.vue                   |  3 +-
 app/components/ReportForm.vue               | 38 +++++++++++++++------
 app/components/dashboard/AdminDashboard.vue | 10 ++----
 app/pages/admin/areas.vue                   | 33 +++++++++++++++---
 app/pages/admin/catalog.vue                 |  2 +-
 app/pages/admin/moderation.vue              |  2 +-
 app/pages/admin/users.vue                   |  3 +-
 app/pages/dashboard/index.vue               |  4 +--
 app/pages/info.vue                          |  4 +--
 app/pages/open-data.vue                     |  9 +++--
 app/pages/reports/index.vue                 |  5 ++-
 app/utils/bari.ts                           | 15 ++++++++
 13 files changed, 108 insertions(+), 34 deletions(-)
 create mode 100644 app/utils/bari.ts

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 88bdbf1..0d9bdeb 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -29,6 +29,20 @@ 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,
diff --git a/app/components/Header.vue b/app/components/Header.vue
index 274167c..151d3a7 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -18,6 +18,7 @@ const navLinks = [
 ]
 
 const { isAuthenticated, user, logout } = useAuth()
+const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello admin' : 'Dashboard')
 </script>
 
 <template>
@@ -49,7 +50,7 @@ const { isAuthenticated, user, logout } = useAuth()
                     <span class="rounded-icon" aria-hidden="true">
                       <BIIcon name="it-list" color="black" />
                     </span>
-                    <span class="d-none d-lg-block">Dashboard</span>
+                    <span class="d-none d-lg-block">{{ panelLabel }}</span>
                   </NuxtLink>
 
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
diff --git a/app/components/ReportForm.vue b/app/components/ReportForm.vue
index 598978b..ec546e8 100644
--- a/app/components/ReportForm.vue
+++ b/app/components/ReportForm.vue
@@ -2,6 +2,7 @@
 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'
 
 interface Props {
   isLoading?: boolean
@@ -65,18 +66,28 @@ const initMap = async () => {
   const L = await loadLeaflet()
   if (!mapContainer.value || map) return
 
-  // Centro Italia default
-  const defaultLat = 41.8719
-  const defaultLng = 12.5674
-  const zoom = 5
+  const bariBounds = L.latLngBounds(
+    [BARI_BOUNDS.south, BARI_BOUNDS.west],
+    [BARI_BOUNDS.north, BARI_BOUNDS.east]
+  )
 
-  map = L.map(mapContainer.value).setView([defaultLat, defaultLng], zoom)
+  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
+    }
+
     updateLocation(e.latlng.lat, e.latlng.lng)
   })
 
@@ -87,6 +98,11 @@ const initMap = async () => {
 }
 
 const updateLocation = (lat: number, lng: number, zoomTo = false) => {
+  if (!isWithinBariBounds(lat, lng)) {
+    errors.value.location = 'Puoi inserire segnalazioni solo nel Comune di Bari.'
+    return
+  }
+
   form.value.latitude = Number(lat.toFixed(6))
   form.value.longitude = Number(lng.toFixed(6))
 
@@ -125,6 +141,8 @@ const validateForm = (): boolean => {
   }
   if (!form.value.latitude || !form.value.longitude) {
     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'
@@ -186,7 +204,7 @@ const resetForm = () => {
   if (marker && map) {
     map.removeLayer(marker)
     marker = null
-    map.setView([41.8719, 12.5674], 5)
+    map.setView(BARI_CENTER, 12)
   }
 }
 
@@ -246,6 +264,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
           <BIIcon name="it-map-marker-circle" size="sm" color="primary" class="me-2" />
           Posizione *
         </label>
+        <p class="small text-muted mb-2">Le segnalazioni sono abilitate solo entro confini del Comune di Bari.</p>
 
         <button
           type="button"
@@ -275,7 +294,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
               step="0.000001"
               class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
-              placeholder="Latitudine (es. 45.5)"
+              placeholder="Latitudine (Bari)"
               required
             />
           </div>
@@ -286,7 +305,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
               step="0.000001"
               class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
-              placeholder="Longitudine (es. 10.2)"
+              placeholder="Longitudine (Bari)"
               required
             />
           </div>
@@ -307,7 +326,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
           type="text"
           class="form-control"
           :class="{ 'is-invalid': errors.address }"
-          placeholder="Es. Via Roma 123, Milano"
+          placeholder="Es. Via Sparano 12, Bari"
           required
         />
         <div v-if="errors.address" class="invalid-feedback">
@@ -393,4 +412,3 @@ textarea {
 </style>
 
 
-
diff --git a/app/components/dashboard/AdminDashboard.vue b/app/components/dashboard/AdminDashboard.vue
index 9598581..43def58 100644
--- a/app/components/dashboard/AdminDashboard.vue
+++ b/app/components/dashboard/AdminDashboard.vue
@@ -7,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>
 
@@ -48,7 +48,7 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
       <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">
@@ -63,12 +63,6 @@ const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOvervie
           Moderazione Abusi
         </NuxtLink>
       </div>
-      <div class="col-12 col-md-6 mb-3">
-        <NuxtLink to="/open-data" class="btn btn-outline-secondary w-100 py-3 d-flex flex-column align-items-center">
-          <BIIcon name="it-chart-line" size="sm" class="mb-2" />
-          Vista Open Data
-        </NuxtLink>
-      </div>
     </div>
   </div>
 </template>
diff --git a/app/pages/admin/areas.vue b/app/pages/admin/areas.vue
index 3de53a8..6b49fcf 100644
--- a/app/pages/admin/areas.vue
+++ b/app/pages/admin/areas.vue
@@ -1,12 +1,13 @@
 <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: 'Gestione Aree - Admin' })
+useHead({ title: 'Aree - Admin' })
 
 const { getAreas, createArea } = useAdmin()
 const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
@@ -41,15 +42,31 @@ const openCreateModal = () => {
       map = null
     }
 
-    map = L.map('areaMap').setView([41.9028, 12.4964], 6)
+    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()
@@ -102,6 +119,12 @@ const handleCreate = async () => {
     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
@@ -128,9 +151,9 @@ const handleCreate = async () => {
 <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 GeoJSON</h1>
+      <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 alla Dashboard</NuxtLink>
+        <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
@@ -218,7 +241,7 @@ const handleCreate = async () => {
                     </button>
                   </div>
                   <div class="alert alert-light border small mb-2 p-2">
-                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti.
+                    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>
diff --git a/app/pages/admin/catalog.vue b/app/pages/admin/catalog.vue
index b3135b1..fedcaf3 100644
--- a/app/pages/admin/catalog.vue
+++ b/app/pages/admin/catalog.vue
@@ -86,7 +86,7 @@ const submitTeam = async () => {
         <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 alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
     </div>
 
     <div class="row g-4">
diff --git a/app/pages/admin/moderation.vue b/app/pages/admin/moderation.vue
index 1ce774c..2c85838 100644
--- a/app/pages/admin/moderation.vue
+++ b/app/pages/admin/moderation.vue
@@ -65,7 +65,7 @@ const formatDate = (dateStr: string) => {
   <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 alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
     </div>
 
     <div class="row mb-4">
diff --git a/app/pages/admin/users.vue b/app/pages/admin/users.vue
index e1d8a4a..4621031 100644
--- a/app/pages/admin/users.vue
+++ b/app/pages/admin/users.vue
@@ -76,7 +76,7 @@ const saveRoles = async () => {
   <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 alla Dashboard</NuxtLink>
+      <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm">Torna al pannello admin</NuxtLink>
     </div>
 
     <div class="row mb-4">
@@ -162,6 +162,7 @@ const saveRoles = async () => {
                 type="checkbox" 
                 :value="role" 
                 :id="'role-'+role"
+                :checked="selectedRoles.includes(role)"
                 v-model="selectedRoles"
               >
               <label class="form-check-label" :for="'role-'+role">
diff --git a/app/pages/dashboard/index.vue b/app/pages/dashboard/index.vue
index 1dff1d9..f16106c 100644
--- a/app/pages/dashboard/index.vue
+++ b/app/pages/dashboard/index.vue
@@ -19,14 +19,14 @@ const currentDashboard = computed(() => {
 
 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 '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 'Riepilogo rapido delle tue segnalazioni e dei punti cittadino'
 })
diff --git a/app/pages/info.vue b/app/pages/info.vue
index 5fb809e..129ba50 100644
--- a/app/pages/info.vue
+++ b/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>
@@ -175,4 +175,4 @@ useHead({
   list-style-type: none;
   padding-left: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/pages/open-data.vue b/app/pages/open-data.vue
index 9b61427..556987e 100644
--- a/app/pages/open-data.vue
+++ b/app/pages/open-data.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { isWithinBariBounds } from '~/utils/bari'
 
 // 1. API Fetching Logic
 const { getOpenDataReports } = usePublic()
@@ -15,6 +16,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
@@ -102,7 +107,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">
@@ -179,7 +184,7 @@ const getStatusBadge = (status: string) => {
           <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>
+            <p>Caricamento dei {{ visibleReports.length || 0 }} punti geografici in corso...</p>
           </div>
         </div>
       </div>
diff --git a/app/pages/reports/index.vue b/app/pages/reports/index.vue
index 2bd0989..50bfd57 100644
--- a/app/pages/reports/index.vue
+++ b/app/pages/reports/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Report } from '~/types/api'
+import { isWithinBariBounds } from '~/utils/bari'
 
 definePageMeta({
   middleware: 'auth',
@@ -15,7 +16,9 @@ const filterStatus = ref('')
 
 const { data: reportsRes, pending } = useAsyncData('citizen-reports-list', () => getReports({}))
 
-const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
+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') {
diff --git a/app/utils/bari.ts b/app/utils/bari.ts
new file mode 100644
index 0000000..abc17e7
--- /dev/null
+++ b/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
+

From 645e6367e981abefebfeb11902b173639dae19c7 Mon Sep 17 00:00:00 2001
From: gabdevele <schiraldigabriele@gmail.com>
Date: Mon, 15 Jun 2026 14:30:06 +0200
Subject: [PATCH 3/4] feat: update admin panel labels and adjust API endpoints
 for areas

---
 app/components/Header.vue   |   2 +-
 app/composables/useAdmin.ts |   4 +-
 app/pages/open-data.vue     | 133 ++++++++++++++++++++++++++++++++----
 3 files changed, 124 insertions(+), 15 deletions(-)

diff --git a/app/components/Header.vue b/app/components/Header.vue
index 151d3a7..660dc75 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -18,7 +18,7 @@ const navLinks = [
 ]
 
 const { isAuthenticated, user, logout } = useAuth()
-const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello admin' : 'Dashboard')
+const panelLabel = computed(() => user.value?.role?.toUpperCase() === 'ADMIN' ? 'Pannello' : 'Dashboard')
 </script>
 
 <template>
diff --git a/app/composables/useAdmin.ts b/app/composables/useAdmin.ts
index 2730497..faf12a8 100644
--- a/app/composables/useAdmin.ts
+++ b/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 })
@@ -58,4 +58,4 @@ export const useAdmin = () => {
     getModerationFlags,
     updateModerationFlag,
   }
-}
\ No newline at end of file
+}
diff --git a/app/pages/open-data.vue b/app/pages/open-data.vue
index 556987e..f9854d9 100644
--- a/app/pages/open-data.vue
+++ b/app/pages/open-data.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { isWithinBariBounds } from '~/utils/bari'
+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()
@@ -35,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) => {
@@ -44,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>
@@ -175,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 {{ visibleReports.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>
@@ -206,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>

From e3a4c0209bb52dc3be7dc06700829848b2acee9b Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Mon, 15 Jun 2026 14:43:22 +0200
Subject: [PATCH 4/4] fix: added lat and long placeholder info back

---
 app/components/ReportForm.vue |  4 ++--
 nuxt.config.ts                | 23 -----------------------
 2 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/app/components/ReportForm.vue b/app/components/ReportForm.vue
index ec546e8..82ee57b 100644
--- a/app/components/ReportForm.vue
+++ b/app/components/ReportForm.vue
@@ -294,7 +294,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
               step="0.000001"
               class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
-              placeholder="Latitudine (Bari)"
+              placeholder="Latitudine (es. 45.5)"
               required
             />
           </div>
@@ -305,7 +305,7 @@ watch([() => form.value.latitude, () => form.value.longitude], ([newLat, newLng]
               step="0.000001"
               class="form-control form-control-sm"
               :class="{ 'is-invalid': errors.location }"
-              placeholder="Longitudine (Bari)"
+              placeholder="Longitudine (es. 10.2)"
               required
             />
           </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 023216d..387a267 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -35,29 +35,6 @@ export default defineNuxtConfig({
     ]
   },
 
-  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/'
-        }
-      }
-    }
-  },
-
   app: {
     head: {
       link: [