From 6851a9674a371ce7bdcd486afecab0338917cd98 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 15:51:13 -0600
Subject: [PATCH] Feat: Agregar chips informativos completos a ResumenMuestra
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agregar puntaje final con badge color-coded según rangos
- Agregar chips para categorías organolépticas (fragancia/aroma, sabor, gustos, sensación)
- Agregar chips para todos los valores de intensidad (afectiva ❤️ y descriptiva 📊)
- Agregar chips condicionales para tazas no uniformes (warning)
- Agregar chips condicionales para tazas defectuosas con tipo de defecto (error)
- Layout de dos líneas: header con #/nombre/puntaje y chips informativos
- Diseño compacto y responsive
---
 nuxt4/app/components/cata/ResumenMuestra.vue | 261 ++++++++++++++++++-
 1 file changed, 252 insertions(+), 9 deletions(-)

diff --git a/nuxt4/app/components/cata/ResumenMuestra.vue b/nuxt4/app/components/cata/ResumenMuestra.vue
index 932ed68..7a7a083 100644
--- a/nuxt4/app/components/cata/ResumenMuestra.vue
+++ b/nuxt4/app/components/cata/ResumenMuestra.vue
@@ -1,14 +1,111 @@
 <template>
-  <div class="resumen-muestra flex items-center gap-2 w-full">
-    <!-- Número de muestra -->
-    <div class="muestra-numero cata-text font-bold flex-shrink-0">
-      #{{ muestra.muestraId }}
+  <div class="resumen-muestra w-full">
+    <!-- Primera línea: Número, nombre y puntaje -->
+    <div class="flex items-center gap-2 mb-2">
+      <!-- Número de muestra -->
+      <div class="muestra-numero cata-text font-bold 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 text-sm">
+          {{ muestra.nombre }}
+        </div>
+      </div>
+
+      <!-- Puntaje final -->
+      <div class="puntaje-final flex-shrink-0 px-2 py-1 rounded-md" :class="puntajeClass">
+        <span class="text-xs font-bold">{{ muestra.puntajeFinal }}</span>
+      </div>
     </div>
 
