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

feat: style payment receive and made details drawers.

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-25 20:42:25 +02:00
parent 759a37bf3f
commit 5abf007de7
31 changed files with 389 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/containers/Drawers/BillDrawer/BillDetailHeader.js
View File

@@ -22,7 +22,7 @@ export default function BillDetailHeader() {
children={<h3 class="big-number">{bill.formatted_amount}</h3>}
/>
<DetailItem
label={intl.get('bill_number')}
label={intl.get('bill.details.bill_number')}
children={defaultTo(bill.bill_number, '-')}
/>
<DetailItem

2
client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
View File

@@ -21,7 +21,7 @@ export default function EstimateDetailHeader() {
<span class="big-number">{estimate.formatted_amount}</span>
</DetailItem>
<DetailItem
label={intl.get('estimate_number')}
label={intl.get('estimate.details.estimate_number')}
children={defaultTo(estimate.estimate_number, '-')}
/>
<DetailItem

3
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
View File

@@ -32,14 +32,13 @@ export default function InvoiceDetailHeader() {
label={intl.get('invoice_date')}
children={invoice.formatted_invoice_date}
/>
<DetailItem
label={intl.get('due_date')}
children={invoice.formatted_due_date}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('due_amount')}
children={invoice.formatted_due_amount}

24
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailActionsBar.js
View File

@@ -18,8 +18,11 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
import { compose } from 'utils';
/**
* Payment made - Details panel - actions bar.
*/
function PaymentMadeDetailActionsBar({
// #withAlertsActions
openAlert,
@@ -32,19 +35,14 @@ function PaymentMadeDetailActionsBar({
const { paymentMadeId } = usePaymentMadeDetailContext();
// Handle edit payment made.
const onEditPaymentMade = () => {
return paymentMadeId
? (history.push(`/payment-mades/${paymentMadeId}/edit`),
closeDrawer('payment-made-detail-drawer'))
: null;
const handleEditPaymentMade = () => {
history.push(`/payment-mades/${paymentMadeId}/edit`);
closeDrawer('payment-made-detail-drawer');
};
// Handle delete payment made.
const onDeletePaymentMade = () => {
return paymentMadeId
? (openAlert('payment-made-delete', { paymentMadeId }),
closeDrawer('payment-made-detail-drawer'))
: null;
const handleDeletePaymentMade = () => {
openAlert('payment-made-delete', { paymentMadeId });
};
return (
@@ -54,7 +52,7 @@ function PaymentMadeDetailActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_payment_made'} />}
onClick={safeCallback(onEditPaymentMade)}
onClick={handleEditPaymentMade}
/>
<NavbarDivider />
<Button
@@ -62,7 +60,7 @@ function PaymentMadeDetailActionsBar({
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeletePaymentMade)}
onClick={handleDeletePaymentMade}
/>
</NavbarGroup>
</DashboardActionsBar>

4
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
View File

@@ -10,10 +10,10 @@ import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
*/
export default function PaymentMadeDetailContent({
// #ownProp
paymentMade,
paymentMadeId,
}) {
return (
<PaymentMadeDetailProvider paymentMadeId={paymentMade}>
<PaymentMadeDetailProvider paymentMadeId={paymentMadeId}>
<PaymentMadeDetails />
</PaymentMadeDetailProvider>
);

36
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailFooter.js
View File

@@ -1,24 +1,32 @@
import React from 'react';
import clsx from 'classnames';
import { TotalLines, TotalLine } from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/**
* Payment made - Details panel - Footer.
*/
export default function PaymentMadeDetailFooter() {
const {
paymentEntries: { total_payment_amount },
} = usePaymentMadeDetailContext();
const { } = usePaymentMadeDetailContext();
return (
<div className="payment-drawer__content-footer">
<div class="total-lines">
<div class="total-lines__line total-lines__line--subtotal">
<div class="title">Subtotal</div>
<div class="amount">{total_payment_amount}</div>
</div>
<div class="total-lines__line total-lines__line--total">
<div class="title">TOTAL</div>
<div class="amount">{total_payment_amount}</div>
</div>
</div>
<div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
<TotalLines>
<TotalLine
title={'Subtotal'}
value={1000}
className={clsx(PaymentDrawerCls.total_line_subtotal)}
/>
<TotalLine
title={'TOTAL'}
value={1000}
className={clsx(PaymentDrawerCls.total_line_total)}
/>
</TotalLines>
</div>
);
}

66
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
View File

@@ -1,56 +1,54 @@
import React from 'react';
import intl from 'react-intl-universal';
import moment from 'moment';
import clsx from 'classnames';
import { defaultTo } from 'lodash';
import { DetailsMenu, DetailItem } from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/**
* Payment made detail header.
* Payment made - detail panel - header.
*/
export default function PaymentMadeDetailHeader() {
const {
paymentMade: {
formatted_amount,
payment_number,
payment_account,
formatted_payment_date,
vendor,
created_at,
statement,
},
} = usePaymentMadeDetailContext();
const { paymentMade } = usePaymentMadeDetailContext();
return (
<div className={'payment-drawer__content-header'}>
<div className={clsx(PaymentDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{formatted_amount}</h3>
</DetailItem>
<DetailItem label={intl.get('payment_receive_no')}>
{payment_number}
</DetailItem>
<DetailItem label={intl.get('customer_name')}>
{vendor?.display_name}
</DetailItem>
<DetailItem label={intl.get('payment_account')}>
{payment_account?.name}
</DetailItem>
<DetailItem label={intl.get('payment_date')}>
{formatted_payment_date}
<h3 class="big-number" children={paymentMade.formatted_amount} />
</DetailItem>
<DetailItem
label={intl.get('payment_made.details.payment_number')}
children={defaultTo(paymentMade.payment_number, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={paymentMade.vendor?.display_name}
/>
<DetailItem
label={intl.get('payment_account')}
children={paymentMade.payment_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={paymentMade.formatted_payment_date}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('description')}>
{defaultTo(statement, '—')}
</DetailItem>
<DetailItem label={intl.get('created_at')}>
{moment(created_at).format('YYYY MMM DD')}
</DetailItem>
<DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentMade.statement, '-')}
/>
<DetailItem
label={intl.get('created_at')}
children={moment(paymentMade.created_at).format('YYYY MMM DD')}
/>
</DetailsMenu>
</div>
);

21
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
View File

@@ -1,21 +1,28 @@
import React from 'react';
import clsx from 'classnames';
import { Card } from 'components';
import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
import PaymentMadeDetailTable from './PaymentMadeDetailTable';
import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/**
* Payment made detail tab.
*/
export default function PaymentMadeDetailTab() {
return (
<div className={'payment-drawer'}>
<div className={clsx(PaymentDrawerCls.detail_panel)}>
<PaymentMadeDetailActionsBar />
<div>
<Card>
<PaymentMadeDetailHeader />
<PaymentMadeDetailTable />
</Card>
</div>
<Card>
<PaymentMadeDetailHeader />
<PaymentMadeDetailTable />
<PaymentMadeDetailFooter />
</Card>
</div>
);
}

13
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
View File

@@ -1,17 +1,26 @@
import React from 'react';
import clsx from 'classnames';
import { usePaymentMadeEntriesColumns } from './utils';
import { DataTable } from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
export default function PaymentMadeDetailTable() {
const columns = usePaymentMadeEntriesColumns();
// Payment made details context.
const { paymentEntries } = usePaymentMadeDetailContext();
return (
<div className="payment-drawer__content--table">
<DataTable columns={columns} data={paymentEntries} />
<div className={clsx(PaymentDrawerCls.detail_panel_table)}>
<DataTable
columns={columns}
data={paymentEntries}
className={'table-constrant'}
/>
</div>
);
}

18
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
View File

@@ -1,31 +1,35 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { DrawerMainTabs } from 'components';
import PaymentMadeDetailTab from './PaymentMadeDetailTab';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/**
* payment made view detail.
* Payment made - view detail.
*/
export default function PaymentMadeDetails() {
const { transactions } = usePaymentMadeDetailContext();
return (
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
<div className={clsx(PaymentDrawerCls.root)}>
<DrawerMainTabs defaultSelectedTabId="details">
<Tab
title={intl.get('details')}
id={'details'}
title={intl.get('details')}
panel={<PaymentMadeDetailTab />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
title={intl.get('journal_entries')}
panel={<JournalEntriesTable transactions={transactions} />}
/>
</Tabs>
</DrawerMainTabs>
</div>
);
}

53
client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDrawer.module.scss Normal file
View File

@@ -0,0 +1,53 @@
.root {}
.detail_panel {
:global .card {
padding: 22px 15px;
}
&_header {
margin-bottom: 30px;
}
&_table {
:global .bigcapital-datatable {
.thead,
.tbody {
.bill_amount,
.amount_due,
.payment_amount {
text-align: right;
}
}
}
}
&_footer {
display: flex;
:global .total_lines {
margin-left: auto;
}
:global .total_lines_line {
.amount,
.title {
width: 180px;
}
.amount {
text-align: right;
}
}
}
.total_line {
&_subtotal {
border-bottom: 1px solid #000;
}
&_total {
border-bottom: 3px double #000;
font-weight: 600;
}
}
}

7
client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js
View File

@@ -22,13 +22,10 @@ function PaymentMadeDetailDrawer({
isOpen={isOpen}
name={name}
size={'65%'}
style={{
minWidth: '700px',
maxWidth: '900px',
}}
style={{ minWidth: '700px', maxWidth: '900px' }}
>
<DrawerSuspense>
<PaymentMadeDetailContent paymentMade={paymentMadeId} />
<PaymentMadeDetailContent paymentMadeId={paymentMadeId} />
</DrawerSuspense>
</Drawer>
);

7
client/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js
View File

@@ -9,27 +9,32 @@ export const usePaymentMadeEntriesColumns = () =>
accessor: (row) => moment(row.date).format('YYYY MMM DD'),
width: 100,
disableSortBy: true,
className: 'date',
},
{
Header: intl.get('bill_number'),
accessor: 'bill_no',
width: 150,
disableSortBy: true,
className: 'bill_number',
},
{
Header: intl.get('bill_amount'),
accessor: 'amount',
className: 'amount',
},
{
Header: intl.get('due_amount'),
accessor: 'due_amount',
width: 100,
disableSortBy: true,
className: 'due_amount',
},
{
Header: intl.get('payment_amount'),
accessor: 'payment_amount',
width: 100,
disableSortBy: true,
className: 'payment_amount',
},
]);
], []);

23
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
View File

@@ -18,7 +18,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
import { compose } from 'utils';
function PaymentReceiveActionsBar({
// #withAlertsActions
@@ -29,23 +29,18 @@ function PaymentReceiveActionsBar({
}) {
const history = useHistory();
// Retrieve the payment receive drawer context.
const { paymentReceiveId } = usePaymentReceiveDetailContext();
// Handle edit payment receive.
const onEditPaymentReceive = () => {
return paymentReceiveId
? (history.push(`/payment-receives/${paymentReceiveId}/edit`),
closeDrawer('payment-receive-detail-drawer'))
: null;
const handleEditPaymentReceive = () => {
history.push(`/payment-receives/${paymentReceiveId}/edit`);
closeDrawer('payment-receive-detail-drawer');
};
// Handle delete payment receive.
const onDeletePaymentReceive = () => {
return paymentReceiveId
? (openAlert('payment-receive-delete', { paymentReceiveId }),
closeDrawer('payment-receive-detail-drawer'))
: null;
const handleDeletePaymentReceive = () => {
openAlert('payment-receive-delete', { paymentReceiveId });
};
return (
@@ -55,7 +50,7 @@ function PaymentReceiveActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_payment_receive'} />}
onClick={safeCallback(onEditPaymentReceive)}
onClick={handleEditPaymentReceive}
/>
<NavbarDivider />
<Button
@@ -63,7 +58,7 @@ function PaymentReceiveActionsBar({
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeletePaymentReceive)}
onClick={handleDeletePaymentReceive}
/>
</NavbarGroup>
</DashboardActionsBar>

19
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
View File

@@ -1,31 +1,36 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { DrawerMainTabs } from 'components';
import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* payment receive view detail.
* Payment receive view detail.
*/
export default function PaymentReceiveDetail() {
const { transactions } = usePaymentReceiveDetailContext();
return (
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
<div className={clsx(PaymentDrawerCls.root)}>
<DrawerMainTabs defaultSelectedTabId="details">
<Tab
title={intl.get('details')}
id={'details'}
title={intl.get('details')}
panel={<PaymentReceiveDetailTab />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
title={intl.get('journal_entries')}
panel={<JournalEntriesTable transactions={transactions} />}
/>
</Tabs>
</DrawerMainTabs>
</div>
);
}

7
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js
View File

@@ -1,8 +1,5 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import PaymentReceiveDetail from './PaymentReceiveDetail';
import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
@@ -11,10 +8,10 @@ import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
*/
export default function PaymentReceiveDetailContent({
// #ownProp
paymentReceive,
paymentReceiveId,
}) {
return (
<PaymentReceiveDetailProvider paymentReceiveId={paymentReceive}>
<PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
<PaymentReceiveDetail />
</PaymentReceiveDetailProvider>
);

35
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
View File

@@ -1,24 +1,31 @@
import React from 'react';
import clsx from 'classnames';
import { TotalLine, TotalLines } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive detail footer.
*/
export default function PaymentReceiveDetailFooter() {
const {
paymentReceive: { formatted_amount },
} = usePaymentReceiveDetailContext();
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<div className="payment-drawer__content-footer">
<div class="total-lines">
<div class="total-lines__line total-lines__line--subtotal">
<div class="title">Subtotal</div>
<div class="amount">{formatted_amount}</div>
</div>
<div class="total-lines__line total-lines__line--total">
<div class="title">TOTAL</div>
<div class="amount">{'Amount'}</div>
</div>
</div>
<div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
<TotalLines>
<TotalLine
title={'Subtotal'}
value={paymentReceive.amount}
className={PaymentDrawerCls.total_line_subtotal}
/>
<TotalLine
title={'TOTAL'}
value={paymentReceive.amount}
className={PaymentDrawerCls.total_line_total}
/>
</TotalLines>
</div>
);
}

72
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
View File

@@ -1,56 +1,58 @@
import React from 'react';
import intl from 'react-intl-universal';
import moment from 'moment';
import clsx from 'classnames';
import { defaultTo } from 'lodash';
import { Card, DetailsMenu, DetailItem } from 'components';
import { DetailsMenu, DetailItem } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive detail header.
*/
export default function PaymentReceiveDetailHeader() {
const {
paymentReceive: {
formatted_amount,
payment_receive_no,
customer,
deposit_account,
formatted_payment_date,
statement,
created_at,
},
} = usePaymentReceiveDetailContext();
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<div className={'payment-drawer__content-header'}>
<div className={clsx(PaymentDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{formatted_amount}</h3>
</DetailItem>
<DetailItem label={intl.get('payment_receive_no')}>
{payment_receive_no}
</DetailItem>
<DetailItem label={intl.get('customer_name')}>
{customer?.display_name}
</DetailItem>
<DetailItem label={intl.get('deposit_account')}>
{deposit_account?.name}
</DetailItem>
<DetailItem label={intl.get('payment_date')}>
{formatted_payment_date}
</DetailItem>
<DetailItem
label={intl.get('amount')}
children={
<h3 class="big-number">{paymentReceive.formatted_amount}</h3>
}
/>
<DetailItem
label={intl.get('payment_receive.details.payment_number')}
children={defaultTo(paymentReceive.payment_receive_no, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={paymentReceive.customer?.display_name}
/>
<DetailItem
label={intl.get('deposit_account')}
children={paymentReceive.deposit_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={paymentReceive.formatted_payment_date}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('description')}>
{defaultTo(statement, '—')}
</DetailItem>
<DetailItem label={intl.get('created_at')}>
{moment(created_at).format('YYYY MMM DD')}
</DetailItem>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentReceive.statement, '—')}
/>
<DetailItem
label={intl.get('created_at')}
children={moment(paymentReceive.created_at).format('YYYY MMM DD')}
/>
</DetailsMenu>
</div>
);

15
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
View File

@@ -9,10 +9,13 @@ const PaymentReceiveDetailContext = React.createContext();
* Payment receive detail provider.
*/
function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
const { data: paymentReceive, isFetching: isPaymentReceiveLoading } =
usePaymentReceive(paymentReceiveId, {
enabled: !!paymentReceiveId,
});
const {
data: paymentReceive,
isLoading: isPaymentLoading,
isFetching: isPaymentFetching,
} = usePaymentReceive(paymentReceiveId, {
enabled: !!paymentReceiveId,
});
// Handle fetch transaction by reference.
const {
@@ -26,11 +29,11 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
{ enabled: !!paymentReceiveId },
);
//provider.
// Provider.
const provider = { transactions, paymentReceive, paymentReceiveId };
return (
<DashboardInsider loading={isTransactionLoading || isPaymentReceiveLoading}>
<DashboardInsider loading={isTransactionLoading || isPaymentLoading}>
<DrawerHeaderContent
name="payment-receive-detail-drawer"
title={intl.get('payment_receive_details')}

18
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'classnames';
import { Card } from 'components';
@@ -7,17 +8,18 @@ import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
export default function PaymentReceiveDetailTab() {
return (
<div className={'payment-drawer'}>
<div className={clsx(PaymentDrawerCls.detail_panel)}>
<PaymentReceiveActionsBar />
<div>
<Card>
<PaymentReceiveDetailHeader />
<PaymentReceiveDetailTable />
{/* <PaymentReceiveDetailFooter /> */}
</Card>
</div>
<Card>
<PaymentReceiveDetailHeader />
<PaymentReceiveDetailTable />
<PaymentReceiveDetailFooter />
</Card>
</div>
);
}

18
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
View File

@@ -1,18 +1,30 @@
import React from 'react';
import clsx from 'classnames';
import { usePaymentReceiveEntriesColumns } from './utils';
import { DataTable, Card } from 'components';
import { DataTable } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive readonly details table.
*/
export default function PaymentReceiveDetailTable() {
const columns = usePaymentReceiveEntriesColumns();
const {
paymentReceive: { entries },
} = usePaymentReceiveDetailContext();
return (
<div className="payment-drawer__content--table">
<DataTable columns={columns} data={entries} />
<div className={clsx(PaymentDrawerCls.detail_panel_table)}>
<DataTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
</div>
);
}

53
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss Normal file
View File

@@ -0,0 +1,53 @@
.root {}
.detail_panel {
:global .card {
padding: 22px 15px;
}
&_header {
margin-bottom: 30px;
}
&_table {
:global .bigcapital-datatable {
.thead,
.tbody {
.invoice_amount,
.amount_due,
.payment_amount {
text-align: right;
}
}
}
}
&_footer {
display: flex;
:global .total_lines {
margin-left: auto;
}
:global .total_lines_line {
.amount,
.title {
width: 180px;
}
.amount {
text-align: right;
}
}
}
.total_line {
&_subtotal {
border-bottom: 1px solid #000;
}
&_total {
border-bottom: 3px double #000;
font-weight: 600;
}
}
}

7
client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js
View File

@@ -22,13 +22,10 @@ function PaymentReceiveDetailDrawer({
isOpen={isOpen}
name={name}
size={'65%'}
style={{
minWidth: '700px',
maxWidth: '900px',
}}
style={{ minWidth: '700px', maxWidth: '900px' }}
>
<DrawerSuspense>
<PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
<PaymentReceiveDetailContent paymentReceiveId={paymentReceiveId} />
</DrawerSuspense>
</Drawer>
);

71
client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
View File

@@ -2,34 +2,45 @@ import React from 'react';
import intl from 'react-intl-universal';
import moment from 'moment';
/**
* Retrieve payment entries table columns.
*/
export const usePaymentReceiveEntriesColumns = () =>
React.useMemo(() => [
{
Header: intl.get('date'),
accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
width: 100,
disableSortBy: true,
},
{
Header: intl.get('invoice_no'),
accessor: 'invoice.invoice_no',
width: 150,
disableSortBy: true,
},
{
Header: intl.get('invoice_amount'),
accessor: 'invoice.balance',
},
{
Header: intl.get('amount_due'),
accessor: 'invoice.amount_due',
width: 100,
disableSortBy: true,
},
{
Header: intl.get('payment_amount'),
accessor: 'invoice.payment_amount',
width: 100,
disableSortBy: true,
},
]);
React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
width: 100,
className: 'date',
disableSortBy: true,
},
{
Header: intl.get('invoice_no'),
accessor: 'invoice.invoice_no',
width: 150,
className: 'invoice_number',
disableSortBy: true,
},
{
Header: intl.get('invoice_amount'),
accessor: 'invoice.balance',
className: 'invoice_amount',
},
{
Header: intl.get('amount_due'),
accessor: 'invoice.amount_due',
className: 'amount_due',
width: 100,
disableSortBy: true,
},
{
Header: intl.get('payment_amount'),
accessor: 'invoice.payment_amount',
className: 'payment_amount',
width: 100,
disableSortBy: true,
},
],
[],
);

2
client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
View File

@@ -22,7 +22,7 @@ export default function ReceiptDetailHeader() {
<h3 class="big-number">{receipt.formatted_amount}</h3>
</DetailItem>
<DetailItem
label={intl.get('receipt_no')}
label={intl.get('receipt.details.receipt_number')}
children={defaultTo(receipt.receipt_no, '-')}
/>
<DetailItem

1
client/src/containers/Purchases/PaymentMades/PaymentMadeUniversalSearch.js
View File

@@ -62,6 +62,7 @@ export const PaymentMadeUniversalSearchSelect = withDrawerActions(
* Payment made resource item to search item.
*/
const paymentMadeToSearch = (payment) => ({
id: payment.id,
text: payment.vendor.display_name,
subText: payment.formatted_payment_date,
label: payment.formatted_amount,

5
client/src/containers/Sales/PaymentReceives/PaymentReceiveUniversalSearch.js
View File

@@ -19,7 +19,7 @@ function PaymentReceiveUniversalSearchSelectComponent({
openDrawer,
}) {
if (resourceType === RESOURCES_TYPES.PAYMENT_RECEIVE) {
openDrawer('payment-receive-drawer', { paymentReceiveId: resourceId });
openDrawer('payment-receive-detail-drawer', { paymentReceiveId: resourceId });
}
return null;
}
@@ -58,10 +58,9 @@ export function PaymentReceiveUniversalSearchItem(
/**
* Transformes payment receives to search.
* @param {*} payment
* @returns
*/
const paymentReceivesToSearch = (payment) => ({
id: payment.id,
text: payment.customer.display_name,
subText: payment.formatted_payment_date,
label: payment.formatted_amount,

2
client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
View File

@@ -61,8 +61,6 @@ function PaymentReceiveActionsBar({
refresh();
};
console.log(fields, 'fields');
return (
<DashboardActionsBar>
<NavbarGroup>