feat: transaction by refernce.

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