From cb0261dad3cc42e25d2ee79ae7a5c5aaf939df33 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 22 Nov 2025 03:29:27 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20m=C3=BAltiples=20correcciones=20de=20UI?=
 =?UTF-8?q?=20y=20funcionalidad?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios realizados:

1. Favicon:
   - Actualizar configuración en app.vue para usar iconos PNG correctos
   - Agregar links con tamaños 32x32 y 16x16
   - Actualizar theme-color a #16a34a (verde del proyecto)

2. Modal de Crear Operación:
   - Reestructurar con slots #header y #body para scroll correcto
   - Extraer header del Form.vue y moverlo al modal
   - Eliminar UCard del componente Form.vue
   - Agregar max-h-[80vh] para limitar altura
   - Ahora muestra scrollbar vertical cuando el contenido excede el espacio

3. USelect de filtro de operaciones:
   - Corregir de :options a :items (API correcta de NuxtUI v4)
   - Agregar label-key y value-key
   - Agregar computed selectOptions (igual que en Lotes)
   - Cambiar filtroTipo de ref('') a ref<string | null>(null)
   - Ahora el filtro funciona correctamente

Archivos modificados:
- app/app.vue: Configuración favicon y modal operaciones
- app/components/operaciones/Form.vue: Eliminar UCard
- app/components/operaciones/Table.vue: Corregir USelect
---
 nuxt4/app/app.vue                          |  25 +++++++++++++++++----
 nuxt4/app/components/operaciones/Form.vue  |  15 +------------
 nuxt4/app/components/operaciones/Table.vue |  13 ++++++++---
 nuxt4/public/favicon.png                   | Bin 0 -> 1760 bytes
 4 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 nuxt4/public/favicon.png

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index c14a221..01dd434 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -225,9 +225,25 @@
     <!-- Modal: Crear Operación -->
     <UModal
       v-model:open="showCreateOperacionModal"
-      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-3xl rounded-lg shadow-lg ring ring-default' }"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-3xl rounded-lg shadow-lg ring ring-default max-h-[80vh]' }"
     >
-      <template #content>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Flujo guiado</p>
+            <h3 class="text-xl font-semibold">Nueva Operación</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Define el tipo, selecciona inputs y crea los outputs.</p>
+          </div>
+          <UButton
+            icon="i-heroicons-x-mark"
+            variant="ghost"
+            size="sm"
+            @click="showCreateOperacionModal = false"
+          />
+        </div>
+      </template>
+
+      <template #body>
         <OperacionesForm
           @cancel="showCreateOperacionModal = false"
           @success="handleOperacionFormSuccess"
@@ -536,11 +552,12 @@ useHead({
   title: 'Seguidor de Lotes - Trazabilidad de Café',
   link: [
     { rel: 'manifest', href: '/manifest.webmanifest' },
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/icon-32x32.png' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/icon-16x16.png' },
     { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
   ],
   meta: [
-    { name: 'theme-color', content: '#00DC82' },
+    { name: 'theme-color', content: '#16a34a' },
     { name: 'mobile-web-app-capable', content: 'yes' },
     { name: 'apple-mobile-web-app-capable', content: 'yes' },
     { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
diff --git a/nuxt4/app/components/operaciones/Form.vue b/nuxt4/app/components/operaciones/Form.vue
index fb90dfa..12bf4bd 100644
--- a/nuxt4/app/components/operaciones/Form.vue
+++ b/nuxt4/app/components/operaciones/Form.vue
@@ -1,17 +1,5 @@
 <template>
-  <UCard class="bg-gradient-to-br from-white to-slate-50 dark:from-slate-900 dark:to-slate-950 shadow-lg">
-    <template #header>
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Flujo guiado</p>
-          <h3 class="text-xl font-semibold">Nueva Operación</h3>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Define el tipo, selecciona inputs y crea los outputs.</p>
-        </div>
-        <UBadge color="indigo" variant="subtle">3 pasos</UBadge>
-      </div>
-    </template>
-
-    <div class="space-y-6">
+  <div class="space-y-6">
       <!-- Paso 1: Tipo de Operación -->
       <div v-if="step === 1" class="space-y-4">
         <div class="flex items-center justify-between">
@@ -193,7 +181,6 @@
         </div>
       </div>
     </div>
-  </UCard>
 </template>
 
 <script setup lang="ts">
diff --git a/nuxt4/app/components/operaciones/Table.vue b/nuxt4/app/components/operaciones/Table.vue
index 9a9276c..72a8243 100644
--- a/nuxt4/app/components/operaciones/Table.vue
+++ b/nuxt4/app/components/operaciones/Table.vue
@@ -15,8 +15,10 @@
     <div class="flex gap-2">
       <USelect
         v-model="filtroTipo"
-        :options="[{ value: '', label: 'Todos los tipos' }, ...TIPOS_OPERACION]"
-        placeholder="Filtrar por tipo"
+        :items="selectOptions"
+        label-key="label"
+        value-key="value"
+        searchable
         class="w-64"
       />
       <UButton
@@ -94,9 +96,14 @@ console.log('🟡 OperacionesTable: useLotes() completado, TIPOS_OPERACION:', TI
 
 const operaciones = ref<Operacion[]>([])
 const loading = ref(false)
-const filtroTipo = ref('')
+const filtroTipo = ref<string | null>(null)
 const error = ref<string | null>(null)
 
+const selectOptions = computed(() => [
+  { value: null, label: 'Todos los tipos' },
+  ...TIPOS_OPERACION,
+])
+
 const columns: ColumnDef<Operacion>[] = [
   { accessorKey: 'tipo', id: 'tipo', header: 'Tipo de Operación' },
   { accessorKey: 'fecha', id: 'fecha', header: 'Fecha' },
diff --git a/nuxt4/public/favicon.png b/nuxt4/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6ba382673cb2dc2a1384f7cf4a166116562e4ee
GIT binary patch
literal 1760
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
C@mvT1

literal 0
HcmV?d00001