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

feat: add style of bill.

Browse Source
This commit is contained in:
elforjani13
2021-12-20 15:31:03 +02:00
parent a0098382e7
commit 3511348d04
15 changed files with 265 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/containers/Drawers/BillDrawer/BillDetailHeader.js
View File

@@ -1,12 +1,21 @@
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 {
FormatDate,
DetailsMenu,
DetailItem,
ButtonLink,
Row,
Col,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { useBillDrawerContext } from './BillDrawerProvider';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
import { BillDetailsStatus } from './utils';
/**
* Bill detail header.
@@ -15,44 +24,65 @@ export default function BillDetailHeader() {
const { bill } = useBillDrawerContext();
return (
<div className={clsx(BillDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem
label={intl.get('amount')}
children={<h3 class="big-number">{bill.formatted_amount}</h3>}
/>
<DetailItem
label={intl.get('bill.details.bill_number')}
children={defaultTo(bill.bill_number, '-')}
/>
<DetailItem
label={intl.get('bill_date')}
children={<FormatDate value={bill.bill_date} />}
/>
<DetailItem
label={intl.get('vendor_name')}
children={bill.vendor?.display_name}
/>
<DetailItem
label={intl.get('due_date')}
children={<FormatDate value={bill.due_date} />}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('due_amount')}
children={bill.formatted_due_amount}
/>
<DetailItem
label={intl.get('reference')}
children={defaultTo(bill.reference_no, '--')}
/>
<DetailItem
label={intl.get('bill.details.created_at')}
children={<FormatDate value={bill.created_at} />}
/>
</DetailsMenu>
</div>
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<AmountDetailItem label={intl.get('amount')}>
<h3 class="big-number">{bill.formatted_amount}</h3>
</AmountDetailItem>
<StatusDetailItem>
<BillDetailsStatus bill={bill} />
</StatusDetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem label={intl.get('bill_date')}>
<FormatDate value={bill.bill_date} />
</DetailItem>
<DetailItem label={intl.get('due_date')}>
<FormatDate value={bill.due_date} />
</DetailItem>
<DetailItem label={intl.get('vendor_name')}>
<ButtonLink>{bill.vendor?.display_name}</ButtonLink>
</DetailItem>
<DetailItem label={intl.get('bill.details.bill_number')}>
{defaultTo(bill.bill_number, '-')}
</DetailItem>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
direction={'horizantal'}
minLabelSize={'140px'}
textAlign={'right'}
>
<DetailItem label={intl.get('due_amount')}>
<strong>{bill.formatted_due_amount}</strong>
</DetailItem>
<DetailItem
label={intl.get('reference')}
children={defaultTo(bill.reference_no, '--')}
/>
<DetailItem
label={intl.get('bill.details.created_at')}
children={<FormatDate value={bill.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}
const StatusDetailItem = styled(DetailItem)`
width: 50%;
text-align: right;
position: relative;
top: -5px;
`;
const AmountDetailItem = styled(DetailItem)`
width: 50%;
`;