feat: add payment transaction & style

This commit is contained in:
elforjani13
2021-12-04 18:08:20 +02:00
parent 0ad5a9ed03
commit 07e52bef7a
16 changed files with 174 additions and 117 deletions

View File

@@ -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';

View File

@@ -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'}
/>
</Card>
);

View File

@@ -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,
},
],
[],
);
};

View File

@@ -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,
},
],
[],
);
};