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

feat: add payment receive & bill detail footer.

Browse Source
This commit is contained in:
elforjani13
2021-12-26 13:28:25 +02:00
parent 4a42fa4edc
commit 80d86b01de
8 changed files with 143 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/containers/Drawers/BillDrawer/BillDetailFooter.js
View File

@@ -1,51 +1,27 @@
import React from 'react';
import styled from 'styled-components';
import {
TotalLineBorderStyle,
TotalLineTextStyle,
FormatNumber,
CommercialDocFooter,
T,
TotalLines,
TotalLine,
} from '../../../components';
If,
DetailsMenu,
DetailItem,
} from 'components';
import { useBillDrawerContext } from './BillDrawerProvider';
/**
* Bill read-only details footer.
* Bill detail footer.
* @returns {React.JSX}
*/
export function BillDetailFooter() {
export default function BillDetailFooter() {
const { bill } = useBillDrawerContext();
return (
<BillDetailsFooterRoot>
<BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'bill.details.subtotal'} />}
value={<FormatNumber value={bill.amont} />}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'bill.details.total'} />}
value={bill.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'bill.details.payment_amount'} />}
value={bill.formatted_payment_amount}
/>
<TotalLine
title={<T id={'bill.details.due_amount'} />}
value={bill.formatted_due_amount}
/>
</BillTotalLines>
</BillDetailsFooterRoot>
<CommercialDocFooter>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<If condition={bill.note}>
<DetailItem label={<T id={'note'} />}>{bill.note}</DetailItem>
</If>
</DetailsMenu>
</CommercialDocFooter>
);
}
export const BillDetailsFooterRoot = styled.div``;
export const BillTotalLines = styled(TotalLines)`
margin-left: auto;
`;

5
src/containers/Drawers/BillDrawer/BillDetailTab.js
View File

@@ -4,8 +4,8 @@ import { CommercialDocBox } from 'components';
import BillDetailHeader from './BillDetailHeader';
import BillDetailTable from './BillDetailTable';
import { BillDetailFooter } from './BillDetailFooter';
import { BillDetailTableFooter } from './BillDetailTableFooter';
import BillDetailFooter from './BillDetailFooter';
/**
* Bill detail panel tab.
@@ -15,6 +15,7 @@ export default function BillDetailTab() {
<CommercialDocBox>
<BillDetailHeader />
<BillDetailTable />
<BillDetailTableFooter />
<BillDetailFooter />
</CommercialDocBox>
);

51
src/containers/Drawers/BillDrawer/BillDetailTableFooter.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import styled from 'styled-components';
import {
TotalLineBorderStyle,
TotalLineTextStyle,
FormatNumber,
T,
TotalLines,
TotalLine,
} from '../../../components';
import { useBillDrawerContext } from './BillDrawerProvider';
/**
* Bill read-only details table footer.
*/
export function BillDetailTableFooter() {
const { bill } = useBillDrawerContext();
return (
<BillDetailsFooterRoot>
<BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'bill.details.subtotal'} />}
value={<FormatNumber value={bill.amont} />}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'bill.details.total'} />}
value={bill.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'bill.details.payment_amount'} />}
value={bill.formatted_payment_amount}
/>
<TotalLine
title={<T id={'bill.details.due_amount'} />}
value={bill.formatted_due_amount}
/>
</BillTotalLines>
</BillDetailsFooterRoot>
);
}
export const BillDetailsFooterRoot = styled.div``;
export const BillTotalLines = styled(TotalLines)`
margin-left: auto;
`;

44
src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailFooter.js
View File

@@ -1,13 +1,11 @@
import React from 'react';
import styled from 'styled-components';
import {
FormatNumber,
TotalLineTextStyle,
TotalLineBorderStyle,
CommercialDocFooter,
T,
TotalLine,
TotalLines,
If,
DetailsMenu,
DetailItem,
} from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
@@ -17,30 +15,16 @@ import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
*/
export default function PaymentReceiveDetailFooter() {
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<PaymentReceiveDetailsFooterRoot>
<PaymentReceiveTotalLines
labelColWidth={'180px'}
amountColWidth={'180px'}
>
<TotalLine
title={<T id={'payment_receive.details.subtotal'} />}
value={<FormatNumber value={paymentReceive.amount} />}
/>
<TotalLine
title={<T id={'payment_receive.details.total'} />}
value={paymentReceive.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</PaymentReceiveTotalLines>
</PaymentReceiveDetailsFooterRoot>
<CommercialDocFooter>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<If condition={paymentReceive.statement}>
<DetailItem label={<T id={'payment_receive.details.statement'} />}>
{paymentReceive.statement}
</DetailItem>
</If>
</DetailsMenu>
</CommercialDocFooter>
);
}
export const PaymentReceiveDetailsFooterRoot = styled.div``;
export const PaymentReceiveTotalLines = styled(TotalLines)`
margin-left: auto;
`;

