feat: invoice payment transactions.

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactionsTable.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { useInvoicePaymentTransactionsColumns } from './utils';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+/**
+ * Invoice payment transactions datatable.
+ */
+export default function InvoicePaymentTransactionsTable() {
+  const columns = useInvoicePaymentTransactionsColumns();
+  const {
+    paymentTransactions,
+    isPaymentTransactionLoading,
+    isPaymentTransactionFetching,
+  } = useInvoiceDetailDrawerContext();
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={paymentTransactions}
+        loading={isPaymentTransactionLoading}
+        headerLoading={isPaymentTransactionLoading}
+        progressBarLoading={isPaymentTransactionFetching}
+      />
+    </Card>
+  );
+}