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

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>
);
};