fix Merge conflict.

client/src/components/Accounts/AccountsActionsBar.js

@@ -10,11 +10,11 @@ import {
   Menu,
   Popover,
   PopoverInteractionKind,
-  Position,
-} from "@blueprintjs/core";
+  Position
+} from '@blueprintjs/core';
 import classNames from 'classnames';
-import {connect} from 'react-redux';
-import {useRouteMatch} from 'react-router-dom';
+import { connect } from 'react-redux';
+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" /> }
-            text="Table Views"
-            rightIcon={'caret-down'} />
+            icon={<Icon icon='table' />}
+            text='Table Views'
+            rightIcon={'caret-down'}
+          />
         </Popover>
 
         <NavbarDivider />
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="plus" /> }
-          text="New Account"
-          onClick={onClickNewAccount} />
+          icon={<Icon icon='plus' />}
+          text='New Account'
+          onClick={onClickNewAccount}
+        />
 
         <Popover
           content={filterDropdown}
@@ -84,32 +86,38 @@ function AccountsActionsBar({
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={ <Icon icon="trash" />} 
-            text="Archive" />)}
+            icon={<Icon icon='trash' />}
+            text='Archive'
+          />
+        )}
 
         {hasBulkActionsSelected && (
           <Button
             className={Classes.MINIMAL}
-            icon={ <Icon icon="trash" />} 
-            text="Delete" />)}
+            icon={<Icon icon='trash' />}
+            text='Delete'
+          />
+        )}
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="file-import" /> }
-          text="Import" />
+          icon={<Icon icon='file-import' />}
+          text='Import'
+        />
 
         <Button
           className={Classes.MINIMAL}
-          icon={ <Icon icon="file-export" /> }
-          text="Export" />
+          icon={<Icon icon='file-export' />}
+          text='Export'
+        />
       </NavbarGroup>
     </DashboardActionsBar>
-  )
+  );
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
-    bulkActions: state.accounts.bulkActions,
+    bulkActions: state.accounts.bulkActions
   };
 };
 
@@ -118,4 +126,4 @@ export default compose(
   AccountsConnect,
   ResourceConnect,
   connect(mapStateToProps),
-)(AccountsActionsBar);
+)(AccountsActionsBar);

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(() => () => {
-    // Clear page subtitle when unmount the page.
-    changePageSubtitle('');
-  }, []);
+  useEffect(
+    () => () => {
+      // Clear page subtitle when unmount the page.
+      changePageSubtitle('');
+    },
+    []
+  );
 
