mejoras de UI 2

2025-11-22 01:50:46 -06:00
parent 990b87fca0
commit 1478ad9e09
4 changed files with 82 additions and 49 deletions
--- a/nuxt4/app/components/lotes/Form.vue
+++ b/nuxt4/app/components/lotes/Form.vue
@@ -30,9 +30,9 @@
        <UFormGroup label="Tipo" name="tipo" required>
          <USelect
            v-model="formState.tipo"
-            :options="TIPOS_LOTE"
-            option-attribute="label"
-            value-attribute="value"
+            :items="TIPOS_LOTE"
+            label-key="label"
+            value-key="value"
            placeholder="Selecciona un tipo"
            searchable
          />
--- a/nuxt4/app/components/lotes/Table.vue
+++ b/nuxt4/app/components/lotes/Table.vue
@@ -15,9 +15,9 @@
    <div class="flex gap-2">
      <USelect
        v-model="filtroTipo"
-        :options="selectOptions"
-        option-attribute="label"
-        value-attribute="value"
+        :items="selectOptions"
+        label-key="label"
+        value-key="value"
        searchable
        placeholder="Filtrar por tipo"
        class="w-64"
--- a/nuxt4/app/components/lotes/TrazabilidadGraph.vue
+++ b/nuxt4/app/components/lotes/TrazabilidadGraph.vue
@@ -1,23 +1,49 @@
 <template>
-  <div class="space-y-3">
+  <div class="space-y-4">
    <div class="flex items-center justify-between">
      <div>
        <h4 class="text-lg font-semibold">Grafo de trazabilidad</h4>
-        <p class="text-sm text-gray-500">Relaciones insumo → resultado por nivel de profundidad</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">Relaciones insumo → resultado por nivel</p>
+      </div>
+      <div class="flex gap-2 items-center">
+        <UBadge color="blue" variant="subtle" v-if="nodes.length">
+          {{ nodes.length }} nodos · {{ edges.length }} aristas
+        </UBadge>
      </div>
-      <UBadge color="blue" variant="subtle" v-if="nodes.length">
-        {{ nodes.length }} nodos · {{ edges.length }} aristas
-      </UBadge>
    </div>

-    <div class="relative w-full overflow-x-auto">
+    <div class="relative w-full overflow-x-auto rounded-xl border border-gray-200 dark:border-slate-800 bg-gradient-to-b" :class="bgGradient">
      <svg
        :width="svgWidth"
        :height="svgHeight"
-        class="min-w-full bg-gradient-to-b from-white to-gray-50 rounded-lg border"
+        class="min-w-full"
+        :style="{ background: 'transparent' }"
      >
+        <defs>
+          <filter id="nodeShadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#0f172a" flood-opacity="0.08" />
+          </filter>
+          <linearGradient id="edgeGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" :stop-color="edgeColor" stop-opacity="0.8" />
+            <stop offset="100%" :stop-color="edgeColor" stop-opacity="0.4" />
+          </linearGradient>
+        </defs>
+
+        <!-- Grid horizontal por nivel -->
+        <g stroke="#e2e8f0" stroke-width="1" :stroke-opacity="colorMode === 'dark' ? 0.1 : 0.35">
+          <line
+            v-for="depth in depthLines"
+            :key="depth"
+            :x1="0"
+            :x2="svgWidth"
+            :y1="paddingY + depth * levelGap"
+            :y2="paddingY + depth * levelGap"
+            stroke-dasharray="4 4"
+          />
+        </g>
+
        <!-- Aristas -->
-        <g stroke="#CBD5E1" stroke-width="2">
+        <g stroke="url(#edgeGradient)" stroke-width="2.5" stroke-linecap="round">
          <line
            v-for="edge in edges"
            :key="`${edge.from}-${edge.to}`"
@@ -25,8 +51,8 @@
            :y1="edge.fromPos.y"
            :x2="edge.toPos.x"
            :y2="edge.toPos.y"
-            stroke-linecap="round"
            class="transition-opacity duration-200"
+            :opacity="0.9"
          />
        </g>

@@ -36,23 +62,25 @@
            v-for="node in nodes"
            :key="node.id"
            class="transition-transform duration-200"
+            filter="url(#nodeShadow)"
          >
            <rect
              :x="node.x - nodeBox.width / 2"
              :y="node.y - nodeBox.height / 2"
              :width="nodeBox.width"
              :height="nodeBox.height"
-              rx="12"
+              rx="14"
              :fill="getNodeFill(node.tipo)"
-              stroke="#0F172A"
-              stroke-opacity="0.05"
+              :stroke="node.depth === 0 ? accentColor : '#0F172A'"
+              :stroke-opacity="node.depth === 0 ? 0.6 : 0.05"
+              :stroke-width="node.depth === 0 ? 2 : 1"
            />
            <text
              :x="node.x"
              :y="node.y - 10"
              text-anchor="middle"
