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

src/containers/FinancialStatements/APAgingSummary/APAgingSummary.tsx

@@ -2,19 +2,18 @@ import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import { getDefaultAPAgingSummaryQuery } from './common';
-import { FinancialStatement } from 'components';
+import { FinancialStatement, DashboardPageContent } from '@/components';
 
 import APAgingSummaryHeader from './APAgingSummaryHeader';
 import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
-import { APAgingSummaryBody } from './APAgingSummaryBody';
 
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { APAgingSummaryBody } from './APAgingSummaryBody';
 import { APAgingSummaryProvider } from './APAgingSummaryProvider';
 import { APAgingSummarySheetLoadingBar } from './components';
 
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * A/P aging summary report.

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.tsx

@@ -9,18 +9,16 @@ import {
   Position,
 } from '@blueprintjs/core';
 
-import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
-
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { Icon } from 'components';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
-
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
+
 import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { saveInvoke, compose } from 'utils';
+import { saveInvoke, compose } from '@/utils';
 
 /**
  * AP Aging summary sheet - Actions bar.
@@ -40,17 +38,17 @@ function APAgingSummaryActionsBar({
 
   const handleFilterToggleClick = () => {
     toggleFilterDrawerDisplay();
-  }
+  };
 
   // handle recalculate report button.
-  const handleRecalculateReport = () => { 
+  const handleRecalculateReport = () => {
     refetch();
-  }
+  };
 
   // handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     saveInvoke(onNumberFormatSubmit, numberFormat);
-  }
+  };
 
   return (
     <DashboardActionsBar>
@@ -120,6 +118,6 @@ function APAgingSummaryActionsBar({
 export default compose(
   withAPAgingSummaryActions,
   withAPAgingSummary(({ APAgingSummaryFilterDrawer }) => ({
-    isFilterDrawerOpen: APAgingSummaryFilterDrawer
-  }))
+    isFilterDrawerOpen: APAgingSummaryFilterDrawer,
+  })),
 )(APAgingSummaryActionsBar);

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryBody.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import { FinancialReportBody } from '../FinancialReportPage';
 import APAgingSummaryTable from './APAgingSummaryTable';
-import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
-
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
-
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+
 /**
  * AP aging summary body.
  * @returns {JSX.Element}

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryGeneralProvider.tsx

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

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -1,20 +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 * as Yup from 'yup';
 import styled from 'styled-components';
+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 APAgingSummaryHeaderGeneral from './APAgingSummaryHeaderGeneral';
 import APAgingSummaryHeaderDimensions from './APAgingSummaryHeaderDimensions';
 
 import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
-import { transformToForm } from '../../../utils';
-import { compose } from 'utils';
+import { transformToForm, compose } from '@/utils';
 
 /**
  * AP Aging Summary Report - Drawer Header.

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.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 {
   APAgingSummaryHeaderDimensionsProvider,
   useAPAgingSummaryHeaderDimensonsContext,

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensionsProvider.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 APAgingSummaryHeaderDimensonsContext = React.createContext();

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx

@@ -15,7 +15,7 @@ import {
   Row,
   Col,
   FieldHint,
-} from 'components';
+} from '@/components';
 import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import { filterVendorsOptions } from './constants';
@@ -24,7 +24,7 @@ import {
   tansformDateValue,
   inputIntent,
   handleDateChange,
-} from 'utils';
+} from '@/utils';
 
 /**
  * AP Aging Summary - Drawer Header - General panel - Content.

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, createContext, useContext } from 'react';
 
 import FinancialReportPage from '../FinancialReportPage';
-import { useAPAgingSummaryReport } from '../../../hooks/query';
+import { useAPAgingSummaryReport } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const APAgingSummaryContext = createContext();

src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.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 { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { useAPAgingSummaryColumns } from './components';
 
-import { tableRowTypesToClassnames } from 'utils';
+import { tableRowTypesToClassnames } from '@/utils';
 
 /**
  * AP aging summary table sheet.

src/containers/FinancialStatements/APAgingSummary/common.tsx

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

src/containers/FinancialStatements/APAgingSummary/components.tsx

@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
+import { If, FormattedMessage as T } from '@/components';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
-import { getColumnWidth } from 'utils';
-import { FormattedMessage as T } from 'components';
-import { If } from 'components';
+import { getColumnWidth } from '@/utils';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**

src/containers/FinancialStatements/APAgingSummary/withAPAgingSummary.tsx

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

src/containers/FinancialStatements/APAgingSummary/withAPAgingSummaryActions.tsx

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

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) => 

src/containers/FinancialStatements/BalanceSheet/BalanceSheet.tsx

@@ -2,19 +2,17 @@ import React, { useEffect } from 'react';
 import moment from 'moment';
 
 import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
-import { FinancialStatement } from 'components';
+import { FinancialStatement, DashboardPageContent } from '@/components';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
 import { BalanceSheetProvider } from './BalanceSheetProvider';
 import { BalanceSheetBody } from './BalanceSheetBody';
+import { useBalanceSheetQuery } from './utils';
+import { compose } from '@/utils';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
 
-import { useBalanceSheetQuery } from './utils';
-import { compose } from 'utils';
-
 /**
  * Balance sheet.
  * @returns {React.JSX}

src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.tsx

@@ -8,17 +8,15 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
 
-import Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
-import { compose, saveInvoke } from 'utils';
+import { compose, saveInvoke } from '@/utils';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
-import { useBalanceSheetContext } from './BalanceSheetProvider';
 
 /**
  * Balance sheet - actions bar.
@@ -126,6 +124,8 @@ function BalanceSheetActionsBar({
 }
 
 export default compose(
-  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({ balanceSheetDrawerFilter })),
+  withBalanceSheet(({ balanceSheetDrawerFilter }) => ({
+    balanceSheetDrawerFilter,
+  })),
   withBalanceSheetActions,
 )(BalanceSheetActionsBar);

src/containers/FinancialStatements/BalanceSheet/BalanceSheetBody.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
 import BalanceSheetTable from './BalanceSheetTable';
-import { FinancialReportBody } from '../FinancialReportPage';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { FinancialReportBody } from '../FinancialReportPage';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
-import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
-import { compose } from 'utils';
+import { FinancialSheetSkeleton } from '@/components';
+import { compose } from '@/utils';
 
 /**
  * Balance sheet body JSX.

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import moment from 'moment';
-import { Formik, Form } from 'formik';
 import styled from 'styled-components';
+import moment from 'moment';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { Formik, Form } from 'formik';
 
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -14,7 +14,7 @@ import BalanceSheetHeaderComparisonPanal from './BalanceSheetHeaderComparisonPan
 import BalanceSheetHeaderDimensionsPanel from './BalanceSheetHeaderDimensionsPanel';
 import FinancialStatementHeader from '../../FinancialStatements/FinancialStatementHeader';
 
-import { compose, transformToForm } from 'utils';
+import { compose, transformToForm } from '@/utils';
 import {
   getBalanceSheetHeaderValidationSchema,
   getDefaultBalanceSheetQuery,

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderComparisonPanal.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-
+import styled from 'styled-components';
 import { FastField, Field } from 'formik';
 import { FormGroup, Checkbox } from '@blueprintjs/core';
-import styled from 'styled-components';
-
-import { Flex, FlexItem, FieldHint, FormattedMessage as T } from 'components';
+import { Flex, FlexItem, FieldHint, FormattedMessage as T } from '@/components';
 import {
   handlePreviousYearCheckBoxChange,
   handlePreviousYearChangeCheckboxChange,

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.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 {
   BalanceSheetHeaderDimensionsProvider,
   useBalanceSheetHeaderDimensionsPanelContext,

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.tsx

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

src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderGeneralPanal.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { Row, Col } from '../../../components';
+import { Row, Col } from '@/components';
 
-import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
-import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
+import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 
 /**

src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from 'react';
 
 import FinancialReportPage from '../FinancialReportPage';
-import { useBalanceSheet } from 'hooks/query';
+import { useBalanceSheet } from '@/hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const BalanceSheetContext = createContext();

src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import { ReportDataTable, FinancialSheet } from 'components';
-
+import { TableStyle } from '@/constants';
+import { ReportDataTable, FinancialSheet } from '@/components';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
-
-import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
 import { useBalanceSheetColumns } from './components';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
 
-import { TableStyle } from 'common';
 
 /**
  * Balance sheet table.

src/containers/FinancialStatements/BalanceSheet/components.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
 
-import { FormattedMessage as T, Icon, If } from 'components';
+import { FormattedMessage as T, Icon, If } from '@/components';
 
-import { useBalanceSheetContext } from './BalanceSheetProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
 import { FinancialComputeAlert } from '../FinancialReportPage';
 import { dynamicColumns } from './dynamicColumns';
 

src/containers/FinancialStatements/BalanceSheet/dynamicColumns.tsx

@@ -1,9 +1,9 @@
 import * as R from 'ramda';
 import { isEmpty } from 'lodash';
 
-import { Align } from 'common';
-import { CellTextSpan } from 'components/Datatable/Cells';
-import { getColumnWidth } from 'utils';
+import { Align } from '@/constants';
+import { CellTextSpan } from '@/components/Datatable/Cells';
+import { getColumnWidth } from '@/utils';
 
 const getTableCellValueAccessor = (index) => `cells[${index}].value`;
 

src/containers/FinancialStatements/BalanceSheet/utils.tsx

@@ -5,8 +5,8 @@ import * as Yup from 'yup';
 import { castArray } from 'lodash';
 import intl from 'react-intl-universal';
 
-import { transformToForm } from 'utils';
-import { useAppQueryString } from 'hooks';
+import { transformToForm } from '@/utils';
+import { useAppQueryString } from '@/hooks';
 
 /**
  * Retrieves the default balance sheet query.

src/containers/FinancialStatements/BalanceSheet/withBalanceSheet.tsx

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

src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.tsx

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

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.tsx

@@ -1,22 +1,21 @@
 import React, { useEffect } from 'react';
 import moment from 'moment';
 
-import { FinancialStatement } from 'components';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { FinancialStatement, DashboardPageContent } from '@/components';
+import { CashFlowStatementBody } from './CashFlowStatementBody';
+import { CashFlowStatementProvider } from './CashFlowStatementProvider';
 
 import CashFlowStatementHeader from './CashFlowStatementHeader';
 import CashFlowStatementActionsBar from './CashFlowStatementActionsBar';
-import { CashFlowStatementBody } from './CashFlowStatementBody';
 
 import withCashFlowStatementActions from './withCashFlowStatementActions';
-import { CashFlowStatementProvider } from './CashFlowStatementProvider';
 import {
   CashFlowStatementLoadingBar,
   CashFlowStatementAlerts,
 } from './components';
 
 import { useCashflowStatementQuery } from './utils';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Cash flow statement.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.tsx

@@ -8,18 +8,16 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, DashboardActionsBar } from '@/components';
 import classNames from 'classnames';
 
-import { Icon } from 'components';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
 import withCashFlowStatement from './withCashFlowStatement';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 
-import { compose, saveInvoke } from 'utils';
+import { compose, saveInvoke } from '@/utils';
 
 /**
  * Cash flow statement actions bar.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementBody.tsx

@@ -3,10 +3,10 @@ import * as R from 'ramda';
 
 import CashFlowStatementTable from './CashFlowStatementTable';
 import { FinancialReportBody } from '../FinancialReportPage';
-import { FinancialSheetSkeleton } from 'components/FinancialSheet';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
 
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 /**
  * Cashflow stement body.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.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 {
   CashFlowStatementDimensionsPanelProvider,
   useCashFlowStatementDimensionsPanelContext,

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.tsx

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

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementGeneralPanel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Row, Col } from '../../../components';
-import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import { Row, Col } from '@/components';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import FinancialStatementHeader from '../FinancialStatementHeader';
 import CashFlowStatementGeneralPanel from './CashFlowStatementGeneralPanel';
+import CashFlowStatementDimensionsPanel from './CashFlowStatementDimensionsPanel';
 
 import withCashFlowStatement from './withCashFlowStatement';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 
 import { getDefaultCashFlowSheetQuery } from './utils';
-import { compose, transformToForm } from 'utils';
-import CashFlowStatementDimensionsPanel from './CashFlowStatementDimensionsPanel';
+import { compose, transformToForm } from '@/utils';
 
 /**
  * Cash flow statement header.

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementProvider.tsx

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

src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.tsx

@@ -2,14 +2,13 @@ import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { TableStyle } from '@/constants';
+import { DataTable, FinancialSheet } from '@/components';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
 
 import { useCashFlowStatementColumns } from './components';
 import { useCashFlowStatementContext } from './CashFlowStatementProvider';
 
-import { TableStyle } from 'common';
-import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
-
 /**
  * Cash flow statement table.
  */

