QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10: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

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

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