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

fix: BIG-222 Manual journal details entries table footer.

Browse Source
This commit is contained in:
a.bouhuolia
2022-01-02 16:37:37 +02:00
parent 7ab7456d08
commit 40bc7d4e99
3 changed files with 75 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Table/index.js Normal file
View File

@@ -0,0 +1,33 @@
import styled from 'styled-components';
export const Table = styled.table`
width: 100%;
vertical-align: top;
border-color: #dee2e6;
border-spacing: 0;
`;
export const TBody = styled.tbody``;
export const TR = styled.tr``;
export const TD = styled.td`
padding: 0.5rem 0.5rem;
border-bottom-width: 1px;
border-bottom-color: inherit;
border-bottom-style: solid;
${(props) =>
props.textAlign === 'right' &&
`
text-align: right;`}
`;
export const TRDarkSingleLine = styled(TR)`
${TD} {
border-bottom: 1px solid #000;
}
`;
export const TRDarkDoubleLines = styled(TR)`
${TD} {
border-bottom: 3px double #000;
}
`;

1
src/components/index.js
View File

@@ -94,6 +94,7 @@ export * from './CommercialDoc';
export * from './Card'; export * from './Card';
export * from './Customers' export * from './Customers'
export * from './Vendors' export * from './Vendors'
export * from './Table';
const Hint = FieldHint; const Hint = FieldHint;

59
src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
View File

@@ -1,7 +1,15 @@
import React from 'react'; import React from 'react';
import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider'; import styled from 'styled-components';
import { T, FormatNumber } from '../../../components'; import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
import {
TRDarkSingleLine,
TRDarkDoubleLines,
T,
FormatNumber,
Table,
TD,
} from '../../../components';
/** /**
* Manual journal readonly details footer. * Manual journal readonly details footer.
@@ -13,26 +21,41 @@ export default function ManualJournalDrawerFooter() {
return ( return (
<div className="journal-drawer__content-footer"> <div className="journal-drawer__content-footer">
<div class="total-lines"> <JournalTotalTable>
<div class="total-lines__line total-lines__line--subtotal"> <TRDarkSingleLine>
<div class="title"> <TDLabel>
<T id={'manual_journal.details.subtotal'} /> <T id={'manual_journal.details.subtotal'} />
</div> </TDLabel>
<div class="debit"> <TDAmount textAlign={'right'}>
<FormatNumber value={amount} /> <FormatNumber value={amount} />
</div> </TDAmount>
<div class="credit"> <TDAmount textAlign={'right'}>
<FormatNumber value={amount} /> <FormatNumber value={amount} />
</div> </TDAmount>
</div> </TRDarkSingleLine>
<div class="total-lines__line total-lines__line--total">
<div class="title"> <TRDarkDoubleLines>
<TDLabel>
<T id={'manual_journal.details.total'} /> <T id={'manual_journal.details.total'} />
</div> </TDLabel>
<div class="debit">{formatted_amount}</div> <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
<div class="credit">{formatted_amount}</div> <TDAmount textAlign={'right'}>{formatted_amount}</TDAmount>
</div> </TRDarkDoubleLines>
</div> </JournalTotalTable>
</div> </div>
); );
} }
const JournalTotalTable = styled(Table)`
font-weight: 600;
width: auto;
margin-left: auto;
`;
const TDLabel = styled(TD)`
width: 220px;
`;
const TDAmount = styled(TD)`
width: 155px;
`;