QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 15:20:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #858 from bigcapitalhq/migrate-from-cra-to-vite

Browse Source 
feat: migrate from CRA to Vite for speed
This commit is contained in:
Ahmed Bouhuolia
2025-11-25 21:36:28 +02:00
committed by GitHub
parent 234b1804b3 dc6cf13a3e
commit 65ffc31ec0
28 changed files with 3154 additions and 6709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/Dockerfile
View File

@@ -24,4 +24,4 @@ RUN pnpm run build:webapp
FROM nginx FROM nginx
COPY ./packages/webapp/nginx/sites/default.conf /etc/nginx/conf.d/default.conf COPY ./packages/webapp/nginx/sites/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/packages/webapp/build /usr/share/nginx/html COPY --from=build /app/packages/webapp/dist /usr/share/nginx/html

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>

25
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",
@@ -61,13 +60,13 @@
"deepdash": "^5.3.9", "deepdash": "^5.3.9",
"dependency-graph": "^0.11.0", "dependency-graph": "^0.11.0",
"dotenv-webpack": "^8.0.1", "dotenv-webpack": "^8.0.1",
"esbuild-plugin-react-virtualized": "^1.0.5",
"eslint": "^8.33.0", "eslint": "^8.33.0",
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"flat": "^5.0.2", "flat": "^5.0.2",
"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 +80,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 +98,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",
@@ -113,6 +108,7 @@
"react-use": "^13.26.1", "react-use": "^13.26.1",
"react-use-context-menu": "^0.1.4", "react-use-context-menu": "^0.1.4",
"react-virtualized": "^9.22.3", "react-virtualized": "^9.22.3",
"regenerator-runtime": "^0.14.1",
"redux": "^4.2.1", "redux": "^4.2.1",
"redux-devtools": "^3.5.0", "redux-devtools": "^3.5.0",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
@@ -129,17 +125,20 @@
"typescript": "^4.8.3", "typescript": "^4.8.3",
"yup": "^0.28.1" "yup": "^0.28.1"
}, },
"devDependencies": {
"@vitejs/plugin-react": "^4.3.4",
"@vitejs/plugin-legacy": "^5.4.2",
"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",

56
packages/webapp/public/index.html
View File

@@ -1,56 +0,0 @@
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<link
rel="icon"
href="%PUBLIC_URL%/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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<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>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<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>
</body>
</html>

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

94
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;
}
export interface AccountSelect extends Partial<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,15 @@ 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): AccountSelect => ({
label: query,
value: query,
text: query,
id: 0,
name: query,
code: query,
});
/** /**
* Accounts multi-select field binded with Formik form. * Accounts multi-select field binded with Formik form.
@@ -59,27 +72,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 +105,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}
/> />
); );
} }

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

@@ -1,17 +1,19 @@
// @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';
// Create new account renderer. // Create new account renderer.
@@ -28,17 +30,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
// Create new item from the given query string. // Create new item from the given query string.
const createNewItemFromQuery = (name) => { const createNewItemFromQuery = (name) => {
return { return { name };
name,
};
};
// Handle input value renderer.
const handleInputValueRenderer = (inputValue) => {
if (inputValue) {
return inputValue.name.toString();
}
return '';
}; };
// Filters accounts items. // Filters accounts items.
@@ -62,11 +54,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 +69,30 @@ function AccountsSuggestFieldRoot({
() => nestedArrayToflatten(accounts), () => nestedArrayToflatten(accounts),
[accounts], [accounts],
); );
const filteredAccounts = useMemo(
// Filters accounts based on filter props. () =>
const filteredAccounts = useMemo(() => { filterAccountsByQuery(flattenAccounts, {
let filteredAccounts = filterAccountsByQuery(flattenAccounts, { filterByParentTypes,
filterByRootTypes, filterByTypes,
filterByNormal,
filterByRootTypes,
}),
[
flattenAccounts,
filterByParentTypes, filterByParentTypes,
filterByTypes, filterByTypes,
filterByNormal, filterByNormal,
}); filterByRootTypes,
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 handleCreateItemSelect = useCallback(
const [selectedAccount, setSelectedAccount] = useState( (item) => {
initialAccount || null, if (!item.id) {
);
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 +100,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}

9
packages/webapp/src/components/Accounts/_components.tsx
View File

@@ -1,7 +1,14 @@
// @ts-nocheck // @ts-nocheck
import { AccountSelect } from "./AccountsMultiSelect";
// Filters accounts items. // Filters accounts items.
export const accountPredicate = (query, account, _index, exactMatch) => { export const accountPredicate = (
query: string,
account: AccountSelect,
_index?: number,
exactMatch?: boolean,
) => {
const normalizedTitle = account.name.toLowerCase(); const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase(); const normalizedQuery = query.toLowerCase();

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

2
packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
View File

@@ -56,7 +56,7 @@ export function SidebarMenu({ menu }) {
<div> <div>
<Menu className="sidebar-menu"> <Menu className="sidebar-menu">
{menu.map((item, index) => ( {menu.map((item, index) => (
<SidebarMenuItemComposer index={index} item={item} /> <SidebarMenuItemComposer key={index} index={index} item={item} />
))} ))}
</Menu> </Menu>
</div> </div>

242
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,93 +58,46 @@ function QuickPaymentMadeFormFields({
<FeatureCan feature={Features.Branches}> <FeatureCan feature={Features.Branches}>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FormGroup <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect <BranchSelect
name={'branch_id'} name={'branch_id'}
branches={branches} branches={branches}
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 name={'amount'} label={<T id={'amount_received'} />}>
minimal={true} <ControlGroup>
onChange={(amount) => { <InputPrependText text={values.currency_code} />
setFieldValue('amount', amount); <FMoneyInputGroup
}} name={'amount'}
intent={inputIntent({ error, touched })} minimal={true}
inputRef={(ref) => (paymentMadeFieldRef.current = ref)} inputRef={(ref) => (paymentMadeFieldRef.current = ref)}
/> />
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
)}
</FastField>
<If condition={!isEqual(base_currency, values.currency_code)}> <If condition={!isEqual(base_currency, values.currency_code)}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
@@ -165,95 +110,58 @@ 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" />} name={'payment_date'}
> {...momentFormatter('YYYY/MM/DD')}
<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', name={'payment_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={'payment_account_id'} />} ACCOUNT_TYPE.CASH,
> ACCOUNT_TYPE.BANK,
<AccountsSuggestField ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
accounts={accounts} ]}
onAccountSelected={({ id }) => />
form.setFieldValue('payment_account_id', id) </FFormGroup>
}
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'}> <FFormGroup name={'reference'} label={<T id={'reference'} />}>
{({ form, field, meta: { error, touched } }) => ( <FInputGroup name={'reference'} 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 name={'statement'} label={<T id={'statement'} />}>
{({ form, field, meta: { error, touched } }) => ( <FTextArea name={'statement'} growVertically={true} fill={true} />
<FormGroup </FFormGroup>
label={<T id={'statement'} />}
className={'form-group--statement'}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }
@@ -264,4 +172,8 @@ export const BranchRowDivider = styled.div`
height: 1px; height: 1px;
background: #ebf1f6; background: #ebf1f6;
margin-bottom: 15px; margin-bottom: 15px;
.bp4-dark &{
background: rgba(255, 255, 255, 0.1);
}
`; `;

247
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,17 +22,15 @@ import {
ExchangeRateMutedField, ExchangeRateMutedField,
BranchSelect, BranchSelect,
BranchSelectButton, BranchSelectButton,
FFormGroup,
FInputGroup,
FTextArea,
FDateInput,
FMoneyInputGroup,
} from '@/components'; } from '@/components';
import { import { momentFormatter, compose } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
compose,
} from '@/utils';
import { useSetPrimaryBranchToForm } from './utils'; import { useSetPrimaryBranchToForm } from './utils';
import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider'; import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import withSettings from '@/containers/Settings/withSettings'; import withSettings from '@/containers/Settings/withSettings';
@@ -68,95 +58,57 @@ function QuickPaymentReceiveFormFields({
<FeatureCan feature={Features.Branches}> <FeatureCan feature={Features.Branches}>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FormGroup <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect <BranchSelect
name={'branch_id'} name={'branch_id'}
branches={branches} branches={branches}
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) => { <FMoneyInputGroup
setFieldValue('amount', amount); name={'amount'}
}} minimal={true}
intent={inputIntent({ error, touched })} inputRef={(ref) => (paymentReceiveFieldRef.current = ref)}
inputRef={(ref) => (paymentReceiveFieldRef.current = ref)} />
/> </ControlGroup>
</ControlGroup> </FFormGroup>
</FormGroup>
)}
</FastField>
<If condition={!isEqual(base_currency, values.currency_code)}> <If condition={!isEqual(base_currency, values.currency_code)}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
@@ -173,94 +125,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>
); );
} }
@@ -276,4 +187,8 @@ export const BranchRowDivider = styled.div`
height: 1px; height: 1px;
background: #ebf1f6; background: #ebf1f6;
margin-bottom: 15px; margin-bottom: 15px;
.bp4-dark & {
background: rgba(255, 255, 255, 0.1);
}
`; `;

10
packages/webapp/src/containers/Dialogs/components/BulkDeleteDialogContent.tsx
View File

@@ -34,12 +34,9 @@ function BulkDeleteDialogContent({
</Tag> </Tag>
<x.div> <x.div>
<T <T
id={'bulk_delete_delete_row_prefix'} id={'bulk_delete_will_be_deleted'}
values={{ resourceSingular: resourceSingularLabel }} values={{ resourceSingular: resourceSingularLabel }}
/>{' '} />{' '}
<x.span fontWeight="semibold" color="danger">
<T id={'bulk_delete_delete_row_status'} />
</x.span>
</x.div> </x.div>
</x.div> </x.div>
@@ -49,12 +46,9 @@ function BulkDeleteDialogContent({
</Tag> </Tag>
<x.div> <x.div>
<T <T
id={'bulk_delete_archive_row_prefix'} id={'bulk_delete_cannot_be_deleted'}
values={{ resourceSingular: resourceSingularLabel }} values={{ resourceSingular: resourceSingularLabel }}
/>{' '} />{' '}
<x.span fontWeight="semibold" color="info">
<T id={'bulk_delete_archive_row_status'} />
</x.span>
</x.div> </x.div>
</x.div> </x.div>

5
packages/webapp/src/hooks/query/accounts.tsx
View File

@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from 'react-query';
import { useRequestQuery } from '../useQueryRequest'; import { useRequestQuery } from '../useQueryRequest';
import useApiRequest from '../useRequest'; import useApiRequest from '../useRequest';
import t from './types'; import t from './types';
import { transformToCamelCase } from '@/utils';
// Transform the account. // Transform the account.
const transformAccount = (response) => { const transformAccount = (response) => {
@@ -187,7 +188,9 @@ export function useValidateBulkDeleteAccounts(props) {
return useMutation( return useMutation(
(ids: number[]) => (ids: number[]) =>
apiRequest.post('accounts/validate-bulk-delete', { ids }), apiRequest
.post('accounts/validate-bulk-delete', { ids })
.then((res) => transformToCamelCase(res.data)),
{ {
...props, ...props,
}, },

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';

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

@@ -1,4 +1,6 @@
// @ts-nocheck // @ts-nocheck
import 'regenerator-runtime/runtime';
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 +12,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}>

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

@@ -529,10 +529,8 @@
"once_delete_these_invoices_you_will_not_able_restore_them": "Once you delete these invoices, you won't be able to retrieve them later. Are you sure you want to delete them?", "once_delete_these_invoices_you_will_not_able_restore_them": "Once you delete these invoices, you won't be able to retrieve them later. Are you sure you want to delete them?",
"bulk_delete_dialog_title": "Delete {resourcePlural}", "bulk_delete_dialog_title": "Delete {resourcePlural}",
"bulk_delete_selected_summary": "You have selected {count} {resourcePlural} to be deleted:", "bulk_delete_selected_summary": "You have selected {count} {resourcePlural} to be deleted:",
"bulk_delete_delete_row_prefix": "{resourceSingular} will be", "bulk_delete_will_be_deleted": "{resourceSingular} will be deleted",
"bulk_delete_delete_row_status": "Deleted", "bulk_delete_cannot_be_deleted": "{resourceSingular} cannot be deleted",
"bulk_delete_archive_row_prefix": "{resourceSingular} cannot be deleted so it will be",
"bulk_delete_archive_row_status": "Archived",
"bulk_delete_selected_description": "These {resourcePlural} will be removed from any contacts or workflows using them as a default document.", "bulk_delete_selected_description": "These {resourcePlural} will be removed from any contacts or workflows using them as a default document.",
"bulk_delete_note_description": "Deleting {resourcePlural} is permanent and cannot be undone. Archived {resourcePlural} can be restored at any time.", "bulk_delete_note_description": "Deleting {resourcePlural} is permanent and cannot be undone. Archived {resourcePlural} can be restored at any time.",
"resource_invoice_singular": "Invoice", "resource_invoice_singular": "Invoice",
@@ -2310,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."
} }

3
packages/webapp/src/store/settings/settings.reducer.tsx
View File

@@ -62,9 +62,6 @@ const initialState = {
warehouseTransfer: { warehouseTransfer: {
tableSize: 'small', tableSize: 'small',
}, },
projectTasks: {
tableSize: 'small',
},
projectTasks: { projectTasks: {
tableSize: 'medium', tableSize: 'medium',
}, },

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

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

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

@@ -0,0 +1,8 @@
import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';
if (process.env.NODE_ENV === 'development') {
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}

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"]
}

68
packages/webapp/vite.config.ts Normal file
View File

@@ -0,0 +1,68 @@
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';
import path from 'node:path';
import { defineConfig, loadEnv, type PluginOption } from 'vite';
import fixReactVirtualized from 'esbuild-plugin-react-virtualized';
const allowedEnvPrefixes = ['VITE_', 'REACT_APP_', 'PUBLIC_URL'];
const pickClientEnv = (env: Record<string, string>) =>
Object.keys(env).reduce<Record<string, string>>((acc, key) => {
if (allowedEnvPrefixes.some((prefix) => key.startsWith(prefix))) {
acc[key] = env[key];
}
return acc;
}, {});
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const rootDir = __dirname;
const env = loadEnv(mode, rootDir, '');
const clientEnv = pickClientEnv(env);
const port = Number(env.PORT) || 4000;
const plugins: PluginOption[] = [
react(),
legacy({
targets: ['defaults', 'not IE 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
];
return {
plugins,
root: rootDir,
resolve: {
alias: {
'@': path.resolve(rootDir, 'src'),
'@public': path.resolve(rootDir, 'public'),
path: 'path-browserify',
},
},
define: {
'process.env': {
NODE_ENV: mode,
PUBLIC_URL: clientEnv.PUBLIC_URL ?? '/',
...clientEnv,
},
},
server: {
host: true,
port,
proxy: {
'/api': {
target: env.VITE_API_PROXY_TARGET || 'http://localhost:3000',
changeOrigin: true,
},
},
},
build: {
outDir: 'dist',
},
optimizeDeps: {
esbuildOptions: {
plugins: [fixReactVirtualized as any],
},
},
};
});

8854
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*"