# Flujo de Procesamiento — Detalle de Lotes

## Arquitectura General

```mermaid
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

```mermaid
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 |