feat: item payment transactions.

src/common/itemPaymentTranactionsOption.js

@@ -0,0 +1,8 @@
+import intl from 'react-intl-universal';
+
+export default [
+  { name: 'invoices', label: intl.get('invoices') },
+  { name: 'estimates', label: intl.get('estimates') },
+  { name: 'receipts', label: intl.get('receipts') },
+  { name: 'bills', label: intl.get('bills') },
+];

src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js

@@ -1,10 +1,7 @@
 import React from 'react';
 
+import ItemDetailTab from './ItemDetailTab';
 import ItemDetailActionsBar from './ItemDetailActionsBar';
-import ItemDetailHeader from './ItemDetailHeader';
-import { ItemPaymentTransactions } from './ItemPaymentTransactions';
-
-import { Card } from 'components';
 
 /**
  * Item detail.
@@ -13,10 +10,7 @@ export default function ItemDetail() {
   return (
     <div className="item-drawer">
       <ItemDetailActionsBar />
-      <ItemPaymentTransactions /> 
+      <ItemDetailTab />
-      <Card>
-        <ItemDetailHeader />
-      </Card>
     </div>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js

@@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext();
  * Item detail provider
  */
 function ItemDetailDrawerProvider({ itemId, ...props }) {
+  // transaction type payload.
+  const [value, setValue] = React.useState('invoices');
+
   // Fetches the given item detail.
   const { isLoading: isItemLoading, data: item } = useItem(itemId, {
     enabled: !!itemId,
@@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
     item,
     itemId,
     isItemLoading,
+    value,
+    setValue,
   };
 
   return (

src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import classNames from 'classnames';
 
-import { If, DetailsMenu, DetailItem } from 'components';
+import { If, DetailsMenu, DetailItem, Card } from 'components';
 import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
 
 /**
@@ -13,70 +13,72 @@ export default function ItemDetailHeader() {
   const { item } = useItemDetailDrawerContext();
 
   return (
-    <div class="item-drawer__content">
+    <Card>
-      <DetailsMenu direction={'vertical'}>
+      <div class="item-drawer__content">
-        <DetailItem
+        <DetailsMenu direction={'vertical'}>
-          name={'name'}
-          label={intl.get('item_name')}
-          children={item.name}
-        />
-        <DetailItem
-          label={intl.get('sell_price')}
-          children={item.sell_price_formatted}
-          align={'right'}
-        />
-        <DetailItem
-          label={intl.get('cost_price')}
-          children={item.cost_price_formatted}
-          align={'right'}
-        />
-      </DetailsMenu>
-
-      <DetailsMenu direction={'horizantal'}>
-        <DetailItem label={intl.get('item_type')} children={item.type} />
-        <DetailItem
-          label={intl.get('item_code')}
-          children={defaultTo(item.code, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
-          <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
-            <span
-              className={classNames({
-                mines: item.quantity_on_hand <= 0,
-                plus: item.quantity_on_hand > 0,
-              })}
-            >
-              {defaultTo(item.quantity_on_hand, '-')}
-            </span>
-          </DetailItem>
-        </If>
-        <DetailItem
-          label={intl.get('category_name')}
-          children={defaultTo(item.category?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('sell_account_id')}
-          children={defaultTo(item?.sell_account?.name, '-')}
-        />
-        <DetailItem
-          label={intl.get('cost_account_id')}
-          children={defaultTo(item.cost_account?.name, '-')}
-        />
-        <If condition={item.type === 'inventory'}>
           <DetailItem
-            label={intl.get('inventory_account')}
+            name={'name'}
-            children={defaultTo(item?.inventory_account?.name, '-')}
+            label={intl.get('item_name')}
+            children={item.name}
           />
-        </If>
+          <DetailItem
-        <DetailItem
+            label={intl.get('sell_price')}
-          label={intl.get('item.sell_description')}
+            children={item.sell_price_formatted}
-          children={defaultTo(item.sell_description, '-')}
+            align={'right'}
-        />
+          />
-        <DetailItem
+          <DetailItem
-          label={intl.get('item.purchase_description')}
+            label={intl.get('cost_price')}
-          children={defaultTo(item.cost_description, '-')}
+            children={item.cost_price_formatted}
-        />
+            align={'right'}
-      </DetailsMenu>
+          />
-    </div>
+        </DetailsMenu>
+
+        <DetailsMenu direction={'horizantal'}>
+          <DetailItem label={intl.get('item_type')} children={item.type} />
+          <DetailItem
+            label={intl.get('item_code')}
+            children={defaultTo(item.code, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
+              <span
+                className={classNames({
+                  mines: item.quantity_on_hand <= 0,
+                  plus: item.quantity_on_hand > 0,
+                })}
+              >
+                {defaultTo(item.quantity_on_hand, '-')}
+              </span>
+            </DetailItem>
+          </If>
+          <DetailItem
+            label={intl.get('category_name')}
+            children={defaultTo(item.category?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('sell_account_id')}
+            children={defaultTo(item?.sell_account?.name, '-')}
+          />
+          <DetailItem
+            label={intl.get('cost_account_id')}
+            children={defaultTo(item.cost_account?.name, '-')}
+          />
+          <If condition={item.type === 'inventory'}>
+            <DetailItem
+              label={intl.get('inventory_account')}
+              children={defaultTo(item?.inventory_account?.name, '-')}
+            />
+          </If>
+          <DetailItem
+            label={intl.get('item.sell_description')}
+            children={defaultTo(item.sell_description, '-')}
+          />
+          <DetailItem
+            label={intl.get('item.purchase_description')}
+            children={defaultTo(item.cost_description, '-')}
+          />
+        </DetailsMenu>
+      </div>
+    </Card>
   );
 }

src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tab } from '@blueprintjs/core';
+import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { ItemPaymentTransactions } from './ItemPaymentTransactions';
+import ItemDetailHeader from './ItemDetailHeader';
+
+
+export default function ItemDetailTab() {
+  return (
+    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+      <Tab
+        id={'overview'}
+        title={<T id={'overview'} />}
+        panel={<ItemDetailHeader />}
+      />
+      <Tab
+        id={'transactions'}
+        title={<T id={'transactions'} />}
+        panel={<ItemPaymentTransactions />}
+      />
+    </DrawerMainTabs>
+  );
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedBillTransactions } from 'hooks/query';
 import { useBillTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function BillPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
+    <DataTable
-      <Card>
+      columns={columns}
-        <DataTable
+      data={paymentTransactions}
-          columns={columns}
+      loading={isBillTransactionsLoading}
-          data={paymentTransactions}
+      headerLoading={isBillTransactionsLoading}
-          loading={isBillTransactionsLoading}
+      progressBarLoading={isBillTransactionFetching}
-          headerLoading={isBillTransactionsLoading}
+    />
-          progressBarLoading={isBillTransactionFetching}
-        />
-      </Card>
-    </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedEstimateTransactions } from 'hooks/query';
 import { useEstimateTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function EstimatePaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
+    <DataTable
-      <Card>
+      columns={columns}
-        <DataTable
+      data={paymentTransactions}
-          columns={columns}
+      loading={isEstimateTransactionsLoading}
-          data={paymentTransactions}
+      headerLoading={isEstimateTransactionsLoading}
-          loading={isEstimateTransactionsLoading}
+      progressBarLoading={isEstimateTransactionFetching}
-          headerLoading={isEstimateTransactionsLoading}
+    />
-          progressBarLoading={isEstimateTransactionFetching}
-        />
-      </Card>
-    </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useInvoicePaymentTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function InvoicePaymentTransactionsTable() {
   });
 
   return (
-    <div className="item-drawer__table">
+    <DataTable
-      <Card>
+      columns={columns}
-        <DataTable
+      data={paymentTransactions}
-          columns={columns}
+      loading={isInvoiceTransactionsLoading}
-          data={paymentTransactions}
+      headerLoading={isInvoiceTransactionsLoading}
-          loading={isInvoiceTransactionsLoading}
+      progressBarLoading={isInvoiceTransactionFetching}
-          headerLoading={isInvoiceTransactionsLoading}
+    />
-          progressBarLoading={isInvoiceTransactionFetching}
-        />
-      </Card>
-    </div>
   );
 }

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataTable, Card } from '../../../../components';
+import { DataTable } from '../../../../components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import { useItemAssociatedReceiptTransactions } from 'hooks/query';
 import { useReceiptTransactionsColumns } from './components';
@@ -22,16 +22,12 @@ export default function ReceiptPaymentTransactions() {
   });
 
   return (
-    <div className="item-drawer__table">
+    <DataTable
-      <Card>
+      columns={columns}
-        <DataTable
+      data={paymentTransactions}
-          columns={columns}
+      loading={isReceiptTransactionsLoading}
-          data={paymentTransactions}
+      headerLoading={isReceiptTransactionsLoading}
-          loading={isReceiptTransactionsLoading}
+      progressBarLoading={isReceiptTransactionFetching}
-          headerLoading={isReceiptTransactionsLoading}
+    />
-          progressBarLoading={isReceiptTransactionFetching}
-        />
-      </Card>
-    </div>
   );
 }

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

@@ -1,34 +1,30 @@
 import React from 'react';
-import { Tab } from '@blueprintjs/core';
+import styled from 'styled-components';
-import { DrawerMainTabs, FormattedMessage as T } from 'components';
+import { Card, FormattedMessage as T } from 'components';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
+import { ItemManuTransaction } from './utils';
-import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
-import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
+import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
-import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
 
 export const ItemPaymentTransactions = () => {
+  const { value } = useItemDetailDrawerContext();
+
   return (
-    <DrawerMainTabs renderActiveTabPanelOnly={true}>
+    <Card>
-      <Tab
+      <ItemManuTransactions>
-        id={'invoice'}
+        <T id={'item.drawer_transactions_by'} />
-        title={<T id={'invoice'} />}
+        <ItemManuTransaction />
-        panel={<InvoicePaymentTransactionsTable />}
+      </ItemManuTransactions>
-      />
+      <ItemPaymentTransactionContent tansactionType={value} />
-      <Tab
+    </Card>
-        id={'estiamte'}
-        title={<T id={'estimate_'} />}
-        panel={<EstimatePaymentTransactionsTable />}
-      />
-      <Tab
-        id={'receipt'}
-        title={<T id={'receipt_'} />}
-        panel={<ReceiptPaymentTransactionsTable />}
-      />
-      <Tab
-        id={'bill'}
-        title={'Bill'}
-        panel={<BillPaymentTransactionsTable />}
-      />
-    </DrawerMainTabs>
   );
 };
+
+const ItemManuTransactions = styled.div`
+  display: flex;
+  align-items: center;
+  color: #727983;
+  .bp3-button {
+    padding-left: 6px;
+    font-weight: 700;
+  }
+`;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Button,
+  MenuItem,
+  Menu,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
+import transactions from '../../../../common/itemPaymentTranactionsOption';
+
+export const ItemManuTransaction = () => {
+  const { value, setValue } = useItemDetailDrawerContext();
+
+  // const handleClickItem = (item) => {
+  //   onChange && onChange(item);
+  // };
+
+  const content = transactions.map(({ name, label }) => (
+    <MenuItem onClick={() => setValue(name)} text={label} />
+  ));
+
+  return (
+    <Popover
+      minimal={true}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM_LEFT}
+      modifiers={{
+        offset: { offset: '0, 4' },
+      }}
+      content={<Menu>{content}</Menu>}
+    >
+      <Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
+    </Popover>
+  );
+};

src/style/components/Drawers/ItemDrawer.scss

@@ -38,28 +38,24 @@
       }
     }
   }
-  &__table {
-    .card {
-      padding: 12px 15px !important;
-    }
 
-    .table {
+  .table {
-      .tbody,
+    margin-top: 8px;
-      .thead {
+    .tbody,
-        .tr .th {
+    .thead {
-          padding: 8px 8px;
+      .tr .th {
-          background-color: #fff;
+        padding: 8px 8px;
-          font-size: 14px;
+        background-color: #fff;
-          border-bottom: 1px solid #000;
+        font-size: 14px;
-          border-top: 1px solid #000;
+        border-bottom: 1px solid #000;
-        }
+        border-top: 1px solid #000;
       }
-      .tbody {
+    }
-        .tr .td {
+    .tbody {
-          border-bottom: 0;
+      .tr .td {
-          padding-top: 0.4rem;
+        border-bottom: 0;
-          padding-bottom: 0.4rem;
+        padding-top: 0.4rem;
-        }
+        padding-bottom: 0.4rem;
       }
     }
   }