diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
index 5d1e9b304..a4186ecc6 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
@@ -15,6 +15,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { useMemorizedColumnsWidths } from '../../../hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { handleCashFlowTransactionType } from './utils';
 import { compose } from 'utils';
 
 /**
@@ -46,37 +47,14 @@ function AccountTransactionsDataTable({
     openAlert('account-transaction-delete', { referenceId: reference_id });
   };
 
-  const handleViewDetailCashflowTransaction = ({
-    reference_id,
-    reference_type,
-  }) => {
-    switch (reference_type) {
-      case 'SaleReceipt':
-        return openDrawer('receipt-detail-drawer', {
-          receiptId: reference_id,
-        });
-      case 'Journal':
-        return openDrawer('journal-drawer', {
-          manualJournalId: reference_id,
-        });
-      case 'Expense':
-        return openDrawer('expense-drawer', {
-          expenseId: reference_id,
-        });
-      case 'PaymentReceive':
-        return openDrawer('payment-receive-detail-drawer', {
-          paymentReceiveId: reference_id,
-        });
-      case 'BillPayment':
-        return openDrawer('payment-made-detail-drawer', {
-          paymentMadeId: reference_id,
-        });
+  const handleViewDetailCashflowTransaction = (referenceType) => {
+    handleCashFlowTransactionType(referenceType, openDrawer);
+  };
 
-      default:
-        return openDrawer('cashflow-transaction-drawer', {
-          referenceId: reference_id,
-        });
-    }
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    const referenceType = cell.row.original;
+    handleCashFlowTransactionType(referenceType, openDrawer);
   };
 
   return (
@@ -95,6 +73,7 @@ function AccountTransactionsDataTable({
       TableRowsRenderer={TableVirtualizedListRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       // #TableVirtualizedListRows props.
       vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
       vListOverscanRowCount={0}
diff --git a/src/containers/CashFlow/AccountTransactions/utils.js b/src/containers/CashFlow/AccountTransactions/utils.js
index 9c24dbbdb..59f8b43ea 100644
--- a/src/containers/CashFlow/AccountTransactions/utils.js
+++ b/src/containers/CashFlow/AccountTransactions/utils.js
@@ -48,3 +48,33 @@ export const CashFlowMenuItems = ({
     </Select>
   );
 };
+
+export const handleCashFlowTransactionType = (reference, openDrawer) => {
+  switch (reference.reference_type) {
+    case 'SaleReceipt':
+      return openDrawer('receipt-detail-drawer', {
+        receiptId: reference.reference_id,
+      });
+    case 'Journal':
+      return openDrawer('journal-drawer', {
+        manualJournalId: reference.reference_id,
+      });
+    case 'Expense':
+      return openDrawer('expense-drawer', {
+        expenseId: reference.reference_id,
+      });
+    case 'PaymentReceive':
+      return openDrawer('payment-receive-detail-drawer', {
+        paymentReceiveId: reference.reference_id,
+      });
+    case 'BillPayment':
+      return openDrawer('payment-made-detail-drawer', {
+        paymentMadeId: reference.reference_id,
+      });
+
+    default:
+      return openDrawer('cashflow-transaction-drawer', {
+        referenceId: reference.reference_id,
+      });
+  }
+};
diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
index ce44e544c..fce425f3a 100644
--- a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
+++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'components';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage } from 'formik';
 import {
   momentFormatter,
   compose,
@@ -152,7 +152,7 @@ function EstimateFormHeader({
       </FastField>
 
       {/* ----------- Estimate number ----------- */}
-      <FastField name={'estimate_number'}>
+      <Field name={'estimate_number'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'estimate'} />}
@@ -185,7 +185,7 @@ function EstimateFormHeader({
             </ControlGroup>
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
       {/* ----------- Reference ----------- */}
       <FastField name={'reference'}>