feat(financial reports): add branch multi select.

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js

@@ -1,19 +1,31 @@
 import React from 'react';
-import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
 import { BranchMultiSelect, Row, Col } from 'components';
-import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import {
-import { useBranches } from 'hooks/query';
+  BalanceSheetHeaderDimensionsProvider,
+  useBalanceSheetHeaderDimensionsPanelContext,
+} from './BalanceSheetHeaderDimensionsProvider';
 
 /**
  * Balance sheet header dismension panel.
  * @returns
  */
-function BalanceSheetHeaderDimensionsPanel() {
+export default function BalanceSheetHeaderDimensionsPanel() {
-  // Fetches the branches list.
+  return (
-  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+    <BalanceSheetHeaderDimensionsProvider>
+      <BalanceSheetHeaderDimensionsPanelContent />
+    </BalanceSheetHeaderDimensionsProvider>
+  );
+}
 
+/**
+ * Balance sheet header dismension panel content.
+ * @returns
+ */
+function BalanceSheetHeaderDimensionsPanelContent() {
+  const { branches } = useBalanceSheetHeaderDimensionsPanelContext();
+  
   return (
     <Row>
       <Col xs={4}>
@@ -27,11 +39,3 @@ function BalanceSheetHeaderDimensionsPanel() {
     </Row>
   );
 }
-
-export default BalanceSheetHeaderDimensionsPanel;
-
-const BalanceMulitSelectRoot = styled.div`
-  .bp3-tag-input {
-    height: auto;
-  }
-`;

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const BalanceSheetHeaderDimensionsPanelConext = React.createContext();
+
+/**
+ * BL sheet header provider.
+ * @returns
+ */
+function BalanceSheetHeaderDimensionsProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <BalanceSheetHeaderDimensionsPanelConext.Provider value={provider} {...props} />
+  );
+}
+
+const useBalanceSheetHeaderDimensionsPanelContext = () =>
+  React.useContext(BalanceSheetHeaderDimensionsPanelConext);
+
+export { BalanceSheetHeaderDimensionsProvider, useBalanceSheetHeaderDimensionsPanelContext };

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js

