feat: Money in & out Dialog.

src/common/cashflowOptions.js

@@ -0,0 +1,27 @@
+import intl from 'react-intl-universal';
+
+export const addMoneyIn = [
+  {
+    name: intl.get('cash_flow.option_owner_contribution'),
+    type: 'OWNERS',
+  },
+  {
+    name: intl.get('cash_flow.option_other_income'),
+    type: 'EQUITY',
+  },
+];
+
+export const addMoneyOut = [
+  {
+    name: intl.get('cash_flow.option_owner_drawings'),
+    type: 'OWNERS',
+  },
+  {
+    name: intl.get('cash_flow.option_expenses'),
+    type: 'EXPENSES',
+  },
+  {
+    name: intl.get('cash_flow.option_vendor_payment'),
+    type: '',
+  },
+];

src/components/DialogsContainer.js

@@ -17,6 +17,8 @@ import AllocateLandedCostDialog from 'containers/Dialogs/AllocateLandedCostDialo
 import InvoicePdfPreviewDialog from 'containers/Dialogs/InvoicePdfPreviewDialog';
 import EstimatePdfPreviewDialog from 'containers/Dialogs/EstimatePdfPreviewDialog';
 import ReceiptPdfPreviewDialog from '../containers/Dialogs/ReceiptPdfPreviewDialog';
+import MoneyInDialog from '../containers/Dialogs/MoneyInDialog';
+import MoneyOutDialog from '../containers/Dialogs/MoneyOutDialog';
 
 /**
  * Dialogs container.
@@ -40,6 +42,8 @@ export default function DialogsContainer() {
       <InvoicePdfPreviewDialog dialogName={'invoice-pdf-preview'} />
       <EstimatePdfPreviewDialog dialogName={'estimate-pdf-preview'} />
       <ReceiptPdfPreviewDialog dialogName={'receipt-pdf-preview'} />
+      <MoneyInDialog dialogName={'money-in'} />
+      <MoneyOutDialog dialogName={'money-out'} />
     </div>
   );
 }

src/config/sidebarMenu.js

@@ -193,6 +193,38 @@ export default [
     text: <T id={'banking'} />,
     children: [],
   },
+  {
+    text: <T id={'cash_flow'} />,
+    children: [
+      {
+        text: <T id={'siebar.cashflow.label_cash_and_bank_accounts'} />,
+        href: '/cashflow-accounts',
+      },
+      {
+        text: <T id={'New tasks'} />,
+        label: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        text: <T id={'cash_flow.label.add_money_in'} />,
+        href: '/',
+      },
+      {
+        text: <T id={'cash_flow.label.add_money_out'} />,
+        href: '/',
+      },
+      {
+        text: <T id={'cash_flow.label.add_cash_account'} />,
+        href: '/',
+      },
+      {
+        text: <T id={'cash_flow.label.add_bank_account'} />,
+        href: '/',
+      },
+    ],
+  },
   {
     text: <T id={'expenses'} />,
     children: [

src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { MoneyInDialogProvider } from './MoneyInDialogProvider';
+import MoneyInDialogForm from './MoneyInDialogForm';
+
+/**
+ * Money in dialog content.
+ */
+export default function MoneyInDialogContent({
+  // #ownProps
+  dialogName,
+  accountId,
+  accountType,
+}) {
+  return (
+    <MoneyInDialogProvider accountId={accountId} dialogName={dialogName}>
+      <MoneyInDialogForm accountType={accountType} />
+    </MoneyInDialogProvider>
+  );
+}

src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import OwnerContributionForm from './OwnerContribution/OwnerContributionForm';
+import OtherIncomeForm from './OtherIncome/OtherIncomeForm';
+
+export default function MoneyInDialogForm({ accountType }) {
+  // Handle from transaction.
+  const handleFromTransaction = () => {
+    switch (accountType) {
+      case 'OWNERS':
+        return <OwnerContributionForm />;
+
+      case 'EQUITY':
+        return <OtherIncomeForm />;
+      default:
+        break;
+    }
+  };
+
+  return <div>{handleFromTransaction()}</div>;
+}

