fix(FinancialStatements): Hide filtering by branches/warehouses if the feature is not enabled.

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx

@@ -71,7 +71,6 @@ function CashFlowAccountsActionsBar({
             text={<T id={'cash_flow.label.add_cash_account'} />}
             onClick={handleAddBankAccount}
           />
-
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus-24'} iconSize={20} />}

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -15,6 +15,8 @@ import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
 import { transformToForm, compose } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * AP Aging Summary Report - Drawer Header.
@@ -68,11 +70,14 @@ function APAgingSummaryHeader({
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
   };
-
   // Handle the drawer closing.
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
   };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <APAgingDrawerHeader
@@ -91,11 +96,13 @@ function APAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<APAgingSummaryHeaderGeneral />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<APAgingSummaryHeaderDimensions />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<APAgingSummaryHeaderDimensions />}
+              />
+            )}
           </Tabs>
           <div className={'financial-header-drawer__footer'}>
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.tsx

@@ -7,6 +7,8 @@ import {
   APAgingSummaryHeaderDimensionsProvider,
   useAPAgingSummaryHeaderDimensonsContext,
 } from './APAgingSummaryHeaderDimensionsProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * APAging summary header dimensions.
@@ -27,15 +29,22 @@ export default function APAgingSummaryHeaderDimensions() {
 function APAgingSummaryHeaderDimensionsContent() {
   const { branches } = useAPAgingSummaryHeaderDimensonsContext();
 
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx

@@ -15,6 +15,8 @@ import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * AR Aging Summary Report - Drawer Header.
@@ -76,6 +78,10 @@ function ARAgingSummaryHeader({
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
   };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <ARAgingDrawerHeader
@@ -94,11 +100,13 @@ function ARAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<ARAgingSummaryHeaderGeneral />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<ARAgingSummaryHeaderDimensions />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<ARAgingSummaryHeaderDimensions />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx

@@ -10,7 +10,7 @@ import {
 
 /**
  * ARAging summary header dimensions.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function ARAgingSummaryHeaderDimensions() {
   return (
@@ -22,20 +22,27 @@ export default function ARAgingSummaryHeaderDimensions() {
 
 /**
  * ARAging summary header dimensions content.
- * @returns
+ * @returns {JSX.Element}
  */
 function ARAgingSummaryHeaderDimensionsContent() {
   const { branches } = useARAgingSummaryHeaderDimensonsContext();
 
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx

@@ -6,6 +6,8 @@ import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 import { Formik, Form } from 'formik';
 
 import { FormattedMessage as T } from '@/components';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -56,16 +58,18 @@ function BalanceSheetHeader({
     toggleFilterDrawer(false);
     actions.setSubmitting(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleFilterDrawer(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleFilterDrawer(false);
   };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <BalanceSheetFinancialHeader
@@ -91,11 +95,13 @@ function BalanceSheetHeader({
               title={<T id={'balance_sheet.comparisons'} />}
               panel={<BalanceSheetHeaderComparisonPanal />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'balance_sheet.dimensions'} />}
+                id="dimensions"
-              panel={<BalanceSheetHeaderDimensionsPanel />}
+                title={<T id={'balance_sheet.dimensions'} />}
-            />
+                panel={<BalanceSheetHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx

@@ -7,6 +7,8 @@ import {
   BalanceSheetHeaderDimensionsProvider,
   useBalanceSheetHeaderDimensionsPanelContext,
 } from './BalanceSheetHeaderDimensionsProvider';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 
 /**
  * Balance sheet header dismension panel.
@@ -26,16 +28,21 @@ export default function BalanceSheetHeaderDimensionsPanel() {
  */
 function BalanceSheetHeaderDimensionsPanelContent() {
   const { branches } = useBalanceSheetHeaderDimensionsPanelContext();
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.tsx

@@ -7,6 +7,8 @@ import {
   CashFlowStatementDimensionsPanelProvider,
   useCashFlowStatementDimensionsPanelContext,
 } from './CashFlowStatementDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Cash flow statement dismension panel.
@@ -28,15 +30,21 @@ function CashFlowStatementDimensionsPanelContent() {
   // Fetches the branches list.
   const { branches } = useCashFlowStatementDimensionsPanelContext();
 
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx

@@ -16,6 +16,8 @@ import withCashFlowStatementActions from './withCashFlowStatementActions';
 
 import { getDefaultCashFlowSheetQuery } from './utils';
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Cash flow statement header.
@@ -43,7 +45,6 @@ function CashFlowStatementHeader({
     },
     defaultValues,
   );
-
   // Validation schema.
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
@@ -67,6 +68,10 @@ function CashFlowStatementHeader({
     toggleCashFlowStatementFilterDrawer(false);
   };
 
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <FinancialStatementHeader
       isOpen={isFilterDrawerOpen}
@@ -84,11 +89,13 @@ function CashFlowStatementHeader({
               title={<T id={'general'} />}
               panel={<CashFlowStatementGeneralPanel />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<CashFlowStatementDimensionsPanel />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<CashFlowStatementDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/FinancialStatementsFilter.tsx

@@ -13,16 +13,18 @@ import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { filterAccountsOptions } from './constants';
 
+const SUBMENU_POPOVER_MODIFIERS = {
+  flip: { boundariesElement: 'viewport', padding: 20 },
+  offset: { offset: '0, 10' },
+  preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+};
+
+
 export default function FinancialStatementsFilter({
   items = filterAccountsOptions,
   label = <T id={'filter_accounts'} />,
   ...restProps
 }) {
-  const SUBMENU_POPOVER_MODIFIERS = {
-    flip: { boundariesElement: 'viewport', padding: 20 },
-    offset: { offset: '0, 10' },
-    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
-  };
 
   const filterRenderer = (item, { handleClick, modifiers, query }) => {
     return (

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx

@@ -16,6 +16,8 @@ import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsP
 
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Geenral Ledger (GL) - Header.
@@ -63,6 +65,10 @@ function GeneralLedgerHeader({
   const handleDrawerClose = () => {
     toggleDisplayFilterDrawer(false);
   };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <GeneralLedgerDrawerHeader
@@ -81,11 +87,13 @@ function GeneralLedgerHeader({
               title={<T id={'general'} />}
               panel={<GeneralLedgerHeaderGeneralPane />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<GeneralLedgerHeaderDimensionsPanel />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<GeneralLedgerHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx

@@ -7,6 +7,8 @@ import {
   GeneralLedgerHeaderDimensionsPanelProvider,
   useGeneralLedgerHeaderDimensionsContext,
 } from './GeneralLedgerHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Gereral ledger sheet header dismension panel.
@@ -27,15 +29,22 @@ export default function GeneralLedgerHeaderDimensionsPanel() {
 function GeneralLedgerHeaderDimensionsPanelContent() {
   const { branches } = useGeneralLedgerHeaderDimensionsContext();
 
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx

@@ -18,6 +18,8 @@ import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
 import { getInventoryItemDetailsDefaultQuery } from './utils2';
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Inventory item details header.
@@ -58,11 +60,15 @@ function InventoryItemDetailsHeader({
     toggleFilterDrawer(false);
     setSubmitting(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleFilterDrawer(false);
   };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 
   return (
     <InventoryItemDetailsDrawerHeader
@@ -81,11 +87,13 @@ function InventoryItemDetailsHeader({
               title={<T id={'general'} />}
               panel={<InventoryItemDetailsHeaderGeneralPanel />}
             />
-            <Tab
+            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<InventoryItemDetailsHeaderDimensionsPanel />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<InventoryItemDetailsHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
           <div class="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.tsx

@@ -2,7 +2,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, WarehouseMultiSelect, Row, Col } from '@/components';
+import {
+  BranchMultiSelect,
+  WarehouseMultiSelect,
+  Row,
+  Col,
+} from '@/components';
 import {
   InventoryItemDetailsHeaderDimensionsProvider,
   useInventoryItemDetailsHeaderDimensionsPanelContext,
@@ -10,7 +15,7 @@ import {
 
 /**
  * Inventory Item deatil header dismension panel.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function InventoryItemDetailsHeaderDimensionsPanel() {
   return (
@@ -22,31 +27,40 @@ export default function InventoryItemDetailsHeaderDimensionsPanel() {
 
 /**
  * Inventory Valuation header dismension panel content.
- * @returns
+ * @returns {JSX.Element}
  */
 function InventoryItemDetailsHeaderDimensionsPanelContent() {
   const { warehouses, branches } =
     useInventoryItemDetailsHeaderDimensionsPanelContext();
 
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.warehouses);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
-
+          </FormGroup>
-        <FormGroup
+        )}
-          label={intl.get('warehouses_multi_select.label')}
+        {isWarehousesFeatureCan && (
-          className={Classes.FILL}
+          <FormGroup
-        >
+            label={intl.get('warehouses_multi_select.label')}
-          <WarehouseMultiSelect
+            className={Classes.FILL}
-            name={'warehousesIds'}
+          >
-            warehouses={warehouses}
+            <WarehouseMultiSelect
-          />
+              name={'warehousesIds'}
-        </FormGroup>
+              warehouses={warehouses}
+            />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -15,6 +15,8 @@ import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * inventory valuation header.
@@ -58,16 +60,19 @@ function InventoryValuationHeader({
     toggleInventoryValuationFilterDrawer(false);
     setSubmitting(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleInventoryValuationFilterDrawer(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleInventoryValuationFilterDrawer(false);
   };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 
   return (
     <InventoryValuationDrawerHeader
@@ -86,11 +91,13 @@ function InventoryValuationHeader({
               title={<T id={'general'} />}
               panel={<InventoryValuationHeaderGeneralPanel />}
             />
-            <Tab
+            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<InventoryValuationHeaderDimensionsPanel />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<InventoryValuationHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
           <div class="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx

@@ -2,11 +2,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, WarehouseMultiSelect, Row, Col } from '@/components';
+import {
+  BranchMultiSelect,
+  WarehouseMultiSelect,
+  Row,
+  Col,
+} from '@/components';
 import {
   InventoryValuationHeaderDimensionsProvider,
   useInventoryValuationHeaderDimensionsPanelContext,
 } from './InventoryValuationHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Inventory Valuation header dismension panel.
@@ -28,25 +35,34 @@ function InventoryValuationHeaderDimensionsPanelContent() {
   const { warehouses, branches } =
     useInventoryValuationHeaderDimensionsPanelContext();
 
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
-
+          </FormGroup>
-        <FormGroup
+        )}
-          label={intl.get('warehouses_multi_select.label')}
+        {isWarehousesFeatureCan && (
-          className={Classes.FILL}
+          <FormGroup
-        >
+            label={intl.get('warehouses_multi_select.label')}
-          <WarehouseMultiSelect
+            className={Classes.FILL}
-            name={'warehousesIds'}
+          >
-            warehouses={warehouses}
+            <WarehouseMultiSelect
-          />
+              name={'warehousesIds'}
-        </FormGroup>
+              warehouses={warehouses}
+            />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx

@@ -16,6 +16,8 @@ import withProfitLoss from './withProfitLoss';
 import withProfitLossActions from './withProfitLossActions';
 
 import { useProfitLossHeaderValidationSchema } from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Profit/loss header.
@@ -55,6 +57,10 @@ function ProfitLossHeader({
     toggleFilterDrawer(false);
   };
 
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <ProfitLossSheetHeader
       isOpen={profitLossDrawerFilter}
@@ -77,11 +83,13 @@ function ProfitLossHeader({
               title={<T id={'profit_loss_sheet.comparisons'} />}
               panel={<ProfitLossSheetHeaderComparisonPanel />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'profit_loss_sheet.dimensions'} />}
+                id="dimensions"
-              panel={<ProfitLossSheetHeaderDimensionsPanel />}
+                title={<T id={'profit_loss_sheet.dimensions'} />}
-            />
+                panel={<ProfitLossSheetHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.tsx

@@ -7,10 +7,12 @@ import {
   ProfitLossSheetHeaderDimensionsProvider,
   useProfitLossSheetPanelContext,
 } from './ProfitLossSheetHeaderDimensionsProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * profit loss Sheet Header dimensions panel.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function ProfitLossSheetHeaderDimensionsPanel() {
   return (
@@ -21,21 +23,26 @@ export default function ProfitLossSheetHeaderDimensionsPanel() {
 }
 
 /**
- * profit loss Sheet Header dimensions panel content.
+ * Profit/Loss Sheet Header dimensions panel content.
- * @returns
+ * @returns {JSX.Element}
  */
 function ProfitLossSheetHeaderDimensionsPanelContent() {
   const { branches } = useProfitLossSheetPanelContext();
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx

@@ -17,6 +17,8 @@ import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
 
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Trial balance sheet header.
@@ -40,6 +42,10 @@ function TrialBalanceSheetHeader({
       .required()
       .label(intl.get('to_date')),
   });
+  // Detarmines whether the feature is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   // Default values.
   const defaultValues = {
@@ -90,11 +96,13 @@ function TrialBalanceSheetHeader({
               title={<T id={'general'} />}
               panel={<TrialBalanceSheetHeaderGeneralPanel />}
             />
-            <Tab
+            {isBranchesFeatureCan && (
-              id="dimensions"
+              <Tab
-              title={<T id={'dimensions'} />}
+                id="dimensions"
-              panel={<TrialBalanceSheetHeaderDimensionsPanel />}
+                title={<T id={'dimensions'} />}
-            />
+                panel={<TrialBalanceSheetHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.tsx

@@ -7,10 +7,12 @@ import {
   TrialBLHeaderDimensionsPanelProvider,
   useTrialBalanceSheetPanelContext,
 } from './TrialBalanceSheetHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Trial balance sheet header dismension panel.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function TrialBalanceSheetHeaderDimensionsPanel() {
   return (
@@ -21,21 +23,26 @@ export default function TrialBalanceSheetHeaderDimensionsPanel() {
 }
 
 /**
- * trial balance sheet header dismension panel content.
+ * Trial balance sheet header dismension panel content.
- * @returns
+ * @returns {JSX.Element}
  */
 function TrialBLSheetHeaderDimensionsPanelContent() {
   const { branches } = useTrialBalanceSheetPanelContext();
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
+        {isBranchesFeatureCan && (
-          label={intl.get('branches_multi_select.label')}
+          <FormGroup
-          className={Classes.FILL}
+            label={intl.get('branches_multi_select.label')}
-        >
+            className={Classes.FILL}
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          >
-        </FormGroup>
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );

src/index.tsx

@@ -14,10 +14,7 @@ import { store, persistor } from '@/store/createStore';
 
 if (process.env.NODE_ENV === 'development') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
-
+  whyDidYouRender(React, { trackAllPureComponents: false });
-  whyDidYouRender(React, {
-    trackAllPureComponents: false,
-  });
 }
 
 if (process.env.NODE_ENV !== 'development') {