re-structure to monorepo.

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
+import {
+  DashboardActionsBar,
+  Icon,
+  Can,
+  FormattedMessage as T,
+} from '@/components';
+
+import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
+import { DialogsName } from '@/constants/dialogs';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+
+import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
+import { compose, safeCallback } from '@/utils';
+
+/**
+ * Account drawer action bar.
+ */
+function AccountDrawerActionBar({
+  // #withDialog
+  openDialog,
+
+  // #withAlertsDialog
+  openAlert,
+}) {
+  // Account drawer context.
+  const { account } = useAccountDrawerContext();
+
+  // Handle new child button click.
+  const onNewChildAccount = () => {
+    openDialog(DialogsName.AccountForm, {
+      action: AccountDialogAction.NewChild,
+      parentAccountId: account.id,
+      accountType: account.account_type,
+    });
+  };
+  // Handle edit account action.
+  const onEditAccount = () => {
+    openDialog(DialogsName.AccountForm, {
+      action: AccountDialogAction.Edit,
+      accountId: account.id,
+    });
+  };
+  // Handle delete action account.
+  const onDeleteAccount = () => {
+    openAlert('account-delete', { accountId: account.id });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Can I={AccountAction.Edit} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="pen-18" />}
+            text={<T id={'edit_account'} />}
+            onClick={safeCallback(onEditAccount)}
+          />
+
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={<T id={'new_child_account'} />}
+            onClick={safeCallback(onNewChildAccount)}
+          />
+          <NavbarDivider />
+        </Can>
+        <Can I={AccountAction.Delete} a={AbilitySubject.Account}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon={'trash-16'} iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={safeCallback(onDeleteAccount)}
+          />
+        </Can>
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+)(AccountDrawerActionBar);

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerContent.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import React from 'react';
+import { DrawerBody } from '@/components';
+
+import '@/style/components/Drawers/AccountDrawer.scss';
+
+import { AccountDrawerProvider } from './AccountDrawerProvider';
+import AccountDrawerDetails from './AccountDrawerDetails';
+
+/**
+ * Account drawer content.
+ */
+export default function AccountDrawerContent({
+  // #ownProp
+  accountId,
+  name,
+}) {
+  return (
+    <AccountDrawerProvider name={name} accountId={accountId}>
+      <DrawerBody>
+        <AccountDrawerDetails />
+      </DrawerBody>
+    </AccountDrawerProvider>
+  );
+}

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Card } from '@/components';
+
+import AccountDrawerActionBar from './AccountDrawerActionBar';
+import AccountDrawerHeader from './AccountDrawerHeader';
+import AccountDrawerTable from './AccountDrawerTable';
+
+/**
+ * Account view details.
+ */
+export default function AccountDrawerDetails() {
+  return (
+    <div className={'account-drawer'}>
+      <AccountDrawerActionBar />
+
+      <Card className={'card-header'}>
+        <AccountDrawerHeader />
+      </Card>
+      <AccountDrawerTable />
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.tsx

@@ -0,0 +1,59 @@
+// @ts-nocheck
+import React from 'react';
+import { isEmpty } from 'lodash';
+
+import {
+  Icon,
+  DetailsMenu,
+  DetailItem,
+  FormattedMessage as T,
+} from '@/components';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
+
+/**
+ *  Account drawer header.
+ */
+export default function AccountDrawerHeader() {
+  const { account } = useAccountDrawerContext();
+
+  return (
+    <div className={'account-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem
+          name={'closing-balance'}
+          label={<T id={'closing_balance'} />}
+        >
+          <h3 class={'big-number'}>{account.formatted_amount}</h3>
+        </DetailItem>
+
+        <DetailItem name={'account-type'} label={<T id={'account_type'} />}>
+          {account.account_type_label}
+        </DetailItem>
+
+        <DetailItem name={'account-normal'} label={<T id={'account_normal'} />}>
+          {account.account_normal_formatted}
+          <Icon
+            iconSize={14}
+            icon={`arrow-${
+              account.account_normal === 'credit' ? 'down' : 'up'
+            }`}
+          />
+        </DetailItem>
+
+        <DetailItem name={'code'} label={<T id={'code'} />}>
+          {account.code}
+        </DetailItem>
+
+        <DetailItem name={'currency'} label={<T id={'currency'} />}>
+          {account.currency_code}
+        </DetailItem>
+      </DetailsMenu>
+
+      <DetailsMenu direction={'horizantal'}>
+        <DetailItem name={'description'} label={<T id={'description'} />}>
+          {!isEmpty(account.description) ? account.description : '--'}
+        </DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import React from 'react';
+import { useAccount, useAccountTransactions } from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+
+const AccountDrawerContext = React.createContext();
+
+/**
+ * Account drawer provider.
+ */
+function AccountDrawerProvider({ accountId, name, ...props }) {
+  // Fetches the specific account details.
+  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
+    enabled: !!accountId,
+  });
+
+  // Load the specific account transactions.
+  const { data: accounts, isLoading: isAccountsLoading } =
+    useAccountTransactions(accountId, {
+      enabled: !!accountId,
+    });
+
+  // Drawer title.
+  const drawerTitle = `${account.name} ${account.code}`;
+
+  // Provider.
+  const provider = {
+    accountId,
+    account,
+    accounts,
+    drawerName: name,
+  };
+
+  return (
+    <DrawerLoading loading={isAccountLoading || isAccountsLoading}>
+      <DrawerHeaderContent name={'account-drawer'} title={drawerTitle} />
+      <AccountDrawerContext.Provider value={provider} {...props} />
+    </DrawerLoading>
+  );
+}
+
+const useAccountDrawerContext = () => React.useContext(AccountDrawerContext);
+
+export { AccountDrawerProvider, useAccountDrawerContext };

packages/webapp/src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { compose } from '@/utils';
+import { TableStyle } from '@/constants';
+import { Card, DataTable, If } from '@/components';
+import { useAccountReadEntriesColumns } from './utils';
+import { useAppIntlContext } from '@/components/AppIntlProvider';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
+
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+/**
+ * account drawer table.
+ */
+function AccountDrawerTable({ closeDrawer }) {
+  const { account, accounts, drawerName } = useAccountDrawerContext();
+
+  // Account read-only entries table columns.
+  const columns = useAccountReadEntriesColumns();
+
+  // Handle view more link click.
+  const handleLinkClick = () => {
+    closeDrawer(drawerName);
+  };
+  // Application intl context.
+  const { isRTL } = useAppIntlContext();
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={accounts}
+        payload={{ account }}
+        styleName={TableStyle.Constrant}
+      />
+
+      <If condition={accounts.length > 0}>
+        <TableFooter>
+          <Link
+            to={`/financial-reports/general-ledger`}
+            onClick={handleLinkClick}
+          >
+            {isRTL ? '→' : '←'} {intl.get('view_more_transactions')}
+          </Link>
+        </TableFooter>
+      </If>
+    </Card>
+  );
+}
+
+export default compose(withDrawerActions)(AccountDrawerTable);
+
+const TableFooter = styled.div`
+  padding: 6px 14px;
+  display: block;
+  border-top: 1px solid #d2dde2;
+  border-bottom: 1px solid #d2dde2;
+  font-size: 12px;
+`;

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

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

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

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import intl from 'react-intl-universal';
+import React from 'react';
+
+import { FormatDateCell } from '@/components';
+import { isBlank } from '@/utils';
+
+/**
+ * Debit/credit table cell.
+ */
+function DebitCreditTableCell({ value, payload: { account } }) {
+  return !isBlank(value) && value !== 0 ? account.formatted_amount : null;
+}
+
+/**
+ * Running balance table cell.
+ */
+function RunningBalanceTableCell({ value, payload: { account } }) {
+  return account.formatted_amount;
+}
+
+/**
+ * Retrieve entries columns of read-only account view.
+ */
+export const useAccountReadEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('transaction_date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('transaction_type'),
+        accessor: 'reference_type_formatted',
+        width: 100,
+        textOverview: true,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        Cell: DebitCreditTableCell,
+        width: 80,
+        className: 'credit',
+        align: 'right',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        Cell: DebitCreditTableCell,
+        width: 80,
+        className: 'debit',
+        align: 'right',
+        textOverview: true,
+      },
+      {
+        Header: intl.get('running_balance'),
+        Cell: RunningBalanceTableCell,
+        accessor: 'running_balance',
+        width: 110,
+        className: 'running_balance',
+        align: 'right',
+        textOverview: true,
+      },
+    ],
+    [],
+  );