From 02cdec58daf5c6d12bbeacde0f3192f0786b968e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 02:18:12 -0600
Subject: [PATCH] Fix: Simplificar componente ResumenMuestra para funcionar
 correctamente como header del accordion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rediseñar layout para ser más compacto y horizontal
- Usar badges de indicadores para mostrar valores afectivos de intensidades
- Mostrar progreso con barra visual en desktop
- Eliminar información redundante y simplificar estructura
- Mejorar responsive design para mobile
---
 nuxt4/app/components/cata/ResumenMuestra.vue | 347 +++++--------------
 1 file changed, 87 insertions(+), 260 deletions(-)

diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index 92c825d..14525f8 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -1,309 +1,136 @@
 <template>
-  <div class="resumen-muestra cata-accordion-header">
-    <!-- Header con nombre y puntaje -->
-    <div class="resumen-header">
-      <div class="resumen-title">
-        <h3 class="muestra-nombre cata-text">{{ muestra.nombre }}</h3>
-        <span class="muestra-id cata-text opacity-60">#{{ muestra.muestraId }}</span>
+  <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="resumen-score">
-        <span class="score-label cata-text text-xs opacity-60">Puntaje</span>
-        <span class="score-value cata-text font-bold text-lg">{{ muestra.puntajeFinal }}</span>
+      <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>
 
-    <!-- Barra de progreso de completitud -->
-    <div class="resumen-progress mt-2">
-      <div class="progress-bar">
-        <div
-          class="progress-fill"
-          :style="{ width: `${porcentajeCompletitud}%` }"
-        />
-      </div>
-      <span class="progress-text cata-text text-xs opacity-75">
-        {{ porcentajeCompletitud }}% completado
-      </span>
-    </div>
-
-    <!-- Indicadores rápidos -->
-    <div class="resumen-indicadores mt-3">
+    <!-- Indicadores de completitud -->
+    <div class="muestra-indicadores flex items-center gap-2 text-xs">
       <!-- Fragancia/Aroma -->
-      <div v-if="muestra.fraganciaAromaNotas.categoria" class="indicador">
-        <UIcon name="i-lucide-flower-2" class="indicador-icon" />
-        <span class="indicador-text cata-text">
-          {{ muestra.fraganciaAromaNotas.notaEspecifica || muestra.fraganciaAromaNotas.categoria }}
-        </span>
+      <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 v-if="muestra.saborNotas.categoria" class="indicador">
-        <UIcon name="i-lucide-coffee" class="indicador-icon" />
-        <span class="indicador-text cata-text">
-          {{ muestra.saborNotas.notaEspecifica || muestra.saborNotas.categoria }}
-        </span>
+      <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>
 
-      <!-- Defectos -->
-      <div v-if="muestra.defecto || muestra.tazasDefectuosas.length > 0" class="indicador defecto">
-        <UIcon name="i-lucide-alert-triangle" class="indicador-icon" />
-        <span class="indicador-text cata-text">
-          {{ muestra.defecto || `${muestra.tazasDefectuosas.length} defectuosa(s)` }}
-        </span>
-      </div>
-
-      <!-- Gustos predominantes -->
-      <div v-if="muestra.gustosPredominantes.length > 0" class="indicador">
-        <UIcon name="i-lucide-sparkles" class="indicador-icon" />
-        <span class="indicador-text cata-text">
-          {{ muestra.gustosPredominantes.join(', ') }}
-        </span>
+      <!-- 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>
 
-    <!-- Valores clave de intensidad (versión compacta) -->
-    <div v-if="mostrarIntensidades" class="resumen-intensidades mt-3">
-      <div class="intensidad-compact">
-        <span class="intensidad-label cata-text">F:</span>
-        <span class="intensidad-value cata-text">
-          {{ formatearIntensidad(muestra.intensidades.fragancia) }}
-        </span>
-      </div>
-      <div class="intensidad-compact">
-        <span class="intensidad-label cata-text">A:</span>
-        <span class="intensidad-value cata-text">
-          {{ formatearIntensidad(muestra.intensidades.aroma) }}
-        </span>
-      </div>
-      <div class="intensidad-compact">
-        <span class="intensidad-label cata-text">S:</span>
-        <span class="intensidad-value cata-text">
-          {{ formatearIntensidad(muestra.intensidades.sabor) }}
-        </span>
-      </div>
-      <div class="intensidad-compact">
-        <span class="intensidad-label cata-text">Ac:</span>
-        <span class="intensidad-value cata-text">
-          {{ formatearIntensidad(muestra.intensidades.acidez) }}
-        </span>
+    <!-- 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>
 
 <script setup lang="ts">
