chrone: sperate client and server to different repos.

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js

@@ -0,0 +1,74 @@
+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 { compose } from 'utils';
+
+/**
+ * Payment made - Details panel - actions bar.
+ */
+function PaymentMadeDetailActionsBar({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const { paymentMadeId } = usePaymentMadeDetailContext();
+
+  // Handle edit payment made.
+  const handleEditPaymentMade = () => {
+    history.push(`/payment-mades/${paymentMadeId}/edit`);
+    closeDrawer('payment-made-detail-drawer');
+  };
+
+  // Handle delete payment made.
+  const handleDeletePaymentMade = () => {
+    openAlert('payment-made-delete', { paymentMadeId });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
+          text={<T id={'edit_payment_made'} />}
+          onClick={handleEditPaymentMade}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeletePaymentMade}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(PaymentMadeDetailActionsBar);

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DrawerBody } from 'components';
+
+import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+
+import PaymentMadeDetails from './PaymentMadeDetails';
+import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made detail content.
+ */
+export default function PaymentMadeDetailContent({
+  // #ownProp
+  paymentMadeId,
+}) {
+  return (
+    <PaymentMadeDetailProvider paymentMadeId={paymentMadeId}>
+      <DrawerBody>
+        <PaymentMadeDetails />
+      </DrawerBody>
+    </PaymentMadeDetailProvider>
+  );
+}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { T, TotalLines, TotalLine } from 'components';
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made - Details panel - Footer.
+ */
+export default function PaymentMadeDetailFooter() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
+      <TotalLines>
+        <TotalLine
+          title={<T id={'payment_made.details.subtotal'} />}
+          value={paymentMade.amount}
+          className={clsx(PaymentDrawerCls.total_line_subtotal)}
+        />
+        <TotalLine
+          title={<T id={'payment_made.details.total'} />}
+          value={paymentMade.formatted_amount}
+          className={clsx(PaymentDrawerCls.total_line_total)}
+        />
+      </TotalLines>
+    </div>
+  );
+}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+import { defaultTo } from 'lodash';
+
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made - detail panel - header.
+ */
+export default function PaymentMadeDetailHeader() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_header)}>
+      <DetailsMenu>
+        <DetailItem label={intl.get('amount')}>
+          <h3 class="big-number" children={paymentMade.formatted_amount} />
+        </DetailItem>
+        <DetailItem
+          label={intl.get('payment_made.details.payment_number')}
+          children={defaultTo(paymentMade.payment_number, '-')}
+        />
+        <DetailItem
+          label={intl.get('customer_name')}
+          children={paymentMade.vendor?.display_name}
+        />
+        <DetailItem
+          label={intl.get('payment_account')}
+          children={paymentMade.payment_account?.name}
+        />
+        <DetailItem
+          label={intl.get('payment_date')}
+          children={<FormatDate value={paymentMade.payment_date} />}
+        />
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
+        <DetailItem
+          label={intl.get('description')}
+          children={defaultTo(paymentMade.statement, '-')}
+        />
+        <DetailItem
+          label={intl.get('created_at')}
+          children={<FormatDate value={paymentMade.created_at} />}
+        />
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from 'components';
+import {
+  useTransactionsByReference,
+  usePaymentMade,
+  usePaymentMadeEditPage,
+} from 'hooks/query';
+
+const PaymentMadeDetailContext = React.createContext();
+
+/**
+ * Payment made detail provider.
+ */
+function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
+  // Handle fetch specific payment made details.
+  const { data: paymentMade, isLoading: 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 },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentMadeId,
+      reference_type: 'paymentMade',
+    },
+    { enabled: !!paymentMadeId },
+  );
+
+  //provider.
+  const provider = {
+    transactions,
+    paymentMadeId,
+    paymentMade,
+    paymentEntries,
+  };
+
+  const loading =
+    isTransactionLoading || isPaymentMadeLoading || isPaymentLoading;
+
+  return (
+    <DrawerLoading loading={loading}>
+      <DrawerHeaderContent
+        name="payment-made-detail-drawer"
+        title={intl.get('payment_made_details')}
+      />
+      <PaymentMadeDetailContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const usePaymentMadeDetailContext = () =>
+  React.useContext(PaymentMadeDetailContext);
+export { PaymentMadeDetailProvider, usePaymentMadeDetailContext };

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { Card } from 'components';
+
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
+import PaymentMadeDetailTable from './PaymentMadeDetailTable';
+import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
+
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made detail tab.
+ */
+export default function PaymentMadeDetailTab() {
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel)}>
+      <PaymentMadeDetailActionsBar />
+
+      <Card>
+        <PaymentMadeDetailHeader />
+        <PaymentMadeDetailTable />
+        <PaymentMadeDetailFooter />
+      </Card>
+    </div>
+  );
+}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'classnames';
+
+import { usePaymentMadeEntriesColumns } from './utils';
+import { DataTable } from 'components';
+
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made read-only details table.
+ */
+export default function PaymentMadeDetailTable() {
+
+  // Retrieve payment made entries columns.
+  const columns = usePaymentMadeEntriesColumns();
+
+  // Payment made details context.
+  const { paymentEntries } = usePaymentMadeDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.detail_panel_table)}>
+      <DataTable
+        columns={columns}
+        data={paymentEntries}
+        className={'table-constrant'}
+      />
+    </div>
+  );
+}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import clsx from 'classnames';
+
+import { DrawerMainTabs } from 'components';
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
+import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
+
+/**
+ * Payment made - view detail.
+ */
+export default function PaymentMadeDetails() {
+  const { transactions } = usePaymentMadeDetailContext();
+
+  return (
+    <div className={clsx(PaymentDrawerCls.root)}>
+      <DrawerMainTabs defaultSelectedTabId="details">
+        <Tab
+          id={'details'}
+          title={intl.get('details')}
+          panel={<PaymentMadeDetailTab />}
+        />
+        <Tab
+          id={'journal_entries'}
+          title={intl.get('journal_entries')}
+          panel={<JournalEntriesTable transactions={transactions} />}
+        />
+      </DrawerMainTabs>
+    </div>
+  );
+}

