se agrega ruta de aprendizaje next.js
This commit is contained in:
George committed
1 parent
0fd709f535
commit
fc2d7a6026
6 files changed
+1634
-7
No files matched your search
Vendored
+5
-1
@@ -1 +1,5 @@
|
|||||||
{}
|
{
|
||||||
|
"showLineNumber": true,
|
||||||
|
"livePreview": false,
|
||||||
|
"strictLineBreaks": true
|
||||||
|
}
|
||||||
Vendored
+41
-5
@@ -4,24 +4,53 @@
|
|||||||
"type": "split",
|
"type": "split",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"id": "693f48ce70bbc27c",
|
"id": "5b54b35ff895e8e7",
|
||||||
"type": "tabs",
|
"type": "tabs",
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"id": "bf629ec7b999c3f6",
|
"id": "e2a22082e4a8b97c",
|
||||||
"type": "leaf",
|
"type": "leaf",
|
||||||
"state": {
|
"state": {
|
||||||
"type": "markdown",
|
"type": "markdown",
|
||||||
"state": {
|
"state": {
|
||||||
"file": "Instructivo Git Gitea.md",
|
"file": "Instructivo Git Gitea.md",
|
||||||
"mode": "source",
|
"mode": "source",
|
||||||
"source": false
|
"source": true
|
||||||
|
},
|
||||||
|
"icon": "lucide-file",
|
||||||
|
"title": "Instructivo Git Gitea"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "143638140cd15469",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "markdown",
|
||||||
|
"state": {
|
||||||
|
"file": "Roadmap Next.js.md",
|
||||||
|
"mode": "preview",
|
||||||
|
"source": true
|
||||||
|
},
|
||||||
|
"icon": "lucide-file",
|
||||||
|
"title": "Roadmap Next.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "101f09202d4d7f35",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "markdown",
|
||||||
|
"state": {
|
||||||
|
"file": "Instructivo Git Gitea.md",
|
||||||
|
"mode": "preview",
|
||||||
|
"source": true
|
||||||
},
|
},
|
||||||
"icon": "lucide-file",
|
"icon": "lucide-file",
|
||||||
"title": "Instructivo Git Gitea"
|
"title": "Instructivo Git Gitea"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
"currentTab": 2
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"direction": "vertical"
|
"direction": "vertical"
|
||||||
@@ -183,9 +212,16 @@
|
|||||||
"bases:Create new base": false
|
"bases:Create new base": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"active": "8edcacadca4ed7a6",
|
"active": "101f09202d4d7f35",
|
||||||
"lastOpenFiles": [
|
"lastOpenFiles": [
|
||||||
|
"Stack Tecnológico Recomendado.md",
|
||||||
|
"Untitled.canvas",
|
||||||
|
"Untitled.base",
|
||||||
|
"Roadmap Next.js.md",
|
||||||
|
"Roadmap-nextjs-erp.md",
|
||||||
"Instructivo Git Gitea.md",
|
"Instructivo Git Gitea.md",
|
||||||
|
"roadmap_nextjs_erp.html",
|
||||||
|
"2026-05-18.md",
|
||||||
"Welcome.md"
|
"Welcome.md"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -85,7 +85,9 @@ curl http://100.68.242.27:30000
|
|||||||
```
|
```
|
||||||
|
|
||||||
## 14. Acceso a Gitea
|
## 14. Acceso a Gitea
|
||||||
http://100.68.242.27:30000
|
|
||||||
|
[URL de Gitea en NAS](http://100.68.242.27:30000)
|
||||||
|
|
||||||
|
|
||||||
## 15. Flujo diario
|
## 15. Flujo diario
|
||||||
```bash
|
```bash
|
||||||
|
|||||||
@@ -0,0 +1,746 @@
|
|||||||
|
# Hoja de Ruta: Desarrollo de Aplicaciones Operacionales para SAP Business One con Next.js
|
||||||
|
|
||||||
|
> Duración estimada: 4 a 5 meses
|
||||||
|
> Objetivo: Construir aplicaciones web operacionales simples, rápidas y mantenibles conectadas a SAP Business One mediante Service Layer.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Objetivo real del proyecto
|
||||||
|
|
||||||
|
El objetivo NO es crear un ERP completo como SAP Business One.
|
||||||
|
|
||||||
|
El objetivo es desarrollar:
|
||||||
|
|
||||||
|
- formularios operacionales específicos
|
||||||
|
- módulos independientes
|
||||||
|
- validaciones empresariales
|
||||||
|
- procesos rápidos para usuarios internos
|
||||||
|
|
||||||
|
Cada módulo tendrá:
|
||||||
|
- una funcionalidad específica
|
||||||
|
- su propia lógica
|
||||||
|
- su propio formulario
|
||||||
|
- integración con SAP Business One
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Filosofía del sistema
|
||||||
|
|
||||||
|
SAP Business One seguirá siendo:
|
||||||
|
|
||||||
|
```text
|
||||||
|
Sistema maestro ERP
|
||||||
|
```
|
||||||
|
|
||||||
|
La aplicación web será:
|
||||||
|
|
||||||
|
```text
|
||||||
|
Frontend operacional especializado
|
||||||
|
↓
|
||||||
|
Validaciones empresariales
|
||||||
|
↓
|
||||||
|
Integración con SAP Service Layer
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Ejemplos reales de módulos
|
||||||
|
|
||||||
|
## Almacén
|
||||||
|
- Recepción de Orden de Compra
|
||||||
|
- Transferencias de almacén
|
||||||
|
- Validación de lotes
|
||||||
|
- Conteo de inventario
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Compras
|
||||||
|
- Factura de gastos
|
||||||
|
- Factura de productos
|
||||||
|
- Distribución por centros de costo
|
||||||
|
- Validación SUNAT
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ventas
|
||||||
|
- Validación de pedidos
|
||||||
|
- Aprobaciones
|
||||||
|
- Seguimiento comercial
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Arquitectura recomendada
|
||||||
|
|
||||||
|
```text
|
||||||
|
Frontend
|
||||||
|
- Next.js
|
||||||
|
- TypeScript
|
||||||
|
- React Hook Form
|
||||||
|
- TanStack Table
|
||||||
|
|
||||||
|
Backend Integración
|
||||||
|
- FastAPI
|
||||||
|
|
||||||
|
ERP
|
||||||
|
- SAP Business One Service Layer
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Flujo típico de trabajo
|
||||||
|
|
||||||
|
```text
|
||||||
|
1. Consultar información desde SAP
|
||||||
|
2. Mostrar información al usuario
|
||||||
|
3. Validar reglas operacionales
|
||||||
|
4. Permitir edición controlada
|
||||||
|
5. Enviar información final a SAP
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Principios de diseño UI
|
||||||
|
|
||||||
|
## El sistema debe ser:
|
||||||
|
|
||||||
|
- rápido
|
||||||
|
- minimalista
|
||||||
|
- estable
|
||||||
|
- predecible
|
||||||
|
- orientado a productividad
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Evitar
|
||||||
|
|
||||||
|
- animaciones
|
||||||
|
- dashboards innecesarios
|
||||||
|
- exceso de colores
|
||||||
|
- imágenes decorativas
|
||||||
|
- diseño tipo startup
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Priorizar
|
||||||
|
|
||||||
|
- velocidad
|
||||||
|
- teclado
|
||||||
|
- tabulación
|
||||||
|
- búsqueda rápida
|
||||||
|
- formularios densos
|
||||||
|
- tablas operacionales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 1 — Fundamentos web modernos
|
||||||
|
Duración: ~3 semanas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# JavaScript moderno
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- let / const
|
||||||
|
- funciones
|
||||||
|
- arrays
|
||||||
|
- objetos
|
||||||
|
- async / await
|
||||||
|
- fetch API
|
||||||
|
- módulos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Consumir APIs y transformar datos empresariales.
|
||||||
|
|
||||||
|
Ejemplos:
|
||||||
|
- obtener OC
|
||||||
|
- obtener proveedores
|
||||||
|
- listar artículos
|
||||||
|
- validar estados
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# HTML y CSS
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- formularios
|
||||||
|
- tablas
|
||||||
|
- inputs
|
||||||
|
- layouts
|
||||||
|
- Flexbox
|
||||||
|
- CSS Grid
|
||||||
|
- responsive básico
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Construir:
|
||||||
|
- formularios operacionales
|
||||||
|
- tablas densas
|
||||||
|
- layouts empresariales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# TypeScript
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- interfaces
|
||||||
|
- types
|
||||||
|
- arrays tipados
|
||||||
|
- objetos anidados
|
||||||
|
- generics
|
||||||
|
- Partial
|
||||||
|
- Pick
|
||||||
|
- Omit
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Modelar:
|
||||||
|
- documentos
|
||||||
|
- líneas
|
||||||
|
- almacenes
|
||||||
|
- lotes
|
||||||
|
- centros de costo
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 2 — React para sistemas empresariales
|
||||||
|
Duración: ~3 semanas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Componentes
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- componentes reutilizables
|
||||||
|
- props
|
||||||
|
- composición
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Crear:
|
||||||
|
- inputs
|
||||||
|
- tablas
|
||||||
|
- formularios
|
||||||
|
- modales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Hooks React
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- useState
|
||||||
|
- useEffect
|
||||||
|
- useMemo
|
||||||
|
- useCallback
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Controlar:
|
||||||
|
- formularios
|
||||||
|
- búsquedas
|
||||||
|
- filtros
|
||||||
|
- cálculos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Formularios controlados
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- eventos
|
||||||
|
- validaciones
|
||||||
|
- manejo errores
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Validar:
|
||||||
|
- cantidades
|
||||||
|
- RUC
|
||||||
|
- fechas
|
||||||
|
- almacenes
|
||||||
|
- centros de costo
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 3 — Formularios empresariales modernos
|
||||||
|
Duración: ~2 semanas
|
||||||
|
|
||||||
|
> Esta es una de las fases MÁS importantes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# React Hook Form
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- useForm
|
||||||
|
- Controller
|
||||||
|
- FormProvider
|
||||||
|
- useFieldArray
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Manejar:
|
||||||
|
- formularios grandes
|
||||||
|
- líneas dinámicas
|
||||||
|
- validaciones rápidas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Zod
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- schemas
|
||||||
|
- validaciones
|
||||||
|
- refinements
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Centralizar reglas empresariales.
|
||||||
|
|
||||||
|
Ejemplos:
|
||||||
|
- cantidad > 0
|
||||||
|
- RUC válido
|
||||||
|
- lote obligatorio
|
||||||
|
- centro de costo requerido
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 4 — Next.js moderno
|
||||||
|
Duración: ~4 semanas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# App Router
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- app/
|
||||||
|
- layouts
|
||||||
|
- rutas dinámicas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ejemplos
|
||||||
|
|
||||||
|
```text
|
||||||
|
/recepcion-oc
|
||||||
|
/factura-gastos
|
||||||
|
/factura-productos
|
||||||
|
/transferencias
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Server Components y Client Components
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- use client
|
||||||
|
- separación cliente/servidor
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Separar:
|
||||||
|
- carga datos
|
||||||
|
- UI
|
||||||
|
- validaciones
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# API Routes
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- GET
|
||||||
|
- POST
|
||||||
|
- PATCH
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Comunicación:
|
||||||
|
- frontend
|
||||||
|
- FastAPI
|
||||||
|
- SAP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Autenticación
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- sesiones
|
||||||
|
- middleware
|
||||||
|
- protección rutas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Escenario real
|
||||||
|
|
||||||
|
Usuario:
|
||||||
|
- existe en OHEM
|
||||||
|
- usa login corporativo
|
||||||
|
- trabaja con usuario SAP indirecto
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 5 — Estado servidor y tablas
|
||||||
|
Duración: ~2 semanas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# TanStack Query
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- fetching
|
||||||
|
- cache
|
||||||
|
- invalidaciones
|
||||||
|
- mutations
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Optimizar:
|
||||||
|
- búsquedas
|
||||||
|
- consultas SAP
|
||||||
|
- refresco de datos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# TanStack Table
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- filtros
|
||||||
|
- sorting
|
||||||
|
- paginación
|
||||||
|
- selección filas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Objetivo ERP
|
||||||
|
|
||||||
|
Construir:
|
||||||
|
- líneas documento
|
||||||
|
- búsquedas
|
||||||
|
- listados operacionales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 6 — Componentes ERP reutilizables
|
||||||
|
Duración: ~2 semanas
|
||||||
|
|
||||||
|
> Esta fase define la calidad del sistema completo.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Componentes clave
|
||||||
|
|
||||||
|
## ERPDataTable
|
||||||
|
|
||||||
|
Tabla reutilizable:
|
||||||
|
- filtros
|
||||||
|
- búsqueda
|
||||||
|
- selección
|
||||||
|
- teclado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# SearchModal
|
||||||
|
|
||||||
|
Modal reutilizable para:
|
||||||
|
- artículos
|
||||||
|
- proveedores
|
||||||
|
- clientes
|
||||||
|
- órdenes
|
||||||
|
- almacenes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Inputs inteligentes
|
||||||
|
|
||||||
|
Crear componentes:
|
||||||
|
- InputRUC
|
||||||
|
- InputCurrency
|
||||||
|
- InputDate
|
||||||
|
- InputQuantity
|
||||||
|
- InputWarehouse
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Layouts reutilizables
|
||||||
|
|
||||||
|
## Crear
|
||||||
|
|
||||||
|
- FormLayout
|
||||||
|
- FilterLayout
|
||||||
|
- ModalLayout
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 7 — Backend integración FastAPI
|
||||||
|
Duración: ~2 semanas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# FastAPI
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- endpoints
|
||||||
|
- modelos Pydantic
|
||||||
|
- autenticación
|
||||||
|
- manejo errores
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Objetivo ERP
|
||||||
|
|
||||||
|
Centralizar:
|
||||||
|
- login SAP
|
||||||
|
- sesión Service Layer
|
||||||
|
- validaciones
|
||||||
|
- logs
|
||||||
|
- auditoría
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Arquitectura recomendada
|
||||||
|
|
||||||
|
```text
|
||||||
|
Next.js
|
||||||
|
↓
|
||||||
|
FastAPI
|
||||||
|
↓
|
||||||
|
SAP Service Layer
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 8 — Integración SAP Business One
|
||||||
|
Duración: ~2 semanas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Aprender
|
||||||
|
|
||||||
|
- login Service Layer
|
||||||
|
- cookies sesión
|
||||||
|
- GET
|
||||||
|
- POST
|
||||||
|
- PATCH
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Escenarios reales
|
||||||
|
|
||||||
|
## Recepción OC
|
||||||
|
|
||||||
|
```text
|
||||||
|
1. Buscar OC
|
||||||
|
2. Mostrar pendientes
|
||||||
|
3. Registrar cantidades
|
||||||
|
4. Crear Entrada Mercancía
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Factura proveedor
|
||||||
|
|
||||||
|
```text
|
||||||
|
1. Traer Entrada Mercancía
|
||||||
|
2. Completar datos contables
|
||||||
|
3. Distribuir gastos
|
||||||
|
4. Crear Factura Proveedor
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Validaciones reales
|
||||||
|
|
||||||
|
## Manejar
|
||||||
|
|
||||||
|
- sesión expirada
|
||||||
|
- errores SAP
|
||||||
|
- timeouts
|
||||||
|
- validaciones SUNAT
|
||||||
|
- concurrencia
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fase 9 — Seguridad y despliegue
|
||||||
|
Duración: ~1 semana
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Seguridad
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- HTTPS
|
||||||
|
- CORS
|
||||||
|
- middleware
|
||||||
|
- protección APIs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Deploy
|
||||||
|
|
||||||
|
## Aprender
|
||||||
|
|
||||||
|
- Docker
|
||||||
|
- Nginx
|
||||||
|
- Linux
|
||||||
|
- variables entorno
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Estructura recomendada
|
||||||
|
|
||||||
|
```text
|
||||||
|
/apps
|
||||||
|
/recepcion-oc
|
||||||
|
/factura-gastos
|
||||||
|
/factura-productos
|
||||||
|
/transferencias
|
||||||
|
|
||||||
|
/shared-ui
|
||||||
|
/shared-api
|
||||||
|
/shared-types
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Filosofía modular
|
||||||
|
|
||||||
|
Cada módulo:
|
||||||
|
- independiente
|
||||||
|
- simple
|
||||||
|
- mantenible
|
||||||
|
- desplegable
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Proyecto inicial recomendado
|
||||||
|
|
||||||
|
## Recepción de Orden de Compra
|
||||||
|
|
||||||
|
Porque incluye:
|
||||||
|
|
||||||
|
- filtros
|
||||||
|
- tablas
|
||||||
|
- modales
|
||||||
|
- líneas
|
||||||
|
- validaciones
|
||||||
|
- SAP Service Layer
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Stack recomendado
|
||||||
|
|
||||||
|
## Frontend
|
||||||
|
|
||||||
|
- Next.js
|
||||||
|
- TypeScript
|
||||||
|
- Tailwind CSS
|
||||||
|
- shadcn/ui
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Formularios
|
||||||
|
|
||||||
|
- React Hook Form
|
||||||
|
- Zod
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tablas
|
||||||
|
|
||||||
|
- TanStack Table
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Estado servidor
|
||||||
|
|
||||||
|
- TanStack Query
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Backend
|
||||||
|
|
||||||
|
- FastAPI
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Recursos recomendados
|
||||||
|
|
||||||
|
| Tema | Recurso |
|
||||||
|
|---|---|
|
||||||
|
| JavaScript | https://javascript.info |
|
||||||
|
| TypeScript | https://www.typescriptlang.org/docs |
|
||||||
|
| React | https://react.dev |
|
||||||
|
| Next.js | https://nextjs.org/learn |
|
||||||
|
| Tailwind CSS | https://tailwindcss.com |
|
||||||
|
| React Hook Form | https://react-hook-form.com |
|
||||||
|
| Zod | https://zod.dev |
|
||||||
|
| TanStack Query | https://tanstack.com/query |
|
||||||
|
| TanStack Table | https://tanstack.com/table |
|
||||||
|
| FastAPI | https://fastapi.tiangolo.com |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Resumen total
|
||||||
|
|
||||||
|
| Fase | Tema | Semanas |
|
||||||
|
|---|---|---|
|
||||||
|
| 1 | Fundamentos web | 3 |
|
||||||
|
| 2 | React empresarial | 3 |
|
||||||
|
| 3 | Formularios modernos | 2 |
|
||||||
|
| 4 | Next.js | 4 |
|
||||||
|
| 5 | Estado y tablas | 2 |
|
||||||
|
| 6 | Componentes ERP reutilizables | 2 |
|
||||||
|
| 7 | FastAPI integración | 2 |
|
||||||
|
| 8 | SAP Business One | 2 |
|
||||||
|
| 9 | Seguridad y deploy | 1 |
|
||||||
|
| Total | | ~21 semanas |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Meta final
|
||||||
|
|
||||||
|
Construir aplicaciones operacionales empresariales:
|
||||||
|
- rápidas
|
||||||
|
- simples
|
||||||
|
- mantenibles
|
||||||
|
- desacopladas
|
||||||
|
- conectadas a SAP Business One
|
||||||
|
|
||||||
|
Sin intentar reinventar un ERP completo. La humanidad ya ha sufrido suficiente con eso.
|
||||||
@@ -0,0 +1,594 @@
|
|||||||
|
# Stack Tecnológico Recomendado
|
||||||
|
## Aplicaciones Operacionales para SAP Business One
|
||||||
|
|
||||||
|
> Objetivo: construir aplicaciones web empresariales simples, rápidas, mantenibles y desacopladas para procesos específicos conectados a SAP Business One mediante Service Layer.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Filosofía tecnológica
|
||||||
|
|
||||||
|
El objetivo NO es crear:
|
||||||
|
- una plataforma compleja
|
||||||
|
- microservicios innecesarios
|
||||||
|
- interfaces visualmente exageradas
|
||||||
|
|
||||||
|
El objetivo es construir:
|
||||||
|
- formularios operacionales rápidos
|
||||||
|
- tablas empresariales eficientes
|
||||||
|
- validaciones sólidas
|
||||||
|
- integración estable con SAP Business One
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Arquitectura general recomendada
|
||||||
|
|
||||||
|
```text
|
||||||
|
Frontend (Next.js)
|
||||||
|
↓
|
||||||
|
Backend Integración (FastAPI)
|
||||||
|
↓
|
||||||
|
SAP Business One Service Layer
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Lenguajes recomendados
|
||||||
|
|
||||||
|
# 1. TypeScript
|
||||||
|
|
||||||
|
## Uso principal
|
||||||
|
Frontend empresarial.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Se utilizará en:
|
||||||
|
- Next.js
|
||||||
|
- React
|
||||||
|
- Formularios
|
||||||
|
- Tablas
|
||||||
|
- Validaciones
|
||||||
|
- Componentes reutilizables
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ¿Por qué usar TypeScript?
|
||||||
|
|
||||||
|
Porque los sistemas ERP manejan:
|
||||||
|
- muchos datos
|
||||||
|
- documentos complejos
|
||||||
|
- estructuras anidadas
|
||||||
|
- validaciones empresariales
|
||||||
|
|
||||||
|
TypeScript ayuda a:
|
||||||
|
- reducir errores
|
||||||
|
- mantener consistencia
|
||||||
|
- mejorar mantenimiento
|
||||||
|
- detectar problemas temprano
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ejemplo típico ERP
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface PurchaseOrderLine {
|
||||||
|
itemCode: string
|
||||||
|
description: string
|
||||||
|
quantity: number
|
||||||
|
warehouseCode: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 2. Python
|
||||||
|
|
||||||
|
## Uso principal
|
||||||
|
Backend de integración.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Se utilizará en:
|
||||||
|
- FastAPI
|
||||||
|
- integración SAP
|
||||||
|
- validaciones empresariales
|
||||||
|
- integración SUNAT
|
||||||
|
- logs
|
||||||
|
- auditoría
|
||||||
|
- automatizaciones
|
||||||
|
- procesos auxiliares
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ¿Por qué Python?
|
||||||
|
|
||||||
|
Porque:
|
||||||
|
- es rápido de desarrollar
|
||||||
|
- excelente para APIs
|
||||||
|
- ideal para integración empresarial
|
||||||
|
- muy compatible con automatización
|
||||||
|
- excelente ecosistema
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# IDE recomendado
|
||||||
|
|
||||||
|
# Antigravity
|
||||||
|
|
||||||
|
## IDE principal
|
||||||
|
|
||||||
|
Antigravity puede ser muy útil para este proyecto debido a:
|
||||||
|
- generación acelerada de código
|
||||||
|
- asistencia IA
|
||||||
|
- productividad
|
||||||
|
- soporte moderno TypeScript y React
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Uso recomendado de Antigravity
|
||||||
|
|
||||||
|
## Excelente para generar:
|
||||||
|
- formularios
|
||||||
|
- CRUDs
|
||||||
|
- tablas
|
||||||
|
- hooks
|
||||||
|
- componentes
|
||||||
|
- validaciones
|
||||||
|
- clientes API
|
||||||
|
- schemas Zod
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## NO depender completamente de IA para:
|
||||||
|
- arquitectura
|
||||||
|
- seguridad
|
||||||
|
- lógica SAP
|
||||||
|
- reglas contables
|
||||||
|
- autorizaciones
|
||||||
|
- estructura del sistema
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Filosofía correcta con IA
|
||||||
|
|
||||||
|
```text
|
||||||
|
Arquitectura y lógica:
|
||||||
|
Manual
|
||||||
|
|
||||||
|
Implementación repetitiva:
|
||||||
|
Asistida por IA
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Recomendación importante
|
||||||
|
|
||||||
|
La IA debe:
|
||||||
|
- acelerar desarrollo
|
||||||
|
- reducir boilerplate
|
||||||
|
- mejorar productividad
|
||||||
|
|
||||||
|
La IA NO debe:
|
||||||
|
- tomar decisiones arquitectónicas
|
||||||
|
- definir reglas empresariales
|
||||||
|
- controlar diseño de integración SAP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# VS Code como respaldo
|
||||||
|
|
||||||
|
## Recomendado instalar también:
|
||||||
|
Visual Studio Code.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Motivos
|
||||||
|
- estabilidad
|
||||||
|
- debugging excelente
|
||||||
|
- ecosistema enorme
|
||||||
|
- respaldo confiable
|
||||||
|
- herramientas empresariales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Extensiones recomendadas
|
||||||
|
|
||||||
|
## Frontend
|
||||||
|
|
||||||
|
- ES7+ React snippets
|
||||||
|
- Tailwind CSS IntelliSense
|
||||||
|
- ESLint
|
||||||
|
- Prettier
|
||||||
|
- Error Lens
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Python
|
||||||
|
|
||||||
|
- Python
|
||||||
|
- Pylance
|
||||||
|
- Ruff
|
||||||
|
- Black Formatter
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Librerías Frontend
|
||||||
|
|
||||||
|
# Next.js
|
||||||
|
|
||||||
|
## Framework principal
|
||||||
|
|
||||||
|
Se utilizará para:
|
||||||
|
- páginas
|
||||||
|
- layouts
|
||||||
|
- formularios
|
||||||
|
- módulos operacionales
|
||||||
|
- autenticación
|
||||||
|
- API routes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ¿Por qué Next.js?
|
||||||
|
|
||||||
|
Porque:
|
||||||
|
- estructura moderna
|
||||||
|
- excelente soporte TypeScript
|
||||||
|
- arquitectura ordenada
|
||||||
|
- ideal para aplicaciones empresariales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# React
|
||||||
|
|
||||||
|
## Base UI
|
||||||
|
|
||||||
|
React será utilizado para:
|
||||||
|
- componentes
|
||||||
|
- formularios
|
||||||
|
- tablas
|
||||||
|
- modales
|
||||||
|
- interacción usuario
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tailwind CSS
|
||||||
|
|
||||||
|
## Framework CSS recomendado
|
||||||
|
|
||||||
|
Ideal para:
|
||||||
|
- sistemas empresariales
|
||||||
|
- diseño minimalista
|
||||||
|
- formularios densos
|
||||||
|
- layouts rápidos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ventajas
|
||||||
|
|
||||||
|
- rápido
|
||||||
|
- consistente
|
||||||
|
- fácil mantenimiento
|
||||||
|
- poco CSS manual
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# shadcn/ui
|
||||||
|
|
||||||
|
## Librería UI recomendada
|
||||||
|
|
||||||
|
Ideal para:
|
||||||
|
- modales
|
||||||
|
- dialogs
|
||||||
|
- tablas
|
||||||
|
- formularios
|
||||||
|
- selects
|
||||||
|
- popovers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ventaja principal
|
||||||
|
|
||||||
|
Los componentes:
|
||||||
|
- son modificables
|
||||||
|
- quedan dentro del proyecto
|
||||||
|
- no dependen de librerías cerradas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Formularios
|
||||||
|
|
||||||
|
# React Hook Form
|
||||||
|
|
||||||
|
## Librería MÁS importante del frontend
|
||||||
|
|
||||||
|
Se utilizará para:
|
||||||
|
- formularios complejos
|
||||||
|
- validaciones
|
||||||
|
- líneas dinámicas
|
||||||
|
- formularios ERP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Casos reales
|
||||||
|
|
||||||
|
- facturas
|
||||||
|
- entradas mercancía
|
||||||
|
- transferencias
|
||||||
|
- gastos
|
||||||
|
- validaciones tributarias
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Zod
|
||||||
|
|
||||||
|
## Validaciones empresariales
|
||||||
|
|
||||||
|
Se utilizará para:
|
||||||
|
- validar formularios
|
||||||
|
- validar payloads
|
||||||
|
- centralizar reglas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ejemplos
|
||||||
|
|
||||||
|
- RUC válido
|
||||||
|
- cantidad > 0
|
||||||
|
- centro costo obligatorio
|
||||||
|
- lote requerido
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Manejo de datos
|
||||||
|
|
||||||
|
# TanStack Query
|
||||||
|
|
||||||
|
## Manejo de estado servidor
|
||||||
|
|
||||||
|
Se utilizará para:
|
||||||
|
- consultas SAP
|
||||||
|
- cache
|
||||||
|
- refresh
|
||||||
|
- sincronización datos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ventajas
|
||||||
|
|
||||||
|
- evita consultas repetidas
|
||||||
|
- mejora performance
|
||||||
|
- simplifica fetching
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tablas ERP
|
||||||
|
|
||||||
|
# TanStack Table
|
||||||
|
|
||||||
|
## Librería crítica ERP
|
||||||
|
|
||||||
|
Se utilizará para:
|
||||||
|
- líneas documento
|
||||||
|
- listados
|
||||||
|
- filtros
|
||||||
|
- selección
|
||||||
|
- edición
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Funcionalidades importantes
|
||||||
|
|
||||||
|
- filtros
|
||||||
|
- sorting
|
||||||
|
- búsqueda
|
||||||
|
- navegación teclado
|
||||||
|
- paginación
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Backend recomendado
|
||||||
|
|
||||||
|
# FastAPI
|
||||||
|
|
||||||
|
## Backend principal
|
||||||
|
|
||||||
|
FastAPI será utilizado para:
|
||||||
|
- integración SAP
|
||||||
|
- autenticación
|
||||||
|
- validaciones
|
||||||
|
- logs
|
||||||
|
- auditoría
|
||||||
|
- APIs internas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Arquitectura recomendada
|
||||||
|
|
||||||
|
```text
|
||||||
|
Next.js
|
||||||
|
↓
|
||||||
|
FastAPI
|
||||||
|
↓
|
||||||
|
SAP Service Layer
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ¿Por qué usar FastAPI?
|
||||||
|
|
||||||
|
Porque:
|
||||||
|
- rápido
|
||||||
|
- limpio
|
||||||
|
- tipado
|
||||||
|
- excelente documentación
|
||||||
|
- ideal para APIs empresariales
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# SAP Business One
|
||||||
|
|
||||||
|
## SAP seguirá siendo:
|
||||||
|
|
||||||
|
```text
|
||||||
|
Sistema maestro ERP
|
||||||
|
```
|
||||||
|
|
||||||
|
La aplicación web:
|
||||||
|
- NO reemplaza SAP
|
||||||
|
- NO replica SAP completo
|
||||||
|
|
||||||
|
La aplicación:
|
||||||
|
- simplifica procesos específicos
|
||||||
|
- mejora experiencia operacional
|
||||||
|
- agrega validaciones
|
||||||
|
- acelera tareas
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Herramientas adicionales
|
||||||
|
|
||||||
|
# Postman o Insomnia
|
||||||
|
|
||||||
|
## Para pruebas API
|
||||||
|
|
||||||
|
Utilizados para probar:
|
||||||
|
- SAP Service Layer
|
||||||
|
- FastAPI
|
||||||
|
- APIs SUNAT
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Obsidian
|
||||||
|
|
||||||
|
## Documentación técnica
|
||||||
|
|
||||||
|
Ideal para:
|
||||||
|
- arquitectura
|
||||||
|
- flujos
|
||||||
|
- snippets
|
||||||
|
- documentación SAP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Git
|
||||||
|
|
||||||
|
## Control versiones
|
||||||
|
|
||||||
|
Recomendado:
|
||||||
|
- Git
|
||||||
|
- GitHub
|
||||||
|
- Gitea
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
|
||||||
|
## Deploy empresarial
|
||||||
|
|
||||||
|
Aprender:
|
||||||
|
- Docker
|
||||||
|
- Docker Compose
|
||||||
|
- Nginx
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Organización recomendada
|
||||||
|
|
||||||
|
```text
|
||||||
|
/apps
|
||||||
|
/recepcion-oc
|
||||||
|
/factura-gastos
|
||||||
|
/factura-productos
|
||||||
|
/transferencias
|
||||||
|
|
||||||
|
/shared-ui
|
||||||
|
/shared-api
|
||||||
|
/shared-types
|
||||||
|
/shared-validations
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Filosofía modular
|
||||||
|
|
||||||
|
Cada módulo debe ser:
|
||||||
|
- independiente
|
||||||
|
- simple
|
||||||
|
- mantenible
|
||||||
|
- desacoplado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Componentes reutilizables críticos
|
||||||
|
|
||||||
|
## SearchModal
|
||||||
|
|
||||||
|
Modal reutilizable para:
|
||||||
|
- artículos
|
||||||
|
- proveedores
|
||||||
|
- clientes
|
||||||
|
- órdenes compra
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ERPDataTable
|
||||||
|
|
||||||
|
Tabla reutilizable:
|
||||||
|
- filtros
|
||||||
|
- búsqueda
|
||||||
|
- selección
|
||||||
|
- teclado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Inputs inteligentes
|
||||||
|
|
||||||
|
Crear:
|
||||||
|
- InputRUC
|
||||||
|
- InputCurrency
|
||||||
|
- InputDate
|
||||||
|
- InputQuantity
|
||||||
|
- InputWarehouse
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Prioridades reales de aprendizaje
|
||||||
|
|
||||||
|
# Prioridad máxima
|
||||||
|
|
||||||
|
1. TypeScript
|
||||||
|
2. React Hook Form
|
||||||
|
3. TanStack Table
|
||||||
|
4. FastAPI
|
||||||
|
5. SAP Service Layer
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Prioridad media
|
||||||
|
|
||||||
|
6. Next.js
|
||||||
|
7. TanStack Query
|
||||||
|
8. Zod
|
||||||
|
9. Docker
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Prioridad baja
|
||||||
|
|
||||||
|
- Redux
|
||||||
|
- animaciones
|
||||||
|
- dashboards complejos
|
||||||
|
- SEO
|
||||||
|
- diseño visual avanzado
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Objetivo final
|
||||||
|
|
||||||
|
Construir aplicaciones empresariales:
|
||||||
|
- rápidas
|
||||||
|
- operacionales
|
||||||
|
- mantenibles
|
||||||
|
- desacopladas
|
||||||
|
- integradas con SAP Business One
|
||||||
|
|
||||||
|
Sin intentar reinventar un ERP completo. La industria ya tiene suficientes cicatrices por eso.
|
||||||
@@ -0,0 +1,245 @@
|
|||||||
|
|
||||||
|
<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>
|
||||||
Reference in new issue
Block a user