From 0a21c5fa41740471408f51c06ef150fdd1776ce6 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 25 Oct 2021 17:31:07 +0200
Subject: [PATCH] feat: add view detail cash flow transaction.

---
 src/common/drawers.js                         |  1 +
 src/components/DrawersContainer.js            |  2 +
 .../CashFlow/AccountDeleteTransactionAlert.js |  6 ++
 .../AccountTransactionsDataTable.js           | 47 ++++++++-
 .../AccountTransactionsDetailsBar.js          |  3 +-
 .../AccountTransactions/components.js         | 21 ++--
 .../CashFlowAccounts/CashflowAccountsGrid.js  | 11 ++-
 .../CashflowTransactionDrawerActionBar.js     | 40 ++++++++
 .../CashflowTransactionDrawerContent.js       | 23 +++++
 .../CashflowTransactionDrawerDetails.js       | 25 +++++
 .../CashflowTransactionDrawerFooter.js        | 34 +++++++
 .../CashflowTransactionDrawerHeader.js        | 63 ++++++++++++
 .../CashflowTransactionDrawerProvider.js      | 50 ++++++++++
 .../CashflowTransactionDrawerTable.js         | 22 +++++
 .../CashflowTransactionDetailDrawer/index.js  | 35 +++++++
 .../CashflowTransactionDetailDrawer/utils.js  | 76 ++++++++++++++
 src/hooks/query/cashflowAccounts.js           | 16 +++
 src/lang/en/index.json                        | 71 ++++++-------
 .../Drawers/CashflowTransactionDrawer.scss    | 99 +++++++++++++++++++
 19 files changed, 600 insertions(+), 45 deletions(-)
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerContent.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/index.js
 create mode 100644 src/containers/Drawers/CashflowTransactionDetailDrawer/utils.js
 create mode 100644 src/style/components/Drawers/CashflowTransactionDrawer.scss

diff --git a/src/common/drawers.js b/src/common/drawers.js
index 4fb36ed80..449f51485 100644
--- a/src/common/drawers.js
+++ b/src/common/drawers.js
@@ -9,4 +9,5 @@ export const DRAWERS = {
   EXPENSE_DRAWER: 'expense-drawer',
   BILL_DRAWER: 'bill-drawer',
   INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
+  CASHFLOW_TRNASACTION_DRAWER: 'cashflow-transaction-drawer',
 };
diff --git a/src/components/DrawersContainer.js b/src/components/DrawersContainer.js
index e35b17f1d..f240fd1bf 100644
--- a/src/components/DrawersContainer.js
+++ b/src/components/DrawersContainer.js
@@ -13,6 +13,7 @@ import ItemDetailDrawer from '../containers/Drawers/ItemDetailDrawer';
 import CustomerDetailsDrawer from '../containers/Drawers/CustomerDetailsDrawer';
 import VendorDetailsDrawer from '../containers/Drawers/VendorDetailsDrawer';
 import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
+import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTransactionDetailDrawer';
 
 import { DRAWERS } from 'common/drawers';
 
@@ -37,6 +38,7 @@ export default function DrawersContainer() {
       <InventoryAdjustmentDetailDrawer
         name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
       />
+      <CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER} />
     </div>
   );
 }
