From 8a7a409de68ddfb837496269dc2f493a537663be Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 22 Nov 2025 02:25:04 -0600
Subject: [PATCH] fix

---
 nuxt4/app/app.vue                             | 19 +++++++++++++++++--
 .../components/lotes/TrazabilidadGraph.vue    | 12 ++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index ec6e420..7922ee7 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -228,7 +228,7 @@
               <div>
                 <h3 class="text-lg font-semibold">Detalle de Operación</h3>
                 <p class="text-sm text-gray-500" v-if="selectedOperacion">
-                  {{ getTipoLabel(selectedOperacion.tipo) }} · {{ formatDate(selectedOperacion.fecha) }}
+                  {{ getOperacionTipoLabel(selectedOperacion.tipo) }} · {{ formatDate(selectedOperacion.fecha) }}
                 </p>
               </div>
               <UButton icon="i-heroicons-x-mark" variant="ghost" @click="closeOperacionDetailModal" />
@@ -246,7 +246,7 @@
               </div>
               <div class="col-span-2">
                 <p class="text-xs uppercase text-gray-500">Tipo</p>
-                <UBadge color="blue" variant="subtle">{{ getTipoLabel(selectedOperacion.tipo) }}</UBadge>
+                <UBadge color="blue" variant="subtle">{{ getOperacionTipoLabel(selectedOperacion.tipo) }}</UBadge>
               </div>
             </div>
             <div>
@@ -351,6 +351,21 @@ const closeOperacionDetailModal = () => {
   selectedOperacion.value = null
 }
 
+const getOperacionTipoLabel = (tipo: string) => {
+  const found = TIPOS_OPERACION.find((t) => t.value === tipo)
+  return found?.label || tipo
+}
+
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('es-AR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
 // Datos para grafos
 const graphSelectItems = computed(() =>
   graphLotes.value.map((lote) => ({
diff --git a/nuxt4/app/components/lotes/TrazabilidadGraph.vue b/nuxt4/app/components/lotes/TrazabilidadGraph.vue
index aa8182d..70ea869 100644
--- a/nuxt4/app/components/lotes/TrazabilidadGraph.vue
+++ b/nuxt4/app/components/lotes/TrazabilidadGraph.vue
@@ -81,6 +81,18 @@
               class="transition-opacity duration-200"
               :opacity="0.9"
             />
+
+            <!-- tramo diagonal suave (opcional) -->
+            <line
+              v-if="edge.toPos.x !== edge.fromPos.x"
+              :x1="edge.fromPos.x"
+              :y1="edge.midPos.y"
+              :x2="edge.toPos.x"
+              :y2="edge.toPos.y"
+              class="transition-opacity duration-200"
+              :opacity="0.4"
+              stroke-dasharray="4 6"
+            />
           </template>
         </g>