Bills Dashboard

This section describes the BfmReceivablesBillsDashboardComponent component.

The BfmReceivablesBillsDashboardComponent is the dashboard for the "Contas a Receber" (receivables) boletos 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 receivables app, for example, shows all, open and written_off with good-up/neutral polarities.

Composition

The BfmReceivablesBillsDashboardComponent is composed of the following components:

• DefaultHeaderComponent (default-header) - Core header, rendered when showHeader is true.
• 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 BfmReceivablesBillsDashboardComponent directly in your route configuration.

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

const routes = [
  {
    path: 'receivables-dashboard',
    component: BfmReceivablesBillsDashboardComponent,
  },
];

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

receivables-bills-dashboard.component.ts

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

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

Then, in your template, you can use the component with the default header:

receivables-bills-dashboard.component.html

<bfm-receivables-bills-dashboard/>

Or hide the default header and project your own into the [header] slot:

receivables-bills-dashboard.component.html

<bfm-receivables-bills-dashboard [showHeader]="false">
  <my-custom-header header/>
</bfm-receivables-bills-dashboard>

Inputs

The BfmReceivablesBillsDashboardComponent component has the following inputs:

showHeader

Whether to render the default core header. Set to false to replace it with your own header projected into the [header] slot.

Type	Default
boolean	true

Content projection

[header]

Slot for a custom header, rendered in place of the default header when showHeader is false.

Events

The BfmReceivablesBillsDashboardComponent component has no events.

Configuration

The BfmReceivablesBillsDashboardComponent 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. 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. The host chooses which cards to show (and their order, icons and business meaning) by providing this token; the generic default exposes every status, so a white-label picks the subset that fits its flow. The example below is the Serasa receivables set (all, open, written_off).

The live figures (amount, count, delta) come from the API request; the base card seeds the rest. This token is shared with the payables dashboard (each page provides its own set), so its generic default is a superset of every status.

Properties

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

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.

Example

receivables-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: 'good-up' },
          { status: 'open', title: 'Aguardando pagamento', icon: 'cds-icon-clock c-warn-500', delta: null, deltaPolarity: 'neutral' },
          { status: 'written_off', title: 'Baixado', icon: 'cds-icon-folder c-info-500', delta: 0, deltaPolarity: 'good-up' },
        ],
      },
    },
  ],
})
export class ReceivablesBillsDashboardComponent {}

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 payables dashboard — provide it once per host to reskin every card at once. Falls back to DEFAULT_BILLS_STATUS_CARD_CONFIG when unset.

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',
      },
    },
  ],
};