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

8
src/common/itemPaymentTranactionsOption.js Normal file
View File

@@ -0,0 +1,8 @@
import intl from 'react-intl-universal';
export default [
{ name: 'invoices', label: intl.get('invoices') },
{ name: 'estimates', label: intl.get('estimates') },
{ name: 'receipts', label: intl.get('receipts') },
{ name: 'bills', label: intl.get('bills') },
];

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

3
src/hooks/query/bills.js
View File

@@ -30,6 +30,9 @@ const commonInvalidateQueries = (queryClient) => {
// Invalidate financial reports.
queryClient.invalidateQueries(t.FINANCIAL_REPORT);
// Invalidate
queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS);
};
/**

15
src/hooks/query/estimates.js
View File

@@ -9,6 +9,9 @@ import t from './types';
const commonInvalidateQueries = (queryClient) => {
// Invalidate estimates.
queryClient.invalidateQueries(t.SALE_ESTIMATES);
// Invalidate
queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES);
};
/**
@@ -191,7 +194,7 @@ export function useRefreshEstimates() {
}
/**
*
*
*/
export function useCreateNotifyEstimateBySMS(props) {
const queryClient = useQueryClient();
@@ -214,11 +217,11 @@ export function useCreateNotifyEstimateBySMS(props) {
}
/**
*
* @param {*} estimateId
* @param {*} props
* @param {*} requestProps
* @returns
*
* @param {*} estimateId
* @param {*} props
* @param {*} requestProps
* @returns
*/
export function useEstimateSMSDetail(estimateId, props, requestProps) {
return useRequestQuery(

3
src/hooks/query/invoices.js
View File

@@ -31,6 +31,9 @@ const commonInvalidateQueries = (queryClient) => {
// Invalidate reconcile.
queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE);
queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES);
// Invalidate
queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES);
};
/**

2
src/hooks/query/items.js
View File

@@ -219,7 +219,7 @@ export function useItemAssociatedReceiptTransactions(id, props) {
}
export function useItemAssociatedBillTransactions(id, props) {
return useRequestQuery(
[t.ITEM_ASSOCIATED_WITH_BILLS, id],
[t.ITEMS_ASSOCIATED_WITH_BILLS, id],
{
method: 'get',
url: `items/${id}/transactions/bills`,

3
src/hooks/query/receipts.js
View File

@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
// Invalidate
queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS);
// Invalidate the settings.
queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]);
};

2
src/hooks/query/settings.js
View File

@@ -95,7 +95,7 @@ export function useSettingsReceipts(props) {
export function useSettingsManualJournals(props) {
return useSettingsQuery(
[t.SETTING, t.SETTING_MANUAL_JOURNALS],
{ group: 'sale_receipts' },
{ group: 'manual_journals' },
props,
);
}

4
src/hooks/query/types.js
View File

@@ -49,8 +49,8 @@ const ITEMS = {
ITEMS_CATEGORIES: 'ITEMS_CATEGORIES',
ITEM_ASSOCIATED_WITH_INVOICES: 'ITEM_ASSOCIATED_WITH_INVOICES',
ITEM_ASSOCIATED_WITH_ESTIMATES: 'ITEM_ASSOCIATED_WITH_ESTIMATES',
ITEM_ASSOCIATED_WITH_RECEIVES: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
ITEM_ASSOCIATED_WITH_BILSS: 'ITEMS_ASSOCIATED_WITH_BILLS',
ITEM_ASSOCIATED_WITH_RECEIPTS: 'ITEM_ASSOCIATED_WITH_RECEIPTS',
ITEMS_ASSOCIATED_WITH_BILLS: 'ITEMS_ASSOCIATED_WITH_BILLS',
};
const SALE_ESTIMATES = {

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

@@ -1638,6 +1638,12 @@
"transactions_locking.long_description": "Transactions locking has the ability to lock all organization transactions so users can’t edit, delete or create new transactions during the past period, but still have the ability to create draft invoices or bills and that won’t affect financial reports. typically set a lock date when your financial records are being prepared for the year.",
"payment_transactions": "Payment transactions",
"invoice_transactions.column.withdrawal_account": "Deposit account",
"invoice_transactions.action.delete_transaction": "Delete Transaction",
"invoice_transactions.action.edit_transaction": "Edit Transaction",
"bill_transactions.column.deposit_account": "Withdrawal account",
"transactions_locking.lock_item.no_lock": "There are no locked transactions in this module."
"transactions_locking.lock_item.no_lock": "There are no locked transactions in this module.",
"overview": "Overview",
"transactions": "Transactions",
"item.drawer_transactions_by": "Transactions by:",
"item.drawer_quantity_sold": "Quantity Sold"
}

36
src/style/components/Drawers/ItemDrawer.scss
View File

@@ -38,28 +38,24 @@
}
}
}
&__table {
.card {
padding: 12px 15px !important;
}
.table {
.tbody,
.thead {
.tr .th {
padding: 8px 8px;
background-color: #fff;
font-size: 14px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
.table {
margin-top: 8px;
.tbody,
.thead {
.tr .th {
padding: 8px 8px;
background-color: #fff;
font-size: 14px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
}
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
}
}

4
src/style/pages/Expense/PageForm.scss
View File

@@ -1,5 +1,5 @@
.dashboard__insider--expenses {
.dashboard__insider--expense-form {
padding-bottom: 64px;
.bigcapital-datatable {
.tbody {

3
src/style/pages/ManualJournal/MakeJournal.scss
View File

@@ -1,3 +1,6 @@
.dashboard__insider--make-journal-page {
padding-bottom: 64px;
}
.page-form--make-journal-entries{
$self: '.page-form';