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>