From c148e2976a6ab8d042703f88e224319793fc34f1 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 17 Oct 2021 18:00:40 +0200
Subject: [PATCH] feat : Cash flow transaction type.

---
 src/common/cashflowOptions.js                 |  16 +-
 .../AccountTransactionsActionsBar.js          |   4 +-
 .../AccountTransactionsProvider.js            |   4 +-
 .../MoneyInDialog/MoneyInDialogForm.js        |  10 +-
 .../OtherIncome/OtherIncomeForm.js            |   5 +-
 .../OtherIncome/OtherIncomeForm.schema.js     |   6 +-
 .../OtherIncome/OtherIncomeFormFields.js      |  22 +-
 .../OwnerContributionForm.js                  |   5 +-
 .../OwnerContributionForm.schema.js           |   6 +-
 .../OwnerContributionFormFields.js            |  16 +-
 .../TransferFromAccountForm.js                |  92 ++++++++
 .../TransferFromAccountForm.schema.js         |  22 ++
 .../TransferFromAccountFormContent.js         |  14 ++
 .../TransferFromAccountFormFields.js          | 198 ++++++++++++++++++
 .../MoneyOutDialog/MoneyOutDialogContent.js   |   5 +-
 .../MoneyOutDialog/MoneyOutDialogForm.js      |  24 +++
 .../MoneyOutDialog/MoneyOutProvider.js        |  12 +-
 .../OtherExpenseFloatingActions.js            |  76 +++++++
 .../OtherExpense/OtherExpenseForm.js          |  92 ++++++++
 .../OtherExpense/OtherExpenseForm.schema.js   |  22 ++
 .../OtherExpense/OtherExpenseFormContent.js   |  17 ++
 .../OtherExpense/OtherExpnseFormFields.js     | 195 +++++++++++++++++
 .../OwnerDrawingsFloatingActions.js           |   2 +-
 .../OwnerDrawings/OwnerDrawingsForm.js        |  31 ++-
 .../OwnerDrawings/OwnerDrawingsForm.schema.js |   5 +-
 .../OwnerDrawings/OwnerDrawingsFormFields.js  |  22 +-
 .../TransferToAccountFloatingActions.js       |  73 +++++++
 .../TransferToAccountForm.js                  |  92 ++++++++
 .../TransferToAccountForm.schema.js           |  22 ++
 .../TransferToAccountFormFields.js            | 198 ++++++++++++++++++
 .../TransferToAccountFromContent.js           |  14 ++
 src/lang/en/index.json                        |   7 +-
 .../CashFlow/CashflowTransactionForm.scss     |   7 +-
 33 files changed, 1273 insertions(+), 63 deletions(-)
 create mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
 create mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
 create mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js
 create mode 100644 src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
 create mode 100644 src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js

