# Viacheck Check Details Report Paquete React con el reporte de detalle de cheques de Viacheck 2.0. `@viamericas/viacheck-check-details-report` es un componente publicado en npm que se usa en otros proyectos de Viamericas (por ejemplo, el micro-front de reportes). Está construido con React 18 y Webpack 5. Incluye dos vistas: el reporte de detalle de cheques con filtros y el detalle de cheques de un batch (embebido desde el Batch Report). - Reporte de detalle de cheques con filtros ![Check Details Report](doc/checkdetailsReport.png) - Detalle de cheques para un batch ![Batch Detail](doc/batchDetail.png)
## Tabla de contenido - [Versions](#versions) - [Detalle por versión](#detalle-por-versión) - [Stack y dependencias (package.json)](#stack-y-dependencias-packagejson) - [Micro-fronts / paquetes internos Viamericas](#micro-fronts--paquetes-internos-viamericas) - [Arquitectura](#arquitectura) - [Uso del componente](#uso-del-componente) - [Ejecución en local](#ejecución-en-local) - [Scripts disponibles](#scripts-disponibles)
## Versions | Nº | Date | User | HU | Description | | :---- | :--------: | :---------------------------: | ---------------------------------------------------------------- | ----------------------------------------------------------------------------- | | 6.2.0 | 2026-10-16 | ccbriceno | [PROJM-7168](https://viamericas.atlassian.net/browse/PROJM-7168) | Nuevo prop `showOthersCashiers` para filtrar los usuarios del filtro User | | 6.1.2 | 2026-09-15 | Jenny Paola Quesada Hernandez | | Nueva versión del componente | | 6.1.1 | 2026-09-11 | Jenny Paola Quesada Hernandez | | Ajustes de información del reporte de detalle con ARCA | > Las versiones anteriores (`6.1.0-beta.*`, `4.0.x`) están documentadas en > [`CHANGELOG.md`](CHANGELOG.md). ### Detalle por versión > Cada bloque despliega los cambios relevantes de la versión: qué se agregó o > arregló y los archivos/áreas principales tocados. Completa los archivos > exactos donde queden pendientes usando el diff del PR de cada release.
6.2.0 — Filtro de cajeros showOthersCashiers (2026-10-16 · ccbriceno · PROJM-7168)
Nuevo prop opcional `showOthersCashiers` (`boolean`, por defecto `true`) que controla qué usuarios se muestran en el filtro **User**. - `true` (o sin enviar): se mantiene el comportamiento previo, con todos los usuarios que devuelve `GET /reports/users` más la opción "Todos". - `false`: solo se muestra el usuario de `username`, comparado contra el campo `username` de la respuesta (sin distinguir mayúsculas ni espacios), y se oculta la opción "Todos". - El filtro se aplica a la lista de usuarios antes de calcular `agentParam`, así que la búsqueda (`POST /reports/check-detail-report`) solo envía el ID del usuario propio. - Con `false`, si el usuario no aparece en la respuesta (o la lista aún no cargó), la búsqueda no se ejecuta y se muestra `langReport.msgWithOutInformation`. - El filtro es del lado del cliente: no reemplaza la validación de permisos en el backend. - README migrado al formato estándar de documentación. Archivos principales: - `src/index.js` — prop `showOthersCashiers` (propTypes y valor por defecto). - `src/core/components/CheckDetailReport.js` — filtro de `/reports/users`, helper `normalizeUserName` y bloqueo de la búsqueda sin usuario propio. - `src/core/components/CheckDetailsForm.js` — prop `showAllUsersOption` para ocultar "Todos". - `dev-test/App.js` — `showOthersCashiers` configurable para pruebas locales. - `package.json` / `package-lock.json` — bump de versión a `6.2.0`. - `README.md` — formato estándar y documentación del prop.
6.1.2 — Nueva versión del componente (2026-09-15 · Jenny Paola Quesada Hernandez)
- Publicación de la versión del componente. Archivos principales: - `package.json`
6.1.1 — Ajustes reporte de detalle con ARCA (2026-09-11 · Jenny Paola Quesada Hernandez)
- Ajustes de la información del reporte de detalle con el nuevo flujo ARCA.

