re-structure to monorepo.

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Can,
+  FormattedMessage as T,
+  DrawerActionsBar,
+  Icon,
+} from '@/components';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { AbilitySubject, CashflowAction } from '@/constants/abilityOption';
+import { compose } from '@/utils';
+
+/**
+ * Cashflow transaction drawer action bar.
+ */
+function CashflowTransactionDrawerActionBar({
+  // #withAlertsDialog
+  openAlert,
+}) {
+  const { referenceId } = useCashflowTransactionDrawerContext();
+
+  // Handle cashflow transaction delete action.
+  const handleDeleteCashflowTransaction = () => {
+    openAlert('account-transaction-delete', { referenceId });
+  };
+
+  return (
+    <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+      <DrawerActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleDeleteCashflowTransaction}
+          />
+        </NavbarGroup>
+      </DrawerActionsBar>
+    </Can>
+  );
+}
+
+export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerContent.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+
+import '@/style/components/Drawers/CashflowTransactionDrawer.scss';
+
+import { DrawerBody } from '@/components';
+import { CashflowTransactionDrawerProvider } from './CashflowTransactionDrawerProvider';
+import CashflowTransactionDrawerDetails from './CashflowTransactionDrawerDetails';
+
+/**
+ * Cash flow transction drawer content.
+ */
+export default function CashflowTransactionDrawerContent({
+  // #ownProp
+  referenceId,
+}) {
+  return (
+    <CashflowTransactionDrawerProvider referenceId={referenceId}>
+      <DrawerBody>
+        <CashflowTransactionDrawerDetails />
+      </DrawerBody>
+    </CashflowTransactionDrawerProvider>
+  );
+}

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Card } from '@/components';
+
+import CashflowTransactionDrawerActionBar from './CashflowTransactionDrawerActionBar';
+import CashflowTransactionDrawerHeader from './CashflowTransactionDrawerHeader';
+import CashflowTransactionDrawerTable from './CashflowTransactionDrawerTable';
+import CashflowTransactionDrawerFooter from './CashflowTransactionDrawerFooter';
+/**
+ * Cashflow transaction view details.
+ */
+export default function CashflowTransactionDrawerDetails() {
+  return (
+    <div className={'cashflow-drawer'}>
+      <CashflowTransactionDrawerActionBar />
+
+      <div className="cashflow-drawer__content">
+        <Card>
+          <CashflowTransactionDrawerHeader />
+          <CashflowTransactionDrawerTable />
+          <CashflowTransactionDrawerFooter />
+        </Card>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { T, FormatNumber } from '@/components';
+
+export default function CashflowTransactionDrawerFooter() {
+  const {
+    cashflowTransaction: { formatted_amount },
+  } = useCashflowTransactionDrawerContext();
+
+  return (
+    <div className="cashflow-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">
+            <T id={'manual_journal.details.subtotal'} />
+          </div>
+          <div class="debit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+          <div class="credit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+        </div>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">
+            <T id={'manual_journal.details.total'} />
+          </div>
+          <div class="debit">{formatted_amount}</div>
+          <div class="credit">{formatted_amount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import React from 'react';
+import { defaultTo } from 'lodash';
+import {
+  DetailsMenu,
+  DetailItem,
+  FormatDate,
+  FormattedMessage as T,
+  Row,
+  Col,
+  CommercialDocHeader,
+} from '@/components';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+
+/**
+ * Cashlflow transaction drawer detail Header.
+ */
+export default function CashflowTransactionDrawerHeader() {
+  const { cashflowTransaction } = useCashflowTransactionDrawerContext();
+
+  return (
+    <CommercialDocHeader>
+      <CommercialDocHeader>
+        <DetailsMenu>
+          <DetailItem name={'total'} label={<T id={'total'} />}>
+            <h3 class="big-number">{cashflowTransaction.formatted_amount}</h3>
+          </DetailItem>
+        </DetailsMenu>
+      </CommercialDocHeader>
+
+      <Row>
+        <Col xs={6}>
+          <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              name={'transaction_type'}
+              label={<T id={'cash_flow_drawer.label_transaction_type'} />}
+            >
+              {cashflowTransaction.transaction_type_formatted}
+            </DetailItem>
+
+            <DetailItem
+              name={'transaction_number'}
+              label={<T id={'cash_flow.drawer.label_transaction_no'} />}
+            >
+              {cashflowTransaction.transaction_number}
+            </DetailItem>
+
+            <DetailItem label={<T id={'date'} />}>
+              <FormatDate value={cashflowTransaction.date} />
+            </DetailItem>
+
+            <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+              {defaultTo(cashflowTransaction.reference_no, '-')}
+            </DetailItem>
+          </DetailsMenu>
+        </Col>
+      </Row>
+    </CommercialDocHeader>
+  );
+}

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useCashflowTransaction } from '@/hooks/query';
+
+import { DrawerLoading, DrawerHeaderContent } from '@/components';
+
+const CashflowTransactionDrawerContext = React.createContext();
+
+/**
+ * Cashflow transaction drawer provider.
+ */
+function CashflowTransactionDrawerProvider({ referenceId, ...props }) {
+  // Fetch the specific cashflow transaction details.
+  const {
+    data: cashflowTransaction,
+    isLoading: isCashflowTransactionLoading,
+    isFetching: isCashflowTransactionFetching,
+  } = useCashflowTransaction(referenceId, {
+    enabled: !!referenceId,
+  });
+
+  // Provider.
+  const provider = {
+    referenceId,
+    cashflowTransaction,
+
+    isCashflowTransactionFetching,
+    isCashflowTransactionLoading,
+  };
+
+  return (
+    <DrawerLoading loading={isCashflowTransactionLoading}>
+      <DrawerHeaderContent
+        name={'cashflow-transaction-drawer'}
+        title={intl.get('cash_flow.drawer.label_transaction', {
+          number: cashflowTransaction?.transaction_number,
+        })}
+      />
+      <CashflowTransactionDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useCashflowTransactionDrawerContext = () =>
+  React.useContext(CashflowTransactionDrawerContext);
+
+export {
+  CashflowTransactionDrawerProvider,
+  useCashflowTransactionDrawerContext,
+};

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React from 'react';
+
+import { CommercialDocEntriesTable } from '@/components';
+
+import { useCashflowTransactionColumns } from './utils';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+
+/**
+ * Cashflow transaction drawer table.
+ */
+export default function CashflowTransactionDrawerTable() {
+  const columns = useCashflowTransactionColumns();
+  const {
+    cashflowTransaction: { transactions },
+  } = useCashflowTransactionDrawerContext();
+
+  return <CommercialDocEntriesTable columns={columns} data={transactions} />;
+}

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

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+import { compose } from '@/utils';
+
+const CashFlowTransactionDrawerContent = React.lazy(() =>
+  import('./CashflowTransactionDrawerContent'),
+);
+
+/**
+ * Cash flow transaction drawer
+ */
+function CashflowTransactionDetailDrawer({
+  name,
+  // #withDrawer
+  isOpen,
+  payload: { referenceId },
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      size={'65%'}
+      style={{ minWidth: '700px', maxWidth: '900px' }}
+    >
+      <DrawerSuspense>
+        <CashFlowTransactionDrawerContent referenceId={referenceId} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(CashflowTransactionDetailDrawer);

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

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+import React from 'react';
+
+import { FormatNumberCell } from '@/components';
+
+/**
+ * Retrieve cashflow transaction entries columns.
+ */
+export const useCashflowTransactionColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('account_name'),
+        accessor: 'account.name',
+        width: 130,
+        disableSortBy: true,
+        className: 'account',
+      },
+      {
+        Header: intl.get('contact'),
+        accessor: 'contact.display_name',
+        width: 130,
+        disableSortBy: true,
+        className: 'contact',
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        Cell: FormatNumberCell,
+        width: 100,
+        disableResizable: true,
+        disableSortBy: true,
+        formatNumber: { noZero: true },
+        className: 'credit',
+        align: 'right',
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        Cell: FormatNumberCell,
+        width: 100,
+        disableResizable: true,
+        disableSortBy: true,
+        formatNumber: { noZero: true },
+        className: 'debit',
+        align: 'right',
+      },
+    ],
+    [],
+  );