- Angular
- TypeScript
Autorización Bancaria Multiempresa
Un microfrontend bancario que centraliza las operaciones pendientes de múltiples empresas y productos financieros en una única experiencia de autorización.

Resumen
Reuniendo múltiples flujos de autorización en un solo lugar.
Multiempresa se diseñó para centralizar las operaciones bancarias pendientes de distintas empresas en un único dashboard.
En lugar de navegar por módulos de autorización separados, los usuarios podían revisar sus empresas, explorar los productos financieros pendientes, seleccionar operaciones individuales y completar múltiples autorizaciones desde una misma experiencia.
Esto estaba directamente alineado con el objetivo funcional del producto: centralizar las autorizaciones de distintas empresas y permitir autorizar múltiples operaciones simultáneamente.
El Desafío
Una interfaz simple para un modelo de autorización complejo.
El principal desafío no era solo mostrar operaciones financieras, sino mantener un modelo de interacción consistente a través de múltiples niveles jerárquicos y productos financieros.
Una selección hecha a nivel de empresa podía afectar a los productos y a las operaciones individuales, mientras que los cambios en los niveles inferiores debían reflejarse hacia arriba mediante estados parciales, seleccionados y deshabilitados.
El producto contemplaba selección total, parcial y sin selección, junto con estados normal, hover, activo y deshabilitado. También existía un límite máximo de 100 operaciones seleccionables.
- Seleccionado
- Parcial
- Ninguno
- Deshabilitado

Mi Rol
Liderazgo del frontend.
Fui responsable del desarrollo frontend de la experiencia de autorización Multiempresa usando Angular y TypeScript.
Mi trabajo abarcó los distintos productos financieros integrados en la plataforma, sus flujos específicos, los patrones de interacción compartidos, los estados de autorización y la integración con el portal bancario que lo rodeaba.
- Desarrollo Frontend — Implementación completa de la experiencia Multiempresa
- Integración de Productos — Implementación frontend de los distintos productos financieros que soporta el módulo
- Lógica de Negocio — Reglas de selección, restricciones de autorización, estados de operación y comportamientos contextuales
- Integración de Plataforma — Integración como microfrontend Angular dentro del portal bancario existente
Arquitectura Microfrontend
Construido como un microfrontend independiente.
La aplicación se desarrolló como un microfrontend Angular usando single-spa, lo que permitía que el módulo funcionara de forma independiente durante el desarrollo y, a la vez, se montara dentro del portal bancario principal.
El microfrontend mantenía su propio ciclo de vida Angular, su enrutamiento y su arquitectura frontend, integrando servicios compartidos de plataforma y librerías de UI.

Un Flujo, Tres Niveles
Autorización progresiva.
La navegación principal seguía tres niveles.
Empresa — El usuario comienza viendo las empresas con operaciones pendientes. Cada empresa podía mostrar información como identificación de la empresa, productos pendientes, número de operaciones, monto total y acceso al detalle.
Producto — Al abrir una empresa se mostraban sus productos financieros con operaciones pendientes. El usuario podía modificar la selección de productos y acceder al detalle de cada uno.
Operación — Finalmente, el usuario podía seleccionar individualmente las operaciones que quería autorizar. El detalle variaba según el producto financiero.



La Selección como Lógica de Negocio
Más que casillas de verificación.
La selección era una de las piezas centrales de la lógica frontend.
La interfaz debía sincronizar las selecciones entre empresas, productos y operaciones, reflejando continuamente selecciones parciales, estados deshabilitados y límites de selección.
Seleccionar una empresa podía seleccionar automáticamente sus productos y operaciones; seleccionar un producto podía seleccionar todas sus operaciones; alcanzar las 100 operaciones bloqueaba selecciones adicionales; las casillas comenzaban desactivadas; y la interfaz contemplaba selección total, parcial y ninguna selección.
La selección no era solo estado de la UI — representaba el modelo de autorización.



