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

src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Icon from 'components/Icon';
 import {
   Button,
   Classes,
@@ -7,17 +6,20 @@ import {
   Intent,
   NavbarDivider,
 } from '@blueprintjs/core';
-import { Can, FormattedMessage as T } from 'components';
+import {
+  DashboardActionsBar,
+  Icon,
+  Can,
+  FormattedMessage as T,
+} from '@/components';
+import { AccountAction, AbilitySubject } from '@/constants/abilityOption';
 
-import { AccountAction, AbilitySubject } from '../../../common/abilityOption';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-
-import { AccountDialogAction } from 'containers/Dialogs/AccountDialog/utils';
+import { AccountDialogAction } from '@/containers/Dialogs/AccountDialog/utils';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
-import { compose, safeCallback } from 'utils';
+import { compose, safeCallback } from '@/utils';
 
 /**
  * Account drawer action bar.

src/containers/Drawers/AccountDrawer/AccountDrawerContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 
-import 'style/components/Drawers/AccountDrawer.scss';
+import '@/style/components/Drawers/AccountDrawer.scss';
 
 import { AccountDrawerProvider } from './AccountDrawerProvider';
 import AccountDrawerDetails from './AccountDrawerDetails';

src/containers/Drawers/AccountDrawer/AccountDrawerDetails.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Card } from 'components';
+import { Card } from '@/components';
 
 import AccountDrawerActionBar from './AccountDrawerActionBar';
 import AccountDrawerHeader from './AccountDrawerHeader';

src/containers/Drawers/AccountDrawer/AccountDrawerHeader.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import { defaultTo } from 'lodash';
 
-import { FormattedMessage as T } from 'components';
-import { Icon, Money, DetailsMenu, DetailItem } from 'components';
+import {
+  Icon,
+  DetailsMenu,
+  DetailItem,
+  FormattedMessage as T,
+} from '@/components';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
 /**

src/containers/Drawers/AccountDrawer/AccountDrawerProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useAccount, useAccountTransactions } from 'hooks/query';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
+import { useAccount, useAccountTransactions } from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
 
 const AccountDrawerContext = React.createContext();
 

src/containers/Drawers/AccountDrawer/AccountDrawerTable.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import intl from 'react-intl-universal';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { compose } from '@/utils';
+import { TableStyle } from '@/constants';
+import { Card, DataTable, If } from '@/components';
+import { useAccountReadEntriesColumns } from './utils';
+import { useAppIntlContext } from '@/components/AppIntlProvider';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
-import { Card, DataTable, If } from 'components';
-
-import { compose } from 'utils';
-import { useAccountReadEntriesColumns } from './utils';
-
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import { TableStyle } from '../../../common';
-import { useAppIntlContext } from 'components/AppIntlProvider';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 /**
  * account drawer table.

src/containers/Drawers/AccountDrawer/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 AccountDrawerContent = lazy(() => import('./AccountDrawerContent'));
 

src/containers/Drawers/AccountDrawer/utils.tsx

@@ -1,8 +1,8 @@
 import intl from 'react-intl-universal';
 import React from 'react';
 
-import { FormatDateCell } from '../../../components';
-import { isBlank } from 'utils';
+import { FormatDateCell } from '@/components';
+import { isBlank } from '@/utils';
 
 /**
  * Debit/credit table cell.

src/containers/Drawers/BillDrawer/BillDetailActionsBar.tsx

@@ -11,9 +11,9 @@ import {
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import {
   Can,
@@ -21,15 +21,15 @@ import {
   Icon,
   DrawerActionsBar,
   FormattedMessage as T,
-} from 'components';
+} from '@/components';
 import {
   BillAction,
   PaymentMadeAction,
   AbilitySubject,
-} from '../../../common/abilityOption';
+} from '@/constants/abilityOption';
 import { BillMenuItem } from './utils';
 
-import { safeCallback, compose } from 'utils';
+import { safeCallback, compose } from '@/utils';
 
 function BillDetailActionsBar({
   // #withDialogActions

src/containers/Drawers/BillDrawer/BillDetailFooter.tsx

@@ -5,7 +5,7 @@ import {
   If,
   DetailsMenu,
   DetailItem,
-} from 'components';
+} from '@/components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 

src/containers/Drawers/BillDrawer/BillDetailHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { defaultTo } from 'lodash';
 import styled from 'styled-components';
+import { defaultTo } from 'lodash';
 
 import {
   FormatDate,
@@ -13,7 +13,7 @@ import {
   CommercialDocTopHeader,
   VendorDrawerLink,
   ExchangeRateDetailItem,
-} from 'components';
+} from '@/components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 import { BillDetailsStatus } from './utils';

src/containers/Drawers/BillDrawer/BillDetailTab.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import { CommercialDocBox } from 'components';
-
 import BillDetailHeader from './BillDetailHeader';
 import BillDetailTable from './BillDetailTable';
-import { BillDetailTableFooter } from './BillDetailTableFooter';
 import BillDetailFooter from './BillDetailFooter';
+import { CommercialDocBox } from '@/components';
+import { BillDetailTableFooter } from './BillDetailTableFooter';
 
 /**
  * Bill detail panel tab.

src/containers/Drawers/BillDrawer/BillDetailTable.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { CommercialDocEntriesTable } from 'components';
+import { CommercialDocEntriesTable } from '@/components';
 
 import { useBillDrawerContext } from './BillDrawerProvider';
 import { useBillReadonlyEntriesTableColumns } from './utils';
 
-import { TableStyle } from '../../../common';
+import { TableStyle } from '@/constants';
 
 export default function BillDetailTable() {
   const {

src/containers/Drawers/BillDrawer/BillDetailTableFooter.tsx

@@ -8,7 +8,7 @@ import {
   T,
   TotalLines,
   TotalLine,
-} from '../../../components';
+} from '@/components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**

src/containers/Drawers/BillDrawer/BillDrawerContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 
 import { BillDrawerProvider } from './BillDrawerProvider';
 import BillDrawerDetails from './BillDrawerDetails';

src/containers/Drawers/BillDrawer/BillDrawerDetails.tsx

@@ -3,12 +3,9 @@ import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DrawerMainTabs } from 'components';
-import {
-  PaymentMadeAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
-import { useAbilityContext } from 'hooks/utils';
+import { DrawerMainTabs } from '@/components';
+import { useAbilityContext } from '@/hooks/utils';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 import BillDetailTab from './BillDetailTab';
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 import BillGLEntriesTable from './BillGLEntriesTable';

src/containers/Drawers/BillDrawer/BillDrawerProvider.tsx

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

src/containers/Drawers/BillDrawer/BillGLEntriesTable.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Card } from 'components';
+import { Card } from '@/components';
 
-import { useTransactionsByReference } from 'hooks/query';
+import { useTransactionsByReference } from '@/hooks/query';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 import JournalEntriesTable, {

src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { DataTable, Card } from 'components';
+import { DataTable, Card, TableSkeletonRows } from '@/components';
 
+import { TableStyle } from '@/constants';
 import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from '../BillDrawerProvider';
-import { useBillPaymentTransactions } from 'hooks/query';
+import { useBillPaymentTransactions } from '@/hooks/query';
 
-import { TableStyle } from '../../../../common';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Bill payment transactions datatable.

src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { Can, FormatDateCell, Icon } from '../../../../components';
-import { safeCallback } from 'utils';
-import {
-  PaymentMadeAction,
-  AbilitySubject,
-} from '../../../../common/abilityOption';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { safeCallback } from '@/utils';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { PaymentMadeAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Table actions menu.

src/containers/Drawers/BillDrawer/LocatedLandedCostTable.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
-import { DataTable, Card, FormattedMessage as T } from 'components';
+import {
+  DataTable,
+  TableSkeletonRows,
+  Card,
+  FormattedMessage as T,
+} from '@/components';
 
 import { useLocatedLandedCostColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import { TableStyle } from '../../../common';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-
-import { compose } from 'utils';
+import { TableStyle } from '@/constants';
 
+import { compose } from '@/utils';
 
 /**
  * Located landed cost table.

src/containers/Drawers/BillDrawer/components.tsx

@@ -3,9 +3,9 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import clsx from 'classnames';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
-import { safeCallback } from 'utils';
-import { CLASSES } from 'common/classes';
-import {  Icon } from 'components';
+import { safeCallback } from '@/utils';
+import { CLASSES } from '@/constants/classes';
+import {  Icon } from '@/components';
 
 /**
  * Actions menu.

src/containers/Drawers/BillDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React 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 BillDrawerContent = React.lazy(() => import('./BillDrawerContent'));
 

src/containers/Drawers/BillDrawer/utils.tsx

@@ -17,8 +17,8 @@ import {
   FormattedMessage as T,
   Choose,
   Icon,
-} from '../../../components';
-import { getColumnWidth } from 'utils';
+} from '@/components';
+import { getColumnWidth } from '@/utils';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 /**

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import Icon from 'components/Icon';
 import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
-
-import { Can, FormattedMessage as T, DrawerActionsBar } from 'components';
+import {
+  Can,
+  FormattedMessage as T,
+  DrawerActionsBar,
+  Icon,
+} from '@/components';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
-import { compose } from 'utils';
+import { AbilitySubject, CashflowAction } from '@/constants/abilityOption';
+import { compose } from '@/utils';
 
 /**
  * Cashflow transaction drawer action bar.

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import 'style/components/Drawers/CashflowTransactionDrawer.scss';
+import '@/style/components/Drawers/CashflowTransactionDrawer.scss';
 
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 import { CashflowTransactionDrawerProvider } from './CashflowTransactionDrawerProvider';
 import CashflowTransactionDrawerDetails from './CashflowTransactionDrawerDetails';
 

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Card } from 'components';
+import { Card } from '@/components';
 
 import CashflowTransactionDrawerActionBar from './CashflowTransactionDrawerActionBar';
 import CashflowTransactionDrawerHeader from './CashflowTransactionDrawerHeader';

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
-import { T, FormatNumber } from '../../../components';
+import { T, FormatNumber } from '@/components';
 
 export default function CashflowTransactionDrawerFooter() {
   const {

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.tsx

@@ -8,7 +8,7 @@ import {
   Row,
   Col,
   CommercialDocHeader,
-} from 'components';
+} from '@/components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
 
 /**

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useCashflowTransaction } from 'hooks/query';
+import { useCashflowTransaction } from '@/hooks/query';
 
-import { DrawerLoading, DrawerHeaderContent } from 'components';
+import { DrawerLoading, DrawerHeaderContent } from '@/components';
 
 const CashflowTransactionDrawerContext = React.createContext();
 

src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CommercialDocEntriesTable } from 'components';
+import { CommercialDocEntriesTable } from '@/components';
 
 import { useCashflowTransactionColumns } from './utils';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';

src/containers/Drawers/CashflowTransactionDetailDrawer/index.tsx

@@ -1,9 +1,9 @@
 import React 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 CashFlowTransactionDrawerContent = React.lazy(() =>
   import('./CashflowTransactionDrawerContent'),

src/containers/Drawers/CashflowTransactionDetailDrawer/utils.tsx

@@ -1,8 +1,7 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';
 
-import { FormatNumberCell, If, Icon } from '../../../components';
+import { FormatNumberCell } from '@/components';
 
 /**
  * Retrieve cashflow transaction entries columns.

src/containers/Drawers/ContactDetailDrawer/ContactDetail.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ContactDetailActionsBar from './ContactDetailActionsBar';
 import ContactDetailList from './ContactDetailList';
-import { Card } from 'components';
+import { Card } from '@/components';
 
 /**
  * contact detail.

src/containers/Drawers/ContactDetailDrawer/ContactDetailActionsBar.tsx

@@ -8,16 +8,15 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useContactDetailDrawerContext } from './ContactDetailDrawerProvider';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T } from 'components';
+import { DashboardActionsBar, Icon, FormattedMessage as T } from '@/components';
 
-import { safeCallback, compose } from 'utils';
+import { safeCallback, compose } from '@/utils';
 
 function ContactDetailActionsBar({
   // #withAlertsActions

src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerContent.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import ContactDetail from './ContactDetail';
 import { ContactDetailDrawerProvider } from './ContactDetailDrawerProvider';
 
-import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
+import '@/style/components/Drawers/ViewDetail/ViewDetail.scss';
 
 /**
  * Contact detail drawer content.

src/containers/Drawers/ContactDetailDrawer/ContactDetailDrawerProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
-import { useContact } from 'hooks/query';
+import { DrawerHeaderContent, DashboardInsider } from '@/components';
+import { useContact } from '@/hooks/query';
 
 const ContactDetailDrawerContext = React.createContext();
 

src/containers/Drawers/ContactDetailDrawer/ContactDetailList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Money } from 'components';
 import intl from 'react-intl-universal';
+import { Money } from '@/components';
 import { useContactDetailDrawerContext } from './ContactDetailDrawerProvider';
-import { DetailItem } from '../../../components/Details';
+import { DetailItem } from '@/components/Details';
 
 export default function ContactDetailList({}) {
   const { contact } = useContactDetailDrawerContext();

src/containers/Drawers/ContactDetailDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React 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 ContactDetailDrawerContent = React.lazy(() =>
   import('./ContactDetailDrawerContent'),

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
-import styled from 'styled-components';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Tab } from '@blueprintjs/core';
 
-import { useAbilityContext } from 'hooks/utils';
-import { DrawerMainTabs } from 'components';
+import { useAbilityContext } from '@/hooks/utils';
+import { DrawerMainTabs } from '@/components';
 import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
 import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
 import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
-import {
-  CreditNoteAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Credit Note view detail.

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.tsx

@@ -10,9 +10,9 @@ import {
 
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import {
   DrawerActionsBar,
@@ -20,13 +20,10 @@ import {
   Icon,
   FormattedMessage as T,
   If,
-} from 'components';
-import {
-  CreditNoteAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
+} from '@/components';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 import { CreditNoteMenuItem } from './utils';
 
 /**

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 
 import CreditNoteDetail from './CreditNoteDetail';
 import { CreditNoteDetailDrawerProvider } from './CreditNoteDetailDrawerProvider';

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.tsx

@@ -5,10 +5,10 @@ import {
   useRefundCreditNote,
   useReconcileCreditNote,
   useReconcileCreditNotes,
-} from 'hooks/query';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+} from '@/hooks/query';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
 
 const CreditNoteDetailDrawerContext = React.createContext();
 

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailFooter.tsx

@@ -5,7 +5,7 @@ import {
   If,
   DetailsMenu,
   DetailItem,
-} from 'components';
+} from '@/components';
 
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { defaultTo } from 'lodash';
 import styled from 'styled-components';
+import { defaultTo } from 'lodash';
 
 import {
   FormatDate,
@@ -15,7 +15,7 @@ import {
   CommercialDocTopHeader,
   CustomerDrawerLink,
   ExchangeRateDetailItem,
-} from 'components';
+} from '@/components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
 import { CreditNoteDetailsStatus } from './utils';

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CommercialDocBox } from 'components';
+import { CommercialDocBox } from '@/components';
 
 import CreditNoteDetailHeader from './CreditNoteDetailHeader';
 import CreditNoteDetailTable from './CreditNoteDetailTable';

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CommercialDocEntriesTable } from 'components';
+import { CommercialDocEntriesTable } from '@/components';
 
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 import { useCreditNoteReadOnlyEntriesColumns } from './utils';

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTableFooter.tsx

@@ -8,7 +8,7 @@ import {
   FormatNumber,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-} from 'components';
+} from '@/components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
 /**

src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Card } from 'components';
+import { Card } from '@/components';
 
 import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
-import { useTransactionsByReference } from 'hooks/query';
+import { useTransactionsByReference } from '@/hooks/query';
 import { useJournalEntriesTransactionsColumns } from './components';
 
 import JournalEntriesTable, {
   AmountDisplayedBaseCurrencyMessage,
-} from '../../../JournalEntriesTable/JournalEntriesTable';
+} from '@/containers/JournalEntriesTable/JournalEntriesTable';
 
 /**
  * Journal entries table.

src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatDateCell } from '../../../../components';
+import { FormatDateCell } from '@/components';
 
-import 'style/pages/JournalEntries/List.scss';
+import '@/style/pages/JournalEntries/List.scss';
 
 /**
  * Retrieve journal entries transactions table columns.

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
+import { DataTable, Card } from '@/components';
 
-import { TableStyle } from 'common';
-import withAlertsActions from 'containers/Alert/withAlertActions';
+import { TableStyle } from '@/constants';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 
 import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
 import {
@@ -10,7 +10,7 @@ import {
   ActionsMenu,
 } from './components';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Reconcile credit transactions table.

src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { Can, FormatDateCell, Icon } from 'components';
-import { safeCallback } from 'utils';
-import {
-  CreditNoteAction,
-  AbilitySubject,
-} from '../../../../common/abilityOption';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import { safeCallback } from '@/utils';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Actions menu.

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DataTable, Card } from 'components';
+import { DataTable, Card } from '@/components';
 
-import { TableStyle } from 'common';
-import withAlertsActions from 'containers/Alert/withAlertActions';
+import { TableStyle } from '@/constants';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 
 import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
 import {
@@ -10,7 +10,7 @@ import {
   ActionsMenu,
 } from './components';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Refund credit note transactions table.

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import { Can, FormatDateCell, Icon } from 'components';
-import { safeCallback } from 'utils';
-import {
-  CreditNoteAction,
-  AbilitySubject,
-} from '../../../../common/abilityOption';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { safeCallback } from '@/utils';
+import { CreditNoteAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Actions menu.

src/containers/Drawers/CreditNoteDetailDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React 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 CreditNoteDetailDrawerContent = React.lazy(() =>
   import('./CreditNoteDetailDrawerContent'),

src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx

@@ -10,14 +10,14 @@ import {
   Tag,
   Intent,
 } from '@blueprintjs/core';
-import { getColumnWidth } from 'utils';
+import { getColumnWidth } from '@/utils';
 import {
   Icon,
   FormattedMessage as T,
   TextOverviewTooltipCell,
   FormatNumberCell,
   Choose,
-} from '../../../components';
+} from '@/components';
 import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
 
 export const useCreditNoteReadOnlyEntriesColumns = () => {

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetails.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 
-import { Card } from 'components';
+import { Card } from '@/components';
 
 import CustomerDetailsActionsBar from './CustomerDetailsActionsBar';
 import CustomerDetailsHeader from './CustomerDetailsHeader';

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 import { useHistory } from 'react-router-dom';
 import {
   Button,
@@ -13,16 +14,19 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import clsx from 'classnames';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
-import { Can, Icon, FormattedMessage as T } from 'components';
+import {
+  DashboardActionsBar,
+  Can,
+  Icon,
+  FormattedMessage as T,
+} from '@/components';
 import { CustomerMoreMenuItem } from './utils';
 import {
   AbilitySubject,
@@ -31,8 +35,8 @@ import {
   SaleReceiptAction,
   PaymentReceiveAction,
   CustomerAction,
-} from '../../../common/abilityOption';
-import { compose } from 'utils';
+} from '@/constants/abilityOption';
+import { compose } from '@/utils';
 
 /**
  * Customer details actions bar.
@@ -53,22 +57,22 @@ function CustomerDetailsActionsBar({
   // Handle new invoice button click.
   const handleNewInvoiceClick = () => {
     history.push('invoices/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
   // Handle new receipt button click.
   const handleNewReceiptClick = () => {
     history.push('receipts/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
   // Handle new payment receive button click.
   const handleNewPaymentClick = () => {
     history.push('payment-receives/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
   // Handle new estimate button click.
   const handleNewEstimateClick = () => {
     history.push('estimates/new');
-    closeDrawer('customer-details-drawer');
+    closeDrawer('customer-detail-drawer');
   };
 
   const handleDeleteCustomer = () => {

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { DrawerBody } from 'components';
-import CustomerDetails from './CustomerDetails';
+import { DrawerBody } from '@/components';
 import { CustomerDetailsDrawerProvider } from './CustomerDetailsDrawerProvider';
+import CustomerDetails from './CustomerDetails';
 
 /**
  * Contact detail drawer content.

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsDrawerProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useCustomer } from 'hooks/query';
+import { useCustomer } from '@/hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
 
 const ContactDetailDrawerContext = React.createContext();
 
@@ -25,7 +25,7 @@ function CustomerDetailsDrawerProvider({ customerId, ...props }) {
   return (
     <DrawerLoading loading={isCustomerLoading}>
       <DrawerHeaderContent
-        name="customer-details-drawer"
+        name="customer-detail-drawer"
         title={customer?.display_name}
       />
       <ContactDetailDrawerContext.Provider value={provider} {...props} />

src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.tsx

@@ -3,8 +3,7 @@ import intl from 'react-intl-universal';
 import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 
-import { DetailsMenu, DetailItem, T } from 'components';
-
+import { DetailsMenu, DetailItem, T } from '@/components';
 import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider';
 
 import Style from './CustomerDetailsDrawer.module.scss';

src/containers/Drawers/CustomerDetailsDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React 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 CustomerDetailsDrawerContent = React.lazy(() =>
   import('./CustomerDetailsDrawerContent'),

src/containers/Drawers/CustomerDetailsDrawer/utils.tsx

@@ -7,7 +7,7 @@ import {
   MenuItem,
   Menu,
 } from '@blueprintjs/core';
-import { Icon, FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T } from '@/components';
 
 /**
  *  Customer more actions menu items.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetail.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Tab } from '@blueprintjs/core';
 
-import { DrawerMainTabs } from 'components';
+import { DrawerMainTabs } from '@/components';
 
 import EstimateDetailActionsBar from './EstimateDetailActionsBar';
 import EstimateDetailPanel from './EstimateDetailPanel';

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailActionsBar.tsx

@@ -11,23 +11,19 @@ import {
 
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
-import {
-  SaleEstimateAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
-
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
+import { EstimateMoreMenuItems } from './components';
 import {
   DrawerActionsBar,
   Icon,
   FormattedMessage as T,
-  MoreMenuItems,
   Can,
-} from 'components';
+} from '@/components';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Estimate read-only details actions bar of the drawer.
@@ -99,7 +95,7 @@ function EstimateDetailActionsBar({
         </Can>
         <Can I={SaleEstimateAction.NotifyBySms} a={AbilitySubject.Estimate}>
           <NavbarDivider />
-          <MoreMenuItems
+          <EstimateMoreMenuItems
             payload={{
               onNotifyViaSMS: handleNotifyViaSMS,
             }}

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 
 import EstimateDetail from './EstimateDetail';
 import { EstimateDetailDrawerProvider } from './EstimateDetailDrawerProvider';

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailDrawerProvider.tsx

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

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.tsx

@@ -6,7 +6,7 @@ import {
   If,
   DetailsMenu,
   DetailItem,
-} from 'components';
+} from '@/components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { defaultTo } from 'lodash';
 import styled from 'styled-components';
+import { defaultTo } from 'lodash';
 
 import {
   CommercialDocHeader,
@@ -14,7 +14,7 @@ import {
   Col,
   CustomerDrawerLink,
   ExchangeRateDetailItem,
-} from 'components';
+} from '@/components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import { EstimateDetailsStatus } from './components';
 

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CommercialDocBox } from 'components';
+import { CommercialDocBox } from '@/components';
 
 import EstimateDetailHeader from './EstimateDetailHeader';
 import EstimateDetailTable from './EstimateDetailTable';

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTable.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { CommercialDocEntriesTable } from 'components';
+import { CommercialDocEntriesTable } from '@/components';
 
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 import { useEstimateReadonlyEntriesColumns } from './utils';
 
-import { TableStyle } from '../../../common';
+import { TableStyle } from '@/constants';
 
 /**
  * Estimate detail table.

src/containers/Drawers/EstimateDetailDrawer/EstimateDetailTableFooter.tsx

@@ -8,7 +8,7 @@ import {
   TotalLineBorderStyle,
   TotalLineTextStyle,
   FormatNumber,
-} from 'components';
+} from '@/components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**

src/containers/Drawers/EstimateDetailDrawer/components.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
-import { Intent, Tag } from '@blueprintjs/core';
+import {
+  Intent,
+  Button,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  MenuItem,
+  Menu,
+  Tag,
+} from '@blueprintjs/core';
 
-import { T, Choose } from 'components';
+import { Icon, T, Choose } from '@/components';
 
 /**
  * Estimate details status.
@@ -38,3 +47,26 @@ export function EstimateDetailsStatus({ estimate }) {
     </Choose>
   );
 }
+
+export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
+  return (
+    <Popover
+      minimal={true}
+      content={
+        <Menu>
+          <MenuItem
+            onClick={onNotifyViaSMS}
+            text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
+          />
+        </Menu>
+      }
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+    >
+      <Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
+    </Popover>
+  );
+}

src/containers/Drawers/EstimateDetailDrawer/index.tsx

@@ -1,8 +1,8 @@
 import React 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 EstimateDetailDrawerContent = React.lazy(() =>
   import('./EstimateDetailDrawerContent'),
@@ -14,6 +14,7 @@ function EstimateDetailDrawer({
   isOpen,
   payload: { estimateId },
 }) {
+ 
   return (
     <Drawer
       isOpen={isOpen}

src/containers/Drawers/EstimateDetailDrawer/utils.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components';
-import { getColumnWidth } from 'utils';
+import { getColumnWidth } from '@/utils';
+import { FormatNumberCell, TextOverviewTooltipCell } from '@/components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
 
 /**

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.

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { Tab } from '@blueprintjs/core';
 
-import { DrawerMainTabs } from 'components';
+import { DrawerMainTabs } from '@/components';
 import InventoryAdjustmentDetailTab from './InventoryAdjustmentDetailTab';
 import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActionsBar';
 import InventoryAdjustmentDetailGLEntriesPanel from './InventoryAdjustmentDetailGLEntriesPanel';

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.tsx

@@ -3,15 +3,20 @@ import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
 
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
-import withAlertsActions from 'containers/Alert/withAlertActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
 
-import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
+import {
+  Icon,
+  DrawerActionsBar,
+  FormattedMessage as T,
+  Can,
+} from '@/components';
 import {
   InventoryAdjustmentAction,
   AbilitySubject,
-} from '../../../common/abilityOption';
+} from '@/constants/abilityOption';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Inventory adjustment detail actions bar.

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailGLEntriesPanel.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Card } from 'components';
-import { useTransactionsByReference } from 'hooks/query';
+import { Card } from '@/components';
+import { useTransactionsByReference } from '@/hooks/query';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
 import JournalEntriesTable, {

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import moment from 'moment';
-
 import intl from 'react-intl-universal';
-import { defaultTo } from 'lodash';
 import clsx from 'classnames';
 
-import { DetailsMenu, DetailItem, FormatDate } from 'components';
+import { defaultTo } from 'lodash';
+import { DetailsMenu, DetailItem, FormatDate } from '@/components';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
-import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
+import InventoryAdjustmentDrawerCls from '@/style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
 
 /**
  * Inventory detail header.

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTab.tsx

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

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { CommercialDocEntriesTable } from 'components';
+import { CommercialDocEntriesTable } from '@/components';
 import { useInventoryAdjustmentEntriesColumns } from './utils';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DrawerBody } from 'components';
 
-import InventoryAdjustmentDetail from './InventoryAdjustmentDetail';
+import { DrawerBody } from '@/components';
 import { InventoryAdjustmentDrawerProvider } from './InventoryAdjustmentDrawerProvider';
+import InventoryAdjustmentDetail from './InventoryAdjustmentDetail';
 
 /**
  * Inventory adjustment drawer content.

src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDrawerProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useInventoryAdjustment } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { useInventoryAdjustment } from '@/hooks/query';
 
 const InventoryAdjustmentDrawerContext = React.createContext();
 

src/containers/Drawers/InventoryAdjustmentDetailDrawer/index.tsx

@@ -1,9 +1,9 @@
 import React 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 InventoryAdjustmentDrawerContent = React.lazy(() =>
   import('./InventoryAdjustmentDrawerContent'),

src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { getColumnWidth } from 'utils';
-import { TextOverviewTooltipCell } from 'components';
+import { getColumnWidth } from '@/utils';
+import { TextOverviewTooltipCell } from '@/components';
 import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
 
 export const useInventoryAdjustmentEntriesColumns = () => {

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
+import { Tab } from '@blueprintjs/core';
 
-import { useAbilityContext } from 'hooks/utils';
-import { DrawerMainTabs } from 'components';
-import {
-  PaymentReceiveAction,
-  AbilitySubject,
-} from '../../../common/abilityOption';
+import { useAbilityContext } from '@/hooks/utils';
+import { DrawerMainTabs } from '@/components';
+import { PaymentReceiveAction, AbilitySubject } from '@/constants/abilityOption';
 import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
 import InvoiceGLEntriesTable from './InvoiceGLEntriesTable';
 import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.tsx

@@ -10,9 +10,9 @@ import {
 
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertsActions from '@/containers/Alert/withAlertActions';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 import {
   If,
@@ -20,14 +20,14 @@ import {
   Icon,
   DrawerActionsBar,
   FormattedMessage as T,
-} from 'components';
+} from '@/components';
 import {
   SaleInvoiceAction,
   PaymentReceiveAction,
   AbilitySubject,
-} from '../../../common/abilityOption';
+} from '../../../constants/abilityOption';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 import { BadDebtMenuItem } from './utils';
 
 /**

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 
 import InvoiceDetail from './InvoiceDetail';
 import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.tsx

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