feat: view details.

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

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 (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
@@ -70,8 +69,6 @@ export function ActionsCell(props) {
  * Retrieve payment mades table columns.
  */
 export function usePaymentMadesTableColumns() {
-  
-
   return React.useMemo(
     () => [
       {