From 8390e5ea6b06d38c1d9f75f2b82a58912dcef13e Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Thu, 16 Dec 2021 21:11:21 +0200
Subject: [PATCH 1/7] fix: fix errors.

---
 .../Accounting/MakeJournal/MakeJournalProvider.js  |  5 +++--
 .../Drawers/BillDrawer/BillDrawerDetails.js        |  8 +++++---
 .../Drawers/BillDrawer/LocatedLandedCostTable.js   | 14 +++++++-------
 .../PaymentMades/PaymentForm/PaymentMadeForm.js    |  4 +---
 src/hooks/query/settings.js                        |  2 +-
 src/style/pages/Expense/PageForm.scss              |  4 ++--
 src/style/pages/ManualJournal/MakeJournal.scss     |  3 +++
 7 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/containers/Accounting/MakeJournal/MakeJournalProvider.js b/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
index 2241ff28c..e382c1661 100644
--- a/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
+++ b/src/containers/Accounting/MakeJournal/MakeJournalProvider.js
@@ -7,7 +7,8 @@ import {
   useJournal,
   useCreateJournal,
   useEditJournal,
-  useSettings
+  useSettings,
+  useSettingsManualJournals
 } from 'hooks/query';
 
 const MakeJournalFormContext = createContext();
@@ -40,7 +41,7 @@ function MakeJournalProvider({ journalId, ...props }) {
   const { mutateAsync: editJournalMutate } = useEditJournal();
 
   // Loading the journal settings.
-  const { isLoading: isSettingsLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});
diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index 0385670a4..987cd77fb 100644
--- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -19,12 +19,14 @@ 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 renderActiveTabPanelOnly={true} defaultSelectedTabId="details">
+      <DrawerMainTabs
+        renderActiveTabPanelOnly={true}
+        defaultSelectedTabId="details"
+      >
         <Tab
           title={intl.get('details')}
           id={'details'}
