feat: style read-only drawers.

fix: empty state in resources tables.

client/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  NavbarGroup,
+  Intent,
+  NavbarDivider,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -11,6 +17,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { safeCallback } from 'utils';
 
 import { compose } from 'utils';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**
  * Account drawer action bar.
@@ -24,10 +31,10 @@ function AccountDrawerActionBar({
 
   // #withDrawerActions
   closeDrawer,
-  
-  // #ownProps
-  account,
 }) {
+  // Account drawer context.
+  const { account } = useAccountDrawerContext();
+
   // Handle new child button click.
   const onNewChildAccount = () => {
     openDialog('account-form', {
@@ -44,10 +51,8 @@ function AccountDrawerActionBar({
 
   // Handle delete action account.
   const onDeleteAccount = () => {
-    if (account) {
-      openAlert('account-delete', { accountId: account.id });
-      closeDrawer('account-drawer');
-    }
+    openAlert('account-delete', { accountId: account.id });
+    closeDrawer('account-drawer');
   };
 
   return (
@@ -65,9 +70,10 @@ function AccountDrawerActionBar({
           text={<T id={'new_child_account'} />}
           onClick={safeCallback(onNewChildAccount)}
         />
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
-          icon={<Icon icon="trash-18" iconSize={18} />}
+          icon={<Icon icon={'trash-16'} iconSize={16} />}
           text={<T id={'delete'} />}
           intent={Intent.DANGER}
           onClick={safeCallback(onDeleteAccount)}

client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js

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

client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js

@@ -1,68 +1,56 @@
 import React from 'react';
+import { defaultTo } from 'lodash';
+
 import { FormattedMessage as T } from 'components';
-import { Icon, Money } from 'components';
+import { Icon, Money, DetailsMenu, DetailItem } from 'components';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**
  *  Account drawer header.
  */
-export default function AccountDrawerHeader({
-  account: {
-    account_normal,
-    account_type_label,
-    code,
-    amount,
-    currency_code,
-    description,
-  },
-}) {
+export default function AccountDrawerHeader() {
+  const { account } = useAccountDrawerContext();
+
   return (
-    <div className={'account-drawer__content'}>
-      <div>
-        <span>
-          <T id={'closing_balance'} />
-        </span>
-        <p className={'balance'}>
-          {<Money amount={amount} currency={currency_code} />}
-        </p>
-      </div>
-      <div class={'account-type'}>
-        <span>
-          <T id={'account_type'} />
-        </span>
-        <p>{account_type_label}</p>
-      </div>
-      <div class={'account-normal'}>
-        <span>
-          <T id={'account_normal'} />
-        </span>
-        <p>
-          {' '}
-          {account_normal}{' '}
+    <div className={'account-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem
+          name={'closing-balance'}
+          label={<T id={'closing_balance'} />}
+        >
+          <h3 class={'big-number'}>
+            <Money amount={account.amount} currency={account.currency_code} />
+          </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_normal === 'credit' ? 'down' : 'up'}`}
+            icon={`arrow-${
+              account.account_normal === 'credit' ? 'down' : 'up'
+            }`}
           />
-        </p>
-      </div>
-      <div>
-        <span>
-          <T id={'code'} />
-        </span>
-        <p>{code}</p>
-      </div>
-      <div>
-        <span>
-          <T id={'currency'} />
-        </span>
-        <p>{currency_code}</p>
-      </div>
+        </DetailItem>
 
-      <p className={'account-drawer__content--desc'}>
-        <b>
-          <T id={'description'} />
-        </b>
-        : {description ? description : '--'}
-      </p>
+        <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>
   );
 }

client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js

@@ -14,12 +14,12 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
   });
 
   // Load the specific account transactions.
-  const {
-    data: accounts,
-    isLoading: isAccountsLoading,
-  } = useAccountTransactions(accountId, {
-    enabled: !!accountId,
-  });
+  const { data: accounts, isLoading: isAccountsLoading } =
+    useAccountTransactions(accountId, {
+      enabled: !!accountId,
+    });
+
+  // Drawer title.
   const drawerTitle = `${account.name} ${account.code}`;
 
   // provider.

client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js

@@ -1,61 +1,29 @@
 import React from 'react';
-import moment from 'moment';
 import { Link } from 'react-router-dom';
+import intl from 'react-intl-universal';
+
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
-import intl from 'react-intl-universal';
-import { DataTable, Money } from 'components';
-import { isBlank, compose } from 'utils';
+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: { currency_code },
+    account,
     accounts,
     drawerName,
   } = useAccountDrawerContext();
 
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: intl.get('transaction_date'),
-        accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
-        width: 110,
-      },
-      {
-        Header: intl.get('transaction_type'),
-        accessor: 'reference_type_formatted',
-        width: 100,
-      },
-      {
-        Header: intl.get('credit'),
-        accessor: ({ credit }) =>
-          !isBlank(credit) && credit !== 0 ? (
-            <Money amount={credit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('debit'),
-        accessor: ({ debit }) =>
-          !isBlank(debit) && debit !== 0 ? (
-            <Money amount={debit} currency={currency_code} />
-          ) : null,
-        width: 80,
-      },
-      {
-        Header: intl.get('running_balance'),
-        accessor: ({ running_balance }) => (
-          <Money amount={running_balance} currency={currency_code} />
-        ),
-        width: 110,
-      },
-    ],
-    [],
-  );
+  // Account read-only entries table columns.
+  const columns = useAccountReadEntriesColumns();
 
   // Handle view more link click.
   const handleLinkClick = () => {
@@ -64,16 +32,18 @@ function AccountDrawerTable({ closeDrawer }) {
 
   return (
     <div className={'account-drawer__table'}>
-      <DataTable columns={columns} data={accounts} />
+      <DataTable columns={columns} data={accounts} payload={{ account }}/>
 
-      <div class="account-drawer__table-footer">
-        <Link
-          to={`/financial-reports/general-ledger`}
-          onClick={handleLinkClick}
-        >
-          ←{intl.get('view_more_transactions')}
-        </Link>
-      </div>
+      <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>
   );
 }

client/src/containers/Drawers/AccountDrawer/index.js

@@ -15,9 +15,16 @@ function AccountDrawer({
   isOpen,
   payload: { accountId },
 }) {
-
   return (
-    <Drawer isOpen={isOpen} name={name} size={'900px'}>
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{
+        minWidth: '700px',
+        maxWidth: '900px',
+      }}
+      size={'65%'}
+    >
       <DrawerSuspense>
         <AccountDrawerContent name={name} accountId={accountId} />
       </DrawerSuspense>

client/src/containers/Drawers/AccountDrawer/utils.js

@@ -0,0 +1,62 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import moment from 'moment';
+
+import { Money } from 'components';
+import { isBlank } from 'utils';
+
+/**
+ * Debit/credit table cell.
+ */
+function DebitCreditTableCell({ value, payload: { account } }) {
+  return !isBlank(value) && value !== 0 ? (
+    <Money amount={value} currency={account.currency_code} />
+  ) : null;
+}
+
+/**
+ * Running balance table cell.
+ */
+function RunningBalanceTableCell({ value, payload: { account } }) {
+  return (
+    <Money amount={value} currency={account.currency_code} />
+  );
+}
+
+/**
+ * Retrieve entries columns of read-only account view.
+ */
+export const useAccountReadEntriesColumns = () =>
+  React.useMemo(
+    () => [
+      {
+        Header: intl.get('transaction_date'),
+        accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
+        width: 110,
+      },
+      {
+        Header: intl.get('transaction_type'),
+        accessor: 'reference_type_formatted',
+        width: 100,
+      },
+      {
+        Header: intl.get('credit'),
+        accessor: 'credit',
+        Cell: DebitCreditTableCell,
+        width: 80,
+      },
+      {
+        Header: intl.get('debit'),
+        accessor: 'debit',
+        Cell: DebitCreditTableCell,
+        width: 80,
+      },
+      {
+        Header: intl.get('running_balance'),
+        Cell: RunningBalanceTableCell,
+        accessor: 'running_balance',
+        width: 110,
+      },
+    ],
+    [],
+  );