diff --git a/src/common/cashflowOptions.js b/src/common/cashflowOptions.js
index 86a6a8863..6ff7401f5 100644
--- a/src/common/cashflowOptions.js
+++ b/src/common/cashflowOptions.js
@@ -3,25 +3,29 @@ import intl from 'react-intl-universal';
 export const addMoneyIn = [
   {
     name: intl.get('cash_flow.option_owner_contribution'),
-    type: 'OWNERS',
+    type: 'OWNER_CONTRIBUTION',
   },
   {
     name: intl.get('cash_flow.option_other_income'),
-    type: 'EQUITY',
+    type: 'OTHER_INCOME',
+  },
+  {
+    name: intl.get('cash_flow.option_transfer_form_account'),
+    type: 'TRANSFER_FROM_ACCOUNT',
   },
 ];
 
 export const addMoneyOut = [
   {
     name: intl.get('cash_flow.option_owner_drawings'),
-    type: 'OWNERS',
+    type: 'ONWERS_DRAWING',
   },
   {
     name: intl.get('cash_flow.option_expenses'),
-    type: 'EXPENSES',
+    type: 'OTHER_EXPENSE',
   },
   {
-    name: intl.get('cash_flow.option_vendor_payment'),
-    type: '',
+    name: intl.get('cash_flow.option_transfer_to_account'),
+    type: 'TRANSFER_TO_ACCOUNT',
   },
 ];
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
index 2aa0206ca..4615a8cf3 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
@@ -36,7 +36,7 @@ function AccountTransactionsActionsBar({
   const handleMoneyInFormTransaction = (value) => {
     openDialog('money-in', {
       account_type: value.type,
-      account_id: accountId.id,
+      account_id: accountId,
     });
   };
 
@@ -44,7 +44,7 @@ function AccountTransactionsActionsBar({
   const handlMoneyOutFormTransaction = (value) => {
     openDialog('money-out', {
       account_type: value.type,
-      account_id: accountId.id,
+      account_id: accountId,
     });
   };
   return (
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js
index de67a1a60..a7b501d15 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js
@@ -10,7 +10,8 @@ const AccountTransactionsContext = React.createContext();
  * Account transctions provider.
  */
 function AccountTransactionsProvider({ query, ...props }) {
-  const accountId = useParams();
+  const { id } = useParams();
+  const accountId = parseInt(id, 10);
 
   // Fetch cashflow account transactions list
   const {
@@ -21,7 +22,6 @@ function AccountTransactionsProvider({ query, ...props }) {
     enabled: !!accountId,
   });
 
-
   // Provider payload.
   const provider = {
     accountId,
diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
index 6becf35d8..6ea90e77a 100644
--- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
+++ b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
@@ -1,20 +1,24 @@
 import React from 'react';
 import OwnerContributionForm from './OwnerContribution/OwnerContributionForm';
 import OtherIncomeForm from './OtherIncome/OtherIncomeForm';
+import TransferFromAccountForm from './TransferFromAccount/TransferFromAccountForm';
 
 export default function MoneyInDialogForm({ accountType }) {
   // Handle from transaction.
   const handleFromTransaction = () => {
     switch (accountType) {
-      case 'OWNERS':
+      case 'OWNER_CONTRIBUTION':
         return <OwnerContributionForm />;
 
-      case 'EQUITY':
+      case 'OTHER_INCOME':
         return <OtherIncomeForm />;
+
+      case 'TRANSFER_FROM_ACCOUNT':
+        return <TransferFromAccountForm />;
       default:
         break;
     }
   };
 
-  return <div>{handleFromTransaction()}</div>;
+  return <React.Fragment>{handleFromTransaction()}</React.Fragment>;
 }
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js
index 8ffcab15a..3f47fc31b 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js
+++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js
@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
+import { omit } from 'lodash';
 import intl from 'react-intl-universal';
 
 import 'style/pages/CashFlow/CashflowTransactionForm.scss';
@@ -50,13 +51,13 @@ function OtherIncomeForm({
   const initialValues = {
     ...defaultInitialValues,
     currency_code: base_currency,
-    credit_account_id: accountId,
+    cashflow_account_id: accountId,
   };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     const form = {
-      ...values,
+      ...omit(values, ['currency_code']),
       published: submitPayload.publish,
     };
     setSubmitting(true);
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js
index f6178739d..300f98511 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js
+++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js
@@ -6,12 +6,12 @@ const Schema = Yup.object().shape({
   date: Yup.date().required().label(intl.get('date')),
   amount: Yup.number().required().label(intl.get('amount')),
   transaction_number: Yup.string(),
-  transaction_type: Yup.string().required().label(intl.get('transaction_type')),
+  transaction_type: Yup.string().required(),
   reference_no: Yup.string(),
-  credit_account_id: Yup.number().required(),
-  cashflow_account_id: Yup.string()
+  credit_account_id: Yup.number()
     .required()
     .label(intl.get('other_income_account')),
+  cashflow_account_id: Yup.string().required(),
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
index a181ccd4a..0a2544b96 100644
--- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
@@ -14,10 +14,14 @@ import {
   AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
+  FieldRequiredHint,
+  Col,
+  Row,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
-import { FieldRequiredHint, Col, Row } from 'components';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+
 import {
   inputIntent,
   momentFormatter,
@@ -28,7 +32,7 @@ import { CLASSES } from 'common/classes';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
 
 /**
- * Other income form fiedls.
+ * Other income form fields.
  */
 function OtherIncomeFormFields() {
   // Money in dialog context.
@@ -120,20 +124,24 @@ function OtherIncomeFormFields() {
       <Row>
         <Col xs={5}>
           {/*------------ other income account -----------*/}
-          <FastField name={'cashflow_account_id'}>
+          <FastField name={'credit_account_id'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
-                label={<T id={'cash_flow_transaction.outher_income_account'} />}
+                label={<T id={'cash_flow_transaction.other_income_account'} />}
                 labelInfo={<FieldRequiredHint />}
                 intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="cashflow_account_id" />}
-                className={'form-group--cashflow_account_id'}
+                helperText={<ErrorMessage name="credit_account_id" />}
+                className={'form-group--credit_account_id'}
               >
                 <AccountsSuggestField
                   accounts={accounts}
                   onAccountSelected={({ id }) =>
-                    form.setFieldValue('cashflow_account_id', id)
+                    form.setFieldValue('credit_account_id', id)
                   }
+                  filterByTypes={[
+                    ACCOUNT_TYPE.INCOME,
+                    ACCOUNT_TYPE.OTHER_INCOME,
+                  ]}
                   inputProps={{
                     intent: inputIntent({ error, touched }),
                   }}
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
index 305bce64b..e7ff7bfaf 100644
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
+++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
+import { omit } from 'lodash';
 import intl from 'react-intl-universal';
 
 import 'style/pages/CashFlow/CashflowTransactionForm.scss';
@@ -50,13 +51,13 @@ function OwnerContributionForm({
   const initialValues = {
     ...defaultInitialValues,
     currency_code: base_currency,
-    credit_account_id: accountId,
+    cashflow_account_id: accountId,
   };
 
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     const form = {
-      ...values,
+      ...omit(values, ['currency_code']),
       published: submitPayload.publish,
     };
     setSubmitting(true);
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
index a55931df1..b877c0e26 100644
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
+++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
@@ -6,12 +6,12 @@ const Schema = Yup.object().shape({
   date: Yup.date().required().label(intl.get('date')),
   amount: Yup.number().required().label(intl.get('amount')),
   transaction_number: Yup.string(),
-  transaction_type: Yup.string().required().label(intl.get('transaction_type')),
+  transaction_type: Yup.string().required(),
   reference_no: Yup.string(),
-  credit_account_id: Yup.number().required(),
-  cashflow_account_id: Yup.string()
+  credit_account_id: Yup.number()
     .required()
     .label(intl.get('cash_flow_transaction.label_equity_account')),
+  cashflow_account_id: Yup.string().required(),
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
index 1effb9d14..6bcea0830 100644
--- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
+++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
@@ -14,10 +14,13 @@ import {
   AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
+  FieldRequiredHint,
+  Col,
+  Row,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
-import { FieldRequiredHint, Col, Row } from 'components';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
 import {
   inputIntent,
   momentFormatter,
@@ -118,21 +121,22 @@ function OwnerContributionFormFields() {
 
       <Row>
         <Col xs={5}>
-          {/*------------ cash flow account -----------*/}
-          <FastField name={'cashflow_account_id'}>
+          {/*------------ equity account -----------*/}
+          <FastField name={'credit_account_id'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'cash_flow_transaction.label_equity_account'} />}
                 labelInfo={<FieldRequiredHint />}
                 intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="cashflow_account_id" />}
-                className={'form-group--cashflow_account_id'}
+                helperText={<ErrorMessage name="credit_account_id" />}
+                className={'form-group--credit_account_id'}
               >
                 <AccountsSuggestField
                   accounts={accounts}
                   onAccountSelected={({ id }) =>
-                    form.setFieldValue('cashflow_account_id', id)
+                    form.setFieldValue('credit_account_id', id)
                   }
+                  filterByTypes={ACCOUNT_TYPE.EQUITY}
                   inputProps={{
                     intent: inputIntent({ error, touched }),
                   }}
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
new file mode 100644
index 000000000..17636469a
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { omit } from 'lodash';
+import intl from 'react-intl-universal';
+
+import 'style/pages/CashFlow/CashflowTransactionForm.scss';
+
+import { AppToaster } from 'components';
+import { CreateTransferFromAccountFormSchema } from './TransferFromAccountForm.schema';
+import TransferFromAccountFormContent from './TransferFromAccountFormContent';
+
+import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  amount: '',
+  transaction_number: '',
+  transaction_type: 'transfer_from_account',
+  reference_no: '',
+  cashflow_account_id: '',
+  credit_account_id: '',
+  description: '',
+  published: '',
+};
+
+/**
+ * Transfer from account form.
+ */
+function TransferFromAccountForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const {
+    dialogName,
+    accountId,
+    createCashflowTransactionMutate,
+    submitPayload,
+  } = useMoneyInDailogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    currency_code: base_currency,
+    cashflow_account_id: accountId,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['currency_code']),
+      published: submitPayload.publish,
+    };
+    setSubmitting(true);
+    createCashflowTransactionMutate(form)
+      .then(() => {
+        closeDialog(dialogName);
+
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction_success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        setSubmitting(true);
+      });
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateTransferFromAccountFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <TransferFromAccountFormContent />
+    </Formik>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(TransferFromAccountForm);
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
new file mode 100644
index 000000000..3e1786695
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
@@ -0,0 +1,22 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  amount: Yup.number().required().label(intl.get('amount')),
+  transaction_number: Yup.string(),
+  transaction_type: Yup.string().required(),
+  reference_no: Yup.string(),
+  credit_account_id: Yup.number()
+    .required()
+    .label(intl.get('cash_flow_transaction.label_transfer_account')),
+  cashflow_account_id: Yup.string().required(),
+  description: Yup.string()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('description')),
+  published: Yup.boolean(),
+});
+
+export const CreateTransferFromAccountFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js
new file mode 100644
index 000000000..073a893e2
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import TransferFromAccountFormFields from './TransferFromAccountFormFields';
+import MoneyInFloatingActions from '../MoneyInFloatingActions';
+
+export default function TransferFromAccountFormContent() {
+  return (
+    <Form>
+      <TransferFromAccountFormFields />
+      <MoneyInFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
new file mode 100644
index 000000000..c3d2496c1
--- /dev/null
+++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
@@ -0,0 +1,198 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  FieldRequiredHint,
+  Col,
+  Row,
+} from 'components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+
+/**
+ * Transfer from account form fields.
+ */
+function TransferFromAccountFormFields() {
+  // Money in dialog context.
+  const { accounts } = useMoneyInDailogContext();
+
+  const amountFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={5}>
+          {/*------------ Date -----------*/}
+          <FastField name={'date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'date'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Transaction number -----------*/}
+          <FastField name={'transaction_number'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'transaction_number'} />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="transaction_number" />}
+                className={'form-group--transaction_number'}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ amount -----------*/}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            className={'form-group--amount'}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                inputRef={(ref) => (amountFieldRef.current = ref)}
+                intent={inputIntent({ error, touched })}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      <Row>
+        <Col xs={5}>
+          {/*------------ transfer from account -----------*/}
+          <FastField name={'credit_account_id'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={
+                  'Transfer account'
+                  // <T id={'cash_flow_transaction.label_transfer_from_account'} />
+                }
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="credit_account_id" />}
+                className={'form-group--credit_account_id'}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('credit_account_id', id)
+                  }
+                  filterByTypes={[
+                    ACCOUNT_TYPE.CASH,
+                    ACCOUNT_TYPE.BANK,
+                    ACCOUNT_TYPE.CREDIT_CARD,
+                  ]}
+                  inputProps={{
+                    intent: inputIntent({ error, touched }),
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Reference -----------*/}
+          <FastField name={'reference_no'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'reference_no'} />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="reference_no" />}
+                className={'form-group--reference-no'}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ description -----------*/}
+      <FastField name={'description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'description'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default TransferFromAccountFormFields;
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
index c737d10cd..3c8ad3ac8 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { MoneyOutProvider } from './MoneyOutProvider';
-
-import OwnerDrawingsForm from './OwnerDrawings/OwnerDrawingsForm';
+import MoneyOutDialogForm from './MoneyOutDialogForm';
 
 /**
  * Money out dailog content.
@@ -14,7 +13,7 @@ export default function MoneyOutDialogContent({
 }) {
   return (
     <MoneyOutProvider accountId={accountId} dialogName={dialogName}>
-      <OwnerDrawingsForm />
+      <MoneyOutDialogForm accountType={accountType} />
     </MoneyOutProvider>
   );
 }
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js
new file mode 100644
index 000000000..11880eacd
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import OwnerDrawingsForm from './OwnerDrawings/OwnerDrawingsForm';
+import OtherExpenseForm from './OtherExpense/OtherExpenseForm';
+import TransferToAccountForm from './TransferToAccount/TransferToAccountForm';
+
+export default function MoneyOutDialogForm({ accountType }) {
+  // Handle from transaction.
+  const handleFromTransaction = () => {
+    switch (accountType) {
+      case 'ONWERS_DRAWING':
+        return <OwnerDrawingsForm />;
+
+      case 'OTHER_EXPENSE':
+        return <OtherExpenseForm />;
+
+      case 'TRANSFER_TO_ACCOUNT':
+        return <TransferToAccountForm />;
+      default:
+        break;
+    }
+  };
+
+  return <React.Fragment>{handleFromTransaction()}</React.Fragment>;
+}
diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js
index 57692e3a8..e0564ab5a 100644
--- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js
+++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useAccounts } from 'hooks/query';
+import { useAccounts, useCreateCashflowTransaction } from 'hooks/query';
 
 const MoneyInDialogContent = React.createContext();
 
@@ -9,7 +9,14 @@ const MoneyInDialogContent = React.createContext();
  */
 function MoneyOutProvider({ accountId, dialogName, ...props }) {
   // Fetches accounts list.
-  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
+  const {
+    isFetching: isAccountFetching,
+    isLoading: isAccountsLoading,
+    data: accounts,
+  } = useAccounts();
+
+  const { mutateAsync: createCashflowTransactionMutate } =
+    useCreateCashflowTransaction();
 
   // Submit payload.
   const [submitPayload, setSubmitPayload] = React.useState({});
@@ -23,6 +30,7 @@ function MoneyOutProvider({ accountId, dialogName, ...props }) {
     submitPayload,
     dialogName,
 
+    createCashflowTransactionMutate,
     setSubmitPayload,
   };
 
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js
new file mode 100644
index 000000000..acd9877e9
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Other expense floating actions.
+ */
+function OtherExpenseFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting, submitForm } = useFormikContext();
+  //  money in  dialog context.
+  const { dialogName, setSubmitPayload, submitPayload } =
+    useMoneyOutDialogContext();
+
+  // handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ publish: false });
+    submitForm();
+  };
+
+  // Handle submit  button click.
+  const handleSubmittBtnClick = (event) => {
+    setSubmitPayload({ publish: true });
+    submitForm();
+  };
+
+  // Handle close button click.
+  const handleCloseBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCloseBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'close'} />
+        </Button>
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting && !submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitDraftBtnClick}
+        >
+          {<T id={'save_as_draft'} />}
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          loading={isSubmitting && submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmittBtnClick}
+        >
+          {<T id={'save_and_publish'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(OtherExpenseFloatingActions);
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js
new file mode 100644
index 000000000..13513022e
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { omit } from 'lodash';
+import intl from 'react-intl-universal';
+
+import 'style/pages/CashFlow/CashflowTransactionForm.scss';
+
+import { AppToaster } from 'components';
+import { CreateOtherExpenseFormSchema } from './OtherExpenseForm.schema';
+import OtherExpenseFormContent from './OtherExpenseFormContent';
+
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  amount: '',
+  transaction_number: '',
+  transaction_type: 'other_expense',
+  reference_no: '',
+  cashflow_account_id: '',
+  credit_account_id: '',
+  description: '',
+  published: '',
+};
+
+/**
+ * Other expense form.
+ */
+function OtherExpenseForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const {
+    dialogName,
+    accountId,
+    createCashflowTransactionMutate,
+    submitPayload,
+  } = useMoneyOutDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    currency_code: base_currency,
+    cashflow_account_id: accountId,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['currency_code']),
+      published: submitPayload.publish,
+    };
+    setSubmitting(true);
+    createCashflowTransactionMutate(form)
+      .then(() => {
+        closeDialog(dialogName);
+
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction_success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        setSubmitting(true);
+      });
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateOtherExpenseFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <OtherExpenseFormContent />
+    </Formik>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(OtherExpenseForm);
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js
new file mode 100644
index 000000000..fc4d58460
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js
@@ -0,0 +1,22 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  amount: Yup.number().required().label(intl.get('amount')),
+  transaction_number: Yup.string(),
+  transaction_type: Yup.string().required(),
+  reference_no: Yup.string(),
+  credit_account_id: Yup.number()
+    .required()
+    .label(intl.get('other_expense_account')),
+  cashflow_account_id: Yup.string().required(),
+  description: Yup.string()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('description')),
+  published: Yup.boolean(),
+});
+
+export const CreateOtherExpenseFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js
new file mode 100644
index 000000000..4f578485a
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import OtherExpnseFormFields from './OtherExpnseFormFields';
+import OtherExpenseFloatingActions from './OtherExpenseFloatingActions';
+
+/**
+ * Other expense form content.
+ */
+export default function OtherExpenseFormContent() {
+  return (
+    <Form>
+      <OtherExpnseFormFields />
+      <OtherExpenseFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
new file mode 100644
index 000000000..93cabd62d
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
@@ -0,0 +1,195 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  FieldRequiredHint,
+  Col,
+  Row,
+} from 'components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+/**
+ * Other expense form fields.
+ */
+function OtherExpnseFormFields() {
+  // Money in dialog context.
+  const { accounts } = useMoneyOutDialogContext();
+
+  const amountFieldRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={5}>
+          {/*------------ Date -----------*/}
+          <FastField name={'date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'date'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Transaction number -----------*/}
+          <FastField name={'transaction_number'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'transaction_number'} />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="transaction_number" />}
+                className={'form-group--transaction_number'}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ amount -----------*/}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            className={'form-group--amount'}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                inputRef={(ref) => (amountFieldRef.current = ref)}
+                intent={inputIntent({ error, touched })}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      <Row>
+        <Col xs={5}>
+          {/*------------ other expense account -----------*/}
+          <FastField name={'credit_account_id'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'cash_flow_transaction.label_expense_account'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="credit_account_id" />}
+                className={'form-group--credit_account_id'}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('credit_account_id', id)
+                  }
+                  filterByTypes={[
+                    ACCOUNT_TYPE.EXPENSE,
+                    ACCOUNT_TYPE.OTHER_EXPENSE,
+                  ]}
+                  inputProps={{
+                    intent: inputIntent({ error, touched }),
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Reference -----------*/}
+          <FastField name={'reference_no'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'reference_no'} />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="reference_no" />}
+                className={'form-group--reference-no'}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
+      {/*------------ description -----------*/}
+      <FastField name={'description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'description'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default OtherExpnseFormFields;
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js
index 219d0b058..b8ed31d47 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js
@@ -9,7 +9,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
 /**
- * Owner drawingsfloating actions.
+ * Owner drawings floating actions.
  */
 function OwnerDrawingsFloatingActions({
   // #withDialogActions
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
index 3732d1cf4..267ad4284 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
@@ -2,9 +2,10 @@ import React from 'react';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
+import { omit } from 'lodash';
 import intl from 'react-intl-universal';
 
-// styles
+import 'style/pages/CashFlow/CashflowTransactionForm.scss';
 
 import { AppToaster } from 'components';
 import { CreateOwnerDrawingsFormSchema } from './OwnerDrawingsForm.schema';
@@ -21,9 +22,10 @@ const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
   amount: '',
   transaction_number: '',
+  transaction_type: 'onwers_drawing',
   reference_no: '',
-  equity_account_id: '',
-  account_id: '',
+  cashflow_account_id: '',
+  credit_account_id: '',
   description: '',
   published: '',
 };
@@ -38,21 +40,38 @@ function OwnerDrawingsForm({
   // #withCurrentOrganization
   organization: { base_currency },
 }) {
-  const { accountId, submitPayload } = useMoneyOutDialogContext();
+  const {
+    dialogName,
+    accountId,
+    submitPayload,
+    createCashflowTransactionMutate,
+  } = useMoneyOutDialogContext();
 
   // Initial form values.
   const initialValues = {
     ...defaultInitialValues,
     currency_code: base_currency,
-    account_id: accountId,
+    cashflow_account_id: accountId,
   };
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
     const form = {
-      ...values,
+      ...omit(values, ['currency_code']),
       published: submitPayload.publish,
     };
     setSubmitting(true);
+    createCashflowTransactionMutate(form)
+      .then(() => {
+        closeDialog(dialogName);
+
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction_success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        setSubmitting(true);
+      });
   };
 
   return (
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
index 878397d3d..dfc02dc6e 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
@@ -6,11 +6,12 @@ const Schema = Yup.object().shape({
   date: Yup.date().required().label(intl.get('date')),
   amount: Yup.number().required().label(intl.get('amount')),
   transaction_number: Yup.string(),
+  transaction_type: Yup.string().required(),
   reference_no: Yup.string(),
-  account_id: Yup.number().required(),
-  equity_account_id: Yup.string()
+  credit_account_id: Yup.number()
     .required()
     .label(intl.get('cash_flow_transaction.label_equity_account')),
+  cashflow_account_id: Yup.string().required(),
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
index e2be11875..b3e08aedc 100644
--- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
+++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, Field, ErrorMessage } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -14,11 +14,13 @@ import {
   AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
+  FieldRequiredHint,
+  Col,
+  Row,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
-import { FieldRequiredHint, Col, Row } from 'components';
-
+import { ACCOUNT_TYPE } from 'common/accountTypes';
 import {
   inputIntent,
   momentFormatter,
@@ -88,7 +90,7 @@ function OwnerDrawingsFormFields() {
         </Col>
       </Row>
       {/*------------ amount -----------*/}
-      <FastField name={'amount'}>
+      <Field name={'amount'}>
         {({
           form: { values, setFieldValue },
           field: { value },
@@ -110,31 +112,33 @@ function OwnerDrawingsFormFields() {
                 onChange={(amount) => {
                   setFieldValue('amount', amount);
                 }}
+                
                 inputRef={(ref) => (amountFieldRef.current = ref)}
                 intent={inputIntent({ error, touched })}
               />
             </ControlGroup>
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
       <Row>
         <Col xs={5}>
           {/*------------ equitty account -----------*/}
-          <FastField name={'equity_account_id'}>
+          <FastField name={'credit_account_id'}>
             {({ form, field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'cash_flow_transaction.label_equity_account'} />}
                 labelInfo={<FieldRequiredHint />}
                 intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="equity_account_id" />}
-                className={'form-group--equity_account_id'}
+                helperText={<ErrorMessage name="credit_account_id" />}
+                className={'form-group--credit_account_id'}
               >
                 <AccountsSuggestField
                   accounts={accounts}
                   onAccountSelected={({ id }) =>
-                    form.setFieldValue('equity_account_id', id)
+                    form.setFieldValue('credit_account_id', id)
                   }
+                  filterByTypes={ACCOUNT_TYPE.EQUITY}
                   inputProps={{
                     intent: inputIntent({ error, touched }),
                   }}
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js
new file mode 100644
index 000000000..ce428f017
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function TransferToAccountFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting, submitForm } = useFormikContext();
+  //  money in  dialog context.
+  const { dialogName, setSubmitPayload, submitPayload } =
+    useMoneyOutDialogContext();
+
+  // handle submit as draft button click.
+  const handleSubmitDraftBtnClick = (event) => {
+    setSubmitPayload({ publish: false });
+    submitForm();
+  };
+
+  // Handle submit  button click.
+  const handleSubmittBtnClick = (event) => {
+    setSubmitPayload({ publish: true });
+    submitForm();
+  };
+
+  // Handle close button click.
+  const handleCloseBtnClick = (event) => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button
+          disabled={isSubmitting}
+          onClick={handleCloseBtnClick}
+          style={{ minWidth: '75px' }}
+        >
+          <T id={'close'} />
+        </Button>
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting && !submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmitDraftBtnClick}
+        >
+          {<T id={'save_as_draft'} />}
+        </Button>
+
+        <Button
+          intent={Intent.PRIMARY}
+          disabled={isSubmitting}
+          loading={isSubmitting && submitPayload.publish}
+          style={{ minWidth: '75px' }}
+          type="submit"
+          onClick={handleSubmittBtnClick}
+        >
+          {<T id={'save_and_publish'} />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(TransferToAccountFloatingActions);
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js
new file mode 100644
index 000000000..d2b4b16e3
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import { omit } from 'lodash';
+import intl from 'react-intl-universal';
+
+import 'style/pages/CashFlow/CashflowTransactionForm.scss';
+
+import { AppToaster } from 'components';
+import { CreateTransferToAccountFormSchema } from './TransferToAccountForm.schema';
+import TransferToAccountFromContent from './TransferToAccountFromContent';
+
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  amount: '',
+  transaction_number: '',
+  transaction_type: 'transfer_from_account',
+  reference_no: '',
+  cashflow_account_id: '',
+  credit_account_id: '',
+  description: '',
+  published: '',
+};
+
+/**
+ * Transfer to account form.
+ */
+function TransferToAccountForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const {
+    dialogName,
+    accountId,
+    createCashflowTransactionMutate,
+    submitPayload,
+  } = useMoneyOutDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    currency_code: base_currency,
+    cashflow_account_id: accountId,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...omit(values, ['currency_code']),
+      published: submitPayload.publish,
+    };
+    setSubmitting(true);
+    createCashflowTransactionMutate(form)
+      .then(() => {
+        closeDialog(dialogName);
+
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction_success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .finally(() => {
+        setSubmitting(true);
+      });
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateTransferToAccountFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <TransferToAccountFromContent />
+    </Formik>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(TransferToAccountForm);
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js
new file mode 100644
index 000000000..39b71ab31
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js
@@ -0,0 +1,22 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().required().label(intl.get('date')),
+  amount: Yup.number().required().label(intl.get('amount')),
+  transaction_number: Yup.string(),
+  transaction_type: Yup.string().required(),
+  reference_no: Yup.string(),
+  credit_account_id: Yup.number()
+    .required()
+    .label(intl.get('account')),
+  cashflow_account_id: Yup.string().required(),
+  description: Yup.string()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('description')),
+  published: Yup.boolean(),
+});
+
+export const CreateTransferToAccountFormSchema = Schema;
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
new file mode 100644
index 000000000..848254372
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
@@ -0,0 +1,198 @@
+import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  Classes,
+  FormGroup,
+  InputGroup,
+  TextArea,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
+import classNames from 'classnames';
+import {
+  FormattedMessage as T,
+  AccountsSuggestField,
+  InputPrependText,
+  MoneyInputGroup,
+  FieldRequiredHint,
+  Col,
+  Row,
+} from 'components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { ACCOUNT_TYPE } from 'common/accountTypes';
+
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+/**
+ * Transfer to account form fields.
+ */
+function TransferToAccountFormFields() {
+  // Money in dialog context.
+  const { accounts } = useMoneyOutDialogContext();
+
+  const accountRef = useAutofocus();
+
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Row>
+        <Col xs={5}>
+          {/*------------ Date -----------*/}
+          <FastField name={'date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'date'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="date" />}
+                minimal={true}
+                className={classNames(CLASSES.FILL, 'form-group--date')}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('date', formattedDate);
+                  })}
+                  value={tansformDateValue(value)}
+                  popoverProps={{
+                    position: Position.BOTTOM,
+                    minimal: true,
+                  }}
+                  intent={inputIntent({ error, touched })}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Transaction number -----------*/}
+          <FastField name={'transaction_number'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'transaction_number'} />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="transaction_number" />}
+                className={'form-group--transaction_number'}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ amount -----------*/}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+            className={'form-group--amount'}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                inputRef={accountRef}
+                intent={inputIntent({ error, touched })}
+              />
+            </ControlGroup>
+          </FormGroup>
+        )}
+      </FastField>
+
+      <Row>
+        <Col xs={5}>
+          {/*------------ transfer from account -----------*/}
+          <FastField name={'credit_account_id'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={
+                  'Transfer account'
+                  // <T id={'cash_flow_transaction.label_transfer_from_account'} />
+                }
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="credit_account_id" />}
+                className={'form-group--credit_account_id'}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('credit_account_id', id)
+                  }
+                  filterByTypes={[
+                    ACCOUNT_TYPE.CASH,
+                    ACCOUNT_TYPE.BANK,
+                    ACCOUNT_TYPE.CREDIT_CARD,
+                  ]}
+                  inputProps={{
+                    intent: inputIntent({ error, touched }),
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/*------------ Reference -----------*/}
+          <FastField name={'reference_no'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'reference_no'} />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="reference_no" />}
+                className={'form-group--reference-no'}
+              >
+                <InputGroup
+                  intent={inputIntent({ error, touched })}
+                  {...field}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+      {/*------------ description -----------*/}
+      <FastField name={'description'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'description'} />}
+            className={'form-group--description'}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'description'} />}
+          >
+            <TextArea
+              growVertically={true}
+              large={true}
+              intent={inputIntent({ error, touched })}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default TransferToAccountFormFields;
diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js
new file mode 100644
index 000000000..508f0b330
--- /dev/null
+++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import TransferToAccountFormFields from './TransferToAccountFormFields';
+import TransferToAccountFloatingActions from './TransferToAccountFloatingActions';
+
+export default function TransferToAccountFromContent() {
+  return (
+    <Form>
+      <TransferToAccountFormFields />
+      <TransferToAccountFloatingActions />
+    </Form>
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 5bc30ec48..888e60d2b 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1377,11 +1377,16 @@
   "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.label_transfer_account":"Transfer account",
   "cash_flow_transaction_success_message":" The cashflow transaction has been created successfully.",
   "cash_flow_transaction.money_in":"Money In",
   "cash_flow_transaction.money_out":"Money Out",
-  "cash_flow_transaction.outher_income_account":"Other income account",
+  "cash_flow_transaction.other_income_account":"Other income account",
+  "cash_flow_transaction.other_expense_account":"Other expense account",
   "save_and_publish": "Save & Publish"
  
 }
diff --git a/src/style/pages/CashFlow/CashflowTransactionForm.scss b/src/style/pages/CashFlow/CashflowTransactionForm.scss
index 2e3834168..81c9c1671 100644
--- a/src/style/pages/CashFlow/CashflowTransactionForm.scss
+++ b/src/style/pages/CashFlow/CashflowTransactionForm.scss
@@ -1,4 +1,5 @@
-.dialog--money-in {
+.dialog--money-in,
+.dialog--money-out {
   .bp3-form-group {
     margin-bottom: 15px;
 
@@ -19,8 +20,8 @@
     }
     &--reference-no,
     &--amount,
-    &--cashflow_account_id {
-      max-width: 270px;
+    &--credit_account_id {
+      max-width: 380px;
     }
   }