feat: transaction by refernce.

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')}

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')}