wip

2026-02-15 12:20:31 +00:00 · 2025-11-25 21:29:32 +02:00
parent ff04c4b762
commit adfa8852db
7 changed files with 57 additions and 58 deletions
--- a/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
+++ b/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
@@ -19,7 +19,7 @@ interface Account {
  account_normal?: string;
 }

-interface AccountSelect extends Account, SelectOptionProps { }
+export interface AccountSelect extends Partial<Account>, SelectOptionProps { }

 type MultiSelectProps = React.ComponentProps<typeof FMultiSelect>;

@@ -49,10 +49,13 @@ const createNewItemRenderer = (
 };

 // Create new item from the given query string.
-const createNewItemFromQuery = (query: string): SelectOptionProps => ({
+const createNewItemFromQuery = (query: string): AccountSelect => ({
  label: query,
  value: query,
+  text: query,
  id: 0,
+  name: query,
+  code: query,
 });

 /**
--- a/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
+++ b/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
@@ -14,7 +14,6 @@ import {
  FormattedMessage as T,
 } from '@/components';
 import { nestedArrayToflatten, filterAccountsByQuery } from '@/utils';
-
 import withDialogActions from '@/containers/Dialog/withDialogActions';

 // Create new account renderer.
@@ -31,9 +30,7 @@ const createNewItemRenderer = (query, active, handleClick) => {

 // Create new item from the given query string.
 const createNewItemFromQuery = (name) => {
-  return {
-    name,
-  };
+  return { name };
 };

 // Filters accounts items.
@@ -72,6 +69,22 @@ function AccountsSuggestFieldRoot({
    () => nestedArrayToflatten(accounts),
    [accounts],
  );
+  const filteredAccounts = useMemo(
+    () =>
+      filterAccountsByQuery(flattenAccounts, {
+        filterByParentTypes,
+        filterByTypes,
+        filterByNormal,
+        filterByRootTypes,
+      }),
+    [
+      flattenAccounts,
+      filterByParentTypes,
+      filterByTypes,
+      filterByNormal,
+      filterByRootTypes,
+    ],
+  );
  const handleCreateItemSelect = useCallback(
    (item) => {
      if (!item.id) {
--- a/packages/webapp/src/components/Accounts/_components.tsx
+++ b/packages/webapp/src/components/Accounts/_components.tsx
@@ -1,7 +1,14 @@
 // @ts-nocheck

+import { AccountSelect } from "./AccountsMultiSelect";
+
 // 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 normalizedQuery = query.toLowerCase();

--- a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
+++ b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
@@ -56,7 +56,7 @@ export function SidebarMenu({ menu }) {
    <div>
      <Menu className="sidebar-menu">
        {menu.map((item, index) => (
-          <SidebarMenuItemComposer index={index} item={item} />
+          <SidebarMenuItemComposer key={index} index={index} item={item} />
        ))}
      </Menu>
    </div>
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx
@@ -58,10 +58,7 @@ function QuickPaymentMadeFormFields({
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FFormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
              <BranchSelect
                name={'branch_id'}
                branches={branches}
@@ -91,15 +88,9 @@ function QuickPaymentMadeFormFields({
      </Row>

      {/*------------ Amount Received -----------*/}
-      <FFormGroup
-        name={'amount'}
-        label={<T id={'amount_received'} />}
-        labelInfo={<FieldRequiredHint />}
-        className={classNames('form-group--payment_amount', CLASSES.FILL)}
-      >
+      <FFormGroup name={'amount'} label={<T id={'amount_received'} />}>
        <ControlGroup>
          <InputPrependText text={values.currency_code} />
-
          <FMoneyInputGroup
            name={'amount'}
            minimal={true}
@@ -130,8 +121,8 @@ function QuickPaymentMadeFormFields({
            className={classNames('form-group--select-list', CLASSES.FILL)}
          >
            <FDateInput
-              {...momentFormatter('YYYY/MM/DD')}
              name={'payment_date'}
+              {...momentFormatter('YYYY/MM/DD')}
              popoverProps={{ position: Position.BOTTOM, minimal: true }}
              inputProps={{
                leftIcon: <Icon icon={'date-range'} />,
@@ -139,6 +130,7 @@ function QuickPaymentMadeFormFields({
            />
          </FFormGroup>
        </Col>
+
        <Col xs={5}>
          {/* ------------ payment account ------------ */}
          <FFormGroup
@@ -146,10 +138,8 @@ function QuickPaymentMadeFormFields({
            label={<T id={'payment_account'} />}
          >
            <AccountsSuggestField
+              name={'payment_account_id'}
              accounts={accounts}
-              onAccountSelected={({ id }) =>
-                form.setFieldValue('payment_account_id', id)
-              }
              inputProps={{
                placeholder: intl.get('select_account'),
              }}
@@ -164,21 +154,13 @@ function QuickPaymentMadeFormFields({
      </Row>

      {/* ------------ Reference No. ------------ */}
-      <FFormGroup
-        name={'reference'}
-        label={<T id={'reference'} />}
-        className={classNames('form-group--reference', CLASSES.FILL)}
-      >
+      <FFormGroup name={'reference'} label={<T id={'reference'} />}>
        <FInputGroup name={'reference'} minimal={true} />
      </FFormGroup>

      {/* --------- Statement --------- */}
-      <FFormGroup
-        name={'statement'}
-        label={<T id={'statement'} />}
-        className={'form-group--statement'}
-      >
-        <FTextArea name={'statement'} growVertically={true} />
+      <FFormGroup name={'statement'} label={<T id={'statement'} />}>
+        <FTextArea name={'statement'} growVertically={true} fill={true} />
      </FFormGroup>
    </div>
  );
@@ -190,4 +172,8 @@ export const BranchRowDivider = styled.div`
  height: 1px;
  background: #ebf1f6;
  margin-bottom: 15px;
+
+  .bp4-dark &{
+    background: rgba(255, 255, 255, 0.1);
+  }
 `;
--- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx
+++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx
@@ -26,17 +26,11 @@ import {
  FInputGroup,
  FTextArea,
  FDateInput,
+  FMoneyInputGroup,
 } from '@/components';
-import {
-  inputIntent,
-  momentFormatter,
-  tansformDateValue,
-  handleDateChange,
-  compose,
-} from '@/utils';
+import { momentFormatter, compose } from '@/utils';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
-
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import withSettings from '@/containers/Settings/withSettings';

@@ -64,10 +58,7 @@ function QuickPaymentReceiveFormFields({
      <FeatureCan feature={Features.Branches}>
        <Row>
          <Col xs={5}>
-            <FFormGroup
-              label={<T id={'branch'} />}
-              className={classNames('form-group--select-list', Classes.FILL)}
-            >
+            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
              <BranchSelect
                name={'branch_id'}
                branches={branches}
@@ -108,20 +99,16 @@ function QuickPaymentReceiveFormFields({
      </Row>
      {/*------------ Amount Received -----------*/}

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

      <If condition={!isEqual(base_currency, values.currency_code)}>
        {/*------------ exchange rate -----------*/}
@@ -152,7 +139,7 @@ function QuickPaymentReceiveFormFields({

        <Col xs={5}>
          {/* ------------ Deposit account ------------ */}
-          {/* <FFormGroup
+          <FFormGroup
            name={'deposit_account_id'}
            label={<T id={'deposit_to'} />}
          >
@@ -168,7 +155,7 @@ function QuickPaymentReceiveFormFields({
                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
              ]}
            />
-          </FFormGroup> */}
+          </FFormGroup>
        </Col>
      </Row>

@@ -200,4 +187,8 @@ export const BranchRowDivider = styled.div`
  height: 1px;
  background: #ebf1f6;
  margin-bottom: 15px;
+
+  .bp4-dark & {
+    background: rgba(255, 255, 255, 0.1);
+  }
 `;
--- a/packages/webapp/vite.config.ts
+++ b/packages/webapp/vite.config.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import react from '@vitejs/plugin-react';
 import legacy from '@vitejs/plugin-legacy';
 import path from 'node:path';
@@ -62,7 +61,7 @@ export default defineConfig(({ mode }) => {
    },
    optimizeDeps: {
      esbuildOptions: {
-        plugins: [fixReactVirtualized],
+        plugins: [fixReactVirtualized as any],
      },
    },
  };