feat: dashboard style.

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>

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>
   );

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>

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()
+    return (<Checkbox indeterminate={indeterminate} {...rest} />);
-    const resolvedRef = ref || defaultRef
-
-    useEffect(() => {
-      resolvedRef.current.indeterminate = indeterminate
-    }, [resolvedRef, indeterminate])
-
-    return (<Checkbox ref={resolvedRef} {...rest} />);
   }
 );
 
@@ -174,13 +167,14 @@ export default function DataTable({
                 })}>
                   <div {...column.getSortByToggleProps()}>
                     {column.render('Header')}
-                    <span>
+
-                      {column.isSorted
+                    {column.isSorted && (
-                        ? column.isSortedDesc
+                      <span className={classnames({
-                          ? (<Icon icon="sort-down" />)
+                        'sort-icon--desc': column.isSortedDesc,
-                          : (<Icon icon="sort-up" />)
+                        'sort-icon--asc': !column.isSortedDesc,
-                        : ''}
+                      }, 'sort-icon')}>
-                    </span>
+                      </span>
+                    )}
                   </div>
 
                   {column.canResize && (

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;
+}
+

client/src/config/app.js

@@ -1,4 +1,4 @@
 export default {
-  "app_name": "Ratteb",
+  "app_name": "BigCapital",
   "app_version": "0.0.1 (build 12344)",
 }

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'
+      },
     ]
   },
   {

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},
+    payload: {action: 'new', id: null, ...dialogPayload},
-    editAccount: dialogPayload && dialogPayload.action === 'edit' 
-      ? state.accounts.accountsById[dialogPayload.id] : {},
   };
 };
 
-export const mapDispatchToProps = (dispatch) => ({
+export default connect(mapStateToProps);
-  submitAccount: ({ form }) => dispatch(submitAccount({ form })),
-  fetchAccounts: () => dispatch(fetchAccountsList()),
-  fetchAccountTypes: () => dispatch(fetchAccountTypes()),
-  fetchAccount: (id) => dispatch(fetchAccount({ id })),
-});
-export default connect(mapStateToProps, mapDispatchToProps);

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 })),
+  requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
-  fetchAccountTypes: () => dispatch(fetchAccountTypes()),
+  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,
   }),

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),
     ]);
   });

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]);

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,
+  requestFetchAccounts,
-  fetchAccountTypes,
+  requestFetchAccountTypes,
+  requestFetchAccount,
   closeDialog,
-  submitAccount,
+  requestSubmitAccount,
-  fetchAccount,
+  requestEditAccount,
-  editAccount,
+  getAccountById
-  fetchAccountsTable,
 }) {
   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({
+  const { errors, values, touched } = useMemo(() => (formik), [formik]);
-    loading: true,
+
-    dialogActive: true,
+  // Set default account type.
-    selectedAccountType: null,
+  useEffect(() => {
-    selectedSubaccount: null
+    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
+      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
-        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 = () => {
+  // Handles dialog close.
-    closeDialog(name);
+  const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
-  };
 
   const fetchHook = useAsync(async () => {
     await Promise.all([
-      fetchAccounts(),
+      requestFetchAccounts(),
-      fetchAccountTypes(),
+      requestFetchAccountTypes(),
       // Fetch the target in case edit mode.
-      ...(payload.action === 'edit' ? [fetchAccount(payload.id)] : [])
+      ...(payload.action === 'edit' ?
-    ]);
+        [requestFetchAccount(payload.id)] : [])
-  }, false);
-
-  const refetchAccounts = useAsync(async () => {
-    await Promise.all([
-      fetchAccountsTable(),
     ]);
   }, false);
 
   // Fetch requests on dialog opening.
-  const onDialogOpening = async () => { fetchHook.execute(); };
+  const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
 
-  const onChangeAccountType = accountType => {
+  const onChangeAccountType = useCallback((accountType) => {
-    setState({ ...state, selectedAccountType: accountType.name });
+    setSelectedAccountType(accountType);
     formik.setFieldValue('account_type_id', accountType.id);
-  };
+  }, [setSelectedAccountType, formik]);
-  const onChangeSubaccount = account => {
-    setState({ ...state, selectedSubaccount: account });
-    formik.setFieldValue('parent_account_id', account.id);
-  };
 
-  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({
+    setSelectedSubaccount(null);
-      ...state,
+    setSelectedAccountType(null);
-      selectedSubaccount: null,
+  }, [formik]);
-      selectedAccountType: null
+
-    });
+  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={
+            helperText={<ErrorMessage name="account_type_id" {...formik} />}
-              formik.errors.account_type_id && formik.errors.account_type_id
+            intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
-            }
-            intent={formik.errors.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}
+            intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={formik.errors.name && formik.errors.name}
+            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}
+            intent={(errors.code && touched.code) && Intent.DANGER}
-            helperText={formik.errors.code && formik.errors.code}
+            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'}
+              label={'Parent Account'}
-              className="{'form-group--sub-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
+                    selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
-                      ? state.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>

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({
+  const [selectedParentCategory, setParentCategory] = useState(null);
-    selectedParentCategory: 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 => {
+          .catch((error) => {
-            alert(error.message);
+            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 = () => {
+  const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
-    fetchHook.execute();
-  };
 
-  const onChangeParentCategory = parentCategory => {
+  const onChangeParentCategory = useCallback((parentCategory) => {
-    setState({ ...state, selectedParentCategory: parentCategory.name });
+    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={{
+      className={classNames({
-        'dialog--loading': state.isLoading,
+        'dialog--loading': fetchHook.pending,
-        'dialog--item-form': true
+      },
-      }}
+        '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}
+            intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={formik.errors.name && formik.errors.name}
+            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={
+            helperText={(<ErrorMessage name="parent_category_id" {...formik} />)}
-              formik.errors.parent_category_id &&
+            intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
-              formik.errors.parent_category_id
-            }
-            intent={formik.errors.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}
+            intent={(errors.description && touched.description) && Intent.DANGER}
-            helperText={formik.errors.description && formik.errors.credential}
+            helperText={(<ErrorMessage name="description" {...formik} />)}
             inline={true}
           >
             <TextArea

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(),
     ]);
   });
 

client/src/store/accounts/accounts.selectors.js

@@ -8,4 +8,4 @@ export const getAccountsItems = (state, viewId) => {
   return typeof accountsView === 'object'
     ? pickItemsFromIds(accountsItems, accountsView.ids) || []
     : [];
-};
+};

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));
 }

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";

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;
+        }
       }
     }
 

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;
+}

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{

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;

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;
+      }
+    }    
+  }
 }

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;
+          }
+        }
+      }
+    }
+  }
+}

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;
+        color: #767b9b;
-        margin-right: 12px;
+        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;
     }