re-structure to monorepo.

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.tsx

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Intent,
+} from '@blueprintjs/core';
+
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import {
+  DashboardActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+} from '@/components';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
+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>
+        <Can I={PaymentMadeAction.Edit} a={AbilitySubject.PaymentMade}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_payment_made'} />}
+            onClick={handleEditPaymentMade}
+          />
+        </Can>
+        <Can I={PaymentMadeAction.Delete} a={AbilitySubject.PaymentMade}>
+          <NavbarDivider />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeletePaymentMade}
+          />
+        </Can>
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withDrawerActions,
+  withAlertsActions,
+)(PaymentMadeDetailActionsBar);

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import React from 'react';
+
+import { DrawerBody } from '@/components';
+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>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import React from 'react';
+
+import {
+  T,
+  CommercialDocFooter,
+  DetailsMenu,
+  If,
+  DetailItem,
+} from '@/components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made - Details panel - Footer.
+ */
+export function PaymentMadeDetailFooter() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+        <If condition={paymentMade.statement}>
+          <DetailItem label={<T id={'payment_made.details.statement'} />}>
+            {paymentMade.statement}
+          </DetailItem>
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.tsx

@@ -0,0 +1,80 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { defaultTo } from 'lodash';
+
+import {
+  Row,
+  Col,
+  FormatDate,
+  DetailsMenu,
+  DetailItem,
+  CommercialDocHeader,
+  CommercialDocTopHeader,
+  ExchangeRateDetailItem,
+  VendorDrawerLink,
+} from '@/components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made - detail panel - header.
+ */
+export default function PaymentMadeDetailHeader() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocTopHeader>
+        <DetailsMenu>
+          <DetailItem label={intl.get('amount')}>
+            <h3 class="big-number">{paymentMade.formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocTopHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('payment_date')}
+              children={<FormatDate value={paymentMade.payment_date} />}
+            />
+            <DetailItem
+              label={intl.get('payment_made.details.payment_number')}
+              children={defaultTo(paymentMade.payment_number, '-')}
+            />
+            <DetailItem label={intl.get('vendor_name')}>
+              <VendorDrawerLink vendorId={paymentMade.vendor_id}>
+                {paymentMade.vendor?.display_name}
+              </VendorDrawerLink>
+            </DetailItem>
+            <DetailItem
+              label={intl.get('payment_account')}
+              children={paymentMade.payment_account?.name}
+            />
+            <ExchangeRateDetailItem
+              exchangeRate={paymentMade?.exchange_rate}
+              toCurrency={paymentMade?.currency_code}
+            />
+          </DetailsMenu>
+        </Col>
+        <Col xs={6}>
+          <DetailsMenu
+            textAlign={'right'}
+            direction={'horizantal'}
+            minLabelSize={'180px'}
+          >
+            <DetailItem
+              label={intl.get('reference')}
+              children={defaultTo(paymentMade.reference, '-')}
+            />
+            <DetailItem
+              label={intl.get('created_at')}
+              children={<FormatDate value={paymentMade.created_at} />}
+            />
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { usePaymentMade } from '@/hooks/query';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
+
+const PaymentMadeDetailContext = React.createContext();
+
+/**
+ * Payment made detail provider.
+ */
+function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Handle fetch specific payment made details.
+  const { data: paymentMade, isLoading: isPaymentMadeLoading } = usePaymentMade(
+    paymentMadeId,
+    {
+      enabled: !!paymentMadeId,
+    },
+  );
+  // Provider state.
+  const provider = {
+    paymentMadeId,
+    paymentMade,
+  };
+
+  const loading = isPaymentMadeLoading;
+
+  return (
+    <DrawerLoading loading={loading}>
+      <DrawerHeaderContent
+        name="payment-made-detail-drawer"
+        title={intl.get('payment_made.drawer.title', {
+          number: paymentMade.payment_number
+            ? `(${paymentMade.payment_number})`
+            : '',
+        })}
+        subTitle={
+          featureCan(Features.Branches)
+            ? intl.get('payment_made.drawer.subtitle', {
+                value: paymentMade.branch?.name,
+              })
+            : null
+        }
+      />
+      <PaymentMadeDetailContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const usePaymentMadeDetailContext = () =>
+  React.useContext(PaymentMadeDetailContext);
+export { PaymentMadeDetailProvider, usePaymentMadeDetailContext };

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocBox } from '@/components';
+
+import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
+import PaymentMadeDetailTable from './PaymentMadeDetailTable';
+import PaymentMadeDetailTableFooter from './PaymentMadeDetailTableFooter';
+import { PaymentMadeDetailFooter } from './PaymentMadeDetailFooter';
+
+/**
+ * Payment made detail tab.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeDetailTab() {
+  return (
+    <CommercialDocBox>
+      <PaymentMadeDetailHeader />
+      <PaymentMadeDetailTable />
+      <PaymentMadeDetailTableFooter />
+      <PaymentMadeDetailFooter />
+    </CommercialDocBox>
+  );
+}

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+
+import { usePaymentMadeEntriesColumns } from './utils';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+import { TableStyle } from '@/constants';
+
+/**
+ * Payment made read-only details table.
+ */
+export default function PaymentMadeDetailTable() {
+  // Retrieve payment made entries columns.
+  const columns = usePaymentMadeEntriesColumns();
+
+  // Payment made details context.
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <CommercialDocEntriesTable
+      columns={columns}
+      data={paymentMade.entries}
+      styleName={TableStyle.Constrant}
+    />
+  );
+}

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTableFooter.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  T,
+  TotalLines,
+  TotalLine,
+  TotalLineBorderStyle,
+  TotalLineTextStyle,
+} from '@/components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made - Details panel - Footer.
+ */
+export default function PaymentMadeDetailTableFooter() {
+  const { paymentMade } = usePaymentMadeDetailContext();
+
+  return (
+    <PaymentMadeFooterRoot>
+      <PaymentMadeTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
+        <TotalLine
+          title={<T id={'payment_made.details.subtotal'} />}
+          value={paymentMade.amount}
+          borderStyle={TotalLineBorderStyle.SingleDark}
+        />
+        <TotalLine
+          title={<T id={'payment_made.details.total'} />}
+          value={paymentMade.formatted_amount}
+          borderStyle={TotalLineBorderStyle.DoubleDark}
+          textStyle={TotalLineTextStyle.Bold}
+        />
+      </PaymentMadeTotalLines>
+    </PaymentMadeFooterRoot>
+  );
+}
+
+export const PaymentMadeFooterRoot = styled.div``;
+
+export const PaymentMadeTotalLines = styled(TotalLines)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Tab } from '@blueprintjs/core';
+
+import { DrawerMainTabs } from '@/components';
+
+import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
+import PaymentMadeDetailTab from './PaymentMadeDetailTab';
+import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
+
+/**
+ * Payment made - view detail.
+ * @returns {React.JSX}
+ */
+
+function PaymentMadeDetailsTabs() {
+  return (
+    <DrawerMainTabs defaultSelectedTabId="details">
+      <Tab
+        id={'details'}
+        title={intl.get('details')}
+        panel={<PaymentMadeDetailTab />}
+      />
+      <Tab
+        id={'journal_entries'}
+        title={intl.get('journal_entries')}
+        panel={<PaymentMadeGLEntriesPanel />}
+      />
+    </DrawerMainTabs>
+  );
+}
+
+/**
+ * Payment made view detail.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeDetail() {
+  return (
+    <PaymentMadeDetailsRoot>
+      <PaymentMadeDetailActionsBar />
+      <PaymentMadeDetailsTabs />
+    </PaymentMadeDetailsRoot>
+  );
+}
+
+const PaymentMadeDetailsRoot = styled.div``;

packages/webapp/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;
+    }
+  }
+}

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { Card } from '@/components';
+import JournalEntriesTable, {
+  AmountDisplayedBaseCurrencyMessage,
+} from '../../JournalEntriesTable/JournalEntriesTable';
+
+import { useTransactionsByReference } from '@/hooks/query';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+/**
+ * Payment made GL entries table panel.
+ * @returns {React.JSX}
+ */
+export default function PaymentMadeGLEntriesPanel() {
+  const { paymentMadeId } = usePaymentMadeDetailContext();
+
+  // Handle fetch transaction by reference.
+  const {
+    data: { transactions },
+    isLoading: isTransactionLoading,
+  } = useTransactionsByReference(
+    {
+      reference_id: paymentMadeId,
+      reference_type: 'BillPayment',
+    },
+    { enabled: !!paymentMadeId },
+  );
+
+  return (
+    <PaymentMadeGLEntriesRoot>
+      <AmountDisplayedBaseCurrencyMessage />
+      <JournalEntriesTable
+        loading={isTransactionLoading}
+        transactions={transactions}
+      />
+    </PaymentMadeGLEntriesRoot>
+  );
+}
+
+const PaymentMadeGLEntriesRoot = styled(Card)``;

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/index.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+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);

packages/webapp/src/containers/Drawers/PaymentMadeDetailDrawer/utils.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+
+import { getColumnWidth } from '@/utils';
+import { FormatNumberCell } from '@/components';
+import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
+
+export const usePaymentMadeEntriesColumns = () => {
+  // Payment made details context.
+  const {
+    paymentMade: { entries },
+  } = usePaymentMadeDetailContext();
+
+  return 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: 'bill.amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'bill.amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        align: 'right',
+      },
+      {
+        Header: intl.get('due_amount'),
+        accessor: 'bill.due_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'bill.due_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        align: 'right',
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: 'payment_amount',
+        Cell: FormatNumberCell,
+        width: getColumnWidth(entries, 'payment_amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
+        disableSortBy: true,
+        textOverview: true,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+};