mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: AR aging summary sheet frontend.
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
@@ -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)),
|
||||
});
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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);
|
||||
@@ -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)
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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',
|
||||
};
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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);
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -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 [
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@ export interface IARAgingSummaryCustomer {
|
||||
export interface IARAgingSummaryTotal {
|
||||
current: IAgingPeriodTotal,
|
||||
aging: (IAgingPeriodTotal & IAgingPeriod)[],
|
||||
total: IAgingPeriodTotal,
|
||||
};
|
||||
|
||||
export interface IARAgingSummaryData {
|
||||
|
||||
@@ -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),
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user