From 5eedca7677c0ca19079a1d63a5e487b0570808dc Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Tue, 24 Aug 2021 23:06:16 +0200
Subject: [PATCH 1/2] feat: payment receive detail

---
 .../PaymentReceiveActionsBar.js               | 77 +++++++++++++++++++
 .../PaymentReceiveDetail.js                   |  7 +-
 .../PaymentReceiveDetailFooter.js             | 24 ++++++
 .../PaymentReceiveDetailHeader.js             | 57 ++++++++++++++
 .../PaymentReceiveDetailProvider.js           | 11 ++-
 .../PaymentReceiveDetailTab.js                | 23 ++++++
 .../PaymentReceiveDetailTable.js              | 18 +++++
 .../PaymentReceiveDetailDrawer/index.js       | 10 ++-
 .../PaymentReceiveDetailDrawer/utils.js       | 35 +++++++++
 9 files changed, 257 insertions(+), 5 deletions(-)
 create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
 create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
 create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
 create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
 create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
 create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js

diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
new file mode 100644
index 000000000..948d082c0
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { safeCallback, compose } from 'utils';
+
+function PaymentReceiveActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const { paymentReceiveId } = usePaymentReceiveDetailContext();
+
+
+  // Handle edit payment receive.
+  const onEditPaymentReceive = () => {
+    return paymentReceiveId
+      ? (history.push(`/payment-receives/${paymentReceiveId}/edit`),
+        closeDrawer('payment-receive-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete payment receive.
+  const onDeletePaymentReceive = () => {
+    return paymentReceiveId
+      ? (openAlert('payment-receive-delete', { paymentReceiveId }),
+        closeDrawer('payment-receive-detail-drawer'))
+      : null;
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_payment_receive'} />}
+          onClick={safeCallback(onEditPaymentReceive)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeletePaymentReceive)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(PaymentReceiveActionsBar);
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
index 091338a47..fbb50862a 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
@@ -14,7 +15,11 @@ export default function PaymentReceiveDetail() {
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
-        <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<PaymentReceiveDetailTab />}
+        />
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
new file mode 100644
index 000000000..8d49d87df
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+export default function PaymentReceiveDetailFooter() {
+  const {
+    paymentReceive: { formatted_amount },
+  } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className="payment-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">Subtotal</div>
+          <div class="amount">{formatted_amount}</div>
+        </div>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">TOTAL</div>
+          <div class="amount">{'Amount'}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
new file mode 100644
index 000000000..610f1317c
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+import { defaultTo } from 'lodash';
+
+import { Card, DetailsMenu, DetailItem } from 'components';
+
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail header.
+ */
+export default function PaymentReceiveDetailHeader() {
+  const {
+    paymentReceive: {
+      formatted_amount,
+      payment_receive_no,
+      customer,
+      deposit_account,
+      formatted_payment_date,
+      statement,
+      created_at,
+    },
+  } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className={'payment-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <h3 class="big-number">{formatted_amount}</h3>
+        </DetailItem>
+        <DetailItem label={intl.get('payment_receive_no')}>
+          {payment_receive_no}
+        </DetailItem>
+        <DetailItem label={intl.get('customer_name')}>
+          {customer?.display_name}
+        </DetailItem>
+        <DetailItem label={intl.get('deposit_account')}>
+          {deposit_account?.name}
+        </DetailItem>
+        <DetailItem label={intl.get('payment_date')}>
+          {formatted_payment_date}
+        </DetailItem>
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem label={intl.get('description')}>
+          {defaultTo(statement, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('created_at')}>
+          {moment(created_at).format('YYYY MMM DD')}
+        </DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
index 73496f207..ecd24488d 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
-import { useTransactionsByReference } from 'hooks/query';
+import { useTransactionsByReference, usePaymentReceive } from 'hooks/query';
 
 const PaymentReceiveDetailContext = React.createContext();
 
@@ -9,6 +9,11 @@ const PaymentReceiveDetailContext = React.createContext();
  * Payment receive detail provider.
  */
 function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  const { data: paymentReceive, isFetching: isPaymentReceiveLoading } =
+    usePaymentReceive(paymentReceiveId, {
+      enabled: !!paymentReceiveId,
+    });
+
   // Handle fetch transaction by reference.
   const {
     data: { transactions },
@@ -22,10 +27,10 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
   );
 
   //provider.
-  const provider = { transactions };
+  const provider = { transactions, paymentReceive, paymentReceiveId };
 
   return (
-    <DashboardInsider loading={isTransactionLoading}>
+    <DashboardInsider loading={isTransactionLoading || isPaymentReceiveLoading}>
       <DrawerHeaderContent
         name="payment-receive-detail-drawer"
         title={intl.get('payment_receive_details')}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
new file mode 100644
index 000000000..2cebbc669
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Card } from 'components';
+
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
+import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
+import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
+
+export default function PaymentReceiveDetailTab() {
+  return (
+    <div className={'payment-drawer'}>
+      <PaymentReceiveActionsBar />
+      <div>
+        <Card>
+          <PaymentReceiveDetailHeader />
+          <PaymentReceiveDetailTable />
+          {/* <PaymentReceiveDetailFooter /> */}
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
new file mode 100644
index 000000000..93cf142de
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { usePaymentReceiveEntriesColumns } from './utils';
+import { DataTable, Card } from 'components';
+
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+export default function PaymentReceiveDetailTable() {
+  const columns = usePaymentReceiveEntriesColumns();
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className="payment-drawer__content--table">
+      <DataTable columns={columns} data={entries} />
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js
index 526064ebd..8bb926f75 100644
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js
@@ -18,7 +18,15 @@ function PaymentReceiveDetailDrawer({
   payload: { paymentReceiveId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+    >
       <DrawerSuspense>
         <PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
       </DrawerSuspense>
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
new file mode 100644
index 000000000..364b7b4da
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+export const usePaymentReceiveEntriesColumns = () =>
+  React.useMemo(() => [
+    {
+      Header: intl.get('date'),
+      accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
+      width: 100,
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('invoice_no'),
+      accessor: 'invoice.invoice_no',
+      width: 150,
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('invoice_amount'),
+      accessor: 'invoice.balance',
+    },
+    {
+      Header: intl.get('amount_due'),
+      accessor: 'invoice.amount_due',
+      width: 100,
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('payment_amount'),
+      accessor: 'invoice.payment_amount',
+      width: 100,
+      disableSortBy: true,
+    },
+  ]);

From 237a9b96b5169aa4f4746e9dfca915ec6deca115 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Tue, 24 Aug 2021 23:07:34 +0200
Subject: [PATCH 2/2] feat: payment made detail.

---
 .../PaymentMadeDetailActionsBar.js            | 76 +++++++++++++++++++
 .../PaymentMadeDetailFooter.js                | 24 ++++++
 .../PaymentMadeDetailHeader.js                | 57 ++++++++++++++
 .../PaymentMadeDetailProvider.js              | 27 ++++++-
 .../PaymentMadeDetailTab.js                   | 21 +++++
 .../PaymentMadeDetailTable.js                 | 17 +++++
 .../PaymentMadeDetails.js                     |  7 +-
 .../Drawers/PaymentMadeDetailDrawer/index.js  | 10 ++-
 .../Drawers/PaymentMadeDetailDrawer/utils.js  | 35 +++++++++
 client/src/hooks/query/paymentMades.js        | 18 ++++-
 10 files changed, 287 insertions(+), 5 deletions(-)
 create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
 create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
 create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
 create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
 create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
 create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js

diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
new file mode 100644
index 000000000..66b60c8d4
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { Icon, FormattedMessage as T } from 'components';
+
+import { safeCallback, compose } from 'utils';
+
+function PaymentMadeDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const { paymentMadeId } = usePaymentMadeDetailContext();
+
+  // Handle edit payment made.
+  const onEditPaymentMade = () => {
+    return paymentMadeId
+      ? (history.push(`/payment-mades/${paymentMadeId}/edit`),
+        closeDrawer('payment-made-detail-drawer'))
+      : null;
+  };
+
+  // Handle delete payment made.
+  const onDeletePaymentMade = () => {
+    return paymentMadeId
+      ? (openAlert('payment-made-delete', { paymentMadeId }),
+        closeDrawer('payment-made-detail-drawer'))
+      : null;
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_payment_made'} />}
+          onClick={safeCallback(onEditPaymentMade)}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeletePaymentMade)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(PaymentMadeDetailActionsBar);
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
new file mode 100644
index 000000000..77e912f60
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+export default function PaymentMadeDetailFooter() {
+  const {
+    paymentEntries: { total_payment_amount },
+  } = usePaymentMadeDetailContext();
+
+  return (
+    <div className="payment-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">Subtotal</div>
+          <div class="amount">{total_payment_amount}</div>
+        </div>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">TOTAL</div>
+          <div class="amount">{total_payment_amount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
new file mode 100644
index 000000000..6e89bb627
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+import { defaultTo } from 'lodash';
+
+import { DetailsMenu, DetailItem } from 'components';
+
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made detail header.
+ */
+export default function PaymentMadeDetailHeader() {
+  const {
+    paymentMade: {
+      formatted_amount,
+      payment_number,
+      payment_account,
+      formatted_payment_date,
+      vendor,
+      created_at,
+      statement,
+    },
+  } = usePaymentMadeDetailContext();
+
+  return (
+    <div className={'payment-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <h3 class="big-number">{formatted_amount}</h3>
+        </DetailItem>
+        <DetailItem label={intl.get('payment_receive_no')}>
+          {payment_number}
+        </DetailItem>
+        <DetailItem label={intl.get('customer_name')}>
+          {vendor?.display_name}
+        </DetailItem>
+        <DetailItem label={intl.get('payment_account')}>
+          {payment_account?.name}
+        </DetailItem>
+        <DetailItem label={intl.get('payment_date')}>
+          {formatted_payment_date}
+        </DetailItem>
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem label={intl.get('description')}>
+          {defaultTo(statement, '—')}
+        </DetailItem>
+        <DetailItem label={intl.get('created_at')}>
+          {moment(created_at).format('YYYY MMM DD')}
+        </DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
index d491d2298..d1d1cdb4b 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { DrawerHeaderContent, DashboardInsider } from 'components';
-import { useTransactionsByReference } from 'hooks/query';
+import {
+  useTransactionsByReference,
+  usePaymentMade,
+  usePaymentMadeEditPage,
+} from 'hooks/query';
 
 const PaymentMadeDetailContext = React.createContext();
 
@@ -9,6 +13,20 @@ const PaymentMadeDetailContext = React.createContext();
  * Payment made detail provider.
  */
 function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
+  // Handle fetch specific payment made details.
+  const { data: paymentMade, isFetching: isPaymentMadeLoading } =
+    usePaymentMade(paymentMadeId, {
+      enabled: !!paymentMadeId,
+    });
+
+  // Handle fetch specific payment made details.
+  const {
+    data: { entries: paymentEntries },
+    isLoading: isPaymentLoading,
+  } = usePaymentMadeEditPage(paymentMadeId, {
+    enabled: !!paymentMadeId,
+  });
+
   // Handle fetch transaction by reference.
   const {
     data: { transactions },
@@ -24,9 +42,14 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
   //provider.
   const provider = {
     transactions,
+    paymentMadeId,
+    paymentMade,
+    paymentEntries,
   };
   return (
-    <DashboardInsider loading={isTransactionLoading}>
+    <DashboardInsider
+      loading={isTransactionLoading || isPaymentMadeLoading || isPaymentLoading}
+    >
       <DrawerHeaderContent
         name="payment-made-detail-drawer"
         title={intl.get('payment_made_details')}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
new file mode 100644
index 000000000..dd69370b0
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Card } from 'components';
+
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
+import PaymentMadeDetailTable from './PaymentMadeDetailTable';
+
+export default function PaymentMadeDetailTab() {
+  return (
+    <div className={'payment-drawer'}>
+      <PaymentMadeDetailActionsBar />
+      <div>
+        <Card>
+          <PaymentMadeDetailHeader />
+          <PaymentMadeDetailTable />
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
new file mode 100644
index 000000000..1680144d9
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { usePaymentMadeEntriesColumns } from './utils';
+import { DataTable } from 'components';
+
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+export default function PaymentMadeDetailTable() {
+  const columns = usePaymentMadeEntriesColumns();
+
+  const { paymentEntries } = usePaymentMadeDetailContext();
+
+  return (
+    <div className="payment-drawer__content--table">
+      <DataTable columns={columns} data={paymentEntries} />
+    </div>
+  );
+}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
index eee6f2590..eef27a063 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
 
@@ -14,7 +15,11 @@ export default function PaymentMadeDetails() {
   return (
     <div className="view-detail-drawer">
       <Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
-        <Tab title={intl.get('details')} id={'details'} disabled={true} />
+        <Tab
+          title={intl.get('details')}
+          id={'details'}
+          panel={<PaymentMadeDetailTab />}
+        />
         <Tab
           title={intl.get('journal_entries')}
           id={'journal_entries'}
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js
index 8c0cb2fba..839c0ba98 100644
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js
@@ -18,7 +18,15 @@ function PaymentMadeDetailDrawer({
   payload: { paymentMadeId },
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'750px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+    >
       <DrawerSuspense>
         <PaymentMadeDetailContent paymentMade={paymentMadeId} />
       </DrawerSuspense>
diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
new file mode 100644
index 000000000..25d885806
--- /dev/null
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+export const usePaymentMadeEntriesColumns = () =>
+  React.useMemo(() => [
+    {
+      Header: intl.get('date'),
+      accessor: (row) => moment(row.date).format('YYYY MMM DD'),
+      width: 100,
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('bill_number'),
+      accessor: 'bill_no',
+      width: 150,
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('bill_amount'),
+      accessor: 'amount',
+    },
+    {
+      Header: intl.get('due_amount'),
+      accessor: 'due_amount',
+      width: 100,
+      disableSortBy: true,
+    },
+    {
+      Header: intl.get('payment_amount'),
+      accessor: 'payment_amount',
+      width: 100,
+      disableSortBy: true,
+    },
+  ]);
diff --git a/client/src/hooks/query/paymentMades.js b/client/src/hooks/query/paymentMades.js
index 88b46aed5..9005fef93 100644
--- a/client/src/hooks/query/paymentMades.js
+++ b/client/src/hooks/query/paymentMades.js
@@ -166,4 +166,20 @@ export function useRefreshPaymentMades() {
       queryClient.invalidateQueries(t.PAYMENT_MADES);
     },
   };
-}
\ No newline at end of file
+}
+
+/**
+ * Retrieve specific payment made.
+ * @param {number} id - Payment made.
+ */
+export function usePaymentMade(id, props) {
+  return useRequestQuery(
+    [t.PAYMENT_MADE, id],
+    { method: 'get', url: `purchases/bill_payments/${id}` },
+    {
+      select: (res) => res.data.bill_payment,
+      defaultData: {},
+      ...props,
+    },
+  );
+}