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

BIG-52: fix customize Report in purchases by items report not working.

Browse Source 
BIG-55: fix customize report in inventory valuation report not working.
BIG-56: fix customize report in Inventory item details report not working.
This commit is contained in:
a.bouhuolia
2021-09-13 13:47:13 +02:00
parent 1eca5e0308
commit 143e15e7ce
47 changed files with 1130 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryGeneralProvider.js Normal file
View File

@@ -0,0 +1,35 @@
import React, { createContext, useContext } from 'react';
import { useVendors } from '../../../hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const APAgingSummaryGeneralContext = createContext();
/**
* A/P aging summary provider.
*/
function APAgingSummaryGeneralProvider({ filter, ...props }) {
// Retrieve the vendors list.
const {
data: { vendors },
isFetching: isVendorsLoading,
} = useVendors();
const provider = {
vendors,
isVendorsLoading,
};
// Loading state.
const loading = isVendorsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<APAgingSummaryGeneralContext.Provider value={provider} {...props} />
);
}
const useAPAgingSummaryGeneralContext = () =>
useContext(APAgingSummaryGeneralContext);
export { APAgingSummaryGeneralProvider, useAPAgingSummaryGeneralContext };

111
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
View File

@@ -1,113 +1,14 @@
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Intent,
FormGroup,
InputGroup,
Position,
Classes,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
import { APAgingSummaryGeneralProvider } from './APAgingSummaryGeneralProvider';
import APAgingSummaryHeaderGeneralContent from './APAgingSummaryHeaderGeneralContent';
/**
* AP Aging Summary - Drawer Header - General Fields.
* AP Aging Summary - Drawer Header - General panel.
*/
export default function APAgingSummaryHeaderGeneral() {
const { vendors } = useAPAgingSummaryContext();
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={'agingDaysBefore'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
intent={inputIntent({ error })}
>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'agingPeriods'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_periods'} />}
labelInfo={<FieldHint />}
intent={inputIntent({ error })}
>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<Field name={'vendorsIds'}>
{({
form: { setFieldValue },
field: { value },
}) => (
<FormGroup
label={<T id={'specific_vendors'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
defaultText={<T id={'all_vendors'} />}
contacts={vendors}
contactsSelected={value}
onContactSelect={(contactsIds) => {
setFieldValue('vendorsIds', contactsIds);
}}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
<APAgingSummaryGeneralProvider>
<APAgingSummaryHeaderGeneralContent />
</APAgingSummaryGeneralProvider>
);
}

116
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.js Normal file
View File

@@ -0,0 +1,116 @@
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Intent,
FormGroup,
InputGroup,
Position,
Classes,
} from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
ContactsMultiSelect,
Row,
Col,
FieldHint,
} from 'components';
import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
/**
* AP Aging Summary - Drawer Header - General panel - Content.
*/
export default function APAgingSummaryHeaderGeneralContent() {
const { vendors } = useAPAgingSummaryGeneralContext();
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={'agingDaysBefore'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
intent={inputIntent({ error })}
>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'agingPeriods'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_periods'} />}
labelInfo={<FieldHint />}
intent={inputIntent({ error })}
>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<Field name={'vendorsIds'}>
{({ form: { setFieldValue }, field: { value } }) => (
<FormGroup
label={<T id={'specific_vendors'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
defaultText={<T id={'all_vendors'} />}
contacts={vendors}
contactsSelected={value}
onContactSelect={(contactsIds) => {
setFieldValue('vendorsIds', contactsIds);
}}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

8
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.js
View File

@@ -19,19 +19,11 @@ function APAgingSummaryProvider({ filter, ...props }) {
refetch,
} = useAPAgingSummaryReport(query, { keepPreviousData: true });
// Retrieve the vendors list.
const {
data: { vendors },
isFetching: isVendorsLoading,
} = useVendors();
const provider = {
APAgingSummary,
vendors,
isAPAgingLoading,
isAPAgingFetching,
isVendorsLoading,
refetch,
};

34
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.js Normal file
View File

@@ -0,0 +1,34 @@
import React, { createContext, useContext } from 'react';
import { useCustomers } from 'hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const ARAgingSummaryGeneralContext = createContext();
/**
* A/R aging summary general tab provider.
*/
function ARAgingSummaryGeneralProvider({ ...props }) {
// Retrieve the customers list.
const {
data: { customers },
isLoading: isCustomersLoading,
} = useCustomers();
const provider = {
customers,
isCustomersLoading,
};
// Loading state.
const loading = isCustomersLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<ARAgingSummaryGeneralContext.Provider value={provider} {...props} />
);
}
const useARAgingSummaryGeneralContext = () =>
useContext(ARAgingSummaryGeneralContext);
export { ARAgingSummaryGeneralProvider, useARAgingSummaryGeneralContext };

114
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
View File

@@ -1,116 +1,14 @@
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Intent,
FormGroup,
InputGroup,
Position,
Classes,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
import { momentFormatter } from 'utils';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
import { ARAgingSummaryGeneralProvider } from './ARAgingSummaryGeneralProvider';
import ARAgingSummaryHeaderGeneralContent from './ARAgingSummaryHeaderGeneralContent';
/**
* AR Aging Summary - Drawer Header - General Fields.
* AR Aging Summary - Drawer Header - General Fields - Content.
*/
export default function ARAgingSummaryHeaderGeneral() {
// AR Aging summary context.
const { customers } = useARAgingSummaryContext();
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={'agingDaysBefore'}>
{({ 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>
<Row>
<Col xs={5}>
<Field name="customersIds">
{({ form: { setFieldValue }, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'specific_customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
contacts={customers}
contactsSelected={value}
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
}}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
<ARAgingSummaryGeneralProvider>
<ARAgingSummaryHeaderGeneralContent />
</ARAgingSummaryGeneralProvider>
);
}

121
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.js Normal file
View File

@@ -0,0 +1,121 @@
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Intent,
FormGroup,
InputGroup,
Position,
Classes,
} from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
ContactsMultiSelect,
Row,
Col,
FieldHint,
} from 'components';
import { momentFormatter } from 'utils';
import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
/**
* AR Aging Summary - Drawer Header - General Fields.
*/
export default function ARAgingSummaryHeaderGeneralContent() {
// AR Aging summary context.
const { customers } = useARAgingSummaryGeneralContext();
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={'agingDaysBefore'}>
{({ 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>
<Row>
<Col xs={5}>
<Field name="customersIds">
{({ form: { setFieldValue }, field: { value } }) => (
<FormGroup
label={<T id={'specific_customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
contacts={customers}
contactsSelected={value}
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
}}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

8
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js
View File

@@ -20,19 +20,11 @@ function ARAgingSummaryProvider({ filter, ...props }) {
refetch,
} = useARAgingSummaryReport(query, { keepPreviousData: true });
// Retrieve the customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
} = useCustomers();
const provider = {
ARAgingSummary,
customers,
isARAgingLoading,
isARAgingFetching,
isCustomersFetching,
refetch,
};

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

@@ -2,16 +2,17 @@ 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 { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
import { FinancialStatement } from 'components';
import { BalanceSheetProvider } from './BalanceSheetProvider';
import withBalanceSheetActions from './withBalanceSheetActions';
import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
import { BalanceSheetProvider } from './BalanceSheetProvider';
import { compose } from 'utils';
@@ -19,7 +20,7 @@ import { compose } from 'utils';
* Balance sheet.
*/
function BalanceSheet({
// #withPreferences
// #withCurrentOrganization
organizationName,
// #withBalanceSheetActions
@@ -30,7 +31,7 @@ function BalanceSheet({
toDate: moment().endOf('year').format('YYYY-MM-DD'),
basis: 'cash',
displayColumnsType: 'total',
accountsFilter: 'all-accounts',
accountsFilter: 'without-zero-balance',
});
// Handle re-fetch balance sheet after filter change.
@@ -66,7 +67,6 @@ function BalanceSheet({
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<BalanceSheetLoadingBar />
<BalanceSheetAlerts />
<DashboardPageContent>
<FinancialStatement>
@@ -79,6 +79,8 @@ function BalanceSheet({
</div>
</FinancialStatement>
</DashboardPageContent>
<BalanceSheetAlerts />
</BalanceSheetProvider>
);
}

39
client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -1,18 +1,20 @@
import React from 'react';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import moment from 'moment';
import * as Yup from 'yup';
import { Formik, Form } from 'formik';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withBalanceSheet from './withBalanceSheet';
import withBalanceSheetActions from './withBalanceSheetActions';
import { compose, transformToForm } from 'utils';
import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
import { compose, transformToForm } from 'utils';
import {
getBalanceSheetHeaderDefaultValues,
getBalanceSheetHeaderValidationSchema,
} from './utils';
/**
* Balance sheet header.
@@ -28,14 +30,12 @@ function BalanceSheetHeader({
// #withBalanceSheetActions
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
}) {
const defaultValues = {
basic: 'cash',
fromDate: moment().toDate(),
toDate: moment().toDate(),
};
const defaultValues = getBalanceSheetHeaderDefaultValues();
// Filter form initial values.
const initialValues = transformToForm(
{
...defaultValues,
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
@@ -44,16 +44,7 @@ function BalanceSheetHeader({
);
// Validation schema.
const validationSchema = 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(),
});
const validationSchema = getBalanceSheetHeaderValidationSchema();
// Handle form submit.
const handleSubmit = (values, actions) => {
@@ -63,10 +54,14 @@ function BalanceSheetHeader({
};
// Handle cancel button click.
const handleCancelClick = () => { toggleFilterDrawer(false); };
const handleCancelClick = () => {
toggleFilterDrawer(false);
};
// Handle drawer close action.
const handleDrawerClose = () => { toggleFilterDrawer(false); };
const handleDrawerClose = () => {
toggleFilterDrawer(false);
};
return (
<FinancialStatementHeader

25
client/src/containers/FinancialStatements/BalanceSheet/utils.js Normal file
View 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(),
});

92
client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
View File

@@ -1,94 +1,14 @@
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { Row, Col, FieldHint } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
import CustomersBalanceSummaryGeneralPanelContent from './CustomersBalanceSummaryGeneralPanelContent';
import { CustomersBalanceSummaryGeneralProvider } from './CustomersBalanceSummaryGeneralProvider';
/**
* Customers balance header - general panel.
* Customers balance header - General panel.
*/
export default function CustomersBalanceSummaryGeneralPanel() {
const { customers } = useCustomersBalanceSummaryContext();
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={<T id={'percentage_of_column'} />}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<Field name={'customersIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'Specific customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
}}
contacts={customers}
contactsSelected={value}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
<CustomersBalanceSummaryGeneralProvider>
<CustomersBalanceSummaryGeneralPanelContent />
</CustomersBalanceSummaryGeneralProvider>
);
}

94
client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js Normal file
View File

@@ -0,0 +1,94 @@
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { Row, Col, FieldHint } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider';
/**
* Customers balance header - General panel - Content
*/
export default function CustomersBalanceSummaryGeneralPanelContent() {
const { customers } = useCustomersBalanceSummaryGeneralContext();
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={<T id={'percentage_of_column'} />}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<Field name={'customersIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'Specific customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
}}
contacts={customers}
contactsSelected={value}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

42
client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralProvider.js Normal file
View File

@@ -0,0 +1,42 @@
import React, { createContext, useContext } from 'react';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useCustomers } from 'hooks/query';
const CustomersBalanceSummaryGeneralContext = createContext();
/**
* Customers balance summary provider.
*/
function CustomersBalanceSummaryGeneralProvider({ ...props }) {
// Fetches the customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
isLoading: isCustomersLoading,
} = useCustomers();
const provider = {
isCustomersLoading,
isCustomersFetching,
customers,
};
const loading = isCustomersLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<CustomersBalanceSummaryGeneralContext.Provider
value={provider}
{...props}
/>
);
}
const useCustomersBalanceSummaryGeneralContext = () =>
useContext(CustomersBalanceSummaryGeneralContext);
export {
CustomersBalanceSummaryGeneralProvider,
useCustomersBalanceSummaryGeneralContext,
};

4
client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
View File

@@ -20,10 +20,10 @@ function CustomersBalanceSummaryHeader({
onSubmitFilter,
pageFilter,
//#withCustomersBalanceSummary
// #withCustomersBalanceSummary
customersBalanceDrawerFilter,
//#withCustomersBalanceSummaryActions
// #withCustomersBalanceSummaryActions
toggleCustomerBalanceFilterDrawer,
}) {

23
client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.js
View File

@@ -1,6 +1,6 @@
import React, { createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useCustomerBalanceSummaryReport, useCustomers } from 'hooks/query';
import { useCustomerBalanceSummaryReport } from '../../../hooks/query';
import { transformFilterFormToQuery } from '../common';
const CustomersBalanceSummaryContext = createContext();
@@ -9,37 +9,26 @@ const CustomersBalanceSummaryContext = createContext();
* Customers balance summary provider.
*/
function CustomersBalanceSummaryProvider({ filter, ...props }) {
const query = React.useMemo(() => transformFilterFormToQuery(filter), [
filter,
]);
const query = React.useMemo(
() => transformFilterFormToQuery(filter),
[filter],
);
// Fetches customers balance summary report based on the given report.
const {
data: CustomerBalanceSummary,
isLoading: isCustomersBalanceLoading,
isFetching: isCustomersBalanceFetching,
refetch
refetch,
} = useCustomerBalanceSummaryReport(query, {
keepPreviousData: true,
});
// Fetches the customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
isLoading: isCustomersLoading,
} = useCustomers();
const provider = {
CustomerBalanceSummary,
isCustomersBalanceFetching,
isCustomersBalanceLoading,
isCustomersLoading,
isCustomersFetching,
customers,
refetch,
};
return (

23
client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js
View File

@@ -5,13 +5,27 @@ import { Classes, FormGroup } from '@blueprintjs/core';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { Row, Col } from 'components';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
import {
CustomersTransactionsGeneralPanelProvider,
useCustomersTransactionsGeneralPanelContext,
} from './CustomersTransactionsHeaderGeneralPanelProvider';
/**
* Customers transactions header - General panel.
*/
export default function CustomersTransactionsHeaderGeneralPanel() {
const { customers } = useCustomersTransactionsContext();
return (
<CustomersTransactionsGeneralPanelProvider>
<CustomersTransactionsHeaderGeneralPanelContent />
</CustomersTransactionsGeneralPanelProvider>
);
}
/**
* Customers transactions header - General panel - Content.
*/
function CustomersTransactionsHeaderGeneralPanelContent() {
const { customers } = useCustomersTransactionsGeneralPanelContext();
return (
<div>
@@ -20,10 +34,7 @@ export default function CustomersTransactionsHeaderGeneralPanel() {
<Row>
<Col xs={5}>
<Field name={'customersIds'}>
{({
form: { setFieldValue },
field: { value },
}) => (
{({ form: { setFieldValue }, field: { value } }) => (
<FormGroup
label={<T id={'specific_customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}

41
client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanelProvider.js Normal file
View File

@@ -0,0 +1,41 @@
import React, { createContext, useContext } from 'react';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useCustomers } from '../../../hooks/query';
const CustomersTransactionsGeneralPanelContext = createContext();
/**
* Customers transactions provider.
*/
function CustomersTransactionsGeneralPanelProvider({ ...props }) {
// Fetches the customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
isLoading: isCustomersLoading,
} = useCustomers();
const provider = {
customers,
isCustomersLoading,
isCustomersFetching,
};
const loading = isCustomersLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<CustomersTransactionsGeneralPanelContext.Provider
value={provider}
{...props}
/>
);
}
const useCustomersTransactionsGeneralPanelContext = () =>
useContext(CustomersTransactionsGeneralPanelContext);
export {
CustomersTransactionsGeneralPanelProvider,
useCustomersTransactionsGeneralPanelContext,
};

13
client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js
View File

@@ -1,6 +1,6 @@
import React, { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useCustomersTransactionsReport, useCustomers } from 'hooks/query';
import { useCustomersTransactionsReport } from '../../../hooks/query';
import { transformFilterFormToQuery } from '../common';
const CustomersTransactionsContext = createContext();
@@ -21,23 +21,12 @@ function CustomersTransactionsProvider({ filter, ...props }) {
refetch: CustomersTransactionsRefetch,
} = useCustomersTransactionsReport(query, { keepPreviousData: true });
// Fetches the customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
isLoading: isCustomersLoading,
} = useCustomers();
const provider = {
customersTransactions,
isCustomersTransactionsFetching,
isCustomersTransactionsLoading,
CustomersTransactionsRefetch,
customers,
isCustomersLoading,
isCustomersFetching,
filter,
query
};

26
client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.js Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import { Classes } from '@blueprintjs/core';
import clsx from 'classnames';
import Style from './FinancialHeaderLoadingSkeleton.module.scss';
function FinancialHeaderLoadingSkeletonLine() {
return (
<div className={clsx(Style.line)}>
<h4 className={clsx(Classes.SKELETON, Style.line_label)}>XXXXXXXX</h4>
<h4 className={clsx(Classes.SKELETON, Style.line_field)}>XXXXXXXX</h4>
</div>
);
}
/**
* Financial drawer header loading skeleton.
*/
export function FinancialHeaderLoadingSkeleton() {
return (
<div className={clsx(Style.lines)}>
<FinancialHeaderLoadingSkeletonLine />
<FinancialHeaderLoadingSkeletonLine />
<FinancialHeaderLoadingSkeletonLine />
</div>
);
}

22
client/src/containers/FinancialStatements/FinancialHeaderLoadingSkeleton.module.scss Normal file
View File

@@ -0,0 +1,22 @@
.lines {
padding-top: 20px;
.line+.line {
margin-top: 30px;
}
}
.line {
display: flex;
width: 600px;
flex-direction: row;
&_label {
width: 30%;
margin-right: 20px;
}
&_field {
width: 70%;
}
}

32
client/src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.js Normal file
View File

@@ -0,0 +1,32 @@
import React, { createContext, useContext } from 'react';
import { useAccounts } from 'hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const GLHeaderGeneralPanelContext = createContext();
/**
* General ledger provider.
*/
function GLHeaderGeneralPanelProvider({ ...props }) {
// Accounts list.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
// Provider
const provider = {
accounts,
isAccountsLoading,
};
const loading = isAccountsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<GLHeaderGeneralPanelContext.Provider value={provider} {...props} />
);
}
const useGLGeneralPanelContext = () => useContext(GLHeaderGeneralPanelContext);
export { GLHeaderGeneralPanelProvider, useGLGeneralPanelContext };

29
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
View File

@@ -1,8 +1,5 @@
import React from 'react';
import {
FormGroup,
Classes,
} from '@blueprintjs/core';
import { FormGroup, Classes } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import classNames from 'classnames';
@@ -11,18 +8,30 @@ import { AccountsMultiSelect, Row, Col } from 'components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import RadiosAccountingBasis from '../RadiosAccountingBasis';
import FinancialAccountsFilter from '../FinancialAccountsFilter';
import { GLHeaderGeneralPanelProvider } from './GLHeaderGeneralPaneProvider';
import { filterAccountsOptions } from './common';
import { useGeneralLedgerContext } from './GeneralLedgerProvider'
import { useGLGeneralPanelContext } from './GLHeaderGeneralPaneProvider';
/**
* General ledger (GL) - Header - General panel.
*/
export default function GeneralLedgerHeaderGeneralPane() {
const { accounts } = useGeneralLedgerContext();
export default function GLHeaderGeneralPane() {
return (
<GLHeaderGeneralPanelProvider>
<GLHeaderGeneralPaneContent />
</GLHeaderGeneralPanelProvider>
);
}
/**
* General ledger (GL) - Header - General panel - content.
*/
function GLHeaderGeneralPaneContent() {
const { accounts } = useGLGeneralPanelContext();
return (
<div>
<React.Fragment>
<FinancialStatementDateRange />
<FinancialAccountsFilter
items={filterAccountsOptions}
@@ -40,6 +49,6 @@ export default function GeneralLedgerHeaderGeneralPane() {
</Row>
<RadiosAccountingBasis key={'basis'} />
</div>
</React.Fragment>
);
}
}

9
client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js
View File

@@ -13,20 +13,13 @@ function GeneralLedgerProvider({ query, ...props }) {
isFetching,
isLoading,
refetch,
} = useGeneralLedgerSheet(query, {
keepPreviousData: true,
});
// Accounts list.
const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
} = useGeneralLedgerSheet(query, { keepPreviousData: true });
const provider = {
generalLedger,
accounts,
sheetRefresh: refetch,
isFetching,
isLoading,
isAccountsLoading,
};
return (
<FinancialReportPage name={'general-ledger-sheet'}>

23
client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralPanel.js
View File

@@ -3,14 +3,25 @@ import classNames from 'classnames';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import { Row, Col, FormattedMessage as T } from 'components';
import { ItemsMultiSelect } from 'components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { useInventoryItemDetailsContext } from './InventoryItemDetailsProvider';
import { InventoryItemDetailsHeaderGeneralProvider } from './InventoryItemDetailsHeaderGeneralProvider';
/**
* Inventory item details header - General panel.
*/
export default function InventoryItemDetailsHeaderGeneralPanel() {
return (
<InventoryItemDetailsHeaderGeneralProvider>
<InventoryItemDetailsHeaderGeneralPanelContent />
</InventoryItemDetailsHeaderGeneralProvider>
);
}
/**
* Inventory item details header - General panel - Content.
*/
function InventoryItemDetailsHeaderGeneralPanelContent() {
const { items } = useInventoryItemDetailsContext();
return (
@@ -28,15 +39,7 @@ export default function InventoryItemDetailsHeaderGeneralPanel() {
<FormGroup
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ItemsMultiSelect
items={items}
selectedItems={value}
onItemSelect={(itemsIds) => {
setFieldValue('itemsIds', itemsIds);
}}
/>
</FormGroup>
></FormGroup>
)}
</Field>
</Col>

46
client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderGeneralProvider.js Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import { useItems } from 'hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const InventoryItemDetailsHeaderGeneralContext = React.createContext();
/**
* Inventory item details provider.
*/
function InventoryItemDetailsHeaderGeneralProvider({ ...props }) {
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
page_size: 10000,
});
const provider = {
isItemsFetching,
isItemsLoading,
items,
};
// Loading state.
const loading = isItemsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<InventoryItemDetailsHeaderGeneralContext.Provider
value={provider}
{...props}
/>
);
}
const useInventoryItemDetailsHeaderGeneralContext = () =>
React.useContext(InventoryItemDetailsHeaderGeneralContext);
export {
InventoryItemDetailsHeaderGeneralProvider,
useInventoryItemDetailsHeaderGeneralContext,
};

18
client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useItems, useInventoryItemDetailsReport } from 'hooks/query';
import { useInventoryItemDetailsReport } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const InventoryItemDetailsContext = React.createContext();
@@ -22,28 +22,12 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
refetch: inventoryItemDetailsRefetch,
} = useInventoryItemDetailsReport(query, { keepPreviousData: true });
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
page_size: 10000,
});
const provider = {
inventoryItemDetails,
isInventoryItemDetailsFetching,
isInventoryItemDetailsLoading,
inventoryItemDetailsRefetch,
isItemsFetching,
isItemsLoading,
items,
query,
filter,
};

26
client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
View File

@@ -11,13 +11,27 @@ import {
inputIntent,
handleDateChange,
} from 'utils';
import { useInventoryValuationContext } from './InventoryValuationProvider';
import {
InventoryValuationGeneralPanelProvider,
useInventoryValuationGeneralPanelContext,
} from './InventoryValuationHeaderGeneralPanelProvider';
/**
* Inventory valuation - Drawer Header - General panel.
*/
export default function InventoryValuationHeaderGeneralPanel() {
const { items } = useInventoryValuationContext();
return (
<InventoryValuationGeneralPanelProvider>
<InventoryValuationHeaderGeneralPanelContent />
</InventoryValuationGeneralPanelProvider>
);
}
/**
* Inventory valuation - Drawer Header - General panel - Content.
*/
function InventoryValuationHeaderGeneralPanelContent() {
const { items } = useInventoryValuationGeneralPanelContext();
return (
<div>
@@ -59,13 +73,7 @@ export default function InventoryValuationHeaderGeneralPanel() {
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ItemsMultiSelect
items={items}
selectedItems={value}
onItemSelect={(itemsIds) => {
setFieldValue('itemsIds', itemsIds);
}}
/>
</FormGroup>
)}
</Field>

45
client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanelProvider.js Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useItems } from 'hooks/query';
const InventoryValuationGeneralPanelContext = React.createContext();
function InventoryValuationGeneralPanelProvider({ query, ...props }) {
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
page_size: 10000,
});
// Provider data.
const provider = {
items,
isItemsFetching,
isItemsLoading,
};
const loading = isItemsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<InventoryValuationGeneralPanelContext.Provider
value={provider}
{...props}
/>
);
}
const useInventoryValuationGeneralPanelContext = () =>
React.useContext(InventoryValuationGeneralPanelContext);
export {
InventoryValuationGeneralPanelProvider,
useInventoryValuationGeneralPanelContext,
};

17
client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useInventoryValuation, useItems } from 'hooks/query';
import { useInventoryValuation } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const InventoryValuationContext = React.createContext();
@@ -20,17 +20,6 @@ function InventoryValuationProvider({ query, ...props }) {
},
);
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
page_size: 10000,
});
// Provider data.
const provider = {
@@ -38,10 +27,6 @@ function InventoryValuationProvider({ query, ...props }) {
isLoading,
isFetching,
refetchSheet: refetch,
items,
isItemsFetching,
isItemsLoading,
};
return (

5
client/src/containers/FinancialStatements/Journal/components.js
View File

@@ -19,29 +19,34 @@ export const useJournalTableColumns = () => {
row.date ? moment(row.date).format('YYYY MMM DD') : '',
className: 'date',
width: 100,
textOverview: true,
},
{
Header: intl.get('transaction_type'),
accessor: 'reference_type_formatted',
className: 'reference_type_formatted',
width: 120,
textOverview: true,
},
{
Header: intl.get('num'),
accessor: 'transaction_number',
className: 'reference_id',
width: 70,
textOverview: true,
},
{
Header: intl.get('description'),
accessor: 'note',
className: 'note',
textOverview: true,
},
{
Header: intl.get('acc_code'),
accessor: 'account_code',
width: 95,
className: 'account_code',
textOverview: true,
},
{
Header: intl.get('account'),

1
client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
View File

@@ -65,6 +65,7 @@ function PurchasesByItems({
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<PurchasesByItemsLoadingBar />
<DashboardPageContent>
<div className="financial-statement financial-statement--purchases-by-items">
<PurchasesByItemsHeader

28
client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.js
View File

@@ -6,13 +6,27 @@ import classNames from 'classnames';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { ItemsMultiSelect } from 'components';
import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
import {
PurchasesByItemsGeneralPanelProvider,
usePurchaseByItemsGeneralPanelContext,
} from './PurchasesByItemsGeneralPanelProvider';
/**
*
*/
export default function PurchasesByItemsGeneralPanel() {
return (
<PurchasesByItemsGeneralPanelProvider>
<PurchasesByItemsGeneralPanelContent />
</PurchasesByItemsGeneralPanelProvider>
);
}
/**
* Purchases by items - Drawer header - General panel.
*/
export default function PurchasesByItemsGeneralPanel() {
const { items } = usePurchaseByItemsContext();
function PurchasesByItemsGeneralPanelContent() {
const { items } = usePurchaseByItemsGeneralPanelContext();
return (
<div>
@@ -30,13 +44,7 @@ export default function PurchasesByItemsGeneralPanel() {
label={<T id={'Specific items'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ItemsMultiSelect
items={items}
selectedItems={value}
onItemSelect={(itemsIds) => {
setFieldValue('itemsIds', itemsIds);
}}
/>
</FormGroup>
)}
</Field>

40
client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanelProvider.js Normal file
View File

@@ -0,0 +1,40 @@
import React, { createContext, useContext } from 'react';
import { useItems } from '../../../hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const PurchasesByItemsGeneralPanelContext = createContext();
function PurchasesByItemsGeneralPanelProvider({ ...props }) {
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
page_size: 10000,
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
});
const provider = {
items,
isItemsLoading,
isItemsFetching,
};
const loading = isItemsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<PurchasesByItemsGeneralPanelContext.Provider value={provider} {...props} />
);
}
const usePurchaseByItemsGeneralPanelContext = () =>
useContext(PurchasesByItemsGeneralPanelContext);
export {
PurchasesByItemsGeneralPanelProvider,
usePurchaseByItemsGeneralPanelContext,
};

18
client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsProvider.js
View File

@@ -1,6 +1,6 @@
import React, { createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { usePurchasesByItems, useItems } from 'hooks/query';
import { usePurchasesByItems } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const PurchasesByItemsContext = createContext();
@@ -21,27 +21,11 @@ function PurchasesByItemsProvider({ query, ...props }) {
},
);
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
page_size: 10000,
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
});
const provider = {
purchaseByItems,
isFetching,
isLoading,
items,
isItemsLoading,
isItemsFetching,
refetchSheet: refetch,
};
return (

17
client/src/containers/FinancialStatements/SalesByItems/SalesByItemProvider.js
View File

@@ -20,27 +20,10 @@ function SalesByItemProvider({ query, ...props }) {
},
);
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
page_size: 10000,
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
});
const provider = {
salesByItems,
isFetching,
isLoading,
items,
isItemsLoading,
isItemsFetching,
refetchSheet: refetch,
};
return (

1
client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
View File

@@ -67,6 +67,7 @@ function SalesByItems({
onNumberFormatSubmit={handleNumberFormatSubmit}
/>
<SalesByItemsLoadingBar />
<DashboardPageContent>
<div class="financial-statement financial-statement--sales-by-items">
<SalesByItemsHeader

21
client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.js
View File

@@ -2,15 +2,30 @@ import React from 'react';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import classNames from 'classnames';
import { Row, Col, ItemsMultiSelect, FormattedMessage as T } from 'components';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { useSalesByItemsContext } from './SalesByItemProvider';
import {
SalesByItemGeneralPanelProvider,
useSalesByItemsGeneralPanelContext,
} from './SalesByItemsHeaderGeneralPanelProvider';
/**
* sells by items - Drawer header - General panel.
* Sales by items - Drawer header - General panel.
*/
export default function SalesByItemsHeaderGeneralPanel() {
const { items } = useSalesByItemsContext();
return (
<SalesByItemGeneralPanelProvider>
<SalesByItemsHeaderGeneralPanelContent />
</SalesByItemGeneralPanelProvider>
);
}
/**
* Sales by items - Drawer header - General panel - Content.
*/
function SalesByItemsHeaderGeneralPanelContent() {
const { items } = useSalesByItemsGeneralPanelContext();
return (
<div>

40
client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanelProvider.js Normal file
View File

@@ -0,0 +1,40 @@
import React, { createContext, useContext } from 'react';
import { useItems } from 'hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const SalesByItemGeneralPanelContext = createContext();
/**
* Sales by items - General panel - Booting.
*/
function SalesByItemGeneralPanelProvider({ query, ...props }) {
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({
page_size: 10000,
stringified_filter_roles: JSON.stringify([
{ fieldKey: 'type', comparator: 'is', value: 'inventory', index: 1 },
]),
});
const provider = {
items,
isItemsLoading,
isItemsFetching,
};
const loading = isItemsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<SalesByItemGeneralPanelContext.Provider value={provider} {...props} />
);
}
const useSalesByItemsGeneralPanelContext = () =>
useContext(SalesByItemGeneralPanelContext);
export { SalesByItemGeneralPanelProvider, useSalesByItemsGeneralPanelContext };

92
client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
View File

@@ -1,94 +1,14 @@
import React from 'react';
import { Field, FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames';
import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import { Row, Col, FieldHint } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
import VendorsBalanceSummaryHeaderGeneralContent from './VendorsBalanceSummaryHeaderGeneralContent';
import { VendorsBalanceSummaryGeneralPanelProvider } from './VendorsBalanceSummaryHeaderGeneralProvider';
/**
* Vendors balance header -general panel.
* Vendors balance header - General panel.
*/
export default function VendorsBalanceSummaryHeaderGeneral() {
const { vendors } = useVendorsBalanceSummaryContext();
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}
small={true}
label={<T id={'percentage_of_column'} />}
name={'percentage'}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={4}>
<Field name={'vendorsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'specific_vendors'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
onContactSelect={(contactsIds) => {
setFieldValue('vendorsIds', contactsIds);
}}
contacts={vendors}
contactsSelected={value}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
<VendorsBalanceSummaryGeneralPanelProvider>
<VendorsBalanceSummaryHeaderGeneralContent />
</VendorsBalanceSummaryGeneralPanelProvider>
);
}

86
client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js Normal file
View File

@@ -0,0 +1,86 @@
import React from 'react';
import { Field, FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames';
import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
import { Row, Col, FieldHint, FormattedMessage as T } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
import { useVendorsBalanceSummaryGeneralPanelContext } from './VendorsBalanceSummaryHeaderGeneralProvider';
/**
* Vendors balance header - General panel - Content.
*/
export default function VendorsBalanceSummaryHeaderGeneralContent() {
const { vendors } = useVendorsBalanceSummaryGeneralPanelContext();
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}
small={true}
label={<T id={'percentage_of_column'} />}
name={'percentage'}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
<Row>
<Col xs={4}>
<Field name={'vendorsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'specific_vendors'} />}
className={classNames('form-group--select-list', Classes.FILL)}
></FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

44
client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralProvider.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useVendors } from '../../../hooks/query';
const VendorsBalanceSummaryGeneralPanelContext = React.createContext();
/**
* Vendors balance summary provider.
*/
function VendorsBalanceSummaryGeneralPanelProvider({ filter, ...props }) {
// Fetch vendors list with pagination meta.
const {
data: { vendors },
isLoading: isVendorsLoading,
isFetching: isVendorsFetching,
} = useVendors({ page_size: 1000000 });
// Provider.
const provider = {
vendors,
isVendorsFetching,
isVendorsLoading,
};
const loading = isVendorsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<VendorsBalanceSummaryGeneralPanelContext.Provider
value={provider}
{...props}
/>
);
}
const useVendorsBalanceSummaryGeneralPanelContext = () =>
React.useContext(VendorsBalanceSummaryGeneralPanelContext);
export {
VendorsBalanceSummaryGeneralPanelProvider,
useVendorsBalanceSummaryGeneralPanelContext,
};

13
client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useVendorsBalanceSummaryReport, useVendors } from 'hooks/query';
import { useVendorsBalanceSummaryReport } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const VendorsBalanceSummaryContext = React.createContext();
@@ -23,23 +23,12 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
keepPreviousData: true,
});
// Fetch vendors list with pagination meta.
const {
data: { vendors },
isLoading: isVendorsLoading,
isFetching: isVendorsFetching,
} = useVendors({ page_size: 1000000 });
// Provider.
const provider = {
VendorBalanceSummary,
isVendorsBalanceLoading,
isVendorsBalanceFetching,
vendors,
isVendorsFetching,
isVendorsLoading,
refetch,
};

31
client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js
View File

@@ -2,16 +2,35 @@ import React from 'react';
import { Field } from 'formik';
import classNames from 'classnames';
import { Classes, FormGroup } from '@blueprintjs/core';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { Row, Col } from 'components';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
import FinancialStatementDateRange from '../FinancialStatementDateRange';
import {
Row,
Col,
ContactsMultiSelect,
FormattedMessage as T,
} from 'components';
import {
VendorsTransactionsGeneralPanelProvider,
useVendorsTransactionsGeneralPanelContext,
} from './VendorsTransactionsHeaderGeneralPanelProvider';
/**
* Vendors transactions header - General panel.
* Vendors transactions header - General panel
*/
export default function VendorsTransactionsHeaderGeneralPanel() {
const { vendors } = useVendorsTransactionsContext();
return (
<VendorsTransactionsGeneralPanelProvider>
<VendorsTransactionsHeaderGeneralPanelContent />
</VendorsTransactionsGeneralPanelProvider>
);
}
/**
* Vendors transactions header - General panel - Content.
*/
function VendorsTransactionsHeaderGeneralPanelContent() {
const { vendors } = useVendorsTransactionsGeneralPanelContext();
return (
<div>

42
client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanelProvider.js Normal file
View File

@@ -0,0 +1,42 @@
import React, { createContext, useContext } from 'react';
import { useVendors } from 'hooks/query';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
const VendorsTransactionsGeneralPanelContext = createContext();
/**
* Vendors transactions provider.
*/
function VendorsTransactionsGeneralPanelProvider({ ...props }) {
// Fetch vendors list based on the given query.
const {
data: { vendors },
isLoading: isVendorsLoading,
isFetching: isVendorsFetching,
} = useVendors({ page_size: 100000 });
const provider = {
vendors,
isVendorsLoading,
isVendorsFetching,
};
const loading = isVendorsLoading;
return loading ? (
<FinancialHeaderLoadingSkeleton />
) : (
<VendorsTransactionsGeneralPanelContext.Provider
value={provider}
{...props}
/>
);
}
const useVendorsTransactionsGeneralPanelContext = () =>
useContext(VendorsTransactionsGeneralPanelContext);
export {
VendorsTransactionsGeneralPanelProvider,
useVendorsTransactionsGeneralPanelContext,
};

13
client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js
View File

@@ -1,6 +1,6 @@
import React, { createContext, useContext, useMemo } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useVendorsTransactionsReport, useVendors } from 'hooks/query';
import { useVendorsTransactionsReport } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const VendorsTransactionsContext = createContext();
@@ -19,22 +19,11 @@ function VendorsTransactionsProvider({ filter, ...props }) {
refetch,
} = useVendorsTransactionsReport(query, { keepPreviousData: true });
// Fetch vendors list based on the given query.
const {
data: { vendors },
isLoading: isVendorsLoading,
isFetching: isVendorsFetching,
} = useVendors({ page_size: 100000 });
const provider = {
vendorsTransactions,
isVendorsTransactionsLoading,
isVendorsTransactionFetching,
vendors,
isVendorsLoading,
isVendorsFetching,
refetch,
filter,
query,