fix Merge conflict.

client/src/components/Accounts/AccountsActionsBar.js

@@ -10,11 +10,11 @@ import {
   Menu,
   Popover,
   PopoverInteractionKind,
-  Position,
+  Position
-} from "@blueprintjs/core";
+} from '@blueprintjs/core';
 import classNames from 'classnames';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {useRouteMatch} from 'react-router-dom';
+import { useRouteMatch } from 'react-router-dom';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import DialogConnect from 'connectors/Dialog.connector';
 import AccountsConnect from 'connectors/Accounts.connector';
@@ -52,22 +52,24 @@ function AccountsActionsBar({
           content={<Menu>{viewsMenuItems}</Menu>}
           minimal={true}
           interactionKind={PopoverInteractionKind.HOVER}
-          position={Position.BOTTOM_LEFT}>
+          position={Position.BOTTOM_LEFT}
-          
+        >
           <Button
             className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={ <Icon icon="table" /> }
+            icon={<Icon icon='table' />}
-            text="Table Views"
+            text='Table Views'
-            rightIcon={'caret-down'} />
+            rightIcon={'caret-down'}
+          />
         </Popover>
 
         <NavbarDivider />
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="plus" /> }
+          icon={<Icon icon='plus' />}
-          text="New Account"
+          text='New Account'
-          onClick={onClickNewAccount} />
+          onClick={onClickNewAccount}
+        />
 
         <Popover
           content={filterDropdown}
@@ -84,32 +86,38 @@ function AccountsActionsBar({
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={ <Icon icon="trash" />} 
+            icon={<Icon icon='trash' />}
-            text="Archive" />)}
+            text='Archive'
+          />
+        )}
 
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={ <Icon icon="trash" />} 
+            icon={<Icon icon='trash' />}
-            text="Delete" />)}
+            text='Delete'
+          />
+        )}
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="file-import" /> }
+          icon={<Icon icon='file-import' />}
-          text="Import" />
+          text='Import'
+        />
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="file-export" /> }
+          icon={<Icon icon='file-export' />}
-          text="Export" />
+          text='Export'
+        />
       </NavbarGroup>
     </DashboardActionsBar>
-  )
+  );
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
-    bulkActions: state.accounts.bulkActions,
+    bulkActions: state.accounts.bulkActions
   };
 };
 

client/src/components/Accounts/AccountsDataTable.js

@@ -3,9 +3,9 @@ import {
   ColumnsDirective,
   ColumnDirective,
   Inject,
-  Sort,
+  Sort
 } from '@syncfusion/ej2-react-grids';
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import {
   Button,
   Popover,
@@ -13,9 +13,9 @@ import {
   MenuItem,
   MenuDivider,
   Position,
-  Checkbox,
+  Checkbox
 } from '@blueprintjs/core';
-import {useParams} from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import useAsync from 'hooks/async';
 import Icon from 'components/Icon';
 import { handleBooleanChange, compose } from 'utils';
@@ -71,96 +71,118 @@ function AccountsDataTable({
     }
   }, [customViewId]);
 
-  useEffect(() => () => {
+  useEffect(
-    // Clear page subtitle when unmount the page.
+    () => () => {
-    changePageSubtitle('');
+      // Clear page subtitle when unmount the page.
-  }, []);
+      changePageSubtitle('');
+    },
+    []
+  );
 
