refactoring: payment receive form.

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

@@ -57,7 +57,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
   return (
     <DashboardInsider
       loading={isViewsLoading || isFieldsLoading}
-      name={'payment-receives'}
+      name={'payment-receives-list'}
     >
       <PaymentReceivesListContext.Provider value={state} {...props} />
     </DashboardInsider>

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

@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
+
+import 'style/pages/PaymentReceive/List.scss';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
 import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
@@ -8,7 +9,6 @@ import { PaymentReceivesListProvider } from './PaymentReceiptsListProvider';
 import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
 import PaymentReceivesTable from './PaymentReceivesTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withPaymentReceives from './withPaymentReceives';
 
 import { compose, transformTableStateToQuery } from 'utils';
@@ -17,19 +17,9 @@ import { compose, transformTableStateToQuery } from 'utils';
  * Payment receives list.
  */
 function PaymentReceiveList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withPaymentReceives
   paymentReceivesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  // Changes the dashboard page title once the page mount.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'payment_Receives_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <PaymentReceivesListProvider
       query={transformTableStateToQuery(paymentReceivesTableState)}
@@ -50,7 +40,6 @@ function PaymentReceiveList({
 }
 
 export default compose(
-  withDashboardActions,
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
   })),

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

@@ -29,7 +29,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
     data: { paymentReceives, pagination, filterMeta },
     isLoading: isPaymentReceivesLoading,
     isFetching: isPaymentReceivesFetching,
-  } = usePaymentReceives(query);
+  } = usePaymentReceives(query, { keepPreviousData: true });
 
   // Provider payload.
   const provider = {

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

@@ -1,10 +1,8 @@
 import React, { useCallback } from 'react';
-import classNames from 'classnames';
-
-import { compose } from 'utils';
 import { useHistory } from 'react-router-dom';
 
-import { CLASSES } from 'common/classes';
+import { compose } from 'utils';
+
 import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';

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

@@ -91,9 +91,16 @@ export function usePaymentReceivesColumns() {
         id: 'customer_id',
         Header: formatMessage({ id: 'customer_name' }),
         accessor: 'customer.display_name',
-        width: 140,
+        width: 160,
         className: 'customer_id',
       },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        width: 120,
+        className: 'amount',
+      },
       {
         id: 'payment_receive_no',
         Header: formatMessage({ id: 'payment_receive_no' }),
@@ -102,13 +109,6 @@ export function usePaymentReceivesColumns() {
         width: 140,
         className: 'payment_receive_no',
       },
-      {
-        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
-        accessor: AmountAccessor,
-        width: 140,
-        className: 'amount',
-      },
       {
         id: 'reference_no',
         Header: formatMessage({ id: 'reference_no' }),