fix: notes.

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js

@@ -28,7 +28,7 @@ export default function CreditNoteDetail() {
           panel={<RefundCreditNoteTransactionsTable />}
         />
         <Tab
-          title={intl.get('credit_note.drawer.label_reconcile_transactions')}
+          title={intl.get('credit_note.drawer.label_invoices_reconciled')}
           id={'reconcile_transactions'}
           panel={<ReconcileCreditNoteTransactionsTable />}
         />

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -13,7 +13,7 @@ import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDet
  */
 export default function CreditNoteDetailHeader() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
-
+  
   return (
     <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
       <DetailsMenu>
@@ -37,13 +37,17 @@ export default function CreditNoteDetailHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('credit_note.drawer.label_credits_remaining')}
+          children={creditNote.formatted_credits_remaining}
+        />
         <DetailItem
           label={intl.get('note')}
           children={defaultTo(creditNote.note, '-')}
         />
 
         <DetailItem
-          label={<T id={'credit_note.drawer.label_create_at'} />}
+          label={<T id={'credit_note.drawer.label_created_at'} />}
           children={<FormatDate value={creditNote.created_at} />}
         />
       </DetailsMenu>

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js

@@ -5,6 +5,7 @@ import { DrawerMainTabs } from 'components';
 
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
 import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
+import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
 import clsx from 'classnames';
 
 import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
@@ -22,10 +23,15 @@ export default function VendorCreditDetail() {
           panel={<VendorCreditDetailPanel />}
         />
         <Tab
-          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          title={intl.get('vendor_credit.drawer.label_refund_transactions')}
           id={'refund_transactions'}
           panel={<RefundVendorCreditTransactionsTable />}
         />
+        <Tab
+          title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
+          id={'reconcile_transactions'}
+          panel={<ReconcileVendorCreditTransactionsTable />}
+        />
       </DrawerMainTabs>
     </div>
   );

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useVendorCredit, useRefundVendorCredit } from 'hooks/query';
+import {
+  useVendorCredit,
+  useRefundVendorCredit,
+  useReconcileVendorCredits,
+} from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const VendorCreditDetailDrawerContext = React.createContext();
@@ -24,9 +28,19 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
     enabled: !!vendorCreditId,
   });
 
+  // Handle fetch refund credit note.
+  const {
+    data: reconcileVendorCredits,
+    isFetching: isReconcileVendorCreditFetching,
+    isLoading: isReconcileVendorCreditLoading,
+  } = useReconcileVendorCredits(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
   const provider = {
     vendorCredit,
     refundVendorCredit,
+    reconcileVendorCredits,
     isRefundVendorCreditLoading,
     isRefundVendorCreditFetching,
     vendorCreditId,
@@ -34,7 +48,11 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
 
   return (
     <DrawerLoading
-      loading={isVendorCreditLoading || isRefundVendorCreditLoading}
+      loading={
+        isVendorCreditLoading ||
+        isRefundVendorCreditLoading ||
+        isReconcileVendorCreditLoading
+      }
     >
       <DrawerHeaderContent
         name="vendor-credit-detail-drawer"

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js

@@ -36,13 +36,19 @@ export default function VendorCreditDetailHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('vendor_credit.drawer.label_credits_remaining')}
+          children={vendorCredit.credits_remaining}
+          // children={vendorCredit.formatted_credits_remaining}
+        />
+
         <DetailItem
           label={intl.get('note')}
           children={defaultTo(vendorCredit.note, '-')}
         />
 
         <DetailItem
-          label={<T id={'vendor_credit.drawer.label_create_at'} />}
+          label={<T id={'vendor_credit.drawer.label_created_at'} />}
           children={<FormatDate value={vendorCredit.created_at} />}
         />
       </DetailsMenu>