Skip to main content

Card totals

Component: <pcp-cards-totals>

Preview:

Preview

Description

This component provides a summary of the total number of credit cards for the current company. It categorizes the cards into three groups: all credit cards, active credit cards, and virtual credit cards. The component visually presents this information to keep the user informed about the distribution of their company's credit cards.


Usage

import { PcpCardsTotalsComponent } from '@celerofinancas/pcp-client-ui';
<pcp-cards-totals 
[title]="Cartões"
[cardsOptions]="cardsTotalsMap"
[tooltip]="Total de cartões por conta da empresa"
/>

Example of cardsOptions acceptable input format:

export const cardsTotalsMap = new Map([
[CARDS_SUMMARY_TYPE.all, { label: 'Total de cartões da empresa', value: 0 }],
[CARDS_SUMMARY_TYPE.physical, { label: 'Total de cartões físicos ativos', value: 0 }],
[CARDS_SUMMARY_TYPE.virtual, { label: 'Total de cartões virtuais', value: 0 }],
]);

Inputs

NameTypeDefaultDescriptionRequired
titlestringCartõesThe main title of the componentNO
cardsOptionsMap<CARDS_SUMMARY_TYPE, { label: string, total: number }>cardsTotalsMapThe mapping of cards values and labelsNO
tooltipstringTooltip text displayed in info icon on mouse hoverNO

Dependencies

  • @celerofinancas/class-utils
  • @celerofinancas/ui-loaders
  • @celerofinancas/ui-directives

Notes

The value in the cardOptions map is just a initial reference, it will be updated when the request to pcp api is completed, with the correct values of the cards for the current company.