mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-15 12:20:31 +00:00
feat: view details.
This commit is contained in:
@@ -7,6 +7,10 @@ import AccountDrawer from 'containers/Drawers/AccountDrawer';
|
||||
import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer';
|
||||
import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer';
|
||||
import BillDrawer from 'containers/Drawers/BillDrawer';
|
||||
import InvoiceDetailDrawer from 'containers/Drawers/InvoiceDetailDrawer';
|
||||
import ReceiptDetailDrawer from 'containers/Drawers/ReceiptDetailDrawer';
|
||||
import PaymentReceiveDetailDrawer from 'containers/Drawers/PaymentReceiveDetailDrawer';
|
||||
import PaymentMadeDetailDrawer from 'containers/Drawers/PaymentMadeDetailDrawer';
|
||||
|
||||
export default function DrawersContainer() {
|
||||
return (
|
||||
@@ -19,6 +23,10 @@ export default function DrawersContainer() {
|
||||
<ManualJournalDrawer name={'journal-drawer'} />
|
||||
<ExpenseDrawer name={'expense-drawer'} />
|
||||
<BillDrawer name={'bill-drawer'} />
|
||||
<InvoiceDetailDrawer name={'invoice-detail-drawer'} />
|
||||
<ReceiptDetailDrawer name={'receipt-detail-drawer'} />
|
||||
<PaymentReceiveDetailDrawer name={'payment-receive-detail-drawer'} />
|
||||
<PaymentMadeDetailDrawer name={'payment-made-detail-drawer'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
|
||||
import {
|
||||
CreateItemCategoryFormSchema,
|
||||
EditItemCategoryFormSchema,
|
||||
} from './ItemCategoryForm.schema';
|
||||
} from './itemCategoryForm.schema';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import ItemCategoryFormContent from './ItemCategoryFormContent'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import 'style/components/Drawers/BillDrawer.scss';
|
||||
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
|
||||
|
||||
import { BillDrawerProvider } from './BillDrawerProvider';
|
||||
import BillDrawerDetails from './BillDrawerDetails';
|
||||
|
||||
@@ -3,15 +3,21 @@ import { Tabs, Tab } from '@blueprintjs/core';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
import LocatedLandedCostTable from './LocatedLandedCostTable';
|
||||
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
|
||||
|
||||
/**
|
||||
* Bill view details.
|
||||
*/
|
||||
export default function BillDrawerDetails() {
|
||||
return (
|
||||
<div className="bill-drawer">
|
||||
<Tabs animate={true} large={true} selectedTabId="landed_cost">
|
||||
<div className="view-detail-drawer">
|
||||
<Tabs animate={true} large={true} defaultSelectedTabId="landed_cost">
|
||||
<Tab title={intl.get('details')} id={'details'} disabled={true} />
|
||||
<Tab
|
||||
title={intl.get('journal_entries')}
|
||||
id={'journal_entries'}
|
||||
panel={<JournalEntriesTable />}
|
||||
/>
|
||||
<Tab
|
||||
title={intl.get('located_landed_cost')}
|
||||
id={'landed_cost'}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { Tabs, Tab } from '@blueprintjs/core';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
|
||||
|
||||
/**
|
||||
* Invoice view detail.
|
||||
*/
|
||||
export default function InvoiceDetail() {
|
||||
return (
|
||||
<div className="view-detail-drawer">
|
||||
<Tabs
|
||||
animate={true}
|
||||
large={true}
|
||||
defaultSelectedTabId="journal_entries"
|
||||
renderActiveTabPanelOnly={false}
|
||||
>
|
||||
<Tab title={intl.get('details')} disabled={true} />
|
||||
<Tab
|
||||
title={intl.get('journal_entries')}
|
||||
id={'journal_entries'}
|
||||
panel={<JournalEntriesTable journal={[]} />}
|
||||
/>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
|
||||
|
||||
import InvoiceDetail from './InvoiceDetail';
|
||||
import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
|
||||
|
||||
/**
|
||||
* Invoice detail drawer content.
|
||||
*/
|
||||
export default function InvoiceDetailDrawerContent({
|
||||
// #ownProp
|
||||
invoice,
|
||||
}) {
|
||||
return (
|
||||
<InvoiceDetailDrawerProvider invoiceId={invoice}>
|
||||
<InvoiceDetail />
|
||||
</InvoiceDetailDrawerProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DrawerHeaderContent, DashboardInsider } from 'components';
|
||||
|
||||
const InvoiceDetailDrawerContext = React.createContext();
|
||||
/**
|
||||
* Invoice detail provider.
|
||||
*/
|
||||
function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
|
||||
//provider.
|
||||
const provider = {};
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<DrawerHeaderContent
|
||||
name="invoice-detail-drawer"
|
||||
title={intl.get('invoice_details')}
|
||||
/>
|
||||
<InvoiceDetailDrawerContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const useInvoiceDetailDrawerContext = () =>
|
||||
React.useContext(InvoiceDetailDrawerContext);
|
||||
|
||||
export { InvoiceDetailDrawerProvider, useInvoiceDetailDrawerContext };
|
||||
28
client/src/containers/Drawers/InvoiceDetailDrawer/index.js
Normal file
28
client/src/containers/Drawers/InvoiceDetailDrawer/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { Drawer, DrawerSuspense } from 'components';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const InvoiceDetailDrawerContent = React.lazy(() =>
|
||||
import('./InvoiceDetailDrawerContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* Invoice Detail drawer.
|
||||
*/
|
||||
function InvoiceDetailDrawer({
|
||||
name,
|
||||
// #withDrawer
|
||||
isOpen,
|
||||
payload: { invoiceId },
|
||||
}) {
|
||||
return (
|
||||
<Drawer isOpen={isOpen} name={name} size={'750px'}>
|
||||
<DrawerSuspense>
|
||||
<InvoiceDetailDrawerContent invoice={invoiceId} />
|
||||
</DrawerSuspense>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
export default compose(withDrawers())(InvoiceDetailDrawer);
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
|
||||
|
||||
import PaymentMadeDetails from './PaymentMadeDetails';
|
||||
import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';
|
||||
|
||||
/**
|
||||
* Payment made detail content.
|
||||
*/
|
||||
export default function PaymentMadeDetailContent({
|
||||
// #ownProp
|
||||
paymentMade,
|
||||
}) {
|
||||
return (
|
||||
<PaymentMadeDetailProvider paymentMadeId={paymentMade}>
|
||||
<PaymentMadeDetails />
|
||||
</PaymentMadeDetailProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DrawerHeaderContent, DashboardInsider } from 'components';
|
||||
|
||||
const PaymentMadeDetailContext = React.createContext();
|
||||
|
||||
function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
|
||||
//provider.
|
||||
const provider = {};
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<DrawerHeaderContent
|
||||
name="payment-made-detail-drawer"
|
||||
title={intl.get('payment_made_details')}
|
||||
/>
|
||||
<PaymentMadeDetailContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const usePaymentMadeDetailContext = () =>
|
||||
React.useContext(PaymentMadeDetailContext);
|
||||
export { PaymentMadeDetailProvider, usePaymentMadeDetailContext };
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { Tabs, Tab } from '@blueprintjs/core';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
|
||||
|
||||
/**
|
||||
* payment made view detail.
|
||||
*/
|
||||
export default function PaymentMadeDetails() {
|
||||
return (
|
||||
<div className="view-detail-drawer">
|
||||
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
|
||||
<Tab title={intl.get('details')} id={'details'} disabled={true} />
|
||||
<Tab
|
||||
title={intl.get('journal_entries')}
|
||||
id={'journal_entries'}
|
||||
panel={<JournalEntriesTable journal={[]} />}
|
||||
/>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Drawer, DrawerSuspense } from 'components';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const PaymentMadeDetailContent = React.lazy(() =>
|
||||
import('./PaymentMadeDetailContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* Payment made detail drawer.
|
||||
*/
|
||||
function PaymentMadeDetailDrawer({
|
||||
name,
|
||||
// #withDrawer
|
||||
isOpen,
|
||||
payload: { paymentMadeId },
|
||||
}) {
|
||||
return (
|
||||
<Drawer isOpen={isOpen} name={name} size={'750px'}>
|
||||
<DrawerSuspense>
|
||||
<PaymentMadeDetailContent paymentMade={paymentMadeId} />
|
||||
</DrawerSuspense>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDrawers())(PaymentMadeDetailDrawer);
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { Tabs, Tab } from '@blueprintjs/core';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
|
||||
|
||||
/**
|
||||
* payment receive view detail.
|
||||
*/
|
||||
export default function PaymentReceiveDetail() {
|
||||
return (
|
||||
<div className="view-detail-drawer">
|
||||
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
|
||||
<Tab title={intl.get('details')} id={'details'} disabled={true} />
|
||||
<Tab
|
||||
title={intl.get('journal_entries')}
|
||||
id={'journal_entries'}
|
||||
panel={<JournalEntriesTable journal={[]} />}
|
||||
/>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
|
||||
|
||||
import PaymentReceiveDetail from './PaymentReceiveDetail';
|
||||
import { PaymentReceiveDetailProvider } from './PaymentReceiveDetailProvider';
|
||||
|
||||
/**
|
||||
* Payment receive detail content.
|
||||
*/
|
||||
export default function PaymentReceiveDetailContent({
|
||||
// #ownProp
|
||||
paymentReceive,
|
||||
}) {
|
||||
return (
|
||||
<PaymentReceiveDetailProvider paymentReceiveId={paymentReceive}>
|
||||
<PaymentReceiveDetail />
|
||||
</PaymentReceiveDetailProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DrawerHeaderContent, DashboardInsider } from 'components';
|
||||
|
||||
const PaymentReceiveDetailContext = React.createContext();
|
||||
/**
|
||||
* Payment receive detail provider.
|
||||
*/
|
||||
function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) {
|
||||
//provider.
|
||||
const provider = {};
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<DrawerHeaderContent
|
||||
name="payment-receive-detail-drawer"
|
||||
title={intl.get('payment_receive_details')}
|
||||
/>
|
||||
<PaymentReceiveDetailContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const usePaymentReceiveDetailContext = () =>
|
||||
React.useContext(PaymentReceiveDetailContext);
|
||||
|
||||
export { PaymentReceiveDetailProvider, usePaymentReceiveDetailContext };
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Drawer, DrawerSuspense } from 'components';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const PaymentReceiveDetailContent = React.lazy(() =>
|
||||
import('./PaymentReceiveDetailContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* Payment receive detail drawer
|
||||
*/
|
||||
function PaymentReceiveDetailDrawer({
|
||||
name,
|
||||
// #withDrawer
|
||||
isOpen,
|
||||
payload: { paymentReceiveId },
|
||||
}) {
|
||||
return (
|
||||
<Drawer isOpen={isOpen} name={name} size={'750px'}>
|
||||
<DrawerSuspense>
|
||||
<PaymentReceiveDetailContent paymentReceive={paymentReceiveId} />
|
||||
</DrawerSuspense>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDrawers())(PaymentReceiveDetailDrawer);
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { Tabs, Tab } from '@blueprintjs/core';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
|
||||
|
||||
/**
|
||||
* Receipt view detail.
|
||||
*/
|
||||
export default function ReceiptDetail() {
|
||||
return (
|
||||
<div className="view-detail-drawer">
|
||||
<Tabs animate={true} large={true} defaultSelectedTabId="journal_entries">
|
||||
<Tab title={intl.get('details')} id={'details'} disabled={true} />
|
||||
<Tab
|
||||
title={intl.get('journal_entries')}
|
||||
id={'journal_entries'}
|
||||
panel={<JournalEntriesTable journal={[]} />}
|
||||
/>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
|
||||
|
||||
import ReceiptDetail from './ReceiptDetail';
|
||||
import { ReceiptDetailDrawerProvider } from './ReceiptDetailDrawerProvider';
|
||||
|
||||
/**
|
||||
* Receipt detail drawer content.
|
||||
*/
|
||||
export default function ReceiptDetailDrawerContent({
|
||||
// #ownProp
|
||||
receipt,
|
||||
}) {
|
||||
return (
|
||||
<ReceiptDetailDrawerProvider receiptId={receipt}>
|
||||
<ReceiptDetail />
|
||||
</ReceiptDetailDrawerProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DrawerHeaderContent, DashboardInsider } from 'components';
|
||||
|
||||
const ReceiptDetailDrawerContext = React.createContext();
|
||||
|
||||
/**
|
||||
* Receipt detail provider.
|
||||
*/
|
||||
function ReceiptDetailDrawerProvider({ receiptId, ...props }) {
|
||||
//provider.
|
||||
const provider = {};
|
||||
|
||||
return (
|
||||
<DashboardInsider>
|
||||
<DrawerHeaderContent
|
||||
name="receipt-detail-drawer"
|
||||
title={intl.get('receipt_details')}
|
||||
/>
|
||||
<ReceiptDetailDrawerContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
const useReceiptDetailDrawerContext = () =>
|
||||
React.useContext(ReceiptDetailDrawerContext);
|
||||
|
||||
export { ReceiptDetailDrawerProvider, useReceiptDetailDrawerContext };
|
||||
29
client/src/containers/Drawers/ReceiptDetailDrawer/index.js
Normal file
29
client/src/containers/Drawers/ReceiptDetailDrawer/index.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Drawer, DrawerSuspense } from 'components';
|
||||
import withDrawers from 'containers/Drawer/withDrawers';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
const ReceiptDetailDrawerContent = React.lazy(() =>
|
||||
import('./ReceiptDetailDrawerContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* Receipt Detail drawer.
|
||||
*/
|
||||
function ReceiptDetailDrawer({
|
||||
name,
|
||||
// #withDrawer
|
||||
isOpen,
|
||||
payload: { receiptId },
|
||||
}) {
|
||||
return (
|
||||
<Drawer isOpen={isOpen} name={name} size={'750px'}>
|
||||
<DrawerSuspense>
|
||||
<ReceiptDetailDrawerContent receipt={receiptId} />
|
||||
</DrawerSuspense>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDrawers())(ReceiptDetailDrawer);
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import { DataTable, Card } from 'components';
|
||||
import intl from 'react-intl-universal';
|
||||
import moment from 'moment';
|
||||
|
||||
/**
|
||||
* Journal entries table.
|
||||
*/
|
||||
export default function JournalEntriesTable({ journal }) {
|
||||
const columns = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: intl.get('date'),
|
||||
accessor: 'date',
|
||||
// accessor: (r) => moment(new Date()).format('YYYY MMM DD'),
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
Header: intl.get('account_name'),
|
||||
accessor: 'account_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
Header: intl.get('contact'),
|
||||
accessor: 'contact',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
Header: intl.get('credit'),
|
||||
accessor: 'credit',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
Header: intl.get('debit'),
|
||||
accessor: 'debit',
|
||||
width: 100,
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={journal}
|
||||
className={'datatable--journal-entries'}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -12,6 +12,7 @@ import withPaymentMadeActions from './withPaymentMadeActions';
|
||||
import withPaymentMade from './withPaymentMade';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withAlertsActions from 'containers/Alert/withAlertActions';
|
||||
import withDrawerActions from 'containers/Drawer/withDrawerActions';
|
||||
import { usePaymentMadesTableColumns, ActionsMenu } from './components';
|
||||
import { usePaymentMadesListContext } from './PaymentMadesListProvider';
|
||||
|
||||
@@ -27,6 +28,9 @@ function PaymentMadesTable({
|
||||
|
||||
// #withAlerts
|
||||
openAlert,
|
||||
|
||||
// #withDrawerActions
|
||||
openDrawer,
|
||||
}) {
|
||||
// Payment mades table columns.
|
||||
const columns = usePaymentMadesTableColumns();
|
||||
@@ -53,6 +57,11 @@ function PaymentMadesTable({
|
||||
openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
|
||||
};
|
||||
|
||||
// Handle view detail payment made.
|
||||
const handleViewDetailPaymentMade = ({ id }) => {
|
||||
openDrawer('payment-receive-detail-drawer', { paymentMadeId: id });
|
||||
};
|
||||
|
||||
// Handle datatable fetch data once the table state change.
|
||||
const handleDataTableFetchData = useCallback(
|
||||
({ pageIndex, pageSize, sortBy }) => {
|
||||
@@ -89,6 +98,7 @@ function PaymentMadesTable({
|
||||
payload={{
|
||||
onEdit: handleEditPaymentMade,
|
||||
onDelete: handleDeletePaymentMade,
|
||||
onViewDetails: handleViewDetailPaymentMade,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
@@ -98,6 +108,7 @@ export default compose(
|
||||
withPaymentMadeActions,
|
||||
withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
|
||||
withAlertsActions,
|
||||
withDrawerActions,
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
|
||||
@@ -26,15 +26,14 @@ export function AmountAccessor(row) {
|
||||
*/
|
||||
export function ActionsMenu({
|
||||
row: { original },
|
||||
payload: { onEdit, onDelete },
|
||||
payload: { onEdit, onDelete, onViewDetails },
|
||||
}) {
|
||||
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={intl.get('view_details')}
|
||||
onClick={safeCallback(onViewDetails, original)}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
@@ -70,8 +69,6 @@ export function ActionsCell(props) {
|
||||
* Retrieve payment mades table columns.
|
||||
*/
|
||||
export function usePaymentMadesTableColumns() {
|
||||
|
||||
|
||||
return React.useMemo(
|
||||
() => [
|
||||
{
|
||||
|
||||
@@ -79,6 +79,12 @@ function InvoicesDataTable({
|
||||
const handleQuickPaymentReceive = ({ id }) => {
|
||||
openDialog('quick-payment-receive', { invoiceId: id });
|
||||
};
|
||||
|
||||
// Handle view detail invoice.
|
||||
const handleViewDetailInvoice = ({ id }) => {
|
||||
openDrawer('invoice-detail-drawer', { invoiceId: id });
|
||||
};
|
||||
|
||||
// Handles fetch data once the table state change.
|
||||
const handleDataTableFetchData = useCallback(
|
||||
({ pageSize, pageIndex, sortBy }) => {
|
||||
@@ -123,6 +129,7 @@ function InvoicesDataTable({
|
||||
onEdit: handleEditInvoice,
|
||||
onDrawer: handleDrawerInvoice,
|
||||
onQuick: handleQuickPaymentReceive,
|
||||
onViewDetails: handleViewDetailInvoice,
|
||||
baseCurrency,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -95,7 +95,7 @@ export const handleDeleteErrors = (errors) => {
|
||||
};
|
||||
|
||||
export function ActionsMenu({
|
||||
payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
|
||||
payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick, onViewDetails },
|
||||
row: { original },
|
||||
}) {
|
||||
return (
|
||||
@@ -103,6 +103,7 @@ export function ActionsMenu({
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={intl.get('view_details')}
|
||||
onClick={safeCallback(onViewDetails, original)}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
|
||||
@@ -62,6 +62,11 @@ function PaymentReceivesDataTable({
|
||||
openDrawer('payment-receive-drawer', { paymentReceiveId: id });
|
||||
};
|
||||
|
||||
// Handle view detail payment receive..
|
||||
const handleViewDetailPaymentReceive = ({ id }) => {
|
||||
openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id });
|
||||
};
|
||||
|
||||
// Handle datatable fetch once the table's state changing.
|
||||
const handleDataTableFetchData = useCallback(
|
||||
({ pageIndex, pageSize, sortBy }) => {
|
||||
@@ -103,6 +108,7 @@ function PaymentReceivesDataTable({
|
||||
onDelete: handleDeletePaymentReceive,
|
||||
onEdit: handleEditPaymentReceive,
|
||||
onDrawer: handleDrawerPaymentReceive,
|
||||
onViewDetails: handleViewDetailPaymentReceive,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -19,15 +19,14 @@ import { safeCallback } from 'utils';
|
||||
*/
|
||||
export function ActionsMenu({
|
||||
row: { original: paymentReceive },
|
||||
payload: { onEdit, onDelete, onDrawer },
|
||||
payload: { onEdit, onDelete, onDrawer, onViewDetails },
|
||||
}) {
|
||||
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={intl.get('view_details')}
|
||||
onClick={safeCallback(onViewDetails, paymentReceive)}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
@@ -82,8 +81,6 @@ export function ActionsCell(props) {
|
||||
* Retrieve payment receives columns.
|
||||
*/
|
||||
export function usePaymentReceivesColumns() {
|
||||
|
||||
|
||||
return React.useMemo(
|
||||
() => [
|
||||
{
|
||||
@@ -128,7 +125,7 @@ export function usePaymentReceivesColumns() {
|
||||
accessor: 'reference_no',
|
||||
width: 140,
|
||||
className: 'reference_no',
|
||||
}
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
@@ -60,14 +60,19 @@ function ReceiptsDataTable({
|
||||
openAlert('receipt-delete', { receiptId: receipt.id });
|
||||
};
|
||||
|
||||
// Handle drawer receipts.
|
||||
const handleDrawerReceipt = ({ id }) => {
|
||||
openDrawer('receipt-drawer', { receiptId: id });
|
||||
};
|
||||
|
||||
// Handles receipt close action.
|
||||
const handleCloseReceipt = (receipt) => {
|
||||
openAlert('receipt-close', { receiptId: receipt.id });
|
||||
};
|
||||
|
||||
// Handle drawer receipts.
|
||||
const handleDrawerReceipt = ({ id }) => {
|
||||
openDrawer('receipt-drawer', { receiptId: id });
|
||||
// Handle view detail receipt.
|
||||
const handleViewDetailReceipt = ({ id }) => {
|
||||
openDrawer('receipt-detail-drawer', { receiptId: id });
|
||||
};
|
||||
|
||||
// Handles the datable fetch data once the state changing.
|
||||
@@ -112,6 +117,7 @@ function ReceiptsDataTable({
|
||||
onDelete: handleDeleteReceipt,
|
||||
onClose: handleCloseReceipt,
|
||||
onDrawer: handleDrawerReceipt,
|
||||
onViewDetails: handleViewDetailReceipt,
|
||||
baseCurrency,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -16,16 +16,15 @@ import { Choose, Money, Icon, If } from 'components';
|
||||
import moment from 'moment';
|
||||
|
||||
export function ActionsMenu({
|
||||
payload: { onEdit, onDelete, onClose, onDrawer },
|
||||
payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails },
|
||||
row: { original: receipt },
|
||||
}) {
|
||||
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={intl.get('view_details')}
|
||||
onClick={safeCallback(onViewDetails, receipt)}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
@@ -94,8 +93,6 @@ export function StatusAccessor(receipt) {
|
||||
* Retrieve receipts table columns.
|
||||
*/
|
||||
export function useReceiptsTableColumns() {
|
||||
|
||||
|
||||
return React.useMemo(
|
||||
() => [
|
||||
{
|
||||
|
||||
@@ -1166,5 +1166,11 @@
|
||||
"From transaction": "From transaction",
|
||||
"Landed": "Landed",
|
||||
"This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
|
||||
"Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?"
|
||||
"Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?": "Once your delete this located landed cost, you won't be able to restore it later, Are your sure you want to delete this transaction?",
|
||||
"journal_entries":"Journal entries",
|
||||
"contact":"Contact",
|
||||
"invoice_details":"Invoice details",
|
||||
"receipt_details":"Receipt details",
|
||||
"payment_receive_details":"Payment receive details",
|
||||
"payment_made_details":"Payment made details"
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
@import '../../Base.scss';
|
||||
@import '../../../Base.scss';
|
||||
|
||||
.bill-drawer {
|
||||
.view-detail-drawer {
|
||||
.bp3-tabs {
|
||||
.bp3-tab-list {
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -31,10 +31,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tab-panel{
|
||||
.bp3-tab-panel {
|
||||
margin-top: 0;
|
||||
|
||||
.card{
|
||||
.card {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
@@ -42,7 +42,6 @@
|
||||
|
||||
.datatable--landed-cost-transactions {
|
||||
.table {
|
||||
|
||||
.tbody,
|
||||
.tbody-inner {
|
||||
height: auto;
|
||||
@@ -55,11 +54,11 @@
|
||||
.tr .td {
|
||||
padding: 0.6rem;
|
||||
|
||||
&.amount{
|
||||
&.amount {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user