refactor: extract status badge into reusable component

app/components/dashboard/CitizenDashboard.vue

@@ -66,22 +66,6 @@ const handlePageChange = (newPage: number) => {
 }
 
 // Helpers grafici
-const getStatusColor = (status: string): string => {
-  const colors: Record<string, string> = {
-    OPEN: 'primary', UNDER_REVIEW: 'info', ASSIGNED: 'warning',
-    IN_PROGRESS: 'warning', RESOLVED: 'success', REJECTED: 'danger', CLOSED: 'secondary',
-  }
-  return colors[status] || 'secondary'
-}
-
-const getStatusLabel = (status: string): string => {
-  const labels: Record<string, string> = {
-    OPEN: 'Aperta', UNDER_REVIEW: 'In revisione', ASSIGNED: 'Assegnata',
-    IN_PROGRESS: 'In corso', RESOLVED: 'Risolta', REJECTED: 'Rifiutata', CLOSED: 'Chiusa',
-  }
-  return labels[status] || status
-}
-
 const formatDate = (dateString?: string): string => {
   if (!dateString) return ''
   return new Date(dateString).toLocaleDateString('it-IT', {
@@ -220,9 +204,7 @@ const formatDate = (dateString?: string): string => {
                   </span>
               </td>
               <td class="small">
-                  <span class="badge" :class="`bg-${getStatusColor(report.status)}`">
-                    {{ getStatusLabel(report.status) }}
-                  </span>
+                  <StatusBadge :status="report.status" />
               </td>
               <td class="small text-muted">{{ formatDate(report.created_at) }}</td>
               <td class="text-center">
@@ -235,10 +217,13 @@ const formatDate = (dateString?: string): string => {
           </table>
         </div>
 
-        <!-- Paginazione Client-Side (Opzionale: implementare se hai molti dati) -->
-        <div v-if="totalFiltered > perPage" class="d-flex justify-content-center mt-4">
-          <!-- Qui potresti inserire un componente Pagination se ne hai uno -->
-        </div>
+        <Pagination 
+          v-if="totalFiltered > perPage"
+          :current-page="page"
+          :per-page="perPage"
+          :total-items="totalFiltered"
+          @page-change="handlePageChange"
+        />
       </div>
     </div>
   </div>

app/components/dashboard/OperatorDashboard.vue

@@ -50,7 +50,7 @@ const handleTakeReport = async (id: number) => {
         >
           <div>
             <h6 class="mb-1">{{ report.address }}</h6>
-            <span class="badge bg-warning text-dark">{{ report.status }}</span>
+            <StatusBadge :status="report.status" />
           </div>
           <BIIcon name="it-chevron-right" size="sm" color="primary" />
         </NuxtLink>