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

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import Icon from 'components/Icon';
 import {
   Button,
   Classes,
@@ -8,16 +7,19 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
-
-import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
-
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
+import {
+  Icon,
+  DrawerActionsBar,
+  Can,
+  FormattedMessage as T,
+} from '@/components';
+import { ExpenseAction, AbilitySubject } from '@/constants/abilityOption';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
-import { compose } from 'utils';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+
+import { compose } from '@/utils';
 
 /**
  * Expense drawer action bar.

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
 import ExpenseDrawerDetails from './ExpenseDrawerDetails';

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { CommercialDocBox } from '../../../components';
+import { CommercialDocBox } from '@/components';
 
 import ExpenseDrawerActionBar from './ExpenseDrawerActionBar';
 import ExpenseDrawerHeader from './ExpenseDrawerHeader';

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx

@@ -6,9 +6,9 @@ import {
   TotalLines,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-} from 'components';
+} from '@/components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
-import { FormatNumber, TotalLine } from '../../../components';
+import { FormatNumber, TotalLine } from '@/components';
 
 /**
  * Footer details of expense readonly details.

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
-import { defaultTo } from 'lodash';
 import styled from 'styled-components';
+import { defaultTo } from 'lodash';
 
 import {
   CommercialDocHeader,
@@ -13,7 +13,7 @@ import {
   FormatDate,
   ExchangeRateDetailItem,
   FormattedMessage as T,
-} from 'components';
+} from '@/components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 import { ExpenseDetailsStatus } from './components';
 

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useExpense } from 'hooks/query';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+import { useExpense } from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 
 const ExpenseDrawerDrawerContext = React.createContext();
 

src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { CommercialDocEntriesTable } from 'components';
+import { CommercialDocEntriesTable } from '@/components';
 
 import { useExpenseReadEntriesColumns } from './utils';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
 
-import { TableStyle } from '../../../common';
+import { TableStyle } from '@/constants';
 
 /**
  * Expense details table.

src/containers/Drawers/ExpenseDrawer/components.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tag, Intent } from '@blueprintjs/core';
 
-import { T } from 'components';
+import { T } from '@/components';
 
 /**
  * Expense details status.

src/containers/Drawers/ExpenseDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React, { lazy } from 'react';
-import { Drawer, DrawerSuspense } from 'components';
-import withDrawers from 'containers/Drawer/withDrawers';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 const ExpenseDrawerContent = lazy(() => import('./ExpenseDrawerContent'));
 

src/containers/Drawers/ExpenseDrawer/utils.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
+import { FormatNumberCell, TextOverviewTooltipCell } from '@/components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
-import { getColumnWidth } from 'utils';
+import { getColumnWidth } from '@/utils';
 
 /**
  * Retrieve expense readonly details entries table columns.