WIP: customer form styling.

fix: journal increment number settings.
2026-02-15 04:10:32 +00:00 · 2020-11-07 22:01:10 +02:00
parent 9b6b2e67db
commit 1ff2d924d0
25 changed files with 1037 additions and 606 deletions
--- a/client/src/common/classes.js
+++ b/client/src/common/classes.js
@@ -10,6 +10,7 @@ const CLASSES = {
  PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
  PAGE_FORM_HEADER_FIELDS: 'page-form__header-fields',
  PAGE_FORM_HEADER_BIG_NUMBERS: 'page-form__big-numbers',
+  PAGE_FORM_TABS: 'page-form__tabs',
  
  PAGE_FORM_FOOTER: 'page-form__footer',
  PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-actions',
@@ -20,6 +21,9 @@ const CLASSES = {
  PAGE_FORM_RECEIPT: 'page-form--receipt',
  PAGE_FORM_PAYMENT_MADE: 'page-form--payment-made',
  PAGE_FORM_PAYMENT_RECEIVE: 'page-form--payment-receive',
+  PAGE_FORM_CUSTOMER: 'page-form--customer',
+
+  FORM_GROUP_LIST_SELECT: 'form-group--select-list',

  CLOUD_SPINNER: 'cloud-spinner',
  IS_LOADING: 'is-loading',
@@ -28,4 +32,4 @@ const CLASSES = {

 export {
  CLASSES,
-}
+}
--- a/client/src/components/CurrenciesSelectList.js
+++ b/client/src/components/CurrenciesSelectList.js
@@ -2,18 +2,14 @@

 import React, {useCallback} from 'react';
 import {
-  FormGroup,
  MenuItem,
  Button,
 } from '@blueprintjs/core';
 import {
  Select
 } from '@blueprintjs/select';
-import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';

 export default function CurrenciesSelectList({
-  formGroupProps,
  selectProps,
  onItemSelect,
  className,
@@ -43,30 +39,18 @@ export default function CurrenciesSelectList({
  };

  return (
-    <FormGroup
-      label={<T id={'currency'}/>}
-      className={
-        classNames(
-          'form-group--select-list',
-          'form-group--currency',
-          className,
-        )
-      }
-      {...formGroupProps}
+    <Select
+      items={currencies}
+      noResults={<MenuItem disabled={true} text='No results.' />}
+      itemRenderer={currencyItem}
+      itemPredicate={filterCurrenciesPredicator}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onCurrencySelect}
+      {...selectProps}
    >
-      <Select
-        items={currencies}
-        noResults={<MenuItem disabled={true} text='No results.' />}
-        itemRenderer={currencyItem}
-        itemPredicate={filterCurrenciesPredicator}
-        popoverProps={{ minimal: true }}
-        onItemSelect={onCurrencySelect}
-        {...selectProps}
-      >
-        <Button
-          text={'USD US dollars'}
-        />
-      </Select>
-    </FormGroup>
+      <Button
+        text={'USD US dollars'}
+      />
+    </Select>
  );
 }
--- a/client/src/components/DisplayNameList.js
+++ b/client/src/components/DisplayNameList.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import ListSelect from "./ListSelect";
+
+export default function DisplayNameList({
+  salutation,
+  firstName,
+  lastName,
+  company,
+  ...restProps
+}) {
+  const formats = [
+    { format: '{1} {2} {3}', values: [salutation, firstName, lastName], required: [1] },
+    { format: '{1} {2}', values: [firstName, lastName], required: [] },
+    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+    { format: '{1}', values: [company], required: [1] }
+  ];
+
+  const formatOptions = formats
+    .filter((format) => !format.values.some((value, index) => {
+      return !value && format.required.indexOf(index + 1) !== -1;
+    }))
+    .map((formatOption) => {
+      const { format, values } = formatOption;
+      let label = format;
+
+      values.forEach((value, index) => {
+        const replaceWith = (value || '');
+        label = label.replace(`{${index + 1}}`, replaceWith).trim();
+      });
+      return { label: label.replace(/\s+/g, " ") };
+    });
+
+  return (
+    <ListSelect
+      items={formatOptions}
+      selectedItemProp={'label'}
+      labelProp={'label'}
+      defaultText={'Select display name as'}
+      filterable={false}
+      { ...restProps }
+    />
+  );
+}
--- a/client/src/components/RequiredHint.js
+++ b/client/src/components/RequiredHint.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function RequiredHint() {
+  return (<span class="required">*</span>);
+}
--- a/client/src/components/SalutationList.js
+++ b/client/src/components/SalutationList.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  ListSelect,
+} from 'components';
+
+export default function SalutationList({
+  ...restProps
+}) {
+  const saluations = ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Dr.'];
+  const items = saluations.map((saluation) => ({ key: saluation, label: saluation }));
+
+  return (
+    <ListSelect
+      items={items}
+      selectedItemProp={'key'}
+      labelProp={'label'}
+      defaultText={'Salutation'}
+      filterable={false}
+      {...restProps}
+    />
+  );
+}
--- a/client/src/components/index.js
+++ b/client/src/components/index.js
@@ -32,7 +32,9 @@ import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
 import ContactSelecetList from './ContactSelecetList';
 import CurrencySelectList from './CurrencySelectList'
-
+import SalutationList from './SalutationList';
+import DisplayNameList from './DisplayNameList';
+import MoneyInputGroup from './MoneyInputGroup';

 const Hint = FieldHint;

@@ -70,6 +72,9 @@ export {
  Row,
  CloudLoadingIndicator,
  MoneyExchangeRate,
-  ContactSelecetList ,
-  CurrencySelectList
+  ContactSelecetList,
+  CurrencySelectList,
+  DisplayNameList,
+  SalutationList,
+  MoneyInputGroup,
 };
--- a/client/src/containers/Accounting/MakeJournalEntriesForm.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesForm.js
@@ -21,14 +21,13 @@ import withManualJournalDetail from 'containers/Accounting/withManualJournalDeta
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
-import withManualJournals from './withManualJournals';

 import AppToaster from 'components/AppToaster';
 import Dragzone from 'components/Dragzone';
 import withMediaActions from 'containers/Media/withMediaActions';

 import useMedia from 'hooks/useMedia';
-import { compose, repeatValue } from 'utils';
+import { compose, repeatValue, orderingLinesIndexes } from 'utils';
 import withManualJournalsActions from './withManualJournalsActions';

 const ERROR = {
@@ -52,7 +51,6 @@ function MakeJournalEntriesForm({
  // #withJournalsActions
  requestMakeJournalEntries,
  requestEditManualJournal,
-  setJournalNumberChanged,

  // #withDashboard
  changePageTitle,
@@ -62,9 +60,6 @@ function MakeJournalEntriesForm({
  journalNextNumber,
  journalNumberPrefix,

-  // #withManualJournals
-  journalNumberChanged,
-
  // #ownProps
  manualJournalId,
  manualJournal,
@@ -143,12 +138,6 @@ function MakeJournalEntriesForm({

  const [payload, setPayload] = useState({});

-  const reorderingEntriesIndex = (entries) =>
-    entries.map((entry, index) => ({
-      ...entry,
-      index: index + 1,
-    }));
-
  const defaultEntry = useMemo(
    () => ({
      index: 0,
@@ -188,7 +177,7 @@ function MakeJournalEntriesForm({
          }
        : {
            ...defaultInitialValues,
-            entries: reorderingEntriesIndex(defaultInitialValues.entries),
+            entries: orderingLinesIndexes(defaultInitialValues.entries),
          }),
    }),
    [manualJournal, defaultInitialValues, defaultEntry],
@@ -377,12 +366,9 @@ function MakeJournalEntriesForm({
    },
  });

-  useEffect(() => {
-    if (journalNumberChanged) {
-      setFieldValue('journal_number', journalNumber);
-      setJournalNumberChanged(false);
-    }
-  }, [journalNumberChanged, setJournalNumberChanged, journalNumber, setFieldValue]);
+  useEffect(() => {    
+    setFieldValue('journal_number', journalNumber);
+  }, [journalNumber, setFieldValue]);

  // Change page subtitle.
  useEffect(() => {
@@ -420,7 +406,7 @@ function MakeJournalEntriesForm({
  const handleClickAddNewRow = useCallback(() => {
    setFieldValue(
      'entries',
-      reorderingEntriesIndex([...values.entries, defaultEntry]),
+      orderingLinesIndexes([...values.entries, defaultEntry]),
    );
  }, [values.entries, defaultEntry, setFieldValue]);

@@ -428,7 +414,7 @@ function MakeJournalEntriesForm({
  const handleClickClearLines = useCallback(() => {
    setFieldValue(
      'entries',
-      reorderingEntriesIndex([...repeatValue(defaultEntry, 4)]),
+      orderingLinesIndexes([...repeatValue(defaultEntry, 4)]),
    );
  }, [defaultEntry, setFieldValue]);

@@ -480,9 +466,6 @@ function MakeJournalEntriesForm({
 export default compose(
  withJournalsActions,
  withManualJournalDetail,
-  withManualJournals(({ journalNumberChanged }) => ({
-    journalNumberChanged,
-  })),
  withAccountsActions,
  withDashboardActions,
  withMediaActions,
--- a/client/src/containers/Accounting/MakeJournalEntriesHeader.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesHeader.js
@@ -4,13 +4,14 @@ import {
  FormGroup,
  Intent,
  Position,
-  Classes,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import { momentFormatter, tansformDateValue, saveInvoke } from 'utils';
 import {
  CurrenciesSelectList,
@@ -19,7 +20,7 @@ import {
  FieldHint,
  FieldRequiredHint,
  Icon,
-  InputPrependButton
+  InputPrependButton,
 } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -75,24 +76,25 @@ function MakeJournalEntriesHeader({
              <ErrorMessage name="journal_number" {...{ errors, touched }} />
            }
            fill={true}
-            
          >
            <InputGroup
              intent={
                errors.journal_number && touched.journal_number && Intent.DANGER
              }
              fill={true}
-              rightElement={<InputPrependButton
-                buttonProps={{
-                  onClick: handleJournalNumberChange,
-                  icon: (<Icon icon={'settings-18'} />)
-                }}
-                tooltip={true}
-                tooltipProps={{
-                  content: 'Setting your auto-generated journal number',
-                  position: Position.BOTTOM_LEFT,
-                }}
-              />}
+              rightElement={
+                <InputPrependButton
+                  buttonProps={{
+                    onClick: handleJournalNumberChange,
+                    icon: <Icon icon={'settings-18'} />,
+                  }}
+                  tooltip={true}
+                  tooltipProps={{
+                    content: 'Setting your auto-generated journal number',
+                    position: Position.BOTTOM_LEFT,
+                  }}
+                />
+              }
              {...getFieldProps('journal_number')}
              onBlur={handleJournalNumberChanged}
            />
@@ -106,6 +108,7 @@ function MakeJournalEntriesHeader({
            intent={errors.date && touched.date && Intent.DANGER}
            helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
            minimal={true}
+            className={classNames(CLASSES.FILL)}
          >
            <DateInput
              {...momentFormatter('YYYY/MM/DD')}
@@ -169,7 +172,7 @@ function MakeJournalEntriesHeader({
            className={classNames(
              'form-group--account-type',
              'form-group--select-list',
-              Classes.FILL,
+              CLASSES.FILL,
            )}
          >
            <InputGroup
@@ -183,13 +186,20 @@ function MakeJournalEntriesHeader({
        </Col>

        <Col width={230}>
-          <CurrenciesSelectList className={Classes.FILL} />
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--currency',
+              CLASSES.FILL
+            )}
+          >
+            <CurrenciesSelectList />
+          </FormGroup>
        </Col>
      </Row>
    </div>
  );
 }

-export default compose(
-  withDialogActions,
-)(MakeJournalEntriesHeader);
+export default compose(withDialogActions)(MakeJournalEntriesHeader);
--- a/client/src/containers/Accounting/withManualJournalsActions.js
+++ b/client/src/containers/Accounting/withManualJournalsActions.js
@@ -24,10 +24,6 @@ const mapActionsToProps = (dispatch) => ({
    type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
    queries,
  }),
-  setJournalNumberChanged: (isChanged) => dispatch({
-    type: t.MANUAL_JOURNAL_NUMBER_CHANGED,
-    payload: { isChanged },
-  }),
 });

 export default connect(null, mapActionsToProps);
--- a/client/src/containers/Customers/CustomerAddressTabs.js
+++ b/client/src/containers/Customers/CustomerAddressTabs.js
@@ -1,245 +1,364 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import * as Yup from 'yup';
-import { useFormik } from 'formik';
-import {
-  FormGroup,
-  MenuItem,
-  Intent,
-  InputGroup,
-  HTMLSelect,
-  Button,
-  Classes,
-} from '@blueprintjs/core';
-
-import { Row, Col } from 'react-grid-system';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import React from 'react';
+import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
+import { Row, Col } from 'components';
+import { FormattedMessage as T } from 'react-intl';

 import ErrorMessage from 'components/ErrorMessage';

 const CustomerBillingAddress = ({
-  formik: { errors, touched, setFieldValue, getFieldProps },
+  errors,
+  touched,
+  setFieldValue,
+  getFieldProps,
 }) => {
  return (
-    <div className={'customer-form'}>
-      <Row gutterWidth={16} className={'customer-form__tabs-section'}>
-        <Col width={404}>
-          <h4>
-            <T id={'billing_address'} />
-          </h4>
+    <Row className={'customer-form__tabs-section'}>
+      <Col xs={6}>
+        <h4>
+          <T id={'billing_address'} />
+        </h4>

-          <FormGroup
-            label={<T id={'country'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_country &&
+            touched.billing_address_country &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="billing_address_country"
+              {...{ errors, touched }}
+            />
+          }
+          label={<T id={'country'} />}
+        >
+          <InputGroup
            intent={
              errors.billing_address_country &&
              touched.billing_address_country &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_country"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_country &&
-                touched.billing_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_country')}
-            />
-          </FormGroup>
+            {...getFieldProps('billing_address_country')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'city_town'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'address'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_1 &&
+            touched.billing_address_1 &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="billing_address_1" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_1 &&
+              touched.billing_address_1 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_1')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'address'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_2 &&
+            touched.billing_address_2 &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="billing_address_2" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_2 &&
+              touched.billing_address_2 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_2')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'city_town'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_city &&
+            touched.billing_address_city &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="billing_address_city"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.billing_address_city &&
              touched.billing_address_city &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_city"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_city &&
-                touched.billing_address_city &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_city')}
-            />
-          </FormGroup>
+            {...getFieldProps('billing_address_city')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'state'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'state'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_state &&
+            touched.billing_address_state &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="billing_address_state"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.billing_address_state &&
              touched.billing_address_state &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_state"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_state &&
-                touched.billing_address_state &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_state')}
-            />
-          </FormGroup>
+            {...getFieldProps('billing_address_state')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'zip_code'} />}
+        <FormGroup
+          label={<T id={'zip_code'} />}
+          intent={
+            errors.billing_address_zipcode &&
+            touched.billing_address_zipcode &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="billing_address_zipcode"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.billing_address_zipcode &&
              touched.billing_address_zipcode &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="billing_address_zipcode"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.billing_address_zipcode &&
-                touched.billing_address_zipcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('billing_address_zipcode')}
-            />
-          </FormGroup>
-        </Col>
-        <Col width={404}>
-          <h4>
-            <T id={'shipping_address'} />
-          </h4>
+            {...getFieldProps('billing_address_zipcode')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'country'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'phone'} />}
+          intent={
+          errors.shipping_phone && touched.shipping_phone && Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="shipping_phone" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.shipping_phone && touched.shipping_phone && Intent.DANGER
+            }
+            {...getFieldProps('shipping_phone')}
+          />
+        </FormGroup>
+      </Col>
+
+      <Col xs={6}>
+        <h4>
+          <T id={'shipping_address'} />
+        </h4>
+
+        <FormGroup
+          label={<T id={'country'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.shipping_address_country &&
+            touched.shipping_address_country &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="shipping_address_country"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.shipping_address_country &&
              touched.shipping_address_country &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_country"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_country &&
-                touched.shipping_address_country &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_country')}
-            />
-          </FormGroup>
+            {...getFieldProps('shipping_address_country')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'city_town'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'address'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_1 &&
+            touched.billing_address_1 &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="billing_address_1" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_1 &&
+              touched.billing_address_1 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_1')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'address'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.billing_address_2 &&
+            touched.billing_address_2 &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="billing_address_2" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.billing_address_2 &&
+              touched.billing_address_2 &&
+              Intent.DANGER
+            }
+            {...getFieldProps('billing_address_2')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'city_town'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.shipping_address_city &&
+            touched.shipping_address_city &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="shipping_address_city"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.shipping_address_city &&
              touched.shipping_address_city &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_city"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_city &&
-                touched.shipping_address_city &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_city')}
-            />
-          </FormGroup>
+            {...getFieldProps('shipping_address_city')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'state'} />}
-            className={'form-group--journal-number'}
+        <FormGroup
+          label={<T id={'state'} />}
+          className={'form-group--journal-number'}
+          intent={
+            errors.shipping_address_state &&
+            touched.shipping_address_state &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="shipping_address_state"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.shipping_address_state &&
              touched.shipping_address_state &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_state"
-                {...{ errors, touched }}
-              />
-            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_state &&
-                touched.shipping_address_state &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_state')}
-            />
-          </FormGroup>
+            {...getFieldProps('shipping_address_state')}
+          />
+        </FormGroup>

-          <FormGroup
-            label={<T id={'zip_code'} />}
+        <FormGroup
+          label={<T id={'zip_code'} />}
+          intent={
+            errors.shipping_address_zipcode &&
+            touched.shipping_address_zipcode &&
+            Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage
+              name="shipping_address_zipcode"
+              {...{ errors, touched }}
+            />
+          }
+        >
+          <InputGroup
            intent={
              errors.shipping_address_zipcode &&
              touched.shipping_address_zipcode &&
              Intent.DANGER
            }
-            inline={true}
-            helperText={
-              <ErrorMessage
-                name="shipping_address_zipcode"
-                {...{ errors, touched }}
-              />
+            {...getFieldProps('shipping_address_zipcode')}
+          />
+        </FormGroup>
+
+        <FormGroup
+          label={<T id={'phone'} />}
+          intent={
+            errors.shipping_phone && touched.shipping_phone && Intent.DANGER
+          }
+          inline={true}
+          helperText={
+            <ErrorMessage name="shipping_phone" {...{ errors, touched }} />
+          }
+        >
+          <InputGroup
+            intent={
+              errors.shipping_phone && touched.shipping_phone && Intent.DANGER
            }
-          >
-            <InputGroup
-              intent={
-                errors.shipping_address_zipcode &&
-                touched.shipping_address_zipcode &&
-                Intent.DANGER
-              }
-              {...getFieldProps('shipping_address_zipcode')}
-            />
-          </FormGroup>
-        </Col>
-      </Row>
-    </div>
+            {...getFieldProps('shipping_phone')}
+          />
+        </FormGroup>
+      </Col>
+    </Row>
  );
 };

--- a/client/src/containers/Customers/CustomerFinancialPanel.js
+++ b/client/src/containers/Customers/CustomerFinancialPanel.js
@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import moment from 'moment';
+import classNames from 'classnames';
+import { FormGroup, Intent, Position, Classes } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import {
+  ErrorMessage,
+  MoneyInputGroup,
+  CurrenciesSelectList,
+  Row,
+  Col,
+} from 'components';
+import { FormattedMessage as T } from 'react-intl';
+import { momentFormatter, tansformDateValue } from 'utils';
+
+export default function CustomerFinancialPanel({
+  setFieldValue,
+  errors,
+  touched,
+  values,
+}) {
+  const handleDateChange = useCallback(
+    (date) => {
+      const formatted = moment(date).format('YYYY-MM-DD');
+      setFieldValue('payment_date', formatted);
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <div>
+      <Row>
+        <Col xs={6}>
+          <FormGroup
+            label={<T id={'opening_balance_at'} />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+            intent={
+              errors.opening_balance_date &&
+              touched.opening_balance_date &&
+              Intent.DANGER
+            }
+            inline={true}
+            helperText={
+              <ErrorMessage name="payment_date" {...{ errors, touched }} />
+            }
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(values.payment_date)}
+              onChange={handleDateChange}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'opening_balance'} />}
+            className={classNames('form-group--opening-balance', Classes.FILL)}
+            intent={
+              errors.opening_balance && touched.opening_balance && Intent.DANGER
+            }
+            inline={true}
+          >
+            <MoneyInputGroup
+              value={values.opening_balance}
+              prefix={'$'}
+              inputGroupProps={{
+                fill: true,
+              }}
+            />
+          </FormGroup>
+
+          <FormGroup
+            label={<T id={'currency'} />}
+            className={classNames(
+              'form-group--select-list',
+              'form-group--balance-currency',
+              Classes.FILL,
+            )}
+            inline={true}
+          >
+            <CurrenciesSelectList />
+          </FormGroup>
+        </Col>
+      </Row>
+    </div>
+  );
+}
--- a/client/src/containers/Customers/CustomerFloatingActions.js
+++ b/client/src/containers/Customers/CustomerFloatingActions.js
@@ -1,16 +1,19 @@
 import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';

-export default function CustomerFloatingFooter({
-  formik: { isSubmitting, resetForm },
+export default function CustomerFloatingActions({
+  isSubmitting,
+  resetForm,
  onSubmitClick,
  onCancelClick,

-  customer,
+  customerId,
 }) {
  return (
-    <div className={'form__floating-footer'}>
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
      <Button
        intent={Intent.PRIMARY}
        disabled={isSubmitting}
@@ -19,7 +22,7 @@ export default function CustomerFloatingFooter({
          onSubmitClick({ publish: true, redirect: true });
        }}
      >
-        {customer && customer.id ? <T id={'edit'} /> : <T id={'save'} />}
+        {customerId ? <T id={'edit'} /> : <T id={'save'} />}
      </Button>

      <Button
@@ -34,16 +37,6 @@ export default function CustomerFloatingFooter({
        <T id={'save_new'} />
      </Button>

-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={() => {
-          onSubmitClick({ publish: false, redirect: false });
-        }}
-      >
-        <T id={'save_as_draft'} />
-      </Button>
-
      <Button
        className={'ml1'}
        onClick={() => {
--- a/client/src/containers/Customers/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm.js
@@ -1,22 +1,19 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
-import {
-  FormGroup,
-  Intent,
-  InputGroup,
-  Checkbox,
-} from '@blueprintjs/core';
-import { Row, Col } from 'react-grid-system';
+import { Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { pick } from 'lodash';
+import classNames from 'classnames';

+import { CLASSES } from 'common/classes';
 import AppToaster from 'components/AppToaster';
-import ErrorMessage from 'components/ErrorMessage';

+import CustomerFormPrimarySection from './CustomerFormPrimarySection';
+import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
 import CustomersTabs from 'containers/Customers/CustomersTabs';
-import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
+import CustomerFloatingActions from './CustomerFloatingActions';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCustomerDetail from 'containers/Customers/withCustomerDetail';
@@ -26,7 +23,6 @@ import withCustomers from 'containers/Customers//withCustomers';
 import useMedia from 'hooks/useMedia';

 import { compose } from 'utils';
-import CustomerFloatingFooter from './CustomerFooter';

 function CustomerForm({
  // #withDashboardActions
@@ -73,9 +69,7 @@ function CustomerForm({
      .label(formatMessage({ id: 'customer_type_' })),
    first_name: Yup.string().trim(),
    last_name: Yup.string().trim(),
-
    company_name: Yup.string().trim(),
-
    display_name: Yup.string()
      .trim()
      .required()
@@ -153,13 +147,19 @@ function CustomerForm({
      : changePageTitle(formatMessage({ id: 'new_customer' }));
  }, [changePageTitle, customer, formatMessage]);

-  const formik = useFormik({
+  const {
+    setFieldValue,
+    getFieldProps,
+    errors,
+    values,
+    touched,
+    handleSubmit
+  } = useFormik({
    enableReinitialize: true,
    validationSchema: validationSchema,
    initialValues: {
      ...initialValues,
    },
-
    onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
      const formValues = { ...values, status: payload.publish };
      if (customer && customer.id) {
@@ -172,7 +172,6 @@ function CustomerForm({
              intent: Intent.SUCCESS,
            });
            setSubmitting(false);
-            // history.push('/customers');
            resetForm();
            saveInvokeSubmit({ action: 'update', ...payload });
          })
@@ -199,20 +198,7 @@ function CustomerForm({
    },
  });

-  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
-  const handleCustomerTypeCahange = useCallback(
-    (value) => {
-      formik.setFieldValue('customer_type', value);
-    },
-    [formik.setFieldValue],
-  );
-
-  console.log(formik.values, 'ER');
-  const { errors, touched, getFieldProps, values, isSubmitting } = useMemo(
-    () => formik,
-    [formik],
-  );
-
+ 
  const initialAttachmentFiles = useMemo(() => {
    return customer && customer.media
      ? customer.media.map((attach) => ({
@@ -239,9 +225,9 @@ function CustomerForm({
  const handleSubmitClick = useCallback(
    (payload) => {
      setPayload(payload);
-      formik.handleSubmit();
+      handleSubmit();
    },
-    [setPayload, formik],
+    [setPayload, handleSubmit],
  );

  const handleCancelClick = useCallback(
@@ -250,180 +236,47 @@ function CustomerForm({
    },
    [onCancelForm],
  );
+
  return (
-    <div className={'customer-form'}>
-      <form onSubmit={formik.handleSubmit}>
-        <div className={'customer-form__primary-section'}>
-          <CustomerTypeRadioField
-            selectedValue={formik.values.customer_type}
-            onChange={handleCustomerTypeCahange}
-            className={'form-group--customer-type'}
-          />
-
-          <Row>
-            <Col md={3.5} className={'form-group--contact-name'}>
-              <FormGroup
-                label={<T id={'contact_name'} />}
-                inline={true}
-                intent={
-                  formik.errors.first_name &&
-                  formik.touched.first_name &&
-                  Intent.DANGER
-                }
-                helperText={
-                  <ErrorMessage name={'first_name'} {...{ errors, touched }} />
-                }
-                // className={'form-group--contact-name'}
-              >
-                <InputGroup
-                  placeholder={'First Name'}
-                  intent={
-                    formik.errors.first_name &&
-                    formik.touched.first_name &&
-                    Intent.DANGER
-                  }
-                  {...formik.getFieldProps('first_name')}
-                />
-              </FormGroup>
-            </Col>
-
-            <Col md={2}>
-              <FormGroup
-                inline={true}
-                intent={
-                  formik.errors.last_name &&
-                  formik.touched.last_name &&
-                  Intent.DANGER
-                }
-                helperText={
-                  <ErrorMessage name={'last_name'} {...{ errors, touched }} />
-                }
-                // className={'form-group--contact-name'}
-              >
-                <InputGroup
-                  placeholder={'Last Name'}
-                  intent={
-                    formik.errors.last_name &&
-                    formik.touched.last_name &&
-                    Intent.DANGER
-                  }
-                  {...formik.getFieldProps('last_name')}
-                />
-              </FormGroup>
-            </Col>
-          </Row>
-          {/* Company Name */}
-          <FormGroup
-            label={<T id={'company_name'} />}
-            className={'form-group--company_name'}
-            labelInfo={requiredSpan}
-            intent={
-              formik.errors.company_name &&
-              formik.touched.company_name &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name={'company_name'} />
-            }
-          >
-            <InputGroup
-              intent={
-                formik.errors.company_name &&
-                formik.touched.company_name &&
-                Intent.DANGER
-              }
-              {...formik.getFieldProps('company_name')}
+    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
+      <form onSubmit={handleSubmit}>
+        <div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
+          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+            <CustomerFormPrimarySection
+              setFieldValue={setFieldValue}
+              getFieldProps={getFieldProps}
+              errors={errors}
+              values={values}
+              touched={touched}
            />
-          </FormGroup>
-          {/* Display Name */}
-          <FormGroup
-            label={<T id={'display_name'} />}
-            intent={
-              formik.errors.display_name &&
-              formik.touched.display_name &&
-              Intent.DANGER
-            }
-            inline={true}
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name={'display_name'} />
-            }
-          >
-            <InputGroup
-              intent={
-                formik.errors.display_name &&
-                formik.touched.display_name &&
-                Intent.DANGER
-              }
-              {...formik.getFieldProps('display_name')}
+          </div>
+
+          <div className={'page-form__after-priamry-section'}>
+            <CustomerFormAfterPrimarySection
+              setFieldValue={setFieldValue}
+              getFieldProps={getFieldProps}
+              errors={errors}
+              values={values}
+              touched={touched}
            />
-          </FormGroup>
+          </div>
        </div>
-        <Row>
-          {/* Email */}
-          <Col md={6}>
-            <FormGroup
-              label={<T id={'email'} />}
-              intent={
-                formik.errors.email && formik.touched.email && Intent.DANGER
-              }
-              helperText={
-                <ErrorMessage name={'email'} {...{ errors, touched }} />
-              }
-              className={'form-group--email'}
-              inline={true}
-            >
-              <InputGroup
-                intent={
-                  formik.errors.email && formik.touched.email && Intent.DANGER
-                }
-                {...formik.getFieldProps('email')}
-              />
-            </FormGroup>
-          </Col>

-          {/* Active checkbox */}
-          <FormGroup label={' '} inline={true} className={'form-group--active'}>
-            <Checkbox
-              inline={true}
-              label={<T id={'active'} />}
-              defaultChecked={formik.values.active}
-              {...formik.getFieldProps('active')}
-            />
-          </FormGroup>
-        </Row>
-
-        <FormGroup
-          label={<T id={'phone_number'} />}
-          intent={
-            formik.errors.work_phone &&
-            formik.touched.work_phone &&
-            Intent.DANGER
-          }
-          helperText={
-            <ErrorMessage name={'work_phone'} {...{ errors, touched }} />
-          }
-          className={'form-group--phone-number'}
-          inline={true}
-        >
-          <InputGroup
-            intent={
-              formik.errors.work_phone &&
-              formik.touched.work_phone &&
-              Intent.DANGER
-            }
-            {...formik.getFieldProps('work_phone')}
-          />
-        </FormGroup>
-
-        <CustomersTabs formik={formik} />
+        <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+          <CustomersTabs
+            setFieldValue={setFieldValue}
+            getFieldProps={getFieldProps}
+            errors={errors}
+            values={values}
+            touched={touched} />
+        </div>
      </form>

-      <CustomerFloatingFooter
-        formik={formik}
+      <CustomerFloatingActions
        onSubmitClick={handleSubmitClick}
        customer={customer}
        onCancelClick={handleCancelClick}
+        customerId={null}
      />
    </div>
  );
--- a/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
+++ b/client/src/containers/Customers/CustomerFormAfterPrimarySection.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
+import { Row, Col } from 'react-grid-system';
+import { FormattedMessage as T } from 'react-intl';
+import { ErrorMessage } from 'components';
+
+export default function CustomerFormAfterPrimarySection({
+  setFieldValue,
+  getFieldProps,
+  errors,
+  values,
+  touched,
+}) {
+  return ( 
+    <div class="customer-form__after-primary-section-content">
+      {/*------------ Customer email -----------*/}    
+      <FormGroup
+        intent={errors.email && touched.email && Intent.DANGER}
+        helperText={
+          <ErrorMessage name={'email'} {...{ errors, touched }} />
+        }
+        className={'form-group--email'}
+        label={<T id={'customer_email'} />}
+        inline={true}
+      >
+        <InputGroup
+          intent={errors.email && touched.email && Intent.DANGER}
+          {...getFieldProps('email')}
+        />
+      </FormGroup>
+  
+
+      {/*------------ Customer email -----------*/}    
+      <FormGroup
+        intent={errors.work_phone && touched.work_phone && Intent.DANGER}
+        helperText={
+          <ErrorMessage name={'work_phone'} {...{ errors, touched }} />
+        }
+        className={'form-group--phone-number'}
+        label={<T id={'phone_number'} />}
+        inline={true}
+      >
+        <InputGroup
+          intent={
+            errors.work_phone && touched.work_phone && Intent.DANGER
+          }
+          {...getFieldProps('work_phone')}
+        />
+      </FormGroup>
+
+      {/*------------ Customer website -----------*/}    
+      <FormGroup
+        intent={errors.website && touched.website && Intent.DANGER}
+        helperText={
+          <ErrorMessage name={'website'} {...{ errors, touched }} />
+        }
+        className={'form-group--website'}
+        label={<T id={'website'} />}
+        inline={true}
+      >
+        <InputGroup
+          intent={
+            errors.website && touched.website && Intent.DANGER
+          }
+          {...getFieldProps('website')}
+        />
+      </FormGroup>
+    </div>
+  );
+}
--- a/client/src/containers/Customers/CustomerFormPrimarySection.js
+++ b/client/src/containers/Customers/CustomerFormPrimarySection.js
@@ -0,0 +1,125 @@
+import React, { useMemo, useCallback } from 'react';
+import classNames from 'classnames';
+import { FormGroup, Intent, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import {
+  Hint,
+  FieldRequiredHint,
+  SalutationList,
+  DisplayNameList,
+  ErrorMessage,
+  Row,
+  Col,
+} from 'components';
+import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Customer form primary section.
+ */
+export default function CustomerFormPrimarySection({
+  setFieldValue,
+  getFieldProps,
+  errors,
+  values,
+  touched,
+}) {
+  const handleCustomerTypeCahange = useCallback(
+    (value) => {
+      setFieldValue('customer_type', value);
+    },
+    [setFieldValue],
+  );
+
+  // Handle salutation field select.
+  const handleSalutationSelect = (salutation) => {
+    setFieldValue('salutation', salutation.label);
+  };
+  // Handle display name field select.
+  const handleDisplayNameSelect = (displayName) => {
+    setFieldValue('display_name', displayName.label);
+  };
+
+  return (
+    <div className={'customer-form__primary-section-content'}>
+      {/**-----------Customer type. -----------*/}
+      <CustomerTypeRadioField
+        selectedValue={values.customer_type}
+        onChange={handleCustomerTypeCahange}
+      />
+
+      {/**----------- Contact name -----------*/}
+      <FormGroup
+        className={classNames('form-group--contact_name')}
+        label={<T id={'contact_name'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <SalutationList
+            onItemSelect={handleSalutationSelect}
+            popoverProps={{ minimal: true }}
+            className={classNames(
+              CLASSES.FORM_GROUP_LIST_SELECT,
+              CLASSES.FILL,
+              'input-group--salutation-list',
+              'select-list--fill-button',
+            )}
+          />
+          <InputGroup
+            placeholder={'First Name'}
+            intent={errors.first_name && touched.first_name && Intent.DANGER}
+            {...getFieldProps('first_name')}
+            className={classNames('input-group--first-name')}
+          />
+          <InputGroup
+            placeholder={'Last Name'}
+            intent={errors.last_name && touched.last_name && Intent.DANGER}
+            {...getFieldProps('last_name')}
+            className={classNames('input-group--last-name')}
+          />
+        </ControlGroup>
+      </FormGroup>
+
+      {/*----------- Company Name -----------*/}
+      <FormGroup
+        className={classNames('form-group--company_name')}
+        label={<T id={'company_name'} />}
+        intent={errors.company_name && touched.company_name && Intent.DANGER}
+        helperText={
+          <ErrorMessage {...{ errors, touched }} name={'company_name'} />
+        }
+        inline={true}
+      >
+        <InputGroup
+          intent={errors.company_name && touched.company_name && Intent.DANGER}
+          {...getFieldProps('company_name')}
+        />
+      </FormGroup>
+
+      {/*----------- Display Name -----------*/}
+      <FormGroup
+        intent={errors.display_name && touched.display_name && Intent.DANGER}
+        helperText={
+          <ErrorMessage {...{ errors, touched }} name={'display_name'} />
+        }
+        label={
+          <>
+            <T id={'display_name'} />
+            <FieldRequiredHint />
+            <Hint />
+          </>
+        }
+        className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+        inline={true}
+      >
+        <DisplayNameList
+          firstName={values.first_name}
+          lastName={values.last_name}
+          company={values.company_name}
+          onItemSelect={handleDisplayNameSelect}
+          popoverProps={{ minimal: true }}
+        />
+      </FormGroup>
+    </div>
+  );
+}
--- a/client/src/containers/Customers/CustomerTypeRadioField.js
+++ b/client/src/containers/Customers/CustomerTypeRadioField.js
@@ -1,23 +1,32 @@
 import React from 'react';
-import { handleStringChange } from 'utils';
-import { useIntl } from 'react-intl';
-import { RadioGroup, Radio } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';

+import { handleStringChange } from 'utils';
+
+/**
+ * Customer type radio field.
+ */
 export default function RadioCustomer(props) {
  const { onChange, ...rest } = props;
  const { formatMessage } = useIntl();

  return (
-    <RadioGroup
+    <FormGroup
      inline={true}
-      label={formatMessage({ id: 'customer_type' })}
-      onChange={handleStringChange((value) => {
-        onChange && onChange(value);
-      })}
-      {...rest}
-    >
-      <Radio label={formatMessage({ id: 'business' })} value="business" />
-      <Radio label={formatMessage({ id: 'individual' })} value="individual" />
-    </RadioGroup>
+      label={<T id={'customer_type'} />}
+      className={classNames('form-group--customer_type')}>
+      <RadioGroup  
+        inline={true}
+        onChange={handleStringChange((value) => {
+          onChange && onChange(value);
+        })}
+        {...rest}
+      >
+        <Radio label={formatMessage({ id: 'business' })} value="business" />
+        <Radio label={formatMessage({ id: 'individual' })} value="individual" />
+      </RadioGroup>
+    </FormGroup>
  );
 }
--- a/client/src/containers/Customers/CustomersTabs.js
+++ b/client/src/containers/Customers/CustomersTabs.js
@@ -4,8 +4,15 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerNotTabs from './CustomerNotTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
+import CustomerFinancialPanel from './CustomerFinancialPanel';

-function CustomersTabs({ formik }) {
+function CustomersTabs({
+  setFieldValue,
+  getFieldProps,
+  errors,
+  values,
+  touched,
+}) {
  const [animate, setAnimate] = useState(true);
  const { formatMessage } = useIntl();
  const handleChangeTabs = useCallback(() => {}, []);
@@ -14,25 +21,36 @@ function CustomersTabs({ formik }) {
    <div>
      <Tabs animate={animate} id={'customer-tabs'} large={true}>
        <Tab
-          id={'other'}
-          title={formatMessage({ id: 'other' })}
-          panel={'Other'}
+          id={'financial'}
+          title={formatMessage({ id: 'financial_details' })}
+          panel={<CustomerFinancialPanel
+            values={values}
+            errors={errors} 
+            setFieldValue={setFieldValue}
+            touched={touched}
+          />}
        />
        <Tab
          id={'address'}
          title={formatMessage({ id: 'address' })}
-          panel={<CustomerAddressTabs formik={formik} />}
+          panel={<CustomerAddressTabs
+            setFieldValue={setFieldValue}
+            getFieldProps={getFieldProps}
+            errors={errors}
+            values={values}
+            touched={touched}
+          />}
        />
        <Tab
          id={'attachement'}
          title={formatMessage({ id: 'attachement' })}
          panel={<CustomerAttachmentTabs />}
        />
-        <Tab
+        {/* <Tab
          id={'note'}
          title={formatMessage({ id: 'note' })}
          panel={<CustomerNotTabs formik={formik} />}
-        />
+        /> */}
      </Tabs>
    </div>
  );
--- a/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
+++ b/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
@@ -28,20 +28,10 @@ function JournalNumberDialogContent({

  // #withManualJournalsActions
  setJournalNumberChanged,
-}) {
-  const [isChanged, setIsChanged] = useState(false);
-  
+}) {  
  const fetchSettings = useQuery(
-    ['settings', { group: 'manual_journal' }],
+    ['settings'],
    () => requestFetchOptions({}),
-    {
-      onSuccess: () => {
-        if (isChanged) {
-          setJournalNumberChanged(true);
-          setIsChanged(false);
-        }
-      }
-    }
  );

  const handleSubmitForm = (values, { setSubmitting }) => {
@@ -51,10 +41,11 @@ function JournalNumberDialogContent({

    requestSubmitOptions({ options }).then(() => {
      setSubmitting(false);
-      setIsChanged(true);
-      
-      queryCache.invalidateQueries('settings');
      closeDialog('journal-number-form');
+
+      setTimeout(() => {
+        queryCache.invalidateQueries('settings');
+      }, 250);
    }).catch(() => {
      setSubmitting(false);
    });
--- a/client/src/containers/Sales/Estimate/EntriesItemsTable.js
+++ b/client/src/containers/Sales/Estimate/EntriesItemsTable.js
@@ -3,7 +3,6 @@ import { omit } from 'lodash';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
-
 import { CLASSES } from 'common/classes';
 import { Hint, Icon } from 'components';
 import DataTable from 'components/DataTable';
--- a/client/src/lang/en/index.js
+++ b/client/src/lang/en/index.js
@@ -787,8 +787,13 @@ export default {
  invoice_number_is_not_unqiue:  'Invoice number is not unqiue',
  sale_receipt_number_not_unique: 'Receipt number is not unique',
  sale_invoice_number_is_exists: 'Sale invoice number is exists',
-  bill_number_exists:'Bill number exists',
+  bill_number_exists: 'Bill number exists',
  ok: 'Ok!',
  quantity_cannot_be_zero_or_empty: 'Quantity cannot be zero or empty.',
-
+  customer_email: 'Customer email',
+  customer_phone_number: 'Customer phone number',
+  opening_balance_at: 'Opening balance at',
+  opening_balance: 'Opening balance',
+  balance_currency: 'Balance currency',
+  financial_details: 'Financial details'
 };
--- a/client/src/store/manualJournals/manualJournals.reducers.js
+++ b/client/src/store/manualJournals/manualJournals.reducers.js
@@ -2,7 +2,6 @@ import t from 'store/types';
 import { createReducer } from '@reduxjs/toolkit';
 import { createTableQueryReducers } from 'store/queryReducers';
 import { omit } from 'lodash';
-import { journalNumberReducers } from 'store/journalNumber.reducer';

 const initialState = {
  items: {},
@@ -16,7 +15,6 @@ const initialState = {
  paginationMeta: {
    total: 0,
  },
-  journalNumberChanged: false,
 };

 const defaultJournal = {
@@ -117,8 +115,6 @@ const reducer = createReducer(initialState, {
      },
    };    
  },
-
-  ...journalNumberReducers(t.MANUAL_JOURNAL_NUMBER_CHANGED),
 });

 export default createTableQueryReducers('manual_journals', reducer);
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -44,7 +44,6 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import 'components/pagination';
@import 'components/resizer';

-// Pages
 // Pages
@import 'pages/dashboard';
@import 'pages/accounts-chart';
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -313,6 +313,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
  &.#{$ns}-radio {
    .#{$ns}-control-indicator{
      border: 2px solid #cecece;
+      background-color: #fff;

      &::before{
        height: 14px;
--- a/client/src/style/pages/customer.scss
+++ b/client/src/style/pages/customer.scss
@@ -1,105 +1,219 @@
-.customer-form {
-  padding: 25px;
-  padding-bottom: 90px;
-  width: 100%;
-  margin-bottom: 30px;

-  .bp3-form-group {
-    .bp3-label {
-      width: 130px;
+
+.page-form--customer{
+  $self: '.page-form';
+  padding: 20px;
+
+  #{$self}__header{
+    padding: 0;
+  }
+  #{$self}__primary-section{
+    padding: 30px 22px 0;
+    margin: -20px -20px 14px;
+    overflow: hidden;
+  }
+
+  #{$self}__header{
+
+    .bp3-form-group{
+
+      .bp3-label{
+        width: 200px;
+      }
+
+      .bp3-form-content{
+        width: 100%;
+      }
    }
-    .bp3-form-content {
-      width: 375px;
-    }
-    textarea {
-      min-width: 100%;
-      max-width: 100%;
-      width: 100%;
-      max-height: 120px;
+
+    .form-group--contact_name{
+
+      .bp3-control-group > *{
+        flex-shrink: unset;
+
+        &:not(:last-child) {
+          padding-right: 10px;
+        }
+
+        &.input-group--salutation-list{
+          width: 25%;
+        }
+        &.input-group--first-name,
+        &.input-group--last-name{
+          width: 37%;
+        }
+      }
    }
  }

-  .form-group--customer-type {
-    .bp3-label {
-      position: relative;
-      display: inline-block;
-      margin: 0 50px 30px 0px;
+  .bp3-form-group{
+    margin-bottom: 14px;
+  }
+
+  .bp3-tab-panel{
+    margin-top: 26px; 
+  }
+
+  #{$self}__tabs{
+    margin-top: 20px;
+
+    .bp3-form-group{
+      
+      .bp3-label{
+        min-width: 145px;
+      }
+      .bp3-form-content{
+        width: 100%;
+      }
    }
-  }

-  // .form-group--contact-name {
-  //   .bp3-input-group .bp3-input {
-  //     position: relative;
-  //     // display: none;
-  //     width: 50%;
-  //   }
-  //   // .row {
-  //   //   width: fit-content;
-  //   // }
-
-  //   // .#{$ns}-form-content{
-  //   //   width: 350px;
-  //   // }
-  // }
-
-  h1 {
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  &__primary-section {
-    background-color: #fafafa;
-    padding: 40px 22px 22px;
-    margin: -22px -22px 22px;
-    background-color: #fafafa;
-  }
-
-  &__tabs-section {
-    position: relative;
-    h4 {
-      margin: 0;
+    h4{
      font-weight: 500;
-      margin-bottom: 20px;
+      color: #888;
+      margin-bottom: 1.2rem;
      font-size: 14px;
-      color: #828282;
-    }
-    > div:first-of-type {
-      padding-right: 40px !important;
-    }
-    > div ~ div {
-      padding-left: 40px !important;
    }
  }

-  .dropzone-container {
-    align-self: end;
-  }
+  .bp3-tabs{
+    .bp3-tab-list{
+      position: relative;

-  .dropzone {
-    width: 300px;
-    height: 100px;
-    margin-right: 20px;
+      &:before{
+        content: "";
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #F0F0F0;  
+      }
+
+      > *:not(:last-child){
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab{
+        font-size: 15px;
+        color: #555;
+
+        &[aria-selected="true"],
+        &:not([aria-disabled="true"]):hover{
+          color: $pt-link-color;
+        }
+      }
+    }
  }
 }

-.form-group--contact-name {
-  .bp3-form-group.bp3-inline label.bp3-label {
-    line-height: 30px;
-    display: inline-block;
-    margin: 0 45px 0 0;
-    width: 200px;
-  }

-  .bp3-input-group .bp3-input {
-    position: relative;
-    // display: none;
-    width: 100%;
-    // margin-left: 30px;
-  }
-  // .row {
-  //   width: fit-content;
-  // }
+.customer-form{

-  // .#{$ns}-form-content{
-  //   width: 350px;
-  // }
+
+  &__primary-section{
+    background-color: #fafafa;
+    padding: 40px 22px 5px;
+    margin: -20px -20px 26px;
+
+    &-content{
+      width: 600px;
+    }
+  }
+  &__after-primary-section{
+    &-content{
+      width: 600px;
+    }
+  }
+  
+
+  
 }
+
+// .customer-form {
+//   padding: 25px;
+//   padding-bottom: 90px;
+//   width: 100%;
+//   margin-bottom: 30px;
+
+
+
+//   .form-group--customer-type {
+//     .bp3-label {
+//       position: relative;
+//       display: inline-block;
+//       margin: 0 50px 30px 0px;
+//     }
+//   }
+
+//   // .form-group--contact-name {
+//   //   .bp3-input-group .bp3-input {
+//   //     position: relative;
+//   //     // display: none;
+//   //     width: 50%;
+//   //   }
+//   //   // .row {
+//   //   //   width: fit-content;
+//   //   // }
+
+//   //   // .#{$ns}-form-content{
+//   //   //   width: 350px;
+//   //   // }
+//   // }
+
+//   h1 {
+//     font-size: 14px;
+//     margin-bottom: 20px;
+//   }
+//   &__primary-section {
+//     
+//   }
+
+//   &__tabs-section {
+//     position: relative;
+//     h4 {
+//       margin: 0;
+//       font-weight: 500;
+//       margin-bottom: 20px;
+//       font-size: 14px;
+//       color: #828282;
+//     }
+//     > div:first-of-type {
+//       padding-right: 40px !important;
+//     }
+//     > div ~ div {
+//       padding-left: 40px !important;
+//     }
+//   }
+
+//   .dropzone-container {
+//     align-self: end;
+//   }
+
+//   .dropzone {
+//     width: 300px;
+//     height: 100px;
+//     margin-right: 20px;
+//   }
+// }
+
+// .form-group--contact-name {
+//   .bp3-form-group.bp3-inline label.bp3-label {
+//     line-height: 30px;
+//     display: inline-block;
+//     margin: 0 45px 0 0;
+//     width: 200px;
+//   }
+
+//   .bp3-input-group .bp3-input {
+//     position: relative;
+//     // display: none;
+//     width: 100%;
+//     // margin-left: 30px;
+//   }
+//   // .row {
+//   //   width: fit-content;
+//   // }
+
+//   // .#{$ns}-form-content{
+//   //   width: 350px;
+//   // }
+// }
--- a/server/src/models/Account.js
+++ b/server/src/models/Account.js
@@ -11,7 +11,7 @@ import DependencyGraph from 'lib/DependencyGraph';

 export default class Account extends TenantModel {
  /**
-   * Table name
+   * Table name.
   */
  static get tableName() {
    return 'accounts';