Una Plataforma, Múltiples Productos Financieros
Una experiencia compartida entre distintos productos bancarios.
Desarrollé las implementaciones frontend de los productos integrados en la experiencia Multiempresa.
Aunque compartían el mismo modelo de autorización, cada producto podía introducir información, reglas y comportamientos específicos.
01 — Transferencias
Transferencias entre cuentas
02 — Pagos Masivos
Operaciones de pago masivo
03 — Pagos en Otros Sitios
Pagos en sitios externos
04 — Pago de Tarjetas de Crédito
Operaciones con tarjeta
05 — Pagos de Línea de Crédito
Operaciones de línea de crédito
06 — Pago de Cuentas Electrónicas
Pago electrónico de cuentas
07 — Divisas
Operaciones de cambio de moneda
08 — Órdenes de Pago al Exterior
Órdenes internacionales de pago
Arquitectura Reutilizable, Comportamientos Específicos
Consistencia sin forzar flujos idénticos.
Los distintos productos compartían componentes y patrones de interacción, pero sus detalles de operación no eran idénticos.
La arquitectura frontend debía preservar una experiencia de autorización consistente, soportando a la vez componentes especializados y reglas de negocio para cada producto.
MultiempresaModule concentraba las rutas y componentes asociados a estas experiencias.
Detalle de Operación
Gestionando operaciones individuales.
El detalle de los productos se abría en un panel lateral donde los usuarios podían inspeccionar y modificar las operaciones incluidas en la autorización.
Esta interacción permitía trabajar a nivel de operación sin abandonar el contexto del dashboard Multiempresa principal.
La especificación contemplaba un modal lateral animado, selección individual, scrolling, selección total/parcial y guardado de la selección.

Panel de Autorización Dinámico
De la selección a la autorización.
Una vez seleccionadas las operaciones, aparecía la caja de desafío. Un panel de autorización dinámico resumía la selección actual y proporcionaba el paso de seguridad final necesario para autorizar las operaciones.
Mostraba las empresas seleccionadas, los productos seleccionados, las operaciones seleccionadas, el monto total, el código de seguridad y la acción Autorizar. El panel aparecía dinámicamente al existir selecciones y podía minimizarse.
Muchas operaciones. Un solo flujo de autorización.
- Empresas seleccionadas
- Productos seleccionados
- Operaciones seleccionadas
- Monto total
- Código de seguridad
- Autorizar

Reglas de Negocio Específicas por Producto
Consistencia no significaba comportamiento idéntico.
Algunos productos introducían reglas considerablemente más complejas, incluyendo monedas, periodos de vigencia, horarios operativos y distintas modalidades de tipo de cambio. Las Órdenes de Pago al Exterior (OPE) son un claro ejemplo.
El frontend debía comunicar estas restricciones de forma clara preservando el mismo modelo de interacción general.
El frontend manejaba reglas de negocio reales.
- COTI — Divisas en línea
- DEAL — Divisas pre-acordadas
- CTA — Sin divisas
- OMITE — Cuenta faltante
Seguridad e Integración de Plataforma
Integrado con los servicios bancarios empresariales.
El microfrontend se integró con capacidades compartidas de plataforma para desafíos de seguridad, funcionalidad antifraude, mensajería de errores y comunicación con el backend.

Calidad y Entrega
Construido para producción.
Testing
- Jasmine
- Karma
- Umbral de cobertura 90%
Calidad de Código
- SonarQube
Resultado
El resultado fue un frontend unificado capaz de soportar múltiples empresas, productos financieros y tipos de operación a través de una experiencia de autorización consistente.
Desde la navegación a nivel de empresa hasta los detalles de operación específicos por producto, la validación de seguridad y los comprobantes de autorización, el microfrontend reunió flujos bancarios complejos en una sola interfaz.
El resultado coincidió con el propósito original de centralizar las autorizaciones de múltiples empresas en una sola experiencia.
Lo que Me Llevé de Este Proyecto
La reutilización tiene límites — Los componentes compartidos son valiosos, pero distintos dominios de negocio a veces requieren implementaciones especializadas.
El estado es parte del producto — En flujos complejos, la gestión de estado determina directamente si la interfaz representa correctamente el proceso de negocio subyacente.
El frontend empresarial es integración — Construir la interfaz es solo parte del desafío. La aplicación también debe coexistir con sistemas de diseño existentes, flujos de seguridad, servicios de backend e infraestructura de despliegue.
Los casos límite importan — El éxito, el éxito parcial, los estados deshabilitados, los límites de operación y los errores son parte de la experiencia principal, no detalles secundarios.