feat: migrate from CRA to Vite for speed

2025-11-24 14:18:56 +02:00
parent 43faa45dcf
commit caf232d928
20 changed files with 1770 additions and 6525 deletions
--- a/packages/webapp/craco.config.js
+++ b/packages/webapp/craco.config.js
@@ -1,17 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  webpack: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-    configure: {
-      resolve: {
-        fallback: { path: require.resolve('path-browserify') },
-      },
-    },
-  },
-  devServer: {
-    allowedHosts: process.env.GITPOD_HOST ? 'all' : 'auto'
-  },
-};
--- a/packages/webapp/index.html
+++ b/packages/webapp/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicons/favicon-32.ico" sizes="32x32" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Bigcapital Financial Managment Software"
+    />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Bigcapital</title>
+  </head>
+  <body class="bp4-dark">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <div id="nprogress"></div>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
+      type="text/css"
+    />
+    <script src="https://app.lemonsqueezy.com/js/lemon.js"></script>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
+
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -18,7 +18,6 @@
    "@blueprintjs/timezone": "^4.5.43",
    "@casl/ability": "^5.4.3",
    "@casl/react": "^2.3.0",
-    "@craco/craco": "^5.9.0",
    "@emotion/css": "^11.13.4",
    "@emotion/react": "^11.13.3",
    "@react-oauth/google": "^0.12.2",
@@ -36,7 +35,7 @@
    "@tiptap/starter-kit": "2.1.13",
    "@types/js-money": "^0.6.1",
    "@types/lodash": "^4.14.172",
-    "@types/node": "^14.14.9",
+    "@types/node": "^20.16.10",
    "@types/ramda": "^0.28.14",
    "@types/react": "18.3.4",
    "@types/react-body-classname": "^1.1.7",
@@ -67,7 +66,6 @@
    "formik": "^2.2.5",
    "helmet": "^3.21.0",
    "history": "4.10.1",
-    "http-proxy-middleware": "^1.0.0",
    "js-cookie": "2.2.1",
    "js-money": "^0.6.3",
    "lodash": "^4.17.15",
@@ -81,16 +79,13 @@
    "query-string": "^7.1.1",
    "ramda": "^0.27.1",
    "react": "^18.2.0",
-    "react-app-polyfill": "^1.0.6",
    "react-body-classname": "^1.3.1",
    "react-colorful": "^5.6.1",
    "react-content-loader": "^6.0.1",
-    "react-dev-utils": "^11.0.4",
    "react-dom": "^18.2.0",
    "react-dropzone": "^11.0.1",
    "react-dropzone-esm": "^15.0.1",
    "react-error-boundary": "^3.0.2",
-    "react-error-overlay": "^6.0.9",
    "react-helmet": "^6.1.0",
    "react-hotkeys-hook": "^3.0.3",
    "react-intl-universal": "^2.4.7",
@@ -102,7 +97,6 @@
    "react-router": "5.3.4",
    "react-router-breadcrumbs-hoc": "^3.2.10",
    "react-router-dom": "^5.3.3",
-    "react-scripts": "5.0.1",
    "react-scroll-sync": "^0.7.1",
    "react-scrollbars-custom": "^4.0.21",
    "react-sortablejs": "^2.0.11",
@@ -129,17 +123,19 @@
    "typescript": "^4.8.3",
    "yup": "^0.28.1"
  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint-config-react-app": "^7.0.1",
+    "vite": "^5.1.6"
+  },
  "scripts": {
-    "dev": "cross-env PORT=4000 craco start",
-    "build": "craco build",
+    "dev": "cross-env PORT=4000 vite",
+    "build": "vite build",
+    "preview": "cross-env PORT=4173 vite preview",
    "typecheck": "tsc --noEmit",
    "test": "node scripts/test.js",
    "storybook": "start-storybook -p 6006"
  },
