feat: add payment trasnactions.

src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
 import ItemDetailHeader from './ItemDetailHeader';
 import { ItemPaymentTransactions } from './ItemPaymentTransactions';
-import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import { Card } from 'components';
 

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

@@ -1,76 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } from '../../../../components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import { useItemAssociatedBillTransactions } from 'hooks/query';
+import { useBillTransactionsColumns } from './components';
 
 /**
  * Bill payment transactions data table.
  */
 export default function BillPaymentTransactions() {
-  const columns = React.useMemo(
-    () => [
-      {
-        id: 'bill_date',
-        Header: intl.get('date'),
-        accessor: 'bill_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'bill_date',
-      },
-      {
-        id: 'bill_number',
-        Header: intl.get('bill_number'),
-        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
-        width: 100,
-        className: 'bill_number',
-      },
-      {
-        id: 'vendor',
-        Header: intl.get('vendor_name'),
-        accessor: 'vendor.display_name',
-        width: 180,
-        className: 'vendor',
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 90,
-        className: 'reference_no',
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Purchase',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-      {
-        id: 'status',
-        Header: intl.get('status'),
-        // accessor: (row) => statusAccessor(row),
-        width: 160,
-        className: 'status',
-      },
-    ],
-    [],
-  );
+  const columns = useBillTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isBillTransactionsLoading,
+    isFetching: isBillTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedBillTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isBillTransactionsLoading}
+          headerLoading={isBillTransactionsLoading}
+          progressBarLoading={isBillTransactionFetching}
         />
       </Card>
     </div>

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

