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: optimize style of invoice details.

Browse Source 
feat: optimize style of credit note details.
feat: optimize global style checkbox  of the application.
This commit is contained in:
a.bouhuolia
2021-12-20 13:19:59 +02:00
parent fcd1a8849d
commit 4dda2a37aa
47 changed files with 795 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/TableStyle.js Normal file
View File

@@ -0,0 +1,6 @@
export const TableStyle = {
Constrant: 'constrant',
Regular: 'regular'
}

4
src/common/index.js Normal file
View File

@@ -0,0 +1,4 @@
export * from './TableStyle';

1
src/components/Button/ButtonLink.js
View File

@@ -5,6 +5,7 @@ export const ButtonLink = styled.button`
border: 0;
background: transparent;
cursor: pointer;
text-align: inherit;
&:hover,
&:active {

11
src/components/Card.js
View File

@@ -1,6 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'classnames';
import styled from 'styled-components';
export default function Card({ className, children }) {
return <div className={classNames('card', className)}>{children}</div>;
return <CardRoot className={clsx('card', className)}>{children}</CardRoot>;
}
const CardRoot = styled.div`
padding: 15px;
`;

21
src/components/CommercialDoc/index.js Normal file
View File

@@ -0,0 +1,21 @@
import styled from 'styled-components';
import Card from '../Card';
import DataTable from '../DataTable';
export const CommercialDocBox = styled(Card)`
padding: 22px 20px;
`;
export const CommercialDocHeader = styled.div`
margin-bottom: 25px;
`;
export const CommercialDocTopHeader = styled.div`
margin-bottom: 30px;
`;
export const CommercialDocEntriesTable = styled(DataTable)`
.tbody .tr:last-child .td {
border-bottom: 1px solid #d2dce2;
}
`;

17
src/components/Dashboard/DashboardActionsBar.js
View File

@@ -1,16 +1,19 @@
import React from 'react';
import classnames from 'classnames';
import clsx from 'classnames';
import { Navbar } from '@blueprintjs/core';
export default function DashboardActionsBar({ children, name }) {
export default function DashboardActionsBar({ className, children, name }) {
return (
<div
className={classnames({
'dashboard__actions-bar': true,
[`dashboard__actions-bar--${name}`]: !!name
})}
className={clsx(
{
'dashboard__actions-bar': true,
[`dashboard__actions-bar--${name}`]: !!name,
},
className,
)}
>
<Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
<Navbar className="navbar--dashboard-actions-bar">{children}</Navbar>
</div>
);
}

2
src/components/Datatable/TableWrapper.js
View File

@@ -16,6 +16,7 @@ export default function TableWrapper({ children }) {
expandable,
virtualizedRows,
className,
styleName,
size,
},
} = useContext(TableContext);
@@ -28,6 +29,7 @@ export default function TableWrapper({ children }) {
'is-expandable': expandable,
'is-loading': loading,
'has-virtualized-rows': virtualizedRows,
[`table--${styleName}`]: styleName,
})}
>
<ScrollSync>

2
src/components/Details/index.js
View File

@@ -17,6 +17,7 @@ const useDetailsMenuContext = () => React.useContext(DetailsMenuContext);
export function DetailsMenu({
children,
direction = DIRECTION.VERTICAL,
textAlign,
minLabelSize,
className,
}) {
@@ -27,6 +28,7 @@ export function DetailsMenu({
{
'details-menu--vertical': direction === DIRECTION.VERTICAL,
'details-menu--horizantal': direction === DIRECTION.HORIZANTAL,
[`align-${textAlign}`]: textAlign,
},
className,
)}

12
src/components/Drawer/DrawerActionsBar.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import styled from 'styled-components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
export function DrawerActionsBar({ ...props }) {
return <DrawerActionsBarRoot {...props} />;
}
const DrawerActionsBarRoot = styled(DashboardActionsBar)`
border-bottom: 1px solid #d9d9da;
`;

43
src/components/Drawer/DrawerMainTabs.js
View File

@@ -1,15 +1,54 @@
import React from 'react';
import { Tabs } from '@blueprintjs/core';
import styled from 'styled-components';
/**
* Drawer main tabs.
*/
export function DrawerMainTabs({ children, ...restProps }) {
return (
<div class="drawer__main-tabs">
<DrawerMainTabsRoot>
<Tabs animate={true} large={true} {...restProps}>
{children}
</Tabs>
</div>
</DrawerMainTabsRoot>
);
}
const DrawerMainTabsRoot = styled.div`
.bp3-tabs {
.bp3-tab-list {
position: relative;
background-color: #fff;
padding: 0 15px;
border-bottom: 2px solid #e1e2e8;
> *:not(:last-child) {
margin-right: 25px;
}
&.bp3-large > .bp3-tab {
font-size: 15px;
color: #7f8596;
margin: 0 1rem;
&[aria-selected='true'],
&:not([aria-disabled='true']):hover {
color: #0052cc;
}
}
.bp3-tab-indicator-wrapper .bp3-tab-indicator {
height: 2px;
bottom: -2px;
}
}
.bp3-tab-panel {
margin-top: 0;
.card {
margin: 15px;
}
}
}
`;

2
src/components/Drawer/index.js
View File

@@ -13,3 +13,5 @@ export function DrawerLoading({ loading, mount = false, children }) {
export function DrawerBody({ children }) {
return <div className={Classes.DRAWER_BODY}>{children}</div>;
}
export * from './DrawerActionsBar';

11
src/components/Tags/CurrencyTag.js Normal file
View File

@@ -0,0 +1,11 @@
import styled from 'styled-components';
export const CurrencyTag = styled.span`
background: #3e9215;
color: #fff;
display: inline-block;
border-radius: 3px;
padding: 2px 4px;
line-height: 1;
margin-left: 4px;
`;

3
src/components/Tags/index.js Normal file
View File

@@ -0,0 +1,3 @@
export * from './CurrencyTag';

2
src/components/index.js
View File

@@ -90,6 +90,8 @@ export * from './Contacts';
export * from './Utils/Join';
export * from './Typo';
export * from './TextStatus';
export * from './Tags';
export * from './CommercialDoc';
const Hint = FieldHint;

59
src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
View File

@@ -1,38 +1,51 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import styled from 'styled-components';
import intl from 'react-intl-universal';
import { DrawerMainTabs } from 'components';
import { DrawerMainTabs } from 'components';
import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
import CreditNoteDetailPanel from './CreditNoteDetailPanel';
import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
import clsx from 'classnames';
import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
/**
* Credit Note view detail.
* @returns {React.JSX}
*/
export default function CreditNoteDetail() {
return (
<div className={clsx(CreditNoteDetailCls.root)}>
<DrawerMainTabs>
<Tab
title={intl.get('details')}
id={'details'}
panel={<CreditNoteDetailPanel />}
/>
<Tab
title={intl.get('credit_note.drawer.label_refund_transactions')}
id={'refund_transactions'}
panel={<RefundCreditNoteTransactionsTable />}
/>
<Tab
title={intl.get('credit_note.drawer.label_invoices_reconciled')}
id={'reconcile_transactions'}
panel={<ReconcileCreditNoteTransactionsTable />}
/>
</DrawerMainTabs>
</div>
<CreditNoteRoot>
<CreditNoteDetailActionsBar />
<CreditNoteDetailsTabs />
</CreditNoteRoot>
);
}
/**
* Credit note details tabs.
* @returns {React.JSX}
*/
function CreditNoteDetailsTabs() {
return (
<DrawerMainTabs>
<Tab
title={intl.get('details')}
id={'details'}
panel={<CreditNoteDetailPanel />}
/>
<Tab
title={intl.get('credit_note.drawer.label_refund_transactions')}
id={'refund_transactions'}
panel={<RefundCreditNoteTransactionsTable />}
/>
<Tab
title={intl.get('credit_note.drawer.label_invoices_reconciled')}
id={'reconcile_transactions'}
panel={<ReconcileCreditNoteTransactionsTable />}
/>
</DrawerMainTabs>
);
}
const CreditNoteRoot = styled.div``;

21
src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import {
Button,
NavbarGroup,
@@ -8,17 +7,17 @@ import {
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
import { CreditNoteMenuItem } from './utils';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T, If, Can } from 'components';
import { DrawerActionsBar, Icon, FormattedMessage as T, If } from 'components';
import { compose } from 'utils';
import { CreditNoteMenuItem } from './utils';
/**
* Credit note detail actions bar.
@@ -57,7 +56,7 @@ function CreditNoteDetailActionsBar({
};
return (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
@@ -69,7 +68,7 @@ function CreditNoteDetailActionsBar({
<If condition={!creditNote.is_closed && !creditNote.is_draft}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="quick-payment-16" iconSize={16} />}
icon={<Icon icon="arrow-upward" iconSize={18} />}
text={<T id={'refund'} />}
onClick={handleRefundCreditNote}
/>
@@ -82,13 +81,7 @@ function CreditNoteDetailActionsBar({
intent={Intent.DANGER}
onClick={handleDeleteCreditNote}
/>
<If
condition={
!creditNote.is_draft &&
!creditNote.is_closed
// creditNote.is_published
}
>
<If condition={creditNote.is_published && !creditNote.is_closed}>
<NavbarDivider />
<CreditNoteMenuItem
payload={{
@@ -97,7 +90,7 @@ function CreditNoteDetailActionsBar({
/>
</If>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

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

@@ -67,7 +67,9 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
>
<DrawerHeaderContent
name="credit-note-detail-drawer"
title={intl.get('credit_note.drawer_credit_note_detail')}
title={intl.get('credit_note.drawer_credit_note_detail', {
creditNumber: creditNote.credit_note_number,
})}
/>
<CreditNoteDetailDrawerContext.Provider value={provider} {...props} />
</DrawerLoading>

124
src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js
View File

@@ -1,12 +1,22 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
import styled from 'styled-components';
import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
import {
FormatDate,
T,
Row,
Col,
DetailsMenu,
DetailItem,
ButtonLink,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
import { CreditNoteDetailsStatus } from './utils';
/**
* Credit note details drawer header.
@@ -15,46 +25,76 @@ export default function CreditNoteDetailHeader() {
const { creditNote } = useCreditNoteDetailDrawerContext();
return (
<div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<span class="big-number">{creditNote.formatted_amount}</span>
</DetailItem>
<DetailItem
label={intl.get('credit_note.drawer.label_credit_note_no')}
children={defaultTo(creditNote.credit_note_number, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={creditNote.customer?.display_name}
/>
<DetailItem
label={intl.get('credit_note.drawer.label_credit_note_date')}
children={
<FormatDate value={creditNote.formatted_credit_note_date} />
}
/>
<DetailItem
label={intl.get('credit_note.drawer.label_credits_remaining')}
children={creditNote.formatted_credits_remaining}
/>
</DetailsMenu>
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<AmountItem label={intl.get('amount')}>
<span class="big-number">{creditNote.formatted_amount}</span>
</AmountItem>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('reference')}
children={creditNote.reference_no}
/>
<DetailItem
label={intl.get('note')}
children={defaultTo(creditNote.note, '-')}
/>
<StatusItem>
<CreditNoteDetailsStatus creditNote={creditNote} />
</StatusItem>
</DetailsMenu>
</CommercialDocTopHeader>
<DetailItem
label={<T id={'credit_note.drawer.label_created_at'} />}
children={<FormatDate value={creditNote.created_at} />}
/>
</DetailsMenu>
</div>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem
label={intl.get('credit_note.drawer.label_credit_note_no')}
>
{defaultTo(creditNote.credit_note_number, '-')}
</DetailItem>
<DetailItem label={intl.get('customer_name')}>
<ButtonLink>{creditNote.customer?.display_name}</ButtonLink>
</DetailItem>
<DetailItem
label={intl.get('credit_note.drawer.label_credit_note_date')}
>
<FormatDate value={creditNote.formatted_credit_note_date} />
</DetailItem>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('credit_note.drawer.label_credits_remaining')}
>
<strong>{creditNote.formatted_credits_remaining}</strong>
</DetailItem>
<DetailItem
label={intl.get('reference')}
children={defaultTo(creditNote.reference_no, '-')}
/>
<DetailItem
label={intl.get('note')}
children={defaultTo(creditNote.note, '-')}
/>
<DetailItem
label={<T id={'credit_note.drawer.label_created_at'} />}
children={<FormatDate value={creditNote.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}
const StatusItem = styled(DetailItem)`
width: 50%;
text-align: right;
`;
const AmountItem = styled(DetailItem)`
width: 50%;
`;

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

@@ -1,24 +1,20 @@
import React from 'react';
import clsx from 'classnames';
import { Card } from 'components';
import { CommercialDocBox } from 'components';
import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
import CreditNoteDetailHeader from './CreditNoteDetailHeader';
import CreditNoteDetailTable from './CreditNoteDetailTable';
import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
// import CreditNoteDetailDrawerFooter from './CreditNoteDetailDrawerFooter';
/**
* Credit note details panel.
*/
export default function CreditNoteDetailPanel() {
return (
<div className={clsx(CreditNoteDetailCls.detail_panel)}>
<CreditNoteDetailActionsBar />
<Card>
<CreditNoteDetailHeader />
<CreditNoteDetailTable />
<CreditNoteDetailDrawerFooter />
</Card>
</div>
<CommercialDocBox>
<CreditNoteDetailHeader />
<CreditNoteDetailTable />
{/* <CreditNoteDetailDrawerFooter /> */}
</CommercialDocBox>
);
}

20
src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailTable.js
View File

@@ -1,15 +1,13 @@
import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components';
import { CommercialDocEntriesTable } from 'components';
import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider';
import { useCreditNoteReadOnlyEntriesColumns } from './utils';
import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
/**
* Credit note detail table.
* @returns {React.JSX}
*/
export default function CreditNoteDetailTable() {
const {
@@ -20,12 +18,10 @@ export default function CreditNoteDetailTable() {
const columns = useCreditNoteReadOnlyEntriesColumns();
return (
<div className={clsx(CreditNoteDetailCls.detail_panel_table)}>
<DataTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
</div>
<CommercialDocEntriesTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
);
}

7
src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable.js
View File

@@ -1,12 +1,10 @@
import React from 'react';
import { DataTable, Card } from 'components';
import '../../../../style/pages/RefundCreditNote/List.scss';
import { TableStyle } from 'common';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
import {
useReconcileCreditTransactionsTableColumns,
ActionsMenu,
@@ -21,8 +19,10 @@ function RefundCreditNoteTransactionsTable({
// #withAlertsActions
openAlert,
}) {
// Credit note drawer context.
const { reconcileCreditNotes } = useCreditNoteDetailDrawerContext();
// Reconcile credit transactions table columns.
const columns = useReconcileCreditTransactionsTableColumns();
// Handle delete reconile credit.
@@ -39,6 +39,7 @@ function RefundCreditNoteTransactionsTable({
payload={{
onDelete: handleDeleteReconcileCreditNote,
}}
styleName={TableStyle.Constrant}
className={'datatable--refund-transactions'}
/>
</Card>

3
src/containers/Drawers/CreditNoteDetailDrawer/ReconcileCreditNoteTransactions/components.js
View File

@@ -20,6 +20,9 @@ export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
);
}
/**
* Credit note reconcilation with invoices table columns.
*/
export function useReconcileCreditTransactionsTableColumns() {
return React.useMemo(
() => [

7
src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { DataTable, Card } from 'components';
import '../../../../style/pages/RefundCreditNote/List.scss';
import { TableStyle } from 'common';
import withAlertsActions from 'containers/Alert/withAlertActions';
import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
@@ -22,10 +21,10 @@ function RefundCreditNoteTransactionsTable({
}) {
const { refundCreditNote } = useCreditNoteDetailDrawerContext();
// Refund credit transactions table columns.
const columns = useRefundCreditTransactionsTableColumns();
// Handle delete refund credit.
const handleDeleteRefundCreditNote = ({ id }) => {
openAlert('refund-credit-delete', { creditNoteId: id });
};
@@ -36,10 +35,10 @@ function RefundCreditNoteTransactionsTable({
columns={columns}
data={refundCreditNote}
ContextMenu={ActionsMenu}
styleName={TableStyle.Constrant}
payload={{
onDelete: handleDeleteRefundCreditNote,
}}
className={'datatable--refund-transactions'}
/>
</Card>
);

39
src/containers/Drawers/CreditNoteDetailDrawer/utils.js
View File

@@ -7,11 +7,14 @@ import {
Position,
MenuItem,
Menu,
Tag,
Intent,
} from '@blueprintjs/core';
import {
Icon,
FormattedMessage as T,
FormatNumberCell,
Choose,
} from '../../../components';
export const useCreditNoteReadOnlyEntriesColumns = () =>
@@ -58,7 +61,11 @@ export const useCreditNoteReadOnlyEntriesColumns = () =>
[],
);
export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
/**
* Credit note more actions mneu.
* @returns {React.JSX}
*/
export function CreditNoteMenuItem({ payload: { onReconcile } }) {
return (
<Popover
minimal={true}
@@ -79,4 +86,32 @@ export const CreditNoteMenuItem = ({ payload: { onReconcile } }) => {
<Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
</Popover>
);
};
}
/**
* Credit note details status.
* @returns {React.JSX}
*/
export function CreditNoteDetailsStatus({ creditNote }) {
return (
<Choose>
<Choose.When condition={creditNote.is_open}>
<Tag intent={Intent.WARNING} round={true}>
<T id={'open'} />
</Tag>
</Choose.When>
<Choose.When condition={creditNote.is_closed}>
<Tag intent={Intent.SUCCESS} round={true}>
<T id={'closed'} />
</Tag>
</Choose.When>
<Choose.When condition={creditNote.is_draft}>
<Tag intent={Intent.NONE} round={true} minimal={true}>
<T id={'draft'} />
</Tag>
</Choose.When>
</Choose>
);
}

63
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
View File

@@ -1,45 +1,50 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import styled from 'styled-components';
import { DrawerMainTabs } from 'components';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
import InvoiceGLEntriesTable from './InvoiceGLEntriesTable';
import InvoicePaymentTransactionsTable from './InvoicePaymentTransactions/InvoicePaymentTransactionsTable';
import InvoiceDetailTab from './InvoiceDetailTab';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
/**
* Invoice details tabs.
* @returns {React.JSX}
*/
function InvoiceDetailsTabs() {
return (
<DrawerMainTabs
renderActiveTabPanelOnly={true}
defaultSelectedTabId="details"
>
<Tab title={'Overview'} id={'details'} panel={<InvoiceDetailTab />} />
<Tab
title={'Journal Entries'}
id={'journal_entries'}
panel={<InvoiceGLEntriesTable />}
/>
<Tab
title={'Payment Transactions'}
id={'payment_transactions'}
panel={<InvoicePaymentTransactionsTable />}
/>
</DrawerMainTabs>
);
}
/**
* Invoice view detail.
* @returns {React.JSX}
*/
export default function InvoiceDetail() {
const { transactions } = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.invoice_details)}>
<DrawerMainTabs
renderActiveTabPanelOnly={true}
defaultSelectedTabId="details"
>
<Tab
title={intl.get('details')}
id={'details'}
panel={<InvoiceDetailTab />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable transactions={transactions} />}
/>
<Tab
title={intl.get('payment_transactions')}
id={'payment_transactions'}
panel={<InvoicePaymentTransactionsTable />}
/>
</DrawerMainTabs>
</div>
<InvoiceDetailsRoot>
<InvoiceDetailActionsBar />
<InvoiceDetailsTabs />
</InvoiceDetailsRoot>
);
}
export const InvoiceDetailsRoot = styled.div``;

12
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import {
Button,
NavbarGroup,
@@ -8,7 +7,6 @@ import {
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
@@ -16,7 +14,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { If, Can, Icon, FormattedMessage as T } from 'components';
import { If, Can, Icon, DrawerActionsBar, FormattedMessage as T } from 'components';
import {
SaleInvoiceAction,
PaymentReceiveAction,
@@ -24,7 +22,6 @@ import {
} from '../../../common/abilityOption';
import { compose } from 'utils';
import { BadDebtMenuItem } from './utils';
/**
@@ -81,7 +78,7 @@ function InvoiceDetailActionsBar({
};
return (
<DashboardActionsBar>
<DrawerActionsBar>
<NavbarGroup>
<Can I={SaleInvoiceAction.Edit} a={AbilitySubject.Invoice}>
<Button
@@ -90,14 +87,13 @@ function InvoiceDetailActionsBar({
text={<T id={'edit_invoice'} />}
onClick={handleEditInvoice}
/>
<NavbarDivider />
</Can>
<Can I={PaymentReceiveAction.Create} a={AbilitySubject.PaymentReceive}>
<If condition={invoice.is_delivered && !invoice.is_fully_paid}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="quick-payment-16" iconSize={16} />}
icon={<Icon icon="arrow-downward" iconSize={18} />}
text={<T id={'add_payment'} />}
onClick={handleQuickPaymentInvoice}
/>
@@ -132,7 +128,7 @@ function InvoiceDetailActionsBar({
/>
</Can>
</NavbarGroup>
</DashboardActionsBar>
</DrawerActionsBar>
);
}

3
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
View File

@@ -1,13 +1,12 @@
import React from 'react';
import { DrawerBody } from 'components';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import InvoiceDetail from './InvoiceDetail';
import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
/**
* Invoice detail drawer content.
* @returns {React.JSX}
*/
export default function InvoiceDetailDrawerContent({
// #ownProp

27
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
View File

@@ -1,45 +1,30 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DrawerLoading } from 'components';
import {
useTransactionsByReference,
useInvoice,
useInvoicePaymentTransactions,
} from 'hooks/query';
import { useInvoice } from 'hooks/query';
const InvoiceDetailDrawerContext = React.createContext();
/**
* Invoice detail provider.
*/
function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: invoiceId,
reference_type: 'SaleInvoice',
},
{ enabled: !!invoiceId },
);
// Fetch sale invoice details.
const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
enabled: !!invoiceId,
});
//provider.
// Provider.
const provider = {
transactions,
invoiceId,
invoice,
};
return (
<DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
<DrawerLoading loading={isInvoiceLoading}>
<DrawerHeaderContent
name="invoice-detail-drawer"
title={intl.get('invoice_details')}
title={intl.get('invoice_details.drawer.title', {
invoiceNumber: invoice.invoice_no,
})}
/>
<InvoiceDetailDrawerContext.Provider value={provider} {...props} />
</DrawerLoading>

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

@@ -1,8 +1,7 @@
import React from 'react';
import clsx from 'classnames';
import styled from 'styled-components';
import { T, TotalLines, FormatNumber, TotalLine } from 'components';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
@@ -12,29 +11,55 @@ export function InvoiceDetailFooter() {
const { invoice } = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
<InvoiceDetailsFooterRoot>
<TotalLines>
<TotalLine
<SubTotalLine
title={<T id={'invoice.details.subtotal'} />}
value={<FormatNumber value={invoice.balance} />}
className={InvoiceDrawerCls.total_line_subtotal}
/>
<TotalLine
<InvoiceTotalLine
title={<T id={'invoice.details.total'} />}
value={invoice.formatted_amount}
className={InvoiceDrawerCls.total_line_total}
/>
<TotalLine
title={<T id={'invoice.details.payment_amount'} />}
value={invoice.formatted_payment_amount}
className={InvoiceDrawerCls.total_line_payment}
/>
<TotalLine
<DueAmountLine
title={<T id={'invoice.details.due_amount'} />}
value={invoice.formatted_due_amount}
className={InvoiceDrawerCls.total_line_dueAmount}
/>
</TotalLines>
</div>
</InvoiceDetailsFooterRoot>
);
}
const SubTotalLine = styled(TotalLine)`
border-bottom: 1px solid #000;
`;
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;
}
}
`;

