feat: add contextMenu in item transactions.

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve bill transactions associated with item table columns.
+ */
+export const useBillTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_bill_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor'),
+        accessor: 'vendor_display_name',
+        width: 140,
+        className: 'vendor',
+        textOverview: true,
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DataTable } from '../../../../components';
+import { DataTable } from '../../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
-import { useBillTransactionsColumns } from './components';
+import { useBillTransactionsColumns, ActionsMenu } from './components';
 
 /**
  * Bill payment transactions data table.
@@ -28,6 +28,7 @@ export default function BillPaymentTransactions() {
       loading={isBillTransactionsLoading}
       headerLoading={isBillTransactionsLoading}
       progressBarLoading={isBillTransactionFetching}
+      ContextMenu={ActionsMenu}
     />
   );
 }

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve estimate transactions associated with item table columns.
+ */
+export const useEstimateTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'estimate_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_estimate_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 120,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedEstimateTransactions } from 'hooks/query';
+import { useEstimateTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Esimtate payment transactions.
+ */
+function EstimatePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useEstimateTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isEstimateTransactionsLoading,
+    isFetching: isEstimateTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedEstimateTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ estimate_id }) => {
+    openAlert('estimate-delete', {
+      estimateId: estimate_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ estimate_id }) => {
+    history.push(`/estimates/${estimate_id}/edit`);
+    closeDrawer('item-detail-drawer');
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isEstimateTransactionsLoading}
+      headerLoading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentTransactions,
+        onDelete: handleDeletePaymentTransactons,
+      }}
+    />
+  );
+}
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(EstimatePaymentTransactions);

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataTable } from '../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useItemAssociatedEstimateTransactions } from 'hooks/query';
-import { useEstimateTransactionsColumns } from './components';
-
-/**
- * Esimtate payment transactions datatable.
- */
-export default function EstimatePaymentTransactions() {
-  const columns = useEstimateTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch Estimate associated transactions.
-  const {
-    isLoading: isEstimateTransactionsLoading,
-    isFetching: isEstimateTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedEstimateTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <DataTable
-      columns={columns}
-      data={paymentTransactions}
-      loading={isEstimateTransactionsLoading}
-      headerLoading={isEstimateTransactionsLoading}
-      progressBarLoading={isEstimateTransactionFetching}
-    />
-  );
-}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell ,Icon} from '../../../../../components';
+import { safeCallback } from 'utils';
+
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve invoice payment transactions associated with item table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'invoice_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_invoice_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_number',
+        width: 120,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { DataTable } from '../../../../../components';
+import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Invoice payment transactions.
+ */
+function InvoicePaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch invoice associated transactions.
+  const {
+    isLoading: isInvoiceTransactionsLoading,
+    isFetching: isInvoiceTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedInvoiceTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isInvoiceTransactionsLoading}
+      headerLoading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
+      ContextMenu={ActionsMenu}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactions);

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataTable } from '../../../../components';
-import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useInvoicePaymentTransactionsColumns } from './components';
-
-/**
- * Invoice payment transactions datatable.
- */
-export default function InvoicePaymentTransactionsTable() {
-  const columns = useInvoicePaymentTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch invoice associated transactions.
-  const {
-    isLoading: isInvoiceTransactionsLoading,
-    isFetching: isInvoiceTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedInvoiceTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <DataTable
-      columns={columns}
-      data={paymentTransactions}
-      loading={isInvoiceTransactionsLoading}
-      headerLoading={isInvoiceTransactionsLoading}
-      progressBarLoading={isInvoiceTransactionFetching}
-    />
-  );
-}

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

@@ -1,20 +1,20 @@
 import React from 'react';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
