feat(admin): add delete functionality for areas, categories, and teams in admin panel

app/components/ConfirmModal.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  open: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmClass?: string
+  pending?: boolean
+}>(), {
+  confirmLabel: 'Conferma',
+  cancelLabel: 'Annulla',
+  confirmClass: 'btn-danger',
+  pending: false,
+})
+
+const emit = defineEmits<{
+  cancel: []
+  confirm: []
+}>()
+
+const handleBackdropClick = (event: MouseEvent) => {
+  if (event.target === event.currentTarget && !props.pending) {
+    emit('cancel')
+  }
+}
+</script>
+
+<template>
+  <div v-if="open">
+    <div class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div
+      class="modal fade show d-block"
+      tabindex="-1"
+      style="z-index: 1050;"
+      @click="handleBackdropClick"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content shadow">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ title }}</h5>
+            <button type="button" class="btn-close" :disabled="pending" @click="emit('cancel')"></button>
+          </div>
+          <div class="modal-body">
+            <p class="mb-0">{{ message }}</p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-outline-secondary" :disabled="pending" @click="emit('cancel')">
+              {{ cancelLabel }}
+            </button>
+            <button type="button" class="btn" :class="confirmClass" :disabled="pending" @click="emit('confirm')">
+              <span v-if="pending" class="spinner-border spinner-border-sm me-2"></span>
+              {{ confirmLabel }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/composables/useAdmin.ts

@@ -30,6 +30,9 @@ export const useAdmin = () => {
   const updateArea = (id: number, body: UpdateAreaRequest) =>
       useApiFetch<OkResponse>(`/api/v1/admin/areas/${id}`, { method: 'PATCH', body })
 
+  const deleteArea = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/areas/${id}`, { method: 'DELETE' })
+
   const getCategories = () =>
       useApiFetch<CategoryListResponse>('/api/v1/admin/categories', { method: 'GET' })
 
@@ -39,6 +42,9 @@ export const useAdmin = () => {
   const updateCategory = (id: number, body: UpdateCategoryRequest) =>
       useApiFetch<OkResponse>(`/api/v1/admin/categories/${id}`, { method: 'PATCH', body })
 
+  const deleteCategory = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/categories/${id}`, { method: 'DELETE' })
+
   const getTeams = () =>
       useApiFetch<TeamListResponse>('/api/v1/admin/teams', { method: 'GET' })
 
@@ -47,6 +53,9 @@ export const useAdmin = () => {
 
   const updateTeam = (id: number, body: UpdateTeamRequest) =>
       useApiFetch<OkResponse>(`/api/v1/admin/teams/${id}`, { method: 'PATCH', body })
+
+  const deleteTeam = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/admin/teams/${id}`, { method: 'DELETE' })
   
   const getModerationFlags = (query?: { status?: string; page?: number; per_page?: number }) =>
       useApiFetch<ModerationListResponse>('/api/v1/admin/moderation', { method: 'GET', query })
@@ -62,12 +71,15 @@ export const useAdmin = () => {
     getAreas,
     createArea,
     updateArea,
+    deleteArea,
     getCategories,
     createCategory,
     updateCategory,
+    deleteCategory,
     getTeams,
     createTeam,
     updateTeam,
+    deleteTeam,
     getModerationFlags,
     updateModerationFlag,
   }

app/composables/useOperator.ts

@@ -1,4 +1,5 @@
 import type {
+  AssignmentLinkResponse,
   AssignTeamRequest,
   InterventionSummaryResponse,
   OkResponse,
@@ -32,6 +33,12 @@ export const useOperator = () => {
   const getInterventionSummary = (id: number) =>
       useApiFetch<InterventionSummaryResponse>(`/api/v1/reports/${id}/intervention-summary`, { method: 'GET' })
 
+  const createInterventionLink = (id: number) =>
+      useApiFetch<AssignmentLinkResponse>(`/api/v1/reports/${id}/intervention-link`, { method: 'POST' })
+
+  const revokeInterventionLink = (id: number) =>
+      useApiFetch<OkResponse>(`/api/v1/reports/${id}/intervention-link`, { method: 'DELETE' })
+
   return {
     getOpenReports,
     getAssignedReports,
@@ -41,5 +48,7 @@ export const useOperator = () => {
     updateReportStatus,
     assignTeam,
     getInterventionSummary,
+    createInterventionLink,
+    revokeInterventionLink,
   }
 }

app/pages/admin/areas.vue

@@ -9,7 +9,7 @@ definePageMeta({
 
 useHead({ title: 'Aree - Admin' })
 
-const { getAreas, createArea, updateArea } = useAdmin()
+const { getAreas, createArea, updateArea, deleteArea } = useAdmin()
 const { data: areasRes, pending, refresh } = useAsyncData('admin-areas', () => getAreas())
 
 const isCreating = ref(false)
@@ -20,6 +20,9 @@ const formData = reactive({
   geojson: ''
 })
 const jsonError = ref('')
+const actionError = ref('')
+const deletingAreaId = ref<number | null>(null)
+const areaPendingDelete = ref<any | null>(null)
 
 // Map variables
 let map: any = null
@@ -29,8 +32,10 @@ const mapPoints = ref<[number, number][]>([])
 const modalTitle = computed(() => editingAreaId.value ? 'Modifica Area' : 'Nuova Area')
 const submitLabel = computed(() => editingAreaId.value ? 'Salva Modifiche' : 'Crea Area')
 const isEditing = computed(() => editingAreaId.value !== null)
+const areas = computed(() => areasRes.value?.areas || [])
 
 const openCreateModal = () => {
+  actionError.value = ''
   editingAreaId.value = null
   formData.name = ''
   formData.description = ''
@@ -98,6 +103,7 @@ const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
 }
 
 const openEditModal = (area: any) => {
+  actionError.value = ''
   editingAreaId.value = area.id
   formData.name = area.name || ''
   formData.description = area.description || ''
@@ -218,22 +224,45 @@ const handleCreate = async () => {
     if (res.ok) {
       await refresh()
       closeCreateModal()
+      actionError.value = ''
     }
   } catch (err) {
     console.error('Failed to save area', err)
-    alert('Errore durante il salvataggio dell\'area.')
+    actionError.value = 'Errore durante il salvataggio dell\'area.'
   }
 }
 
-const handleToggleAreaActive = async (area: any) => {
+const askDeleteArea = (area: any) => {
+  areaPendingDelete.value = area
+}
+
+const closeDeleteAreaModal = () => {
+  if (deletingAreaId.value) return
+  areaPendingDelete.value = null
+}
+
+const handleDeleteArea = async () => {
+  if (!areaPendingDelete.value) return
+
+  const area = areaPendingDelete.value
+
+  deletingAreaId.value = area.id
+  actionError.value = ''
+
   try {
-    const res = await updateArea(area.id, { active: !area.active })
+    const res = await deleteArea(area.id)
     if (res.ok) {
+      if (editingAreaId.value === area.id) {
+        closeCreateModal()
+      }
       await refresh()
+      areaPendingDelete.value = null
     }
-  } catch (err) {
+  } catch (err: any) {
-    console.error('Failed to update area status', err)
+    console.error('Failed to delete area', err)
-    alert('Errore durante l\'aggiornamento dello stato area.')
+    actionError.value = err?.data?.message || 'Errore durante eliminazione area.'
+  } finally {
+    deletingAreaId.value = null
   }
 }
 </script>
@@ -255,10 +284,14 @@ const handleToggleAreaActive = async (area: any) => {
       <div class="spinner-border text-primary" role="status"></div>
     </div>
 
-    <div v-else-if="!areasRes?.areas || areasRes.areas.length === 0" class="alert alert-info">
+    <div v-else-if="areas.length === 0" class="alert alert-info">
       Nessuna area configurata.
     </div>
 
+    <div v-if="actionError" class="alert alert-danger">
+      {{ actionError }}
+    </div>
+
     <div v-else class="table-responsive">
       <table class="table table-hover align-middle bg-white shadow-sm rounded">
         <thead class="table-light">
@@ -266,20 +299,15 @@ const handleToggleAreaActive = async (area: any) => {
             <th>ID</th>
             <th>Nome</th>
             <th>Descrizione</th>
-            <th>Stato</th>
             <th>GeoJSON</th>
             <th class="text-end">Azioni</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="area in areasRes.areas" :key="area.id">
+          <tr v-for="area in areas" :key="area.id">
             <td>{{ area.id }}</td>
             <td><strong>{{ area.name }}</strong></td>
             <td>{{ area.description || '-' }}</td>
-            <td>
-              <span v-if="area.active" class="badge bg-success">Attiva</span>
-              <span v-else class="badge bg-secondary">Inattiva</span>
-            </td>
             <td>
               <span v-if="area.boundary_geojson" class="badge border border-primary text-primary">Configurato</span>
               <span v-else class="badge border border-danger text-danger">Mancante</span>
@@ -289,11 +317,12 @@ const handleToggleAreaActive = async (area: any) => {
                 Modifica
               </button>
               <button
-                class="btn btn-sm"
+                class="btn btn-sm btn-outline-danger ms-2"
-                :class="area.active ? 'btn-outline-secondary' : 'btn-outline-success'"
+                :disabled="deletingAreaId === area.id"
-                @click="handleToggleAreaActive(area)"
+                @click="askDeleteArea(area)"
               >
-                {{ area.active ? 'Disattiva' : 'Attiva' }}
+                <span v-if="deletingAreaId === area.id" class="spinner-border spinner-border-sm me-1"></span>
+                Elimina
               </button>
             </td>
           </tr>
@@ -360,6 +389,17 @@ const handleToggleAreaActive = async (area: any) => {
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+      :open="areaPendingDelete !== null"
+      title="Elimina area"
+      :message="areaPendingDelete ? `Vuoi eliminare area \\\"${areaPendingDelete.name}\\\"? Operazione irreversibile.` : ''"
+      confirm-label="Elimina area"
+      confirm-class="btn-danger"
+      :pending="deletingAreaId !== null"
+      @cancel="closeDeleteAreaModal"
+      @confirm="handleDeleteArea"
+    />
   </div>
 </template>
 

app/pages/admin/catalog.vue

@@ -8,7 +8,7 @@ definePageMeta({
 
 useHead({ title: 'Categorie e Team - Admin' })
 
-const { createCategory, updateCategory, getTeams, createTeam, updateTeam, getAreas } = useAdmin()
+const { createCategory, updateCategory, deleteCategory, getTeams, createTeam, updateTeam, deleteTeam, getAreas } = useAdmin()
 const { getCategories } = useReports()
 
 const { data: categoriesRes, refresh: refreshCategories } = await useAsyncData('report-categories-admin-view', () => getCategories())
@@ -35,6 +35,10 @@ const isSavingCategory = ref(false)
 const isSavingTeam = ref(false)
 const categoryError = ref('')
 const teamError = ref('')
+const deletingCategoryId = ref<number | null>(null)
+const deletingTeamId = ref<number | null>(null)
+const categoryPendingDelete = ref<Category | null>(null)
+const teamPendingDelete = ref<Team | null>(null)
 
 const categories = computed(() => categoriesRes.value?.categories || [])
 const teams = computed(() => teamsRes.value?.teams || [])
@@ -127,6 +131,37 @@ const toggleCategoryActive = async (category: Category) => {
   }
 }
 
+const askDeleteCategory = (category: Category) => {
+  categoryPendingDelete.value = category
+}
+
+const closeDeleteCategoryModal = () => {
+  if (deletingCategoryId.value) return
+  categoryPendingDelete.value = null
+}
+
+const handleDeleteCategory = async () => {
+  if (!categoryPendingDelete.value) return
+
+  const category = categoryPendingDelete.value
+
+  deletingCategoryId.value = category.id
+  categoryError.value = ''
+
+  try {
+    await deleteCategory(category.id)
+    if (editingCategoryId.value === category.id) {
+      resetCategoryForm()
+    }
+    await refreshCategories()
+    categoryPendingDelete.value = null
+  } catch (error: any) {
+    categoryError.value = error?.data?.message || 'Eliminazione categoria non riuscita.'
+  } finally {
+    deletingCategoryId.value = null
+  }
+}
+
 const toggleTeamActive = async (team: Team) => {
   try {
     await updateTeam(team.id, { active: team.active === false })
@@ -135,6 +170,37 @@ const toggleTeamActive = async (team: Team) => {
     teamError.value = error?.data?.message || 'Aggiornamento team non riuscito.'
   }
 }
+
+const askDeleteTeam = (team: Team) => {
+  teamPendingDelete.value = team
+}
+
+const closeDeleteTeamModal = () => {
+  if (deletingTeamId.value) return
+  teamPendingDelete.value = null
+}
+
+const handleDeleteTeam = async () => {
+  if (!teamPendingDelete.value) return
+
+  const team = teamPendingDelete.value
+
+  deletingTeamId.value = team.id
+  teamError.value = ''
+
+  try {
+    await deleteTeam(team.id)
+    if (editingTeamId.value === team.id) {
+      resetTeamForm()
+    }
+    await refreshTeams()
+    teamPendingDelete.value = null
+  } catch (error: any) {
+    teamError.value = error?.data?.message || 'Eliminazione team non riuscita.'
+  } finally {
+    deletingTeamId.value = null
+  }
+}
 </script>
 
 <template>
@@ -216,6 +282,14 @@ const toggleTeamActive = async (team: Team) => {
                       >
                         {{ category.active === false ? 'Attiva' : 'Disattiva' }}
                       </button>
+                      <button
+                        class="btn btn-sm btn-outline-danger ms-2"
+                        :disabled="deletingCategoryId === category.id"
+                        @click="askDeleteCategory(category)"
+                      >
+                        <span v-if="deletingCategoryId === category.id" class="spinner-border spinner-border-sm me-1"></span>
+                        Elimina
+                      </button>
                     </td>
                   </tr>
                   <tr v-if="categories.length === 0">
@@ -320,6 +394,14 @@ const toggleTeamActive = async (team: Team) => {
                       >
                         {{ team.active === false ? 'Attiva' : 'Disattiva' }}
                       </button>
+                      <button
+                        class="btn btn-sm btn-outline-danger ms-2"
+                        :disabled="deletingTeamId === team.id"
+                        @click="askDeleteTeam(team)"
+                      >
+                        <span v-if="deletingTeamId === team.id" class="spinner-border spinner-border-sm me-1"></span>
+                        Elimina
+                      </button>
                     </td>
                   </tr>
                   <tr v-if="teams.length === 0">
@@ -332,5 +414,27 @@ const toggleTeamActive = async (team: Team) => {
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+      :open="categoryPendingDelete !== null"
+      title="Elimina categoria"
+      :message="categoryPendingDelete ? `Vuoi eliminare categoria \\\"${categoryPendingDelete.name}\\\"? Operazione irreversibile.` : ''"
+      confirm-label="Elimina categoria"
+      confirm-class="btn-danger"
+      :pending="deletingCategoryId !== null"
+      @cancel="closeDeleteCategoryModal"
+      @confirm="handleDeleteCategory"
+    />
+
+    <ConfirmModal
+      :open="teamPendingDelete !== null"
+      title="Elimina team"
+      :message="teamPendingDelete ? `Vuoi eliminare team \\\"${teamPendingDelete.name}\\\"? Operazione irreversibile.` : ''"
+      confirm-label="Elimina team"
+      confirm-class="btn-danger"
+      :pending="deletingTeamId !== null"
+      @cancel="closeDeleteTeamModal"
+      @confirm="handleDeleteTeam"
+    />
   </div>
 </template>

app/pages/admin/moderation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 
 definePageMeta({
   middleware: 'auth',
@@ -13,6 +13,19 @@ const { getModerationFlags, updateModerationFlag } = useAdmin()
 const page = ref(1)
 const perPage = ref(10)
 const statusFilter = ref('')
+const actionError = ref('')
+const resolveModal = reactive({
+  open: false,
+  flagId: null as number | null,
+  rejectReport: false,
+  note: '',
+  pending: false,
+})
+const dismissModal = reactive({
+  open: false,
+  flagId: null as number | null,
+  pending: false,
+})
 
 const { data: flagsRes, pending, refresh } = useAsyncData(
   'admin-moderation-flags', 
@@ -20,36 +33,72 @@ const { data: flagsRes, pending, refresh } = useAsyncData(
   { watch: [page, statusFilter] }
 )
 
-const handleResolve = async (id: number, rejectReport: boolean) => {
+const openResolveModal = (id: number, rejectReport: boolean) => {
-  const note = prompt('Inserisci una nota di risoluzione (opzionale):')
+  resolveModal.open = true
-  if (note === null) return // cancelled
+  resolveModal.flagId = id
-  
+  resolveModal.rejectReport = rejectReport
+  resolveModal.note = ''
+}
+
+const closeResolveModal = () => {
+  if (resolveModal.pending) return
+  resolveModal.open = false
+  resolveModal.flagId = null
+  resolveModal.note = ''
+}
+
+const handleResolve = async () => {
+  if (!resolveModal.flagId) return
+
+  resolveModal.pending = true
+  actionError.value = ''
+
   try {
-    const res = await updateModerationFlag(id, { 
+    const res = await updateModerationFlag(resolveModal.flagId, {
       status: 'RESOLVED', 
-      reject_report: rejectReport,
+      reject_report: resolveModal.rejectReport,
-      resolution_note: note
+      resolution_note: resolveModal.note || undefined
     })
     if (res.ok) {
       await refresh()
+      closeResolveModal()
     }
   } catch (err) {
     console.error('Failed to resolve flag', err)
-    alert('Errore durante la risoluzione della segnalazione.')
+    actionError.value = 'Errore durante la risoluzione della segnalazione.'
+  } finally {
+    resolveModal.pending = false
   }
 }
 
-const handleDismiss = async (id: number) => {
+const openDismissModal = (id: number) => {
-  if (!confirm('Sei sicuro di voler ignorare (dismiss) questo flag?')) return
+  dismissModal.open = true
-  
+  dismissModal.flagId = id
+}
+
+const closeDismissModal = () => {
+  if (dismissModal.pending) return
+  dismissModal.open = false
+  dismissModal.flagId = null
+}
+
+const handleDismiss = async () => {
+  if (!dismissModal.flagId) return
+
+  dismissModal.pending = true
+  actionError.value = ''
+
   try {
-    const res = await updateModerationFlag(id, { status: 'DISMISSED' })
+    const res = await updateModerationFlag(dismissModal.flagId, { status: 'DISMISSED' })
     if (res.ok) {
       await refresh()
+      closeDismissModal()
     }
   } catch (err) {
     console.error('Failed to dismiss flag', err)
-    alert('Errore durante l\'aggiornamento.')
+    actionError.value = 'Errore durante l\'aggiornamento.'
+  } finally {
+    dismissModal.pending = false
   }
 }
 
@@ -88,6 +137,10 @@ const formatDate = (dateStr: string) => {
       Nessun elemento da moderare al momento.
     </div>
 
+    <div v-if="actionError" class="alert alert-danger">
+      {{ actionError }}
+    </div>
+
     <div v-else>
       <div class="card mb-3 shadow-sm border-0" v-for="flag in flagsRes.flags" :key="flag.id">
         <div class="card-header bg-light d-flex justify-content-between align-items-center">
@@ -134,13 +187,13 @@ const formatDate = (dateStr: string) => {
             
             <div class="col-md-4 text-end" v-if="flag.status === 'OPEN'">
               <div class="d-flex flex-column gap-2 mt-3 mt-md-0">
-                <button class="btn btn-outline-danger btn-sm" @click="handleResolve(flag.id, true)">
+                <button class="btn btn-outline-danger btn-sm" @click="openResolveModal(flag.id, true)">
                   <BIIcon name="it-ban" size="xs" /> Risolvi & Rigetta Segn.
                 </button>
-                <button class="btn btn-outline-warning btn-sm" @click="handleResolve(flag.id, false)">
+                <button class="btn btn-outline-warning btn-sm" @click="openResolveModal(flag.id, false)">
                   <BIIcon name="it-check" size="xs" /> Risolvi (Solo Avviso)
                 </button>
-                <button class="btn btn-outline-secondary btn-sm" @click="handleDismiss(flag.id)">
+                <button class="btn btn-outline-secondary btn-sm" @click="openDismissModal(flag.id)">
                   <BIIcon name="it-close" size="xs" /> Ignora Flag
                 </button>
               </div>
@@ -157,5 +210,39 @@ const formatDate = (dateStr: string) => {
         @page-change="page = $event"
       />
     </div>
+
+    <div v-if="resolveModal.open" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div v-if="resolveModal.open" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ resolveModal.rejectReport ? 'Risolvi e rigetta segnalazione' : 'Risolvi flag' }}</h5>
+            <button type="button" class="btn-close" :disabled="resolveModal.pending" @click="closeResolveModal"></button>
+          </div>
+          <div class="modal-body">
+            <label class="form-label">Nota di risoluzione</label>
+            <textarea v-model="resolveModal.note" class="form-control" rows="4" placeholder="Nota opzionale"></textarea>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-outline-secondary" :disabled="resolveModal.pending" @click="closeResolveModal">Annulla</button>
+            <button type="button" class="btn btn-primary" :disabled="resolveModal.pending" @click="handleResolve">
+              <span v-if="resolveModal.pending" class="spinner-border spinner-border-sm me-2"></span>
+              Conferma
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ConfirmModal
+      :open="dismissModal.open"
+      title="Ignora flag"
+      message="Vuoi ignorare questo flag? Azione registrata in moderazione."
+      confirm-label="Ignora flag"
+      confirm-class="btn-outline-secondary"
+      :pending="dismissModal.pending"
+      @cancel="closeDismissModal"
+      @confirm="handleDismiss"
+    />
   </div>
 </template>

app/pages/admin/users.vue

@@ -13,6 +13,10 @@ const { getUsers, updateUserBan, updateUserRoles } = useAdmin()
 const { data: usersRes, pending, refresh } = useAsyncData('admin-users', () => getUsers())
 
 const search = ref('')
+const banError = ref('')
+const roleError = ref('')
+const pendingBanUser = ref<any | null>(null)
+const isUpdatingBan = ref(false)
 const parseRoles = (roles?: string) => roles ? roles.split(',').map((r) => r.trim()).filter(Boolean) : []
 
 const filteredUsers = computed(() => {
@@ -27,17 +31,33 @@ const filteredUsers = computed(() => {
   )
 })
 
-const handleToggleBan = async (id: number, currentBanStatus: boolean) => {
+const askToggleBan = (user: any) => {
-  if (!confirm(`Sei sicuro di voler ${currentBanStatus ? 'sbloccare' : 'bannare'} questo utente?`)) return
+  pendingBanUser.value = user
-  
+}
+
+const closeBanModal = () => {
+  if (isUpdatingBan.value) return
+  pendingBanUser.value = null
+}
+
+const handleToggleBan = async () => {
+  if (!pendingBanUser.value) return
+
+  const user = pendingBanUser.value
+  isUpdatingBan.value = true
+  banError.value = ''
+
   try {
-    const res = await updateUserBan(id, { banned: !currentBanStatus })
+    const res = await updateUserBan(user.id, { banned: !user.banned })
     if (res.ok) {
       await refresh()
+      pendingBanUser.value = null
     }
   } catch (err) {
     console.error('Failed to update user ban status', err)
-    alert('Errore durante l\'aggiornamento dello stato di ban.')
+    banError.value = 'Errore durante l\'aggiornamento dello stato di ban.'
+  } finally {
+    isUpdatingBan.value = false
   }
 }
 
@@ -58,7 +78,8 @@ const closeRoleModal = () => {
 
 const saveRoles = async () => {
   if (!editingUserId.value) return
-  
+
+  roleError.value = ''
   try {
     const res = await updateUserRoles(editingUserId.value, { roles: selectedRoles.value })
     if (res.ok) {
@@ -67,7 +88,7 @@ const saveRoles = async () => {
     }
   } catch (err) {
     console.error('Failed to update roles', err)
-    alert('Errore durante l\'aggiornamento dei ruoli.')
+    roleError.value = 'Errore durante l\'aggiornamento dei ruoli.'
   }
 }
 </script>
@@ -95,6 +116,14 @@ const saveRoles = async () => {
       Nessun utente trovato.
     </div>
 
+    <div v-if="banError" class="alert alert-danger">
+      {{ banError }}
+    </div>
+
+    <div v-if="roleError" class="alert alert-danger">
+      {{ roleError }}
+    </div>
+
     <div v-else class="table-responsive">
       <table class="table table-hover align-middle">
         <thead>
@@ -138,7 +167,7 @@ const saveRoles = async () => {
               <button 
                 class="btn btn-sm"
                 :class="user.banned ? 'btn-outline-success' : 'btn-outline-danger'"
-                @click="handleToggleBan(user.id, !!user.banned)"
+                @click="askToggleBan(user)"
               >
                 {{ user.banned ? 'Sblocca' : 'Banna' }}
               </button>
@@ -177,5 +206,16 @@ const saveRoles = async () => {
         </div>
       </div>
     </div>
+
+    <ConfirmModal
+      :open="pendingBanUser !== null"
+      title="Conferma stato utente"
+      :message="pendingBanUser ? `Vuoi ${pendingBanUser.banned ? 'sbloccare' : 'bannare'} utente ${pendingBanUser.first_name} ${pendingBanUser.last_name}?` : ''"
+      :confirm-label="pendingBanUser?.banned ? 'Sblocca utente' : 'Banna utente'"
+      :confirm-class="pendingBanUser?.banned ? 'btn-success' : 'btn-danger'"
+      :pending="isUpdatingBan"
+      @cancel="closeBanModal"
+      @confirm="handleToggleBan"
+    />
   </div>
 </template>

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

@@ -17,7 +17,7 @@ if (!reportId) {
 }
 
 const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
-const { getInterventionSummary, updateReportStatus, assignTeam, getTeams } = useOperator()
+const { getInterventionSummary, updateReportStatus, assignTeam, getTeams, createInterventionLink, revokeInterventionLink } = useOperator()
 const { user } = useAuth()
 
 // Dati principali
@@ -52,6 +52,13 @@ const isUpdatingStatus = ref(false)
 const isAssignModalOpen = ref(false)
 const selectedTeamId = ref<number | null>(null)
 const isAssigning = ref(false)
+const interventionLink = ref('')
+const interventionLinkExpiresAt = ref('')
+const isGeneratingInterventionLink = ref(false)
+const isRevokingInterventionLink = ref(false)
+const interventionLinkError = ref('')
+const interventionLinkSuccess = ref('')
+const isRevokeInterventionModalOpen = ref(false)
 
 // Messaggi
 const isSubmittingMessage = ref(false)
@@ -109,6 +116,72 @@ const handleAssignTeam = async () => {
   }
 }
 
+const copyInterventionLink = async () => {
+  if (!interventionLink.value || !navigator?.clipboard) return
+
+  try {
+    await navigator.clipboard.writeText(interventionLink.value)
+    interventionLinkSuccess.value = 'Link copiato negli appunti.'
+    interventionLinkError.value = ''
+  } catch {
+    interventionLinkError.value = 'Copia automatica non riuscita.'
+    interventionLinkSuccess.value = ''
+  }
+}
+
+const handleCreateInterventionLink = async () => {
+  isGeneratingInterventionLink.value = true
+  interventionLinkError.value = ''
+  interventionLinkSuccess.value = ''
+
+  try {
+    const res = await createInterventionLink(reportId)
+    if (res.ok) {
+      interventionLink.value = res.url
+      interventionLinkExpiresAt.value = res.expires_at
+      interventionLinkSuccess.value = 'Link intervento generato.'
+    }
+  } catch (e: any) {
+    console.error('Failed to create intervention link', e)
+    interventionLinkError.value = e?.data?.message || 'Generazione link non riuscita.'
+  } finally {
+    isGeneratingInterventionLink.value = false
+  }
+}
+
+const openRevokeInterventionLinkModal = () => {
+  if (!interventionLink.value) return
+  isRevokeInterventionModalOpen.value = true
+}
+
+const closeRevokeInterventionLinkModal = () => {
+  if (isRevokingInterventionLink.value) return
+  isRevokeInterventionModalOpen.value = false
+}
+
+const handleRevokeInterventionLink = async () => {
+  if (!interventionLink.value) return
+
+  isRevokingInterventionLink.value = true
+  interventionLinkError.value = ''
+  interventionLinkSuccess.value = ''
+
+  try {
+    const res = await revokeInterventionLink(reportId)
+    if (res.ok) {
+      interventionLink.value = ''
+      interventionLinkExpiresAt.value = ''
+      interventionLinkSuccess.value = 'Link intervento revocato.'
+      isRevokeInterventionModalOpen.value = false
+    }
+  } catch (e: any) {
+    console.error('Failed to revoke intervention link', e)
+    interventionLinkError.value = e?.data?.message || 'Revoca link non riuscita.'
+  } finally {
+    isRevokingInterventionLink.value = false
+  }
+}
+
 const handleSendMessage = async (msgText: string, files: File[]) => {
   if (!msgText.trim() && files.length === 0) return
   isSubmittingMessage.value = true
@@ -158,6 +231,10 @@ const latestCitizenMessage = computed(() => {
     .reverse()
     .find((message) => message.user_id === reportUserId) || null
 })
+
+const formattedInterventionLinkExpiry = computed(() =>
+  interventionLinkExpiresAt.value ? formatDate(interventionLinkExpiresAt.value) : ''
+)
 </script>
 
 <template>
@@ -292,6 +369,54 @@ const latestCitizenMessage = computed(() => {
             </div>
           </div>
 
+          <div class="card card-bg border-0 shadow-sm mb-4">
+            <div class="card-body">
+              <h2 class="h6 mb-3">Link intervento pubblico</h2>
+              <p class="text-muted small mb-3">Genera link temporaneo per team esterno. Nuova generazione ruota link esistente.</p>
+
+              <div v-if="interventionLinkError" class="alert alert-danger py-2" role="alert">
+                {{ interventionLinkError }}
+              </div>
+              <div v-if="interventionLinkSuccess" class="alert alert-success py-2" role="alert">
+                {{ interventionLinkSuccess }}
+              </div>
+
+              <template v-if="interventionLink">
+                <label class="form-label">URL attivo</label>
+                <div class="input-group mb-2">
+                  <input type="text" class="form-control" :value="interventionLink" readonly />
+                  <button type="button" class="btn btn-outline-primary" @click="copyInterventionLink">
+                    Copia
+                  </button>
+                </div>
+                <p class="small text-muted mb-3">
+                  Scade: {{ formattedInterventionLinkExpiry || '-' }}
+                </p>
+                <div class="d-grid gap-2">
+                  <button type="button" class="btn btn-outline-primary" :disabled="isGeneratingInterventionLink" @click="handleCreateInterventionLink">
+                    <span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
+                    Rigenera link
+                  </button>
+                  <button type="button" class="btn btn-outline-danger" :disabled="isRevokingInterventionLink" @click="openRevokeInterventionLinkModal">
+                    <span v-if="isRevokingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
+                    Revoca link
+                  </button>
+                </div>
+              </template>
+
+              <button
+                v-else
+                type="button"
+                class="btn btn-outline-primary w-100"
+                :disabled="isGeneratingInterventionLink"
+                @click="handleCreateInterventionLink"
+              >
+                <span v-if="isGeneratingInterventionLink" class="spinner-border spinner-border-sm me-2"></span>
+                Genera link
+              </button>
+            </div>
+          </div>
+
           <div class="card card-bg border-0 shadow-sm mb-4">
             <div class="card-body">
               <h2 class="h6 mb-3">Aggiorna stato</h2>
@@ -375,6 +500,16 @@ const latestCitizenMessage = computed(() => {
       </div>
     </div>
 
+    <ConfirmModal
+      :open="isRevokeInterventionModalOpen"
+      title="Revoca link intervento"
+      message="Vuoi revocare link pubblico per team esterno? Link non sara piu utilizzabile."
+      confirm-label="Revoca link"
+      confirm-class="btn-danger"
+      :pending="isRevokingInterventionLink"
+      @cancel="closeRevokeInterventionLinkModal"
+      @confirm="handleRevokeInterventionLink"
+    />
   </div>
   <div v-else class="text-center py-5">
     <div class="spinner-border text-primary" role="status"></div>

app/types/api.d.ts

@@ -367,6 +367,12 @@ export interface InterventionSummaryResponse {
     latest_messages: Message[];
 }
 
+export interface AssignmentLinkResponse {
+    ok: boolean;
+    url: string;
+    expires_at: string;
+}
+
 export interface MediaUploadResponse {
     ok: boolean;
     media: Media[];