Bills Dashboard

This section describes the BfmBillsDashboardComponent component.

The BfmBillsDashboardComponent is the content container for the "Boletos" tab of the "Contas a Pagar" (payables) experience. It owns its own data load: it fetches the per-status summaries from the Core HTTP layer and renders the status cards. On a failed load it falls back to a local error state with a retry action.

Which cards it shows is the host's choice: the cards come from BILLS_DASHBOARD_CONFIG (see Configuration), whose generic default exposes every status. Each white-label picks the subset (and business meaning) that fits its flow — the Serasa payables app, for example, shows all, open, paid, overdue and cancelled, all with bad-up polarity (in payables every variation is spending, so growth is always harmful — a drop renders green, an increase renders red).

Composition

The BfmBillsDashboardComponent is composed of the following components:

• BfmBillsStatusCardComponent (bfm-bills-status-card) - One summary card per configured status, showing its count, amount and variation.
• BfmBillsErrorStateComponent (bfm-bills-error-state) - Local error state, shown when loading the summaries fails, with a retry action.

Usage

You can import the BfmBillsDashboardComponent directly in your route configuration.

import { BfmBillsDashboardComponent } from '@celerofinancas/ui-charges';

const routes = [
  {
    path: 'bills-dashboard',
    component: BfmBillsDashboardComponent,
  },
];

But if you need more customization, you need to import it in your module and use it in your template.

bills-dashboard.component.ts

import { BfmBillsDashboardComponent } from '@celerofinancas/ui-charges';

@Component({
  standalone: true,
  selector: 'bills-dashboard',
  imports: [BfmBillsDashboardComponent],
  templateUrl: './bills-dashboard.component.html',
})
export class BillsDashboardComponent {}

Then, in your template, you can use the component like this:

bills-dashboard.component.html

<bfm-bills-dashboard/>

Inputs

The BfmBillsDashboardComponent component has no inputs.

Events

The BfmBillsDashboardComponent component has no events. Selecting a status card applies the mapped filter to the shared payables bills list internally.

Configuration

The BfmBillsDashboardComponent is customized through two injection tokens. The cards it renders come from BILLS_DASHBOARD_CONFIG, and the card visual (variant and trend arrows) from BILLS_STATUS_CARD_CONFIG. Both are meant to be provided per page by the host (each white-label provides the cards its flow shows). When BILLS_DASHBOARD_CONFIG is not provided, the component falls back to the generic DEFAULT_BILLS_DASHBOARD_CONFIG.

BILLS_DASHBOARD_CONFIG

The ordered base cards the dashboard renders — the whole card definition, not just texts. Each host provides this token per page with the cards (and business meaning) that flow actually shows.

The live figures (amount, count, delta) come from the API request; the base card seeds the rest.

Properties

Key	Description	Default
baseCards	Ordered array of BillsDashboardCardConfig, one per card to render.	See DEFAULT_BILLS_DASHBOARD_CONFIG below

Each BillsDashboardCardConfig has:

Key	Type	Description
status	BillsStatus	Boleto status this card represents (all, open, paid, overdue, cancelled, written_off, others). Also the key matched against the API summaries.
title	string	Card title.
icon	string	Status icon (cds class, with its design-system color class).
delta	number | null	Set to null to hide the delta block entirely (e.g. "Aguardando"). Otherwise a placeholder replaced by the API delta.
deltaPolarity	'good-up' | 'bad-up' | 'neutral'	Business meaning of the variation (drives the delta color).
titleTooltip	string (optional)	When set, renders a "?" tooltip next to the title. Omitted → no tooltip.
count	number (optional)	Seed count before a summary arrives. Defaults to 0.

The BILLS_DASHBOARD_CONFIG default (DEFAULT_BILLS_DASHBOARD_CONFIG) is a generic superset covering every status; hosts override it per page. Its values are:

