feat: Optimize SCSS architecture.

client/src/containers/Sales/Estimate/Estimates.js

@@ -13,6 +13,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/SaleEstimate/PageForm.scss';
+
 function Estimates({
   // #withCustomersActions
   requestFetchCustomers,
@@ -85,8 +87,8 @@ function Estimates({
       name={'estimate-form'}
     >
       <EstimateForm
-        onFormSubmit={handleFormSubmit}
         estimateId={id}
+        onFormSubmit={handleFormSubmit}
         onCancelForm={handleCancel}
       />
     </DashboardInsider>

client/src/containers/Sales/Invoice/InvoiceForm.js

@@ -3,7 +3,7 @@ import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { useIntl } from 'react-intl';
-import { pick, sumBy, omit, values } from 'lodash';
+import { pick, sumBy, omit } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -8,6 +8,7 @@ import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
 
 import { PageFormBigNumber } from 'components';
 import withSettings from 'containers/Settings/withSettings';
+
 import { compose } from 'redux';
 
 /**

client/src/containers/Sales/Invoice/Invoices.js

@@ -13,6 +13,8 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/SaleInvoice/PageForm.scss';
+
 function Invoices({
   // #withCustomersActions
   requestFetchCustomers,

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

@@ -27,6 +27,8 @@ import { AppToaster } from 'components';
 
 import { compose, defaultToTransform } from 'utils';
 
+import 'style/pages/PaymentReceive/PageForm.scss'
+
 /**
  * Payment Receive form.
  */

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

@@ -6,7 +6,7 @@ import { sumBy } from 'lodash';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';
-import { DataTable, Money } from 'components';
+import { DataTableEditable, Money } from 'components';
 import { transformUpdatedRows } from 'utils';
 import {
   MoneyFieldCell,
@@ -146,24 +146,18 @@ export default function PaymentReceiveItemsTableEditor({
   );
 
   return (
-    <div
-      className={classNames(
-        CLASSES.DATATABLE_EDITOR,
-        CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
-      )}
-    >
-      <DataTable
-        columns={columns}
-        data={localData}
-        rowClassNames={rowClassNames}
-        spinnerProps={false}
-        payload={{
-          errors,
-          updateData: handleUpdateData,
-        }}
-        noResults={noResultsMessage}
-      />
-      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
+    <DataTableEditable
+      className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
+      columns={columns}
+      data={localData}
+      rowClassNames={rowClassNames}
+      spinnerProps={false}
+      payload={{
+        errors,
+        updateData: handleUpdateData,
+      }}
+      noResults={noResultsMessage}
+      actions={
         <Button
           small={true}
           className={'button--secondary button--clear-lines'}
@@ -171,7 +165,8 @@ export default function PaymentReceiveItemsTableEditor({
         >
           <T id={'clear_all_lines'} />
         </Button>
-      </div>
-    </div>
+      }
+      totalRow={true}
+    />
   );
 }

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

@@ -29,9 +29,6 @@ import withMediaActions from 'containers/Media/withMediaActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import { AppToaster } from 'components';
-import Dragzone from 'components/Dragzone';
-import useMedia from 'hooks/useMedia';
-
 import {
   compose,
   repeatValue,
@@ -39,6 +36,8 @@ import {
   defaultToTransform,
 } from 'utils';
 
+import 'style/pages/SaleReceipt/PageForm.scss'
+
 const MIN_LINES_NUMBER = 4;
 
 const defaultReceipt = {
@@ -66,18 +65,18 @@ const defaultInitialValues = {
  * Receipt form.
  */
 function ReceiptForm({
-  //#withMedia
+  // #withMedia
   requestSubmitMedia,
   requestDeleteMedia,
 
-  //#withReceiptActions
+  // #withReceiptActions
   requestSubmitReceipt,
   requestEditReceipt,
 
-  //#withReceiptDetail
+  // #withReceiptDetail
   receipt,
 
-  //#withDashboard
+  // #withDashboard
   changePageTitle,
   changePageSubtitle,