Merge pull request #118 from bigcapitalhq/BIG-428-clean-up-the-preferences-pages

fix(webapp): general, accoutant and items preferences
2026-02-16 12:50:38 +00:00 · 2023-05-12 12:36:19 +02:00
parent 8f6325d529 05c2232b97
commit aa6b9dd295
27 changed files with 362 additions and 496 deletions
--- a/packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts
+++ b/packages/server/src/api/controllers/FinancialStatements/BalanceSheet.ts
@@ -41,7 +41,7 @@ export default class BalanceSheetStatementController extends BaseFinancialReport
  get balanceSheetValidationSchema(): ValidationChain[] {
    return [
      ...this.sheetNumberFormatValidationSchema,
-      query('accounting_method').optional().isIn(['cash', 'accural']),
+      query('accounting_method').optional().isIn(['cash', 'accrual']),

      query('from_date').optional(),
      query('to_date').optional(),
--- a/packages/server/src/api/controllers/Organization.ts
+++ b/packages/server/src/api/controllers/Organization.ts
@@ -58,7 +58,7 @@ export default class OrganizationController extends BaseController {
  private get organizationValidationSchema(): ValidationChain[] {
    return [
      check('name').exists().trim(),
-      check('industry').optional().isString(),
+      check('industry').optional({ nullable: true }).isString().trim().escape(),
      check('location').exists().isString().isISO31661Alpha2(),
      check('base_currency').exists().isISO4217(),
      check('timezone').exists().isIn(moment.tz.names()),
--- a/packages/server/src/database/seeds/core/20200810121809_seed_settings.ts
+++ b/packages/server/src/database/seeds/core/20200810121809_seed_settings.ts
@@ -8,7 +8,7 @@ export default class SeedSettings extends TenantSeeder {
  up() {
    const settings = [
      // Orgnization settings.
-      { group: 'organization', key: 'accounting_basis', value: 'accural' },
+      { group: 'organization', key: 'accounting_basis', value: 'accrual' },

      // Accounts settings.
      { group: 'accounts', key: 'account_code_unique', value: true },
--- a/packages/server/src/interfaces/BalanceSheet.ts
+++ b/packages/server/src/interfaces/BalanceSheet.ts
@@ -44,7 +44,7 @@ export interface IBalanceSheetQuery extends IFinancialSheetBranchesQuery {
  numberFormat: INumberFormatQuery;
  noneTransactions: boolean;
  noneZero: boolean;
-  basis: 'cash' | 'accural';
+  basis: 'cash' | 'accrual';
  accountIds: number[];

  percentageOfColumn: boolean;
--- a/packages/server/src/interfaces/TrialBalanceSheet.ts
+++ b/packages/server/src/interfaces/TrialBalanceSheet.ts
@@ -4,7 +4,7 @@ export interface ITrialBalanceSheetQuery {
  fromDate: Date | string;
  toDate: Date | string;
  numberFormat: INumberFormatQuery;
-  basis: 'cash' | 'accural';
+  basis: 'cash' | 'accrual';
  noneZero: boolean;
  noneTransactions: boolean;
  onlyActive: boolean;
--- a/packages/server/src/services/FinancialStatements/ProfitLossSheet/utils.ts
+++ b/packages/server/src/services/FinancialStatements/ProfitLossSheet/utils.ts
@@ -17,7 +17,7 @@ export const getDefaultPLQuery = (): IProfitLossSheetQuery => ({
    formatMoney: 'total',
    precision: 2,
  },
-  basis: 'accural',
+  basis: 'accrual',

  noneZero: false,
  noneTransactions: false,
--- a/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetService.ts
+++ b/packages/server/src/services/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetService.ts
@@ -35,7 +35,7 @@ export default class TrialBalanceSheetService extends FinancialSheet {
        formatMoney: 'total',
        precision: 2,
      },
-      basis: 'accural',
+      basis: 'accrual',
      noneZero: false,
      noneTransactions: true,
      onlyActive: false,
--- a/packages/webapp/package-lock.json
+++ b/packages/webapp/package-lock.json
@@ -1205,9 +1205,9 @@
      }
    },
    "@blueprintjs-formik/core": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.2.1.tgz",
-      "integrity": "sha512-YGJe+QorDGbkWDSUg6x69LYGN62Kgvb92Iz/voqmszVRKj4KcoPvd/7coF8Jmu+ZQE6LcwM/9ccB2i63L99ITA==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.3.tgz",
+      "integrity": "sha512-ko7g54YSEcSq2K/GEpmiTG0foGLqe7DwgXGhkGxYEiHhLAUv8WvQmrFsm8e/KOW7n8mLGq0uaZVe2l8m3JTGGQ==",
      "requires": {
        "lodash.get": "^4.4.2",
        "lodash.keyby": "^4.6.0",
@@ -7298,6 +7298,11 @@
        "locate-path": "^3.0.0"
      }
    },
+    "flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="
+    },
    "flat-cache": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -3,7 +3,7 @@
  "version": "1.7.1",
  "private": true,
  "dependencies": {
-    "@blueprintjs-formik/core": "^0.2.1",
+    "@blueprintjs-formik/core": "^0.3.3",
    "@blueprintjs-formik/datetime": "^0.3.4",
    "@blueprintjs-formik/select": "^0.2.3",
    "@blueprintjs/core": "^3.50.2",
@@ -45,6 +45,7 @@
    "deepdash": "^5.3.9",
    "dependency-graph": "^0.11.0",
    "fast-deep-equal": "^3.1.3",
+    "flat": "^5.0.2",
    "formik": "^2.2.5",
    "http-proxy-middleware": "^1.0.0",
    "jest": "24.9.0",
--- a/packages/webapp/src/components/Forms/Select.tsx
+++ b/packages/webapp/src/components/Forms/Select.tsx
@@ -46,7 +46,7 @@ const SelectButton = styled(Button)`
    margin-right: 12px;
    border-radius: 1px;
  }
-  &:not([class*='bp3-intent-']) {
+  &:not([class*='bp3-intent-']):not(.bp3-disabled) {
    &,
    &:hover {
      background: #fff;
--- a/packages/webapp/src/containers/FinancialStatements/GeneralLedger/common.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/GeneralLedger/common.tsx
@@ -30,7 +30,7 @@ export const getDefaultGeneralLedgerQuery = () => {
  return {
    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural',
+    basis: 'accrual',
    filterByOption: 'with-transactions',
    branchesIds: [],
    accountsIds: [],
--- a/packages/webapp/src/containers/FinancialStatements/Journal/utils.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/Journal/utils.tsx
@@ -13,7 +13,7 @@ export const getDefaultJournalQuery = () => {
  return {
    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural',
+    basis: 'accrual',
  };
 };

--- a/packages/webapp/src/containers/FinancialStatements/RadiosAccountingBasis.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/RadiosAccountingBasis.tsx
@@ -27,7 +27,7 @@ export default function RadiosAccountingBasis(props) {
          {...rest}
        >
          <Radio label={intl.get('cash')} value="cash" />
-          <Radio label={intl.get('accrual')} value="accural" />
+          <Radio label={intl.get('accrual')} value="accrual" />
        </RadioGroup>
      )}
    </FastField>
--- a/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/utils.tsx
+++ b/packages/webapp/src/containers/FinancialStatements/TrialBalanceSheet/utils.tsx
@@ -13,7 +13,7 @@ export function getDefaultTrialBalanceQuery() {
  return {
    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    basis: 'accural',
+    basis: 'accrual',
    filterByOption: 'with-transactions',
    branchesIds: [],
  };
--- a/packages/webapp/src/containers/Preferences/Accountant/Accountant.schema.tsx
+++ b/packages/webapp/src/containers/Preferences/Accountant/Accountant.schema.tsx
@@ -2,12 +2,18 @@
 import * as Yup from 'yup';

 const Schema = Yup.object().shape({
-  accounting_basis: Yup.string().required(),
-  account_code_required: Yup.boolean().nullable(),
-  account_code_unique: Yup.boolean().nullable(),
-  withdrawal_account: Yup.number().nullable(),
-  preferred_deposit_account: Yup.number().nullable(),
-  preferred_advance_deposit: Yup.number().nullable(),
+  organization: Yup.object({
+    accountingBasis: Yup.string().required(),
+  }),
+  accounts: Yup.object({
+    accountCodeRequired: Yup.boolean().nullable(),
+    accountCodeUnique: Yup.boolean().nullable(),
+  }),
+  paymentReceives: Yup.object({
+    preferredDepositAccount: Yup.number().nullable(),
+    preferredAdvanceDeposit: Yup.number().nullable(),
+    withdrawalAccount: Yup.number().nullable(),
+  })
 });

 export const AccountantSchema = Schema;
--- a/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
@@ -1,16 +1,9 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Form, FastField, useFormikContext } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import styled from 'styled-components';
-import {
-  FormGroup,
-  RadioGroup,
-  Radio,
-  Checkbox,
-  Button,
-  Intent,
-} from '@blueprintjs/core';
+import { FormGroup, Radio, Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';

 import {
@@ -19,8 +12,9 @@ import {
  FieldRequiredHint,
  CardFooterActions,
  FFormGroup,
+  FCheckbox,
+  FRadioGroup,
 } from '@/components';
-import { handleStringChange, inputIntent } from '@/utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { useAccountantFormContext } from './AccountantFormProvider';

@@ -30,7 +24,6 @@ import { useAccountantFormContext } from './AccountantFormProvider';
 export default function AccountantForm() {
  const history = useHistory();
  const { accounts } = useAccountantFormContext();
-
  const { isSubmitting } = useFormikContext();

  const handleCloseClick = () => {
@@ -48,78 +41,54 @@ export default function AccountantForm() {
        }
        className={'accounts-checkbox'}
      >
-        {/*------------ Account code (required) -----------*/}
-        <FastField name={'account_code_required'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={
-                  <T
-                    id={'make_account_code_required_when_create_a_new_accounts'}
-                  />
-                }
-                name={'account_code_required'}
-                {...field}
-              />
-            </FormGroup>
-          )}
-        </FastField>
+        {/*------------ Account Code (required) -----------*/}
+        <FFormGroup inline={true} name={'accounts.accountCodeRequired'}>
+          <FCheckbox
+            inline={true}
+            label={
+              <T id={'make_account_code_required_when_create_a_new_accounts'} />
+            }
+            name={'accounts.accountCodeRequired'}
+          />
+        </FFormGroup>

-        {/*------------ Account code (unique) -----------*/}
-        <FastField name={'account_code_unique'} type={'checkbox'}>
-          {({ field }) => (
-            <FormGroup inline={true}>
-              <Checkbox
-                inline={true}
-                label={
-                  <T
-                    id={
-                      'should_account_code_be_unique_when_create_a_new_account'
-                    }
-                  />
-                }
-                name={'account_code_unique'}
-                {...field}
+        {/*------------ Account Code (unique) -----------*/}
+        <FFormGroup
+          name={'accounts.accountCodeUnique'}
+          type={'checkbox'}
+          inline={true}
+        >
+          <FCheckbox
+            inline={true}
+            label={
+              <T
+                id={'should_account_code_be_unique_when_create_a_new_account'}
              />
-            </FormGroup>
-          )}
-        </FastField>
+            }
+            name={'accounts.accountCodeUnique'}
+          />
+        </FFormGroup>
      </FormGroup>

-      {/* ----------- Accounting basis ----------- */}
-      <FastField name={'accounting_basis'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            label={
-              <strong>
-                <T id={'accounting_basis_'} />
-              </strong>
-            }
-          >
-            <RadioGroup
-              inline={true}
-              selectedValue={value}
-              onChange={handleStringChange((_value) => {
-                setFieldValue('accounting_basis', _value);
-              })}
-            >
-              <Radio label={intl.get('cash')} value="cash" />
-              <Radio label={intl.get('accrual')} value="accrual" />
-            </RadioGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      {/* ----------- Accounting Basis ----------- */}
+      <FormGroup
+        name={'organization.accountingBasis'}
+        labelInfo={<FieldRequiredHint />}
+        label={
+          <strong>
+            <T id={'accounting_basis_'} />
+          </strong>
+        }
+      >
+        <FRadioGroup name={'organization.accountingBasis'} inline={true}>
+          <Radio label={intl.get('cash')} value="cash" />
+          <Radio label={intl.get('accrual')} value="accrual" />
+        </FRadioGroup>
+      </FormGroup>

-      {/* ----------- Deposit customer account ----------- */}
+      {/* ----------- Deposit Customer Account ----------- */}
      <AccountantFormGroup
-        name={'preferred_deposit_account'}
+        name={'paymentReceives.preferredDepositAccount'}
        label={
          <strong>
            <T id={'deposit_customer_account'} />
@@ -136,7 +105,7 @@ export default function AccountantForm() {
        fastField={true}
      >
        <AccountsSelect
-          name={'preferred_deposit_account'}
+          name={'paymentReceives.preferredDepositAccount'}
          items={accounts}
          placeholder={<T id={'select_payment_account'} />}
          filterByTypes={[
@@ -148,9 +117,9 @@ export default function AccountantForm() {
        />
      </AccountantFormGroup>

-      {/* ----------- Withdrawal vendor account ----------- */}
+      {/* ----------- Withdrawal Vendor Account ----------- */}
      <AccountantFormGroup
-        name={'withdrawal_account'}
+        name={'billPayments.withdrawalAccount'}
        label={
          <strong>
            <T id={'withdrawal_vendor_account'} />
@@ -167,7 +136,7 @@ export default function AccountantForm() {
        fastField={true}
      >
        <AccountsSelect
-          name={'withdrawal_account'}
+          name={'billPayments.withdrawalAccount'}
          items={accounts}
          placeholder={<T id={'select_payment_account'} />}
          filterByTypes={[
@@ -179,9 +148,9 @@ export default function AccountantForm() {
        />
      </AccountantFormGroup>

-      {/* ----------- Withdrawal customer account ----------- */}
+      {/* ----------- Withdrawal Customer Account ----------- */}
      <AccountantFormGroup
-        name={'preferred_advance_deposit'}
+        name={'paymentReceives.preferredAdvanceDeposit'}
        label={
          <strong>
            <T id={'customer_advance_deposit'} />
@@ -198,7 +167,7 @@ export default function AccountantForm() {
        fastField={true}
      >
        <AccountsSelect
-          name={'preferred_advance_deposit'}
+          name={'paymentReceives.preferredAdvanceDeposit'}
          items={accounts}
          placeholder={<T id={'select_payment_account'} />}
          filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
--- a/packages/webapp/src/containers/Preferences/Accountant/AccountantFormPage.tsx
+++ b/packages/webapp/src/containers/Preferences/Accountant/AccountantFormPage.tsx
@@ -1,55 +1,66 @@
 // @ts-nocheck
 import React, { useEffect } from 'react';
+import * as R from 'ramda';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
-import { pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
+import { flatten, unflatten } from 'flat';

 import { AppToaster } from '@/components';
-
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withSettings from '@/containers/Settings/withSettings';

 import AccountantForm from './AccountantForm';
 import { AccountantSchema } from './Accountant.schema';
 import { useAccountantFormContext } from './AccountantFormProvider';
-import { transformToOptions } from './utils';
-import { compose, transformGeneralSettings } from '@/utils';
+import { transferObjectOptionsToArray } from './utils';
+import { compose, transformToForm, transfromToSnakeCase } from '@/utils';

 import '@/style/pages/Preferences/Accounting.scss';

+const defaultFormValues = flatten({
+  organization: {
+    accountingBasis: 'accrual',
+  },
+  accounts: {
+    accountCodeRequired: false,
+    accountCodeUnique: false,
+  },
+  billPayments: {
+    withdrawalAccount: '',
+  },
+  paymentReceives: {
+    preferredDepositAccount: '',
+    preferredAdvanceDeposit: '',
+  },
+});
+
 // Accountant preferences.
 function AccountantFormPage({
  //# withDashboardActions
  changePreferencesPageTitle,

  // #withSettings
-  organizationSettings,
-  paymentReceiveSettings,
-  accountsSettings,
-  billPaymentSettings,
+  allSettings,
 }) {
  const { saveSettingMutate } = useAccountantFormContext();

-  const accountantSettings = {
-    ...billPaymentSettings,
-    ...accountsSettings,
-    ...pick(organizationSettings, ['accountingBasis']),
-    ...pick(paymentReceiveSettings, ['preferredDepositAccount', 'preferredAdvanceDeposit']),
-  };
-
-  const initialValues = {
-    ...transformGeneralSettings(accountantSettings),
-  };
-
  useEffect(() => {
    changePreferencesPageTitle(intl.get('accountant'));
  }, [changePreferencesPageTitle]);

+  const initialValues = unflatten({
+    ...defaultFormValues,
+    ...transformToForm(flatten(allSettings), defaultFormValues),
+  });
+  // Handle the form submitting.
  const handleFormSubmit = (values, { setSubmitting }) => {
-    const options = transformToOptions(values);
-
+    const options = R.compose(
+      transferObjectOptionsToArray,
+      transfromToSnakeCase,
+    )(values);
    setSubmitting(true);
+
    const onSuccess = () => {
      AppToaster.show({
        message: intl.get('the_accountant_preferences_has_been_saved'),
@@ -57,8 +68,7 @@ function AccountantFormPage({
      });
      setSubmitting(false);
    };
-
-    const onError = (errors) => {
+    const onError = () => {
      setSubmitting(false);
    };
    saveSettingMutate({ options }).then(onSuccess).catch(onError);
@@ -75,18 +85,8 @@ function AccountantFormPage({
 }

 export default compose(
-  withSettings(
-    ({
-      organizationSettings,
-      paymentReceiveSettings,
-      accountsSettings,
-      billPaymentSettings,
-    }) => ({
-      organizationSettings,
-      paymentReceiveSettings,
-      accountsSettings,
-      billPaymentSettings,
-    }),
-  ),
+  withSettings(({ allSettings }) => ({
+    allSettings,
+  })),
  withDashboardActions,
 )(AccountantFormPage);
--- a/packages/webapp/src/containers/Preferences/Accountant/AccountantFormProvider.tsx
+++ b/packages/webapp/src/containers/Preferences/Accountant/AccountantFormProvider.tsx
@@ -17,7 +17,7 @@ function AccountantFormProvider({ ...props }) {
  // Fetches the accounts list.
  const { isLoading: isAccountsLoading, data: accounts } = useAccounts();

-  //Fetches Organization Settings.
+  // Fetches Organization Settings.
  const { isLoading: isSettingsLoading } = useSettings();

  // Save Organization Settings.
@@ -29,7 +29,7 @@ function AccountantFormProvider({ ...props }) {
    isAccountsLoading,
    saveSettingMutate,
  };
-
+  // Detarmines whether if any query is loading.
  const isLoading = isSettingsLoading || isAccountsLoading;

  return (
--- a/packages/webapp/src/containers/Preferences/Accountant/utils.tsx
+++ b/packages/webapp/src/containers/Preferences/Accountant/utils.tsx
@@ -1,38 +1,6 @@
 // @ts-nocheck
-export const transformToOptions = (option) => {
-  return [
-    {
-      key: 'accounting_basis',
-      value: option.accounting_basis,
-      group: 'organization',
-    },
-    {
-      key: 'withdrawal_account',
-      value: option.withdrawal_account,
-      group: 'bill_payments',
-    },
-    {
-      key: 'preferred_deposit_account',
-      value: option.preferred_deposit_account,
-      group: 'payment_receives',
-    },
-    {
-      key: 'preferred_advance_deposit',
-      value: option.preferred_advance_deposit,
-      group: 'payment_receives',
-    },
-    {
-      key: 'account_code_required',
-      value: option.account_code_required,
-      group: 'accounts',
-    },
-    {
-      
-      key: 'account_code_unique',
-      value: option.account_code_unique,
-      group: 'accounts',
-    },
-  ];
-};
-

+export const transferObjectOptionsToArray = (input) =>
+  Object.entries(input).flatMap(([group, options]) =>
+    Object.entries(options).map(([key, value]) => ({ group, key, value })),
+  );
--- a/packages/webapp/src/containers/Preferences/Currencies/CurrenciesDataTable.tsx
+++ b/packages/webapp/src/containers/Preferences/Currencies/CurrenciesDataTable.tsx
@@ -10,6 +10,7 @@ import { ActionMenuList, useCurrenciesTableColumns } from './components';

 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withAlertActions from '@/containers/Alert/withAlertActions';
+import styled from 'styled-components';

 /**
 * Currencies table.
@@ -46,7 +47,7 @@ function CurrenciesDataTable({
  };

  return (
-    <DataTable
+    <CurrencieDataTable
      columns={columns}
      data={currencies}
      loading={isCurrenciesLoading}
@@ -68,3 +69,11 @@ export default compose(
  withDialogActions,
  withAlertActions,
 )(CurrenciesDataTable);
+
+const CurrencieDataTable = styled(DataTable)`
+  .table .th,
+  .table .td {
+    padding-top: 0.4rem;
+    padding-bottom: 0.4rem;
+  }
+`;
--- a/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
@@ -3,15 +3,17 @@ import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import { Form } from 'formik';
-import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { Button, FormGroup, Intent } from '@blueprintjs/core';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { ErrorMessage, FastField } from 'formik';
 import { useHistory } from 'react-router-dom';

 import {
-  ListSelect,
  FieldRequiredHint,
  FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
+  FSelect,
 } from '@/components';
 import { inputIntent } from '@/utils';
 import { CLASSES } from '@/constants/classes';
@@ -46,153 +48,114 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
  return (
    <Form>
      {/* ---------- Organization name ----------  */}
-      <FastField name={'name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'organization_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            className={'form-group--org-name'}
-            helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
-          >
-            <InputGroup medium={'true'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'name'}
+        label={<T id={'organization_name'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
+        fastField={true}
+      >
+        <FInputGroup medium={'true'} name={'name'} fastField={true} />
+      </FFormGroup>

      {/* ---------- Industry ----------  */}
-      <FastField name={'industry'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'organization_industry'} />}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="industry" />}
-            className={'form-group--org-industry'}
-          >
-            <InputGroup medium={'true'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'industry'}
+        label={<T id={'organization_industry'} />}
+        inline={true}
+        fastField={true}
+      >
+        <FInputGroup name={'industry'} medium={'true'} fastField={true} />
+      </FFormGroup>

      {/* ---------- Location ---------- */}
-      <FastField name={'location'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'business_location'} />}
-            className={classNames(
-              'form-group--business-location',
-              CLASSES.FILL,
-            )}
-            inline={true}
-            helperText={<ErrorMessage name="location" />}
-            intent={inputIntent({ error, touched })}
-          >
-            <ListSelect
-              items={Countries}
-              onItemSelect={({ value }) => {
-                form.setFieldValue('location', value);
-              }}
-              selectedItem={value}
-              selectedItemProp={'value'}
-              defaultText={<T id={'select_business_location'} />}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'location'}
+        label={<T id={'business_location'} />}
+        inline={true}
+        fastField={true}
+      >
+        <FSelect
+          name={'location'}
+          items={Countries}
+          valueAccessor={'countryCode'}
+          labelAccessor={'countryCode'}
+          textAccessor={'name'}
+          placeholder={<T id={'select_business_location'} />}
+          popoverProps={{ minimal: true }}
+          fastField={true}
+        />
+      </FFormGroup>

      {/* ----------  Base currency ----------  */}
-      <FastField
+      <FFormGroup
        name={'base_currency'}
        baseCurrencyDisabled={baseCurrencyDisabled}
+        label={<T id={'base_currency'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        helperText={
+          <T
+            id={'you_can_t_change_the_base_currency_as_there_are_transactions'}
+          />
+        }
+        fastField={true}
        shouldUpdate={shouldBaseCurrencyUpdate}
      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'base_currency'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--base-currency', CLASSES.FILL)}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            helperText={
-              <T
-                id={
-                  'you_can_t_change_the_base_currency_as_there_are_transactions'
-                }
-              />
-            }
-          >
-            <ListSelect
-              items={Currencies}
-              onItemSelect={(currency) => {
-                form.setFieldValue('base_currency', currency.key);
-              }}
-              selectedItem={value}
-              selectedItemProp={'key'}
-              defaultText={<T id={'select_base_currency'} />}
-              textProp={'name'}
-              labelProp={'key'}
-              popoverProps={{ minimal: true }}
-              disabled={baseCurrencyDisabled}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <FSelect
+          name={'base_currency'}
+          items={Currencies}
+          valueAccessor={'key'}
+          textAccessor={'name'}
+          labelAccessor={'key'}
+          placeholder={<T id={'select_base_currency'} />}
+          popoverProps={{ minimal: true }}
+          disabled={baseCurrencyDisabled}
+          fastField={true}
+          shouldUpdate={shouldBaseCurrencyUpdate}
+          baseCurrencyDisabled={baseCurrencyDisabled}
+        />
+      </FFormGroup>

      {/* --------- Fiscal Year ----------- */}
-      <FastField name={'fiscal_year'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'fiscal_year'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--fiscal-year', CLASSES.FILL)}
-            inline={true}
-            intent={inputIntent({ error, touched })}
-            helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
-          >
-            <ListSelect
-              items={FiscalYear}
-              onItemSelect={(option) => {
-                form.setFieldValue('fiscal_year', option.key);
-              }}
-              selectedItem={value}
-              selectedItemProp={'key'}
-              defaultText={<T id={'select_fiscal_year'} />}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'fiscal_year'}
+        label={<T id={'fiscal_year'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
+        fastField={true}
+      >
+        <FSelect
+          name={'fiscal_year'}
+          items={FiscalYear}
+          valueAccessor={'key'}
+          textAccessor={'name'}
+          placeholder={<T id={'select_fiscal_year'} />}
+          popoverProps={{ minimal: true }}
+          fastField={true}
+        />
+      </FFormGroup>

      {/* ---------- Language ---------- */}
-      <FastField name={'language'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'language'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames('form-group--language', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="language" />}
-          >
-            <ListSelect
-              items={Languages}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              defaultText={<T id={'select_language'} />}
-              selectedItem={value}
-              onItemSelect={(item) =>
-                form.setFieldValue('language', item.value)
-              }
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FormGroup
+        name={'language'}
+        label={<T id={'language'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        fastField={true}
+      >
+        <FSelect
+          name={'language'}
+          items={Languages}
+          valueAccessor={'value'}
+          textAccessor={'name'}
+          placeholder={<T id={'select_language'} />}
+          popoverProps={{ minimal: true }}
+          fastField={true}
+        />
+      </FormGroup>

      {/* ----------  Time zone ----------  */}
      <FastField name={'timezone'}>
@@ -222,30 +185,24 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
      </FastField>

      {/* --------- Data format ----------- */}
-      <FastField name={'date_format'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'date_format'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames('form-group--date-format', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date_format" />}
-          >
-            <ListSelect
-              items={dateFormats}
-              onItemSelect={(dateFormat) => {
-                form.setFieldValue('date_format', dateFormat.key);
-              }}
-              selectedItem={value}
-              selectedItemProp={'key'}
-              defaultText={<T id={'select_date_format'} />}
-              textProp={'label'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'date_format'}
+        label={<T id={'date_format'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        helperText={<ErrorMessage name="date_format" />}
+        fastField={true}
+      >
+        <FSelect
+          name={'date_format'}
+          items={dateFormats}
+          valueAccessor={'key'}
+          textAccessor={'label'}
+          placeholder={<T id={'select_date_format'} />}
+          popoverProps={{ minimal: true }}
+          fastField={true}
+        />
+      </FFormGroup>

      <CardFooterActions>
        <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
--- a/packages/webapp/src/containers/Preferences/General/GeneralFormPage.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralFormPage.tsx
@@ -40,6 +40,7 @@ function GeneralFormPage({

  // Initial values.
  const initialValues = {
+    ...defaultValues,
    ...transformToForm(organization.metadata, defaultValues),
  };
  // Handle the form submit.
--- a/packages/webapp/src/containers/Preferences/General/GeneralFormProvider.tsx
+++ b/packages/webapp/src/containers/Preferences/General/GeneralFormProvider.tsx
@@ -23,6 +23,7 @@ function GeneralFormProvider({ ...props }) {
  const { isLoading: isOrganizationLoading, data: organization } =
    useCurrentOrganization();

+  // Fetch date format options.
  const { data: dateFormats, isLoading: isDateFormatsLoading } =
    useDateFormats();

--- a/packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
@@ -1,8 +1,9 @@
 // @ts-nocheck
 import React from 'react';
 import { Form, useFormikContext } from 'formik';
-import { FormGroup, Button, Intent } from '@blueprintjs/core';
+import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import {
  AccountsSelect,
  FieldRequiredHint,
@@ -30,7 +31,7 @@ export default function ItemForm() {
  return (
    <Form>
      {/* ----------- Preferred Sell Account ----------- */}
-      <FormGroup
+      <ItemFormGroup
        name={'preferred_sell_account'}
        label={
          <strong>
@@ -53,10 +54,10 @@ export default function ItemForm() {
          placeholder={<T id={'select_payment_account'} />}
          filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
        />
-      </FormGroup>
+      </ItemFormGroup>

      {/* ----------- Preferred Cost Account ----------- */}
-      <FFormGroup
+      <ItemFormGroup
        name={'preferred_cost_account'}
        label={
          <strong>
@@ -79,10 +80,10 @@ export default function ItemForm() {
          placeholder={<T id={'select_payment_account'} />}
          filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
        />
-      </FFormGroup>
+      </ItemFormGroup>

      {/* ----------- Preferred Inventory Account ----------- */}
-      <FFormGroup
+      <ItemFormGroup
        name={'preferred_inventory_account'}
        label={
          <strong>
@@ -105,7 +106,7 @@ export default function ItemForm() {
          placeholder={<T id={'select_payment_account'} />}
          filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
        />
-      </FFormGroup>
+      </ItemFormGroup>

      <CardFooterActions>
        <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
@@ -118,3 +119,7 @@ export default function ItemForm() {
    </Form>
  );
 }
+
+const ItemFormGroup = styled(FFormGroup)`
+  max-width: 400px;
+`;
--- a/packages/webapp/src/containers/Preferences/Item/ItemPreferencesFormPage.tsx
+++ b/packages/webapp/src/containers/Preferences/Item/ItemPreferencesFormPage.tsx
@@ -11,10 +11,21 @@ import ItemPreferencesForm from './ItemPreferencesForm';
 import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withSettings from '@/containers/Settings/withSettings';
-import { compose, optionsMapToArray, transformGeneralSettings } from '@/utils';
+import {
+  compose,
+  optionsMapToArray,
+  transformGeneralSettings,
+  transformToForm,
+} from '@/utils';

 import '@/style/pages/Preferences/Accounting.scss';

+const defaultFormValues = {
+  preferred_sell_account: '',
+  preferred_cost_account: '',
+  preferred_inventory_account: '',
+};
+
 // item form page preferences.
 function ItemPreferencesFormPage({
  // #withSettings
@@ -25,16 +36,13 @@ function ItemPreferencesFormPage({
 }) {
  const { saveSettingMutate } = useItemPreferencesFormContext();

-  const itemPerferencesSettings = {
-    ...omit(itemsSettings, ['tableSize']),
-  };
-
  // Initial values.
  const initialValues = {
-    preferred_sell_account: '',
-    preferred_cost_account: '',
-    preferred_inventory_account: '',
-    ...transformGeneralSettings(itemPerferencesSettings),
+    ...defaultFormValues,
+    ...transformToForm(
+      transformGeneralSettings(itemsSettings),
+      defaultFormValues,
+    ),
  };

  useEffect(() => {
--- a/packages/webapp/src/containers/Settings/withSettings.tsx
+++ b/packages/webapp/src/containers/Settings/withSettings.tsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 export default (mapState) => {
  const mapStateToProps = (state, props) => {
    const mapped = {
+      allSettings: state.settings.data,
      organizationSettings: state.settings.data.organization,
      manualJournalsSettings: state.settings.data.manualJournals,
      billPaymentSettings: state.settings.data.billPayments,
--- a/packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx
+++ b/packages/webapp/src/containers/Setup/SetupOrganizationForm.tsx
@@ -1,18 +1,17 @@
 // @ts-nocheck
 import React from 'react';
 import { FastField, Form, ErrorMessage } from 'formik';
-import {
-  Button,
-  Intent,
-  FormGroup,
-  MenuItem,
-  Classes,
-} from '@blueprintjs/core';
+import { Button, Intent, FormGroup, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
-import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
+import {
+  FFormGroup,
+  FInputGroup,
+  FSelect,
+  FormattedMessage as T,
+} from '@/components';

-import { Col, Row, ListSelect } from '@/components';
+import { Col, Row } from '@/components';
 import { inputIntent } from '@/utils';

 import { getFiscalYear } from '@/constants/fiscalYearOptions';
@@ -35,152 +34,88 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
      <h3>
        <T id={'organization_details'} />
      </h3>
-
      {/* ---------- Organization name ----------  */}
-      <FFormGroup name={'name'} label={<T id={'legal_organization_name'} />}>
-        <FInputGroup name={'name'} />
+      <FFormGroup
+        name={'name'}
+        label={<T id={'legal_organization_name'} />}
+        fastField={true}
+      >
+        <FInputGroup name={'name'} fastField={true} />
      </FFormGroup>

      {/* ---------- Location ---------- */}
-      <FastField name={'location'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'business_location'} />}
-            className={classNames(
-              'form-group--business-location',
-              Classes.FILL,
-            )}
-            helperText={<ErrorMessage name="location" />}
-            intent={inputIntent({ error, touched })}
-          >
-            <ListSelect
-              items={countries}
-              onItemSelect={({ countryCode }) => {
-                form.setFieldValue('location', countryCode);
-              }}
-              selectedItem={value}
-              selectedItemProp={'countryCode'}
-              defaultText={<T id={'select_business_location'} />}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'location'}
+        label={<T id={'business_location'} />}
+        fastField={true}
+      >
+        <FSelect
+          name={'location'}
+          items={countries}
+          valueAccessor={'countryCode'}
+          textAccessor={'name'}
+          placeholder={<T id={'select_business_location'} />}
+          popoverProps={{ minimal: true }}
+          fastField={true}
+        />
+      </FFormGroup>

      <Row>
        <Col xs={6}>
          {/* ----------  Base currency ----------  */}
-          <FastField name={'baseCurrency'}>
-            {({
-              form: { setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'base_currency'} />}
-                className={classNames(
-                  'form-group--base-currency',
-                  'form-group--select-list',
-                  Classes.FILL,
-                )}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'baseCurrency'} />}
-              >
-                <ListSelect
-                  items={currencies}
-                  noResults={
-                    <MenuItem disabled={true} text={<T id={'no_results'} />} />
-                  }
-                  popoverProps={{ minimal: true }}
-                  onItemSelect={(item) => {
-                    setFieldValue('baseCurrency', item.key);
-                  }}
-                  selectedItemProp={'key'}
-                  textProp={'name'}
-                  defaultText={<T id={'select_base_currency'} />}
-                  selectedItem={value}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'baseCurrency'}
+            label={<T id={'base_currency'} />}
+            fastField={true}
+          >
+            <FSelect
+              name={'baseCurrency'}
+              items={currencies}
+              popoverProps={{ minimal: true }}
+              valueAccessor={'key'}
+              textAccessor={'name'}
+              placeholder={<T id={'select_base_currency'} />}
+              fastField={true}
+            />
+          </FFormGroup>
        </Col>

        {/* ---------- Language ---------- */}
        <Col xs={6}>
-          <FastField name={'language'}>
-            {({
-              form: { setFieldValue },
-              field: { value },
-              meta: { error, touched },
-            }) => (
-              <FormGroup
-                label={<T id={'language'} />}
-                className={classNames(
-                  'form-group--language',
-                  'form-group--select-list',
-                  Classes.FILL,
-                )}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'language'} />}
-              >
-                <ListSelect
-                  items={Languages}
-                  noResults={
-                    <MenuItem disabled={true} text={<T id={'no_results'} />} />
-                  }
-                  onItemSelect={(item) => {
-                    setFieldValue('language', item.value);
-                  }}
-                  selectedItem={value}
-                  textProp={'name'}
-                  selectedItemProp={'value'}
-                  defaultText={<T id={'select_language'} />}
-                  popoverProps={{ minimal: true }}
-                  filterable={false}
-                  intent={inputIntent({ error, touched })}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'language'}
+            label={<T id={'language'} />}
+            fastField={true}
+          >
+            <FSelect
+              name={'language'}
+              items={Languages}
+              valueAccessor={'value'}
+              textAccessor={'name'}
+              placeholder={<T id={'select_language'} />}
+              popoverProps={{ minimal: true }}
+              fastField={true}
+            />
+          </FFormGroup>
        </Col>
      </Row>
+
      {/* --------- Fiscal Year ----------- */}
-      <FastField name={'fiscalYear'}>
-        {({
-          form: { setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'fiscal_year'} />}
-            className={classNames(
-              'form-group--fiscal_year',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'fiscalYear'} />}
-          >
-            <ListSelect
-              items={FiscalYear}
-              noResults={
-                <MenuItem disabled={true} text={<T id={'no_results'} />} />
-              }
-              selectedItem={value}
-              selectedItemProp={'key'}
-              textProp={'name'}
-              defaultText={<T id={'select_fiscal_year'} />}
-              popoverProps={{ minimal: true }}
-              onItemSelect={(item) => {
-                setFieldValue('fiscalYear', item.key);
-              }}
-              filterable={false}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'fiscalYear'}
+        label={<T id={'fiscal_year'} />}
+        fastField={true}
+      >
+        <FSelect
+          name={'fiscalYear'}
+          items={FiscalYear}
+          valueAccessor={'key'}
+          textAccessor={'name'}
+          placeholder={<T id={'select_fiscal_year'} />}
+          popoverProps={{ minimal: true }}
+          fastField={true}
+        />
+      </FFormGroup>

      {/* ----------  Time zone ----------  */}
      <FastField name={'timezone'}>