fix (*): correct names

client/src/config/financialReportsMenu.js

@@ -71,7 +71,7 @@ export const SalesAndPurchasesReportMenus = [
         link: '/financial-reports/inventory-valuation',
       },
       {
-        title: 'Customer Balance summary',
+        title: 'Customers Balance summary',
         desc: 'Summerize the total amount of each customer owes your business.',
         link: '/financial-reports/customers-balance-summary',
       },

client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js

@@ -7,12 +7,12 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import CustomersTransactionsHeader from './CustomersTransactionsHeader';
 import CustomersTransactionsTable from './CustomersTransactionsTable';
-import CustomersTranscationsActionsBar from './CustomersTranscationsActionsBar';
+import CustomersTransactionsActionsBar from './CustomersTransactionsActionsBar';
 
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 import withSettings from 'containers/Settings/withSettings';
-import { CustomersTranscationsLoadingBar } from './components';
+import { CustomersTransactionsLoadingBar } from './components';
-import { CustomersTranscationsProvider } from './CustomersTranscationsProvider';
+import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
 
 import { compose } from 'utils';
 
@@ -57,12 +57,12 @@ function CustomersTransactions({
   );
 
   return (
-    <CustomersTranscationsProvider filter={filter}>
+    <CustomersTransactionsProvider filter={filter}>
-      <CustomersTranscationsActionsBar
+      <CustomersTransactionsActionsBar
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
-      <CustomersTranscationsLoadingBar />
+      <CustomersTransactionsLoadingBar />
       <DashboardPageContent>
         <FinancialStatement>
           <div className={'financial-statement--transactions'}>
@@ -77,7 +77,7 @@ function CustomersTransactions({
           </div>
         </FinancialStatement>
       </DashboardPageContent>
-    </CustomersTranscationsProvider>
+    </CustomersTransactionsProvider>
   );
 }
 export default compose(

client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.js

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import FinancialReportPage from '../FinancialReportPage';
+import { useCustomersTransactionsReport } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const CustomersTransactionsContext = createContext();
+
+/**
+ * Customers transactions provider.
+ */
+function CustomersTransactionsProvider({ filter, ...props }) {
+  const query = useMemo(() => transformFilterFormToQuery(filter), [
+    filter,
+  ]);
+
+  // fetches the customers transactions.
+  const {
+    data: customersTransactions,
+    isFetching: isCustomersTransactionsFetching,
+    isLoading: isCustomersTransactionsLoading,
+    refetch: CustomersTransactionsRefetch,
+  } = useCustomersTransactionsReport(query, { keepPreviousData: true });
+
+  const provider = {
+    customersTransactions,
+    isCustomersTransactionsFetching,
+    isCustomersTransactionsLoading,
+    CustomersTransactionsRefetch,
+    filter,
+    query
+  };
+
+  return (
+    <FinancialReportPage name={'customer-transactions'}>
+      <CustomersTransactionsContext.Provider value={provider} {...props} />
+    </FinancialReportPage>
+  );
+}
+const useCustomersTransactionsContext = () =>
+  useContext(CustomersTransactionsContext);
+
+export { CustomersTransactionsProvider, useCustomersTransactionsContext };

client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js

@@ -4,13 +4,13 @@ import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import { useCustomersTranscationsColumns } from './components';
+import { useCustomersTransactionsColumns } from './components';
-import { useCustomersTranscationsContext } from './CustomersTranscationsProvider';
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
 import { defaultExpanderReducer, getColumnWidth } from 'utils';
 
 /**
- * Customers transcations table.
+ * Customers transactions table.
  */
 export default function CustomersTransactionsTable({
   // #ownProps
@@ -21,10 +21,10 @@ export default function CustomersTransactionsTable({
   const {
     customersTransactions: { tableRows },
     isCustomersTransactionsLoading,
-    filter,
+    query,
-  } = useCustomersTranscationsContext();
+  } = useCustomersTransactionsContext();
 
-  const columns = useCustomersTranscationsColumns();
+  const columns = useCustomersTransactionsColumns();
 
   const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [
     tableRows,
@@ -40,8 +40,8 @@ export default function CustomersTransactionsTable({
       companyName={companyName}
       sheetType={formatMessage({ id: 'customers_transactions' })}
       loading={isCustomersTransactionsLoading}
-      fromDate={filter.fromDate}
+      fromDate={query.fromDate}
-      toDate={filter.toDate}
+      toDate={query.toDate}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"

client/src/containers/FinancialStatements/CustomersTransactions/components.js

@@ -1,19 +1,18 @@
 import React from 'react';
 import { formatMessage } from 'services/intl';
 import { If } from 'components';
-import { useCustomersTranscationsContext } from './CustomersTranscationsProvider';
+import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { getForceWidth, defaultExpanderReducer, getColumnWidth } from 'utils';
 import { CellTextSpan } from 'components/Datatable/Cells';
 
 /**
- * Retrieve customers transcations columns.
+ * Retrieve customers transactions columns.
  */
-export const useCustomersTranscationsColumns = () => {
+export const useCustomersTransactionsColumns = () => {
   const {
     customersTransactions: { tableRows },
-    isCustomersTransactionsLoading,
+  } = useCustomersTransactionsContext();
-  } = useCustomersTranscationsContext();
 
   return React.useMemo(
     () => [
@@ -88,10 +87,10 @@ export const useCustomersTranscationsColumns = () => {
 };
 
 /**
- * customers transcations loading bar.
+ * customers transactions loading bar.
  */
-export function CustomersTranscationsLoadingBar() {
+export function CustomersTransactionsLoadingBar() {
-  const { isCustomersTransactionsLoading } = useCustomersTranscationsContext();
+  const { isCustomersTransactionsLoading } = useCustomersTransactionsContext();
 
   return (
     <If condition={isCustomersTransactionsLoading}>

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsProvider.js

@@ -1,12 +1,12 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useVendorsTranscationsReport } from 'hooks/query';
+import { useVendorsTransactionsReport } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const VendorsTransactionsContext = createContext();
 
 /**
- * Vendors transcations provider.
+ * Vendors transactions provider.
  */
 function VendorsTransactionsProvider({ filter, ...props }) {
   const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
@@ -16,7 +16,7 @@ function VendorsTransactionsProvider({ filter, ...props }) {
     isFetching: isVendorsTransactionFetching,
     isLoading: isVendorsTransactionsLoading,
     refetch,
-  } = useVendorsTranscationsReport();
+  } = useVendorsTransactionsReport(query, { keepPreviousData: true });
 
   const provider = {
     vendorsTransactions,
@@ -34,7 +34,7 @@ function VendorsTransactionsProvider({ filter, ...props }) {
   );
 }
 
-const useVendorsTranscationsContext = () =>
+const useVendorsTransactionsContext = () =>
   useContext(VendorsTransactionsContext);
 
-export { VendorsTransactionsProvider, useVendorsTranscationsContext };
+export { VendorsTransactionsProvider, useVendorsTransactionsContext };

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js

@@ -5,12 +5,12 @@ import classNames from 'classnames';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useVendorsTransactionsColumns } from './components';
-import { useVendorsTranscationsContext } from './VendorsTransactionsProvider';
+import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 
 import { defaultExpanderReducer, getColumnWidth } from 'utils';
 
 /**
- * Vendors transcations table.
+ * Vendors transactions table.
  */
 
 export default function VendorsTransactionsTable({
@@ -22,8 +22,8 @@ export default function VendorsTransactionsTable({
   const {
     vendorsTransactions: { tableRows },
     isVendorsTransactionsLoading,
-    filter,
+    query,
-  } = useVendorsTranscationsContext();
+  } = useVendorsTransactionsContext();
 
   const columns = useVendorsTransactionsColumns();
 
@@ -41,8 +41,8 @@ export default function VendorsTransactionsTable({
       companyName={companyName}
       sheetType={formatMessage({ id: 'vendors_transactions' })}
       loading={isVendorsTransactionsLoading}
-      fromDate={filter.fromDate}
+      fromDate={query.fromDate}
-      toDate={filter.toDate}
+      toDate={query.toDate}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"

client/src/containers/FinancialStatements/VendorsTransactions/components.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import { formatMessage } from 'services/intl';
 import { If } from 'components';
-import { useVendorsTranscationsContext } from './VendorsTransactionsProvider';
+import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { defaultExpanderReducer, getColumnWidth, getForceWidth } from 'utils';
 import { CellTextSpan } from 'components/Datatable/Cells';
 
 /**
- * Retrieve vendors transcations columns.
+ * Retrieve vendors transactions columns.
  */
 export const useVendorsTransactionsColumns = () => {
   const {
     vendorsTransactions: { tableRows },
-  } = useVendorsTranscationsContext();
+  } = useVendorsTransactionsContext();
 
   return React.useMemo(
     () => [
@@ -87,10 +87,10 @@ export const useVendorsTransactionsColumns = () => {
 };
 
 /**
- * vendors transcations loading bar.
+ * vendors transactions loading bar.
  */
 export function VendorsTransactionsLoadingBar() {
-  const { isVendorsTransactionsLoading } = useVendorsTranscationsContext();
+  const { isVendorsTransactionsLoading } = useVendorsTransactionsContext();
   return (
     <If condition={isVendorsTransactionsLoading}>
       <FinancialLoadingBar />

client/src/hooks/query/financialReports.js

@@ -348,9 +348,9 @@ export function useVendorsBalanceSummaryReport(query, props) {
 }
 
 /**
- * Retrieve customers transcations report.
+ * Retrieve customers transactions report.
  */
-export function useCustomersTranscationsReport(query, props) {
+export function useCustomersTransactionsReport(query, props) {
   return useRequestQuery(
     [t.FINANCIAL_REPORT, t.CUSTOMERS_TRANSACTIONS, query],
     {
@@ -376,9 +376,9 @@ export function useCustomersTranscationsReport(query, props) {
 }
 
 /**
- * Retrieve vendors transcations report.
+ * Retrieve vendors transactions report.
  */
-export function useVendorsTranscationsReport(query, props) {
+export function useVendorsTransactionsReport(query, props) {
   return useRequestQuery(
     [t.FINANCIAL_REPORT, t.VENDORS_TRANSACTIONS, query],
     {

client/src/lang/en/index.js

@@ -1060,7 +1060,7 @@ export default {
   customers_balance_summary: 'Customers Balance Summary',
   vendors_balance_summary: 'Vendors Balance Summary',
   percentage_of_column: 'Percentage',
-  customers_transactions: 'Customers Transcations',
+  customers_transactions: 'Customers Transactions',
-  vendors_transactions: 'Vendors Transcations',
+  vendors_transactions: 'Vendors Transactions',
   reference_type: 'Reference type',
 };

client/src/style/pages/FinancialStatements/ContactsBalanceSummary.scss

@@ -29,3 +29,10 @@
     }
   }
 }
+.financial-statement--balance-summary {
+  .financial-header-drawer {
+    .bp3-drawer {
+      max-height: 350px;
+    }
+  }
+}