refactoring: account form.

refactoring: expense form.
refactoring: manual journal form.
refactoring: invoice form.

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -17,7 +17,6 @@ import withAlertsActions from 'containers/Alert/withAlertActions';
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { ActionsMenu, useEstiamtesTableColumns } from './components';
 
-
 /**
  * Estimates datatable.
  */
@@ -78,43 +77,37 @@ function EstimatesDataTable({
     [setEstimatesTableState],
   );
 
+  // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <EstimatesEmptyStatus />;
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={estimates}
-        
-        loading={isEstimatesLoading}
-        headerLoading={isEstimatesLoading}
-        progressBarLoading={isEstimatesFetching}
-
-        onFetchData={handleFetchData}
-        noInitialFetch={true}
-        manualSortBy={true}
-        selectionColumn={true}
-        sticky={true}
-        pagination={true}
-
-        manualPagination={true}
-        pagesCount={pagination.pagesCount}
-
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-
-        ContextMenu={ActionsMenu}
-        payload={{
-          onApprove: handleApproveEstimate,
-          onEdit: handleEditEstimate,
-          onReject: handleRejectEstimate,
-          onDeliver: handleDeliverEstimate,
-          onDelete: handleDeleteEstimate,
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={estimates}
+      loading={isEstimatesLoading}
+      headerLoading={isEstimatesLoading}
+      progressBarLoading={isEstimatesFetching}
+      onFetchData={handleFetchData}
+      noInitialFetch={true}
+      manualSortBy={true}
+      selectionColumn={true}
+      sticky={true}
+      pagination={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onApprove: handleApproveEstimate,
+        onEdit: handleEditEstimate,
+        onReject: handleRejectEstimate,
+        onDeliver: handleDeliverEstimate,
+        onDelete: handleDeleteEstimate,
+      }}
+    />
   );
 }
 

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js

@@ -1,13 +1,11 @@
-import React, { useEffect } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import EstimatesActionsBar from './EstimatesActionsBar';
 import EstimatesAlerts from '../EstimatesAlerts';
 import EstimatesViewTabs from './EstimatesViewTabs';
 import EstimatesDataTable from './EstimatesDataTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withEstimates from './withEstimates';
 
 import { EstimatesListProvider } from './EstimatesListProvider';
@@ -17,18 +15,9 @@ import { compose, transformTableStateToQuery } from 'utils';
  * Sale estimates list page.
  */
 function EstimatesList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withEstimate
   estimatesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'estimates_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <EstimatesListProvider
       query={transformTableStateToQuery(estimatesTableState)}
@@ -37,7 +26,10 @@ function EstimatesList({
 
       <DashboardPageContent>
         <EstimatesViewTabs />
-        <EstimatesDataTable />
+
+        <DashboardContentTable>
+          <EstimatesDataTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <EstimatesAlerts />
@@ -46,6 +38,5 @@ function EstimatesList({
 }
 
 export default compose(
-  withDashboardActions,
   withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
 )(EstimatesList);