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

src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.tsx

@@ -10,12 +10,12 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 import { useHistory } from 'react-router-dom';
 
-import { CLASSES } from 'common/classes';
+import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
-import { Icon, If } from 'components';
+import { Icon, If } from '@/components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 
 /**

src/containers/Expenses/ExpenseForm/ExpenseForm.schema.tsx

@@ -1,7 +1,7 @@
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-import { isBlank } from 'utils';
+import { DATATYPES_LENGTH } from '@/constants/dataTypes';
+import { isBlank } from '@/utils';
 
 const Schema = Yup.object().shape({
   beneficiary: Yup.string().label(intl.get('beneficiary')),

src/containers/Expenses/ExpenseForm/ExpenseForm.tsx

@@ -1,26 +1,25 @@
 import React, { useMemo } from 'react';
-import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { Intent } from '@blueprintjs/core';
 import { defaultTo, sumBy, isEmpty } from 'lodash';
 import { Formik, Form } from 'formik';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { CLASSES } from 'common/classes';
+import { CLASSES } from '@/constants/classes';
 
-import ExpenseFormHeader from './ExpenseFormHeader';
 import ExpenseFormBody from './ExpenseFormBody';
+import ExpenseFormHeader from './ExpenseFormHeader';
 import ExpenseFloatingFooter from './ExpenseFloatingActions';
 import ExpenseFormFooter from './ExpenseFormFooter';
 import ExpenseFormTopBar from './ExpenseFormTopBar';
 
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withMediaActions from 'containers/Media/withMediaActions';
-import withSettings from 'containers/Settings/withSettings';
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import withSettings from '@/containers/Settings/withSettings';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
-import AppToaster from 'components/AppToaster';
+import { AppToaster } from '@/components';
 import {
   CreateExpenseFormSchema,
   EditExpenseFormSchema,
@@ -31,7 +30,7 @@ import {
   transformToEditForm,
   transformFormValuesToRequest,
 } from './utils';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Expense form.
@@ -157,7 +156,6 @@ function ExpenseForm({
 
 export default compose(
   withDashboardActions,
-  withMediaActions,
   withSettings(({ expenseSettings }) => ({
     preferredPaymentAccount: parseInt(
       expenseSettings?.preferredPaymentAccount,

src/containers/Expenses/ExpenseForm/ExpenseFormBody.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import { CLASSES } from '@/constants/classes';
 import ExpenseFormEntriesField from './ExpenseFormEntriesField';
 
 export default function ExpenseFormBody() {

src/containers/Expenses/ExpenseForm/ExpenseFormEntriesTable.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { DataTableEditable } from 'components';
+import { DataTableEditable } from '@/components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 import { useExpenseFormTableColumns } from './components';
 import {
@@ -10,7 +10,7 @@ import {
   updateMinEntriesLines,
   updateAutoAddNewLine,
   updateRemoveLineByIndex,
-} from 'utils';
+} from '@/utils';
 
 /**
  * Expenses form entries.

src/containers/Expenses/ExpenseForm/ExpenseFormFooter.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import styled from 'styled-components';
 
-import { CLASSES } from 'common/classes';
-import { Row, Col, Paper } from 'components';
+import { CLASSES } from '@/constants/classes';
+import { Row, Col, Paper } from '@/components';
 import { ExpenseFormFooterLeft } from './ExpenseFormFooterLeft';
 import { ExpenseFormFooterRight } from './ExpenseFormFooterRight';
 

src/containers/Expenses/ExpenseForm/ExpenseFormFooterLeft.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FFormGroup, FEditableText, FormattedMessage as T } from 'components';
+import { FFormGroup, FEditableText, FormattedMessage as T } from '@/components';
 
 export function ExpenseFormFooterLeft() {
   return (

src/containers/Expenses/ExpenseForm/ExpenseFormFooterRight.tsx

@@ -6,7 +6,7 @@ import {
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
-} from 'components';
+} from '@/components';
 import { useExpensesTotals } from './utils';
 
 export function ExpenseFormFooterRight() {

src/containers/Expenses/ExpenseForm/ExpenseFormHeader.tsx

@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
 
-import { CLASSES } from 'common/classes';
 
 import ExpenseFormHeaderFields from './ExpenseFormHeaderFields';
-import { PageFormBigNumber } from 'components';
+import { PageFormBigNumber } from '@/components';
 
 // Expense form header.
 export default function ExpenseFormHeader() {

src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
-import {
-  InputGroup,
-  FormGroup,
-  ControlGroup,
-  Position,
-  Classes,
-} from '@blueprintjs/core';
+import { InputGroup, FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import { CLASSES } from '@/constants/classes';
 import {
   momentFormatter,
   tansformDateValue,
   inputIntent,
   handleDateChange,
-} from 'utils';
+} from '@/utils';
 import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
 import {
   CurrencySelectList,
@@ -24,9 +18,9 @@ import {
   AccountsSelectList,
   FieldRequiredHint,
   Hint,
-} from 'components';
+} from '@/components';
 import { ExpensesExchangeRateInputField } from './components';
-import { ACCOUNT_PARENT_TYPE } from 'common/accountTypes';
+import { ACCOUNT_PARENT_TYPE } from '@/constants/accountTypes';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 
 /**

src/containers/Expenses/ExpenseForm/ExpenseFormPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import 'style/pages/Expense/PageForm.scss';
+import '@/style/pages/Expense/PageForm.scss';
 
 import ExpenseForm from './ExpenseForm';
 import { ExpenseFormPageProvider } from './ExpenseFormPageProvider';

src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+import { DashboardInsider } from '@/components/Dashboard';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 import {
   useCurrencies,
   useCustomers,
@@ -10,7 +10,7 @@ import {
   useBranches,
   useCreateExpense,
   useEditExpense,
-} from 'hooks/query';
+} from '@/hooks/query';
 
 const ExpenseFormPageContext = createContext();
 

src/containers/Expenses/ExpenseForm/ExpenseFormTopBar.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Button, Alignment, NavbarGroup, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
-import { useFeatureCan } from 'hooks/state';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 import {
   Icon,
   BranchSelect,
   FeatureCan,
   FormTopbar,
   DetailsBarSkeletonBase,
-} from 'components';
+} from '@/components';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
-import { Features } from 'common';
 
 /**
  * Expenses form topbar.

src/containers/Expenses/ExpenseForm/components.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { Button, Menu, MenuItem } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
-import intl from 'react-intl-universal';
 import { useFormikContext } from 'formik';
 
 import {
@@ -9,16 +9,16 @@ import {
   Hint,
   ExchangeRateInputGroup,
   FormattedMessage as T,
-} from 'components';
+} from '@/components';
 import {
   InputGroupCell,
   MoneyFieldCell,
   AccountsListFieldCell,
   CheckBoxFieldCell,
-} from 'components/DataTableCells';
-import { CellType, Align } from 'common';
+} from '@/components/DataTableCells';
+import { CellType, Align } from '@/constants';
 
-import { useCurrentOrganization } from 'hooks/state';
+import { useCurrentOrganization } from '@/hooks/state';
 import { useExpensesIsForeign } from './utils';
 
 /**

src/containers/Expenses/ExpenseForm/utils.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { AppToaster } from 'components';
+import * as R from 'ramda';
+import intl from 'react-intl-universal';
+import moment from 'moment';
+import { AppToaster } from '@/components';
 import { Intent } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import moment from 'moment';
-import intl from 'react-intl-universal';
-import * as R from 'ramda';
 import { first, sumBy } from 'lodash';
 import { useExpenseFormContext } from './ExpenseFormPageProvider';
 
@@ -15,8 +15,8 @@ import {
   ensureEntriesHasEmptyLine,
   orderingLinesIndexes,
   formattedAmount,
-} from 'utils';
-import { useCurrentOrganization } from 'hooks/state';
+} from '@/utils';
+import { useCurrentOrganization } from '@/hooks/state';
 
 const ERROR = {
   EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',