feat: AR aging summary sheet frontend.

This commit is contained in:
a.bouhuolia
2021-01-13 20:58:58 +02:00
parent 7680150a31
commit 343185b8bd
27 changed files with 670 additions and 594 deletions

View File

@@ -1,7 +1,6 @@
import React, { lazy } from 'react';
import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,5 @@
import { mapKeys, snakeCase } from 'lodash';
export const transfromFilterFormToQuery = (form) => {
return mapKeys(form, (v, k) => snakeCase(k));
};

View File

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

View File

@@ -7,11 +7,11 @@ import {
const mapActionsToProps = (dispatch) => ({
requestReceivableAgingSummary: (query) =>
dispatch(fetchReceivableAgingSummary({ query })),
toggleFilterReceivableAgingSummary: () =>
toggleFilterARAgingSummary: () =>
dispatch({
type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
}),
refreshReceivableAgingSummary: (refresh) =>
refreshARAgingSummary: (refresh) =>
dispatch(receivableAgingSummaryRefresh(refresh)),
});

View File

@@ -71,7 +71,7 @@ function BalanceSheet({
// Hide the back link on dashboard topbar.
setDashboardBackLink(false);
};
});
}, [setDashboardBackLink]);
// Handle re-fetch balance sheet after filter change.
const handleFilterSubmit = useCallback(

View File

@@ -49,7 +49,13 @@ function BalanceSheetActionsBar({
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={!balanceSheetFilter ? <T id={'customize_report'} /> : <T id={'hide_customizer'} />}
text={
!balanceSheetFilter ? (
<T id={'customize_report'} />
) : (
<T id={'hide_customizer'} />
)
}
onClick={handleFilterToggleClick}
active={balanceSheetFilter}
/>

View File

@@ -1,89 +0,0 @@
import React, { useEffect, useState, useCallback } from 'react';
import { useIntl } from 'react-intl';
import { useQuery } from 'react-query';
import moment from 'moment';
import { FinancialStatement } from 'components';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ReceivableAgingSummaryActionsBar from './ReceivableAgingSummaryActionsBar';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ReceivableAgingSummaryHeader from './ReceivableAgingSummaryHeader'
import ReceivableAgingSummaryTable from './ReceivableAgingSummaryTable';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withReceivableAgingSummaryActions from './withReceivableAgingSummaryActions';
import { compose } from 'utils';
function ReceivableAgingSummarySheet({
// #withDashboardActions
changePageTitle,
// #withReceivableAgingSummaryActions
requestReceivableAgingSummary,
}) {
const { formatMessage } = useIntl();
const [query, setQuery] = useState({
as_date: moment().endOf('day').format('YYYY-MM-DD'),
aging_before_days: 30,
aging_periods: 3,
});
const [refresh, setRefresh] = useState(true);
useEffect(() => {
changePageTitle(formatMessage({ id: 'receivable_aging_summary' }));
}, []);
const fetchSheet = useQuery(
['receivable-aging-summary', query],
(key, q) => requestReceivableAgingSummary(q),
{ manual: true });
// Handle fetch the data of receivable aging summary sheet.
const handleFetchData = useCallback((...args) => {
setRefresh(true);
}, []);
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
as_date: moment(filter.as_date).format('YYYY-MM-DD'),
};
setQuery(_filter);
setRefresh(true);
}, []);
useEffect(() => {
if (refresh) {
fetchSheet.refetch({ force: true });
setRefresh(false);
}
}, [fetchSheet, refresh]);
return (
<DashboardInsider>
<ReceivableAgingSummaryActionsBar />
<DashboardPageContent>
<FinancialStatement>
<ReceivableAgingSummaryHeader
pageFilter={query}
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">
<ReceivableAgingSummaryTable
receivableAgingSummaryQuery={query}
onFetchData={handleFetchData}
/>
</div>
</FinancialStatement>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
withDashboardActions,
withReceivableAgingSummaryActions
)(ReceivableAgingSummarySheet);

View File

@@ -1,110 +0,0 @@
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 { If } from 'components';
import withReceivableAging from './withReceivableAgingSummary';
import withReceivableAgingActions from './withReceivableAgingSummaryActions';
import { compose } from 'utils';
function ReceivableAgingSummaryActionsBar({
// #withReceivableAging
receivableAgingFilter,
// #withReceivableAgingActions
toggleFilterReceivableAgingSummary,
refreshReceivableAgingSummary,
}) {
const handleFilterToggleClick = () => {
toggleFilterReceivableAgingSummary();
};
const handleRecalcReport = () => {
refreshReceivableAgingSummary(true);
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={<T id={'customize_report'} />}
/>
<NavbarDivider />
<Button
className={classNames(
Classes.MINIMAL,
'button--gray-highlight',
)}
text={<T id={'recalc_report'} />}
icon={<Icon icon="refresh-16" iconSize={16} />}
onClick={handleRecalcReport}
/>
<If condition={receivableAgingFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'hide_filter'} />}
onClick={handleFilterToggleClick}
icon={<Icon icon="arrow-to-top" />}
/>
</If>
<If condition={!receivableAgingFilter}>
<Button
className={Classes.MINIMAL}
text={<T id={'show_filter'} />}
onClick={handleFilterToggleClick}
icon={<Icon icon="arrow-to-bottom" />}
/>
</If>
<Popover
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'filter'} />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
</Popover>
<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(
withReceivableAgingActions,
withReceivableAging(({ receivableAgingSummaryFilter }) => ({
receivableAgingFilter: receivableAgingSummaryFilter,
})),
)(ReceivableAgingSummaryActionsBar)

View File

@@ -1,148 +0,0 @@
import React, { useCallback, useEffect } from 'react';
import { useIntl, FormattedMessage as T } from 'react-intl';
import { useFormik } from 'formik';
import { Row, Col } from 'react-grid-system';
import * as Yup from 'yup';
import {
Intent,
FormGroup,
InputGroup,
Position,
Button,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import moment from 'moment';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import { ErrorMessage, FieldHint, FieldRequiredHint } from 'components';
import { momentFormatter } from 'utils';
import withReceivableAging from './withReceivableAgingSummary';
import withReceivableAgingActions from './withReceivableAgingSummaryActions';
import { compose } from 'utils';
function ReceivableAgingSummaryHeader({
pageFilter,
onSubmitFilter,
receivableAgingFilter,
// #withReceivableAgingSummary
receivableAgingRefresh,
// #withReceivableAgingSummaryActions
refreshReceivableAgingSummary
}) {
const { formatMessage } = useIntl();
const {
values,
errors,
touched,
setFieldValue,
getFieldProps,
submitForm,
isSubmitting,
} = useFormik({
enableReinitialize: true,
initialValues: {
as_date: moment(pageFilter.as_date).toDate(),
aging_before_days: 30,
aging_periods: 3,
},
validationSchema: Yup.object().shape({
as_date: Yup.date().required().label('as_date'),
aging_before_days: Yup.number()
.required()
.integer()
.positive()
.label('aging_before_days'),
aging_periods: Yup.number()
.required()
.integer()
.positive()
.label('aging_periods'),
}),
onSubmit: (values, { setSubmitting }) => {
onSubmitFilter(values);
setSubmitting(false);
},
});
const handleDateChange = useCallback(
(name) => (date) => {
setFieldValue(name, date);
},
[],
);
// Handle submit filter submit button.
useEffect(() => {
if (receivableAgingRefresh) {
submitForm();
refreshReceivableAgingSummary(false);
}
}, [submitForm, receivableAgingRefresh]);
return (
<FinancialStatementHeader show={receivableAgingFilter}>
<Row>
<Col width={260}>
<FormGroup
label={formatMessage({ id: 'as_date' })}
labelInfo={<FieldHint />}
fill={true}
intent={errors.as_date && Intent.DANGER}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={values.as_date}
onChange={handleDateChange('as_date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
minimal={true}
fill={true}
/>
</FormGroup>
</Col>
<Col width={260}>
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-before-days'}
intent={errors.aging_before_days && Intent.DANGER}
>
<InputGroup
medium={true}
intent={errors.aging_before_days && Intent.DANGER}
{...getFieldProps('aging_before_days')}
/>
</FormGroup>
</Col>
<Col width={260}>
<FormGroup
label={<T id={'aging_periods'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-periods'}
intent={errors.aging_before_days && Intent.DANGER}
>
<InputGroup
medium={true}
intent={errors.aging_before_days && Intent.DANGER}
{...getFieldProps('aging_periods')}
/>
</FormGroup>
</Col>
</Row>
</FinancialStatementHeader>
);
}
export default compose(
withReceivableAgingActions,
withReceivableAging(({ receivableAgingSummaryFilter, receivableAgingSummaryRefresh }) => ({
receivableAgingFilter: receivableAgingSummaryFilter,
receivableAgingRefresh: receivableAgingSummaryRefresh
})),
)(ReceivableAgingSummaryHeader);

View File

@@ -1,99 +0,0 @@
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 Money from 'components/Money';
import withSettings from 'containers/Settings/withSettings';
import { compose } from 'utils';
import withReceivableAgingSummary from './withReceivableAgingSummary';
import withReceivableAgingSummaryTable from './withReceivableAgingSummaryTable';
function ReceivableAgingSummaryTable({
// #withPreferences
organizationSettings,
// #withReceivableAgingSummary
receivableAgingRows,
receivableAgingLoading,
receivableAgingColumns,
// #ownProps
onFetchData,
}) {
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: 'customer_name',
className: 'customer_name',
sticky: 'left',
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
accessor: (row) => {
const amount = row[`aging-${index}`];
if (row.rowType === 'total') {
return <Money amount={amount} currency={'USD'} />
}
return amount > 0 ? amount : '';
},
})),
{
Header: (<T id={'total'} />),
id: 'total',
accessor: (row) => {
return <Money amount={row.total} currency={'USD'} />;
},
className: 'total',
},
]), [agingColumns]);
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args);
}, []);
return (
<FinancialSheet
companyName={organizationSettings.name}
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(
withSettings,
withReceivableAgingSummaryTable,
withReceivableAgingSummary(({
receivableAgingSummaryLoading,
receivableAgingSummaryColumns,
receivableAgingSummaryRows,
}) => ({
receivableAgingLoading: receivableAgingSummaryLoading,
receivableAgingColumns: receivableAgingSummaryColumns,
receivableAgingRows: receivableAgingSummaryRows,
})),
)(ReceivableAgingSummaryTable);

View File

@@ -1,35 +0,0 @@
import { connect } from 'react-redux';
import {
getFinancialSheet,
getFinancialSheetColumns,
getFinancialSheetTableRows,
} from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const { receivableAgingSummaryIndex } = props;
const mapped = {
receivableAgingSummarySheet: getFinancialSheet(
state.financialStatements.receivableAgingSummary.sheets,
receivableAgingSummaryIndex,
),
receivableAgingSummaryColumns: getFinancialSheetColumns(
state.financialStatements.receivableAgingSummary.sheets,
receivableAgingSummaryIndex,
),
receivableAgingSummaryRows: getFinancialSheetTableRows(
state.financialStatements.receivableAgingSummary.sheets,
receivableAgingSummaryIndex,
),
receivableAgingSummaryLoading:
state.financialStatements.receivableAgingSummary.loading,
receivableAgingSummaryFilter:
state.financialStatements.receivableAgingSummary.filter,
receivableAgingSummaryRefresh:
state.financialStatements.receivableAgingSummary.refresh,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
}

View File

@@ -1,14 +0,0 @@
import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
import { connect } from 'react-redux';
const mapStateToProps = (state, props) => {
const { receivableAgingSummaryQuery } = props;
return {
receivableAgingSummaryIndex: getFinancialSheetIndexByQuery(
state.financialStatements.receivableAgingSummary.sheets,
receivableAgingSummaryQuery,
),
};
}
export default connect(mapStateToProps);

View File

@@ -954,4 +954,5 @@ export default {
delete_adjustment:'Delete Adjustment',
the_make_adjustment_has_been_successfully_created:
'The make adjustment has been successfully created.',
current: 'Current',
};

View File

@@ -135,16 +135,16 @@ export default [
}),
breadcrumb: 'Profit Loss Sheet',
},
// {
// path: '/financial-reports/receivable-aging-summary',
// component: LazyLoader({
// loader: () =>
// import(
// 'containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary'
// ),
// }),
// breadcrumb: 'Receivable Aging Summary',
// },
{
path: '/financial-reports/receivable-aging-summary',
component: LazyLoader({
loader: () =>
import(
'containers/FinancialStatements/ARAgingSummary/ARAgingSummary'
),
}),
breadcrumb: 'Receivable Aging Summary',
},
{
path: `/financial-reports/journal-sheet`,
component: LazyLoader({
@@ -236,7 +236,7 @@ export default [
breadcrumb: 'Vendors',
},
//Estimates
// Estimates
{
path: `/estimates/:id/edit`,
component: LazyLoader({

View File

@@ -157,7 +157,8 @@ export const fetchReceivableAgingSummary = ({ query }) => {
dispatch({
type: t.RECEIVABLE_AGING_SUMMARY_SET,
payload: {
aging: response.data.aging,
customers: response.data.data.customers,
total: response.data.data.total,
columns: response.data.columns,
query,
},
@@ -172,7 +173,7 @@ export const fetchReceivableAgingSummary = ({ query }) => {
})
.catch((error) => {
reject(error);
})
});
});
}

View File

@@ -78,6 +78,48 @@ export const generalLedgerToTableRows = (accounts) => {
}, []);
};
export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
const rows = [];
const mapAging = (agingPeriods) => {
return agingPeriods.reduce((acc, aging, index) => {
acc[`aging-${index}`] = aging.formatted_total;
return acc;
}, {});
};
sheet.customers.forEach((customer) => {
const agingRow = mapAging(customer.aging);
rows.push({
rowType: 'customer',
name: customer.customer_name,
...agingRow,
current: customer.current.formatted_total,
total: customer.total.formatted_total,
});
});
return [
...rows,
{
name: 'TOTAL',
rowType: 'total',
current: sheet.total.current.formatted_total,
...mapAging(sheet.total.aging),
total: sheet.total.total.formatted_total,
}
];
};
export const mapTrialBalanceSheetToRows = (sheet) => {
return [
{
name: 'Total',
...sheet.total,
},
...sheet.accounts,
];
};
export const profitLossToTableRowsMapper = (profitLoss) => {
return [

View File

@@ -1,11 +1,12 @@
import { createReducer } from '@reduxjs/toolkit';
import t from 'store/types';
import { omit } from 'lodash';
import {
mapBalanceSheetToTableRows,
journalToTableRowsMapper,
generalLedgerToTableRows,
profitLossToTableRowsMapper
profitLossToTableRowsMapper,
ARAgingSummaryTableRowsMapper,
mapTrialBalanceSheetToRows,
} from './financialStatements.mappers';
const initialState = {
@@ -41,7 +42,7 @@ const initialState = {
filter: true,
},
receivableAgingSummary: {
sheets: [],
sheet: {},
loading: false,
tableRows: [],
filter: true,
@@ -49,38 +50,6 @@ const initialState = {
},
};
const mapContactAgingSummary = (sheet) => {
const rows = [];
const mapAging = (agingPeriods) => {
return agingPeriods.reduce((acc, aging, index) => {
acc[`aging-${index}`] = aging.formatted_total;
return acc;
}, {});
};
sheet.customers.forEach((customer) => {
const agingRow = mapAging(customer.aging);
rows.push({
rowType: 'customer',
customer_name: customer.customer_name,
...agingRow,
total: customer.total,
});
});
rows.push({
rowType: 'total',
customer_name: 'Total',
...mapAging(sheet.total),
total: 0,
});
return rows;
};
const financialStatementFilterToggle = (financialName, statePath) => {
return {
[`${financialName}_FILTER_TOGGLE`]: (state, action) => {
@@ -112,8 +81,10 @@ export default createReducer(initialState, {
...financialStatementFilterToggle('BALANCE_SHEET', 'balanceSheet'),
[t.TRAIL_BALANCE_STATEMENT_SET]: (state, action) => {
debugger;
const trailBalanceSheet = {
data: action.data.data,
sheet: action.data.data,
tableRows: mapTrialBalanceSheetToRows(action.data.data),
query: action.data.query,
};
state.trialBalance.sheet = trailBalanceSheet;
@@ -154,7 +125,7 @@ export default createReducer(initialState, {
accounts: action.data.data,
tableRows: generalLedgerToTableRows(action.data.data),
};
state.generalLedger.sheet = generalLedger;
state.generalLedger.sheet = generalLedger;
},
[t.GENERAL_LEDGER_SHEET_LOADING]: (state, action) => {
@@ -173,7 +144,7 @@ export default createReducer(initialState, {
columns: action.columns,
tableRows: profitLossToTableRowsMapper(action.profitLoss),
};
state.profitLoss.sheet = profitLossSheet;
state.profitLoss.sheet = profitLossSheet;
},
[t.PROFIT_LOSS_SHEET_LOADING]: (state, action) => {
@@ -187,34 +158,28 @@ export default createReducer(initialState, {
...financialStatementFilterToggle('PROFIT_LOSS', 'profitLoss'),
// [t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
// const { loading } = action.payload;
// state.receivableAgingSummary.loading = loading;
// },
// [t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
// const { aging, columns, query } = action.payload;
// const index = getFinancialSheetIndexByQuery(
// state.receivableAgingSummary.sheets,
// query,
// );
[t.RECEIVABLE_AGING_SUMMARY_SET]: (state, action) => {
const { customers, total, columns, query } = action.payload;
// const receivableSheet = {
// query,
// columns,
// aging,
// tableRows: mapContactAgingSummary(aging),
// };
// if (index !== -1) {
// state.receivableAgingSummary[index] = receivableSheet;
// } else {
// state.receivableAgingSummary.sheets.push(receivableSheet);
// }
// },
// [t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
// const { refresh } = action.payload;
// state.receivableAgingSummary.refresh = !!refresh;
// },
const receivableSheet = {
query,
columns,
customers,
total,
tableRows: ARAgingSummaryTableRowsMapper({ customers, columns, total }),
};
state.receivableAgingSummary.sheet = receivableSheet;
},
[t.RECEIVABLE_AGING_SUMMARY_REFRESH]: (state, action) => {
const { refresh } = action.payload;
state.receivableAgingSummary.refresh = !!refresh;
},
[t.RECEIVABLE_AGING_SUMMARY_LOADING]: (state, action) => {
const { loading } = action.payload;
state.receivableAgingSummary.loading = loading;
},
...financialStatementFilterToggle(
'RECEIVABLE_AGING_SUMMARY',
'receivableAgingSummary',

View File

@@ -145,7 +145,7 @@
}
.financial-sheet{
border: 2px solid #EBEBEB;
border: 2px solid #f0f0f0;
border-radius: 10px;
min-width: 640px;
width: auto;
@@ -366,15 +366,26 @@
&--receivable-aging-summary{
.financial-sheet__table{
.tbody{
.row-type--total{
font-weight: 600;
.td{
background-color: #fafbff;
border-bottom-color: #666;
border-bottom-style: dotted;
}
.bigcapital-datatable{
.tbody,
.thead{
.tr .td.customer_name ~ .td,
.tr .th.customer_name ~ .th{
justify-content: flex-end;
}
}
.tbody{
.row-type--total{
font-weight: 600;
.td{
border-top-color: #BBB;
border-top-style: solid;
border-bottom: 3px double #666;
}
}
}
}
}

View File

@@ -25,6 +25,7 @@ export interface IARAgingSummaryCustomer {
export interface IARAgingSummaryTotal {
current: IAgingPeriodTotal,
aging: (IAgingPeriodTotal & IAgingPeriod)[],
total: IAgingPeriodTotal,
};
export interface IARAgingSummaryData {

View File

@@ -96,12 +96,14 @@ export default class ARAgingSummarySheet extends AgingSummaryReport {
const customersAgingPeriods = this.customersWalker(this.contacts);
const totalAgingPeriods = this.getTotalAgingPeriods(customersAgingPeriods);
const totalCurrent = this.getTotalCurrent(customersAgingPeriods);
const totalCustomersTotal = this.getTotalContactsTotals(customersAgingPeriods);
return {
customers: customersAgingPeriods,
total: {
current: this.formatTotalAmount(totalCurrent),
aging: totalAgingPeriods,
total: this.formatTotalAmount(totalCustomersTotal),
}
};
}

View File

@@ -79,7 +79,6 @@ export default abstract class AgingSummaryReport extends AgingReport {
return {
...agingPeriod,
total,
formattedAmount: this.formatAmount(total),
};
});
return newAgingPeriods;
@@ -198,4 +197,11 @@ export default abstract class AgingSummaryReport extends AgingReport {
protected getAgingPeriodsTotal(agingPeriods: IAgingPeriodTotal[]): number {
return sumBy(agingPeriods, 'total');
}
protected getTotalContactsTotals(
customersSummary: IARAgingSummaryCustomer[]
): number {
return sumBy(customersSummary, (summary) => summary.total.total);
}
}

View File

@@ -220,8 +220,8 @@ export default class InventoryAdjustmentService {
/**
* Publish the inventory adjustment transaction.
* @param tenantId
* @param inventoryAdjustmentId
* @param tenantId
* @param inventoryAdjustmentId
*/
async publishInventoryAdjustment(
tenantId: number,
@@ -239,11 +239,9 @@ export default class InventoryAdjustmentService {
inventoryAdjustmentId,
});
// Publish the inventory adjustment transaction.
await InventoryAdjustment.query()
.findById(inventoryAdjustmentId)
.patch({
publishedAt: moment().toMySqlDateTime(),
});
await InventoryAdjustment.query().findById(inventoryAdjustmentId).patch({
publishedAt: moment().toMySqlDateTime(),
});
// Retrieve the inventory adjustment after the modification.
const inventoryAdjustment = await InventoryAdjustment.query()