feat: beauty ui of last closed reports in home page

app/pages/index.vue

@@ -12,6 +12,17 @@ const stats = {
 const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     getOpenDataReports({ page: 1, per_page: 3 })
 )
+
+const getStatusBadge = (status: string) => {
+  switch (status) {
+    case 'RESOLVED':
+      return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
+    case 'CLOSED':
+      return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+    default:
+      return { class: 'bg-info', text: status, icon: 'it-info-circle' }
+  }
+}
 </script>
 
 <template>
@@ -45,7 +56,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
       <div class="row text-center">
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
-            <BIIcon name="it-camera" size="xl" color="primary" />
+            <BIIcon color="primary" name="it-camera" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">1. Segnala</h3>
           <p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
@@ -53,14 +64,14 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
         </div>
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
-            <BIIcon name="it-tool" size="xl" color="primary" />
+            <BIIcon color="primary" name="it-tool" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">2. Intervento</h3>
           <p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
         </div>
         <div class="col-12 col-md-4 mb-4">
           <div class="mb-3">
-            <BIIcon name="it-star-outline" size="xl" color="primary" />
+            <BIIcon color="primary" name="it-star-outline" size="xl"/>
           </div>
           <h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
           <p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
@@ -102,25 +113,41 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
 
       <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
         <div class="col-12 col-md-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
-          <div class="card-wrapper card-space">
+          <div class="card-wrapper card-space h-100">
-            <div class="card card-bg card-big">
+            <div class="card card-bg h-100 shadow-sm">
-              <div class="card-body">
+              <div class="card-body d-flex flex-column">
-                <div class="category-top">
-                  <BIIcon name="it-check-circle" size="sm" color="success" />
-                  <span class="category text-success font-weight-semibold">Risolto</span>
-                </div>
-                <h3 class="card-title h5 mt-2">{{ report.category_name }}</h3>
 
-                <p class="card-text text-muted">
+                <div class="d-flex justify-content-between align-items-start mb-3">
-                  <span class="me-1"><BIIcon name="it-map-marker-circle" size="xs" /></span>
+                  <div class="category-top m-0">
-                  {{ report.area_name || 'Area comunale' }}
+                    <span :class="getStatusBadge(report.status).class"
-                </p>
+                          class="badge rounded-pill text-white px-3 py-1">
-
+                      <BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
-                <div class="it-card-footer mt-4">
+                      {{ getStatusBadge(report.status).text }}
-                  <span class="card-signature">
-                    Aggiornato il {{ new Date(report.updated_at).toLocaleDateString('it-IT') }}
                     </span>
                   </div>
+                  <span class="text-muted small">ID: #{{ report.id }}</span>
+                </div>
+
+                <h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
+
+                <p class="card-text text-muted mb-4">
+                  <BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
+                  {{ report.area_name || 'Area comunale non specificata' }}
+                </p>
+
+                <div class="mt-auto pt-3 border-top">
+                  <div class="row text-muted small">
+                    <div class="col-6">
+                      <div class="fw-bold text-uppercase">Segnalato</div>
+                      <div>{{ new Date(report.created_at).toLocaleDateString('it-IT') }}</div>
+                    </div>
+                    <div class="col-6 text-end">
+                      <div class="fw-bold text-uppercase">Risolto</div>
+                      <div>{{ new Date(report.updated_at).toLocaleDateString('it-IT') }}</div>
+                    </div>
+                  </div>
+                </div>
+
               </div>
             </div>
           </div>
@@ -150,3 +177,19 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     </div>
   </div>
 </template>
+
+<style scoped>
+.card-wrapper {
+  height: 100%;
+}
+
+.card-bg {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-bg:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+}
+</style>