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

CHANGELOG.md

@@ -2,95 +2,78 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
-## [1.7.6-rc.2] - 23-04-2022
+## [1.7.4-rc.2] - 20-04-2022
 
 ### Fixed
-
+ - `BIG-374` Refactoring sidebar men with ability permissions and feature control on each item.
-- `BIG-374` Refactoring sidebar men with ability permissions and feature control on each item.
-
-## [v1.7.5-rc.2] - 20-04-2022
-
-### Fixed.
-
-- `BIG-378` Reports drawers columns css conflict.
 
 ## [1.7.3-rc.2] - 15-04-2022
 
 ### Fixed
-
+  - `BIG-372` Activate branches and warehouses dialog reloading once activating.
-- `BIG-372` Activate branches and warehouses dialog reloading once activating.
+  - `BIG-373` Issue general ledger report select specific account.
-- `BIG-373` Issue general ledger report select specific account.
+  - `BIG-377` Make readonly details entries as oneline with tooltip for more details.
-- `BIG-377` Make readonly details entries as oneline with tooltip for more details.
 
 ## [1.7.2-rc.2] - 04-04-2022
 
 ### Fixed
-
+  - Add the missing Arabic localization.
-- Add the missing Arabic localization.
+  - Subscription plans modifications.
-- Subscription plans modifications.
 
 ## [1.7.1-rc.2] - 30-03-2022
 
 ## Added
-
+  - `BIG-141` Add inactive status to item drawer details.
-- `BIG-141` Add inactive status to item drawer details.
+  - `BIG-278` Add created at date on expense details.
-- `BIG-278` Add created at date on expense details.
+  - `BIG-350` Add empty status content of warehouse transfers service.
-- `BIG-350` Add empty status content of warehouse transfers service.
+  - `BIG-344` Add branch details to manual journal and expense details.
-- `BIG-344` Add branch details to manual journal and expense details.
-
 ## Fixed
-
+  - `BIG-221` Remove Non-inventory radio choice on item form.
-- `BIG-221` Remove Non-inventory radio choice on item form.
+  - `BIG-236` Validate estimate expiration date should be equal or bigger than estimate date.
-- `BIG-236` Validate estimate expiration date should be equal or bigger than estimate date.
+  - `BIG-237` Validate invoice due date should be equal or bigger than invoice date.
-- `BIG-237` Validate invoice due date should be equal or bigger than invoice date.
+  - `BIG-238` Validate bill due date should be equal or bigger than bill date.
-- `BIG-238` Validate bill due date should be equal or bigger than bill date.
+  - `BIG-280` Optimize style of multi-select accounts menu.
-- `BIG-280` Optimize style of multi-select accounts menu.
+  - `BIG-284` Cashflow statement loading bar.
-- `BIG-284` Cashflow statement loading bar.
+  - `BIG-296` Creating a new child account from accounts list.
-- `BIG-296` Creating a new child account from accounts list.
+  - `BIG-301` Navigation bar divider on actions bar hide with permissions control.
-- `BIG-301` Navigation bar divider on actions bar hide with permissions control.
+  - `BIG-304` Adding cash or bank account from cash flow service.
-- `BIG-304` Adding cash or bank account from cash flow service.
+  - `BIG-351` Invalid date in the inventory adjustment detail.
-- `BIG-351` Invalid date in the inventory adjustment detail.
+  - `BIG-352` Fix terms and notes fields on footer of all services.
-- `BIG-352` Fix terms and notes fields on footer of all services.
+  - `BIG-354` Validate the warehouse transfer quantity should be above zero.
-- `BIG-354` Validate the warehouse transfer quantity should be above zero.
 
 ## [1.7.0-rc.1] - 24-03-2022
 
 ## Added 
-
+ - Multiply currencies with foreign currencies.
-- Multiply currencies with foreign currencies.
+ - Multiply warehouses to track inventory items.
-- Multiply warehouses to track inventory items.
+ - Multiply branches to track organization transactions.
-- Multiply branches to track organization transactions.
+ - Transfer orders between warehouses.
-- Transfer orders between warehouses.
+ - Integrate financial reports with multiply branches.
-- Integrate financial reports with multiply branches.
+ - Integrate inventory reports with multiply warehouses.
-- Integrate inventory reports with multiply warehouses.
 
 ## Changes
-
+ - Optimize style of sale invoice form.
-- Optimize style of sale invoice form.
+ - Optimize style of sale receipt form.
-- Optimize style of sale receipt form.
+ - Optimize style of credit note form.
-- Optimize style of credit note form.
+ - Optimize style of payment receive form.
-- Optimize style of payment receive form.
+ - Optimize style of bill form.
-- Optimize style of bill form.
+ - Optimize style of payment made form.
-- Optimize style of payment made form.
+ - Optimize style of manual journal form.
-- Optimize style of manual journal form.
+ - Optimize style of expense form.
-- Optimize style of expense form.
 
 ## [1.6.3] - 21-02-2022
 
 ### Fixed
