- 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
- Agregar sección completa sobre autenticación md5 vs scram-sha-256
- Documentar race condition entre app y PostgreSQL con retry logic
- Explicar idempotencia de scripts (schema vs seed)
- Documentar persistencia de datos y volúmenes Docker
- Incluir troubleshooting detallado de errores comunes
- Agregar diagramas de arquitectura de inicialización
- Documentar endpoints de debug temporales
- Tabla de decisiones técnicas con alternativas descartadas
- Queries útiles y comandos de backup/restore
- Endpoint seed-database ahora ejecuta 01_schema.sql primero
- Luego ejecuta 02_seed.sql
- Resuelve error cuando se presiona seed después de borrar BD
- Schema tiene CREATE TABLE IF NOT EXISTS (idempotente)
Flujo correcto:
1. Borrar BD → DROP TABLE de todo
2. Cargar datos → Crea tablas + inserta datos
- Implementar 5 reintentos con 2s de delay entre cada uno
- Resolver error de autenticación en primera carga
- PostgreSQL necesita tiempo para ejecutar 00_configure_auth.sh
- App ahora espera automáticamente hasta que auth esté configurado
Esto resuelve el error 28P01 (password authentication failed)
que ocurría solo en la primera conexión después del deploy.
Soluciones implementadas:
1. Copiar archivos SQL al contenedor Docker
- Agregar COPY de server/database/ en Dockerfile
- Permite que endpoint seed-database encuentre 02_seed.sql
2. Aumentar timeout de conexión PostgreSQL
- connectionTimeoutMillis: 2000 -> 10000 (10 segundos)
- Evita errores de autenticación en primera carga
3. Reducir logs en producción
- Solo mostrar 'Nueva conexión' en desarrollo
- Reduce ruido en logs de producción
Problema: Al hacer TRUNCATE, las tablas quedaban vacías pero existían,
entonces el workflow pensaba que ya estaba inicializada y no recreaba
los datos de ejemplo.
Solución: Ahora hace DROP TABLE (eliminar completamente) para que el
próximo deploy detecte que no existen tablas y las recree con el seed.
Ahora el flujo correcto es:
1. Click en 'BORRAR TODA LA BD' → DROP de todas las tablas
2. Push o redeploy → Workflow detecta que no hay tablas
3. Workflow ejecuta 01_schema.sql y 02_seed.sql automáticamente
⚠️ 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.
- Script 00_configure_auth.sh configura pg_hba.conf para usar md5
- Se ejecuta automáticamente en inicializaciones de BD
- Soluciona permanentemente problemas de autenticación con driver pg de Node.js
- 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
