feat : Cash flow transaction type.

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'),
+    name: intl.get('cash_flow.option_transfer_to_account'),
-    type: '',
+    type: 'TRANSFER_TO_ACCOUNT',
   },
 ];

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 (

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,

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>;
 }

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);

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(),
+  credit_account_id: Yup.number()
-  cashflow_account_id: Yup.string()
     .required()
     .label(intl.get('other_income_account')),
+  cashflow_account_id: Yup.string().required(),
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)

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" />}
+                helperText={<ErrorMessage name="credit_account_id" />}
-                className={'form-group--cashflow_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 }),
                   }}

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);

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(),
+  credit_account_id: Yup.number()
-  cashflow_account_id: Yup.string()
     .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)

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 -----------*/}
+          {/*------------ equity account -----------*/}
-          <FastField name={'cashflow_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="cashflow_account_id" />}
+                helperText={<ErrorMessage name="credit_account_id" />}
-                className={'form-group--cashflow_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 }),
                   }}

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);

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;

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>
+  );
+}

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;

src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { MoneyOutProvider } from './MoneyOutProvider';
-
+import MoneyOutDialogForm from './MoneyOutDialogForm';
-import OwnerDrawingsForm from './OwnerDrawings/OwnerDrawingsForm';
 
 /**
  * Money out dailog content.
@@ -14,7 +13,7 @@ export default function MoneyOutDialogContent({
 }) {
   return (
     <MoneyOutProvider accountId={accountId} dialogName={dialogName}>
-      <OwnerDrawingsForm />
+      <MoneyOutDialogForm accountType={accountType} />
     </MoneyOutProvider>
   );
 }

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>;
+}

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,
   };
 

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);

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);

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;

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>
+  );
+}

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;

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

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: '',
+  cashflow_account_id: '',
-  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 (

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(),
+  credit_account_id: Yup.number()
-  equity_account_id: Yup.string()
     .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)

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" />}
+                helperText={<ErrorMessage name="credit_account_id" />}
-                className={'form-group--equity_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 }),
                   }}

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);

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);

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;

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;

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>
+  );
+}

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"
  
 }

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 {
+    &--credit_account_id {
-      max-width: 270px;
+      max-width: 380px;
     }
   }