GeorgeandClaude Sonnet 5
f58f4292c3
- Nuevo Icon.tsx (reemplaza emojis en toda la app), FieldTooltip, ConfirmModal, PageLoader, SecondaryButton, hook useSapCatalog, utils/errors (getErrorMessage). - App.tsx: code-splitting con lazy()+Suspense+PageLoader para todas las rutas. - MainLayout.tsx: menú usa Icon.tsx en vez de emojis. - FormattedField/SelectField: soporte de dbField+tooltip, multiline. - DenseTable/FilterBar/ListViewTemplate: onClear, mejoras varias. - PrimaryButton: variante de tamaño sm/md. - Renombres *View.tsx para uniformar el naming de vistas de detalle/mantenimiento (Dashboard, Items, BatchNumberDetails, Customers, Suppliers, Invoices, Orders, PurchaseOrders, PurchaseInvoices) y SapLogin -> SapLoginForm. - BatchNumberDetailsList: filtros y columna de descripción de artículo. - Configs de reportes e iconos de módulos actualizados a Icon.tsx. - Ajustes de paleta en los 4 temas CSS. - Docs actualizadas. Se excluyó explícitamente del backport (queda solo en cliente/tagumedica, no es reusable sin adaptar a los UDFs propios de cada cliente): - Vistas InmovilizarLotesView, LiberarLotesView, ConfirmarLiberacionLoteView y sus rutas/ítems de menú. - types/sapInventoryLock.ts (contrato con los UDFs U_SIS_MOVINV/U_EXX_TIPOOPER/U_SIS_TIPDESP/U_SIS_MOTALM de Tagumedica). - En BatchForm.tsx: los 3 campos U_SIS_MOTEST/U_SIS_COMEST/U_SIS_ACCTOM (Motivo/Comentario/Acción), manteniendo el resto de mejoras genéricas del archivo y reactivando el campo estándar "Detalles/Observaciones" que en tagumedica había quedado comentado sin justificación genérica. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
3.1 KiB
3.1 KiB
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 | Pantalla de inicio: KPIs, accesos rápidos y noticias (hoy estático) |
| Socios de Negocio | Clientes y proveedores, formulario compartido |
| Artículos | Alta y edición de artículos de inventario |
| Lotes | Aprobación/liberación de lotes (BatchNumberDetails) |
| Documentos de Marketing | Órdenes/facturas de venta y compra sobre un formulario común |
| Reportes | 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 (propdbFielddeFormattedField/SelectField) sin concatenarlo al texto del label.PageLoader.tsx— estado de carga a pantalla completa, reutilizado como fallback deSuspensey 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).