feat: add payment transaction & style

src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -8,7 +8,7 @@ import { DrawerMainTabs } from 'components';
 import BillDetailTab from './BillDetailTab';
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import BillPaymentTransactionTable from './BillPaymentTransactionTable';
+import BillPaymentTransactionTable from './BillPaymentTransactions/BillPaymentTransactionTable';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';

src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { DataTable, Card } from 'components';
 
-import { useBillPaymentTransactionsColumns } from './utils';
+import 'style/pages/PaymentTransactions/List.scss';
-import { useBillDrawerContext } from './BillDrawerProvider';
+
+import { useBillPaymentTransactionsColumns } from './components';
+import { useBillDrawerContext } from '../BillDrawerProvider';
 
 /**
  * Bill payment transactions datatable.
@@ -24,6 +26,7 @@ export default function BillPaymentTransactionTable() {
         loading={isPaymentTransactionsLoading}
         headerLoading={isPaymentTransactionsLoading}
         progressBarLoading={isPaymentTransactionFetching}
+        className={'payment-transactions'}
       />
     </Card>
   );

src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { FormatDateCell } from '../../../../components';
+
+/**
+ * Retrieve bill payment transactions table columns.
+ */
+export const useBillPaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('payment_date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        // accessor: 'formatted_amount',
+        align: 'right',
+        width: 100,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'payment_number',
+        Header: intl.get('payment_no'),
+        accessor: 'payment_number',
+        width: 100,
+        className: 'payment_number',
+      },
+      {
+        id: 'reference',
+        Header: intl.get('reference_no'),
+        accessor: 'reference',
+        width: 90,
+        className: 'reference',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/BillDrawer/utils.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import clsx from 'classnames';
+import { FormatNumberCell } from '../../../components';
-import { CLASSES } from '../../../common/classes';
-import { FormatNumberCell, FormatDateCell } from '../../../components';
 
 /**
  * Retrieve bill readonly details entries table columns.
@@ -51,49 +49,3 @@ export const useBillReadonlyEntriesTableColumns = () =>
     ],
     [],
   );
-
-/**
- * Retrieve bill payment transactions table columns.
- */
-export const useBillPaymentTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'date',
-        Header: intl.get('payment_date'),
-        accessor: 'date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'date',
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('amount'),
-        accessor: 'amount',
-        // accessor: 'formatted_amount',
-        align: 'right',
-        width: 100,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'payment_number',
-        Header: intl.get('payment_no'),
-        accessor: 'payment_number',
-        width: 100,
-        className: 'payment_number',
-      },
-      {
-        id: 'reference',
-        Header: intl.get('reference_no'),
-        accessor: 'reference',
-        width: 90,
-        className: 'reference',
-        clickable: true,
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -6,7 +6,7 @@ import clsx from 'classnames';
 import { DrawerMainTabs } from 'components';
 
 import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
-import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsTable';
+import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';
 import InvoiceDetailTab from './InvoiceDetailTab';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { DataTable, Card } from 'components';
 
-import { useInvoicePaymentTransactionsColumns } from './utils';
+import 'style/pages/PaymentTransactions/List.scss';
-import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
+
+import { useInvoicePaymentTransactionsColumns } from './components';
+import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
 
 /**
  * Invoice payment transactions datatable.
@@ -23,6 +25,7 @@ export default function InvoicePaymentTransactionsTable() {
         loading={isPaymentTransactionLoading}
         headerLoading={isPaymentTransactionLoading}
         progressBarLoading={isPaymentTransactionFetching}
+        className={'payment-transactions'}
       />
     </Card>
   );

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import clsx from 'classnames';
+import { CLASSES } from '../../../../common/classes';
+import { FormattedMessage as T, FormatDateCell } from '../../../../components';
+
+/**
+ * Retrieve invoice payment transactions table columns.
+ */
+export const useInvoicePaymentTransactionsColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('payment_date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+        textOverview: true,
+      },
+      {
+        id: 'amount',
+        Header: intl.get('amount'),
+        accessor: 'amount',
+        // accessor: 'formatted_amount',
+        align: 'right',
+        width: 120,
+        className: clsx(CLASSES.FONT_BOLD),
+        textOverview: true,
+      },
+      {
+        id: 'payment_receive_no.',
+        Header: intl.get('payment_no'),
+        accessor: 'payment_receive_no',
+        width: 100,
+        className: 'payment_receive_no',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 90,
+        className: 'reference_no',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+};

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -107,48 +107,3 @@ export const BadDebtMenuItem = ({
   );
 };
 
-/**
- * Retrieve invoice payment transactions table columns.
- */
-export const useInvoicePaymentTransactionsColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        id: 'date',
-        Header: intl.get('payment_date'),
-        accessor: 'date',
-        Cell: FormatDateCell,
-        width: 110,
-        className: 'date',
-        textOverview: true,
-      },
-      {
-        id: 'amount',
-        Header: intl.get('amount'),
-        accessor: 'amount',
-        // accessor: 'formatted_amount',
-        align: 'right',
-        width: 120,
-        className: clsx(CLASSES.FONT_BOLD),
-        textOverview: true,
-      },
-      {
-        id: 'payment_receive_no.',
-        Header: intl.get('payment_no'),
-        accessor: 'payment_receive_no',
-        width: 100,
-        className: 'payment_receive_no',
-      },
-      {
-        id: 'reference_no',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_no',
-        width: 90,
-        className: 'reference_no',
-        clickable: true,
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-};

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

