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

feat: add payment transaction & style

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/Drawers/BillDrawer/BillDrawerDetails.js
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';

7
src/containers/Drawers/BillDrawer/BillPaymentTransactionTable.js → src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
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>
);

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

50
src/containers/Drawers/BillDrawer/utils.js
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,
},
],
[],
);
};

2
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
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';

7
src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactionsTable.js → src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
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>
);

52
src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/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 { 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,
},
],
[],
);
};

45
src/containers/Drawers/InvoiceDetailDrawer/utils.js
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,
},
],
[],
);
};

2
src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
View File

@@ -14,7 +14,7 @@ export default function ItemDetail() {
return (
<div className="item-drawer">
<ItemDetailActionsBar />
<ItemPaymentTransactions />
<ItemPaymentTransactions />
<Card>
<ItemDetailHeader />
</Card>

2
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
View File

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

2
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
View File

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

8
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
View File

@@ -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}

2
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
View File

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

11
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
View File

@@ -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} /> */
}

24
src/style/components/Drawers/ItemDrawer.scss
View File

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

23
src/style/pages/PaymentTransactions/List.scss Normal file
View File

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