From 6dcff7e4c25ad22f7fd3c1b4b8175b1edd79ab36 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sat, 11 Apr 2020 14:40:56 +0200
Subject: [PATCH 1/5] feat: Preferences issue.

---
 client/src/components/Dashboard/Dashboard.js  |  2 +-
 .../Preferences/PreferencesContent.js         |  2 +-
 .../Preferences/PreferencesContentRoute.js    |  4 +--
 .../Preferences/PreferencesSidebar.js         | 14 +++++----
 client/src/components/Views/ViewForm.js       | 31 +++++++++++--------
 .../Dashboard/Preferences/General.js          | 28 +++--------------
 client/src/style/pages/preferences.scss       | 13 ++++++--
 7 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js
index d24660695..e710485a6 100644
--- a/client/src/components/Dashboard/Dashboard.js
+++ b/client/src/components/Dashboard/Dashboard.js
@@ -8,7 +8,7 @@ import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
 export default function() {
   return (
-    <div className="dashboard dashboard--preferences">
+    <div className="dashboard">
       <Switch>
         <Route path="/dashboard/preferences">
           <Sidebar />
diff --git a/client/src/components/Preferences/PreferencesContent.js b/client/src/components/Preferences/PreferencesContent.js
index 9bcfcfa9e..4e2cd404e 100644
--- a/client/src/components/Preferences/PreferencesContent.js
+++ b/client/src/components/Preferences/PreferencesContent.js
@@ -4,7 +4,7 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 
 export default function() {
   return (
-    <div className="dashboard-content" id="dashboard">
+    <div className="dashboard-content dashboard-content--preferences">
       <PreferencesTopbar pageTitle={"asdad"}/>
       
       <div class="dashboard__preferences-content">
diff --git a/client/src/components/Preferences/PreferencesContentRoute.js b/client/src/components/Preferences/PreferencesContentRoute.js
index d619171dd..3ed99820a 100644
--- a/client/src/components/Preferences/PreferencesContentRoute.js
+++ b/client/src/components/Preferences/PreferencesContentRoute.js
@@ -3,15 +3,13 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import preferencesRoutes from 'routes/preferences'
 
 export default function DashboardContentRoute() {
-  const { path } = useRouteMatch();
-
   return (
     <Route pathname="/dashboard/preferences">
       <Switch>
         { preferencesRoutes.map((route, index) => (
           <Route
             key={index}
-            path={`${path}/${route.path}`}
+            path={`${route.path}`}
             exact={route.exact}
             component={route.component}
           />          
diff --git a/client/src/components/Preferences/PreferencesSidebar.js b/client/src/components/Preferences/PreferencesSidebar.js
index 763ad31a0..c1987de94 100644
--- a/client/src/components/Preferences/PreferencesSidebar.js
+++ b/client/src/components/Preferences/PreferencesSidebar.js
@@ -18,13 +18,15 @@ export default function PreferencesSidebar() {
 
   return (
     <div class="preferences__sidebar">
-      <div class="preferences__sidebar-head">
-        <h2>Preferences</h2>
-      </div>
+      <div class="preferences__sidebar-wrapper">
+        <div class="preferences__sidebar-head">
+          <h2>Preferences</h2>
+        </div>
 
-      <Menu className="preferences__sidebar-menu">
-        { items }
-      </Menu>
+        <Menu className="preferences__sidebar-menu">
+          { items }
+        </Menu>
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/client/src/components/Views/ViewForm.js b/client/src/components/Views/ViewForm.js
index 20d8c5283..0caca61e4 100644
--- a/client/src/components/Views/ViewForm.js
+++ b/client/src/components/Views/ViewForm.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useCallback, useMemo} from 'react';
 import {Formik, useFormik, ErrorMessage} from "formik";
 import {useIntl} from 'react-intl';
 import {
@@ -34,12 +34,13 @@ function ViewForm({
   const [draggedColumns, setDraggedColumn] = useState([]);
   const [availableColumns, setAvailableColumns] = useState(columns); 
 
-  const defaultViewRole = {
+  const defaultViewRole = useMemo(() => ({
     field_key: '',
     comparator: 'AND',
     value: '',
     index: 1,
-  };
+  }), []);
+
   const validationSchema = Yup.object().shape({
     resource_name: Yup.string().required(),
     name: Yup.string().required(),
@@ -86,7 +87,6 @@ function ViewForm({
       ],
     },
     onSubmit: (values) => {
-
       if (viewForm && viewForm.id) {
         editView(viewForm.id, values).then((response) => {
 
@@ -100,10 +100,11 @@ function ViewForm({
   });
 
   useEffect(() => {
-    formik.setFieldValue('columns', draggedColumns.map((column, index) => ({
+    formik.setFieldValue('columns',
+      draggedColumns.map((column, index) => ({
       index, key: column.key,
     })));
-  }, [draggedColumns]);
+  }, [draggedColumns, formik]);
 
   const conditionalsItems = [
     { value: 'and', label: 'AND' },
@@ -123,16 +124,16 @@ function ViewForm({
   ];
 
   // Resource fields.
-  const resourceFields = [
+  const resourceFields = useMemo(() => ([
     {value: '', label: 'Select a field'},
     ...fields.map((field) => ({ value: field.key, label: field.labelName, })),
-  ];
+  ]), []);
   // Account item of select accounts field.
   const selectItem = (item, { handleClick, modifiers, query }) => {
     return (<MenuItem text={item.label} key={item.key} onClick={handleClick} />)
   };
   // Handle click new condition button.
-  const onClickNewRole = () => {
+  const onClickNewRole = useCallback(() => {
     formik.setFieldValue('roles', [
       ...formik.values.roles,
       {
@@ -140,9 +141,10 @@ function ViewForm({
         index: formik.values.roles.length + 1,
       }
     ]);
-  };
+  }, [formik, defaultViewRole]);
+
   // Handle click remove view role button.
-  const onClickRemoveRole = (viewRole, index) => () => {
+  const onClickRemoveRole = useCallback((viewRole, index) => () => {
     const viewRoles = [...formik.values.roles];
     viewRoles.splice(index, 1);
     viewRoles.map((role, i) => {
@@ -150,9 +152,12 @@ function ViewForm({
       return role;
     });
     formik.setFieldValue('roles', viewRoles);
-  };
+  }, [formik]);
+
+  const onClickDeleteView = useCallback(() => {
+    onDelete && onDelete(viewForm);
+  }, [onDelete, viewForm]);
 
-  const onClickDeleteView = () => { onDelete(viewForm); };
   return (
     <div class="view-form">
       <form onSubmit={formik.handleSubmit}>
diff --git a/client/src/containers/Dashboard/Preferences/General.js b/client/src/containers/Dashboard/Preferences/General.js
index 2a2ce3cce..a7c3d9c75 100644
--- a/client/src/containers/Dashboard/Preferences/General.js
+++ b/client/src/containers/Dashboard/Preferences/General.js
@@ -1,30 +1,22 @@
 import React from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import {connect} from 'react-redux';
 import {
   Button,
   FormGroup,
   InputGroup,
   Intent,
 } from "@blueprintjs/core";
-import { useAsync } from 'react-use';
 import {optionsMapToArray} from 'utils';
-import AppToaster from 'components/AppToaster';
-import {
-  savePreferences,
-  fetchPreferences,
-} from 'store/preferences/preferences.actions';
 
-function GeneralPreferences({ savePreferences, fetchPreferences }) {
+function GeneralPreferences({
+
+}) {
   const validationSchema = Yup.object().shape({
     organization_name: Yup.string().required(),
     organization_industry: Yup.string().required(),
   });
 
-  const asyncHook = useAsync(async () => {
-    await fetchPreferences();
-  });
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -35,13 +27,6 @@ function GeneralPreferences({ savePreferences, fetchPreferences }) {
         return {...option, group: 'general'};
       });
 
-      savePreferences(options).then((response) => {
-        AppToaster.show({
-          message: 'preferences_have_been_updated',
-        });
-      }).catch(error => {
-
-      });
     },
   });
 
@@ -80,9 +65,4 @@ function GeneralPreferences({ savePreferences, fetchPreferences }) {
   )
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  savePreferences: (options) => dispatch(savePreferences({ options })),
-  fetchPreferences: (keys) => dispatch(fetchPreferences())
-});
-
-export default connect(null, mapDispatchToProps)(GeneralPreferences);
\ No newline at end of file
+export default GeneralPreferences;
\ No newline at end of file
diff --git a/client/src/style/pages/preferences.scss b/client/src/style/pages/preferences.scss
index 655884307..813ccf730 100644
--- a/client/src/style/pages/preferences.scss
+++ b/client/src/style/pages/preferences.scss
@@ -1,5 +1,8 @@
 
 
+.dashboard-content--preferences{
+  margin-left: 430px;
+}
 
 .preferences{
   &__inside-content--tabable{
@@ -8,7 +11,6 @@
   }
 
   &__inside-content{
-
     .#{$ns}-tab-list{
       border-bottom: 1px solid #E5E5E5;
       padding-left: 15px;
@@ -22,9 +24,16 @@
 
 .preferences__sidebar{
   background: #fdfdfd;
+  position: fixed;
+  left: 220px;
   min-width: 210px;
   max-width: 210px;
-  
+  height: 100%;
+
+  .sidebar-wrapper{
+
+  }
+
   &-head{
     display: flex;
     flex-direction: row;

From 37fb5a6f11bca1b7cd480aa47532ff679dde42b1 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sun, 12 Apr 2020 12:03:45 +0200
Subject: [PATCH 2/5] feat: dashboard style.

---
 .../components/Accounts/AccountsViewsTabs.js  |   1 +
 client/src/components/AccountsSelectList.js   |   5 +-
 .../components/Dashboard/DashboardTopbar.js   |   2 +-
 client/src/components/DataTable.js            |  24 +--
 client/src/components/ErrorMessage.js         |  21 ++
 client/src/config/app.js                      |   2 +-
 client/src/config/sidebarMenu.js              |  10 +-
 .../connectors/AccountFormDialog.connector.js |  22 +--
 client/src/connectors/Accounts.connector.js   |  21 +-
 .../Accounting/MakeJournalEntriesPage.js      |   4 +-
 .../Dashboard/Accounts/AccountsChart.js       |   8 +-
 .../Dashboard/Dialogs/AccountFormDialog.js    | 186 +++++++++++-------
 .../Dashboard/Dialogs/ItemCategoryDialog.js   | 102 ++++++----
 .../GeneralLedger/GeneralLedger.js            |   4 +-
 .../src/store/accounts/accounts.selectors.js  |   2 +-
 client/src/store/selectors.js                 |   4 +
 client/src/style/App.scss                     |   3 +
 client/src/style/components/data-table.scss   |  30 ++-
 client/src/style/functions.scss               |  41 ++++
 client/src/style/objects/buttons.scss         |  15 +-
 client/src/style/objects/form.scss            | 105 +++++++++-
 client/src/style/pages/accounts-chart.scss    |  54 +++++
 client/src/style/pages/item-category.scss     |  30 +++
 client/src/style/views/Sidebar.scss           |  22 ++-
 24 files changed, 517 insertions(+), 201 deletions(-)
 create mode 100644 client/src/components/ErrorMessage.js
 create mode 100644 client/src/style/functions.scss
 create mode 100644 client/src/style/pages/item-category.scss

diff --git a/client/src/components/Accounts/AccountsViewsTabs.js b/client/src/components/Accounts/AccountsViewsTabs.js
index fde698a69..93dee0a20 100644
--- a/client/src/components/Accounts/AccountsViewsTabs.js
+++ b/client/src/components/Accounts/AccountsViewsTabs.js
@@ -80,6 +80,7 @@ function AccountsViewsTabs({
             className='button--new-view'
             icon={<Icon icon='plus' />}
             onClick={handleClickNewView}
+            minimal={true}
           />
         </Tabs>
       </NavbarGroup>
diff --git a/client/src/components/AccountsSelectList.js b/client/src/components/AccountsSelectList.js
index f826d33c7..32c58bd9d 100644
--- a/client/src/components/AccountsSelectList.js
+++ b/client/src/components/AccountsSelectList.js
@@ -5,11 +5,12 @@ import {
 } from '@blueprintjs/core';
 import {Select} from '@blueprintjs/select';
 
-export default function AccountsMultiSelect({
+export default function AccountsSelectList({
   accounts,
   onAccountSelected,
   error,
   initialAccount,
+  defautlSelectText = 'Select account'
 }) {
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null
@@ -36,7 +37,7 @@ export default function AccountsMultiSelect({
       onItemSelect={onAccountSelect}>
       <Button
         rightIcon='caret-down'
-        text={selectedAccount ? selectedAccount.name : 'Select account'}
+        text={selectedAccount ? selectedAccount.name : defautlSelectText}
       />
     </Select>
   );
diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js
index f889b0a35..635832530 100644
--- a/client/src/components/Dashboard/DashboardTopbar.js
+++ b/client/src/components/Dashboard/DashboardTopbar.js
@@ -37,7 +37,7 @@ function DashboardTopbar({
     <div class="dashboard__topbar">
       <div class="dashboard__topbar-left">
         <div class="dashboard__topbar-sidebar-toggle">
-          <Button>
+          <Button minimal={true}>
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
               <title>Menu</title>
               <path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>
diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js
index 71bffc8a4..d9bf7810c 100644
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -16,14 +16,7 @@ import Icon from 'components/Icon';
 
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
-    const defaultRef = React.useRef()
-    const resolvedRef = ref || defaultRef
-
-    useEffect(() => {
-      resolvedRef.current.indeterminate = indeterminate
-    }, [resolvedRef, indeterminate])
-
-    return (<Checkbox ref={resolvedRef} {...rest} />);
+    return (<Checkbox indeterminate={indeterminate} {...rest} />);
   }
 );
 
@@ -174,13 +167,14 @@ export default function DataTable({
                 })}>
                   <div {...column.getSortByToggleProps()}>
                     {column.render('Header')}
-                    <span>
-                      {column.isSorted
-                        ? column.isSortedDesc
-                          ? (<Icon icon="sort-down" />)
-                          : (<Icon icon="sort-up" />)
-                        : ''}
-                    </span>
+
+                    {column.isSorted && (
+                      <span className={classnames({
+                        'sort-icon--desc': column.isSortedDesc,
+                        'sort-icon--asc': !column.isSortedDesc,
+                      }, 'sort-icon')}>
+                      </span>
+                    )}
                   </div>
 
                   {column.canResize && (
diff --git a/client/src/components/ErrorMessage.js b/client/src/components/ErrorMessage.js
new file mode 100644
index 000000000..785481fad
--- /dev/null
+++ b/client/src/components/ErrorMessage.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {get} from 'lodash';
+
+const hasErrorMessage = ({
+  
+}) => {
+
+}
+
+export default function ErrorMessage({
+  touched, 
+  errors,
+  name,
+  children,
+}) {
+  const error = get(errors, name);
+  const touch = get(touched, name);
+  
+  return (error && touch) ? error : null;
+}
+
diff --git a/client/src/config/app.js b/client/src/config/app.js
index c9bea3b02..93784a738 100644
--- a/client/src/config/app.js
+++ b/client/src/config/app.js
@@ -1,4 +1,4 @@
 export default {
-  "app_name": "Ratteb",
+  "app_name": "BigCapital",
   "app_version": "0.0.1 (build 12344)",
 }
\ No newline at end of file
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js
index 0ccdddd1e..e47ddb21d 100644
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -17,10 +17,6 @@ export default [
     iconSize: 20,
     text: 'Items',
     children: [
-      {
-        text: 'Category List',
-        href: '/dashboard/items/ItemCategoriesList'
-      },
       {
         text: 'Items List',
         href: '/dashboard/items/list'
@@ -28,7 +24,11 @@ export default [
       {
         text: 'New Item',
         href: '/dashboard/items/new'
-      }
+      },
+      {
+        text: 'Category List',
+        href: '/dashboard/items/ItemCategoriesList'
+      },
     ]
   },
   {
diff --git a/client/src/connectors/AccountFormDialog.connector.js b/client/src/connectors/AccountFormDialog.connector.js
index 1aea497a0..b3f1e0a7d 100644
--- a/client/src/connectors/AccountFormDialog.connector.js
+++ b/client/src/connectors/AccountFormDialog.connector.js
@@ -1,31 +1,13 @@
 import {connect} from 'react-redux';
-import {
-  fetchAccountTypes,
-  fetchAccountsList,
-  submitAccount,
-  fetchAccount,
-  editAccount,
-} from 'store/accounts/accounts.actions';
 import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
-import t from 'store/types';
 
 export const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'account-form');
 
   return {
-    accountsTypes: state.accounts.accountsTypes,
-    accounts: state.accounts.accounts,
     name: 'account-form',
-    payload: {action: 'new', id: null},
-    editAccount: dialogPayload && dialogPayload.action === 'edit' 
-      ? state.accounts.accountsById[dialogPayload.id] : {},
+    payload: {action: 'new', id: null, ...dialogPayload},
   };
 };
 
-export const mapDispatchToProps = (dispatch) => ({
-  submitAccount: ({ form }) => dispatch(submitAccount({ form })),
-  fetchAccounts: () => dispatch(fetchAccountsList()),
-  fetchAccountTypes: () => dispatch(fetchAccountTypes()),
-  fetchAccount: (id) => dispatch(fetchAccount({ id })),
-});
-export default connect(mapStateToProps, mapDispatchToProps);
\ No newline at end of file
+export default connect(mapStateToProps);
\ No newline at end of file
diff --git a/client/src/connectors/Accounts.connector.js b/client/src/connectors/Accounts.connector.js
index 48f3682ce..e76aad80c 100644
--- a/client/src/connectors/Accounts.connector.js
+++ b/client/src/connectors/Accounts.connector.js
@@ -6,6 +6,8 @@ import {
   deleteAccount,
   inactiveAccount,
   fetchAccountsTable,
+  submitAccount,
+  fetchAccount,
 } from 'store/accounts/accounts.actions';
 import {
   getAccountsItems,
@@ -13,33 +15,40 @@ import {
 import {
   getResourceViews,
 } from 'store/customViews/customViews.selectors';
+import {
+  getItemById
+} from 'store/selectors';
 
 const mapStateToProps = (state, props) => ({
   views: getResourceViews(state, 'accounts'),
   accounts: getAccountsItems(state, state.accounts.currentViewId),
+  accountsTypes: state.accounts.accountsTypes,
+
   tableQuery: state.accounts.tableQuery,
   accountsLoading: state.accounts.loading,
+
+  getAccountById: (id) => getItemById(state.accounts.items, id),
 });
 
 const mapActionsToProps = (dispatch) => ({
-  fetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
-  fetchAccountTypes: () => dispatch(fetchAccountTypes()),
+  requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
+  requestFetchAccountTypes: () => dispatch(fetchAccountTypes()),
+  requestSubmitAccount: ({ form }) => dispatch(submitAccount({ form })),
   requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
   requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
+  requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
+  requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
+
   changeCurrentView: (id) => dispatch({
     type: t.ACCOUNTS_SET_CURRENT_VIEW,
     currentViewId: parseInt(id, 10),
   }),
-
   setAccountsTableQuery: (key, value) => dispatch({
     type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
   }),
   addAccountsTableQueries: (queries) => dispatch({
     type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
   }),
-
-  fetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
-
   setSelectedRowsAccounts: (ids) => dispatch({
     type: t.ACCOUNTS_SELECTED_ROWS_SET, ids,
   }),
diff --git a/client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js b/client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js
index ebd59ddbd..a32a3f4b9 100644
--- a/client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js
+++ b/client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js
@@ -11,14 +11,14 @@ import AccountsConnect from 'connectors/Accounts.connector';
 function MakeJournalEntriesPage({
   fetchManualJournal,
   getManualJournal,
-  fetchAccounts,
+  requestFetchAccounts,
 }) {
   const history = useHistory();
   const { id } = useParams();
 
   const fetchJournal = useAsync(() => {
     return Promise.all([
-      fetchAccounts(),
+      requestFetchAccounts(),
       (id) && fetchManualJournal(id),
     ]);
   });
diff --git a/client/src/containers/Dashboard/Accounts/AccountsChart.js b/client/src/containers/Dashboard/Accounts/AccountsChart.js
index 6e3a1056c..c68ed277f 100644
--- a/client/src/containers/Dashboard/Accounts/AccountsChart.js
+++ b/client/src/containers/Dashboard/Accounts/AccountsChart.js
@@ -21,13 +21,13 @@ import { compose } from 'utils';
 
 function AccountsChart({
   changePageTitle,
-  fetchAccounts,
+  requestFetchAccounts,
   requestDeleteAccount,
   requestInactiveAccount,
   fetchResourceViews,
   fetchResourceFields,
   getResourceFields,
-  fetchAccountsTable,
+  requestFetchAccountsTable,
 }) {
   const [state, setState] = useState({
     deleteAlertActive: false,
@@ -48,7 +48,7 @@ function AccountsChart({
   // Fetch accounts list according to the given custom view id.
   const fetchAccountsHook = useAsync(async () => {
     await Promise.all([
-      fetchAccountsTable(),
+      requestFetchAccountsTable(),
     ]);
   }, false);
 
@@ -85,7 +85,7 @@ function AccountsChart({
   const handleConfirmAccountActive = useCallback(() => {
     requestInactiveAccount(inactiveAccount.id).then(() => {
       setInactiveAccount(false);
-      fetchAccountsTable();
+      requestFetchAccountsTable();
       AppToaster.show({ message: 'the_account_has_been_inactivated' });
     });
   }, [inactiveAccount]);
diff --git a/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js b/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
index d23e52b67..85d13130a 100644
--- a/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
   Button,
   Classes,
@@ -22,6 +22,9 @@ import DialogConnect from 'connectors/Dialog.connector';
 import DialogReduxConnect from 'components/DialogReduxConnect';
 import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
 import AccountsConnect from 'connectors/Accounts.connector';
+import classNames from 'classnames';
+import Icon from 'components/Icon';
+import ErrorMessage from 'components/ErrorMessage';
 
 function AccountFormDialog({
   name,
@@ -29,36 +32,50 @@ function AccountFormDialog({
   isOpen,
   accountsTypes,
   accounts,
-  fetchAccounts,
-  fetchAccountTypes,
+  requestFetchAccounts,
+  requestFetchAccountTypes,
+  requestFetchAccount,
   closeDialog,
-  submitAccount,
-  fetchAccount,
-  editAccount,
-  fetchAccountsTable,
+  requestSubmitAccount,
+  requestEditAccount,
+  getAccountById
 }) {
   const intl = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
     name: Yup.string().required(intl.formatMessage({ id: 'required' })),
-    code: Yup.number(intl.formatMessage({ id: 'field_name_must_be_number' })),
+    code: Yup.number(),
     account_type_id: Yup.string()
       .nullable()
       .required(intl.formatMessage({ id: 'required' })),
     description: Yup.string().trim()
   });
 
+  const initialValues = useMemo(() => ({
+    account_type_id: null,
+    name: '',
+    description: '',
+  }), []);
+
+  const [selectedAccountType, setSelectedAccountType] = useState(null);
+  const [selectedSubaccount, setSelectedSubaccount] = useState(null);
+
+  const editAccount = useMemo(() =>
+    payload.action === 'edit' ? getAccountById(payload.id) : null,
+    [payload, getAccountById]);
+
   // Formik
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
       ...(payload.action === 'edit' && editAccount)
+        ? editAccount : initialValues,
     },
     validationSchema: accountFormValidationSchema,
-    onSubmit: values => {
+    onSubmit: (values, { setSubmitting }) => {
       const exclude = ['subaccount'];
 
       if (payload.action === 'edit') {
-        editAccount({
+        requestEditAccount({
           payload: payload.id,
           form: { ...omit(values, exclude) }
         }).then(response => {
@@ -66,25 +83,34 @@ function AccountFormDialog({
           AppToaster.show({
             message: 'the_account_has_been_edited'
           });
-          refetchAccounts.execute();
+          setSubmitting(false);
+        }).catch(() => {
+          setSubmitting(false); 
         });
       } else {
-        submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
+        requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(response => {
           closeDialog(name);
           AppToaster.show({
             message: 'the_account_has_been_submit'
           });
-          refetchAccounts.execute();
+          setSubmitting(false);
+        }).catch(() => {
+          setSubmitting(false);
         });
       }
     }
   });
-  const [state, setState] = useState({
-    loading: true,
-    dialogActive: true,
-    selectedAccountType: null,
-    selectedSubaccount: null
-  });
+  const { errors, values, touched } = useMemo(() => (formik), [formik]);
+
+  // Set default account type.
+  useEffect(() => {
+    if (editAccount && editAccount.account_type_id) {
+      const defaultType = accountsTypes.find((t) =>
+        t.id === editAccount.account_type_id);
+
+      defaultType && setSelectedAccountType(defaultType);
+    }
+  }, [editAccount, accountsTypes]);
 
   // Filters accounts types items.
   const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
@@ -106,17 +132,12 @@ function AccountFormDialog({
   // Account item of select accounts field.
   const accountItem = (item, { handleClick, modifiers, query }) => {
     return (
-      <MenuItem
-        text={item.name}
-        label={item.code}
-        key={item.id}
-        onClick={handleClick}
-      />
+      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
     );
   };
 
   // Filters accounts items.
-  const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
     const normalizedTitle = account.name.toLowerCase();
     const normalizedQuery = query.toLowerCase();
 
@@ -125,70 +146,79 @@ function AccountFormDialog({
     } else {
       return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
     }
-  };
+  }, []);
 
-  const handleClose = () => {
-    closeDialog(name);
-  };
+  // Handles dialog close.
+  const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
 
   const fetchHook = useAsync(async () => {
     await Promise.all([
-      fetchAccounts(),
-      fetchAccountTypes(),
+      requestFetchAccounts(),
+      requestFetchAccountTypes(),
       // Fetch the target in case edit mode.
-      ...(payload.action === 'edit' ? [fetchAccount(payload.id)] : [])
-    ]);
-  }, false);
-
-  const refetchAccounts = useAsync(async () => {
-    await Promise.all([
-      fetchAccountsTable(),
+      ...(payload.action === 'edit' ?
+        [requestFetchAccount(payload.id)] : [])
     ]);
   }, false);
 
   // Fetch requests on dialog opening.
-  const onDialogOpening = async () => { fetchHook.execute(); };
+  const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
 
-  const onChangeAccountType = accountType => {
-    setState({ ...state, selectedAccountType: accountType.name });
+  const onChangeAccountType = useCallback((accountType) => {
+    setSelectedAccountType(accountType);
     formik.setFieldValue('account_type_id', accountType.id);
-  };
-  const onChangeSubaccount = account => {
-    setState({ ...state, selectedSubaccount: account });
-    formik.setFieldValue('parent_account_id', account.id);
-  };
+  }, [setSelectedAccountType, formik]);
 
-  const onDialogClosed = () => {
+  // Handles change sub-account.
+  const onChangeSubaccount = useCallback((account) => {
+    setSelectedSubaccount(account);
+    formik.setFieldValue('parent_account_id', account.id);
+  }, [setSelectedSubaccount, formik]);
+
+  const onDialogClosed = useCallback(() => {
     formik.resetForm();
-    setState({
-      ...state,
-      selectedSubaccount: null,
-      selectedAccountType: null
-    });
-  };
+    setSelectedSubaccount(null);
+    setSelectedAccountType(null);
+  }, [formik]);
+
+  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
+
+  const subAccountLabel = useMemo(() => {
+    return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
+  }, []);
+
+  const requiredSpan = useMemo(() => (
+    <span class="required">*</span>
+  ), []);
+
   return (
     <Dialog
       name={name}
       title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
       className={{
-        'dialog--loading': state.isLoading,
+        'dialog--loading': fetchHook.pending,
         'dialog--account-form': true
       }}
+      autoFocus={true}
+      canEscapeKeyClose={true}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
       isOpen={isOpen}
       isLoading={fetchHook.pending}
+      onClose={handleClose}
     >
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
             label={'Account Type'}
-            className="{'form-group--account-type'}"
+            labelInfo={requiredSpan}
+            className={classNames(
+              'form-group--account-type',
+              'form-group--select-list',
+              Classes.FILL)}
             inline={true}
-            helperText={
-              formik.errors.account_type_id && formik.errors.account_type_id
-            }
-            intent={formik.errors.account_type_id && Intent.DANGER}
+            helperText={<ErrorMessage name="account_type_id" {...formik} />}
+            intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
           >
             <Select
               items={accountsTypes}
@@ -200,21 +230,23 @@ function AccountFormDialog({
             >
               <Button
                 rightIcon='caret-down'
-                text={state.selectedAccountType || 'Select account type'}
+                text={selectedAccountType ?
+                  selectedAccountType.name : 'Select account type'}
               />
             </Select>
           </FormGroup>
 
           <FormGroup
             label={'Account Name'}
+            labelInfo={requiredSpan}
             className={'form-group--account-name'}
-            intent={formik.errors.name && Intent.DANGER}
-            helperText={formik.errors.name && formik.errors.name}
+            intent={(errors.name && touched.name) && Intent.DANGER}
+            helperText={<ErrorMessage name="name" {...formik} />}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={formik.errors.name && Intent.DANGER}
+              intent={(errors.name && touched.name) && Intent.DANGER}
               {...formik.getFieldProps('name')}
             />
           </FormGroup>
@@ -222,33 +254,37 @@ function AccountFormDialog({
           <FormGroup
             label={'Account Code'}
             className={'form-group--account-code'}
-            intent={formik.errors.code && Intent.DANGER}
-            helperText={formik.errors.code && formik.errors.code}
+            intent={(errors.code && touched.code) && Intent.DANGER}
+            helperText={<ErrorMessage name="code" {...formik} />}
             inline={true}
+            labelInfo={infoIcon}
           >
             <InputGroup
               medium={true}
-              intent={formik.errors.code && Intent.DANGER}
+              intent={(errors.code && touched.code) && Intent.DANGER}
               {...formik.getFieldProps('code')}
             />
           </FormGroup>
 
           <FormGroup
             label={' '}
-            className={'form-group--subaccount'}
+            className={classNames('form-group--subaccount')}
             inline={true}
           >
             <Checkbox
               inline={true}
-              label={'Sub account?'}
+              label={subAccountLabel}
               {...formik.getFieldProps('subaccount')}
             />
           </FormGroup>
 
-          {formik.values.subaccount && (
+          {values.subaccount && (
             <FormGroup
-              label={'Sub Account'}
-              className="{'form-group--sub-account'}"
+              label={'Parent Account'}
+              className={classNames(
+                'form-group--parent-account',
+                'form-group--select-list',
+                Classes.FILL)}
               inline={true}
             >
               <Select
@@ -263,9 +299,7 @@ function AccountFormDialog({
                 <Button
                   rightIcon='caret-down'
                   text={
-                    state.selectedSubaccount
-                      ? state.selectedSubaccount.name
-                      : 'Select Parent Account'
+                    selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
                   }
                 />
               </Select>
@@ -290,7 +324,7 @@ function AccountFormDialog({
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button onClick={handleClose}>Close</Button>
-            <Button intent={Intent.PRIMARY} type='submit'>
+            <Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
               {payload.action === 'edit' ? 'Edit' : 'Submit'}
             </Button>
           </div>
diff --git a/client/src/containers/Dashboard/Dialogs/ItemCategoryDialog.js b/client/src/containers/Dashboard/Dialogs/ItemCategoryDialog.js
index 53ced0aa5..6c8ffb821 100644
--- a/client/src/containers/Dashboard/Dialogs/ItemCategoryDialog.js
+++ b/client/src/containers/Dashboard/Dialogs/ItemCategoryDialog.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
   Button,
   Classes,
@@ -9,7 +9,7 @@ import {
   MenuItem
 } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { omit, pick } from 'lodash';
+import { pick } from 'lodash';
 import * as Yup from 'yup';
 import { useIntl } from 'react-intl';
 import { useFormik } from 'formik';
@@ -20,6 +20,9 @@ import AppToaster from 'components/AppToaster';
 import DialogConnect from 'connectors/Dialog.connector';
 import DialogReduxConnect from 'components/DialogReduxConnect';
 import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import Icon from 'components/Icon';
 
 function ItemCategoryDialog({
   name,
@@ -33,9 +36,8 @@ function ItemCategoryDialog({
   requestEditItemCategory,
   editItemCategory
 }) {
-  const [state, setState] = useState({
-    selectedParentCategory: null
-  });
+  const [selectedParentCategory, setParentCategory] = useState(null);
+
   const intl = useIntl();
   const ValidationSchema = Yup.object().shape({
     name: Yup.string().required(intl.formatMessage({ id: 'required' })),
@@ -43,11 +45,12 @@ function ItemCategoryDialog({
     description: Yup.string().trim()
   });
 
-  const initialValues = {
+  const initialValues = useMemo(() => ({
     name: '',
     description: '',
     parent_category_id: null
-  };
+  }), []);
+
   //Formik
   const formik = useFormik({
     enableReinitialize: true,
@@ -56,30 +59,35 @@ function ItemCategoryDialog({
         pick(editItemCategory, Object.keys(initialValues)))
     },
     validationSchema: ValidationSchema,
-    onSubmit: values => {
+    onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
         requestEditItemCategory(payload.id, values).then(response => {
           closeDialog(name);
           AppToaster.show({
             message: 'the_category_has_been_edited'
           });
+          setSubmitting(false);
+        }).catch((error) => {
+          setSubmitting(false);
         });
       } else {
         requestSubmitItemCategory(values)
-          .then(response => {
+          .then((response) => {
             closeDialog(name);
             AppToaster.show({
               message: 'the_category_has_been_submit'
             });
+            setSubmitting(false);
           })
-          .catch(error => {
-            alert(error.message);
+          .catch((error) => {
+            setSubmitting(false);
           });
       }
     }
   });
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
 
-  const filterItemCategory = (query, category, _index, exactMatch) => {
+  const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
     const normalizedTitle = category.name.toLowerCase();
     const normalizedQuery = query.toLowerCase();
 
@@ -88,73 +96,80 @@ function ItemCategoryDialog({
     } else {
       return normalizedTitle.indexOf(normalizedQuery) >= 0;
     }
-  };
+  }, []);
 
-  const parentCategoryItem = (category, { handleClick, modifiers, query }) => {
+  const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
     return (
       <MenuItem text={category.name} key={category.id} onClick={handleClick} />
     );
-  };
-  const handleClose = () => {
-    closeDialog(name);
-  };
+  }, []);
+
+  const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
 
   const fetchHook = useAsync(async () => {
-    await Promise.all([requestFetchItemCategories()]);
+    await Promise.all([
+      requestFetchItemCategories(),
+    ]);
   }, false);
 
-  const onDialogOpening = () => {
-    fetchHook.execute();
-  };
+  const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
 
-  const onChangeParentCategory = parentCategory => {
-    setState({ ...state, selectedParentCategory: parentCategory.name });
+  const onChangeParentCategory = useCallback((parentCategory) => {
+    setParentCategory(parentCategory);
     formik.setFieldValue('parent_category_id', parentCategory.id);
-  };
+  }, [formik]);
 
-  const onDialogClosed = () => {
+  const onDialogClosed = useCallback(() => {
     formik.resetForm();
     closeDialog(name);
-  };
+  }, [formik, closeDialog, name]);
+
+  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
 
   return (
     <Dialog
       name={name}
       title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
-      className={{
-        'dialog--loading': state.isLoading,
-        'dialog--item-form': true
-      }}
+      className={classNames({
+        'dialog--loading': fetchHook.pending,
+      },
+        'dialog--category-form',
+      )}
       isOpen={isOpen}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
       isLoading={fetchHook.pending}
+      onClose={handleClose}
     >
       <form onSubmit={formik.handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
             label={'Category Name'}
+            labelInfo={requiredSpan}
             className={'form-group--category-name'}
-            intent={formik.errors.name && Intent.DANGER}
-            helperText={formik.errors.name && formik.errors.name}
+            intent={(errors.name && touched.name) && Intent.DANGER}
+            helperText={(<ErrorMessage name="name" {...formik} />)}
             inline={true}
           >
             <InputGroup
               medium={true}
-              intent={formik.errors.name && Intent.DANGER}
+              intent={(errors.name && touched.name) && Intent.DANGER}
               {...formik.getFieldProps('name')}
             />
           </FormGroup>
 
           <FormGroup
             label={'Parent Category'}
-            className="{'form-group--parent-category'}"
+            labelInfo={infoIcon}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--parent-category',
+              Classes.FILL,
+            )}
             inline={true}
-            helperText={
-              formik.errors.parent_category_id &&
-              formik.errors.parent_category_id
-            }
-            intent={formik.errors.parent_category_id && Intent.DANGER}
+            helperText={(<ErrorMessage name="parent_category_id" {...formik} />)}
+            intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
           >
             <Select
               items={Object.values(categories)}
@@ -166,7 +181,8 @@ function ItemCategoryDialog({
             >
               <Button
                 rightIcon='caret-down'
-                text={state.selectedParentCategory || 'Select Parent Category'}
+                text={selectedParentCategory
+                  ? selectedParentCategory.name : 'Select Parent Category'}
               />
             </Select>
           </FormGroup>
@@ -174,8 +190,8 @@ function ItemCategoryDialog({
           <FormGroup
             label={'Description'}
             className={'form-group--description'}
-            intent={formik.errors.description && Intent.DANGER}
-            helperText={formik.errors.description && formik.errors.credential}
+            intent={(errors.description && touched.description) && Intent.DANGER}
+            helperText={(<ErrorMessage name="description" {...formik} />)}
             inline={true}
           >
             <TextArea
diff --git a/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger.js b/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger.js
index 9b93f85a6..2fe1d4678 100644
--- a/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -18,7 +18,7 @@ function GeneralLedger({
   getGeneralLedgerSheet,
   fetchGeneralLedger,
   generalLedgerSheetLoading,
-  fetchAccounts,
+  requestFetchAccounts,
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -35,7 +35,7 @@ function GeneralLedger({
 
   const fetchHook = useAsync(() => {
     return Promise.all([
-      fetchAccounts(),
+      requestFetchAccounts(),
     ]);
   });
 
diff --git a/client/src/store/accounts/accounts.selectors.js b/client/src/store/accounts/accounts.selectors.js
index 6192243a2..4f13cb5c6 100644
--- a/client/src/store/accounts/accounts.selectors.js
+++ b/client/src/store/accounts/accounts.selectors.js
@@ -8,4 +8,4 @@ export const getAccountsItems = (state, viewId) => {
   return typeof accountsView === 'object'
     ? pickItemsFromIds(accountsItems, accountsView.ids) || []
     : [];
-};
+};
\ No newline at end of file
diff --git a/client/src/store/selectors.js b/client/src/store/selectors.js
index 67c54d7bd..0f6a3bb93 100644
--- a/client/src/store/selectors.js
+++ b/client/src/store/selectors.js
@@ -1,5 +1,9 @@
 import {pick} from 'lodash';
 
+export const getItemById = (items, id) => {
+  return items[id] || null;
+};
+
 export const pickItemsFromIds = (items, ids) => {
   return Object.values(pick(items, ids));
 }
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 5d0c45e8d..233abdd0d 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -17,6 +17,8 @@ $menu-item-color-active: $light-gray3;
 
 $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
 
+@import "functions";
+
 // Objects
 @import "objects/form";
 @import "objects/typography";
@@ -36,6 +38,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import "pages/preferences";
 @import "pages/view-form";
 @import "pages/manual-journals";
+@import "pages/item-category";
 
 // Views
 @import "views/filter-dropdown";
diff --git a/client/src/style/components/data-table.scss b/client/src/style/components/data-table.scss
index f06e908c0..23eba802f 100644
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -19,10 +19,30 @@
         padding: 1rem 0.5rem;
         background: #F8FAFA;
         font-size: 14px;
-        color: #666;
+        color: #555;
         font-weight: 500;
         border-bottom: 1px solid rgb(224, 224, 224);
       }
+
+      .sort-icon{
+        width: 0;
+        height: 0;
+        position: relative;
+        top: -2px;
+        display: inline-block;
+        margin-left: 5px;
+
+        &--desc{
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-bottom: 6px solid #888;
+        }
+        &--asc{
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 6px solid #888;
+        }
+      }
     }
 
     .tr {
@@ -43,7 +63,6 @@
       justify-content: flex-start;
       align-items: flex-start;
       display: flex;
-      
       margin: 0;
       padding: 0.5rem;
 
@@ -94,9 +113,14 @@
       .td.actions .#{$ns}-button{
         background: #E6EFFB;
         border: 0;
-        box-shadow: 0 0 0;
+        box-shadow: none;
         padding: 5px 15px;
         border-radius: 2px;
+
+        &:hover,
+        &:focus{
+          background-color: #CFDCEE;
+        }
       }
     }
 
diff --git a/client/src/style/functions.scss b/client/src/style/functions.scss
new file mode 100644
index 000000000..0f3211afd
--- /dev/null
+++ b/client/src/style/functions.scss
@@ -0,0 +1,41 @@
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<","%3c"),
+  (">","%3e"),
+  ("#","%23"),
+  ("(","%28"),
+  (")","%29"),
+) !default;
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+    
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+  @return $string;
+}
diff --git a/client/src/style/objects/buttons.scss b/client/src/style/objects/buttons.scss
index 28e574018..1dc1ee87c 100644
--- a/client/src/style/objects/buttons.scss
+++ b/client/src/style/objects/buttons.scss
@@ -6,7 +6,6 @@
     .bp3-popover-target{
       width: 100%;
     }
-  
     .bp3-button{
       width: 100%;
       justify-content: space-between;
@@ -18,7 +17,6 @@
 .form-group--select-list{
 
   .bp3-popover-open{
-
     .bp3-button{
       border-color: #80bdff;
     }
@@ -32,13 +30,18 @@
   color: #555555;
   box-shadow: 0 0 0 transparent;
 
+  &:hover,
+  &:focus{
+    background-color: #CFDCEE;
+  }
+
   &.bp3-small{
     font-size: 13px;
     min-height: 29px;
   }
 
   .form-group--select-list &{
-    border-radius: 0;
+    border-radius: 2px;
 
     &,
     &:hover{
@@ -47,6 +50,12 @@
       border: 1px solid #ced4da;
     }
   }
+  .form-group--select-list.bp3-intent-danger &{
+    
+    &{
+      border-color: #db3737;
+    }
+  }
 }
 
 .bp3-button{
diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss
index a5d4bfa99..5efc41023 100644
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -1,3 +1,6 @@
+$form-check-input-checked-color: #fff;
+$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
+$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
 
 .form{
   &__floating-footer{
@@ -12,14 +15,19 @@
 }
 
 // Form
-label{
+.bp3-label{
+  color: #353535;
   font-weight: 400;
+
+  .required{
+    color: red;
+  }
 }
 
 .#{$ns}-input{
   box-shadow: 0 0 0 transparent;
   border: 1px solid #ced4da;
-  border-radius: 0;
+  border-radius: 2px;
   height: 32px;
   line-height: 32px;
   color: #333;
@@ -44,7 +52,12 @@ label{
     }
 
     .bp3-input{
-      border-color: #db3737;
+      border-color: rgb(219, 55, 55);
+      box-shadow: 0 0 0 0 transparent;
+
+      &:focus{
+        box-shadow: 0 0 0 0.2rem rgba(219, 55, 55, 0.25);
+      }
     }
   }
 
@@ -107,12 +120,32 @@ label{
 }
 
 
+@mixin control-checked-colors($selector: ":checked") {
+  input#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color;
+    color: $white;
+  }
 
+  &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color-hover;
+    border-color: $control-checked-background-color-active;
+  }
+
+  input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color-active;
+    border-color: $control-checked-background-color-active;
+  }
+
+  input:disabled#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background: rgba($control-checked-background-color, 0.5);
+  }
+}
 
 ///@extend
-
-
-
 .#{$ns}-control {
 
   input:checked ~ .#{$ns}-control-indicator {
@@ -157,6 +190,8 @@ label{
     }
   }
 
+  
+
   &:hover .#{$ns}-control-indicator {
     background-color: transparent;
   }
@@ -165,7 +200,62 @@ label{
     box-shadow: 0 0 0 transparent;
     background: transparent;
   }
- 
+
+   /*
+  Checkbox
+
+  Markup:
+  <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
+    <input type="checkbox" {{:modifier}} />
+    <span class="#{$ns}-control-indicator"></span>
+    Checkbox
+  </label>
+
+  :checked  - Checked
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
+                   <code>input.indeterminate = true</code>.
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
+
+  Styleguide checkbox
+  */
+
+  &.#{$ns}-checkbox {
+    &:hover input:indeterminate ~ .#{$ns}-control-indicator {
+      // box-shadow: 0 0 0 transparent;
+    } 
+
+    @mixin indicator-inline-icon($icon) {
+      &::before {
+        // embed SVG icon image as backgroud-image above gradient.
+        // the SVG image content is inlined into the CSS, so use this sparingly.
+        height: 100%;
+        width: 100%;
+      }
+    }
+    @include control-checked-colors(":checked");
+
+    // make :indeterminate look like :checked _for Checkbox only_
+    @include control-checked-colors(":indeterminate");
+
+    .#{$ns}-control-indicator {
+      border: 1px solid #c6c6c6;
+      border-radius: $pt-border-radius;
+    }
+    input:checked ~ .#{$ns}-control-indicator {
+      background-image: escape-svg($form-check-input-checked-bg-image);
+      border-color: #137cbd;
+      background-color: #137cbd;
+    }
+    input:indeterminate ~ .#{$ns}-control-indicator {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      border-color: #137cbd;
+      background-color: #137cbd;
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
   /*
     Radio
 
@@ -184,6 +274,7 @@ label{
     Styleguide radio
   */
   &.#{$ns}-radio {
+    
 
     .#{$ns}-control-indicator{
       border: 2px solid #cecece;
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index fdd4ca2aa..05fd494e8 100644
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -9,4 +9,58 @@
       }
     }
   }
+}
+
+// Account Form Dialog.
+// ----------------------------
+.dialog--account-form{
+
+  &:not(.dialog--loading) .bp3-dialog-body{
+    margin-bottom: 25px;
+  }
+
+  .bp3-dialog-body{
+    
+    .bp3-form-group.bp3-inline{
+
+      .bp3-label{
+        min-width: 140px;
+      }
+      .bp3-form-content{
+        width: 250px;
+      }
+
+      &.form-group--description{
+
+        .bp3-form-content{
+          width: 280px;
+
+          textarea{
+            min-width: 100%;
+            max-width: 100%;
+            width: 100%;
+            max-height: 120px;
+          }
+        }
+      }
+    }
+
+    .form-group--parent-account{
+      margin-bottom: 35px;
+    }
+
+    .form-group--account-code{
+      margin-bottom: 16px;
+    }
+    .form-group--subaccount{
+      margin-bottom: 16px;
+
+      .bp3-icon-info-circle{
+        color: #A1B2C5;
+        position: relative;
+        top: -2px;
+        margin-left: 2px;
+      }
+    }    
+  }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/item-category.scss b/client/src/style/pages/item-category.scss
new file mode 100644
index 000000000..962e7be24
--- /dev/null
+++ b/client/src/style/pages/item-category.scss
@@ -0,0 +1,30 @@
+
+
+.dialog--category-form{
+
+  .bp3-dialog-body{    
+    .bp3-form-group.bp3-inline{
+
+      .bp3-label{
+        min-width: 140px;
+      }
+      .bp3-form-content{
+        width: 250px;
+      }
+
+      &.form-group--description{
+
+        .bp3-form-content{
+          width: 280px;
+
+          textarea{
+            min-width: 100%;
+            max-width: 100%;
+            width: 100%;
+            max-height: 120px;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss
index 037c2a345..013498c01 100644
--- a/client/src/style/views/Sidebar.scss
+++ b/client/src/style/views/Sidebar.scss
@@ -2,7 +2,7 @@
 $sidebar-background: #01194E;
 $sidebar-text-color: #fff;
 $sidebar-width: 220px;
-$sidebar-menu-item-color: #E9EBF7;
+$sidebar-menu-item-color: #a8b1c7;
 
 $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 
@@ -29,9 +29,10 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
         font-size: 16px;
         font-weight: 200;
         margin-bottom: 5px;
+        color: rgba(255, 255, 255, 0.75);
       }
       .company-meta{
-        color: #A7AFC2;
+        color: rgba(255, 255, 255, 0.4);
         font-size: 12px;
       }
     }
@@ -49,10 +50,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       border-radius: 0;
       padding: 10px 16px;
       font-size: 15px;
-      font-weight: 200;
+      font-weight: 400; 
 
       &:hover{
         background: #012470;
+        color: #b2bbd0;
       }
       &:focus,
       &:active{
@@ -60,21 +62,21 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       }
 
       > .#{$ns}-icon{
-        color: #767B9B;
-        margin-right: 12px;
+        color: #767b9b;
+        margin-right: 14px;
         margin-top: 0;
       }
-
       > .#{$ns}-icon-caret-right{
         margin-right: -4px;
         margin-top: 3px;
-        color: #5B5F7B;
+        color: #42547b;
       }
     }
 
     .#{$ns}-submenu{
 
       .#{$ns}-collapse{
+        border-left: 2px solid rgba(255, 255, 255, 0.15);
 
         &-body{
           background-color: rgb(11, 34, 85);
@@ -85,11 +87,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
         .#{$ns}-menu-item{
           padding: 7px 16px 7px 18px;
           font-size: 15px;
-          color: #C5CBE3;
+          color: #8a95b6;
 
           &:hover{
             background: transparent;
-            color: #fff;
+            color: #C5CBE3;
           }
         }
       }
@@ -105,7 +107,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       color: $sidebar-menu-item-color;
     }
     .#{$ns}-menu-divider{
-      border-top-color: #183C86;
+      border-top-color: #1D366A;
       color: #6B708C;
       margin: 4px 0;
     }

From 54e2a43647fdcf8c65cd2323f215b2c13359354c Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sun, 12 Apr 2020 14:06:54 +0200
Subject: [PATCH 3/5] feat: style preferences general section.

---
 .../src/containers/Dashboard/Preferences/General.js   |  2 ++
 client/src/style/pages/preferences.scss               | 11 +++++++++++
 2 files changed, 13 insertions(+)

diff --git a/client/src/containers/Dashboard/Preferences/General.js b/client/src/containers/Dashboard/Preferences/General.js
index a7c3d9c75..c747df20c 100644
--- a/client/src/containers/Dashboard/Preferences/General.js
+++ b/client/src/containers/Dashboard/Preferences/General.js
@@ -31,6 +31,7 @@ function GeneralPreferences({
   });
 
   return (
+    <div class="preferences__inside-content preferences__inside-content--general">
     <form onSubmit={formik.handleSubmit}>
       <FormGroup
         label={'Organization Name'}
@@ -62,6 +63,7 @@ function GeneralPreferences({
 
       <Button intent={Intent.PRIMARY} type="submit">{ 'Save' }</Button>
     </form>
+    </div>
   )
 }
 
diff --git a/client/src/style/pages/preferences.scss b/client/src/style/pages/preferences.scss
index 813ccf730..be3560019 100644
--- a/client/src/style/pages/preferences.scss
+++ b/client/src/style/pages/preferences.scss
@@ -61,3 +61,14 @@
     }
   }
 }
+
+
+.preferences__inside-content--general{
+
+  .bp3-form-group{
+
+    .bp3-label{
+      width: 180px;
+    }
+  }
+}
\ No newline at end of file

From 4d4191dfc0584aaa2ca5a5924c3cbcf281b5a706 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sun, 12 Apr 2020 17:13:34 +0200
Subject: [PATCH 4/5] feat: optimize chart of accounts.

---
 .../components/Accounts/AccountsDataTable.js  | 92 +++++++++++++++----
 client/src/components/DataTable.js            |  2 +
 .../src/components/Items/ItemsCategoryList.js |  6 +-
 .../JournalEntry/ManualJournalActionsBar.js   | 22 +++--
 .../JournalEntry/ManualJournalsDataTable.js   |  1 +
 .../JournalEntry/ManualJournalsViewTabs.js    |  1 +
 .../Dashboard/Accounts/AccountsChart.js       | 17 +++-
 client/src/static/json/icons.js               |  6 +-
 client/src/style/App.scss                     |  8 ++
 client/src/style/components/data-table.scss   | 18 +++-
 client/src/style/objects/typography.scss      |  2 +-
 client/src/style/pages/accounts-chart.scss    | 36 +++++++-
 .../src/style/pages/financial-statements.scss |  2 +-
 server/src/http/controllers/Accounts.js       |  1 +
 14 files changed, 178 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Accounts/AccountsDataTable.js b/client/src/components/Accounts/AccountsDataTable.js
index 9b7ff3a07..6afe6fdba 100644
--- a/client/src/components/Accounts/AccountsDataTable.js
+++ b/client/src/components/Accounts/AccountsDataTable.js
@@ -6,6 +6,8 @@ import {
   MenuItem,
   MenuDivider,
   Position,
+  Classes,
+  Tooltip,
 } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
 import Icon from 'components/Icon';
@@ -16,6 +18,7 @@ import DashboardConnect from 'connectors/Dashboard.connector';
 import ViewConnect from 'connectors/View.connector';
 import LoadingIndicator from 'components/LoadingIndicator';
 import DataTable from 'components/DataTable';
+import Money from 'components/Money';
 
 function AccountsDataTable({
   accounts,
@@ -45,9 +48,10 @@ function AccountsDataTable({
   // Clear page subtitle when unmount the page.
   useEffect(() => () => { changePageSubtitle(''); }, []);
 
-  const handleEditAccount = account => () => {
+  const handleEditAccount = useCallback((account) => () => {
     openDialog('account-form', { action: 'edit', id: account.id });
-  };
+  }, [openDialog]);
+
   const actionMenuList = account => (
     <Menu>
       <MenuItem text='View Details' />
@@ -64,20 +68,71 @@ function AccountsDataTable({
     </Menu>
   );
   const columns = useMemo(() => [
+    {
+      // Build our expander column
+      id: 'expander', // Make sure it has an ID
+      className: 'expander',
+      Header: ({
+        getToggleAllRowsExpandedProps,
+        isAllRowsExpanded
+      }) => (
+        <span {...getToggleAllRowsExpandedProps()} className="toggle">
+          {isAllRowsExpanded ?
+            (<span class="arrow-down" />) :
+            (<span class="arrow-right" />)
+          }
+        </span>
+      ),
+      Cell: ({ row }) =>
+        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
+        // to build the toggle for expanding a row
+        row.canExpand ? (
+          <span
+            {...row.getToggleRowExpandedProps({
+              style: {
+                // We can even use the row.depth property
+                // and paddingLeft to indicate the depth
+                // of the row
+                paddingLeft: `${row.depth * 2}rem`,
+              },
+              className: 'toggle',
+            })}
+          >
+            {row.isExpanded ?
+              (<span class="arrow-down" />) :
+              (<span class="arrow-right" />)
+            }
+          </span>
+        ) : null,
+      width: 20,
+      disableResizing: true,
+    },
     {
       id: 'name',
       Header: 'Account Name',
-      accessor: 'name',
+      accessor: row => {
+        return (row.description) ?
+          (<Tooltip
+            className={Classes.TOOLTIP_INDICATOR}
+            content={row.description}
+            position={Position.RIGHT_TOP}
+            hoverOpenDelay={500}>
+              { row.name }
+          </Tooltip>) : row.name;
+      },
+      className: 'account_name',
     },
     {
       id: 'code',
       Header: 'Code',
-      accessor: 'code'
+      accessor: 'code',
+      className: 'code',
     },
     {
       id: 'type',
       Header: 'Type',
-      accessor: 'type.name'
+      accessor: 'type.name',
+      className: 'type',
     },
     {
       id: 'normal',
@@ -96,14 +151,14 @@ function AccountsDataTable({
       Header: 'Balance',
       Cell: ({ cell }) => {
         const account = cell.row.original;
-        const {balance} = account;
+        const {balance = null} = account;
 
-        return ('undefined' !== typeof balance) ?
-          (<span>{ balance.amount }</span>) :
-          (<span>--</span>);
+        return (balance) ?
+          (<span>
+            <Money amount={balance.amount} currency={balance.currency_code} />
+            </span>) :
+          (<span class="placeholder">--</span>);
       },
-      
-      // canResize: false,
     },
     {
       id: 'actions',
@@ -111,18 +166,23 @@ function AccountsDataTable({
       Cell: ({ cell }) => (
         <Popover
           content={actionMenuList(cell.row.original)}
-          position={Position.RIGHT_BOTTOM}>
+          position={Position.RIGHT_TOP}>
           <Button icon={<Icon icon='ellipsis-h' />} />
         </Popover>
       ),
       className: 'actions',
       width: 50,
-      // canResize: false
     }
   ], []);
 
-  const handleDatatableFetchData = useCallback(() => {
-    onFetchData && onFetchData();
+  const selectionColumn = useMemo(() => ({
+    minWidth: 42,
+    width: 42,
+    maxWidth: 42,
+  }), [])
+
+  const handleDatatableFetchData = useCallback((...params) => {
+    onFetchData && onFetchData(...params);
   }, []);
 
   return (
@@ -132,7 +192,7 @@ function AccountsDataTable({
         data={accounts}
         onFetchData={handleDatatableFetchData}
         manualSortBy={true}
-        selectionColumn={true} />
+        selectionColumn={selectionColumn} />
     </LoadingIndicator>    
   );
 }
diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js
index d9bf7810c..9d45ee411 100644
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -103,6 +103,8 @@ export default function DataTable({
               <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
             </div>
           ),
+          className: 'selection',
+          ...(typeof selectionColumn === 'object') ? selectionColumn : {},
         }] : [],
         ...columns,
       ])
diff --git a/client/src/components/Items/ItemsCategoryList.js b/client/src/components/Items/ItemsCategoryList.js
index 33f1ba7b6..a8c5f5388 100644
--- a/client/src/components/Items/ItemsCategoryList.js
+++ b/client/src/components/Items/ItemsCategoryList.js
@@ -45,7 +45,11 @@ const ItemsCategoryList = ({
         Header: 'Description',
         accessor: 'description'
       },
-
+      {
+        id: 'count',
+        Header: 'Count',
+        // accessor: ''
+      },
       {
         id: 'actions',
         Header: '',
diff --git a/client/src/components/JournalEntry/ManualJournalActionsBar.js b/client/src/components/JournalEntry/ManualJournalActionsBar.js
index dbdd4c815..3ba40c21a 100644
--- a/client/src/components/JournalEntry/ManualJournalActionsBar.js
+++ b/client/src/components/JournalEntry/ManualJournalActionsBar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
@@ -37,9 +37,10 @@ function ManualJournalActionsBar({
     );
   });
 
-  const onClickNewManualJournal = () => {
+  const onClickNewManualJournal = useCallback(() => {
     history.push('/dashboard/accounting/make-journal-entry');
-  };
+  }, [history]);
+
   const filterDropdown = FilterDropdown({
     fields: manualJournalFields,
     onFilterChange: filterConditions => {
@@ -83,12 +84,15 @@ function ManualJournalActionsBar({
             icon={<Icon icon='filter' />}
           />
         </Popover>
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon='trash' iconSize={15} />}
-          text='Delete'
-          intent={Intent.DANGER}
-        />
+
+        { (false) && (
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon='trash' iconSize={15} />}
+            text='Delete'
+            intent={Intent.DANGER}
+          />
+        )}
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-import' />}
diff --git a/client/src/components/JournalEntry/ManualJournalsDataTable.js b/client/src/components/JournalEntry/ManualJournalsDataTable.js
index 71f86cefe..bc3728cac 100644
--- a/client/src/components/JournalEntry/ManualJournalsDataTable.js
+++ b/client/src/components/JournalEntry/ManualJournalsDataTable.js
@@ -107,6 +107,7 @@ function ManualJournalsDataTable({
       Header: 'Note',
       accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
       disableResizing: true,
+      disableSorting: true,
       width: 100,
       className: 'note',
     },
diff --git a/client/src/components/JournalEntry/ManualJournalsViewTabs.js b/client/src/components/JournalEntry/ManualJournalsViewTabs.js
index 8be539d18..4618760d0 100644
--- a/client/src/components/JournalEntry/ManualJournalsViewTabs.js
+++ b/client/src/components/JournalEntry/ManualJournalsViewTabs.js
@@ -85,6 +85,7 @@ function ManualJournalsViewTabs({
             className='button--new-view'
             icon={<Icon icon='plus' />}
             onClick={handleClickNewView}
+            minimal={true}
           />
         </Tabs>
       </NavbarGroup>
diff --git a/client/src/containers/Dashboard/Accounts/AccountsChart.js b/client/src/containers/Dashboard/Accounts/AccountsChart.js
index c68ed277f..3b67f8590 100644
--- a/client/src/containers/Dashboard/Accounts/AccountsChart.js
+++ b/client/src/containers/Dashboard/Accounts/AccountsChart.js
@@ -28,6 +28,7 @@ function AccountsChart({
   fetchResourceFields,
   getResourceFields,
   requestFetchAccountsTable,
+  addAccountsTableQueries
 }) {
   const [state, setState] = useState({
     deleteAlertActive: false,
@@ -116,9 +117,21 @@ function AccountsChart({
     console.log(accounts);
   };
 
-  const handleFilterChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleFilterChanged = useCallback(() => {
+    
+    fetchAccountsHook.execute();
+  }, [fetchAccountsHook]);
+
   const handleViewChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
-  const handleFetchData = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
+    addAccountsTableQueries({
+      ...(sortBy.length > 0) ? {
+        column_sort_by: sortBy[0].id,
+        sort_by: sortBy[0].desc ? 'desc' : 'asc',
+      } : {},
+    });
+    fetchAccountsHook.execute();
+  }, [fetchAccountsHook, addAccountsTableQueries]);
 
   return (
     <DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index fd09923db..5c42dc0b5 100644
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -36,9 +36,13 @@ export default {
     viewBox: '0 0 512 512',
   },
   "arrow-up": {
-    path: ['M4.465 263.536l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L207 92.113V468c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V92.113l178.494 178.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.05c-4.686-4.686-12.284-4.686-16.971 0L4.465 246.566c-4.687 4.686-4.687 12.284 0 16.97z'],
+    path: ['M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z'],
     viewBox: '0 0 448 512'
   },
+  "arrow-down": {
+    path: ['M441.9 250.1l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L250 385.4V44c0-6.6-5.4-12-12-12h-28c-6.6 0-12 5.4-12 12v341.4L42.9 230.3c-4.7-4.7-12.3-4.7-17 0L6.1 250.1c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'],
+    viewBox: '0 0 448 512' 
+  },
   "ellipsis-h": {
     path: ['M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z'],
     viewBox: '0 0 512 512',
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 233abdd0d..3bd800d92 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -9,6 +9,8 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
 $menu-item-color-hover: $light-gray4;
 $menu-item-color-active: $light-gray3;
 
+$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
+
 // Blueprint framework.
 @import "@blueprintjs/core/src/blueprint.scss";
 @import "@blueprintjs/datetime/src/blueprint-datetime.scss";
@@ -27,6 +29,12 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 // Components
 @import "components/data-table";
 @import "components/dialog";
+  
+.bp3-breadcrumbs-collapsed::before{
+  background: escape-svg($breadcrumbs-collapsed-icon) center center;
+  width: 15px;
+  height: 15px;
+}
 
 // Pages
 @import "pages/dashboard";
diff --git a/client/src/style/components/data-table.scss b/client/src/style/components/data-table.scss
index 23eba802f..372a17252 100644
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -4,19 +4,27 @@
   overflow-x: auto;
   overflow-y: hidden;
 
+  .dashboard__page-content &{
+
+    .table .thead{
+      .th{
+        border-bottom-color: #eaeaea;
+      }
+    }
+  }
+
   .table {
     text-align: left;
     border-spacing: 0;
     min-width: 100%;
     display: block;
-    // width: 100%;
 
     .thead{
       overflow-y: auto;
       overflow-x: hidden;
 
       .th{
-        padding: 1rem 0.5rem;
+        padding: 0.8rem 0.5rem;
         background: #F8FAFA;
         font-size: 14px;
         color: #555;
@@ -109,13 +117,17 @@
       .tr .td{
         border-bottom: 1px solid #E0E2E2;
         align-items: center;
+
+        .placeholder{
+          color: #999;
+        }
       }      
       .td.actions .#{$ns}-button{
         background: #E6EFFB;
         border: 0;
         box-shadow: none;
         padding: 5px 15px;
-        border-radius: 2px;
+        border-radius: 5px;
 
         &:hover,
         &:focus{
diff --git a/client/src/style/objects/typography.scss b/client/src/style/objects/typography.scss
index 54f0031e1..c61b13810 100644
--- a/client/src/style/objects/typography.scss
+++ b/client/src/style/objects/typography.scss
@@ -1,7 +1,7 @@
 
 
 body{
-  color: #212529;
+  color: #444;
 }
 
 .#{$ns}-heading{
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index 05fd494e8..0530dad54 100644
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -2,12 +2,45 @@
 .dashboard__insider--accounts-chart{
 
   .bigcapital-datatable{
+
     .normal{
       .#{$ns}-icon{
-        color: #666;
+        color: #aaa;
         padding-left: 15px;
       }
     }
+
+    .table{
+      .thead,
+      .tbody{
+        .th.selection,
+        .td.selection{
+          padding-left: 18px;
+        }
+      }
+
+      .tbody{
+        .tr .td{
+          padding-top: 0.4rem;
+          padding-bottom: 0.4rem;
+        }
+        .account_name{
+          font-weight: 500;
+
+          .bp3-tooltip-indicator{
+            cursor: default;
+            border-bottom-color: #c6c6c6;
+          }
+        }
+        .code{
+          color: #666;
+        }
+        .actions{
+          padding-right: 18px;
+          justify-content: right;
+        }
+      }
+    }
   }
 }
 
@@ -48,7 +81,6 @@
     .form-group--parent-account{
       margin-bottom: 35px;
     }
-
     .form-group--account-code{
       margin-bottom: 16px;
     }
diff --git a/client/src/style/pages/financial-statements.scss b/client/src/style/pages/financial-statements.scss
index bc843e823..cdc1cee7d 100644
--- a/client/src/style/pages/financial-statements.scss
+++ b/client/src/style/pages/financial-statements.scss
@@ -44,7 +44,7 @@
   width: auto;
   padding: 30px 20px;
   max-width: 100%;
-  margin: 35px auto;
+  margin: 25px auto 35px;
   min-height: 400px;
   display: flex;
   flex-direction: column;
diff --git a/server/src/http/controllers/Accounts.js b/server/src/http/controllers/Accounts.js
index 6e4aa54a8..ea0f27ff6 100644
--- a/server/src/http/controllers/Accounts.js
+++ b/server/src/http/controllers/Accounts.js
@@ -282,6 +282,7 @@ export default {
       const accounts = await Account.query().onBuild((builder) => {
         builder.modify('filterAccountTypes', filter.account_types);
         builder.withGraphFetched('type');
+        builder.withGraphFetched('balance');
 
         // Build custom view conditions query.
         if (viewConditionals.length > 0) {

From 2e7e18bb974d9877806cb3bd5c3293e02101366d Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Sun, 12 Apr 2020 20:29:10 +0200
Subject: [PATCH 5/5] feat: style item form.

---
 client/src/components/Items/ItemForm.js | 376 +++++++++++++-----------
 client/src/style/App.scss               |  11 +-
 client/src/style/pages/dashboard.scss   |   5 +
 client/src/style/pages/items.scss       |  48 +++
 4 files changed, 263 insertions(+), 177 deletions(-)
 create mode 100644 client/src/style/pages/items.scss

diff --git a/client/src/components/Items/ItemForm.js b/client/src/components/Items/ItemForm.js
index dee577483..0ddcd0570 100644
--- a/client/src/components/Items/ItemForm.js
+++ b/client/src/components/Items/ItemForm.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import {
@@ -7,7 +7,8 @@ import {
   Intent,
   InputGroup,
   HTMLSelect,
-  Button
+  Button,
+  Classes,
 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
 import { Select } from '@blueprintjs/select';
@@ -15,6 +16,10 @@ import AppToaster from 'components/AppToaster';
 import AccountsConnect from 'connectors/Accounts.connector';
 import ItemsConnect from 'connectors/Items.connect';
 import {compose} from 'utils';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import Icon from 'components/Icon';
+
 
 const ItemForm = ({
   requestSubmitItem,
@@ -22,17 +27,16 @@ const ItemForm = ({
 }) => {
   const [selectedAccounts, setSelectedAccounts] = useState({});
 
-  const ItemTypeDisplay = [
+  const ItemTypeDisplay = useMemo(() => ([
     { value: null, label: 'Select Item Type' },
     { value: 'service', label: 'Service' },
     { value: 'inventory', label: 'Inventory' },
     { value: 'non-inventory', label: 'Non-Inventory' }
-  ];
+  ]), []);
+
   const validationSchema = Yup.object().shape({
     name: Yup.string().required(),
-    type: Yup.string()
-      .trim()
-      .required(),
+    type: Yup.string().trim().required(),
     sku: Yup.string().required(),
     cost_price: Yup.number().required(),
     sell_price: Yup.number().required(),
@@ -42,22 +46,39 @@ const ItemForm = ({
     category_id: Yup.number().required(),
     stock: Yup.string() || Yup.boolean()
   });
+
+  const initialValues = useMemo(() => ({
+    name: '',
+    type: '',
+    sku: '',
+    cost_price: null,
+    sell_price: null,
+    cost_account_id: null,
+    sell_account_id: null,
+    inventory_account_id: null,
+    category_id: null,
+    note: '',
+  }), []);
+
   const formik = useFormik({
     enableReinitialize: true,
     validationSchema: validationSchema,
-    initialValues: {},
-    onSubmit: values => {
-      requestSubmitItem(values)
-        .then(response => {
-          AppToaster.show({
-            message: 'The_Items_has_been_Submit'
-          });
-        })
-        .catch(err => {
-          alert(err.message);
+    initialValues: {
+      ...initialValues,
+    },
+    onSubmit: (values, { setSubmitting }) => {
+      requestSubmitItem(values).then((response) => {
+        AppToaster.show({
+          message: 'The_Items_has_been_Submit'
         });
+        setSubmitting(false);
+      })
+      .catch((error) => {
+        setSubmitting(false);
+      });
     }
   });
+  const {errors, values, touched} = useMemo(() => formik, [formik]);
 
   const accountItem = (item, { handleClick }) => (
     <MenuItem key={item.id} text={item.name} label={item.code} onClick={handleClick} />
@@ -73,131 +94,130 @@ const ItemForm = ({
     }
   };
 
-  const onItemAccountSelect = filedName => {
-    return account => {
+  const onItemAccountSelect = useCallback((filedName) => {
+    return (account) => {
       setSelectedAccounts({
         ...selectedAccounts,
         [filedName]: account
       });
       formik.setFieldValue(filedName, account.id);
     };
-  };
+  }, [formik, selectedAccounts]);
 
-  const getSelectedAccountLabel = (fieldName, defaultLabel) => {
+  const getSelectedAccountLabel = useCallback((fieldName, defaultLabel) => {
     return typeof selectedAccounts[fieldName] !== 'undefined'
-      ? selectedAccounts[fieldName].name
-      : defaultLabel;
-  };
+      ? selectedAccounts[fieldName].name : defaultLabel;
+  }, [selectedAccounts]);
+
+  const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
+  const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
 
   return (
     <div class='item-form'>
       <form onSubmit={formik.handleSubmit}>
-        <FormGroup
-          medium={true}
-          label={'Item Type'}
-          className={'form-group--item-type'}
-          intent={formik.errors.type && Intent.DANGER}
-          helperText={formik.errors.type && formik.errors.type}
-          inline={true}
-        >
-          <HTMLSelect
-            fill={true}
-            options={ItemTypeDisplay}
-            {...formik.getFieldProps('type')}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={'Item Name'}
-          className={'form-group--item-name'}
-          intent={formik.errors.name && Intent.DANGER}
-          helperText={formik.errors.name && formik.errors.name}
-          inline={true}
-        >
-          <InputGroup
+        <div class="item-form__primary-section">
+          <FormGroup
             medium={true}
-            intent={formik.errors.name && Intent.DANGER}
-            {...formik.getFieldProps('name')}
-          />
-        </FormGroup>
-
-        <FormGroup
-          label={'SKU'}
-          className={'form-group--item-sku'}
-          intent={formik.errors.sku && Intent.DANGER}
-          helperText={formik.errors.sku && formik.errors.sku}
-          inline={true}
-        >
-          <InputGroup
-            medium={true}
-            intent={formik.errors.sku && Intent.DANGER}
-            {...formik.getFieldProps('sku')}
-          />
-        </FormGroup>
-        <FormGroup
-          label={'Category'}
-          className={'form-group--item-category'}
-          inline={true}
-          intent={formik.errors.category_id && Intent.DANGER}
-          helperText={formik.errors.category_id && formik.errors.category_id}
-        >
-          <Select
-            items={accounts}
-            itemRenderer={accountItem}
-            itemPredicate={filterAccounts}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onItemAccountSelect('category_id')}
+            label={'Item Type'}
+            labelInfo={requiredSpan}
+            className={'form-group--item-type'}
+            intent={(errors.type && touched.type) && Intent.DANGER}
+            helperText={<ErrorMessage {...formik} name="type" />}
+            inline={true}
           >
-            <Button
+            <HTMLSelect
               fill={true}
-              rightIcon='caret-down'
-              text={getSelectedAccountLabel('category_id', 'Select account')}
+              options={ItemTypeDisplay}
+              {...formik.getFieldProps('type')}
             />
-          </Select>
-        </FormGroup>
+          </FormGroup>
+
+          <FormGroup
+            label={'Item Name'}
+            labelInfo={requiredSpan}
+            className={'form-group--item-name'}
+            intent={(errors.name && touched.name) && Intent.DANGER}
+            helperText={<ErrorMessage {...formik} name="name" />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={(errors.name && touched.name) && Intent.DANGER}
+              {...formik.getFieldProps('name')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'SKU'}
+            labelInfo={infoIcon}
+            className={'form-group--item-sku'}
+            intent={(errors.sku && touched.sku) && Intent.DANGER}
+            helperText={<ErrorMessage {...formik} name="sku" />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={(errors.sku && touched.sku) && Intent.DANGER}
+              {...formik.getFieldProps('sku')}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={'Category'}
+            labelInfo={infoIcon}
+            inline={true}
+            intent={(errors.category_id && touched.category_id) && Intent.DANGER}
+            helperText={<ErrorMessage {...formik} name="category" />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--category',
+              Classes.FILL,
+            )}
+          >
+            <Select
+              items={accounts}
+              itemRenderer={accountItem}
+              itemPredicate={filterAccounts}
+              popoverProps={{ minimal: true }}
+              onItemSelect={onItemAccountSelect('category_id')}
+            >
+              <Button
+                fill={true}
+                rightIcon='caret-down'
+                text={getSelectedAccountLabel('category_id', 'Select account')}
+              />
+            </Select>
+          </FormGroup>
+        </div>
+
+        <Row gutterWidth={16} className={'item-form__accounts-section'}>
+          <Col width={404}>
+            <h4 >Purchase Information</h4>
 
-        <Row gutterWidth={16}>
-          <Col md={4}>
             <FormGroup
               label={'Selling Price'}
               className={'form-group--item-selling-price'}
-              intent={formik.errors.sell_price && Intent.DANGER}
-              helperText={formik.errors.sell_price && formik.errors.sell_price}
+              intent={(errors.selling_price && touched.selling_price) && Intent.DANGER}
+              helperText={<ErrorMessage {...formik} name="selling_price" />}
               inline={true}
             >
               <InputGroup
                 medium={true}
-                intent={formik.errors.sell_price && Intent.DANGER}
+                intent={(errors.selling_price && touched.selling_price) && Intent.DANGER}
                 {...formik.getFieldProps('sell_price')}
               />
             </FormGroup>
-          </Col>
-          <Col md={4}>
-            <FormGroup
-              label={'Cost Price'}
-              className={'form-group--item-cost-price'}
-              intent={formik.errors.cost_price && Intent.DANGER}
-              helperText={formik.errors.cost_price && formik.errors.cost_price}
-              inline={true}
-            >
-              <InputGroup
-                medium={true}
-                intent={formik.errors.cost_price && Intent.DANGER}
-                {...formik.getFieldProps('cost_price')}
-              />
-            </FormGroup>
-          </Col>
-        </Row>
-        <Row gutterWidth={16}>
-          <Col md={4}>
+
             <FormGroup
               label={'Account'}
-              className={'form-group--item-sell_account_id'}
+              labelInfo={infoIcon}
               inline={true}
-              intent={formik.errors.sell_account_id && Intent.DANGER}
-              helperText={
-                formik.errors.sell_account_id && formik.errors.sell_account_id
-              }
+              intent={(errors.sell_account_id && touched.sell_account_id) && Intent.DANGER}
+              helperText={<ErrorMessage {...formik} name="sell_account_id" />}
+              className={classNames(
+                'form-group--sell-account',
+                'form-group--select-list',
+                Classes.FILL)}
             >
               <Select
                 items={accounts}
@@ -209,23 +229,39 @@ const ItemForm = ({
                 <Button
                   fill={true}
                   rightIcon='caret-down'
-                  text={getSelectedAccountLabel(
-                    'sell_account_id',
-                    'Select account'
-                  )}
+                  text={getSelectedAccountLabel('sell_account_id', 'Select account')}
                 />
               </Select>
             </FormGroup>
           </Col>
-          <Col md={4}>
+
+          <Col width={404}>
+            <h4>Sales Information</h4>
+
+            <FormGroup
+              label={'Cost Price'}
+              className={'form-group--item-cost-price'}
+              intent={(errors.cost_price && touched.cost_price) && Intent.DANGER}
+              helperText={<ErrorMessage {...formik} name="cost_price" />}
+              inline={true}
+            >
+              <InputGroup
+                medium={true}
+                intent={(errors.cost_price && touched.cost_price) && Intent.DANGER}
+                {...formik.getFieldProps('cost_price')}
+              />
+            </FormGroup>
+
             <FormGroup
               label={'Account'}
-              className={'form-group--item-cost_account_id'}
+              labelInfo={infoIcon}
               inline={true}
-              intent={formik.errors.cost_account_id && Intent.DANGER}
-              helperText={
-                formik.errors.cost_account_id && formik.errors.cost_account_id
-              }
+              intent={(errors.cost_account_id && touched.cost_account_id) && Intent.DANGER}
+              helperText={<ErrorMessage {...formik} name="cost_account_id" />}
+              className={classNames(
+                'form-group--cost-account',
+                'form-group--select-list',
+                Classes.FILL)}
             >
               <Select
                 items={accounts}
@@ -237,61 +273,65 @@ const ItemForm = ({
                 <Button
                   fill={true}
                   rightIcon='caret-down'
-                  text={getSelectedAccountLabel(
-                    'cost_account_id',
-                    'Select account'
-                  )}
+                  text={getSelectedAccountLabel('cost_account_id', 'Select account')}
                 />
               </Select>
             </FormGroup>
           </Col>
         </Row>
-        <FormGroup
-          label={'Inventory Account'}
-          className={'form-group--item-inventory_account_id'}
-          inline={true}
-          intent={formik.errors.inventory_account_id && Intent.DANGER}
-          helperText={
-            formik.errors.inventory_account_id &&
-            formik.errors.inventory_account_id
-          }
-        >
-          <Select
-            items={accounts}
-            itemRenderer={accountItem}
-            itemPredicate={filterAccounts}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onItemAccountSelect('inventory_account_id')}
-          >
-            <Button
-              fill={true}
-              rightIcon='caret-down'
-              text={getSelectedAccountLabel(
-                'inventory_account_id',
-                'Select account'
-              )}
-            />
-          </Select>
-        </FormGroup>
-        <FormGroup
-          label={'Opening Stock'}
-          className={'form-group--item-stock'}
-          intent={formik.errors.cost_price && Intent.DANGER}
-          helperText={formik.errors.stock && formik.errors.stock}
-          inline={true}
-        >
-          <InputGroup
-            medium={true}
-            intent={formik.errors.stock && Intent.DANGER}
-            {...formik.getFieldProps('stock')}
-          />
-        </FormGroup>
+
+        <Row className={'item-form__accounts-section mt2'}>
+          <Col width={404}>
+            <h4>Inventory Information</h4>
+
+            <FormGroup
+              label={'Inventory Account'}
+              inline={true}
+              intent={(errors.inventory_account_id && errors.inventory_account_id) && Intent.DANGER}
+              helperText={<ErrorMessage {...formik} name="inventory_account_id" />}
+              className={classNames(
+                'form-group--item-inventory_account',
+                'form-group--select-list',
+                Classes.FILL)}
+              >
+              <Select
+                items={accounts}
+                itemRenderer={accountItem}
+                itemPredicate={filterAccounts}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onItemAccountSelect('inventory_account_id')}
+              >
+                <Button
+                  fill={true}
+                  rightIcon='caret-down'
+                  text={getSelectedAccountLabel('inventory_account_id','Select account')}
+                />
+              </Select>
+            </FormGroup>
+
+            <FormGroup
+              label={'Opening Stock'}
+              className={'form-group--item-stock'}
+              intent={formik.errors.cost_price && Intent.DANGER}
+              helperText={formik.errors.stock && formik.errors.stock}
+              inline={true}
+            >
+              <InputGroup
+                medium={true}
+                intent={formik.errors.stock && Intent.DANGER}
+                {...formik.getFieldProps('stock')}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+
         <div class='form__floating-footer'>
           <Button intent={Intent.PRIMARY} type='submit'>
             Save
           </Button>
-          <Button>Save as Draft</Button>
-          <Button onClick={'handleClose'}>Close</Button>
+
+          <Button className={'ml1'}>Save as Draft</Button>
+          <Button className={'ml1'} onClick={'handleClose'}>Close</Button>
         </div>
       </form>
     </div>
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index 3bd800d92..e68fd5d25 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -30,12 +30,6 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import "components/data-table";
 @import "components/dialog";
   
-.bp3-breadcrumbs-collapsed::before{
-  background: escape-svg($breadcrumbs-collapsed-icon) center center;
-  width: 15px;
-  height: 15px;
-}
-
 // Pages
 @import "pages/dashboard";
 @import "pages/accounts-chart";
@@ -47,9 +41,8 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import "pages/view-form";
 @import "pages/manual-journals";
 @import "pages/item-category";
+@import "pages/items";
 
 // Views
 @import "views/filter-dropdown";
-@import "views/sidebar";
-
-
+@import "views/sidebar";
\ No newline at end of file
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index 60bc22c90..6d883aa73 100644
--- a/client/src/style/pages/dashboard.scss
+++ b/client/src/style/pages/dashboard.scss
@@ -92,6 +92,11 @@
       &:hover{
         background: $light-gray2;
       }
+      &::before{
+        background: escape-svg($breadcrumbs-collapsed-icon) center center;
+        width: 15px;
+        height: 15px;
+      }
     }
   }
 
diff --git a/client/src/style/pages/items.scss b/client/src/style/pages/items.scss
new file mode 100644
index 000000000..9631242f0
--- /dev/null
+++ b/client/src/style/pages/items.scss
@@ -0,0 +1,48 @@
+
+
+
+.item-form{
+  padding: 22px;
+  padding-bottom: 90px;
+
+  &__primary-section{
+    background-color: #FAFAFA;
+    padding: 40px 22px 22px;
+    margin: -22px -22px 22px;
+    background-color: #FAFAFA;
+  }
+  &__accounts-section{
+    h4{
+      margin: 0;
+      font-weight: 500;
+      margin-bottom: 20px;
+      color: #828282;
+    }
+    > div:first-of-type{
+      padding-right: 15px !important;
+    }
+
+    > div ~ div{
+      padding-left: 15px !important;
+      border-left: 1px solid #e8e8e8;
+    }
+  }
+
+  .#{$ns}-form-group{
+    .#{$ns}-label{
+      width: 130px;
+    }
+
+    .#{$ns}-form-content{
+      width: 250px;
+    }    
+  }
+
+  .form-group--item-type,
+  .form-group--item-name{
+    
+    .#{$ns}-form-content{
+      width: 350px;
+    }  
+  }
+}
\ No newline at end of file