mejoras UI 4

2025-11-22 02:07:57 -06:00
parent 99a2137daa
commit 028d7e54c8
4 changed files with 67 additions and 27 deletions
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -150,7 +150,11 @@
    <!-- Modal: Ver Trazabilidad -->
    <UModal
      v-model:open="showTrazabilidadModal"
-      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh] overflow-y-auto' }"
+      scrollable
+      :ui="{
+        content: 'w-[calc(100vw-2rem)] max-w-4xl rounded-lg shadow-lg ring ring-default max-h-[80vh]',
+        body: 'overflow-y-auto'
+      }"
    >
      <template #content>
        <LotesTrazabilidad
@@ -173,6 +177,17 @@
        />
      </template>
    </UModal>
+
+    <!-- Modal: Ver Detalle de Operación -->
+    <UModal v-model:open="showOperacionDetailModal">
+      <template #content>
+        <OperacionesCard
+          v-if="selectedOperacion"
+          :operacion="selectedOperacion"
+          @close="closeOperacionDetailModal"
+        />
+      </template>
+    </UModal>
  </UApp>
 </template>

@@ -194,9 +209,11 @@ const showLoteDetailModal = ref(false)
 const showTrazabilidadModal = ref(false)
 const showCreateLoteModal = ref(false)
 const showCreateOperacionModal = ref(false)
+const showOperacionDetailModal = ref(false)

 // Estados de datos
 const selectedLote = ref<Lote | null>(null)
+const selectedOperacion = ref<Operacion | null>(null)
 const trazabilidadLoteId = ref<string | null>(null)

 // Handlers para Lotes
@@ -240,8 +257,8 @@ const handleLoteFormSuccess = () => {

 // Handlers para Operaciones
 const handleViewOperacion = (operacion: Operacion) => {
-  // TODO: Implementar vista de detalle de operación si es necesario
-  console.log('Ver operación:', operacion)
+  selectedOperacion.value = operacion
+  showOperacionDetailModal.value = true
 }

 const handleOperacionFormSuccess = () => {
@@ -249,6 +266,15 @@ const handleOperacionFormSuccess = () => {
  // Las tablas se recargarán automáticamente
 }

+const closeOperacionDetailModal = () => {
+  showOperacionDetailModal.value = false
+  selectedOperacion.value = null
+}
+const closeOperacionDetailModal = () => {
+  showOperacionDetailModal.value = false
+  selectedOperacion.value = null
+}
+
 // ⚠️⚠️⚠️ FUNCIONES DE DEBUG - TEMPORALES ⚠️⚠️⚠️
 // NO ELIMINAR SIN CONSULTAR A DARIO/DRAGANEL/NUCLEO000
 const resettingDB = ref(false)
--- a/nuxt4/app/components/lotes/Card.vue
+++ b/nuxt4/app/components/lotes/Card.vue
@@ -55,8 +55,10 @@

      <div v-if="lote.meta" class="pt-4 border-t">
        <p class="text-sm text-gray-500 mb-2">Información Adicional</p>
-        <UCard class="bg-gray-50">
-          <pre class="text-xs overflow-x-auto">{{ JSON.stringify(lote.meta, null, 2) }}</pre>
+        <UCard class="bg-gray-50 dark:bg-slate-900/70 border border-gray-200 dark:border-slate-800">
+          <pre class="text-xs overflow-x-auto text-gray-800 dark:text-slate-200 whitespace-pre-wrap">
+{{ JSON.stringify(lote.meta, null, 2) }}
+          </pre>
        </UCard>
      </div>
    </div>
--- a/nuxt4/app/components/lotes/Trazabilidad.vue
+++ b/nuxt4/app/components/lotes/Trazabilidad.vue
@@ -21,20 +21,20 @@

    <div v-else-if="trazabilidad" class="space-y-6">
      <!-- Estadísticas -->
-      <div class="grid grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg">
-        <div class="text-center">
-          <p class="text-2xl font-bold text-blue-600">{{ trazabilidad.estadisticas.total_ancestros }}</p>
-          <p class="text-sm text-gray-600">Lotes ancestros</p>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Lotes ancestros</p>
+          <p class="text-3xl font-semibold text-blue-600 dark:text-cyan-300">{{ trazabilidad.estadisticas.total_ancestros }}</p>
        </div>
-        <div class="text-center">
-          <p class="text-2xl font-bold text-green-600">{{ trazabilidad.estadisticas.profundidad_maxima }}</p>
-          <p class="text-sm text-gray-600">Niveles de profundidad</p>
+        <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Niveles de profundidad</p>
+          <p class="text-3xl font-semibold text-green-600 dark:text-emerald-300">{{ trazabilidad.estadisticas.profundidad_maxima }}</p>
        </div>
-        <div class="text-center">
-          <p class="text-2xl font-bold text-orange-600">
+        <div class="rounded-xl border border-gray-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/70 p-4 shadow-sm">
+          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Kilos iniciales</p>
+          <p class="text-3xl font-semibold text-orange-600 dark:text-amber-300">
            {{ trazabilidad.estadisticas.kg_iniciales.toLocaleString('es-AR') }} kg
          </p>
-          <p class="text-sm text-gray-600">Kilos iniciales</p>
        </div>
      </div>

@@ -44,11 +44,11 @@
      <!-- Árbol de Trazabilidad (texto) -->
      <div class="space-y-2">
        <h4 class="font-semibold text-lg">Historial</h4>
-        <div class="space-y-1">
+        <div class="space-y-2">
          <div
            v-for="(item, index) in sortedHistorial"
            :key="index"
-            class="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
+            class="flex items-start gap-3 p-3 rounded-lg border border-gray-100 dark:border-slate-800 bg-white/80 dark:bg-slate-900/60 hover:border-primary/40 transition-colors"
            :class="{
              'bg-blue-50': item.profundidad === 0,
              'border-l-4 border-blue-500': item.profundidad === 0,
--- a/nuxt4/app/components/lotes/TrazabilidadGraph.vue
+++ b/nuxt4/app/components/lotes/TrazabilidadGraph.vue
@@ -53,16 +53,26 @@

        <!-- Aristas -->
        <g stroke="url(#edgeGradient)" stroke-width="2.5" stroke-linecap="round">
+          <template v-for="edge in edges" :key="`${edge.from}-${edge.to}`">
+            <!-- tramo vertical -->
            <line
-            v-for="edge in edges"
-            :key="`${edge.from}-${edge.to}`"
              :x1="edge.fromPos.x"
              :y1="edge.fromPos.y"
+              :x2="edge.fromPos.x"
+              :y2="edge.midPos.y"
+              class="transition-opacity duration-200"
+              :opacity="0.9"
+            />
+            <!-- tramo horizontal -->
+            <line
+              :x1="edge.fromPos.x"
+              :y1="edge.midPos.y"
              :x2="edge.toPos.x"
              :y2="edge.toPos.y"
              class="transition-opacity duration-200"
              :opacity="0.9"
            />
+          </template>
        </g>

        <!-- Nodos -->
@@ -208,6 +218,7 @@ const edges = computed(() => {
    to: string
    fromPos: { x: number; y: number }
    toPos: { x: number; y: number }
+    midPos: { x: number; y: number }
  }[] = []

  for (const row of props.historial) {
@@ -220,6 +231,7 @@ const edges = computed(() => {
        to: toNode.id,
        fromPos: { x: fromNode.x, y: fromNode.y + nodeBox.height / 2 },
        toPos: { x: toNode.x, y: toNode.y - nodeBox.height / 2 },
+        midPos: { x: fromNode.x, y: (fromNode.y + toNode.y) / 2 },
      })
    }
  }