## Stack y dependencias (package.json) - **Paquete:** `@viamericas/viacheck-check-details-report` `6.2.0` - **Base:** React `^18.3.1` / React DOM `^18.3.1` - **Build:** Webpack `^5.95.0`, Babel `^7.25.9`, salida `build/index.js` - **i18n:** i18next `23.16.4`, react-i18next `15.1.0`, i18next-http-backend `2.6.2` - **HTTP:** axios `1.7.7` - **Fechas:** moment `2.30.1`, react-day-picker `9.2.0` - **UI:** react-select `5.8.2`; Bootstrap `^5.3.3` y Font Awesome `^6.6.0` (dev) - **Exportación / imágenes:** xlsx `0.18.5`, utif `3.1.0`, base64-arraybuffer `1.0.2` - **Estilos:** css-loader / style-loader; `sass` `^1.80.3` + `sass-loader` `^16.0.2` - **Testing:** Jest `^29.7.0`, Testing Library React `^16.0.1`, Enzyme `^3.11.0` - **Calidad:** ESLint `^9.13.0` (Prettier), pretty-quick, Husky, lint-staged ### Micro-fronts / paquetes internos Viamericas | Paquete | Versión | Descripción | | -------------------------------------------- | ------------ | --------------------------------- | | `@viamericas/datepicker-multi-language` | 5.0.38 | Selector de fechas multi-idioma | | `@viamericas/viacheck-check-detail` | 6.1.0-beta.7 | Visor del detalle del cheque | | `@viamericas/viacheck-print-report` | 4.0.0 | Impresión del reporte | | `@viamericas/viacheck-summary-checks-report` | 4.0.0 | Resumen de cheques | | `@viamericas/viam-pagination-reports` | 3.0.1 | Paginación de reportes | | `@viamericas/viam-viatable-reports` | 5.0.0 | Tabla de resultados | | `@viamericas/viam-utils` | 4.0.0 | Utilidades y validaciones | **_Importante:_** las librerías de `peerDependencies` deben estar instaladas en la aplicación padre. ![Required Libraries](doc/requiredLibraries.png)
## Arquitectura ``` src/ ├── index.js # Entry point: CheckDetail (props, propTypes, ux por defecto) ├── core/ │ ├── components/ │ │ ├── CheckDetailReport.js # Estado, filtros, búsqueda, export e impresión │ │ ├── CheckDetailsForm.js # Formulario de filtros │ │ └── checkDetailsResult.js # Tabla de resultados y panel de detalle │ ├── business/services/ # rest.service.js │ └── utils/ # utils, CTR/ARCA, estados de cheque, i18n ├── styles/ # CSS / SCSS del reporte └── test/ # Tests de Jest dev-test/ # Harness local (App.js, index.html, locales, assets) ``` Endpoints consumidos sobre `urlApi`: - `GET /reports/locations` y `GET /reports/users` — opciones de los filtros. La lista de usuarios se filtra en el cliente según `showOthersCashiers`. - `POST /reports/check-detail-report` — búsqueda paginada de cheques.
## Uso del componente ```bash npm i @viamericas/viacheck-check-details-report ``` Props principales (ver ejemplo en `dev-test/App.js`): - **username:** usuario logueado en la aplicación. - **agencyName:** agencia que se muestra en la impresión. - **urlApi:** URL base del API (ej. `https://vck-dev.viamericas.io`). - **imgLoading / imgNoCheckImg:** imágenes de carga y de "no disponible". - **urlGetImagesByRefImageKey:** URL para obtener las imágenes del cheque por `RefImageKey`. - **language:** idioma (`es` o `en`). - **token:** token de la aplicación principal. - **pagination:** registros por página. - **axiosInstance:** instancia de axios opcional. - **bucket:** bucket de imágenes. - **limitAgeAgo:** límite de antigüedad permitido en el rango de fechas. - **viacheckSettings:** marca de agua y reproceso IRD. - **isArcaEnabled / onCtrAction / ctrUpdatedCheck:** bloque CTR/ARCA. - **showOthersCashiers:** `boolean`, opcional (por defecto `true`). Con `true` el filtro **User** lista todos los usuarios de `/reports/users` más "Todos". Con `false` solo muestra al usuario de `username` (comparado contra el campo `username` de la respuesta) y no ofrece "Todos". - **batchData:** objeto (por defecto `null`). Si viene, se muestra la vista de detalle de batch en lugar del reporte con filtros: - **origin:** nombre del origen (`BatchReport`). - **columns:** columnas (`name`, `className`). - **data:** filas del detalle del batch. ![Props](doc/props.png) ![Component](doc/component.png)
## Ejecución en local 1. Instalar dependencias: ```bash npm i ``` 2. Ajustar los parámetros de prueba (`username`, `token`, `urlApi`, `showOthersCashiers`, etc.) en `dev-test/App.js`. **No** subas tokens reales ni credenciales al repo. 3. Levantar el servidor de desarrollo: ```bash npm run start:dev ``` 4. Generar el build de producción antes de publicar: ```bash npm run build ```
## Scripts disponibles | Script | Descripción | | ---------------------- | ----------------------------------------------------------- | | `npm start` | Build en modo desarrollo con watch y source maps inline | | `npm run start:source` | Build en modo desarrollo con watch y source maps | | `npm run start:dev` | Servidor de desarrollo con el harness de `dev-test` | | `npm run build` | Build de producción en `build/index.js` | | `npm run build:debug` | Build de producción con source maps | | `npm test` | Ejecuta Jest una vez con cobertura | | `npm run test:w` | Jest en modo watch | | `npm run lint` | ESLint sobre el proyecto | | `npm run precommit` | Ejecuta lint-staged | | `npm run prepush` | Ejecuta los tests | | `npm run analize` | Analiza el peso del bundle con source-map-explorer | ![Analize](doc/analize.png)