feat: Bill drawer.

client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -14,6 +14,7 @@ import withBillActions from './withBillsActions';
 import withSettings from 'containers/Settings/withSettings';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 import { useBillsTableColumns, ActionsMenu } from './components';
 import { useBillsListContext } from './BillsListProvider';
 
@@ -32,6 +33,9 @@ function BillsDataTable({
 
   // #withDialogActions
   openDialog,
+  
+  // #withDrawerActions
+  openDrawer,
 }) {
   // Bills list context.
   const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } =
@@ -78,6 +82,11 @@ function BillsDataTable({
     openDialog('allocate-landed-cost', { billId: id });
   };
 
+  // Handle view detail bill.
+  const handleViewDetailBill = ({ id }) => {
+    openDrawer('bill-drawer', { billId: id });
+  };
+
   if (isEmptyStatus) {
     return <BillsEmptyStatus />;
   }
@@ -106,6 +115,7 @@ function BillsDataTable({
         onOpen: handleOpenBill,
         onQuick: handleQuickPaymentMade,
         onAllocateLandedCost: handleAllocateLandedCost,
+        onViewDetails: handleViewDetailBill,
       }}
     />
   );
@@ -115,6 +125,7 @@ export default compose(
   withBills(({ billsTableState }) => ({ billsTableState })),
   withBillActions,
   withAlertsActions,
+  withDrawerActions,
   withDialogActions,
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,

client/src/containers/Purchases/Bills/BillsLanding/components.js

@@ -20,7 +20,14 @@ import moment from 'moment';
  * Actions menu.
  */
 export function ActionsMenu({
-  payload: { onEdit, onOpen, onDelete, onQuick, onAllocateLandedCost },
+  payload: {
+    onEdit,
+    onOpen,
+    onDelete,
+    onQuick,
+    onViewDetails,
+    onAllocateLandedCost,
+  },
   row: { original },
 }) {
   return (
@@ -28,6 +35,7 @@ export function ActionsMenu({
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem