feat(AP/ARAgin summary): add branch multi select.

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js

@@ -7,6 +7,7 @@ import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
+import APAgingSummaryHeaderDimensions from './APAgingSummaryHeaderDimensions';
 
 import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
@@ -49,10 +50,14 @@ function APAgingSummaryHeader({
     agingDaysBefore: 30,
     agingPeriods: 3,
     vendorsIds: [],
+    branchesIds: [],
     filterByOption: 'without-zero-balance',
   };
   // Formik initial values.
-  const initialValues = transformToForm(pageFilter, defaultValues);
+  const initialValues = transformToForm(
+    { ...pageFilter, branchesIds: [] },
+    defaultValues,
+  );
 
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
@@ -88,6 +93,11 @@ function APAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<APAgingSummaryHeaderGeneral />}
             />
+            <Tab
+              id="dimensions"
+              title={'Dimensions'}
+              panel={<APAgingSummaryHeaderDimensions />}
+            />
           </Tabs>
           <div className={'financial-header-drawer__footer'}>
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, Row, Col } from 'components';
+import {
+  APAgingSummaryHeaderDimensionsProvider,
+  useAPAgingSummaryHeaderDimensonsContext,
+} from './APAgingSummaryHeaderDimensionsProvider';
+
+/**
+ * APAging summary header dimensions.
+ * @returns
+ */
+export default function APAgingSummaryHeaderDimensions() {
+  return (
+    <APAgingSummaryHeaderDimensionsProvider>
+      <APAgingSummaryHeaderDimensionsContent />
+    </APAgingSummaryHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * APAging summary header dimensions content.
+ * @returns
+ */
+function APAgingSummaryHeaderDimensionsContent() {
+  const { branches } = useAPAgingSummaryHeaderDimensonsContext();
+
+  return (
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={intl.get('branches_multi_select.label')}
+          className={Classes.FILL}
+        >
+          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+        </FormGroup>
+      </Col>
+    </Row>
+  );
+}

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensionsProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const APAgingSummaryHeaderDimensonsContext = React.createContext();
+
+/**
+ * APAging summary header dismensions provider.
+ * @returns
+ */
+function APAgingSummaryHeaderDimensionsProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <APAgingSummaryHeaderDimensonsContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useAPAgingSummaryHeaderDimensonsContext = () =>
+  React.useContext(APAgingSummaryHeaderDimensonsContext);
+
+export {
+  APAgingSummaryHeaderDimensionsProvider,
+  useAPAgingSummaryHeaderDimensonsContext,
+};

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js

@@ -12,6 +12,7 @@ import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { compose, transformToForm } from 'utils';
+import ARAgingSummaryHeaderDimensions from './ARAgingSummaryHeaderDimensions';
 
 /**
  * AR Aging Summary Report - Drawer Header.
@@ -47,13 +48,16 @@ function ARAgingSummaryHeader({
     agingDaysBefore: 30,
     agingPeriods: 3,
     customersIds: [],
+    branchesIds: [],
     filterByOption: 'without-zero-balance',
   };
+  
   // Initial values.
   const initialValues = transformToForm(
     {
       ...pageFilter,
       asDate: moment(pageFilter.asDate).toDate(),
+      branchesIds: [],
     },
     defaultValues,
   );
@@ -91,6 +95,11 @@ function ARAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<ARAgingSummaryHeaderGeneral />}
             />
+            <Tab
+              id="dimensions"
+              title={'Dimensions'}
+              panel={<ARAgingSummaryHeaderDimensions />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, Row, Col } from 'components';
+import {
+  ARAgingSummaryHeaderDimensionsProvider,
+  useARAgingSummaryHeaderDimensonsContext,
+} from './ARAgingSummaryHeaderDimensionsProvider';
+
+/**
+ * ARAging summary header dimensions.
+ * @returns
+ */
+export default function ARAgingSummaryHeaderDimensions() {
+  return (
+    <ARAgingSummaryHeaderDimensionsProvider>
+      <ARAgingSummaryHeaderDimensionsContent />
+    </ARAgingSummaryHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * ARAging summary header dimensions content.
+ * @returns
+ */
+function ARAgingSummaryHeaderDimensionsContent() {
+  const { branches } = useARAgingSummaryHeaderDimensonsContext();
+
+  return (
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={intl.get('branches_multi_select.label')}
+          className={Classes.FILL}
+        >
+          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+        </FormGroup>
+      </Col>
+    </Row>
+  );
+}

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensionsProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ARAgingSummaryHeaderDimensonsContext = React.createContext();
+
+/**
+ * ARAging summary header dismensions provider.
+ * @returns
+ */
+function ARAgingSummaryHeaderDimensionsProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <ARAgingSummaryHeaderDimensonsContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useARAgingSummaryHeaderDimensonsContext = () =>
+  React.useContext(ARAgingSummaryHeaderDimensonsContext);
+
+export {
+  ARAgingSummaryHeaderDimensionsProvider,
+  useARAgingSummaryHeaderDimensonsContext,
+};