+import InvoicePaymentTransactions from './InvoicePaymentTransactions';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
+import EstimatePaymentTransactions from './EstimatePaymentTransactions';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
+import ReceiptPaymentTransactions from './ReceiptPaymentTransactions';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
+import BillPaymentTransactions from './BillPaymentTransactions';
 
 export default function ItemPaymentTransactionsContent({ tansactionType }) {
   const handleType = () => {
     switch (tansactionType) {
       case 'invoices':
-        return <InvoicePaymentTransactionsTable />;
+        return <InvoicePaymentTransactions />;
       case 'estimates':
-        return <EstimatePaymentTransactionsTable />;
+        return <EstimatePaymentTransactions />;
       case 'receipts':
-        return <ReceiptPaymentTransactionsTable />;
+        return <ReceiptPaymentTransactions />;
       case 'bills':
-        return <BillPaymentTransactionsTable />;
+        return <BillPaymentTransactions />;
     }
   };
   return handleType();

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../../common/classes';
+import { FormatDateCell, Icon } from '../../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Retrieve receipt transactions associated with item table columns.
+ */
+export const useReceiptTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'receipt_date',
+        Header: intl.get('date'),
+        accessor: 'formatted_receipt_date',
+        Cell: FormatDateCell,
+        width: 120,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receip_number',
+        width: 120,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: intl.get('item.drawer_quantity_sold'),
+        accessor: 'quantity',
+        width: 100,
+      },
+      {
+        id: 'rate',
+        Header: 'Rate',
+        accessor: 'formatted_rate',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('total'),
+        accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { DataTable } from '../../../../../components';
+import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
+import { useItemAssociatedReceiptTransactions } from 'hooks/query';
+import { useReceiptTransactionsColumns, ActionsMenu } from './components';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Receipt payment transactions.
+ */
+function ReceiptPaymentTransactions({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
+  const columns = useReceiptTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch receipts associated transactions.
+  const {
+    isLoading: isReceiptTransactionsLoading,
+    isFetching: isReceiptTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedReceiptTransactions(itemId, {
+    enabled: !!itemId,
+  });
+
+  return (
+    <DataTable
+      columns={columns}
+      data={paymentTransactions}
+      loading={isReceiptTransactionsLoading}
+      headerLoading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
+      ContextMenu={ActionsMenu}
+    />
+  );
+}
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(ReceiptPaymentTransactions);

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { DataTable } from '../../../../components';
-import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import { useItemAssociatedReceiptTransactions } from 'hooks/query';
-import { useReceiptTransactionsColumns } from './components';
-
-/**
- * Receipt payment transactions datatable.
- */
-export default function ReceiptPaymentTransactions() {
-  const columns = useReceiptTransactionsColumns();
-
-  const { itemId } = useItemDetailDrawerContext();
-
-  // Handle fetch receipts associated transactions.
-  const {
-    isLoading: isReceiptTransactionsLoading,
-    isFetching: isReceiptTransactionFetching,
-    data: paymentTransactions,
-  } = useItemAssociatedReceiptTransactions(itemId, {
-    enabled: !!itemId,
-  });
-
-  return (
-    <DataTable
-      columns={columns}
-      data={paymentTransactions}
-      loading={isReceiptTransactionsLoading}
-      headerLoading={isReceiptTransactionsLoading}
-      progressBarLoading={isReceiptTransactionFetching}
-    />
-  );
-}

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

@@ -1,245 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell } from '../../../../components';
-
-/**
- * Retrieve invoice payment transactions associated with item table columns.
- */
-export const useInvoicePaymentTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'invoice_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_invoice_date',
-        Cell: FormatDateCell,
-        width: 120,
-        className: 'invoice_date',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer'),
-        accessor: 'customer_display_name',
-        width: 140,
-        className: 'customer',
-        textOverview: true,
-      },
-      {
-        id: 'invoice_no',
-        Header: intl.get('invoice_no__'),
-        accessor: 'invoice_number',
-        width: 120,
-        className: 'invoice_no',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_quantity_sold'),
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
-
-/**
- * Retrieve estimate transactions associated with item table columns.
- */
-export const useEstimateTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'estimate_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_estimate_date',
-        Cell: FormatDateCell,
-        width: 120,
-        className: 'estimate_date',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer'),
-        accessor: 'customer_display_name',
-        width: 140,
-        className: 'customer',
-        textOverview: true,
-      },
-      {
-        id: 'estimate_number',
-        Header: intl.get('estimate_no'),
-        accessor: 'estimate_number',
-        width: 120,
-        className: 'estimate_number',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_quantity_sold'),
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
-
-/**
- * Retrieve receipt transactions associated with item table columns.
- */
-export const useReceiptTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'receipt_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_receipt_date',
-        Cell: FormatDateCell,
-        width: 120,
-        className: 'receipt_date',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer'),
-        accessor: 'customer_display_name',
-        width: 140,
-        className: 'customer',
-        textOverview: true,
-      },
-      {
-        id: 'receipt_number',
-        Header: intl.get('receipt_no'),
-        accessor: 'receip_number',
-        width: 120,
-        className: 'receipt_number',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_quantity_sold'),
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};
-
-/**
- * Retrieve bill transactions associated with item table columns.
- */
-export const useBillTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'bill_date',
-        Header: intl.get('date'),
-        accessor: 'formatted_bill_date',
-        Cell: FormatDateCell,
-        width: 120,
-        className: 'bill_date',
-      },
-      {
-        id: 'vendor',
-        Header: intl.get('vendor'),
-        accessor: 'vendor_display_name',
-        width: 140,
-        className: 'vendor',
-        textOverview: true,
-      },
-      {
-        id: 'bill_number',
-        Header: intl.get('bill_number'),
-        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
-        width: 100,
-        className: 'bill_number',
-      },
-      {
-        id: 'qunatity',
-        Header: intl.get('item.drawer_quantity_sold'),
-        accessor: 'quantity',
-        width: 100,
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-        accessor: 'formatted_rate',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('total'),
-        accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};

src/hooks/query/bills.js

@@ -30,6 +30,9 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
 };
 
 /**

src/hooks/query/estimates.js

@@ -9,6 +9,9 @@ import t from './types';
 const commonInvalidateQueries = (queryClient) => {
   // Invalidate estimates.
   queryClient.invalidateQueries(t.SALE_ESTIMATES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES);
 };
 
 /**

src/hooks/query/invoices.js

@@ -31,6 +31,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate reconcile.
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
   queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
+
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES);
 };
 
 /**

src/hooks/query/receipts.js

@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
   queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 
+  // Invalidate
+  queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS);
+
   // Invalidate the settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
 };