From adfa8852db6e2de06d31a2bc1dda39988dc388e2 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 25 Nov 2025 21:29:32 +0200
Subject: [PATCH] wip

---
 .../Accounts/AccountsMultiSelect.tsx          |  7 +++-
 .../Accounts/AccountsSuggestField.tsx         | 21 ++++++++--
 .../src/components/Accounts/_components.tsx   |  9 ++++-
 .../Dashboard/Sidebar/SidebarMenu.tsx         |  2 +-
 .../QuickPaymentMadeFormFields.tsx            | 38 ++++++-------------
 .../QuickPaymentReceiveFormFields.tsx         | 35 +++++++----------
 packages/webapp/vite.config.ts                |  3 +-
 7 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx b/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx
index fda4588b3..a5929930a 100644
--- 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,
 });
 
 /**
diff --git a/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx b/packages/webapp/src/components/Accounts/AccountsSuggestField.tsx
index 7b6405d48..bb7aa7c8a 100644
--- 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) {
diff --git a/packages/webapp/src/components/Accounts/_components.tsx b/packages/webapp/src/components/Accounts/_components.tsx
index c791bf466..b902f8b64 100644
--- 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();
 
diff --git a/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx b/packages/webapp/src/containers/Dashboard/Sidebar/SidebarMenu.tsx
index c1b05a5c2..cbcc90ac7 100644
--- 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>
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx
index 5e166caaf..4af72a719 100644
--- 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);
+  }
 `;
diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx
index 90e91c484..8f143bafb 100644
--- 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);
+  }
 `;
diff --git a/packages/webapp/vite.config.ts b/packages/webapp/vite.config.ts
index ac904ce98..3d6c1ccd2 100644
--- 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],
       },
     },
   };