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

nuxt4/app/components/cata/ResumenMuestra.vue

@@ -1,69 +1,15 @@
 <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">
+  <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>
+
+    <!-- Nombre de muestra -->
     <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>
-
-    <!-- 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}%` }"
-        />
-      </div>
     </div>
   </div>
 </template>
@@ -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>

nuxt4/app/pages/cata/sesion.vue

@@ -80,26 +80,6 @@
             </div>
           </div>
 
-          <!-- Estadísticas rápidas -->
-          <div v-if="estadisticasSesion" class="stats-bar flex gap-4 text-xs sm:text-sm">
-            <div class="stat-item">
-              <span class="stat-label cata-text opacity-60">Muestras:</span>
-              <span class="stat-value cata-text font-semibold">{{ estadisticasSesion.totalMuestras }}</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label cata-text opacity-60">Completas:</span>
-              <span class="stat-value cata-text font-semibold">{{ estadisticasSesion.muestrasCompletas }}</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label cata-text opacity-60">Progreso:</span>
-              <span class="stat-value cata-text font-semibold">{{ estadisticasSesion.porcentajeCompletitud }}%</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label cata-text opacity-60">Puntaje Prom:</span>
-              <span class="stat-value cata-text font-semibold">{{ estadisticasSesion.puntajePromedio }}</span>
-            </div>
-          </div>
-
           <!-- Menú desplegable -->
           <div v-if="mostrarMenu" class="menu-desplegable mt-4 cata-outline-box p-3 rounded-md">
             <button
@@ -163,7 +143,6 @@
           <template #default="{ item }">
             <CataResumenMuestra
               :muestra="item.muestra"
-              :porcentaje-completitud="porcentajeCompletitud(item.muestra)"
             />
           </template>
 
@@ -210,10 +189,8 @@ const {
   error,
   tabActiva,
   accordionAbierto,
-  estadisticasSesion,
   exportarSesion,
   eliminarSesionActual,
-  porcentajeCompletitud,
 } = useCatacion()
 
 const { inicializar } = useIndexedDB()
@@ -351,18 +328,6 @@ const confirmarEliminar = () => {
 
 // Finalizar sesión
 const finalizarSesion = () => {
-  if (!estadisticasSesion.value) return
-
-  const { muestrasCompletas, totalMuestras, porcentajeCompletitud } = estadisticasSesion.value
-
-  if (porcentajeCompletitud < 100) {
-    const confirmar = window.confirm(
-      `La sesión está ${porcentajeCompletitud}% completa (${muestrasCompletas}/${totalMuestras} muestras). ¿Deseas finalizarla de todos modos?`
-    )
-
-    if (!confirmar) return
-  }
-
   // Exportar automáticamente al finalizar
   exportar()
 
@@ -417,12 +382,6 @@ onMounted(() => {
   border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
 }
 
-.stat-item {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
 /* Accordion hover usando color personalizado */
 :deep(.accordion-trigger:hover) {
   background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
@@ -477,10 +436,6 @@ onMounted(() => {
     padding-bottom: 0.75rem;
   }
 
-  .stats-bar {
-    flex-wrap: wrap;
-  }
-
   .floating-action {
     bottom: 1rem;
     right: 1rem;
@@ -494,10 +449,6 @@ onMounted(() => {
     padding-bottom: 0.5rem;
   }
 
-  .stats-bar {
-    display: none;
-  }
-
   .floating-action {
     bottom: 0.5rem;
     right: 0.5rem;