129
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
View File

@@ -1,12 +1,20 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
import styled from 'styled-components';
import { DetailsMenu, DetailItem, FormatDate } from 'components';
import {
ButtonLink,
Row,
Col,
DetailsMenu,
DetailItem,
FormatDate,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
import { InvoiceDetailsStatus } from './utils';
/**
* Invoice detail header.
@@ -14,44 +22,81 @@ import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss
export default function InvoiceDetailHeader() {
const { invoice } = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{invoice.formatted_amount}</h3>
</DetailItem>
<DetailItem
label={intl.get('invoice_no')}
children={invoice.invoice_no}
/>
<DetailItem
label={intl.get('customer_name')}
children={invoice.customer?.display_name}
/>
<DetailItem
label={intl.get('invoice_date')}
children={<FormatDate value={invoice.invoice_date} />}
/>
<DetailItem
label={intl.get('due_date')}
children={<FormatDate value={invoice.due_date} />}
/>
</DetailsMenu>
const handleCustomerLinkClick = () => {};
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('due_amount')}
children={invoice.formatted_due_amount}
/>
<DetailItem
label={intl.get('reference')}
children={defaultTo(invoice.reference_no, '--')}
/>
<DetailItem
label={intl.get('invoice.details.created_at')}
children={<FormatDate value={invoice.created_at} />}
/>
</DetailsMenu>
</div>
return (
<CommercialDocHeader>
<CommercialDocTopHeader>
<DetailsMenu>
<AmountDetailItem label={intl.get('amount')}>
<h3 class="big-number">{invoice.formatted_amount}</h3>
</AmountDetailItem>
<StatusDetailItem label={''}>
<InvoiceDetailsStatus invoice={invoice} />
</StatusDetailItem>
</DetailsMenu>
</CommercialDocTopHeader>
<Row>
<Col xs={6}>
<DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem label={intl.get('invoice_date')}>
<FormatDate value={invoice.invoice_date} />
</DetailItem>
<DetailItem label={intl.get('due_date')}>
<FormatDate value={invoice.due_date} />
</DetailItem>
<DetailItem label={intl.get('customer_name')}>
<ButtonLink onClick={handleCustomerLinkClick}>
{invoice.customer?.display_name}
</ButtonLink>
</DetailItem>
<DetailItem label={intl.get('invoice_no')}>
{invoice.invoice_no}
</DetailItem>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
direction={'horizantal'}
minLabelSize={'180px'}
textAlign={'right'}
>
<DetailItem label={intl.get('due_amount')}>
<strong>{invoice.formatted_due_amount}</strong>
</DetailItem>
<DetailItem label={intl.get('payment_amount')}>
<strong>{invoice.formatted_payment_amount}</strong>
</DetailItem>
<DetailItem
label={intl.get('reference')}
children={defaultTo(invoice.reference_no, '--')}
/>
<DetailItem
label={intl.get('invoice.details.created_at')}
children={<FormatDate value={invoice.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
);
}
const StatusDetailItem = styled(DetailItem)`
width: 50%;
text-align: right;
position: relative;
top: -5px;
`;
const AmountDetailItem = styled(DetailItem)`
width: 50%;
`;

22
src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
View File

@@ -1,28 +1,20 @@
import React from 'react';
import clsx from 'classnames';
import { Card } from 'components';
import { CommercialDocBox } from 'components';
import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
import InvoiceDetailHeader from './InvoiceDetailHeader';
import InvoiceDetailTable from './InvoiceDetailTable';
import { InvoiceDetailFooter } from './InvoiceDetailFooter';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
/**
* Invoice readonly details tab panel.
*/
export default function InvoiceDetailTab() {
return (
<div className={clsx(InvoiceDrawerCls.detail_panel)}>
<InvoiceDetailActionsBar />
<Card>
<InvoiceDetailHeader />
<InvoiceDetailTable />
<InvoiceDetailFooter />
</Card>
</div>
<CommercialDocBox>
<InvoiceDetailHeader />
<InvoiceDetailTable />
<InvoiceDetailFooter />
</CommercialDocBox>
);
}
}

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

