From 7dfa280bee47b4af1cd0b63f9ff71f865c385470 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 24 Oct 2021 17:34:00 +0200
Subject: [PATCH] feat: cashflow service.

---
 src/components/BankAccounts/index.js          |  6 +-
 src/components/IntersectionObserver/index.js  |  5 +-
 src/containers/Accounts/utils.js              |  2 -
 .../AccountTransactionsDataTable.js           | 37 +++++++-
 .../AccountTransactions/components.js         |  8 +-
 .../withCashflowAccounts.js                   | 15 +++
 .../withCashflowAccountsTableActions.js       | 15 +++
 .../CashFlowAccountsActionsBar.js             | 31 +++---
 .../CashFlowAccounts/CashFlowAccountsList.js  | 34 +++++--
 .../CashFlowAccountsProvider.js               |  7 +-
 .../CashFlowAccounts/CashflowAccountsGrid.js  | 94 ++++++++++++++++++-
 .../CashFlow/CashFlowAccounts/utils.js        | 11 +++
 .../CashflowAccounts.actions.js               | 21 +++++
 .../CashflowAccounts.reducer.js               | 31 ++++++
 .../CashflowAccounts.selectors.js             | 19 ++++
 .../CashflowAccounts.types.js                 |  5 +
 src/store/reducers.js                         |  2 +
 src/store/types.js                            |  2 +
 src/style/components/DataTable/DataTable.scss | 12 +--
 19 files changed, 307 insertions(+), 50 deletions(-)
 create mode 100644 src/containers/CashFlow/AccountTransactions/withCashflowAccounts.js
 create mode 100644 src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.js
 create mode 100644 src/containers/CashFlow/CashFlowAccounts/utils.js
 create mode 100644 src/store/CashflowAccounts/CashflowAccounts.actions.js
 create mode 100644 src/store/CashflowAccounts/CashflowAccounts.reducer.js
 create mode 100644 src/store/CashflowAccounts/CashflowAccounts.selectors.js
 create mode 100644 src/store/CashflowAccounts/CashflowAccounts.types.js

diff --git a/src/components/BankAccounts/index.js b/src/components/BankAccounts/index.js
index 13a3f928d..068456b3b 100644
--- a/src/components/BankAccounts/index.js
+++ b/src/components/BankAccounts/index.js
@@ -141,14 +141,14 @@ function BankAccountBalance({ amount, loading }) {
 
 const ACCOUNT_TYPE = {
   CASH: 'cash',
+  BANK: 'bank',
   CREDIT_CARD: 'credit-card',
-  BANK_ACCOUNT: 'bank-account',
 };
 
 const ACCOUNT_TYPE_PAIR_ICON = {
   [ACCOUNT_TYPE.CASH]: 'payments',
   [ACCOUNT_TYPE.CREDIT_CARD]: 'credit-card',
-  [ACCOUNT_TYPE.BANK_ACCOUNT]: 'account-balance',
+  [ACCOUNT_TYPE.BANK]: 'account-balance',
 };
 
 function BankAccountTypeIcon({ type }) {
@@ -159,7 +159,7 @@ function BankAccountTypeIcon({ type }) {
   }
   return (
     <AccountIconWrap>
-      <Icon icon={'credit-card'} iconSize={18} />
+      <Icon icon={icon} iconSize={18} />
     </AccountIconWrap>
   );
 }
diff --git a/src/components/IntersectionObserver/index.js b/src/components/IntersectionObserver/index.js
index df91bc9a6..c1f01cc2e 100644
--- a/src/components/IntersectionObserver/index.js
+++ b/src/components/IntersectionObserver/index.js
@@ -16,7 +16,10 @@ export function IntersectionObserver({ onIntersect }) {
   });
 
   return (
-    <div ref={loadMoreButtonRef} style={{ opacity: 0 }}>
+    <div
+      ref={loadMoreButtonRef}
+      style={{ opacity: 0, height: 0, width: 0, padding: 0, margin: 0 }}
+    >
       Load Newer
     </div>
   );
diff --git a/src/containers/Accounts/utils.js b/src/containers/Accounts/utils.js
index 0fa98ec84..926d99e69 100644
--- a/src/containers/Accounts/utils.js
+++ b/src/containers/Accounts/utils.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import { Intent, Tag } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import clsx from 'classnames';
 
