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

refactor: Total lines of commercial documents.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-21 16:51:47 +02:00
parent e2349f1951
commit 588995e759
39 changed files with 447 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/TotalLines/TotalLines.module.scss
View File

@@ -1,12 +0,0 @@
.total_lines {}
.total_line {
display: flex;
border-bottom: 1px solid #d2dde2;
:global .amount,
:global .title{
padding: 8px;
}
}

88
src/components/TotalLines/index.js
View File

@@ -1,23 +1,93 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import TotalLinesCls from './TotalLines.module.scss';
export const TotalLineBorderStyle = {
SingleDark: 'SingleDark',
DoubleDark: 'DoubleDark',
};
export function TotalLines({ children, className }) {
export const TotalLineTextStyle = {
Regular: 'Regular',
Bold: 'Bold',
};
export function TotalLines({
children,
amountColWidth,
labelColWidth,
className,
}) {
return (
<div className={clsx('total_lines', TotalLinesCls.total_lines, className)}>
<TotalLinesRoot
className={className}
amountColWidth={amountColWidth}
labelColWidth={labelColWidth}
>
{children}
</div>
</TotalLinesRoot>
);
}
export function TotalLine({ title, value, className }) {
export function TotalLine({ title, value, borderStyle, textStyle, className }) {
return (
<div
className={clsx('total_lines_line', TotalLinesCls.total_line, className)}
<TotalLineRoot
borderStyle={borderStyle}
textStyle={textStyle}
className={className}
>
<div class="title">{title}</div>
<div class="amount">{value}</div>
</div>
</TotalLineRoot>
);
}
export const TotalLinesRoot = styled.div`
display: table;
${(props) =>
props.amountColWidth &&
`
.amount{
width: ${props.amountColWidth}
}
`}
${(props) =>
props.labelColWidth &&
`
.title{
width: ${props.labelColWidth}
}
`}
`;
export const TotalLineRoot = styled.div`
display: table-row;
.amount,
.title {
display: table-cell;
padding: 8px;
border-bottom: 1px solid #d2dde2;
${(props) =>
props.borderStyle === TotalLineBorderStyle.DoubleDark &&
`
border-bottom: 3px double #000;
`}
${(props) =>
props.borderStyle === TotalLineBorderStyle.SingleDark &&
`
border-bottom: 1px double #000;
`}
${(props) =>
props.textStyle === TotalLineTextStyle.Bold &&
`
font-weight: 600;
`}
}
.amount {
text-align: right;
}
`;

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

@@ -1,11 +1,16 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { FormatNumber, T, TotalLines, TotalLine } from '../../../components';
import {
TotalLineBorderStyle,
TotalLineTextStyle,
FormatNumber,
T,
TotalLines,
TotalLine,
} from '../../../components';
import { useBillDrawerContext } from './BillDrawerProvider';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
/**
* Bill read-only details footer.
*/
@@ -13,29 +18,34 @@ export function BillDetailFooter() {
const { bill } = useBillDrawerContext();
return (
<div className={clsx(BillDrawerCls.detail_panel_footer)}>
<TotalLines>
<BillDetailsFooterRoot>
<BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'bill.details.subtotal'} />}
value={<FormatNumber value={bill.amount} />}
className={BillDrawerCls.total_line_subtotal}
value={<FormatNumber value={bill.amont} />}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'bill.details.total'} />}
value={bill.formatted_amount}
className={BillDrawerCls.total_line_total}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'bill.details.payment_amount'} />}
value={bill.formatted_payment_amount}
className={BillDrawerCls.total_line_payment}
/>
<TotalLine
title={<T id={'bill.details.due_amount'} />}
value={bill.formatted_due_amount}
className={BillDrawerCls.total_line_dueAmount}
/>
</TotalLines>
</div>
</BillTotalLines>
</BillDetailsFooterRoot>
);
}
export const BillDetailsFooterRoot = styled.div``;
export const BillTotalLines = styled(TotalLines)`
margin-left: auto;
`;

8
src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerActionBar.js
View File

