From e04ba7e030b171beab24c84d6823eaebed5849fe Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Thu, 29 Jul 2021 23:18:40 +0200 Subject: [PATCH 1/5] feat: view details. --- client/src/components/DrawersContainer.js | 8 +++ .../ItemCategoryDialog/ItemCategoryForm.js | 2 +- .../Drawers/BillDrawer/BillDrawerContent.js | 2 +- .../Drawers/BillDrawer/BillDrawerDetails.js | 10 +++- .../InvoiceDetailDrawer/InvoiceDetail.js | 28 ++++++++++ .../InvoiceDetailDrawerContent.js | 20 ++++++++ .../InvoiceDetailDrawerProvider.js | 26 ++++++++++ .../Drawers/InvoiceDetailDrawer/index.js | 28 ++++++++++ .../PaymentMadeDetailContent.js | 20 ++++++++ .../PaymentMadeDetailProvider.js | 23 +++++++++ .../PaymentMadeDetails.js | 23 +++++++++ .../Drawers/PaymentMadeDetailDrawer/index.js | 29 +++++++++++ .../PaymentReceiveDetail.js | 23 +++++++++ .../PaymentReceiveDetailContent.js | 21 ++++++++ .../PaymentReceiveDetailProvider.js | 27 ++++++++++ .../PaymentReceiveDetailDrawer/index.js | 29 +++++++++++ .../ReceiptDetailDrawer/ReceiptDetail.js | 23 +++++++++ .../ReceiptDetailDrawerContent.js | 20 ++++++++ .../ReceiptDetailDrawerProvider.js | 27 ++++++++++ .../Drawers/ReceiptDetailDrawer/index.js | 29 +++++++++++ .../JournalEntriesTable.js | 51 +++++++++++++++++++ .../PaymentsLanding/PaymentMadesTable.js | 11 ++++ .../PaymentsLanding/components.js | 7 +-- .../InvoicesLanding/InvoicesDataTable.js | 7 +++ .../Invoices/InvoicesLanding/components.js | 3 +- .../PaymentsLanding/PaymentReceivesTable.js | 6 +++ .../PaymentsLanding/components.js | 9 ++-- .../Receipts/ReceiptsLanding/ReceiptsTable.js | 12 +++-- .../Receipts/ReceiptsLanding/components.js | 7 +-- client/src/lang/en/index.json | 8 ++- .../ViewDetail.scss} | 17 +++---- 31 files changed, 522 insertions(+), 34 deletions(-) create mode 100644 client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js create mode 100644 client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js create mode 100644 client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js create mode 100644 client/src/containers/Drawers/InvoiceDetailDrawer/index.js create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js create mode 100644 client/src/containers/Drawers/PaymentMadeDetailDrawer/index.js create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetail.js create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailContent.js create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js create mode 100644 client/src/containers/Drawers/PaymentReceiveDetailDrawer/index.js create mode 100644 client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetail.js create mode 100644 client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerContent.js create mode 100644 client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js create mode 100644 client/src/containers/Drawers/ReceiptDetailDrawer/index.js create mode 100644 client/src/containers/JournalEntriesTable/JournalEntriesTable.js rename client/src/style/components/Drawers/{BillDrawer.scss => ViewDetail/ViewDetail.scss} (87%) 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 +} From 7582954337ea40c28310bc0a22db2467c53f72c2 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 31 Jul 2021 13:40:16 +0200 Subject: [PATCH 2/5] LOOK.. --- .../ItemCategoryDialog/ItemCategoryForm.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js index 7610f67ea..5123f4682 100644 --- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js +++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js @@ -9,10 +9,10 @@ import { transformToForm } from 'utils'; import { CreateItemCategoryFormSchema, EditItemCategoryFormSchema, -} from './ItemCategoryForm.schema'; +} from './itemCategoryForm.schema'; import withDialogActions from 'containers/Dialog/withDialogActions'; -import ItemCategoryFormContent from './ItemCategoryFormContent' +import ItemCategoryFormContent from './ItemCategoryFormContent'; import { compose } from 'utils'; const defaultInitialValues = { @@ -30,7 +30,6 @@ function ItemCategoryForm({ // #withDialogActions closeDialog, }) { - const { isNewMode, itemCategory, @@ -81,7 +80,11 @@ function ItemCategoryForm({ }; // Handle the response error. const onError = (error) => { - const { response: { data: { errors } } } = error; + const { + response: { + data: { errors }, + }, + } = error; transformErrors(errors, { setErrors }); setSubmitting(false); @@ -108,6 +111,4 @@ function ItemCategoryForm({ ); } -export default compose( - withDialogActions, -)(ItemCategoryForm); \ No newline at end of file +export default compose(withDialogActions)(ItemCategoryForm); From 596d3266e1d7c0e80a21387d7dd5350dcf8e684a Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 31 Jul 2021 19:04:10 +0200 Subject: [PATCH 3/5] fix: plans reducer. --- client/src/store/plans/plans.reducer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/store/plans/plans.reducer.js b/client/src/store/plans/plans.reducer.js index 766399b7f..472b353f4 100644 --- a/client/src/store/plans/plans.reducer.js +++ b/client/src/store/plans/plans.reducer.js @@ -6,7 +6,8 @@ import t from 'store/types'; const getSubscriptionPlans = () => [ { name: intl.get('Starter'), - slug: 'starter', + slug: 'free', + // slug: 'starter', description: [ intl.get('Sale and purchase invoices.'), intl.get('Customers/vendors accounts.'), From 042a7f3693bfbe06c85c074fe23fb0506d97c34f Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sat, 31 Jul 2021 19:04:44 +0200 Subject: [PATCH 4/5] fix: checkbox cell. --- client/src/components/DataTableCells/CheckBoxFieldCell.js | 5 +++-- client/src/containers/Expenses/ExpenseForm/ExpenseForm.js | 5 +---- client/src/containers/Expenses/ExpenseForm/utils.js | 2 +- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/client/src/components/DataTableCells/CheckBoxFieldCell.js b/client/src/components/DataTableCells/CheckBoxFieldCell.js index 4cb58ffa1..15772baa2 100644 --- a/client/src/components/DataTableCells/CheckBoxFieldCell.js +++ b/client/src/components/DataTableCells/CheckBoxFieldCell.js @@ -11,7 +11,7 @@ const CheckboxEditableCell = ({ const [value, setValue] = React.useState(initialValue); const onChange = (e) => { - setValue(e.target.value); + setValue(e.target.checked); }; const onBlur = () => { payload.updateData(index, id, value); @@ -24,12 +24,13 @@ const CheckboxEditableCell = ({ return ( - category.amount && - category.index && - category.expense_account_id && - category.landed_cost, + category.amount && category.index && category.expense_account_id, ); const form = { diff --git a/client/src/containers/Expenses/ExpenseForm/utils.js b/client/src/containers/Expenses/ExpenseForm/utils.js index f9d8392c3..c926f9865 100644 --- a/client/src/containers/Expenses/ExpenseForm/utils.js +++ b/client/src/containers/Expenses/ExpenseForm/utils.js @@ -31,7 +31,7 @@ export const defaultExpenseEntry = { amount: '', expense_account_id: '', description: '', - landed_cost: false, + landed_cost: 0, }; export const defaultExpense = { From 196045eb6696306e5a4c996c1ead12e4520eaf10 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Sun, 1 Aug 2021 16:33:45 +0200 Subject: [PATCH 5/5] feat: transaction by refernce. --- .../Drawers/BillDrawer/BillDrawerDetails.js | 5 ++++- .../Drawers/BillDrawer/BillDrawerProvider.js | 14 ++++++++++++- .../InvoiceDetailDrawer/InvoiceDetail.js | 5 ++++- .../InvoiceDetailDrawerProvider.js | 17 ++++++++++++++-- .../PaymentMadeDetailProvider.js | 20 +++++++++++++++++-- .../PaymentReceiveDetail.js | 5 ++++- .../PaymentReceiveDetailProvider.js | 16 +++++++++++++-- .../ReceiptDetailDrawer/ReceiptDetail.js | 5 ++++- .../ReceiptDetailDrawerProvider.js | 17 ++++++++++++++-- .../JournalEntriesTable.js | 12 +++++------ client/src/hooks/query/financialReports.js | 19 ++++++++++++++++++ client/src/hooks/query/types.js | 1 + 12 files changed, 117 insertions(+), 19 deletions(-) diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js index b617a1bee..9f2b86253 100644 --- a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js +++ b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js @@ -4,11 +4,14 @@ import intl from 'react-intl-universal'; import LocatedLandedCostTable from './LocatedLandedCostTable'; import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable'; +import { useBillDrawerContext } from './BillDrawerProvider'; /** * Bill view details. */ export default function BillDrawerDetails() { + const { data } = useBillDrawerContext(); + return (
@@ -16,7 +19,7 @@ export default function BillDrawerDetails() { } + panel={} /> + } + panel={} />
diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js index 3383528ca..6f81e6a6b 100644 --- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js +++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js @@ -1,16 +1,29 @@ import React from 'react'; import intl from 'react-intl-universal'; import { DrawerHeaderContent, DashboardInsider } from 'components'; +import { useTransactionsByReference } from 'hooks/query'; const InvoiceDetailDrawerContext = React.createContext(); /** * Invoice detail provider. */ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) { + + // Handle fetch transaction by reference. + const { data, isLoading: isTransactionLoading } = useTransactionsByReference( + { + reference_id: invoiceId, + reference_type: 'SaleInvoice', + }, + { enabled: !!invoiceId }, + ); + //provider. - const provider = {}; + const provider = { + data, + }; return ( - + + @@ -15,7 +18,7 @@ export default function PaymentReceiveDetail() { } + panel={} />
diff --git a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js index 8602ba01c..50c8db63d 100644 --- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js +++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailProvider.js @@ -1,17 +1,29 @@ import React from 'react'; import intl from 'react-intl-universal'; import { DrawerHeaderContent, DashboardInsider } from 'components'; +import { useTransactionsByReference } from 'hooks/query'; const PaymentReceiveDetailContext = React.createContext(); + /** * Payment receive detail provider. */ function PaymentReceiveDetailProvider({ paymentReceiveId, ...props }) { + + // Handle fetch transaction by reference. + const { data, isLoading: isTransactionLoading } = useTransactionsByReference( + { + reference_id: paymentReceiveId, + reference_type: 'paymentReceive', + }, + { enabled: !!paymentReceiveId }, + ); + //provider. - const provider = {}; + const provider = { data }; return ( - + @@ -15,7 +18,7 @@ export default function ReceiptDetail() { } + panel={} /> diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js index 9f0ba768b..c107acf89 100644 --- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailDrawerProvider.js @@ -1,18 +1,31 @@ import React from 'react'; import intl from 'react-intl-universal'; import { DrawerHeaderContent, DashboardInsider } from 'components'; +import { useTransactionsByReference } from 'hooks/query'; +// useTransactionsByReference const ReceiptDetailDrawerContext = React.createContext(); /** * Receipt detail provider. */ function ReceiptDetailDrawerProvider({ receiptId, ...props }) { + // Handle fetch transaction by reference. + const { data, isLoading: isTransactionLoading } = useTransactionsByReference( + { + reference_id: receiptId, + reference_type: 'SaleReceipt', + }, + { enabled: !!receiptId }, + ); + //provider. - const provider = {}; + const provider = { + data, + }; return ( - + [ { @@ -17,22 +17,22 @@ export default function JournalEntriesTable({ journal }) { }, { Header: intl.get('account_name'), - accessor: 'account_name', + accessor: 'accountName', width: 150, }, { Header: intl.get('contact'), - accessor: 'contact', + accessor: 'contactTypeFormatted', width: 150, }, { Header: intl.get('credit'), - accessor: 'credit', + accessor: ({ credit }) => credit.formattedAmount, width: 100, }, { Header: intl.get('debit'), - accessor: 'debit', + accessor: ({ debit }) => debit.formattedAmount, width: 100, }, ], @@ -43,7 +43,7 @@ export default function JournalEntriesTable({ journal }) { diff --git a/client/src/hooks/query/financialReports.js b/client/src/hooks/query/financialReports.js index 1826269c2..4b7258ea7 100644 --- a/client/src/hooks/query/financialReports.js +++ b/client/src/hooks/query/financialReports.js @@ -466,3 +466,22 @@ export function useInventoryItemDetailsReport(query, props) { }, ); } + +/** + * Retrieve transactions by reference report. + */ +export function useTransactionsByReference(query, props) { + return useRequestQuery( + [t.TRANSACTIONS_BY_REFERENCE, query], + { + method: 'get', + url: `/financial_statements/transactions-by-reference`, + params: query, + }, + { + select: (res) => res.data.data, + defaultData: {}, + ...props, + }, + ); +} diff --git a/client/src/hooks/query/types.js b/client/src/hooks/query/types.js index 886c07dd3..57ae0d0d2 100644 --- a/client/src/hooks/query/types.js +++ b/client/src/hooks/query/types.js @@ -23,6 +23,7 @@ const FINANCIAL_REPORTS = { INVENTORY_VALUATION: 'INVENTORY_VALUATION', CASH_FLOW_STATEMENT: 'CASH_FLOW_STATEMENT', INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS', + TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE', }; const BILLS = {