Back to work
  • Angular
  • TypeScript

Multi-Company Banking Authorization

A banking microfrontend that centralizes pending operations from multiple companies and financial products into a single authorization experience.

Multi-Company Banking Authorization overview

Overview

Bringing multiple authorization flows into one place. Multi-Company Authorization was designed to centralize pending banking operations from different companies into a single dashboard. Instead of navigating through separate authorization modules, users could review their companies, explore pending financial products, select individual operations and complete multiple authorizations from one experience. This was directly aligned with the functional goal of the product: centralizing authorizations from different companies and enabling multiple operations to be authorized simultaneously.

The Challenge

A simple interface for a complex authorization model. The main challenge was not only displaying financial operations, but maintaining a consistent interaction model across multiple hierarchical levels and financial products. A selection made at company level could affect products and individual operations, while changes at lower levels needed to be reflected back through partial, selected and disabled states. The product contemplated total, partial and no selection, along with normal, hover, active and disabled states. There was also a maximum limit of 100 selectable operations.
  • Selected
  • Partial
  • None
  • Disabled
Selection states across company, product and operation levels

My Role

Frontend ownership. I was responsible for the frontend development of the Multi-Company authorization experience using Angular and TypeScript. My work covered the different financial products integrated into the platform, their operation-specific flows, shared interaction patterns, authorization states and integration with the surrounding banking portal.
  • Frontend Development — Complete implementation of the Multi-Company experience
  • Product Integration — Frontend implementation for the different financial products supported by the module
  • Business Logic — Selection rules, authorization restrictions, operation states and contextual behaviors
  • Platform Integration — Integration as an Angular microfrontend inside the existing banking portal

Microfrontend Architecture

Built as an independent microfrontend. The application was developed as an Angular microfrontend using single-spa, allowing the module to run independently during development while also being mounted inside the main banking portal. The microfrontend maintained its own Angular lifecycle, routing and frontend architecture while integrating with shared platform services and UI libraries.
Diagram of the banking portal with the Multi-Company microfrontend

One Flow, Three Levels

Progressive authorization. The main navigation followed three levels. Company — The user starts by viewing the companies with pending operations. Each company could show information such as company identification, pending products, number of operations, total amount and access to detail. Product — When opening a company, its financial products with pending operations were shown. The user could modify the product selection and access the detail of each one. Operation — Finally, the user could individually select the operations they wanted to authorize. The detail varied depending on the financial product.
Company level — companies with pending operations
Company
Product level — financial products with pending operations
Product
Operation level — individual operations to authorize
Operations

Selection as Business Logic

More than checkboxes. Selection was one of the core pieces of frontend logic. The interface needed to synchronize selections between companies, products and operations while continuously reflecting partial selections, disabled states and selection limits. Selecting a company could automatically select its products and operations; selecting a product could select all of its operations; reaching 100 operations blocked additional selections; checkboxes started disabled; and the interface contemplated total, partial and no selection.
Selection wasn't just UI state — it represented the authorization model.
Selected state
Partial state
Disabled state

One Platform, Multiple Financial Products

A shared experience across different banking products. I developed the frontend implementations for the products integrated into the Multi-Company experience. Although they shared the same authorization model, each product could introduce different information, rules and operation-specific behavior.
01 — Fund Transfers
Transfers between accounts
02 — Mass Payments
Bulk payment operations
03 — Payments on Other Sites
External site payments
04 — Credit Card Payments
Credit card operations
05 — Credit Line Payments
Credit line operations
06 — Electronic Bill Payments
Electronic bill payments
07 — Foreign Exchange
Currency exchange operations
08 — International Payment Orders
International payment orders

Reusable Architecture, Specific Behaviors

Consistency without forcing identical workflows. The different products shared components and interaction patterns, but their operation details were not identical. The frontend architecture had to preserve a consistent authorization experience while still supporting specialized components and business rules for each product. MultiempresaModule concentrated the routes and components associated with these experiences.

Operation Detail

Managing individual operations. Product details opened in a side panel where users could inspect and modify the operations included in the authorization. This interaction allowed users to work at operation level without abandoning the context of the main Multi-Company dashboard. The specification contemplated an animated side modal, individual selection, scrolling, total/partial selection and saving the selection.
Side drawer showing the detail of an individual operation

Dynamic Authorization Panel

From selection to authorization. Once operations were selected, the challenge box appeared. A dynamic authorization panel summarized the current selection and provided the final security step required to authorize the operations. It showed the companies selected, products selected, operations selected, total amount, security code and the Authorize action. The panel appeared dynamically when selections existed and could be minimized.
Many operations. One authorization flow.
  • Companies selected
  • Products selected
  • Operations selected
  • Total amount
  • Security code
  • Authorize
Dynamic authorization panel summarizing the current selection

Product-Specific Business Rules

Consistency didn't mean identical behavior. Some products introduced significantly more complex rules, including currencies, expiration periods, operating schedules and different exchange-rate modalities. Payment Orders (OPE) is a clear example. The frontend had to communicate these restrictions clearly while preserving the same overall interaction model.
The frontend handled real business rules.
  • COTI — Online FX
  • DEAL — Pre-agreed FX
  • CTA — No FX
  • OMITE — Missing account

Security & Platform Integration

Integrated with enterprise banking services. The microfrontend integrated with shared platform capabilities for security challenges, antifraud functionality, error messaging and backend communication.
Integration with security flows, shared platform services and backend

Quality & Delivery

Built for production.

Testing

  • Jasmine
  • Karma
  • 90% coverage threshold

Code Quality

  • SonarQube

Outcome

The result was a unified frontend capable of supporting multiple companies, financial products and operation types through a consistent authorization experience. From company-level navigation to product-specific operation details, security validation and authorization receipts, the microfrontend brought complex banking workflows into a single interface. The result matched the original purpose of centralizing the authorizations of multiple companies into a single experience.

What I Took From This Project

Reusability has limits — Shared components are valuable, but different business domains sometimes require specialized implementations. State is part of the product — In complex workflows, state management directly determines whether the interface correctly represents the underlying business process. Enterprise frontend is integration — Building the interface is only part of the challenge. The application also has to coexist with existing design systems, security flows, backend services and deployment infrastructure. Edge cases matter — Success, partial success, disabled states, operation limits and errors are part of the main experience—not secondary details.