feat: view details.

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,
       }}
     />

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({
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js

@@ -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,
       }}
     />
   );

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 (
     <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',
-      }
+      },
     ],
     [],
   );

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,
       }}
     />

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 (
     <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(
     () => [
       {