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

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

View File

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

View File

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