diff --git a/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js b/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js
index da757392a..d24e9d591 100644
--- a/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js
+++ b/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js
@@ -7,6 +7,7 @@ import { useDeleteCashflowTransaction } from 'hooks/query';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -22,6 +23,9 @@ function AccountDeleteTransactionAlert({
 
   // #withAlertActions
   closeAlert,
+
+  // #withDrawerActions
+  closeDrawer,
 }) {
   const { mutateAsync: deleteTransactionMutate, isLoading } =
     useDeleteCashflowTransaction();
@@ -39,6 +43,7 @@ function AccountDeleteTransactionAlert({
           message: intl.get('cash_flow_transaction.delete.alert_message'),
           intent: Intent.SUCCESS,
         });
+        closeDrawer('cashflow-transaction-drawer');
       })
       .catch(
         ({
@@ -77,4 +82,5 @@ function AccountDeleteTransactionAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
+  withDrawerActions,
 )(AccountDeleteTransactionAlert);
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
index 7378a1a12..5d1e9b304 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
+++ b/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)`
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
index e72994af2..d01be1a15 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js
+++ b/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>
diff --git a/src/containers/CashFlow/AccountTransactions/components.js b/src/containers/CashFlow/AccountTransactions/components.js
index d4cded039..cb292468c 100644
--- a/src/containers/CashFlow/AccountTransactions/components.js
+++ b/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>
   );
 }
 /**
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
index ea04d8e64..32898d54a 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
+++ b/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} />
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
new file mode 100644
index 000000000..2099f063e
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Icon from 'components/Icon';
+import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+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 (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+          text={<T id={'delete'} />}
+          intent={Intent.DANGER}
+          onClick={handleDeleteCashflowTransaction}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerContent.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerContent.js
new file mode 100644
index 000000000..fd792a975
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerContent.js
@@ -0,0 +1,23 @@
+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>
+  );
+}
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
new file mode 100644
index 000000000..d14b2d8fa
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
@@ -0,0 +1,25 @@
+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>
+  );
+}
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.js
new file mode 100644
index 000000000..e22d2de93
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { T, FormatNumber } from '../../../components';
+
+export default function CashflowTransactionDrawerFooter() {
+  const {
+    cashflowTransaction: { 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={amount} />
+          </div>
+          <div class="credit">
+            <FormatNumber value={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">{amount}</div>
+          <div class="credit">{amount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
new file mode 100644
index 000000000..88c8c7bdd
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { defaultTo } from 'lodash';
+import {
+  DetailsMenu,
+  DetailItem,
+  FormatDate,
+  FormattedMessage as T,
+} from 'components';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+
+/**
+ * Cashlflow transaction drawer detail Header.
+ */
+export default function CashflowTransactionDrawerHeader() {
+  const {
+    cashflowTransaction: {
+      amount,
+      transaction_type,
+      transaction_number,
+      reference_no,
+      date,
+      description,
+    },
+  } = useCashflowTransactionDrawerContext();
+
+  return (
+    <div className={'cashflow-drawer__content-header'}>
+      <DetailsMenu>
+        <DetailItem name={'total'} label={<T id={'total'} />}>
+          <h3 class="amount">{amount}</h3>
+        </DetailItem>
+
+        <DetailItem
+          name={'transaction_type'}
+          label={<T id={'cash_flow_drawer.label_transaction_type'} />}
+        >
+          {transaction_type}
+        </DetailItem>
+
+        <DetailItem
+          name={'transaction_number'}
+          label={<T id={'cash_flow.drawer.label_transaction_no'} />}
+        >
+          {transaction_number}
+        </DetailItem>
+        <DetailItem
+          label={<T id={'date'} />}
+          children={<FormatDate value={date} />}
+        />
+        <DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
+          {defaultTo(reference_no, '-')}
+        </DetailItem>
+      </DetailsMenu>
+
+      <div class="cashflow-drawer__content-description">
+        <b class="title">
+          <T id={'description'} />
+        </b>
+        : {defaultTo(description, '—')}
+      </div>
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.js
new file mode 100644
index 000000000..9170aa068
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.js
@@ -0,0 +1,50 @@
+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,
+};
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
new file mode 100644
index 000000000..96b2f7b87
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { DataTable, If, FormattedMessage as T } 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 (
+    <div className="cashflow-drawer__content-table">
+      <DataTable columns={columns} data={transactions} />
+    </div>
+  );
+}
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/index.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/index.js
new file mode 100644
index 000000000..575c8b594
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/index.js
@@ -0,0 +1,35 @@
+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);
diff --git a/src/containers/Drawers/CashflowTransactionDetailDrawer/utils.js b/src/containers/Drawers/CashflowTransactionDetailDrawer/utils.js
new file mode 100644
index 000000000..1e4430ab4
--- /dev/null
+++ b/src/containers/Drawers/CashflowTransactionDetailDrawer/utils.js
@@ -0,0 +1,76 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Classes, Tooltip, Position } from '@blueprintjs/core';
+
+import { FormatNumberCell, If, Icon } from '../../../components';
+
+/**
+ * Note column accessor.
+ */
+export function NoteAccessor(row) {
+  return (
+    <If condition={row.note}>
+      <Tooltip
+        className={Classes.TOOLTIP_INDICATOR}
+        content={row.note}
+        position={Position.LEFT_TOP}
+        hoverOpenDelay={50}
+      >
+        <Icon icon={'file-alt'} iconSize={16} />
+      </Tooltip>
+    </If>
+  );
+}
+
+/**
+ * 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('note'),
+        accessor: NoteAccessor,
+        width: 80,
+        disableSortBy: true,
+        className: 'note',
+      },
+      {
+        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',
+      },
+    ],
+    [],
+  );
diff --git a/src/hooks/query/cashflowAccounts.js b/src/hooks/query/cashflowAccounts.js
index 25aca40a8..51be16048 100644
--- a/src/hooks/query/cashflowAccounts.js
+++ b/src/hooks/query/cashflowAccounts.js
@@ -20,6 +20,7 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTION);
 };
 
 /**
@@ -71,6 +72,21 @@ export function useCreateCashflowTransaction(props) {
   );
 }
 
+/**
+ * Retrieve account transactions list.
+ */
+export function useCashflowTransaction(id, props) {
+  return useRequestQuery(
+    [t.CASH_FLOW_TRANSACTIONS, id],
+    { method: 'get', url: `cashflow/transactions/${id}` },
+    {
+      select: (res) => res.data.cashflow_transaction,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
+
 /**
  * Deletes the given sale invoice.
  */
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index bc0448582..8f6308111 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1123,7 +1123,7 @@
   "transaction_number": "Transaction number",
   "transaction_line": "Transaction line",
   "allocation_method": "Allocation method",
-  "other_income_account":"Other income account",
+  "other_income_account": "Other income account",
   "valuation": "Valuation",
   "select_transaction": "Select transaction account",
   "details": "Details",
@@ -1366,39 +1366,44 @@
   "vendors.option_with_transactions.hint": "Include vendors that onces have transactions on the given date period only.",
   "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
   "siebar.cashflow.label_cash_and_bank_accounts": "Cash & Bank Accounts",
- 
   "cash_flow.label_account_transcations": "Account Transcations",
-  "cash_flow.label.deposit":"Deposit",
-  "cash_flow.label.withdrawal":"Withdrawal",
-  "cash_flow.label.running_balance":"Running balance",
-  "cash_flow.label.add_cash_account":"Add Cash account",
-  "cash_flow.label.add_bank_account":"Add Bank account",
-  "cash_flow.label.add_money_in":"Add Money In",
-  "cash_flow.label.add_money_out":"Add Money Out",
-  "cash_flow.option_owner_contribution":"Owner contribution",
-  "cash_flow.option_other_income":"Other income",
-  "cash_flow.option_owner_drawings":"Owner drawings",
-  "cash_flow.option_expenses":"Expenes",
-  "cash_flow.option_vendor_payment":"Vendor payment",
-  "cash_flow.option_transfer_form_account":"Transfer from account",
-  "cash_flow.option_transfer_to_account":"Transfer to account",
-  "cash_flow_transaction.label_equity_account":"Equity account",
-  "cash_flow_transaction.label_expense_account":"Expense account",
-  "cash_flow_transaction_success_message":" The cashflow transaction has been created successfully.",
-  "cash_flow_transaction.money_in":"Money In {value}",
-  "cash_flow_transaction.money_out":"Money Out {value}",
-  "cash_flow_transaction.other_income_account":"Other income account",
-  "cash_flow_transaction.other_expense_account":"Other expense account",
+  "cash_flow.label.deposit": "Deposit",
+  "cash_flow.label.withdrawal": "Withdrawal",
+  "cash_flow.label.running_balance": "Running balance",
+  "cash_flow.label.add_cash_account": "Add Cash account",
+  "cash_flow.label.add_bank_account": "Add Bank account",
+  "cash_flow.label.add_money_in": "Add Money In",
+  "cash_flow.label.add_money_out": "Add Money Out",
+  "cash_flow.option_owner_contribution": "Owner contribution",
+  "cash_flow.option_other_income": "Other income",
+  "cash_flow.option_owner_drawings": "Owner drawings",
+  "cash_flow.option_expenses": "Expenes",
+  "cash_flow.option_vendor_payment": "Vendor payment",
+  "cash_flow.option_transfer_form_account": "Transfer from account",
+  "cash_flow.option_transfer_to_account": "Transfer to account",
+  "cash_flow_transaction.label_equity_account": "Equity account",
+  "cash_flow_transaction.label_expense_account": "Expense account",
+  "cash_flow_transaction_success_message": " The cashflow transaction has been created successfully.",
+  "cash_flow_transaction.money_in": "Money In {value}",
+  "cash_flow_transaction.money_out": "Money Out {value}",
+  "cash_flow_transaction.other_income_account": "Other income account",
+  "cash_flow_transaction.other_expense_account": "Other expense account",
   "save_and_publish": "Save & Publish",
-  "cash_flow_transaction.label_transfer_from_account":"Transfer from account",
-  "cash_flow_transaction.label_transfer_to_account":"Transfer to account",
-  "cash_flow_transaction.label_current_account":"Current account",
-  "cash_flow_transaction.delete.alert_message":"The cashflow transaction has been deleted successfully",
+  "cash_flow_transaction.label_transfer_from_account": "Transfer from account",
+  "cash_flow_transaction.label_transfer_to_account": "Transfer to account",
+  "cash_flow_transaction.label_current_account": "Current account",
+  "cash_flow_transaction.delete.alert_message": "The cashflow transaction has been deleted successfully",
   "cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it": "Once you delete this transaction, you won't be able to restore it later. Are you sure you want to delete this transaction?",
-  "cash_flow.auto_increment.auto":"Your transaction numbers are set on auto-increment mode. Are you sure changing this setting?",
-  "cash_flow.auto_increment.manually":"Yor transaction numbers are set on manual mode. Are you sure chaning this settings?",
-  "cash_flow.setting_your_auto_generated_transaction_number": "Setting your auto-generated transaction number"
-
-}
-
+  "cash_flow.auto_increment.auto": "Your transaction numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "cash_flow.auto_increment.manually": "Yor transaction numbers are set on manual mode. Are you sure chaning this settings?",
+  "cash_flow.setting_your_auto_generated_transaction_number": "Setting your auto-generated transaction number",
+  "cash_flow_drawer.label_transaction_type": "Transaction type",
+  "cash_flow.drawer.label_transaction_no": "Transaction number",
+  "cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
+  "cash_flow_there_is_deposit_withdrawal_transactions_on_the_current_account": "There is deposit/withdrawal transactions on the current account.",
+  "cash_flow_balance_in":"Balance in {name}",
+  "cash_flow_there_is_no_cashflow_accounts_with_current_filter_criteria:":"There is no cashflow accounts with current filter criteria.",
+  "cash_flow_money_in":"Money In",
+  "cash_flow_money_out":"Money Out"
 
+}
\ No newline at end of file
diff --git a/src/style/components/Drawers/CashflowTransactionDrawer.scss b/src/style/components/Drawers/CashflowTransactionDrawer.scss
new file mode 100644
index 000000000..3a074c0fe
--- /dev/null
+++ b/src/style/components/Drawers/CashflowTransactionDrawer.scss
@@ -0,0 +1,99 @@
+.cashflow-drawer {
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+  }
+
+  .card {
+    .amount {
+      font-size: 28px;
+      color: #c06361;
+      margin: 6px 0;
+      font-weight: 600;
+    }
+  }
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+
+    .thead,
+    .tbody {
+      .tr .td,
+      .tr .th {
+        &.credit,
+        &.debit {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &__content {
+    &-header {
+      margin-bottom: 35px;
+
+      .detail-item {
+        flex-grow: 1;
+
+        &--amount {
+          width: 20%;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .total-lines {
+        margin-left: auto;
+      }
+    }
+  }
+  .total-lines {
+    &__line {
+      display: flex;
+
+      > div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .credit,
+      .debit {
+        font-weight: 600;
+        width: 155px;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &--total {
+        border-bottom: 3px double #000;
+      }
+      &--subtotal,
+      &--total {
+        text-align: right;
+      }
+    }
+  }
+}