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

feat: optimize expense and manual journal details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-21 17:57:03 +02:00
parent 13310b1aac
commit 5429643db5
5 changed files with 93 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Card } from 'components'; import { CommercialDocBox } from '../../../components';
import ExpenseDrawerActionBar from './ExpenseDrawerActionBar'; import ExpenseDrawerActionBar from './ExpenseDrawerActionBar';
import ExpenseDrawerHeader from './ExpenseDrawerHeader'; import ExpenseDrawerHeader from './ExpenseDrawerHeader';
@@ -16,15 +16,13 @@ export default function ExpenseDrawerDetails() {
<ExpenseDetailsRoot> <ExpenseDetailsRoot>
<ExpenseDrawerActionBar /> <ExpenseDrawerActionBar />
<div className="expense-drawer__content"> <CommercialDocBox>
<Card> <ExpenseDrawerHeader />
<ExpenseDrawerHeader /> <ExpenseDrawerTable />
<ExpenseDrawerTable /> <ExpenseDrawerFooter />
<ExpenseDrawerFooter /> </CommercialDocBox>
</Card>
</div>
</ExpenseDetailsRoot> </ExpenseDetailsRoot>
); );
} }
const ExpenseDetailsRoot = styled.div``; const ExpenseDetailsRoot = styled.div``;

51
src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
View File

@@ -1,8 +1,14 @@
import React from 'react'; import React from 'react';
import { T } from 'components'; import styled from 'styled-components';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
import { FormatNumber } from '../../../components'; import {
T,
TotalLines,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
import { FormatNumber, TotalLine } from '../../../components';
/** /**
* Footer details of expense readonly details. * Footer details of expense readonly details.
@@ -11,23 +17,26 @@ export default function ExpenseDrawerFooter() {
const { expense } = useExpenseDrawerContext(); const { expense } = useExpenseDrawerContext();
return ( return (
<div className="expense-drawer__content-footer"> <ExpenseDetailsFooterRoot>
<div class="total-lines"> <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<div class="total-lines__line total-lines__line--subtotal"> <TotalLine
<div class="title"> title={<T id={'expense.details.subtotal'} />}
<T id={'expense.details.subtotal'} /> value={<FormatNumber value={expense.total_amount} />}
</div> borderStyle={TotalLineBorderStyle.SingleDark}
<div class="amount"> />
{<FormatNumber value={expense.total_amount} />} <TotalLine
</div> title={<T id={'expense.details.total'} />}
</div> value={<FormatNumber value={expense.formatted_amount} />}
<div class="total-lines__line total-lines__line--total"> borderStyle={TotalLineBorderStyle.DoubleDark}
<div class="title"> textStyle={TotalLineTextStyle.Bold}
<T id={'expense.details.total'} /> />
</div> </ExpenseTotalLines>
<div class="amount">{expense.formatted_amount}</div> </ExpenseDetailsFooterRoot>
</div>
</div>
</div>
); );
} }
export const ExpenseDetailsFooterRoot = styled.div``;
export const ExpenseTotalLines = styled(TotalLines)`
margin-left: auto;
`;

64
src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
View File

@@ -2,65 +2,69 @@ import React from 'react';
import moment from 'moment'; import moment from 'moment';
import { defaultTo } from 'lodash'; import { defaultTo } from 'lodash';
import { Row, Col, DetailItem, DetailsMenu, Money } from 'components'; import {
import { FormattedMessage as T } from 'components'; CommercialDocHeader,
CommercialDocTopHeader,
Row,
Col,
DetailItem,
DetailsMenu,
Money,
FormattedMessage as T,
} from 'components';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider'; import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
/** /**
* Expense drawer content. * Expense drawer content.
*/ */
export default function ExpenseDrawerHeader() { export default function ExpenseDrawerHeader() {
const { const { expense } = useExpenseDrawerContext();
expense: {
total_amount,
payment_date,
currency_code,
reference_no,
description,
published_at,
},
} = useExpenseDrawerContext();
return ( return (
<div className={'expense-drawer__content-header'}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem name={'amount'} label={<T id={'full_amount'} />}> <DetailsMenu>
<h3 class="big-number"> <DetailItem name={'amount'} label={<T id={'full_amount'} />}>
<Money amount={total_amount} currency={currency_code} /> <h3 class="big-number">
</h3> <Money
</DetailItem> amount={expense.total_amount}
</DetailsMenu> currency={expense.currency_code}
/>
</h3>
</DetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<Row> <Row>
<Col xs={6}> <Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}> <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem name={'date'} label={<T id={'date'} />}> <DetailItem name={'date'} label={<T id={'date'} />}>
{moment(payment_date).format('YYYY MMM DD')} {moment(expense.payment_date).format('YYYY MMM DD')}
</DetailItem>
<DetailItem name={'currency'} label={<T id={'currency'} />}>
{currency_code}
</DetailItem> </DetailItem>
<DetailItem name={'reference'} label={<T id={'reference_no'} />}> <DetailItem name={'reference'} label={<T id={'reference_no'} />}>
{defaultTo(reference_no, '-')} {defaultTo(expense.reference_no, '-')}
</DetailItem> </DetailItem>
<DetailItem label={<T id={'published_at'} />}> <DetailItem label={<T id={'published_at'} />}>
{moment(published_at).format('YYYY MMM DD')} {moment(expense.published_at).format('YYYY MMM DD')}
</DetailItem> </DetailItem>
</DetailsMenu> </DetailsMenu>
</Col> </Col>
<Col xs={6}> <Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}> <DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem label={<T id={'description'} />}> <DetailItem label={<T id={'description'} />}>
{defaultTo(description, '—')} {defaultTo(expense.description, '—')}
</DetailItem> </DetailItem>
<DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem> <DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
</DetailsMenu> </DetailsMenu>
</Col> </Col>
</Row> </Row>
</div> </CommercialDocHeader>
); );
} }

