feat(admin): add categories and teams management page

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>

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>

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>

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 || [])