-
+ - `BIG-337` Display billing page once the organization subscription is inactive.
-- `BIG-337` Display billing page once the organization subscription is inactive.
 
 ## [1.6.2] - 19-02-2022
 
 ### Fixed
-
+ - fix syled components dependency with imported as default components.
-- fix syled components dependency with imported as default components.
 
 ## [1.6.0] - 18-02-2022
 
 ### Added
-
 - Balance sheet comparison of previous period (PP).
 - Balance sheet comparison of previous year (PY).
 - Balance sheet percentage analysis columns and rows basis.
@@ -101,12 +84,10 @@ All notable changes to Bigcapital server-side will be in this file.
 ## [1.5.8] - 13-01-2022
 
 ### Added
-
 - Add payment receive PDF print.
 - Add credit note PDF print.
 
 ### Fixed
-
 - fix: Payment receive initial loading state depends on request loading state instead fetching.
 - fix: Balance sheet report alert positioning.
 - fix: Separate customer and vendor inactivate and activate alerts.

src/containers/Accounting/MakeJournal/MakeJournalProvider.tsx

@@ -24,6 +24,7 @@ function MakeJournalProvider({ journalId, query, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectFeatureCan = featureCan(Features.Projects);
 
   // Load the accounts list.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
@@ -60,7 +61,7 @@ function MakeJournalProvider({ journalId, query, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectFeatureCan });
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});

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/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -23,6 +23,7 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
 
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
@@ -51,7 +52,7 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
   // Create and edit expense mutate.
   const { mutateAsync: createExpenseMutate } = useCreateExpense();

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/containers/Purchases/Bills/BillForm/BillFormProvider.tsx

@@ -44,6 +44,7 @@ function BillFormProvider({ billId, ...props }) {
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
 
   // Handle fetch accounts.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
@@ -86,7 +87,7 @@ function BillFormProvider({ billId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
   // Handle fetching bill settings.
   const { isFetching: isSettingLoading } = useSettings();
@@ -101,7 +102,8 @@ function BillFormProvider({ billId, ...props }) {
   const isNewMode = !billId;
 
   // Determines whether the warehouse and branches are loading.
-  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+  const isFeatureLoading =
+    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
 
   const provider = {
     accounts,

src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.tsx

@@ -27,6 +27,7 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
 
   const {
     data: estimate,
@@ -68,7 +69,7 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
   // Handle fetch settings.
   useSettingsEstimates();
@@ -83,7 +84,8 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
   const isNewMode = !estimateId;
 
   // Determines whether the warehouse and branches are loading.
-  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+  const isFeatureLoading =
+    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
 
   // Provider payload.
   const provider = {

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.tsx

@@ -32,6 +32,7 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
 
   const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
     enabled: !!invoiceId,
@@ -41,7 +42,7 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
   // Fetches the estimate by the given id.
   const { data: estimate, isLoading: isEstimateLoading } = useEstimate(
@@ -98,7 +99,8 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const isNewMode = !invoiceId;
 
   // Determines whether the warehouse and branches are loading.
-  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+  const isFeatureLoading =
+    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
 
   const provider = {
     invoice,

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.tsx

@@ -27,6 +27,7 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
 
   // Fetches payment recevie details.
   const {
@@ -62,7 +63,7 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
   // Detarmines whether the new mode.
   const isNewMode = !paymentReceiveId;

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormProvider.tsx

@@ -26,6 +26,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
   const { featureCan } = useFeatureCan();
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
   const isBranchFeatureCan = featureCan(Features.Branches);
+  const isProjectsFeatureCan = featureCan(Features.Projects);
 
   // Fetch sale receipt details.
   const { data: receipt, isLoading: isReceiptLoading } = useReceipt(receiptId, {
@@ -89,7 +90,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects();
+  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
 
   // Fetch receipt settings.
   const { isLoading: isSettingLoading } = useSettingsReceipts();

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') {

src/style/components/DataTable/DataTable.scss

@@ -18,11 +18,11 @@
       overflow: hidden;
 
       .th {
-        padding: 0.7rem 0.5rem;
+        padding: 0.68rem 0.5rem;
         background: #f5f5f5;
         font-size: 14px;
-        color: #3b495d;
+        color: #4E5B6F;
-        font-weight: 600;
+        font-weight: 400;
         border-bottom: 1px solid #d2dde2;
 
         >div {
@@ -389,7 +389,7 @@
 
     .thead .th {
       background: #fff;
-      color: #222222;
+      color: #000;
       border-bottom: 1px solid #000000;
       padding: 0.5rem;
     }