17
src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Card } from 'components'; import { CommercialDocBox } from '../../../components';
import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar'; import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
import ManualJournalDrawerHeader from './ManualJournalDrawerHeader'; import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
@@ -16,16 +16,13 @@ export default function ManualJournalDrawerDetails() {
<ManualJournalDetailsRoot> <ManualJournalDetailsRoot>
<ManualJournalDrawerActionBar /> <ManualJournalDrawerActionBar />
<div className="journal-drawer__content"> <CommercialDocBox>
<Card> <ManualJournalDrawerHeader />
<ManualJournalDrawerHeader /> <ManualJournalDrawerTable />
<ManualJournalDrawerTable /> <ManualJournalDrawerFooter />
<ManualJournalDrawerFooter /> </CommercialDocBox>
</Card>
</div>
</ManualJournalDetailsRoot> </ManualJournalDetailsRoot>
); );
} }
const ManualJournalDetailsRoot = styled.div``;
const ManualJournalDetailsRoot = styled.div``;

29
src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
View File

@@ -6,6 +6,8 @@ import {
DetailsMenu, DetailsMenu,
DetailItem, DetailItem,
FormattedMessage as T, FormattedMessage as T,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components'; } from 'components';
import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider'; import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
@@ -25,12 +27,14 @@ export default function ManualJournalDrawerHeader() {
} = useManualJournalDrawerContext(); } = useManualJournalDrawerContext();
return ( return (
<div className={'journal-drawer__content-header'}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem name={'total'} label={<T id={'total'} />}> <DetailsMenu>
<h3 class="big-number">{formatted_amount}</h3> <DetailItem name={'total'} label={<T id={'total'} />}>
</DetailItem> <h3 class="big-number">{formatted_amount}</h3>
</DetailsMenu> </DetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<Row> <Row>
<Col xs={6}> <Col xs={6}>
@@ -50,16 +54,13 @@ export default function ManualJournalDrawerHeader() {
<DetailItem name={'currency'} label={<T id={'currency'} />}> <DetailItem name={'currency'} label={<T id={'currency'} />}>
{currency_code} {currency_code}
</DetailItem> </DetailItem>
<DetailItem label={<T id={'description'} />}>
{defaultTo(description, '—')}
</DetailItem>
</DetailsMenu> </DetailsMenu>
</Col> </Col>
</Row> </Row>
</CommercialDocHeader>
<div class="journal-drawer__content-description">
<b class="title">
<T id={'manual_journal.details.description'} />
</b>
: {defaultTo(description, '—')}
</div>
</div>
); );
} }