fix(BalanceSheet): filter by branches.

fix(ProfitLossSheet): filter by branches.
fix(CashflowStatement): filter by branches.

src/components/Branches/BranchMultiSelect.js

@@ -57,7 +57,7 @@ const branchSelectProps = {
 /**
  * branches mulit select.
  * @param {*} param0
- * @returns
+ * @returns {JSX.Element}
  */
 export function BranchMultiSelect({ branches, ...rest }) {
   return (

src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js

@@ -11,6 +11,7 @@ function BalanceSheetProvider({ filter, ...props }) {
   const query = React.useMemo(() => transformFilterFormToQuery(filter), [
     filter,
   ]);
+
   // Fetches the balance sheet report.
   const {
     data: balanceSheet,

src/containers/FinancialStatements/BalanceSheet/utils.js

@@ -2,6 +2,7 @@ import React from 'react';
 import * as R from 'ramda';
 import moment from 'moment';
 import * as Yup from 'yup';
+import { castArray } from 'lodash';
 import intl from 'react-intl-universal';
 
 import { transformToForm } from 'utils';
@@ -33,6 +34,24 @@ export const getDefaultBalanceSheetQuery = () => ({
   branchesIds: [],
 });
 
+/**
+ * Parses balance sheet query.
+ */
+const parseBalanceSheetQuery = (locationQuery) => {
+  const defaultQuery = getDefaultBalanceSheetQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
 /**
  * Retrieves the balance sheet query.
  */
@@ -41,15 +60,10 @@ export const useBalanceSheetQuery = () => {
   const [locationQuery, setLocationQuery] = useAppQueryString();
 
   // Merges the default filter query with location URL query.
-  const query = React.useMemo(() => {
-    const defaultQuery = getDefaultBalanceSheetQuery();
-
-    return {
-      ...defaultQuery,
-      ...transformToForm(locationQuery, defaultQuery),
-      branchesIds: [],
-    };
-  }, [locationQuery]);
+  const query = React.useMemo(
+    () => parseBalanceSheetQuery(locationQuery),
+    [locationQuery],
+  );
 
   return {
     query,

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import moment from 'moment';
 
 import { FinancialStatement } from 'components';
@@ -15,33 +15,33 @@ import {
   CashFlowStatementAlerts,
 } from './components';
 
-import { getDefaultCashFlowSheetQuery } from './utils';
+import { useCashflowStatementQuery } from './utils';
 import { compose } from 'utils';
 
 /**
  * Cash flow statement.
+ * @returns {JSX.Element}
  */
 function CashFlowStatement({
-  //#withCashStatementActions
+  // # withCashStatementActions
   toggleCashFlowStatementFilterDrawer,
 }) {
-  // filter
-  const [filter, setFilter] = useState({
-    ...getDefaultCashFlowSheetQuery(),
-  });
+  // Cashflow statement query.
+  const { query, setLocationQuery } = useCashflowStatementQuery();
+
   // Handle refetch cash flow after filter change.
   const handleFilterSubmit = (filter) => {
-    const _filter = {
+    const newFilter = {
       ...filter,
       fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
       toDate: moment(filter.toDate).format('YYYY-MM-DD'),
     };
-    setFilter({ ..._filter });
+    setLocationQuery({ ...newFilter });
   };
   // Handle format number submit.
   const handleNumberFormatSubmit = (values) => {
-    setFilter({
-      ...filter,
+    setLocationQuery({
+      ...query,
       numberFormat: values,
     });
   };
@@ -54,9 +54,9 @@ function CashFlowStatement({
   );
 
   return (
-    <CashFlowStatementProvider filter={filter}>
+    <CashFlowStatementProvider filter={query}>
       <CashFlowStatementActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <CashFlowStatementLoadingBar />
@@ -65,7 +65,7 @@ function CashFlowStatement({
       <DashboardPageContent>
         <FinancialStatement>
           <CashFlowStatementHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <CashFlowStatementBody />

src/containers/FinancialStatements/CashFlowStatement/utils.js

@@ -1,4 +1,9 @@
+import React from 'react';
 import moment from 'moment';
+import { castArray } from 'lodash';
+
+import { transformToForm } from 'utils';
+import { useAppQueryString } from 'hooks';
 
 /**
  * Retrieves the default cashflow sheet query.
@@ -13,3 +18,41 @@ export const getDefaultCashFlowSheetQuery = () => {
     branchesIds: [],
   };
 };
+
+/**
+ * Parses the cashflow query from browser location.
+ */
+const parseCashflowQuery = (query) => {
+  const defaultQuery = getDefaultCashFlowSheetQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(query, defaultQuery),
+  };
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
+/**
+ * Retrieves the cashflow statement query.
+ */
+export const useCashflowStatementQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = React.useMemo(
+    () => parseCashflowQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};

src/containers/FinancialStatements/ProfitLossSheet/utils.js

@@ -6,6 +6,7 @@ import * as Yup from 'yup';
 
 import { useAppQueryString } from 'hooks';
 import { transformToForm } from 'utils';
+import { castArray } from 'lodash';
 
 /**
  * Retrieves the default profit/loss sheet query.
@@ -35,6 +36,25 @@ export const getDefaultProfitLossQuery = () => ({
   branchesIds: [],
 });
 
+/**
+ * Parses the profit/loss sheet query.
+ */
+const parseProfitLossQuery = (locationQuery) => {
+  const defaultQuery = getDefaultProfitLossQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+
+  return {
+    ...transformed,
+
+    // Ensures the branches ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+  };
+};
+
 /**
  * Retrieves the balance sheet query API.
  */
@@ -43,16 +63,10 @@ export const useProfitLossSheetQuery = () => {
   const [locationQuery, setLocationQuery] = useAppQueryString();
 
   // Merges the default query with location query.
-  const query = React.useMemo(() => {
-    const defaultQuery = getDefaultProfitLossQuery();
-
-    return {
-      ...defaultQuery,
-      ...transformToForm(locationQuery, defaultQuery),
-      branchesIds: [],
-    };
-  }, [locationQuery]);
-
+  const query = React.useMemo(
+    () => parseProfitLossQuery(locationQuery),
+    [locationQuery],
+  );
   return {
     query,
     locationQuery,

src/containers/FinancialStatements/TrialBalanceSheet/utils.js

@@ -7,6 +7,5 @@ export function getDefaultTrialBalanceQuery() {
     basis: 'accural',
     filterByOption: 'with-transactions',
     branchesIds: [],
-
   };
 }