-  "proxy": "http://localhost:3000/",
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  },
  "eslintConfig": {
    "extends": [
      "react-app",
--- a/packages/webapp/setupProxy.tsx
+++ b/packages/webapp/setupProxy.tsx
@@ -1,11 +0,0 @@
-const proxy = require('http-proxy-middleware');
-
-module.exports = function(app) {
-  app.use(
-    '/api',
-    proxy({
-      target: 'http://localhost:3000',
-      changeOrigin: true,
-    })
-  );
-};
--- a/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
+++ b/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
@@ -1,13 +1,43 @@
-// @ts-nocheck
 import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
 import { FMultiSelect } from '../Forms';
 import { accountPredicate } from './_components';
-import { MenuItemNestedText } from '../Menu';
 import { usePreprocessingAccounts } from './_hooks';
+import { DialogsName } from '@/constants/dialogs';
+import { useDialogActions } from '@/hooks/state/dashboard';
+import { SelectOptionProps } from '@blueprintjs-formik/select';
+
+interface Account {
+  id: number;
+  name: string;
+  code: string;
+  account_level: number;
+  account_type?: string;
+  account_parent_type?: string;
+  account_root_type?: string;
+  account_normal?: string;
+}
+
+interface AccountSelect extends Account, SelectOptionProps { }
+
+type MultiSelectProps = React.ComponentProps<typeof FMultiSelect>;
+
+interface AccountsMultiSelectProps extends Omit<MultiSelectProps, 'items'> {
+  items: AccountSelect[];
+  allowCreate?: boolean;
+  filterByRootTypes?: string[];
+  filterByParentTypes?: string[];
+  filterByTypes?: string[];
+  filterByNormal?: string[];
+}

 // Create new account renderer.
-const createNewItemRenderer = (query, active, handleClick) => {
+const createNewItemRenderer = (
+  query: string,
+  active: boolean,
+  handleClick: (event: React.MouseEvent<HTMLElement>) => void,
+): React.ReactElement => {
  return (
    <MenuItem
      icon="add"
@@ -18,32 +48,12 @@ const createNewItemRenderer = (query, active, handleClick) => {
  );
 };

-/**
- * Default account item renderer of the list.
- * @returns {JSX.Element}
- */
-const accountRenderer = (
-  item,
-  { handleClick, modifiers, query },
-  { isSelected },
-) => {
-  if (!modifiers.matchesPredicate) {
-    return null;
-  }
-  return (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      text={<MenuItemNestedText level={item.account_level} text={item.name} />}
-      key={item.id}
-      onClick={handleClick}
-      icon={isSelected ? 'tick' : 'blank'}
-    />
-  );
-};
-
 // Create new item from the given query string.
-const createNewItemFromQuery = (name) => ({ name });
+const createNewItemFromQuery = (query: string): SelectOptionProps => ({
+  label: query,
+  value: query,
+  id: 0,
+});

 /**
 * Accounts multi-select field binded with Formik form.
@@ -59,27 +69,32 @@ export function AccountsMultiSelect({
  filterByNormal,

  ...rest
-}) {
+}: AccountsMultiSelectProps): React.ReactElement {
+  const { openDialog } = useDialogActions();
+
  // Filters accounts based on filter props.
  const filteredAccounts = usePreprocessingAccounts(items, {
-    filterByParentTypes,
-    filterByTypes,
-    filterByNormal,
-    filterByRootTypes,
+    filterByParentTypes: filterByParentTypes || [],
+    filterByTypes: filterByTypes || [],
+    filterByNormal: filterByNormal || [],
+    filterByRootTypes: filterByRootTypes || [],
  });
  // Maybe inject new item props to select component.
-  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemRenderer = allowCreate
+    ? createNewItemRenderer
+    : undefined;
  const maybeCreateNewItemFromQuery = allowCreate
    ? createNewItemFromQuery
-    : null;
+    : undefined;

  // Handles the create item click.
-  const handleCreateItemClick = () => {
+  const handleCreateItemClick = (): void => {
    openDialog(DialogsName.AccountForm);
  };

  return (
-    <FMultiSelect
+    <FMultiSelect<AccountSelect>
+      {...rest}
      items={filteredAccounts}
      valueAccessor={'id'}
      textAccessor={'name'}
@@ -87,11 +102,9 @@ export function AccountsMultiSelect({
      tagAccessor={'name'}
      popoverProps={{ minimal: true }}
      itemPredicate={accountPredicate}
-      itemRenderer={accountRenderer}
      createNewItemRenderer={maybeCreateNewItemRenderer}
      createNewItemFromQuery={maybeCreateNewItemFromQuery}
      onCreateItemSelect={handleCreateItemClick}
-      {...rest}
    />
  );
 }
--- a/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
+++ b/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
@@ -1,15 +1,18 @@
 // @ts-nocheck
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import * as R from 'ramda';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { MenuItem } from '@blueprintjs/core';
-import { Suggest } from '@blueprintjs/select';

 import { CLASSES } from '@/constants/classes';
 import { DialogsName } from '@/constants/dialogs';

-import { MenuItemNestedText, FormattedMessage as T } from '@/components';
+import {
+  FSuggest,
+  MenuItemNestedText,
+  FormattedMessage as T,
+} from '@/components';
 import { nestedArrayToflatten, filterAccountsByQuery } from '@/utils';

 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -33,14 +36,6 @@ const createNewItemFromQuery = (name) => {
  };
 };

-// Handle input value renderer.
-const handleInputValueRenderer = (inputValue) => {
-  if (inputValue) {
-    return inputValue.name.toString();
-  }
-  return '';
-};
-
 // Filters accounts items.
 const filterAccountsPredicater = (query, account, _index, exactMatch) => {
  const normalizedTitle = account.name.toLowerCase();
@@ -62,11 +57,7 @@ function AccountsSuggestFieldRoot({

  // #ownProps
  accounts,
-  initialAccountId,
-  selectedAccountId,
  defaultSelectText = intl.formatMessage({ id: 'select_account' }),
-  popoverFill = false,
-  onAccountSelected,

  filterByParentTypes = [],
  filterByTypes = [],
@@ -81,67 +72,14 @@ function AccountsSuggestFieldRoot({
    () => nestedArrayToflatten(accounts),
    [accounts],
  );
-
-  // Filters accounts based on filter props.
-  const filteredAccounts = useMemo(() => {
-    let filteredAccounts = filterAccountsByQuery(flattenAccounts, {
-      filterByRootTypes,
-      filterByParentTypes,
-      filterByTypes,
-      filterByNormal,
-    });
-    return filteredAccounts;
-  }, [
-    flattenAccounts,
-    filterByRootTypes,
-    filterByParentTypes,
-    filterByTypes,
-    filterByNormal,
-  ]);
-
-  // Find initial account object to set it as default account in initial render.
-  const initialAccount = useMemo(
-    () => filteredAccounts.find((a) => a.id === initialAccountId),
-    [initialAccountId, filteredAccounts],
-  );
-
-  const [selectedAccount, setSelectedAccount] = useState(
-    initialAccount || null,
-  );
-
-  useEffect(() => {
-    if (typeof selectedAccountId !== 'undefined') {
-      const account = selectedAccountId
-        ? filteredAccounts.find((a) => a.id === selectedAccountId)
-        : null;
-      setSelectedAccount(account);
-    }
-  }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
-
-  // Account item of select accounts field.
-  const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
-    return (
-      <MenuItem
-        text={<MenuItemNestedText level={item.level} text={item.name} />}
-        label={item.code}
-        key={item.id}
-        onClick={handleClick}
-      />
-    );
-  }, []);
-
-  const handleAccountSelect = useCallback(
-    (account) => {
-      if (account.id) {
-        setSelectedAccount({ ...account });
-        onAccountSelected && onAccountSelected(account);
-      } else {
+  const handleCreateItemSelect = useCallback(
+    (item) => {
+      if (!item.id) {
        openDialog(DialogsName.AccountForm);
      }
    },
-    [setSelectedAccount, onAccountSelected, openDialog],
+    [openDialog],
  );
-
  // Maybe inject new item props to select component.
  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
  const maybeCreateNewItemFromQuery = allowCreate
@@ -149,21 +87,15 @@ function AccountsSuggestFieldRoot({
    : null;

  return (
-    <Suggest
+    <FSuggest
      items={filteredAccounts}
-      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
-      itemRenderer={accountItem}
-      itemPredicate={filterAccountsPredicater}
-      onItemSelect={handleAccountSelect}
-      selectedItem={selectedAccount}
+      onCreateItemSelect={handleCreateItemSelect}
+      valueAccessor="id"
+      textAccessor="name"
+      labelAccessor="code"
      inputProps={{ placeholder: defaultSelectText }}
-      resetOnClose={true}
-      fill={true}
+      resetOnClose
      popoverProps={{ minimal: true, boundary: 'window' }}
-      inputValueRenderer={handleInputValueRenderer}
-      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
-        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
-      })}
      createNewItemRenderer={maybeCreateNewItemRenderer}
      createNewItemFromQuery={maybeCreateNewItemFromQuery}
      {...suggestProps}
--- a/packages/webapp/src/components/AppIntlLoader.tsx
+++ b/packages/webapp/src/components/AppIntlLoader.tsx
@@ -36,15 +36,19 @@ function getCurrentLocal() {
 /**
 * Loads the localization data of the given locale.
 */
-function loadLocales(currentLocale) {
-  return import(`../lang/${currentLocale}/index.json`);
+async function loadLocales(currentLocale) {
+  return await import(`../lang/${currentLocale}/index.json`).then(
+    (module) => module.default,
+  );
 }

 /**
 * Loads the localization data of yup validation library.
 */
-function loadYupLocales(currentLocale) {
-  return import(`../lang/${currentLocale}/locale`);
+async function loadYupLocales(currentLocale) {
+  return await import(`../lang/${currentLocale}/locale.tsx`).then(
+    (module) => module.locale,
+  );
 }

 /**
@@ -109,11 +113,11 @@ function useAppYupLoadLocales(currentLocale) {

  React.useEffect(() => {
    loadYupLocales(currentLocale)
-      .then(({ locale }) => {
-        setLocale(locale);
+      .then((results) => {
+        setLocale(results);
        setIsLoading(false);
      })
-      .then(() => {});
+      .then(() => { });
  }, [currentLocale, stopLoading]);

  // Watches the valiue to start/stop splash screen.
--- a/packages/webapp/src/components/Currencies/CurrenciesSelectList.tsx
+++ b/packages/webapp/src/components/Currencies/CurrenciesSelectList.tsx
@@ -6,10 +6,14 @@ import { Select } from '@blueprintjs/select';
 export function CurrenciesSelectList({ selectProps, onItemSelect, className }) {
  const currencies = [
    {
+      id: 'USD',
+      code: 'USD',
      name: 'USD US dollars',
-      key: 'USD',
+    },
+    {
+      id: 'CAD',
+      code: 'CAD',
      name: 'CAD Canadian dollars',
-      key: 'CAD',
    },
  ];

--- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx
@@ -2,20 +2,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, useFormikContext } from 'formik';
 import { isEqual } from 'lodash';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { Classes, Position, ControlGroup } from '@blueprintjs/core';
 import { useAutofocus } from '@/hooks';
 import classNames from 'classnames';
 import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
-import { DateInput } from '@blueprintjs/datetime';

 import {
  FieldRequiredHint,
@@ -31,13 +23,13 @@ import {
  ExchangeRateMutedField,
  BranchSelect,
  BranchSelectButton,
+  FFormGroup,
+  FInputGroup,
+  FDateInput,
+  FTextArea,
+  FMoneyInputGroup,
 } from '@/components';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-} from '@/utils';
+import { inputIntent, momentFormatter } from '@/utils';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';

@@ -66,7 +58,7 @@ function QuickPaymentMadeFormFields({
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FormGroup
+            <FFormGroup
              label={<T id={'branch'} />}
              className={classNames('form-group--select-list', Classes.FILL)}
            >
@@ -76,83 +68,45 @@ function QuickPaymentMadeFormFields({
                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
-            </FormGroup>
+            </FFormGroup>
          </Col>
        </Row>
        <BranchRowDivider />
      </FeatureCan>
+
      <Row>
+        {/* ------------- Vendor name ------------- */}
        <Col xs={5}>
-          {/* ------------- Vendor name ------------- */}
-          <FastField name={'vendor_id'}>
-            {({ from, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'vendor_name'} />}
-                className={classNames('form-group--select-list', CLASSES.FILL)}
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'vendor'} />}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  minimal={true}
-                  disabled={true}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'vendor_id'} label={<T id={'vendor_name'} />}>
+            <FInputGroup name={'vendor_id'} minimal={true} disabled={true} />
+          </FFormGroup>
        </Col>
+
+        {/* ------------ Payment number. ------------ */}
        <Col xs={5}>
-          {/* ------------ Payment number. ------------ */}
-          <FastField name={'payment_number'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'payment_no'} />}
-                className={('form-group--payment_number', CLASSES.FILL)}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="payment_number" />}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  minimal={true}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'payment_number'} label={<T id={'payment_no'} />}>
+            <FInputGroup name={'payment_number'} minimal={true} />
+          </FFormGroup>
        </Col>
      </Row>
