feat: customers balance summary.

This commit is contained in:
elforjani3
2021-05-06 17:45:42 +02:00
parent 9b5ccf9248
commit 1e9d068028
10 changed files with 577 additions and 8 deletions

View File

@@ -10,7 +10,8 @@ export const financialReportMenus = [
},
{
title: 'Trial Balance Sheet',
desc: 'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.',
desc:
'Summarizes the credit and debit balance of each account in your chart of accounts at a specific point in time.',
link: '/financial-reports/trial-balance-sheet',
},
{
@@ -21,22 +22,26 @@ export const financialReportMenus = [
},
{
title: 'Profit/Loss Report',
desc: "Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).",
desc:
'Reports the revenues, costs and expenses incurred during a specific point in time with comparison period(s).',
link: '/financial-reports/profit-loss-sheet',
},
{
title: 'General Ledger Report',
desc: "Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.",
desc:
'Reports every transaction going in and out of your accounts and organized by accounts and date to monitoring activity of accounts.',
link: '/financial-reports/general-ledger',
},
{
title: 'Receivable Aging Summary',
desc: "Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.",
desc:
'Summarize total unpaid balances of customers invoices with number of days the unpaid invoice is overdue.',
link: '/financial-reports/receivable-aging-summary',
},
{
title: 'Payable Aging Summary',
desc: "Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.",
desc:
'Summarize total unpaid balances of vendors purchase invoices with the number of days the unpaid invoice is overdue.',
link: '/financial-reports/payable-aging-summary',
},
],
@@ -54,16 +59,37 @@ export const SalesAndPurchasesReportMenus = [
link: '/financial-reports/purchases-by-items',
},
{
title: 'Sales by Items',
title: 'Sales By Items',
desc:
"Summarize the businesss sold items quantity, income and average income rate of each item during a specific point in time.",
'Summarize the businesss sold items quantity, income and average income rate of each item during a specific point in time.',
link: '/financial-reports/sales-by-items',
},
{
title: 'Inventory valuation',
desc: 'Summarize the businesss purchase items quantity, cost and average cost rate of each item during a specific point in time.',
desc:
'Summarize the businesss purchase items quantity, cost and average cost rate of each item during a specific point in time.',
link: '/financial-reports/inventory-valuation',
},
{
title: 'Customer Balance summary',
desc: '',
link: '/financial-reports/customers-balance-summary',
},
{
title: 'Vendors Balance summary',
desc: '',
link: '/financial-reports/vendors-balance-summary',
},
{
title: 'Customers Transactions',
desc: '',
link: '/financial-reports/transactions-by-customers',
},
{
title: 'Vendors Transactions',
desc: '',
link: '/financial-reports/transactions-by-vendors',
},
],
},
];

View File

@@ -0,0 +1,87 @@
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import 'style/pages/FinancialStatements/ContactsBalanceSummary.scss';
import { FinancialStatement } from 'components';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import CustomersBalanceSummaryActionsBar from './CustomersBalanceSummaryActionsBar';
import CustomersBalanceSummaryHeader from './CustomersBalanceSummaryHeader';
import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
import { CustomersBalanceLoadingBar } from './components';
import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
import withSettings from 'containers/Settings/withSettings';
import { compose } from 'redux';
/**
* Customers Balance summary.
*/
function CustomersBalanceSummary({
// #withPreferences
organizationName,
// #withCustomersBalanceSummaryActions
toggleCustomerBalanceFilterDrawer,
}) {
const [filter, setFilter] = useState({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
});
// Handle re-fetch customers balance summary after filter change.
const handleFilterSubmit = (filter) => {
const _filter = {
...filter,
asDate: moment(filter.asDate).format('YYYY-MM-DD'),
};
setFilter({ ..._filter });
};
// Handle number format.
const handleNumberFormat = (values) => {
setFilter({
...filter,
numberFormat: values,
});
};
useEffect(
() => () => {
toggleCustomerBalanceFilterDrawer(false);
},
[toggleCustomerBalanceFilterDrawer],
);
return (
<CustomersBalanceSummaryProvider filter={filter}>
<CustomersBalanceSummaryActionsBar
numberFormat={filter?.numberFormat}
onNumberFormatSubmit={handleNumberFormat}
/>
<CustomersBalanceLoadingBar />
<DashboardPageContent>
<FinancialStatement>
<CustomersBalanceSummaryHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}
/>
<div className="financial-statement__body">
<CustomersBalanceSummaryTable companyName={organizationName} />
</div>
</FinancialStatement>
</DashboardPageContent>
</CustomersBalanceSummaryProvider>
);
}
export default compose(
withSettings(({ organizationSettings }) => ({
organizationName: organizationSettings.name,
})),
withCustomersBalanceSummaryActions,
)(CustomersBalanceSummary);