src/containers/FinancialStatements/CashFlowStatement/components.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button } from '@blueprintjs/core';
 
-import { Icon, If } from 'components';
-import { FormattedMessage as T } from 'components';
+import { Icon, If, FormattedMessage as T } from '@/components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
 import { dynamicColumns } from './dynamicColumns';

src/containers/FinancialStatements/CashFlowStatement/dynamicColumns.tsx

@@ -1,9 +1,9 @@
 import * as R from 'ramda';
 import intl from 'react-intl-universal';
 
-import { Align } from 'common';
-import { CellTextSpan } from 'components/Datatable/Cells';
-import { getColumnWidth } from 'utils';
+import { Align } from '@/constants';
+import { CellTextSpan } from '@/components/Datatable/Cells';
+import { getColumnWidth } from '@/utils';
 
 /**
  * Account name column mapper.

src/containers/FinancialStatements/CashFlowStatement/utils.tsx

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

src/containers/FinancialStatements/CashFlowStatement/withCashFlowStatement.tsx

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

src/containers/FinancialStatements/CashFlowStatement/withCashFlowStatementActions.tsx

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

src/containers/FinancialStatements/CustomersBalanceSummary/CustomerBalanceSummaryBody.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import * as R from 'ramda';
 
 import { FinancialReportBody } from '../FinancialReportPage';
-import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
-import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 /**
- * Customer balance summary body. 
+ * Customer balance summary body.
  * @returns {JSX.Element}
  */
 function CustomerBalanceSummaryBodyJSX({

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.tsx

@@ -2,18 +2,17 @@ import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 import * as R from 'ramda';
 
-import { FinancialStatement } from 'components';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { FinancialStatement, DashboardPageContent } from '@/components';
 
 import CustomersBalanceSummaryActionsBar from './CustomersBalanceSummaryActionsBar';
 import CustomersBalanceSummaryHeader from './CustomersBalanceSummaryHeader';
 
 import { CustomerBalanceSummaryBody } from './CustomerBalanceSummaryBody';
-import { CustomersBalanceLoadingBar } from './components';
 import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
+import { getDefaultCustomersBalanceQuery } from './utils';
+import { CustomersBalanceLoadingBar } from './components';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
 
-import { getDefaultCustomersBalanceQuery } from './utils';
 
 /**
  * Customers Balance summary.

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.tsx

@@ -8,17 +8,15 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { Icon, FormattedMessage as T, DashboardActionsBar } from '@/components';
 import classNames from 'classnames';
 
-import Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import withCustomersBalanceSummary from './withCustomersBalanceSummary';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
-import { compose, saveInvoke } from 'utils';
+import { compose, saveInvoke } from '@/utils';
 
 /**
  * customer balance summary action bar.
@@ -34,10 +32,8 @@ function CustomersBalanceSummaryActionsBar({
   //#withCustomersBalanceSummaryActions
   toggleCustomerBalanceFilterDrawer,
 }) {
-  const {
-    refetch,
-    isCustomersBalanceLoading,
-  } = useCustomersBalanceSummaryContext();
+  const { refetch, isCustomersBalanceLoading } =
+    useCustomersBalanceSummaryContext();
 
   // handle filter toggle click.
   const handleFilterToggleClick = () => {

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx

@@ -2,17 +2,22 @@ import React from 'react';
 import { FastField, Field } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { Classes, FormGroup, Position, Checkbox } from '@blueprintjs/core';
-import { ContactsMultiSelect, FormattedMessage as T } from 'components';
+import {
+  ContactsMultiSelect,
+  FormattedMessage as T,
+  Row,
+  Col,
+  FieldHint,
+} from '@/components';
 import classNames from 'classnames';
-import { Row, Col, FieldHint } from 'components';
-import { filterCustomersOptions } from '../constants';
 
 import {
   momentFormatter,
   tansformDateValue,
   inputIntent,
   handleDateChange,
-} from 'utils';
+} from '@/utils';
+import { filterCustomersOptions } from '../constants';
 import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralProvider.tsx

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

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import * as Yup from 'yup';
-import { Formik, Form } from 'formik';
-import moment from 'moment';
-import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 import styled from 'styled-components';
+import moment from 'moment';
+import { Formik, Form } from 'formik';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
 
-import { FormattedMessage as T } from 'components';
-
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import FinancialStatementHeader from '../FinancialStatementHeader';
 import withCustomersBalanceSummary from './withCustomersBalanceSummary';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
 import CustomersBalanceSummaryGeneralPanel from './CustomersBalanceSummaryGeneralPanel';
 
-import { compose, transformToForm } from 'utils';
+import { compose, transformToForm } from '@/utils';
 
 /**
  * Customers balance summary.

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryProvider.tsx

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

src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.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 { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 import { useCustomersSummaryColumns } from './components';
 
-import { TableStyle } from 'common';
-import { tableRowTypesToClassnames } from 'utils';
-
 /**
  * Customers balance summary table.
  */

src/containers/FinancialStatements/CustomersBalanceSummary/components.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
 
-import { If } from 'components';
+import { If } from '@/components';
+import { Align } from '@/constants';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProvider';
 
-import { Align } from 'common';
 
 /**
  * Retrieve customers balance summary columns.

src/containers/FinancialStatements/CustomersBalanceSummary/withCustomersBalanceSummary.tsx

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

src/containers/FinancialStatements/CustomersBalanceSummary/withCustomersBalanceSummaryActions.tsx

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

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.tsx

@@ -1,18 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
 
-import { FinancialStatement } from 'components';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { FinancialStatement, DashboardPageContent } from '@/components';
 
 import CustomersTransactionsHeader from './CustomersTransactionsHeader';
 import CustomersTransactionsActionsBar from './CustomersTransactionsActionsBar';
-import { CustomersTransactionsBody } from './CustomersTransactionsBody';
 
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 import { CustomersTransactionsLoadingBar } from './components';
+import { CustomersTransactionsBody } from './CustomersTransactionsBody';
 import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Customers transactions.

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.tsx

@@ -8,18 +8,16 @@ 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 Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import NumberFormatDropdown from 'components/NumberFormatDropdown';
+import NumberFormatDropdown from '@/components/NumberFormatDropdown';
 
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import withCustomersTransactions from './withCustomersTransactions';
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 
-import { compose, saveInvoke } from 'utils';
+import { compose, saveInvoke } from '@/utils';
 
 /**
  * Customers transactions actions bar.
@@ -35,10 +33,8 @@ function CustomersTransactionsActionsBar({
   //#withCustomersTransactionsActions
   toggleCustomersTransactionsFilterDrawer,
 }) {
-  const {
-    isCustomersTransactionsLoading,
-    CustomersTransactionsRefetch,
-  } = useCustomersTransactionsContext();
+  const { isCustomersTransactionsLoading, CustomersTransactionsRefetch } =
+    useCustomersTransactionsContext();
 
   // Handle filter toggle click.
   const handleFilterToggleClick = () => {

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsBody.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import * as R from 'ramda';
 
-import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
 import CustomersTransactionsTable from './CustomersTransactionsTable';
 import { FinancialReportBody } from '../FinancialReportPage';
-import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
 
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
 /**
- * Customers transactions body. 
+ * Customers transactions body.
  */
 function CustomersTransactionsBodyJSX({
   // #withCurrentOrganization

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 import moment from 'moment';
-import * as Yup from 'yup';
-import { Formik, Form } from 'formik';
 import styled from 'styled-components';
+import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { Formik, Form } from 'formik';
 
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import FinancialStatementHeader from '../FinancialStatementHeader';
 import CustomersTransactionsHeaderGeneralPanel from './CustomersTransactionsHeaderGeneralPanel';
 
 import withCustomersTransactions from './withCustomersTransactions';
 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
 
-import { compose, transformToForm } from 'utils';
+import { compose, transformToForm } from '@/utils';
 
 /**
  * Customers transactions header.

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanel.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 import { Field } from 'formik';
 import { Classes, FormGroup } from '@blueprintjs/core';
-import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
+import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import {
   Row,
   Col,
   ContactsMultiSelect,
   FormattedMessage as T,
-} from '../../../components';
+} from '@/components';
 import { filterCustomersOptions } from '../constants';
 
 import {

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeaderGeneralPanelProvider.tsx

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

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsProvider.tsx

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

src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.tsx

@@ -2,13 +2,13 @@ import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
 
-import { DataTable, FinancialSheet } from 'components';
+import { DataTable, FinancialSheet } from '@/components';
 
 import { useCustomersTransactionsColumns } from './components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 
-import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
-import { TableStyle } from 'common';
+import { defaultExpanderReducer, tableRowTypesToClassnames } from '@/utils';
+import { TableStyle } from '@/constants';
 
 /**
  * Customers transactions table.

src/containers/FinancialStatements/CustomersTransactions/components.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { If } from 'components';
+import { If } from '@/components';
+import { Align } from '@/constants';
+import { getColumnWidth } from '@/utils';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { getColumnWidth } from 'utils';
 
-import { Align } from 'common';
 
 /**
  * Retrieve customers transactions columns.

src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactions.tsx

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

src/containers/FinancialStatements/CustomersTransactions/withCustomersTransactionsActions.tsx

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

src/containers/FinancialStatements/FilterFinancialReports.tsx

@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash';
-import { useAbilityContext } from '../../hooks';
+import { useAbilityContext } from '@/hooks';
 
 function useFilterFinancialReports(financialSection) {
   const ability = useAbilityContext();

src/containers/FinancialStatements/FinancialLoadingBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MaterialProgressBar } from 'components';
+import { MaterialProgressBar } from '@/components';
 
 /**
  * Financnail progress bar.

src/containers/FinancialStatements/FinancialReportPage.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import { DashboardInsider } from 'components';
 import styled from 'styled-components';
-import { CLASSES } from 'common/classes';
+import { DashboardInsider } from '@/components';
+import { CLASSES } from '@/constants/classes';
 
 /**
  * Financial report page.

src/containers/FinancialStatements/FinancialReports.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { For } from 'components';
+import { For, DashboardInsider } from '@/components';
 import useFilterFinancialReports from './FilterFinancialReports';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
 import {
   financialReportMenus,
   SalesAndPurchasesReportMenus,
-} from 'config/financialReportsMenu';
+} from '@/constants/financialReportsMenu';
 
-import 'style/pages/FinancialStatements/FinancialSheets.scss';
+import '@/style/pages/FinancialStatements/FinancialSheets.scss';
 
 function FinancialReportsItem({ title, desc, link }) {
   return (

src/containers/FinancialStatements/FinancialStatementDateRange.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import intl from 'react-intl-universal';
+import moment from 'moment';
 import { FastField, ErrorMessage } from 'formik';
 import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core';
-import moment from 'moment';
-import { Row, Col, Hint } from 'components';
-import { momentFormatter, parseDateRangeQuery } from 'utils';
+import { Row, Col, Hint } from '@/components';
+import { momentFormatter, parseDateRangeQuery } from '@/utils';
 import { DateInput } from '@blueprintjs/datetime';
-import intl from 'react-intl-universal';
 import { dateRangeOptions } from './constants';
 
 

src/containers/FinancialStatements/FinancialStatementHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { Position, Drawer } from '@blueprintjs/core';
-import 'style/containers/FinancialStatements/DrawerHeader.scss';
+import '@/style/containers/FinancialStatements/DrawerHeader.scss';
 
 /**
  * Financial statement header.

src/containers/FinancialStatements/FinancialStatementsFilter.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FastField } from 'formik';
 import {
   PopoverInteractionKind,
   Tooltip,
@@ -6,14 +7,12 @@ import {
   Position,
   FormGroup,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import classNames from 'classnames';
-import { FastField } from 'formik';
-
-import { CLASSES } from 'common/classes';
-import { ListSelect, MODIFIER } from 'components';
+import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
+import { CLASSES } from '@/constants/classes';
 import { filterAccountsOptions } from './constants';
 
+import classNames from 'classnames';
+
 export default function FinancialStatementsFilter({
   items = filterAccountsOptions,
   label = <T id={'filter_accounts'} />,

src/containers/FinancialStatements/GeneralLedger/GLHeaderGeneralPaneProvider.tsx

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

src/containers/FinancialStatements/GeneralLedger/GeneralLedger.tsx

@@ -1,22 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import moment from 'moment';
 
-import { FinancialStatement } from 'components';
 import GeneralLedgerHeader from './GeneralLedgerHeader';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
+import { GeneralLedgerBody } from './GeneralLedgerBody';
+import { useGeneralLedgerQuery } from './common';
 import { GeneralLedgerProvider } from './GeneralLedgerProvider';
+import { FinancialStatement, DashboardPageContent } from '@/components';
+
 import {
   GeneralLedgerSheetAlerts,
   GeneralLedgerSheetLoadingBar,
 } from './components';
-import { GeneralLedgerBody } from './GeneralLedgerBody';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
-
-import { useGeneralLedgerQuery } from './common';
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * General Ledger (GL) sheet.

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.tsx

@@ -8,18 +8,15 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
-import Icon from 'components/Icon';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { DashboardActionsBar, FormattedMessage as T, Icon } from '@/components';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import { compose } from '@/utils';
 
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
-import { compose } from 'utils';
-import { useGeneralLedgerContext } from './GeneralLedgerProvider';
-
 /**
  * General ledger - Actions bar.
  */

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerBody.tsx

@@ -2,13 +2,14 @@ import React from 'react';
 import * as R from 'ramda';
 
 import GeneralLedgerTable from './GeneralLedgerTable';
-import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
-
-import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 
+import { FinancialSheetSkeleton } from '@/components/FinancialSheet';
 import { FinancialReportBody } from '../FinancialReportPage';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+
+
 /**
  * General ledger body JSX.
  */

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
 import moment from 'moment';
+import styled from 'styled-components';
 import * as Yup from 'yup';
 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 { getDefaultGeneralLedgerQuery } from './common';
+import { compose, transformToForm, saveInvoke } from '@/utils';
 
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import FinancialStatementHeader from '../FinancialStatementHeader';
 import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
 import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsPanel';
 
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
-import { getDefaultGeneralLedgerQuery } from './common';
-import { compose, transformToForm, saveInvoke } from 'utils';
-
 /**
  * Geenral Ledger (GL) - Header.
  */

src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.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 {
   GeneralLedgerHeaderDimensionsPanelProvider,
   useGeneralLedgerHeaderDimensionsContext,