feat(*): View Detail.

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -9,9 +9,11 @@ const PaymentMadeDetailContext = React.createContext();
  * Payment made detail provider.
  */
 function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
-  
   // Handle fetch transaction by reference.
-  const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
     {
       reference_id: paymentMadeId,
       reference_type: 'paymentMade',
@@ -21,7 +23,7 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
 
   //provider.
   const provider = {
-    data,
+    transactions,
   };
   return (
     <DashboardInsider loading={isTransactionLoading}>

client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js

@@ -3,11 +3,14 @@ import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
 /**
  * payment made view detail.
  */
 export default function PaymentMadeDetails() {
+  const { transactions } = usePaymentMadeDetailContext();
+
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
@@ -15,7 +18,7 @@ export default function PaymentMadeDetails() {
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
-          panel={<JournalEntriesTable journal={[]} />}
+          panel={<JournalEntriesTable transactions={transactions} />}
         />
       </Tabs>
     </div>