diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
index b617a1bee..9f2b86253 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js
@@ -4,11 +4,14 @@ import intl from 'react-intl-universal';
 
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**
  * Bill view details.
  */
 export default function BillDrawerDetails() {
+  const { data } = useBillDrawerContext();
+
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="landed_cost">
@@ -16,7 +19,7 @@ export default function BillDrawerDetails() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable />}
+          panel={<JournalEntriesTable transactions={data} />}
         />
         <Tab
           title={intl.get('located_landed_cost')}
diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js b/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
index 47bdd53b1..12b11263c 100644
--- a/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js
@@ -2,6 +2,7 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
 import { useBillLocatedLandedCost } from 'hooks/query';
+import { useTransactionsByReference } from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
 
@@ -9,6 +10,16 @@ const BillDrawerContext = React.createContext();
  * Bill drawer provider.
  */
 function BillDrawerProvider({ billId, ...props }) {
+  
+  // Handle fetch transaction by reference.
+  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+    {
+      reference_id: billId,
+      reference_type: 'Bill',
+    },
+    { enabled: !!billId },
+  );
+
   // Handle fetch bill located landed cost transaction.
   const { isLoading: isLandedCostLoading, data: transactions } =
     useBillLocatedLandedCost(billId, {
@@ -19,10 +30,11 @@ function BillDrawerProvider({ billId, ...props }) {
   const provider = {
     transactions,
     billId,
+    data,
   };
 
   return (
-    <DashboardInsider loading={isLandedCostLoading}>
+    <DashboardInsider loading={isLandedCostLoading || isTransactionLoading}>
       <DrawerHeaderContent
         name="bill-drawer"
         title={intl.get('bill_details')}
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
index e32bea8a6..735b1015e 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
@@ -3,11 +3,14 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
 /**
  * Invoice view detail.
  */
 export default function InvoiceDetail() {
+  const { data } = useInvoiceDetailDrawerContext();
+
   return (
     <div className="view-detail-drawer">
       <Tabs
@@ -20,7 +23,7 @@ export default function InvoiceDetail() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable journal={[]} />}
+          panel={<JournalEntriesTable transactions={data} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
index 3383528ca..6f81e6a6b 100644
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
@@ -1,16 +1,29 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
 
 const InvoiceDetailDrawerContext = React.createContext();
 /**
  * Invoice detail provider.
  */
 function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
+  
+  // Handle fetch transaction by reference.
+  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+    {
+      reference_id: invoiceId,
+      reference_type: 'SaleInvoice',
+    },
+    { enabled: !!invoiceId },
+  );
+
   //provider.
-  const provider = {};
+  const provider = {
+    data,
+  };
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isTransactionLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
         title={intl.get('invoice_details')}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index ca775bba6..7bb717f5a 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -1,14 +1,30 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
 
 const PaymentMadeDetailContext = React.createContext();
 
+/**
+ * Payment made detail provider.
+ */
 function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
+  
+  // Handle fetch transaction by reference.
+  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+    {
+      reference_id: paymentMadeId,
+      reference_type: 'paymentMade',
+    },
+    { enabled: !!paymentMadeId },
+  );
+
   //provider.
-  const provider = {};
+  const provider = {
+    data,
+  };
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isTransactionLoading}>
       <DrawerHeaderContent
         name="payment-made-detail-drawer"
         title={intl.get('payment_made_details')}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
index 515976244..8bb6c3708 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
@@ -3,11 +3,14 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
 
 /**
  * payment receive view detail.
  */
 export default function PaymentReceiveDetail() {
+  const { data } = usePaymentReceiveDetailContext();
+  
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
@@ -15,7 +18,7 @@ export default function PaymentReceiveDetail() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable journal={[]} />}
+          panel={<JournalEntriesTable transactions={data} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
index 8602ba01c..50c8db63d 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
@@ -1,17 +1,29 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
 
 const PaymentReceiveDetailContext = React.createContext();
+
 /**
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+
+  // Handle fetch transaction by reference.
+  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+    {
+      reference_id: paymentReceiveId,
+      reference_type: 'paymentReceive',
+    },
+    { enabled: !!paymentReceiveId },
+  );
+
   //provider.
-  const provider = {};
+  const provider = { data };
 
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isTransactionLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
         title={intl.get('payment_receive_details')}
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
index facb371c4..eee8e91c8 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js
@@ -3,11 +3,14 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
+
 
 /**
  * Receipt view detail.
  */
 export default function ReceiptDetail() {
+  const { data } = useReceiptDetailDrawerContext();
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
@@ -15,7 +18,7 @@ export default function ReceiptDetail() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable journal={[]} />}
+          panel={<JournalEntriesTable transactions={data} />}
         />
       </Tabs>
     </div>
diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
index 9f0ba768b..c107acf89 100644
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js
@@ -1,18 +1,31 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { useTransactionsByReference } from 'hooks/query';
 
+// useTransactionsByReference
 const ReceiptDetailDrawerContext = React.createContext();
 
 /**
  * Receipt detail provider.
  */
 function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
+  // Handle fetch transaction by reference.
+  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+    {
+      reference_id: receiptId,
+      reference_type: 'SaleReceipt',
+    },
+    { enabled: !!receiptId },
+  );
+
   //provider.
-  const provider = {};
+  const provider = {
+    data,
+  };
 
   return (
-    <DashboardInsider>
+    <DashboardInsider loading={isTransactionLoading}>
       <DrawerHeaderContent
         name="receipt-detail-drawer"
         title={intl.get('receipt_details')}
diff --git a/client/src/containers/JournalEntriesTable/JournalEntriesTable.js b/client/src/containers/JournalEntriesTable/JournalEntriesTable.js
index ba577ec26..8efd2f485 100644
--- a/client/src/containers/JournalEntriesTable/JournalEntriesTable.js
+++ b/client/src/containers/JournalEntriesTable/JournalEntriesTable.js
@@ -6,7 +6,7 @@ import moment from 'moment';
 /**
  * Journal entries table.
  */
-export default function JournalEntriesTable({ journal }) {
+export default function JournalEntriesTable({ transactions }) {
   const columns = React.useMemo(
     () => [
       {
@@ -17,22 +17,22 @@ export default function JournalEntriesTable({ journal }) {
       },
       {
         Header: intl.get('account_name'),
-        accessor: 'account_name',
+        accessor: 'accountName',
         width: 150,
       },
       {
         Header: intl.get('contact'),
-        accessor: 'contact',
+        accessor: 'contactTypeFormatted',
         width: 150,
       },
       {
         Header: intl.get('credit'),
-        accessor: 'credit',
+        accessor: ({ credit }) => credit.formattedAmount,
         width: 100,
       },
       {
         Header: intl.get('debit'),
-        accessor: 'debit',
+        accessor: ({ debit }) => debit.formattedAmount,
         width: 100,
       },
     ],
@@ -43,7 +43,7 @@ export default function JournalEntriesTable({ journal }) {
     <Card>
       <DataTable
         columns={columns}
-        data={journal}
+        data={transactions}
         className={'datatable--journal-entries'}
       />
     </Card>
diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js
index 1826269c2..4b7258ea7 100644
--- a/client/src/hooks/query/financialReports.js
+++ b/client/src/hooks/query/financialReports.js
@@ -466,3 +466,22 @@ export function useInventoryItemDetailsReport(query, props) {
     },
   );
 }
+
+/**
+ * Retrieve transactions by reference report.
+ */
+export function useTransactionsByReference(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTIONS_BY_REFERENCE, query],
+    {
+      method: 'get',
+      url: `/financial_statements/transactions-by-reference`,
+      params: query,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/client/src/hooks/query/types.js b/client/src/hooks/query/types.js
index 886c07dd3..57ae0d0d2 100644
--- a/client/src/hooks/query/types.js
+++ b/client/src/hooks/query/types.js
@@ -23,6 +23,7 @@ const FINANCIAL_REPORTS = {
   INVENTORY_VALUATION: 'INVENTORY_VALUATION',
   CASH_FLOW_STATEMENT: 'CASH_FLOW_STATEMENT',
   INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS',
+  TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE',
 };
 
 const BILLS = {