refactor: extract status badge into reusable component

app/pages/reports/[id].vue

@@ -41,34 +41,6 @@ const isFlagging = ref(false)
 const selectedMediaIndex = ref(0)
 const isGalleryOpen = ref(false)
 
-// Status badge color
-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'
-}
-
-// Status label italiano
-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
-}
-
 // Invia messaggio
 const handleSendMessage = async () => {
   if (!newMessage.value.trim()) return
@@ -145,9 +117,7 @@ const formatDate = (dateString: string): string => {
           <div class="col-12 col-md-8">
             <h1 class="h3 font-weight-bold mb-2">{{ report.category_name }}</h1>
             <div class="d-flex align-items-center gap-3">
-              <span class="badge" :class="`bg-${getStatusColor(report.status)}`">
-                {{ getStatusLabel(report.status) }}
-              </span>
+              <StatusBadge :status="report.status" />
               <small class="text-muted">
                 <BIIcon name="it-clock" size="xs" class="me-1" />
                 Creata il {{ formatDate(report.created_at) }}
@@ -230,8 +200,10 @@ const formatDate = (dateString: string): string => {
                     </div>
                     <div class="flex-grow-1">
                       <small class="text-muted">{{ formatDate(item.created_at) }}</small>
-                      <div class="small font-weight-semibold">
-                        {{ getStatusLabel(item.old_status) }} → {{ getStatusLabel(item.new_status) }}
+                      <div class="small font-weight-semibold d-flex align-items-center gap-2 mt-1">
+                        <StatusBadge :status="item.old_status" />
+                        <BIIcon name="it-arrow-right" size="xs" />
+                        <StatusBadge :status="item.new_status" />
                       </div>
                       <small v-if="item.note" class="text-muted d-block">{{ item.note }}</small>
                     </div>