feat: invoice payment transactions.

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -8,8 +8,15 @@ import {
   MenuItem,
   Menu,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T, Choose } from 'components';
-import { FormatNumberCell } from '../../../components';
+import clsx from 'classnames';
+import { CLASSES } from '../../../common/classes';
+import {
+  Icon,
+  FormattedMessage as T,
+  Choose,
+  FormatDateCell,
+  FormatNumberCell,
+} from '../../../components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
@@ -99,3 +106,49 @@ export const BadDebtMenuItem = ({
     </Popover>
   );
 };
+
+/**
+ * Retrieve invoice payment transactions table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('payment_date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        // accessor: 'formatted_amount',
+        align: 'right',
+        width: 120,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'payment_receive_no.',
+        Header: intl.get('payment_no'),
+        accessor: 'payment_receive_no',
+        width: 100,
+        className: 'payment_receive_no',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};