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

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();