-import { CLASSES } from '../../common/classes';
 import { If, AppToaster } from 'components';
 import { NormalCell, BalanceCell } from './components';
 import { transformTableStateToQuery, isBlank } from 'utils';
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
index 5b0f8e9aa..56e2a3d06 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { DataTable, TableFastCell } from 'components';
 import { TABLES } from 'common/tables';
@@ -36,14 +37,13 @@ function AccountTransactionsDataTable({
     useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
 
   return (
-    <DataTable
+    <CashflowTransactionsTable
       noInitialFetch={true}
       columns={columns}
       data={cashflowTransactions}
       sticky={true}
       loading={isCashFlowTransactionsLoading}
       headerLoading={isCashFlowTransactionsLoading}
-      progressBarLoading={isCashFlowTransactionsFetching}
       expandColumnSpace={1}
       expandToggleColumn={2}
       selectionColumnWidth={45}
@@ -54,11 +54,11 @@ function AccountTransactionsDataTable({
       // #TableVirtualizedListRows props.
       vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
       vListOverscanRowCount={0}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
-      size={cashflowTansactionsTableSize}
-      noResults={'There is deposit/withdrawal transactions on the current account.'}
+      noResults={
+        'There is deposit/withdrawal transactions on the current account.'
+      }
       className="table-constrant"
     />
   );
@@ -69,3 +69,30 @@ export default compose(
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
 )(AccountTransactionsDataTable);
+
+const DashboardConstrantTable = styled(DataTable)`
+  .table .thead {
+    .th {
+      border-bottom-color: #666;
+      border-top-color: #666;
+      background: #fff;
+    }
+  }
+`;
+
+const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+  .table .tbody {
+    
+    .tbody-inner .tr.no-results {
+      .td {
+        padding: 3rem 0;
+        font-size: 16px;
+        color: #888;
+        font-weight: 400;
+        border-bottom: 0;
+      }
+    }
+  }
+`;
+
+const DashboardRegularTable = styled(DataTable)``;
diff --git a/src/containers/CashFlow/AccountTransactions/components.js b/src/containers/CashFlow/AccountTransactions/components.js
index a08aa905c..2caa032ac 100644
--- a/src/containers/CashFlow/AccountTransactions/components.js
+++ b/src/containers/CashFlow/AccountTransactions/components.js
@@ -47,7 +47,7 @@ export function useAccountTransactionsColumns() {
         width: 110,
         className: 'deposit',
         textOverview: true,
-        align: 'right'
+        align: 'right',
       },
       {
         id: 'withdrawal',
@@ -65,7 +65,7 @@ export function useAccountTransactionsColumns() {
         className: 'running_balance',
         width: 150,
         textOverview: true,
-        align: 'right'
+        align: 'right',
       },
     ],
     [],
@@ -76,7 +76,7 @@ export function useAccountTransactionsColumns() {
  * Account transactions progress bar.
  */
 export function AccountTransactionsProgressBar() {
-  const { isCashFlowTransactionsLoading } = useAccountTransactionsContext();
+  const { isCashFlowTransactionsFetching } = useAccountTransactionsContext();
 
-  return isCashFlowTransactionsLoading ? <MaterialProgressBar /> : null;
+  return isCashFlowTransactionsFetching ? <MaterialProgressBar /> : null;
 }
diff --git a/src/containers/CashFlow/AccountTransactions/withCashflowAccounts.js b/src/containers/CashFlow/AccountTransactions/withCashflowAccounts.js
new file mode 100644
index 000000000..df4d74c34
--- /dev/null
+++ b/src/containers/CashFlow/AccountTransactions/withCashflowAccounts.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { getCashflowAccountsTableStateFactory } from 'store/CashflowAccounts/CashflowAccounts.selectors';
+
+export default (mapState) => {
+  const getCashflowAccountsTableState = getCashflowAccountsTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      cashflowAccountsTableState: getCashflowAccountsTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};
diff --git a/src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.js b/src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.js
new file mode 100644
index 000000000..c9770b367
--- /dev/null
+++ b/src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import {
+  setCashflowAccountsTableState,
+  resetCashflowAccountsTableState,
+} from 'store/CashflowAccounts/CashflowAccounts.actions';
+
+const mapActionsToProps = (dispatch) => ({
+  setCashflowAccountsTableState: (queries) =>
+    dispatch(setCashflowAccountsTableState(queries)),
+
+  resetCashflowAccountsTableState: () =>
+    dispatch(resetCashflowAccountsTableState()),
+});
+
+export default connect(null, mapActionsToProps);
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js
index d250f7257..fbbb906fe 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js
@@ -1,26 +1,22 @@
 import React from 'react';
-import classNames from 'classnames';
-
-import { isEmpty } from 'lodash';
 import {
   Button,
   NavbarGroup,
   Classes,
   NavbarDivider,
   Alignment,
+  Switch,
 } from '@blueprintjs/core';
-
 import {
   Icon,
-  DashboardRowsHeightButton,
   FormattedMessage as T,
 } from 'components';
-
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { useCashFlowAccountsContext } from './CashFlowAccountsProvider';
+
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from '../../Settings/withSettings';
 import withSettingsActions from '../../Settings/withSettingsActions';
+import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
 
 import { compose } from 'utils';
 
@@ -36,12 +32,14 @@ function CashFlowAccountsActionsBar({
 
   // #withSettingsActions
   addSetting,
+
+  // #
+  setCashflowAccountsTableState
 }) {
   // Handle table row size change.
   const handleTableRowSizeChange = (size) => {
     addSetting('cashflowAccounts', 'tableSize', size);
   };
-
   // Handle click a refresh
   const handleRefreshBtnClick = () => {};
 
@@ -49,18 +47,21 @@ function CashFlowAccountsActionsBar({
   const handleAddBankAccount = () => {
     openDialog('account-form', {});
   };
-
   // Handle add cash account.
   const handleAddCashAccount = () => {
     openDialog('account-form', {});
   };
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setCashflowAccountsTableState({ inactiveMode: checked });
+  };
 
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <Button
           className={Classes.MINIMAL}
-          // className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon={'plus-24'} iconSize={20} />}
           text={<T id={'cash_flow.label.add_cash_account'} />}
           onClick={handleAddBankAccount}
@@ -88,11 +89,12 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-        <DashboardRowsHeightButton
-          initialValue={cashflowTableSize}
-          onChange={handleTableRowSizeChange}
+        
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={false}
+          onChange={handleInactiveSwitchChange}
         />
-        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -110,4 +112,5 @@ export default compose(
   withSettings(({ cashflowSettings }) => ({
     cashflowTableSize: cashflowSettings?.tableSize,
   })),
+  withCashflowAccountsTableActions,
 )(CashFlowAccountsActionsBar);
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js
index bc8afe880..cf395bfc8 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.js
@@ -1,20 +1,37 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { compose } from 'lodash/fp';
 
 import 'style/pages/CashFlow/CashFlowAccounts/List.scss';
 
 import { DashboardPageContent } from 'components';
-
 import { CashFlowAccountsProvider } from './CashFlowAccountsProvider';
 
 import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar';
 import CashflowAccountsGrid from './CashflowAccountsGrid';
 
+import withCashflowAccounts from '../AccountTransactions/withCashflowAccounts';
+import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
+
 /**
- * Cash flow accounts list.
+ * Cashflow accounts list.
  */
-function CashFlowAccountsList({}) {
+function CashFlowAccountsList({
+  // #withCashflowAccounts
+  cashflowAccountsTableState,
+
+  // #withCashflowAccountsTableActions
+  resetCashflowAccountsTableState,
+}) {
+  // Resets the cashflow accounts table state.
+  useEffect(
+    () => () => {
+      resetCashflowAccountsTableState();
+    },
+    [resetCashflowAccountsTableState],
+  );
+
   return (
-    <CashFlowAccountsProvider>
+    <CashFlowAccountsProvider tableState={cashflowAccountsTableState}>
       <CashFlowAccountsActionsBar />
 
       <DashboardPageContent>
@@ -24,4 +41,9 @@ function CashFlowAccountsList({}) {
   );
 }
 
-export default CashFlowAccountsList;
+export default compose(
+  withCashflowAccounts(({ cashflowAccountsTableState }) => ({
+    cashflowAccountsTableState,
+  })),
+  withCashflowAccountsTableActions,
+)(CashFlowAccountsList);
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsProvider.js b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsProvider.js
index 1b33985a4..5f94890b3 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsProvider.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsProvider.js
@@ -3,12 +3,16 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import { useCashflowAccounts } from 'hooks/query';
 
+import { transformAccountsStateToQuery } from './utils';
+
 const CashFlowAccountsContext = React.createContext();
 
 /**
  * Cash Flow data provider.
  */
-function CashFlowAccountsProvider({ query, tableStateChanged, ...props }) {
+function CashFlowAccountsProvider({ tableState, ...props }) {
+  const query = transformAccountsStateToQuery(tableState);
+
   // Fetch cash flow list .
   const {
     data: cashflowAccounts,
@@ -32,4 +36,5 @@ function CashFlowAccountsProvider({ query, tableStateChanged, ...props }) {
 
 const useCashFlowAccountsContext = () =>
   React.useContext(CashFlowAccountsContext);
+
 export { CashFlowAccountsProvider, useCashFlowAccountsContext };
diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
index 6f8271b92..cda25bba7 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
+++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { isNull } from 'lodash';
-import { compose } from 'lodash/fp';
+import { isNull, isEmpty } from 'lodash';
+import { compose, curry } from 'lodash/fp';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
@@ -23,6 +23,7 @@ import withAlertsActions from '../../Alert/withAlertActions';
 import withDialogActions from '../../Dialog/withDialogActions';
 
 import { safeCallback } from 'utils';
+import { addMoneyIn, addMoneyOut } from 'common/cashflowOptions';
 
 const CASHFLOW_SKELETON_N = 4;
 
@@ -91,6 +92,20 @@ function CashflowBankAccount({
   const handleEditAccount = () => {
     openDialog('account-form', { action: 'edit', id: account.id });
   };
+  // Handle money in menu item actions.
+  const handleMoneyInClick = (transactionType) => {
+    openDialog('money-in', {
+      account_type: transactionType,
+      account_id: account.id,
+    });
+  };
+  // Handle money out menu item actions.
+  const handleMoneyOutClick = (transactionType) => {
+    openDialog('money-out', {
+      account_type: transactionType,
+      account_id: account.id,
+    });
+  };
 
   return (
     <CashflowBankAccountWrap>
@@ -102,7 +117,7 @@ function CashflowBankAccount({
           title={account.name}
           code={account.code}
           balance={!isNull(account.amount) ? account.formatted_amount : '-'}
-          type={'cash'}
+          type={account.account_type}
           updatedBeforeText={getUpdatedBeforeText(account.createdAt)}
         />
       </CashflowAccountAnchor>
@@ -119,6 +134,8 @@ function CashflowBankAccount({
           onActivateClick={handleActivateClick}
           onInactivateClick={handleInactivateClick}
           onEditClick={handleEditAccount}
+          onMoneyInClick={handleMoneyInClick}
+          onMoneyOutClick={handleMoneyOutClick}
         />
       </ContextMenu>
     </CashflowBankAccountWrap>
@@ -144,6 +161,19 @@ function CashflowAccountsGridItems({ accounts }) {
   ));
 }
 
+/**
+ * Cashflow accounts empty state.
+ */
+function CashflowAccountsEmptyState() {
+  return (
+    <AccountsEmptyStateBase>
+      <AccountsEmptyStateTitle>
+        There is no cashflow accounts with current filter criteria.
+      </AccountsEmptyStateTitle>
+    </AccountsEmptyStateBase>
+  );
+}
+
 /**
  * Cashflow accounts grid.
  */
@@ -157,6 +187,8 @@ export default function CashflowAccountsGrid() {
       <BankAccountsList>
         {isCashFlowAccountsLoading ? (
           <CashflowAccountsSkeleton />
+        ) : isEmpty(cashflowAccounts) ? (
+          <CashflowAccountsEmptyState />
         ) : (
           <CashflowAccountsGridItems accounts={cashflowAccounts} />
         )}
@@ -167,6 +199,32 @@ export default function CashflowAccountsGrid() {
   );
 }
 
+/**
+ * Cashflow account money out context menu.
+ */
+function CashflowAccountMoneyInContextMenu({ onClick }) {
+  const handleItemClick = curry((transactionType, event) => {
+    onClick && onClick(transactionType, event);
+  });
+
+  return addMoneyIn.map((option) => (
+    <MenuItem text={option.name} onClick={handleItemClick(option.value)} />
+  ));
+}
+
+/**
+ * Cashflow account money in context menu.
+ */
+function CashflowAccountMoneyOutContextMenu({ onClick }) {
+  const handleItemClick = curry((transactionType, event) => {
+    onClick && onClick(transactionType, event);
+  });
+
+  return addMoneyOut.map((option) => (
+    <MenuItem text={option.name} onClick={handleItemClick(option.value)} />
+  ));
+}
+
 /**
  * Cashflow account context menu.
  */
@@ -176,6 +234,8 @@ function CashflowAccountContextMenu({
   onInactivateClick,
   onActivateClick,
   onDeleteClick,
+  onMoneyInClick,
+  onMoneyOutClick,
 }) {
   return (
     <Menu>
@@ -185,6 +245,21 @@ function CashflowAccountContextMenu({
         onClick={safeCallback(onViewClick)}
       />
       <MenuDivider />
+      <MenuItem
+        text={'Money In'}
+        icon={<Icon icon={'arrow-downward'} iconSize={16} />}
+      >
+        <CashflowAccountMoneyInContextMenu onClick={onMoneyInClick} />
+      </MenuItem>
+
+      <MenuItem
+        text={'Money Out'}
+        icon={<Icon icon={'arrow-upward'} iconSize={16} />}
+      >
+        <CashflowAccountMoneyOutContextMenu onClick={onMoneyOutClick} />
+      </MenuItem>
+      <MenuDivider />
+
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={intl.get('edit_account')}
@@ -230,3 +305,16 @@ const CashflowAccountsGridWrap = styled.div`
 `;
 
 const CashflowBankAccountWrap = styled.div``;
+
+const AccountsEmptyStateBase = styled.div`
+  flex: 1;
+  text-align: center;
+  margin: 2rem 0;
+`;
+const AccountsEmptyStateTitle = styled.h1`
+  font-size: 16px;
+  color: #626b76;
+  opacity: 0.8;
+  line-height: 1.6;
+  font-weight: 500;
+`;
diff --git a/src/containers/CashFlow/CashFlowAccounts/utils.js b/src/containers/CashFlow/CashFlowAccounts/utils.js
new file mode 100644
index 000000000..a1e36b928
--- /dev/null
+++ b/src/containers/CashFlow/CashFlowAccounts/utils.js
@@ -0,0 +1,11 @@
+import { transformTableStateToQuery } from 'utils';
+
+/**
+ * Transformes the table state to list query.
+ */
+ export const transformAccountsStateToQuery = (tableState) => {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode,
+  }
+}
\ No newline at end of file
diff --git a/src/store/CashflowAccounts/CashflowAccounts.actions.js b/src/store/CashflowAccounts/CashflowAccounts.actions.js
new file mode 100644
index 000000000..2b9ba0900
--- /dev/null
+++ b/src/store/CashflowAccounts/CashflowAccounts.actions.js
@@ -0,0 +1,21 @@
+import t from 'store/types';
+
+/**
+ * Sets the cashflow accounts table state.
+ */
+export const setCashflowAccountsTableState = (queries) => {
+  return {
+    type: t.CASHFLOW_ACCOUNTS_TABLE_STATE_SET,
+    payload: { queries },
+  };
+};
+
+/**
+ * Resets the cashflow accounts table state.
+ */
+export const resetCashflowAccountsTableState = () => {
+  return {
+    type: t.CASHFLOW_ACCOUNTS_TABLE_STATE_RESET,
+  };
+};
+ 
\ No newline at end of file
diff --git a/src/store/CashflowAccounts/CashflowAccounts.reducer.js b/src/store/CashflowAccounts/CashflowAccounts.reducer.js
new file mode 100644
index 000000000..7a67c59ce
--- /dev/null
+++ b/src/store/CashflowAccounts/CashflowAccounts.reducer.js
@@ -0,0 +1,31 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { persistReducer, purgeStoredState } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { createTableStateReducers } from 'store/tableState.reducer';
+import t from 'store/types';
+
+export const defaultTableQuery = {
+  filterRoles: [],
+};
+
+const initialState = {
+  tableState: defaultTableQuery,
+};
+
+const STORAGE_KEY = 'bigcapital:cashflow_accounts';
+
+const CONFIG = {
+  key: STORAGE_KEY,
+  whitelist: [],
+  storage,
+};
+
+const reducerInstance = createReducer(initialState, {
+  ...createTableStateReducers('CASHFLOW_ACCOUNTS', defaultTableQuery),
+
+  [t.RESET]: () => {
+    purgeStoredState(CONFIG);
+  },
+});
+
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/src/store/CashflowAccounts/CashflowAccounts.selectors.js b/src/store/CashflowAccounts/CashflowAccounts.selectors.js
new file mode 100644
index 000000000..89b24a024
--- /dev/null
+++ b/src/store/CashflowAccounts/CashflowAccounts.selectors.js
@@ -0,0 +1,19 @@
+import { paginationLocationQuery } from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+
+// Accounts table state selector
+const cashflowAccountsTableStateSelector = (state, props) =>
+  state.cashflowAccounts.tableState;
+
+// Get accounts table state marged with location query.
+export const getCashflowAccountsTableStateFactory = () =>
+  createDeepEqualSelector(
+    paginationLocationQuery,
+    cashflowAccountsTableStateSelector,
+    (locationQuery, tableState) => {
+      return {
+        ...locationQuery,
+        ...tableState,
+      };
+    },
+  );
diff --git a/src/store/CashflowAccounts/CashflowAccounts.types.js b/src/store/CashflowAccounts/CashflowAccounts.types.js
new file mode 100644
index 000000000..38abc5e2d
--- /dev/null
+++ b/src/store/CashflowAccounts/CashflowAccounts.types.js
@@ -0,0 +1,5 @@
+
+export default {
+  CASHFLOW_ACCOUNTS_TABLE_STATE_SET: 'CASHFLOW_ACCOUNTS/TABLE_STATE_SET',
+  CASHFLOW_ACCOUNTS_TABLE_STATE_RESET: 'CASHFLOW_ACCOUNTS/TABLE_STATE_RESET',
+};
\ No newline at end of file
diff --git a/src/store/reducers.js b/src/store/reducers.js
index a72b69ea8..db31ab4db 100644
--- a/src/store/reducers.js
+++ b/src/store/reducers.js
@@ -6,6 +6,7 @@ import authentication from './authentication/authentication.reducer';
 import dashboard from './dashboard/dashboard.reducer';
 import users from './users/users.reducer';
 import accounts from './accounts/accounts.reducer';
+import cashflowAccounts from './CashflowAccounts/CashflowAccounts.reducer';
 import fields from './customFields/customFields.reducer';
 import items from './items/items.reducer';
 import views from './customViews/customViews.reducer';
@@ -39,6 +40,7 @@ const appReducer = combineReducers({
   dashboard,
   users,
   accounts,
+  cashflowAccounts,
   manualJournals,
   fields,
   views,
diff --git a/src/store/types.js b/src/store/types.js
index b2d4d0ef8..b79f0d1ba 100644
--- a/src/store/types.js
+++ b/src/store/types.js
@@ -1,5 +1,6 @@
 import authentication from './authentication/authentication.types';
 import accounts from './accounts/accounts.types';
+import cashflowAccounts from './CashflowAccounts/CashflowAccounts.types';
 import accounting from './manualJournals/manualJournals.types';
 import currencies from './currencies/currencies.types';
 import customFields from './customFields/customFields.types';
@@ -32,6 +33,7 @@ import plans from './plans/plans.types';
 export default {
   ...authentication,
   ...accounts,
+  ...cashflowAccounts,
   ...currencies,
   ...customFields,
   ...customViews,
diff --git a/src/style/components/DataTable/DataTable.scss b/src/style/components/DataTable/DataTable.scss
index a62a54dbe..1eb7c15f9 100644
--- a/src/style/components/DataTable/DataTable.scss
+++ b/src/style/components/DataTable/DataTable.scss
@@ -3,14 +3,6 @@
 .bigcapital-datatable {
   display: block;
 
-  .dashboard__page-content & {
-    .table .thead {
-      .th {
-        border-bottom-color: #d2dde2;
-      }
-    }
-  }
-
   .table {
     text-align: left;
     border-spacing: 0;
@@ -19,8 +11,6 @@
 
     .thead {
       overflow: hidden;
-      // overflow-y: auto;
-      // overflow-x: hidden;
 
       .th {
         padding: 0.7rem 0.5rem;
@@ -28,7 +18,7 @@
         font-size: 14px;
         color: #3b495d;
         font-weight: 600;
-        border-bottom: 1px solid rgb(224, 224, 224);
+        border-bottom: 1px solid #d2dde2;
 
         >div {
           overflow: hidden;