View File

@@ -0,0 +1,133 @@
import React from 'react';
import {
NavbarGroup,
Button,
Classes,
NavbarDivider,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import NumberFormatDropdown from 'components/NumberFormatDropdown';
import withCustomersBalanceSummary from './withCustomersBalanceSummary';
import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
import { compose, saveInvoke } from 'utils';
/**
* customer balance summary action bar.
*/
function CustomersBalanceSummaryActionsBar({
// #ownProps
numberFormat,
onNumberFormatSubmit,
//#withCustomersBalanceSummary
isFilterDrawerOpen,
//#withCustomersBalanceSummaryActions
toggleCustomerBalanceFilterDrawer,
}) {
const {
refetch,
isCustomersBalanceLoading,
} = useCustomersBalanceSummaryContext();
// handle filter toggle click.
const handleFilterToggleClick = () => {
toggleCustomerBalanceFilterDrawer();
};
// Handle recalculate the report button.
const handleRecalcReport = () => {
refetch();
};
// Handle number format form submit.
const handleNumberFormatSubmit = (values) => {
saveInvoke(onNumberFormatSubmit, values);
};
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={
isFilterDrawerOpen ? (
<T id={'customize_report'} />
) : (
<T id={'hide_customizer'} />
)
}
onClick={handleFilterToggleClick}
active={isFilterDrawerOpen}
/>
<NavbarDivider />
<Popover
content={
<NumberFormatDropdown
numberFormat={numberFormat}
onSubmit={handleNumberFormatSubmit}
submitDisabled={isCustomersBalanceLoading}
/>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={<T id={'format'} />}
icon={<Icon icon="numbers" width={23} height={16} />}
/>
</Popover>
<Popover
// content={}
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(
withCustomersBalanceSummary(({ customersBalanceDrawerFilter }) => ({
isFilterDrawerOpen: customersBalanceDrawerFilter,
})),
withCustomersBalanceSummaryActions,
)(CustomersBalanceSummaryActionsBar);

View File

@@ -0,0 +1,70 @@
import React from 'react';
import { FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
FormGroup,
Position,
Classes,
Checkbox,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { Row, Col, FieldHint } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
/**
* Customers balance header - general panel.
*/
export default function CustomersBalanceSummaryGeneralPanel() {
return (
<div>
<Row>
<Col xs={5}>
<FastField name={'asDate'}>
{({ form, field: { value }, meta: { error } }) => (
<FormGroup
label={<T id={'as_date'} />}
labelInfo={<FieldHint />}
fill={true}
intent={inputIntent({ error })}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((selectedDate) => {
form.setFieldValue('asDate', selectedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
minimal={true}
fill={true}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'percentage'} type={'checkbox'}>
{({ field }) => (
<FormGroup labelInfo={<FieldHint />}>
<Checkbox
inline={true}
name={'percentage'}
small={true}
label={'Percentage Of Column'}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
</div>
);
}

View File

@@ -0,0 +1,91 @@
import React from 'react';
import * as Yup from 'yup';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withCustomersBalanceSummary from './withCustomersBalanceSummary';
import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
import CustomersBalanceSummaryGeneralPanel from './CustomersBalanceSummaryGeneralPanel';
import { compose } from 'utils';
/**
* Customers balance summary.
*/
function CustomersBalanceSummaryHeader({
// #ownProps
onSubmitFilter,
pageFilter,
//#withCustomersBalanceSummary
customersBalanceDrawerFilter,
//#withCustomersBalanceSummaryActions
toggleCustomerBalanceFilterDrawer,
}) {
// validation schema.
const validationSchema = Yup.object().shape({
asDate: Yup.date().required().label('asDate'),
});
// filter form initial values.
const initialValues = {
...pageFilter,
asDate: moment(pageFilter.asDate).toDate(),
};
// handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
toggleCustomerBalanceFilterDrawer(false);
setSubmitting(false);
};
// handle close drawer.
const handleDrawerClose = () => {
toggleCustomerBalanceFilterDrawer(false);
};
return (
<FinancialStatementHeader
isOpen={customersBalanceDrawerFilter}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
<Form>
<Tabs animate={true} vertical={true} renderActiveTabPanelOnly={true}>
<Tab
id="general"
title={<T id={'general'} />}
panel={<CustomersBalanceSummaryGeneralPanel />}
/>
</Tabs>
<div class="financial-header-drawer__footer">
<Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
<T id={'calculate_report'} />
</Button>
<Button onClick={handleDrawerClose} minimal={true}>
<T id={'cancel'} />
</Button>
</div>
</Form>
</Formik>
</FinancialStatementHeader>
);
}
export default compose(
withCustomersBalanceSummary(({ customersBalanceDrawerFilter }) => ({
customersBalanceDrawerFilter,
})),
withCustomersBalanceSummaryActions,
)(CustomersBalanceSummaryHeader);

View File

@@ -0,0 +1,42 @@
import React, { createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useCustomerBalanceSummaryReport } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const CustomersBalanceSummaryContext = createContext();
/**
* Customers balance summary provider.
*/
function CustomersBalanceSummaryProvider({ filter, ...props }) {
// const query = React.useMemo(() => transformFilterFormToQuery(filter), [
// filter,
// ]);
const {
data: CustomerBalanceSummary,
isLoading: isCustomersBalanceLoading,
isFetching: isCustomersBalanceFetching,
refetch
} = useCustomerBalanceSummaryReport(filter, {
keepPreviousData: true,
});
const provider = {
CustomerBalanceSummary,
isCustomersBalanceFetching,
isCustomersBalanceLoading,
refetch,
};
return (
<FinancialReportPage name={'customers-balance-summary'}>
<CustomersBalanceSummaryContext.Provider value={provider} {...props} />
</FinancialReportPage>
);
}
const useCustomersBalanceSummaryContext = () =>
useContext(CustomersBalanceSummaryContext);
export { CustomersBalanceSummaryProvider, useCustomersBalanceSummaryContext };

View File

@@ -0,0 +1,48 @@
import React, { useMemo, useCallback } from 'react';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
import { useCustomersSummaryColumns } from './components';
/**
* customers balance summary table.
*/
export default function CustomersBalanceSummaryTable({
// #ownProps
companyName,
}) {
const { formatMessage } = useIntl();
const {
isCustomersBalanceLoading,
CustomerBalanceSummary: { tableRows },
} = useCustomersBalanceSummaryContext();
const columns = useCustomersSummaryColumns();
const rowClassNames = (row) => {
return [`row-type--${row.original.rowTypes}`];
};
return (
<FinancialSheet
name={'customers-balance-summary'}
companyName={companyName}
sheetType={formatMessage({ id: 'customers_balance_summary' })}
asDate={new Date()}
loading={isCustomersBalanceLoading}
>
<DataTable
className="bigcapital-datatable--financial-report"
columns={columns}
data={tableRows}
rowClassNames={rowClassNames}
noInitialFetch={true}
/>
</FinancialSheet>
);
}

View File

@@ -0,0 +1,48 @@
import React from 'react';
import { formatMessage } from 'services/intl';
import { If } from 'components';
import FinancialLoadingBar from '../FinancialLoadingBar';
import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
/**
* Retrieve customers balance summary columns.
*/
export const useCustomersSummaryColumns = () => {
return React.useMemo(
() => [
{
Header: formatMessage({ id: 'customer_name' }),
accessor: 'cells[0].value',
className: 'customer_name',
width: 240,
},
{
Header: formatMessage({ id: 'total' }),
accessor: 'cells[1].value',
className: 'total',
width: 140,
},
{
Header: formatMessage({ id: 'percentage_of_column' }),
accessor: 'cells[2].value',
className: 'total',
width: 140,
},
],
[formatMessage],
);
};
/**
* customers balance summary loading bar.
*/
export function CustomersBalanceLoadingBar() {
const { isCustomersBalanceFetching } = useCustomersBalanceSummaryContext();
return (
<If condition={isCustomersBalanceFetching}>
<FinancialLoadingBar />
</If>
);
}

View File

@@ -0,0 +1,15 @@
import { connect } from 'react-redux';
import { getCustomersBalanceSummaryFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
customersBalanceDrawerFilter: getCustomersBalanceSummaryFilterDrawer(
state,
props,
),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

View File

@@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { toggleCustomersBalanceSummaryFilterDrawer } from 'store/financialStatement/financialStatements.actions';
const mapActionsToProps = (dispatch) => ({
toggleCustomerBalanceFilterDrawer: (toggle) =>
dispatch(toggleCustomersBalanceSummaryFilterDrawer(toggle)),
});
export default connect(null, mapActionsToProps);