-import type { Muestra, IntensidadValor } from '~/types/catacion'
+import type { Muestra } from '~/types/catacion'
 
 interface ResumenMuestraProps {
   /** Muestra a mostrar */
   muestra: Muestra
   /** Porcentaje de completitud */
   porcentajeCompletitud: number
-  /** Mostrar intensidades en el resumen */
-  mostrarIntensidades?: boolean
 }
 
-const props = withDefaults(defineProps<ResumenMuestraProps>(), {
-  mostrarIntensidades: true,
-})
+const props = defineProps<ResumenMuestraProps>()
 
-/**
- * Formatea una intensidad para mostrar de forma compacta
- * Formato: D/A (Descriptiva/Afectiva)
- */
-const formatearIntensidad = (intensidad: IntensidadValor): string => {
-  const desc = intensidad.descriptiva ?? '-'
-  const afec = intensidad.afectiva ?? '-'
-  return `${desc}/${afec}`
-}
+// 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
+)
 </script>
 
 <style scoped>
 .resumen-muestra {
-  width: 100%;
-  cursor: pointer;
-  user-select: none;
+  min-height: 60px;
 }
 
-.resumen-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
+.muestra-numero {
+  font-size: 1.25rem;
+  flex-shrink: 0;
 }
 
-.resumen-title {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-  flex: 1 1 0%;
-  min-width: 0;
-}
-
-.muestra-nombre {
-  font-size: 1rem;
+.indicador-badge {
   font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.muestra-id {
-  font-size: 0.75rem;
   flex-shrink: 0;
 }
 
-.resumen-score {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  flex-shrink: 0;
-}
-
-.score-label {
-  line-height: 1.25;
-}
-
-.score-value {
-  line-height: 1.25;
-}
-
-/* Barra de progreso */
-.resumen-progress {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.progress-bar {
-  flex: 1 1 0%;
-  height: 0.375rem;
-  border-radius: 9999px;
-  background-color: transparent;
-  border: var(--cata-border-width) solid;
-  border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  border-radius: 9999px;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  background-color: var(--cata-primary);
-  opacity: 0.6;
-}
-
-.dark .progress-fill {
-  opacity: 0.8;
-  box-shadow: 0 0 4px var(--cata-primary);
-}
-
-.progress-text {
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Indicadores */
-.resumen-indicadores {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.indicador {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
-}
-
-.indicador.defecto {
-  background-color: color-mix(in srgb, #ef4444 10%, transparent);
-}
-
-.indicador-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-}
-
-.indicador-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 120px;
-}
-
-/* Intensidades compactas */
-.resumen-intensidades {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  font-size: 0.75rem;
-}
-
-.intensidad-compact {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
-.intensidad-label {
-  font-weight: 600;
-  opacity: 0.75;
-}
-
-.intensidad-value {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Responsive */
 @media (max-width: 640px) {
-  .muestra-nombre {
-    font-size: 0.875rem;
+  .muestra-indicadores {
+    flex-wrap: wrap;
   }
 
-  .score-value {
-    font-size: 1rem;
-  }
-
-  .resumen-indicadores {
-    gap: 0.375rem;
-  }
-
-  .indicador {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
-  }
-
-  .indicador-icon {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .indicador-text {
-    max-width: 100px;
-  }
-
-  .resumen-intensidades {
-    gap: 0.5rem;
+  .indicador-badge {
     font-size: 0.625rem;
-  }
-}
-
-@media (min-width: 641px) {
-  .muestra-nombre {
-    font-size: 1.125rem;
+    padding: 0.25rem 0.5rem;
   }
 }
 </style>