SDK customization

Learn how to customize the components on the Monite React SDK.

Overview

The Monite components use the default settings by default. However, there are scenarios where you can to customize this settings to match the needs of your business.

The monite.ts file

The monite.ts file exports an object that contains several configuration options. These options provide the foundation for controlling the settings within the Monite SDK.

1// noinspection JSAnnotator
2/// <reference path="../../../sdk-react/mui-styles.d.ts" />
3import type { Components } from '@mui/material/styles/components.js';
4import type {
5  Palette,
6  PaletteOptions,
7  SimplePaletteColorOptions,
8} from '@mui/material/styles/createPalette.js';
9import type { Theme, ThemeOptions } from '@mui/material/styles/createTheme.js';
10import type { TypographyOptions } from '@mui/material/styles/createTypography.js';
11import '@mui/x-data-grid/themeAugmentation';
12
13const filterControlWidth = '160px';
14
15export const defaultMoniteComponents: Components<Omit<Theme, 'components'>> = {
16  MoniteOptions: {
17    defaultProps: {
18      dateFormat: {
19        day: '2-digit',
20        month: 'short',
21        year: 'numeric',
22      },
23      dateTimeFormat: {
24        day: '2-digit',
25        month: 'short',
26        year: 'numeric',
27        hour: '2-digit',
28        minute: '2-digit',
29      },
30    },
31  },
32  MuiTypography: {
33    styleOverrides: {
34      root: {
35        '&.Monite-SummaryCard-StatusTypography': {
36          fontSize: 14,
37        },
38        '&.Monite-SummaryCard-StatusTypography-draft': {
39          color: statusBackgroundColors.draft,
40        },
41      },
42    },
43  },
44  ...
45  MonitePayableDetailsInfo: {
46    defaultProps: {
47      ocrMismatchFields: {
48        amount_to_pay: false,
49        counterpart_bank_account_id: false,
50      },
51    },
52  },
53  MonitePayableTable: {
54    defaultProps: {
55      isShowingSummaryCards: true,
56      fieldOrder: [
57        'document_id',
58        'counterpart_id',
59        'created_at',
60        'issued_at',
61        'due_date',
62        'status',
63        'amount',
64        'pay',
65      ],
66    },
67  },
68  MuiFormHelperText: {
69    styleOverrides: {
70      root: {
71        fontSize: '12px',
72      },
73    },
74  },
75  MoniteApprovalRequestStatusChip: {
76    defaultProps: {
77      icon: false,
78      size: 'small',
79    },
80  },
81};

Customizable components

MonitePayableTable

Add tabs with filters

You can select additional tabs to be added to the payables table, which will display the results of specific filters. See an example with tabs/filters for unpaid, schedules, and paid payables:

Additional tabs with filters
Additional tabs with filters

The required fields must be informed in the summaryCardFilters field. Here is an example:

1MonitePayableTable: {
2    defaultProps: {
3      ...
4      summaryCardFilters: {
5        Unpaid: {
6          status__in: ['draft', 'new', 'approve_in_progress', 'rejected'],
7        },
8        Scheduled: {
9          tag_ids: ['f4031683-7605-48c6-969c-dcfc5397935b'],
10          status__in: [
11            'draft',
12            'new',
13            'approve_in_progress',
14            'waiting_to_be_paid',
15            'partially_paid',
16          ],
17        },
18        Paid: {
19          status__in: ['paid'],
20        },
21      },
22    },
23  },

Some fields of the code explained:

  • Unpaid, Scheduled, Paid - The labels of the tab.
  • status__in, tag_ids - The filters of the tab.

See the GET /payables endpoint for all possible filters.

MonitePayableDetails

Set fields to be mandatory for review after OCR

You can select which fields of the Payable are mandatory to be filled after the OCR process. The fields that were not scanned will be marked as required with a red asterisk:

Mandatory fields for review after OCR
Mandatory fields for review after OCR

The required fields must be informed in the ocrRequiredFields field. Here is an example:

1MonitePayableDetailsInfo: {
2  defaultProps: {
3    ocrRequiredFields: {
4      invoiceNumber: true,       // The invoice number is required based on OCR data
5      counterpart: true,         // The counterpart is required based on OCR data
6      dueDate: true,             // The due date is required based on OCR data
7      currency: true,            // The currency is required based on OCR data
8    },
9  },
10},

MoniteOptions

Set dateFormat and dateTimeFormat

You can set the format for both date and date-time elements. They must be informed in the MoniteOptions field. Here is an example:

1MoniteOptions: {
2    defaultProps: {
3      dateFormat: {
4        day: '2-digit',
5        month: 'short',
6        year: 'numeric',
7      },
8      dateTimeFormat: {
9        day: '2-digit',
10        month: 'short',
11        year: 'numeric',
12        hour: '2-digit',
13        minute: '2-digit',
14      },
15    },
16  },