feat: transaction by refernce.

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>

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