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

feat: add style of payment made.

Browse Source
This commit is contained in:
elforjani13
2021-12-20 16:47:48 +02:00
parent 961082c50b
commit 0d924464ea
7 changed files with 149 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.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 { DetailsMenu, DetailItem, FormatDate } from 'components';
import {
Row,
Col,
FormatDate,
DetailsMenu,
DetailItem,
CommercialDocHeader,
CommercialDocTopHeader,
ButtonLink,
} from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/**
* Payment made - detail panel - header.
*/
@@ -15,39 +21,53 @@ export default function PaymentMadeDetailHeader() {
const { paymentMade } = usePaymentMadeDetailContext();
return (
<div className={clsx(PaymentDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<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={<FormatDate value={paymentMade.payment_date} />}
/>
</DetailsMenu>
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{paymentMade.formatted_amount}</h3>
</DetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<DetailsMenu direction={'horizantal'} minLabelSize={'160px'}>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentMade.statement, '-')}
/>
<DetailItem
label={intl.get('created_at')}
children={<FormatDate value={paymentMade.created_at} />}
/>
</DetailsMenu>
</div>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
label={intl.get('payment_made.details.payment_number')}
children={defaultTo(paymentMade.payment_number, '-')}
/>
<DetailItem label={intl.get('vendor_name')}>
<ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
</DetailItem>
<DetailItem
label={intl.get('payment_account')}
children={paymentMade.payment_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={<FormatDate value={paymentMade.payment_date} />}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentMade.statement, '-')}
/>
<DetailItem
label={intl.get('created_at')}
children={<FormatDate value={paymentMade.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}