QT/bigcapital
0
0
Fork 0
Code Issues Pull Requests 1 Actions 6 Packages Projects Releases Wiki Activity

feat: migrate from CRA to Vite for speed

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-11-24 14:18:56 +02:00
parent 43faa45dcf
commit caf232d928
20 changed files with 1770 additions and 6525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/webapp/craco.config.js
View File

@@ -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'
},
};

28
packages/webapp/index.html Normal file
View File

@@ -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>

22
packages/webapp/package.json
View File

@@ -18,7 +18,6 @@
"@blueprintjs/timezone": "^4.5.43", "@blueprintjs/timezone": "^4.5.43",
"@casl/ability": "^5.4.3", "@casl/ability": "^5.4.3",
"@casl/react": "^2.3.0", "@casl/react": "^2.3.0",
"@craco/craco": "^5.9.0",
"@emotion/css": "^11.13.4", "@emotion/css": "^11.13.4",
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@react-oauth/google": "^0.12.2", "@react-oauth/google": "^0.12.2",
@@ -36,7 +35,7 @@
"@tiptap/starter-kit": "2.1.13", "@tiptap/starter-kit": "2.1.13",
"@types/js-money": "^0.6.1", "@types/js-money": "^0.6.1",
"@types/lodash": "^4.14.172", "@types/lodash": "^4.14.172",
"@types/node": "^14.14.9", "@types/node": "^20.16.10",
"@types/ramda": "^0.28.14", "@types/ramda": "^0.28.14",
"@types/react": "18.3.4", "@types/react": "18.3.4",
"@types/react-body-classname": "^1.1.7", "@types/react-body-classname": "^1.1.7",
@@ -67,7 +66,6 @@
"formik": "^2.2.5", "formik": "^2.2.5",
"helmet": "^3.21.0", "helmet": "^3.21.0",
"history": "4.10.1", "history": "4.10.1",
"http-proxy-middleware": "^1.0.0",
"js-cookie": "2.2.1", "js-cookie": "2.2.1",
"js-money": "^0.6.3", "js-money": "^0.6.3",
"lodash": "^4.17.15", "lodash": "^4.17.15",
@@ -81,16 +79,13 @@
"query-string": "^7.1.1", "query-string": "^7.1.1",
"ramda": "^0.27.1", "ramda": "^0.27.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-app-polyfill": "^1.0.6",
"react-body-classname": "^1.3.1", "react-body-classname": "^1.3.1",
"react-colorful": "^5.6.1", "react-colorful": "^5.6.1",
"react-content-loader": "^6.0.1", "react-content-loader": "^6.0.1",
"react-dev-utils": "^11.0.4",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-dropzone": "^11.0.1", "react-dropzone": "^11.0.1",
"react-dropzone-esm": "^15.0.1", "react-dropzone-esm": "^15.0.1",
"react-error-boundary": "^3.0.2", "react-error-boundary": "^3.0.2",
"react-error-overlay": "^6.0.9",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-hotkeys-hook": "^3.0.3", "react-hotkeys-hook": "^3.0.3",
"react-intl-universal": "^2.4.7", "react-intl-universal": "^2.4.7",
@@ -102,7 +97,6 @@
"react-router": "5.3.4", "react-router": "5.3.4",
"react-router-breadcrumbs-hoc": "^3.2.10", "react-router-breadcrumbs-hoc": "^3.2.10",
"react-router-dom": "^5.3.3", "react-router-dom": "^5.3.3",
"react-scripts": "5.0.1",
"react-scroll-sync": "^0.7.1", "react-scroll-sync": "^0.7.1",
"react-scrollbars-custom": "^4.0.21", "react-scrollbars-custom": "^4.0.21",
"react-sortablejs": "^2.0.11", "react-sortablejs": "^2.0.11",
@@ -129,17 +123,19 @@
"typescript": "^4.8.3", "typescript": "^4.8.3",
"yup": "^0.28.1" "yup": "^0.28.1"
}, },
"devDependencies": {
"@vitejs/plugin-react": "^4.3.4",
"eslint-config-react-app": "^7.0.1",
"vite": "^5.1.6"
},
"scripts": { "scripts": {
"dev": "cross-env PORT=4000 craco start", "dev": "cross-env PORT=4000 vite",
"build": "craco build", "build": "vite build",
"preview": "cross-env PORT=4173 vite preview",
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
"test": "node scripts/test.js", "test": "node scripts/test.js",
"storybook": "start-storybook -p 6006" "storybook": "start-storybook -p 6006"
}, },
"proxy": "http://localhost:3000/",
"resolutions": {
"react-error-overlay": "6.0.9"
},
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",

