Merge pull request #874 from bigcapitalhq/feature/20251218134811

fix: import module bugs

packages/webapp/src/components/Accounts/AccountsSuggestField.tsx

@@ -102,6 +102,7 @@ function AccountsSuggestFieldRoot({
   return (
     <FSuggest
       items={filteredAccounts}
+      itemPredicate={filterAccountsPredicater}
       onCreateItemSelect={handleCreateItemSelect}
       valueAccessor="id"
       textAccessor="name"

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseForm.tsx

@@ -48,7 +48,7 @@ function ExpenseForm({
     createExpenseMutate,
     expense,
     expenseId,
-    submitPayload,
+    submitPayloadRef,
   } = useExpenseFormContext();
 
   const isNewMode = !expenseId;
@@ -86,9 +86,12 @@ function ExpenseForm({
       return;
     }
 
+    // Get submit payload from ref for synchronous access
+    const currentSubmitPayload = submitPayloadRef?.current || {};
+
     const form = {
       ...transformFormValuesToRequest(values),
-      publish: submitPayload.publish,
+      publish: currentSubmitPayload.publish,
     };
     // Handle request success.
     const handleSuccess = (response) => {
@@ -103,10 +106,10 @@ function ExpenseForm({
       });
       setSubmitting(false);
 
-      if (submitPayload.redirect) {
+      if (currentSubmitPayload.redirect) {
         history.push('/expenses');
       }
-      if (submitPayload.resetForm) {
+      if (currentSubmitPayload.resetForm) {
         resetForm();
       }
     };

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormPageProvider.tsx

@@ -59,8 +59,13 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   const { mutateAsync: createExpenseMutate } = useCreateExpense();
   const { mutateAsync: editExpenseMutate } = useEditExpense();
 
-  // Submit form payload.
-  const [submitPayload, setSubmitPayload] = React.useState({});
+  // Submit form payload - using ref for synchronous access.
+  const submitPayloadRef = React.useRef({});
+
+  // Setter to update the ref.
+  const setSubmitPayload = React.useCallback((payload) => {
+    submitPayloadRef.current = payload;
+  }, []);
 
   // Detarmines whether the form in new mode.
   const isNewMode = !expenseId;
@@ -69,7 +74,7 @@ function ExpenseFormPageProvider({ query, expenseId, ...props }) {
   const provider = {
     isNewMode,
     expenseId,
-    submitPayload,
+    submitPayloadRef, // Expose ref for synchronous access
 
     currencies,
     customers,

packages/webapp/src/containers/Import/ImportFileMapping.module.scss

@@ -7,6 +7,10 @@
   color: #738091;
   font-weight: 700;
   padding: 0 11px;
+
+  :global(.bp4-dark) &{
+    color: var(--color-light-gray1);
+  }
 }
 
 .table {
@@ -24,6 +28,11 @@
       padding-bottom: 8px;
       color: #738091;
       font-weight: 500;
+
+      :global(.bp4-dark) &{
+        color: var(--color-light-gray1);
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+      }
     }
   }
   

packages/webapp/src/containers/Import/ImportFilePreview.module.scss

@@ -7,6 +7,9 @@
     border-top: 1px solid #d9d9da;
     padding: 6px 0;
 
+    :global(.bp4-dark) &{
+      border-top-color: rgba(255, 255, 255, 0.1);
+    }
     &:last-child{ 
       padding-bottom: 0;
     }
@@ -31,6 +34,10 @@ table.skippedTable {
 
     tr:hover td{
       background: #F6F7F9;
+
+      :global(.bp4-dark) &{
+        background: var(--color-dark-gray2);
+      }
     }
   }
 }