-    <!-- Nombre de muestra -->
-    <div class="flex-1 min-w-0">
-      <div class="muestra-nombre cata-text font-semibold truncate text-sm">
-        {{ muestra.nombre }}
+    <!-- Segunda línea: Chips informativos -->
+    <div class="chips-container flex flex-wrap gap-1">
+      <!-- Fragancia/Aroma -->
+      <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
+        <span class="chip-label">Frag/Aro:</span>
+        <span class="chip-value">{{ categoriasFragancia }}</span>
+      </div>
+
+      <!-- Sabor -->
+      <div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
+        <span class="chip-label">Sabor:</span>
+        <span class="chip-value">{{ categoriasSabor }}</span>
+      </div>
+
+      <!-- Gustos predominantes -->
+      <div v-if="muestra.gustosPredominantes.length > 0" class="chip">
+        <span class="chip-label">Gustos:</span>
+        <span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
+      </div>
+
+      <!-- Sensación en boca -->
+      <div v-if="muestra.sensacionEnBoca.length > 0" class="chip">
+        <span class="chip-label">Sensación:</span>
+        <span class="chip-value">{{ muestra.sensacionEnBoca.join(', ') }}</span>
+      </div>
+
+      <!-- Valores Descriptivo/Afectivo -->
+      <div v-if="muestra.intensidades.fragancia.afectiva !== null || muestra.intensidades.fragancia.descriptiva !== null" class="chip">
+        <span class="chip-label">Fragancia:</span>
+        <span v-if="muestra.intensidades.fragancia.afectiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.aroma.afectiva !== null || muestra.intensidades.aroma.descriptiva !== null" class="chip">
+        <span class="chip-label">Aroma:</span>
+        <span v-if="muestra.intensidades.aroma.afectiva !== null" class="chip-value">{{ muestra.intensidades.aroma.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.sabor.afectiva !== null || muestra.intensidades.sabor.descriptiva !== null" class="chip">
+        <span class="chip-label">Sabor:</span>
+        <span v-if="muestra.intensidades.sabor.afectiva !== null" class="chip-value">{{ muestra.intensidades.sabor.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.saborResidual.afectiva !== null || muestra.intensidades.saborResidual.descriptiva !== null" class="chip">
+        <span class="chip-label">S.Residual:</span>
+        <span v-if="muestra.intensidades.saborResidual.afectiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.acidez.afectiva !== null || muestra.intensidades.acidez.descriptiva !== null" class="chip">
+        <span class="chip-label">Acidez:</span>
+        <span v-if="muestra.intensidades.acidez.afectiva !== null" class="chip-value">{{ muestra.intensidades.acidez.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.cuerpo.afectiva !== null || muestra.intensidades.cuerpo.descriptiva !== null" class="chip">
+        <span class="chip-label">Cuerpo:</span>
+        <span v-if="muestra.intensidades.cuerpo.afectiva !== null" class="chip-value">{{ muestra.intensidades.cuerpo.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.cuerpo.descriptiva !== null" class="chip-value">{{ muestra.intensidades.cuerpo.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.dulzor.afectiva !== null || muestra.intensidades.dulzor.descriptiva !== null" class="chip">
+        <span class="chip-label">Dulzor:</span>
+        <span v-if="muestra.intensidades.dulzor.afectiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}📊</span>
+      </div>
+
+      <div v-if="muestra.intensidades.balance.afectiva !== null || muestra.intensidades.balance.descriptiva !== null" class="chip">
+        <span class="chip-label">Balance:</span>
+        <span v-if="muestra.intensidades.balance.afectiva !== null" class="chip-value">{{ muestra.intensidades.balance.afectiva }}❤️</span>
+        <span v-if="muestra.intensidades.balance.descriptiva !== null" class="chip-value">{{ muestra.intensidades.balance.descriptiva }}📊</span>
+      </div>
+
+      <!-- Tazas no uniformes -->
+      <div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
+        <span class="chip-label">No Uniformes:</span>
+        <span class="chip-value">{{ muestra.tazasNoUniformes.join(', ') }}</span>
+      </div>
+
+      <!-- Tazas defectuosas -->
+      <div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
+        <span class="chip-label">Defectuosas:</span>
+        <span class="chip-value">{{ muestra.tazasDefectuosas.join(', ') }}</span>
+        <span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
       </div>
     </div>
   </div>
@@ -22,7 +119,27 @@ interface ResumenMuestraProps {
   muestra: Muestra
 }
 
-defineProps<ResumenMuestraProps>()
+const props = defineProps<ResumenMuestraProps>()
+
+// Formatear categorías de fragancia/aroma
+const categoriasFragancia = computed(() => {
+  return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ')
+})
+
+// Formatear categorías de sabor
+const categoriasSabor = computed(() => {
+  return props.muestra.saborNotas.categorias.slice(0, 2).join(', ')
+})
+
+// Clase CSS para el puntaje final basado en el valor
+const puntajeClass = computed(() => {
+  const puntaje = props.muestra.puntajeFinal
+  if (puntaje >= 90) return 'puntaje-excelente'
+  if (puntaje >= 85) return 'puntaje-muy-bueno'
+  if (puntaje >= 80) return 'puntaje-bueno'
+  if (puntaje >= 70) return 'puntaje-regular'
+  return 'puntaje-bajo'
+})
 </script>
 
 <style scoped>
@@ -34,9 +151,135 @@ defineProps<ResumenMuestraProps>()
   font-size: 1rem;
 }
 
+/* Puntaje final */
+.puntaje-final {
+  border: 1px solid;
+  min-width: 2.5rem;
+  text-align: center;
+}
+
+.puntaje-excelente {
+  background-color: color-mix(in srgb, #10b981 20%, transparent);
+  border-color: #10b981;
+  color: #10b981;
+}
+
+.puntaje-muy-bueno {
+  background-color: color-mix(in srgb, #3b82f6 20%, transparent);
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.puntaje-bueno {
+  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
+  border-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.puntaje-regular {
+  background-color: color-mix(in srgb, #ef4444 20%, transparent);
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.puntaje-bajo {
+  background-color: color-mix(in srgb, #6b7280 20%, transparent);
+  border-color: #6b7280;
+  color: #6b7280;
+}
+
+/* Chips */
+.chips-container {
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
+}
+
+.chip-label {
+  font-weight: 600;
+  opacity: 0.75;
+  color: var(--cata-text);
+}
+
+.chip-value {
+  color: var(--cata-text);
+  font-weight: 500;
+}
+
+.chip-warning {
+  background-color: color-mix(in srgb, #f59e0b 15%, transparent);
+  border-color: #f59e0b;
+}
+
+.chip-warning .chip-label,
+.chip-warning .chip-value {
+  color: #f59e0b;
+}
+
+.chip-error {
+  background-color: color-mix(in srgb, #ef4444 15%, transparent);
+  border-color: #ef4444;
+}
+
+.chip-error .chip-label,
+.chip-error .chip-value {
+  color: #ef4444;
+}
+
+/* Modo oscuro */
+.dark .puntaje-excelente {
+  background-color: color-mix(in srgb, #10b981 30%, transparent);
+}
+
+.dark .puntaje-muy-bueno {
+  background-color: color-mix(in srgb, #3b82f6 30%, transparent);
+}
+
+.dark .puntaje-bueno {
+  background-color: color-mix(in srgb, #f59e0b 30%, transparent);
+}
+
+.dark .puntaje-regular {
+  background-color: color-mix(in srgb, #ef4444 30%, transparent);
+}
+
+.dark .puntaje-bajo {
+  background-color: color-mix(in srgb, #6b7280 30%, transparent);
+}
+
+.dark .chip {
+  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
+}
+
+.dark .chip-warning {
+  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
+}
+
+.dark .chip-error {
+  background-color: color-mix(in srgb, #ef4444 20%, transparent);
+}
+
+/* Responsive */
 @media (max-width: 640px) {
   .muestra-numero {
     font-size: 0.875rem;
   }
+
+  .chips-container {
+    font-size: 0.7rem;
+  }
+
+  .chip {
+    padding: 0.2rem 0.4rem;
+  }
 }
 </style>