feat: added pagination to /admin/reports

Closes #13

app/pages/admin/reports.vue

@@ -60,21 +60,40 @@ const activeReports = computed(() => reports.value.filter((report) => ['UNDER_RE
 const closedReports = computed(() => reports.value.filter((report) => ['RESOLVED', 'CLOSED'].includes(report.status)).length)
 
 const reportsByStatus = computed(() =>
-  Object.entries(statusMeta)
+    Object.entries(statusMeta)
-    .map(([status, meta]) => ({
+        .map(([status, meta]) => ({
-      status: status as ReportStatus,
+          status: status as ReportStatus,
-      label: meta.label,
+          label: meta.label,
-      tone: meta.tone,
+          tone: meta.tone,
-      total: reports.value.filter((report) => report.status === status).length
+          total: reports.value.filter((report) => report.status === status).length
-    }))
+        }))
-    .filter((item) => item.total > 0)
+        .filter((item) => item.total > 0)
 )
 
-const recentReports = computed(() =>
+// --- INIZIO LOGICA PAGINAZIONE ---
-  [...filteredReports.value]
+const currentPage = ref(1)
-    .sort((a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime())
+const itemsPerPage = ref(12)
-    .slice(0, 12)
+
-)
+// Reset alla pagina 1 quando cambiano i filtri
+watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
+  currentPage.value = 1
+})
+
+const totalPages = computed(() => Math.ceil(filteredReports.value.length / itemsPerPage.value))
+
+const paginatedReports = computed(() => {
+  const sorted = [...filteredReports.value].sort(
+      (a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime()
+  )
+  const start = (currentPage.value - 1) * itemsPerPage.value
+  const end = start + itemsPerPage.value
+  return sorted.slice(start, end)
+})
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+}
+// --- FINE LOGICA PAGINAZIONE ---
 
 const formatDate = (value?: string) => {
   if (!value) return '-'
@@ -160,71 +179,83 @@ const truncate = (value?: string, max = 120) => {
         <div class="card-body">
           <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
             <h2 class="h5 mb-0">Distribuzione stati</h2>
-            <span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
+            <span class="text-muted small">{{ filteredReports.length }} elementi trovati</span>
           </div>
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
               <thead>
-                <tr>
+              <tr>
-                  <th>Stato</th>
+                <th>Stato</th>
-                  <th class="text-end">Totale</th>
+                <th class="text-end">Totale</th>
-                </tr>
+              </tr>
               </thead>
               <tbody>
-                <tr v-for="item in reportsByStatus" :key="item.status">
+              <tr v-for="item in reportsByStatus" :key="item.status">
-                  <td>
+                <td>
                     <span class="badge" :class="`bg-${item.tone}`">
                       {{ item.label }}
                     </span>
-                  </td>
+                </td>
-                  <td class="text-end">{{ item.total }}</td>
+                <td class="text-end">{{ item.total }}</td>
-                </tr>
+              </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
 
-      <div v-if="recentReports.length === 0" class="alert alert-info">
+      <div v-if="filteredReports.length === 0" class="alert alert-info">
         Nessuna segnalazione trovata con filtri correnti.
       </div>
 
-      <div v-else class="card card-bg border-0 shadow-sm">
+      <div v-else class="card card-bg border-0 shadow-sm mb-5">
         <div class="card-body p-0">
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
               <thead>
-                <tr>
+              <tr>
-                  <th>ID</th>
+                <th>ID</th>
-                  <th>Categoria</th>
+                <th>Categoria</th>
-                  <th>Indirizzo</th>
+                <th>Indirizzo</th>
-                  <th>Area</th>
+                <th>Area</th>
-                  <th>Stato</th>
+                <th>Stato</th>
-                  <th>Operatore</th>
+                <th>Operatore</th>
-                  <th>Aggiornata</th>
+                <th>Aggiornata</th>
-                </tr>
+              </tr>
               </thead>
               <tbody>
-                <tr v-for="report in recentReports" :key="report.id">
+              <tr v-for="report in paginatedReports" :key="report.id">
-                  <td class="report-table-id">#{{ report.id }}</td>
+                <td class="report-table-id">#{{ report.id }}</td>
-                  <td>
+                <td>
-                    <div class="fw-semibold">{{ report.category_name || '-' }}</div>
+                  <div class="fw-semibold">{{ report.category_name || '-' }}</div>
-                    <small class="text-muted">{{ truncate(report.description, 72) }}</small>
+                  <small class="text-muted">{{ truncate(report.description, 72) }}</small>
-                  </td>
+                </td>
-                  <td>{{ report.address || '-' }}</td>
+                <td>{{ report.address || '-' }}</td>
-                  <td>{{ report.area_name || 'Non assegnata' }}</td>
+                <td>{{ report.area_name || 'Non assegnata' }}</td>
-                  <td>
+                <td>
                     <span class="badge" :class="`bg-${statusMeta[report.status].tone}`">
                       {{ statusMeta[report.status].label }}
                     </span>
-                  </td>
+                </td>
-                  <td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
+                <td>{{ report.assigned_operator_id ? `#${report.assigned_operator_id}` : '-' }}</td>
-                  <td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
+                <td class="text-muted text-nowrap">{{ formatDate(report.updated_at || report.created_at) }}</td>
-                </tr>
+              </tr>
               </tbody>
             </table>
           </div>
         </div>
+
+        <!-- Paginazione Component -->
+        <div class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1">
+          <span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
+
+          <Pagination
+              :current-page="currentPage"
+              :per-page="itemsPerPage"
+              :total-items="filteredReports.length"
+              @page-change="handlePageChange"
+          />
+        </div>
       </div>
     </template>
   </div>