diff --git a/src/components/Branches/BranchMultiSelect.js b/src/components/Branches/BranchMultiSelect.js
index 787f52eb7..fca8b168c 100644
--- a/src/components/Branches/BranchMultiSelect.js
+++ b/src/components/Branches/BranchMultiSelect.js
@@ -1,4 +1,5 @@
import React from 'react';
+import intl from 'react-intl-universal';
import { MenuItem } from '@blueprintjs/core';
import { FMultiSelect } from '../Forms';
@@ -32,15 +33,13 @@ const branchItemRenderer = (
{ handleClick, modifiers, query },
{ isSelected },
) => {
- // const text = `${branch.name}.${isSelected ? 'selected' : 'not-selected'}`;
-
return (
@@ -61,5 +60,13 @@ const branchSelectProps = {
* @returns
*/
export function BranchMultiSelect({ branches, ...rest }) {
- return ;
+ return (
+
+ );
}
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
index dfc0ea698..6b93d6c04 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js
@@ -1,6 +1,8 @@
import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, FieldHint, Row, Col } from 'components';
+import { BranchMultiSelect, Row, Col } from 'components';
import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
import { useBranches } from 'hooks/query';
@@ -16,15 +18,10 @@ function BalanceSheetHeaderDimensionsPanel() {
}
+ label={intl.get('branches_multi_select.label')}
className={Classes.FILL}
>
-
+
@@ -32,3 +29,9 @@ function BalanceSheetHeaderDimensionsPanel() {
}
export default BalanceSheetHeaderDimensionsPanel;
+
+const BalanceMulitSelectRoot = styled.div`
+ .bp3-tag-input {
+ height: auto;
+ }
+`;
diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js
new file mode 100644
index 000000000..14b59aee3
--- /dev/null
+++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormGroup, Classes } from '@blueprintjs/core';
+import { BranchMultiSelect, Row, Col } from 'components';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import { useBranches } from 'hooks/query';
+
+/**
+ * Cash flow statement dismension panel.
+ * @returns
+ */
+export default function CashFlowStatementDimensionsPanel() {
+ // Fetches the branches list.
+ const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
index d4fa3adeb..561234f7c 100644
--- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
+++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
@@ -14,6 +14,7 @@ import withCashFlowStatementActions from './withCashFlowStatementActions';
import { getDefaultCashFlowSheetQuery } from './utils';
import { compose, transformToForm } from 'utils';
+import CashFlowStatementDimensionsPanel from './CashFlowStatementDimensionsPanel';
/**
* Cash flow statement header.
@@ -33,18 +34,19 @@ function CashFlowStatementHeader({
const defaultValues = getDefaultCashFlowSheetQuery();
// Initial form values.
- const initialValues = transformToForm({
- ...pageFilter,
- fromDate: moment(pageFilter.fromDate).toDate(),
- toDate: moment(pageFilter.toDate).toDate(),
- }, defaultValues);
+ const initialValues = transformToForm(
+ {
+ ...pageFilter,
+ fromDate: moment(pageFilter.fromDate).toDate(),
+ toDate: moment(pageFilter.toDate).toDate(),
+ },
+ defaultValues,
+ );
// Validation schema.
const validationSchema = Yup.object().shape({
dateRange: Yup.string().optional(),
- fromDate: Yup.date()
- .required()
- .label(intl.get('fromDate')),
+ fromDate: Yup.date().required().label(intl.get('fromDate')),
toDate: Yup.date()
.min(Yup.ref('fromDate'))
.required()
@@ -81,6 +83,11 @@ function CashFlowStatementHeader({
title={}
panel={}
/>
+ }
+ panel={}
+ />