From 73fbb8ae9998c52912e66baafb7843b542d00645 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 27 Jan 2021 07:21:13 +0200
Subject: [PATCH 1/5] fix: inner content of table cell.

---
 client/src/components/Datatable/TableCell.js         | 2 +-
 client/src/style/components/DataTable/DataTable.scss | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Datatable/TableCell.js b/client/src/components/Datatable/TableCell.js
index d8122a5c1..2636e5074 100644
--- a/client/src/components/Datatable/TableCell.js
+++ b/client/src/components/Datatable/TableCell.js
@@ -29,7 +29,7 @@ export default function TableCell({
       <div
         className={classNames({
           'text-overview': cell.column.textOverview,
-        })}
+        }, 'cell-inner')}
         style={{
           'padding-left':
             isExpandColumn && expandable
diff --git a/client/src/style/components/DataTable/DataTable.scss b/client/src/style/components/DataTable/DataTable.scss
index ab26c0f13..401c17725 100644
--- a/client/src/style/components/DataTable/DataTable.scss
+++ b/client/src/style/components/DataTable/DataTable.scss
@@ -147,6 +147,9 @@
         .placeholder {
           color: #a0a0a0;
         }
+        .cell-inner{
+          flex: 1 0 0;
+        }
         .text-overview{
           overflow: hidden;
           white-space: nowrap;

From 5edab0e4d6f2534ce6b1229be73e5f56f59470a1 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 27 Jan 2021 09:05:45 +0200
Subject: [PATCH 2/5] fix: settings reset the memorized metadata.

---
 .../core/20200810121809_seed_settings.js      | 30 +++++++++----------
 server/src/lib/Metable/MetableStore.ts        |  7 +++++
 server/src/lib/Metable/MetableStoreDB.ts      |  4 ++-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/server/src/database/seeds/core/20200810121809_seed_settings.js b/server/src/database/seeds/core/20200810121809_seed_settings.js
index 65f0b0ce4..f6578ba9f 100644
--- a/server/src/database/seeds/core/20200810121809_seed_settings.js
+++ b/server/src/database/seeds/core/20200810121809_seed_settings.js
@@ -1,22 +1,20 @@
+import Container from 'typedi';
+import TenancyService from 'services/Tenancy/TenancyService';
 
 exports.up = (knex) => {
-    // Inserts seed entries
-    return knex('settings').insert([
-      { group: 'manual_journals', key: 'next_number', value: 1 },
+  const tenancyService = Container.get(TenancyService);
+  const settings = tenancyService.settings(knex.userParams.tenantId);
 
-      { group: 'sales_invoices', key: 'next_number', value: 1},
-      { group: 'sales_invoices', key: 'number_prefix', value: 'INV' },
+  settings.set({ group: 'manual_journals', key: 'next_number', value: 1 });
+  settings.set({ group: 'sales_invoices', key: 'next_number', value: 1 });
+  settings.set({ group: 'sales_invoices', key: 'number_prefix', value: 'INV' });
+  settings.set({ group: 'sales_receipts', key: 'next_number', value: 1 });
+  settings.set({ group: 'sales_receipts', key: 'number_prefix', value: 'REC' });
+  settings.set({ group: 'sales_estimates', key: 'next_number', value: 1 });
+  settings.set({ group: 'sales_estimates', key: 'number_prefix', value: 'EST' });
+  settings.set({ group: 'payment_receives', key: 'next_number', value: 1 });
 
-      { group: 'sales_receipts', key: 'next_number', value: 1 },
-      { group: 'sales_receipts', key: 'number_prefix', value: 'REC' },
-
-      { group: 'sales_estimates', key: 'next_number', value: 1 },
-      { group: 'sales_estimates', key: 'number_prefix', value: 'EST' },
-
-      { group: 'payment_receives', key: 'next_number', value: 1 },
-    ]);
+  return settings.save();
 };
 
-exports.down = (knex) => {
-
-}
\ No newline at end of file
+exports.down = (knex) => {};
diff --git a/server/src/lib/Metable/MetableStore.ts b/server/src/lib/Metable/MetableStore.ts
index ad1569797..ccf81a14d 100644
--- a/server/src/lib/Metable/MetableStore.ts
+++ b/server/src/lib/Metable/MetableStore.ts
@@ -201,4 +201,11 @@ export default class MetableStore implements IMetableStore{
 
     return collection;
   }
+
+  /**
+   * Reset the momerized metadata.
+   */
+  resetMetadata() {
+    this.metadata = [];
+  }
 }
diff --git a/server/src/lib/Metable/MetableStoreDB.ts b/server/src/lib/Metable/MetableStoreDB.ts
index d7c303a07..830a07ca2 100644
--- a/server/src/lib/Metable/MetableStoreDB.ts
+++ b/server/src/lib/Metable/MetableStoreDB.ts
@@ -77,7 +77,7 @@ export default class MetableDBStore extends MetableStore implements IMetableStor
       this.saveInserted(this.metadata),
     ]);
   }
