ReceivablesTable component

1
import { ReceivablesTable } from "@monite/sdk-react";
2
3
...
4
5
// This component must be rendered within the MoniteProvider wrapper
6
const ReceivablesTablePage = () => {
7
  const tabs = [
8
    {
9
      label: 'Invoices',
10
      query: {
11
        type: 'invoice',
12
        sort: 'created_at',
13
        order: 'desc',
14
      },
15
    },
16
  ]
17
18
  return <ReceivablesTable tabs={tabs} />
19
};

1
import { ReceivablesTable } from "@monite/sdk-react";
2
3
...
4
5
// This component must be rendered within the MoniteProvider wrapper
6
const ReceivablesTablePage = () => {
7
  // Common query and search filters for all tabs
8
  const queryFilters = {
9
    type: "invoice",
10
    sort: "created_at",
11
    order: "desc",
12
  }
13
14
  const tabs = [
15
    {
16
      label: "Draft invoices",
17
      query: {
18
        status: "draft",
19
        ...queryFilters,
20
      },
21
    },
22
    {
23
      label: "Recurring invoices",
24
      query: {
25
        status: "recurring",
26
        ...queryFilters,
27
      },
28
    },
29
    {
30
      label: "Other invoices",
31
      query: {
32
        status__in: [
33
          "issued",
34
          "partially_paid",
35
          "paid",
36
          "overdue",
37
          "uncollectible",
38
          "canceled",
39
        ],
40
        ...queryFilters,
41
      },
42
    },
43
  ]
44
45
  return <ReceivablesTable tabs={tabs} />
46
};