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

feat: optmize style of payment receive details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-20 14:33:48 +02:00
parent a0098382e7
commit ace3fdc569
8 changed files with 167 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
View File

@@ -1,13 +1,19 @@
import React from 'react';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { defaultTo } from 'lodash';
import { FormatDate, DetailsMenu, DetailItem } from 'components';
import {
Row,
Col,
FormatDate,
DetailsMenu,
DetailItem,
CommercialDocHeader,
CommercialDocTopHeader,
ButtonLink,
} from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive detail header.
*/
@@ -15,42 +21,54 @@ export default function PaymentReceiveDetailHeader() {
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<div className={clsx(PaymentDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem
label={intl.get('amount')}
children={
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<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={<FormatDate value={paymentReceive.payment_date} />}
/>
</DetailsMenu>
</DetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentReceive.statement, '—')}
/>
<DetailItem
label={intl.get('created_at')}
children={<FormatDate value={paymentReceive.created_at} />}
/>
</DetailsMenu>
</div>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
label={intl.get('payment_receive.details.payment_number')}
children={defaultTo(paymentReceive.payment_receive_no, '-')}
/>
<DetailItem label={intl.get('customer_name')}>
<ButtonLink>{paymentReceive.customer?.display_name}</ButtonLink>
</DetailItem>
<DetailItem
label={intl.get('deposit_account')}
children={paymentReceive.deposit_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={<FormatDate value={paymentReceive.payment_date} />}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentReceive.statement, '—')}
/>
<DetailItem
label={intl.get('created_at')}
children={<FormatDate value={paymentReceive.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}