feat: Optimize SCSS architecture.

client/src/containers/Purchases/Bill/BillActionsBar.js

@@ -3,8 +3,6 @@ import Icon from 'components/Icon';
 import {
   Button,
   Classes,
-  Menu,
-  MenuItem,
   Popover,
   NavbarDivider,
   NavbarGroup,
@@ -14,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 
 import classNames from 'classnames';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import { connect } from 'react-redux';

client/src/containers/Purchases/Bill/Bills.js

@@ -14,17 +14,19 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/Bills/PageForm.scss';
+
 function Bills({
-  //#withwithAccountsActions
+  // #withwithAccountsActions
   requestFetchAccounts,
 
-  //#withVendorActions
+  // #withVendorActions
   requestFetchVendorsTable,
 
-  //#withItemsActions
+  // #withItemsActions
   requestFetchItems,
 
-  //# withBilleActions
+  // #withBilleActions
   requestFetchBill,
 
   // #withSettingsActions

client/src/containers/Purchases/PaymentMades/PaymentMade.js

@@ -16,6 +16,11 @@ import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
+import 'style/pages/PaymentMade/PageForm.scss'
+
+/**
+ * Payment made - Page form.
+ */
 function PaymentMade({
   //#withAccountsActions
   requestFetchAccounts,

client/src/containers/Purchases/PaymentMades/PaymentMadeItemsTableEditor.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,
@@ -140,24 +140,18 @@ export default function PaymentMadeItemsTableEditor({
   );
 
   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'}
@@ -165,7 +159,8 @@ export default function PaymentMadeItemsTableEditor({
         >
           <T id={'clear_all_lines'} />
         </Button>
-      </div>
-    </div>
+      }
+      totalRow={true}
+    />
   );
 }