Sales Summary

The sales summary page renders the acquiring sales dashboard: total cards, doughnut and bar charts grouped by establishment and card brand, a QR Code Pix vs cards comparison and an optional period filter.

BfmSalesSummaryComponent

This section describes the BfmSalesSummaryComponent component.

Composition

The BfmSalesSummaryComponent is composed of the following components:

• BfmTotalCardComponent - Cards displaying the summarized sales totals.
• BfmVerticalBarChartComponent - Vertical bar chart for sales by establishment and card brand.
• BfmProgressBarComponent - Progress bar for confirmed vs canceled sales.
• BfmAcquiringSummaryFilterComponent - Period filter (this month / this week / custom).
• BfmQrCodePixVsCardsComponent - QR Code Pix vs cards comparison.
• BfmQrCodePixComponent - QR Code Pix summary.

Usage

You can import the BfmSalesSummaryComponent directly in your route configuration.

import { BfmSalesSummaryComponent } from '@celerofinancas/ui-acquiring';

const routes = [
  {
    path: 'sales-summary',
    component: BfmSalesSummaryComponent,
  },
];

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

sales-summary.component.ts

import { BfmSalesSummaryComponent } from '@celerofinancas/ui-acquiring';

@Component({
  standalone: true,
  selector: 'example-component',
  imports: [BfmSalesSummaryComponent],
  templateUrl: './sales-summary.component.html',
})
export class ExampleComponent {}

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

sales-summary.component.html

<bfm-sales-summary />

Inputs

The BfmSalesSummaryComponent component has no inputs.

Events

The BfmSalesSummaryComponent component has no events.

Feature flags

The component reacts to the following feature flags:

Flag	Behavior
enable_qrcode_pix	Displays the QR Code Pix summary and comparison.
hide_acquiring_summary_period_filter	Displays the period filter and defers data loading.