Cash Flow Dashboard

This section describes the BfmCashflowDashboardComponent component.

Composition

The BfmCashFlowDashboard is composed of the following components:

• BfmDashboardActionsComponent - Actions component for the dashboard.
• BfmDashboardFinanceComponent - Finance component for the dashboard.
• BfmDashboardHeaderComponent - Header component for the dashboard.
• BfmDashboardRecordsComponent - Records component for the dashboard.
• BfmDashboardSummaryComponent - Summary component for the dashboard.

Usage

You can import the BfmCashflowDashboardComponent directly in your route configuration.

import { BfmCashFlowDashboardComponent } from '@celerofinancas/ui-reports';

const routes = [
  {
    path: 'bfm-cash-flow-dashboard',
    component: BfmCashFlowDashboardComponent,
  },
];

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

cash-flow-dashboard.component.ts

import { BfmCashflowDashboardComponent } from "@celerofinancas/ui-reports";

@Component({
  standalone: true,
  selector: 'cash-flow-dashboard',
  imports: [BfmCashflowDashboardComponent],
  templateUrl: './cash-flow-dashboard.component.html',
})
export class CashFlowDashboardComponent {}

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

cash-flow-dashboard.component.html

<bfm-cash-flow-dashboard
  [title]="titleValue"
  [statuses]="statusesValue"
  [count]="countValue"
/>

Inputs

The BfmCashflowDashboardComponent component has no inputs.

title

Dashboard records title

Type	Default
string	Registros

statuses

Records statuses for which a record count will be shown

Type	Default
DASHBOARD_RECORD_STATUS enum in component	[]

count

Maximum number of record summary cards that will be displayed

Type	Default
number	2

Events

The BfmCashflowDashboardComponent component has no events.

Configuration

To customize the BfmCashflowDashboardComponent, you can inject the DASHBOARD_VISIBILITY_RULES token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description
blackList	Indicates whether the feature to delete multiple amounts at once is enabled.
actionCards	Determines if the last level of the Chart of Accounts (CoA) should be displayed.

Example

To customize the BfmCashflowDashboardComponent, you can inject the DASHBOARD_VISIBILITY_RULES token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { DASHBOARD_VISIBILITY_RULES } from '@celerofinancas/ui-reports';
import { CashFlowDashboardService } from './cash-flow-dashboard.service.ts';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: DASHBOARD_VISIBILITY_RULES,
      useClass: CashFlowDashboardService,
    },
  ],
};

cash-flow-dashboard.service.ts

import { ApplicationConfig } from '@angular/core';
import { DASHBOARD_RECORD_STATUS } from './dashboard-record-status';
import { DASHBOARD_ACTIONS } from '@celerofinancas/common-domain';
import { CashFlowDashboardVisibility } from '@celerofinancas/ui-reports';

@Injectable({
  providedIn: 'root',
})
export class CashFlowDashboardService implements CashFlowDashboardVisibility{
  /**
   * Fields black list
   */
  public blackList = ['openFinanceBanner'];

  /**
   * Set dashboard action cards
   */
  public actionCards = {
    actions: [DASHBOARD_ACTIONS.selectYourActions],
    recordStatuses: [DASHBOARD_RECORD_STATUS.selectYourRecordStatus],
  };
 }