diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js index 63dcbdb6e..723fbfeab 100644 --- a/client/src/components/DrawersContainer.js +++ b/client/src/components/DrawersContainer.js @@ -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() { + + + + ); } diff --git a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js index 7610f67ea..4753ccf2f 100644 --- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js +++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js @@ -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' diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js b/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js index a9a49c0ce..b2f62ac72 100644 --- a/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js +++ b/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js @@ -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'; diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js index bd9de99e1..b617a1bee 100644 --- a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js +++ b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js @@ -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 ( -
- +
+ + } + /> + + + } + /> + +
+ ); +} diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js new file mode 100644 index 000000000..509f66dcb --- /dev/null +++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js @@ -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 ( + + + + ); +} diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js new file mode 100644 index 000000000..3383528ca --- /dev/null +++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js @@ -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 ( + + + + + ); +} + +const useInvoiceDetailDrawerContext = () => + React.useContext(InvoiceDetailDrawerContext); + +export { InvoiceDetailDrawerProvider, useInvoiceDetailDrawerContext }; diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/index.js b/client/src/containers/Drawers/InvoiceDetailDrawer/index.js new file mode 100644 index 000000000..35f1609ec --- /dev/null +++ b/client/src/containers/Drawers/InvoiceDetailDrawer/index.js @@ -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 ( + + + + + + ); +} +export default compose(withDrawers())(InvoiceDetailDrawer); diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js new file mode 100644 index 000000000..b466c770d --- /dev/null +++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js @@ -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 ( + + + + ); +} diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js new file mode 100644 index 000000000..ca775bba6 --- /dev/null +++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js @@ -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 ( + + + + + ); +} + +const usePaymentMadeDetailContext = () => + React.useContext(PaymentMadeDetailContext); +export { PaymentMadeDetailProvider, usePaymentMadeDetailContext }; diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js new file mode 100644 index 000000000..4c02d448f --- /dev/null +++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js @@ -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 ( +
+ + + } + /> + +
+ ); +} diff --git a/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js b/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js new file mode 100644 index 000000000..8c0cb2fba --- /dev/null +++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js @@ -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 ( + + + + + + ); +} + +export default compose(withDrawers())(PaymentMadeDetailDrawer); diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js new file mode 100644 index 000000000..515976244 --- /dev/null +++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js @@ -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 ( +
+ + + } + /> + +
+ ); +} diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js new file mode 100644 index 000000000..e92bbbf3b --- /dev/null +++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js @@ -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 ( + + + + ); +} diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js new file mode 100644 index 000000000..8602ba01c --- /dev/null +++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js @@ -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 ( + + + + + ); +} + +const usePaymentReceiveDetailContext = () => + React.useContext(PaymentReceiveDetailContext); + +export { PaymentReceiveDetailProvider, usePaymentReceiveDetailContext }; diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js new file mode 100644 index 000000000..526064ebd --- /dev/null +++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js @@ -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 ( + + + + + + ); +} + +export default compose(withDrawers())(PaymentReceiveDetailDrawer); diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js new file mode 100644 index 000000000..facb371c4 --- /dev/null +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js @@ -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 ( +
+ + + } + /> + +
+ ); +} diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js new file mode 100644 index 000000000..cae135981 --- /dev/null +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js @@ -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 ( + + + + ); +} diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js new file mode 100644 index 000000000..9f0ba768b --- /dev/null +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js @@ -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 ( + + + + + ); +} +const useReceiptDetailDrawerContext = () => + React.useContext(ReceiptDetailDrawerContext); + +export { ReceiptDetailDrawerProvider, useReceiptDetailDrawerContext }; diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/index.js b/client/src/containers/Drawers/ReceiptDetailDrawer/index.js new file mode 100644 index 000000000..3f982ee13 --- /dev/null +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/index.js @@ -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 ( + + + + + + ); +} + +export default compose(withDrawers())(ReceiptDetailDrawer); diff --git a/client/src/containers/JournalEntriesTable/JournalEntriesTable.js b/client/src/containers/JournalEntriesTable/JournalEntriesTable.js new file mode 100644 index 000000000..ba577ec26 --- /dev/null +++ b/client/src/containers/JournalEntriesTable/JournalEntriesTable.js @@ -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 ( + + + + ); +} diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js index 755dad9d4..d3806af89 100644 --- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js +++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js @@ -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, })), diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js index 081267a2e..ea55630ce 100644 --- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js +++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js @@ -26,15 +26,14 @@ export function AmountAccessor(row) { */ export function ActionsMenu({ row: { original }, - payload: { onEdit, onDelete }, + payload: { onEdit, onDelete, onViewDetails }, }) { - - return ( } text={intl.get('view_details')} + onClick={safeCallback(onViewDetails, original)} /> [ { diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js index 2d4b5bf85..13afc5d3a 100644 --- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js +++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js @@ -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, }} /> diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js index 4cc6acc46..395e50585 100644 --- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js +++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js @@ -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({ } text={intl.get('view_details')} + onClick={safeCallback(onViewDetails, original)} /> { + 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, }} /> ); diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js index d31705c77..6753d9c36 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js @@ -19,15 +19,14 @@ import { safeCallback } from 'utils'; */ export function ActionsMenu({ row: { original: paymentReceive }, - payload: { onEdit, onDelete, onDrawer }, + payload: { onEdit, onDelete, onDrawer, onViewDetails }, }) { - - return ( } text={intl.get('view_details')} + onClick={safeCallback(onViewDetails, paymentReceive)} /> [ { @@ -128,7 +125,7 @@ export function usePaymentReceivesColumns() { accessor: 'reference_no', width: 140, className: 'reference_no', - } + }, ], [], ); diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js index 9b8a55428..c31d9f20e 100644 --- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js +++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js @@ -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, }} /> diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js index 5b9542540..74d54949c 100644 --- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js +++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js @@ -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 ( } text={intl.get('view_details')} + onClick={safeCallback(onViewDetails, receipt)} /> [ { diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json index 5e68a7f89..384702549 100644 --- a/client/src/lang/en/index.json +++ b/client/src/lang/en/index.json @@ -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" } \ No newline at end of file diff --git a/client/src/style/components/Drawers/BillDrawer.scss b/client/src/style/components/Drawers/ViewDetail/ViewDetail.scss similarity index 87% rename from client/src/style/components/Drawers/BillDrawer.scss rename to client/src/style/components/Drawers/ViewDetail/ViewDetail.scss index 3179bda99..4c92d13d1 100644 --- a/client/src/style/components/Drawers/BillDrawer.scss +++ b/client/src/style/components/Drawers/ViewDetail/ViewDetail.scss @@ -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; } } } } } -} \ No newline at end of file +}