QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 06:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Receivable aging summary front-end.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-06-14 14:19:18 +02:00
parent ac9c360629
commit f0c1985e43
45 changed files with 4150 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

@@ -18,8 +18,6 @@ import withSettings from 'containers/Settings/withSettings';
import withBalanceSheetActions from './withBalanceSheetActions';
import withBalanceSheetDetail from './withBalanceSheetDetail';
function BalanceSheet({
// #withDashboardActions
changePageTitle,

4
client/src/containers/FinancialStatements/FinancialStatementDateRange.js
View File

@@ -3,7 +3,6 @@ import {Row, Col} from 'react-grid-system';
import {momentFormatter} from 'utils';
import {DateInput} from '@blueprintjs/datetime';
import { useIntl } from 'react-intl';
import {
HTMLSelect,
FormGroup,
@@ -11,6 +10,7 @@ import {
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import { FieldHint } from 'components';
import {
parseDateRangeQuery
} from 'utils';
@@ -87,7 +87,7 @@ export default function FinancialStatementDateRange({
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
labelInfo={infoIcon}
labelInfo={<FieldHint />}
fill={true}
intent={formik.errors.to_date && Intent.DANGER}>

1
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -76,6 +76,7 @@ function GeneralLedgerHeader({
/>
</FormGroup>
</Col>
<Col sm={3}>
<RadiosAccountingBasis
onChange={handleAccountingBasisChange}

79
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummary.js Normal file
View File

@@ -0,0 +1,79 @@
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().format('YYYY-MM-DD'),
aging_before_days: 30,
aging_periods: 3,
});
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(() => {
fetchSheet.refetch({ force: true });
}, [fetchSheet]);
const handleFilterSubmit = useCallback((filter) => {
const _filter = {
...filter,
as_date: moment(filter.as_date).format('YYYY-MM-DD'),
};
setQuery(_filter);
fetchSheet.refetch({ force: true });
}, [fetchSheet]);
return (
<DashboardInsider>
<ReceivableAgingSummaryActionsBar />
<DashboardPageContent>
<FinancialStatement>
<ReceivableAgingSummaryHeader
onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">
<ReceivableAgingSummaryTable
receivableAgingSummaryQuery={query}
onFetchData={handleFetchData}
/>
</div>
</FinancialStatement>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
withDashboardActions,
withReceivableAgingSummaryActions
)(ReceivableAgingSummarySheet);

99
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryActionsBar.js Normal file
View File

@@ -0,0 +1,99 @@
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 FilterDropdown from 'components/FilterDropdown';
import Icon from 'components/Icon';
import { If } from 'components';
import withReceivableAging from './withReceivableAgingSummary';
import withReceivableAgingActions from './withReceivableAgingSummaryActions';
import { compose } from 'utils';
function ReceivableAgingSummaryActionsBar({
toggleFilterReceivableAgingSummary,
receivableAgingFilter,
}) {
const filterDropdown = FilterDropdown({
fields: [],
onFilterChange: (filterConditions) => {},
});
const handleFilterToggleClick = () => {
toggleFilterReceivableAgingSummary();
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="cog-16" iconSize={16} />}
text={<T id={'customize_report'} />}
/>
<NavbarDivider />
<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>
<NavbarDivider />
<Popover
content={filterDropdown}
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>
<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)

140
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryHeader.js Normal file
View File

@@ -0,0 +1,140 @@
import React, { useCallback } 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 FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import {
ErrorMessage,
FieldHint,
FieldRequiredHint,
} from 'components';
import {
momentFormatter,
} from 'utils';
import withReceivableAging from './withReceivableAgingSummary';
import { compose } from 'utils';
function ReceivableAgingSummaryHeader({
onSubmitFilter,
receivableAgingFilter,
}) {
const { formatMessage } = useIntl();
const {
values,
errors,
touched,
setFieldValue,
getFieldProps,
submitForm,
isSubmitting
} = useFormik({
enableReinitialize: true,
initialValues: {
// as_date: new Date(),
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.
const handleSubmitClick = useCallback(() => {
submitForm();
}, [submitForm]);
return (
<FinancialStatementHeader show={receivableAgingFilter}>
<Row>
<Col sm={3}>
<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 sm={3}>
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-before-days'}
intent={errors.aging_before_days && Intent.DANGER}
helperText={<ErrorMessage name="aging_before_days" {...{ errors, touched }} />}
>
<InputGroup
medium={true}
intent={errors.aging_before_days && Intent.DANGER}
{...getFieldProps('aging_before_days')}
/>
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={<T id={'aging_periods'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-periods'}
intent={errors.aging_before_days && Intent.DANGER}
helperText={<ErrorMessage name="aging_periods" {...{ errors, touched }} />}
>
<InputGroup
medium={true}
intent={errors.aging_before_days && Intent.DANGER}
{...getFieldProps('aging_periods')}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col sm={3}>
<Button
type="submit"
onClick={handleSubmitClick}
disabled={isSubmitting}
className={'button--submit-filter'}>
<T id={'calculate_report'} />
</Button>
</Col>
</Row>
</FinancialStatementHeader>
);
}
export default compose(
withReceivableAging(({ receivableAgingSummaryFilter }) => ({
receivableAgingFilter: receivableAgingSummaryFilter,
})),
)(ReceivableAgingSummaryHeader);

82
client/src/containers/FinancialStatements/ReceivableAgingSummary/ReceivableAgingSummaryTable.js Normal file
View File

@@ -0,0 +1,82 @@
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
receviableAgingRows = [],
receivableAgingLoading,
receivableAgingColumns,
// #ownProps
receivableAgingSummaryQuery,
onFetchData,
}) {
const { formatMessage } = useIntl();
const agingColumns = useMemo(() => {
return receivableAgingColumns.map((agingColumn) => {
return `${agingColumn.before_days} - ${agingColumn.to_days || '<'}`;
});
}, [receivableAgingColumns]);
const columns = useMemo(() => ([
{
Header: (<T id={'customer_name'} />),
accessor: 'customer_name',
className: 'customer_name',
},
...agingColumns.map((agingColumn, index) => ({
Header: agingColumn,
id: `asd-${index}`,
})),
{
Header: (<T id={'total'} />),
accessor: 'total',
className: 'total',
},
]), [agingColumns]);
const handleFetchData = useCallback((...args) => {
onFetchData && onFetchData(...args);
}, [onFetchData]);
return (
<FinancialSheet
companyName={organizationSettings.name}
sheetType={formatMessage({ id: 'receivable_aging_summary' })}
asDate={new Date()}
loading={receivableAgingLoading}>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={receviableAgingRows}
onFetchData={handleFetchData}
sticky={true}
/>
</FinancialSheet>
);
}
export default compose(
withSettings,
withReceivableAgingSummaryTable,
withReceivableAgingSummary(({
receivableAgingSummaryLoading,
receivableAgingSummaryColumns }) => ({
receivableAgingLoading: receivableAgingSummaryLoading,
receivableAgingColumns: receivableAgingSummaryColumns
})),
)(ReceivableAgingSummaryTable);

28
client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummary.js Normal file
View File

@@ -0,0 +1,28 @@
import { connect } from 'react-redux';
import {
getFinancialSheet,
getFinancialSheetColumns,
} 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,
),
receivableAgingSummaryLoading:
state.financialStatements.receivableAgingSummary.loading,
receivableAgingSummaryFilter:
state.financialStatements.receivableAgingSummary.filter,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
}

12
client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryActions.js Normal file
View File

@@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import { fetchReceivableAgingSummary } from 'store/financialStatement/financialStatements.actions';
const mapActionsToProps = (dispatch) => ({
requestReceivableAgingSummary: (query) =>
dispatch(fetchReceivableAgingSummary({ query })),
toggleFilterReceivableAgingSummary: () => dispatch({
type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
}),
});
export default connect(null, mapActionsToProps);

14
client/src/containers/FinancialStatements/ReceivableAgingSummary/withReceivableAgingSummaryTable.js Normal file
View File

@@ -0,0 +1,14 @@
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);

7
client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
View File

@@ -7,6 +7,8 @@ import {
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { MODIFIER } from 'components';
export default function SelectsListColumnsBy(props) {
const { onItemSelect, formGroupProps, selectListProps } = props;
@@ -46,9 +48,10 @@ export default function SelectsListColumnsBy(props) {
noResults={<MenuItem disabled={true} text="No results." />}
filterable={false}
itemRenderer={itemRenderer}
popoverProps={{ minimal: true }}
popoverProps={{ minimal: true, usePortal: false, inline: true }}
buttonLabel={buttonLabel}
onItemSelect={handleItemSelect}
onItemSelect={handleItemSelect}
className={classNames(MODIFIER.SELECT_LIST_FILL_POPOVER)}
{...selectListProps} />
</FormGroup>
);