re-structure to monorepo.

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx

@@ -0,0 +1,135 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import {
+  Button,
+  NavbarGroup,
+  Classes,
+  NavbarDivider,
+  Alignment,
+} from '@blueprintjs/core';
+import {
+  Icon,
+  DashboardActionsBar,
+  DashboardRowsHeightButton,
+  FormattedMessage as T,
+} from '@/components';
+
+import { CashFlowMenuItems } from './utils';
+import {
+  getAddMoneyOutOptions,
+  getAddMoneyInOptions,
+} from '@/constants/cashflowOptions';
+import { useRefreshCashflowTransactionsInfinity } from '@/hooks/query';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withSettingsActions from '@/containers/Settings/withSettingsActions';
+
+import { compose } from '@/utils';
+
+function AccountTransactionsActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  cashflowTansactionsTableSize,
+
+  // #withSettingsActions
+  addSetting,
+}) {
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('cashflowTransactions', 'tableSize', size);
+  };
+  const { accountId } = useAccountTransactionsContext();
+
+  // Retrieves the money in/out buttons options.
+  const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
+  const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
+
+  // Handle money in form
+  const handleMoneyInFormTransaction = (account) => {
+    openDialog('money-in', {
+      account_id: accountId,
+      account_type: account.value,
+      account_name: account.name,
+    });
+  };
+  // Handle money out form
+  const handlMoneyOutFormTransaction = (account) => {
+    openDialog('money-out', {
+      account_id: accountId,
+      account_type: account.value,
+      account_name: account.name,
+    });
+  };
+  // Refresh cashflow infinity transactions hook.
+  const { refresh } = useRefreshCashflowTransactionsInfinity();
+
+  // Handle the refresh button click.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <CashFlowMenuItems
+          items={addMoneyInOptions}
+          onItemSelect={handleMoneyInFormTransaction}
+          text={<T id={'cash_flow.label.add_money_in'} />}
+          buttonProps={{
+            icon: <Icon icon={'arrow-downward'} iconSize={20} />,
+          }}
+        />
+        <CashFlowMenuItems
+          items={addMoneyOutOptions}
+          onItemSelect={handlMoneyOutFormTransaction}
+          text={<T id={'cash_flow.label.add_money_out'} />}
+          buttonProps={{
+            icon: <Icon icon={'arrow-upward'} iconSize={20} />,
+          }}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={cashflowTansactionsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+)(AccountTransactionsActionsBar);

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+
+const AccountDeleteTransactionAlert = React.lazy(
+  () => import('@/containers/Alerts/CashFlow/AccountDeleteTransactionAlert'),
+);
+
+/**
+ * Account transaction alert.
+ */
+export default [
+  {
+    name: 'account-transaction-delete',
+    component: AccountDeleteTransactionAlert,
+  },
+];

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx

@@ -0,0 +1,139 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  DataTable,
+  TableFastCell,
+  TableSkeletonRows,
+  TableSkeletonHeader,
+  TableVirtualizedListRows,
+  FormattedMessage as T,
+} from '@/components';
+import { TABLES } from '@/constants/tables';
+
+import withSettings from '@/containers/Settings/withSettings';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { useMemorizedColumnsWidths } from '@/hooks';
+import { useAccountTransactionsColumns, ActionsMenu } from './components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { handleCashFlowTransactionType } from './utils';
+
+import { compose } from '@/utils';
+
+/**
+ * Account transactions data table.
+ */
+function AccountTransactionsDataTable({
+  // #withSettings
+  cashflowTansactionsTableSize,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  // Retrieve table columns.
+  const columns = useAccountTransactionsColumns();
+
+  // Retrieve list context.
+  const { cashflowTransactions, isCashFlowTransactionsLoading } =
+    useAccountTransactionsContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
+
+  // handle delete transaction
+  const handleDeleteTransaction = ({ reference_id }) => {
+    openAlert('account-transaction-delete', { referenceId: reference_id });
+  };
+
+  const handleViewDetailCashflowTransaction = (referenceType) => {
+    handleCashFlowTransactionType(referenceType, openDrawer);
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    const referenceType = cell.row.original;
+    handleCashFlowTransactionType(referenceType, openDrawer);
+  };
+
+  return (
+    <CashflowTransactionsTable
+      noInitialFetch={true}
+      columns={columns}
+      data={cashflowTransactions}
+      sticky={true}
+      loading={isCashFlowTransactionsLoading}
+      headerLoading={isCashFlowTransactionsLoading}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={45}
+      TableCellRenderer={TableFastCell}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
+      // #TableVirtualizedListRows props.
+      vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
+      vListOverscanRowCount={0}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      noResults={<T id={'cash_flow.account_transactions.no_results'} />}
+      className="table-constrant"
+      payload={{
+        onViewDetails: handleViewDetailCashflowTransaction,
+        onDelete: handleDeleteTransaction,
+      }}
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+  withAlertsActions,
+  withDrawerActions,
+)(AccountTransactionsDataTable);
+
+const DashboardConstrantTable = styled(DataTable)`
+  .table {
+    .thead {
+      .th {
+        background: #fff;
+      }
+    }
+
+    .tbody {
+      .tr:last-child .td {
+        border-bottom: 0;
+      }
+    }
+  }
+`;
+
+const CashflowTransactionsTable = styled(DashboardConstrantTable)`
+  .table .tbody {
+    .tbody-inner .tr.no-results {
+      .td {
+        padding: 2rem 0;
+        font-size: 14px;
+        color: #888;
+        font-weight: 400;
+        border-bottom: 0;
+      }
+    }
+
+    .tbody-inner {
+      .tr .td:not(:first-child) {
+        border-left: 1px solid #e6e6e6;
+      }
+    }
+  }
+`;

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx

@@ -0,0 +1,184 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import {
+  Popover,
+  Menu,
+  Position,
+  Button,
+  MenuItem,
+  Classes,
+} from '@blueprintjs/core';
+import { Icon } from '@/components';
+import { useHistory } from 'react-router-dom';
+import { curry } from 'lodash/fp';
+
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+function AccountSwitchButton() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  return (
+    <AccountSwitchButtonBase
+      minimal={true}
+      rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
+    >
+      <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
+    </AccountSwitchButtonBase>
+  );
+}
+
+function AccountSwitchItem() {
+  const { push } = useHistory();
+  const { cashflowAccounts, accountId } = useAccountTransactionsContext();
+
+  // Handle item click.
+  const handleItemClick = curry((account, event) => {
+    push(`/cashflow-accounts/${account.id}/transactions`);
+  });
+
+  const items = cashflowAccounts.map((account) => (
+    <AccountSwitchMenuItem
+      name={account.name}
+      balance={account.formatted_amount}
+      onClick={handleItemClick(account)}
+      active={account.id === accountId}
+    />
+  ));
+
+  return (
+    <Popover
+      content={<Menu>{items}</Menu>}
+      position={Position.BOTTOM_LEFT}
+      minimal={true}
+    >
+      <AccountSwitchButton />
+    </Popover>
+  );
+}
+
+function AccountBalanceItem() {
+  const { currentAccount } = useAccountTransactionsContext();
+
+  return (
+    <AccountBalanceItemWrap>
+      {intl.get('cash_flow_transaction.balance_in_bigcapital')} {''}
+      <AccountBalanceAmount>
+        {currentAccount.formatted_amount}
+      </AccountBalanceAmount>
+    </AccountBalanceItemWrap>
+  );
+}
+
+function AccountTransactionsDetailsBarSkeleton() {
+  return (
+    <React.Fragment>
+      <DetailsBarSkeletonBase className={Classes.SKELETON}>
+        X
+      </DetailsBarSkeletonBase>
+      <DetailsBarSkeletonBase className={Classes.SKELETON}>
+        X
+      </DetailsBarSkeletonBase>
+    </React.Fragment>
+  );
+}
+
+function AccountTransactionsDetailsContent() {
+  return (
+    <React.Fragment>
+      <AccountSwitchItem />
+      <AccountBalanceItem />
+    </React.Fragment>
+  );
+}
+
+export function AccountTransactionsDetailsBar() {
+  const { isCurrentAccountLoading } = useAccountTransactionsContext();
+
+  return (
+    <AccountTransactionDetailsWrap>
+      {isCurrentAccountLoading ? (
+        <AccountTransactionsDetailsBarSkeleton />
+      ) : (
+        <AccountTransactionsDetailsContent />
+      )}
+    </AccountTransactionDetailsWrap>
+  );
+}
+
+function AccountSwitchMenuItem({
+  name,
+  balance,
+  transactionsNumber,
+  ...restProps
+}) {
+  return (
+    <MenuItem
+      label={balance}
+      text={
+        <React.Fragment>
+          <AccountSwitchItemName>{name}</AccountSwitchItemName>
+          <AccountSwitchItemTranscations>
+            {intl.get('cash_flow_transaction.switch_item', { value: '25' })}
+          </AccountSwitchItemTranscations>
+
+          <AccountSwitchItemUpdatedAt></AccountSwitchItemUpdatedAt>
+        </React.Fragment>
+      }
+      {...restProps}
+    />
+  );
+}
+
+const DetailsBarSkeletonBase = styled.div`
+  letter-spacing: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 8px;
+  width: 140px;
+`;
+
+const AccountBalanceItemWrap = styled.div`
+  margin-left: 18px;
+  color: #5f6d86;
+`;
+
+const AccountTransactionDetailsWrap = styled.div`
+  display: flex;
+  background: #fff;
+  border-bottom: 1px solid #d2dce2;
+  padding: 0 22px;
+  height: 42px;
+  align-items: center;
+`;
+const AccountSwitchText = styled.div`
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+const AccountBalanceAmount = styled.span`
+  font-weight: 600;
+  display: inline-block;
+  color: rgb(31, 50, 85);
+  margin-left: 10px;
+`;
+
+const AccountSwitchItemName = styled.div`
+  font-weight: 600;
+`;
+const AccountSwitchItemTranscations = styled.div`
+  font-size: 12px;
+  opacity: 0.7;
+`;
+
+const AccountSwitchItemUpdatedAt = styled.div`
+  font-size: 12px;
+  opacity: 0.5;
+`;
+
+const AccountSwitchButtonBase = styled(Button)`
+  .bp3-button-text {
+    margin-right: 5px;
+  }
+`;

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import '@/style/pages/CashFlow/AccountTransactions/List.scss';
+
+import { DashboardPageContent } from '@/components';
+
+import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
+import AccountTransactionsDataTable from './AccountTransactionsDataTable';
+import { AccountTransactionsProvider } from './AccountTransactionsProvider';
+import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
+import { AccountTransactionsProgressBar } from './components';
+
+/**
+ * Account transactions list.
+ */
+function AccountTransactionsList() {
+  return (
+    <AccountTransactionsProvider>
+      <AccountTransactionsActionsBar />
+      <AccountTransactionsDetailsBar />
+      <AccountTransactionsProgressBar />
+
+      <DashboardPageContent>
+        <CashflowTransactionsTableCard>
+          <AccountTransactionsDataTable />
+        </CashflowTransactionsTableCard>
+      </DashboardPageContent>
+    </AccountTransactionsProvider>
+  );
+}
+
+export default AccountTransactionsList;
+
+const CashflowTransactionsTableCard = styled.div`
+  border: 2px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 30px 18px;
+  margin: 30px 15px;
+  background: #fff;
+  flex: 0 1;
+`;

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx

@@ -0,0 +1,97 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { flatten, map } from 'lodash';
+import { IntersectionObserver, DashboardInsider } from '@/components';
+import {
+  useAccountTransactionsInfinity,
+  useCashflowAccounts,
+  useAccount,
+} from '@/hooks/query';
+
+const AccountTransactionsContext = React.createContext();
+
+function flattenInfinityPages(data) {
+  return flatten(map(data.pages, (page) => page.transactions));
+}
+
+/**
+ * Account transctions provider.
+ */
+function AccountTransactionsProvider({ query, ...props }) {
+  const { id } = useParams();
+  const accountId = parseInt(id, 10);
+
+  // Fetch cashflow account transactions list
+  const {
+    data: cashflowTransactionsPages,
+    isFetching: isCashFlowTransactionsFetching,
+    isLoading: isCashFlowTransactionsLoading,
+    isSuccess: isCashflowTransactionsSuccess,
+    fetchNextPage: fetchNextTransactionsPage,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useAccountTransactionsInfinity(accountId, {
+    page_size: 50,
+    account_id: accountId,
+  });
+
+  // Memorized the cashflow account transactions.
+  const cashflowTransactions = React.useMemo(
+    () =>
+      isCashflowTransactionsSuccess
+        ? flattenInfinityPages(cashflowTransactionsPages)
+        : [],
+    [cashflowTransactionsPages, isCashflowTransactionsSuccess],
+  );
+
+  // Fetch cashflow accounts.
+  const {
+    data: cashflowAccounts,
+    isFetching: isCashFlowAccountsFetching,
+    isLoading: isCashFlowAccountsLoading,
+  } = useCashflowAccounts(query, { keepPreviousData: true });
+
+  // Retrieve specific account details.
+  const {
+    data: currentAccount,
+    isFetching: isCurrentAccountFetching,
+    isLoading: isCurrentAccountLoading,
+  } = useAccount(accountId, { keepPreviousData: true });
+
+  // Handle the observer ineraction.
+  const handleObserverInteract = React.useCallback(() => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextTransactionsPage();
+    }
+  }, [isFetchingNextPage, hasNextPage, fetchNextTransactionsPage]);
+
+  // Provider payload.
+  const provider = {
+    accountId,
+    cashflowTransactions,
+    cashflowAccounts,
+    currentAccount,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+    isCashFlowAccountsFetching,
+    isCashFlowAccountsLoading,
+    isCurrentAccountFetching,
+    isCurrentAccountLoading,
+  };
+
+  return (
+    <DashboardInsider name={'account-transactions'}>
+      <AccountTransactionsContext.Provider value={provider} {...props} />
+      <IntersectionObserver
+        onIntersect={handleObserverInteract}
+        enabled={!isFetchingNextPage}
+      />
+    </DashboardInsider>
+  );
+}
+
+const useAccountTransactionsContext = () =>
+  React.useContext(AccountTransactionsContext);
+
+export { AccountTransactionsProvider, useAccountTransactionsContext };

packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx

@@ -0,0 +1,137 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import {
+  Can,
+  FormatDateCell,
+  If,
+  Icon,
+  MaterialProgressBar,
+} from '@/components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { TRANSACRIONS_TYPE } from '@/constants/cashflowOptions';
+import { AbilitySubject, CashflowAction } from '@/constants/abilityOption';
+import { safeCallback } from '@/utils';
+
+export function ActionsMenu({
+  payload: { onDelete, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
+        <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} />}
+          />
+        </If>
+      </Can>
+    </Menu>
+  );
+}
+/**
+ * Retrieve account transctions table columns.
+ */
+export function useAccountTransactionsColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'type',
+        Header: intl.get('type'),
+        accessor: 'formatted_transaction_type',
+        className: 'type',
+        width: 140,
+        textOverview: true,
+        clickable: true,
+      },
+      {
+        id: 'transaction_number',
+        Header: intl.get('transaction_number'),
+        accessor: 'transaction_number',
+        width: 160,
+        className: 'transaction_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 160,
+        className: 'reference_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'deposit',
+        Header: intl.get('cash_flow.label.deposit'),
+        accessor: 'formatted_deposit',
+        width: 110,
+        className: 'deposit',
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'withdrawal',
+        Header: intl.get('cash_flow.label.withdrawal'),
+        accessor: 'formatted_withdrawal',
+        className: 'withdrawal',
+        width: 150,
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'running_balance',
+        Header: intl.get('cash_flow.label.running_balance'),
+        accessor: 'formatted_running_balance',
+        className: 'running_balance',
+        width: 150,
+        textOverview: true,
+        align: 'right',
+        clickable: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('balance'),
+        accessor: 'formatted_balance',
+        className: 'balance',
+        width: 150,
+        textOverview: true,
+        clickable: true,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}
+
+/**
+ * Account transactions progress bar.
+ */
+export function AccountTransactionsProgressBar() {
+  const { isCashFlowTransactionsFetching } = useAccountTransactionsContext();
+
+  return isCashFlowTransactionsFetching ? <MaterialProgressBar /> : null;
+}

packages/webapp/src/containers/CashFlow/AccountTransactions/utils.tsx

@@ -0,0 +1,93 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Button,
+  PopoverInteractionKind,
+  MenuItem,
+  Position,
+} from '@blueprintjs/core';
+
+import { Select } from '@blueprintjs/select';
+import { Icon } from '@/components';
+
+export const CashFlowMenuItems = ({
+  text,
+  items,
+  onItemSelect,
+  buttonProps,
+}) => {
+  // Menu items renderer.
+  const itemsRenderer = (item, { handleClick, modifiers, query }) => (
+    <MenuItem text={item.name} label={item.label} onClick={handleClick} />
+  );
+
+  const handleCashFlowMenuSelect = (type) => {
+    onItemSelect && onItemSelect(type);
+  };
+
+  return (
+    <Select
+      items={items}
+      itemRenderer={itemsRenderer}
+      onItemSelect={handleCashFlowMenuSelect}
+      popoverProps={{
+        minimal: true,
+        position: Position.BOTTOM_LEFT,
+        interactionKind: PopoverInteractionKind.CLICK,
+        modifiers: {
+          offset: { offset: '0, 4' },
+        },
+      }}
+      filterable={false}
+    >
+      <Button
+        text={text}
+        icon={<Icon icon={'plus-24'} iconSize={20} />}
+        minimal={true}
+        {...buttonProps}
+      />
+    </Select>
+  );
+};
+
+export const handleCashFlowTransactionType = (reference, openDrawer) => {
+  switch (reference.reference_type) {
+    case 'SaleReceipt':
+      return openDrawer('receipt-detail-drawer', {
+        receiptId: reference.reference_id,
+      });
+    case 'Journal':
+      return openDrawer('journal-drawer', {
+        manualJournalId: reference.reference_id,
+      });
+    case 'Expense':
+      return openDrawer('expense-drawer', {
+        expenseId: reference.reference_id,
+      });
+    case 'PaymentReceive':
+      return openDrawer('payment-receive-detail-drawer', {
+        paymentReceiveId: reference.reference_id,
+      });
+    case 'BillPayment':
+      return openDrawer('payment-made-detail-drawer', {
+        paymentMadeId: reference.reference_id,
+      });
+    case 'RefundCreditNote':
+      return openDrawer('refund-credit-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
+    case 'RefundVendorCredit':
+      return openDrawer('refund-vendor-detail-drawer', {
+        refundTransactionId: reference.reference_id,
+      });
+    case 'InventoryAdjustment':
+      return openDrawer('inventory-adjustment-drawer', {
+        inventoryId: reference.reference_id,
+      });
+
+    default:
+      return openDrawer('cashflow-transaction-drawer', {
+        referenceId: reference.reference_id,
+      });
+  }
+};

packages/webapp/src/containers/CashFlow/AccountTransactions/withCashflowAccounts.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+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);
+};

packages/webapp/src/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+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);