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

feat: style payment receive and made details drawers.

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-25 20:42:25 +02:00
parent 759a37bf3f
commit 5abf007de7
31 changed files with 389 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveActionsBar.js
View File

@@ -18,7 +18,7 @@ import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
import { compose } from 'utils';
function PaymentReceiveActionsBar({
// #withAlertsActions
@@ -29,23 +29,18 @@ function PaymentReceiveActionsBar({
}) {
const history = useHistory();
// Retrieve the payment receive drawer context.
const { paymentReceiveId } = usePaymentReceiveDetailContext();
// Handle edit payment receive.
const onEditPaymentReceive = () => {
return paymentReceiveId
? (history.push(`/payment-receives/${paymentReceiveId}/edit`),
closeDrawer('payment-receive-detail-drawer'))
: null;
const handleEditPaymentReceive = () => {
history.push(`/payment-receives/${paymentReceiveId}/edit`);
closeDrawer('payment-receive-detail-drawer');
};
// Handle delete payment receive.
const onDeletePaymentReceive = () => {
return paymentReceiveId
? (openAlert('payment-receive-delete', { paymentReceiveId }),
closeDrawer('payment-receive-detail-drawer'))
: null;
const handleDeletePaymentReceive = () => {
openAlert('payment-receive-delete', { paymentReceiveId });
};
return (
@@ -55,7 +50,7 @@ function PaymentReceiveActionsBar({
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_payment_receive'} />}
onClick={safeCallback(onEditPaymentReceive)}
onClick={handleEditPaymentReceive}
/>
<NavbarDivider />
<Button
@@ -63,7 +58,7 @@ function PaymentReceiveActionsBar({
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeletePaymentReceive)}
onClick={handleDeletePaymentReceive}
/>
</NavbarGroup>
</DashboardActionsBar>

19
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js
View File

@@ -1,31 +1,36 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { DrawerMainTabs } from 'components';
import PaymentReceiveDetailTab from './PaymentReceiveDetailTab';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* payment receive view detail.
* Payment receive view detail.
*/
export default function PaymentReceiveDetail() {
const { transactions } = usePaymentReceiveDetailContext();
return (
<div className="view-detail-drawer">
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
<div className={clsx(PaymentDrawerCls.root)}>
<DrawerMainTabs defaultSelectedTabId="details">
<Tab
title={intl.get('details')}
id={'details'}
title={intl.get('details')}
panel={<PaymentReceiveDetailTab />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
title={intl.get('journal_entries')}
panel={<JournalEntriesTable transactions={transactions} />}
/>
</Tabs>
</DrawerMainTabs>
</div>
);
}

7
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js
View File

@@ -1,8 +1,5 @@
import React from 'react';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import PaymentReceiveDetail from './PaymentReceiveDetail';
import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
@@ -11,10 +8,10 @@ import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
*/
export default function PaymentReceiveDetailContent({
// #ownProp
paymentReceive,
paymentReceiveId,
}) {
return (
<PaymentReceiveDetailProvider paymentReceiveId={paymentReceive}>
<PaymentReceiveDetailProvider paymentReceiveId={paymentReceiveId}>
<PaymentReceiveDetail />
</PaymentReceiveDetailProvider>
);

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

@@ -1,24 +1,31 @@
import React from 'react';
import clsx from 'classnames';
import { TotalLine, TotalLines } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive detail footer.
*/
export default function PaymentReceiveDetailFooter() {
const {
paymentReceive: { formatted_amount },
} = usePaymentReceiveDetailContext();
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<div className="payment-drawer__content-footer">
<div class="total-lines">
<div class="total-lines__line total-lines__line--subtotal">
<div class="title">Subtotal</div>
<div class="amount">{formatted_amount}</div>
</div>
<div class="total-lines__line total-lines__line--total">
<div class="title">TOTAL</div>
<div class="amount">{'Amount'}</div>
</div>
</div>
<div className={clsx(PaymentDrawerCls.detail_panel_footer)}>
<TotalLines>
<TotalLine
title={'Subtotal'}
value={paymentReceive.amount}
className={PaymentDrawerCls.total_line_subtotal}
/>
<TotalLine
title={'TOTAL'}
value={paymentReceive.amount}
className={PaymentDrawerCls.total_line_total}
/>
</TotalLines>
</div>
);
}

72
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
View File

@@ -1,56 +1,58 @@
import React from 'react';
import intl from 'react-intl-universal';
import moment from 'moment';
import clsx from 'classnames';
import { defaultTo } from 'lodash';
import { Card, DetailsMenu, DetailItem } from 'components';
import { DetailsMenu, DetailItem } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive detail header.
*/
export default function PaymentReceiveDetailHeader() {
const {
paymentReceive: {
formatted_amount,
payment_receive_no,
customer,
deposit_account,
formatted_payment_date,
statement,
created_at,
},
} = usePaymentReceiveDetailContext();
const { paymentReceive } = usePaymentReceiveDetailContext();
return (
<div className={'payment-drawer__content-header'}>
<div className={clsx(PaymentDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{formatted_amount}</h3>
</DetailItem>
<DetailItem label={intl.get('payment_receive_no')}>
{payment_receive_no}
</DetailItem>
<DetailItem label={intl.get('customer_name')}>
{customer?.display_name}
</DetailItem>
<DetailItem label={intl.get('deposit_account')}>
{deposit_account?.name}
</DetailItem>
<DetailItem label={intl.get('payment_date')}>
{formatted_payment_date}
</DetailItem>
<DetailItem
label={intl.get('amount')}
children={
<h3 class="big-number">{paymentReceive.formatted_amount}</h3>
}
/>
<DetailItem
label={intl.get('payment_receive.details.payment_number')}
children={defaultTo(paymentReceive.payment_receive_no, '-')}
/>
<DetailItem
label={intl.get('customer_name')}
children={paymentReceive.customer?.display_name}
/>
<DetailItem
label={intl.get('deposit_account')}
children={paymentReceive.deposit_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={paymentReceive.formatted_payment_date}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('description')}>
{defaultTo(statement, '—')}
</DetailItem>
<DetailItem label={intl.get('created_at')}>
{moment(created_at).format('YYYY MMM DD')}
</DetailItem>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentReceive.statement, '—')}
/>
<DetailItem
label={intl.get('created_at')}
children={moment(paymentReceive.created_at).format('YYYY MMM DD')}
/>
</DetailsMenu>
</div>
);

15
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js
View File

@@ -9,10 +9,13 @@ const PaymentReceiveDetailContext = React.createContext();
* Payment receive detail provider.
*/
function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
const { data: paymentReceive, isFetching: isPaymentReceiveLoading } =
usePaymentReceive(paymentReceiveId, {
enabled: !!paymentReceiveId,
});
const {
data: paymentReceive,
isLoading: isPaymentLoading,
isFetching: isPaymentFetching,
} = usePaymentReceive(paymentReceiveId, {
enabled: !!paymentReceiveId,
});
// Handle fetch transaction by reference.
const {
@@ -26,11 +29,11 @@ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
{ enabled: !!paymentReceiveId },
);
//provider.
// Provider.
const provider = { transactions, paymentReceive, paymentReceiveId };
return (
<DashboardInsider loading={isTransactionLoading || isPaymentReceiveLoading}>
<DashboardInsider loading={isTransactionLoading || isPaymentLoading}>
<DrawerHeaderContent
name="payment-receive-detail-drawer"
title={intl.get('payment_receive_details')}

18
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTab.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'classnames';
import { Card } from 'components';
@@ -7,17 +8,18 @@ import PaymentReceiveDetailHeader from './PaymentReceiveDetailHeader';
import PaymentReceiveDetailTable from './PaymentReceiveDetailTable';
import PaymentReceiveDetailFooter from './PaymentReceiveDetailFooter';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
export default function PaymentReceiveDetailTab() {
return (
<div className={'payment-drawer'}>
<div className={clsx(PaymentDrawerCls.detail_panel)}>
<PaymentReceiveActionsBar />
<div>
<Card>
<PaymentReceiveDetailHeader />
<PaymentReceiveDetailTable />
{/* <PaymentReceiveDetailFooter /> */}
</Card>
</div>
<Card>
<PaymentReceiveDetailHeader />
<PaymentReceiveDetailTable />
<PaymentReceiveDetailFooter />
</Card>
</div>
);
}

18
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailTable.js
View File

@@ -1,18 +1,30 @@
import React from 'react';
import clsx from 'classnames';
import { usePaymentReceiveEntriesColumns } from './utils';
import { DataTable, Card } from 'components';
import { DataTable } from 'components';
import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';
import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
/**
* Payment receive readonly details table.
*/
export default function PaymentReceiveDetailTable() {
const columns = usePaymentReceiveEntriesColumns();
const {
paymentReceive: { entries },
} = usePaymentReceiveDetailContext();
return (
<div className="payment-drawer__content--table">
<DataTable columns={columns} data={entries} />
<div className={clsx(PaymentDrawerCls.detail_panel_table)}>
<DataTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
</div>
);
}

53
client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDrawer.module.scss Normal file
View File

@@ -0,0 +1,53 @@
.root {}
.detail_panel {
:global .card {
padding: 22px 15px;
}
&_header {
margin-bottom: 30px;
}
&_table {
:global .bigcapital-datatable {
.thead,
.tbody {
.invoice_amount,
.amount_due,
.payment_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;
}
}
}

7
client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js
View File

@@ -22,13 +22,10 @@ function PaymentReceiveDetailDrawer({
isOpen={isOpen}
name={name}
size={'65%'}
style={{
minWidth: '700px',
maxWidth: '900px',
}}
style={{ minWidth: '700px', maxWidth: '900px' }}
>
<DrawerSuspense>
<PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
<PaymentReceiveDetailContent paymentReceiveId={paymentReceiveId} />
</DrawerSuspense>
</Drawer>
);

71
client/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js
View File

@@ -2,34 +2,45 @@ import React from 'react';
import intl from 'react-intl-universal';
import moment from 'moment';
/**
* Retrieve payment entries table columns.
*/
export const usePaymentReceiveEntriesColumns = () =>
React.useMemo(() => [
{
Header: intl.get('date'),
accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
width: 100,
disableSortBy: true,
},
{
Header: intl.get('invoice_no'),
accessor: 'invoice.invoice_no',
width: 150,
disableSortBy: true,
},
{
Header: intl.get('invoice_amount'),
accessor: 'invoice.balance',
},
{
Header: intl.get('amount_due'),
accessor: 'invoice.amount_due',
width: 100,
disableSortBy: true,
},
{
Header: intl.get('payment_amount'),
accessor: 'invoice.payment_amount',
width: 100,
disableSortBy: true,
},
]);
React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: (row) => moment(row.payment_date).format('YYYY MMM DD'),
width: 100,
className: 'date',
disableSortBy: true,
},
{
Header: intl.get('invoice_no'),
accessor: 'invoice.invoice_no',
width: 150,
className: 'invoice_number',
disableSortBy: true,
},
{
Header: intl.get('invoice_amount'),
accessor: 'invoice.balance',
className: 'invoice_amount',
},
{
Header: intl.get('amount_due'),
accessor: 'invoice.amount_due',
className: 'amount_due',
width: 100,
disableSortBy: true,
},
{
Header: intl.get('payment_amount'),
accessor: 'invoice.payment_amount',
className: 'payment_amount',
width: 100,
disableSortBy: true,
},
],
[],
);