@@ -1,71 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } 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 = React.useMemo(
-    () => [
-      {
-        id: 'estimate_date',
-        Header: intl.get('date'),
-        accessor: 'estimate_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'estimate_date',
-        textOverview: true,
-      },
-      {
-        id: 'estimate_number',
-        Header: intl.get('estimate_no'),
-        accessor: 'estimate_number',
-        width: 100,
-        className: 'estimate_number',
-        textOverview: true,
-      },
-      {
-        id: 'reference',
-        Header: intl.get('reference_no'),
-        accessor: 'reference',
-        width: 140,
-        className: 'reference',
-      },
-      {
-        id: 'customer_id',
-        Header: intl.get('customer_name'),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-    ],
-    [],
-  );
+  const columns = useEstimateTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch Estimate associated transactions.
+  const {
+    isLoading: isEstimateTransactionsLoading,
+    isFetching: isEstimateTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedEstimateTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isEstimateTransactionsLoading}
+          headerLoading={isEstimateTransactionsLoading}
+          progressBarLoading={isEstimateTransactionFetching}
         />
       </Card>
     </div>

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

@@ -1,81 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } 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 = React.useMemo(
-    () => [
-      {
-        id: 'invoice_date',
-        Header: intl.get('date'),
-        accessor: 'invoice_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'invoice_date',
-        textOverview: true,
-      },
-      {
-        id: 'invoice_no',
-        Header: intl.get('invoice_no__'),
-        accessor: 'invoice_no',
-        width: 240,
-        className: 'invoice_no',
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer_name'),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-        textOverview: true,
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-      {
-        id: 'status',
-        Header: intl.get('status'),
-        // accessor: (row) => statusAccessor(row),
-        width: 160,
-        className: 'status',
-      },
-    ],
-    [],
-  );
+  const columns = useInvoicePaymentTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch invoice associated transactions.
+  const {
+    isLoading: isInvoiceTransactionsLoading,
+    isFetching: isInvoiceTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedInvoiceTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isInvoiceTransactionsLoading}
+          headerLoading={isInvoiceTransactionsLoading}
+          progressBarLoading={isInvoiceTransactionFetching}
         />
       </Card>
     </div>

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

@@ -1,81 +1,35 @@
 import React from 'react';
-import intl from 'react-intl-universal';
-import clsx from 'classnames';
-import { CLASSES } from '../../../../common/classes';
-import { DataTable, Card, FormatDateCell } from '../../../../components';
+import { DataTable, Card } 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 = React.useMemo(
-    () => [
-      {
-        id: 'receipt_date',
-        Header: intl.get('date'),
-        accessor: 'receipt_date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'receipt_date',
-        textOverview: true,
-      },
-      {
-        id: 'receipt_number',
-        Header: intl.get('receipt_no'),
-        accessor: 'receipt_number',
-        width: 140,
-        className: 'receipt_number',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'customer',
-        Header: intl.get('customer_name'),
-        accessor: 'customer.display_name',
-        width: 140,
-        className: 'customer_id',
-        textOverview: true,
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 140,
-        className: 'reference_no',
-        textOverview: true,
-      },
-      {
-        id: 'status',
-        Header: intl.get('status'),
-        // accessor: StatusAccessor,
-        width: 140,
-        className: 'status',
-      },
-      {
-        id: 'qunatity',
-        Header: 'Quantity Sold',
-      },
-      {
-        id: 'rate',
-        Header: 'Rate',
-      },
-      {
-        id: 'total',
-        Header: intl.get('total'),
-      },
-    ],
-    [],
-  );
+  const columns = useReceiptTransactionsColumns();
+
+  const { itemId } = useItemDetailDrawerContext();
+
+  // Handle fetch receipts associated transactions.
+  const {
+    isLoading: isReceiptTransactionsLoading,
+    isFetching: isReceiptTransactionFetching,
+    data: paymentTransactions,
+  } = useItemAssociatedReceiptTransactions(itemId, {
+    enabled: !!itemId,
+  });
 
   return (
     <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}
-          data={[]}
-          // loading={}
-          // headerLoading={}
-          // progressBarLoading={}
+          data={paymentTransactions}
+          loading={isReceiptTransactionsLoading}
+          headerLoading={isReceiptTransactionsLoading}
+          progressBarLoading={isReceiptTransactionFetching}
         />
       </Card>
     </div>

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

@@ -0,0 +1,237 @@
+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: 140,
+        className: 'invoice_date',
+        textOverview: true,
+      },
+      {
+        id: 'invoice_no',
+        Header: intl.get('invoice_no__'),
+        accessor: 'invoice_number',
+        width: 120,
+        className: 'invoice_no',
+        textOverview: true,
+      },
+      // {
+      //   id: 'reference_number',
+      //   Header: intl.get('reference_no'),
+      //   accessor: 'reference_number',
+      //   width: 120,
+      //   className: 'reference_number',
+      //   textOverview: true,
+      // },
+      {
+        id: 'qunatity',
+        Header: '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: 140,
+        className: 'estimate_date',
+        textOverview: true,
+      },
+      {
+        id: 'estimate_number',
+        Header: intl.get('estimate_no'),
+        accessor: 'estimate_number',
+        width: 120,
+        className: 'estimate_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: '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: 110,
+        className: 'receipt_date',
+        textOverview: true,
+      },
+      {
+        id: 'receipt_number',
+        Header: intl.get('receipt_no'),
+        accessor: 'receip_number',
+        width: 140,
+        className: 'receipt_number',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 140,
+        className: 'reference_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: '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: 110,
+        className: 'bill_date',
+      },
+      {
+        id: 'bill_number',
+        Header: intl.get('bill_number'),
+        accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
+        width: 100,
+        className: 'bill_number',
+      },
+      {
+        id: 'reference_number',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_number',
+        width: 140,
+        className: 'reference_number',
+        textOverview: true,
+      },
+      {
+        id: 'qunatity',
+        Header: '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/index.js

@@ -6,11 +6,9 @@ import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataT
 import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
 import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
 
-import ItemSwitchMenuItem from './utils';
-
 export const ItemPaymentTransactions = () => {
   return (
-    <DrawerMainTabs>
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
       <Tab
         id={'invoice'}
         title={<T id={'invoice'} />}
@@ -18,7 +16,6 @@ export const ItemPaymentTransactions = () => {
       />
       <Tab
         id={'estiamte'}
-        title={'Estimate'}
         title={<T id={'estimate_'} />}
         panel={<EstimatePaymentTransactionsTable />}
       />

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import {
-  Popover,
-  Menu,
-  Position,
-  Button,
-  MenuItem,
-  Classes,
-  NavbarGroup,
-  PopoverInteractionKind,
-} from '@blueprintjs/core';
-import { Icon } from '../../../../components';
-import { curry } from 'lodash/fp';
-import { Select } from '@blueprintjs/select';
-
-function ItemSwitchMenuItem({ onChange }) {
-  const Transaction = [
-    { name: 'Invoice' },
-    { name: 'Estimate' },
-    { name: 'Bill' },
-    { name: 'Receipt' },
-  ];
-
-  const handleSwitchMenutItem = (item) => {
-    onChange && onChange(item);
-  };
-
-  const content = (
-    <Menu>
-      {Transaction.map((item) => (
-        <MenuItem
-          onClick={() => handleSwitchMenutItem(item.name)}
-          text={item.name}
-        />
-      ))}
-    </Menu>
-  );
-
-  return (
-    <Popover
-      content={content}
-      interactionKind={PopoverInteractionKind.CLICK}
-      position={Position.BOTTOM_LEFT}
-      modifiers={{
-        offset: { offset: '0, 4' },
-      }}
-      minimal={true}
-    >
-      <Button
-        minimal={true}
-        text="Select Service"
-        rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
-      />
-    </Popover>
-  );
-}
-
-export default ItemSwitchMenuItem;