src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useCreateCashflowTransaction, useAccounts } from 'hooks/query';
+
+const MoneyInDialogContent = React.createContext();
+
+/**
+ * Money in dialog provider.
+ */
+function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
+  // Fetches accounts list.
+  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
+
+  const { mutateAsync: createCashflowTransactionMutate } =
+    useCreateCashflowTransaction();
+
+  // Submit payload.
+  const [submitPayload, setSubmitPayload] = React.useState({});
+
+  //  provider.
+  const provider = {
+    accounts,
+    accountId,
+    isAccountsLoading,
+
+    submitPayload,
+    dialogName,
+
+    createCashflowTransactionMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading}>
+      <MoneyInDialogContent.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useMoneyInDailogContext = () => React.useContext(MoneyInDialogContent);
+
+export { MoneyInDialogProvider, useMoneyInDailogContext };

src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.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 { useMoneyInDailogContext } from './MoneyInDialogProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Money in floating actions.
+ */
+function MoneyInFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting, submitForm } = useFormikContext();
+  //  money in  dialog context.
+  const { dialogName, setSubmitPayload, submitPayload } =
+    useMoneyInDailogContext();
+
+  // 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)(MoneyInFloatingActions);

src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+
+import 'style/pages/CashFlow/CashflowTransactionForm.scss';
+
+import { AppToaster } from 'components';
+import { CreateOtherIncomeFormSchema } from './OtherIncomeForm.schema';
+import OtherIncomeFormContent from './OtherIncomeFormContent';
+
+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: 'other_income',
+  reference_no: '',
+  cashflow_account_id: '',
+  credit_account_id: '',
+  description: '',
+  published: '',
+};
+
+/**
+ * Other income form.
+ */
+function OtherIncomeForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const {
+    dialogName,
+    accountId,
+    createCashflowTransactionMutate,
+    submitPayload,
+  } = useMoneyInDailogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    currency_code: base_currency,
+    credit_account_id: accountId,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...values,
+      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={CreateOtherIncomeFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <OtherIncomeFormContent />
+    </Formik>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(OtherIncomeForm);

src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.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().label(intl.get('transaction_type')),
+  reference_no: Yup.string(),
+  credit_account_id: Yup.number().required(),
+  cashflow_account_id: Yup.string()
+    .required()
+    .label(intl.get('other_income_account')),
+  description: Yup.string()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('description')),
+  published: Yup.boolean(),
+});
+
+export const CreateOtherIncomeFormSchema = Schema;

