QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 20:30:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Money in & out Dialog.

Browse Source
This commit is contained in:
elforjani13
2021-10-13 19:56:48 +02:00
parent b848553cf7
commit 2078b6bc99
29 changed files with 1458 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/common/cashflowOptions.js Normal file
View File

@@ -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: '',
},
];

4
src/components/DialogsContainer.js
View File

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

32
src/config/sidebarMenu.js
View File

@@ -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: [

20
src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js Normal file
View File

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

20
src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js Normal file
View File

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

42
src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js Normal file
View File

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

76
src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.js Normal file
View File

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

91
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js Normal file
View File

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

22
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js Normal file
View File

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

17
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js Normal file
View File

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

186
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js Normal file
View File

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

91
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js Normal file
View File

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

22
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js Normal file
View File

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

17
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js Normal file
View File

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

186
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js Normal file
View File

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

36
src/containers/Dialogs/MoneyInDialog/index.js Normal file
View File

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

20
src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js Normal file
View File

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

37
src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js Normal file
View File

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

76
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js Normal file
View File

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

72
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js Normal file
View File

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

21
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js Normal file
View File

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

17
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js Normal file
View File

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

188
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js Normal file
View File

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

39
src/containers/Dialogs/MoneyOutDialog/index.js Normal file
View File

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

1
src/hooks/query/index.js
View File

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

9
src/hooks/query/types.js
View File

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

32
src/lang/en/index.json
View File

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

38
src/routes/dashboard.js
View File

@@ -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 = () => [
@@ -84,7 +82,7 @@ export const getDashboardRoutes = () => [
loader: () => import('containers/Items/ItemFormPage'),
}),
breadcrumb: intl.get('duplicate_item'),
defaultSearchResource: RESOURCES_TYPES.ITEM,
defaultSearchResource: RESOURCES_TYPES.ITEM,
subscriptionActive: [SUBSCRIPTION_TYPE.MAIN],
},
{
@@ -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: `/`,

30
src/style/pages/CashFlow/CashflowTransactionForm.scss Normal file
View File

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