mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
chrone: sperate client and server to different repos.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,93 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import 'style/pages/FinancialStatements/BalanceSheet.scss';
|
||||
|
||||
import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
|
||||
import { FinancialStatement } from 'components';
|
||||
|
||||
import BalanceSheetHeader from './BalanceSheetHeader';
|
||||
import BalanceSheetTable from './BalanceSheetTable';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import BalanceSheetActionsBar from './BalanceSheetActionsBar';
|
||||
import { BalanceSheetProvider } from './BalanceSheetProvider';
|
||||
|
||||
import withBalanceSheetActions from './withBalanceSheetActions';
|
||||
import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Balance sheet.
|
||||
*/
|
||||
function BalanceSheet({
|
||||
// #withCurrentOrganization
|
||||
organizationName,
|
||||
|
||||
// #withBalanceSheetActions
|
||||
toggleBalanceSheetFilterDrawer,
|
||||
}) {
|
||||
const [filter, setFilter] = useState({
|
||||
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
|
||||
toDate: moment().endOf('year').format('YYYY-MM-DD'),
|
||||
basis: 'cash',
|
||||
displayColumnsType: 'total',
|
||||
accountsFilter: 'without-zero-balance',
|
||||
});
|
||||
|
||||
// Handle re-fetch balance sheet after filter change.
|
||||
const handleFilterSubmit = (filter) => {
|
||||
const _filter = {
|
||||
...filter,
|
||||
fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
|
||||
toDate: moment(filter.toDate).format('YYYY-MM-DD'),
|
||||
};
|
||||
setFilter({ ..._filter });
|
||||
};
|
||||
|
||||
// Handle number format submit.
|
||||
const handleNumberFormatSubmit = (values) => {
|
||||
setFilter({
|
||||
...filter,
|
||||
numberFormat: values,
|
||||
});
|
||||
};
|
||||
|
||||
// Hides the balance sheet filter drawer once the page unmount.
|
||||
useEffect(
|
||||
() => () => {
|
||||
toggleBalanceSheetFilterDrawer(false);
|
||||
},
|
||||
[toggleBalanceSheetFilterDrawer],
|
||||
);
|
||||
|
||||
return (
|
||||
<BalanceSheetProvider filter={filter}>
|
||||
<BalanceSheetActionsBar
|
||||
numberFormat={filter.numberFormat}
|
||||
onNumberFormatSubmit={handleNumberFormatSubmit}
|
||||
/>
|
||||
<BalanceSheetLoadingBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<FinancialStatement>
|
||||
<BalanceSheetHeader
|
||||
pageFilter={filter}
|
||||
onSubmitFilter={handleFilterSubmit}
|
||||
/>
|
||||
<div class="financial-statement__body">
|
||||
<BalanceSheetTable companyName={organizationName} />
|
||||
</div>
|
||||
</FinancialStatement>
|
||||
</DashboardPageContent>
|
||||
|
||||
<BalanceSheetAlerts />
|
||||
</BalanceSheetProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withCurrentOrganization(({ organization }) => ({
|
||||
organizationName: organization.name,
|
||||
})),
|
||||
withBalanceSheetActions,
|
||||
)(BalanceSheet);
|
||||
@@ -0,0 +1,131 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
Button,
|
||||
Classes,
|
||||
NavbarDivider,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Icon from 'components/Icon';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import NumberFormatDropdown from 'components/NumberFormatDropdown';
|
||||
|
||||
import { compose, saveInvoke } from 'utils';
|
||||
import withBalanceSheet from './withBalanceSheet';
|
||||
import withBalanceSheetActions from './withBalanceSheetActions';
|
||||
import { useBalanceSheetContext } from './BalanceSheetProvider';
|
||||
|
||||
/**
|
||||
* Balance sheet - actions bar.
|
||||
*/
|
||||
function BalanceSheetActionsBar({
|
||||
// #withBalanceSheet
|
||||
balanceSheetDrawerFilter,
|
||||
|
||||
// #withBalanceSheetActions
|
||||
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
|
||||
|
||||
// #ownProps
|
||||
numberFormat,
|
||||
onNumberFormatSubmit,
|
||||
}) {
|
||||
const { isLoading, refetchBalanceSheet } = useBalanceSheetContext();
|
||||
|
||||
// Handle filter toggle click.
|
||||
const handleFilterToggleClick = () => {
|
||||
toggleFilterDrawer();
|
||||
};
|
||||
|
||||
// Handle recalculate the report button.
|
||||
const handleRecalcReport = () => {
|
||||
refetchBalanceSheet();
|
||||
};
|
||||
|
||||
// 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={
|
||||
!balanceSheetDrawerFilter ? (
|
||||
<T id={'customize_report'} />
|
||||
) : (
|
||||
<T id={'hide_customizer'} />
|
||||
)
|
||||
}
|
||||
onClick={handleFilterToggleClick}
|
||||
active={balanceSheetDrawerFilter}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Popover
|
||||
content={
|
||||
<NumberFormatDropdown
|
||||
numberFormat={numberFormat}
|
||||
onSubmit={handleNumberFormatSubmit}
|
||||
submitDisabled={isLoading}
|
||||
/>
|
||||
}
|
||||
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(
|
||||
withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ balanceSheetDrawerFilter })),
|
||||
withBalanceSheetActions,
|
||||
)(BalanceSheetActionsBar);
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from 'react';
|
||||
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
import moment from 'moment';
|
||||
import { Formik, Form } from 'formik';
|
||||
|
||||
import withBalanceSheet from './withBalanceSheet';
|
||||
import withBalanceSheetActions from './withBalanceSheetActions';
|
||||
|
||||
import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
|
||||
import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
|
||||
|
||||
import { compose, transformToForm } from 'utils';
|
||||
import {
|
||||
getBalanceSheetHeaderDefaultValues,
|
||||
getBalanceSheetHeaderValidationSchema,
|
||||
} from './utils';
|
||||
|
||||
/**
|
||||
* Balance sheet header.
|
||||
*/
|
||||
function BalanceSheetHeader({
|
||||
// #ownProps
|
||||
onSubmitFilter,
|
||||
pageFilter,
|
||||
|
||||
// #withBalanceSheet
|
||||
balanceSheetDrawerFilter,
|
||||
|
||||
// #withBalanceSheetActions
|
||||
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
|
||||
}) {
|
||||
const defaultValues = getBalanceSheetHeaderDefaultValues();
|
||||
|
||||
// Filter form initial values.
|
||||
const initialValues = transformToForm(
|
||||
{
|
||||
...defaultValues,
|
||||
...pageFilter,
|
||||
fromDate: moment(pageFilter.fromDate).toDate(),
|
||||
toDate: moment(pageFilter.toDate).toDate(),
|
||||
},
|
||||
defaultValues,
|
||||
);
|
||||
|
||||
// Validation schema.
|
||||
const validationSchema = getBalanceSheetHeaderValidationSchema();
|
||||
|
||||
// Handle form submit.
|
||||
const handleSubmit = (values, actions) => {
|
||||
onSubmitFilter(values);
|
||||
toggleFilterDrawer(false);
|
||||
actions.setSubmitting(false);
|
||||
};
|
||||
|
||||
// Handle cancel button click.
|
||||
const handleCancelClick = () => {
|
||||
toggleFilterDrawer(false);
|
||||
};
|
||||
|
||||
// Handle drawer close action.
|
||||
const handleDrawerClose = () => {
|
||||
toggleFilterDrawer(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<FinancialStatementHeader
|
||||
isOpen={balanceSheetDrawerFilter}
|
||||
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={<BalanceSheetHeaderGeneralPanal />}
|
||||
/>
|
||||
</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(
|
||||
withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
|
||||
balanceSheetDrawerFilter,
|
||||
})),
|
||||
withBalanceSheetActions,
|
||||
)(BalanceSheetHeader);
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
|
||||
import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
|
||||
import RadiosAccountingBasis from '../RadiosAccountingBasis';
|
||||
import FinancialAccountsFilter from '../FinancialAccountsFilter';
|
||||
|
||||
/**
|
||||
* Balance sheet header - General panal.
|
||||
*/
|
||||
export default function BalanceSheetHeaderGeneralTab({}) {
|
||||
return (
|
||||
<div>
|
||||
<FinancialStatementDateRange />
|
||||
<SelectDisplayColumnsBy />
|
||||
<FinancialAccountsFilter
|
||||
initialSelectedItem={'all-accounts'}
|
||||
/>
|
||||
<RadiosAccountingBasis key={'basis'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import FinancialReportPage from '../FinancialReportPage';
|
||||
import { useBalanceSheet } from 'hooks/query';
|
||||
import { transformFilterFormToQuery } from '../common';
|
||||
|
||||
const BalanceSheetContext = createContext();
|
||||
|
||||
function BalanceSheetProvider({ filter, ...props }) {
|
||||
// Transformes the given filter to query.
|
||||
const query = React.useMemo(() => transformFilterFormToQuery(filter), [
|
||||
filter,
|
||||
]);
|
||||
|
||||
// Fetches the balance sheet report.
|
||||
const {
|
||||
data: balanceSheet,
|
||||
isFetching,
|
||||
isLoading,
|
||||
refetch,
|
||||
} = useBalanceSheet(query, { keepPreviousData: true });
|
||||
|
||||
const provider = {
|
||||
balanceSheet,
|
||||
isFetching,
|
||||
isLoading,
|
||||
refetchBalanceSheet: refetch,
|
||||
|
||||
query,
|
||||
filter,
|
||||
};
|
||||
return (
|
||||
<FinancialReportPage name={'balance-sheet'}>
|
||||
<BalanceSheetContext.Provider value={provider} {...props} />
|
||||
</FinancialReportPage>
|
||||
);
|
||||
}
|
||||
|
||||
const useBalanceSheetContext = () => useContext(BalanceSheetContext);
|
||||
|
||||
export { BalanceSheetProvider, useBalanceSheetContext };
|
||||
@@ -0,0 +1,106 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import FinancialSheet from 'components/FinancialSheet';
|
||||
import DataTable from 'components/DataTable';
|
||||
import { CellTextSpan } from 'components/Datatable/Cells';
|
||||
import { useBalanceSheetContext } from './BalanceSheetProvider';
|
||||
|
||||
import { defaultExpanderReducer, getColumnWidth } from 'utils';
|
||||
|
||||
/**
|
||||
* Balance sheet table.
|
||||
*/
|
||||
export default function BalanceSheetTable({
|
||||
// #ownProps
|
||||
companyName,
|
||||
}) {
|
||||
|
||||
|
||||
// Balance sheet context.
|
||||
const {
|
||||
balanceSheet: { tableRows, columns, query },
|
||||
isLoading,
|
||||
} = useBalanceSheetContext();
|
||||
|
||||
const tableColumns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: intl.get('account_name'),
|
||||
accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
|
||||
className: 'account_name',
|
||||
textOverview: true,
|
||||
width: 240,
|
||||
},
|
||||
...(query.display_columns_type === 'total'
|
||||
? [
|
||||
{
|
||||
Header: intl.get('total'),
|
||||
accessor: 'total.formatted_amount',
|
||||
Cell: CellTextSpan,
|
||||
className: 'total',
|
||||
width: 140,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(query.display_columns_type === 'date_periods'
|
||||
? columns.map((column, index) => ({
|
||||
id: `date_period_${index}`,
|
||||
Header: column,
|
||||
Cell: CellTextSpan,
|
||||
accessor: `total_periods[${index}].formatted_amount`,
|
||||
className: classNames('total-period', `total-periods-${index}`),
|
||||
width: getColumnWidth(
|
||||
tableRows,
|
||||
`total_periods.${index}.formatted_amount`,
|
||||
{ minWidth: 100 },
|
||||
),
|
||||
}))
|
||||
: []),
|
||||
],
|
||||
[query, columns, tableRows],
|
||||
);
|
||||
|
||||
// Calculates the default expanded rows of balance sheet table.
|
||||
const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [tableRows]);
|
||||
|
||||
const rowClassNames = useCallback((row) => {
|
||||
const { original } = row;
|
||||
const rowTypes = Array.isArray(original.row_types)
|
||||
? original.row_types
|
||||
: [original.row_types];
|
||||
|
||||
return {
|
||||
...rowTypes.reduce((acc, rowType) => {
|
||||
acc[`row_type--${rowType}`] = rowType;
|
||||
return acc;
|
||||
}, {}),
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<FinancialSheet
|
||||
name="balance-sheet"
|
||||
companyName={companyName}
|
||||
sheetType={intl.get('balance_sheet')}
|
||||
fromDate={query.from_date}
|
||||
toDate={query.to_date}
|
||||
basis={query.basis}
|
||||
loading={isLoading}
|
||||
>
|
||||
<DataTable
|
||||
className="bigcapital-datatable--financial-report"
|
||||
columns={tableColumns}
|
||||
data={tableRows}
|
||||
rowClassNames={rowClassNames}
|
||||
noInitialFetch={true}
|
||||
expandable={true}
|
||||
expanded={expandedRows}
|
||||
expandToggleColumn={1}
|
||||
expandColumnSpace={0.8}
|
||||
// sticky={true}
|
||||
/>
|
||||
</FinancialSheet>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@blueprintjs/core';
|
||||
import { Icon, If } from 'components';
|
||||
import { useBalanceSheetContext } from './BalanceSheetProvider';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
import FinancialLoadingBar from '../FinancialLoadingBar';
|
||||
|
||||
/**
|
||||
* Balance sheet alerts.
|
||||
*/
|
||||
export function BalanceSheetAlerts() {
|
||||
const { isLoading, refetchBalanceSheet, balanceSheet } =
|
||||
useBalanceSheetContext();
|
||||
|
||||
// Handle refetch the report sheet.
|
||||
const handleRecalcReport = () => {
|
||||
refetchBalanceSheet();
|
||||
};
|
||||
// Can't display any error if the report is loading.
|
||||
if (isLoading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<If condition={balanceSheet.meta.is_cost_compute_running}>
|
||||
<div class="alert-compute-running">
|
||||
<Icon icon="info-block" iconSize={12} />{' '}
|
||||
<T id={'just_a_moment_we_re_calculating_your_cost_transactions'} />
|
||||
<Button onClick={handleRecalcReport} minimal={true} small={true}>
|
||||
<T id={'refresh'} />
|
||||
</Button>
|
||||
</div>
|
||||
</If>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Balance sheet loading bar.
|
||||
*/
|
||||
export function BalanceSheetLoadingBar() {
|
||||
const { isFetching } = useBalanceSheetContext();
|
||||
|
||||
return (
|
||||
<If condition={isFetching}>
|
||||
<FinancialLoadingBar />
|
||||
</If>
|
||||
);
|
||||
}
|
||||
25
src/containers/FinancialStatements/BalanceSheet/utils.js
Normal file
25
src/containers/FinancialStatements/BalanceSheet/utils.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
import moment from 'moment';
|
||||
|
||||
export const getBalanceSheetHeaderDefaultValues = () => {
|
||||
return {
|
||||
basic: 'cash',
|
||||
accountsFilter: 'without-zero-balance',
|
||||
displayColumnsType: 'total',
|
||||
fromDate: moment().toDate(),
|
||||
toDate: moment().toDate(),
|
||||
};
|
||||
};
|
||||
|
||||
export const getBalanceSheetHeaderValidationSchema = () =>
|
||||
Yup.object().shape({
|
||||
dateRange: Yup.string().optional(),
|
||||
fromDate: Yup.date().required().label(intl.get('fromDate')),
|
||||
toDate: Yup.date()
|
||||
.min(Yup.ref('fromDate'))
|
||||
.required()
|
||||
.label(intl.get('toDate')),
|
||||
accountsFilter: Yup.string(),
|
||||
displayColumnsType: Yup.string(),
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const mapStateToProps = (state, props) => {
|
||||
const mapped = {
|
||||
balanceSheetDrawerFilter: getBalanceSheetFilterDrawer(state),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
toggleBalanceSheetFilterDrawer,
|
||||
} from 'store/financialStatement/financialStatements.actions';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleBalanceSheetFilterDrawer: (toggle) =>
|
||||
dispatch(toggleBalanceSheetFilterDrawer(toggle)),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
Reference in New Issue
Block a user