11
packages/webapp/setupProxy.tsx
View File

@@ -1,11 +0,0 @@
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
proxy({
target: 'http://localhost:3000',
changeOrigin: true,
})
);
};

91
packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
View File

@@ -1,13 +1,43 @@
// @ts-nocheck
import React from 'react'; import React from 'react';
import { MenuItem } from '@blueprintjs/core'; import { MenuItem } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import { FMultiSelect } from '../Forms'; import { FMultiSelect } from '../Forms';
import { accountPredicate } from './_components'; import { accountPredicate } from './_components';
import { MenuItemNestedText } from '../Menu';
import { usePreprocessingAccounts } from './_hooks'; 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. // Create new account renderer.
const createNewItemRenderer = (query, active, handleClick) => { const createNewItemRenderer = (
query: string,
active: boolean,
handleClick: (event: React.MouseEvent<HTMLElement>) => void,
): React.ReactElement => {
return ( return (
<MenuItem <MenuItem
icon="add" 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. // 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. * Accounts multi-select field binded with Formik form.
@@ -59,27 +69,32 @@ export function AccountsMultiSelect({
filterByNormal, filterByNormal,
...rest ...rest
}) { }: AccountsMultiSelectProps): React.ReactElement {
const { openDialog } = useDialogActions();
// Filters accounts based on filter props. // Filters accounts based on filter props.
const filteredAccounts = usePreprocessingAccounts(items, { const filteredAccounts = usePreprocessingAccounts(items, {
filterByParentTypes, filterByParentTypes: filterByParentTypes || [],
filterByTypes, filterByTypes: filterByTypes || [],
filterByNormal, filterByNormal: filterByNormal || [],
filterByRootTypes, filterByRootTypes: filterByRootTypes || [],
}); });
// Maybe inject new item props to select component. // Maybe inject new item props to select component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; const maybeCreateNewItemRenderer = allowCreate
? createNewItemRenderer
: undefined;
const maybeCreateNewItemFromQuery = allowCreate const maybeCreateNewItemFromQuery = allowCreate
? createNewItemFromQuery ? createNewItemFromQuery
: null; : undefined;
// Handles the create item click. // Handles the create item click.
const handleCreateItemClick = () => { const handleCreateItemClick = (): void => {
openDialog(DialogsName.AccountForm); openDialog(DialogsName.AccountForm);
}; };
return ( return (
<FMultiSelect <FMultiSelect<AccountSelect>
{...rest}
items={filteredAccounts} items={filteredAccounts}
valueAccessor={'id'} valueAccessor={'id'}
textAccessor={'name'} textAccessor={'name'}
@@ -87,11 +102,9 @@ export function AccountsMultiSelect({
tagAccessor={'name'} tagAccessor={'name'}
popoverProps={{ minimal: true }} popoverProps={{ minimal: true }}
itemPredicate={accountPredicate} itemPredicate={accountPredicate}
itemRenderer={accountRenderer}
createNewItemRenderer={maybeCreateNewItemRenderer} createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery} createNewItemFromQuery={maybeCreateNewItemFromQuery}
onCreateItemSelect={handleCreateItemClick} onCreateItemSelect={handleCreateItemClick}
{...rest}
/> />
); );
} }

100
packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
View File

@@ -1,15 +1,18 @@
// @ts-nocheck // @ts-nocheck
import React, { useState, useCallback, useEffect, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import * as R from 'ramda'; import * as R from 'ramda';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import classNames from 'classnames'; import classNames from 'classnames';
import { MenuItem } from '@blueprintjs/core'; import { MenuItem } from '@blueprintjs/core';
import { Suggest } from '@blueprintjs/select';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { DialogsName } from '@/constants/dialogs'; 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 { nestedArrayToflatten, filterAccountsByQuery } from '@/utils';
import withDialogActions from '@/containers/Dialog/withDialogActions'; 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. // Filters accounts items.
const filterAccountsPredicater = (query, account, _index, exactMatch) => { const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase(); const normalizedTitle = account.name.toLowerCase();
@@ -62,11 +57,7 @@ function AccountsSuggestFieldRoot({
// #ownProps // #ownProps
accounts, accounts,
initialAccountId,
selectedAccountId,
defaultSelectText = intl.formatMessage({ id: 'select_account' }), defaultSelectText = intl.formatMessage({ id: 'select_account' }),
popoverFill = false,
onAccountSelected,
filterByParentTypes = [], filterByParentTypes = [],
filterByTypes = [], filterByTypes = [],
@@ -81,67 +72,14 @@ function AccountsSuggestFieldRoot({
() => nestedArrayToflatten(accounts), () => nestedArrayToflatten(accounts),
[accounts], [accounts],
); );
const handleCreateItemSelect = useCallback(
// Filters accounts based on filter props. (item) => {
const filteredAccounts = useMemo(() => { if (!item.id) {
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 {
openDialog(DialogsName.AccountForm); openDialog(DialogsName.AccountForm);
} }
}, },
[setSelectedAccount, onAccountSelected, openDialog], [openDialog],
); );
// Maybe inject new item props to select component. // Maybe inject new item props to select component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
const maybeCreateNewItemFromQuery = allowCreate const maybeCreateNewItemFromQuery = allowCreate
@@ -149,21 +87,15 @@ function AccountsSuggestFieldRoot({
: null; : null;
return ( return (
<Suggest <FSuggest
items={filteredAccounts} items={filteredAccounts}
noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />} onCreateItemSelect={handleCreateItemSelect}
itemRenderer={accountItem} valueAccessor="id"
itemPredicate={filterAccountsPredicater} textAccessor="name"
onItemSelect={handleAccountSelect} labelAccessor="code"
selectedItem={selectedAccount}
inputProps={{ placeholder: defaultSelectText }} inputProps={{ placeholder: defaultSelectText }}
resetOnClose={true} resetOnClose
fill={true}
popoverProps={{ minimal: true, boundary: 'window' }} popoverProps={{ minimal: true, boundary: 'window' }}
inputValueRenderer={handleInputValueRenderer}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
createNewItemRenderer={maybeCreateNewItemRenderer} createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery} createNewItemFromQuery={maybeCreateNewItemFromQuery}
{...suggestProps} {...suggestProps}

18
packages/webapp/src/components/AppIntlLoader.tsx
View File

@@ -36,15 +36,19 @@ function getCurrentLocal() {
/** /**
* Loads the localization data of the given locale. * Loads the localization data of the given locale.
*/ */
function loadLocales(currentLocale) { async function loadLocales(currentLocale) {
return import(`../lang/${currentLocale}/index.json`); return await import(`../lang/${currentLocale}/index.json`).then(
(module) => module.default,
);
} }
/** /**
* Loads the localization data of yup validation library. * Loads the localization data of yup validation library.
*/ */
function loadYupLocales(currentLocale) { async function loadYupLocales(currentLocale) {
return import(`../lang/${currentLocale}/locale`); return await import(`../lang/${currentLocale}/locale.tsx`).then(
(module) => module.locale,
);
} }
/** /**
@@ -109,11 +113,11 @@ function useAppYupLoadLocales(currentLocale) {
React.useEffect(() => { React.useEffect(() => {
loadYupLocales(currentLocale) loadYupLocales(currentLocale)
.then(({ locale }) => { .then((results) => {
setLocale(locale); setLocale(results);
setIsLoading(false); setIsLoading(false);
}) })
.then(() => {}); .then(() => { });
}, [currentLocale, stopLoading]); }, [currentLocale, stopLoading]);
// Watches the valiue to start/stop splash screen. // Watches the valiue to start/stop splash screen.

8
packages/webapp/src/components/Currencies/CurrenciesSelectList.tsx
View File

@@ -6,10 +6,14 @@ import { Select } from '@blueprintjs/select';
export function CurrenciesSelectList({ selectProps, onItemSelect, className }) { export function CurrenciesSelectList({ selectProps, onItemSelect, className }) {
const currencies = [ const currencies = [
{ {
id: 'USD',
code: 'USD',
name: 'USD US dollars', name: 'USD US dollars',
key: 'USD', },
{
id: 'CAD',
code: 'CAD',
name: 'CAD Canadian dollars', name: 'CAD Canadian dollars',
key: 'CAD',
}, },
]; ];

250
packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx
View File

@@ -2,20 +2,12 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components'; import styled from 'styled-components';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { FastField, useFormikContext } from 'formik';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { import { Classes, Position, ControlGroup } from '@blueprintjs/core';
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants'; import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
import { DateInput } from '@blueprintjs/datetime';
import { import {
FieldRequiredHint, FieldRequiredHint,
@@ -31,13 +23,13 @@ import {
ExchangeRateMutedField, ExchangeRateMutedField,
BranchSelect, BranchSelect,
BranchSelectButton, BranchSelectButton,
FFormGroup,
FInputGroup,
FDateInput,
FTextArea,
FMoneyInputGroup,
} from '@/components'; } from '@/components';
import { import { inputIntent, momentFormatter } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { useSetPrimaryBranchToForm } from './utils'; import { useSetPrimaryBranchToForm } from './utils';
import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider'; import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
@@ -66,7 +58,7 @@ function QuickPaymentMadeFormFields({
<FeatureCan feature={Features.Branches}> <FeatureCan feature={Features.Branches}>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FormGroup <FFormGroup
label={<T id={'branch'} />} label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)} className={classNames('form-group--select-list', Classes.FILL)}
> >
@@ -76,83 +68,45 @@ function QuickPaymentMadeFormFields({
input={BranchSelectButton} input={BranchSelectButton}
popoverProps={{ minimal: true }} popoverProps={{ minimal: true }}
/> />
</FormGroup> </FFormGroup>
</Col> </Col>
</Row> </Row>
<BranchRowDivider /> <BranchRowDivider />
</FeatureCan> </FeatureCan>
<Row> <Row>
{/* ------------- Vendor name ------------- */}
<Col xs={5}> <Col xs={5}>
{/* ------------- Vendor name ------------- */} <FFormGroup name={'vendor_id'} label={<T id={'vendor_name'} />}>
<FastField name={'vendor_id'}> <FInputGroup name={'vendor_id'} minimal={true} disabled={true} />
{({ from, field, meta: { error, touched } }) => ( </FFormGroup>
<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>
</Col> </Col>
{/* ------------ Payment number. ------------ */}
<Col xs={5}> <Col xs={5}>
{/* ------------ Payment number. ------------ */} <FFormGroup name={'payment_number'} label={<T id={'payment_no'} />}>
<FastField name={'payment_number'}> <FInputGroup name={'payment_number'} minimal={true} />
{({ form, field, meta: { error, touched } }) => ( </FFormGroup>
<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>
</Col> </Col>
</Row> </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 {/*------------ Amount Received -----------*/}
value={value} <FFormGroup
minimal={true} name={'amount'}
onChange={(amount) => { label={<T id={'amount_received'} />}
setFieldValue('amount', amount); labelInfo={<FieldRequiredHint />}
}} className={classNames('form-group--payment_amount', CLASSES.FILL)}
intent={inputIntent({ error, touched })} >
inputRef={(ref) => (paymentMadeFieldRef.current = ref)} <ControlGroup>
/> <InputPrependText text={values.currency_code} />
</ControlGroup>
</FormGroup> <FMoneyInputGroup
)} name={'amount'}
</FastField> minimal={true}
inputRef={(ref) => (paymentMadeFieldRef.current = ref)}
/>
</ControlGroup>
</FFormGroup>
<If condition={!isEqual(base_currency, values.currency_code)}> <If condition={!isEqual(base_currency, values.currency_code)}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
@@ -165,95 +119,67 @@ function QuickPaymentMadeFormFields({
exchangeRate={values.exchange_rate} exchangeRate={values.exchange_rate}
/> />
</If> </If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/* ------------- Payment date ------------- */} {/* ------------- Payment date ------------- */}
<FastField name={'payment_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'payment_date'}
<FormGroup label={<T id={'payment_date'} />}
label={<T id={'payment_date'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} className={classNames('form-group--select-list', CLASSES.FILL)}
className={classNames('form-group--select-list', CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="payment_date" />} {...momentFormatter('YYYY/MM/DD')}
> name={'payment_date'}
<DateInput popoverProps={{ position: Position.BOTTOM, minimal: true }}
{...momentFormatter('YYYY/MM/DD')} inputProps={{
value={tansformDateValue(value)} leftIcon: <Icon icon={'date-range'} />,
onChange={handleDateChange((formattedDate) => { }}
form.setFieldValue('payment_date', formattedDate); />
})} </FFormGroup>
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/* ------------ payment account ------------ */} {/* ------------ payment account ------------ */}
<FastField name={'payment_account_id'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'payment_account_id'}
<FormGroup label={<T id={'payment_account'} />}
label={<T id={'payment_account'} />} >
className={classNames( <AccountsSuggestField
'form-group--payment_account_id', accounts={accounts}
'form-group--select-list', onAccountSelected={({ id }) =>
CLASSES.FILL, form.setFieldValue('payment_account_id', id)
)} }
labelInfo={<FieldRequiredHint />} inputProps={{
intent={inputIntent({ error, touched })} placeholder: intl.get('select_account'),
helperText={<ErrorMessage name={'payment_account_id'} />} }}
> filterByTypes={[
<AccountsSuggestField ACCOUNT_TYPE.CASH,
accounts={accounts} ACCOUNT_TYPE.BANK,
onAccountSelected={({ id }) => ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
form.setFieldValue('payment_account_id', id) ]}
} />
inputProps={{ </FFormGroup>
placeholder: intl.get('select_account'),
}}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
{/* ------------ Reference No. ------------ */} {/* ------------ Reference No. ------------ */}
<FastField name={'reference'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'reference'}
<FormGroup label={<T id={'reference'} />}
label={<T id={'reference'} />} className={classNames('form-group--reference', CLASSES.FILL)}
className={classNames('form-group--reference', CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FInputGroup name={'reference'} minimal={true} />
helperText={<ErrorMessage name="reference" />} </FFormGroup>
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/* --------- Statement --------- */} {/* --------- Statement --------- */}
<FastField name={'statement'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'statement'}
<FormGroup label={<T id={'statement'} />}
label={<T id={'statement'} />} className={'form-group--statement'}
className={'form-group--statement'} >
> <FTextArea name={'statement'} growVertically={true} />
<TextArea growVertically={true} {...field} /> </FFormGroup>
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

234
packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx
View File

@@ -5,17 +5,9 @@ import intl from 'react-intl-universal';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { import { Classes, Position, ControlGroup } from '@blueprintjs/core';
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants'; import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
import { DateInput } from '@blueprintjs/datetime';
import { import {
Row, Row,
Col, Col,
@@ -30,6 +22,10 @@ import {
ExchangeRateMutedField, ExchangeRateMutedField,
BranchSelect, BranchSelect,
BranchSelectButton, BranchSelectButton,
FFormGroup,
FInputGroup,
FTextArea,
FDateInput,
} from '@/components'; } from '@/components';
import { import {
inputIntent, inputIntent,
@@ -68,7 +64,7 @@ function QuickPaymentReceiveFormFields({
<FeatureCan feature={Features.Branches}> <FeatureCan feature={Features.Branches}>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FormGroup <FFormGroup
label={<T id={'branch'} />} label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)} className={classNames('form-group--select-list', Classes.FILL)}
> >
@@ -78,85 +74,54 @@ function QuickPaymentReceiveFormFields({
input={BranchSelectButton} input={BranchSelectButton}
popoverProps={{ minimal: true }} popoverProps={{ minimal: true }}
/> />
</FormGroup> </FFormGroup>
</Col> </Col>
</Row> </Row>
<BranchRowDivider /> <BranchRowDivider />
</FeatureCan> </FeatureCan>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/* ------------- Customer name ------------- */} {/* ------------- Customer name ------------- */}
<FastField name={'customer_id'}> <FFormGroup
{({ from, field, meta: { error, touched } }) => ( name={'customer_id'}
<FormGroup label={<T id={'customer_name'} />}
label={<T id={'customer_name'} />} labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', CLASSES.FILL)} >
labelInfo={<FieldRequiredHint />} <FInputGroup name={'customer_id'} minimal={true} disabled={true} />
intent={inputIntent({ error, touched })} </FFormGroup>
helperText={<ErrorMessage name={'customer_id'} />}
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
disabled={true}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/* ------------ Payment receive no. ------------ */} {/* ------------ Payment receive no. ------------ */}
<FastField name={'payment_receive_no'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'payment_receive_no'}
<FormGroup label={<T id={'payment_no'} />}
label={<T id={'payment_no'} />} >
labelInfo={<FieldRequiredHint />} <FInputGroup
className={('form-group--payment_receive_no', CLASSES.FILL)} name={'payment_receive_no'}
intent={inputIntent({ error, touched })} minimal={true}
helperText={<ErrorMessage name="payment_receive_no" />} disabled={paymentReceiveAutoIncrement}
> />
<InputGroup </FFormGroup>
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
disabled={paymentReceiveAutoIncrement}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
{/*------------ Amount Received -----------*/} {/*------------ 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 {/* <FFormGroup name={'amount'} label={<T id={'amount_received'} />}>
value={value} <ControlGroup>
minimal={true} <InputPrependText text={values.currency_code} />
onChange={(amount) => { <MoneyInputGroup
setFieldValue('amount', amount); value={value}
}} minimal={true}
intent={inputIntent({ error, touched })} onChange={(amount) => {
inputRef={(ref) => (paymentReceiveFieldRef.current = ref)} setFieldValue('amount', amount);
/> }}
</ControlGroup> intent={inputIntent({ error, touched })}
</FormGroup> inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}
)} />
</FastField> </ControlGroup>
</FFormGroup> */}
<If condition={!isEqual(base_currency, values.currency_code)}> <If condition={!isEqual(base_currency, values.currency_code)}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
@@ -173,94 +138,53 @@ function QuickPaymentReceiveFormFields({
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/* ------------- Payment date ------------- */} {/* ------------- Payment date ------------- */}
<FastField name={'payment_date'}> <FFormGroup name={'payment_date'} label={<T id={'payment_date'} />}>
{({ form, field: { value }, meta: { error, touched } }) => ( <FDateInput
<FormGroup {...momentFormatter('YYYY/MM/DD')}
label={<T id={'payment_date'} />} name={'payment_date'}
labelInfo={<FieldRequiredHint />} popoverProps={{ position: Position.BOTTOM, minimal: true }}
className={classNames('form-group--select-list', CLASSES.FILL)} inputProps={{
intent={inputIntent({ error, touched })} leftIcon: <Icon icon={'date-range'} />,
helperText={<ErrorMessage name="payment_date" />} }}
> />
<DateInput </FFormGroup>
{...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>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/* ------------ Deposit account ------------ */} {/* ------------ Deposit account ------------ */}
<FastField name={'deposit_account_id'}> {/* <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'deposit_account_id'}
<FormGroup label={<T id={'deposit_to'} />}
label={<T id={'deposit_to'} />} >
className={classNames( <AccountsSuggestField
'form-group--deposit_account_id', name={'deposit_account_id'}
'form-group--select-list', accounts={accounts}
CLASSES.FILL, inputProps={{
)} placeholder: intl.get('select_account'),
labelInfo={<FieldRequiredHint />} }}
intent={inputIntent({ error, touched })} filterByTypes={[
helperText={<ErrorMessage name={'deposit_account_id'} />} ACCOUNT_TYPE.CASH,
> ACCOUNT_TYPE.BANK,
<AccountsSuggestField ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
selectedAccountId={value} ]}
accounts={accounts} />
onAccountSelected={({ id }) => </FFormGroup> */}
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>
</Col> </Col>
</Row> </Row>
{/* ------------ Reference No. ------------ */} {/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}> <FFormGroup label={<T id={'reference'} />} name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => ( <FInputGroup name={'reference_no'} minimal={true} />
<FormGroup </FFormGroup>
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>
{/* --------- Statement --------- */} {/* --------- Statement --------- */}
<FastField name={'statement'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'statement'}
<FormGroup label={<T id={'statement'} />}
label={<T id={'statement'} />} className={'form-group--statement'}
className={'form-group--statement'} >
> <FTextArea name={'statement'} growVertically={true} />
<TextArea growVertically={true} {...field} /> </FFormGroup>
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

2
packages/webapp/src/hooks/query/expenses.tsx
View File

@@ -2,7 +2,7 @@
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from 'react-query';
import useApiRequest from '../useRequest'; import useApiRequest from '../useRequest';
import { useRequestQuery } from '../useQueryRequest'; import { useRequestQuery } from '../useQueryRequest';
import { transformPagination } from '@/utils'; import { transformPagination, transformToCamelCase } from '@/utils';
import t from './types'; import t from './types';
const defaultPagination = { const defaultPagination = {

2
packages/webapp/src/hooks/query/manualJournals.tsx
View File

@@ -1,7 +1,7 @@
// @ts-nocheck // @ts-nocheck
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from 'react-query';
import { useRequestQuery } from '../useQueryRequest'; import { useRequestQuery } from '../useQueryRequest';
import { transformPagination } from '@/utils'; import { transformPagination, transformToCamelCase } from '@/utils';
import useApiRequest from '../useRequest'; import useApiRequest from '../useRequest';
import t from './types'; import t from './types';

6
packages/webapp/src/index.tsx
View File

@@ -1,4 +1,5 @@
// @ts-nocheck // @ts-nocheck
import './wdyr';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
@@ -10,11 +11,6 @@ import App from '@/components/App';
import * as serviceWorker from '@/serviceWorker'; import * as serviceWorker from '@/serviceWorker';
import { store, persistor } from '@/store/createStore'; 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( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<PersistGate loading={null} persistor={persistor}> <PersistGate loading={null} persistor={persistor}>

3
packages/webapp/src/lang/en/index.json
View File

@@ -2308,5 +2308,6 @@
"api_key.important": "Important", "api_key.important": "Important",
"api_key.display_warning": "This API key will only be shown once. Please copy and save it securely.", "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.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."
} }

2
packages/webapp/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
/// <reference types="vite/client" />

7
packages/webapp/src/wdyr.ts Normal file
View File

@@ -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 });
}
});
}

9
packages/webapp/tsconfig.json
View File

@@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "ESNext",
"lib": [ "lib": [
"dom", "dom",
"dom.iterable", "dom.iterable",
@@ -13,7 +13,7 @@
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"module": "esnext", "module": "ESNext",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
@@ -23,5 +23,10 @@
"include": [ "include": [
"src" "src"
], ],
"references": [
{
"path": "./tsconfig.node.json"
}
],
"extends": "./tsconfig.base.json" "extends": "./tsconfig.base.json"
} }

10
packages/webapp/tsconfig.node.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7473
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
vercel.json
View File

@@ -1,7 +1,7 @@
{ {
"installCommand": "pnpm install", "installCommand": "pnpm install",
"buildCommand": "CI='' pnpm run build:webapp", "buildCommand": "CI='' pnpm run build:webapp",
"outputDirectory": "packages/webapp/build", "outputDirectory": "packages/webapp/dist",
"rewrites": [{ "rewrites": [{
"source": "/api/:slug*", "source": "/api/:slug*",
"destination": "https://dev.bigcapital.ly/api/:slug*" "destination": "https://dev.bigcapital.ly/api/:slug*"