-  
+
   /**
    * Saves the updated metadata.
    * @param {IMetadata[]} metadata -
@@ -155,6 +155,8 @@ export default class MetableDBStore extends MetableStore implements IMetableStor
     const metadata = await this.repository.all();
     const mappedMetadata = this.mapMetadataCollection(metadata);
 
+    this.resetMetadata();
+
     mappedMetadata.forEach((meta: IMetadata) => {
       this.metadata.push(meta);
     });

From f8ee455985de9c47989c403f02607a9d2022c5be Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 27 Jan 2021 15:02:12 +0200
Subject: [PATCH 3/5] feat: make journal auto-adjustment for entries.

feat: auto-focus cells inside the table.
---
 client/package.json                           |  2 +-
 .../DataTableCells/AccountsListFieldCell.js   | 27 ++++++++----
 .../DataTableCells/ItemsListCell.js           | 17 +++++++-
 .../Accounting/MakeJournalEntriesTable.js     | 15 ++++---
 .../MakeJournalFormFloatingActions.js         |  3 --
 client/src/containers/Accounting/utils.js     | 43 ++++++++++++++++++-
 .../containers/Entries/ItemsEntriesTable.js   |  1 +
 client/src/hooks/index.js                     | 34 ++++++++++++++-
 client/src/hooks/useAutofocus.js              |  6 +--
 9 files changed, 121 insertions(+), 27 deletions(-)

diff --git a/client/package.json b/client/package.json
index a73054c21..87266a85b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
-    "@blueprintjs/core": "^3.23.1",
+    "@blueprintjs/core": "^3.38.1",
     "@blueprintjs/datetime": "^3.15.2",
     "@blueprintjs/select": "^3.11.2",
     "@blueprintjs/table": "^3.8.3",
diff --git a/client/src/components/DataTableCells/AccountsListFieldCell.js b/client/src/components/DataTableCells/AccountsListFieldCell.js
index c5c2a6dcc..58fac50c1 100644
--- a/client/src/components/DataTableCells/AccountsListFieldCell.js
+++ b/client/src/components/DataTableCells/AccountsListFieldCell.js
@@ -1,11 +1,14 @@
-import React, { useCallback, useMemo } from 'react';
-import AccountsSuggestField from 'components/AccountsSuggestField';
-// import AccountsSelectList from 'components/AccountsSelectList';
+import React, { useRef, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
+import { useCellAutoFocus } from 'hooks';
+
+import AccountsSuggestField from 'components/AccountsSuggestField';
+
+// import AccountsSelectList from 'components/AccountsSelectList';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
 // Account cell renderer.
-const AccountCellRenderer = ({
+export default function AccountCellRenderer({
   column: {
     id,
     accountsDataProp,
@@ -18,9 +21,14 @@ const AccountCellRenderer = ({
     accounts: defaultAccounts,
     updateData,
     errors,
+    autoFocus,
     ...restPayloadProps
   },
-}) => {
+}) {
+  const accountRef = useRef();
+
+  useCellAutoFocus(accountRef, autoFocus, id, index);
+
   const handleAccountSelected = useCallback(
     (account) => {
       updateData(index, id, account.id);
@@ -49,9 +57,12 @@ const AccountCellRenderer = ({
         selectedAccountId={initialValue}
         filterByRootTypes={filterAccountsByRootType}
         filterByTypes={filterAccountsByTypes}
+        inputProps={{
+          inputRef: (ref) => (accountRef.current = ref),
+        }}
+        openOnKeyDown={true}
+        blurOnSelectClose={false}
       />
     </FormGroup>
   );
-};
-
-export default AccountCellRenderer;
+}
diff --git a/client/src/components/DataTableCells/ItemsListCell.js b/client/src/components/DataTableCells/ItemsListCell.js
index ba77db9c3..77e3970fc 100644
--- a/client/src/components/DataTableCells/ItemsListCell.js
+++ b/client/src/components/DataTableCells/ItemsListCell.js
@@ -1,15 +1,23 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 // import ItemsListField from 'components/ItemsListField';
 import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
+
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
+import { useCellAutoFocus } from 'hooks';
+
 export default function ItemsListCell({
   column: { id, filterSellable, filterPurchasable },
   row: { index },
   cell: { value: initialValue },
-  payload: { items, updateData, errors },
+  payload: { items, updateData, errors, autoFocus },
 }) {
+  const fieldRef = useRef();
+
+  // Auto-focus the items list input field.
+  useCellAutoFocus(fieldRef, autoFocus, id, index);
+
   const handleItemSelected = useCallback(
     (item) => {
       updateData(index, id, item.id);
@@ -30,6 +38,11 @@ export default function ItemsListCell({
         selectedItemId={initialValue}
         sellable={filterSellable}
         purchasable={filterPurchasable}
+        inputProps={{
+          inputRef: (ref) => (fieldRef.current = ref),
+        }}
+        openOnKeyDown={true}
+        blurOnSelectClose={false}
       />
     </FormGroup>
   );
diff --git a/client/src/containers/Accounting/MakeJournalEntriesTable.js b/client/src/containers/Accounting/MakeJournalEntriesTable.js
index f522a8f2a..d9ecba07c 100644
--- a/client/src/containers/Accounting/MakeJournalEntriesTable.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesTable.js
@@ -2,11 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Button } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { omit } from 'lodash';
-import classNames from 'classnames';
-
-import { CLASSES } from 'common/classes';
-import DataTable from 'components/DataTable';
-import { compose, transformUpdatedRows, saveInvoke } from 'utils';
+import { compose, saveInvoke } from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -21,9 +17,12 @@ import {
   NoteCellRenderer,
 } from './components';
 import { DataTableEditable } from 'components';
+
 import withAccounts from 'containers/Accounts/withAccounts';
 import withCustomers from 'containers/Customers/withCustomers';
 
+import { updateDataReducer } from './utils';
+
 /**
  * Make journal entries table component.
  */