-      {/*------------ Amount Received -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'amount_received'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--payment_amount', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-          >
-            <ControlGroup>
-              <InputPrependText text={values.currency_code} />

-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                intent={inputIntent({ error, touched })}
-                inputRef={(ref) => (paymentMadeFieldRef.current = ref)}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      {/*------------ Amount Received -----------*/}
+      <FFormGroup
+        name={'amount'}
+        label={<T id={'amount_received'} />}
+        labelInfo={<FieldRequiredHint />}
+        className={classNames('form-group--payment_amount', CLASSES.FILL)}
+      >
+        <ControlGroup>
+          <InputPrependText text={values.currency_code} />
+
+          <FMoneyInputGroup
+            name={'amount'}
+            minimal={true}
+            inputRef={(ref) => (paymentMadeFieldRef.current = ref)}
+          />
+        </ControlGroup>
+      </FFormGroup>

      <If condition={!isEqual(base_currency, values.currency_code)}>
        {/*------------ exchange rate -----------*/}
@@ -165,95 +119,67 @@ function QuickPaymentMadeFormFields({
          exchangeRate={values.exchange_rate}
        />
      </If>
+
      <Row>
        <Col xs={5}>
          {/* ------------- Payment date ------------- */}
-          <FastField name={'payment_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'payment_date'} />}
-                labelInfo={<FieldRequiredHint />}
-                className={classNames('form-group--select-list', CLASSES.FILL)}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="payment_date" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('payment_date', formattedDate);
-                  })}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  inputProps={{
-                    leftIcon: <Icon icon={'date-range'} />,
-                  }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'payment_date'}
+            label={<T id={'payment_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--select-list', CLASSES.FILL)}
+          >
+            <FDateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              name={'payment_date'}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FFormGroup>
        </Col>
        <Col xs={5}>
          {/* ------------ payment account ------------ */}
