mejoras UI 4

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)