246 lines
15 KiB
HTML
246 lines
15 KiB
HTML
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; }
|
|
.roadmap { padding: 1.5rem 0; font-family: var(--font-sans); }
|
|
.phase-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
|
|
.phase-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
|
.phase-title { font-size: 16px; font-weight: 500; color: var(--color-text-primary); }
|
|
.phase-time { font-size: 12px; color: var(--color-text-secondary); margin-left: auto; white-space: nowrap; }
|
|
.phase-block { border-radius: var(--border-radius-lg); border: 0.5px solid var(--color-border-tertiary); padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--color-background-primary); }
|
|
.topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
|
|
.topic-card { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary); cursor: pointer; transition: border-color .2s; }
|
|
.topic-card:hover { border-color: var(--color-border-secondary); }
|
|
.topic-name { font-size: 13px; font-weight: 500; color: var(--color-text-primary); margin: 0 0 3px; }
|
|
.topic-desc { font-size: 12px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
|
|
.topic-icon { font-size: 16px; margin-bottom: 5px; color: var(--color-text-secondary); }
|
|
.connector { text-align: center; margin: 4px 0; color: var(--color-text-tertiary); font-size: 18px; }
|
|
.erp-note { background: var(--color-background-info); border: 0.5px solid var(--color-border-info); border-radius: var(--border-radius-md); padding: 10px 14px; margin-top: 10px; font-size: 12px; color: var(--color-text-info); }
|
|
.total-bar { display: flex; align-items: center; gap: 12px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 12px 16px; margin-top: 4px; border: 0.5px solid var(--color-border-tertiary); }
|
|
.total-label { font-size: 13px; color: var(--color-text-secondary); }
|
|
.total-val { font-size: 18px; font-weight: 500; color: var(--color-text-primary); }
|
|
.progress-row { display: flex; gap: 4px; flex: 1; }
|
|
.prog-seg { height: 6px; border-radius: 3px; }
|
|
|
|
/* phase colors */
|
|
.p1 .phase-badge { background: #E6F1FB; color: #185FA5; }
|
|
.p1 .prog-seg { background: #378ADD; }
|
|
.p2 .phase-badge { background: #E1F5EE; color: #0F6E56; }
|
|
.p2 .prog-seg { background: #1D9E75; }
|
|
.p3 .phase-badge { background: #EEEDFE; color: #534AB7; }
|
|
.p3 .prog-seg { background: #7F77DD; }
|
|
.p4 .phase-badge { background: #FAEEDA; color: #854F0B; }
|
|
.p4 .prog-seg { background: #EF9F27; }
|
|
.p5 .phase-badge { background: #FAECE7; color: #993C1D; }
|
|
.p5 .prog-seg { background: #D85A30; }
|
|
|
|
.p1 .topic-card:hover { border-color: #378ADD; }
|
|
.p2 .topic-card:hover { border-color: #1D9E75; }
|
|
.p3 .topic-card:hover { border-color: #7F77DD; }
|
|
.p4 .topic-card:hover { border-color: #EF9F27; }
|
|
.p5 .topic-card:hover { border-color: #D85A30; }
|
|
</style>
|
|
|
|
<div class="roadmap">
|
|
<h2 class="sr-only">Hoja de ruta: Next.js para desarrollo ERP</h2>
|
|
|
|
<!-- FASE 1 -->
|
|
<div class="phase-block p1">
|
|
<div class="phase-header">
|
|
<span class="phase-badge">Fase 1</span>
|
|
<span class="phase-title">Fundamentos web modernos</span>
|
|
<span class="phase-time">~3 semanas</span>
|
|
</div>
|
|
<div class="topics-grid">
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo aprendo JavaScript moderno (ES6+) para Next.js? Explícame los conceptos clave.')">
|
|
<div class="topic-icon"><i class="ti ti-brand-javascript" aria-hidden="true"></i></div>
|
|
<p class="topic-name">JavaScript ES6+</p>
|
|
<p class="topic-desc">Arrow functions, destructuring, async/await, módulos, fetch API</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Qué necesito saber de HTML y CSS para formularios ERP? Cuéntame sobre flexbox, grid y formularios complejos.')">
|
|
<div class="topic-icon"><i class="ti ti-code" aria-hidden="true"></i></div>
|
|
<p class="topic-name">HTML & CSS</p>
|
|
<p class="topic-desc">Formularios avanzados, Flexbox, Grid, variables CSS</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Qué es TypeScript y por qué lo necesito para un ERP en Next.js? Muéstrame los conceptos básicos.')">
|
|
<div class="topic-icon"><i class="ti ti-brand-typescript" aria-hidden="true"></i></div>
|
|
<p class="topic-name">TypeScript básico</p>
|
|
<p class="topic-desc">Tipos, interfaces, generics — esencial para datos maestros ERP</p>
|
|
</div>
|
|
</div>
|
|
<div class="erp-note">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<strong> Foco ERP:</strong> Practica con estructuras de datos tipo Socio de Negocios: objetos anidados, arrays de líneas, validaciones de campos requeridos.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector">↓</div>
|
|
|
|
<!-- FASE 2 -->
|
|
<div class="phase-block p2">
|
|
<div class="phase-header">
|
|
<span class="phase-badge">Fase 2</span>
|
|
<span class="phase-title">React — base de Next.js</span>
|
|
<span class="phase-time">~3 semanas</span>
|
|
</div>
|
|
<div class="topics-grid">
|
|
<div class="topic-card" onclick="sendPrompt('Explícame los componentes y props de React con un ejemplo de formulario de datos maestros tipo Artículos de SAP.')">
|
|
<div class="topic-icon"><i class="ti ti-components" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Componentes & props</p>
|
|
<p class="topic-desc">Componentes reutilizables: campos, tablas, cabeceras de documento</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo uso useState y useEffect en React para formularios de documentos de marketing como facturas?')">
|
|
<div class="topic-icon"><i class="ti ti-bolt" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Hooks: useState, useEffect</p>
|
|
<p class="topic-desc">Estado de formularios, carga de datos, efectos secundarios</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo manejo formularios controlados en React? Necesito manejar cabeceras y líneas de documentos ERP.')">
|
|
<div class="topic-icon"><i class="ti ti-forms" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Formularios controlados</p>
|
|
<p class="topic-desc">Controlled inputs, validación, submit — corazón del ERP</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Qué es Context API y cuándo usar Zustand o Redux para manejar estado global en un ERP con Next.js?')">
|
|
<div class="topic-icon"><i class="ti ti-share" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Context & estado global</p>
|
|
<p class="topic-desc">Compartir datos entre formularios, sesión de usuario, carrito</p>
|
|
</div>
|
|
</div>
|
|
<div class="erp-note">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<strong> Foco ERP:</strong> Crea un componente de grilla de líneas (ej. líneas de factura) donde puedas agregar, editar y eliminar filas dinámicamente.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector">↓</div>
|
|
|
|
<!-- FASE 3 -->
|
|
<div class="phase-block p3">
|
|
<div class="phase-header">
|
|
<span class="phase-badge">Fase 3</span>
|
|
<span class="phase-title">Next.js — núcleo del proyecto</span>
|
|
<span class="phase-time">~4 semanas</span>
|
|
</div>
|
|
<div class="topics-grid">
|
|
<div class="topic-card" onclick="sendPrompt('Explícame el App Router de Next.js 14+ y cómo estructuro las rutas para un ERP: datos maestros, documentos, reportes.')">
|
|
<div class="topic-icon"><i class="ti ti-route" aria-hidden="true"></i></div>
|
|
<p class="topic-name">App Router & rutas</p>
|
|
<p class="topic-desc">Rutas dinámicas para /ventas/facturas/[id], layouts anidados</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cuándo usar Server Components vs Client Components en Next.js para formularios de un ERP?')">
|
|
<div class="topic-icon"><i class="ti ti-server" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Server vs Client components</p>
|
|
<p class="topic-desc">Qué renderiza el servidor y qué el cliente en formularios ERP</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo creo API Routes en Next.js para conectarme a SAP Business One Service Layer o una base de datos?')">
|
|
<div class="topic-icon"><i class="ti ti-api" aria-hidden="true"></i></div>
|
|
<p class="topic-name">API Routes & Server Actions</p>
|
|
<p class="topic-desc">Endpoints para leer/escribir Socios, Artículos, Documentos</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('Explícame SSR, SSG y ISR en Next.js con ejemplos para listas de artículos y formularios de documentos ERP.')">
|
|
<div class="topic-icon"><i class="ti ti-refresh" aria-hidden="true"></i></div>
|
|
<p class="topic-name">SSR, SSG, ISR</p>
|
|
<p class="topic-desc">Estrategias de renderizado para datos maestros y transacciones</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo implemento middleware y autenticación con NextAuth en Next.js para un ERP con roles de usuario?')">
|
|
<div class="topic-icon"><i class="ti ti-shield-lock" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Middleware & autenticación</p>
|
|
<p class="topic-desc">Roles: vendedor, almacenista, contador — proteger rutas</p>
|
|
</div>
|
|
</div>
|
|
<div class="erp-note">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<strong> Foco ERP:</strong> Conecta Next.js con SAP Business One Service Layer (REST API) usando API Routes. Crea un CRUD completo para Socios de Negocios.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector">↓</div>
|
|
|
|
<!-- FASE 4 -->
|
|
<div class="phase-block p4">
|
|
<div class="phase-header">
|
|
<span class="phase-badge">Fase 4</span>
|
|
<span class="phase-title">Librerías clave para ERP</span>
|
|
<span class="phase-time">~3 semanas</span>
|
|
</div>
|
|
<div class="topics-grid">
|
|
<div class="topic-card" onclick="sendPrompt('¿Qué librería de UI es mejor para formularios ERP en Next.js: shadcn/ui, Ant Design o MUI? Compáralas.')">
|
|
<div class="topic-icon"><i class="ti ti-layout" aria-hidden="true"></i></div>
|
|
<p class="topic-name">UI: shadcn/ui o Ant Design</p>
|
|
<p class="topic-desc">Tablas, selects, datepickers, modales — componentes ERP listos</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo uso React Hook Form con Zod para validar formularios complejos como una Factura de Ventas en Next.js?')">
|
|
<div class="topic-icon"><i class="ti ti-check" aria-hidden="true"></i></div>
|
|
<p class="topic-name">React Hook Form + Zod</p>
|
|
<p class="topic-desc">Validación de campos: RUC, cantidades, fechas, totales</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo uso React Query (TanStack Query) para cargar y cachear datos de SAP Business One en Next.js?')">
|
|
<div class="topic-icon"><i class="ti ti-database" aria-hidden="true"></i></div>
|
|
<p class="topic-name">TanStack Query</p>
|
|
<p class="topic-desc">Cache, paginación, sincronización con el servidor SAP</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo implemento TanStack Table para grillas de documentos ERP con filtros, ordenamiento y paginación en Next.js?')">
|
|
<div class="topic-icon"><i class="ti ti-table" aria-hidden="true"></i></div>
|
|
<p class="topic-name">TanStack Table</p>
|
|
<p class="topic-desc">Grillas de líneas, listados de facturas, movimientos de almacén</p>
|
|
</div>
|
|
</div>
|
|
<div class="erp-note">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<strong> Foco ERP:</strong> Construye el formulario de Entrada de Mercancías: cabecera + grilla de líneas con artículos, lotes, almacén destino, cantidades y costos.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector">↓</div>
|
|
|
|
<!-- FASE 5 -->
|
|
<div class="phase-block p5">
|
|
<div class="phase-header">
|
|
<span class="phase-badge">Fase 5</span>
|
|
<span class="phase-title">Proyecto ERP real</span>
|
|
<span class="phase-time">~4 semanas</span>
|
|
</div>
|
|
<div class="topics-grid">
|
|
<div class="topic-card" onclick="sendPrompt('Ayúdame a diseñar la arquitectura de carpetas en Next.js para un módulo de ventas ERP con facturas, socios y artículos.')">
|
|
<div class="topic-icon"><i class="ti ti-folder" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Arquitectura de carpetas</p>
|
|
<p class="topic-desc">/ventas, /compras, /inventario, /contabilidad — módulos ERP</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo conecto Next.js directamente con SAP Business One Service Layer para crear documentos de marketing?')">
|
|
<div class="topic-icon"><i class="ti ti-plug" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Integración SAP B1</p>
|
|
<p class="topic-desc">Service Layer REST, sessions, POST/PATCH de documentos</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Qué necesito saber sobre Node.js para el backend de mi ERP en Next.js? ¿Necesito aprender Node.js por separado?')">
|
|
<div class="topic-icon"><i class="ti ti-brand-nodejs" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Node.js (mínimo necesario)</p>
|
|
<p class="topic-desc">Next.js ya incluye Node — enfócate en módulos, fs, env vars</p>
|
|
</div>
|
|
<div class="topic-card" onclick="sendPrompt('¿Cómo hago deploy de un ERP en Next.js? Explícame Vercel, Docker y otras opciones para producción.')">
|
|
<div class="topic-icon"><i class="ti ti-rocket" aria-hidden="true"></i></div>
|
|
<p class="topic-name">Deploy & producción</p>
|
|
<p class="topic-desc">Vercel, Docker, variables de entorno, HTTPS, seguridad</p>
|
|
</div>
|
|
</div>
|
|
<div class="erp-note">
|
|
<i class="ti ti-info-circle" aria-hidden="true"></i>
|
|
<strong> Proyecto final:</strong> Módulo de ventas completo: Socio de Negocios → Artículo → Factura de Ventas → Asiento Contable automático, con roles de usuario.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RESUMEN TOTAL -->
|
|
<div class="total-bar">
|
|
<div>
|
|
<p class="total-label" style="margin:0 0 2px">Duración total estimada</p>
|
|
<p class="total-val" style="margin:0">~17 semanas <span style="font-size:13px;font-weight:400;color:var(--color-text-secondary)">/ 4 meses</span></p>
|
|
</div>
|
|
<div class="progress-row">
|
|
<div class="prog-seg p1" style="flex:3"></div>
|
|
<div class="prog-seg p2" style="flex:3"></div>
|
|
<div class="prog-seg p3" style="flex:4"></div>
|
|
<div class="prog-seg p4" style="flex:3"></div>
|
|
<div class="prog-seg p5" style="flex:4"></div>
|
|
</div>
|
|
<button onclick="sendPrompt('Dame un plan de estudio semanal detallado para las 17 semanas de la ruta Next.js ERP ↗')" style="white-space:nowrap;font-size:12px">Plan semanal ↗</button>
|
|
</div>
|
|
</div>
|