From d58289eabf969812593a986d46caee952e66a9d1 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 8 May 2021 03:15:10 +0200 Subject: [PATCH 1/4] refactoring: customers transactions. --- .../CustomersTransactions.js | 88 ++++++++++++ .../CustomersTransactionsHeader.js | 100 +++++++++++++ ...CustomersTransactionsHeaderGeneralPanel.js | 13 ++ .../CustomersTransactionsTable.js | 59 ++++++++ .../CustomersTranscationsActionsBar.js | 135 ++++++++++++++++++ .../CustomersTranscationsProvider.js | 36 +++++ .../CustomersTransactions/components.js | 101 +++++++++++++ .../withCustomersTransactions.js | 15 ++ .../withCustomersTransactionsActions.js | 10 ++ 9 files changed, 557 insertions(+) create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsActionsBar.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/components.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactions.js create mode 100644 client/src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactionsActions.js diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js new file mode 100644 index 000000000..17a72ae3b --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js @@ -0,0 +1,88 @@ +import React, { useEffect, useState } from 'react'; +import moment from 'moment'; +import 'style/pages/FinancialStatements/ContactsTransactions.scss'; + +import { FinancialStatement } from 'components'; +import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; + +import CustomersTransactionsHeader from './CustomersTransactionsHeader'; +import CustomersTransactionsTable from './CustomersTransactionsTable'; +import CustomersTranscationsActionsBar from './CustomersTranscationsActionsBar'; + +import withCustomersTransactionsActions from './withCustomersTransactionsActions'; +import withSettings from 'containers/Settings/withSettings'; +import { CustomersTranscationsLoadingBar } from './components'; +import { CustomersTranscationsProvider } from './CustomersTranscationsProvider'; + +import { compose } from 'utils'; + +/** + * Customers transactions. + */ +function CustomersTransactions({ + // #withPreferences + organizationName, + + //#withCustomersTransactionsActions + toggleCustomersTransactionsFilterDrawer, +}) { + // filter + const [filter, setFilter] = useState({ + fromDate: moment().startOf('year').format('YYYY-MM-DD'), + toDate: moment().endOf('year').format('YYYY-MM-DD'), + }); + + const handleFilterSubmit = (filter) => { + const _filter = { + ...filter, + fromDate: moment(filter.fromDate).format('YYYY-MM-DD'), + toDate: moment(filter.toDate).format('YYYY-MM-DD'), + }; + setFilter({ ..._filter }); + }; + + // Handle number format submit. + const handleNumberFormatSubmit = (values) => { + setFilter({ + ...filter, + numberFormat: values, + }); + }; + + useEffect( + () => () => { + toggleCustomersTransactionsFilterDrawer(false); + }, + [toggleCustomersTransactionsFilterDrawer], + ); + + return ( + + + + + +
+ + +
+ +
+
+ + + + ); +} +export default compose( + withSettings(({ organizationSettings }) => ({ + organizationName: organizationSettings.name, + })), + withCustomersTransactionsActions, +)(CustomersTransactions); diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js new file mode 100644 index 000000000..f766d9efe --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { Tabs, Tab, Button, Intent } from '@blueprintjs/core'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import moment from 'moment'; +import * as Yup from 'yup'; +import { Formik, Form } from 'formik'; + +import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; +import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel'; + +import withCustomersTransactions from './withCustomersTransactions'; +import withCustomersTransactionsActions from './withCustomersTransactionsActions'; + +import { compose } from 'utils'; + +/** + * Customers transactions header. + */ +function CustomersTransactionsHeader({ + // #ownProps + onSubmitFilter, + pageFilter, + + //#withCustomersTransactions + isFilterDrawerOpen, + + //#withCustomersTransactionsActions + toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer, +}) { + const { formatMessage } = useIntl(); + + // Filter form initial values. + const initialValues = { + ...pageFilter, + fromDate: moment(pageFilter.fromDate).toDate(), + toDate: moment(pageFilter.toDate).toDate(), + }; + + // Validation schema. + const validationSchema = Yup.object().shape({ + fromDate: Yup.date() + .required() + .label(formatMessage({ id: 'fromDate' })), + toDate: Yup.date() + .min(Yup.ref('fromDate')) + .required() + .label(formatMessage({ id: 'toDate' })), + }); + + // Handle form submit. + const handleSubmit = (values, { setSubmitting }) => { + onSubmitFilter(values); + toggleFilterDrawer(false); + setSubmitting(false); + }; + + // Handle drawer close action. + const handleDrawerClose = () => { + toggleFilterDrawer(false); + }; + + return ( + + +
+ + } + panel={} + /> + + +
+ + +
+
+ + + ); +} + +export default compose( + withCustomersTransactions(({ customersTransactionsDrawerFilter }) => ({ + isFilterDrawerOpen: customersTransactionsDrawerFilter, + })), + withCustomersTransactionsActions, +)(CustomersTransactionsHeader); diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js new file mode 100644 index 000000000..903a8b449 --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.js @@ -0,0 +1,13 @@ +import React from 'react'; +import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange'; + +/** + * Customers transactions header - General panel. + */ +export default function CustomersTransactionsHeaderGeneralPanel() { + return ( +
+ +
+ ); +} diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js new file mode 100644 index 000000000..972bde7d2 --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js @@ -0,0 +1,59 @@ +import React, { useMemo, useCallback } from 'react'; +import { useIntl } from 'react-intl'; +import classNames from 'classnames'; + +import FinancialSheet from 'components/FinancialSheet'; +import DataTable from 'components/DataTable'; +import { useCustomersTranscationsColumns } from './components'; +import { useCustomersTranscationsContext } from './CustomersTranscationsProvider'; + +import { defaultExpanderReducer, getColumnWidth } from 'utils'; + +/** + * Customers transcations table. + */ +export default function CustomersTransactionsTable({ + // #ownProps + companyName, +}) { + const { formatMessage } = useIntl(); + + const { + customersTransactions: { tableRows }, + isCustomersTransactionsLoading, + filter, + } = useCustomersTranscationsContext(); + + const columns = useCustomersTranscationsColumns(); + + const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [ + tableRows, + ]); + + const rowClassNames = (row) => { + return [`row-type--${row.original.rowTypes}`]; + }; + + return ( + + + + ); +} diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsActionsBar.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsActionsBar.js new file mode 100644 index 000000000..53954b6c7 --- /dev/null +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsActionsBar.js @@ -0,0 +1,135 @@ +import React from 'react'; +import { + NavbarGroup, + Button, + Classes, + NavbarDivider, + Popover, + PopoverInteractionKind, + Position, +} from '@blueprintjs/core'; +import { FormattedMessage as T } from 'react-intl'; +import classNames from 'classnames'; + +import Icon from 'components/Icon'; +import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; +import NumberFormatDropdown from 'components/NumberFormatDropdown'; + +import { useCustomersTranscationsContext } from './CustomersTranscationsProvider'; +import withCustomersTransactions from './withCustomersTransactions'; +import withCustomersTransactionsActions from './withCustomersTransactionsActions'; + +import { compose, saveInvoke } from 'utils'; + +/** + * Customers transcations actions bar. + */ +function CustomersTranscationsActionsBar({ + // #ownProps + numberFormat, + onNumberFormatSubmit, + + //#withCustomersTransactions + isFilterDrawerOpen, + + //#withCustomersTransactionsActions + toggleCustomersTransactionsFilterDrawer, +}) { + const { + isCustomersTransactionsLoading, + CustomersTransactionsRefetch, + } = useCustomersTranscationsContext(); + + // Handle filter toggle click. + const handleFilterToggleClick = () => { + toggleCustomersTransactionsFilterDrawer(); + }; + + // Handle recalculate the report button. + const handleRecalcReport = () => { + CustomersTransactionsRefetch(); + }; + + // Handle number format form submit. + const handleNumberFormatSubmit = (values) => { + saveInvoke(onNumberFormatSubmit, values); + }; + + return ( + + + + + + + + + ); +} +export default compose( + withVendorsTransactionsActions, + withVendorsTransaction(({ vendorsTransactionsDrawerFilter }) => ({ + isFilterDrawerOpen: vendorsTransactionsDrawerFilter, + })), +)(VendorsTransactionsHeader); diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js new file mode 100644 index 000000000..49c1beea2 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js @@ -0,0 +1,13 @@ +import React from 'react'; +import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange'; + +/** + * Vendors transactions header - General panel. + */ +export default function VendorsTransactionsHeaderGeneralPanel() { + return ( +
+ +
+ ); +} diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js new file mode 100644 index 000000000..c024e43a1 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js @@ -0,0 +1,37 @@ +import React, { createContext, useContext, useMemo } from 'react'; +import FinancialReportPage from '../FinancialReportPage'; +import { useVendorsTranscationsReport } from 'hooks/query'; + + +const VendorsTransactionsContext = createContext(); + +/** + * Vendors transcations provider. + */ +function VendorsTransactionsProvider({ filter, ...props }) { + const { + data: vendorsTransactions, + isFetching: isVendorsTransactionFetching, + isLoading: isVendorsTransactionsLoading, + refetch, + } = useVendorsTranscationsReport(); + + const provider = { + vendorsTransactions, + isVendorsTransactionsLoading, + isVendorsTransactionFetching, + refetch, + filter, + }; + + return ( + + + + ); +} + +const useVendorsTranscationsContext = () => + useContext(VendorsTransactionsContext); + +export { VendorsTransactionsProvider, useVendorsTranscationsContext }; diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js new file mode 100644 index 000000000..b554f3aae --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js @@ -0,0 +1,60 @@ +import React, { useMemo, useCallback } from 'react'; +import { useIntl } from 'react-intl'; +import classNames from 'classnames'; + +import FinancialSheet from 'components/FinancialSheet'; +import DataTable from 'components/DataTable'; +import { useVendorsTransactionsColumns } from './components'; +import { useVendorsTranscationsContext } from './VendorsTransactionsProvider'; + +import { defaultExpanderReducer, getColumnWidth } from 'utils'; + +/** + * Vendors transcations table. + */ + +export default function VendorsTransactionsTable({ + // #ownProps + companyName, +}) { + const { formatMessage } = useIntl(); + + const { + vendorsTransactions: { tableRows }, + isVendorsTransactionsLoading, + filter, + } = useVendorsTranscationsContext(); + + const columns = useVendorsTransactionsColumns(); + + const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 5), [ + tableRows, + ]); + + const rowClassNames = (row) => { + return [`row-type--${row.original.rowTypes}`]; + }; + + return ( + + + + ); +} diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/components.js b/client/src/containers/FinancialStatements/VendorsTransactions/components.js new file mode 100644 index 000000000..5c97cf4cd --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/components.js @@ -0,0 +1,99 @@ +import React from 'react'; +import { formatMessage } from 'services/intl'; +import { If } from 'components'; +import { useVendorsTranscationsContext } from './VendorsTransactionsProvider'; +import FinancialLoadingBar from '../FinancialLoadingBar'; +import { defaultExpanderReducer, getColumnWidth, getForceWidth } from 'utils'; +import { CellTextSpan } from 'components/Datatable/Cells'; + +/** + * Retrieve vendors transcations columns. + */ +export const useVendorsTransactionsColumns = () => { + const { + vendorsTransactions: { tableRows }, + } = useVendorsTranscationsContext(); + + return React.useMemo( + () => [ + { + Header: formatMessage({ id: 'vendor_name' }), + accessor: ({ cells }) => { + return ( + + {cells[0].value} + + ); + }, + className: 'vendor_name', + textOverview: true, + // width: 240, + }, + { + Header: formatMessage({ id: 'account_name' }), + accessor: 'cells[1].value', + className: 'name', + textOverview: true, + width: 180, + }, + { + Header: formatMessage({ id: 'reference_type' }), + accessor: 'cells[2].value', + textOverview: true, + width: 180, + }, + { + Header: formatMessage({ id: 'transaction_type' }), + accessor: 'cells[3].value', + textOverview: true, + width: 180, + }, + { + Header: formatMessage({ id: 'credit' }), + accessor: 'cells[4].value', + className: 'credit', + textOverview: true, + width: getColumnWidth(tableRows, 'credit', { + minWidth: 140, + magicSpacing: 10, + }), + }, + { + Header: formatMessage({ id: 'debit' }), + accessor: 'cells[5].value', + className: 'debit', + textOverview: true, + width: getColumnWidth(tableRows, 'debit', { + minWidth: 140, + magicSpacing: 10, + }), + }, + { + Header: formatMessage({ id: 'running_balance' }), + accessor: 'cells[6].value', + className: 'running_balance', + textOverview: true, + width: getColumnWidth(tableRows, 'running_balance', { + minWidth: 140, + magicSpacing: 10, + }), + }, + ], + [tableRows, formatMessage], + ); +}; + +/** + * vendors transcations loading bar. + */ +export function VendorsTransactionsLoadingBar() { + const { isVendorsTransactionsLoading } = useVendorsTranscationsContext(); + return ( + + + + ); +} diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransaction.js b/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransaction.js new file mode 100644 index 000000000..1331f8842 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransaction.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import { getVendorsTransactionsFilterDrawer } from 'store/financialStatement/financialStatements.selectors'; + +export default (mapState) => { + const mapStateToProps = (state, props) => { + const mapped = { + vendorsTransactionsDrawerFilter: getVendorsTransactionsFilterDrawer( + state, + props, + ), + }; + return mapState ? mapState(mapped, state, props) : mapped; + }; + return connect(mapStateToProps); +}; diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransactionsActions.js b/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransactionsActions.js new file mode 100644 index 000000000..7239c6f01 --- /dev/null +++ b/client/src/containers/FinancialStatements/VendorsTransactions/withVendorsTransactionsActions.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import { toggleVendorsTransactionsFilterDrawer } from 'store/financialStatement/financialStatements.actions'; + +const mapActionsToProps = (dispatch) => ({ + toggleVendorsTransactionsFilterDrawer: (toggle) => + dispatch(toggleVendorsTransactionsFilterDrawer(toggle)), +}); + +export default connect(null, mapActionsToProps); diff --git a/client/src/style/pages/FinancialStatements/ContactsTransactions.scss b/client/src/style/pages/FinancialStatements/ContactsTransactions.scss new file mode 100644 index 000000000..aa8591eba --- /dev/null +++ b/client/src/style/pages/FinancialStatements/ContactsTransactions.scss @@ -0,0 +1,75 @@ +.financial-sheet { + &--customer-transactions, + &--vendor-transactions { + .financial-sheet__table { + .tbody, + .thead { + .tr .td, + .tr .th { + &.credit, + &.debit, + &.running_balance { + text-align: right; + } + } + } + .tbody { + .tr .td { + padding-top: 0.2rem; + padding-bottom: 0.2rem; + border-top-color: transparent; + border-bottom-color: transparent; + + &.customer_name, + &.vendor_name { + > div { + display: flex; + } + span.force-width { + position: relative; + } + } + } + .tr:not(.no-results) .td { + // border-left: 1px solid #ececec; + } + + .tr.row-type { + &--CUSTOMER, + &--VENDOR { + .td { + &.customer_name, + &.vendor_name { + font-weight: 500; + } + &.name { + border-left-color: transparent; + } + } + &:not(:first-child).is-expanded .td { + border-top: 1px solid #ddd; + } + } + &--OPENING_BALANCE, + // &--TRANSACTION, + &--CLOSING_BALANCE { + font-weight: 500; + } + &--CUSTOMER:last-child { + .td { + border-bottom: 1px solid #ddd; + } + } + } + } + } + } +} + +.financial-statement--transactions { + .financial-header-drawer { + .bp3-drawer { + max-height: 350px; + } + } +} From 790cc51bcc332b00c4285f64eaef75202f745bec Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 8 May 2021 03:17:46 +0200 Subject: [PATCH 3/4] feat : header api. --- .../CustomersBalanceSummary.js | 4 +- .../CustomersBalanceSummaryHeader.js | 4 +- client/src/hooks/query/financialReports.js | 40 ++++++++++++++++++- client/src/lang/en/index.js | 10 ++++- client/src/routes/dashboard.js | 22 +++++----- .../financialStatements.actions.js | 31 +++++++------- .../financialStatements.types.js | 2 +- 7 files changed, 78 insertions(+), 35 deletions(-) diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js index f45480599..a49be8b69 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js @@ -30,14 +30,14 @@ function CustomersBalanceSummary({ }) { const [filter, setFilter] = useState({ - asDate: moment().endOf('day').format('YYYY-MM-DD'), + as_date: moment().endOf('day').format('YYYY-MM-DD'), }); // Handle re-fetch customers balance summary after filter change. const handleFilterSubmit = (filter) => { const _filter = { ...filter, - asDate: moment(filter.asDate).format('YYYY-MM-DD'), + as_date: moment(filter.as_date).format('YYYY-MM-DD'), }; setFilter({ ..._filter }); }; diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js index 6e1b3ec58..afe46869d 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js @@ -29,13 +29,13 @@ function CustomersBalanceSummaryHeader({ // validation schema. const validationSchema = Yup.object().shape({ - asDate: Yup.date().required().label('asDate'), + as_date: Yup.date().required().label('asDate'), }); // filter form initial values. const initialValues = { ...pageFilter, - asDate: moment(pageFilter.asDate).toDate(), + as_date: moment(pageFilter.as_date).toDate(), }; // handle form submit. diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js index 3096bfc7a..44ce2b0d9 100644 --- a/client/src/hooks/query/financialReports.js +++ b/client/src/hooks/query/financialReports.js @@ -298,6 +298,9 @@ export function useCustomerBalanceSummaryReport(query, props) { method: 'get', url: '/financial_statements/customer-balance-summary', params: query, + headers: { + Accept: 'application/json+table', + }, }, { select: (res) => ({ @@ -324,12 +327,16 @@ export function useVendorsBalanceSummaryReport(query, props) { method: 'get', url: '/financial_statements/vendor-balance-summary', params: query, + headers: { + Accept: 'application/json+table', + }, }, + { select: (res) => ({ columns: res.data.columns, query: res.data.query, - tableRows: res.data.table.rows, + tableRows: res.data.table.data, }), defaultData: { tableRows: [], @@ -350,6 +357,9 @@ export function useCustomersTranscationsReport(query, props) { method: 'get', url: '/financial_statements/transactions-by-customers', params: query, + headers: { + Accept: 'application/json+table', + }, }, { select: (res) => ({ @@ -364,3 +374,31 @@ export function useCustomersTranscationsReport(query, props) { }, ); } + +/** + * Retrieve vendors transcations report. + */ +export function useVendorsTranscationsReport(query, props) { + return useRequestQuery( + [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query], + { + method: 'get', + url: '/financial_statements/transactions-by-vendors', + params: query, + headers: { + Accept: 'application/json+table', + }, + }, + { + select: (res) => ({ + data: res.data.table, + tableRows: res.data.table.data, + }), + defaultData: { + tableRows: [], + data: [], + }, + ...props, + }, + ); +} diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 6f1600660..e2cabd957 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -1055,6 +1055,12 @@ export default { transaction_date: 'Transaction date', transaction_type: 'Transaction type', running_balance: 'Running Balance', - account_normal:'Account normal', - published_at:'Published at', + account_normal: 'Account normal', + published_at: 'Published at', + customers_balance_summary: 'Customers Balance Summary', + vendors_balance_summary: 'Vendors Balance Summary', + percentage_of_column: 'Percentage', + customers_transactions: 'Customers Transcations', + vendors_transactions: 'Vendors Transcations', + reference_type: 'Reference type', }; diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js index 1c9fa0e68..89769bcb2 100644 --- a/client/src/routes/dashboard.js +++ b/client/src/routes/dashboard.js @@ -264,11 +264,11 @@ export default [ }, { path: `/financial-reports/transactions-by-customers`, - // component: lazy(() => - // import( - // 'containers/FinancialStatements/CustomersTransactions/CustomersTransactions' - // ), - // ), + component: lazy(() => + import( + 'containers/FinancialStatements/CustomersTransactions/CustomersTransactions' + ), + ), breadcrumb: 'Customers Transactions ', hint: '..', pageTitle: formatMessage({ id: 'customers_transactions' }), @@ -276,12 +276,12 @@ export default [ sidebarExpand: false, }, { - path: `/financial-reports/vendors-transactions`, - // component: lazy(() => - // import( - // 'containers/FinancialStatements/' - // ), - // ), + path: `/financial-reports/transactions-by-vendors`, + component: lazy(() => + import( + 'containers/FinancialStatements/VendorsTransactions/VendorsTransactions' + ), + ), breadcrumb: 'Vendors Transactions ', hint: '..', pageTitle: formatMessage({ id: 'vendors_transactions' }), diff --git a/client/src/store/financialStatement/financialStatements.actions.js b/client/src/store/financialStatement/financialStatements.actions.js index 86f2e9506..a972d42db 100644 --- a/client/src/store/financialStatement/financialStatements.actions.js +++ b/client/src/store/financialStatement/financialStatements.actions.js @@ -129,12 +129,11 @@ export function toggleInventoryValuationFilterDrawer(toggle) { }; } - /** * Toggles display of the customers balance summary filter drawer. * @param {boolean} toggle */ - export function toggleCustomersBalanceSummaryFilterDrawer(toggle) { +export function toggleCustomersBalanceSummaryFilterDrawer(toggle) { return { type: `${t.CUSTOMERS_BALANCE_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, payload: { @@ -146,7 +145,7 @@ export function toggleInventoryValuationFilterDrawer(toggle) { * Toggles display of the vendors balance summary filter drawer. * @param {boolean} toggle */ - export function toggleVendorsBalanceSummaryFilterDrawer(toggle) { +export function toggleVendorsBalanceSummaryFilterDrawer(toggle) { return { type: `${t.VENDORS_BALANCE_SUMMARY}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, payload: { @@ -158,7 +157,7 @@ export function toggleInventoryValuationFilterDrawer(toggle) { * Toggles display of the customers transactions filter drawer. * @param {boolean} toggle */ - export function toggleCustomersTransactionsFilterDrawer(toggle) { +export function toggleCustomersTransactionsFilterDrawer(toggle) { return { type: `${t.CUSTOMERS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, payload: { @@ -167,15 +166,15 @@ export function toggleInventoryValuationFilterDrawer(toggle) { }; } -// /** -// * Toggles display of the vendors transactions filter drawer. -// * @param {boolean} toggle -// */ -// export function toggleVendorsTransactionsFilterDrawer(toggle) { -// return { -// type: `${t.VENDORS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, -// payload: { -// toggle, -// }, -// }; -// } \ No newline at end of file +/** + * Toggles display of the vendors transactions filter drawer. + * @param {boolean} toggle + */ +export function toggleVendorsTransactionsFilterDrawer(toggle) { + return { + type: `${t.VENDORS_TRANSACTIONS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, + payload: { + toggle, + }, + }; +} diff --git a/client/src/store/financialStatement/financialStatements.types.js b/client/src/store/financialStatement/financialStatements.types.js index f80a94ada..7b49a6739 100644 --- a/client/src/store/financialStatement/financialStatements.types.js +++ b/client/src/store/financialStatement/financialStatements.types.js @@ -13,5 +13,5 @@ export default { CUSTOMERS_BALANCE_SUMMARY: 'CUSTOMERS BALANCE SUMMARY', VENDORS_BALANCE_SUMMARY: 'VENDORS BALANCE SUMMARY', CUSTOMERS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS', - // VENDORS_TRANSACTIONS: 'CUSTOMERS TRANSACTIONS', + VENDORS_TRANSACTIONS: 'VENDORS TRANSACTIONS', }; From 777657a7f4d7db5054e8ab61567b30f332764e23 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 8 May 2021 03:48:02 +0200 Subject: [PATCH 4/4] fix(*): fix qurey in customers & vendors transaction and balance summary. --- .../CustomersBalanceSummary/CustomersBalanceSummary.js | 9 ++++----- .../CustomersBalanceSummaryHeader.js | 4 ++-- .../CustomersBalanceSummaryProvider.js | 8 ++++---- .../CustomersTranscationsProvider.js | 8 +++++++- .../VendorsBalanceSummaryProvider.js | 8 ++++---- .../VendorsTransactions/VendorsTransactionsProvider.js | 5 ++++- 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js index a49be8b69..f679d7697 100644 --- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js +++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js @@ -28,20 +28,19 @@ function CustomersBalanceSummary({ // #withCustomersBalanceSummaryActions toggleCustomerBalanceFilterDrawer, }) { - const [filter, setFilter] = useState({ - as_date: moment().endOf('day').format('YYYY-MM-DD'), + asDate: moment().endOf('day').format('YYYY-MM-DD'), }); // Handle re-fetch customers balance summary after filter change. const handleFilterSubmit = (filter) => { const _filter = { ...filter, - as_date: moment(filter.as_date).format('YYYY-MM-DD'), + asDate: moment(filter.asDate).format('YYYY-MM-DD'), }; setFilter({ ..._filter }); }; - + // Handle number format. const handleNumberFormat = (values) => { setFilter({ @@ -56,7 +55,7 @@ function CustomersBalanceSummary({ }, [toggleCustomerBalanceFilterDrawer], ); - + console.log(filter, 'EE'); return ( transformFilterFormToQuery(filter), [ - // filter, - // ]); + const query = React.useMemo(() => transformFilterFormToQuery(filter), [ + filter, + ]); const { data: CustomerBalanceSummary, isLoading: isCustomersBalanceLoading, isFetching: isCustomersBalanceFetching, refetch - } = useCustomerBalanceSummaryReport(filter, { + } = useCustomerBalanceSummaryReport(query, { keepPreviousData: true, }); diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js index af6d3cdf1..69dbb24b2 100644 --- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js +++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTranscationsProvider.js @@ -1,6 +1,7 @@ import React, { createContext, useContext, useMemo } from 'react'; import FinancialReportPage from '../FinancialReportPage'; import { useCustomersTranscationsReport } from 'hooks/query'; +import { transformFilterFormToQuery } from '../common'; const CustomersTranscationsContext = createContext(); @@ -8,13 +9,17 @@ const CustomersTranscationsContext = createContext(); * Customers transcations provider. */ function CustomersTranscationsProvider({ filter, ...props }) { + const query = useMemo(() => transformFilterFormToQuery(filter), [ + filter, + ]); + // fetches the customers transcations. const { data: customersTransactions, isFetching: isCustomersTransactionsFetching, isLoading: isCustomersTransactionsLoading, refetch: CustomersTransactionsRefetch, - } = useCustomersTranscationsReport(filter, { keepPreviousData: true }); + } = useCustomersTranscationsReport(query, { keepPreviousData: true }); const provider = { customersTransactions, @@ -22,6 +27,7 @@ function CustomersTranscationsProvider({ filter, ...props }) { isCustomersTransactionsLoading, CustomersTransactionsRefetch, filter, + query }; return ( diff --git a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js index b6f5587fb..840b45268 100644 --- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js +++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js @@ -9,16 +9,16 @@ const VendorsBalanceSummaryContext = React.createContext(); * Vendors balance summary provider. */ function VendorsBalanceSummaryProvider({ filter, ...props }) { - // const query = React.useMemo(() => transformFilterFormToQuery(filter), [ - // filter, - // ]); + const query = React.useMemo(() => transformFilterFormToQuery(filter), [ + filter, + ]); const { data: VendorBalanceSummary, isLoading: isVendorsBalanceLoading, isFetching: isVendorsBalanceFetching, refetch, - } = useVendorsBalanceSummaryReport(filter, { + } = useVendorsBalanceSummaryReport(query, { keepPreviousData: true, }); diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js index c024e43a1..eed162f2c 100644 --- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js +++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js @@ -1,7 +1,7 @@ import React, { createContext, useContext, useMemo } from 'react'; import FinancialReportPage from '../FinancialReportPage'; import { useVendorsTranscationsReport } from 'hooks/query'; - +import { transformFilterFormToQuery } from '../common'; const VendorsTransactionsContext = createContext(); @@ -9,6 +9,8 @@ const VendorsTransactionsContext = createContext(); * Vendors transcations provider. */ function VendorsTransactionsProvider({ filter, ...props }) { + const query = useMemo(() => transformFilterFormToQuery(filter), [filter]); + const { data: vendorsTransactions, isFetching: isVendorsTransactionFetching, @@ -22,6 +24,7 @@ function VendorsTransactionsProvider({ filter, ...props }) { isVendorsTransactionFetching, refetch, filter, + query, }; return (