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

fix: Filter financial reports by items, customers or vendors.

Browse Source
This commit is contained in:
a.bouhuolia
2021-07-25 03:59:02 +02:00
parent 504b380da6
commit 3a7f8a4512
71 changed files with 1021 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
View File

@@ -30,6 +30,7 @@ function APAgingSummary({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
agingBeforeDays: 30,
agingPeriods: 3,
vendorsIds: [],
});
// Handle filter submit.
@@ -63,7 +64,7 @@ function APAgingSummary({
<APAgingSummarySheetLoadingBar />
<DashboardPageContent>
<FinancialStatement>
<FinancialStatement name={'AP-aging-summary'}>
<APAgingSummaryHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

36
client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
View File

@@ -12,6 +12,7 @@ import withAPAgingSummary from './withAPAgingSummary';
import withAPAgingSummaryActions from './withAPAgingSummaryActions';
import { compose } from 'utils';
import { transformToForm } from '../../../utils';
/**
* AP Aging Summary Report - Drawer Header.
@@ -25,16 +26,17 @@ function APAgingSummaryHeader({
toggleAPAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
// #withAPAgingSummary
isFilterDrawerOpen
isFilterDrawerOpen,
}) {
// Validation schema.
const validationSchema = Yup.object({
as_date: Yup.date().required().label('asDate'),
aging_days_before: Yup.number()
asDate: Yup.date().required().label('asDate'),
agingDaysBefore: Yup.number()
.required()
.integer()
.positive()
.label('agingBeforeDays'),
aging_periods: Yup.number()
agingPeriods: Yup.number()
.required()
.integer()
.positive()
@@ -42,11 +44,14 @@ function APAgingSummaryHeader({
});
// Initial values.
const initialValues = {
as_date: moment(pageFilter.asDate).toDate(),
aging_days_before: 30,
aging_periods: 3,
const defaultValues = {
asDate: moment(pageFilter.asDate).toDate(),
agingDaysBefore: 30,
agingPeriods: 3,
vendorsIds: [],
};
// Formik initial values.
const initialValues = transformToForm(pageFilter, defaultValues);
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
@@ -55,18 +60,17 @@ function APAgingSummaryHeader({
setSubmitting(false);
};
// handle cancel button click.
const handleCancelClick = () => {
toggleFilterDrawerDisplay(false);
};
// Handle cancel button click.
const handleCancelClick = () => { toggleFilterDrawerDisplay(false); };
// Handle the drawer closing.
const handleDrawerClose = () => {
toggleFilterDrawerDisplay(false);
};
const handleDrawerClose = () => { toggleFilterDrawerDisplay(false); };
return (
<FinancialStatementHeader isOpen={isFilterDrawerOpen} drawerProps={{ onClose: handleDrawerClose }}>
<FinancialStatementHeader
isOpen={isFilterDrawerOpen}
drawerProps={{ onClose: handleDrawerClose }}
>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}

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

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField } from 'formik';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Intent,
@@ -51,9 +51,10 @@ export default function APAgingSummaryHeaderGeneral() {
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'aging_days_before'}>
<FastField name={'agingDaysBefore'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_before_days'} />}
@@ -66,9 +67,10 @@ export default function APAgingSummaryHeaderGeneral() {
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'aging_periods'}>
<FastField name={'agingPeriods'}>
{({ field, meta: { error } }) => (
<FormGroup
label={<T id={'aging_periods'} />}
@@ -81,17 +83,29 @@ export default function APAgingSummaryHeaderGeneral() {
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'specific_vendors'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect
defaultText={<T id={'all_vendors'} />}
contacts={vendors}
/>
</FormGroup>
<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>

5
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
View File

@@ -18,7 +18,7 @@ import withSettings from 'containers/Settings/withSettings';
import { compose } from 'utils';
/**
* AR aging summary report.
* A/R aging summary report.
*/
function ReceivableAgingSummarySheet({
// #withSettings
@@ -31,6 +31,7 @@ function ReceivableAgingSummarySheet({
asDate: moment().endOf('day').format('YYYY-MM-DD'),
agingDaysBefore: 30,
agingPeriods: 3,
customersIds: [],
});
// Handle filter submit.
@@ -61,7 +62,7 @@ function ReceivableAgingSummarySheet({
<ARAgingSummarySheetLoadingBar />
<DashboardPageContent>
<FinancialStatement>
<FinancialStatement name={'AR-aging-summary'}>
<ARAgingSummaryHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

17
client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
View File

@@ -11,7 +11,7 @@ import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
import withARAgingSummary from './withARAgingSummary';
import withARAgingSummaryActions from './withARAgingSummaryActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* AR Aging Summary Report - Drawer Header.
@@ -41,11 +41,20 @@ function ARAgingSummaryHeader({
.label('agingPeriods'),
});
// Initial values.
const initialValues = {
asDate: moment(pageFilter.asDate).toDate(),
const defaultValues = {
asDate: moment().toDate(),
agingDaysBefore: 30,
agingPeriods: 3,
customersIds: [],
};
// Initial values.
const initialValues = transformToForm(
{
...pageFilter,
asDate: moment(pageFilter.asDate).toDate(),
},
defaultValues,
);
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
@@ -58,7 +67,7 @@ function ARAgingSummaryHeader({
const handleCancelClick = () => {
toggleFilterDrawerDisplay(false);
};
// Handle the drawer close.
const handleDrawerClose = () => {
toggleFilterDrawerDisplay(false);

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

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField } from 'formik';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Intent,
@@ -93,14 +93,24 @@ export default function ARAgingSummaryHeaderGeneral() {
</Row>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'specific_customers'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<ContactsMultiSelect contacts={customers} />
</FormGroup>
<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>
);
}
}

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

@@ -11,7 +11,7 @@ import FinancialStatementHeader from 'containers/FinancialStatements/FinancialSt
import withBalanceSheet from './withBalanceSheet';
import withBalanceSheetActions from './withBalanceSheetActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
/**
@@ -28,20 +28,25 @@ function BalanceSheetHeader({
// #withBalanceSheetActions
toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
}) {
// Filter form initial values.
const initialValues = {
basis: 'cash',
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
const defaultValues = {
basic: 'cash',
fromDate: moment().toDate(),
toDate: moment().toDate(),
};
// Filter form initial values.
const initialValues = transformToForm(
{
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
},
defaultValues,
);
// Validation schema.
const validationSchema = Yup.object().shape({
dateRange: Yup.string().optional(),
fromDate: Yup.date()
.required()
.label(intl.get('fromDate')),
fromDate: Yup.date().required().label(intl.get('fromDate')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
@@ -58,14 +63,10 @@ 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

18
client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
View File

@@ -12,7 +12,7 @@ import CashFlowStatementGeneralPanel from './CashFlowStatementGeneralPanel';
import withCashFlowStatement from './withCashFlowStatement';
import withCashFlowStatementActions from './withCashFlowStatementActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Cash flow statement header.
@@ -22,18 +22,24 @@ function CashFlowStatementHeader({
onSubmitFilter,
pageFilter,
//#withCashFlowStatement
// #withCashFlowStatement
isFilterDrawerOpen,
//#withCashStatementActions
// #withCashStatementActions
toggleCashFlowStatementFilterDrawer,
}) {
// filter form initial values.
const initialValues = {
// Filter form default values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
};
// Initial form values.
const initialValues = transformToForm({
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
};
}, defaultValues);
// Validation schema.
const validationSchema = Yup.object().shape({

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

@@ -1,14 +1,9 @@
import React from 'react';
import { FastField } from 'formik';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
FormGroup,
Position,
Classes,
Checkbox,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
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,
@@ -16,11 +11,14 @@ import {
inputIntent,
handleDateChange,
} from 'utils';
import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
/**
* Customers balance header - general panel.
*/
export default function CustomersBalanceSummaryGeneralPanel() {
const { customers } = useCustomersBalanceSummaryContext();
return (
<div>
<Row>
@@ -48,6 +46,7 @@ export default function CustomersBalanceSummaryGeneralPanel() {
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'percentage'} type={'checkbox'}>
@@ -57,7 +56,7 @@ export default function CustomersBalanceSummaryGeneralPanel() {
inline={true}
name={'percentage'}
small={true}
label={<T id={'percentage_of_column'}/>}
label={<T id={'percentage_of_column'} />}
{...field}
/>
</FormGroup>
@@ -65,6 +64,31 @@ export default function CustomersBalanceSummaryGeneralPanel() {
</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>
);
}

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

@@ -4,14 +4,13 @@ import { Formik, Form } from 'formik';
import moment from 'moment';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import withCustomersBalanceSummary from './withCustomersBalanceSummary';
import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
import CustomersBalanceSummaryGeneralPanel from './CustomersBalanceSummaryGeneralPanel';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Customers balance summary.
@@ -33,11 +32,17 @@ function CustomersBalanceSummaryHeader({
asDate: Yup.date().required().label('asDate'),
});
// filter form initial values.
const initialValues = {
// Default form values.
const defaultValues = {
asDate: moment().toDate(),
customersIds: [],
};
// Filter form initial values.
const initialValues = transformToForm({
...pageFilter,
asDate: moment(pageFilter.asDate).toDate(),
};
}, defaultValues);
// handle form submit.
const handleSubmit = (values, { setSubmitting }) => {

15
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 } from 'hooks/query';
import { useCustomerBalanceSummaryReport, useCustomers } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const CustomersBalanceSummaryContext = createContext();
@@ -14,6 +14,7 @@ function CustomersBalanceSummaryProvider({ filter, ...props }) {
filter,
]);
// Fetches customers balance summary report based on the given report.
const {
data: CustomerBalanceSummary,
isLoading: isCustomersBalanceLoading,
@@ -23,10 +24,22 @@ function CustomersBalanceSummaryProvider({ filter, ...props }) {
keepPreviousData: true,
});
// Fetches the customers list.
const {
data: { customers },
isFetching: isCustomersFetching,
isLoading: isCustomersLoading,
} = useCustomers();
const provider = {
CustomerBalanceSummary,
isCustomersBalanceFetching,
isCustomersBalanceLoading,
isCustomersLoading,
isCustomersFetching,
customers,
refetch,
};
return (

21
client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
View File

@@ -12,7 +12,7 @@ import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHead
import withCustomersTransactions from './withCustomersTransactions';
import withCustomersTransactionsActions from './withCustomersTransactionsActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Customers transactions header.
@@ -28,14 +28,18 @@ function CustomersTransactionsHeader({
//#withCustomersTransactionsActions
toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer,
}) {
// Filter form initial values.
const initialValues = {
// Default form values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
customersIds: [],
};
// Initial form values.
const initialValues = transformToForm({
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
};
}, defaultValues);
// Validation schema.
const validationSchema = Yup.object().shape({
@@ -54,11 +58,8 @@ function CustomersTransactionsHeader({
toggleFilterDrawer(false);
setSubmitting(false);
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleFilterDrawer(false);
};
const handleDrawerClose = () => { toggleFilterDrawer(false); };
return (
<FinancialStatementHeader

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

@@ -1,13 +1,45 @@
import React from 'react';
import classNames from 'classnames';
import { Field } from 'formik';
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';
/**
* Customers transactions header - General panel.
*/
export default function CustomersTransactionsHeaderGeneralPanel() {
const { customers } = useCustomersTransactionsContext();
return (
<div>
<FinancialStatementDateRange />
<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
onContactSelect={(contactsIds) => {
setFieldValue('customersIds', contactsIds);
}}
contacts={customers}
contactsSelected={value}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

14
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 } from 'hooks/query';
import { useCustomersTransactionsReport, useCustomers } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const CustomersTransactionsContext = createContext();
@@ -21,11 +21,23 @@ 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
};

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

@@ -11,7 +11,7 @@ import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
import withGeneralLedger from './withGeneralLedger';
import withGeneralLedgerActions from './withGeneralLedgerActions';
import { compose, saveInvoke } from 'utils';
import { compose, transformToForm, saveInvoke } from 'utils';
/**
* Geenral Ledger (GL) - Header.
@@ -27,13 +27,22 @@ function GeneralLedgerHeader({
// #withGeneralLedger
isFilterDrawerOpen,
}) {
// Initial values.
const initialValues = {
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
// Default values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
};
// Initial values.
const initialValues = transformToForm(
{
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
},
defaultValues,
);
// Validation schema.
const validationSchema = Yup.object().shape({
dateRange: Yup.string().optional(),

10
client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
View File

@@ -33,7 +33,7 @@ function InventoryItemDetails({
fromDate: moment().startOf('year').format('YYYY-MM-DD'),
toDate: moment().endOf('year').format('YYYY-MM-DD'),
});
// Handle filter submit.
const handleFilterSubmit = (filter) => {
const _filter = {
...filter,
@@ -61,10 +61,14 @@ function InventoryItemDetails({
/>
<InventoryItemDetailsLoadingBar />
<InventoryItemDetailsAlerts />
<DashboardPageContent>
<FinancialStatement>
<div className={'financial-statement--inventory-details'}>
<div
className={
'financial-statement financial-statement--inventory-details'
}
>
<InventoryItemDetailsHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

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

@@ -12,7 +12,7 @@ import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeader
import withInventoryItemDetails from './withInventoryItemDetails';
import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Inventory item details header.
@@ -21,20 +21,25 @@ function InventoryItemDetailsHeader({
// #ownProps
onSubmitFilter,
pageFilter,
//#withInventoryItemDetails
// #withInventoryItemDetails
isFilterDrawerOpen,
//#withInventoryItemDetailsActions
// #withInventoryItemDetailsActions
toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
}) {
// Default form values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
itemsIds: [],
};
//Filter form initial values.
const initialValues = {
// Filter form initial values.
const initialValues = transformToForm({
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
};
}, defaultValues);
// Validation schema.
const validationSchema = Yup.object().shape({
@@ -56,9 +61,7 @@ function InventoryItemDetailsHeader({
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleFilterDrawer(false);
};
const handleDrawerClose = () => { toggleFilterDrawer(false); };
return (
<FinancialStatementHeader

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

@@ -1,13 +1,46 @@
import React from 'react';
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';
/**
* Inventory item details header - General panel.
*/
export default function InventoryItemDetailsHeaderGeneralPanel() {
const { items } = useInventoryItemDetailsContext();
return (
<div>
<FinancialStatementDateRange />
<Row>
<Col xs={4}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<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>
)}
</Field>
</Col>
</Row>
</div>
);
}

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

@@ -1,6 +1,6 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useInventoryItemDetailsReport } from 'hooks/query';
import { useItems, useInventoryItemDetailsReport } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const InventoryItemDetailsContext = React.createContext();
@@ -14,7 +14,7 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
[filter],
);
// fetch inventory item details.
// Fetching inventory item details report based on the givne query.
const {
data: inventoryItemDetails,
isFetching: isInventoryItemDetailsFetching,
@@ -22,11 +22,23 @@ 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({ page_size: 10000 });
const provider = {
inventoryItemDetails,
isInventoryItemDetailsFetching,
isInventoryItemDetailsLoading,
inventoryItemDetailsRefetch,
isItemsFetching,
isItemsLoading,
items,
query,
filter,
};

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

@@ -64,7 +64,7 @@ function InventoryValuation({
<InventoryValuationLoadingBar />
<DashboardPageContent>
<div class="financial-statement">
<div class="financial-statement financial-statement--inventory-valuation">
<InventoryValuationHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

20
client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
View File

@@ -2,7 +2,6 @@ import React from 'react';
import * as Yup from 'yup';
import moment from 'moment';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import { Formik, Form } from 'formik';
import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
@@ -11,7 +10,7 @@ import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGene
import withInventoryValuation from './withInventoryValuation';
import withInventoryValuationActions from './withInventoryValuationActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* inventory valuation header.
@@ -27,18 +26,23 @@ function InventoryValuationHeader({
// #withInventoryValuationActions
toggleInventoryValuationFilterDrawer,
}) {
// Form validation schema.
const validationSchema = Yup.object().shape({
as_date: Yup.date().required().label('asDate'),
asDate: Yup.date().required().label('asDate'),
});
// Initial values.
const initialValues = {
as_date: moment(pageFilter.asDate).toDate(),
// Default values.
const defaultValues = {
asDate: moment().toDate(),
itemsIds: [],
};
// Initial values.
const initialValues = transformToForm({
...pageFilter,
asDate: moment(pageFilter.asDate).toDate(),
}, defaultValues);
// Handle the form of header submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
toggleInventoryValuationFilterDrawer(false);

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

@@ -1,20 +1,24 @@
import React from 'react';
import { FastField } from 'formik';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { FormGroup, Position } from '@blueprintjs/core';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import classNames from 'classnames';
import { FormattedMessage as T } from 'components';
import { Row, Col, FieldHint } from 'components';
import { ItemsMultiSelect, Row, Col, FieldHint } from 'components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from 'utils';
import { useInventoryValuationContext } from './InventoryValuationProvider';
/**
* inventory valuation - Drawer Header - General panel.
* Inventory valuation - Drawer Header - General panel.
*/
export default function InventoryValuationHeaderGeneralPanel() {
const { items } = useInventoryValuationContext();
return (
<div>
<Row>
@@ -42,6 +46,31 @@ export default function InventoryValuationHeaderGeneralPanel() {
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<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>
)}
</Field>
</Col>
</Row>
</div>
);
}

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

@@ -1,6 +1,6 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useInventoryValuation } from 'hooks/query';
import { useInventoryValuation, useItems } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const InventoryValuationContext = React.createContext();
@@ -20,11 +20,23 @@ function InventoryValuationProvider({ query, ...props }) {
},
);
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({ page_size: 10000 });
// Provider data.
const provider = {
inventoryValuation,
isLoading,
isFetching,
refetchSheet: refetch,
items,
isItemsFetching,
isItemsLoading
};
return (

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

@@ -66,7 +66,7 @@ function PurchasesByItems({
/>
<PurchasesByItemsLoadingBar />
<DashboardPageContent>
<div className="financial-statement">
<div className="financial-statement financial-statement--purchases-by-items">
<PurchasesByItemsHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

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

@@ -1,13 +1,47 @@
import React from 'react';
import { FormGroup, Classes } from '@blueprintjs/core';
import { Field } from 'formik';
import { Row, Col, FormattedMessage as T } from 'components';
import classNames from 'classnames';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import { ItemsMultiSelect } from 'components';
import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
/**
* Purchases by items - Drawer header - General panel.
*/
export default function PurchasesByItemsGeneralPanel() {
const { items } = usePurchaseByItemsContext();
return (
<div>
<FinancialStatementDateRange />
<Row>
<Col xs={4}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<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>
)}
</Field>
</Col>
</Row>
</div>
);
}

26
client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
View File

@@ -12,7 +12,7 @@ import PurchasesByItemsGeneralPanel from './PurchasesByItemsGeneralPanel';
import withPurchasesByItems from './withPurchasesByItems';
import withPurchasesByItemsActions from './withPurchasesByItemsActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Purchases by items header.
@@ -28,25 +28,31 @@ function PurchasesByItemsHeader({
// #withPurchasesByItems
togglePurchasesByItemsFilterDrawer,
}) {
// Form validation schema.
const validationSchema = Yup.object().shape({
fromDate: Yup.date()
.required()
.label(intl.get('from_date')),
fromDate: Yup.date().required().label(intl.get('from_date')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
.label(intl.get('to_date')),
});
// Initial values.
const initialValues = {
// Default form values.
const defaultValues = {
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
fromDate: moment().toDate(),
toDate: moment().toDate(),
itemsIds: [],
};
// Initial form values.
const initialValues = transformToForm(
{
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
},
defaultValues,
);
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {

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

@@ -1,12 +1,13 @@
import React, { createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { usePurchasesByItems } from 'hooks/query';
import { usePurchasesByItems, useItems } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const PurchasesByItemsContext = createContext();
function PurchasesByItemsProvider({ query, ...props }) {
// Handle fetching the purchases by items report based on the given query.
const {
data: purchaseByItems,
isFetching,
@@ -21,11 +22,23 @@ function PurchasesByItemsProvider({ query, ...props }) {
},
);
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({ page_size: 10000 });
const provider = {
purchaseByItems,
isFetching,
isLoading,
refetchSheet: refetch,
items,
isItemsLoading,
isItemsFetching,
refetchSheet: refetch,
};
return (
<FinancialReportPage name={'purchase-by-items'}>

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

@@ -1,6 +1,6 @@
import React, { createContext, useContext } from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useSalesByItems } from 'hooks/query';
import { useSalesByItems, useItems } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const SalesByItemsContext = createContext();
@@ -20,10 +20,22 @@ function SalesByItemProvider({ query, ...props }) {
},
);
// Handle fetching the items based on the given query.
const {
data: { items },
isLoading: isItemsLoading,
isFetching: isItemsFetching,
} = useItems({ page_size: 10000 });
const provider = {
salesByItems,
isFetching,
isLoading,
items,
isItemsLoading,
isItemsFetching,
refetchSheet: refetch,
};
return (

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

@@ -68,7 +68,7 @@ function SalesByItems({
/>
<SalesByItemsLoadingBar />
<DashboardPageContent>
<div class="financial-statement">
<div class="financial-statement financial-statement--sales-by-items">
<SalesByItemsHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

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

@@ -1,13 +1,45 @@
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';
/**
* sells by items - Drawer header - General panel.
*/
export default function SalesByItemsHeaderGeneralPanel() {
const { items } = useSalesByItemsContext();
return (
<div>
<FinancialStatementDateRange />
<Row>
<Col xs={4}>
<Field name={'itemsIds'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<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>
)}
</Field>
</Col>
</Row>
</div>
);
}

35
client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -12,7 +12,7 @@ import TrialBalanceSheetHeaderGeneralPanel from './TrialBalanceSheetHeaderGenera
import withTrialBalance from './withTrialBalance';
import withTrialBalanceActions from './withTrialBalanceActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Trial balance sheet header.
@@ -28,42 +28,41 @@ function TrialBalanceSheetHeader({
// #withTrialBalanceActions
toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
}) {
// Form validation schema.
const validationSchema = Yup.object().shape({
fromDate: Yup.date()
.required()
.label(intl.get('from_date')),
fromDate: Yup.date().required().label(intl.get('from_date')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
.label(intl.get('to_date')),
});
// Initial values.
const initialValues = {
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
// Default values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
};
// Initial values.
const initialValues = transformToForm(
{
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
},
defaultValues,
);
// Handle form submit.
const handleSubmit = (values, { setSubmitting }) => {
onSubmitFilter(values);
setSubmitting(false);
toggleFilterDrawer(false);
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleFilterDrawer(false);
};
const handleDrawerClose = () => { toggleFilterDrawer(false); };
// Handle cancel button click.
const handleCancelClick = () => {
toggleFilterDrawer(false);
};
const handleCancelClick = () => { toggleFilterDrawer(false); };
return (
<FinancialStatementHeader

11
client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
View File

@@ -10,7 +10,7 @@ import withVendorsBalanceSummary from './withVendorsBalanceSummary';
import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
import VendorsBalanceSummaryHeaderGeneral from './VendorsBalanceSummaryHeaderGeneral';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Vendors balance summary drawer header.
@@ -32,10 +32,15 @@ function VendorsBalanceSummaryHeader({
});
// filter form initial values.
const initialValues = {
const defaultValues = {
asDate: moment().toDate(),
vendorsIds: [],
};
// Initial form values.
const initialValues = transformToForm({
...pageFilter,
asDate: moment(pageFilter.asDate).toDate(),
};
}, defaultValues);
// handle form submit.
const handleSubmit = (values, { setSubmitting }) => {

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

@@ -1,8 +1,9 @@
import React from 'react';
import { FastField } from 'formik';
import { Field, FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames';
import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { ContactsMultiSelect, FormattedMessage as T } from 'components';
import { Row, Col, FieldHint } from 'components';
import {
momentFormatter,
@@ -10,11 +11,14 @@ import {
inputIntent,
handleDateChange,
} from 'utils';
import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider';
/**
* Vendors balance header -general panel.
*/
export default function VendorsBalanceSummaryHeaderGeneral() {
const { vendors } = useVendorsBalanceSummaryContext();
return (
<div>
<Row>
@@ -42,6 +46,7 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
</FastField>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'percentage'} type={'checkbox'}>
@@ -59,6 +64,31 @@ export default function VendorsBalanceSummaryHeaderGeneral() {
</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>
);
}

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

@@ -1,6 +1,6 @@
import React from 'react';
import FinancialReportPage from '../FinancialReportPage';
import { useVendorsBalanceSummaryReport } from 'hooks/query';
import { useVendorsBalanceSummaryReport, useVendors } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const VendorsBalanceSummaryContext = React.createContext();
@@ -13,6 +13,7 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) {
filter,
]);
// Fetching vendors balance summary report based on the given query.
const {
data: VendorBalanceSummary,
isLoading: isVendorsBalanceLoading,
@@ -22,10 +23,23 @@ 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,
};

19
client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
View File

@@ -12,7 +12,7 @@ import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGe
import withVendorsTransaction from './withVendorsTransaction';
import withVendorsTransactionsActions from './withVendorsTransactionsActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
/**
* Vendors transactions header.
@@ -29,14 +29,19 @@ function VendorsTransactionsHeader({
//#withVendorsTransactionsActions
toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer,
}) {
// Default form values.
const defaultValues = {
fromDate: moment().toDate(),
toDate: moment().toDate(),
vendorsIds: [],
};
// Filter form initial values.
const initialValues = {
// Initial form values.
const initialValues = transformToForm({
...pageFilter,
fromDate: moment(pageFilter.fromDate).toDate(),
toDate: moment(pageFilter.toDate).toDate(),
};
}, defaultValues);
// Validation schema.
const validationSchema = Yup.object().shape({
@@ -57,9 +62,7 @@ function VendorsTransactionsHeader({
};
// Handle drawer close action.
const handleDrawerClose = () => {
toggleFilterDrawer(false);
};
const handleDrawerClose = () => { toggleFilterDrawer(false); };
return (
<FinancialStatementHeader

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

@@ -1,13 +1,42 @@
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';
/**
* Vendors transactions header - General panel.
*/
export default function VendorsTransactionsHeaderGeneralPanel() {
const { vendors } = useVendorsTransactionsContext();
return (
<div>
<FinancialStatementDateRange />
<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
onContactSelect={(contactsIds) => {
setFieldValue('vendorsIds', contactsIds);
}}
contacts={vendors}
contactsSelected={value}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

15
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 } from 'hooks/query';
import { useVendorsTransactionsReport, useVendors } from 'hooks/query';
import { transformFilterFormToQuery } from '../common';
const VendorsTransactionsContext = createContext();
@@ -11,6 +11,7 @@ const VendorsTransactionsContext = createContext();
function VendorsTransactionsProvider({ filter, ...props }) {
const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
// Fetch vendors transactions based on the given query.
const {
data: vendorsTransactions,
isFetching: isVendorsTransactionFetching,
@@ -18,10 +19,22 @@ 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,

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

@@ -82,5 +82,5 @@ export const transformFilterFormToQuery = (form) => {
noneZero: form.accountsFilter === 'without-zero-balance',
noneTransactions: form.accountsFilter === 'with-transactions',
});
return flatObject(transformed);
return transformed;
};