Fiscal Document - Financial Dashboard

This section describes the BfmFinancialDashboardComponent component.

It renders the fiscal document dashboard, composed of summary cards, the latest invoices table and the top entities table. The component loads its own data on initialization through the FinancialSummaryService, LastInvoicesService and FinancialTopEntitiesService, which it provides internally.

Visibility

This dashboard is meant to be shown only while the fiscal document module is activated for the active company. The component does not decide its own visibility — the consumer renders it based on the activation status exposed by the FinancialManagementService, typically with @if (nfModuleActivated() === true), alongside the NFe/NFSe tables. While the module is not activated, the consumer should render the BfmCertificateSetupBannerComponent instead. See Module activation status for the full rule and example.

Usage

You need to import it in your module and use it in your template.

financial-dashboard.component.ts

import {
  BfmFinancialDashboardComponent,
  TypeFinancialManagement,
} from '@celerofinancas/ui-charges';

@Component({
  standalone: true,
  selector: 'financial-dashboard',
  imports: [BfmFinancialDashboardComponent],
  templateUrl: './financial-dashboard.component.html',
})
export class FinancialDashboardComponent {
  protected readonly topEntitiesType = TypeFinancialManagement.RECEIVABLES;
}

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

financial-dashboard.component.html

<bfm-financial-dashboard [topEntitiesType]="topEntitiesType" />

Configuration

The dashboard composition can be customized by providing the FINANCIAL_DASHBOARD_CONFIGS injection token. When not provided, it falls back to FINANCIAL_DASHBOARD_DEFAULT_CONFIG ({ showLastInvoices: true }).

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

providers: [
  {
    provide: FINANCIAL_DASHBOARD_CONFIGS,
    useValue: { showLastInvoices: false },
  },
];

Inputs

The BfmFinancialDashboardComponent component has the following inputs:

topEntitiesType

Type of the top entities to be displayed. Affects both the summary cards composition and the top entities table.

Type	Default
TypeFinancialManagement	TypeFinancialManagement.RECEIVABLES

Events

The BfmFinancialDashboardComponent component has no events.