Paginated Cash Flow

This section describes the BfmPaginatedCashFlowComponent component.

Composition

The BfmPaginatedCashFlowComponent is composed of the following components and modules:

• BfmPaginatedCashFlowComponent - Component for displaying financial records.
• NoContentModule - Module for displaying no content state.
• BackToTopModule - Module for back-to-top functionality.
• CdsShimmerDirective - Directive for shimmer loading effect.
• InfiniteScrollDirective - Directive for infinite scrolling.
• CashFlowPipe - Pipe for cash flow formatting.

Usage

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

paginated-cash-flow.component.ts

import { BfmPaginatedCashFlowComponent } from '@celerofinancas/ui-cash-flow';

@Component({
  standalone: true,
  selector: 'bfm-paginated-cash-flow',
  imports: [BfmPaginatedCashFlowComponent],
  templateUrl: './paginated-cash-flow.component.html',
})
export class PaginatedCashFlowComponent {}

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

paginated-cash-flow.component.html

<bfm-paginated-cash-flow
  [headers]="{}"
  [columnList]="{}"
  [reportType]="''"
  [bankDetails]="false"
/>

Inputs

The BfmPaginatedCashFlowComponent component has the following inputs:

headers

Headers for the financial records list.

Type	Default
Headers	{ name: 'Nome', description: 'Descrição', payment_method: 'Método de pagamento', due_at: 'Vencimento', paid_at: 'Data', created_at: 'Envio', scheduled_date: 'Agendado para', cost_center: 'Centro de Custos', coa_name: 'Plano de Contas', value: 'Valor', include: 'Incluir', bank_id: 'Banco', processing_status: 'Status de Processamento', status: 'Status', edit: '', solve: '', has_document: '' }

columnList

List of columns to display in the financial records list.

Type	Default
ColumnItem[] | Observable<ColumnItem[]>	[ { name: 'selection', size: 1, align: 'center' }, { name: 'value', size: 2, align: 'left' }, { name: this.dateType, size: 2, align: 'left' }, { name: 'name', size: 3, align: 'left' }, { name: 'coa_name', size: 2, align: 'left' }, { name: 'status', size: 1, align: 'right' }, { name: 'bank_id', size: 1, align: 'center' } ]

reportType

Report type to be displayed.

Type	Default
'done' | 'predicted'	predicated

bankDetails

Whether to show bank details in the financial records list.

Type	Default
boolean	false

Events

This component does not emit any events.

Configuration

CASH_FLOW_MODAL_TOKEN 2.1.23

To customize the Cash Flow Modal fields, you can inject the CASH_FLOW_MODAL_TOKEN token in your module.

This token is used to provide custom configuration for which fields should be displayed in the cash flow modal. If not provided, the default configuration will be used.

Properties

Key	Description	Type
fields	Array of fields to be displayed in the modal	CASH_FLOW_MODAL_FIELDS[]
checkingAccountsDisplayType 2.2.0	Display type for checking accounts selector	CHECKING_ACCOUNTS_DISPLAY_TYPE

Available Fields

The CASH_FLOW_MODAL_FIELDS enum includes the following options:

Field	Description
DATE	Date range picker for filtering by period
BANK	Bank selector for filtering by bank
ACCOUNT	Account dropdown for filtering by checking account
PAYMENT_METHODS	Payment methods filter component
RECORD_TYPE	Record type radio buttons for filtering

The CHECKING_ACCOUNTS_DISPLAY_TYPE enum includes the following options:

Type	Description
ACTIVE	Displays only active checking accounts
ALL	Displays all checking accounts, including inactive ones

Default Configuration

The CASH_FLOW_MODAL_TOKEN default configuration is:

{
  fields: [
    CASH_FLOW_MODAL_FIELDS.DATE,
    CASH_FLOW_MODAL_FIELDS.BANK,
    CASH_FLOW_MODAL_FIELDS.ACCOUNT,
    CASH_FLOW_MODAL_FIELDS.PAYMENT_METHODS,
    CASH_FLOW_MODAL_FIELDS.RECORD_TYPE,
  ],
  checkingAccountsDisplayType: CHECKING_ACCOUNTS_DISPLAY_TYPE.ACTIVE,
}

Example

To customize the Cash Flow Modal fields, you can inject the CASH_FLOW_MODAL_TOKEN token in your module:

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { 
  CASH_FLOW_MODAL_TOKEN, 
  CASH_FLOW_MODAL_FIELDS,
  CHECKING_ACCOUNTS_DISPLAY_TYPE
} from '@celerofinancas/ui-cash-flow';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CASH_FLOW_MODAL_TOKEN,
      useValue: {
        fields: [
          CASH_FLOW_MODAL_FIELDS.DATE,
          CASH_FLOW_MODAL_FIELDS.BANK,
          CASH_FLOW_MODAL_FIELDS.PAYMENT_METHODS,
          // Note: ACCOUNT and RECORD_TYPE fields are excluded in this example
        ],
        checkingAccountsDisplayType: CHECKING_ACCOUNTS_DISPLAY_TYPE.ALL,
      },
    },
  ],
};

Field Ordering

The order of fields in the fields array determines the visual order in which they appear in the modal. You can rearrange the fields to customize the layout:

custom-order.example.ts

{
  provide: CASH_FLOW_MODAL_TOKEN,
  useValue: {
    fields: [
      CASH_FLOW_MODAL_FIELDS.PAYMENT_METHODS,  // Will appear first
      CASH_FLOW_MODAL_FIELDS.DATE,             // Will appear second
      CASH_FLOW_MODAL_FIELDS.BANK,             // Will appear third
      CASH_FLOW_MODAL_FIELDS.ACCOUNT,          // Will appear fourth
      CASH_FLOW_MODAL_FIELDS.RECORD_TYPE,      // Will appear last
    ],
  },
}