refactor: extract status badge into reusable component

app/components/StatusBadge.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ReportStatus } from '~/types/api'
+
+interface Props {
+  status: ReportStatus
+}
+
+const props = defineProps<Props>()
+
+const badgeConfig = computed(() => {
+  const config: Record<ReportStatus, { color: string, text: string, icon: string }> = {
+    OPEN: { color: 'info', text: 'Aperta', icon: 'it-info-circle' },
+    UNDER_REVIEW: { color: 'warning', text: 'In Revisione', icon: 'it-clock' },
+    ASSIGNED: { color: 'primary', text: 'Assegnata', icon: 'it-user' },
+    IN_PROGRESS: { color: 'primary', text: 'In Lavorazione', icon: 'it-settings' },
+    RESOLVED: { color: 'success', text: 'Risolta', icon: 'it-check-circle' },
+    REJECTED: { color: 'danger', text: 'Rifiutata', icon: 'it-close-circle' },
+    CLOSED: { color: 'secondary', text: 'Chiusa', icon: 'it-locked' }
+  }
+  
+  return config[props.status] || { color: 'secondary', text: props.status, icon: 'it-info-circle' }
+})
+</script>
+
+<template>
+  <span class="badge badge-pill rounded-pill d-inline-flex align-items-center gap-1" :class="`bg-${badgeConfig.color}`">
+    <BIIcon :name="badgeConfig.icon" size="xs" color="white" />
+    {{ badgeConfig.text }}
+  </span>
+</template>
+
+<style scoped>
+.badge {
+  font-weight: 600;
+  padding: 0.35em 0.65em;
+}
+</style>

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>