feat(balance sheet): add branch multi select.

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -88,7 +88,7 @@ function BalanceSheetHeader({
             />
             <Tab
               id="dimensions"
-              title={'dimensions'}
+              title={'Dimensions'}
               panel={<BalanceSheetHeaderDimensionsPanel />}
             />
           </Tabs>

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js

@@ -1,24 +1,33 @@
 import React from 'react';
-import { Button } from '@blueprintjs/core';
-import { BranchesMultiSelect } from 'components';
-
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, FieldHint, Row, Col } from 'components';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 import { useBranches } from 'hooks/query';
 
+/**
+ * Balance sheet header dismension panel.
+ * @returns
+ */
 function BalanceSheetHeaderDimensionsPanel() {
   // Fetches the branches list.
-  const {
-    isLoading: isBranchesLoading,
-    isFetching: isBranchesFetching,
-    data: branches,
-  } = useBranches();
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
   return (
-    <div>
-      <BranchesMultiSelect
-        name={'branchesIds'}
-        branches={branches}
-        popoverProps={{ minimal: true }}
-      />
-    </div>
+    <Row>
+      <Col xs={4}>
+        <FormGroup
+          label={'Branches'}
+          labelInfo={<FieldHint />}
+          className={Classes.FILL}
+        >
+          <BranchMultiSelect
+            name={'branchesIds'}
+            branches={branches}
+            popoverProps={{ minimal: true }}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
   );
 }