This commit is contained in:
a.bouhuolia
2021-02-21 19:36:06 +02:00
41 changed files with 2112 additions and 226 deletions

View File

@@ -0,0 +1,128 @@
import React, { useEffect, useState, useCallback } from 'react';
import { useIntl } from 'react-intl';
import { queryCache, useQuery } from 'react-query';
import moment from 'moment';
import { FinancialStatement } from 'components';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
import APAgingSummaryHeader from './APAgingSummaryHeader';
import APAgingSummaryTable from './APAgingSummaryTable';
import withSettings from 'containers/Settings/withSettings';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
import withAPAgingSummary from './withAPAgingSummary';
import { transformFilterFormToQuery } from './common';
import { compose } from 'utils';
import 'style/pages/FinancialStatements/ARAgingSummary.scss';
/**
* AP aging summary report.
*/
function APAgingSummary({
// #withSettings
organizationName,
// #withDashboardActions
changePageTitle,
setDashboardBackLink,
// #withAPAgingSummary
APAgingSummaryRefresh,
// #withAPAgingSummaryActions
requestPayableAgingSummary,
refreshAPAgingSummary,
toggleFilterAPAgingSummary,
}) {
const { formatMessage } = useIntl();
const [query, setQuery] = useState({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
agingBeforeDays: 30,
agingPeriods: 3,
});
// handle fetching payable aging summary report.
const fetchAPAgingSummarySheet = useQuery(
['payable-aging-summary', query],
(key, _query) =>
requestPayableAgingSummary({
...transformFilterFormToQuery(_query),
}),
{ enable: true },
);
useEffect(() => {
changePageTitle(formatMessage({ id: 'payable_aging_summary' }));
}, [changePageTitle, formatMessage]);
useEffect(() => {
if (APAgingSummaryRefresh) {
queryCache.invalidateQueries('payable-aging-summary');
refreshAPAgingSummary(false);
}
}, [APAgingSummaryRefresh, refreshAPAgingSummary]);
useEffect(() => {
setDashboardBackLink(true);
return () => {
setDashboardBackLink(false);
};
}, [setDashboardBackLink]);
const handleFilterSubmit = (filter) => {
const _filter = {
...filter,
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
};
setQuery(_filter);
refreshAPAgingSummary(true);
toggleFilterAPAgingSummary(false);
};
const handleNumberFormatSubmit = (numberFormat) => {
setQuery({
...query,
numberFormat,
});
refreshAPAgingSummary(true);
};
return (
<DashboardInsider>
<APAgingSummaryActionsBar
numberFormat={query.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<DashboardPageContent>
<FinancialStatement>
<APAgingSummaryHeader
pageFilter={query}
onSubmitFilter={handleFilterSubmit}
/>
<div className={'financial-statement__body'}>
<APAgingSummaryTable organizationName={organizationName} />
</div>
</FinancialStatement>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
withDashboardActions,
withAPAgingSummaryActions,
withSettings(({ organizationSettings }) => ({
organizationName: organizationSettings.name,
})),
withAPAgingSummary(({ APAgingSummaryRefresh }) => ({
APAgingSummaryRefresh,
})),
)(APAgingSummary);

View File

@@ -0,0 +1,123 @@
import React from 'react';
import {
NavbarDivider,
NavbarGroup,
Classes,
Button,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { Icon } from 'components';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import withAPAgingSummary from './withAPAgingSummary';
import withARAgingSummaryActions from './withAPAgingSummaryActions';
import { compose } from 'utils';
/**
* AP Aging summary sheet - Actions bar.
*/
function APAgingSummaryActionsBar({
//#withPayableAgingSummary
payableAgingFilter,
payableAgingLoading,
//#withARAgingSummaryActions
toggleFilterAPAgingSummary,
refreshAPAgingSummary,
//#ownProps
numberFormat,
onNumberFormatSubmit,
}) {
const handleFilterToggleClick = () => toggleFilterAPAgingSummary();
// handle recalculate report button.
const handleRecalculateReport = () => refreshAPAgingSummary(true);
// handle number format submit.
const handleNumberFormatSubmit = (numberFormat) =>
safeInvoke(onNumberFormatSubmit, numberFormat);
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
text={<T id={'recalc_report'} />}
onClick={handleRecalculateReport}
icon={<Icon icon="refresh-16" iconSize={16} />}
/>
<NavbarDivider />
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={
payableAgingFilter ? (
<T id={'hide_customizer'} />
) : (
<T id={'customize_report'} />
)
}
onClick={handleFilterToggleClick}
active={payableAgingFilter}
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={payableAgingLoading}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'format'} />}
icon={<Icon icon="numbers" width={23} height={16} />}
/>
</Popover>
<Button
className={Classes.MINIMAL}
text={<T id={'filter'} />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" iconSize={16} />}
text={<T id={'print'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
export default compose(
withARAgingSummaryActions,
withAPAgingSummary(
({ payableAgingSummaryLoading, payableAgingSummaryFilter }) => ({
payableAgingLoading: payableAgingSummaryLoading,
payableAgingFilter: payableAgingSummaryFilter,
}),
),
)(APAgingSummaryActionsBar);

View File

@@ -0,0 +1,90 @@
import React from 'react';
import { FormattedMessage as T } from 'react-intl';
import { Formik, Form, validateYupSchema } from 'formik';
import * as Yup from 'yup';
import moment from 'moment';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
import withAPAgingSummary from './withAPAgingSummary';
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
import { compose } from 'utils';
/**
* AP Aging Summary Report - Drawer Header.
*/
function APAgingSummaryHeader({
pageFilter,
onSubmitFilter,
payableAgingFilter,
// #withPayableAgingSummaryActions
toggleFilterAPAgingSummary,
}) {
const validationSchema = Yup.object({
as_date: Yup.date().required().label('asDate'),
aging_days_before: Yup.number()
.required()
.integer()
.positive()
.label('agingBeforeDays'),
aging_periods: Yup.number()
.required()
.integer()
.positive()
.label('agingPeriods'),
});
// initial values.
const initialValues = {
as_date: moment(pageFilter.asDate).toDate(),
aging_days_before: 30,
aging_periods: 3,
};
// handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
setSubmitting(false);
};
// handle cancel button click.
const handleCancelClick = () => toggleFilterAPAgingSummary();
return (
<FinancialStatementHeader isOpen={payableAgingFilter}>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
<Form>
<Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
<Tab
id={'general'}
title={<T id={'general'} />}
panel={<APAgingSummaryHeaderGeneral />}
/>
</Tabs>
<div className={'financial-header-drawer__footer'}>
<Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
<T id={'calculate_report'} />
</Button>
<Button onClick={handleCancelClick} minimal={true}>
<T id={'cancel'} />
</Button>
</div>
</Form>
</Formik>
</FinancialStatementHeader>
);
}
export default compose(
withAPAgingSummaryActions,
withAPAgingSummary(({ payableAgingSummaryFilter }) => ({
payableAgingFilter: payableAgingSummaryFilter,
})),
)(APAgingSummaryHeader);

View File

@@ -0,0 +1,77 @@
import React from 'react';
import { FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { Row, Col, FieldHint } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
/**
* AP Aging Summary - Drawer Header - General Fields.
*/
export default function APAgingSummaryHeaderGeneral() {
return (
<div>
<Row>
<Col xs={5}>
<FastField name={'asDate'}>
{({ form, field: { value }, meta: { error } }) => (
<FormGroup
label={<T id={'as_date'} />}
labelInfo={<FieldHint />}
fill={true}
intent={inputIntent({ error })}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((selectedDate) => {
form.setFieldValue('asDate', selectedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
minimal={true}
fill={true}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'aging_days_before'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
intent={inputIntent({ error })}
>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'aging_periods'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_periods'} />}
labelInfo={<FieldHint />}
intent={inputIntent({ error })}
>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
</div>
);
}

View File

@@ -0,0 +1,103 @@
import React, { useMemo, useCallback } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { DataTable } from 'components';
import FinancialSheet from 'components/FinancialSheet';
import withAPAgingSummary from './withAPAgingSummary';
import { compose, getColumnWidth } from 'utils';
/**
* AP aging summary table sheet.
*/
function APAgingSummaryTable({
//#withPayableAgingSummary
payableAgingColumns,
payableAgingRows,
payableAgingLoading,
//#ownProps
organizationName,
}) {
const { formatMessage } = useIntl();
const agingColumns = useMemo(
() =>
payableAgingColumns.map((agingColumn) => {
return `${agingColumn.before_days} - ${
agingColumn.to_days || 'And Over'
}`;
}),
[payableAgingColumns],
);
const columns = useMemo(
() => [
{
Header: <T id={'vendor_name'} />,
accessor: 'name',
className: 'name',
width: 240,
sticky: 'left',
textOverview: true,
},
{
Header: <T id={'current'} />,
accessor: 'current',
className: 'current',
width: getColumnWidth(payableAgingRows, `current`, {
minWidth: 120,
}),
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
accessor: `aging-${index}`,
width: getColumnWidth(payableAgingRows, `aging-${index}`, {
minWidth: 120,
}),
})),
{
Header: <T id={'total'} />,
accessor: 'total',
width: getColumnWidth(payableAgingRows, 'total', {
minWidth: 120,
}),
},
],
[payableAgingRows],
);
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
return (
<FinancialSheet
companyName={organizationName}
name={'payable-aging-summary'}
sheetType={formatMessage({ id: 'payable_aging_summary' })}
asDate={new Date()}
loading={payableAgingLoading}
>
<DataTable
className={'bigcapital-datatable--financial-report'}
columns={columns}
data={payableAgingRows}
rowClassNames={rowClassNames}
noInitialFetch={true}
sticky={true}
/>
</FinancialSheet>
);
}
export default compose(
withAPAgingSummary(
({
payableAgingSummaryLoading,
payableAgingSummaryColumns,
payableAgingSummaryRows,
}) => ({
payableAgingLoading: payableAgingSummaryLoading,
payableAgingColumns: payableAgingSummaryColumns,
payableAgingRows: payableAgingSummaryRows,
}),
),
)(APAgingSummaryTable);

View File

@@ -0,0 +1,5 @@
import { transformToCamelCase, flatObject } from 'utils';
export const transformFilterFormToQuery = (form) => {
return flatObject(transformToCamelCase(form));
};

View File

@@ -0,0 +1,35 @@
import { connect } from 'react-redux';
import {
getFinancialSheetFactory,
getFinancialSheetColumnsFactory,
getFinancialSheetTableRowsFactory,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const getAPAgingSheet = getFinancialSheetFactory('payableAgingSummary');
const getAPAgingSheetColumns = getFinancialSheetColumnsFactory(
'payableAgingSummary',
);
const getAPAgingSheetRows = getFinancialSheetTableRowsFactory(
'payableAgingSummary',
);
const {
loading,
filter,
refresh,
} = state.financialStatements.payableAgingSummary;
const mapped = {
payableAgingSummarySheet: getAPAgingSheet(state, props),
payableAgingSummaryColumns: getAPAgingSheetColumns(state, props),
payableAgingSummaryRows: getAPAgingSheetRows(state, props),
payableAgingSummaryLoading: loading,
payableAgingSummaryFilter: filter,
APAgingSummaryRefresh: refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

View File

@@ -0,0 +1,18 @@
import { connect } from 'react-redux';
import {
fetchPayableAginSummary,
payableAgingSummaryRefresh,
} from 'store/financialStatement/financialStatements.actions';
const mapActionsToProps = (dispatch) => ({
requestPayableAgingSummary: (query) =>
dispatch(fetchPayableAginSummary({ query })),
refreshAPAgingSummary: (refresh) =>
dispatch(payableAgingSummaryRefresh(refresh)),
toggleFilterAPAgingSummary: () =>
dispatch({
type: 'PAYABLE_AGING_SUMMARY_FILTER_TOGGLE',
}),
});
export default connect(null, mapActionsToProps);

View File

@@ -29,16 +29,13 @@ function ReceivableAgingSummarySheet({
});
// Handle filter submit.
const handleFilterSubmit = useCallback(
(filter) => {
const _filter = {
...filter,
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
};
setFilter(_filter);
},
[],
);
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
};
setFilter(_filter);
}, []);
// Handle number format submit.
const handleNumberFormatSubmit = (numberFormat) => {
@@ -49,8 +46,8 @@ function ReceivableAgingSummarySheet({
<ARAgingSummaryProvider filter={filter}>
<ARAgingSummaryActionsBar
numberFormat={filter.numberFormat}
onNumberFormatSubmit={handleNumberFormatSubmit}/>
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<DashboardPageContent>
<FinancialStatement>
<ARAgingSummaryHeader
@@ -58,9 +55,7 @@ function ReceivableAgingSummarySheet({
onSubmitFilter={handleFilterSubmit}
/>
<div class="financial-statement__body">
<ARAgingSummaryTable
organizationName={organizationName}
/>
<ARAgingSummaryTable organizationName={organizationName} />
</div>
</FinancialStatement>
</DashboardPageContent>

View File

@@ -48,7 +48,6 @@ function ARAgingSummaryActionsBar({
const handleNumberFormatSubmit = (numberFormat) => {
safeInvoke(onNumberFormatSubmit, numberFormat);
};
return (
<DashboardActionsBar>
<NavbarGroup>
@@ -98,7 +97,7 @@ function ARAgingSummaryActionsBar({
className={Classes.MINIMAL}
text={<T id={'filter'} />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
/>
<NavbarDivider />
<Button