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

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
-import { FinancialStatement } from 'components';
 
 import ARAgingSummaryHeader from './ARAgingSummaryHeader';
 import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import { FinancialStatement, DashboardPageContent } from '@/components';
 import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
 import { ARAgingSummarySheetLoadingBar } from './components';
 import { ARAgingSummaryBody } from './ARAgingSummaryBody';
@@ -13,7 +13,7 @@ import { ARAgingSummaryBody } from './ARAgingSummaryBody';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { getDefaultARAgingSummaryQuery } from './common';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * A/R aging summary report.

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.tsx

@@ -8,19 +8,17 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
 import classNames from 'classnames';
 
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import Icon from 'components/Icon';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
+import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 import withARAgingSummary from './withARAgingSummary';
 
-import { compose } from 'utils';
-import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
+import { compose } from '@/utils';
 
 /**
  * A/R Aging summary sheet - Actions bar.
@@ -123,5 +121,5 @@ export default compose(
   withARAgingSummaryActions,
   withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
     isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
-  }))
+  })),
 )(ARAgingSummaryActionsBar);

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryBody.tsx

@@ -3,11 +3,11 @@ import * as R from 'ramda';
 
 import ARAgingSummaryTable from './ARAgingSummaryTable';
 import { FinancialReportBody } from '../FinancialReportPage';
-import { FinancialSheetSkeleton } from '../../../components';
-
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
+import { FinancialSheetSkeleton } from '@/components';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
 /**
  * A/R Aging summary body.
  * @returns {JSX.Element}

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryGeneralProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import { useCustomers } from 'hooks/query';
+import { useCustomers } from '@/hooks/query';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
 
 const ARAgingSummaryGeneralContext = createContext();

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { FormattedMessage as T } from 'components';
-import { Formik, Form } from 'formik';
-import * as Yup from 'yup';
-import moment from 'moment';
-import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
+import moment from 'moment';
+import * as Yup from 'yup';
+import { FormattedMessage as T } from '@/components';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
 import ARAgingSummaryHeaderGeneral from './ARAgingSummaryHeaderGeneral';
+import ARAgingSummaryHeaderDimensions from './ARAgingSummaryHeaderDimensions';
 
 import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
-import { compose, transformToForm } from 'utils';
-import ARAgingSummaryHeaderDimensions from './ARAgingSummaryHeaderDimensions';
+import { compose, transformToForm } from '@/utils';
 
 /**
  * AR Aging Summary Report - Drawer Header.

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, Row, Col } from 'components';
+import { BranchMultiSelect, Row, Col } from '@/components';
 import {
   ARAgingSummaryHeaderDimensionsProvider,
   useARAgingSummaryHeaderDimensonsContext,

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensionsProvider.tsx

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

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx

@@ -17,8 +17,8 @@ import {
   Row,
   Col,
   FieldHint,
-} from 'components';
-import { momentFormatter } from 'utils';
+} from '@/components';
+import { momentFormatter } from '@/utils';
 import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
 import { filterCustomersOptions } from './constants';
 

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, createContext, useContext } from 'react';
 import FinancialReportPage from '../FinancialReportPage';
-import { useARAgingSummaryReport, useCustomers } from 'hooks/query';
+import { useARAgingSummaryReport } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const ARAgingSummaryContext = createContext();

src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.tsx

@@ -2,13 +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 'common';
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { useARAgingSummaryColumns } from './components';
 
-import { tableRowTypesToClassnames } from 'utils';
+import { tableRowTypesToClassnames } from '@/utils';
 
 /**
  * AR aging summary table sheet.

src/containers/FinancialStatements/ARAgingSummary/common.tsx

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { transformToCamelCase, flatObject } from 'utils';
+import { transformToCamelCase, flatObject } from '@/utils';
 
 export const transfromFilterFormToQuery = (form) => {
   return flatObject(transformToCamelCase(form));

src/containers/FinancialStatements/ARAgingSummary/components.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import intl from 'react-intl-universal';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
-import { If, FormattedMessage as T } from 'components';
+import { If, FormattedMessage as T } from '@/components';
+import { getColumnWidth } from '@/utils';
+import { Align } from '@/constants';
 
-import { getColumnWidth } from 'utils';
-import { Align } from 'common';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**

src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.tsx

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

src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.tsx

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