feat: payment made detail.

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);

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>
+  );
+}

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>
+  );
+}

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

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>
+  );
+}

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>
+  );
+}

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

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>

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,
+    },
+  ]);

client/src/hooks/query/paymentMades.js

@@ -166,4 +166,20 @@ export function useRefreshPaymentMades() {
       queryClient.invalidateQueries(t.PAYMENT_MADES);
     },
   };
-}
+}
+
+/**
+ * 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,
+    },
+  );
+}