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

src/containers/Drawers/ItemDetailDrawer/ItemDetailActionsBar.tsx

@@ -7,17 +7,21 @@ import {
   NavbarDivider,
   Intent,
 } from '@blueprintjs/core';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
-import { ItemAction, AbilitySubject } from '../../../common/abilityOption';
+import { ItemAction, AbilitySubject } from '@/constants/abilityOption';
 
-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, Can } from 'components';
+import {
+  DashboardActionsBar,
+  Icon,
+  FormattedMessage as T,
+  Can,
+} from '@/components';
 
-import { compose } from 'utils';
+import { compose } from '@/utils';
 
 /**
  * Item action-bar of readonly details drawer.

src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import 'style/components/Drawers/ItemDrawer.scss';
+import '@/style/components/Drawers/ItemDrawer.scss';
 
-import { DrawerBody } from 'components';
+import { DrawerBody } from '@/components';
 import ItemContentDetails from './ItemContentDetails';
 import { ItemDetailDrawerProvider } from './ItemDetailDrawerProvider';
 

src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DrawerHeaderContent, DrawerLoading } from 'components';
-import { useItem } from 'hooks/query';
+import { DrawerHeaderContent, DrawerLoading } from '@/components';
+import { useItem } from '@/hooks/query';
 import { inactiveStatus } from './utlis';
 
 const ItemDetailDrawerContext = React.createContext();

src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { defaultTo } from 'lodash';
 import classNames from 'classnames';
+import { defaultTo } from 'lodash';
 
-import { If, DetailsMenu, DetailItem, Card } from 'components';
+import { If, DetailsMenu, DetailItem, Card } from '@/components';
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
 
 /**
@@ -34,7 +34,10 @@ export default function ItemDetailHeader() {
         </DetailsMenu>
 
         <DetailsMenu direction={'horizantal'}>
-          <DetailItem label={intl.get('item_type')} children={item.type_formatted} />
+          <DetailItem
+            label={intl.get('item_type')}
+            children={item.type_formatted}
+          />
           <DetailItem
             label={intl.get('item_code')}
             children={defaultTo(item.code, '-')}

src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
 
-import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { DrawerMainTabs, FormattedMessage as T } from '@/components';
 import { ItemPaymentTransactions } from './ItemPaymentTransactions';
 import ItemDetailHeader from './ItemDetailHeader';
 import WarehousesLocationsTable from './WarehousesLocations';
 
-import { Features } from 'common';
-import { useFeatureCan } from 'hooks/state';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 
 export default function ItemDetailTab() {
   const { featureCan } = useFeatureCan();

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import clsx from 'classnames';
 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 {
-  BillAction,
-  AbilitySubject,
-} from '../../../../../common/abilityOption';
+import { CLASSES } from '@/constants/classes';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { safeCallback } from '@/utils';
+import { BillAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Table actions menu.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { DataTable } from '../../../../../components';
-import { TableStyle } from 'common';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
+import { DataTable, TableSkeletonRows } from '@/components';
+import { TableStyle } from '@/constants';
 
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
-import { useItemAssociatedBillTransactions } from 'hooks/query';
+import { useItemAssociatedBillTransactions } from '@/hooks/query';
 import { useBillTransactionsColumns, ActionsMenu } from './components';
-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 data table.
@@ -72,7 +71,3 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
 )(BillPaymentTransactions);
-
-
-
-

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.tsx

@@ -3,13 +3,10 @@ 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 {
-  SaleEstimateAction,
-  AbilitySubject,
-} from '../../../../../common/abilityOption';
+import { safeCallback } from '@/utils';
+import { CLASSES } from '@/constants/classes';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { SaleEstimateAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Table actions menu.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { DataTable } from '../../../../../components';
-import { TableStyle } from 'common';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import { DataTable, TableSkeletonRows } from '@/components';
+import { TableStyle } from '@/constants';
 
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
-import { useItemAssociatedEstimateTransactions } from 'hooks/query';
+import { useItemAssociatedEstimateTransactions } from '@/hooks/query';
 import { useEstimateTransactionsColumns, ActionsMenu } from './components';
 
-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';
 
 /**
  * Esimtate payment transactions.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.tsx

@@ -3,13 +3,10 @@ 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 {
-  SaleInvoiceAction,
-  AbilitySubject,
-} from '../../../../../common/abilityOption';
+import { CLASSES } from '@/constants/classes';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { safeCallback } from '@/utils';
+import { SaleInvoiceAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Table actions menu.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { DataTable } from '../../../../../components';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
+import { DataTable, TableSkeletonRows } from '@/components';
 
-import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
+import { useItemAssociatedInvoiceTransactions } from '@/hooks/query';
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import {
   useInvoicePaymentTransactionsColumns,
   ActionsMenu,
 } from './components';
-import { TableStyle } from 'common';
+import { TableStyle } from '@/constants';
 
-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';
 
 /**
  * Invoice payment transactions.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.tsx

@@ -3,13 +3,10 @@ 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 {
-  SaleReceiptAction,
-  AbilitySubject,
-} from '../../../../../common/abilityOption';
+import { safeCallback } from '@/utils';
+import { CLASSES } from '@/constants/classes';
+import { Can, FormatDateCell, Icon } from '@/components';
+import { SaleReceiptAction, AbilitySubject } from '@/constants/abilityOption';
 
 /**
  * Table actions menu.

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { DataTable } from '../../../../../components';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
-import { TableStyle } from 'common';
-
+import { TableStyle } from '@/constants';
+import { DataTable, TableSkeletonRows } from '@/components';
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
-import { useItemAssociatedReceiptTransactions } from 'hooks/query';
+import { useItemAssociatedReceiptTransactions } from '@/hooks/query';
 import { useReceiptTransactionsColumns, ActionsMenu } from './components';
 
-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';
 
 /**
  * Receipt payment transactions.
@@ -38,20 +36,20 @@ function ReceiptPaymentTransactions({
   } = useItemAssociatedReceiptTransactions(itemId, {
     enabled: !!itemId,
   });
-  
-    // Handles delete payment transactions.
-    const handleDeletePaymentTransactons = ({ receipt_id }) => {
-      openAlert('receipt-delete', {
-        receiptId: receipt_id,
-      });
-    };
-  
-    // Handles edit payment transactions.
-    const handleEditPaymentTransactions = ({ receipt_id }) => {
-      history.push(`/receipts/${receipt_id}/edit`);
-      closeDrawer('item-detail-drawer');
-    };
-  
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ receipt_id }) => {
+    openAlert('receipt-delete', {
+      receiptId: receipt_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ receipt_id }) => {
+    history.push(`/receipts/${receipt_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+
   return (
     <DataTable
       columns={columns}

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Card } from 'components';
+import { Card } from '@/components';
 import { ItemManuTransaction } from './utils';
 import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 import {
   Button,
   MenuItem,
@@ -7,10 +8,9 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
-import { FormattedMessage as T } from 'components';
+import { FormattedMessage as T } from '@/components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useGetItemPaymentTransactionsMenu } from '../../../../common/itemPaymentTranactionsOption';
+import { useGetItemPaymentTransactionsMenu } from '@/constants/itemPaymentTranactionsOption';
 
 export const ItemManuTransaction = ({ onChange }) => {
   const { value, setValue } = useItemDetailDrawerContext();

src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/components.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatNumberCell, FormattedMessage as T } from '../../../../components';
-
+import { FormatNumberCell, FormattedMessage as T } from '@/components';
 
 /**
  * Warehouse locations columns

src/containers/Drawers/ItemDetailDrawer/WarehousesLocations/index.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { DataTable, CommercialDocEntriesTable, Card } from 'components';
-import { TableStyle } from '../../../../common';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import { TableStyle } from '@/constants';
+import { DataTable, TableSkeletonRows, Card } from '@/components';
 
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useWarehouseLocationsColumns } from './components';
-import { useItemWarehouseLocation } from 'hooks/query';
+import { useItemWarehouseLocation } from '@/hooks/query';
 
 /**
  * Warehouses locations table columns.

src/containers/Drawers/ItemDetailDrawer/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 ItemDetailDrawerContent = React.lazy(() =>
   import('./ItemDetailDrawerContent'),

src/containers/Drawers/ItemDetailDrawer/utlis.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Intent, Tag } from '@blueprintjs/core';
-import { Choose, FormattedMessage as T } from '../../../components';
+import { Choose, FormattedMessage as T } from '@/components';
 
 /**
  * items inactive status.