feat: payment receive detail

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

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

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

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

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

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

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

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>

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