From 3d6802f2bf28f931d3db43da8169c921741a7906 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Sat, 13 Jun 2026 10:28:55 +0200
Subject: [PATCH] feat: implement operator dashboard views and report
 management

---
 app/pages/operator/assigned.vue     |  84 ++++++++
 app/pages/operator/index.vue        |  96 +++++++++
 app/pages/operator/others.vue       |  84 ++++++++
 app/pages/operator/reports/[id].vue | 292 ++++++++++++++++++++++++++++
 4 files changed, 556 insertions(+)
 create mode 100644 app/pages/operator/assigned.vue
 create mode 100644 app/pages/operator/index.vue
 create mode 100644 app/pages/operator/others.vue
 create mode 100644 app/pages/operator/reports/[id].vue

diff --git a/app/pages/operator/assigned.vue b/app/pages/operator/assigned.vue
new file mode 100644
index 0000000..5a5cf1a
--- /dev/null
+++ b/app/pages/operator/assigned.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { Report } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Mie Assegnazioni - Operatore' })
+
+const { getAssignedReports } = useOperator()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: reportsRes, pending } = useAsyncData(
+  'operator-assigned-reports', 
+  () => getAssignedReports({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
+</script>
+
+<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">Le Mie Assegnazioni</h1>
+      <div>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
+        <NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</NuxtLink>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
+      Non hai segnalazioni in carico al momento.
+    </div>
+
+    <div v-else>
+      <div class="table-responsive">
+        <table class="table table-hover border-bottom">
+          <thead class="table-light">
+            <tr>
+              <th scope="col" class="small">#ID</th>
+              <th scope="col" class="small">Categoria</th>
+              <th scope="col" class="small">Indirizzo</th>
+              <th scope="col" class="small">Stato</th>
+              <th scope="col" class="small">Creata il</th>
+              <th scope="col" class="text-center small">Azioni</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
+              <td class="small font-weight-semibold">#{{ report.id }}</td>
+              <td class="small">{{ report.category_name }}</td>
+              <td class="small">{{ report.address }}</td>
+              <td class="small">
+                <StatusBadge :status="report.status" />
+              </td>
+              <td class="small text-muted">{{ formatDate(report.created_at) }}</td>
+              <td class="text-center">
+                <NuxtLink :to="`/operator/reports/${report.id}`" class="btn btn-sm btn-outline-primary">
+                  Gestisci
+                </NuxtLink>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <Pagination 
+        v-if="reportsRes.total > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="reportsRes.total"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/operator/index.vue b/app/pages/operator/index.vue
new file mode 100644
index 0000000..6822206
--- /dev/null
+++ b/app/pages/operator/index.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { Report } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Segnalazioni Aperte - Operatore' })
+
+const { getOpenReports, takeReport } = useOperator()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: reportsRes, pending, refresh } = useAsyncData(
+  'operator-open-reports', 
+  () => getOpenReports({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+const handleTakeReport = async (id: number) => {
+  try {
+    const res = await takeReport(id)
+    if (res.ok) {
+      // Optimistic update or refresh
+      await refresh()
+    }
+  } catch (err) {
+    console.error('Failed to take report', err)
+  }
+}
+
+const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
+</script>
+
+<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">Segnalazioni da prendere in carico (OPEN)</h1>
+      <div>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
+        <NuxtLink to="/operator/assigned" class="btn btn-outline-primary btn-sm">Le mie assegnazioni</NuxtLink>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
+      Non ci sono segnalazioni aperte in questo momento.
+    </div>
+
+    <div v-else>
+      <div class="table-responsive">
+        <table class="table table-hover border-bottom">
+          <thead class="table-light">
+            <tr>
+              <th scope="col" class="small">#ID</th>
+              <th scope="col" class="small">Categoria</th>
+              <th scope="col" class="small">Indirizzo</th>
+              <th scope="col" class="small">Stato</th>
+              <th scope="col" class="small">Creata il</th>
+              <th scope="col" class="text-center small">Azioni</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
+              <td class="small font-weight-semibold">#{{ report.id }}</td>
+              <td class="small">{{ report.category_name }}</td>
+              <td class="small">{{ report.address }}</td>
+              <td class="small">
+                <StatusBadge :status="report.status" />
+              </td>
+              <td class="small text-muted">{{ formatDate(report.created_at) }}</td>
+              <td class="text-center">
+                <button class="btn btn-primary btn-sm" @click="handleTakeReport(report.id)">
+                  Prendi in carico
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <Pagination 
+        v-if="reportsRes.total > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="reportsRes.total"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/operator/others.vue b/app/pages/operator/others.vue
new file mode 100644
index 0000000..979ec6e
--- /dev/null
+++ b/app/pages/operator/others.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { Report } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Gestite da Altri - Operatore' })
+
+const { getOtherOperatorReports } = useOperator()
+
+const page = ref(1)
+const perPage = ref(10)
+
+const { data: reportsRes, pending } = useAsyncData(
+  'operator-other-reports', 
+  () => getOtherOperatorReports({ page: page.value, per_page: perPage.value }),
+  { watch: [page] }
+)
+
+const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
+</script>
+
+<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">Gestite da altri Operatori</h1>
+      <div>
+        <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Dashboard</NuxtLink>
+        <NuxtLink to="/operator" class="btn btn-outline-primary btn-sm">Coda Open</NuxtLink>
+      </div>
+    </div>
+
+    <div v-if="pending" class="text-center py-5">
+      <div class="spinner-border text-primary" role="status"></div>
+    </div>
+
+    <div v-else-if="!reportsRes?.reports || reportsRes.reports.length === 0" class="alert alert-info">
+      Non ci sono segnalazioni gestite da altri.
+    </div>
+
+    <div v-else>
+      <div class="table-responsive">
+        <table class="table table-hover border-bottom">
+          <thead class="table-light">
+            <tr>
+              <th scope="col" class="small">#ID</th>
+              <th scope="col" class="small">Categoria</th>
+              <th scope="col" class="small">Indirizzo</th>
+              <th scope="col" class="small">Stato</th>
+              <th scope="col" class="small">Creata il</th>
+              <th scope="col" class="text-center small">Dettagli</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="report in reportsRes.reports" :key="report.id" class="align-middle">
+              <td class="small font-weight-semibold">#{{ report.id }}</td>
+              <td class="small">{{ report.category_name }}</td>
+              <td class="small">{{ report.address }}</td>
+              <td class="small">
+                <StatusBadge :status="report.status" />
+              </td>
+              <td class="small text-muted">{{ formatDate(report.created_at) }}</td>
+              <td class="text-center">
+                <NuxtLink :to="`/operator/reports/${report.id}`" class="btn btn-sm btn-outline-secondary">
+                  Vedi
+                </NuxtLink>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <Pagination 
+        v-if="reportsRes.total > perPage"
+        :current-page="page"
+        :per-page="perPage"
+        :total-items="reportsRes.total"
+        @page-change="page = $event"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/operator/reports/[id].vue b/app/pages/operator/reports/[id].vue
new file mode 100644
index 0000000..6025fd8
--- /dev/null
+++ b/app/pages/operator/reports/[id].vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import type { ReportStatus } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+  auth: { role: 'OPERATOR' }
+})
+
+useHead({ title: 'Gestione Segnalazione - Operatore' })
+
+const route = useRoute()
+const runtimeConfig = useRuntimeConfig()
+const reportId = Number(route.params.id)
+
+if (!reportId) {
+  navigateTo('/operator')
+}
+
+const { getReportDetail, getMessages, addMessage } = useReports()
+const { getInterventionSummary, updateReportStatus, assignTeam } = useOperator()
+
+// 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 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)
+
+// Form Cambia Stato
+const newStatus = ref<ReportStatus>('IN_PROGRESS')
+const statusNote = ref('')
+const isUpdatingStatus = ref(false)
+
+// Form Assegna Squadra
+const isAssignModalOpen = ref(false)
+const teamName = ref('')
+const assignNote = ref('')
+const estimatedDate = ref('')
+const isAssigning = ref(false)
+
+// Messaggi
+const isSubmittingMessage = ref(false)
+
+const availableStatuses: { value: ReportStatus, label: string }[] = [
+  { value: 'OPEN', label: 'Aperta' },
+  { value: 'UNDER_REVIEW', label: 'In Revisione' },
+  { value: 'ASSIGNED', label: 'Assegnata' },
+  { value: 'IN_PROGRESS', label: 'In Lavorazione' },
+  { value: 'RESOLVED', label: 'Risolta' },
+  { value: 'REJECTED', label: 'Rifiutata' },
+  { value: 'CLOSED', label: 'Chiusa' }
+]
+
+// Inizializza lo stato nel form
+watch(() => report.value?.status, (val) => {
+  if (val) newStatus.value = val as ReportStatus
+}, { immediate: true })
+
+const handleStatusUpdate = async () => {
+  isUpdatingStatus.value = true
+  try {
+    const res = await updateReportStatus(reportId, {
+      status: newStatus.value,
+      note: statusNote.value || undefined
+    })
+    if (res.ok) {
+      statusNote.value = ''
+      await Promise.all([refreshReport(), refreshSummary()])
+    }
+  } catch (e) {
+    console.error('Failed to update status', e)
+  } finally {
+    isUpdatingStatus.value = false
+  }
+}
+
+const handleAssignTeam = async () => {
+  if (!teamName.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
+    })
+    if (res.ok) {
+      isAssignModalOpen.value = false
+      teamName.value = ''
+      assignNote.value = ''
+      estimatedDate.value = ''
+      await Promise.all([refreshReport(), refreshSummary()])
+    }
+  } catch (e) {
+    console.error('Failed to assign team', e)
+  } finally {
+    isAssigning.value = false
+  }
+}
+
+const handleSendMessage = async (msgText: string, files: File[]) => {
+  if (!msgText.trim() && files.length === 0) return
+  isSubmittingMessage.value = true
+  try {
+    await addMessage(reportId, { body: msgText })
+    await refreshMessages()
+  } catch (e) {
+    console.error('Failed to send message', e)
+  } finally {
+    isSubmittingMessage.value = false
+  }
+}
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return '-'
+  return new Date(dateString).toLocaleDateString('it-IT', {
+    day: '2-digit', month: '2-digit', year: 'numeric',
+    hour: '2-digit', minute: '2-digit'
+  })
+}
+</script>
+
+<template>
+  <div v-if="report">
+    <div class="bg-light border-bottom py-3">
+      <div class="container d-flex justify-content-between align-items-center">
+        <div>
+          <NuxtLink to="/operator/assigned" class="btn btn-sm btn-link text-decoration-none ps-0">
+            &larr; Torna alle assegnazioni
+          </NuxtLink>
+          <h1 class="h4 font-weight-bold mb-1">Intervento #{{ reportId }}</h1>
+          <div class="d-flex align-items-center gap-2">
+            <StatusBadge :status="report.status" />
+            <small class="text-muted">{{ report.category_name }}</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container my-5">
+      <div class="row">
+        <!-- Sinistra: Dettagli -->
+        <div class="col-12 col-lg-7 mb-4">
+          <div class="card card-bg mb-4">
+            <div class="card-body">
+              <h5 class="card-title font-weight-bold mb-3">Dettagli Cittadino</h5>
+              <p class="mb-1"><strong>Indirizzo:</strong> {{ report.address }}</p>
+              <p class="mb-3"><strong>Posizione:</strong> {{ report.latitude }}, {{ report.longitude }}</p>
+              
+              <h6 class="font-weight-bold">Descrizione</h6>
+              <p class="text-break bg-white p-3 border rounded">{{ report.description }}</p>
+
+              <div v-if="media.length > 0">
+                <h6 class="font-weight-bold mt-4 mb-3">Allegati del cittadino</h6>
+                <div class="row g-2">
+                  <div v-for="m in media" :key="m.id" class="col-4 col-md-3">
+                    <img v-if="m.media_kind === 'IMAGE'" :src="runtimeConfig.public.api + m.url" class="img-fluid rounded object-fit-cover shadow-sm" style="aspect-ratio: 1;" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card card-bg mb-4">
+            <div class="card-body">
+              <h5 class="card-title font-weight-bold mb-3">Comunicazioni con il Cittadino</h5>
+              <MessageList :messages="messages" />
+              <MessageComposer @send="handleSendMessage" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Destra: Strumenti Operatore -->
+        <div class="col-12 col-lg-5">
+          
+          <!-- Summary Box -->
+          <div class="card border-primary mb-4 shadow-sm" v-if="summary">
+            <div class="card-header bg-primary text-white">
+              <h5 class="mb-0">Riepilogo Intervento</h5>
+            </div>
+            <div class="card-body">
+              <p class="mb-2"><strong>Operatore Assegnato:</strong> {{ summary.operator_id ? `#${summary.operator_id}` : 'Nessuno' }}</p>
+              <p class="mb-2"><strong>Squadra Assegnata:</strong> <span class="badge bg-secondary">{{ summary.assigned_to_team || 'Nessuna' }}</span></p>
+              <p class="mb-2"><strong>Data Prevista:</strong> {{ summary.estimated_resolution_date ? formatDate(summary.estimated_resolution_date) : 'Non impostata' }}</p>
+              <p class="mb-0"><strong>Note Interne:</strong></p>
+              <p class="small text-muted bg-light p-2 rounded border mt-1 mb-0">{{ summary.internal_notes || 'Nessuna nota interna' }}</p>
+            </div>
+            <div class="card-footer bg-white border-top-0 pt-0">
+              <button class="btn btn-outline-primary w-100" @click="isAssignModalOpen = true">
+                Gestisci Squadra e Note
+              </button>
+            </div>
+          </div>
+
+          <!-- Modifica Stato -->
+          <div class="card mb-4">
+            <div class="card-body">
+              <h5 class="card-title font-weight-bold mb-3">Aggiorna Stato</h5>
+              <form @submit.prevent="handleStatusUpdate">
+                <div class="mb-3">
+                  <label class="form-label">Nuovo Stato</label>
+                  <select class="form-select" v-model="newStatus">
+                    <option v-for="st in availableStatuses" :key="st.value" :value="st.value">
+                      {{ st.label }}
+                    </option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">Nota (visibile nella cronologia)</label>
+                  <textarea class="form-control" v-model="statusNote" rows="2" placeholder="Motivazione o dettaglio..."></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary w-100" :disabled="isUpdatingStatus || newStatus === report.status">
+                  <span v-if="isUpdatingStatus" class="spinner-border spinner-border-sm me-2"></span>
+                  Aggiorna Stato
+                </button>
+              </form>
+            </div>
+          </div>
+
+          <!-- Cronologia -->
+          <div class="card card-bg">
+            <div class="card-body">
+              <h5 class="card-title font-weight-bold mb-3">Cronologia Eventi</h5>
+              <div v-if="statusHistory.length === 0" class="small text-muted">Nessun evento registrato.</div>
+              <ul class="list-unstyled mb-0 ms-2">
+                <li v-for="item in statusHistory" :key="item.id" class="mb-3 border-start border-primary border-3 ps-3">
+                  <small class="text-muted d-block">{{ formatDate(item.created_at) }}</small>
+                  <div class="d-flex align-items-center gap-2 mt-1">
+                    <StatusBadge :status="item.old_status" />
+                    <BIIcon name="it-arrow-right" size="xs" />
+                    <StatusBadge :status="item.new_status" />
+                  </div>
+                  <div v-if="item.note" class="small mt-1 bg-light p-1 rounded">{{ item.note }}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- Modale Assegnazione -->
+    <div v-if="isAssignModalOpen" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div v-if="isAssignModalOpen" 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">Gestione Intervento</h5>
+            <button type="button" class="btn-close" @click="isAssignModalOpen = false"></button>
+          </div>
+          <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>
+              </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()">
+                  <span v-if="isAssigning" class="spinner-border spinner-border-sm me-2"></span>
+                  Salva Assegnazione
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <div v-else class="text-center py-5">
+    <div class="spinner-border text-primary" role="status"></div>
+  </div>
+</template>
+
+<style scoped>
+.object-fit-cover {
+  object-fit: cover;
+}
+</style>
\ No newline at end of file