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