mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
feat: AR aging summary sheet frontend.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,127 @@
|
||||
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 ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import ARAgingSummaryHeader from './ARAgingSummaryHeader';
|
||||
import ReceivableAgingSummaryTable from './ARAgingSummaryTable';
|
||||
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withARAgingSummaryActions from './withARAgingSummaryActions';
|
||||
import withARAgingSummary from './withARAgingSummary';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { transfromFilterFormToQuery } from './common';
|
||||
|
||||
/**
|
||||
* AR aging summary report.
|
||||
*/
|
||||
function ReceivableAgingSummarySheet({
|
||||
// #withSettings
|
||||
organizationName,
|
||||
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
setDashboardBackLink,
|
||||
|
||||
// #withARAgingSummaryActions
|
||||
requestReceivableAgingSummary,
|
||||
refreshARAgingSummary,
|
||||
toggleFilterARAgingSummary,
|
||||
|
||||
// #withARAgingSummary
|
||||
ARAgingSummaryRefresh,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [query, setQuery] = useState({
|
||||
asDate: moment().endOf('day').format('YYYY-MM-DD'),
|
||||
agingBeforeDays: 30,
|
||||
agingPeriods: 3,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'receivable_aging_summary' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (ARAgingSummaryRefresh) {
|
||||
queryCache.invalidateQueries('receivable-aging-summary');
|
||||
refreshARAgingSummary(false);
|
||||
}
|
||||
}, [ARAgingSummaryRefresh, refreshARAgingSummary]);
|
||||
|
||||
useEffect(() => {
|
||||
// Show the back link on dashboard topbar.
|
||||
setDashboardBackLink(true);
|
||||
|
||||
return () => {
|
||||
// Hide the back link on dashboard topbar.
|
||||
setDashboardBackLink(false);
|
||||
};
|
||||
}, [setDashboardBackLink]);
|
||||
|
||||
// Handle fetching receivable aging summary report.
|
||||
const fetchARAgingSummarySheet = useQuery(
|
||||
['receivable-aging-summary', query],
|
||||
(key, q) =>
|
||||
requestReceivableAgingSummary({
|
||||
...transfromFilterFormToQuery(q),
|
||||
}),
|
||||
{ manual: true },
|
||||
);
|
||||
|
||||
// Handle fetch the data of receivable aging summary sheet.
|
||||
const handleFetchData = useCallback((...args) => {}, []);
|
||||
|
||||
const handleFilterSubmit = useCallback(
|
||||
(filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
|
||||
};
|
||||
setQuery(_filter);
|
||||
refreshARAgingSummary(true);
|
||||
toggleFilterARAgingSummary(false);
|
||||
},
|
||||
[refreshARAgingSummary, toggleFilterARAgingSummary],
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<ARAgingSummaryActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<FinancialStatement>
|
||||
<ARAgingSummaryHeader
|
||||
pageFilter={query}
|
||||
onSubmitFilter={handleFilterSubmit}
|
||||
/>
|
||||
<div class="financial-statement__body">
|
||||
<ReceivableAgingSummaryTable
|
||||
organizationName={organizationName}
|
||||
receivableAgingSummaryQuery={query}
|
||||
onFetchData={handleFetchData}
|
||||
/>
|
||||
</div>
|
||||
</FinancialStatement>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withARAgingSummaryActions,
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
organizationName: organizationSettings.name,
|
||||
})),
|
||||
withARAgingSummary(({ ARAgingSummaryRefresh }) => ({
|
||||
ARAgingSummaryRefresh: ARAgingSummaryRefresh,
|
||||
})),
|
||||
)(ReceivableAgingSummarySheet);
|
||||
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarDivider,
|
||||
NavbarGroup,
|
||||
Classes,
|
||||
Button,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import Icon from 'components/Icon';
|
||||
|
||||
import withARAgingSummary from './withARAgingSummary';
|
||||
import withARAgingSummaryActions from './withARAgingSummaryActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* AR Aging summary sheet - Actions bar.
|
||||
*/
|
||||
function ARAgingSummaryActionsBar({
|
||||
// #withReceivableAging
|
||||
receivableAgingFilter,
|
||||
|
||||
// #withReceivableAgingActions
|
||||
toggleFilterARAgingSummary,
|
||||
refreshARAgingSummary,
|
||||
}) {
|
||||
const handleFilterToggleClick = () => {
|
||||
toggleFilterARAgingSummary();
|
||||
};
|
||||
// Handles re-calculate report button.
|
||||
const handleRecalcReport = () => {
|
||||
refreshARAgingSummary(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--gray-highlight')}
|
||||
text={<T id={'recalc_report'} />}
|
||||
onClick={handleRecalcReport}
|
||||
icon={<Icon icon="refresh-16" iconSize={16} />}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon="cog-16" iconSize={16} />}
|
||||
text={
|
||||
receivableAgingFilter ? (
|
||||
<T id="hide_customizer" />
|
||||
) : (
|
||||
<T id={'customize_report'} />
|
||||
)
|
||||
}
|
||||
onClick={handleFilterToggleClick}
|
||||
active={receivableAgingFilter}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<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,
|
||||
withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
|
||||
receivableAgingFilter: receivableAgingSummaryFilter,
|
||||
})),
|
||||
)(ARAgingSummaryActionsBar);
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { Formik, Form } 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 ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
|
||||
|
||||
import withARAgingSummary from './withARAgingSummary';
|
||||
import withARAgingSummaryActions from './withARAgingSummaryActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* AR Aging Summary Report - Drawer Header.
|
||||
*/
|
||||
function ARAgingSummaryHeader({
|
||||
pageFilter,
|
||||
onSubmitFilter,
|
||||
receivableAgingFilter,
|
||||
|
||||
// #withReceivableAgingSummary
|
||||
receivableAgingRefresh,
|
||||
|
||||
// #withReceivableAgingSummaryActions
|
||||
refreshReceivableAgingSummary,
|
||||
toggleFilterARAgingSummary,
|
||||
}) {
|
||||
const validationSchema = Yup.object().shape({
|
||||
asDate: Yup.date().required().label('asDate'),
|
||||
agingBeforeDays: Yup.number()
|
||||
.required()
|
||||
.integer()
|
||||
.positive()
|
||||
.label('agingBeforeDays'),
|
||||
agingPeriods: Yup.number()
|
||||
.required()
|
||||
.integer()
|
||||
.positive()
|
||||
.label('agingPeriods'),
|
||||
});
|
||||
// Initial values.
|
||||
const initialValues = {
|
||||
asDate: moment(pageFilter.asDate).toDate(),
|
||||
agingBeforeDays: 30,
|
||||
agingPeriods: 3,
|
||||
};
|
||||
// Handle form submit.
|
||||
const handleSubmit = (values, { setSubmitting }) => {
|
||||
onSubmitFilter(values);
|
||||
setSubmitting(false);
|
||||
};
|
||||
// Handle cancel button click.
|
||||
const handleCancelClick = () => {
|
||||
toggleFilterARAgingSummary();
|
||||
};
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader isOpen={receivableAgingFilter}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Form>
|
||||
<Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
|
||||
<Tab
|
||||
id="general"
|
||||
title={<T id={'general'} />}
|
||||
panel={<ARAgingSummaryHeaderGeneral />}
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
<div class="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(
|
||||
withARAgingSummaryActions,
|
||||
withARAgingSummary(
|
||||
({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({
|
||||
receivableAgingFilter: receivableAgingSummaryFilter,
|
||||
receivableAgingRefresh: receivableAgingSummaryRefresh,
|
||||
}),
|
||||
),
|
||||
)(ARAgingSummaryHeader);
|
||||
@@ -0,0 +1,76 @@
|
||||
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 } from 'utils';
|
||||
|
||||
/**
|
||||
* AR Aging Summary - Drawer Header - General Fields.
|
||||
*/
|
||||
export default function ARAgingSummaryHeaderGeneral({}) {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
<FastField name={'asDate'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'as_date'} />}
|
||||
labelInfo={<FieldHint />}
|
||||
fill={true}
|
||||
intent={error && Intent.DANGER}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={value}
|
||||
onChange={(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={'agingBeforeDays'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'aging_before_days'} />}
|
||||
labelInfo={<FieldHint />}
|
||||
className={'form-group--aging-before-days'}
|
||||
intent={error && Intent.DANGER}
|
||||
>
|
||||
<InputGroup medium={true} intent={error && Intent.DANGER} {...field } />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
<FastField name={'agingPeriods'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'aging_periods'} />}
|
||||
labelInfo={<FieldHint />}
|
||||
className={'form-group--aging-periods'}
|
||||
intent={error && Intent.DANGER}
|
||||
>
|
||||
<InputGroup medium={true} intent={error && Intent.DANGER} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import DataTable from 'components/DataTable';
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
|
||||
import withARAgingSummary from './withARAgingSummary';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* AR aging summary table sheet.
|
||||
*/
|
||||
function ReceivableAgingSummaryTable({
|
||||
// #withReceivableAgingSummary
|
||||
receivableAgingRows,
|
||||
receivableAgingLoading,
|
||||
receivableAgingColumns,
|
||||
|
||||
// #ownProps
|
||||
onFetchData,
|
||||
organizationName,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const agingColumns = useMemo(() => {
|
||||
return receivableAgingColumns.map((agingColumn) => {
|
||||
return `${agingColumn.before_days} - ${
|
||||
agingColumn.to_days || 'And Over'
|
||||
}`;
|
||||
});
|
||||
}, [receivableAgingColumns]);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: <T id={'customer_name'} />,
|
||||
accessor: 'name',
|
||||
className: 'customer_name',
|
||||
sticky: 'left',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
Header: <T id={'current'} />,
|
||||
accessor: 'current',
|
||||
className: 'current',
|
||||
width: 120,
|
||||
},
|
||||
...agingColumns.map((agingColumn, index) => ({
|
||||
Header: agingColumn,
|
||||
accessor: `aging-${index }`,
|
||||
width: 120,
|
||||
})),
|
||||
{
|
||||
Header: (<T id={'total'} />),
|
||||
id: 'total',
|
||||
accessor: 'total',
|
||||
className: 'total',
|
||||
width: 140,
|
||||
},
|
||||
],
|
||||
[agingColumns],
|
||||
);
|
||||
|
||||
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
|
||||
|
||||
const handleFetchData = useCallback((...args) => {
|
||||
// onFetchData && onFetchData(...args);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
companyName={organizationName}
|
||||
name={'receivable-aging-summary'}
|
||||
sheetType={formatMessage({ id: 'receivable_aging_summary' })}
|
||||
asDate={new Date()}
|
||||
loading={receivableAgingLoading}
|
||||
>
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={columns}
|
||||
data={receivableAgingRows}
|
||||
rowClassNames={rowClassNames}
|
||||
onFetchData={handleFetchData}
|
||||
noInitialFetch={true}
|
||||
sticky={true}
|
||||
/>
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withARAgingSummary(
|
||||
({
|
||||
receivableAgingSummaryLoading,
|
||||
receivableAgingSummaryColumns,
|
||||
receivableAgingSummaryRows,
|
||||
}) => ({
|
||||
receivableAgingLoading: receivableAgingSummaryLoading,
|
||||
receivableAgingColumns: receivableAgingSummaryColumns,
|
||||
receivableAgingRows: receivableAgingSummaryRows,
|
||||
}),
|
||||
),
|
||||
)(ReceivableAgingSummaryTable);
|
||||
@@ -0,0 +1,5 @@
|
||||
import { mapKeys, snakeCase } from 'lodash';
|
||||
|
||||
export const transfromFilterFormToQuery = (form) => {
|
||||
return mapKeys(form, (v, k) => snakeCase(k));
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
getFinancialSheetFactory,
|
||||
getFinancialSheetAccountsFactory,
|
||||
getFinancialSheetColumnsFactory,
|
||||
getFinancialSheetQueryFactory,
|
||||
getFinancialSheetTableRowsFactory,
|
||||
} from 'store/financialStatement/financialStatements.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const mapStateToProps = (state, props) => {
|
||||
const getARAgingSheet = getFinancialSheetFactory('receivableAgingSummary');
|
||||
const getARAgingSheetColumns = getFinancialSheetColumnsFactory(
|
||||
'receivableAgingSummary',
|
||||
);
|
||||
const getARAgingSheetRows = getFinancialSheetTableRowsFactory(
|
||||
'receivableAgingSummary',
|
||||
);
|
||||
const {
|
||||
loading,
|
||||
filter,
|
||||
refresh,
|
||||
} = state.financialStatements.receivableAgingSummary;
|
||||
|
||||
const mapped = {
|
||||
receivableAgingSummarySheet: getARAgingSheet(state, props),
|
||||
receivableAgingSummaryColumns: getARAgingSheetColumns(state, props),
|
||||
receivableAgingSummaryRows: getARAgingSheetRows(state, props),
|
||||
receivableAgingSummaryLoading: loading,
|
||||
receivableAgingSummaryFilter: filter,
|
||||
ARAgingSummaryRefresh: refresh,
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
fetchReceivableAgingSummary,
|
||||
receivableAgingSummaryRefresh,
|
||||
} from 'store/financialStatement/financialStatements.actions';
|
||||
|
||||
const mapActionsToProps = (dispatch) => ({
|
||||
requestReceivableAgingSummary: (query) =>
|
||||
dispatch(fetchReceivableAgingSummary({ query })),
|
||||
toggleFilterARAgingSummary: () =>
|
||||
dispatch({
|
||||
type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
|
||||
}),
|
||||
refreshARAgingSummary: (refresh) =>
|
||||
dispatch(receivableAgingSummaryRefresh(refresh)),
|
||||
});
|
||||
|
||||
export default connect(null, mapActionsToProps);
|
||||
Reference in New Issue
Block a user