-          <FastField name={'payment_account_id'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'payment_account'} />}
-                className={classNames(
-                  'form-group--payment_account_id',
-                  'form-group--select-list',
-                  CLASSES.FILL,
-                )}
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'payment_account_id'} />}
-              >
-                <AccountsSuggestField
-                  accounts={accounts}
-                  onAccountSelected={({ id }) =>
-                    form.setFieldValue('payment_account_id', id)
-                  }
-                  inputProps={{
-                    placeholder: intl.get('select_account'),
-                  }}
-                  filterByTypes={[
-                    ACCOUNT_TYPE.CASH,
-                    ACCOUNT_TYPE.BANK,
-                    ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-                  ]}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'payment_account_id'}
+            label={<T id={'payment_account'} />}
+          >
+            <AccountsSuggestField
+              accounts={accounts}
+              onAccountSelected={({ id }) =>
+                form.setFieldValue('payment_account_id', id)
+              }
+              inputProps={{
+                placeholder: intl.get('select_account'),
+              }}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
+            />
+          </FFormGroup>
        </Col>
      </Row>
+
      {/* ------------ Reference No. ------------ */}
-      <FastField name={'reference'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'reference'}
+        label={<T id={'reference'} />}
+        className={classNames('form-group--reference', CLASSES.FILL)}
+      >
+        <FInputGroup name={'reference'} minimal={true} />
+      </FFormGroup>
+
      {/* --------- Statement --------- */}
-      <FastField name={'statement'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'statement'} />}
-            className={'form-group--statement'}
-          >
-            <TextArea growVertically={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'statement'}
+        label={<T id={'statement'} />}
+        className={'form-group--statement'}
+      >
+        <FTextArea name={'statement'} growVertically={true} />
+      </FFormGroup>
    </div>
  );
 }
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx
@@ -5,17 +5,9 @@ import intl from 'react-intl-universal';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { useAutofocus } from '@/hooks';
 import { isEqual } from 'lodash';
-import {
-  Classes,
-  FormGroup,
-  InputGroup,
-  TextArea,
-  Position,
-  ControlGroup,
-} from '@blueprintjs/core';
+import { Classes, Position, ControlGroup } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
-import { DateInput } from '@blueprintjs/datetime';
 import {
  Row,
  Col,
@@ -30,6 +22,10 @@ import {
  ExchangeRateMutedField,
  BranchSelect,
  BranchSelectButton,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+  FDateInput,
 } from '@/components';
 import {
  inputIntent,
@@ -68,7 +64,7 @@ function QuickPaymentReceiveFormFields({
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FormGroup
+            <FFormGroup
              label={<T id={'branch'} />}
              className={classNames('form-group--select-list', Classes.FILL)}
            >
@@ -78,85 +74,54 @@ function QuickPaymentReceiveFormFields({
                input={BranchSelectButton}
                popoverProps={{ minimal: true }}
              />
-            </FormGroup>
+            </FFormGroup>
          </Col>
        </Row>
        <BranchRowDivider />
      </FeatureCan>
+
      <Row>
        <Col xs={5}>
          {/* ------------- Customer name ------------- */}
-          <FastField name={'customer_id'}>
-            {({ from, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'customer_name'} />}
-                className={classNames('form-group--select-list', CLASSES.FILL)}
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'customer_id'} />}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  minimal={true}
-                  disabled={true}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'customer_id'}
+            label={<T id={'customer_name'} />}
+            labelInfo={<FieldRequiredHint />}
+          >
+            <FInputGroup name={'customer_id'} minimal={true} disabled={true} />
+          </FFormGroup>
        </Col>
+
        <Col xs={5}>
          {/* ------------ Payment receive no. ------------ */}
-          <FastField name={'payment_receive_no'}>
-            {({ form, field, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'payment_no'} />}
-                labelInfo={<FieldRequiredHint />}
-                className={('form-group--payment_receive_no', CLASSES.FILL)}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="payment_receive_no" />}
-              >
-                <InputGroup
-                  intent={inputIntent({ error, touched })}
-                  minimal={true}
-                  {...field}
-                  disabled={paymentReceiveAutoIncrement}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'payment_receive_no'}
+            label={<T id={'payment_no'} />}
+          >
+            <FInputGroup
+              name={'payment_receive_no'}
+              minimal={true}
+              disabled={paymentReceiveAutoIncrement}
+            />
+          </FFormGroup>
        </Col>
      </Row>
      {/*------------ Amount Received -----------*/}
-      <FastField name={'amount'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'amount_received'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--payment_amount', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-          >
-            <ControlGroup>
-              <InputPrependText text={values.currency_code} />

-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                intent={inputIntent({ error, touched })}
-                inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
+      {/* <FFormGroup name={'amount'} label={<T id={'amount_received'} />}>
+        <ControlGroup>
+          <InputPrependText text={values.currency_code} />
+          <MoneyInputGroup
+            value={value}
+            minimal={true}
+            onChange={(amount) => {
+              setFieldValue('amount', amount);
+            }}
+            intent={inputIntent({ error, touched })}
+            inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}
+          />
+        </ControlGroup>
+      </FFormGroup> */}

      <If condition={!isEqual(base_currency, values.currency_code)}>
        {/*------------ exchange rate -----------*/}
@@ -173,94 +138,53 @@ function QuickPaymentReceiveFormFields({
      <Row>
        <Col xs={5}>
          {/* ------------- Payment date ------------- */}
-          <FastField name={'payment_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'payment_date'} />}
-                labelInfo={<FieldRequiredHint />}
-                className={classNames('form-group--select-list', CLASSES.FILL)}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="payment_date" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('payment_date', formattedDate);
-                  })}
-                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
-                  inputProps={{
-                    leftIcon: <Icon icon={'date-range'} />,
-                  }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup name={'payment_date'} label={<T id={'payment_date'} />}>
+            <FDateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              name={'payment_date'}
+              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FFormGroup>
        </Col>
+
        <Col xs={5}>
          {/* ------------ Deposit account ------------ */}
-          <FastField name={'deposit_account_id'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'deposit_to'} />}
-                className={classNames(
-                  'form-group--deposit_account_id',
-                  'form-group--select-list',
-                  CLASSES.FILL,
-                )}
-                labelInfo={<FieldRequiredHint />}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name={'deposit_account_id'} />}
-              >
-                <AccountsSuggestField
-                  selectedAccountId={value}
-                  accounts={accounts}
-                  onAccountSelected={({ id }) =>
-                    form.setFieldValue('deposit_account_id', id)
-                  }
-                  inputProps={{
-                    placeholder: intl.get('select_account'),
-                  }}
-                  filterByTypes={[
-                    ACCOUNT_TYPE.CASH,
-                    ACCOUNT_TYPE.BANK,
-                    ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-                  ]}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+          {/* <FFormGroup
+            name={'deposit_account_id'}
+            label={<T id={'deposit_to'} />}
+          >
+            <AccountsSuggestField
+              name={'deposit_account_id'}
+              accounts={accounts}
+              inputProps={{
+                placeholder: intl.get('select_account'),
+              }}
+              filterByTypes={[
+                ACCOUNT_TYPE.CASH,
+                ACCOUNT_TYPE.BANK,
+                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+              ]}
+            />
+          </FFormGroup> */}
        </Col>
      </Row>
+
      {/* ------------ Reference No. ------------ */}
-      <FastField name={'reference_no'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup label={<T id={'reference'} />} name={'reference_no'}>
+        <FInputGroup name={'reference_no'} minimal={true} />
+      </FFormGroup>

      {/* --------- Statement --------- */}
-      <FastField name={'statement'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'statement'} />}
-            className={'form-group--statement'}
-          >
-            <TextArea growVertically={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'statement'}
+        label={<T id={'statement'} />}
+        className={'form-group--statement'}
+      >
+        <FTextArea name={'statement'} growVertically={true} />
+      </FFormGroup>
    </div>
  );
 }
--- a/packages/webapp/src/hooks/query/expenses.tsx
+++ b/packages/webapp/src/hooks/query/expenses.tsx
@@ -2,7 +2,7 @@
 import { useMutation, useQueryClient } from 'react-query';
 import useApiRequest from '../useRequest';
 import { useRequestQuery } from '../useQueryRequest';
-import { transformPagination } from '@/utils';
+import { transformPagination, transformToCamelCase } from '@/utils';
 import t from './types';

 const defaultPagination = {
--- a/packages/webapp/src/hooks/query/manualJournals.tsx
+++ b/packages/webapp/src/hooks/query/manualJournals.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { useMutation, useQueryClient } from 'react-query';
 import { useRequestQuery } from '../useQueryRequest';
-import { transformPagination } from '@/utils';
+import { transformPagination, transformToCamelCase } from '@/utils';
 import useApiRequest from '../useRequest';
 import t from './types';

--- a/packages/webapp/src/index.tsx
+++ b/packages/webapp/src/index.tsx
@@ -1,4 +1,5 @@
 // @ts-nocheck
+import './wdyr';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
@@ -10,11 +11,6 @@ import App from '@/components/App';
 import * as serviceWorker from '@/serviceWorker';
 import { store, persistor } from '@/store/createStore';

-if (process.env.NODE_ENV === 'development') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render');
-  whyDidYouRender(React, { trackAllPureComponents: false });
-}
-
 ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
--- a/packages/webapp/src/lang/en/index.json
+++ b/packages/webapp/src/lang/en/index.json
@@ -2308,5 +2308,6 @@
  "api_key.important": "Important",
  "api_key.display_warning": "This API key will only be shown once. Please copy and save it securely.",
  "api_key.label": "API Key",
-  "api_key.copy_to_clipboard": "Copy to clipboard"
+  "api_key.copy_to_clipboard": "Copy to clipboard",
+  "the_expenses_has_been_deleted_successfully": "The expenses have been deleted successfully."
 }
