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

feat: optimize style of sale estimate details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-20 14:12:19 +02:00
parent a953236bff
commit a0098382e7
5 changed files with 108 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
View File

@@ -1,13 +1,19 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
import {
CommercialDocHeader,
CommercialDocTopHeader,
FormatDate,
T,
DetailsMenu,
DetailItem,
Row,
Col,
} from 'components';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
/**
* Estimate read-only details drawer header.
*/
@@ -15,39 +21,54 @@ export default function EstimateDetailHeader() {
const { estimate } = useEstimateDetailDrawerContext();
return (
<div className={clsx(EstimateDetailsCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<span class="big-number">{estimate.formatted_amount}</span>
</DetailItem>
<DetailItem
label={intl.get('estimate.details.estimate_number')}
children={defaultTo(estimate.estimate_number, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={estimate.customer?.display_name}
/>
<DetailItem
label={intl.get('estimate_date')}
children={estimate.formatted_estimate_date}
/>
<DetailItem
label={intl.get('expiration_date')}
children={estimate.formatted_expiration_date}
/>
</DetailsMenu>
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<span class="big-number">{estimate.formatted_amount}</span>
</DetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('reference')}
children={defaultTo(estimate.reference, '-')}
/>
<DetailItem
label={<T id={'estimate.details.created_at'} />}
children={<FormatDate value={estimate.created_at} />}
/>
</DetailsMenu>
</div>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
label={intl.get('estimate.details.estimate_number')}
children={defaultTo(estimate.estimate_number, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={estimate.customer?.display_name}
/>
<DetailItem
label={intl.get('estimate_date')}
children={estimate.formatted_estimate_date}
/>
<DetailItem
label={intl.get('expiration_date')}
children={estimate.formatted_expiration_date}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('reference')}
children={defaultTo(estimate.reference, '-')}
/>
<DetailItem
label={<T id={'estimate.details.created_at'} />}
children={<FormatDate value={estimate.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}