feat(balance): add FMultiSelect.

src/components/FMultiSelect/BranchesMultiSelect.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import { MultiSelect as FMultiSelect } from 'blueprint-formik';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} branch
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const branchItemPredicate = (query, branch, _index, exactMatch) => {
+  const normalizedTitle = branch.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${branch.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} branch
+ * @param {*} param1
+ * @returns
+ */
+const branchItemRenderer = (
+  branch,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  const text = `${branch.name}.${isSelected ? 'selected' : 'not-selected'}`;
+
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      icon={modifiers.selected ? 'tick' : 'blank'}
+      label={branch.name.toString()}
+      key={branch.id}
+      onClick={handleClick}
+      text={text}
+    />
+  );
+};
+
+const branchSelectProps = {
+  itemPredicate: branchItemPredicate,
+  itemRenderer: branchItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+  tagRenderer: 'name',
+};
+
+export function BranchesMultiSelect({ branches, ...rest }) {
+  return (
+    <FMultiSelect
+      items={branches}
+      {...branchSelectProps}
+      {...rest}
+    />
+  );
+}

src/components/FMultiSelect/index.js

@@ -0,0 +1 @@
+export * from './BranchesMultiSelect';

src/components/index.js

@@ -101,6 +101,7 @@ export * from './FeatureGuard';
 export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
+export * from './FMultiSelect'
 
 const Hint = FieldHint;
 

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