@@ -63,7 +63,7 @@ export default function BillPaymentTransactions() {
   );
 
   return (
-    <div className="payment-transactions">
+    <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}

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

@@ -58,7 +58,7 @@ export default function EstimatePaymentTransactions() {
   );
 
   return (
-    <div className="payment-transactions">
+    <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}

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

@@ -23,7 +23,7 @@ export default function InvoicePaymentTransactionsTable() {
         id: 'invoice_no',
         Header: intl.get('invoice_no__'),
         accessor: 'invoice_no',
-        width: 100,
+        width: 240,
         className: 'invoice_no',
         textOverview: true,
       },
@@ -31,7 +31,7 @@ export default function InvoicePaymentTransactionsTable() {
         id: 'customer',
         Header: intl.get('customer_name'),
         accessor: 'customer.display_name',
-        width: 180,
+        width: 140,
         className: 'customer_id',
         clickable: true,
         textOverview: true,
@@ -40,7 +40,7 @@ export default function InvoicePaymentTransactionsTable() {
         id: 'reference_no',
         Header: intl.get('reference_no'),
         accessor: 'reference_no',
-        width: 90,
+        width: 140,
         className: 'reference_no',
         textOverview: true,
       },
@@ -68,7 +68,7 @@ export default function InvoicePaymentTransactionsTable() {
   );
 
   return (
-    <div className="payment-transactions">
+    <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}

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

@@ -68,7 +68,7 @@ export default function ReceiptPaymentTransactions() {
   );
 
   return (
-    <div className="payment-transactions">
+    <div className="item-drawer__table">
       <Card>
         <DataTable
           columns={columns}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tab } from '@blueprintjs/core';
-import { DrawerMainTabs } from 'components';
+import { DrawerMainTabs, FormattedMessage as T } from 'components';
 import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
 import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
 import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
@@ -13,17 +13,18 @@ export const ItemPaymentTransactions = () => {
     <DrawerMainTabs>
       <Tab
         id={'invoice'}
-        title={'Invoice'}
+        title={<T id={'invoice'} />}
         panel={<InvoicePaymentTransactionsTable />}
       />
       <Tab
         id={'estiamte'}
         title={'Estimate'}
+        title={<T id={'estimate_'} />}
         panel={<EstimatePaymentTransactionsTable />}
       />
       <Tab
         id={'receipt'}
-        title={'Receipt'}
+        title={<T id={'receipt_'} />}
         panel={<ReceiptPaymentTransactionsTable />}
       />
       <Tab
@@ -34,7 +35,3 @@ export const ItemPaymentTransactions = () => {
     </DrawerMainTabs>
   );
 };
-
-{
-  /* <ItemSwitchMenuItem onChange={handleSwitch} /> */
-}

src/style/components/Drawers/ItemDrawer.scss

@@ -38,9 +38,29 @@
       }
     }
   }
-  .payment-transactions {
+  &__table {
     .card {
-      padding: 0 !important;
+      padding: 12px 15px !important;
+    }
+
+    .table {
+      .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;
+        }
+      }
     }
   }
 }

src/style/pages/PaymentTransactions/List.scss

@@ -0,0 +1,23 @@
+.payment-transactions {
+  padding: 12px;
+
+  .table {
+    .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;
+      }
+    }
+  }
+}