@@ -38,7 +40,7 @@ export default function BillDrawerDetails() {
         <Tab
           title={intl.get('payment_transactions')}
           id={'payment_transactions'}
-          panel={<BillPaymentTransactionTable billId={billId} />}
+          panel={<BillPaymentTransactionTable />}
         />
         <Tab
           title={intl.get('located_landed_cost')}
diff --git a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
index 5830a0166..32c01de71 100644
--- a/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
+++ b/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
+import { DataTable, Card, FormattedMessage as T } from 'components';
 import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
 
 import { useLocatedLandedCostColumns, ActionsMenu } from './components';
@@ -31,16 +31,16 @@ function LocatedLandedCostTable({
   const columns = useLocatedLandedCostColumns();
   const { transactions, billId } = useBillDrawerContext();
 
-  // Handle the transaction delete action.
-  const handleDeleteTransaction = ({ id }) => {
-    openAlert('bill-located-cost-delete', { BillId: id });
-  };
-
   // Handle allocate landed cost button click.
   const handleAllocateCostClick = () => {
     openDialog('allocate-landed-cost', { billId });
   };
 
+  // Handle the transaction delete action.
+  const handleDeleteTransaction = ({ id }) => {
+    openAlert('bill-located-cost-delete', { BillId: id });
+  };
+
   // Handle from transaction link click.
   const handleFromTransactionClick = (original) => {
     const { from_transaction_type, from_transaction_id } = original;
@@ -64,7 +64,7 @@ function LocatedLandedCostTable({
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="receipt-24" />}
-            text={'Allocate landed cost'}
+            text={<T id={'allocate_landed_coast'} />}
             onClick={handleAllocateCostClick}
           />
         </NavbarGroup>
diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
index 15771db31..5e9f04151 100644
--- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
+++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
@@ -107,9 +107,7 @@ function PaymentMadeForm({
 
     const onError = ({
       response: {
-        error: {
-          data: { errors },
-        },
+        data: { errors },
       },
     }) => {
       const getError = (errorType) => errors.find((e) => e.type === errorType);
diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js
index 4575307aa..bc28b9e57 100644
--- a/src/hooks/query/settings.js
+++ b/src/hooks/query/settings.js
@@ -95,7 +95,7 @@ export function useSettingsReceipts(props) {
 export function useSettingsManualJournals(props) {
   return useSettingsQuery(
     [t.SETTING, t.SETTING_MANUAL_JOURNALS],
-    { group: 'sale_receipts' },
+    { group: 'manual_journals' },
     props,
   );
 }
diff --git a/src/style/pages/Expense/PageForm.scss b/src/style/pages/Expense/PageForm.scss
index 102a3819e..6aaf1fade 100644
--- a/src/style/pages/Expense/PageForm.scss
+++ b/src/style/pages/Expense/PageForm.scss
@@ -1,5 +1,5 @@
-.dashboard__insider--expenses {
-
+.dashboard__insider--expense-form {
+  padding-bottom: 64px;
   .bigcapital-datatable {
 
     .tbody {
diff --git a/src/style/pages/ManualJournal/MakeJournal.scss b/src/style/pages/ManualJournal/MakeJournal.scss
index d10c11380..1490e7642 100644
--- a/src/style/pages/ManualJournal/MakeJournal.scss
+++ b/src/style/pages/ManualJournal/MakeJournal.scss
@@ -1,3 +1,6 @@
+.dashboard__insider--make-journal-page {
+  padding-bottom: 64px;
+}
 
 .page-form--make-journal-entries{
   $self: '.page-form';  

From f9fe3506c5f0689fe3c4c811d64c8dadb7eefdc7 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 19 Dec 2021 17:29:25 +0200
Subject: [PATCH 2/7] feat: item payment transactions.

---
 src/common/itemPaymentTranactionsOption.js    |   8 ++
 .../ItemDetailDrawer/ItemContentDetails.js    |  10 +-
 .../ItemDetailDrawerProvider.js               |   5 +
 .../ItemDetailDrawer/ItemDetailHeader.js      | 130 +++++++++---------
 .../Drawers/ItemDetailDrawer/ItemDetailTab.js |  23 ++++
 .../BillPaymentTransactionsDataTable.js       |  20 ++-
 .../EstimatePaymentTransactionsDataTable.js   |  20 ++-
 .../InvoicePaymentTransactionsDataTable.js    |  20 ++-
 .../ItemPaymentTransactionContent.js          |  21 +++
 .../ReceiptPaymentTransactionsDataTable.js    |  20 ++-
 .../ItemPaymentTransactions/index.js          |  52 ++++---
 .../ItemPaymentTransactions/utils.js          |  38 +++++
 src/style/components/Drawers/ItemDrawer.scss  |  36 +++--
 13 files changed, 235 insertions(+), 168 deletions(-)
 create mode 100644 src/common/itemPaymentTranactionsOption.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js

diff --git a/src/common/itemPaymentTranactionsOption.js b/src/common/itemPaymentTranactionsOption.js
new file mode 100644
index 000000000..1df2bb456
--- /dev/null
+++ b/src/common/itemPaymentTranactionsOption.js
@@ -0,0 +1,8 @@
+import intl from 'react-intl-universal';
+
+export default [
+  { name: 'invoices', label: intl.get('invoices') },
+  { name: 'estimates', label: intl.get('estimates') },
+  { name: 'receipts', label: intl.get('receipts') },
+  { name: 'bills', label: intl.get('bills') },
+];
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
index 61d94a3a2..e2044c0e1 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
@@ -1,10 +1,7 @@
 import React from 'react';
 
+import ItemDetailTab from './ItemDetailTab';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
-import ItemDetailHeader from './ItemDetailHeader';
-import { ItemPaymentTransactions } from './ItemPaymentTransactions';
-
-import { Card } from 'components';
 
 /**
  * Item detail.
@@ -13,10 +10,7 @@ export default function ItemDetail() {
   return (
     <div className="item-drawer">
       <ItemDetailActionsBar />
-      <ItemPaymentTransactions /> 
-      <Card>
-        <ItemDetailHeader />
-      </Card>
+      <ItemDetailTab />
     </div>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
index bb83783b3..c748e559b 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
@@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext();
  * Item detail provider
  */
 function ItemDetailDrawerProvider({ itemId, ...props }) {
+  // transaction type payload.
+  const [value, setValue] = React.useState('invoices');
+
   // Fetches the given item detail.
   const { isLoading: isItemLoading, data: item } = useItem(itemId, {
     enabled: !!itemId,
@@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
     item,
     itemId,
     isItemLoading,
+    value,
+    setValue,
   };
 
   return (
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
index 0511a2c4f..7eea8ab1b 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import classNames from 'classnames';
 
-import { If, DetailsMenu, DetailItem } from 'components';
+import { If, DetailsMenu, DetailItem, Card } from 'components';
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
 
 /**
@@ -13,70 +13,72 @@ export default function ItemDetailHeader() {
   const { item } = useItemDetailDrawerContext();
 
   return (
-    <div class="item-drawer__content">
-      <DetailsMenu direction={'vertical'}>
-        <DetailItem
-          name={'name'}
-          label={intl.get('item_name')}
-          children={item.name}
-        />
-        <DetailItem
-          label={intl.get('sell_price')}
-          children={item.sell_price_formatted}
-          align={'right'}
-        />
-        <DetailItem
-          label={intl.get('cost_price')}
-          children={item.cost_price_formatted}
-          align={'right'}
-        />
-      </DetailsMenu>
-
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem label={intl.get('item_type')} children={item.type} />
-        <DetailItem
-          label={intl.get('item_code')}
-          children={defaultTo(item.code, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
-          <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
-            <span
-              className={classNames({
-                mines: item.quantity_on_hand <= 0,
-                plus: item.quantity_on_hand > 0,
-              })}
-            >
-              {defaultTo(item.quantity_on_hand, '-')}
-            </span>
-          </DetailItem>
-        </If>
-        <DetailItem
-          label={intl.get('category_name')}
-          children={defaultTo(item.category?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('sell_account_id')}
-          children={defaultTo(item?.sell_account?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('cost_account_id')}
-          children={defaultTo(item.cost_account?.name, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
+    <Card>
+      <div class="item-drawer__content">
+        <DetailsMenu direction={'vertical'}>
           <DetailItem
-            label={intl.get('inventory_account')}
-            children={defaultTo(item?.inventory_account?.name, '-')}
+            name={'name'}
+            label={intl.get('item_name')}
+            children={item.name}
           />
-        </If>
-        <DetailItem
-          label={intl.get('item.sell_description')}
-          children={defaultTo(item.sell_description, '-')}
-        />
-        <DetailItem
-          label={intl.get('item.purchase_description')}
-          children={defaultTo(item.cost_description, '-')}
-        />
-      </DetailsMenu>
-    </div>
+          <DetailItem
+            label={intl.get('sell_price')}
+            children={item.sell_price_formatted}
+            align={'right'}
+          />
+          <DetailItem
+            label={intl.get('cost_price')}
+            children={item.cost_price_formatted}
+            align={'right'}
+          />
+        </DetailsMenu>
+
+        <DetailsMenu direction={'horizantal'}>
+          <DetailItem label={intl.get('item_type')} children={item.type} />
+          <DetailItem
+            label={intl.get('item_code')}
+            children={defaultTo(item.code, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
+              <span
+                className={classNames({
+                  mines: item.quantity_on_hand <= 0,
+                  plus: item.quantity_on_hand > 0,
+                })}
+              >
+                {defaultTo(item.quantity_on_hand, '-')}
+              </span>
+            </DetailItem>
+          </If>
+          <DetailItem
+            label={intl.get('category_name')}
+            children={defaultTo(item.category?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('sell_account_id')}
+            children={defaultTo(item?.sell_account?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('cost_account_id')}
+            children={defaultTo(item.cost_account?.name, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem
+              label={intl.get('inventory_account')}
+              children={defaultTo(item?.inventory_account?.name, '-')}
+            />
+          </If>
+          <DetailItem
+            label={intl.get('item.sell_description')}
+            children={defaultTo(item.sell_description, '-')}
+          />
+          <DetailItem
+            label={intl.get('item.purchase_description')}
+            children={defaultTo(item.cost_description, '-')}
+          />
+        </DetailsMenu>
+      </div>
+    </Card>
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
new file mode 100644
index 000000000..e964d4bd5
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { ItemPaymentTransactions } from './ItemPaymentTransactions';
+import ItemDetailHeader from './ItemDetailHeader';
+
+
+export default function ItemDetailTab() {
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        id={'overview'}
+        title={<T id={'overview'} />}
+        panel={<ItemDetailHeader />}
+      />
+      <Tab
+        id={'transactions'}
+        title={<T id={'transactions'} />}
+        panel={<ItemPaymentTransactions />}
+      />
+    </DrawerMainTabs>
+  );
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
index b08e709e5..8d0c6d7a6 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
 import { useBillTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function BillPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isBillTransactionsLoading}
-          headerLoading={isBillTransactionsLoading}
-          progressBarLoading={isBillTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isBillTransactionsLoading}
+      headerLoading={isBillTransactionsLoading}
+      progressBarLoading={isBillTransactionFetching}
+    />
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
index ebab517ab..0bafefb1a 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedEstimateTransactions } from 'hooks/query';
 import { useEstimateTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function EstimatePaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isEstimateTransactionsLoading}
-          headerLoading={isEstimateTransactionsLoading}
-          progressBarLoading={isEstimateTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isEstimateTransactionsLoading}
+      headerLoading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
+    />
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
index 1299a4118..7900a998a 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useInvoicePaymentTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function InvoicePaymentTransactionsTable() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isInvoiceTransactionsLoading}
-          headerLoading={isInvoiceTransactionsLoading}
-          progressBarLoading={isInvoiceTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isInvoiceTransactionsLoading}
+      headerLoading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
+    />
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
new file mode 100644
index 000000000..eb6f93d30
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
+import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
+import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
+import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+
+export default function ItemPaymentTransactionsContent({ tansactionType }) {
+  const handleType = () => {
+    switch (tansactionType) {
+      case 'invoices':
+        return <InvoicePaymentTransactionsTable />;
+      case 'estimates':
+        return <EstimatePaymentTransactionsTable />;
+      case 'receipts':
+        return <ReceiptPaymentTransactionsTable />;
+      case 'bills':
+        return <BillPaymentTransactionsTable />;
+    }
+  };
+  return handleType();
+}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
index c73f8e20a..dac60ed12 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedReceiptTransactions } from 'hooks/query';
 import { useReceiptTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function ReceiptPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
-      <Card>
-        <DataTable
-          columns={columns}
-          data={paymentTransactions}
-          loading={isReceiptTransactionsLoading}
-          headerLoading={isReceiptTransactionsLoading}
-          progressBarLoading={isReceiptTransactionFetching}
-        />
-      </Card>
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isReceiptTransactionsLoading}
+      headerLoading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
+    />
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
index bd2fefae1..16da8be06 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -1,34 +1,30 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
-import { DrawerMainTabs, FormattedMessage as T } from 'components';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+import styled from 'styled-components';
+import { Card, FormattedMessage as T } from 'components';
+import { ItemManuTransaction } from './utils';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 
 export const ItemPaymentTransactions = () => {
+  const { value } = useItemDetailDrawerContext();
+
   return (
-    <DrawerMainTabs renderActiveTabPanelOnly={true}>
-      <Tab
-        id={'invoice'}
-        title={<T id={'invoice'} />}
-        panel={<InvoicePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'estiamte'}
-        title={<T id={'estimate_'} />}
-        panel={<EstimatePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'receipt'}
-        title={<T id={'receipt_'} />}
-        panel={<ReceiptPaymentTransactionsTable />}
-      />
-      <Tab
-        id={'bill'}
-        title={'Bill'}
-        panel={<BillPaymentTransactionsTable />}
-      />
-    </DrawerMainTabs>
+    <Card>
+      <ItemManuTransactions>
+        <T id={'item.drawer_transactions_by'} />
+        <ItemManuTransaction />
+      </ItemManuTransactions>
+      <ItemPaymentTransactionContent tansactionType={value} />
+    </Card>
   );
 };
+
+const ItemManuTransactions = styled.div`
+  display: flex;
+  align-items: center;
+  color: #727983;
+  .bp3-button {
+    padding-left: 6px;
+    font-weight: 700;
+  }
+`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
new file mode 100644
index 000000000..9e93ea4b2
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Button,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import transactions from '../../../../common/itemPaymentTranactionsOption';
+
+export const ItemManuTransaction = () => {
+  const { value, setValue } = useItemDetailDrawerContext();
+
+  // const handleClickItem = (item) => {
+  //   onChange && onChange(item);
+  // };
+
+  const content = transactions.map(({ name, label }) => (
+    <MenuItem onClick={() => setValue(name)} text={label} />
+  ));
+
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={<Menu>{content}</Menu>}
+    >
+      <Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
+    </Popover>
+  );
+};
diff --git a/src/style/components/Drawers/ItemDrawer.scss b/src/style/components/Drawers/ItemDrawer.scss
index 4da73cd21..a7af4a0b7 100644
--- a/src/style/components/Drawers/ItemDrawer.scss
+++ b/src/style/components/Drawers/ItemDrawer.scss
@@ -38,28 +38,24 @@
       }
     }
   }
-  &__table {
-    .card {
-      padding: 12px 15px !important;
-    }
 
-    .table {
-      .tbody,
-      .thead {
-        .tr .th {
-          padding: 8px 8px;
-          background-color: #fff;
-          font-size: 14px;
-          border-bottom: 1px solid #000;
-          border-top: 1px solid #000;
-        }
+  .table {
+    margin-top: 8px;
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
       }
-      .tbody {
-        .tr .td {
-          border-bottom: 0;
-          padding-top: 0.4rem;
-          padding-bottom: 0.4rem;
-        }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
       }
     }
   }

From d0f889850c0b35bcd0db2339830627c80716e228 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 19 Dec 2021 17:30:16 +0200
Subject: [PATCH 3/7] feat: add contextMenu in invoice & bill transactions.

---
 .../BillPaymentTransactionTable.js            | 41 +++++++++-
 .../BillPaymentTransactions/components.js     | 29 +++++++-
 .../InvoicePaymentTransactionsTable.js        | 44 ++++++++++-
 .../InvoicePaymentTransactions/components.js  | 29 +++++++-
 .../ItemPaymentTransactions/components.js     | 74 ++++++++++---------
 src/lang/en/index.json                        |  8 +-
 6 files changed, 183 insertions(+), 42 deletions(-)

diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
index ab23a4620..e0caa4957 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
@@ -1,16 +1,30 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';
 
 import 'style/pages/PaymentTransactions/List.scss';
 
-import { useBillPaymentTransactionsColumns } from './components';
+import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from '../BillDrawerProvider';
 import { useBillPaymentTransactions } from 'hooks/query';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Bill payment transactions datatable.
  */
-export default function BillPaymentTransactionTable() {
+function BillPaymentTransactionTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
   const columns = useBillPaymentTransactionsColumns();
 
   const { billId } = useBillDrawerContext();
@@ -24,6 +38,19 @@ export default function BillPaymentTransactionTable() {
     enabled: !!billId,
   });
 
+  // Handles delete bill payment transactions.
+  const handleDeleteBillPaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit  bill payment transactions.
+  const handleEditBillPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('bill-drawer');
+  };
+
   return (
     <Card>
       <DataTable
@@ -32,8 +59,18 @@ export default function BillPaymentTransactionTable() {
         loading={isPaymentTransactionsLoading}
         headerLoading={isPaymentTransactionsLoading}
         progressBarLoading={isPaymentTransactionFetching}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteBillPaymentTransactons,
+          onEdit: handleEditBillPaymentTransactions,
+        }}
         className={'payment-transactions'}
       />
     </Card>
   );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactionTable);
diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
index cd8ba435e..b62afa494 100644
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
 
 /**
  * Retrieve bill payment transactions table columns.
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
index ef2928824..94253df76 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
@@ -1,16 +1,32 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';
 
 import 'style/pages/PaymentTransactions/List.scss';
 
-import { useInvoicePaymentTransactionsColumns } from './components';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
 import { useInvoicePaymentTransactions } from 'hooks/query';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Invoice payment transactions datatable.
  */
-export default function InvoicePaymentTransactionsTable() {
+function InvoicePaymentTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
   const columns = useInvoicePaymentTransactionsColumns();
 
   const { invoiceId } = useInvoiceDetailDrawerContext();
@@ -23,6 +39,20 @@ export default function InvoicePaymentTransactionsTable() {
   } = useInvoicePaymentTransactions(invoiceId, {
     enabled: !!invoiceId,
   });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ payment_receive_id }) => {
+    openAlert('payment-receive-delete', {
+      paymentReceiveId: payment_receive_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ payment_receive_id }) => {
+    history.push(`/payment-receives/${payment_receive_id}/edit`);
+    closeDrawer('invoice-detail-drawer');
+  };
+
   return (
     <Card>
       <DataTable
@@ -31,8 +61,18 @@ export default function InvoicePaymentTransactionsTable() {
         loading={isPaymentTransactionLoading}
         headerLoading={isPaymentTransactionLoading}
         progressBarLoading={isPaymentTransactionFetching}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentTransactons,
+          onEdit: handleEditPaymentTransactions,
+        }}
         className={'payment-transactions'}
       />
     </Card>
   );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactionsTable);
diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
index 680802e62..3333a986b 100644
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormattedMessage as T, FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
 
 /**
  * Retrieve invoice payment transactions table columns.
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
index 2ff7389b8..bc1437a80 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
@@ -16,10 +16,18 @@ export const useInvoicePaymentTransactionsColumns = () => {
         Header: intl.get('date'),
         accessor: 'formatted_invoice_date',
         Cell: FormatDateCell,
-        width: 140,
+        width: 120,
         className: 'invoice_date',
         textOverview: true,
       },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
       {
         id: 'invoice_no',
         Header: intl.get('invoice_no__'),
@@ -28,17 +36,9 @@ export const useInvoicePaymentTransactionsColumns = () => {
         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',
+        Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
         width: 100,
       },
@@ -76,10 +76,18 @@ export const useEstimateTransactionsColumns = () => {
         Header: intl.get('date'),
         accessor: 'formatted_estimate_date',
         Cell: FormatDateCell,
-        width: 140,
+        width: 120,
         className: 'estimate_date',
         textOverview: true,
       },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
       {
         id: 'estimate_number',
         Header: intl.get('estimate_no'),
@@ -90,7 +98,7 @@ export const useEstimateTransactionsColumns = () => {
       },
       {
         id: 'qunatity',
-        Header: 'Quantity Sold',
+        Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
         width: 100,
       },
@@ -128,30 +136,30 @@ export const useReceiptTransactionsColumns = () => {
         Header: intl.get('date'),
         accessor: 'formatted_receipt_date',
         Cell: FormatDateCell,
-        width: 110,
+        width: 120,
         className: 'receipt_date',
         textOverview: true,
       },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
       {
         id: 'receipt_number',
         Header: intl.get('receipt_no'),
         accessor: 'receip_number',
-        width: 140,
+        width: 120,
         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',
+        Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
         width: 100,
       },
@@ -189,9 +197,17 @@ export const useBillTransactionsColumns = () => {
         Header: intl.get('date'),
         accessor: 'formatted_bill_date',
         Cell: FormatDateCell,
-        width: 110,
+        width: 120,
         className: 'bill_date',
       },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor'),
+        accessor: 'vendor_display_name',
+        width: 140,
+        className: 'vendor',
+        textOverview: true,
+      },
       {
         id: 'bill_number',
         Header: intl.get('bill_number'),
@@ -199,17 +215,9 @@ export const useBillTransactionsColumns = () => {
         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',
+        Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
         width: 100,
       },
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index fc2b8bab1..0dd8dfa1a 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1638,7 +1638,13 @@
   "transactions_locking.long_description": "Transactions locking has the ability to lock all organization transactions so users can’t edit, delete or create new transactions during the past period, but still have the ability to create draft invoices or bills and that won’t affect financial reports. typically set a lock date when your financial records are being prepared for the year.",
   "payment_transactions": "Payment transactions",
   "invoice_transactions.column.withdrawal_account": "Deposit account",
+  "invoice_transactions.action.delete_transaction":"Delete Transaction",
+  "invoice_transactions.action.edit_transaction":"Edit Transaction",
   "bill_transactions.column.deposit_account": "Withdrawal account",
-  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module."
+  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module.",
+  "overview":"Overview",
+  "transactions":"Transactions",
+  "item.drawer_transactions_by":"Transactions by:",
+  "item.drawer_quantity_sold":"Quantity Sold"
 }
 

From 30841d57dcbdd691d375fc467861cdca143bfeb1 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 19 Dec 2021 18:25:41 +0200
Subject: [PATCH 4/7] feat: add item payment transactions.

---
 .../Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js | 2 +-
 src/hooks/query/items.js                                      | 2 +-
 src/hooks/query/types.js                                      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
index 16da8be06..f51ba4b56 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -25,6 +25,6 @@ const ItemManuTransactions = styled.div`
   color: #727983;
   .bp3-button {
     padding-left: 6px;
-    font-weight: 700;
+    font-weight: 500;
   }
 `;
diff --git a/src/hooks/query/items.js b/src/hooks/query/items.js
index 279e477b9..78fc18533 100644
--- a/src/hooks/query/items.js
+++ b/src/hooks/query/items.js
@@ -219,7 +219,7 @@ export function useItemAssociatedReceiptTransactions(id, props) {
 }
 export function useItemAssociatedBillTransactions(id, props) {
   return useRequestQuery(
-    [t.ITEM_ASSOCIATED_WITH_BILLS, id],
+    [t.ITEMS_ASSOCIATED_WITH_BILLS, id],
     {
       method: 'get',
       url: `items/${id}/transactions/bills`,
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index 6a6d637fc..e22b8bedf 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -49,8 +49,8 @@ const ITEMS = {
   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',
+  ITEM_ASSOCIATED_WITH_RECEIPTS: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
+  ITEMS_ASSOCIATED_WITH_BILLS: 'ITEMS_ASSOCIATED_WITH_BILLS',
 };
 
 const SALE_ESTIMATES = {

From 7095903653939a426a892eb487b941b0b558f4cb Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 19 Dec 2021 19:29:42 +0200
Subject: [PATCH 5/7] feat: add contextMenu in item transactions.

---
 .../BillPaymentTransactions/components.js     |  90 +++++++
 .../index.js}                                 |   7 +-
 .../EstimatePaymentTransactions/components.js |  92 +++++++
 .../EstimatePaymentTransactions/index.js      |  70 +++++
 .../EstimatePaymentTransactionsDataTable.js   |  33 ---
 .../InvoicePaymentTransactions/components.js  |  93 +++++++
 .../InvoicePaymentTransactions/index.js       |  56 ++++
 .../InvoicePaymentTransactionsDataTable.js    |  33 ---
 .../ItemPaymentTransactionContent.js          |  16 +-
 .../ReceiptPaymentTransactions/components.js  |  93 +++++++
 .../ReceiptPaymentTransactions/index.js       |  54 ++++
 .../ReceiptPaymentTransactionsDataTable.js    |  33 ---
 .../ItemPaymentTransactions/components.js     | 245 ------------------
 src/hooks/query/bills.js                      |   3 +
 src/hooks/query/estimates.js                  |  15 +-
 src/hooks/query/invoices.js                   |   3 +
 src/hooks/query/receipts.js                   |   3 +
 17 files changed, 578 insertions(+), 361 deletions(-)
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
 rename src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/{BillPaymentTransactionsDataTable.js => BillPaymentTransactions/index.js} (77%)
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
 delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
 delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
 create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
 delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
 delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js

diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
new file mode 100644
index 000000000..4ed2e0acc
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * 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: 120,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor'),
+        accessor: 'vendor_display_name',
+        width: 140,
+        className: 'vendor',
+        textOverview: true,
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_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/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
similarity index 77%
rename from src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
rename to src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
index 8d0c6d7a6..8c8f3025b 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { DataTable } from '../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
-import { useBillTransactionsColumns } from './components';
+import { useBillTransactionsColumns, ActionsMenu } from './components';
 
 /**
  * Bill payment transactions data table.
@@ -28,6 +28,7 @@ export default function BillPaymentTransactions() {
       loading={isBillTransactionsLoading}
       headerLoading={isBillTransactionsLoading}
       progressBarLoading={isBillTransactionFetching}
+      ContextMenu={ActionsMenu}
     />
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
new file mode 100644
index 000000000..5f49bc7f8
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * 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: 120,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 120,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_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/EstimatePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
new file mode 100644
index 000000000..47556b3a9
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedEstimateTransactions } from 'hooks/query';
+import { useEstimateTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Esimtate payment transactions.
+ */
+function EstimatePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useEstimateTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isEstimateTransactionsLoading,
+    isFetching: isEstimateTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedEstimateTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ estimate_id }) => {
+    openAlert('estimate-delete', {
+      estimateId: estimate_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ estimate_id }) => {
+    history.push(`/estimates/${estimate_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isEstimateTransactionsLoading}
+      headerLoading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+    />
+  );
+}
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(EstimatePaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
deleted file mode 100644
index 0bafefb1a..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataTable } 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 = useEstimateTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch Estimate associated transactions.
-  const {
-    isLoading: isEstimateTransactionsLoading,
-    isFetching: isEstimateTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedEstimateTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <DataTable
-      columns={columns}
-      data={paymentTransactions}
-      loading={isEstimateTransactionsLoading}
-      headerLoading={isEstimateTransactionsLoading}
-      progressBarLoading={isEstimateTransactionFetching}
-    />
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
new file mode 100644
index 000000000..ba9b6e67e
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell ,Icon} from '../../../../../components';
+import { safeCallback } from 'utils';
+
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * 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: 120,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_number',
+        width: 120,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_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/InvoicePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
new file mode 100644
index 000000000..83181f83b
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { DataTable } from '../../../../../components';
+import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice payment transactions.
+ */
+function InvoicePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch invoice associated transactions.
+  const {
+    isLoading: isInvoiceTransactionsLoading,
+    isFetching: isInvoiceTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedInvoiceTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isInvoiceTransactionsLoading}
+      headerLoading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
+      ContextMenu={ActionsMenu}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
deleted file mode 100644
index 7900a998a..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataTable } 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 = useInvoicePaymentTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch invoice associated transactions.
-  const {
-    isLoading: isInvoiceTransactionsLoading,
-    isFetching: isInvoiceTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedInvoiceTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <DataTable
-      columns={columns}
-      data={paymentTransactions}
-      loading={isInvoiceTransactionsLoading}
-      headerLoading={isInvoiceTransactionsLoading}
-      progressBarLoading={isInvoiceTransactionFetching}
-    />
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
index eb6f93d30..e31721fe5 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
@@ -1,20 +1,20 @@
 import React from 'react';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+import InvoicePaymentTransactions from './InvoicePaymentTransactions';
+import EstimatePaymentTransactions from './EstimatePaymentTransactions';
+import ReceiptPaymentTransactions from './ReceiptPaymentTransactions';
+import BillPaymentTransactions from './BillPaymentTransactions';
 
 export default function ItemPaymentTransactionsContent({ tansactionType }) {
   const handleType = () => {
     switch (tansactionType) {
       case 'invoices':
-        return <InvoicePaymentTransactionsTable />;
+        return <InvoicePaymentTransactions />;
       case 'estimates':
-        return <EstimatePaymentTransactionsTable />;
+        return <EstimatePaymentTransactions />;
       case 'receipts':
-        return <ReceiptPaymentTransactionsTable />;
+        return <ReceiptPaymentTransactions />;
       case 'bills':
-        return <BillPaymentTransactionsTable />;
+        return <BillPaymentTransactions />;
     }
   };
   return handleType();
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
new file mode 100644
index 000000000..4d0ac8779
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * 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: 120,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receip_number',
+        width: 120,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_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/ReceiptPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
new file mode 100644
index 000000000..b8fc1194a
--- /dev/null
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedReceiptTransactions } from 'hooks/query';
+import { useReceiptTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Receipt payment transactions.
+ */
+function ReceiptPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useReceiptTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch receipts associated transactions.
+  const {
+    isLoading: isReceiptTransactionsLoading,
+    isFetching: isReceiptTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedReceiptTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isReceiptTransactionsLoading}
+      headerLoading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
+      ContextMenu={ActionsMenu}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(ReceiptPaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
deleted file mode 100644
index dac60ed12..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataTable } 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 = useReceiptTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch receipts associated transactions.
-  const {
-    isLoading: isReceiptTransactionsLoading,
-    isFetching: isReceiptTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedReceiptTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <DataTable
-      columns={columns}
-      data={paymentTransactions}
-      loading={isReceiptTransactionsLoading}
-      headerLoading={isReceiptTransactionsLoading}
-      progressBarLoading={isReceiptTransactionFetching}
-    />
-  );
-}
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
deleted file mode 100644
index bc1437a80..000000000
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
+++ /dev/null
@@ -1,245 +0,0 @@
-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: 120,
-        className: 'invoice_date',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer'),
-        accessor: 'customer_display_name',
-        width: 140,
-        className: 'customer',
-        textOverview: true,
-      },
-      {
-        id: 'invoice_no',
-        Header: intl.get('invoice_no__'),
-        accessor: 'invoice_number',
-        width: 120,
-        className: 'invoice_no',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_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: 120,
-        className: 'estimate_date',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer'),
-        accessor: 'customer_display_name',
-        width: 140,
-        className: 'customer',
-        textOverview: true,
-      },
-      {
-        id: 'estimate_number',
-        Header: intl.get('estimate_no'),
-        accessor: 'estimate_number',
-        width: 120,
-        className: 'estimate_number',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_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: 120,
-        className: 'receipt_date',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer'),
-        accessor: 'customer_display_name',
-        width: 140,
-        className: 'customer',
-        textOverview: true,
-      },
-      {
-        id: 'receipt_number',
-        Header: intl.get('receipt_no'),
-        accessor: 'receip_number',
-        width: 120,
-        className: 'receipt_number',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_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: 120,
-        className: 'bill_date',
-      },
-      {
-        id: 'vendor',
-        Header: intl.get('vendor'),
-        accessor: 'vendor_display_name',
-        width: 140,
-        className: 'vendor',
-        textOverview: true,
-      },
-      {
-        id: 'bill_number',
-        Header: intl.get('bill_number'),
-        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
-        width: 100,
-        className: 'bill_number',
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_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/hooks/query/bills.js b/src/hooks/query/bills.js
index 008daf3ce..d30f32d5a 100644
--- a/src/hooks/query/bills.js
+++ b/src/hooks/query/bills.js
@@ -30,6 +30,9 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
 };
 
 /**
diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js
index b73eae6ce..63ac3e53a 100644
--- a/src/hooks/query/estimates.js
+++ b/src/hooks/query/estimates.js
@@ -9,6 +9,9 @@ import t from './types';
 const commonInvalidateQueries = (queryClient) => {
   // Invalidate estimates.
   queryClient.invalidateQueries(t.SALE_ESTIMATES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES);
 };
 
 /**
@@ -191,7 +194,7 @@ export function useRefreshEstimates() {
 }
 
 /**
- *  
+ *
  */
 export function useCreateNotifyEstimateBySMS(props) {
   const queryClient = useQueryClient();
@@ -214,11 +217,11 @@ export function useCreateNotifyEstimateBySMS(props) {
 }
 
 /**
- * 
- * @param {*} estimateId 
- * @param {*} props 
- * @param {*} requestProps 
- * @returns 
+ *
+ * @param {*} estimateId
+ * @param {*} props
+ * @param {*} requestProps
+ * @returns
  */
 export function useEstimateSMSDetail(estimateId, props, requestProps) {
   return useRequestQuery(
diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js
index 682ffecf5..1223210a9 100644
--- a/src/hooks/query/invoices.js
+++ b/src/hooks/query/invoices.js
@@ -31,6 +31,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate reconcile.
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES);
 };
 
 /**
diff --git a/src/hooks/query/receipts.js b/src/hooks/query/receipts.js
index a9b0c705b..c2cbeaa22 100644
--- a/src/hooks/query/receipts.js
+++ b/src/hooks/query/receipts.js
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS);
+
   // Invalidate the settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
 };

From 0ca0a2ee0b7a2efbae1a174ffd916b2b1ac3705d Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 20 Dec 2021 11:12:38 +0200
Subject: [PATCH 6/7] feat: add context menu.

---
 .../BillPaymentTransactions/index.js          | 37 ++++++++++++++++++-
 .../InvoicePaymentTransactions/index.js       | 16 ++++++++
 .../ReceiptPaymentTransactions/index.js       | 19 +++++++++-
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
index 8c8f3025b..237458ca2 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
@@ -1,13 +1,28 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+
 import { DataTable } from '../../../../../components';
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
 import { useBillTransactionsColumns, ActionsMenu } from './components';
 
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
  * Bill payment transactions data table.
  */
-export default function BillPaymentTransactions() {
+function BillPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
   const columns = useBillTransactionsColumns();
 
   const { itemId } = useItemDetailDrawerContext();
@@ -21,6 +36,18 @@ export default function BillPaymentTransactions() {
     enabled: !!itemId,
   });
 
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
   return (
     <DataTable
       columns={columns}
@@ -29,6 +56,14 @@ export default function BillPaymentTransactions() {
       headerLoading={isBillTransactionsLoading}
       progressBarLoading={isBillTransactionFetching}
       ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
     />
   );
 }
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactions);
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
index 83181f83b..f1520f2da 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
@@ -38,6 +38,18 @@ function InvoicePaymentTransactions({
     enabled: !!itemId,
   });
 
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ invoice_id }) => {
+    openAlert('invoice-delete', {
+      invoiceId: invoice_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ invoice_id }) => {
+    history.push(`/invoices/${invoice_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
   return (
     <DataTable
       columns={columns}
@@ -46,6 +58,10 @@ function InvoicePaymentTransactions({
       headerLoading={isInvoiceTransactionsLoading}
       progressBarLoading={isInvoiceTransactionFetching}
       ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
     />
   );
 }
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
index b8fc1194a..bd97bc1f5 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
@@ -35,7 +35,20 @@ function ReceiptPaymentTransactions({
   } = useItemAssociatedReceiptTransactions(itemId, {
     enabled: !!itemId,
   });
-
+  
+    // Handles delete payment transactions.
+    const handleDeletePaymentTransactons = ({ receipt_id }) => {
+      openAlert('receipt-delete', {
+        receiptId: receipt_id,
+      });
+    };
+  
+    // Handles edit payment transactions.
+    const handleEditPaymentTransactions = ({ receipt_id }) => {
+      history.push(`/receipts/${receipt_id}/edit`);
+      closeDrawer('item-detail-drawer');
+    };
+  
   return (
     <DataTable
       columns={columns}
@@ -44,6 +57,10 @@ function ReceiptPaymentTransactions({
       headerLoading={isReceiptTransactionsLoading}
       progressBarLoading={isReceiptTransactionFetching}
       ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
     />
   );
 }

From 0e79dceae8104fb3e704a580e2d243cac083a57a Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 20 Dec 2021 11:47:01 +0200
Subject: [PATCH 7/7] feat: add journal entries credit & vendor.

---
 .../CreditNoteDetail.js                       |  8 ++-
 .../JournalEntriesTransactionsTable.js        | 38 ++++++++++++++
 .../JournalEntriesTransactions/components.js  | 49 +++++++++++++++++++
 .../JournalEntriesTransactionsTable.js        | 38 ++++++++++++++
 .../JournalEntriesTransactions/components.js  | 49 +++++++++++++++++++
 .../VendorCreditDetail.js                     |  8 ++-
 6 files changed, 188 insertions(+), 2 deletions(-)
 create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
 create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
 create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
 create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js

diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
index af4ad93aa..07395fb61 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
@@ -6,6 +6,7 @@ import { DrawerMainTabs } from 'components';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
+import JournalEntriesTransactionsTable from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
 import clsx from 'classnames';
 
 import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
@@ -16,12 +17,17 @@ import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDet
 export default function CreditNoteDetail() {
   return (
     <div className={clsx(CreditNoteDetailCls.root)}>
-      <DrawerMainTabs>
+      <DrawerMainTabs renderActiveTabPanelOnly={true}>
         <Tab
           title={intl.get('details')}
           id={'details'}
           panel={<CreditNoteDetailPanel />}
         />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTransactionsTable />}
+        />
         <Tab
           title={intl.get('credit_note.drawer.label_refund_transactions')}
           id={'refund_transactions'}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
new file mode 100644
index 000000000..91995467e
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import { useTransactionsByReference } from 'hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+/**
+ * Journal entries table.
+ */
+export default function JournalEntriesTransactionsTable() {
+  const { creditNoteId } = useCreditNoteDetailDrawerContext();
+
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: creditNoteId,
+      reference_type: 'creditNote',
+    },
+    { enabled: !!creditNoteId },
+  );
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+        className={'datatable--journal-entries'}
+      />
+    </Card>
+  );
+}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
new file mode 100644
index 000000000..4a796704a
--- /dev/null
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell, Icon } from '../../../../components';
+
+import 'style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
new file mode 100644
index 000000000..ab3b485c3
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import { useTransactionsByReference } from 'hooks/query';
+import { useJournalEntriesTransactionsColumns } from './components';
+
+/**
+ * Journal entries vendor credit transactions table.
+ */
+export default function JournalEntriesTransactionsTable() {
+  const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+
+  const columns = useJournalEntriesTransactionsColumns();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: vendorCreditId,
+      reference_type: 'vendorCredit',
+    },
+    { enabled: !!vendorCreditId },
+  );
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={transactions}
+        loading={isTransactionLoading}
+        className={'datatable--journal-entries'}
+      />
+    </Card>
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js
new file mode 100644
index 000000000..eb1135002
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormatDateCell } from '../../../../components';
+
+import 'style/pages/JournalEntries/List.scss';
+
+/**
+ * Retrieve journal entries transactions table columns.
+ */
+export const useJournalEntriesTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        accessor: 'formatted_date',
+        Cell: FormatDateCell,
+        width: 140,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account_name',
+        width: 140,
+        className: 'account_name',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contactTypeFormatted',
+        width: 140,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: ({ credit }) => credit.formatted_amount,
+        width: 100,
+        className: 'credit',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: ({ debit }) => debit.formatted_amount,
+        width: 100,
+        className: 'debit',
+      },
+    ],
+    [],
+  );
+};
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
index eb0eafb42..4d96ac77c 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -6,6 +6,7 @@ import { DrawerMainTabs } from 'components';
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
 import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
+import JournalEntriesTransactionsTable from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
 import clsx from 'classnames';
 
 import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
@@ -16,12 +17,17 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
 export default function VendorCreditDetail() {
   return (
     <div className={clsx(VendorCreditDetailCls.root)}>
-      <DrawerMainTabs>
+      <DrawerMainTabs renderActiveTabPanelOnly={true}>
         <Tab
           title={intl.get('details')}
           id={'details'}
           panel={<VendorCreditDetailPanel />}
         />
+        <Tab
+          title={intl.get('journal_entries')}
+          id={'journal_entries'}
+          panel={<JournalEntriesTransactionsTable />}
+        />
         <Tab
           title={intl.get('vendor_credit.drawer.label_refund_transactions')}
           id={'refund_transactions'}