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

feat: add style of vendor credit.

Browse Source
This commit is contained in:
elforjani13
2021-12-20 16:11:10 +02:00
parent dbe067a27c
commit 828c33bee1
8 changed files with 182 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.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, T, DetailsMenu, DetailItem } from 'components';
import {
FormatDate,
T,
Row,
Col,
DetailsMenu,
DetailItem,
ButtonLink,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
import { VendorCreditDetailsStatus } from './utils';
/**
* Vendor credit detail drawer header.
@@ -14,47 +23,72 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
export default function VendorCreditDetailHeader() {
const { vendorCredit } = useVendorCreditDetailDrawerContext();
return (
<div className={clsx(VendorCreditDetailCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<span class="big-number">{vendorCredit.formatted_amount}</span>
</DetailItem>
<DetailItem
label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
children={defaultTo(vendorCredit.vendor_credit_number, '-')}
/>
<DetailItem
label={intl.get('vendor_name')}
children={vendorCredit.vendor?.display_name}
/>
<DetailItem
label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
children={
<FormatDate value={vendorCredit.formatted_vendor_credit_date} />
}
/>
<DetailItem
label={intl.get('vendor_credit.drawer.label_credits_remaining')}
children={vendorCredit.formatted_credits_remaining}
/>
</DetailsMenu>
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<AmountItem label={intl.get('amount')}>
<span class="big-number">{vendorCredit.formatted_amount}</span>
</AmountItem>
<StatusItem>
<VendorCreditDetailsStatus vendorCredit={vendorCredit} />
</StatusItem>
</DetailsMenu>
</CommercialDocTopHeader>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
>
{defaultTo(vendorCredit.vendor_credit_number, '-')}
</DetailItem>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('reference')}
children={vendorCredit.reference_no}
/>
<DetailItem label={intl.get('vendor_name')}>
<ButtonLink>{vendorCredit.vendor?.display_name}</ButtonLink>
</DetailItem>
<DetailItem
label={intl.get('note')}
children={defaultTo(vendorCredit.note, '-')}
/>
<DetailItem
label={<T id={'vendor_credit.drawer.label_created_at'} />}
children={<FormatDate value={vendorCredit.created_at} />}
/>
</DetailsMenu>
</div>
<DetailItem
label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
>
<FormatDate value={vendorCredit.formatted_vendor_credit_date} />
</DetailItem>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('vendor_credit.drawer.label_credits_remaining')}
>
<strong>{vendorCredit.formatted_credits_remaining}</strong>
</DetailItem>
<DetailItem
label={intl.get('reference')}
children={defaultTo(vendorCredit.reference_no, '-')}
/>
<DetailItem
label={intl.get('note')}
children={defaultTo(vendorCredit.note, '-')}
/>
<DetailItem
label={<T id={'vendor_credit.drawer.label_created_at'} />}
children={<FormatDate value={vendorCredit.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}
const StatusItem = styled(DetailItem)`
width: 50%;
text-align: right;
`;
const AmountItem = styled(DetailItem)`
width: 50%;
`;