feat: view details.

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