src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDrawer.module.scss

@@ -0,0 +1,53 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+  &_table {
+    :global .bigcapital-datatable {
+
+      .thead,
+      .tbody {
+        .bill_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/PaymentMadeDetailDrawer/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 PaymentMadeDetailContent = React.lazy(() =>
+  import('./PaymentMadeDetailContent'),
+);
+
+/**
+ * Payment made detail drawer.
+ */
+function PaymentMadeDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { paymentMadeId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+    >
+      <DrawerSuspense>
+        <PaymentMadeDetailContent paymentMadeId={paymentMadeId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(PaymentMadeDetailDrawer);

src/containers/Drawers/PaymentMadeDetailDrawer/utils.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+import { FormatNumberCell } from '../../../components';
+
+export const usePaymentMadeEntriesColumns = () =>
+  React.useMemo(() => [
+    {
+      Header: intl.get('date'),
+      accessor: (row) => moment(row.date).format('YYYY MMM DD'),
+      width: 100,
+      disableSortBy: true,
+      className: 'date',
+    },
+    {
+      Header: intl.get('bill_number'),
+      accessor: 'bill_no',
+      width: 150,
+      disableSortBy: true,
+      className: 'bill_number',
+    },
+    {
+      Header: intl.get('bill_amount'),
+      accessor: 'amount',
+      Cell: FormatNumberCell,
+      align: 'right',
+    },
+    {
+      Header: intl.get('due_amount'),
+      accessor: 'due_amount',
+      Cell: FormatNumberCell,
+      width: 100,
+      disableSortBy: true,
+      align: 'right',
+    },
+    {
+      Header: intl.get('payment_amount'),
+      accessor: 'payment_amount',
+      Cell: FormatNumberCell,
+      width: 100,
+      disableSortBy: true,
+      align: 'right',
+    },
+  ], []);