-              class="font-medium"
-              fill="#0F172A"
+              class="font-semibold"
+              :fill="textColor"
            >
              {{ node.label }}
            </text>
@@ -61,7 +89,7 @@
              :y="node.y + 10"
              text-anchor="middle"
              class="text-[11px]"
-              fill="#334155"
+              :fill="subTextColor"
            >
              {{ getTipoLabel(node.tipo) }}
            </text>
@@ -71,7 +99,7 @@
              :y="node.y + 26"
              text-anchor="middle"
              class="text-[10px]"
-              fill="#475569"
+              :fill="subTextColor"
            >
              {{ node.cantidad_kg.toLocaleString('es-AR') }} kg
            </text>
@@ -80,27 +108,18 @@
      </svg>
    </div>

-    <div class="flex flex-wrap gap-2 text-xs text-gray-600">
-      <span class="inline-flex items-center gap-1">
-        <span class="w-3 h-3 rounded-sm" :style="{ background: getNodeFill('uva') }"></span> Uva
-      </span>
-      <span class="inline-flex items-center gap-1">
-        <span class="w-3 h-3 rounded-sm" :style="{ background: getNodeFill('despulpado_primera') }"></span> Despulpado
-      </span>
-      <span class="inline-flex items-center gap-1">
-        <span class="w-3 h-3 rounded-sm" :style="{ background: getNodeFill('oreado') }"></span> Oreado / Presecado
-      </span>
-      <span class="inline-flex items-center gap-1">
-        <span class="w-3 h-3 rounded-sm" :style="{ background: getNodeFill('reposo') }"></span> Reposo
-      </span>
-      <span class="inline-flex items-center gap-1">
-        <span class="w-3 h-3 rounded-sm" :style="{ background: getNodeFill('secado') }"></span> Secado / mezcla
-      </span>
+    <div class="flex flex-wrap gap-2 text-xs">
+      <UBadge color="violet" variant="subtle">Uva</UBadge>
+      <UBadge color="green" variant="subtle">Despulpado</UBadge>
+      <UBadge color="orange" variant="subtle">Oreado/Presecado</UBadge>
+      <UBadge color="blue" variant="subtle">Reposo</UBadge>
+      <UBadge color="emerald" variant="subtle">Secado/Mezcla</UBadge>
    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { useColorMode } from '#imports'
 import type { TrazabilidadRow } from '~/composables/useLotes'

 const props = defineProps<{
@@ -111,6 +130,14 @@ const paddingX = 80
 const paddingY = 60
 const levelGap = 140
 const nodeBox = { width: 180, height: 64 }
+const colorMode = useColorMode()
+const bgGradient = computed(() => colorMode.value === 'dark'
+  ? 'from-slate-900 to-slate-950'
+  : 'from-white to-slate-50')
+const edgeColor = computed(() => colorMode.value === 'dark' ? '#94a3b8' : '#94a3b8')
+const textColor = computed(() => colorMode.value === 'dark' ? '#e2e8f0' : '#0f172a')
+const subTextColor = computed(() => colorMode.value === 'dark' ? '#cbd5e1' : '#334155')
+const accentColor = computed(() => colorMode.value === 'dark' ? '#22d3ee' : '#0ea5e9')

 type GraphNode = {
  id: string
@@ -203,16 +230,22 @@ const svgHeight = computed(() => {
  return paddingY * 2 + maxDepth * levelGap + nodeBox.height
 })

+const depthLines = computed(() => {
+  if (!nodes.value.length) return []
+  const maxDepth = Math.max(...nodes.value.map((n) => n.depth), 0)
+  return Array.from({ length: maxDepth + 1 }, (_, i) => i)
+})
+
 const getNodeFill = (tipo: string): string => {
  const palette: Record<string, string> = {
-    uva: '#F3E8FF',
-    despulpado_primera: '#DCFCE7',
-    despulpado_segunda: '#FEF9C3',
-    despulpado_rechazos: '#FEE2E2',
-    oreado: '#FFEDD5',
-    presecado: '#FDE68A',
-    reposo: '#DBEAFE',
-    secado: '#D1FAE5',
+    uva: colorMode.value === 'dark' ? '#4c1d95' : '#F3E8FF',
+    despulpado_primera: colorMode.value === 'dark' ? '#166534' : '#DCFCE7',
+    despulpado_segunda: colorMode.value === 'dark' ? '#854d0e' : '#FEF9C3',
+    despulpado_rechazos: colorMode.value === 'dark' ? '#7f1d1d' : '#FEE2E2',
+    oreado: colorMode.value === 'dark' ? '#9a3412' : '#FFEDD5',
+    presecado: colorMode.value === 'dark' ? '#92400e' : '#FDE68A',
+    reposo: colorMode.value === 'dark' ? '#1d4ed8' : '#DBEAFE',
+    secado: colorMode.value === 'dark' ? '#065f46' : '#D1FAE5',
  }
  return palette[tipo] || '#E2E8F0'
 }