--- a/packages/webapp/src/vite-env.d.ts
+++ b/packages/webapp/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+
--- a/packages/webapp/src/wdyr.ts
+++ b/packages/webapp/src/wdyr.ts
@@ -0,0 +1,7 @@
+if (process.env.NODE_ENV === 'development') {
+  import('@welldone-software/why-did-you-render').then(({ default: whyDidYouRender }) => {
+    if (whyDidYouRender) {
+      whyDidYouRender(React, { trackAllPureComponents: false });
+    }
+  });
+}
--- a/packages/webapp/tsconfig.json
+++ b/packages/webapp/tsconfig.json
@@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
@@ -13,7 +13,7 @@
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
@@ -23,5 +23,10 @@
  "include": [
    "src"
  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
  "extends": "./tsconfig.base.json"
 }
--- a/packages/webapp/tsconfig.node.json
+++ b/packages/webapp/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
+
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/vercel.json
+++ b/vercel.json
@@ -1,7 +1,7 @@
 {
  "installCommand": "pnpm install",
  "buildCommand": "CI='' pnpm run build:webapp",
-  "outputDirectory": "packages/webapp/build",
+  "outputDirectory": "packages/webapp/dist",
  "rewrites": [{
      "source": "/api/:slug*",
      "destination": "https://dev.bigcapital.ly/api/:slug*"