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

feat: optimize style of sale receipt details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-20 16:08:25 +02:00
parent ace3fdc569
commit 2a37497648
10 changed files with 267 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
View File

@@ -1,58 +1,88 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
import styled from 'styled-components';
import { FormatDate, DetailsMenu, DetailItem } from 'components';
import {
ButtonLink,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { Row, Col, FormatDate, DetailsMenu, DetailItem } from 'components';
import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
import { ReceiptDetailsStatus } from './components';
/**
* receipt detail content.
* Receipt details header.
*/
export default function ReceiptDetailHeader() {
const { receipt } = useReceiptDetailDrawerContext();
return (
<div className={clsx(ReceiptDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{receipt.formatted_amount}</h3>
</DetailItem>
<DetailItem
label={intl.get('receipt.details.receipt_number')}
children={defaultTo(receipt.receipt_number, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={receipt.customer?.display_name}
/>
<DetailItem
label={intl.get('receipt_date')}
children={<FormatDate value={receipt.receipt_date} />}
/>
<DetailItem
label={intl.get('closed_date')}
children={<FormatDate value={receipt.closed_at_date} />}
/>
</DetailsMenu>
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<AmountReceiptItem label={intl.get('amount')}>
<h3 class="big-number">{receipt.formatted_amount}</h3>
</AmountReceiptItem>
<DetailsMenu direction={'horizantal'}>
<DetailItem
label={intl.get('deposit_account')}
children={receipt.deposit_account?.name}
/>
<DetailItem
label={intl.get('reference')}
children={defaultTo(receipt.reference_no, '--')}
/>
<DetailItem
label={intl.get('receipt.details.created_at')}
children={<FormatDate value={receipt.created_at} />}
/>
</DetailsMenu>
</div>
<StatusReceiptItem>
<ReceiptDetailsStatus receipt={receipt} />
</StatusReceiptItem>
</DetailsMenu>
</CommercialDocTopHeader>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
label={intl.get('receipt.details.receipt_number')}
children={defaultTo(receipt.receipt_number, '-')}
/>
<DetailItem label={intl.get('customer_name')}>
<ButtonLink>{receipt.customer?.display_name} </ButtonLink>
</DetailItem>
<DetailItem
label={intl.get('receipt_date')}
children={<FormatDate value={receipt.receipt_date} />}
/>
<DetailItem
label={intl.get('closed_date')}
children={<FormatDate value={receipt.closed_at_date} />}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
direction={'horizantal'}
minLabelSize={'180px'}
textAlign={'right'}
>
<DetailItem
label={intl.get('deposit_account')}
children={receipt.deposit_account?.name}
/>
<DetailItem
label={intl.get('reference')}
children={defaultTo(receipt.reference_no, '--')}
/>
<DetailItem
label={intl.get('receipt.details.created_at')}
children={<FormatDate value={receipt.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}
const AmountReceiptItem = styled(DetailItem)`
width: 50%;
`;
const StatusReceiptItem = styled(DetailItem)`
width: 50%;
text-align: right;
`;