-  const handleEditAccount = (account) => () => {
+  const handleEditAccount = account => () => {
-    openDialog('account-form', {action: 'edit', id: account.id});
+    openDialog('account-form', { action: 'edit', id: account.id });
   };
-  const actionMenuList = (account) =>
+  const actionMenuList = account => (
-    (<Menu>
+    <Menu>
-      <MenuItem text="View Details" />
+      <MenuItem text='View Details' />
       <MenuDivider />
-      <MenuItem text="Edit Account" onClick={handleEditAccount(account)} />
+      <MenuItem text='Edit Account' onClick={handleEditAccount(account)} />
-      <MenuItem text="New Account" />
+      <MenuItem text='New Account' />
       <MenuDivider />
-      <MenuItem text="Inactivate Account" onClick={() => onInactiveAccount(account)} />
+      <MenuItem
-      <MenuItem text="Delete Account" onClick={() => onDeleteAccount(account)} />
+        text='Inactivate Account'
-    </Menu>);
+        onClick={() => onInactiveAccount(account)}
+      />
+      <MenuItem
+        text='Delete Account'
+        onClick={() => onDeleteAccount(account)}
+      />
+    </Menu>
+  );
 
-  const handleClickCheckboxBulk = (account) => handleBooleanChange((value) => {
+  const handleClickCheckboxBulk = account =>
-    if (value) {
+    handleBooleanChange(value => {
-      addBulkActionAccount(account.id);
+      if (value) {
-    } else {
+        addBulkActionAccount(account.id);
-      removeBulkActionAccount(account.id);
+      } else {
-    }
+        removeBulkActionAccount(account.id);
-  });
+      }
+    });
 
   const columns = [
     {
       field: '',
       headerText: '',
-      template: (account) => (<Checkbox onChange={handleClickCheckboxBulk(account)} />),
+      template: account => (
-      customAttributes: {class: 'checkbox-row'}
+        <Checkbox onChange={handleClickCheckboxBulk(account)} />
+      ),
+      customAttributes: { class: 'checkbox-row' }
     },
     {
       field: 'name',
       headerText: 'Account Name',
-      customAttributes: {class: 'account-name'},
+      customAttributes: { class: 'account-name' }
     },
     {
       field: 'code',
-      headerText: 'Code',
+      headerText: 'Code'
     },
     {
       field: 'type.name',
-      headerText: 'Type',
+      headerText: 'Type'
     },
     {
       headerText: 'Normal',
-      template: (column) => {
+      template: column => {
         const type = column.type ? column.type.normal : '';
-        return type === 'credit' ? (<Icon icon={'arrow-down'} />) : ((<Icon icon={'arrow-up'} />));
+        return type === 'credit' ? (
+          <Icon icon={'arrow-down'} />
+        ) : (
+          <Icon icon={'arrow-up'} />
+        );
       },
-      customAttributes: {class: 'account-normal'},
+      customAttributes: { class: 'account-normal' }
     },
     {
       field: 'balance',
       headerText: 'Balance',
-      template: (column, data) => { return <span>$10,000</span>; },
+      template: (column, data) => {
+        return <span>$10,000</span>;
+      }
     },
     {
       headerText: '',
-      template: (account) => (
+      template: account => (
-        <Popover content={actionMenuList(account)} position={Position.RIGHT_BOTTOM}>
+        <Popover
-          <Button icon={<Icon icon="ellipsis-h" />} />
+          content={actionMenuList(account)}
+          position={Position.RIGHT_BOTTOM}
+        >
+          <Button icon={<Icon icon='ellipsis-h' />} />
         </Popover>
-      ),
+      )
     }
   ];
 
-  const dataStateChange = (state) => {
+  const dataStateChange = state => {};
-    
-  }
   return (
     <LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
       <GridComponent
         allowSorting={true}
         allowGrouping={true}
-        dataSource={{result: accounts, count: 12}}
+        dataSource={{ result: accounts, count: 12 }}
         dataStateChange={dataStateChange}
-        >
+      >
         <ColumnsDirective>
-          {columns.map((column) => {
+          {columns.map(column => {
-            return (<ColumnDirective
+            return (
-              field={column.field}
+              <ColumnDirective
-              headerText={column.headerText}
+                field={column.field}
-              template={column.template}
+                headerText={column.headerText}
-              allowSorting={true}
+                template={column.template}
-              customAttributes={column.customAttributes}
+                allowSorting={true}
-              />);
+                customAttributes={column.customAttributes}
+              />
+            );
           })}
         </ColumnsDirective>
         <Inject services={[Sort]} />
@@ -173,5 +195,5 @@ export default compose(
   AccountsConnect,
   DialogConnect,
   DashboardConnect,
-  ViewConnect,
+  ViewConnect
 )(AccountsDataTable);

client/src/components/Accounts/AccountsViewsTabs.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {useHistory} from 'react-router';
+import { useHistory } from 'react-router';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import {
   Alignment,
   Navbar,
@@ -8,11 +8,11 @@ import {
   Tabs,
   Tab,
   Button
-} from "@blueprintjs/core";
+} from '@blueprintjs/core';
-import {useParams} from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import Icon from 'components/Icon';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
-import {compose} from 'utils';
+import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
 
 function AccountsViewsTabs({ views }) {
@@ -22,29 +22,30 @@ function AccountsViewsTabs({ views }) {
   const handleClickNewView = () => {
     history.push('/dashboard/custom_views/accounts/new');
   };
-  const tabs = views.map((view) => {
+  const tabs = views.map(view => {
     const baseUrl = '/dashboard/accounts';
-    const link = (<Link to={`${baseUrl}/${view.id}/custom_view`}>{ view.name }</Link>);
+    const link = (
-    return (<Tab id={`custom_view_${view.id}`} title={link} />);
+      <Link to={`${baseUrl}/${view.id}/custom_view`}>{view.name}</Link>
+    );
+    return <Tab id={`custom_view_${view.id}`} title={link} />;
   });
   return (
-    <Navbar className="navbar--dashboard-views">
+    <Navbar className='navbar--dashboard-views'>
-      <NavbarGroup
+      <NavbarGroup align={Alignment.LEFT}>
-        align={Alignment.LEFT}>
         <Tabs
-          id="navbar"
+          id='navbar'
           large={true}
           selectedTabId={`custom_view_${customViewId}`}
-          className="tabs--dashboard-views">
+          className='tabs--dashboard-views'
-          <Tab 
+        >
-            id="all"
+          <Tab id='all' title={<Link to={`/dashboard/accounts`}>All</Link>} />
-            title={<Link to={`/dashboard/accounts`}>All</Link>} />
 
-          { tabs }
+          {tabs}
           <Button
-            className="button--new-view"
+            className='button--new-view'
-            icon={<Icon icon="plus" />}
+            icon={<Icon icon='plus' />}
-            onClick={handleClickNewView} />
+            onClick={handleClickNewView}
+          />
         </Tabs>
       </NavbarGroup>
     </Navbar>

client/src/components/Dashboard/DashboardActionsBar.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import classnames from 'classnames';
-import { Navbar } from "@blueprintjs/core";
+import { Navbar } from '@blueprintjs/core';
 
-export default function DashboardActionsBar({
+export default function DashboardActionsBar({ children, name }) {
-  children, name
-}) {
   return (
-    <div className={classnames({
+    <div
-      'dashboard__actions-bar': true,
+      className={classnames({
-      [`dashboard__actions-bar--${name}`]: !!name,
+        'dashboard__actions-bar': true,
-    })}>
+        [`dashboard__actions-bar--${name}`]: !!name
-      <Navbar className="navbar--dashboard-actions-bar">
+      })}
-        { children }
+    >
-      </Navbar>
+      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
     </div>
   );
 }

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -3,17 +3,22 @@ import {
   CollapsibleList,
   MenuItem,
   Classes,
-  Boundary,
+  Boundary
-} from "@blueprintjs/core";
+} from '@blueprintjs/core';
-import classNames from "classnames";
+import classNames from 'classnames';
 
 export default function DashboardBreadcrumbs() {
-
   function renderBreadcrumb(props) {
     if (props.href != null) {
       return <a className={Classes.BREADCRUMB}>{props.text}</a>;
     } else {
-      return <span className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}>{props.text}</span>;
+      return (
+        <span
+          className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}
+        >
+          {props.text}
+        </span>
+      );
     }
   }
   return (
@@ -24,12 +29,12 @@ export default function DashboardBreadcrumbs() {
       collapseFrom={Boundary.START}
       visibleItemCount={0}
     >
-      <MenuItem icon="folder-close" text="All files" href="#" />
+      <MenuItem icon='folder-close' text='All files' href='#' />
-      <MenuItem icon="folder-close" text="Users" href="#" />
+      <MenuItem icon='folder-close' text='Users' href='#' />
-      <MenuItem icon="folder-close" text="Jane Person" href="#" />
+      <MenuItem icon='folder-close' text='Jane Person' href='#' />
-      <MenuItem icon="folder-close" text="My documents" href="#" />
+      <MenuItem icon='folder-close' text='My documents' href='#' />
-      <MenuItem icon="folder-close" text="Classy dayjob" href="#" />
+      <MenuItem icon='folder-close' text='Classy dayjob' href='#' />
-      <MenuItem icon="document" text="How to crush it" />
+      <MenuItem icon='document' text='How to crush it' />
-  </CollapsibleList>
+    </CollapsibleList>
   );
 }

client/src/components/Expenses/ExpenseForm.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import {
@@ -9,9 +9,9 @@ import {
   Position,
   Button,
   TextArea,
-  ControlGroup,
+  ControlGroup
 } from '@blueprintjs/core';
-import { DateInput } from "@blueprintjs/datetime";
+import { DateInput } from '@blueprintjs/datetime';
 import { Select } from '@blueprintjs/select';
 import { useIntl } from 'react-intl';
 import { momentFormatter } from 'utils';
@@ -23,13 +23,14 @@ export default function ExpenseForm({
   editExpense,
   submitExpense,
   expenseDetails,
-  currencies,
+  currencies
 }) {
   const intl = useIntl();
+  console.log({ accounts });
 
   const [state, setState] = useState({
     selectedExpenseAccount: null,
-    selectedPaymentAccount: null,
+    selectedPaymentAccount: null
   });
   const validationSchema = Yup.object().shape({
     date: Yup.date().required(),
@@ -39,40 +40,43 @@ export default function ExpenseForm({
     amount: Yup.number().required(),
     currency_code: Yup.string().required(),
     publish: Yup.boolean(),
-    exchange_rate: Yup.number(),
+    exchange_rate: Yup.number()
   });
 
   const formik = useFormik({
     enableReinitialize: true,
     validationSchema: validationSchema,
     initialValues: {
-      date: null,
+      date: null
     },
-    onSubmit: (values) => {
+    onSubmit: values => {
-      submitExpense(values).then((response) => {
+      submitExpense(values)
-        AppToaster.show({
+        .then(response => {
-          message: 'the_expense_has_been_submit',
+          AppToaster.show({
-        });
+            message: 'the_expense_has_been_submit'
-      }).catch((error) => {
+          });
-        
+        })
-      })
+        .catch(error => {});
     }
   });
 
   // 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} />)
+    return (
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
+    );
   };
 
-  const onChangeAccount = () => {
+  const onChangeAccount = () => {};
 
-  };
+  const onChangePaymentAccount = () => {};
 
-  const onChangePaymentAccount = () => {
+  const handleDateChange = date => {
-
-  };
-
-  const handleDateChange = (date) => {
     const formatted = moment(date).format('YYYY/MM/DD');
     formik.setFieldValue('date', formatted);
   };
@@ -89,44 +93,45 @@ export default function ExpenseForm({
     }
   };
 
-  const onExpenseAccountSelect = (account) => {
+  const onExpenseAccountSelect = account => {
     setState({ ...state, selectedExpenseAccount: account });
     formik.setFieldValue('expense_account_id', account.id);
   };
 
-  const onChangePaymentAccountSelect = (account) => {
+  const onChangePaymentAccountSelect = account => {
     setState({ ...state, selectedPaymentAccount: account });
     formik.setFieldValue('payment_account_id', account.id);
   };
 
-  const onAmountCurrencySelect = (currency) => {
+  const onAmountCurrencySelect = currency => {
     formik.setFieldValue('currency_code', currency.id);
   };
 
-  const paymentAccountLabel = state.selectedPaymentAccount ? 
+  const paymentAccountLabel = state.selectedPaymentAccount
-    state.selectedPaymentAccount.name : 'Select Payment Account';
+    ? state.selectedPaymentAccount.name
+    : 'Select Payment Account';
 
-  const expenseAccountLabel = state.selectedExpenseAccount ?
+  const expenseAccountLabel = state.selectedExpenseAccount
-    state.selectedExpenseAccount.name : 'Select Expense Account';
+    ? state.selectedExpenseAccount.name
+    : 'Select Expense Account';
 
-  const handleClose = () => {
+  const handleClose = () => {};
-
-  };
 
   return (
-    <div class="expense-form">
+    <div class='expense-form'>
       <form onSubmit={formik.handleSubmit}>
         <FormGroup
           label={'Date'}
           inline={true}
           intent={formik.errors.date && Intent.DANGER}
-          helperText={formik.errors.date && formik.errors.date}>
+          helperText={formik.errors.date && formik.errors.date}
-
+        >
           <DateInput
             {...momentFormatter('YYYY/MM/DD')}
             defaultValue={new Date()}
             onChange={handleDateChange}
-            popoverProps={{ position: Position.BOTTOM }} />
+            popoverProps={{ position: Position.BOTTOM }}
+          />
         </FormGroup>
 
         <FormGroup
@@ -134,19 +139,22 @@ export default function ExpenseForm({
           className={'form-group--expense-account'}
           inline={true}
           intent={formik.errors.expense_account_id && Intent.DANGER}
-          helperText={formik.errors.expense_account_id && formik.errors.expense_account_id}>
+          helperText={
-
+            formik.errors.expense_account_id && formik.errors.expense_account_id
+          }
+        >
           <Select
             items={accounts}
             itemRenderer={accountItem}
             itemPredicate={filterAccountsPredicater}
             popoverProps={{ minimal: true }}
-            onItemSelect={onExpenseAccountSelect}>
+            onItemSelect={onExpenseAccountSelect}
-
+          >
             <Button
               fill={true}
-              rightIcon="caret-down"
+              rightIcon='caret-down'
-              text={expenseAccountLabel} />
+              text={expenseAccountLabel}
+            />
           </Select>
         </FormGroup>
 
@@ -155,33 +163,38 @@ export default function ExpenseForm({
           className={'form-group--amount'}
           intent={formik.errors.amount && Intent.DANGER}
           helperText={formik.errors.amount && formik.errors.amount}
-          inline={true}>
+          inline={true}
-
+        >
           <ControlGroup>
             <Select
-              items={currencies.map(c => ({ id: c.currency_code, name: c.currency_code }))}
+              items={currencies.map(c => ({
+                id: c.currency_code,
+                name: c.currency_code
+              }))}
               itemRenderer={accountItem}
               itemPredicate={filterAccountsPredicater}
               popoverProps={{ minimal: true }}
-              onItemSelect={onAmountCurrencySelect}>
+              onItemSelect={onAmountCurrencySelect}
-
+            >
               <Button
-                rightIcon="caret-down"
+                rightIcon='caret-down'
-                text={formik.values.currency_code} />
+                text={formik.values.currency_code}
+              />
             </Select>
 
             <InputGroup
               medium={true}
               intent={formik.errors.amount && Intent.DANGER}
-              {...formik.getFieldProps('amount')} />
+              {...formik.getFieldProps('amount')}
+            />
           </ControlGroup>
         </FormGroup>
 
         <FormGroup
           label={'Exchange Rate'}
           className={'form-group--exchange-rate'}
-          inline={true}>
+          inline={true}
-
+        >
           <InputGroup />
         </FormGroup>
 
@@ -190,35 +203,41 @@ export default function ExpenseForm({
           className={'form-group--payment-account'}
           inline={true}
           intent={formik.errors.payment_account_id && Intent.DANGER}
-          helperText={formik.errors.payment_account_id && formik.errors.payment_account_id}>
+          helperText={
-
+            formik.errors.payment_account_id && formik.errors.payment_account_id
+          }
+        >
           <Select
             items={accounts}
             itemRenderer={accountItem}
             itemPredicate={filterAccountsPredicater}
             popoverProps={{ minimal: true }}
-            onItemSelect={onChangePaymentAccountSelect}>
+            onItemSelect={onChangePaymentAccountSelect}
-
+          >
             <Button
               fill={true}
-              rightIcon="caret-down"
+              rightIcon='caret-down'
-              text={paymentAccountLabel} />
+              text={paymentAccountLabel}
+            />
           </Select>
         </FormGroup>
 
         <FormGroup
           label={'Description'}
           className={'form-group--description'}
-          inline={true}>
+          inline={true}
-          
+        >
           <TextArea
             growVertically={true}
             large={true}
-            {...formik.getFieldProps('description')} />
+            {...formik.getFieldProps('description')}
+          />
         </FormGroup>
 
-        <div class="form__floating-footer">
+        <div class='form__floating-footer'>
-          <Button intent={Intent.PRIMARY} type="submit">Save</Button>
+          <Button intent={Intent.PRIMARY} type='submit'>
+            Save
+          </Button>
           <Button>Save as Draft</Button>
           <Button onClick={handleClose}>Close</Button>
         </div>

client/src/components/Expenses/ExpensesActionsBar.js

@@ -1,37 +1,32 @@
 import React from 'react';
-import {
+import { Button, AnchorButton, Classes, Icon } from '@blueprintjs/core';
-  Button,
-  AnchorButton,
-  Classes,
-  Icon
-} from '@blueprintjs/core';
 
 export default function ExpensesActionsBar() {
-
+  const onClickNewAccount = () => {};
-  const onClickNewAccount = () => {
-
-  };
 
   return (
-    <div class="dashboard__actions-bar">
+    <div class='dashboard__actions-bar'>
       <AnchorButton
         className={Classes.MINIMAL}
-        icon={ <Icon icon="plus" /> }
+        icon={<Icon icon='plus' />}
-        href="/dashboard/expenses/new"
+        href='/dashboard/expenses/new'
-        text="New Expense"
+        text='New Expense'
-        onClick={onClickNewAccount} />
+        onClick={onClickNewAccount}
+      />
 
       <Button
         className={Classes.MINIMAL}
-        icon={ <Icon icon="plus" /> }
+        icon={<Icon icon='plus' />}
-        text="Delete Expense"
+        text='Delete Expense'
-        onClick={onClickNewAccount} />
+        onClick={onClickNewAccount}
+      />
 
       <Button
         className={Classes.MINIMAL}
-        icon={ <Icon icon="plus" /> }
+        icon={<Icon icon='plus' />}
-        text="Bulk Update"
+        text='Bulk Update'
-        onClick={onClickNewAccount} />
+        onClick={onClickNewAccount}
+      />
     </div>
-  )
+  );
 }

client/src/components/Items/ItemForm.js

@@ -1,15 +1,298 @@
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
 
+import {
+  FormGroup,
+  MenuItem,
+  Intent,
+  InputGroup,
+  HTMLSelect,
+  Button
+} from '@blueprintjs/core';
+import { Row, Col } from 'react-grid-system';
+import { Select } from '@blueprintjs/select';
+import AppToaster from 'components/AppToaster';
 
-export default function ItemForm() {
+export default function ItemForm({
+  submitItem,
+  accounts,
+  category,
+}) {
+  const [selectedAccounts, setSelectedAccounts] = useState({});
 
-  // Type
+  const ItemTypeDisplay = [
-  // Name
+    { 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(),
+    sku: Yup.string().required(),
+    cost_price: Yup.number().required(),
+    sell_price: Yup.number().required(),
+    cost_account_id: Yup.number().required(),
+    sell_account_id: Yup.number().required(),
+    inventory_account_id: Yup.number().required(),
+    category_id: Yup.number().required(),
+    stock: Yup.string() || Yup.boolean()
+  });
+  const formik = useFormik({
+    enableReinitialize: true,
+    validationSchema: validationSchema,
+    initialValues: {},
+    onSubmit: values => {
+      submitItem(values)
+        .then(response => {
+          AppToaster.show({
+            message: 'The_Items_has_been_Submit'
+          });
+        })
+        .catch(err => {
+          alert(err.message);
+        });
+    }
+  });
+
+  const accountItem = (item, { handleClick }) => (
+    <MenuItem key={item.id} text={item.name} label={item.code} onClick={handleClick} />
+  );
+  // Filter Account Items
+  const filterAccounts = (query, account, _index, exactMatch) => {
+    const normalizedTitle = account.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  const onItemAccountSelect = filedName => {
+    return account => {
+      setSelectedAccounts({
+        ...selectedAccounts,
+        [filedName]: account
+      });
+      formik.setFieldValue(filedName, account.id);
+    };
+  };
+
+  const getSelectedAccountLabel = (fieldName, defaultLabel) => {
+    return typeof selectedAccounts[fieldName] !== 'undefined'
+      ? selectedAccounts[fieldName].name
+      : defaultLabel;
+  };
 
   return (
-    <div class="item-form">
+    <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
+            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')}
+          >
+            <Button
+              fill={true}
+              rightIcon='caret-down'
+              text={getSelectedAccountLabel('category_id', 'Select account')}
+            />
+          </Select>
+        </FormGroup>
+
+        <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}
+              inline={true}
+            >
+              <InputGroup
+                medium={true}
+                intent={formik.errors.sell_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'}
+              inline={true}
+              intent={formik.errors.sell_account_id && Intent.DANGER}
+              helperText={
+                formik.errors.sell_account_id && formik.errors.sell_account_id
+              }
+            >
+              <Select
+                items={accounts}
+                itemRenderer={accountItem}
+                itemPredicate={filterAccounts}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onItemAccountSelect('sell_account_id')}
+              >
+                <Button
+                  fill={true}
+                  rightIcon='caret-down'
+                  text={getSelectedAccountLabel(
+                    'sell_account_id',
+                    'Select account'
+                  )}
+                />
+              </Select>
+            </FormGroup>
+          </Col>
+          <Col md={4}>
+            <FormGroup
+              label={'Account'}
+              className={'form-group--item-cost_account_id'}
+              inline={true}
+              intent={formik.errors.cost_account_id && Intent.DANGER}
+              helperText={
+                formik.errors.cost_account_id && formik.errors.cost_account_id
+              }
+            >
+              <Select
+                items={accounts}
+                itemRenderer={accountItem}
+                itemPredicate={filterAccounts}
+                popoverProps={{ minimal: true }}
+                onItemSelect={onItemAccountSelect('cost_account_id')}
+              >
+                <Button
+                  fill={true}
+                  rightIcon='caret-down'
+                  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>
+        <div class='form__floating-footer'>
+          <Button intent={Intent.PRIMARY} type='submit'>
+            Save
+          </Button>
+          <Button>Save as Draft</Button>
+          <Button onClick={'handleClose'}>Close</Button>
+        </div>
+      </form>
     </div>
-  )
+  );
-};
+}

client/src/components/Items/ItemsActionsBar.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, AnchorButton, Classes, Icon } from '@blueprintjs/core';
+
+const ItemsActionsBar = () => {
+
+  return (
+  <div className='dashob'>
+    ItemsActionsBar 22
+    </div>
+  );
+};
+
+export default ItemsActionsBar;

client/src/components/LoadingIndicator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Spinner} from '@blueprintjs/core';
+import { Spinner } from '@blueprintjs/core';
 
 export default function LoadingIndicator({
   loading,
@@ -8,10 +8,13 @@ export default function LoadingIndicator({
 }) {
   return (
     <>
-      { (loading) ? (
+      {loading ? (
-        <div class="dashboard__loading-indicator">
+        <div class='dashboard__loading-indicator'>
           <Spinner size={spinnerSize} value={null} />
-        </div>) : children }
+        </div>
+      ) : (
+        children
+      )}
     </>
   );
 }

client/src/components/MenuItem.js

@@ -161,7 +161,9 @@ export default class MenuItem extends AbstractPureComponent2 {
             className,
         );
  
-        const handleAnchorClick = () => {
+        const handleAnchorClick = (event) => {
+          htmlProps.onClick && htmlProps.onClick(event);
+
           if (dropdownType === 'collapse') {
             this.setState({ isCollapseActive: !this.state.isCollapseActive });
           }          
@@ -210,7 +212,9 @@ export default class MenuItem extends AbstractPureComponent2 {
       return (
         <>
           {target}
-          <Collapse isOpen={this.state.isCollapseActive}>{ children }</Collapse>
+          <Collapse isOpen={this.state.isCollapseActive} keepChildrenMounted={true}>
+            { children }
+          </Collapse>
         </>
        );
     }

client/src/components/Sidebar/SidebarMenu.js

@@ -24,17 +24,14 @@ export default function SidebarMenu() {
             children={children}
             dropdownType={item.dropdownType || 'collapse'}
             onClick={() => {
-              history.push(item.href);
+              if (item.href) {
+                history.push(item.href);
+              }              
             }} />
       );
     });
   };
-
   const items = menuItemsMapper(sidebarMenuList);
   
-  return (
+  return (<Menu className="sidebar-menu">{items}</Menu>);
-    <Menu className="sidebar-menu">
-      {items}
-    </Menu>
-  )
 };

client/src/config/sidebarMenu.js

@@ -1,18 +1,16 @@
-
-
 export default [
   {
-    divider: true,
+    divider: true
   },
   {
     icon: 'homepage',
     iconSize: 20,
     text: 'Homepage',
     disabled: false,
-    href: '/dashboard/homepage',
+    href: '/dashboard/homepage'
   },
   {
-    divider: true,
+    divider: true
   },
   {
     icon: 'homepage',
@@ -36,7 +34,6 @@ export default [
     icon: 'balance-scale',
     iconSize: 20,
     text: 'Financial',
-    href: '/dashboard/accounts',
     children: [
       {
         text: 'Accounts Chart',
@@ -52,7 +49,6 @@ export default [
     icon: 'university',
     iconSize: 20,
     text: 'Banking',
-    href: '/dashboard/accounts',
     children: [
       
     ]
@@ -61,7 +57,6 @@ export default [
     icon: 'shopping-cart',
     iconSize: 20,
     text: 'Sales',
-    href: '/dashboard/accounts',
     children: [
      
     ]
@@ -70,13 +65,12 @@ export default [
     icon: 'balance-scale',
     iconSize: 20,
     text: 'Purchases',
-    href: '/dashboard/accounts',
     children: [
       {
         icon: 'cut',
         text: 'cut',
         label: '⌘C',
-        disabled: false,
+        disabled: false
       }
     ]
   },
@@ -84,7 +78,6 @@ export default [
     icon: 'analytics',
     iconSize: 18,
     text: 'Financial Reports',
-    href: '/dashboard/accounts',
     children: [
       {
         text: 'Balance Sheet',
@@ -124,14 +117,14 @@ export default [
     ]
   },
   {
-    divider: true,
+    divider: true
   },
   {
     text: 'Preferences',
-    href: '/dashboard/preferences',
+    href: '/dashboard/preferences'
   },
   {
     text: 'Auditing System',
-    href: '/dashboard/accounts',
+    href: '/dashboard/accounts'
-  },
+  }
-]
+];

client/src/connectors/Dashboard.connector.js

@@ -1,6 +1,4 @@
 
-
-
 import { connect } from 'react-redux';
 import t from 'store/types';
 

client/src/connectors/Items.connect.js

@@ -5,6 +5,7 @@ import {
   fetchItems,
   fetchItem,
   deleteItem,
+  submitItem,
 } from 'store/items/items.actions';
 import {
   getResourceViews,
@@ -30,6 +31,7 @@ export const mapStateToProps = (state, props) => {
 export const mapDispatchToProps = (dispatch) => ({
   fetchItems: (query) => dispatch(fetchItems({ query })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
+  requestSubmitItem: (form) => dispatch(submitItem({ form })),
   addBulkActionItem: (id) => dispatch({
     type: t.ITEM_BULK_ACTION_ADD, itemId: id
   }),

client/src/containers/Dashboard/Dialogs/AccountFormDialog.js

@@ -1,4 +1,4 @@
-import React, { useState} from 'react';
+import React, { useState } from 'react';
 import {
   Button,
   Classes,
@@ -7,9 +7,9 @@ import {
   Intent,
   TextArea,
   MenuItem,
-  Checkbox,
+  Checkbox
-} from "@blueprintjs/core";
+} from '@blueprintjs/core';
-import {Select} from '@blueprintjs/select';
+import { Select } from '@blueprintjs/select';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { useIntl } from 'react-intl';
@@ -22,7 +22,7 @@ import DialogConnect from 'connectors/Dialog.connector';
 import DialogReduxConnect from 'components/DialogReduxConnect';
 import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
 
-function AccountFormDialog ({
+function AccountFormDialog({
   name,
   payload,
   isOpen,
@@ -37,53 +37,49 @@ function AccountFormDialog ({
 }) {
   const intl = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
-    name: Yup
+    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
-      .string()
+    code: Yup.number(intl.formatMessage({ id: 'field_name_must_be_number' })),
-      .required(intl.formatMessage({ 'id': 'required' })),
+    account_type_id: Yup.string()
-    code: Yup
-      .number(intl.formatMessage({ id: 'field_name_must_be_number' })),
-    account_type_id: Yup
-      .string()
       .nullable()
-      .required(intl.formatMessage({ 'id': 'required' })),
+      .required(intl.formatMessage({ id: 'required' })),
-    description: Yup.string().trim(),
+    description: Yup.string().trim()
   });
 
   // Formik
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      ...payload.action === 'edit' && editAccount,
+      ...(payload.action === 'edit' && editAccount)
     },
     validationSchema: accountFormValidationSchema,
-    onSubmit: (values) => {
+    onSubmit: values => {
       const exclude = ['subaccount'];
 
       if (payload.action === 'edit') {
         editAccount({
           payload: payload.id,
           form: { ...omit(values, exclude) }
-        }).then((response) => {
+        }).then(response => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_account_has_been_edited',
+            message: 'the_account_has_been_edited'
           });
         });
       } else {
         submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_account_has_been_submit',
+            message: 'the_account_has_been_submit'
           });
         });
       }
-    },
+    }
   });
   const [state, setState] = useState({
     loading: true,
     dialogActive: true,
     selectedAccountType: null,
-    selectedSubaccount: null,
+    selectedSubaccount: null
   });
 
   // Filters accounts types items.
@@ -100,12 +96,19 @@ function AccountFormDialog ({
 
   // Account type item of select filed.
   const accountTypeItem = (item, { handleClick, modifiers, query }) => {
-    return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
+    return <MenuItem text={item.name} key={item.id} onClick={handleClick} />;
   };
 
   // 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} />)
+    return (
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
+    );
   };
 
   // Filters accounts items.
@@ -120,7 +123,9 @@ function AccountFormDialog ({
     }
   };
 
-  const handleClose = () => { closeDialog(name); };
+  const handleClose = () => {
+    closeDialog(name);
+  };
 
   const fetchHook = useAsync(async () => {
     await Promise.all([
@@ -128,19 +133,19 @@ function AccountFormDialog ({
       fetchAccountTypes(),
 
       // Fetch the target in case edit mode.
-      ...(payload.action === 'edit') ? [
+      ...(payload.action === 'edit' ? [fetchAccount(payload.id)] : [])
-        fetchAccount(payload.id),
-      ] : [],
     ]);
-  }, false);
+  });
 
-  const onDialogOpening = async () => { fetchHook.execute(); }
+  const onDialogOpening = async () => {
+    fetchHook.execute();
+  };
 
-  const onChangeAccountType = (accountType) => {
+  const onChangeAccountType = accountType => {
     setState({ ...state, selectedAccountType: accountType.name });
     formik.setFieldValue('account_type_id', accountType.id);
   };
-  const onChangeSubaccount = (account) => {
+  const onChangeSubaccount = account => {
     setState({ ...state, selectedSubaccount: account });
     formik.setFieldValue('parent_account_id', account.id);
   };
@@ -150,14 +155,17 @@ function AccountFormDialog ({
     setState({
       ...state,
       selectedSubaccount: null,
-      selectedAccountType: null,
+      selectedAccountType: null
     });
   };
   return (
     <Dialog
       name={name}
       title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
-      className={{'dialog--loading': state.isLoading, 'dialog--account-form': true }}
+      className={{
+        'dialog--loading': state.isLoading,
+        'dialog--account-form': true
+      }}
       onClosed={onDialogClosed}
       onOpening={onDialogOpening}
       isOpen={isOpen}
@@ -169,19 +177,23 @@ function AccountFormDialog ({
             label={'Account Type'}
             className="{'form-group--account-type'}"
             inline={true}
-            helperText={formik.errors.account_type_id && formik.errors.account_type_id}
+            helperText={
-            intent={formik.errors.account_type_id && Intent.DANGER}>
+              formik.errors.account_type_id && formik.errors.account_type_id
-              
+            }
+            intent={formik.errors.account_type_id && Intent.DANGER}
+          >
             <Select
               items={accountsTypes}
-              noResults={<MenuItem disabled={true} text="No results." />}
+              noResults={<MenuItem disabled={true} text='No results.' />}
               itemRenderer={accountTypeItem}
               itemPredicate={filterAccountTypeItems}
               popoverProps={{ minimal: true }}
-              onItemSelect={onChangeAccountType}>
+              onItemSelect={onChangeAccountType}
+            >
               <Button
-                rightIcon="caret-down"
+                rightIcon='caret-down'
-                text={state.selectedAccountType || 'Select account type'} />
+                text={state.selectedAccountType || 'Select account type'}
+              />
             </Select>
           </FormGroup>
 
@@ -190,12 +202,13 @@ function AccountFormDialog ({
             className={'form-group--account-name'}
             intent={formik.errors.name && Intent.DANGER}
             helperText={formik.errors.name && formik.errors.name}
-            inline={true}>
+            inline={true}
-
+          >
             <InputGroup
               medium={true}
               intent={formik.errors.name && Intent.DANGER}
-              {...formik.getFieldProps('name')} />
+              {...formik.getFieldProps('name')}
+            />
           </FormGroup>
 
           <FormGroup
@@ -203,61 +216,74 @@ function AccountFormDialog ({
             className={'form-group--account-code'}
             intent={formik.errors.code && Intent.DANGER}
             helperText={formik.errors.code && formik.errors.code}
-            inline={true}>
+            inline={true}
-
+          >
             <InputGroup
               medium={true}
               intent={formik.errors.code && Intent.DANGER}
-              {...formik.getFieldProps('code')} />
+              {...formik.getFieldProps('code')}
+            />
           </FormGroup>
 
           <FormGroup
             label={' '}
             className={'form-group--subaccount'}
-            inline={true}>
+            inline={true}
-
+          >
             <Checkbox
               inline={true}
               label={'Sub account?'}
-              {...formik.getFieldProps('subaccount')} />
+              {...formik.getFieldProps('subaccount')}
+            />
           </FormGroup>
 
-          { (formik.values.subaccount) &&
+          {formik.values.subaccount && (
             <FormGroup
               label={'Sub Account'}
               className="{'form-group--sub-account'}"
-              inline={true}>
+              inline={true}
+            >
               <Select
                 items={accounts}
-                noResults={<MenuItem disabled={true} text="No results." />}
+                noResults={<MenuItem disabled={true} text='No results.' />}
                 itemRenderer={accountItem}
                 itemPredicate={filterAccountsPredicater}
                 popoverProps={{ minimal: true }}
                 onItemSelect={onChangeSubaccount}
-                {...formik.getFieldProps('parent_account_id')}>
+                {...formik.getFieldProps('parent_account_id')}
+              >
                 <Button
-                  rightIcon="caret-down"
+                  rightIcon='caret-down'
-                  text={state.selectedSubaccount ? state.selectedSubaccount.name : "Select Parent Account"}
+                  text={
+                    state.selectedSubaccount
+                      ? state.selectedSubaccount.name
+                      : 'Select Parent Account'
+                  }
                 />
               </Select>
-            </FormGroup> }
+            </FormGroup>
+          )}
 
           <FormGroup
             label={'Description'}
             className={'form-group--description'}
             intent={formik.errors.description && Intent.DANGER}
             helperText={formik.errors.description && formik.errors.credential}
-            inline={true}>
+            inline={true}
-
+          >
-            <TextArea growVertically={true} large={true} {...formik.getFieldProps('description')} />
+            <TextArea
+              growVertically={true}
+              large={true}
+              {...formik.getFieldProps('description')}
+            />
           </FormGroup>
         </div>
 
         <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} type='submit'>
-              { payload.action === 'edit' ? 'Edit' : 'Submit' }
+              {payload.action === 'edit' ? 'Edit' : 'Submit'}
             </Button>
           </div>
         </div>
@@ -269,5 +295,5 @@ function AccountFormDialog ({
 export default compose(
   AccountFormDialogConnect,
   DialogReduxConnect,
-  DialogConnect,
+  DialogConnect
 )(AccountFormDialog);

client/src/containers/Dashboard/Expenses/ExpenseForm.js

@@ -33,6 +33,7 @@ function ExpenseFormContainer({
   return (
     <DashboardInsider isLoading={fetchHook.loading} name={'expense-form'}>
       <ExpenseForm {...{submitExpense, editExpense, accounts, currencies} } />
+    
     </DashboardInsider>
   );
 }

client/src/containers/Dashboard/Expenses/ExpensesList.js

@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
-import {Alert, Intent} from '@blueprintjs/core';
+import { Alert, Intent } from '@blueprintjs/core';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import ExpensesActionsBar from 'components/Expenses/ExpensesActionsBar';
@@ -15,7 +15,7 @@ function ExpensesList({
   // fetchViews,
   expenses,
   getResourceViews,
-  changePageTitle,
+  changePageTitle
 }) {
   useEffect(() => {
     changePageTitle('Expenses List');
@@ -23,21 +23,25 @@ function ExpensesList({
 
   const [deleteExpenseState, setDeleteExpense] = useState();
 
-  const handleDeleteExpense = (expense) => { setDeleteExpense(expense); };
+  const handleDeleteExpense = expense => {
-  const handleCancelAccountDelete = () => { setDeleteExpense(false); }
+    setDeleteExpense(expense);
+  };
+  const handleCancelAccountDelete = () => {
+    setDeleteExpense(false);
+  };
 
   const handleConfirmAccountDelete = () => {
     deleteExpense(deleteExpenseState.id).then(() => {
       setDeleteExpense(false);
       AppToaster.show({
-        message: 'the_expense_has_been_deleted',
+        message: 'the_expense_has_been_deleted'
       });
     });
   };
 
   const fetchHook = useAsync(async () => {
     await Promise.all([
-      fetchExpenses(),
+      fetchExpenses()
       // getResourceViews('expenses'),
     ]);
   });
@@ -48,24 +52,28 @@ function ExpensesList({
       <ExpensesViewsTabs />
 
       <DashboardPageContent>
-        <ExpensesTable expenses={expenses} onDeleteExpense={handleDeleteExpense} />
+        <ExpensesTable
+          expenses={expenses}
+          onDeleteExpense={handleDeleteExpense}
+        />
       </DashboardPageContent>
 
       <Alert
-        cancelButtonText="Cancel"
+        cancelButtonText='Cancel'
-        confirmButtonText="Move to Trash"
+        confirmButtonText='Move to Trash'
-        icon="trash"
+        icon='trash'
         intent={Intent.DANGER}
         isOpen={deleteExpenseState}
         onCancel={handleCancelAccountDelete}
-        onConfirm={handleConfirmAccountDelete}>
+        onConfirm={handleConfirmAccountDelete}
+      >
         <p>
-        Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
+          Are you sure you want to move <b>filename</b> to Trash? You will be
-        but it will become private to you.
+          able to restore it later, but it will become private to you.
         </p>
       </Alert>
     </DashboardInsider>
   );
-};
+}
 
 export default connector(ExpensesList);

client/src/containers/Dashboard/Items/ItemForm.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useAsync } from 'react-use';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import ItemForm from 'components/Items/ItemForm';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import ItemsConnect from 'connectors/Items.connect';
+import { compose } from 'utils';
+const ItemFormContainer = ({
+  changePageTitle,
+  fetchAccount,
+  submitItem,
+  editItem,
+  fetchItems,
+  fetchItem,
+  deleteItem,
+  accounts
+}) => {
+  const { id } = useParams();
+  useEffect(() => {
+    id ? changePageTitle('Edit Item Details') : changePageTitle('New Item');
+  }, []);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([fetchAccount()]);
+  });
+  return (
+    <DashboardInsider isLoading={fetchHook.loading} name={'expense-form'}>
+      <ItemForm
+        {...{
+          submitItem,
+          editItem,
+          fetchItem,
+          fetchItems,
+          deleteItem,
+          accounts
+        }}
+      />
+    </DashboardInsider>
+  );
+};
+
+export default compose(
+  DashboardConnect,
+  ItemsConnect
+  // AccountsConnect
+)(ItemFormContainer);

client/src/routes/dashboard.js

@@ -10,7 +10,7 @@ export default [
     component: LazyLoader({
       loader: () => import('containers/Dashboard/Homepage')
     }),
-    exact: true,
+    exact: true
   },
 
   // Accounts.
@@ -19,7 +19,7 @@ export default [
     name: 'dashboard.accounts',
     component: LazyLoader({
       loader: () => import('containers/Dashboard/Accounts/AccountsChart')
-    }),
+    })
   },
 
   // Custom views.
@@ -28,14 +28,14 @@ export default [
     name: 'dashboard.custom_view.new',
     component: LazyLoader({
       loader: () => import('containers/Dashboard/Views/ViewFormPage')
-    }),
+    })
   },
   {
     path: `${BASE_URL}/custom_views/:view_id/edit`,
     name: 'dashboard.custom_view.edit',
     component: LazyLoader({
       loader: () => import('containers/Dashboard/Views/ViewFormPage')
-    }),
+    })
   },
 
   // Expenses.
@@ -45,25 +45,25 @@ export default [
     component: LazyLoader({
       loader: () => import('containers/Dashboard/Expenses/ExpenseForm')
     }),
-    text: 'New Expense',
+    text: 'New Expense'
   },
   {
     path: `${BASE_URL}/expenses`,
     name: 'dashboard.expeneses.list',
     component: LazyLoader({
       loader: () => import('containers/Dashboard/Expenses/ExpensesList')
-    }),
+    })
   },
 
-
   // Accounting
   {
     path: `${BASE_URL}/accounting/make-journal-entry`,
     name: 'dashboard.accounting.make.journal',
     component: LazyLoader({
-      loader: () => import('containers/Dashboard/Accounting/MakeJournalEntriesPage')
+      loader: () =>
+        import('containers/Dashboard/Accounting/MakeJournalEntriesPage')
     }),
-    text: 'Make Journal Entry',
+    text: 'Make Journal Entry'
   },
 
   // Items
@@ -73,41 +73,58 @@ export default [
       loader: () => import('containers/Dashboard/Items/ItemsList')
     }),
   },
+  {
+    path: `${BASE_URL}/items/new`,
+    component: LazyLoader({
+      loader: () => import('containers/Dashboard/Items/ItemForm')
+    }),
+  },
 
   // Financial Reports.
   {
     path: `${BASE_URL}/accounting/general-ledger`,
     name: 'dashboard.accounting.general.ledger',
     component: LazyLoader({
-      loader: () => import('containers/Dashboard/FinancialStatements/LedgerSheet')
+      loader: () =>
-    }),
+        import('containers/Dashboard/FinancialStatements/LedgerSheet')
+    })
   },
   {
     path: `${BASE_URL}/accounting/balance-sheet`,
     name: 'dashboard.accounting.balance.sheet',
     component: LazyLoader({
-      loader: () => import('containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet')
+      loader: () =>
-    }),
+        import(
+          'containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet'
+        )
+    })
   },
   {
     path: `${BASE_URL}/accounting/trial-balance-sheet`,
     name: 'dashboard.accounting.trial.balance',
     component: LazyLoader({
-      loader: () => import('containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet')
+      loader: () =>
-    }),
+        import(
+          'containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet'
+        )
+    })
   },
   {
     path: `${BASE_URL}/accounting/profit-loss-sheet`,
     name: 'dashboard.accounting.profit.loss.sheet',
     component: LazyLoader({
-      loader: () => import('containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet')
+      loader: () =>
-    }),
+        import(
+          'containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet'
+        )
+    })
   },
   {
     path: `${BASE_URL}/accounting/journal-sheet`,
     name: 'dashboard.accounting.journal.sheet',
     component: LazyLoader({
-      loader: () => import('containers/Dashboard/FinancialStatements/Journal/Journal')
+      loader: () =>
-    }),
+        import('containers/Dashboard/FinancialStatements/Journal/Journal')
-  },
+    })
+  }
 ];

client/src/store/accounts/accounts.actions.js

@@ -2,107 +2,131 @@ import ApiService from 'services/ApiService';
 import t from 'store/types';
 
 export const fetchAccountTypes = () => {
-  return (dispatch, getState) => new Promise((resolve, reject) => {
+  return (dispatch, getState) =>
-    ApiService.get('account_types').then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({
+      ApiService.get('account_types')
-        type: t.ACCOUNT_TYPES_LIST_SET,
+        .then(response => {
-        account_types: response.data.account_types,
+          dispatch({
-      });
+            type: t.ACCOUNT_TYPES_LIST_SET,
-      resolve(response);
+            account_types: response.data.account_types
-    }).catch((error) => { reject(error); });
+          });
-  });
+          resolve(response);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
 };
 
 export const fetchAccountsList = ({ query } = {}) => {
-  return (dispatch) => new Promise((resolve, reject) => {
+  return dispatch =>
-    ApiService.get('accounts', { params: query }).then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({
+      ApiService.get('accounts', { params: query })
-        type: t.ACCOUNTS_PAGE_SET,
+        .then(response => {
-        accounts: response.data.accounts,
+          dispatch({
-        customViewId: response.data.customViewId,
+            type: t.ACCOUNTS_PAGE_SET,
-      });
+            accounts: response.data.accounts,
-      dispatch({
+            customViewId: response.data.customViewId
-        type: t.ACCOUNTS_ITEMS_SET,
+          });
-        accounts: response.data.accounts,
+          dispatch({
-      });
+            type: t.ACCOUNTS_ITEMS_SET,
-      resolve(response);
+            accounts: response.data.accounts
-    }).catch((error) => { reject(error); });
+          });
-  });
+          resolve(response);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
 };
 
 export const fetchAccountsDataTable = ({ query }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
+  return dispatch =>
-    ApiService.get('accounts', ).then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({
+      ApiService.get('accounts')
-        type: t.ACCOUNTS_DATA_TABLE,
+        .then(response => {
-        data: response.data,
+          dispatch({
-      })
+            type: t.ACCOUNTS_DATA_TABLE,
-    }).catch((error) => { reject(error); })
+            data: response.data
-  })
+          });
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
 };
 
 export const submitAccount = ({ form }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
+  return dispatch =>
-    ApiService.post('accounts', form).then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
+      ApiService.post('accounts', form)
-      resolve(response);
+        .then(response => {
-    }).catch((error) => {
+          dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
-      const { response } = error;
+          resolve(response);
-      const { data } = response;
+        })
-      const { errors } = data;
+        .catch(error => {
+          const { response } = error;
+          const { data } = response;
+          const { errors } = data;
 
-      dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
+          dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
-      if (errors){
+          if (errors) {
-        dispatch({ type: t.ACCOUNT_FORM_ERRORS, errors });
+            dispatch({ type: t.ACCOUNT_FORM_ERRORS, errors });
-      }
+          }
-      reject(error);
+          reject(error);
+        });
     });
-  });
 };
 
 export const editAccount = ({ id, form }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
+  return dispatch =>
-    ApiService.post(`accounts/${id}`, form).then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({type: t.CLEAR_ACCOUNT_FORM_ERRORS});
+      ApiService.post(`accounts/${id}`, form)
-      resolve(response);
+        .then(response => {
-    }).catch((error) => {
+          dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
-      const { response } = error;
+          resolve(response);
-      const { data } = response;
+        })
-      const { errors } = data;
+        .catch(error => {
+          const { response } = error;
+          const { data } = response;
+          const { errors } = data;
 
-      dispatch({type: t.CLEAR_ACCOUNT_FORM_ERRORS});
+          dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
-      if (errors){
+          if (errors) {
-        dispatch({ type: t.ACCOUNT_FORM_ERRORS, errors });
+            dispatch({ type: t.ACCOUNT_FORM_ERRORS, errors });
-      }
+          }
-      reject(error);
+          reject(error);
+        });
     });
-  });
 };
 
 export const activeAccount = ({ id }) => {
-  return (dispatch) => ApiService.post(`accounts/${id}/active`);
+  return dispatch => ApiService.post(`accounts/${id}/active`);
 };
 
 export const inactiveAccount = ({ id }) => {
-  return (dispatch) => ApiService.post(`accounts/${id}/inactive`);
+  return dispatch => ApiService.post(`accounts/${id}/inactive`);
 };
 
 export const deleteAccount = ({ id }) => {
-  return (dispatch) => ApiService.delete(`accounts/${id}`);
+  return dispatch => ApiService.delete(`accounts/${id}`);
 };
 
-export const deleteBulkAccounts = ({ ids }) => {
+export const deleteBulkAccounts = ({ ids }) => {};
-
-};
 
 export const fetchAccount = ({ id }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
+  return dispatch =>
-    ApiService.get(`accounts/${id}`).then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({
+      ApiService.get(`accounts/${id}`)
-        type: t.ACCOUNT_SET,
+        .then(response => {
-        account: response.data.account,
+          dispatch({
-      });
+            type: t.ACCOUNT_SET,
-      resolve(response);
+            account: response.data.account
-    }).catch((error) => { reject(error); });
+          });
-  });
+          resolve(response);
-}
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+};

client/src/store/items/items.actions.js

@@ -1,12 +1,12 @@
-import ApiService from "services/ApiService"
+import ApiService from 'services/ApiService';
 import t from 'store/types';
 
 export const submitItem = ({ form }) => {
-  return (dispatch) => ApiService.post(`items`, form);
+  return dispatch => ApiService.post(`items`, form);
 };
 
 export const editItem = ({ id, form }) => {
-  return (dispatch) => ApiService.post(`items/${id}`, form);
+  return dispatch => ApiService.post(`items/${id}`, form);
 };
 
 export const fetchItems = ({ query }) => {
@@ -28,16 +28,21 @@ export const fetchItems = ({ query }) => {
 };
 
 export const fetchItem = ({ id }) => {
-  return (dispatch) => new Promise((resolve, reject) => {
+  return dispatch =>
-    ApiService.get(`items/${id}`).then((response) => {
+    new Promise((resolve, reject) => {
-      dispatch({
+      ApiService.get(`items/${id}`)
-        type: t.ITEM_SET,
+        .then(response => {
-        item: response.data.item,
+          dispatch({
-      });
+            type: t.ITEM_SET,
-    }).catch(error => { reject(error); });
+            item: response.data.item
-  });
+          });
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
 };
 
 export const deleteItem = ({ id }) => {
-  return (dispatch) => ApiService.delete(`items/${id}`);
+  return dispatch => ApiService.delete(`items/${id}`);
 };