@@ -1,9 +1,8 @@
import React from 'react';
import Icon from 'components/Icon';
import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
import { Can, FormattedMessage as T } from 'components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { Can, FormattedMessage as T, DrawerActionsBar } from 'components';
import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { AbilitySubject, CashflowAction } from '../../../common/abilityOption';
@@ -25,7 +24,7 @@ function CashflowTransactionDrawerActionBar({
return (
<Can I={CashflowAction.Delete} a={AbilitySubject.Cashflow}>
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
@@ -35,8 +34,9 @@ function CashflowTransactionDrawerActionBar({
onClick={handleDeleteCashflowTransaction}
/>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
</Can>
);
}
export default compose(withAlertsActions)(CashflowTransactionDrawerActionBar);

1
src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.js
View File

@@ -13,6 +13,7 @@ export default function CashflowTransactionDrawerDetails() {
return (
<div className={'cashflow-drawer'}>
<CashflowTransactionDrawerActionBar />
<div className="cashflow-drawer__content">
<Card>
<CashflowTransactionDrawerHeader />

69
src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerHeader.js
View File

@@ -5,6 +5,10 @@ import {
DetailItem,
FormatDate,
FormattedMessage as T,
Row,
Col,
CommercialDocTopHeader,
CommercialDocHeader,
} from 'components';
import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -24,40 +28,49 @@ export default function CashflowTransactionDrawerHeader() {
} = useCashflowTransactionDrawerContext();
return (
<div className={'cashflow-drawer__content-header'}>
<DetailsMenu>
<DetailItem name={'total'} label={<T id={'total'} />}>
<h3 class="amount">{formatted_amount}</h3>
</DetailItem>
<CommercialDocHeader>
<CommercialDocHeader>
<DetailsMenu>
<DetailItem name={'total'} label={<T id={'total'} />}>
<h3 class="amount">{formatted_amount}</h3>
</DetailItem>
</DetailsMenu>
</CommercialDocHeader>
<DetailItem
name={'transaction_type'}
label={<T id={'cash_flow_drawer.label_transaction_type'} />}
>
{transaction_type}
</DetailItem>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
name={'transaction_type'}
label={<T id={'cash_flow_drawer.label_transaction_type'} />}
>
{transaction_type}
</DetailItem>
<DetailItem
name={'transaction_number'}
label={<T id={'cash_flow.drawer.label_transaction_no'} />}
>
{transaction_number}
</DetailItem>
<DetailItem
label={<T id={'date'} />}
children={<FormatDate value={date} />}
/>
<DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
{defaultTo(reference_no, '-')}
</DetailItem>
</DetailsMenu>
<DetailItem
name={'transaction_number'}
label={<T id={'cash_flow.drawer.label_transaction_no'} />}
>
{transaction_number}
</DetailItem>
<div class="cashflow-drawer__content-description">
<DetailItem label={<T id={'date'} />}>
<FormatDate value={date} />
</DetailItem>
<DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
{defaultTo(reference_no, '-')}
</DetailItem>
</DetailsMenu>
</Col>
</Row>
{/* <div class="cashflow-drawer__content-description">
<b class="title">
<T id={'description'} />
</b>
: {defaultTo(description, '—')}
</div>
</div>
</div> */}
</CommercialDocHeader>
);
}

8
src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTable.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { DataTable, If, FormattedMessage as T } from 'components';
import { CommercialDocEntriesTable } from 'components';
import { useCashflowTransactionColumns } from './utils';
import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
@@ -14,9 +14,5 @@ export default function CashflowTransactionDrawerTable() {
cashflowTransaction: { transactions },
} = useCashflowTransactionDrawerContext();
return (
<div className="cashflow-drawer__content-table">
<DataTable columns={columns} data={transactions} />
</div>
);
return <CommercialDocEntriesTable columns={columns} data={transactions} />;
}

32
src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerFooter.js
View File

@@ -1,11 +1,15 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { T, TotalLines, TotalLine, If } from 'components';
import {
T,
TotalLines,
TotalLine,
FormatNumber,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
import { FormatNumber } from '../../../components';
import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
/**
* Credit note details panel footer.
@@ -14,19 +18,25 @@ export default function CreditNoteDetailDrawerFooter() {
const { creditNote } = useCreditNoteDetailDrawerContext();
return (
<div className={clsx(CreditNoteDetailCls.detail_panel_footer)}>
<TotalLines className={clsx(CreditNoteDetailCls.total_lines)}>
<CreditNoteDetailsFooterRoot>
<CreditNoteTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'credit_note.drawer.label_subtotal'} />}
value={<FormatNumber value={creditNote.formatted_amount} />}
className={CreditNoteDetailCls.total_line_subtotal}
/>
<TotalLine
title={<T id={'credit_note.drawer.label_total'} />}
value={creditNote.formatted_amount}
className={CreditNoteDetailCls.total_line_total}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</TotalLines>
</div>
</CreditNoteTotalLines>
</CreditNoteDetailsFooterRoot>
);
}
export const CreditNoteDetailsFooterRoot = styled.div``;
export const CreditNoteTotalLines = styled(TotalLines)`
margin-left: auto;
`;

4
src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailPanel.js
View File

@@ -4,7 +4,7 @@ import { CommercialDocBox } from 'components';
import CreditNoteDetailHeader from './CreditNoteDetailHeader';
import CreditNoteDetailTable from './CreditNoteDetailTable';
// import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
/**
* Credit note details panel.
@@ -14,7 +14,7 @@ export default function CreditNoteDetailPanel() {
<CommercialDocBox>
<CreditNoteDetailHeader />
<CreditNoteDetailTable />
{/* <CreditNoteDetailDrawerFooter /> */}
<CreditNoteDetailDrawerFooter />
</CommercialDocBox>
);
}

41
src/containers/Drawers/EstimateDetailDrawer/EstimateDetailFooter.js
View File

@@ -1,11 +1,15 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { T, TotalLines, TotalLine, If } from 'components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
FormatNumber,
} from 'components';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
import { FormatNumber } from '../../../components';
import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
/**
* Estimate details panel footer content.
@@ -14,27 +18,26 @@ export default function EstimateDetailFooter() {
const { estimate } = useEstimateDetailDrawerContext();
return (
<div className={clsx(EstimateDetailsCls.detail_panel_footer)}>
<TotalLines className={clsx(EstimateDetailsCls.total_lines)}>
<EstimateDetailsFooterRoot>
<EstimateTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'estimate.details.subtotal'} />}
value={<FormatNumber value={estimate.amount} />}
className={EstimateDetailsCls.total_line_subtotal}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'estimate.details.total'} />}
value={estimate.formatted_amount}
className={EstimateDetailsCls.total_line_total}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</TotalLines>
<If condition={false}>
<div className={clsx(EstimateDetailsCls.detail_panel_note)}>
<p>
<b><T id={'estimate.details.note'} />:</b> --
</p>
</div>
</If>
</div>
</EstimateTotalLines>
</EstimateDetailsFooterRoot>
);
}
export const EstimateDetailsFooterRoot = styled.div``;
export const EstimateTotalLines = styled(TotalLines)`
margin-left: auto;
`;

14
src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
View File

@@ -8,15 +8,17 @@ import {
Intent,
NavbarDivider,
} from '@blueprintjs/core';
import { Can, FormattedMessage as T } from 'components';
import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
import { ExpenseAction, AbilitySubject } from '../../../common/abilityOption';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
import { compose } from 'utils';
/**
* Expense drawer action bar.
*/
@@ -28,6 +30,8 @@ function ExpenseDrawerActionBar({
closeDrawer,
}) {
const history = useHistory();
// Expense drawer context.
const { expense } = useExpenseDrawerContext();
// Handle the expense edit action.
@@ -42,7 +46,7 @@ function ExpenseDrawerActionBar({
};
return (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Can I={ExpenseAction.Edit} a={AbilitySubject.Expense}>
<Button
@@ -63,7 +67,7 @@ function ExpenseDrawerActionBar({
/>
</Can>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

2
src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
View File

@@ -2,8 +2,6 @@ import React from 'react';
import { DrawerBody } from 'components';
import 'style/components/Drawers/ExpenseDrawer.scss';
import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
import ExpenseDrawerDetails from './ExpenseDrawerDetails';

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

@@ -1,4 +1,5 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
@@ -12,7 +13,7 @@ import ExpenseDrawerFooter from './ExpenseDrawerFooter';
*/
export default function ExpenseDrawerDetails() {
return (
<div className={'expense-drawer'}>
<ExpenseDetailsRoot>
<ExpenseDrawerActionBar />
<div className="expense-drawer__content">
@@ -22,6 +23,8 @@ export default function ExpenseDrawerDetails() {
<ExpenseDrawerFooter />
</Card>
</div>
</div>
</ExpenseDetailsRoot>
);
}
const ExpenseDetailsRoot = styled.div``;

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

@@ -2,7 +2,7 @@ import React from 'react';
import moment from 'moment';
import { defaultTo } from 'lodash';
import { DetailItem, DetailsMenu, Money } from 'components';
import { Row, Col, DetailItem, DetailsMenu, Money } from 'components';
import { FormattedMessage as T } from 'components';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
@@ -29,30 +29,38 @@ export default function ExpenseDrawerHeader() {
<Money amount={total_amount} currency={currency_code} />
</h3>
</DetailItem>
<DetailItem name={'date'} label={<T id={'date'} />}>
{moment(payment_date).format('YYYY MMM DD')}
</DetailItem>
<DetailItem name={'currency'} label={<T id={'currency'} />}>
{currency_code}
</DetailItem>
<DetailItem name={'reference'} label={<T id={'reference_no'} />}>
{defaultTo(reference_no, '-')}
</DetailItem>
<DetailItem label={<T id={'published_at'} />}>
{moment(published_at).format('YYYY MMM DD')}
</DetailItem>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={<T id={'description'} />}>
{defaultTo(description, '—')}
</DetailItem>
<DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
</DetailsMenu>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem name={'date'} label={<T id={'date'} />}>
{moment(payment_date).format('YYYY MMM DD')}
</DetailItem>
<DetailItem name={'currency'} label={<T id={'currency'} />}>
{currency_code}
</DetailItem>
<DetailItem name={'reference'} label={<T id={'reference_no'} />}>
{defaultTo(reference_no, '-')}
</DetailItem>
<DetailItem label={<T id={'published_at'} />}>
{moment(published_at).format('YYYY MMM DD')}
</DetailItem>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem label={<T id={'description'} />}>
{defaultTo(description, '—')}
</DetailItem>
<DetailItem label={<T id={'created_at'} />}>2021 Aug 24</DetailItem>
</DetailsMenu>
</Col>
</Row>
</div>
);
}

17
src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
View File

@@ -1,18 +1,27 @@
import React from 'react';
import { DataTable } from 'components';
import { CommercialDocEntriesTable } from 'components';
import { useExpenseReadEntriesColumns } from './utils';
import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
import { TableStyle } from '../../../common';
/**
* Expense details table.
*/
export default function ExpenseDrawerTable() {
// Expense readonly entries columns.
const columns = useExpenseReadEntriesColumns();
// Expense drawer context.
const { expense } = useExpenseDrawerContext();
return (
<div className="expense-drawer__content--table">
<DataTable columns={columns} data={expense.categories} />
</div>
<CommercialDocEntriesTable
columns={columns}
data={expense.categories}
styleName={TableStyle.Constrant}
/>
);
}

10
src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetail.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { Card } from 'components';
@@ -7,20 +7,20 @@ import InventoryAdjustmentDetailActionsBar from './InventoryAdjustmentDetailActi
import InventoryAdjustmentDetailHeader from './InventoryAdjustmentDetailHeader';
import InventoryAdjustmentDetailTable from './InventoryAdjustmentDetailTable';
import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
/**
* Inventory adjustment detail
*/
export default function InventoryAdjustmentDetail() {
return (
<div className={clsx(InventoryAdjustmentDrawerCls.detail_panel)}>
<InventoryAdjustmentDetailsRoot>
<InventoryAdjustmentDetailActionsBar />
<Card>
<InventoryAdjustmentDetailHeader />
<InventoryAdjustmentDetailTable />
</Card>
</div>
</InventoryAdjustmentDetailsRoot>
);
}
const InventoryAdjustmentDetailsRoot = styled.div``;

8
src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailActionsBar.js
View File

@@ -1,13 +1,11 @@
import React from 'react';
import { Button, NavbarGroup, Classes, Intent } from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { Icon, FormattedMessage as T, Can } from 'components';
import { Icon, DrawerActionsBar, FormattedMessage as T, Can } from 'components';
import {
InventoryAdjustmentAction,
AbilitySubject,
@@ -34,7 +32,7 @@ function InventoryAdjustmentDetailActionsBar({
I={InventoryAdjustmentAction.Delete}
a={AbilitySubject.InventoryAdjustment}
>
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
@@ -44,7 +42,7 @@ function InventoryAdjustmentDetailActionsBar({
onClick={handleDeleteInventoryAdjustment}
/>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
</Can>
);
}

40
src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailHeader.js
View File

@@ -14,43 +14,37 @@ import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdju
* Inventory detail header.
*/
export default function InventoryAdjustmentDetailHeader() {
const {
inventoryAdjustment: {
date,
type,
adjustment_account,
inventory_direction,
description,
reference_no,
reason,
published_at,
created_at,
},
} = useInventoryAdjustmentDrawerContext();
const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
return (
<div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem label={intl.get('date')}>
{moment(date).format('YYYY MMM DD')}
{moment(inventoryAdjustment.date).format('YYYY MMM DD')}
</DetailItem>
<DetailItem label={intl.get('type')}>{type}</DetailItem>
<DetailItem label={intl.get('type')}>
{inventoryAdjustment.type}
</DetailItem>
<DetailItem label={intl.get('adjustment_account')}>
{adjustment_account.name}
{inventoryAdjustment.adjustment_account.name}
</DetailItem>
<DetailItem name={'reference'} label={intl.get('reference_no')}>
{defaultTo(reference_no, '-')}
{defaultTo(inventoryAdjustment.reference_no, '-')}
</DetailItem>
<DetailItem label={intl.get('published_at')}>
{moment(published_at).format('YYYY MMM DD')}
{moment(inventoryAdjustment.published_at).format('YYYY MMM DD')}
</DetailItem>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('reason')}>
{defaultTo(reason, '—')}
{defaultTo(inventoryAdjustment.reason, '—')}
</DetailItem>
<DetailItem label={intl.get('created_at')}>
{moment(created_at).format('YYYY MMM DD')}
{moment(inventoryAdjustment.created_at).format('YYYY MMM DD')}
</DetailItem>
</DetailsMenu>
</div>

24
src/containers/Drawers/InventoryAdjustmentDetailDrawer/InventoryAdjustmentDetailTable.js
View File

@@ -1,30 +1,24 @@
import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components';
import { CommercialDocEntriesTable } from 'components';
import { useInventoryAdjustmentEntriesColumns } from './utils';
import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider';
import InventoryAdjustmentDrawerCls from 'style/components/Drawers/InventoryAdjustmentDrawer.module.scss';
/**
* Inventory adjustment detail entries table.
*/
export default function InventoryAdjustmentDetailTable() {
// Inventory adjustment entries columns.
const columns = useInventoryAdjustmentEntriesColumns();
const {
inventoryAdjustment: { entries },
} = useInventoryAdjustmentDrawerContext();
// Inventory adjustment details drawer context.
const { inventoryAdjustment } = useInventoryAdjustmentDrawerContext();
return (
<div className={clsx(InventoryAdjustmentDrawerCls.detail_panel_table)}>
<DataTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
</div>
<CommercialDocEntriesTable
columns={columns}
data={inventoryAdjustment.entries}
className={'table-constrant'}
/>
);
}

53
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js
View File

@@ -1,7 +1,14 @@
import React from 'react';
import styled from 'styled-components';
import { T, TotalLines, FormatNumber, TotalLine } from 'components';
import {
T,
TotalLines,
FormatNumber,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
@@ -12,54 +19,34 @@ export function InvoiceDetailFooter() {
return (
<InvoiceDetailsFooterRoot>
<TotalLines>
<SubTotalLine
<InvoiceTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'invoice.details.subtotal'} />}
value={<FormatNumber value={invoice.balance} />}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<InvoiceTotalLine
<TotalLine
title={<T id={'invoice.details.total'} />}
value={invoice.formatted_amount}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'invoice.details.payment_amount'} />}
value={invoice.formatted_payment_amount}
/>
<DueAmountLine
<TotalLine
title={<T id={'invoice.details.due_amount'} />}
value={invoice.formatted_due_amount}
textStyle={TotalLineTextStyle.Bold}
/>
</TotalLines>
</InvoiceTotalLines>
</InvoiceDetailsFooterRoot>
);
}
const SubTotalLine = styled(TotalLine)`
border-bottom: 1px solid #000;
`;
const InvoiceDetailsFooterRoot = styled.div``;
const InvoiceTotalLine = styled(TotalLine)`
border-bottom: 3px double #000;
font-weight: 600;
`;
const DueAmountLine = styled(TotalLine)`
font-weight: 600;
`;
const InvoiceDetailsFooterRoot = styled.div`
display: flex;
.total_lines {
margin-left: auto;
}
.total_lines_line {
.amount,
.title {
width: 180px;
}
.amount {
text-align: right;
}
}
const InvoiceTotalLines = styled(TotalLines)`
margin-left: auto;
`;

1
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js
View File

@@ -11,6 +11,7 @@ import { TableStyle } from '../../../common';
* Invoice readonly details entries table columns.
*/
export default function InvoiceDetailTable() {
// Invoice readonly entries table columns.
const columns = useInvoiceReadonlyEntriesColumns();
// Invoice details drawer context.

7
src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
View File

@@ -8,9 +8,8 @@ import {
Intent,
NavbarDivider,
} from '@blueprintjs/core';
import { Can, FormattedMessage as T } from 'components';
import { DrawerActionsBar, Can, FormattedMessage as T } from 'components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -47,7 +46,7 @@ function ManualJournalDrawerActionBar({
};
return (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Can I={ManualJournalAction.Edit} a={AbilitySubject.ManualJournal}>
<Button
@@ -68,7 +67,7 @@ function ManualJournalDrawerActionBar({
/>
</Can>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

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

@@ -1,4 +1,5 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
@@ -7,17 +8,13 @@ import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
import ManualJournalDrawerTable from './ManualJournalDrawerTable';
import ManualJournalDrawerFooter from './ManualJournalDrawerFooter';
import { useManualJournalDrawerContext } from 'containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider';
/**
* Manual journal view details.
*/
export default function ManualJournalDrawerDetails() {
const { manualJournal } = useManualJournalDrawerContext();
return (
<div className={'journal-drawer'}>
<ManualJournalDrawerActionBar manualJournal={manualJournal} />
<ManualJournalDetailsRoot>
<ManualJournalDrawerActionBar />
<div className="journal-drawer__content">
<Card>
@@ -26,6 +23,9 @@ export default function ManualJournalDrawerDetails() {
<ManualJournalDrawerFooter />
</Card>
</div>
</div>
</ManualJournalDetailsRoot>
);
}
const ManualJournalDetailsRoot = styled.div``;

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

@@ -1,6 +1,12 @@
import React from 'react';
import { defaultTo } from 'lodash';
import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
import {
Row,
Col,
DetailsMenu,
DetailItem,
FormattedMessage as T,
} from 'components';
import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
/**
@@ -22,26 +28,32 @@ export default function ManualJournalDrawerHeader() {
<div className={'journal-drawer__content-header'}>
<DetailsMenu>
<DetailItem name={'total'} label={<T id={'total'} />}>
<h3 class="amount">{formatted_amount}</h3>
</DetailItem>
<DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
{journal_type}
</DetailItem>
<DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
{journal_number}
</DetailItem>
<DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
{defaultTo(reference, '-')}
</DetailItem>
<DetailItem name={'currency'} label={<T id={'currency'} />}>
{currency_code}
<h3 class="big-number">{formatted_amount}</h3>
</DetailItem>
</DetailsMenu>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem name={'journal-type'} label={<T id={'journal_type'} />}>
{journal_type}
</DetailItem>
<DetailItem name={'journal-number'} label={<T id={'journal_no'} />}>
{journal_number}
</DetailItem>
<DetailItem name={'reference-no'} label={<T id={'reference_no'} />}>
{defaultTo(reference, '-')}
</DetailItem>
<DetailItem name={'currency'} label={<T id={'currency'} />}>
{currency_code}
</DetailItem>
</DetailsMenu>
</Col>
</Row>
<div class="journal-drawer__content-description">
<b class="title">
<T id={'manual_journal.details.description'} />

22
src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
View File

@@ -1,27 +1,23 @@
import React from 'react';
import { DataTable, If } from 'components';
import { CommercialDocEntriesTable } from 'components';
import { useManualJournalEntriesColumns } from './utils';
import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
import { TableStyle } from '../../../common';
/**
* Manual journal drawer table.
*/
export default function ManualJournalDrawerTable() {
const columns = useManualJournalEntriesColumns();
const {
manualJournal: { entries, description },
} = useManualJournalDrawerContext();
const { manualJournal } = useManualJournalDrawerContext();
return (
<div className="journal-drawer__content-table">
<DataTable columns={columns} data={entries} />
<If condition={description}>
<p className={'desc'}>
<b>Description</b>: {description}
</p>
</If>
</div>
<CommercialDocEntriesTable
columns={columns}
data={manualJournal.entries}
styleName={TableStyle.Constrant}
/>
);
}

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

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

3
src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss
View File

@@ -46,8 +46,7 @@
border-bottom: 1px solid #000;
}
&_total {
border-bottom: 3px double #000;
font-weight: 600;
}
}
}

2
src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailActionBar.js
View File

@@ -59,11 +59,11 @@ function ReceiptDetailActionBar({
const onPrintReceipt = () => {
openDialog('receipt-pdf-preview', { receiptId });
};
// Handle notify via SMS.
const handleNotifyViaSMS = () => {
openDialog('notify-receipt-via-sms', { receiptId });
};
return (
<DrawerActionsBar>
<NavbarGroup>

2
src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js
View File

@@ -1,8 +1,6 @@
import React from 'react';
import { DrawerBody } from 'components';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import ReceiptDetail from './ReceiptDetail';
import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';

36
src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailFooter.js
View File

@@ -1,13 +1,16 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { T, TotalLines, TotalLine } from 'components';
import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
FormatNumber,
} from 'components';
import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';
import { FormatNumber } from '../../../components';
/**
* Receipts read-only details footer.
*/
@@ -15,29 +18,34 @@ export function ReceiptDetailFooter() {
const { receipt } = useReceiptDetailDrawerContext();
return (
<div className={clsx(ReceiptDrawerCls.detail_panel_footer)}>
<TotalLines>
<ReceiptDetailsFooterRoot>
<ReceiptTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'receipt.details.subtotal'} />}
value={<FormatNumber value={receipt.amount} />}
className={ReceiptDrawerCls.total_line_subtotal}
/>
<TotalLine
title={<T id={'receipt.details.total'} />}
value={receipt.formatted_amount}
className={ReceiptDrawerCls.total_line_total}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
<TotalLine
title={<T id={'receipt.details.payment_amount'} />}
value={receipt.formatted_amount}
className={ReceiptDrawerCls.total_line_payment}
borderStyle={TotalLineBorderStyle.DoubleDark}
/>
<TotalLine
title={<T id={'receipt.details.due_amount'} />}
value={'0'}
className={ReceiptDrawerCls.total_line_dueAmount}
/>
</TotalLines>
</div>
</ReceiptTotalLines>
</ReceiptDetailsFooterRoot>
);
}
export const ReceiptDetailsFooterRoot = styled.div``;
export const ReceiptTotalLines = styled(TotalLines)`
margin-left: auto;
`;

31
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerFooter.js
View File

@@ -1,12 +1,16 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { T, TotalLines, TotalLine, If } from 'components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
import { FormatNumber } from '../../../components';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
/**
* Vendor Credit detail panel footer.
*/
@@ -14,19 +18,26 @@ export default function VendorCreditDetailDrawerFooter() {
const { vendorCredit } = useVendorCreditDetailDrawerContext();
return (
<div className={clsx(VendorCreditDetailCls.detail_panel_footer)}>
<TotalLines className={clsx(VendorCreditDetailCls.total_lines)}>
<VendorCreditFooterRoot>
<VendorCreditTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={<T id={'vendor_credit.drawer.label_subtotal'} />}
value={<FormatNumber value={vendorCredit.formatted_amount} />}
className={VendorCreditDetailCls.total_line_subtotal}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'vendor_credit.drawer.label_total'} />}
value={vendorCredit.formatted_amount}
className={VendorCreditDetailCls.total_line_total}
borderStyle={TotalLineBorderStyle.DoubleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</TotalLines>
</div>
</VendorCreditTotalLines>
</VendorCreditFooterRoot>
);
}
export const VendorCreditFooterRoot = styled.div``;
export const VendorCreditTotalLines = styled(TotalLines)`
margin-left: auto;
`;

6
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
View File

@@ -6,12 +6,16 @@ import VendorCreditDetailHeader from './VendorCreditDetailHeader';
import VendorCreditDetailTable from './VendorCreditDetailTable';
import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
/**
* Vendor credit details panel.
* @returns {React.JSX}
*/
export default function VendorCreditDetailPanel() {
return (
<CommercialDocBox>
<VendorCreditDetailHeader />
<VendorCreditDetailTable />
{/* <VendorCreditDetailDrawerFooter /> */}
<VendorCreditDetailDrawerFooter />
</CommercialDocBox>
);
}

4
src/containers/Expenses/ExpensesLanding/components.js
View File

@@ -110,11 +110,11 @@ export function TotalAmountAccessor(row) {
*/
export function PublishAccessor(row) {
return row.is_published ? (
<Tag minimal={true}>
<Tag round={true} minimal={true}>
<T id={'published'} />
</Tag>
) : (
<Tag minimal={true} intent={Intent.WARNING}>
<Tag round={true} minimal={true} intent={Intent.WARNING}>
<T id={'draft'} />
</Tag>
);

4
src/containers/InventoryAdjustments/components.js
View File

@@ -26,11 +26,11 @@ import {
*/
export const PublishAccessor = (r) => {
return r.is_published ? (
<Tag minimal={true}>
<Tag minimal={true} round={true}>
<T id={'published'} />
</Tag>
) : (
<Tag minimal={true} intent={Intent.WARNING}>
<Tag minimal={true} intent={Intent.WARNING} round={true}>
<T id={'draft'} />
</Tag>
);

2
src/containers/Preferences/Users/Roles/RolesForm/components.js
View File

@@ -4,8 +4,6 @@ import styled from 'styled-components';
import { castArray } from 'lodash';
import { FastField, useFormikContext } from 'formik';
import { whenRtl, whenLtr } from 'utils/styled-components';
import { Icon, Hint, If, Choose } from 'components';
import { useRolesFormContext } from './RolesFormProvider';
const RoleLabelCheckbox = ({ subject, label, description }) => (

8
src/containers/Sales/Receipts/ReceiptsLanding/components.js
View File

@@ -21,6 +21,10 @@ import {
AbilitySubject,
} from '../../../../common/abilityOption';
/**
* Receipts table row actions menu.
* @returns {React.JSX}
*/
export function ActionsMenu({
payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
row: { original: receipt },
@@ -88,13 +92,13 @@ export function StatusAccessor(receipt) {
return (
<Choose>
<Choose.When condition={receipt.is_closed}>
<Tag minimal={true} intent={Intent.SUCCESS}>
<Tag minimal={true} intent={Intent.SUCCESS} round={true}>
<T id={'closed'} />
</Tag>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} intent={Intent.WARNING}>
<Tag minimal={true} intent={Intent.WARNING} round={true}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>

2
src/containers/TransactionsLocking/components.js
View File

@@ -328,7 +328,7 @@ const TransactionLockingWrapp = styled.div`
display: flex;
align-items: center;
border-radius: 6px;
border: 1px solid #d1dee2;
border: 1px solid #c4d2d7;
padding: 16px 18px;
margin-bottom: 25px;
background: #fff;

7
src/style/components/Drawers/EstimateDetails.module.scss
View File

@@ -49,15 +49,14 @@
.total_line{
&_subtotal {
border-bottom: 1px solid #000;
}
&_total {
border-bottom: 3px double #000;
font-weight: 600;
}
&_dueAmount {
font-weight: 600;
}
}

34
src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss
View File

@@ -27,39 +27,7 @@
}
}
.bigcapital-datatable {
.table {
border: 1px solid #d1dee2;
min-width: auto;
.tbody,
.tbody-inner {
height: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.tbody {
.tr .td {
padding: 0.4rem;
margin-left: -1px;
border-left: 1px solid #ececec;
}
.bp3-form-group {
margin-bottom: 0;
&:not(.bp3-intent-danger) .bp3-input {
border: 1px solid #d0dfe2;
&:focus {
box-shadow: 0 0 0 1px #116cd0;
border-color: #116cd0;
}
}
}
}
}
}
.credit-remaining {