chrone: sperate client and server to different repos.

src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Icon from 'components/Icon';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { safeCallback } from 'utils';
+
+import { compose } from 'utils';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
+
+/**
+ * Account drawer action bar.
+ */
+function AccountDrawerActionBar({
+  // #withDialog
+  openDialog,
+
+  // #withAlertsDialog
+  openAlert,
+}) {
+  // Account drawer context.
+  const { account } = useAccountDrawerContext();
+
+  // Handle new child button click.
+  const onNewChildAccount = () => {
+    openDialog('account-form', {
+      action: 'new_child',
+      parentAccountId: account.id,
+      accountType: account.account_type,
+    });
+  };
+
+  // Handle edit account action.
+  const onEditAccount = () => {
+    openDialog('account-form', { action: 'edit', id: account.id });
+  };
+
+  // Handle delete action account.
+  const onDeleteAccount = () => {
+    openAlert('account-delete', { accountId: account.id });
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <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 />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDeleteAccount)}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+export default compose(
+  withDialogActions,
+  withAlertsActions,
+)(AccountDrawerActionBar);

src/containers/Drawers/AccountDrawer/AccountDrawerContent.js

@@ -0,0 +1,24 @@
+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>
+  );
+}

src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js

@@ -0,0 +1,23 @@
+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>
+  );
+}

src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { defaultTo } from 'lodash';
+
+import { FormattedMessage as T } from 'components';
+import { Icon, Money, DetailsMenu, DetailItem } 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}
+          <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'} />}>
+          {defaultTo(account.description, '--')}
+        </DetailItem>
+      </DetailsMenu>
+    </div>
+  );
+}

src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js

@@ -0,0 +1,43 @@
+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 };

src/containers/Drawers/AccountDrawer/AccountDrawerTable.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import intl from 'react-intl-universal';
+
+import { useAccountDrawerContext } from './AccountDrawerProvider';
+
+import { DataTable, If } from 'components';
+
+import { compose } from 'utils';
+import { useAccountReadEntriesColumns } from './utils';
+
+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);
+  };
+
+  return (
+    <div className={'account-drawer__table'}>
+      <DataTable columns={columns} data={accounts} payload={{ account }}/>
+
+      <If condition={accounts.length > 0}>
+        <div class="account-drawer__table-footer">
+          <Link
+            to={`/financial-reports/general-ledger`}
+            onClick={handleLinkClick}
+          >
+            ←{intl.get('view_more_transactions')}
+          </Link>
+        </div>
+      </If>
+    </div>
+  );
+}
+
+export default compose(withDrawerActions)(AccountDrawerTable);

src/containers/Drawers/AccountDrawer/index.js

@@ -0,0 +1,32 @@
+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);

src/containers/Drawers/AccountDrawer/utils.js

@@ -0,0 +1,69 @@
+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,
+      },
+    ],
+    [],
+  );