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

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,
+};