From 07e52bef7ae09d8689d53830f647ccb8351e3226 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sat, 4 Dec 2021 18:08:20 +0200 Subject: [PATCH] feat: add payment transaction & style --- .../Drawers/BillDrawer/BillDrawerDetails.js | 2 +- .../BillPaymentTransactionTable.js | 7 ++- .../BillPaymentTransactions/components.js | 52 +++++++++++++++++++ src/containers/Drawers/BillDrawer/utils.js | 50 +----------------- .../InvoiceDetailDrawer/InvoiceDetail.js | 2 +- .../InvoicePaymentTransactionsTable.js | 7 ++- .../InvoicePaymentTransactions/components.js | 52 +++++++++++++++++++ .../Drawers/InvoiceDetailDrawer/utils.js | 45 ---------------- .../ItemDetailDrawer/ItemContentDetails.js | 2 +- .../BillPaymentTransactionsDataTable.js | 2 +- .../EstimatePaymentTransactionsDataTable.js | 2 +- .../InvoicePaymentTransactionsDataTable.js | 8 +-- .../ReceiptPaymentTransactionsDataTable.js | 2 +- .../ItemPaymentTransactions/index.js | 11 ++-- src/style/components/Drawers/ItemDrawer.scss | 24 ++++++++- src/style/pages/PaymentTransactions/List.scss | 23 ++++++++ 16 files changed, 174 insertions(+), 117 deletions(-) rename src/containers/Drawers/BillDrawer/{ => BillPaymentTransactions}/BillPaymentTransactionTable.js (74%) create mode 100644 src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js rename src/containers/Drawers/InvoiceDetailDrawer/{ => InvoicePaymentTransactions}/InvoicePaymentTransactionsTable.js (73%) create mode 100644 src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js create mode 100644 src/style/pages/PaymentTransactions/List.scss diff --git a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/src/containers/Drawers/BillDrawer/BillDrawerDetails.js index 288771b42..0c4d44846 100644 --- a/src/containers/Drawers/BillDrawer/BillDrawerDetails.js +++ b/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'; diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js similarity index 74% rename from src/containers/Drawers/BillDrawer/BillPaymentTransactionTable.js rename to src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js index 4165231e0..77fafdf26 100644 --- a/src/containers/Drawers/BillDrawer/BillPaymentTransactionTable.js +++ b/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 { useBillDrawerContext } from './BillDrawerProvider'; +import 'style/pages/PaymentTransactions/List.scss'; + +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'} /> ); diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js new file mode 100644 index 000000000..8927ef7e6 --- /dev/null +++ b/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, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/BillDrawer/utils.js b/src/containers/Drawers/BillDrawer/utils.js index 5d075f3b7..32894150b 100644 --- a/src/containers/Drawers/BillDrawer/utils.js +++ b/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 { CLASSES } from '../../../common/classes'; -import { FormatNumberCell, FormatDateCell } from '../../../components'; +import { FormatNumberCell } 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, - }, - ], - [], - ); -}; diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js index de075c2e4..9bc708e0d 100644 --- a/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js +++ b/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'; diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactionsTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js similarity index 73% rename from src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactionsTable.js rename to src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js index 2943349e7..81ff03c73 100644 --- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactionsTable.js +++ b/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 { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider'; +import 'style/pages/PaymentTransactions/List.scss'; + +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'} /> ); diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js new file mode 100644 index 000000000..d57bda7f4 --- /dev/null +++ b/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, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js index 197b84ba7..e4d4f4f8f 100644 --- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js +++ b/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, - }, - ], - [], - ); -}; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js index 108b23779..163b310ba 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js @@ -14,7 +14,7 @@ export default function ItemDetail() { return (
- + diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js index 08a9f7fea..3cfd3218c 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js @@ -63,7 +63,7 @@ export default function BillPaymentTransactions() { ); return ( -
+
+
+
+
{ } panel={} /> } panel={} /> } panel={} /> { ); }; - -{ - /* */ -} diff --git a/src/style/components/Drawers/ItemDrawer.scss b/src/style/components/Drawers/ItemDrawer.scss index 358e66e31..4da73cd21 100644 --- a/src/style/components/Drawers/ItemDrawer.scss +++ b/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; + } + } } } } diff --git a/src/style/pages/PaymentTransactions/List.scss b/src/style/pages/PaymentTransactions/List.scss new file mode 100644 index 000000000..baaff57df --- /dev/null +++ b/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; + } + } + } +}