{
  baseCards: [
    {
      status: 'all',
      title: 'Todos os boletos',
      titleTooltip:
        'O número total de boletos contempla a soma dos status "Em aberto", ' +
        '"Pagos" e "Em atraso". Boletos "Cancelados" não entram nessa conta.',
      icon: 'cds-icon-calendar c-text-strong',
      delta: 0,
      deltaPolarity: 'bad-up',
    },
    { status: 'open', title: 'Aguardando pagamento', icon: 'cds-icon-clock c-warn-500', delta: null, deltaPolarity: 'bad-up' },
    { status: 'paid', title: 'Pagos', icon: 'cds-icon-filled-check c-success', delta: 0, deltaPolarity: 'bad-up' },
    { status: 'overdue', title: 'Atrasados', icon: 'cds-icon-filled-alert-triangle c-danger-500', delta: 0, deltaPolarity: 'bad-up' },
    { status: 'cancelled', title: 'Cancelados', icon: 'cds-icon-filled-minus c-info-400', delta: 0, deltaPolarity: 'bad-up' },
    { status: 'written_off', title: 'Baixado', icon: 'cds-icon-folder c-info-500', delta: 0, deltaPolarity: 'good-up' },
  ],
}

Example

payables-bills-dashboard.component.ts

import { BILLS_DASHBOARD_CONFIG } from '@celerofinancas/ui-charges';

@Component({
  // ...
  providers: [
    {
      provide: BILLS_DASHBOARD_CONFIG,
      useValue: {
        baseCards: [
          { status: 'all', title: 'Todos os boletos', icon: 'cds-icon-payment-method-bill', delta: 0, deltaPolarity: 'bad-up' },
          { status: 'open', title: 'Aguardando pagamento', icon: 'cds-icon-clock c-warn-500', delta: null, deltaPolarity: 'bad-up' },
          { status: 'paid', title: 'Pago', icon: 'cds-icon-filled-check c-success', delta: 0, deltaPolarity: 'bad-up' },
          { status: 'overdue', title: 'Atrasado', icon: 'cds-icon-filled-alert-triangle c-danger-500', delta: 0, deltaPolarity: 'bad-up' },
          { status: 'cancelled', title: 'Cancelado', icon: 'cds-icon-filled-minus c-primary-400', delta: 0, deltaPolarity: 'bad-up' },
        ],
      },
    },
  ],
})
export class PayablesBillsDashboardComponent {}

BILLS_STATUS_CARD_CONFIG

Card visual config (variant and trend arrows), read by the BfmBillsStatusCardComponent. This is the white-label reskin knob shared with the receivables dashboard — provide it once per host to reskin every card at once.

The per-status card icon is no longer taken from statusIcons: it now comes from each card's icon in BILLS_DASHBOARD_CONFIG (above). statusIcons remains a convenient palette of the BFM icon classes that hosts can reference when building their baseCards.

Properties

Key	Description	Default
cardVariant	Card visual variant: 's-bordered' or 's-highlighted'.	's-bordered'
trendUpIcon	Icon (cds class) for an upward variation.	'cds-icon-arrow-up'
trendDownIcon	Icon for a downward variation.	'cds-icon-arrow-down'
trendFlatIcon	Icon for a flat (0%) variation.	'cds-icon-arrow-right'
statusIcons	Palette of per-status icon classes (with color) hosts can reuse in baseCards. Not read at runtime by the dashboard. Keyed by all, pending, paid, overdue, cancelled, settled.	See defaults below

The BILLS_STATUS_CARD_CONFIG default values are:

{
  cardVariant: 's-bordered',
  trendUpIcon: 'cds-icon-arrow-up',
  trendDownIcon: 'cds-icon-arrow-down',
  trendFlatIcon: 'cds-icon-arrow-right',
  statusIcons: {
    all: 'cds-icon-calendar c-text-strong',
    pending: 'cds-icon-clock c-warn-500',
    paid: 'cds-icon-filled-check c-success',
    overdue: 'cds-icon-filled-alert-triangle c-danger-500',
    cancelled: 'cds-icon-filled-minus c-info-400',
    settled: 'cds-icon-folder c-info-500',
  },
}

Example

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  BILLS_STATUS_CARD_CONFIG,
  DEFAULT_BILLS_STATUS_CARD_CONFIG,
} from '@celerofinancas/ui-charges';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: BILLS_STATUS_CARD_CONFIG,
      useValue: {
        ...DEFAULT_BILLS_STATUS_CARD_CONFIG,
        cardVariant: 's-highlighted',
      },
    },
  ],
};