feat: update authentication flow and user navigation

app/pages/operator/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Report } from '~/types/api'
-
 definePageMeta({
   middleware: 'auth',
   auth: { role: 'OPERATOR' }
@@ -23,15 +21,13 @@ const handleTakeReport = async (id: number) => {
   try {
     const res = await takeReport(id)
     if (res.ok) {
-      // Optimistic update or refresh
-      await refresh()
+          await refresh()
     }
   } catch (err) {
     console.error('Failed to take report', err)
   }
 }
 
-const formatDate = (dateString: string) => new Date(dateString).toLocaleDateString('it-IT')
 </script>
 
 <template>
@@ -53,36 +49,12 @@ const formatDate = (dateString: string) => new Date(dateString).toLocaleDateStri
     </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>
+      <ReportTable
+        :reports="reportsRes.reports"
+        action-variant="manage"
+        detail-base-path="/operator/reports"
+        @take="handleTakeReport"
+      />
 
       <Pagination 
         v-if="reportsRes.total > perPage"