chore: Refactoring all import directories to alias and all .js|.jsx renamed to be .ts|.tsx

src/containers/FinancialStatements/InventoryValuation/InventoryValuation.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import moment from 'moment';
 
-import { InventoryValuationProvider } from './InventoryValuationProvider';
+import { DashboardPageContent } from '@/components';
 import InventoryValuationActionsBar from './InventoryValuationActionsBar';
 import InventoryValuationHeader from './InventoryValuationHeader';
+
+import { InventoryValuationProvider } from './InventoryValuationProvider';
 import { InventoryValuationBody } from './InventoryValuationBody';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { InventoryValuationLoadingBar } from './components';
-import withInventoryValuationActions from './withInventoryValuationActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
-
 import { useInventoryValuationQuery } from './utils';
-import { compose } from 'utils';
+import { compose } from '@/utils';
+
+import withInventoryValuationActions from './withInventoryValuationActions';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 /**
  * Inventory valuation.

src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.tsx

@@ -9,17 +9,15 @@ import {
   Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'components';
+import { DashboardActionsBar, Icon, FormattedMessage as T } from '@/components';
 
-import { Icon } from 'components';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 
-import { compose, saveInvoke } from 'utils';
+import { compose, saveInvoke } from '@/utils';
 
 function InventoryValuationActionsBar({
   // #withInventoryValuation

src/containers/FinancialStatements/InventoryValuation/InventoryValuationBody.tsx

@@ -5,8 +5,8 @@ import InventoryValuationTable from './InventoryValuationTable';
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 
 import { FinancialReportBody } from '../FinancialReportPage';
-import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 /**
  * Inventory valuation body.

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
+import styled from 'styled-components';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import styled from 'styled-components';
 
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
 import InventoryValuationHeaderGeneralPanel from './InventoryValuationHeaderGeneralPanel';
 import InventoryValuationHeaderDimensionsPanel from './InventoryValuationHeaderDimensionsPanel';
 import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 
-import { compose, transformToForm } from 'utils';
+import { compose, transformToForm } from '@/utils';
 
 /**
  * inventory valuation header.

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx

@@ -1,7 +1,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 {
   InventoryValuationHeaderDimensionsProvider,
   useInventoryValuationHeaderDimensionsPanelContext,

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanelProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { useWarehouses, useBranches } from 'hooks/query';
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { useWarehouses, useBranches } from '@/hooks/query';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 
 const InventoryValuationHeaderDimensionsPanelContext = React.createContext();

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.tsx

@@ -10,7 +10,7 @@ import {
   Row,
   Col,
   FieldHint,
-} from '../../../components';
+} from '@/components';
 import { filterInventoryValuationOptions } from '../constants';
 
 import {
@@ -18,7 +18,7 @@ import {
   tansformDateValue,
   inputIntent,
   handleDateChange,
-} from 'utils';
+} from '@/utils';
 import {
   InventoryValuationGeneralPanelProvider,
   useInventoryValuationGeneralPanelContext,

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanelProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
-import { useItems } from 'hooks/query';
+import { useItems } from '@/hooks/query';
 
 const InventoryValuationGeneralPanelContext = React.createContext();
 

src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useInventoryValuation } from 'hooks/query';
+import { useInventoryValuation } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const InventoryValuationContext = React.createContext();

src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { ReportDataTable, FinancialSheet } from 'components';
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
+import { tableRowTypesToClassnames } from '@/utils';
 
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 import { useInventoryValuationTableColumns } from './components';
 
-import { tableRowTypesToClassnames } from 'utils';
-import { TableStyle } from 'common';
-
 /**
  * inventory valuation data table.
  */

src/containers/FinancialStatements/InventoryValuation/components.tsx

@@ -1,14 +1,13 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 
-import { If } from 'components';
-import { CellTextSpan } from 'components/Datatable/Cells';
+import { If } from '@/components';
+import { Align } from '@/constants';
+import { getColumnWidth } from '@/utils';
+import { CellTextSpan } from '@/components/Datatable/Cells';
 import { useInventoryValuationContext } from './InventoryValuationProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
-import { getColumnWidth } from 'utils';
-import { Align } from 'common';
-
 /**
  * Retrieve inventory valuation table columns.
  */

src/containers/FinancialStatements/InventoryValuation/utils.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import moment from 'moment';
 import { castArray } from 'lodash';
 
-import { useAppQueryString } from 'hooks';
-import { transformToForm } from 'utils';
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
 
 /**
  * Retrieves the inventory valuation sheet default query.

src/containers/FinancialStatements/InventoryValuation/withInventoryValuation.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getInventoryValuationFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
+import { getInventoryValuationFilterDrawer } from '@/store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {

src/containers/FinancialStatements/InventoryValuation/withInventoryValuationActions.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { toggleInventoryValuationFilterDrawer } from 'store/financialStatement/financialStatements.actions';
+import { toggleInventoryValuationFilterDrawer } from '@/store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   toggleInventoryValuationFilterDrawer: (toggle) =>