feat: add view detail cash flow transaction.

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { DataTable, TableFastCell } from 'components';
+import { DataTable, TableFastCell, FormattedMessage as T } from 'components';
 import { TABLES } from 'common/tables';
 
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
@@ -10,6 +10,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withSettings from '../../Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { useMemorizedColumnsWidths } from '../../../hooks';
 import { useAccountTransactionsColumns, ActionsMenu } from './components';
@@ -25,6 +26,9 @@ function AccountTransactionsDataTable({
 
   // #withAlertsActions
   openAlert,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   // Retrieve table columns.
   const columns = useAccountTransactionsColumns();
@@ -42,6 +46,39 @@ function AccountTransactionsDataTable({
     openAlert('account-transaction-delete', { referenceId: reference_id });
   };
 
+  const handleViewDetailCashflowTransaction = ({
+    reference_id,
+    reference_type,
+  }) => {
+    switch (reference_type) {
+      case 'SaleReceipt':
+        return openDrawer('receipt-detail-drawer', {
+          receiptId: reference_id,
+        });
+      case 'Journal':
+        return openDrawer('journal-drawer', {
+          manualJournalId: reference_id,
+        });
+      case 'Expense':
+        return openDrawer('expense-drawer', {
+          expenseId: reference_id,
+        });
+      case 'PaymentReceive':
+        return openDrawer('payment-receive-detail-drawer', {
+          paymentReceiveId: reference_id,
+        });
+      case 'BillPayment':
+        return openDrawer('payment-made-detail-drawer', {
+          paymentMadeId: reference_id,
+        });
+
+      default:
+        return openDrawer('cashflow-transaction-drawer', {
+          referenceId: reference_id,
+        });
+    }
+  };
+
   return (
     <CashflowTransactionsTable
       noInitialFetch={true}
@@ -64,10 +101,15 @@ function AccountTransactionsDataTable({
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
       noResults={
-        'There is deposit/withdrawal transactions on the current account.'
+        <T
+          id={
+            'cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account'
+          }
+        />
       }
       className="table-constrant"
       payload={{
+        onViewDetails: handleViewDetailCashflowTransaction,
         onDelete: handleDeleteTransaction,
       }}
     />
@@ -79,6 +121,7 @@ export default compose(
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(AccountTransactionsDataTable);
 
 const DashboardConstrantTable = styled(DataTable)`

src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Popover,
@@ -61,7 +62,7 @@ function AccountBalanceItem() {
 
   return (
     <AccountBalanceItemWrap>
-      Balance in Bigcapital{' '}
+      {intl.get('cash_flow_balance_in', { name: 'Bigcapital' })}
       <AccountBalanceAmount>
         {currentAccount.formatted_amount}
       </AccountBalanceAmount>

src/containers/CashFlow/AccountTransactions/components.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 
 import { MaterialProgressBar } from 'components';
 import { FormatDateCell, If, Icon } from 'components';
@@ -9,18 +9,27 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
 import { safeCallback } from 'utils';
 
-export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+export function ActionsMenu({
+  payload: { onDelete, onViewDetails },
+  row: { original },
+}) {
   return (
-    <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
-      <Menu>
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+        <MenuDivider />
         <MenuItem
           text={intl.get('delete_transaction')}
           intent={Intent.DANGER}
           onClick={safeCallback(onDelete, original)}
           icon={<Icon icon="trash-16" iconSize={16} />}
         />
-      </Menu>
-    </If>
+      </If>
+    </Menu>
   );
 }
 /**

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -13,6 +13,7 @@ import {
   BankAccount,
   If,
   Icon,
+  T,
 } from '../../../components';
 import AccountsAlerts from './../../Accounts/AccountsAlerts';
 
@@ -169,7 +170,11 @@ function CashflowAccountsEmptyState() {
   return (
     <AccountsEmptyStateBase>
       <AccountsEmptyStateTitle>
-        There is no cashflow accounts with current filter criteria.
+        <T
+          id={
+            'cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria'
+          }
+        />
       </AccountsEmptyStateTitle>
     </AccountsEmptyStateBase>
   );
@@ -248,14 +253,14 @@ function CashflowAccountContextMenu({
       />
       <MenuDivider />
       <MenuItem
-        text={'Money In'}
+        text={<T id={'cash_flow_money_in'} />}
         icon={<Icon icon={'arrow-downward'} iconSize={16} />}
       >
         <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
       </MenuItem>
 
       <MenuItem
-        text={'Money Out'}
+    text={<T id={'cash_flow_money_out'} />}
         icon={<Icon icon={'arrow-upward'} iconSize={16} />}
       >
         <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />