feat(balance): add FMultiSelect.

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -9,6 +9,7 @@ import withBalanceSheetActions from './withBalanceSheetActions';
 
 import BalanceSheetHeaderGeneralPanal from './BalanceSheetHeaderGeneralPanal';
 import BalanceSheetHeaderComparisonPanal from './BalanceSheetHeaderComparisonPanal';
+import BalanceSheetHeaderDimensionsPanel from './BalanceSheetHeaderDimensionsPanel';
 import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
 
 import { compose, transformToForm } from 'utils';
@@ -40,6 +41,7 @@ function BalanceSheetHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
+      branches_id: [],
     },
     defaultValues,
   );
@@ -85,6 +87,11 @@ function BalanceSheetHeader({
               title={<T id={'balance_sheet.comparisons'} />}
               panel={<BalanceSheetHeaderComparisonPanal />}
             />
+            <Tab
+              id="dimensions"
+              title={<T id={'dimensions'} />}
+              panel={<BalanceSheetHeaderDimensionsPanel />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { BranchesMultiSelect } from 'components';
+
+import { useBranches } from 'hooks/query';
+
+function BalanceSheetHeaderDimensionsPanel() {
+  // Fetches the branches list.
+  const {
+    isLoading: isBranchesLoading,
+    isFetching: isBranchesFetching,
+    data: branches,
+  } = useBranches();
+  return (
+    <div>
+      <BranchesMultiSelect
+        name={'branches_id'}
+        branches={branches}
+        input={BranchMulitSelectButton}
+        // onItemSelect={}
+        popoverProps={{ minimal: true }}
+      />
+    </div>
+  );
+}
+
+export default BalanceSheetHeaderDimensionsPanel;
+
+function BranchMulitSelectButton() {
+  return <Button text={'Button'} minimal={true} />;
+}