Instructivo de Estructura Frontend (Next.js)

🎯 Propósito

Este instructivo establece la estructura de carpetas oficial para el desarrollo de la interfaz visual del ERP en «código puro» (basado en Next.js App Router y React). Todos los agentes deben respetar esta jerarquía para evitar código desordenado o archivos basura.

Toda la aplicación web vive dentro de la carpeta principal: F:\Ecosistema ERP\web\

📂 Árbol de Carpetas y Dónde Guardar las Cosas

Dentro de la carpeta web\, el corazón del sistema está en la carpeta src\. Así es como nos organizaremos:

1. src/app/ (El Enrutador Central)

Aquí es donde creamos las Páginas del sistema. Cada subcarpeta que creemos aquí se convertirá automáticamente en una ruta de internet (URL).

• src/app/page.tsx ➡️ La página de inicio o pantalla de Login principal.
• src/app/instructores/page.tsx ➡️ El panel principal de los Instructores.
• src/app/alumnos/page.tsx ➡️ El panel principal de los Alumnos.
• src/app/ventas/page.tsx ➡️ El panel de los Vendedores.

2. src/components/ (Las Piezas de Lego)

Aquí guardaremos el diseño visual que se repite en varias páginas. No son páginas completas, son bloques de construcción. Ejemplos: MenuLateral.tsx, BotonPrimario.tsx, TarjetaVuelo.tsx.

3. src/lib/ (El Cerebro de las Conexiones)

Aquí van los archivos que no tienen diseño visual, sino pura lógica de programación y conexiones con el mundo exterior.

• src/lib/supabaseClient.js ➡️ Conexión a la base de datos de Supabase.
• src/lib/driveSync.js ➡️ Subida de archivos pesados a Google Drive.
• src/lib/vertexAi.js ➡️ Conexión a la Inteligencia Artificial.

4. public/ (Multimedia Pública)

Carpeta dedicada únicamente a archivos estáticos ligeros que necesita la interfaz para verse bonita. Aquí guardamos logos, íconos SVG e imágenes de fondo.

⚠️ Reglas para Agentes y Desarrolladores

1. Páginas vs. Componentes: Nunca mezclar la lógica de una página entera dentro de src/components/.
2. Estilos y Diseño (CSS): Para que la interfaz se vea premium, utilizaremos Tailwind CSS. Las clases de diseño van directo en el código de cada componente.
3. Cero dependencias pesadas: Antes de instalar cualquier paquete nuevo, verificar que sea estrictamente necesario y que no se pueda resolver con código nativo puro.