feat: optimize table of item associated transactions.

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

@@ -64,6 +64,7 @@ export const useBillTransactionsColumns = () => {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
+        align: 'right',
         width: 100,
       },
       {

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

@@ -2,10 +2,12 @@ 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 { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
 import { useBillTransactionsColumns, ActionsMenu } from './components';
-
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
@@ -60,6 +62,8 @@ function BillPaymentTransactions({
         onEdit: handleEditPaymentTransactions,
         onDelete: handleDeletePaymentTransactons,
       }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
     />
   );
 }
@@ -67,3 +71,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
 )(BillPaymentTransactions);
+
+
+
+

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

@@ -66,6 +66,7 @@ export const useEstimateTransactionsColumns = () => {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
+        align: 'right',
         width: 100,
       },
       {

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

@@ -2,6 +2,9 @@ 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 { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedEstimateTransactions } from 'hooks/query';
 import { useEstimateTransactionsColumns, ActionsMenu } from './components';
@@ -61,6 +64,8 @@ function EstimatePaymentTransactions({
         onEdit: handleEditPaymentTransactions,
         onDelete: handleDeletePaymentTransactons,
       }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
     />
   );
 }

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

@@ -67,6 +67,7 @@ export const useInvoicePaymentTransactionsColumns = () => {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
+        align: 'right',
         width: 100,
       },
       {

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

@@ -1,12 +1,16 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+
 import { DataTable } from '../../../../../components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
+
 import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
 import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import {
   useInvoicePaymentTransactionsColumns,
   ActionsMenu,
 } from './components';
+import { TableStyle } from 'common';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -62,6 +66,8 @@ function InvoicePaymentTransactions({
         onEdit: handleEditPaymentTransactions,
         onDelete: handleDeletePaymentTransactons,
       }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
     />
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js

@@ -8,6 +8,7 @@ export default function ItemPaymentTransactionsContent({ tansactionType }) {
   const handleType = () => {
     switch (tansactionType) {
       case 'invoices':
+      default:
         return <InvoicePaymentTransactions />;
       case 'estimates':
         return <EstimatePaymentTransactions />;

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

@@ -67,6 +67,7 @@ export const useReceiptTransactionsColumns = () => {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
         accessor: 'quantity',
+        align: 'right',
         width: 100,
       },
       {

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

@@ -2,6 +2,9 @@ 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 { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedReceiptTransactions } from 'hooks/query';
 import { useReceiptTransactionsColumns, ActionsMenu } from './components';
@@ -61,6 +64,8 @@ function ReceiptPaymentTransactions({
         onEdit: handleEditPaymentTransactions,
         onDelete: handleDeletePaymentTransactons,
       }}
+      styleName={TableStyle.Constrant}
+      TableLoadingRenderer={TableSkeletonRows}
     />
   );
 }

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

@@ -1,11 +1,29 @@
 import React from 'react';
+import styled from 'styled-components';
+
 import { Card } from 'components';
 import { ItemManuTransaction } from './utils';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 
-export const ItemPaymentTransactions = () => {
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-  const { value, setValue } = useItemDetailDrawerContext();
+
+export function ItemPaymentTransactions() {
+  const { value } = useItemDetailDrawerContext();
+
+  return (
+    <Card>
+      <ItemTransactionsHeader />
+      <ItemPaymentTransactionContent tansactionType={value} />
+    </Card>
+  );
+}
+
+/**
+ * Item transactions header.
+ * @returns {React.JSX}
+ */
+export function ItemTransactionsHeader() {
+  const { setValue } = useItemDetailDrawerContext();
 
   // handle item change.
   const handleItemChange = (item) => {
@@ -13,10 +31,12 @@ export const ItemPaymentTransactions = () => {
   };
 
   return (
-    <Card>
+    <ItemTransactionsHeaderRoot>
       <ItemManuTransaction onChange={handleItemChange} />
-      <ItemPaymentTransactionContent tansactionType={value} />
+    </ItemTransactionsHeaderRoot>
-    </Card>
   );
-};
+}
 
+export const ItemTransactionsHeaderRoot = styled.div`
+  margin-bottom: 10px;
+`;

src/style/components/Drawers/ItemDrawer.scss

@@ -38,25 +38,4 @@
       }
     }
   }
-
-  .table {
-    margin-top: 8px;
-    .tbody,
-    .thead {
-      .tr .th {
-        padding: 8px 8px;
-        background-color: #fff;
-        font-size: 14px;
-        border-bottom: 1px solid #000;
-        border-top: 1px solid #000;
-      }
-    }
-    .tbody {
-      .tr .td {
-        border-bottom: 0;
-        padding-top: 0.4rem;
-        padding-bottom: 0.4rem;
-      }
-    }
-  }
 }