Refactor: Eliminar métricas y estadísticas del UI de catación para simplificar interfaz

nuxt4/app/components/cata/ResumenMuestra.vue

@@ -1,68 +1,14 @@
 <template>
-  <div class="resumen-muestra flex items-center justify-between gap-4 w-full">
-    <!-- Información básica -->
-    <div class="flex items-center gap-3 flex-1 min-w-0">
-      <div class="muestra-numero cata-text font-bold text-lg">
-        #{{ muestra.muestraId }}
-      </div>
-      <div class="flex-1 min-w-0">
-        <div class="muestra-nombre cata-text font-semibold truncate">
-          {{ muestra.nombre }}
-        </div>
-        <div class="muestra-stats text-xs cata-text opacity-60 flex items-center gap-2">
-          <span>Puntaje {{ muestra.puntajeFinal }}</span>
-          <span class="opacity-40">•</span>
-          <span>{{ porcentajeCompletitud }}% completado</span>
-        </div>
-      </div>
+  <div class="resumen-muestra flex items-center gap-3 w-full">
+    <!-- Número de muestra -->
+    <div class="muestra-numero cata-text font-bold text-lg flex-shrink-0">
+      #{{ muestra.muestraId }}
     </div>
 
-    <!-- Indicadores de completitud -->
-    <div class="muestra-indicadores flex items-center gap-2 text-xs">
-      <!-- Fragancia/Aroma -->
-      <div
-        :class="[
-          'indicador-badge px-2 py-1 rounded',
-          tieneFraganciaAroma ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
-        ]"
-        title="Fragancia/Aroma"
-      >
-        <span class="hidden sm:inline">F:</span>
-        {{ intensidadesFormatted.fragancia }}/{{ intensidadesFormatted.aroma }}
-      </div>
-
-      <!-- Sabor -->
-      <div
-        :class="[
-          'indicador-badge px-2 py-1 rounded',
-          tieneSabor ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
-        ]"
-        title="Sabor"
-      >
-        <span class="hidden sm:inline">S:</span>
-        {{ intensidadesFormatted.sabor }}/{{ intensidadesFormatted.saborResidual }}
-      </div>
-
-      <!-- Acidez -->
-      <div
-        :class="[
-          'indicador-badge px-2 py-1 rounded',
-          tieneAcidez ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
-        ]"
-        title="Acidez"
-      >
-        <span class="hidden sm:inline">Ac:</span>
-        {{ intensidadesFormatted.acidez }}/{{ intensidadesFormatted.dulzor }}
-      </div>
-    </div>
-
-    <!-- Barra de progreso -->
-    <div class="progreso-container hidden md:block w-24">
-      <div class="progreso-bg h-2 rounded-full bg-muted/20 overflow-hidden">
-        <div
-          class="progreso-fill h-full bg-primary transition-all"
-          :style="{ width: `${porcentajeCompletitud}%` }"
-        />
+    <!-- Nombre de muestra -->
+    <div class="flex-1 min-w-0">
+      <div class="muestra-nombre cata-text font-semibold truncate">
+        {{ muestra.nombre }}
       </div>
     </div>
   </div>
@@ -74,63 +20,24 @@ import type { Muestra } from '~/types/catacion'
 interface ResumenMuestraProps {
   /** Muestra a mostrar */
   muestra: Muestra
-  /** Porcentaje de completitud */
-  porcentajeCompletitud: number
 }
 
-const props = defineProps<ResumenMuestraProps>()
-
-// Formatear intensidades para mostrar
-const intensidadesFormatted = computed(() => ({
-  fragancia: props.muestra.intensidades.fragancia.afectiva ?? '-',
-  aroma: props.muestra.intensidades.aroma.afectiva ?? '-',
-  sabor: props.muestra.intensidades.sabor.afectiva ?? '-',
-  saborResidual: props.muestra.intensidades.saborResidual.afectiva ?? '-',
-  acidez: props.muestra.intensidades.acidez.afectiva ?? '-',
-  dulzor: props.muestra.intensidades.dulzor.afectiva ?? '-',
-}))
-
-// Verificar si las secciones están completas
-const tieneFraganciaAroma = computed(() =>
-  props.muestra.intensidades.fragancia.afectiva !== null &&
-  props.muestra.intensidades.aroma.afectiva !== null
-)
-
-const tieneSabor = computed(() =>
-  props.muestra.intensidades.sabor.afectiva !== null &&
-  props.muestra.intensidades.saborResidual.afectiva !== null
-)
-
-const tieneAcidez = computed(() =>
-  props.muestra.intensidades.acidez.afectiva !== null &&
-  props.muestra.intensidades.dulzor.afectiva !== null
-)
+defineProps<ResumenMuestraProps>()
 </script>
 
 <style scoped>
 .resumen-muestra {
   min-height: 60px;
+  padding: 0.5rem 0;
 }
 
 .muestra-numero {
   font-size: 1.25rem;
-  flex-shrink: 0;
-}
-
-.indicador-badge {
-  font-weight: 600;
-  white-space: nowrap;
-  flex-shrink: 0;
 }
 
 @media (max-width: 640px) {
-  .muestra-indicadores {
-    flex-wrap: wrap;
-  }
-
-  .indicador-badge {
-    font-size: 0.625rem;
-    padding: 0.25rem 0.5rem;
+  .muestra-numero {
+    font-size: 1rem;
   }
 }
 </style>