From 4dc5c5abe050f05746306454934a73c1e0372f62 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Fri, 27 Mar 2026 13:14:54 +0200
Subject: [PATCH] wip

---
 .../src/components/Select/SalutationList.tsx  |  1 +
 .../CustomerForm/CustomerFloatingActions.tsx  | 30 ++-----
 .../CustomerForm/CustomerFormContent.tsx      |  5 +-
 .../CustomerFormFinancialSection.tsx          |  8 +-
 .../CustomerForm/CustomerFormFormik.tsx       |  3 +
 .../VendorForm/VendorBillingAddress.tsx       | 21 +++--
 .../VendorForm/VendorFinanicalPanelTab.tsx    | 17 ++--
 .../VendorForm/VendorFloatingActions.tsx      | 29 ++-----
 .../VendorFormAfterPrimarySection.tsx         | 21 +++--
 .../VendorForm/VendorFormBasicSection.tsx     | 26 ++++--
 .../Vendors/VendorForm/VendorFormContent.tsx  |  5 +-
 .../VendorForm/VendorFormFinancialSection.tsx |  5 ++
 .../Vendors/VendorForm/VendorFormFormik.tsx   |  4 +-
 .../VendorForm/VendorFormNotesSection.tsx     |  4 +-
 .../VendorForm/VendorFormPrimarySection.tsx   | 82 -------------------
 .../VendorForm/VendorShippingAddress.tsx      | 21 +++--
 .../Vendors/VendorForm/VendorsTabs.tsx        | 43 ----------
 17 files changed, 107 insertions(+), 218 deletions(-)
 delete mode 100644 packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
 delete mode 100644 packages/webapp/src/containers/Vendors/VendorForm/VendorsTabs.tsx

