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",
|
||||
"children": [
|
||||
{
|
||||
"id": "693f48ce70bbc27c",
|
||||
"id": "5b54b35ff895e8e7",
|
||||
"type": "tabs",
|
||||
"children": [
|
||||
{
|
||||
"id": "bf629ec7b999c3f6",
|
||||
"id": "e2a22082e4a8b97c",
|
||||
"type": "leaf",
|
||||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "Instructivo Git Gitea.md",
|
||||
"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",
|
||||
"title": "Instructivo Git Gitea"
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"currentTab": 2
|
||||
}
|
||||
],
|
||||
"direction": "vertical"
|
||||
@@ -183,9 +212,16 @@
|
||||
"bases:Create new base": false
|
||||
}
|
||||
},
|
||||
"active": "8edcacadca4ed7a6",
|
||||
"active": "101f09202d4d7f35",
|
||||
"lastOpenFiles": [
|
||||
"Stack Tecnológico Recomendado.md",
|
||||
"Untitled.canvas",
|
||||
"Untitled.base",
|
||||
"Roadmap Next.js.md",
|
||||
"Roadmap-nextjs-erp.md",
|
||||
"Instructivo Git Gitea.md",
|
||||
"roadmap_nextjs_erp.html",
|
||||
"2026-05-18.md",
|
||||
"Welcome.md"
|
||||
]
|
||||
}
|
||||
@@ -85,7 +85,9 @@ curl http://100.68.242.27:30000
|
||||
```
|
||||
|
||||
## 14. Acceso a Gitea
|
||||
http://100.68.242.27:30000
|
||||
|
||||
[URL de Gitea en NAS](http://100.68.242.27:30000)
|
||||
|
||||
|
||||
## 15. Flujo diario
|
||||
```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