feat: added pagination to /admin/reports

Closes #13

app/pages/admin/reports.vue

@@ -70,11 +70,30 @@ const reportsByStatus = computed(() =>
         .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,7 +179,7 @@ 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">
@@ -185,11 +204,11 @@ const truncate = (value?: string, max = 120) => {
         </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">
@@ -205,7 +224,7 @@ const truncate = (value?: string, max = 120) => {
               </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>
                   <div class="fw-semibold">{{ report.category_name || '-' }}</div>
@@ -225,6 +244,18 @@ const truncate = (value?: string, max = 120) => {
             </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>