QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/associated-payment-transactions' into develop

Browse Source
This commit is contained in:
elforjani13
2021-12-14 13:06:05 +02:00
parent 897e674912 07e52bef7a
commit ae7d37a0e0
27 changed files with 775 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/containers/Drawers/BillDrawer/BillDrawerDetails.js
View File

@@ -8,6 +8,7 @@ import { DrawerMainTabs } from 'components';
import BillDetailTab from './BillDetailTab';
import LocatedLandedCostTable from './LocatedLandedCostTable';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import BillPaymentTransactionTable from './BillPaymentTransactions/BillPaymentTransactionTable';
import { useBillDrawerContext } from './BillDrawerProvider';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
@@ -33,16 +34,16 @@ export default function BillDrawerDetails() {
id={'journal_entries'}
panel={<JournalEntriesTable transactions={transactions} />}
/>
<Tab
title={intl.get('payment_transactions')}
id={'payment_transactions'}
panel={<BillPaymentTransactionTable />}
/>
<Tab
title={intl.get('located_landed_cost')}
id={'landed_cost'}
panel={<LocatedLandedCostTable />}
/>
{/* <Tab
title={intl.get('payment_transactions')}
id={'payment_transactions'}
// panel={}
/> */}
</DrawerMainTabs>
</div>
);

19
src/containers/Drawers/BillDrawer/BillDrawerProvider.js
View File

@@ -5,6 +5,7 @@ import {
useBill,
useTransactionsByReference,
useBillLocatedLandedCost,
useBillPaymentTransactions,
} from 'hooks/query';
const BillDrawerContext = React.createContext();
@@ -33,15 +34,31 @@ function BillDrawerProvider({ billId, ...props }) {
enabled: !!billId,
});
// Handle fetch bill payment transaction.
const {
isLoading: isPaymentTransactionsLoading,
isFetching: isPaymentTransactionFetching,
data: paymentTransactions,
} = useBillPaymentTransactions(billId, {
enabled: !!billId,
});
//provider.
const provider = {
transactions,
billId,
data,
bill,
paymentTransactions,
isPaymentTransactionsLoading,
isPaymentTransactionFetching,
};
const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
const loading =
isLandedCostLoading ||
isTransactionLoading ||
isPaymentTransactionsLoading ||
isBillLoading;
return (
<DrawerLoading loading={loading}>

33
src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react';
import { DataTable, Card } from 'components';
import 'style/pages/PaymentTransactions/List.scss';
import { useBillPaymentTransactionsColumns } from './components';
import { useBillDrawerContext } from '../BillDrawerProvider';
/**
* Bill payment transactions datatable.
*/
export default function BillPaymentTransactionTable() {
const columns = useBillPaymentTransactionsColumns();
const {
paymentTransactions,
isPaymentTransactionsLoading,
isPaymentTransactionFetching,
} = useBillDrawerContext();
return (
<Card>
<DataTable
columns={columns}
data={paymentTransactions}
loading={isPaymentTransactionsLoading}
headerLoading={isPaymentTransactionsLoading}
progressBarLoading={isPaymentTransactionFetching}
className={'payment-transactions'}
/>
</Card>
);
}

52
src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js Normal file
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,
},
],
[],
);
};

84
src/containers/Drawers/BillDrawer/utils.js
View File

@@ -7,45 +7,45 @@ import { FormatNumberCell } from '../../../components';
* Retrieve bill readonly details entries table columns.
*/
export const useBillReadonlyEntriesTableColumns = () =>
React.useMemo(
() => [
{
Header: intl.get('product_and_service'),
accessor: 'item.name',
width: 150,
className: 'item',
disableSortBy: true
},
{
Header: intl.get('description'),
accessor: 'description',
className: 'description',
disableSortBy: true
},
{
Header: intl.get('quantity'),
accessor: 'quantity',
Cell: FormatNumberCell,
width: 100,
align: 'right',
disableSortBy: true
},
{
Header: intl.get('rate'),
accessor: 'rate',
Cell: FormatNumberCell,
width: 100,
align: 'right',
disableSortBy: true
},
{
Header: intl.get('amount'),
accessor: 'amount',
Cell: FormatNumberCell,
width: 100,
align: 'right',
disableSortBy: true
},
],
[],
);
React.useMemo(
() => [
{
Header: intl.get('product_and_service'),
accessor: 'item.name',
width: 150,
className: 'item',
disableSortBy: true,
},
{
Header: intl.get('description'),
accessor: 'description',
className: 'description',
disableSortBy: true,
},
{
Header: intl.get('quantity'),
accessor: 'quantity',
Cell: FormatNumberCell,
width: 100,
align: 'right',
disableSortBy: true,
},
{
Header: intl.get('rate'),
accessor: 'rate',
Cell: FormatNumberCell,
width: 100,
align: 'right',
disableSortBy: true,
},
{
Header: intl.get('amount'),
accessor: 'amount',
Cell: FormatNumberCell,
width: 100,
align: 'right',
disableSortBy: true,
},
],
[],
);