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

Merge branch 'develop' of https://github.com/bigcapitalhq/client into develop

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-20 13:28:22 +02:00
parent 4dda2a37aa 0e79dceae8
commit a953236bff
47 changed files with 1232 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/containers/Accounting/MakeJournal/MakeJournalProvider.js
View File

@@ -7,7 +7,8 @@ import {
useJournal,
useCreateJournal,
useEditJournal,
useSettings
useSettings,
useSettingsManualJournals
} from 'hooks/query';
const MakeJournalFormContext = createContext();
@@ -40,7 +41,7 @@ function MakeJournalProvider({ journalId, ...props }) {
const { mutateAsync: editJournalMutate } = useEditJournal();
// Loading the journal settings.
const { isLoading: isSettingsLoading } = useSettings();
const { isLoading: isSettingsLoading } = useSettingsManualJournals();
// Submit form payload.
const [submitPayload, setSubmitPayload] = useState({});

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

@@ -19,12 +19,14 @@ import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
export default function BillDrawerDetails() {
const {
data: { transactions },
billId,
} = useBillDrawerContext();
return (
<div className={clsx(BillDrawerCls.root)}>
<DrawerMainTabs renderActiveTabPanelOnly={true} defaultSelectedTabId="details">
<DrawerMainTabs
renderActiveTabPanelOnly={true}
defaultSelectedTabId="details"
>
<Tab
title={intl.get('details')}
id={'details'}
@@ -38,7 +40,7 @@ export default function BillDrawerDetails() {
<Tab
title={intl.get('payment_transactions')}
id={'payment_transactions'}
panel={<BillPaymentTransactionTable billId={billId} />}
panel={<BillPaymentTransactionTable />}
/>
<Tab
title={intl.get('located_landed_cost')}

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

@@ -1,16 +1,30 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable, Card } from 'components';
import 'style/pages/PaymentTransactions/List.scss';
import { useBillPaymentTransactionsColumns } from './components';
import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
import { useBillDrawerContext } from '../BillDrawerProvider';
import { useBillPaymentTransactions } from 'hooks/query';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
/**
* Bill payment transactions datatable.
*/
export default function BillPaymentTransactionTable() {
function BillPaymentTransactionTable({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
const columns = useBillPaymentTransactionsColumns();
const { billId } = useBillDrawerContext();
@@ -24,6 +38,19 @@ export default function BillPaymentTransactionTable() {
enabled: !!billId,
});
// Handles delete bill payment transactions.
const handleDeleteBillPaymentTransactons = ({ bill_id }) => {
openAlert('bill-delete', {
billId: bill_id,
});
};
// Handles edit bill payment transactions.
const handleEditBillPaymentTransactions = ({ bill_id }) => {
history.push(`/bills/${bill_id}/edit`);
closeDrawer('bill-drawer');
};
return (
<Card>
<DataTable
@@ -32,8 +59,18 @@ export default function BillPaymentTransactionTable() {
loading={isPaymentTransactionsLoading}
headerLoading={isPaymentTransactionsLoading}
progressBarLoading={isPaymentTransactionFetching}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeleteBillPaymentTransactons,
onEdit: handleEditBillPaymentTransactions,
}}
className={'payment-transactions'}
/>
</Card>
);
}
export default compose(
withAlertsActions,
withDrawerActions,
)(BillPaymentTransactionTable);

29
src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
View File

@@ -1,9 +1,34 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent, Menu, MenuItem } from '@blueprintjs/core';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { FormatDateCell } from '../../../../components';
import { FormatDateCell, Icon } from '../../../../components';
import { safeCallback } from 'utils';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('invoice_transactions.action.edit_transaction')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={intl.get('invoice_transactions.action.delete_transaction')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Retrieve bill payment transactions table columns.

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

@@ -1,5 +1,5 @@
import React from 'react';
import { DataTable, Card } from 'components';
import { DataTable, Card, FormattedMessage as T } from 'components';
import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
import { useLocatedLandedCostColumns, ActionsMenu } from './components';
@@ -31,16 +31,16 @@ function LocatedLandedCostTable({
const columns = useLocatedLandedCostColumns();
const { transactions, billId } = useBillDrawerContext();
// Handle the transaction delete action.
const handleDeleteTransaction = ({ id }) => {
openAlert('bill-located-cost-delete', { BillId: id });
};
// Handle allocate landed cost button click.
const handleAllocateCostClick = () => {
openDialog('allocate-landed-cost', { billId });
};
// Handle the transaction delete action.
const handleDeleteTransaction = ({ id }) => {
openAlert('bill-located-cost-delete', { BillId: id });
};
// Handle from transaction link click.
const handleFromTransactionClick = (original) => {
const { from_transaction_type, from_transaction_id } = original;
@@ -64,7 +64,7 @@ function LocatedLandedCostTable({
<Button
className={Classes.MINIMAL}
icon={<Icon icon="receipt-24" />}
text={'Allocate landed cost'}
text={<T id={'allocate_landed_coast'} />}
onClick={handleAllocateCostClick}
/>
</NavbarGroup>

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

@@ -8,6 +8,7 @@ import CreditNoteDetailActionsBar from './CreditNoteDetailActionsBar';
import CreditNoteDetailPanel from './CreditNoteDetailPanel';
import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
import ReconcileCreditNoteTransactionsTable from './ReconcileCreditNoteTransactions/ReconcileCreditNoteTransactionsTable';
import { CreditNoteGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
/**
* Credit Note view detail.
@@ -34,6 +35,11 @@ function CreditNoteDetailsTabs() {
id={'details'}
panel={<CreditNoteDetailPanel />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<CreditNoteGLEntriesTable />}
/>
<Tab
title={intl.get('credit_note.drawer.label_refund_transactions')}
id={'refund_transactions'}

44
src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { Card } from 'components';
import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
import { useTransactionsByReference } from 'hooks/query';
import { useJournalEntriesTransactionsColumns } from './components';
import JournalEntriesTable, {
AmountDisplayedBaseCurrencyMessage,
} from '../../../JournalEntriesTable/JournalEntriesTable';
/**
* Journal entries table.
*/
export function CreditNoteGLEntriesTable() {
const { creditNoteId } = useCreditNoteDetailDrawerContext();
// Credit note GL entries table columns.
const columns = useJournalEntriesTransactionsColumns();
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: creditNoteId,
reference_type: 'creditNote',
},
{ enabled: !!creditNoteId },
);
return (
<Card>
<AmountDisplayedBaseCurrencyMessage />
<JournalEntriesTable
columns={columns}
data={transactions}
loading={isTransactionLoading}
/>
</Card>
);
}

49
src/containers/Drawers/CreditNoteDetailDrawer/JournalEntriesTransactions/components.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import intl from 'react-intl-universal';
import { FormatDateCell, Icon } from '../../../../components';
import 'style/pages/JournalEntries/List.scss';
/**
* Retrieve journal entries transactions table columns.
*/
export const useJournalEntriesTransactionsColumns = () => {
return React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: 'date',
accessor: 'formatted_date',
Cell: FormatDateCell,
width: 140,
className: 'date',
textOverview: true,
},
{
Header: intl.get('account_name'),
accessor: 'account_name',
width: 140,
className: 'account_name',
textOverview: true,
},
{
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',
},
],
[],
);
};

4
src/containers/Drawers/InvoiceDetailDrawer/InvoiceGLEntriesTable.js
View File

@@ -46,6 +46,4 @@ const InvoiceGLEntriesDatatable = styled(JournalEntriesTable)`
}
`;
const InvoiceGLEntriesRoot = styled(Card)`
padding: 15px;
`;
const InvoiceGLEntriesRoot = styled(Card)``;

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

@@ -1,20 +1,35 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable, Card } from 'components';
import 'style/pages/PaymentTransactions/List.scss';
import { useInvoicePaymentTransactionsColumns } from './components';
import {
useInvoicePaymentTransactionsColumns,
ActionsMenu,
} from './components';
import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
import { useInvoicePaymentTransactions } from 'hooks/query';
import { TableStyle } from '../../../../common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
/**
* Invoice payment transactions datatable.
*/
export default function InvoicePaymentTransactionsTable() {
// Retrieve invoice payment transactions columns.
function InvoicePaymentTransactionsTable({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
// Invoice payment transactions table columns.
const columns = useInvoicePaymentTransactionsColumns();
// Invoice drawer context.
@@ -29,6 +44,18 @@ export default function InvoicePaymentTransactionsTable() {
enabled: !!invoiceId,
});
// Handles delete payment transactions.
const handleDeletePaymentTransactons = ({ payment_receive_id }) => {
openAlert('payment-receive-delete', {
paymentReceiveId: payment_receive_id,
});
};
// Handles edit payment transactions.
const handleEditPaymentTransactions = ({ payment_receive_id }) => {
history.push(`/payment-receives/${payment_receive_id}/edit`);
closeDrawer('invoice-detail-drawer');
};
return (
<Card>
<DataTable
@@ -39,7 +66,17 @@ export default function InvoicePaymentTransactionsTable() {
progressBarLoading={isPaymentTransactionFetching}
TableLoadingRenderer={TableSkeletonRows}
styleName={TableStyle.Constrant}
ContextMenu={ActionsMenu}
payload={{
onDelete: handleDeletePaymentTransactons,
onEdit: handleEditPaymentTransactions,
}}
/>
</Card>
);
}
export default compose(
withAlertsActions,
withDrawerActions,
)(InvoicePaymentTransactionsTable);

29
src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
View File

@@ -1,9 +1,34 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent, Menu, MenuItem } from '@blueprintjs/core';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { FormattedMessage as T, FormatDateCell } from '../../../../components';
import { FormatDateCell, Icon } from '../../../../components';
import { safeCallback } from 'utils';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('invoice_transactions.action.edit_transaction')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={intl.get('invoice_transactions.action.delete_transaction')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Retrieve invoice payment transactions table columns.

10
src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js
View File

@@ -1,10 +1,7 @@
import React from 'react';
import ItemDetailTab from './ItemDetailTab';
import ItemDetailActionsBar from './ItemDetailActionsBar';
import ItemDetailHeader from './ItemDetailHeader';
import { ItemPaymentTransactions } from './ItemPaymentTransactions';
import { Card } from 'components';
/**
* Item detail.
@@ -13,10 +10,7 @@ export default function ItemDetail() {
return (
<div className="item-drawer">
<ItemDetailActionsBar />
<ItemPaymentTransactions />
<Card>
<ItemDetailHeader />
</Card>
<ItemDetailTab />
</div>
);
}

5
src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js
View File

@@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext();
* Item detail provider
*/
function ItemDetailDrawerProvider({ itemId, ...props }) {
// transaction type payload.
const [value, setValue] = React.useState('invoices');
// Fetches the given item detail.
const { isLoading: isItemLoading, data: item } = useItem(itemId, {
enabled: !!itemId,
@@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) {
item,
itemId,
isItemLoading,
value,
setValue,
};
return (

130
src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js
View File

@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import classNames from 'classnames';
import { If, DetailsMenu, DetailItem } from 'components';
import { If, DetailsMenu, DetailItem, Card } from 'components';
import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider';
/**
@@ -13,70 +13,72 @@ export default function ItemDetailHeader() {
const { item } = useItemDetailDrawerContext();
return (
<div class="item-drawer__content">
<DetailsMenu direction={'vertical'}>
<DetailItem
name={'name'}
label={intl.get('item_name')}
children={item.name}
/>
<DetailItem
label={intl.get('sell_price')}
children={item.sell_price_formatted}
align={'right'}
/>
<DetailItem
label={intl.get('cost_price')}
children={item.cost_price_formatted}
align={'right'}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('item_type')} children={item.type} />
<DetailItem
label={intl.get('item_code')}
children={defaultTo(item.code, '-')}
/>
<If condition={item.type === 'inventory'}>
<DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
<span
className={classNames({
mines: item.quantity_on_hand <= 0,
plus: item.quantity_on_hand > 0,
})}
>
{defaultTo(item.quantity_on_hand, '-')}
</span>
</DetailItem>
</If>
<DetailItem
label={intl.get('category_name')}
children={defaultTo(item.category?.name, '-')}
/>
<DetailItem
label={intl.get('sell_account_id')}
children={defaultTo(item?.sell_account?.name, '-')}
/>
<DetailItem
label={intl.get('cost_account_id')}
children={defaultTo(item.cost_account?.name, '-')}
/>
<If condition={item.type === 'inventory'}>
<Card>
<div class="item-drawer__content">
<DetailsMenu direction={'vertical'}>
<DetailItem
label={intl.get('inventory_account')}
children={defaultTo(item?.inventory_account?.name, '-')}
name={'name'}
label={intl.get('item_name')}
children={item.name}
/>
</If>
<DetailItem
label={intl.get('item.sell_description')}
children={defaultTo(item.sell_description, '-')}
/>
<DetailItem
label={intl.get('item.purchase_description')}
children={defaultTo(item.cost_description, '-')}
/>
</DetailsMenu>
</div>
<DetailItem
label={intl.get('sell_price')}
children={item.sell_price_formatted}
align={'right'}
/>
<DetailItem
label={intl.get('cost_price')}
children={item.cost_price_formatted}
align={'right'}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem label={intl.get('item_type')} children={item.type} />
<DetailItem
label={intl.get('item_code')}
children={defaultTo(item.code, '-')}
/>
<If condition={item.type === 'inventory'}>
<DetailItem name={'quantity'} label={intl.get('quantity_on_hand')}>
<span
className={classNames({
mines: item.quantity_on_hand <= 0,
plus: item.quantity_on_hand > 0,
})}
>
{defaultTo(item.quantity_on_hand, '-')}
</span>
</DetailItem>
</If>
<DetailItem
label={intl.get('category_name')}
children={defaultTo(item.category?.name, '-')}
/>
<DetailItem
label={intl.get('sell_account_id')}
children={defaultTo(item?.sell_account?.name, '-')}
/>
<DetailItem
label={intl.get('cost_account_id')}
children={defaultTo(item.cost_account?.name, '-')}
/>
<If condition={item.type === 'inventory'}>
<DetailItem
label={intl.get('inventory_account')}
children={defaultTo(item?.inventory_account?.name, '-')}
/>
</If>
<DetailItem
label={intl.get('item.sell_description')}
children={defaultTo(item.sell_description, '-')}
/>
<DetailItem
label={intl.get('item.purchase_description')}
children={defaultTo(item.cost_description, '-')}
/>
</DetailsMenu>
</div>
</Card>
);
}

23
src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import { DrawerMainTabs, FormattedMessage as T } from 'components';
import { ItemPaymentTransactions } from './ItemPaymentTransactions';
import ItemDetailHeader from './ItemDetailHeader';
export default function ItemDetailTab() {
return (
<DrawerMainTabs renderActiveTabPanelOnly={true}>
<Tab
id={'overview'}
title={<T id={'overview'} />}
panel={<ItemDetailHeader />}
/>
<Tab
id={'transactions'}
title={<T id={'transactions'} />}
panel={<ItemPaymentTransactions />}
/>
</DrawerMainTabs>
);
}

90
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js Normal file
View File

@@ -0,0 +1,90 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent, Menu, MenuItem } from '@blueprintjs/core';
import clsx from 'classnames';
import { CLASSES } from '../../../../../common/classes';
import { FormatDateCell, Icon } from '../../../../../components';
import { safeCallback } from 'utils';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('invoice_transactions.action.edit_transaction')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={intl.get('invoice_transactions.action.delete_transaction')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Retrieve bill transactions associated with item table columns.
*/
export const useBillTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'bill_date',
Header: intl.get('date'),
accessor: 'formatted_bill_date',
Cell: FormatDateCell,
width: 120,
className: 'bill_date',
},
{
id: 'vendor',
Header: intl.get('vendor'),
accessor: 'vendor_display_name',
width: 140,
className: 'vendor',
textOverview: true,
},
{
id: 'bill_number',
Header: intl.get('bill_number'),
accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
width: 100,
className: 'bill_number',
},
{
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};

69
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js Normal file
View File

@@ -0,0 +1,69 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import { useItemAssociatedBillTransactions } from 'hooks/query';
import { useBillTransactionsColumns, ActionsMenu } from './components';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
/**
* Bill payment transactions data table.
*/
function BillPaymentTransactions({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
const columns = useBillTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch Estimate associated transactions.
const {
isLoading: isBillTransactionsLoading,
isFetching: isBillTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedBillTransactions(itemId, {
enabled: !!itemId,
});
// Handles delete payment transactions.
const handleDeletePaymentTransactons = ({ bill_id }) => {
openAlert('bill-delete', {
billId: bill_id,
});
};
// Handles edit payment transactions.
const handleEditPaymentTransactions = ({ bill_id }) => {
history.push(`/bills/${bill_id}/edit`);
closeDrawer('item-detail-drawer');
};
return (
<DataTable
columns={columns}
data={paymentTransactions}
loading={isBillTransactionsLoading}
headerLoading={isBillTransactionsLoading}
progressBarLoading={isBillTransactionFetching}
ContextMenu={ActionsMenu}
payload={{
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
/>
);
}
export default compose(
withAlertsActions,
withDrawerActions,
)(BillPaymentTransactions);

37
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js
View File

@@ -1,37 +0,0 @@
import React from 'react';
import { DataTable, Card } from '../../../../components';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import { useItemAssociatedBillTransactions } from 'hooks/query';
import { useBillTransactionsColumns } from './components';
/**
* Bill payment transactions data table.
*/
export default function BillPaymentTransactions() {
const columns = useBillTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch Estimate associated transactions.
const {
isLoading: isBillTransactionsLoading,
isFetching: isBillTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedBillTransactions(itemId, {
enabled: !!itemId,
});
return (
<div className="item-drawer__table">
<Card>
<DataTable
columns={columns}
data={paymentTransactions}
loading={isBillTransactionsLoading}
headerLoading={isBillTransactionsLoading}
progressBarLoading={isBillTransactionFetching}
/>
</Card>
</div>
);
}

92
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js Normal file
View File

@@ -0,0 +1,92 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent, Menu, MenuItem } from '@blueprintjs/core';
import clsx from 'classnames';
import { CLASSES } from '../../../../../common/classes';
import { FormatDateCell, Icon } from '../../../../../components';
import { safeCallback } from 'utils';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('invoice_transactions.action.edit_transaction')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={intl.get('invoice_transactions.action.delete_transaction')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Retrieve estimate transactions associated with item table columns.
*/
export const useEstimateTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'estimate_date',
Header: intl.get('date'),
accessor: 'formatted_estimate_date',
Cell: FormatDateCell,
width: 120,
className: 'estimate_date',
textOverview: true,
},
{
id: 'customer',
Header: intl.get('customer'),
accessor: 'customer_display_name',
width: 140,
className: 'customer',
textOverview: true,
},
{
id: 'estimate_number',
Header: intl.get('estimate_no'),
accessor: 'estimate_number',
width: 120,
className: 'estimate_number',
textOverview: true,
},
{
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};

70
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js Normal file
View File

@@ -0,0 +1,70 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import { useItemAssociatedEstimateTransactions } from 'hooks/query';
import { useEstimateTransactionsColumns, ActionsMenu } from './components';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
/**
* Esimtate payment transactions.
*/
function EstimatePaymentTransactions({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
const columns = useEstimateTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch Estimate associated transactions.
const {
isLoading: isEstimateTransactionsLoading,
isFetching: isEstimateTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedEstimateTransactions(itemId, {
enabled: !!itemId,
});
// Handles delete payment transactions.
const handleDeletePaymentTransactons = ({ estimate_id }) => {
openAlert('estimate-delete', {
estimateId: estimate_id,
});
};
// Handles edit payment transactions.
const handleEditPaymentTransactions = ({ estimate_id }) => {
history.push(`/estimates/${estimate_id}/edit`);
closeDrawer('item-detail-drawer');
};
return (
<DataTable
columns={columns}
data={paymentTransactions}
loading={isEstimateTransactionsLoading}
headerLoading={isEstimateTransactionsLoading}
progressBarLoading={isEstimateTransactionFetching}
ContextMenu={ActionsMenu}
payload={{
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
/>
);
}
export default compose(
withAlertsActions,
withDrawerActions,
)(EstimatePaymentTransactions);

37
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js
View File

@@ -1,37 +0,0 @@
import React from 'react';
import { DataTable, Card } from '../../../../components';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import { useItemAssociatedEstimateTransactions } from 'hooks/query';
import { useEstimateTransactionsColumns } from './components';
/**
* Esimtate payment transactions datatable.
*/
export default function EstimatePaymentTransactions() {
const columns = useEstimateTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch Estimate associated transactions.
const {
isLoading: isEstimateTransactionsLoading,
isFetching: isEstimateTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedEstimateTransactions(itemId, {
enabled: !!itemId,
});
return (
<div className="item-drawer__table">
<Card>
<DataTable
columns={columns}
data={paymentTransactions}
loading={isEstimateTransactionsLoading}
headerLoading={isEstimateTransactionsLoading}
progressBarLoading={isEstimateTransactionFetching}
/>
</Card>
</div>
);
}

93
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js Normal file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent, Menu, MenuItem } from '@blueprintjs/core';
import clsx from 'classnames';
import { CLASSES } from '../../../../../common/classes';
import { FormatDateCell ,Icon} from '../../../../../components';
import { safeCallback } from 'utils';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('invoice_transactions.action.edit_transaction')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={intl.get('invoice_transactions.action.delete_transaction')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Retrieve invoice payment transactions associated with item table columns.
*/
export const useInvoicePaymentTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'invoice_date',
Header: intl.get('date'),
accessor: 'formatted_invoice_date',
Cell: FormatDateCell,
width: 120,
className: 'invoice_date',
textOverview: true,
},
{
id: 'customer',
Header: intl.get('customer'),
accessor: 'customer_display_name',
width: 140,
className: 'customer',
textOverview: true,
},
{
id: 'invoice_no',
Header: intl.get('invoice_no__'),
accessor: 'invoice_number',
width: 120,
className: 'invoice_no',
textOverview: true,
},
{
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};

72
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import {
useInvoicePaymentTransactionsColumns,
ActionsMenu,
} from './components';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
/**
* Invoice payment transactions.
*/
function InvoicePaymentTransactions({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
const columns = useInvoicePaymentTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch invoice associated transactions.
const {
isLoading: isInvoiceTransactionsLoading,
isFetching: isInvoiceTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedInvoiceTransactions(itemId, {
enabled: !!itemId,
});
// Handles delete payment transactions.
const handleDeletePaymentTransactons = ({ invoice_id }) => {
openAlert('invoice-delete', {
invoiceId: invoice_id,
});
};
// Handles edit payment transactions.
const handleEditPaymentTransactions = ({ invoice_id }) => {
history.push(`/invoices/${invoice_id}/edit`);
closeDrawer('item-detail-drawer');
};
return (
<DataTable
columns={columns}
data={paymentTransactions}
loading={isInvoiceTransactionsLoading}
headerLoading={isInvoiceTransactionsLoading}
progressBarLoading={isInvoiceTransactionFetching}
ContextMenu={ActionsMenu}
payload={{
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
/>
);
}
export default compose(
withAlertsActions,
withDrawerActions,
)(InvoicePaymentTransactions);

37
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js
View File

@@ -1,37 +0,0 @@
import React from 'react';
import { DataTable, Card } from '../../../../components';
import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import { useInvoicePaymentTransactionsColumns } from './components';
/**
* Invoice payment transactions datatable.
*/
export default function InvoicePaymentTransactionsTable() {
const columns = useInvoicePaymentTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch invoice associated transactions.
const {
isLoading: isInvoiceTransactionsLoading,
isFetching: isInvoiceTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedInvoiceTransactions(itemId, {
enabled: !!itemId,
});
return (
<div className="item-drawer__table">
<Card>
<DataTable
columns={columns}
data={paymentTransactions}
loading={isInvoiceTransactionsLoading}
headerLoading={isInvoiceTransactionsLoading}
progressBarLoading={isInvoiceTransactionFetching}
/>
</Card>
</div>
);
}

21
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import InvoicePaymentTransactions from './InvoicePaymentTransactions';
import EstimatePaymentTransactions from './EstimatePaymentTransactions';
import ReceiptPaymentTransactions from './ReceiptPaymentTransactions';
import BillPaymentTransactions from './BillPaymentTransactions';
export default function ItemPaymentTransactionsContent({ tansactionType }) {
const handleType = () => {
switch (tansactionType) {
case 'invoices':
return <InvoicePaymentTransactions />;
case 'estimates':
return <EstimatePaymentTransactions />;
case 'receipts':
return <ReceiptPaymentTransactions />;
case 'bills':
return <BillPaymentTransactions />;
}
};
return handleType();
}

93
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js Normal file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import intl from 'react-intl-universal';
import { Intent, Menu, MenuItem } from '@blueprintjs/core';
import clsx from 'classnames';
import { CLASSES } from '../../../../../common/classes';
import { FormatDateCell, Icon } from '../../../../../components';
import { safeCallback } from 'utils';
/**
* Table actions menu.
*/
export function ActionsMenu({
row: { original },
payload: { onEdit, onDelete },
}) {
return (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={intl.get('invoice_transactions.action.edit_transaction')}
onClick={safeCallback(onEdit, original)}
/>
<MenuItem
text={intl.get('invoice_transactions.action.delete_transaction')}
intent={Intent.DANGER}
onClick={safeCallback(onDelete, original)}
icon={<Icon icon="trash-16" iconSize={16} />}
/>
</Menu>
);
}
/**
* Retrieve receipt transactions associated with item table columns.
*/
export const useReceiptTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'receipt_date',
Header: intl.get('date'),
accessor: 'formatted_receipt_date',
Cell: FormatDateCell,
width: 120,
className: 'receipt_date',
textOverview: true,
},
{
id: 'customer',
Header: intl.get('customer'),
accessor: 'customer_display_name',
width: 140,
className: 'customer',
textOverview: true,
},
{
id: 'receipt_number',
Header: intl.get('receipt_no'),
accessor: 'receip_number',
width: 120,
className: 'receipt_number',
clickable: true,
textOverview: true,
},
{
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};

71
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import { useItemAssociatedReceiptTransactions } from 'hooks/query';
import { useReceiptTransactionsColumns, ActionsMenu } from './components';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
/**
* Receipt payment transactions.
*/
function ReceiptPaymentTransactions({
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
const columns = useReceiptTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch receipts associated transactions.
const {
isLoading: isReceiptTransactionsLoading,
isFetching: isReceiptTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedReceiptTransactions(itemId, {
enabled: !!itemId,
});
// Handles delete payment transactions.
const handleDeletePaymentTransactons = ({ receipt_id }) => {
openAlert('receipt-delete', {
receiptId: receipt_id,
});
};
// Handles edit payment transactions.
const handleEditPaymentTransactions = ({ receipt_id }) => {
history.push(`/receipts/${receipt_id}/edit`);
closeDrawer('item-detail-drawer');
};
return (
<DataTable
columns={columns}
data={paymentTransactions}
loading={isReceiptTransactionsLoading}
headerLoading={isReceiptTransactionsLoading}
progressBarLoading={isReceiptTransactionFetching}
ContextMenu={ActionsMenu}
payload={{
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
/>
);
}
export default compose(
withAlertsActions,
withDrawerActions,
)(ReceiptPaymentTransactions);

37
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js
View File

@@ -1,37 +0,0 @@
import React from 'react';
import { DataTable, Card } from '../../../../components';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import { useItemAssociatedReceiptTransactions } from 'hooks/query';
import { useReceiptTransactionsColumns } from './components';
/**
* Receipt payment transactions datatable.
*/
export default function ReceiptPaymentTransactions() {
const columns = useReceiptTransactionsColumns();
const { itemId } = useItemDetailDrawerContext();
// Handle fetch receipts associated transactions.
const {
isLoading: isReceiptTransactionsLoading,
isFetching: isReceiptTransactionFetching,
data: paymentTransactions,
} = useItemAssociatedReceiptTransactions(itemId, {
enabled: !!itemId,
});
return (
<div className="item-drawer__table">
<Card>
<DataTable
columns={columns}
data={paymentTransactions}
loading={isReceiptTransactionsLoading}
headerLoading={isReceiptTransactionsLoading}
progressBarLoading={isReceiptTransactionFetching}
/>
</Card>
</div>
);
}

237
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
View File

@@ -1,237 +0,0 @@
import React from 'react';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { CLASSES } from '../../../../common/classes';
import { FormatDateCell } from '../../../../components';
/**
* Retrieve invoice payment transactions associated with item table columns.
*/
export const useInvoicePaymentTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'invoice_date',
Header: intl.get('date'),
accessor: 'formatted_invoice_date',
Cell: FormatDateCell,
width: 140,
className: 'invoice_date',
textOverview: true,
},
{
id: 'invoice_no',
Header: intl.get('invoice_no__'),
accessor: 'invoice_number',
width: 120,
className: 'invoice_no',
textOverview: true,
},
// {
// id: 'reference_number',
// Header: intl.get('reference_no'),
// accessor: 'reference_number',
// width: 120,
// className: 'reference_number',
// textOverview: true,
// },
{
id: 'qunatity',
Header: 'Quantity Sold',
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};
/**
* Retrieve estimate transactions associated with item table columns.
*/
export const useEstimateTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'estimate_date',
Header: intl.get('date'),
accessor: 'formatted_estimate_date',
Cell: FormatDateCell,
width: 140,
className: 'estimate_date',
textOverview: true,
},
{
id: 'estimate_number',
Header: intl.get('estimate_no'),
accessor: 'estimate_number',
width: 120,
className: 'estimate_number',
textOverview: true,
},
{
id: 'qunatity',
Header: 'Quantity Sold',
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};
/**
* Retrieve receipt transactions associated with item table columns.
*/
export const useReceiptTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'receipt_date',
Header: intl.get('date'),
accessor: 'formatted_receipt_date',
Cell: FormatDateCell,
width: 110,
className: 'receipt_date',
textOverview: true,
},
{
id: 'receipt_number',
Header: intl.get('receipt_no'),
accessor: 'receip_number',
width: 140,
className: 'receipt_number',
clickable: true,
textOverview: true,
},
{
id: 'reference_number',
Header: intl.get('reference_no'),
accessor: 'reference_number',
width: 140,
className: 'reference_number',
textOverview: true,
},
{
id: 'qunatity',
Header: 'Quantity Sold',
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};
/**
* Retrieve bill transactions associated with item table columns.
*/
export const useBillTransactionsColumns = () => {
return React.useMemo(
() => [
{
id: 'bill_date',
Header: intl.get('date'),
accessor: 'formatted_bill_date',
Cell: FormatDateCell,
width: 110,
className: 'bill_date',
},
{
id: 'bill_number',
Header: intl.get('bill_number'),
accessor: (row) => (row.bill_number ? `${row.bill_number}` : null),
width: 100,
className: 'bill_number',
},
{
id: 'reference_number',
Header: intl.get('reference_no'),
accessor: 'reference_number',
width: 140,
className: 'reference_number',
textOverview: true,
},
{
id: 'qunatity',
Header: 'Quantity Sold',
accessor: 'quantity',
width: 100,
},
{
id: 'rate',
Header: 'Rate',
accessor: 'formatted_rate',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
{
id: 'amount',
Header: intl.get('total'),
accessor: 'formatted_amount',
align: 'right',
width: 100,
className: clsx(CLASSES.FONT_BOLD),
textOverview: true,
},
],
[],
);
};

52
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
View File

@@ -1,34 +1,30 @@
import React from 'react';
import { Tab } from '@blueprintjs/core';
import { DrawerMainTabs, FormattedMessage as T } from 'components';
import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable';
import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable';
import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable';
import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable';
import styled from 'styled-components';
import { Card, FormattedMessage as T } from 'components';
import { ItemManuTransaction } from './utils';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
export const ItemPaymentTransactions = () => {
const { value } = useItemDetailDrawerContext();
return (
<DrawerMainTabs renderActiveTabPanelOnly={true}>
<Tab
id={'invoice'}
title={<T id={'invoice'} />}
panel={<InvoicePaymentTransactionsTable />}
/>
<Tab
id={'estiamte'}
title={<T id={'estimate_'} />}
panel={<EstimatePaymentTransactionsTable />}
/>
<Tab
id={'receipt'}
title={<T id={'receipt_'} />}
panel={<ReceiptPaymentTransactionsTable />}
/>
<Tab
id={'bill'}
title={'Bill'}
panel={<BillPaymentTransactionsTable />}
/>
</DrawerMainTabs>
<Card>
<ItemManuTransactions>
<T id={'item.drawer_transactions_by'} />
<ItemManuTransaction />
</ItemManuTransactions>
<ItemPaymentTransactionContent tansactionType={value} />
</Card>
);
};
const ItemManuTransactions = styled.div`
display: flex;
align-items: center;
color: #727983;
.bp3-button {
padding-left: 6px;
font-weight: 500;
}
`;

38
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import {
Button,
MenuItem,
Menu,
Popover,
PopoverInteractionKind,
Position,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import transactions from '../../../../common/itemPaymentTranactionsOption';
export const ItemManuTransaction = () => {
const { value, setValue } = useItemDetailDrawerContext();
// const handleClickItem = (item) => {
// onChange && onChange(item);
// };
const content = transactions.map(({ name, label }) => (
<MenuItem onClick={() => setValue(name)} text={label} />
));
return (
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={<Menu>{content}</Menu>}
>
<Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
</Popover>
);
};

38
src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { DataTable, Card } from 'components';
import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
import { useTransactionsByReference } from 'hooks/query';
import { useJournalEntriesTransactionsColumns } from './components';
/**
* Journal entries vendor credit transactions table.
*/
export default function JournalEntriesTransactionsTable() {
const { vendorCreditId } = useVendorCreditDetailDrawerContext();
const columns = useJournalEntriesTransactionsColumns();
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: vendorCreditId,
reference_type: 'vendorCredit',
},
{ enabled: !!vendorCreditId },
);
return (
<Card>
<DataTable
columns={columns}
data={transactions}
loading={isTransactionLoading}
className={'datatable--journal-entries'}
/>
</Card>
);
}

49
src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/components.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import intl from 'react-intl-universal';
import { FormatDateCell } from '../../../../components';
import 'style/pages/JournalEntries/List.scss';
/**
* Retrieve journal entries transactions table columns.
*/
export const useJournalEntriesTransactionsColumns = () => {
return React.useMemo(
() => [
{
Header: intl.get('date'),
accessor: 'date',
accessor: 'formatted_date',
Cell: FormatDateCell,
width: 140,
className: 'date',
textOverview: true,
},
{
Header: intl.get('account_name'),
accessor: 'account_name',
width: 140,
className: 'account_name',
textOverview: true,
},
{
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',
},
],
[],
);
};

8
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
View File

@@ -6,6 +6,7 @@ import { DrawerMainTabs } from 'components';
import VendorCreditDetailPanel from './VendorCreditDetailPanel';
import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
import JournalEntriesTransactionsTable from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
import clsx from 'classnames';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
@@ -16,12 +17,17 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
export default function VendorCreditDetail() {
return (
<div className={clsx(VendorCreditDetailCls.root)}>
<DrawerMainTabs>
<DrawerMainTabs renderActiveTabPanelOnly={true}>
<Tab
title={intl.get('details')}
id={'details'}
panel={<VendorCreditDetailPanel />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTransactionsTable />}
/>
<Tab
title={intl.get('vendor_credit.drawer.label_refund_transactions')}
id={'refund_transactions'}

4
src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.js
View File

@@ -107,9 +107,7 @@ function PaymentMadeForm({
const onError = ({
response: {
error: {
data: { errors },
},
data: { errors },
},
}) => {
const getError = (errorType) => errors.find((e) => e.type === errorType);