fix: change the default from/to dates of customers/vendors transactions

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx

@@ -13,6 +13,7 @@ import { CustomersTransactionsBody } from './CustomersTransactionsBody';
 import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
 
 import { compose } from '@/utils';
+import { useCustomersTransactionsQuery } from './_utils';
 
 /**
  * Customers transactions.
@@ -22,11 +23,7 @@ function CustomersTransactions({
   toggleCustomersTransactionsFilterDrawer,
 }) {
   // filter
-  const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
-  });
+  const [filter, setFilter] = useCustomersTransactionsQuery();
 
   const handleFilterSubmit = (filter) => {
     const _filter = {

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx

@@ -14,7 +14,7 @@ function CustomersTransactionsProvider({ filter, ...props }) {
     filter,
   ]);
 
-  // fetches the customers transactions.
+  // Fetches the customers transactions.
   const {
     data: customersTransactions,
     isFetching: isCustomersTransactionsFetching,

packages/webapp/src/containers/FinancialStatements/CustomersTransactions/_utils.ts

@@ -1,6 +1,11 @@
+// @ts-nocheck
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import { transformToForm } from '@/utils';
+import { castArray } from 'lodash';
+import { useMemo } from 'react';
+import { useAppQueryString } from '@/hooks';
 
 export const getCustomersTransactionsQuerySchema = () => {
   return Yup.object().shape({
@@ -13,7 +18,31 @@ export const getCustomersTransactionsQuerySchema = () => {
 };
 
 export const getCustomersTransactionsDefaultQuery = () => ({
-  fromDate: moment().startOf('month').toDate(),
-  toDate: moment().toDate(),
+  fromDate: moment().startOf('month').format('YYYY-MM-DD'),
+  toDate: moment().format('YYYY-MM-DD'),
   customersIds: [],
+  filterByOption: 'with-transactions',
 });
+
+const parseCustomersTransactionsQuery = (query) => {
+  const defaultQuery = getCustomersTransactionsDefaultQuery();
+
+  const transformedQuery = {
+    ...defaultQuery,
+    ...transformToForm(query, defaultQuery),
+  };
+  return {
+    ...transformedQuery,
+    customersIds: castArray(transformedQuery.customersIds),
+  };
+};
+
+export const useCustomersTransactionsQuery = () => {
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const query = useMemo(
+    () => parseCustomersTransactionsQuery(locationQuery),
+    [locationQuery],
+  );
+  return [query, setLocationQuery];
+};

packages/webapp/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.tsx

@@ -23,7 +23,7 @@ export default function ProfitLossSheetTable({
   } = useProfitLossSheetContext();
 
   // Retrieves the profit/loss table columns.
-  const tableColumns = useProfitLossSheetColumns();
+  const columns = useProfitLossSheetColumns();
 
   // Retrieve default expanded rows of balance sheet.
   const expandedRows = React.useMemo(
@@ -40,7 +40,7 @@ export default function ProfitLossSheetTable({
       basis={query.basis}
     >
       <ProfitLossDataTable
-        columns={tableColumns}
+        columns={columns}
         data={table.rows}
         noInitialFetch={true}
         expanded={expandedRows}

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.tsx

@@ -13,6 +13,7 @@ import VendorsTransactionsActionsBar from './VendorsTransactionsActionsBar';
 import withVendorsTransactionsActions from './withVendorsTransactionsActions';
 
 import { compose } from '@/utils';
+import { useVendorsTransactionsQuery } from './_utils';
 
 /**
  * Vendors transactions.
@@ -22,11 +23,7 @@ function VendorsTransactions({
   toggleVendorsTransactionsFilterDrawer,
 }) {
   // filter
-  const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
-  });
+  const [filter, setFilter] = useVendorsTransactionsQuery();
 
   const handleFilterSubmit = (filter) => {
     const _filter = {

packages/webapp/src/containers/FinancialStatements/VendorsTransactions/_utils.ts

@@ -1,6 +1,10 @@
+// @ts-nocheck
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import { useMemo } from 'react';
+import { transformToForm } from '@/utils';
+import { useAppQueryString } from '@/hooks';
 
 /**
  * The validation schema of vendors transactions.
@@ -19,7 +23,35 @@ export const getVendorTransactionsQuerySchema = () => {
  * Retrieves the default query of vendors transactions.
  */
 export const getVendorsTransactionsDefaultQuery = () => ({
-  fromDate: moment().startOf('month').toDate(),
-  toDate: moment().toDate(),
+  fromDate: moment().startOf('month').format('YYYY-MM-DD'),
+  toDate: moment().format('YYYY-MM-DD'),
   vendorsIds: [],
 });
+
+/**
+ * Parses the query of vendors transactions.
+ */
+const parseVendorsTransactionsQuery = (query) => {
+  const defaultQuery = getVendorsTransactionsDefaultQuery();
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(query, defaultQuery),
+  };
+  return {
+    ...transformed,
+    vendorsIds: transformed.vendorsIds ? transformed.vendorsIds : [],
+  };
+};
+
+/**
+ * Retrieves the query of vendors transactions.
+ */
+export const useVendorsTransactionsQuery = () => {
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const query = useMemo(
+    () => parseVendorsTransactionsQuery(locationQuery),
+    [locationQuery],
+  );
+  return [query, setLocationQuery];
+};