Fiscal Document

This section describes the reusable components available under charges/pages/fiscal-document, used to build the fiscal document (Gestão de Notas Fiscais) experience.

Composition

The fiscal document feature is composed of the following reusable components:

• BfmCertificateSetupBannerComponent - Activation banner displayed before the digital certificate is configured.
• BfmFinancialDashboardComponent - Dashboard with summary cards, latest invoices and top entities.
• FinancialManagementNfeTableComponent - Table of NFe (product invoices).
• FinancialManagementNfseTableComponent - Table of NFSe (service invoices).

All components are standalone and exported from @celerofinancas/ui-charges.

Module activation status

Which part of the experience is rendered depends on whether the fiscal document module (digital certificate) is already activated for the active company. This rule is not handled by the components themselves — it is exposed by the FinancialManagementService and the consumer decides what to render:

• When the module is not activated, show the BfmCertificateSetupBannerComponent.
• When the module is activated, show the BfmFinancialDashboardComponent together with the NFe/NFSe tables (dashboard/list section).

FinancialManagementService

Member	Type	Description
nfModuleActivated	WritableSignal<boolean | null>	Activation status signal. null = not loaded yet, true = active, false = not active.
loadNFModuleStatus()	void	Loads the activation status for the active company. Idempotent: skips the request if the status is already known or another call is in flight.
refreshNFModuleStatus()	void	Clears the cached status and re-fetches it. Call after the activation flow completes so the UI reflects the new state without a page reload.

fiscal-document.component.ts

import { Component, OnInit, inject } from '@angular/core';
import {
  FinancialManagementService,
  TypeFinancialManagement,
} from '@celerofinancas/ui-charges';

@Component({ /* ... */ })
export class FiscalDocumentComponent implements OnInit {
  private readonly financialManagementService = inject(FinancialManagementService);

  // Drives whether the certificate setup banner or the dashboard/list is rendered.
  public readonly nfModuleActivated = this.financialManagementService.nfModuleActivated;

  public readonly TypeFinancialManagement = TypeFinancialManagement;

  public ngOnInit(): void {
    this.financialManagementService.loadNFModuleStatus();
  }
}

fiscal-document.component.html

@if (nfModuleActivated() === false) {
  <bfm-certificate-setup-banner />
}

@if (nfModuleActivated() === true) {
  <bfm-financial-dashboard [topEntitiesType]="TypeFinancialManagement.PAYABLES" />
  <!-- NFe / NFSe tables -->
}

Shared models

Some components rely on the following enums, also exported from @celerofinancas/ui-charges:

TypeFinancialManagement

Value	Description
TypeFinancialManagement.PAYABLES ('payables')	Invoices to be paid (entrada).
TypeFinancialManagement.RECEIVABLES ('receivables')	Invoices to be received (saída).

CategoryFinancialManagement

Value	Description
CategoryFinancialManagement.PAYABLES_NFE ('payables-nfe')	Payable product invoices.
CategoryFinancialManagement.PAYABLES_NFSE ('payables-nfse')	Payable service invoices.
CategoryFinancialManagement.RECEIVABLES_NFSE ('receivables-nfse')	Receivable service invoices.