Implementa la capacidad de restaurar la base de datos desde
un archivo SQL de backup exportado previamente.
Cambios:
Backend:
- Nuevo endpoint POST /api/debug/import-database.post.ts
- Recibe archivo .sql via multipart/form-data
- Ejecuta el SQL del backup (que incluye DROP y CREATE)
- Reemplaza completamente la base de datos existente
Frontend:
- Nuevo botón verde "📥 IMPORTAR BACKUP"
- Input file oculto con accept=".sql"
- Validación de extensión de archivo
- Confirmación con advertencia clara
- Estado de carga durante importación
Flujo de uso:
1. Usuario hace click en "📥 IMPORTAR BACKUP"
2. Selecciona archivo .sql previamente exportado
3. Confirma que desea reemplazar toda la BD
4. Sistema ejecuta el SQL completo
5. Muestra mensaje de éxito/error
6. Usuario recarga la página
Esto completa el ciclo backup/restore permitiendo
recuperación completa del estado de la base de datos.
- Agregar botón 'LIMPIAR DATOS' que hace TRUNCATE de tablas sin borrar estructura
- Agregar botón 'EXPORTAR BACKUP' que descarga pg_dump completo de la BD
- Crear endpoint POST /api/debug/clear-data para TRUNCATE CASCADE
- Crear endpoint POST /api/debug/export-database para pg_dump con descarga
- Mantener estructura de botones temporales de debug existentes
- Incluir confirmaciones y manejo de errores apropiados
- Agregar flujo 5: Las Nubes (Geisha) + El Paraíso (Castillo) → SEC-EXOTIC-001
- Agregar flujo 6: Santa Rita (Caturra Rojo) → División → SEC-SRT-PREM-001 + SEC-SRT-STD-001
- Agregar flujo 7: Trinidad + San José + Villa Rosa → Triple Blend → SEC-TRIPLE-001
- Agregar flujo 8: Mezcla de segundas calidades → SEC-COMERCIAL-001
- Implementar filtro soloFinales en queries, API y composable
- Modificar tab Grafos para mostrar solo lotes finales (sin hijos)
- Actualizar descripción de tab Grafos para clarificar el filtro
- Total: 7 lotes finales de secado para visualización de grafos
Ahora el formulario de crear operación permite crear nuevos lotes de
entrada directamente desde el paso 2, sin necesidad de salir del modal.
Cambios:
- Agregar botón "Nuevo lote de entrada" en el paso 2
- Mostrar formulario inline para crear lote con código, tipo y cantidad
- Al crear el lote, se agrega automáticamente a la lista de disponibles
- Se selecciona automáticamente como input de la operación
- Importar createLote del composable useLotes
- Agregar estado showCreateInputForm y creatingInput
- Implementar funciones cancelCreateInput y handleCreateInput
Beneficios:
- Flujo más ágil sin interrupciones
- Consistencia con la creación de lotes de output
- Mejor experiencia de usuario
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
El componente LotesTrazabilidad no se estaba renderizando porque
no estaba dentro del slot #body. El UModal de NuxtUI requiere que
el contenido esté explícitamente en el slot #body para que se
renderice correctamente.
Cambios:
- Envolver LotesTrazabilidad en <template #body>
- El modal ahora muestra correctamente el contenido con scroll vertical
- Corregir referencia a colorMode (agregar .value)
- Optimizar renderizado de aristas usando paths SVG
- Mejorar posicionamiento de nodos con agrupación por padre
- Evitar solapamiento de nodos hermanos
- Ajustar cálculo dinámico del ancho del SVG
- Mover v-if al UCard completo para renderizado consistente
- Agregar configuración de UI con ancho max-w-2xl
- Remover v-if redundantes internos
- Seguir el patrón de otros modales que funcionan correctamente
Los componentes LotesTable y OperacionesTable usan UTable de Nuxt UI,
que internamente usa @tanstack/table-core. Esta librería no puede
renderizarse en el servidor (SSR), causando error 500.
Solución: Envolver los componentes en <ClientOnly> para que solo se
rendericen en el navegador.
- Crear plugin error-handler.ts para capturar todos los errores
- Captura errores de app:error, vue:error y errorHandler
- Agregar logs en script setup de componentes
- Logs antes y después de llamar a useLotes()
- Esto nos mostrará exactamente dónde crashea la app
- Logs en useLotes() para ver cuándo se llama
- Logs en fetchLotes() para rastrear el flujo
- Logs en API /api/lotes para ver requests del servidor
- Todos los logs con emojis para fácil identificación:
🔵 = Cliente/Composable
🟦 = Servidor/API
❌ = Errores
El problema era que useToast() no funciona en Server-Side Rendering.
Cuando los componentes se renderizaban en el servidor, crasheaba con error 500.
Cambios:
- Hacer que toast sea opcional: process.client ? useToast() : null
- Cambiar todos toast.add() a toast?.add()
- Ahora el composable funciona tanto en servidor como en cliente
- Agregar try-catch en loadLotes/loadOperaciones
- Agregar try-catch en onMounted y watch
- Agregar estado de error y mostrar mensaje en UI
- Agregar console.log detallados para debug
- Mostrar errores en tarjeta roja sin crashear la app
- Restaurar LotesTable completo con onMounted y watch
- Habilitar carga automática de datos
- Base de datos recreada con credenciales correctas
- Conexión PostgreSQL funcionando correctamente
- Cambiar selectedTab de ref(0) a ref('lotes') para usar string
- Agregar propiedad value explícita a cada tab item
- Crear documento nuxt-ui-tips.md con documentación de cambios
- Los valores deben ser strings según API de v4
- Cambiar v-model a v-model:open según API de v4
- Agregar slot #content requerido en todos los modales
- Corregir prop :ui para anchos personalizados (content en lugar de width)
- Aplicar clases correctas del tema para max-w-3xl y max-w-4xl
⚠️ CÓDIGO TEMPORAL - NO ELIMINAR SIN CONSULTAR ⚠️
Backend:
- POST /api/debug/reset-database - Borra todos los datos
- POST /api/debug/seed-database - Carga datos de ejemplo
Frontend:
- Card rojo con advertencias notorias
- Botones: 🗑️ BORRAR TODA LA BD y 🌱 CARGAR DATOS DE EJEMPLO
- Confirmación antes de resetear
- Estados de loading
- Alertas de éxito/error
Todos los archivos marcados con comentarios muy visibles:
⚠️⚠️⚠️ NO ELIMINAR SIN CONSULTAR A DARIO/DRAGANEL/NUCLEO000 ⚠️⚠️⚠️
Útil para desarrollo y debugging del sistema de trazabilidad.
- Botones simples para probar GET /api/lotes, /api/operaciones y trazabilidad
- Resultados se muestran en console.log del navegador
- Facilita debugging de la API desde el frontend
- Agregar PostgreSQL 16 con esquema completo
- Crear API endpoints para lotes y operaciones
- Implementar UI con Nuxt UI (tablas, formularios, trazabilidad)
- Agregar datos de ejemplo del flujo completo
- Documentar sistema en PLAN_TRAZABILIDAD.md
This commit implements a comprehensive, reusable group verification system:
Components:
- GroupCheckButton: Base component for group verification
- 7 specialized buttons: 3 real groups (authentik Admins, grupo-prueba, lvl0), 1 public access test, 2 system verification buttons
- All buttons support both frontend and backend verification modes
Backend:
- New API endpoint /api/auth/check-group for server-side group validation
- Reads Authentik headers and validates group membership
Frontend:
- Enhanced useAuthentik composable with hasGroup() and checkGroupBackend() methods
- Toast notifications for all verification results
- Smooth animations and color-coded visual feedback
UI Improvements:
- Organized layout with cards for different verification types
- Grid layout for group buttons
- Professional styling with hover effects and shadows
- Clear visual distinction between frontend/backend checks
- Update AuthentikUser interface to include appSlug and outpostName
- Capture x-authentik-meta-app and x-authentik-meta-outpost headers
- Improve UserMetadata component to display connection information
- Filter empty groups from groups array
- Add documentation about available Authentik headers
- Add AuthentikUser and AuthStatusResponse interfaces
- Fix toast color from 'gray' to 'neutral' (valid color)
- Remove invalid 'timeout' property from toast.add()
- Fix toast action from 'click' to 'onClick'
- Add proper type annotations for error handling
- Replace process.server with import.meta.server
- Make email, name, uid optional in AuthentikUser interface
- Enable navigateFallback for offline navigation support
- Add JSON files to glob patterns for heroicons support
- Change Authentik API caching from NetworkFirst to NetworkOnly to prevent stale session data
- Add offline detection in checkSessionStatus with proper user feedback
- Add no-cache headers to /api/auth/status endpoint to prevent browser caching
- Show "Modo Offline" toast when user tries to check session while offline
