mini-erp/mini-frontend/docs/flujo-lotes.md

Flujo de Procesamiento — Detalle de Lotes

Arquitectura General

graph TB
  subgraph "Frontend React (sap-frontend)"
    RT[Router App.tsx]
    VISTA[BatchNumberDetails.tsx]
    FORM[BatchForm.tsx]
    LIST[BatchNumberDetailsList.tsx]
    LIST_TMPL[ListViewTemplate.tsx]
    UI_FF[FormattedField.tsx]
    UI_SEL[SelectField.tsx]
    UI_TABLE[DenseTable.tsx]
    API[api.ts]
    ENUMS[enums.ts]
    TYPES[types/sapBatch.ts]
  end

  subgraph "Backend FastAPI (mini-backend)"
    ROUTER[routers/batch.py]
    CORE[core/sap.py<br/>forward_to_sapb1]
  end

  subgraph "SAP Business One"
    SL[Service Layer<br/>BatchNumberDetails]
  end

  RT --> VISTA
  RT --> LIST
  VISTA --> FORM
  LIST --> LIST_TMPL
  FORM --> UI_FF
  FORM --> UI_SEL
  FORM --> API
  FORM --> ENUMS
  FORM --> TYPES
  LIST_TMPL --> UI_TABLE
  LIST_TMPL --> API

  API -->|GET/PATCH| ROUTER
  ROUTER -->|proxy| CORE
  CORE -->|B1SESSION| SL

Flujo Vista de Lista → Editar Lote

sequenceDiagram
  actor User as Usuario
  participant Router as App.tsx
  participant ListView as BatchNumberDetailsList
  participant LVT as ListViewTemplate
  participant DTable as DenseTable
  participant DetailView as BatchNumberDetails
  participant Form as BatchForm
  participant API as api.ts
  participant Backend as backend batch.py
  participant SAP as SAP Service Layer

  User->>Router: /inventario/lotes
  Router->>ListView: render
  ListView->>LVT: <ListViewTemplate endpoint="BatchNumberDetails" .../>
  LVT->>API: GET /api/BatchNumberDetails?skip=0&top=50&fields=...
  API->>Backend: fetch con X-Session-Token
  Backend->>SAP: GET BatchNumberDetails (con B1SESSION)
  SAP-->>Backend: JSON con datos
  Backend-->>API: JSON response
  API-->>LVT: json.value[]
  LVT->>DTable: render rows
  DTable-->>User: tabla con lotes

  User->>DTable: clic en editar (lote 2032586)
  DTable->>Router: navigate("/inventario/lotes/mantenimiento?code=2032586")
  Router->>DetailView: render con searchParams.code
  DetailView->>Form: <BatchForm batchId="2032586" />
  Form->>API: GET /api/BatchNumberDetails/2032586
  API->>Backend: fetch
  Backend->>SAP: GET BatchNumberDetails(2032586)
  SAP-->>Backend: {Batch, ItemCode, U_SIS_ESTLOT, U_SIS_ESTLIB, ...}
  Backend-->>API: JSON raw SAP
  API-->>Form: data
  Form->>Form: mapSapToFriendly(data)
  Note over Form: U_SIS_ESTLOT → EstadoAprobacion<br/>U_SIS_ESTLIB → EstadoLiberacion<br/>U_SIS_FECAPROB → FechaAprobacion

  Form->>UI_SEL: <SelectField value={EstadoAprobacion} />
  Form->>UI_FF: <FormattedField value={FechaAprobacion} />
  Form-->>User: formulario con valores cargados

  User->>Form: edita campos y clic "Actualizar Lote"
  Form->>API: PATCH /api/BatchNumberDetails/2032586
  Note over Form,API: body: {U_SIS_ESTLOT: "102", U_SIS_OBSER: "...", ...}
  API->>Backend: fetch PATCH
  Backend->>SAP: PATCH BatchNumberDetails(2032586)
  SAP-->>Backend: 204 No Content
  Backend-->>API: 204
  API-->>Form: ok
  Form-->>User: "Lote actualizado exitosamente"

Árbol de Componentes

App.tsx (BrowserRouter)
├── /login
│   └── SapLogin.tsx
└── / (ProtectedRoute → MainLayout)
    └── /inventario
        ├── /lotes
        │   └── BatchNumberDetailsList.tsx
        │       └── ListViewTemplate.tsx
        │           ├── SearchInput.tsx
        │           ├── PrimaryButton.tsx
        │           ├── DenseTable.tsx
        │           │   └── formatValue() [formatters.ts]
        │           └── PaginationBar.tsx
        └── /lotes/mantenimiento
            └── BatchNumberDetails.tsx
                └── BatchForm.tsx
                    ├── FormattedField.tsx  (x10)
                    └── SelectField.tsx     (x2)

Mapeo de Nombres SAP → Friendly

El label visible ya no concatena el nombre técnico (antes: "Estado de Aprobación (U_SIS_ESTLOT)", partiéndose en 2 líneas y deformando la grilla). Ahora el label muestra solo el nombre amigable y el campo SAP aparece en un tooltip (ícono ⓘ) vía el prop dbField de FormattedField/SelectField — ver FieldTooltip.tsx.

Campo SAP	Nombre Amigable	Tipo	Componente
Batch	Batch	display	FormattedField
ItemCode	ItemCode	display	FormattedField
ItemDescription	ItemDescription	display	FormattedField
DocEntry	DocEntry	display	FormattedField
BatchAttribute1	BatchAttribute1	input text	FormattedField
BatchAttribute2	BatchAttribute2	input text	FormattedField
AdmissionDate	AdmissionDate	display date	FormattedField
ManufacturingDate	ManufacturingDate	display date	FormattedField
ExpirationDate	ExpirationDate	input date	FormattedField
U_SIS_ESTLOT	EstadoAprobacion	select	SelectField
U_SIS_FECAPROB	FechaAprobacion	input date	FormattedField
U_SIS_RESPAPROB	ResponsableAprobacion	input text	FormattedField
U_SIS_OBSER	Observaciones	input text	FormattedField
U_SIS_ESTLIB	EstadoLiberacion	select	SelectField
U_SIS_FECLIB	FechaLiberacion	input date	FormattedField
U_SIS_HORAPROB	HoraAprobacion	input text	FormattedField

Archivos Clave

Archivo	Ruta	Propósito
BatchNumberDetails.tsx	src/views/inventario/	Vista detalle, extrae code de URL y renderiza BatchForm
BatchForm.tsx	src/components/	Formulario edición, fetch + mapeo SAP + PATCH
SelectField.tsx	src/components/ui/	Select reutilizable con String(value) para compatibilidad
FormattedField.tsx	src/components/ui/	Campo display/input con formato (fechas, moneda, etc.)
BatchNumberDetailsList.tsx	src/views/inventario/	Lista con columnas SAP directas
ListViewTemplate.tsx	src/components/ui/	Template genérico de listado con paginación/búsqueda
api.ts	src/utils/	Cliente HTTP con sesión, token, timeout
enums.ts	src/utils/	Mapeos enum SAP (BATCH_STATUS_APROB, etc.)
sapBatch.ts	src/types/	Interfaz TypeScript BatchNumberDetail
batch.py	mini-backend/routers/	Rutas FastAPI GET/PATCH BatchNumberDetails
sap.py	mini-backend/core/	Proxy universal a SAP Service Layer