diff --git a/packages/webapp/src/components/Select/SalutationList.tsx b/packages/webapp/src/components/Select/SalutationList.tsx
index a57dd1229..d869b20fc 100644
--- a/packages/webapp/src/components/Select/SalutationList.tsx
+++ b/packages/webapp/src/components/Select/SalutationList.tsx
@@ -28,6 +28,7 @@ export function SalutationList({ ...restProps }: SalutationListProps) {
       items={items}
       valueAccessor={'key'}
       textAccessor={'label'}
+      labelAccessor={'_label'}
       placeholder={intl.get('salutation')}
       filterable={false}
       {...restProps}
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
index f1b958914..f1de71a12 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFloatingActions.tsx
@@ -22,18 +22,13 @@ export function CustomerFloatingActions() {
   };
 
   // Formik context.
-  const { resetForm, submitForm, isSubmitting } = useFormikContext();
+  const { submitForm, isSubmitting } = useFormikContext();
 
   // Handle submit button click.
   const handleSubmitBtnClick = (_event: React.MouseEvent<HTMLElement>) => {
     setSubmitPayload({ noRedirect: false });
   };
 
-  // handle clear button clicl.
-  const handleClearBtnClick = (_event: React.MouseEvent<HTMLElement>) => {
-    resetForm();
-  };
-
   // Handle submit & new button click.
   const handleSubmitAndNewClick = (_event: React.MouseEvent<HTMLElement>) => {
     submitForm();
@@ -44,7 +39,7 @@ export function CustomerFloatingActions() {
     <FloatingActionsGroup spacing={10}>
       <ButtonGroup>
         {/* ----------- Save and New ----------- */}
-        <SaveButton
+        <Button
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
@@ -61,9 +56,9 @@ export function CustomerFloatingActions() {
               />
             </Menu>
           }
-          minimal={true}
           interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+          position={Position.BOTTOM_RIGHT}
+          minimal
         >
           <Button
             disabled={isSubmitting}
@@ -72,27 +67,16 @@ export function CustomerFloatingActions() {
           />
         </Popover>
       </ButtonGroup>
-
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
     </FloatingActionsGroup>
   );
 }
 
 const FloatingActionsGroup = styled(Group)`
-  padding: 12px 0;
+  padding: 10px 0;
   padding-left: 165px;
   border-top: 1px solid #50555a;
   position: sticky;
   bottom: 0;
   background: var(--color-card-background);
-`;
-
-const SaveButton = styled(Button)`
-  min-width: 80px;
-`;
+  z-index: 1;
+`;
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx
index 1a27a9b97..a857528d7 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormContent.tsx
@@ -25,11 +25,10 @@ export function CustomerFormContent() {
     <Card className={css`padding-bottom: 0 !important;`}>
       <Group verticalAlign={'top'} alignItems={'flex-start'} flexWrap={'nowrap'}>
           <Tabs
-            vertical
-            large
             selectedTabId={selectedTabId}
             onChange={handleTabChange}
-            className={css`position: sticky; top: 20px; .bp4-large > .bp4-tab{font-size: 14px;} `}
+            className={css`position: sticky; top: 20px;`}
+            vertical
           >
             <Tab id={'primary'} title={'Basic'} />
             <Tab id={'financial'} title={'Financial'} />
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFinancialSection.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFinancialSection.tsx
index 06fa69d41..18d70611f 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFinancialSection.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFinancialSection.tsx
@@ -12,6 +12,7 @@ import {
   FMoneyInputGroup,
   ExchangeRateInputGroup,
   FDateInput,
+  Icon,
   Box,
 } from '@/components';
 import { useCustomerFormContext } from './CustomerFormProvider';
@@ -58,12 +59,12 @@ export function CustomerFormFinancialSection() {
               label={<T id={'customer.label.opening_branch'} />}
               name={'opening_balance_branch_id'}
               inline
-              fill
             >
               <BranchSelect
                 name={'opening_balance_branch_id'}
                 branches={branches}
                 popoverProps={{ minimal: true }}
+                fastField
               />
             </FFormGroup>
           </FeatureCan>
@@ -95,6 +96,9 @@ function CustomerOpeningBalanceAtField() {
         disabled={customerId}
         formatDate={(date) => date.toLocaleDateString()}
         parseDate={(str) => new Date(str)}
+        inputProps={{
+          leftIcon: <Icon icon={'date-range'} />,
+        }}
         fill={true}
       />
     </FFormGroup>
@@ -118,7 +122,7 @@ function CustomerOpeningBalanceField() {
       fastField={true}
       fill
     >
-      <ControlGroup fill>
+      <ControlGroup>
         <InputPrependText text={values.currency_code as string} />
         <FMoneyInputGroup
           name={'opening_balance'}
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
index c56ecfc5d..57b798727 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
@@ -166,6 +166,9 @@ const CustomerFormFields = styled.div`
   .bp6-form-content {
     min-width: 300px;
   }
+  .bp4-form-group{
+    margin-bottom: 20px;
+  }
   .bp4-form-group.bp4-inline label.bp4-label {
     min-width: 140px;
   }
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorBillingAddress.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorBillingAddress.tsx
index 425e92b93..f199b5279 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorBillingAddress.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorBillingAddress.tsx
@@ -19,8 +19,9 @@ export function VendorBillingAddress() {
         label={<T id={'country'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'billing_address_country'} fill />
+        <FInputGroup name={'billing_address_country'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -28,8 +29,9 @@ export function VendorBillingAddress() {
         label={<T id={'address_line_1'} />}
         inline
         fill
+        fastField
       >
-        <FTextArea name={'billing_address1'} fill />
+        <FTextArea name={'billing_address1'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -37,8 +39,9 @@ export function VendorBillingAddress() {
         label={<T id={'address_line_2'} />}
         inline
         fill
+        fastField
       >
-        <FTextArea name={'billing_address2'} fill />
+        <FTextArea name={'billing_address2'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -46,8 +49,9 @@ export function VendorBillingAddress() {
         label={<T id={'city_town'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'billing_address_city'} fill />
+        <FInputGroup name={'billing_address_city'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -55,8 +59,9 @@ export function VendorBillingAddress() {
         label={<T id={'state'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'billing_address_state'} fill />
+        <FInputGroup name={'billing_address_state'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -64,8 +69,9 @@ export function VendorBillingAddress() {
         label={<T id={'zip_code'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'billing_address_postcode'} fill />
+        <FInputGroup name={'billing_address_postcode'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -73,8 +79,9 @@ export function VendorBillingAddress() {
         label={<T id={'phone'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'billing_address_phone'} fill />
+        <FInputGroup name={'billing_address_phone'} fill fastField />
       </FFormGroup>
     </Box>
   );
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
index dec7bf8c8..738d1b799 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.tsx
@@ -44,10 +44,12 @@ export function VendorFinanicalPanelTab() {
             label={<T id={'currency'} />}
             fastField
             inline
+            fastField
           >
             <CurrencySelectList
               name="currency_code"
               items={currencies}
+              fastField
             />
           </FFormGroup>
 
@@ -93,16 +95,17 @@ function VendorOpeningBalanceField() {
     <FFormGroup
       name={'opening_balance'}
       label={<T id={'opening_balance'} />}
-      inline={true}
       shouldUpdate={openingBalanceFieldShouldUpdate}
       shouldUpdateDeps={{ currencyCode: values.currency_code }}
-      fastField={true}
+      inline
+      fastField
     >
       <ControlGroup>
         <InputPrependText text={values.currency_code} />
         <FMoneyInputGroup
           name={'opening_balance'}
           inputGroupProps={{ fill: true }}
+          fastField
         />
       </ControlGroup>
     </FFormGroup>
@@ -123,8 +126,9 @@ function VendorOpeningBalanceAtField() {
     <FFormGroup
       name={'opening_balance_at'}
       label={<T id={'opening_balance_at'} />}
-      inline={true}
       helperText={<ErrorMessage name="opening_balance_at" />}
+      inline
+      fastField
     >
       <FDateInput
         name={'opening_balance_at'}
@@ -132,7 +136,8 @@ function VendorOpeningBalanceAtField() {
         disabled={vendorId}
         formatDate={(date) => date.toLocaleDateString()}
         parseDate={(str) => new Date(str)}
-        fill={true}
+        fill
+        fastField
       />
     </FFormGroup>
   );
@@ -156,12 +161,14 @@ function VendorOpeningBalanceExchangeRateField() {
     <FFormGroup
       label={' '}
       name={'opening_balance_exchange_rate'}
-      inline={true}
+      inline
+      fastField
     >
       <ExchangeRateInputGroup
         fromCurrency={values.currency_code}
         toCurrency={currentOrganization.base_currency}
         name={'opening_balance_exchange_rate'}
+        fastField
       />
     </FFormGroup>
   );
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
index d4f113a4f..6dd38334e 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFloatingActions.tsx
@@ -20,7 +20,7 @@ import { useVendorFormContext } from './VendorFormProvider';
  */
 export function VendorFloatingActions() {
   // Formik context.
-  const { resetForm, isSubmitting, submitForm } = useFormikContext();
+  const { isSubmitting, submitForm } = useFormikContext();
 
   // Vendor form context.
   const { isNewMode, setSubmitPayload } = useVendorFormContext();
@@ -36,16 +36,11 @@ export function VendorFloatingActions() {
     setSubmitPayload({ noRedirect: true });
   };
 
-  // Handle clear button click.
-  const handleClearBtnClick = () => {
-    resetForm();
-  };
-
   return (
     <FloatingActionsGroup spacing={10}>
       <ButtonGroup>
         {/* ----------- Save and New ----------- */}
-        <SaveButton
+        <Button
           disabled={isSubmitting}
           loading={isSubmitting}
           intent={Intent.PRIMARY}
@@ -62,9 +57,9 @@ export function VendorFloatingActions() {
               />
             </Menu>
           }
-          minimal={true}
           interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+          position={Position.BOTTOM_RIGHT}
+          minimal
         >
           <Button
             disabled={isSubmitting}
@@ -73,26 +68,16 @@ export function VendorFloatingActions() {
           />
         </Popover>
       </ButtonGroup>
-      {/* ----------- Clear & Reset----------- */}
-      <Button
-        className={'ml1'}
-        disabled={isSubmitting}
-        onClick={handleClearBtnClick}
-        text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
-      />
     </FloatingActionsGroup>
   );
 }
 
 const FloatingActionsGroup = styled(Group)`
-  padding: 12px 0;
+  padding: 10px 0;
   padding-left: 165px;
   border-top: 1px solid #50555a;
   position: sticky;
   bottom: 0;
   background: var(--color-card-background);
-`;
-
-const SaveButton = styled(Button)`
-  min-width: 80px;
-`;
+  z-index: 1;
+`;
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
index 5d1678a6c..a5d031d32 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
@@ -2,21 +2,22 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { ControlGroup } from '@blueprintjs/core';
-import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
+import { FormattedMessage as T, FFormGroup, FInputGroup, Box } from '@/components';
 
 /**
  * Vendor form  after primary section.
  */
 export function VendorFormAfterPrimarySection() {
   return (
-    <div className={'customer-form__after-primary-section-content'}>
+    <Box>
       {/*------------ Vendor email -----------*/}
       <FFormGroup
         name={'email'}
         label={<T id={'vendor_email'} />}
-        inline={true}
+        inline
+        fastField
       >
-        <FInputGroup name={'email'} />
+        <FInputGroup name={'email'} fastField />
       </FFormGroup>
 
       {/*------------ Phone number -----------*/}
@@ -24,21 +25,23 @@ export function VendorFormAfterPrimarySection() {
         name={'work_phone'}
         className={'form-group--phone-number'}
         label={<T id={'phone_number'} />}
-        inline={true}
+        inline
+        fastField
       >
         <ControlGroup>
-          <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
+          <FInputGroup name={'work_phone'} placeholder={intl.get('work')} fastField />
           <FInputGroup
             name={'personal_phone'}
             placeholder={intl.get('mobile')}
+            fastField
           />
         </ControlGroup>
       </FFormGroup>
 
       {/*------------ Vendor website -----------*/}
-      <FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
-        <FInputGroup name={'website'} placeholder={'http://'} />
+      <FFormGroup name={'website'} label={<T id={'website'} />} inline fastField>
+        <FInputGroup name={'website'} placeholder={'http://'} fastField />
       </FFormGroup>
-    </div>
+    </Box>
   );
 }
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormBasicSection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormBasicSection.tsx
index 4ded2682f..dce134100 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormBasicSection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormBasicSection.tsx
@@ -29,22 +29,26 @@ export function VendorFormBasicSection({}) {
         label={<T id={'contact_name'} />}
         inline
         fill
+        fastField
       >
         <ControlGroup fill>
           <SalutationList
             name={'salutation'}
             popoverProps={{ minimal: true }}
+            fastField
           />
           <FInputGroup
             name={'first_name'}
             placeholder={intl.get('first_name')}
             inputRef={(ref) => (firstNameFieldRef.current = ref)}
             fill
+            fastField
           />
           <FInputGroup
             name={'last_name'}
             placeholder={intl.get('last_name')}
             fill
+            fastField
           />
         </ControlGroup>
       </FFormGroup>
@@ -55,10 +59,9 @@ export function VendorFormBasicSection({}) {
         helperText="Add a unique account number to identify, reference and search for the contact."
         inline
         fill
+        fastField
       >
-        <FInputGroup
-          name={'vendor_code'}
-          fill />
+        <FInputGroup name={'vendor_code'} fill fastField />
       </FFormGroup>
 
       {/*----------- Company Name -----------*/}
@@ -67,8 +70,9 @@ export function VendorFormBasicSection({}) {
         label={<T id={'company_name'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'company_name'} fill />
+        <FInputGroup name={'company_name'} fill fastField />
       </FFormGroup>
 
       {/*----------- Display Name -----------*/}
@@ -78,11 +82,13 @@ export function VendorFormBasicSection({}) {
         helperText="This is the name that appears on invoices and emails."
         inline
         fill
+        fastField
       >
         <DisplayNameList
           name={'display_name'}
           popoverProps={{ minimal: true }}
           buttonProps={{ fill: true }}
+          fastField
         />
       </FFormGroup>
 
@@ -93,10 +99,12 @@ export function VendorFormBasicSection({}) {
         name={'email'}
         label={<T id={'vendor_email'} />}
         inline
+        fastField
       >
         <FInputGroup
           name={'email'}
           leftIcon={<Icon icon="envelope" />}
+          fastField
         />
       </FFormGroup>
 
@@ -106,26 +114,26 @@ export function VendorFormBasicSection({}) {
         className={'form-group--phone-number'}
         label={<T id={'phone_number'} />}
         inline
+        fastField
       >
         <Stack spacing={10}>
-          <FInputGroup
-            name={'work_phone'}
-            placeholder={intl.get('work')}
-            leftIcon="phone"
+          <FInputGroup name={'work_phone'} placeholder={intl.get('work')} leftIcon="phone" fastField
           />
           <FInputGroup
             name={'personal_phone'}
             placeholder={intl.get('mobile')}
+            fastField
           />
         </Stack>
       </FFormGroup>
 
       {/*------------ Vendor website -----------*/}
-      <FFormGroup name={'website'} label={<T id={'website'} />} inline>
+      <FFormGroup name={'website'} label={<T id={'website'} />} inline fastField>
         <FInputGroup
           name={'website'}
           placeholder={'http://'}
           leftIcon={<BlueprintIcon icon="globe-network" />}
+          fastField
         />
       </FFormGroup>
     </Box>
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx
index cfcb8b57d..d92569db6 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormContent.tsx
@@ -26,11 +26,10 @@ export function VendorFormContent() {
     <Card className={css`padding-bottom: 0 !important;`}>
       <Group verticalAlign={'top'} alignItems={'flex-start'} flexWrap={'nowrap'}>
         <Tabs
-          vertical
-          large
           selectedTabId={selectedTabId}
           onChange={handleTabChange}
-          className={css`position: sticky; top: 20px; .bp4-large > .bp4-tab{font-size: 14px;} `}
+          className={css`position: sticky; top: 20px;`}
+          vertical
         >
           <Tab id={'primary'} title={'Basic'} />
           <Tab id={'financial'} title={'Financial'} />
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFinancialSection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFinancialSection.tsx
index d8b696edf..b1ee2abfa 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFinancialSection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFinancialSection.tsx
@@ -12,6 +12,7 @@ import {
   FMoneyInputGroup,
   ExchangeRateInputGroup,
   FDateInput,
+  Icon,
   Box,
 } from '@/components';
 import { useVendorFormContext } from './VendorFormProvider';
@@ -46,6 +47,7 @@ export function VendorFormFinancialSection() {
           name="currency_code"
           items={currencies}
           disabled={vendorId}
+          fastField
         />
       </FFormGroup>
 
@@ -95,6 +97,9 @@ function VendorOpeningBalanceAtField() {
         disabled={vendorId}
         formatDate={(date) => date.toLocaleDateString()}
         parseDate={(str) => new Date(str)}
+        inputProps={{
+          leftIcon: <Icon icon={'date-range'} />,
+        }}
         fill={true}
       />
     </FFormGroup>
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
index 255b997d7..bbf090964 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
@@ -120,7 +120,9 @@ const VendorFormFields = styled.div`
   .bp6-form-content {
     min-width: 300px;
   }
-
+  .bp4-form-group{
+    margin-bottom: 20px;
+  }
   .bp4-form-group.bp4-inline label.bp4-label {
     min-width: 140px;
   }
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormNotesSection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormNotesSection.tsx
index 9935ef11f..1e19517a8 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormNotesSection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormNotesSection.tsx
@@ -9,8 +9,8 @@ export function VendorFormNotesSection() {
         <T id={'notes'} />
       </VendorFormSectionTitle>
 
-      <FFormGroup name={'note'} label={<T id={'note'} />} inline fill>
-        <FTextArea name={'note'} fill />
+      <FFormGroup name={'note'} label={<T id={'note'} />} inline fill fastField>
+        <FTextArea name={'note'} fill fastField />
       </FFormGroup>
     </Box>
   );
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
deleted file mode 100644
index 7da371b84..000000000
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { ControlGroup } from '@blueprintjs/core';
-import {
-  FormattedMessage as T,
-  FFormGroup,
-  FInputGroup,
-  Hint,
-  FieldRequiredHint,
-  SalutationList,
-  DisplayNameList,
-} from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { useAutofocus } from '@/hooks';
-
-/**
- * Vendor form primary section.
- */
-export function VendorFormPrimarySection() {
-  const firstNameFieldRef = useAutofocus();
-
-  return (
-    <div className={'customer-form__primary-section-content'}>
-      {/**----------- Vendor name -----------*/}
-      <FFormGroup
-        name={'salutation'}
-        className={classNames('form-group--contact_name')}
-        label={<T id={'contact_name'} />}
-        inline={true}
-      >
-        <ControlGroup>
-          <SalutationList
-            name={'salutation'}
-            popoverProps={{ minimal: true }}
-          />
-          <FInputGroup
-            name={'first_name'}
-            placeholder={intl.get('first_name')}
-            className={classNames('input-group--first-name')}
-            inputRef={(ref) => (firstNameFieldRef.current = ref)}
-          />
-          <FInputGroup
-            name={'last_name'}
-            placeholder={intl.get('last_name')}
-            className={classNames('input-group--last-name')}
-          />
-        </ControlGroup>
-      </FFormGroup>
-
-      {/*----------- Company Name -----------*/}
-      <FFormGroup
-        name={'company_name'}
-        className={classNames('form-group--company_name')}
-        label={<T id={'company_name'} />}
-        inline={true}
-      >
-        <FInputGroup name={'company_name'} />
-      </FFormGroup>
-
-      {/*----------- Display Name -----------*/}
-      <FFormGroup
-        name={'display_name'}
-        label={
-          <>
-            <T id={'display_name'} />
-            <FieldRequiredHint />
-            <Hint />
-          </>
-        }
-        fastField
-        inline
-      >
-        <DisplayNameList
-          name={'display_name'}
-          popoverProps={{ minimal: true }}
-        />
-      </FFormGroup>
-    </div>
-  );
-}
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorShippingAddress.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorShippingAddress.tsx
index 307c44f16..bca86e2fd 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorShippingAddress.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorShippingAddress.tsx
@@ -19,8 +19,9 @@ export function VendorShippingAddress() {
         label={<T id={'country'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'shipping_address_country'} fill />
+        <FInputGroup name={'shipping_address_country'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -28,8 +29,9 @@ export function VendorShippingAddress() {
         label={<T id={'address_line_1'} />}
         inline
         fill
+        fastField
       >
-        <FTextArea name={'shipping_address1'} fill />
+        <FTextArea name={'shipping_address1'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -37,8 +39,9 @@ export function VendorShippingAddress() {
         label={<T id={'address_line_2'} />}
         inline
         fill
+        fastField
       >
-        <FTextArea name={'shipping_address2'} fill />
+        <FTextArea name={'shipping_address2'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -46,8 +49,9 @@ export function VendorShippingAddress() {
         label={<T id={'city_town'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'shipping_address_city'} fill />
+        <FInputGroup name={'shipping_address_city'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -55,8 +59,9 @@ export function VendorShippingAddress() {
         label={<T id={'state'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'shipping_address_state'} fill />
+        <FInputGroup name={'shipping_address_state'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -64,8 +69,9 @@ export function VendorShippingAddress() {
         label={<T id={'zip_code'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'shipping_address_postcode'} fill />
+        <FInputGroup name={'shipping_address_postcode'} fill fastField />
       </FFormGroup>
 
       <FFormGroup
@@ -73,8 +79,9 @@ export function VendorShippingAddress() {
         label={<T id={'phone'} />}
         inline
         fill
+        fastField
       >
-        <FInputGroup name={'shipping_address_phone'} fill />
+        <FInputGroup name={'shipping_address_phone'} fill fastField />
       </FFormGroup>
     </Box>
   );
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorsTabs.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorsTabs.tsx
deleted file mode 100644
index e3aeafd78..000000000
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorsTabs.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { Tabs, Tab } from '@blueprintjs/core';
-import { CLASSES } from '@/constants/classes';
-
-import { VendorFinanicalPanelTab } from './VendorFinanicalPanelTab';
-
-import CustomerAddressTabs from '@/containers/Customers/CustomerForm/CustomerAddressTabs';
-import CustomerNotePanel from '@/containers/Customers/CustomerForm/CustomerNotePanel';
-
-/**
- * Vendor form tabs.
- */
-export function VendorsTabs() {
-  return (
-    <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
-      <Tabs
-        animate={true}
-        id={'vendor-tabs'}
-        large={true}
-        defaultSelectedTabId="financial"
-      >
-        <Tab
-          id={'financial'}
-          title={intl.get('financial_details')}
-          panel={<VendorFinanicalPanelTab />}
-        />
-        <Tab
-          id={'address'}
-          title={intl.get('address')}
-          panel={<CustomerAddressTabs />}
-        />
-        <Tab
-          id="notes"
-          title={intl.get('notes')}
-          panel={<CustomerNotePanel />}
-        />
-      </Tabs>
-    </div>
-  );
-}