@@ -126,8 +125,9 @@ function MakeJournalEntriesTable({
   };
 
   // Handles update datatable data.
-  const handleUpdateData = (rowIndex, columnIdOrObj, value) => {
-    const newRows = transformUpdatedRows(rows, rowIndex, columnIdOrObj, value);
+  const handleUpdateData = (rowIndex, columnId, value) => {
+    const newRows = updateDataReducer(rows, rowIndex, columnId, value);
+
     saveInvoke(
       onChange,
       newRows
@@ -185,6 +185,7 @@ function MakeJournalEntriesTable({
             contact_type: 'customer',
           })),
         ],
+        autoFocus: ['account_id', 0],
       }}
       actions={
         <>
diff --git a/client/src/containers/Accounting/MakeJournalFormFloatingActions.js b/client/src/containers/Accounting/MakeJournalFormFloatingActions.js
index 2be8dfa2a..4df73ae9e 100644
--- a/client/src/containers/Accounting/MakeJournalFormFloatingActions.js
+++ b/client/src/containers/Accounting/MakeJournalFormFloatingActions.js
@@ -91,7 +91,6 @@ export default function MakeJournalFloatingAction({
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
-            type="submit"
             onClick={handleSubmitPublishBtnClick}
             text={<T id={'save_publish'} />}
           />
@@ -123,7 +122,6 @@ export default function MakeJournalFloatingAction({
           <Button
             disabled={isSubmitting}
             className={'ml1'}
-            type="submit"
             onClick={handleSubmitDraftBtnClick}
             text={<T id={'save_as_draft'} />}
           />
@@ -156,7 +154,6 @@ export default function MakeJournalFloatingAction({
           <Button
             disabled={isSubmitting}
             intent={Intent.PRIMARY}
-            type="submit"
             onClick={handleSubmitPublishBtnClick}
             text={<T id={'save'} />}
           />
diff --git a/client/src/containers/Accounting/utils.js b/client/src/containers/Accounting/utils.js
index d33496c1b..9024aabf0 100644
--- a/client/src/containers/Accounting/utils.js
+++ b/client/src/containers/Accounting/utils.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
+import { get, sumBy, setWith, toSafeInteger } from 'lodash';
 import { AppToaster } from 'components';
 import { formatMessage } from 'services/intl';
-import { setWith } from 'lodash';
+import { transformUpdatedRows } from 'utils';
 
 const ERROR = {
   JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -15,6 +16,46 @@ const ERROR = {
   ENTRIES_SHOULD_ASSIGN_WITH_CONTACT: 'ENTRIES_SHOULD_ASSIGN_WITH_CONTACT',
 };
 
+
+function adjustmentEntries(entries) {
+  const credit = sumBy(entries, e => toSafeInteger(e.credit));
+  const debit = sumBy(entries, e => toSafeInteger(e.debit));
+
+  return {
+    debit: Math.max(credit - debit, 0),
+    credit: Math.max(debit - credit, 0),
+  }
+}
+
+export const updateDataReducer = (rows, rowIndex, columnId, value) => {
+  let newRows = transformUpdatedRows(rows, rowIndex, columnId, value);
+
+  const oldCredit = get(rows, `[${rowIndex}].credit`);
+  const oldDebit = get(rows, `[${rowIndex}].debit`);
+
+  if (columnId === 'account_id' && !oldCredit && !oldDebit) {
+    const adjustment = adjustmentEntries(rows);
+
+    if (adjustment.credit) {
+      newRows = transformUpdatedRows(
+        newRows,
+        rowIndex,
+        'credit',
+        adjustment.credit,
+      );
+    }
+    if (adjustment.debit) {
+      newRows = transformUpdatedRows(
+        newRows,
+        rowIndex,
+        'debit',
+        adjustment.debit,
+      );
+    }
+  }
+  return newRows;
+};
+
 // Transform API errors in toasts messages.
 export const transformErrors = (resErrors, { setErrors, errors }) => {
   const getError = (errorType) => resErrors.find((e) => e.type === errorType);
diff --git a/client/src/containers/Entries/ItemsEntriesTable.js b/client/src/containers/Entries/ItemsEntriesTable.js
index 385e19b5c..7d1938437 100644
--- a/client/src/containers/Entries/ItemsEntriesTable.js
+++ b/client/src/containers/Entries/ItemsEntriesTable.js
@@ -233,6 +233,7 @@ function ItemsEntriesTable({
         errors: errors || [],
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
+        autoFocus: ['item_id', 0],
       }}
       actions={
         <>
diff --git a/client/src/hooks/index.js b/client/src/hooks/index.js
index 66a6c87bf..a59a58bdd 100644
--- a/client/src/hooks/index.js
+++ b/client/src/hooks/index.js
@@ -1,4 +1,4 @@
-import {useRef, useEffect} from 'react';
+import {useRef, useEffect, useMemo } from 'react';
 import useAsync from './async';
 import useAutofocus from './useAutofocus';
 
@@ -35,7 +35,37 @@ export function useIsValuePassed(value, compatatorValue) {
   return cache.current.indexOf(compatatorValue) !== -1;
 }
 
+const isCurrentFocus = (autoFocus, columnId, rowIndex) => {
+  let _columnId;
+  let _rowIndex;
+
+  if (Array.isArray(autoFocus)) {
+    _columnId = autoFocus[0];
+    _rowIndex = autoFocus[1] || 0;
+  }
+  _rowIndex = parseInt(_rowIndex, 10);
+
+  return columnId === _columnId && _rowIndex === rowIndex;
+};
+
+export function useCellAutoFocus(ref, autoFocus, columnId, rowIndex) {
+  const focus = useMemo(() => isCurrentFocus(autoFocus, columnId, rowIndex), [
+    autoFocus,
+    columnId,
+    rowIndex,
+  ]);
+  useEffect(() => {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [ref, focus]);
+
+  return ref;
+}
+
+
 export {
   useAsync,
   useAutofocus,
-}
\ No newline at end of file
+}
+
diff --git a/client/src/hooks/useAutofocus.js b/client/src/hooks/useAutofocus.js
index 0546956f2..42fc3615c 100644
--- a/client/src/hooks/useAutofocus.js
+++ b/client/src/hooks/useAutofocus.js
@@ -1,13 +1,13 @@
 import { useRef, useEffect } from 'react';
 
-export default function useAutofocus() {
+export default function useAutofocus(focus = true) {
   const ref = useRef();
 
   useEffect(() => {
-    if (ref.current) {
+    if (ref.current && focus) {
       ref.current.focus();
     }
-  }, [ref]);
+  }, [ref, focus]);
 
   return ref;
 }

From 3f2287299275d1bfa9949085a022bcfad9e2110a Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 27 Jan 2021 16:42:23 +0200
Subject: [PATCH 4/5] feat: tweaks in style.

---
 client/src/components/AccountsSuggestField.js | 13 ++-
 .../src/components/Datatable/TableHeader.js   | 97 ++++++++++---------
 .../style/components/DataTable/DataTable.scss | 21 ++--
 .../src/style/pages/Dashboard/Dashboard.scss  | 15 ++-
 .../FinancialStatements/ARAgingSummary.scss   |  2 +-
 .../FinancialStatements/BalanceSheet.scss     |  2 +-
 .../FinancialStatements/GeneralLedger.scss    |  2 +-
 .../pages/FinancialStatements/Journal.scss    |  2 +-
 .../TrialBalanceSheet.scss                    |  2 +-
 .../src/style/pages/Preferences/Sidebar.scss  |  2 +-
 client/src/style/variables.scss               |  2 +-
 11 files changed, 84 insertions(+), 76 deletions(-)

diff --git a/client/src/components/AccountsSuggestField.js b/client/src/components/AccountsSuggestField.js
index f43cdb2f4..a47cb0703 100644
--- a/client/src/components/AccountsSuggestField.js
+++ b/client/src/components/AccountsSuggestField.js
@@ -15,7 +15,7 @@ export default function AccountsSuggestField({
   defaultSelectText = 'Select account',
   onAccountSelected,
 
-  filterByRootTypes = [],
+  filterByParentTypes = [],
   filterByTypes = [],
   filterByNormal,
   popoverFill = false,
@@ -26,24 +26,23 @@ export default function AccountsSuggestField({
   const filteredAccounts = useMemo(() => {
     let filteredAccounts = [...accounts];
 
-    if (!isEmpty(filterByRootTypes)) {
+    if (!isEmpty(filterByParentTypes)) {
       filteredAccounts = filteredAccounts.filter(
-        (account) => filterByRootTypes.indexOf(account.type.root_type) !== -1,
+        (account) => filterByParentTypes.indexOf(account.account_parent_type) !== -1,
       );
     }
     if (!isEmpty(filterByTypes)) {
       filteredAccounts = filteredAccounts.filter(
-        (account) => filterByTypes.indexOf(account.type.key) !== -1,
+        (account) => filterByTypes.indexOf(account.account_type) !== -1,
       );
     }
     if (!isEmpty(filterByNormal)) {
       filteredAccounts = filteredAccounts.filter(
-        (account) =>
-          filterByTypes.indexOf(account.type.normal) === filterByNormal,
+        (account) => filterByTypes.indexOf(account.account_normal) === filterByNormal,
       );
     }
     return filteredAccounts;
-  }, [accounts, filterByRootTypes, filterByTypes, filterByNormal]);
+  }, [accounts, filterByParentTypes, filterByTypes, filterByNormal]);
 
   // Find initial account object to set it as default account in initial render.
   const initialAccount = useMemo(
diff --git a/client/src/components/Datatable/TableHeader.js b/client/src/components/Datatable/TableHeader.js
index a4d5f1100..91995b3c5 100644
--- a/client/src/components/Datatable/TableHeader.js
+++ b/client/src/components/Datatable/TableHeader.js
@@ -4,59 +4,66 @@ import { ScrollSyncPane } from 'react-scroll-sync';
 import { If } from 'components';
 import TableContext from './TableContext';
 
-function TableHeaderGroup({ headerGroup }) {
+function TableHeaderCell({ column, index }) {
   const {
     table: { getToggleAllRowsExpandedProps, isAllRowsExpanded },
     props: { expandable, expandToggleColumn },
   } = useContext(TableContext);
 
+  return (
+    <div
+      {...column.getHeaderProps({
+        className: classNames(column.className || '', 'th'),
+      })}
+    >
+      <If condition={expandable && index + 1 === expandToggleColumn}>
+        <span {...getToggleAllRowsExpandedProps()} className="expand-toggle">
+          <span
+            className={classNames({
+              'arrow-down': isAllRowsExpanded,
+              'arrow-right': !isAllRowsExpanded,
+            })}
+          />
+        </span>
+      </If>
+
+      <div {...column.getSortByToggleProps({
+        className: classNames('cell-inner', {
+          'text-overview': column.textOverview,
+        })
+      })}>
+        {column.render('Header')}
+
+        <If condition={column.isSorted}>
+          <span
+            className={classNames(
+              {
+                'sort-icon--desc': column.isSortedDesc,
+                'sort-icon--asc': !column.isSortedDesc,
+              },
+              'sort-icon',
+            )}
+          ></span>
+        </If>
+      </div>
+
+      {column.canResize && (
+        <div
+          {...column.getResizerProps()}
+          className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
+        >
+          <div class="inner-resizer" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TableHeaderGroup({ headerGroup }) {
   return (
     <div {...headerGroup.getHeaderGroupProps()} className="tr">
       {headerGroup.headers.map((column, index) => (
-        <div
-          {...column.getHeaderProps({
-            className: classNames(column.className || '', 'th'),
-          })}
-        >
-          <If condition={expandable && index + 1 === expandToggleColumn}>
-            <span
-              {...getToggleAllRowsExpandedProps()}
-              className="expand-toggle"
-            >
-              <span
-                className={classNames({
-                  'arrow-down': isAllRowsExpanded,
-                  'arrow-right': !isAllRowsExpanded,
-                })}
-              />
-            </span>
-          </If>
-
-          <div {...column.getSortByToggleProps()}>
-            {column.render('Header')}
-
-            <If condition={column.isSorted}>
-              <span
-                className={classNames(
-                  {
-                    'sort-icon--desc': column.isSortedDesc,
-                    'sort-icon--asc': !column.isSortedDesc,
-                  },
-                  'sort-icon',
-                )}
-              ></span>
-            </If>
-          </div>
-
-          {column.canResize && (
-            <div
-              {...column.getResizerProps()}
-              className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
-            >
-              <div class="inner-resizer" />
-            </div>
-          )}
-        </div>
+        <TableHeaderCell column={column} index={index} />
       ))}
     </div>
   );
diff --git a/client/src/style/components/DataTable/DataTable.scss b/client/src/style/components/DataTable/DataTable.scss
index 401c17725..40e654b8c 100644
--- a/client/src/style/components/DataTable/DataTable.scss
+++ b/client/src/style/components/DataTable/DataTable.scss
@@ -22,9 +22,9 @@
 
       .th {
         padding: 0.6rem 0.5rem;
-        background: #fafafa;
+        background: #f5f5f5;
         font-size: 14px;
-        color: #58667b;
+        color: #505e71;
         font-weight: 500;
         border-bottom: 1px solid rgb(224, 224, 224);
 
@@ -76,6 +76,10 @@
       margin: 0;
       padding: 0.5rem;
 
+      .cell-inner{
+        flex: 1 0 0;
+      }
+
       &:last-child {
         border-right: 0;
       }
@@ -102,7 +106,7 @@
         .inner-resizer {
           height: 100%;
           width: 1px;
-          border-left: 1px solid #ececec;
+          border-left: 1px solid #E6E6E6;
           margin: 0 auto;
         }
 
@@ -140,21 +144,17 @@
       }
 
       .tr .td {
-        border-bottom: 1px solid #e8e8e8;
+        border-bottom: 1px solid #e0e0e0;
         align-items: center;
         color: #101219;
 
         .placeholder {
           color: #a0a0a0;
         }
-        .cell-inner{
-          flex: 1 0 0;
-        }
         .text-overview{
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
-
         }
 
         .bp3-form-group {
@@ -171,7 +171,6 @@
       .tr:hover .td {
         background: #f3f7fc;
       }
-
       .tr.is-context-menu-active .td {
         background: #f3fafc;
       }
@@ -186,11 +185,9 @@
         &:focus {
           background-color: #cfdcee;
         }
-
         svg {
           color: #425361;
         }
-
         .bp3-icon-more-h-16 {
           margin-top: 2px;
         }
@@ -267,12 +264,10 @@
 
     .thead {
       top: 0;
-      // box-shadow: 0px 3px 3px #ccc;
     }
 
     .tfoot {
       bottom: 0;
-      // box-shadow: 0px -3px 3px #ccc;
     }
     .tbody {
       position: relative;
diff --git a/client/src/style/pages/Dashboard/Dashboard.scss b/client/src/style/pages/Dashboard/Dashboard.scss
index f002dcf5b..0e4ce732e 100644
--- a/client/src/style/pages/Dashboard/Dashboard.scss
+++ b/client/src/style/pages/Dashboard/Dashboard.scss
@@ -1,4 +1,5 @@
 @import '../../Base.scss';
+$dashboard-views-bar-height: 45px;
 
 .dashboard {
   display: flex;
@@ -412,10 +413,11 @@
 }
 
 .tabs--dashboard-views {
+
   .#{$ns}-tab {
-    color: #5b606d;
+    color: #474d5e;
     font-size: 14px;
-    line-height: 50px;
+    line-height: $dashboard-views-bar-height;
     font-weight: 400;
     padding: 0;
     margin-right: 0;
@@ -430,12 +432,12 @@
 
   .#{$ns}-tab-indicator-wrapper {
     .#{$ns}-tab-indicator {
-      height: 4px;
+      height: 3px;
     }
   }
   .button--new-view {
     margin: 0;
-    height: 50px;
+    height: $dashboard-views-bar-height;
 
     &,
     &:hover,
@@ -455,6 +457,11 @@
 .navbar--dashboard-views {
   box-shadow: 0 0 0;
   border-bottom: 1px solid #d2dce2;
+  height: $dashboard-views-bar-height;
+
+  .bp3-navbar-group{
+    height: $dashboard-views-bar-height;
+  }
 }
 
 .navbar-omnibar {
diff --git a/client/src/style/pages/FinancialStatements/ARAgingSummary.scss b/client/src/style/pages/FinancialStatements/ARAgingSummary.scss
index afdc364cc..42d6dc4ba 100644
--- a/client/src/style/pages/FinancialStatements/ARAgingSummary.scss
+++ b/client/src/style/pages/FinancialStatements/ARAgingSummary.scss
@@ -9,7 +9,7 @@
         .thead{
           .tr .td.customer_name ~ .td,
           .tr .th.customer_name ~ .th{
-            justify-content: flex-end;
+            text-align: right;
           }
         }
         .tbody{
diff --git a/client/src/style/pages/FinancialStatements/BalanceSheet.scss b/client/src/style/pages/FinancialStatements/BalanceSheet.scss
index e145fd445..10a7a3462 100644
--- a/client/src/style/pages/FinancialStatements/BalanceSheet.scss
+++ b/client/src/style/pages/FinancialStatements/BalanceSheet.scss
@@ -8,7 +8,7 @@
       .tbody{
         .tr .td.account_name ~ .td,
         .tr .th.account_name ~ .th{
-          justify-content: flex-end;
+          text-align: right;
         }
       }
       .tbody{
diff --git a/client/src/style/pages/FinancialStatements/GeneralLedger.scss b/client/src/style/pages/FinancialStatements/GeneralLedger.scss
index 96dd9a8a9..1966a177e 100644
--- a/client/src/style/pages/FinancialStatements/GeneralLedger.scss
+++ b/client/src/style/pages/FinancialStatements/GeneralLedger.scss
@@ -10,7 +10,7 @@
           &.debit,
           &.running_balance,
           &.amount{
-            justify-content: flex-end;
+            text-align: right;
           }
         }
       }
diff --git a/client/src/style/pages/FinancialStatements/Journal.scss b/client/src/style/pages/FinancialStatements/Journal.scss
index cd7792e9b..f841d3a6c 100644
--- a/client/src/style/pages/FinancialStatements/Journal.scss
+++ b/client/src/style/pages/FinancialStatements/Journal.scss
@@ -7,7 +7,7 @@
       .tr .th.credit,
       .tr .td.debit,
       .tr .th.debit{
-        justify-content: flex-end;
+        text-align: right;
       }
       .tbody{
         .tr:not(.no-results) .td{
diff --git a/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss b/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss
index 4dce5a389..acf0a843c 100644
--- a/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss
+++ b/client/src/style/pages/FinancialStatements/TrialBalanceSheet.scss
@@ -9,7 +9,7 @@
       .tbody{
         .tr .td:not(:first-child),
         .tr .th:not(:first-child) {
-          justify-content: flex-end;
+          text-align: right;
         }
       }
       .tbody{
diff --git a/client/src/style/pages/Preferences/Sidebar.scss b/client/src/style/pages/Preferences/Sidebar.scss
index 8c4b666fc..2c49edbae 100644
--- a/client/src/style/pages/Preferences/Sidebar.scss
+++ b/client/src/style/pages/Preferences/Sidebar.scss
@@ -55,7 +55,7 @@
     background: transparent;
 
     .#{$ns}-menu-item {
-      padding: 10px 18px;
+      padding: 8px 18px;
       font-size: 15px;
       font-weight: 400;
       color: #333;
diff --git a/client/src/style/variables.scss b/client/src/style/variables.scss
index 7eba241bf..ec2d51453 100644
--- a/client/src/style/variables.scss
+++ b/client/src/style/variables.scss
@@ -32,7 +32,7 @@ $button-background-color-hover: #CFDCEE !default;
 $sidebar-background: #01194e;
 $sidebar-text-color: #fff;
 $sidebar-width: 100%;
-$sidebar-menu-item-color: rgba(255, 255, 255, 0.9);
+$sidebar-menu-item-color: rgb(255, 255, 255);
 $sidebar-menu-item-color-active: rgb(255, 255, 255);
 $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 $sidebar-menu-label-color: rgba(255, 255, 255, 0.45);

From 62ea979014b27b511630c466fb439cac05e6df21 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Wed, 27 Jan 2021 18:37:57 +0200
Subject: [PATCH 5/5] feat: auto-focus expense account in expense form.

---
 client/src/containers/Expenses/ExpenseFormEntries.js | 1 +
 client/src/style/components/DataTable/DataTable.scss | 2 +-
 client/src/style/pages/SaleInvoice/List.scss         | 7 ++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/containers/Expenses/ExpenseFormEntries.js b/client/src/containers/Expenses/ExpenseFormEntries.js
index f6bc35fc2..502f825b3 100644
--- a/client/src/containers/Expenses/ExpenseFormEntries.js
+++ b/client/src/containers/Expenses/ExpenseFormEntries.js
@@ -234,6 +234,7 @@ function ExpenseTable({
         errors: error,
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
+        autoFocus: ['expense_account_id', 0],
       }}
       actions={
         <>
diff --git a/client/src/style/components/DataTable/DataTable.scss b/client/src/style/components/DataTable/DataTable.scss
index 40e654b8c..d5796d9ca 100644
--- a/client/src/style/components/DataTable/DataTable.scss
+++ b/client/src/style/components/DataTable/DataTable.scss
@@ -21,7 +21,7 @@
       overflow-x: hidden;
 
       .th {
-        padding: 0.6rem 0.5rem;
+        padding: 0.7rem 0.5rem;
         background: #f5f5f5;
         font-size: 14px;
         color: #505e71;
diff --git a/client/src/style/pages/SaleInvoice/List.scss b/client/src/style/pages/SaleInvoice/List.scss
index 4ff5deca0..75cc9216b 100644
--- a/client/src/style/pages/SaleInvoice/List.scss
+++ b/client/src/style/pages/SaleInvoice/List.scss
@@ -48,7 +48,12 @@
           font-size: 13.5px;
         }
         .bp3-progress-bar{
-          height: 6px;
+          height: 4px;
+          
+          &,
+          .bp3-progress-meter{
+            border-radius: 4px;
+          }
         }
       }
     }