src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import OtherIncomeFormFields from './OtherIncomeFormFields';
+import MoneyInFloatingActions from '../MoneyInFloatingActions';
+
+/**
+ * Other income form content.
+ */
+export default function OtherIncomeFormContent() {
+  return (
+    <Form>
+      <OtherIncomeFormFields />
+      <MoneyInFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js

@@ -0,0 +1,186 @@
+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,
+} from 'components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { FieldRequiredHint, Col, Row } from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+
+/**
+ * Other income form fiedls.
+ */
+function OtherIncomeFormFields() {
+  // 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}>
+          {/*------------ other income account -----------*/}
+          <FastField name={'cashflow_account_id'}>
+            {({ form, field, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'cash_flow_transaction.outher_income_account'} />}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="cashflow_account_id" />}
+                className={'form-group--cashflow_account_id'}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('cashflow_account_id', id)
+                  }
+                  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 OtherIncomeFormFields;

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+
+import 'style/pages/CashFlow/CashflowTransactionForm.scss';
+
+import { AppToaster } from 'components';
+import { CreateOwnerContributionFormSchema } from './OwnerContributionForm.schema';
+import OwnerContributionFormContent from './OwnerContributionFormContent';
+
+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: 'owner_contribution',
+  reference_no: '',
+  cashflow_account_id: '',
+  credit_account_id: '',
+  description: '',
+  published: '',
+};
+
+/**
+ * Owner contribution form
+ */
+function OwnerContributionForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const {
+    dialogName,
+    accountId,
+    submitPayload,
+    createCashflowTransactionMutate,
+  } = useMoneyInDailogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    currency_code: base_currency,
+    credit_account_id: accountId,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...values,
+      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={CreateOwnerContributionFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <OwnerContributionFormContent />
+    </Formik>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(OwnerContributionForm);

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.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().label(intl.get('transaction_type')),
+  reference_no: Yup.string(),
+  credit_account_id: Yup.number().required(),
+  cashflow_account_id: Yup.string()
+    .required()
+    .label(intl.get('cash_flow_transaction.label_equity_account')),
+  description: Yup.string()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('description')),
+  published: Yup.boolean(),
+});
+
+export const CreateOwnerContributionFormSchema = Schema;

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import OwnerContributionFormFields from './OwnerContributionFormFields';
+import MoneyInFloatingActions from '../MoneyInFloatingActions';
+
+/**
+ * Owner contribution form content.
+ */
+export default function OwnerContributionFormContent() {
+  return (
+    <Form>
+      <OwnerContributionFormFields />
+      <MoneyInFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js

@@ -0,0 +1,186 @@
+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,
+} from 'components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { FieldRequiredHint, Col, Row } from 'components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
+
+/**
+ * Owner contribution form fields.
+ */
+function OwnerContributionFormFields() {
+  // 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}>
+          {/*------------ cash flow account -----------*/}
+          <FastField name={'cashflow_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'}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('cashflow_account_id', id)
+                  }
+                  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 OwnerContributionFormFields;

src/containers/Dialogs/MoneyInDialog/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
+
+/**
+ * Money In dialog.
+ */
+function MoneyInDialog({
+  dialogName,
+  payload = { action: '', account_type: null, account_id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'cash_flow_transaction.money_in'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--money-in'}
+    >
+      <DialogSuspense>
+        <MoneyInDialogContent
+          dialogName={dialogName}
+          accountId={payload.account_id}
+          accountType={payload.account_type}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(MoneyInDialog);

src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js

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

src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { DialogContent } from 'components';
+import { useAccounts } from 'hooks/query';
+
+const MoneyInDialogContent = React.createContext();
+
+/**
+ * Money out dialog provider.
+ */
+function MoneyOutProvider({ accountId, dialogName, ...props }) {
+  // Fetches accounts list.
+  const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
+
+  // Submit payload.
+  const [submitPayload, setSubmitPayload] = React.useState({});
+
+  //  provider.
+  const provider = {
+    accounts,
+    accountId,
+    isAccountsLoading,
+
+    submitPayload,
+    dialogName,
+
+    setSubmitPayload,
+  };
+
+  return (
+    <DialogContent isLoading={isAccountsLoading}>
+      <MoneyInDialogContent.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useMoneyOutDialogContext = () => React.useContext(MoneyInDialogContent);
+export { MoneyOutProvider, useMoneyOutDialogContext };

src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.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';
+
+/**
+ * Owner drawingsfloating actions.
+ */
+function OwnerDrawingsFloatingActions({
+  // #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)(OwnerDrawingsFloatingActions);

src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+
+// styles
+
+import { AppToaster } from 'components';
+import { CreateOwnerDrawingsFormSchema } from './OwnerDrawingsForm.schema';
+import OwnerDrawingsFormContent from './OwnerDrawingsFormContent';
+
+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: '',
+  reference_no: '',
+  equity_account_id: '',
+  account_id: '',
+  description: '',
+  published: '',
+};
+
+/**
+ * Owner drawings form.
+ */
+function OwnerDrawingsForm({
+  // #withDialogActions
+  closeDialog,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { accountId, submitPayload } = useMoneyOutDialogContext();
+
+  // Initial form values.
+  const initialValues = {
+    ...defaultInitialValues,
+    currency_code: base_currency,
+    account_id: accountId,
+  };
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {
+      ...values,
+      published: submitPayload.publish,
+    };
+    setSubmitting(true);
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateOwnerDrawingsFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <OwnerDrawingsFormContent />
+    </Formik>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withCurrentOrganization(),
+)(OwnerDrawingsForm);

src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js

@@ -0,0 +1,21 @@
+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(),
+  reference_no: Yup.string(),
+  account_id: Yup.number().required(),
+  equity_account_id: Yup.string()
+    .required()
+    .label(intl.get('cash_flow_transaction.label_equity_account')),
+  description: Yup.string()
+    .min(3)
+    .max(DATATYPES_LENGTH.TEXT)
+    .label(intl.get('description')),
+  published: Yup.boolean(),
+});
+
+export const CreateOwnerDrawingsFormSchema = Schema;

src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+
+import OwnerDrawingsFormFields from './OwnerDrawingsFormFields';
+import OwnerDrawingsFloatingActions from './OwnerDrawingsFloatingActions';
+
+/**
+ * Owner drawings form content.
+ */
+export default function OwnerDrawingsFormContent() {
+  return (
+    <Form>
+      <OwnerDrawingsFormFields />
+      <OwnerDrawingsFloatingActions />
+    </Form>
+  );
+}

src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js

@@ -0,0 +1,188 @@
+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,
+} from 'components';
+import { DateInput } from '@blueprintjs/datetime';
+import { useAutofocus } from 'hooks';
+import { FieldRequiredHint, Col, Row } from 'components';
+
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from 'utils';
+import { CLASSES } from 'common/classes';
+import { useMoneyOutDialogContext } from '../MoneyOutProvider';
+
+/**
+ * Owner drawings form fields.
+ */
+function OwnerDrawingsFormFields() {
+  // Money out 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}>
+          {/*------------ equitty account -----------*/}
+          <FastField name={'equity_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'}
+              >
+                <AccountsSuggestField
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('equity_account_id', id)
+                  }
+                  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 OwnerDrawingsFormFields;

src/containers/Dialogs/MoneyOutDialog/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'redux';
+
+const MoneyOutDialogContent = React.lazy(() =>
+  import('./MoneyOutDialogContent'),
+);
+
+/**
+ * Money out dialog.
+ */
+function MoneyOutDialog({
+  dialogName,
+  payload = { action: '', account_type: null, account_id: null },
+  isOpen,
+}) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'cash_flow_transaction.money_out'} />}
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--money-out'}
+    >
+      <DialogSuspense>
+        <MoneyOutDialogContent
+          dialogName={dialogName}
+          accountId={payload.account_id}
+          accountType={payload.account_type}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(MoneyOutDialog);

src/hooks/query/index.js

@@ -28,3 +28,4 @@ export * from './UniversalSearch/UniversalSearch';
 export * from './GenericResource';
 export * from './jobs';
 export * from './misc';
+export * from './cashflowAccounts'

src/hooks/query/types.js

@@ -99,7 +99,7 @@ const SETTING = {
   SETTING_RECEIPTS: 'SETTING_RECEIPTS',
   SETTING_PAYMENT_RECEIVES: 'SETTING_PAYMENT_RECEIVES',
   SETTING_MANUAL_JOURNALS: 'SETTING_MANUAL_JOURNALS',
-  SETTING_ITEMS: 'SETTING_ITEMS'
+  SETTING_ITEMS: 'SETTING_ITEMS',
 };
 
 const ORGANIZATIONS = {
@@ -132,6 +132,12 @@ const CONTACTS = {
   CONTACT: 'CONTACT',
 };
 
+const CASH_FLOW_ACCOUNTS = {
+  CASH_FLOW_ACCOUNTS: 'CASH_FLOW_ACCOUNTS',
+  CASH_FLOW_TRANSACTIONS: 'CASH_FLOW_TRANSACTIONS',
+  CASH_FLOW_TRANSACTION: 'CASH_FLOW_TRANSACTION',
+};
+
 export default {
   ...ACCOUNTS,
   ...BILLS,
@@ -154,4 +160,5 @@ export default {
   ...MANUAL_JOURNALS,
   ...LANDED_COSTS,
   ...CONTACTS,
+  ...CASH_FLOW_ACCOUNTS,
 };

src/lang/en/index.json

@@ -221,6 +221,7 @@
   "manual_journal": "Manual Journal",
   "make_journal": "Make Journal",
   "banking": "Banking",
+  "cash_flow": "Cash Flow",
   "sales": "Sales",
   "purchases": "Purchases",
   "financial_reports": "Financial Reports",
@@ -820,7 +821,7 @@
   "invoice_date": "Invoice date",
   "invoice_amount": "Invoice amount",
   "make_payment": "Make Payment",
-"add_payment": "Add Payment",
+  "add_payment": "Add Payment",
   "quick_receive_payment": "Quick Receive Payment",
   "amount_received": "Amount Received",
   "payment_no": "Payment No.",
@@ -1119,6 +1120,7 @@
   "transaction_number": "Transaction number",
   "transaction_line": "Transaction line",
   "allocation_method": "Allocation method",
+  "other_income_account":"Other income account",
   "valuation": "Valuation",
   "select_transaction": "Select transaction account",
   "details": "Details",
@@ -1359,5 +1361,29 @@
   "vendors.option_without_zero_balance.hint": "Include vendors and exclude that ones have zero-balance.",
   "vendors.option_with_transactions": "Vendors with transactions",
   "vendors.option_with_transactions.hint": "Include vendors that onces have transactions on the given date period only.",
-  "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully."
+  "landed_cost.action.delete.success_message": "The landed cost has been deleted successfully.",
+  "siebar.cashflow.label_cash_and_bank_accounts": "Cash & Bank accounts",
+ 
+  "cash_flow.label_account_transcations": "Account Transcations",
+  "cash_flow.label.deposit":"Deposit",
+  "cash_flow.label.withdrawal":"Withdrawal",
+  "cash_flow.label.running_balance":"Running balance",
+  "cash_flow.label.add_cash_account":"Add Cash account",
+  "cash_flow.label.add_bank_account":"Add Bank account",
+  "cash_flow.label.add_money_in":"Add Money In",
+  "cash_flow.label.add_money_out":"Add Money Out",
+  "cash_flow.option_owner_contribution":"Owner contribution",
+  "cash_flow.option_other_income":"Other income",
+  "cash_flow.option_owner_drawings":"Owner drawings",
+  "cash_flow.option_expenses":"Expenes",
+  "cash_flow.option_vendor_payment":"Vendor payment",
+  "cash_flow_transaction.label_equity_account":"Equity 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",
+  "save_and_publish": "Save & Publish"
+ 
 }
+
+

src/routes/dashboard.js

@@ -1,12 +1,10 @@
-
 import { lazy } from 'react';
 import intl from 'react-intl-universal';
 import { RESOURCES_TYPES } from '../common/resourcesTypes';
 
-
 const SUBSCRIPTION_TYPE = {
   MAIN: 'main',
-}
+};
 // const BASE_URL = '/dashboard';
 
 export const getDashboardRoutes = () => [
@@ -291,7 +289,9 @@ export const getDashboardRoutes = () => [
       ),
     ),
     breadcrumb: intl.get('customers_transactions'),
-    hint: intl.get('reports_every_transaction_going_in_and_out_of_each_customer'),
+    hint: intl.get(
+      'reports_every_transaction_going_in_and_out_of_each_customer',
+    ),
     pageTitle: intl.get('customers_transactions'),
     backLink: true,
     sidebarExpand: false,
@@ -305,7 +305,9 @@ export const getDashboardRoutes = () => [
       ),
     ),
     breadcrumb: intl.get('vendors_transactions'),
-    hint: intl.get('reports_every_transaction_going_in_and_out_of_each_vendor_supplier'),
+    hint: intl.get(
+      'reports_every_transaction_going_in_and_out_of_each_vendor_supplier',
+    ),
     pageTitle: intl.get('vendors_transactions'),
     backLink: true,
     sidebarExpand: false,
@@ -717,7 +719,7 @@ export const getDashboardRoutes = () => [
     path: `/billing`,
     component: lazy(() => import('containers/Subscriptions/BillingForm')),
     breadcrumb: intl.get('new_billing'),
-    subscriptionInactive: [SUBSCRIPTION_TYPE.MAIN]
+    subscriptionInactive: [SUBSCRIPTION_TYPE.MAIN],
   },
   // Payment modes.
   {
@@ -762,6 +764,28 @@ export const getDashboardRoutes = () => [
     defaultSearchResource: RESOURCES_TYPES.PAYMENT_MADE,
     subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
   },
+  // Cash flow
+  {
+    path: `/account/:id/transactions`,
+    component: lazy(() =>
+      import('containers/CashFlow/AccountTransactions/AccountTransactionsList'),
+    ),
+    sidebarExpand: false,
+    backLink: true,
+    pageTitle: intl.get('cash_flow.label_account_transcations'),
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+  {
+    path: `/cashflow-accounts`,
+    component: lazy(() =>
+      import('containers/CashFlow/CashFlowAccounts/CashFlowAccountsList'),
+    ),
+    backLink: true,
+    // breadcrumb: intl.get('homepage'),
+    pageTitle: intl.get('siebar.cashflow.label_cash_and_bank_accounts'),
+    subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
+  },
+
   // Homepage
   {
     path: `/`,

src/style/pages/CashFlow/CashflowTransactionForm.scss

@@ -0,0 +1,30 @@
+.dialog--money-in {
+  .bp3-form-group {
+    margin-bottom: 15px;
+
+    label.bp3-label {
+      font-size: 13px;
+      margin-bottom: 3px;
+    }
+  }
+  .form-group {
+    &--description {
+      .bp3-form-content {
+        textarea {
+          width: 100%;
+          min-width: 100%;
+          font-size: 14px;
+        }
+      }
+    }
+    &--reference-no,
+    &--amount,
+    &--cashflow_account_id {
+      max-width: 270px;
+    }
+  }
+
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+}