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

feat: add style of bill.

Browse Source
This commit is contained in:
elforjani13
2021-12-20 15:31:03 +02:00
parent a0098382e7
commit 3511348d04
15 changed files with 265 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/containers/Drawers/BillDrawer/BillDetailActionsBar.js
View File

@@ -16,7 +16,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Can, If, Icon, FormattedMessage as T } from 'components'; import {
Can,
If,
Icon,
DrawerActionsBar,
FormattedMessage as T,
} from 'components';
import { import {
BillAction, BillAction,
PaymentMadeAction, PaymentMadeAction,
@@ -56,7 +62,7 @@ function BillDetailActionsBar({
}; };
return ( return (
<DashboardActionsBar> <DrawerActionsBar>
<NavbarGroup> <NavbarGroup>
<Can I={BillAction.Edit} a={AbilitySubject.Bill}> <Can I={BillAction.Edit} a={AbilitySubject.Bill}>
<Button <Button
@@ -71,7 +77,7 @@ function BillDetailActionsBar({
<If condition={bill.is_open && !bill.is_fully_paid}> <If condition={bill.is_open && !bill.is_fully_paid}>
<Button <Button
className={Classes.MINIMAL} className={Classes.MINIMAL}
icon={<Icon icon="quick-payment-16" iconSize={16} />} icon={<Icon icon="arrow-upward" iconSize={16} />}
text={<T id={'add_payment'} />} text={<T id={'add_payment'} />}
onClick={handleQuickBillPayment} onClick={handleQuickBillPayment}
/> />
@@ -88,7 +94,7 @@ function BillDetailActionsBar({
/> />
</Can> </Can>
</NavbarGroup> </NavbarGroup>
</DashboardActionsBar> </DrawerActionsBar>
); );
} }

114
src/containers/Drawers/BillDrawer/BillDetailHeader.js
View File

@@ -1,12 +1,21 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { defaultTo } from 'lodash'; import { defaultTo } from 'lodash';
import clsx from 'classnames'; import styled from 'styled-components';
import { FormatDate, DetailsMenu, DetailItem } from 'components'; import {
FormatDate,
DetailsMenu,
DetailItem,
ButtonLink,
Row,
Col,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { useBillDrawerContext } from './BillDrawerProvider'; import { useBillDrawerContext } from './BillDrawerProvider';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss'; import { BillDetailsStatus } from './utils';
/** /**
* Bill detail header. * Bill detail header.
@@ -15,44 +24,65 @@ export default function BillDetailHeader() {
const { bill } = useBillDrawerContext(); const { bill } = useBillDrawerContext();
return ( return (
<div className={clsx(BillDrawerCls.detail_panel_header)}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem <DetailsMenu>
label={intl.get('amount')} <AmountDetailItem label={intl.get('amount')}>
children={<h3 class="big-number">{bill.formatted_amount}</h3>} <h3 class="big-number">{bill.formatted_amount}</h3>
/> </AmountDetailItem>
<DetailItem <StatusDetailItem>
label={intl.get('bill.details.bill_number')} <BillDetailsStatus bill={bill} />
children={defaultTo(bill.bill_number, '-')} </StatusDetailItem>
/> </DetailsMenu>
<DetailItem </CommercialDocTopHeader>
label={intl.get('bill_date')} <Row>
children={<FormatDate value={bill.bill_date} />} <Col xs={6}>
/> <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
<DetailItem <DetailItem label={intl.get('bill_date')}>
label={intl.get('vendor_name')} <FormatDate value={bill.bill_date} />
children={bill.vendor?.display_name} </DetailItem>
/> <DetailItem label={intl.get('due_date')}>
<DetailItem <FormatDate value={bill.due_date} />
label={intl.get('due_date')} </DetailItem>
children={<FormatDate value={bill.due_date} />} <DetailItem label={intl.get('vendor_name')}>
/> <ButtonLink>{bill.vendor?.display_name}</ButtonLink>
</DetailsMenu> </DetailItem>
<DetailItem label={intl.get('bill.details.bill_number')}>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}> {defaultTo(bill.bill_number, '-')}
<DetailItem </DetailItem>
label={intl.get('due_amount')} </DetailsMenu>
children={bill.formatted_due_amount} </Col>
/> <Col xs={6}>
<DetailItem <DetailsMenu
label={intl.get('reference')} direction={'horizantal'}
children={defaultTo(bill.reference_no, '--')} minLabelSize={'140px'}
/> textAlign={'right'}
<DetailItem >
label={intl.get('bill.details.created_at')} <DetailItem label={intl.get('due_amount')}>
children={<FormatDate value={bill.created_at} />} <strong>{bill.formatted_due_amount}</strong>
/> </DetailItem>
</DetailsMenu> <DetailItem
</div> label={intl.get('reference')}
children={defaultTo(bill.reference_no, '--')}
/>
<DetailItem
label={intl.get('bill.details.created_at')}
children={<FormatDate value={bill.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/BillDrawer/BillDetailTab.js
View File

@@ -1,14 +1,10 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { Card } from 'components'; import { CommercialDocBox } from 'components';
import BillDetailActionsBar from './BillDetailActionsBar';
import BillDetailHeader from './BillDetailHeader'; import BillDetailHeader from './BillDetailHeader';
import BillDetailTable from './BillDetailTable'; import BillDetailTable from './BillDetailTable';
import { BillDetailFooter } from './BillDetailFooter' import { BillDetailFooter } from './BillDetailFooter';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
/** /**
@@ -16,14 +12,10 @@ import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
*/ */
export default function BillDetailTab() { export default function BillDetailTab() {
return ( return (
<div className={clsx(BillDrawerCls.detail_panel)}> <CommercialDocBox>
<BillDetailActionsBar /> <BillDetailHeader />
<BillDetailTable />
<Card> <BillDetailFooter />
<BillDetailHeader /> </CommercialDocBox>
<BillDetailTable />
<BillDetailFooter />
</Card>
</div>
); );
} }

21
src/containers/Drawers/BillDrawer/BillDetailTable.js
View File

@@ -1,26 +1,25 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components'; import { CommercialDocEntriesTable } from 'components';
import { useBillDrawerContext } from './BillDrawerProvider'; import { useBillDrawerContext } from './BillDrawerProvider';
import { useBillReadonlyEntriesTableColumns } from './utils'; import { useBillReadonlyEntriesTableColumns } from './utils';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss'; import { TableStyle } from '../../../common';
export default function BillDetailTable() { export default function BillDetailTable() {
const { bill: { entries } } = useBillDrawerContext(); const {
bill: { entries },
} = useBillDrawerContext();
// Retrieve bill readonly entries table columns. // Retrieve bill readonly entries table columns.
const columns = useBillReadonlyEntriesTableColumns(); const columns = useBillReadonlyEntriesTableColumns();
return ( return (
<div className={clsx(BillDrawerCls.detail_panel_table)}> <CommercialDocEntriesTable
<DataTable columns={columns}
columns={columns} data={entries}
data={entries} styleName={TableStyle.Constrant}
className={'table-constrant'} />
/>
</div>
); );
} }

13
src/containers/Drawers/BillDrawer/BillDrawerAlerts.js
View File

@@ -1,13 +0,0 @@
import React from 'react';
import BillLocatedLandedCostDeleteAlert from 'containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert';
/**
* Bill drawer alert.
*/
export default function BillDrawerAlerts() {
return (
<div class="bills-alerts">
<BillLocatedLandedCostDeleteAlert name="bill-located-cost-delete" />
</div>
);
}

3
src/containers/Drawers/BillDrawer/BillDrawerContent.js
View File

@@ -1,10 +1,8 @@
import React from 'react'; import React from 'react';
import { DrawerBody } from 'components'; import { DrawerBody } from 'components';
import { BillDrawerProvider } from './BillDrawerProvider'; import { BillDrawerProvider } from './BillDrawerProvider';
import BillDrawerDetails from './BillDrawerDetails'; import BillDrawerDetails from './BillDrawerDetails';
import BillDrawerAlerts from './BillDrawerAlerts';
/** /**
* Bill drawer content. * Bill drawer content.
@@ -17,7 +15,6 @@ export default function BillDrawerContent({
<BillDrawerProvider billId={billId}> <BillDrawerProvider billId={billId}>
<DrawerBody> <DrawerBody>
<BillDrawerDetails /> <BillDrawerDetails />
<BillDrawerAlerts />
</DrawerBody> </DrawerBody>
</BillDrawerProvider> </BillDrawerProvider>
); );

83
src/containers/Drawers/BillDrawer/BillDrawerDetails.js
View File

@@ -1,53 +1,60 @@
import React from 'react'; import React from 'react';
import { Tab } from '@blueprintjs/core'; import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import clsx from 'classnames'; import styled from 'styled-components';
import { DrawerMainTabs } from 'components'; import { DrawerMainTabs } from 'components';
import BillDetailTab from './BillDetailTab'; import BillDetailTab from './BillDetailTab';
import LocatedLandedCostTable from './LocatedLandedCostTable'; import LocatedLandedCostTable from './LocatedLandedCostTable';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable'; import BillGLEntriesTable from './BillGLEntriesTable';
import BillPaymentTransactionTable from './BillPaymentTransactions/BillPaymentTransactionTable'; import BillPaymentTransactionTable from './BillPaymentTransactions/BillPaymentTransactionTable';
import { useBillDrawerContext } from './BillDrawerProvider'; import BillDetailActionsBar from './BillDetailActionsBar';
import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
/** /**
* Bill view details. * Bill details tabs.
*/ */
export default function BillDrawerDetails() { function BillDetailsTabs() {
const {
data: { transactions },
} = useBillDrawerContext();
return ( return (
<div className={clsx(BillDrawerCls.root)}> <DrawerMainTabs
<DrawerMainTabs renderActiveTabPanelOnly={true}
renderActiveTabPanelOnly={true} defaultSelectedTabId="details"
defaultSelectedTabId="details" >
> <Tab
<Tab title={intl.get('overview')}
title={intl.get('details')} id={'details'}
id={'details'} panel={<BillDetailTab />}
panel={<BillDetailTab />} />
/> <Tab
<Tab title={intl.get('journal_entries')}
title={intl.get('journal_entries')} id={'journal_entries'}
id={'journal_entries'} panel={<BillGLEntriesTable />}
panel={<JournalEntriesTable transactions={transactions} />} />
/>
<Tab <Tab
title={intl.get('payment_transactions')} title={intl.get('payment_transactions')}
id={'payment_transactions'} id={'payment_transactions'}
panel={<BillPaymentTransactionTable />} panel={<BillPaymentTransactionTable />}
/> />
<Tab <Tab
title={intl.get('located_landed_cost')} title={intl.get('located_landed_cost')}
id={'landed_cost'} id={'landed_cost'}
panel={<LocatedLandedCostTable />} panel={<LocatedLandedCostTable />}
/> />
</DrawerMainTabs> </DrawerMainTabs>
</div>
); );
} }
/**
* Bill view detail.
*/
export default function BillDetails() {
return (
<BillDetailsRoot>
<BillDetailActionsBar />
<BillDetailsTabs />
</BillDetailsRoot>
);
}
export const BillDetailsRoot = styled.div``;

20
src/containers/Drawers/BillDrawer/BillDrawerProvider.js
View File

@@ -1,11 +1,7 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { DrawerHeaderContent, DrawerLoading } from 'components'; import { DrawerHeaderContent, DrawerLoading } from 'components';
import { import { useBill, useBillLocatedLandedCost } from 'hooks/query';
useBill,
useTransactionsByReference,
useBillLocatedLandedCost,
} from 'hooks/query';
const BillDrawerContext = React.createContext(); const BillDrawerContext = React.createContext();
@@ -18,15 +14,6 @@ function BillDrawerProvider({ billId, ...props }) {
enabled: !!billId, enabled: !!billId,
}); });
// Handle fetch transaction by reference.
const { data, isLoading: isTransactionLoading } = useTransactionsByReference(
{
reference_id: billId,
reference_type: 'Bill',
},
{ enabled: !!billId },
);
// Handle fetch bill located landed cost transaction. // Handle fetch bill located landed cost transaction.
const { isLoading: isLandedCostLoading, data: transactions } = const { isLoading: isLandedCostLoading, data: transactions } =
useBillLocatedLandedCost(billId, { useBillLocatedLandedCost(billId, {
@@ -35,13 +22,12 @@ function BillDrawerProvider({ billId, ...props }) {
//provider. //provider.
const provider = { const provider = {
transactions,
billId, billId,
data, transactions,
bill, bill,
}; };
const loading = isLandedCostLoading || isTransactionLoading || isBillLoading; const loading = isLandedCostLoading || isBillLoading;
return ( return (
<DrawerLoading loading={loading}> <DrawerLoading loading={loading}>

49
src/containers/Drawers/BillDrawer/BillGLEntriesTable.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
import { useTransactionsByReference } from 'hooks/query';
import { useBillDrawerContext } from './BillDrawerProvider';
import JournalEntriesTable, {
AmountDisplayedBaseCurrencyMessage,
} from '../../JournalEntriesTable/JournalEntriesTable';
/**
* Bill GL entries table.
* @returns {React.JSX}
*/
export default function BillGLEntriesTable() {
const { billId } = useBillDrawerContext();
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: billId,
reference_type: 'Bill',
},
{ enabled: !!billId },
);
return (
<BilleGLEntriesRoot>
<AmountDisplayedBaseCurrencyMessage />
<BillGLEntriesDatatable
loading={isTransactionLoading}
transactions={transactions}
/>
</BilleGLEntriesRoot>
);
}
const BilleGLEntriesRoot = styled(Card)``;
const BillGLEntriesDatatable = styled(JournalEntriesTable)`
.table .tbody .tr:last-child .td {
border-bottom: 0;
}
`;

8
src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
View File

@@ -2,12 +2,13 @@ import React from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { DataTable, Card } from 'components'; import { DataTable, Card } from 'components';
import 'style/pages/PaymentTransactions/List.scss';
import { useBillPaymentTransactionsColumns, ActionsMenu } from './components'; import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
import { useBillDrawerContext } from '../BillDrawerProvider'; import { useBillDrawerContext } from '../BillDrawerProvider';
import { useBillPaymentTransactions } from 'hooks/query'; import { useBillPaymentTransactions } from 'hooks/query';
import { TableStyle } from '../../../../common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -59,12 +60,13 @@ function BillPaymentTransactionTable({
loading={isPaymentTransactionsLoading} loading={isPaymentTransactionsLoading}
headerLoading={isPaymentTransactionsLoading} headerLoading={isPaymentTransactionsLoading}
progressBarLoading={isPaymentTransactionFetching} progressBarLoading={isPaymentTransactionFetching}
TableLoadingRenderer={TableSkeletonRows}
styleName={TableStyle.Constrant}
ContextMenu={ActionsMenu} ContextMenu={ActionsMenu}
payload={{ payload={{
onDelete: handleDeleteBillPaymentTransactons, onDelete: handleDeleteBillPaymentTransactons,
onEdit: handleEditBillPaymentTransactions, onEdit: handleEditBillPaymentTransactions,
}} }}
className={'payment-transactions'}
/> />
</Card> </Card>
); );

8
src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js
View File

@@ -5,12 +5,13 @@ import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
import { useLocatedLandedCostColumns, ActionsMenu } from './components'; import { useLocatedLandedCostColumns, ActionsMenu } from './components';
import { useBillDrawerContext } from './BillDrawerProvider'; import { useBillDrawerContext } from './BillDrawerProvider';
import '../../../style/pages/AllocateLandedCost/List.scss';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions'; import withDialogActions from 'containers/Dialog/withDialogActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { TableStyle } from '../../../common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import { compose } from 'utils'; import { compose } from 'utils';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
@@ -75,11 +76,12 @@ function LocatedLandedCostTable({
columns={columns} columns={columns}
data={transactions} data={transactions}
ContextMenu={ActionsMenu} ContextMenu={ActionsMenu}
TableLoadingRenderer={TableSkeletonRows}
styleName={TableStyle.Constrant}
payload={{ payload={{
onDelete: handleDeleteTransaction, onDelete: handleDeleteTransaction,
onFromTranscationClick: handleFromTransactionClick, onFromTranscationClick: handleFromTransactionClick,
}} }}
className={'datatable--landed-cost-transactions'}
/> />
</Card> </Card>
</div> </div>

49
src/containers/Drawers/BillDrawer/utils.js
View File

@@ -1,7 +1,13 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components';
import { Intent, Tag } from '@blueprintjs/core';
import { FormatNumberCell } from '../../../components'; import {
FormatNumberCell,
FormattedMessage as T,
Choose,
} from '../../../components';
/** /**
* Retrieve bill readonly details entries table columns. * Retrieve bill readonly details entries table columns.
@@ -49,3 +55,44 @@ export const useBillReadonlyEntriesTableColumns = () =>
], ],
[], [],
); );
/**
* Bill details status.
* @returns {React.JSX}
*/
export function BillDetailsStatus({ bill }) {
return (
<Choose>
<Choose.When condition={bill.is_fully_paid && bill.is_open}>
<StatusTag intent={Intent.SUCCESS} round={true}>
<T id={'paid'} />
</StatusTag>
</Choose.When>
<Choose.When condition={bill.is_open}>
<Choose>
<Choose.When condition={bill.is_overdue}>
<StatusTag intent={Intent.WARNING} round={true}>
Overdue
</StatusTag>
</Choose.When>
<Choose.Otherwise>
<StatusTag intent={Intent.PRIMARY} round={true}>
Due
</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;
`;

8
src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
View File

@@ -7,7 +7,15 @@ const BillDeleteAlert = React.lazy(() =>
import('containers/Alerts/Bills/BillDeleteAlert'), import('containers/Alerts/Bills/BillDeleteAlert'),
); );
const BillLocatedLandedCostDeleteAlert = React.lazy(() =>
import('containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert'),
);
export default [ export default [
{ name: 'bill-delete', component: BillDeleteAlert }, { name: 'bill-delete', component: BillDeleteAlert },
{ name: 'bill-open', component: BillOpenAlert }, { name: 'bill-open', component: BillOpenAlert },
{
name: 'bill-located-cost-delete',
component: BillLocatedLandedCostDeleteAlert,
},
]; ];

2
src/containers/Purchases/Bills/BillsLanding/components.js
View File

@@ -57,7 +57,7 @@ export function ActionsMenu({
<If condition={!original.is_open}> <If condition={!original.is_open}>
<MenuItem <MenuItem
icon={<Icon icon={'check'} iconSize={18} />} icon={<Icon icon={'check'} iconSize={18} />}
text={intl.get('mark_as_opened')} text={intl.get('mark_as_open')}
onClick={safeCallback(onOpen, original)} onClick={safeCallback(onOpen, original)}
/> />
</If> </If>

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

@@ -714,7 +714,6 @@
"mark_as_delivered": "Mark as delivered", "mark_as_delivered": "Mark as delivered",
"deliver": "Deliver", "deliver": "Deliver",
"mark_as_closed": "Mark as closed", "mark_as_closed": "Mark as closed",
"mark_as_open": "Mark as open",
"save_close": "Save & Close", "save_close": "Save & Close",
"save_open": "Save & Open", "save_open": "Save & Open",
"close_and_new": "Close and new", "close_and_new": "Close and new",
@@ -758,6 +757,7 @@
"inventory_adjustments": "Inventory adjustments", "inventory_adjustments": "Inventory adjustments",
"make_adjustment": "Make an adjustment", "make_adjustment": "Make an adjustment",
"adjustment_type": "Adjustment type", "adjustment_type": "Adjustment type",
"mark_as_open":"Make as Open",
"decrement": "Decrement", "decrement": "Decrement",
"new_quantity": "New quantity", "new_quantity": "New quantity",
"reason": "Reason", "reason": "Reason",
@@ -1219,6 +1219,7 @@
"bill.details.subtotal": "Subtotal", "bill.details.subtotal": "Subtotal",
"bill.details.payment_amount": "Payment amount", "bill.details.payment_amount": "Payment amount",
"bill.details.due_amount": "Due amount", "bill.details.due_amount": "Due amount",
"bill.drawer.bill_details":"Bill details ({billNumber})",
"expense.details.subtotal": "Subtotal", "expense.details.subtotal": "Subtotal",
"expense.details.total": "Total", "expense.details.total": "Total",
"manual_journal.details.subtotal": "Subtotal", "manual_journal.details.subtotal": "Subtotal",