Merge branch 'develop' into main

CHANGELOG.md

@@ -2,78 +2,95 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
-## [1.7.4-rc.2] - 20-04-2022
+## [1.7.6-rc.2] - 23-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-373` Issue general ledger report select specific account.
-  - `BIG-377` Make readonly details entries as oneline with tooltip for more details.
+
+- `BIG-372` Activate branches and warehouses dialog reloading once activating.
+- `BIG-373` Issue general ledger report select specific account.
+- `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.
-  - Subscription plans modifications.
+
+- Add the missing Arabic localization.
+- Subscription plans modifications.
 
 ## [1.7.1-rc.2] - 30-03-2022
 
 ## Added
-  - `BIG-141` Add inactive status to item drawer details.
-  - `BIG-278` Add created at date on expense details.
-  - `BIG-350` Add empty status content of warehouse transfers service.
-  - `BIG-344` Add branch details to manual journal and expense details.
+
+- `BIG-141` Add inactive status to item drawer details.
+- `BIG-278` Add created at date on expense details.
+- `BIG-350` Add empty status content of warehouse transfers service.
+- `BIG-344` Add branch details to manual journal and expense details.
+
 ## Fixed
-  - `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-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-280` Optimize style of multi-select accounts menu.
-  - `BIG-284` Cashflow statement loading bar.
-  - `BIG-296` Creating a new child account from accounts list.
-  - `BIG-301` Navigation bar divider on actions bar hide with permissions control.
-  - `BIG-304` Adding cash or bank account from cash flow service.
-  - `BIG-351` Invalid date in the inventory adjustment detail.
-  - `BIG-352` Fix terms and notes fields on footer of all services.
-  - `BIG-354` Validate the warehouse transfer quantity should be above zero.
+
+- `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-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-280` Optimize style of multi-select accounts menu.
+- `BIG-284` Cashflow statement loading bar.
+- `BIG-296` Creating a new child account from accounts list.
+- `BIG-301` Navigation bar divider on actions bar hide with permissions control.
+- `BIG-304` Adding cash or bank account from cash flow service.
+- `BIG-351` Invalid date in the inventory adjustment detail.
+- `BIG-352` Fix terms and notes fields on footer of all services.
+- `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 warehouses to track inventory items.
- - Multiply branches to track organization transactions.
- - Transfer orders between warehouses.
- - Integrate financial reports with multiply branches.
- - Integrate inventory reports with multiply warehouses.
+
+- Multiply currencies with foreign currencies.
+- Multiply warehouses to track inventory items.
+- Multiply branches to track organization transactions.
+- Transfer orders between warehouses.
+- Integrate financial reports with multiply branches.
+- Integrate inventory reports with multiply warehouses.
 
 ## Changes
- - Optimize style of sale invoice form.
- - Optimize style of sale receipt form.
- - Optimize style of credit note form.
- - Optimize style of payment receive form.
- - Optimize style of bill form.
- - Optimize style of payment made form.
- - Optimize style of manual journal form.
- - Optimize style of expense form.
+
+- Optimize style of sale invoice form.
+- Optimize style of sale receipt form.
+- Optimize style of credit note form.
+- Optimize style of payment receive form.
+- Optimize style of bill form.
+- Optimize style of payment made form.
+- Optimize style of manual journal 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.
@@ -84,10 +101,12 @@ 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,7 +24,6 @@ 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();
@@ -61,7 +60,7 @@ function MakeJournalProvider({ journalId, query, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectFeatureCan });
+  } = useProjects();
 
   // Submit form payload.
   const [submitPayload, setSubmitPayload] = useState({});

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx

@@ -71,6 +71,7 @@ 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,7 +23,6 @@ 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();
 
@@ -52,7 +51,7 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+  } = useProjects();
 
   // Create and edit expense mutate.
   const { mutateAsync: createExpenseMutate } = useCreateExpense();

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -15,8 +15,6 @@ 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.
@@ -70,14 +68,11 @@ 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
@@ -96,13 +91,11 @@ function APAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<APAgingSummaryHeaderGeneral />}
             />
