feat: apply new cards design system.

feat: empty status datatables.
fix: edit account.

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js

@@ -63,7 +63,9 @@ function PaymentReceiveFormPage({
         fetchAccounts.isFetching ||
         // fetchSettings.isFetching || 
         fetchCustomers.isFetching
-      }>
+      }
+      name={'payment-receive-form'}
+    >
       <PaymentReceiveForm
         paymentReceiveId={paymentReceiveId}
       />

client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js

@@ -11,10 +11,13 @@ import {
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
+import classNames from 'classnames';
 
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
+import { CLASSES } from 'common/classes';
+
 import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
 import { LoadingIndicator, DataTable, Choose, Money, Icon } from 'components';
 
@@ -186,6 +189,7 @@ function PaymentReceivesDataTable({
   ].every(condition => condition === true); 
 
   return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
     <LoadingIndicator
       loading={paymentReceivesLoading && !isLoaded}
       mount={false}
@@ -216,6 +220,7 @@ function PaymentReceivesDataTable({
         </Choose.Otherwise>
       </Choose>
     </LoadingIndicator>
+    </div>
   );
 }
 

client/src/containers/Sales/Receipt/ReceiptsDataTable.js

@@ -11,10 +11,12 @@ import {
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
+import classNames from 'classnames';
 
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
+import { CLASSES } from 'common/classes';
 import { Choose, LoadingIndicator, DataTable, Money, Icon } from 'components';
 
 import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
@@ -192,36 +194,38 @@ function ReceiptsDataTable({
   const showEmptyStatus = [
     receiptsCurrentViewId === -1,
     receiptsCurrentPage.length === 0,
-  ].every(condition => condition === true);
+  ].every((condition) => condition === true);
 
   return (
-    <LoadingIndicator loading={receiptsLoading && !isLoadedBefore}>
-      <Choose>
-        <Choose.When condition={showEmptyStatus}>
-          <ReceiptsEmptyStatus />
-        </Choose.When>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator loading={receiptsLoading && !isLoadedBefore}>
+        <Choose>
+          <Choose.When condition={showEmptyStatus}>
+            <ReceiptsEmptyStatus />
+          </Choose.When>
 
-        <Choose.Otherwise>
-          <DataTable
-            columns={columns}
-            data={receiptsCurrentPage}
-            onFetchData={handleDataTableFetchData}
-            manualSortBy={true}
-            selectionColumn={true}
-            noInitialFetch={true}
-            sticky={true}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            rowContextMenu={onRowContextMenu}
-            pagination={true}
-            pagesCount={receiptsPagination.pagesCount}
-            autoResetSortBy={false}
-            autoResetPage={false}
-            initialPageSize={receiptTableQuery.page_size}
-            initialPageIndex={receiptTableQuery.page - 1}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </LoadingIndicator>
+          <Choose.Otherwise>
+            <DataTable
+              columns={columns}
+              data={receiptsCurrentPage}
+              onFetchData={handleDataTableFetchData}
+              manualSortBy={true}
+              selectionColumn={true}
+              noInitialFetch={true}
+              sticky={true}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              rowContextMenu={onRowContextMenu}
+              pagination={true}
+              pagesCount={receiptsPagination.pagesCount}
+              autoResetSortBy={false}
+              autoResetPage={false}
+              initialPageSize={receiptTableQuery.page_size}
+              initialPageIndex={receiptTableQuery.page - 1}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      </LoadingIndicator>
+    </div>
   );
 }
 
@@ -236,13 +240,13 @@ export default compose(
       receiptsLoading,
       receiptsPagination,
       receiptTableQuery,
-      receiptsCurrentViewId
+      receiptsCurrentViewId,
     }) => ({
       receiptsCurrentPage,
       receiptsLoading,
       receiptsPagination,
       receiptTableQuery,
-      receiptsCurrentViewId
+      receiptsCurrentViewId,
     }),
   ),
 )(ReceiptsDataTable);