@@ -2,16 +2,30 @@ 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 {
-import { useBranches } from 'hooks/query';
+  CashFlowStatementDimensionsPanelProvider,
+  useCashFlowStatementDimensionsPanelContext,
+} from './CashFlowStatementDimensionsPanelProvider';
 
 /**
  * Cash flow statement dismension panel.
  * @returns
  */
 export default function CashFlowStatementDimensionsPanel() {
+  return (
+    <CashFlowStatementDimensionsPanelProvider>
+      <CashFlowStatementDimensionsPanelContent />
+    </CashFlowStatementDimensionsPanelProvider>
+  );
+}
+
+/**
+ * Cash flow statement dismension panel content.
+ * @returns
+ */
+function CashFlowStatementDimensionsPanelContent() {
   // Fetches the branches list.
-  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+  const { branches } = useCashFlowStatementDimensionsPanelContext();
 
   return (
     <Row>

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const CashFlowStatementDimensionsPanelContext = React.createContext();
+
+/**
+ * cash flow statement dimensions panel provider.
+ * @returns
+ */
+function CashFlowStatementDimensionsPanelProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <CashFlowStatementDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useCashFlowStatementDimensionsPanelContext = () =>
+  React.useContext(CashFlowStatementDimensionsPanelContext);
+
+export {
+  CashFlowStatementDimensionsPanelProvider,
+  useCashFlowStatementDimensionsPanelContext,
+};

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js

@@ -7,6 +7,7 @@ import { FormattedMessage as T } from 'components';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
+import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsPanel';
 
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
@@ -31,6 +32,7 @@ function GeneralLedgerHeader({
   const defaultValues = {
     fromDate: moment().toDate(),
     toDate: moment().toDate(),
+    branchesIds: [],
   };
 
   // Initial values.
@@ -39,6 +41,7 @@ function GeneralLedgerHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
+      branchesIds: [],
     },
     defaultValues,
   );
@@ -84,6 +87,11 @@ function GeneralLedgerHeader({
               title={<T id={'general'} />}
               panel={<GeneralLedgerHeaderGeneralPane />}
             />
+            <Tab
+              id="dimensions"
+              title={<T id={'dimensions'} />}
+              panel={<GeneralLedgerHeaderDimensionsPanel />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.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 {
+  GeneralLedgerHeaderDimensionsPanelProvider,
+  useGeneralLedgerHeaderDimensionsContext,
+} from './GeneralLedgerHeaderDimensionsPanelProvider';
+
+/**
+ * Gereral ledger sheet header dismension panel.
+ * @returns
+ */
+export default function GeneralLedgerHeaderDimensionsPanel() {
+  return (
+    <GeneralLedgerHeaderDimensionsPanelProvider>
+      <GeneralLedgerHeaderDimensionsPanelContent />
+    </GeneralLedgerHeaderDimensionsPanelProvider>
+  );
+}
+
+/**
+ * Gereral ledger sheet header dismension panel content.
+ * @returns
+ */
+function GeneralLedgerHeaderDimensionsPanelContent() {
+  const { branches } = useGeneralLedgerHeaderDimensionsContext();
+
+  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/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const GeneralLedgerHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * General Ledger Header Dimensions Panel provider.
+ * @returns
+ */
+function GeneralLedgerHeaderDimensionsPanelProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <GeneralLedgerHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useGeneralLedgerHeaderDimensionsContext = () =>
+  React.useContext(GeneralLedgerHeaderDimensionsPanelContext);
+
+export {
+  GeneralLedgerHeaderDimensionsPanelProvider,
+  useGeneralLedgerHeaderDimensionsContext,
+};

src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js

@@ -1,18 +1,30 @@
 import React from 'react';
-import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
 import { BranchMultiSelect, Row, Col } from 'components';
-import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import {
-import { useBranches } from 'hooks/query';
+  JournalSheetHeaderDimensionsProvider,
+  useJournalSheetHeaderDimensionsPanelContext,
+} from './JournalSheetHeaderDimensionsProvider';
 
 /**
  * Journal sheet header dismension panel.
  * @returns
  */
 export default function JournalSheetHeaderDimensions() {
-  // Fetches the branches list.
+  return (
-  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+    <JournalSheetHeaderDimensionsProvider>
+      <JournalSheetHeaderDimensionsContent />
+    </JournalSheetHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * Journal sheet header dismension panel content.
+ * @returns
+ */
+function JournalSheetHeaderDimensionsContent() {
+  const { branches } = useJournalSheetHeaderDimensionsPanelContext();
 
   return (
     <Row>

src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensionsProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const JournalSheetHeaderDimensionsPanelContext = React.createContext();
+
+/**
+ * Journal sheet header provider.
+ * @returns
+ */
+function JournalSheetHeaderDimensionsProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <JournalSheetHeaderDimensionsPanelContext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useJournalSheetHeaderDimensionsPanelContext = () =>
+  React.useContext(JournalSheetHeaderDimensionsPanelContext);
+
+export {
+  JournalSheetHeaderDimensionsProvider,
+  useJournalSheetHeaderDimensionsPanelContext,
+};

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -8,6 +8,7 @@ import { FormattedMessage as T } from 'components';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import ProfitLossSheetHeaderGeneralPane from './ProfitLossSheetHeaderGeneralPane';
 import ProfitLossSheetHeaderComparisonPanel from './ProfitLossSheetHeaderComparisonPanel';
+import ProfitLossSheetHeaderDimensionsPanel from './ProfitLossSheetHeaderDimensionsPanel';
 
 import withProfitLoss from './withProfitLoss';
 import withProfitLossActions from './withProfitLossActions';
@@ -52,7 +53,7 @@ function ProfitLossHeader({
     toggleFilterDrawer(false);
   };
 
-  return ( 
+  return (
     <FinancialStatementHeader
       isOpen={profitLossDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
@@ -74,6 +75,11 @@ function ProfitLossHeader({
               title={<T id={'profit_loss_sheet.comparisons'} />}
               panel={<ProfitLossSheetHeaderComparisonPanel />}
             />
+            <Tab
+              id="dimensions"
+              title={'Dimensions'}
+              panel={<ProfitLossSheetHeaderDimensionsPanel />}
+            />
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.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 {
+  ProfitLossSheetHeaderDimensionsProvider,
+  useProfitLossSheetPanelContext,
+} from './ProfitLossSheetHeaderDimensionsProvider';
+
+/**
+ * profit loss Sheet Header dimensions panel.
+ * @returns
+ */
+export default function ProfitLossSheetHeaderDimensionsPanel() {
+  return (
+    <ProfitLossSheetHeaderDimensionsProvider>
+      <ProfitLossSheetHeaderDimensionsPanelContent />
+    </ProfitLossSheetHeaderDimensionsProvider>
+  );
+}
+
+/**
+ * profit loss Sheet Header dimensions panel content.
+ * @returns
+ */
+function ProfitLossSheetHeaderDimensionsPanelContent() {
+  const { branches } = useProfitLossSheetPanelContext();
+
+  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/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const ProfitLossSheetHeaderDimensionsPanelConext = React.createContext();
+
+/**
+ * profit loss sheet header provider.
+ * @returns
+ */
+function ProfitLossSheetHeaderDimensionsProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <ProfitLossSheetHeaderDimensionsPanelConext.Provider
+      value={provider}
+      {...props}
+    />
+  );
+}
+
+const useProfitLossSheetPanelContext = () =>
+  React.useContext(ProfitLossSheetHeaderDimensionsPanelConext);
+
+export {
+  ProfitLossSheetHeaderDimensionsProvider,
+  useProfitLossSheetPanelContext,
+};

src/containers/FinancialStatements/ProfitLossSheet/utils.js

@@ -31,6 +31,8 @@ export const getDefaultProfitLossQuery = () => ({
   percentageRow: false,
   percentageIncome: false,
   percentageExpense: false,
+
+  branchesIds: [],
 });
 
 /**

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js

@@ -1,17 +1,30 @@
 import React from 'react';
-import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
 import { BranchMultiSelect, Row, Col } from 'components';
-import { useBranches } from 'hooks/query';
+import {
+  TrialBLHeaderDimensionsPanelProvider,
+  useTrialBalanceSheetPanelContext,
+} from './TrialBalanceSheetHeaderDimensionsPanelProvider';
 
 /**
- * trial balance sheet header dismension panel.
+ * Trial balance sheet header dismension panel.
  * @returns
  */
 export default function TrialBalanceSheetHeaderDimensionsPanel() {
-  // Fetches the branches list.
+  return (
-  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+    <TrialBLHeaderDimensionsPanelProvider>
+      <TrialBLSheetHeaderDimensionsPanelContent />
+    </TrialBLHeaderDimensionsPanelProvider>
+  );
+}
+
+/**
+ * trial balance sheet header dismension panel content.
+ * @returns
+ */
+function TrialBLSheetHeaderDimensionsPanelContent() {
+  const { branches } = useTrialBalanceSheetPanelContext();
 
   return (
     <Row>

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useBranches } from 'hooks/query';
+import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+
+const TrialBLSheetHeaderDimensionsContext = React.createContext();
+
+/**
+ *  Trial BL sheet header provider.
+ * @returns
+ */
+function TrialBLHeaderDimensionsPanelProvider({ ...props }) {
+  // Fetches the branches list.
+  const { isLoading: isBranchesLoading, data: branches } = useBranches();
+
+  // Provider
+  const provider = {
+    branches,
+    isBranchesLoading,
+  };
+
+  return isBranchesLoading ? (
+    <FinancialHeaderLoadingSkeleton />
+  ) : (
+    <TrialBLSheetHeaderDimensionsContext.Provider value={provider} {...props} />
+  );
+}
+
+const useTrialBalanceSheetPanelContext = () =>
+  React.useContext(TrialBLSheetHeaderDimensionsContext);
+
+export { TrialBLHeaderDimensionsPanelProvider, useTrialBalanceSheetPanelContext };

src/containers/FinancialStatements/TrialBalanceSheet/utils.js

@@ -1,6 +1,5 @@
 import moment from 'moment';
 
-
 export function getDefaultTrialBalanceQuery() {
   return {
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -8,4 +7,4 @@ export function getDefaultTrialBalanceQuery() {
     basis: 'accural',
     filterByOption: 'with-transactions',
   };
-}
+}

src/lang/en/index.json

@@ -1853,5 +1853,8 @@
   "warehouse.alert.are_you_sure_you_want_to_make": "Are you sure you want to make a primary warehouse?",
   "make_primary": "Make as Primary",
   "invoice.branch_button.label": "Branch: {label}",
-  "invoice.warehouse_button.label": "Warehouse: {label}"
+  "invoice.warehouse_button.label": "Warehouse: {label}",
+  "branches_multi_select.label":"Branches",
+  "branches_multi_select.placeholder": "Filter by branches…",
+  "dimensions": "Dimensions"
 }

src/style/App.scss

@@ -291,4 +291,8 @@ html[lang^="ar"] {
 
 .font-bold {
   font-weight: 600;
+}
+
+.bp3-tag-input {
+  height: auto;
 }