chrone: sperate client and server to different repos.

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js

@@ -0,0 +1,75 @@
+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 { compose } from 'utils';
+
+/**
+ * Payment receive actions bar.
+ */
+function PaymentReceiveActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  // Retrieve the payment receive drawer context.
+  const { paymentReceiveId } = usePaymentReceiveDetailContext();
+
+  // Handle edit payment receive.
+  const handleEditPaymentReceive = () => {
+    history.push(`/payment-receives/${paymentReceiveId}/edit`);
+    closeDrawer('payment-receive-detail-drawer');
+  };
+
+  // Handle delete payment receive.
+  const handleDeletePaymentReceive = () => {
+    openAlert('payment-receive-delete', { paymentReceiveId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_payment_receive'} />}
+          onClick={handleEditPaymentReceive}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeletePaymentReceive}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(PaymentReceiveActionsBar);

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { DrawerMainTabs } from 'components';
+import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
+
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+/**
+ * Payment receive view detail.
+ */
+export default function PaymentReceiveDetail() {
+  const { transactions } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.root)}>
+      <DrawerMainTabs defaultSelectedTabId="details">
+        <Tab
+          id={'details'}
+          title={intl.get('details')}
+          panel={<PaymentReceiveDetailTab />}
+        />
+        <Tab
+          id={'journal_entries'}
+          title={intl.get('journal_entries')}
+          panel={<JournalEntriesTable transactions={transactions} />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { DrawerBody } from 'components';
+import PaymentReceiveDetail from './PaymentReceiveDetail';
+import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
+
+/**
+ * Payment receive detail content.
+ */
+export default function PaymentReceiveDetailContent({
+  // #ownProp
+  paymentReceiveId,
+}) {
+  return (
+    <PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
+      <DrawerBody>
+        <PaymentReceiveDetail />
+      </DrawerBody>
+    </PaymentReceiveDetailProvider>
+  );
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { FormatNumber, T, TotalLine, TotalLines } from 'components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+/**
+ * Payment receive detail footer.
+ */
+export default function PaymentReceiveDetailFooter() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={<T id={'payment_receive.details.subtotal'} />}
+          value={<FormatNumber value={paymentReceive.amount} />}
+          className={PaymentDrawerCls.total_line_subtotal}
+        />
+        <TotalLine
+          title={<T id={'payment_receive.details.total'} />}
+          value={paymentReceive.formatted_amount}
+          className={PaymentDrawerCls.total_line_total}
+        />
+      </TotalLines>
+    </div>
+  );
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { defaultTo } from 'lodash';
+
+import { FormatDate, DetailsMenu, DetailItem } from 'components';
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+/**
+ * Payment receive detail header.
+ */
+export default function PaymentReceiveDetailHeader() {
+  const { paymentReceive } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem
+          label={intl.get('amount')}
+          children={
+            <h3 class="big-number">{paymentReceive.formatted_amount}</h3>
+          }
+        />
+        <DetailItem
+          label={intl.get('payment_receive.details.payment_number')}
+          children={defaultTo(paymentReceive.payment_receive_no, '-')}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={paymentReceive.customer?.display_name}
+        />
+        <DetailItem
+          label={intl.get('deposit_account')}
+          children={paymentReceive.deposit_account?.name}
+        />
+        <DetailItem
+          label={intl.get('payment_date')}
+          children={<FormatDate value={paymentReceive.payment_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
+        <DetailItem
+          label={intl.get('description')}
+          children={defaultTo(paymentReceive.statement, '—')}
+        />
+        <DetailItem
+          label={intl.get('created_at')}
+          children={<FormatDate value={paymentReceive.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useTransactionsByReference, usePaymentReceive } from 'hooks/query';
+
+const PaymentReceiveDetailContext = React.createContext();
+
+/**
+ * Payment receive detail provider.
+ */
+function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
+  const {
+    data: paymentReceive,
+    isLoading: isPaymentLoading,
+    isFetching: isPaymentFetching,
+  } = usePaymentReceive(paymentReceiveId, {
+    enabled: !!paymentReceiveId,
+  });
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentReceiveId,
+      reference_type: 'paymentReceive',
+    },
+    { enabled: !!paymentReceiveId },
+  );
+
+  // Provider.
+  const provider = {
+    isPaymentFetching,
+    transactions,
+    paymentReceive,
+    paymentReceiveId,
+  };
+
+  return (
+    <DrawerLoading loading={isTransactionLoading || isPaymentLoading}>
+      <DrawerHeaderContent
+        name="payment-receive-detail-drawer"
+        title={intl.get('payment_receive_details')}
+      />
+      <PaymentReceiveDetailContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const usePaymentReceiveDetailContext = () =>
+  React.useContext(PaymentReceiveDetailContext);
+
+export { PaymentReceiveDetailProvider, usePaymentReceiveDetailContext };

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
+import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
+import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
+import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
+
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+export default function PaymentReceiveDetailTab() {
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel)}>
+      <PaymentReceiveActionsBar />
+
+      <Card>
+        <PaymentReceiveDetailHeader />
+        <PaymentReceiveDetailTable />
+        <PaymentReceiveDetailFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { usePaymentReceiveEntriesColumns } from './utils';
+import { DataTable } from 'components';
+
+import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
+
+import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
+
+/**
+ * Payment receive readonly details table.
+ */
+export default function PaymentReceiveDetailTable() {
+  const columns = usePaymentReceiveEntriesColumns();
+
+  const {
+    paymentReceive: { entries },
+  } = usePaymentReceiveDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={entries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss

@@ -0,0 +1,53 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+  &_table {
+    :global .bigcapital-datatable {
+
+      .thead,
+      .tbody {
+        .invoice_amount,
+        .amount_due,
+        .payment_amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+
+    :global .total_lines {
+      margin-left: auto;
+    }
+    :global .total_lines_line {
+
+      .amount,
+      .title {
+        width: 180px;
+      }
+
+      .amount {
+        text-align: right;
+      }
+    }
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+    &_total {
+      border-bottom: 3px double #000;
+      font-weight: 600;
+    }
+  }
+}

src/containers/Drawers/PaymentReceiveDetailDrawer/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Drawer, DrawerSuspense } from 'components';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { compose } from 'utils';
+
+const PaymentReceiveDetailContent = React.lazy(() =>
+  import('./PaymentReceiveDetailContent'),
+);
+
+/**
+ * Payment receive detail drawer
+ */
+function PaymentReceiveDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { paymentReceiveId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+    >
+      <DrawerSuspense>
+        <PaymentReceiveDetailContent paymentReceiveId={paymentReceiveId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(PaymentReceiveDetailDrawer);

src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { FormatNumberCell } from '../../../components';
+
+/**
+ * Retrieve payment entries table columns.
+ */
+export const usePaymentReceiveEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
+        width: 100,
+        className: 'date',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('invoice_no'),
+        accessor: 'invoice.invoice_no',
+        width: 150,
+        className: 'invoice_number',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('invoice_amount'),
+        accessor: 'invoice.balance',
+        Cell: FormatNumberCell,
+        align: 'right',
+      },
+      {
+        Header: intl.get('amount_due'),
+        accessor: 'invoice.amount_due',
+        Cell: FormatNumberCell,
+        align: 'right',
+        width: 100,
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'invoice.payment_amount',
+        Cell: FormatNumberCell,
+        align: 'right',
+        width: 100,
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );