Records View

This section describes the BfmReceivablesRecordsViewComponent component.

The BfmReceivablesRecordsViewComponent is the route-level container for the records area of the "Contas a Receber" (receivables) experience. It renders a tab shell with the Calendar tab (showing the per-day bill summaries) and owns the bill summary modal. The calendar request is deferred until its tab is opened.

Composition

The BfmReceivablesRecordsViewComponent is composed of the following components:

• BfmBillsTabShellComponent (bfm-bills-tab-shell) - Tab shell hosting the Calendar tab.
• BfmBillsCalendarComponent (bfm-bills-calendar) - Calendar tab, showing the per-day bill summaries.

It also opens BfmBillsSummaryModalComponent to show a bill's summary.

Usage

You can import the BfmReceivablesRecordsViewComponent directly in your route configuration.

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

const routes = [
  {
    path: 'receivables',
    component: BfmReceivablesRecordsViewComponent,
  },
];

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

receivables-records-view.component.ts

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

@Component({
  standalone: true,
  selector: 'receivables-records-view',
  imports: [BfmReceivablesRecordsViewComponent],
  templateUrl: './receivables-records-view.component.html',
})
export class ReceivablesRecordsViewComponent {}

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

receivables-records-view.component.html

<bfm-receivables-records-view/>

Inputs

The BfmReceivablesRecordsViewComponent component has no inputs.

Events

The BfmReceivablesRecordsViewComponent component has no events.

Configuration

BILLS_SUMMARY_MODAL_CONFIG

Labels and status-display config for the bill summary modal (every visible string comes from this config). Falls back to BILLS_SUMMARY_MODAL_DEFAULT_CONFIG (Celero's PT-BR copy) when unset.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: BILLS_SUMMARY_MODAL_CONFIG,
      useValue: {
        ...BILLS_SUMMARY_MODAL_DEFAULT_CONFIG,
        title: 'Detalhes do boleto',
      },
    },
  ],
};