feat: customers balance summary.

client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js

@@ -0,0 +1,48 @@
+import React, { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import classNames from 'classnames';
+
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+
+import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
+import { useCustomersSummaryColumns } from './components';
+
+/**
+ * customers balance summary table.
+ */
+export default function CustomersBalanceSummaryTable({
+  // #ownProps
+  companyName,
+}) {
+  const { formatMessage } = useIntl();
+
+  const {
+    isCustomersBalanceLoading,
+    CustomerBalanceSummary: { tableRows },
+  } = useCustomersBalanceSummaryContext();
+
+  const columns = useCustomersSummaryColumns();
+
+  const rowClassNames = (row) => {
+    return [`row-type--${row.original.rowTypes}`];
+  };
+
+  return (
+    <FinancialSheet
+      name={'customers-balance-summary'}
+      companyName={companyName}
+      sheetType={formatMessage({ id: 'customers_balance_summary' })}
+      asDate={new Date()}
+      loading={isCustomersBalanceLoading}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={tableRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true}
+      />
+    </FinancialSheet>
+  );
+}