-            {isBranchesFeatureCan && (
             <Tab
               id="dimensions"
               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,8 +7,6 @@ import {
   APAgingSummaryHeaderDimensionsProvider,
   useAPAgingSummaryHeaderDimensonsContext,
 } from './APAgingSummaryHeaderDimensionsProvider';
-import { useFeatureCan } from '@/hooks/state';
-import { Features } from '@/constants';
 
 /**
  * APAging summary header dimensions.
@@ -29,22 +27,15 @@ 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}>
-        {isBranchesFeatureCan && (
         <FormGroup
           label={intl.get('branches_multi_select.label')}
           className={Classes.FILL}
         >
           <BranchMultiSelect name={'branchesIds'} branches={branches} />
         </FormGroup>
-        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx

@@ -15,8 +15,6 @@ 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.
@@ -78,10 +76,6 @@ function ARAgingSummaryHeader({
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
   };
-  // Detarmines the feature whether is enabled.
-  const { featureCan } = useFeatureCan();
-
-  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <ARAgingDrawerHeader
@@ -100,13 +94,11 @@ function ARAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<ARAgingSummaryHeaderGeneral />}
             />
-            {isBranchesFeatureCan && (
             <Tab
               id="dimensions"
               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 {JSX.Element}
+ * @returns
  */
 export default function ARAgingSummaryHeaderDimensions() {
   return (
@@ -22,27 +22,20 @@ export default function ARAgingSummaryHeaderDimensions() {
 
 /**
  * ARAging summary header dimensions content.
- * @returns {JSX.Element}
+ * @returns
  */
 function ARAgingSummaryHeaderDimensionsContent() {
   const { branches } = useARAgingSummaryHeaderDimensonsContext();
 
-  // Detarmines the feature whether is enabled.
-  const { featureCan } = useFeatureCan();
-
-  const isBranchesFeatureCan = featureCan(Features.Branches);
-
   return (
     <Row>
       <Col xs={4}>
-        {isBranchesFeatureCan && (
         <FormGroup
           label={intl.get('branches_multi_select.label')}
           className={Classes.FILL}
         >
           <BranchMultiSelect name={'branchesIds'} branches={branches} />
         </FormGroup>
-        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx

@@ -6,8 +6,6 @@ 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';
@@ -58,18 +56,16 @@ 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
@@ -95,13 +91,11 @@ function BalanceSheetHeader({
               title={<T id={'balance_sheet.comparisons'} />}
               panel={<BalanceSheetHeaderComparisonPanal />}
             />
-            {isBranchesFeatureCan && (
             <Tab
               id="dimensions"
               title={<T id={'balance_sheet.dimensions'} />}
               panel={<BalanceSheetHeaderDimensionsPanel />}
             />
-            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx

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

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.tsx

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

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx

@@ -16,8 +16,6 @@ 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.
@@ -45,6 +43,7 @@ function CashFlowStatementHeader({
     },
     defaultValues,
   );
+
   // Validation schema.
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
@@ -68,10 +67,6 @@ function CashFlowStatementHeader({
     toggleCashFlowStatementFilterDrawer(false);
   };
 
-  const { featureCan } = useFeatureCan();
-
-  const isBranchesFeatureCan = featureCan(Features.Branches);
-
   return (
     <FinancialStatementHeader
       isOpen={isFilterDrawerOpen}
@@ -89,13 +84,11 @@ function CashFlowStatementHeader({
               title={<T id={'general'} />}
               panel={<CashFlowStatementGeneralPanel />}
             />
-            {isBranchesFeatureCan && (
             <Tab
               id="dimensions"
               title={<T id={'dimensions'} />}
               panel={<CashFlowStatementDimensionsPanel />}
             />
-            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/FinancialStatementsFilter.tsx

@@ -13,18 +13,16 @@ 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,8 +16,6 @@ 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.
@@ -65,10 +63,6 @@ function GeneralLedgerHeader({
   const handleDrawerClose = () => {
     toggleDisplayFilterDrawer(false);
   };
-  // Detarmines the feature whether is enabled.
-  const { featureCan } = useFeatureCan();
-
-  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <GeneralLedgerDrawerHeader
@@ -87,13 +81,11 @@ function GeneralLedgerHeader({
               title={<T id={'general'} />}
               panel={<GeneralLedgerHeaderGeneralPane />}
             />
-            {isBranchesFeatureCan && (
             <Tab
               id="dimensions"
               title={<T id={'dimensions'} />}
               panel={<GeneralLedgerHeaderDimensionsPanel />}
             />
-            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx

@@ -7,8 +7,6 @@ import {
   GeneralLedgerHeaderDimensionsPanelProvider,
   useGeneralLedgerHeaderDimensionsContext,
 } from './GeneralLedgerHeaderDimensionsPanelProvider';
-import { useFeatureCan } from '@/hooks/state';
-import { Features } from '@/constants';
 
 /**
  * Gereral ledger sheet header dismension panel.
@@ -29,22 +27,15 @@ 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}>
-        {isBranchesFeatureCan && (
         <FormGroup
           label={intl.get('branches_multi_select.label')}
           className={Classes.FILL}
         >
           <BranchMultiSelect name={'branchesIds'} branches={branches} />
         </FormGroup>
-        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx

@@ -18,8 +18,6 @@ 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.
@@ -60,15 +58,11 @@ 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
@@ -87,13 +81,11 @@ function InventoryItemDetailsHeader({
               title={<T id={'general'} />}
               panel={<InventoryItemDetailsHeaderGeneralPanel />}
             />
-            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
             <Tab
               id="dimensions"
               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,12 +2,7 @@
 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,
@@ -15,7 +10,7 @@ import {
 
 /**
  * Inventory Item deatil header dismension panel.
- * @returns {JSX.Element}
+ * @returns
  */
 export default function InventoryItemDetailsHeaderDimensionsPanel() {
   return (
@@ -27,30 +22,22 @@ export default function InventoryItemDetailsHeaderDimensionsPanel() {
 
 /**
  * Inventory Valuation header dismension panel content.
- * @returns {JSX.Element}
+ * @returns
  */
 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}>
-        {isBranchesFeatureCan && (
         <FormGroup
           label={intl.get('branches_multi_select.label')}
           className={Classes.FILL}
         >
           <BranchMultiSelect name={'branchesIds'} branches={branches} />
         </FormGroup>
-        )}
-        {isWarehousesFeatureCan && (
+
         <FormGroup
           label={intl.get('warehouses_multi_select.label')}
           className={Classes.FILL}
@@ -60,7 +47,6 @@ function InventoryItemDetailsHeaderDimensionsPanelContent() {
             warehouses={warehouses}
           />
         </FormGroup>
-        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -15,8 +15,6 @@ 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.
@@ -60,19 +58,16 @@ 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
@@ -91,13 +86,11 @@ function InventoryValuationHeader({
               title={<T id={'general'} />}
               panel={<InventoryValuationHeaderGeneralPanel />}
             />
-            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
             <Tab
               id="dimensions"
               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,18 +2,11 @@
 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.
@@ -35,24 +28,16 @@ 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}>
-        {isBranchesFeatureCan && (
         <FormGroup
           label={intl.get('branches_multi_select.label')}
           className={Classes.FILL}
         >
           <BranchMultiSelect name={'branchesIds'} branches={branches} />
         </FormGroup>
-        )}
-        {isWarehousesFeatureCan && (
+
         <FormGroup
           label={intl.get('warehouses_multi_select.label')}
           className={Classes.FILL}
@@ -62,7 +47,6 @@ function InventoryValuationHeaderDimensionsPanelContent() {
             warehouses={warehouses}
           />
         </FormGroup>
-        )}
       </Col>
     </Row>
   );

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx

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

src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.tsx

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

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx

@@ -17,8 +17,6 @@ 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.
@@ -42,10 +40,6 @@ 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 = {
@@ -96,13 +90,11 @@ function TrialBalanceSheetHeader({
               title={<T id={'general'} />}
               panel={<TrialBalanceSheetHeaderGeneralPanel />}
             />
-            {isBranchesFeatureCan && (
             <Tab
               id="dimensions"
               title={<T id={'dimensions'} />}
               panel={<TrialBalanceSheetHeaderDimensionsPanel />}
             />
-            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.tsx

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

src/containers/Purchases/Bills/BillForm/BillFormProvider.tsx

@@ -44,7 +44,6 @@ 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();
@@ -87,7 +86,7 @@ function BillFormProvider({ billId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+  } = useProjects();
 
   // Handle fetching bill settings.
   const { isFetching: isSettingLoading } = useSettings();
@@ -102,8 +101,7 @@ function BillFormProvider({ billId, ...props }) {
   const isNewMode = !billId;
 
   // Determines whether the warehouse and branches are loading.
-  const isFeatureLoading =
-    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
   const provider = {
     accounts,

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

@@ -27,7 +27,6 @@ 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,
@@ -69,7 +68,7 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+  } = useProjects();
 
   // Handle fetch settings.
   useSettingsEstimates();
@@ -84,8 +83,7 @@ function EstimateFormProvider({ query, estimateId, ...props }) {
   const isNewMode = !estimateId;
 
   // Determines whether the warehouse and branches are loading.
-  const isFeatureLoading =
-    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
   // Provider payload.
   const provider = {

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

@@ -32,7 +32,6 @@ 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,
@@ -42,7 +41,7 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+  } = useProjects();
 
   // Fetches the estimate by the given id.
   const { data: estimate, isLoading: isEstimateLoading } = useEstimate(
@@ -99,8 +98,7 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const isNewMode = !invoiceId;
 
   // Determines whether the warehouse and branches are loading.
-  const isFeatureLoading =
-    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
   const provider = {
     invoice,

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

@@ -27,7 +27,6 @@ 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 {
@@ -63,7 +62,7 @@ function PaymentReceiveFormProvider({ query, paymentReceiveId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+  } = useProjects();
 
   // Detarmines whether the new mode.
   const isNewMode = !paymentReceiveId;

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

@@ -26,7 +26,6 @@ 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, {
@@ -90,7 +89,7 @@ function ReceiptFormProvider({ receiptId, ...props }) {
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-  } = useProjects({}, { enabled: !!isProjectsFeatureCan });
+  } = useProjects();
 
   // Fetch receipt settings.
   const { isLoading: isSettingLoading } = useSettingsReceipts();

src/index.tsx

@@ -14,7 +14,10 @@ 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.68rem 0.5rem;
+        padding: 0.7rem 0.5rem;
         background: #f5f5f5;
         font-size: 14px;
-        color: #4E5B6F;
-        font-weight: 400;
+        color: #3b495d;
+        font-weight: 600;
         border-bottom: 1px solid #d2dde2;
 
         >div {
@@ -389,7 +389,7 @@
 
     .thead .th {
       background: #fff;
-      color: #000;
+      color: #222222;
       border-bottom: 1px solid #000000;
       padding: 0.5rem;
     }