2
src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
View File

@@ -5,6 +5,7 @@ import { CommercialDocBox } from 'components';
import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
import PaymentReceiveDetailTableFooter from './PaymentReceiveDetailTableFooter';
import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
/**
@@ -17,6 +18,7 @@ export default function PaymentReceiveDetailTab() {
<CommercialDocBox>
<PaymentReceiveDetailHeader />
<PaymentReceiveDetailTable />
<PaymentReceiveDetailTableFooter />
<PaymentReceiveDetailFooter />
</CommercialDocBox>
</PaymentReceiveDetailsTabPanelRoot>

46
src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTableFooter.js Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import styled from 'styled-components';
import {
FormatNumber,
TotalLineTextStyle,
TotalLineBorderStyle,
T,
TotalLine,
TotalLines,
} from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
/**
* Payment receive detail table footer.
* @returns {React.JSX}
*/
export default function PaymentReceiveDetailTableFooter() {
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<PaymentReceiveDetailsFooterRoot>
<PaymentReceiveTotalLines
labelColWidth={'180px'}
amountColWidth={'180px'}
>
<TotalLine
title={<T id={'payment_receive.details.subtotal'} />}
value={<FormatNumber value={paymentReceive.amount} />}
/>
<TotalLine
title={<T id={'payment_receive.details.total'} />}
value={paymentReceive.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</PaymentReceiveTotalLines>
</PaymentReceiveDetailsFooterRoot>
);
}
export const PaymentReceiveDetailsFooterRoot = styled.div``;
export const PaymentReceiveTotalLines = styled(TotalLines)`
margin-left: auto;
`;

3
src/lang/ar/index.json
View File

@@ -1659,7 +1659,8 @@
"transactions": "معاملات ",
"item.drawer_transactions_by": "معاملات حسب :",
"item.drawer_quantity_sold": "الكمية المباعة",
"journal_entries.amount_displayed_base_currency":"يتم عرض المبلغ بالعملة الأساسية الخاصة بك "
"journal_entries.amount_displayed_base_currency":"يتم عرض المبلغ بالعملة الأساسية الخاصة بك ",
"inventory_adjustment.column.product":"المنتج"
}

10
src/lang/en/index.json
View File

@@ -1195,6 +1195,7 @@
"payment_receive.details.payment_number": "Payment #",
"payment_receive.details.total": "TOTAL",
"payment_receive.details.subtotal": "Subtotal",
"payment_receive.details.statement": "Statement",
"estimate.details.estimate_number": "Estimate #",
"estimate.details.subtotal": "Subtotal",
"estimate.details.total": "TOTAL",
@@ -1202,12 +1203,15 @@
"estimate.details.due_amount": "Due amount",
"estimate.details.note": "Note",
"estimate.details.created_at": "Created at",
"estimate.details.terms_conditions": "Terms & Conditions",
"receipt.details.receipt_number": "Receipt #",
"receipt.details.subtotal": "Subtotal",
"receipt.details.total": "TOTAL",
"receipt.details.payment_amount": "Payment amount",
"receipt.details.due_amount": "Due amount",
"receipt.details.created_at": "Created at",
"receipt.details.receipt_message": "Receipt Message",
"receipt.details.statement": "Statement",
"invoice.details.created_at": "Created at",
"invoice.details.total": "TOTAL",
"invoice.details.subtotal": "Subtotal",
@@ -1523,6 +1527,7 @@
"credit_note.drawer.label_subtotal": "Subtotal",
"credit_note.drawer.label_refund_transactions": "Refund Transactions",
"credit_note.drawer.label_invoices_reconciled": "Invoices Reconciled",
"credit_note.drawer.terms_conditions": "Terms Conditions",
"sidebar_vendor_credits": "Vendor Credits",
"vendor_credits.lable_vendor_credit_list": "Vendor Credits List",
@@ -1655,5 +1660,8 @@
"item.drawer_transactions_by": "Transactions by:",
"item.drawer_quantity_sold": "Quantity Sold",
"role_name": "Role name",
"journal_entries.amount_displayed_base_currency":"Amount is displayed in your base currency"
"journal_entries.amount_displayed_base_currency":"Amount is displayed in your base currency",
"inventory_adjustment.column.product":"Product",
"convert_to_credit_note":"Convert to Credit Note",
"convert_to_vendor_credit":"Convert to Vendor Credit"
}