@@ -1,12 +1,11 @@
import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components';
import { CommercialDocEntriesTable } from 'components';
import { useInvoiceReadonlyEntriesColumns } from './utils';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
import { TableStyle } from '../../../common';
/**
* Invoice readonly details entries table columns.
@@ -14,17 +13,16 @@ import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss
export default function InvoiceDetailTable() {
const columns = useInvoiceReadonlyEntriesColumns();
// Invoice details drawer context.
const {
invoice: { entries },
} = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.detail_panel_table)}>
<DataTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
</div>
<CommercialDocEntriesTable
columns={columns}
data={entries}
styleName={TableStyle.Constrant}
/>
);
}
}

51
src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
import { useTransactionsByReference } from 'hooks/query';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import JournalEntriesTable, {
AmountDisplayedBaseCurrencyMessage,
} from '../../JournalEntriesTable/JournalEntriesTable';
/**
* Invoice GL entries table.
* @returns {React.JSX}
*/
export default function InvoiceGLEntriesTable() {
const { invoiceId } = useInvoiceDetailDrawerContext();
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: invoiceId,
reference_type: 'SaleInvoice',
},
{ enabled: !!invoiceId },
);
return (
<InvoiceGLEntriesRoot>
<AmountDisplayedBaseCurrencyMessage />
<InvoiceGLEntriesDatatable
loading={isTransactionLoading}
transactions={transactions}
/>
</InvoiceGLEntriesRoot>
);
}
const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
.table .tbody .tr:last-child .td {
border-bottom: 0;
}
`;
const InvoiceGLEntriesRoot = styled(Card)`
padding: 15px;
`;

9
src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
View File

@@ -7,12 +7,17 @@ import { useInvoicePaymentTransactionsColumns } from './components';
import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
import { useInvoicePaymentTransactions } from 'hooks/query';
import { TableStyle } from '../../../../common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
/**
* Invoice payment transactions datatable.
*/
export default function InvoicePaymentTransactionsTable() {
// Retrieve invoice payment transactions columns.
const columns = useInvoicePaymentTransactionsColumns();
// Invoice drawer context.
const { invoiceId } = useInvoiceDetailDrawerContext();
// Fetch invoice payment transactions.
@@ -23,6 +28,7 @@ export default function InvoicePaymentTransactionsTable() {
} = useInvoicePaymentTransactions(invoiceId, {
enabled: !!invoiceId,
});
return (
<Card>
<DataTable
@@ -31,7 +37,8 @@ export default function InvoicePaymentTransactionsTable() {
loading={isPaymentTransactionLoading}
headerLoading={isPaymentTransactionLoading}
progressBarLoading={isPaymentTransactionFetching}
className={'payment-transactions'}
TableLoadingRenderer={TableSkeletonRows}
styleName={TableStyle.Constrant}
/>
</Card>
);

2
src/containers/Drawers/InvoiceDetailDrawer/index.js
View File

@@ -21,7 +21,7 @@ function InvoiceDetailDrawer({
<Drawer
isOpen={isOpen}
name={name}
style={{ minWidth: '700px', maxWidth: '900px' }}
style={{ minWidth: '700px', maxWidth: '1000px' }}
size={'65%'}
>
<DrawerSuspense>

56
src/containers/Drawers/InvoiceDetailDrawer/utils.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import {
Button,
Popover,
@@ -7,13 +8,20 @@ import {
Position,
MenuItem,
Menu,
Intent,
Tag,
} from '@blueprintjs/core';
import { Icon, FormattedMessage as T, Choose, Can } from 'components';
import {
FormatNumberCell,
Icon,
FormattedMessage as T,
Choose,
Can,
} from 'components';
import {
SaleInvoiceAction,
AbilitySubject,
} from '../../../common/abilityOption';
import { FormatNumberCell } from '../../../components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
@@ -63,6 +71,10 @@ export const useInvoiceReadonlyEntriesColumns = () =>
[],
);
/**
* Invoice details more actions menu.
* @returns {React.JSX}
*/
export const BadDebtMenuItem = ({
payload: { onCancelBadDebt, onBadDebt, onNotifyViaSMS },
}) => {
@@ -106,3 +118,43 @@ export const BadDebtMenuItem = ({
);
};
/**
* Invoice details status.
* @returns {React.JSX}
*/
export function InvoiceDetailsStatus({ invoice }) {
return (
<Choose>
<Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
<StatusTag intent={Intent.SUCCESS} round={true}>
<T id={'paid'} />
</StatusTag>
</Choose.When>
<Choose.When condition={invoice.is_delivered}>
<Choose>
<Choose.When condition={invoice.is_overdue}>
<StatusTag intent={Intent.WARNING} round={true}>
Overdue
</StatusTag>
</Choose.When>
<Choose.Otherwise>
<StatusTag intent={Intent.PRIMARY} round={true}>
Delivered
</StatusTag>
</Choose.Otherwise>
</Choose>
</Choose.When>
<Choose.Otherwise>
<StatusTag round={true} minimal={true}>
<T id={'draft'} />
</StatusTag>
</Choose.Otherwise>
</Choose>
);
}
const StatusTag = styled(Tag)`
min-width: 65px;
text-align: center;
`;

91
src/containers/JournalEntriesTable/JournalEntriesTable.js
View File

@@ -1,58 +1,53 @@
import React from 'react';
import { DataTable, Card } from 'components';
import intl from 'react-intl-universal';
import moment from 'moment';
import { DataTable } from 'components';
import 'style/pages/JournalEntries/List.scss';
import styled from 'styled-components';
import * as R from 'ramda';
import { CurrencyTag } from 'components';
import { TableStyle } from '../../common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { useGLEntriesTableColumns } from './utils';
/**
* Journal entries table.
*/
export default function JournalEntriesTable({ transactions }) {
const columns = React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: 'date',
accessor: ({ formatted_date }) =>
moment(formatted_date).format('YYYY MMM DD'),
width: 140,
className: 'date',
},
{
Header: intl.get('account_name'),
accessor: 'account_name',
width: 140,
className: 'account_name',
},
{
Header: intl.get('contact'),
accessor: 'contactTypeFormatted',
width: 140,
},
{
Header: intl.get('credit'),
accessor: ({ credit }) => credit.formatted_amount,
width: 100,
className: 'credit',
},
{
Header: intl.get('debit'),
accessor: ({ debit }) => debit.formatted_amount,
width: 100,
className: 'debit',
},
],
[],
);
export default function JournalEntriesTable({ transactions, ...restProps }) {
const columns = useGLEntriesTableColumns();
return (
<Card>
<DataTable
columns={columns}
data={transactions}
className={'datatable--journal-entries'}
/>
</Card>
<DataTable
columns={columns}
data={transactions}
styleName={TableStyle.Constrant}
TableLoadingRenderer={TableSkeletonRows}
{...restProps}
/>
);
}
/**
*
* @returns {React.JSX}
*/
export function AmountDisplayedBaseCurrencyMessageJSX({
organization: { base_currency: baseCurrency },
}) {
return (
<Message>
Amount is displayed in your base currency{' '}
<CurrencyTag>{baseCurrency}</CurrencyTag>
</Message>
);
}
export const AmountDisplayedBaseCurrencyMessage = R.compose(
withCurrentOrganization(),
)(AmountDisplayedBaseCurrencyMessageJSX);
const Message = styled.div`
font-size: 10px;
margin-bottom: 12px;
`;

44
src/containers/JournalEntriesTable/utils.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import intl from 'react-intl-universal';
import moment from 'moment';
export const useGLEntriesTableColumns = () => {
return React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: 'date',
accessor: ({ formatted_date }) =>
moment(formatted_date).format('YYYY MMM DD'),
width: 140,
className: 'date',
},
{
Header: intl.get('account_name'),
accessor: 'account_name',
width: 140,
className: 'account_name',
},
{
Header: intl.get('contact'),
accessor: 'contactTypeFormatted',
width: 140,
},
{
Header: intl.get('credit'),
accessor: ({ credit }) => credit.formatted_amount,
width: 100,
className: 'credit',
textAligment: 'right',
},
{
Header: intl.get('debit'),
accessor: ({ debit }) => debit.formatted_amount,
width: 100,
className: 'debit',
},
],
[],
);
};

94
src/containers/Sales/Invoices/InvoicesLanding/components.js
View File

@@ -27,53 +27,59 @@ import {
AbilitySubject,
} from '../../../../common/abilityOption';
export function InvoiceStatus({ invoice }) {
return (
<Choose>
<Choose.When condition={invoice.is_fully_paid && invoice.is_delivered}>
<span className={'fully-paid-icon'}>
<Icon icon="small-tick" iconSize={18} />
</span>
<span class="fully-paid-text">
<T id={'paid'} />
</span>
</Choose.When>
<Choose.When condition={invoice.is_delivered}>
<Choose>
<Choose.When condition={invoice.is_overdue}>
<span className={'overdue-status'}>
{intl.get('overdue_by', { overdue: invoice.overdue_days })}
</span>
</Choose.When>
<Choose.Otherwise>
<span className={'due-status'}>
{intl.get('due_in', { due: invoice.remaining_days })}
</span>
</Choose.Otherwise>
</Choose>
<If condition={invoice.is_partially_paid}>
<span class="partial-paid">
{intl.get('day_partially_paid', {
due: formattedAmount(invoice.due_amount, invoice.currency_code),
})}
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(invoice.balance_amount, invoice.balance)}
/>
</If>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} round={true}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>
</Choose>
);
}
export const statusAccessor = (row) => {
return (
<div className={'status-accessor'}>
<Choose>
<Choose.When condition={row.is_fully_paid && row.is_delivered}>
<span className={'fully-paid-icon'}>
<Icon icon="small-tick" iconSize={18} />
</span>
<span class="fully-paid-text">
<T id={'paid'} />
</span>
</Choose.When>
<Choose.When condition={row.is_delivered}>
<Choose>
<Choose.When condition={row.is_overdue}>
<span className={'overdue-status'}>
{intl.get('overdue_by', { overdue: row.overdue_days })}
</span>
</Choose.When>
<Choose.Otherwise>
<span className={'due-status'}>
{intl.get('due_in', { due: row.remaining_days })}
</span>
</Choose.Otherwise>
</Choose>
<If condition={row.is_partially_paid}>
<span class="partial-paid">
{intl.get('day_partially_paid', {
due: formattedAmount(row.due_amount, row.currency_code),
})}
</span>
<ProgressBar
animate={false}
stripes={false}
intent={Intent.PRIMARY}
value={calculateStatus(row.balance_amount, row.balance)}
/>
</If>
</Choose.When>
<Choose.Otherwise>
<Tag minimal={true} round={true}>
<T id={'draft'} />
</Tag>
</Choose.Otherwise>
</Choose>
<InvoiceStatus invoice={row} />
</div>
);
};

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

@@ -910,7 +910,7 @@
"drag_drop_files_here_or_click_here": "Drag/Drop files here or click here.",
"enter_an_item": "Enter an item...",
"due_amount": "Due Amount",
"invoice_details": "Invoice details",
"invoice_details.drawer.title": "Invoice details ({invoiceNumber})",
"setting_your_auto_generated_estimate_number": "Setting your auto-generated estimate number",
"setting_your_auto_generated_journal_number": "Setting your auto-generated journal number",
"setting_your_auto_generated_invoice_number": "Setting your auto-generated invoice number",
@@ -1531,7 +1531,7 @@
"vendor_credit.auto_increment.auto": "Your vendor credit numbers are set on auto-increment mode. Are you sure changing this setting?",
"vendor_credit.auto_increment.manually": "Your vendor credit numbers are set on manual mode. Are you sure chaning this settings?",
"setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number",
"credit_note.drawer_credit_note_detail": "Credit Note details",
"credit_note.drawer_credit_note_detail": "Credit Note details ({creditNumber})",
"credit_note.drawer.label_credit_note_no": "Credit Note #",
"credit_note.drawer.label_credit_note_date": "Credit Date",
"credit_note.drawer.label_credits_remaining": "Credits Remaining",
@@ -1640,5 +1640,4 @@
"invoice_transactions.column.withdrawal_account": "Deposit account",
"bill_transactions.column.deposit_account": "Withdrawal account",
"transactions_locking.lock_item.no_lock": "There are no locked transactions in this module."
}
}

11
src/style/components/DataTable/DataTable.scss
View File

@@ -120,7 +120,6 @@
}
.bp3-control.bp3-checkbox .bp3-control-indicator {
border: 1px solid #c2c2c2;
cursor: auto;
&,
@@ -359,12 +358,10 @@
.ReactVirtualized__Grid {
will-change: auto !important;
}
}
.table-constrant {
.table-constrant,
.table--constrant {
.table {
.thead .th {
background: transparent;
@@ -379,9 +376,5 @@
padding: 0.5rem 0.5rem;
border-bottom: 0;
}
.tbody .tr:last-child .td {
border-bottom: 1px solid #d2dce2;
}
}
}

8
src/style/components/Details.scss
View File

@@ -10,7 +10,7 @@
flex-grow: 1;
&__content{
margin: 5px 0;
margin: 2px 0;
}
}
}
@@ -23,12 +23,16 @@
flex-direction: row;
&:not(:first-of-type){
margin-top: 16px;
margin-top: 12px;
}
&__label{
padding-right: 10px;
}
&__content{
width: 100%;
}
}
}

68
src/style/components/Drawers/CreditNoteDetails.module.scss
View File

@@ -1,68 +0,0 @@
.root {
}
.detail_panel {
:global .card {
padding: 22px 15px;
margin: 15px;
}
&_table {
:global .bigcapital-datatable {
margin-top: 30px;
.thead,
.tbody {
.quantity,
.rate,
.amount {
text-align: right;
}
}
}
}
&_footer {
:global .total_lines {
margin-left: auto;
&_line {
.title {
padding-left: 0;
}
.amount,
.title {
width: 180px;
}
.amount {
text-align: right;
}
}
}
}
&_footer {
display: flex;
margin-bottom: 20px;
}
.total_line {
&_subtotal {
border-bottom: 1px solid #000;
}
&_total {
border-bottom: 3px double #000;
font-weight: 600;
}
&_dueAmount {
font-weight: 600;
}
}
&_note {
b {
color: #727983;
}
}
}

59
src/style/components/Drawers/InvoiceDrawer.module.scss
View File

@@ -1,59 +0,0 @@
.detail_panel {
:global .card {
padding: 22px 15px;
}
&_header {
margin-bottom: 30px;
}
&_table {
:global .bigcapital-datatable {
.thead,
.tbody {
.quantity,
.rate,
.amount {
text-align: right;
}
}
}
}
&_footer {
display: flex;
:global .total_lines {
margin-left: auto;
}
:global .total_lines_line {
.amount,
.title {
width: 180px;
}
.amount {
text-align: right;
}
}
.total_line {
&_subtotal {
border-bottom: 1px solid #000;
}
&_total {
border-bottom: 3px double #000;
font-weight: 600;
}
&_dueAmount {
font-weight: 600;
}
}
}
}

4
src/style/objects/form.scss
View File

@@ -504,4 +504,8 @@ label.bp3-label {
}
}
}
}
.bp3-control.bp3-checkbox .bp3-control-indicator{
border-color: #666;
}

54
src/style/pages/JournalEntries/List.scss
View File

@@ -1,29 +1,29 @@
.datatable--journal-entries {
// margin: 12px;
padding: 12px;
// .datatable--journal-entries {
// // margin: 12px;
// padding: 12px;
.table {
.tbody,
.thead {
.tr .th {
padding: 8px 8px;
background-color: #fff;
font-size: 14px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
}
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
// .table {
// .tbody,
// .thead {
// .tr .th {
// padding: 8px 8px;
// background-color: #fff;
// font-size: 14px;
// border-bottom: 1px solid #000;
// border-top: 1px solid #000;
// }
// }
// .tbody {
// .tr .td {
// border-bottom: 0;
// padding-top: 0.4rem;
// padding-bottom: 0.4rem;
&.credit,
&.debit {
font-weight: 600;
}
}
}
}
}
// &.credit,
// &.debit {
// font-weight: 600;
// }
// }
// }
// }
// }

27
src/style/pages/RefundCreditNote/List.scss
View File

@@ -1,27 +0,0 @@
.datatable--refund-transactions {
padding: 12px;
.table {
.tbody,
.thead {
.tr .th {
padding: 8px 8px;
background-color: #fff;
font-size: 14px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
}
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
&.credit,
&.debit {
font-weight: 600;
}
}
}
}
}