-  const handleEditAccount = (account) => () => {
-    openDialog('account-form', {action: 'edit', id: account.id});
+  const handleEditAccount = account => () => {
+    openDialog('account-form', { action: 'edit', id: account.id });
   };
-  const actionMenuList = (account) =>
-    (<Menu>
-      <MenuItem text="View Details" />
+  const actionMenuList = account => (
+    <Menu>
+      <MenuItem text='View Details' />
       <MenuDivider />
-      <MenuItem text="Edit Account" onClick={handleEditAccount(account)} />
-      <MenuItem text="New Account" />
+      <MenuItem text='Edit Account' onClick={handleEditAccount(account)} />
+      <MenuItem text='New Account' />
       <MenuDivider />
-      <MenuItem text="Inactivate Account" onClick={() => onInactiveAccount(account)} />
-      <MenuItem text="Delete Account" onClick={() => onDeleteAccount(account)} />
-    </Menu>);
-  
-  const handleClickCheckboxBulk = (account) => handleBooleanChange((value) => {
-    if (value) {
-      addBulkActionAccount(account.id);
-    } else {
-      removeBulkActionAccount(account.id);
-    }
-  });
+      <MenuItem
+        text='Inactivate Account'
+        onClick={() => onInactiveAccount(account)}
+      />
+      <MenuItem
+        text='Delete Account'
+        onClick={() => onDeleteAccount(account)}
+      />
+    </Menu>
+  );
+
+  const handleClickCheckboxBulk = account =>
+    handleBooleanChange(value => {
+      if (value) {
+        addBulkActionAccount(account.id);
+      } else {
+        removeBulkActionAccount(account.id);
+      }
+    });
 
   const columns = [
     {
       field: '',
       headerText: '',
-      template: (account) => (<Checkbox onChange={handleClickCheckboxBulk(account)} />),
-      customAttributes: {class: 'checkbox-row'}
+      template: account => (
+        <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) => (
-        <Popover content={actionMenuList(account)} position={Position.RIGHT_BOTTOM}>
-          <Button icon={<Icon icon="ellipsis-h" />} />
+      template: account => (
+        <Popover
+          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) => {
-            return (<ColumnDirective
-              field={column.field}
-              headerText={column.headerText}
-              template={column.template}
-              allowSorting={true}
-              customAttributes={column.customAttributes}
-              />);
+          {columns.map(column => {
+            return (
+              <ColumnDirective
+                field={column.field}
+                headerText={column.headerText}
+                template={column.template}
+                allowSorting={true}
+                customAttributes={column.customAttributes}
+              />
+            );
           })}
         </ColumnsDirective>
         <Inject services={[Sort]} />
@@ -173,5 +195,5 @@ export default compose(
   AccountsConnect,
   DialogConnect,
   DashboardConnect,
-  ViewConnect,
-)(AccountsDataTable);
+  ViewConnect
+)(AccountsDataTable);

client/src/components/Accounts/AccountsViewsTabs.js

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

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({
-  children, name
-}) {
+export default function DashboardActionsBar({ children, name }) {
   return (
-    <div className={classnames({
-      'dashboard__actions-bar': true,
-      [`dashboard__actions-bar--${name}`]: !!name,
-    })}>
-      <Navbar className="navbar--dashboard-actions-bar">
-        { children }
-      </Navbar>
+    <div
+      className={classnames({
+        'dashboard__actions-bar': true,
+        [`dashboard__actions-bar--${name}`]: !!name
+      })}
+    >
+      <Navbar className='navbar--dashboard-actions-bar'>{children}</Navbar>
     </div>
   );
-}
+}

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -3,17 +3,22 @@ import {
   CollapsibleList,
   MenuItem,
   Classes,
-  Boundary,
-} from "@blueprintjs/core";
-import classNames from "classnames";
+  Boundary
+} from '@blueprintjs/core';
+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="Users" href="#" />
-      <MenuItem icon="folder-close" text="Jane Person" href="#" />
-      <MenuItem icon="folder-close" text="My documents" href="#" />
-      <MenuItem icon="folder-close" text="Classy dayjob" href="#" />
-      <MenuItem icon="document" text="How to crush it" />
-  </CollapsibleList>
+      <MenuItem icon='folder-close' text='All files' href='#' />
+      <MenuItem icon='folder-close' text='Users' href='#' />
+      <MenuItem icon='folder-close' text='Jane Person' href='#' />
+      <MenuItem icon='folder-close' text='My documents' href='#' />
+      <MenuItem icon='folder-close' text='Classy dayjob' href='#' />
+      <MenuItem icon='document' text='How to crush it' />
+    </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) => {
-      submitExpense(values).then((response) => {
-        AppToaster.show({
-          message: 'the_expense_has_been_submit',
-        });
-      }).catch((error) => {
-        
-      })
+    onSubmit: values => {
+      submitExpense(values)
+        .then(response => {
+          AppToaster.show({
+            message: 'the_expense_has_been_submit'
+          });
+        })
+        .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 ? 
-    state.selectedPaymentAccount.name : 'Select Payment Account';
-  
-  const expenseAccountLabel = state.selectedExpenseAccount ?
-    state.selectedExpenseAccount.name : 'Select Expense Account';
+  const paymentAccountLabel = state.selectedPaymentAccount
+    ? state.selectedPaymentAccount.name
+    : 'Select Payment Account';
 
-  const handleClose = () => {
+  const expenseAccountLabel = state.selectedExpenseAccount
+    ? state.selectedExpenseAccount.name
+    : 'Select Expense Account';
 
-  };
+  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"
-              text={expenseAccountLabel} />
+              rightIcon='caret-down'
+              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"
-                text={formik.values.currency_code} />
+                rightIcon='caret-down'
+                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,39 +203,45 @@ 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"
-              text={paymentAccountLabel} />
+              rightIcon='caret-down'
+              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">
-          <Button intent={Intent.PRIMARY} type="submit">Save</Button>
+        <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/Expenses/ExpensesActionsBar.js

@@ -1,37 +1,32 @@
 import React from 'react';
-import {
-  Button,
-  AnchorButton,
-  Classes,
-  Icon
-} from '@blueprintjs/core';
+import { 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" /> }
-        href="/dashboard/expenses/new"
-        text="New Expense"
-        onClick={onClickNewAccount} />
-      
-      <Button
-        className={Classes.MINIMAL}
-        icon={ <Icon icon="plus" /> }
-        text="Delete Expense"
-        onClick={onClickNewAccount} />
+        icon={<Icon icon='plus' />}
+        href='/dashboard/expenses/new'
+        text='New Expense'
+        onClick={onClickNewAccount}
+      />
 
       <Button
         className={Classes.MINIMAL}
-        icon={ <Icon icon="plus" /> }
-        text="Bulk Update"
-        onClick={onClickNewAccount} />
+        icon={<Icon icon='plus' />}
+        text='Delete Expense'
+        onClick={onClickNewAccount}
+      />
+
+      <Button
+        className={Classes.MINIMAL}
+        icon={<Icon icon='plus' />}
+        text='Bulk Update'
+        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({
+  submitItem,
+  accounts,
+  category,
+}) {
+  const [selectedAccounts, setSelectedAccounts] = useState({});
+
+  const ItemTypeDisplay = [
+    { 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;
+  };
 
-export default function ItemForm() {
-  
-  // Type
-  // Name
-  //
-  
   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) ? (
-        <div class="dashboard__loading-indicator">
+      {loading ? (
+        <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 (
-    <Menu className="sidebar-menu">
-      {items}
-    </Menu>
-  )
+  return (<Menu className="sidebar-menu">{items}</Menu>);
 };