George
fe22681c66
- Agrega permiso de menu para vania.barrios@tagumedica.com - Renombra test/ a tools/ (colecciones de requests SAP/ApiGateway) - Renombra vistas de frontend con sufijo View para consistencia - Refactor de componentes UI compartidos y agrega utilidades (Icon, PageLoader, SecondaryButton, FieldTooltip, errors)
32 lines
3.1 KiB
Markdown
32 lines
3.1 KiB
Markdown
# Frontend mini-erp — Documentación del Proyecto
|
|
|
|
SPA en React 19 + TypeScript + Vite + Tailwind CSS + React Router. Consume la API del backend (`mini-backend`) para operar sobre SAP Business One: socios de negocio, artículos, documentos de venta/compra, lotes y reportes.
|
|
|
|
## Documentos
|
|
|
|
| Documento | Descripción |
|
|
| ----------------------------------------------------------------- | ------------------------------------------------------------------- |
|
|
| [Dashboard](dashboard.md) | Pantalla de inicio: KPIs, accesos rápidos y noticias (hoy estático) |
|
|
| [Socios de Negocio](flujo-socios-negocio.md) | Clientes y proveedores, formulario compartido |
|
|
| [Artículos](flujo-articulos.md) | Alta y edición de artículos de inventario |
|
|
| [Lotes](flujo-lotes.md) | Aprobación/liberación de lotes (BatchNumberDetails) |
|
|
| [Documentos de Marketing](flujo-documentos-marketing.md) | Órdenes/facturas de venta y compra sobre un formulario común |
|
|
| [Reportes](reportes.md) | Los tres sistemas de reportes: HTML, Crystal e Informes |
|
|
|
|
## Convenciones
|
|
|
|
- Todos los documentos siguen el mismo formato: diagrama de arquitectura (mermaid), diagrama de secuencia del flujo principal, árbol de componentes y tabla de "Archivos Clave".
|
|
- Ver también `mini-erp/CLAUDE.md` (raíz del repo) para la arquitectura general del monorepo (`mini-backend` + `mini-frontend`) y el flujo de trabajo por cliente.
|
|
- Ver `mini-backend/docs/` para la documentación del backend (API, autenticación, proxy SAP, logging).
|
|
|
|
## Rendimiento: carga por ruta (code splitting)
|
|
|
|
`App.tsx` no importa las vistas de forma directa: cada una se carga con `React.lazy()`, agrupadas por módulo (Inventario, Socios, Ventas, Compras, Informes), y `<Suspense fallback={<PageLoader />}>` envuelve todo el árbol de rutas. Así el usuario solo descarga el JS de la pantalla que realmente visita, en vez de un único bundle con las 20+ vistas del ERP. `SapLogin` y `MainLayout` (el "shell" de la app) se mantienen fuera de esto porque se necesitan en casi toda visita.
|
|
|
|
## Componentes UI compartidos relevantes
|
|
|
|
- `Icon.tsx` (`src/components/ui/`) — registro de íconos SVG inline (buscar, copiar, editar, eliminar, etc.). No hay emojis ni librerías de iconografía externas en el proyecto.
|
|
- `FieldTooltip.tsx` — ícono ⓘ junto al label de un campo, muestra el nombre técnico SAP (prop `dbField` de `FormattedField`/`SelectField`) sin concatenarlo al texto del label.
|
|
- `PageLoader.tsx` — estado de carga a pantalla completa, reutilizado como fallback de `Suspense` y en los formularios de detalle mientras traen sus datos.
|
|
- `PrimaryButton.tsx` / `SecondaryButton.tsx` — botones de acción con dos tamaños (`size="sm"` para barras de herramientas, `size="md"` para pies de formulario).
|