feat: optimize style of invoice details.

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

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``;