From 6aba6945183f232c80a4e0b5235d67e94b6e6b5b Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Tue, 14 Dec 2021 17:56:42 +0200
Subject: [PATCH] feat: add payment trasnactions.

---
 .../Drawers/BillDrawer/BillDrawerDetails.js   |   5 +-
 .../Drawers/BillDrawer/BillDrawerProvider.js  |  19 +-
 .../BillPaymentTransactionTable.js            |  14 +-
 .../BillPaymentTransactions/components.js     |  16 +-
 .../InvoiceDetailDrawer/InvoiceDetail.js      |   5 +-
 .../InvoiceDetailDrawerProvider.js            |  18 +-
 .../InvoicePaymentTransactionsTable.js        |  16 +-
 .../InvoicePaymentTransactions/components.js  |  24 +-
 .../ItemDetailDrawer/ItemContentDetails.js    |   1 -
 .../BillPaymentTransactionsDataTable.js       |  81 ++----
 .../EstimatePaymentTransactionsDataTable.js   |  76 ++----
 .../InvoicePaymentTransactionsDataTable.js    |  86 ++-----
 .../ReceiptPaymentTransactionsDataTable.js    |  86 ++-----
 .../ItemPaymentTransactions/components.js     | 237 ++++++++++++++++++
 .../ItemPaymentTransactions/index.js          |   5 +-
 .../ItemPaymentTransactions/utils.js          |  59 -----
 src/hooks/query/items.js                      |  59 +++++
 src/hooks/query/types.js                      |   4 +
 src/lang/en/index.json                        |  19 +-
 19 files changed, 448 insertions(+), 382 deletions(-)
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
 delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js

diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 0c4d44846..0385670a4 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -19,11 +19,12 @@ import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
 export default function BillDrawerDetails() {
   const {
     data: { transactions },
+    billId,
   } = useBillDrawerContext();
 
   return (
     <div className={clsx(BillDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
+      <DrawerMainTabs renderActiveTabPanelOnly={true} defaultSelectedTabId="details">
         <Tab
           title={intl.get('details')}
           id={'details'}
@@ -37,7 +38,7 @@ export default function BillDrawerDetails() {
         <Tab
           title={intl.get('payment_transactions')}
           id={'payment_transactions'}
-          panel={<BillPaymentTransactionTable />}
+          panel={<BillPaymentTransactionTable billId={billId} />}
         />
         <Tab
           title={intl.get('located_landed_cost')}
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerProvider.js b/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
index 4bc138362..bef541bb0 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
@@ -5,7 +5,6 @@ import {
   useBill,
   useTransactionsByReference,
   useBillLocatedLandedCost,
-  useBillPaymentTransactions,
 } from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
@@ -34,31 +33,15 @@ function BillDrawerProvider({ billId, ...props }) {
       enabled: !!billId,
     });
 
-  // Handle fetch bill payment transaction.
-  const {
-    isLoading: isPaymentTransactionsLoading,
-    isFetching: isPaymentTransactionFetching,
-    data: paymentTransactions,
-  } = useBillPaymentTransactions(billId, {
-    enabled: !!billId,
-  });
-
   //provider.
   const provider = {
     transactions,
     billId,
     data,
     bill,
-    paymentTransactions,
-    isPaymentTransactionsLoading,
-    isPaymentTransactionFetching,
   };
 
-  const loading =
-    isLandedCostLoading ||
-    isTransactionLoading ||
-    isPaymentTransactionsLoading ||
-    isBillLoading;
+  const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
 
   return (
     <DrawerLoading loading={loading}>
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
index 77fafdf26..ab23a4620 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
@@ -5,6 +5,7 @@ import 'style/pages/PaymentTransactions/List.scss';
 
 import { useBillPaymentTransactionsColumns } from './components';
 import { useBillDrawerContext } from '../BillDrawerProvider';
+import { useBillPaymentTransactions } from 'hooks/query';
 
 /**
  * Bill payment transactions datatable.
@@ -12,11 +13,16 @@ import { useBillDrawerContext } from '../BillDrawerProvider';
 export default function BillPaymentTransactionTable() {
   const columns = useBillPaymentTransactionsColumns();
 
+  const { billId } = useBillDrawerContext();
+
+  // Handle fetch bill payment transaction.
   const {
-    paymentTransactions,
-    isPaymentTransactionsLoading,
-    isPaymentTransactionFetching,
-  } = useBillDrawerContext();
+    isLoading: isPaymentTransactionsLoading,
+    isFetching: isPaymentTransactionFetching,
+    data: paymentTransactions,
+  } = useBillPaymentTransactions(billId, {
+    enabled: !!billId,
+  });
 
   return (
     <Card>
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
index 8927ef7e6..cd8ba435e 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -14,17 +14,23 @@ export const useBillPaymentTransactionsColumns = () => {
       {
         id: 'date',
         Header: intl.get('payment_date'),
-        accessor: 'date',
+        accessor: 'formatted_payment_date',
         Cell: FormatDateCell,
         width: 110,
         className: 'date',
         textOverview: true,
       },
+      {
+        id: 'payment_account_name',
+        Header: intl.get('bill_transactions.column.deposit_account'),
+        accessor: 'payment_account_name',
+        width: 120,
+        textOverview: true,
+      },
       {
         id: 'amount',
         Header: intl.get('amount'),
-        accessor: 'amount',
-        // accessor: 'formatted_amount',
+        accessor: 'formatted_payment_amount',
         align: 'right',
         width: 100,
         className: clsx(CLASSES.FONT_BOLD),
@@ -40,9 +46,9 @@ export const useBillPaymentTransactionsColumns = () => {
       {
         id: 'reference',
         Header: intl.get('reference_no'),
-        accessor: 'reference',
+        accessor: 'payment_reference_no',
         width: 90,
-        className: 'reference',
+        className: 'payment_reference_no',
         clickable: true,
         textOverview: true,
       },
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
index 9bc708e0d..95d16a5ff 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
@@ -20,7 +20,10 @@ export default function InvoiceDetail() {
 
   return (
     <div className={clsx(InvoiceDrawerCls.invoice_details)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
+      <DrawerMainTabs
+        renderActiveTabPanelOnly={true}
+        defaultSelectedTabId="details"
+      >
         <Tab
           title={intl.get('details')}
           id={'details'}
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index 9b59028a5..fa99842ff 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -29,30 +29,14 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
     enabled: !!invoiceId,
   });
 
-  // Fetch invoice payment transactions.
-  const {
-    data: paymentTransactions,
-    isFetching: isPaymentTransactionFetching,
-    isLoading: isPaymentTransactionLoading,
-  } = useInvoicePaymentTransactions(invoiceId, {
-    enabled: !!invoiceId,
-  });
-
   //provider.
   const provider = {
     transactions,
-    paymentTransactions,
-    isPaymentTransactionLoading,
-    isPaymentTransactionFetching,
     invoiceId,
     invoice,
   };
   return (
-    <DrawerLoading
-      loading={
-        isTransactionLoading || isInvoiceLoading || isPaymentTransactionLoading
-      }
-    >
+    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
         title={intl.get('invoice_details')}
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
index 81ff03c73..ef2928824 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
@@ -5,18 +5,24 @@ import 'style/pages/PaymentTransactions/List.scss';
 
 import { useInvoicePaymentTransactionsColumns } from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
+import { useInvoicePaymentTransactions } from 'hooks/query';
 
 /**
  * Invoice payment transactions datatable.
  */
 export default function InvoicePaymentTransactionsTable() {
   const columns = useInvoicePaymentTransactionsColumns();
-  const {
-    paymentTransactions,
-    isPaymentTransactionLoading,
-    isPaymentTransactionFetching,
-  } = useInvoiceDetailDrawerContext();
 
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Fetch invoice payment transactions.
+  const {
+    data: paymentTransactions,
+    isFetching: isPaymentTransactionFetching,
+    isLoading: isPaymentTransactionLoading,
+  } = useInvoicePaymentTransactions(invoiceId, {
+    enabled: !!invoiceId,
+  });
   return (
     <Card>
       <DataTable
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
index d57bda7f4..680802e62 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -14,35 +14,41 @@ export const useInvoicePaymentTransactionsColumns = () => {
       {
         id: 'date',
         Header: intl.get('payment_date'),
-        accessor: 'date',
+        accessor: 'formatted_payment_date',
         Cell: FormatDateCell,
         width: 110,
         className: 'date',
         textOverview: true,
       },
+      {
+        id: 'deposit_account_name',
+        Header: intl.get('invoice_transactions.column.withdrawal_account'),
+        accessor: 'deposit_account_name',
+        width: 120,
+        textOverview: true,
+      },
       {
         id: 'amount',
         Header: intl.get('amount'),
-        accessor: 'amount',
-        // accessor: 'formatted_amount',
+        accessor: 'formatted_payment_amount',
         align: 'right',
         width: 120,
         className: clsx(CLASSES.FONT_BOLD),
         textOverview: true,
       },
       {
-        id: 'payment_receive_no.',
+        id: 'payment_number.',
         Header: intl.get('payment_no'),
-        accessor: 'payment_receive_no',
+        accessor: 'payment_number',
         width: 100,
-        className: 'payment_receive_no',
+        className: 'payment_number',
       },
       {
-        id: 'reference_no',
+        id: 'payment_reference_no',
         Header: intl.get('reference_no'),
-        accessor: 'reference_no',
+        accessor: 'payment_reference_no',
         width: 90,
-        className: 'reference_no',
+        className: 'payment_reference_no',
         clickable: true,
         textOverview: true,
       },
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
index 163b310ba..61d94a3a2 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
@@ -3,7 +3,6 @@ import React from 'react';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
 import ItemDetailHeader from './ItemDetailHeader';
 import { ItemPaymentTransactions } from './ItemPaymentTransactions';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { Card } from 'components';
 
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
index 3cfd3218c..b08e709e5 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
@@ -1,76 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } from '../../../../components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useItemAssociatedBillTransactions } from 'hooks/query';
+import { useBillTransactionsColumns } from './components';
 
 /**
  * Bill payment transactions data table.
  */
 export default function BillPaymentTransactions() {
-  const columns = React.useMemo(
-    () => [
-      {
-        id: 'bill_date',
-        Header: intl.get('date'),
-        accessor: 'bill_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'bill_date',
-      },
-      {
-        id: 'bill_number',
-        Header: intl.get('bill_number'),
-        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
-        width: 100,
-        className: 'bill_number',
-      },
-      {
-        id: 'vendor',
-        Header: intl.get('vendor_name'),
-        accessor: 'vendor.display_name',
-        width: 180,
-        className: 'vendor',
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 90,
-        className: 'reference_no',
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Purchase',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-      {
-        id: 'status',
-        Header: intl.get('status'),
-        // accessor: (row) => statusAccessor(row),
-        width: 160,
-        className: 'status',
-      },
-    ],
-    [],
-  );
+  const columns = useBillTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isBillTransactionsLoading,
+    isFetching: isBillTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedBillTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isBillTransactionsLoading}
+          headerLoading={isBillTransactionsLoading}
+          progressBarLoading={isBillTransactionFetching}
         />
       </Card>
     </div>
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
index de04b499e..ebab517ab 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
@@ -1,71 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } from '../../../../components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useItemAssociatedEstimateTransactions } from 'hooks/query';
+import { useEstimateTransactionsColumns } from './components';
 
 /**
  * Esimtate payment transactions datatable.
  */
 export default function EstimatePaymentTransactions() {
-  const columns = React.useMemo(
-    () => [
-      {
-        id: 'estimate_date',
-        Header: intl.get('date'),
-        accessor: 'estimate_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'estimate_date',
-        textOverview: true,
-      },
-      {
-        id: 'estimate_number',
-        Header: intl.get('estimate_no'),
-        accessor: 'estimate_number',
-        width: 100,
-        className: 'estimate_number',
-        textOverview: true,
-      },
-      {
-        id: 'reference',
-        Header: intl.get('reference_no'),
-        accessor: 'reference',
-        width: 140,
-        className: 'reference',
-      },
-      {
-        id: 'customer_id',
-        Header: intl.get('customer_name'),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-    ],
-    [],
-  );
+  const columns = useEstimateTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isEstimateTransactionsLoading,
+    isFetching: isEstimateTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedEstimateTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isEstimateTransactionsLoading}
+          headerLoading={isEstimateTransactionsLoading}
+          progressBarLoading={isEstimateTransactionFetching}
         />
       </Card>
     </div>
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
index 345ff9587..1299a4118 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
@@ -1,81 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } from '../../../../components';
+import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useInvoicePaymentTransactionsColumns } from './components';
 
 /**
  * Invoice payment transactions datatable.
  */
 export default function InvoicePaymentTransactionsTable() {
-  const columns = React.useMemo(
-    () => [
-      {
-        id: 'invoice_date',
-        Header: intl.get('date'),
-        accessor: 'invoice_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'invoice_date',
-        textOverview: true,
-      },
-      {
-        id: 'invoice_no',
-        Header: intl.get('invoice_no__'),
-        accessor: 'invoice_no',
-        width: 240,
-        className: 'invoice_no',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer_name'),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-      {
-        id: 'status',
-        Header: intl.get('status'),
-        // accessor: (row) => statusAccessor(row),
-        width: 160,
-        className: 'status',
-      },
-    ],
-    [],
-  );
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch invoice associated transactions.
+  const {
+    isLoading: isInvoiceTransactionsLoading,
+    isFetching: isInvoiceTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedInvoiceTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isInvoiceTransactionsLoading}
+          headerLoading={isInvoiceTransactionsLoading}
+          progressBarLoading={isInvoiceTransactionFetching}
         />
       </Card>
     </div>
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
index 3b82ce7b9..c73f8e20a 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
@@ -1,81 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } from '../../../../components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useItemAssociatedReceiptTransactions } from 'hooks/query';
+import { useReceiptTransactionsColumns } from './components';
 
 /**
  * Receipt payment transactions datatable.
  */
 export default function ReceiptPaymentTransactions() {
-  const columns = React.useMemo(
-    () => [
-      {
-        id: 'receipt_date',
-        Header: intl.get('date'),
-        accessor: 'receipt_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'receipt_date',
-        textOverview: true,
-      },
-      {
-        id: 'receipt_number',
-        Header: intl.get('receipt_no'),
-        accessor: 'receipt_number',
-        width: 140,
-        className: 'receipt_number',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer_name'),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-        textOverview: true,
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-        textOverview: true,
-      },
-      {
-        id: 'status',
-        Header: intl.get('status'),
-        // accessor: StatusAccessor,
-        width: 140,
-        className: 'status',
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-    ],
-    [],
-  );
+  const columns = useReceiptTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch receipts associated transactions.
+  const {
+    isLoading: isReceiptTransactionsLoading,
+    isFetching: isReceiptTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedReceiptTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isReceiptTransactionsLoading}
+          headerLoading={isReceiptTransactionsLoading}
+          progressBarLoading={isReceiptTransactionFetching}
         />
       </Card>
     </div>
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
new file mode 100644
index 000000000..2ff7389b8
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
@@ -0,0 +1,237 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { FormatDateCell } from '../../../../components';
+
+/**
+ * Retrieve invoice payment transactions associated with item table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_invoice_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_number',
+        width: 120,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      // {
+      //   id: 'reference_number',
+      //   Header: intl.get('reference_no'),
+      //   accessor: 'reference_number',
+      //   width: 120,
+      //   className: 'reference_number',
+      //   textOverview: true,
+      // },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Retrieve estimate transactions associated with item table columns.
+ */
+export const useEstimateTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_estimate_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 120,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Retrieve receipt transactions associated with item table columns.
+ */
+export const useReceiptTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_receipt_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receip_number',
+        width: 140,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 140,
+        className: 'reference_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
+
+/**
+ * Retrieve bill transactions associated with item table columns.
+ */
+export const useBillTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'bill_date',
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 140,
+        className: 'reference_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: 'Quantity Sold',
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
index 502918c8c..bd2fefae1 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -6,11 +6,9 @@ import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataT
 import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
 import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
 
-import ItemSwitchMenuItem from './utils';
-
 export const ItemPaymentTransactions = () => {
   return (
-    <DrawerMainTabs>
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
       <Tab
         id={'invoice'}
         title={<T id={'invoice'} />}
@@ -18,7 +16,6 @@ export const ItemPaymentTransactions = () => {
       />
       <Tab
         id={'estiamte'}
-        title={'Estimate'}
         title={<T id={'estimate_'} />}
         panel={<EstimatePaymentTransactionsTable />}
       />
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
deleted file mode 100644
index 783e6dde0..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import {
-  Popover,
-  Menu,
-  Position,
-  Button,
-  MenuItem,
-  Classes,
-  NavbarGroup,
-  PopoverInteractionKind,
-} from '@blueprintjs/core';
-import { Icon } from '../../../../components';
-import { curry } from 'lodash/fp';
-import { Select } from '@blueprintjs/select';
-
-function ItemSwitchMenuItem({ onChange }) {
-  const Transaction = [
-    { name: 'Invoice' },
-    { name: 'Estimate' },
-    { name: 'Bill' },
-    { name: 'Receipt' },
-  ];
-
-  const handleSwitchMenutItem = (item) => {
-    onChange && onChange(item);
-  };
-
-  const content = (
-    <Menu>
-      {Transaction.map((item) => (
-        <MenuItem
-          onClick={() => handleSwitchMenutItem(item.name)}
-          text={item.name}
-        />
-      ))}
-    </Menu>
-  );
-
-  return (
-    <Popover
-      content={content}
-      interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM_LEFT}
-      modifiers={{
-        offset: { offset: '0, 4' },
-      }}
-      minimal={true}
-    >
-      <Button
-        minimal={true}
-        text="Select Service"
-        rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-      />
-    </Popover>
-  );
-}
-
-export default ItemSwitchMenuItem;
diff --git a/src/hooks/query/items.js b/src/hooks/query/items.js
index aa5c60559..279e477b9 100644
--- a/src/hooks/query/items.js
+++ b/src/hooks/query/items.js
@@ -172,3 +172,62 @@ export function useItem(id, props) {
     },
   );
 }
+
+export function useItemAssociatedInvoiceTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_INVOICES, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/invoices`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedEstimateTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_ESTIMATES, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/estimates`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
+export function useItemAssociatedReceiptTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_RECEIPTS, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/receipts`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+export function useItemAssociatedBillTransactions(id, props) {
+  return useRequestQuery(
+    [t.ITEM_ASSOCIATED_WITH_BILLS, id],
+    {
+      method: 'get',
+      url: `items/${id}/transactions/bills`,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index 36a2bb5ea..4961c186e 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -47,6 +47,10 @@ const ITEMS = {
   ITEMS: 'ITEMS',
   ITEM: 'ITEM',
   ITEMS_CATEGORIES: 'ITEMS_CATEGORIES',
+  ITEM_ASSOCIATED_WITH_INVOICES: 'ITEM_ASSOCIATED_WITH_INVOICES',
+  ITEM_ASSOCIATED_WITH_ESTIMATES: 'ITEM_ASSOCIATED_WITH_ESTIMATES',
+  ITEM_ASSOCIATED_WITH_RECEIVES: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
+  ITEM_ASSOCIATED_WITH_BILSS: 'ITEMS_ASSOCIATED_WITH_BILLS',
 };
 
 const SALE_ESTIMATES = {
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 39a7bbdd2..1841d8732 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1624,14 +1624,17 @@
   "transactions_locking.lock_all_transactions_at_once": "Lock All Transactions At Once →",
   "transactions_locking.lock_modules_individually": "Lock Modules Individually →",
   "transactions_locking_lock_all_transactions_at_once": "Lock All Transactions At Once.",
-  "transactions_locking.lock": "Lock", 
-  "transactions_locking.unlock": "Unlock", 
-  "transactions_locking.full_unlock": "Full Unlock", 
-  "transactions_locking.paetial_unlock": "Partial Unlock", 
-  "transactions_locking.cancel_partial_unlock": "Cancel Partial Unlock", 
+  "transactions_locking.lock": "Lock",
+  "transactions_locking.unlock": "Unlock",
+  "transactions_locking.full_unlock": "Full Unlock",
+  "transactions_locking.paetial_unlock": "Partial Unlock",
+  "transactions_locking.cancel_partial_unlock": "Cancel Partial Unlock",
   "transactions_locking.of_the_module_locked_to": "Transactions of the module locked to <strong>{value}</strong>.",
   "transactions_locking.lock_reason": "Lock Reason: <strong>{value}</strong>.",
   "transactions_locking.partial_unlocked_from": "Partial unlocked from <strong>{fromDate}</strong> to <strong>{toDate}</strong>.",
-  "transactions_locking.unlock_reason":"<strong>Unlock Reason:</strong> {value}.",
-  "payment_transactions":"Payment transactions"
-}
\ No newline at end of file
+  "transactions_locking.unlock_reason": "<strong>Unlock Reason:</strong> {value}.",
+  "payment_transactions": "Payment transactions",
+  "invoice_transactions.column.withdrawal_account": "Deposit account",
+  "bill_transactions.column.deposit_account": "Withdrawal account"
+}
+