From cd5304edd97477aabccc0abb15fb1b93dae2ff8a Mon Sep 17 00:00:00 2001
From: madisonbaymedia-lgtm <madisonbaymedia@gmail.com>
Date: Wed, 29 Jul 2026 18:07:39 -0400
Subject: [PATCH 1/3] #4290: Create Vendor Directly in Form

---
 .../src/components/NERAutocomplete.tsx        |  8 +-
 .../ReimbursementFormView.tsx                 | 95 +++++++------------
 2 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/src/frontend/src/components/NERAutocomplete.tsx b/src/frontend/src/components/NERAutocomplete.tsx
index 98bab5a619..c066178030 100644
--- a/src/frontend/src/components/NERAutocomplete.tsx
+++ b/src/frontend/src/components/NERAutocomplete.tsx
@@ -28,6 +28,8 @@ interface NERAutocompleteProps {
   errorMessage?: FieldError;
   required?: boolean;
   disabled?: boolean;
+  noOptionsText?: React.ReactNode;
+  onInputChange?: (event: React.SyntheticEvent, value:string) => void;
 }
 
 const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
@@ -42,7 +44,9 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
   filterSelectedOptions,
   errorMessage,
   required = true,
-  disabled = false
+  disabled = false,
+  noOptionsText,
+  onInputChange
 }) => {
   const theme = useTheme();
 
@@ -78,6 +82,8 @@ const NERAutocomplete: React.FC<NERAutocompleteProps> = ({
         disablePortal
         id={id}
         onChange={onChange}
+        onInputChange={onInputChange}
+        noOptionsText={noOptionsText}
         options={options}
         sx={autocompleteStyle}
         disabled={disabled}
diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
index c5cea8b05c..8990468783 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
@@ -120,7 +120,6 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [showAddRefundSourceModal, setShowAddRefundSourceModal] = useState(false);
   const [newVendorName, setNewVendorName] = useState<string>('');
-  const [showCreateVendorField, setShowCreateVendorField] = useState<boolean>(false);
   const { mutateAsync: createVendor } = useCreateVendor();
   const user = useCurrentUser();
 
@@ -342,69 +341,47 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                       const mappedVendors = allVendors
                         .sort((a, b) => a.name.localeCompare(b.name))
                         .map(vendorsToAutocomplete);
+
+                      const handleCreateVendor = async () => {
+                        const name = newVendorName.trim();
+                        if (!name) return;
+                        try {
+                          const created = await createVendor({ name });
+                          setValue('vendorId', created.vendorId);
+                          onChange(created.vendorId);
+                          toast.success(`Vendor '${created.name}' created.`);
+                        } catch (err: any) {
+                          toast.error(err.message || 'Failed to create vendor');
+                        }
+                      };
+
                       return (
-                        <Box>
-                          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-                            <Box sx={{ flex: 1 }}>
-                              <NERAutocomplete
-                                id="vendor-autocomplete"
-                                options={mappedVendors}
-                                value={mappedVendors.find((v) => v.id === value) || null}
-                                onChange={(_, newValue) => {
-                                  if (newValue) {
-                                    onChange(newValue.id);
-                                  }
-                                }}
-                                size="small"
-                                placeholder="Select Existing Vendor"
-                                errorMessage={errors.vendorId}
-                              />
-                            </Box>
-                            <Typography fontWeight="bold" sx={{ whiteSpace: 'nowrap', lineHeight: 1 }}>
-                              OR
-                            </Typography>
-                            <Button
-                              variant="outlined"
-                              size="small"
-                              onClick={() => setShowCreateVendorField((prev) => !prev)}
-                              sx={{ whiteSpace: 'nowrap' }}
-                            >
-                              {showCreateVendorField ? 'Cancel' : 'Create Vendor'}
-                            </Button>
-                          </Box>
-                          {showCreateVendorField && (
-                            <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
-                              <TextField
-                                value={newVendorName}
-                                onChange={(e) => setNewVendorName(e.target.value)}
-                                placeholder="New Vendor Name"
-                                variant="outlined"
-                                size="small"
-                                fullWidth
-                              />
+                        <NERAutocomplete
+                          id="vendor-autocomplete"
+                          options={mappedVendors}
+                          value={mappedVendors.find((v) => v.id === value) || null}
+                          onChange={(_, newValue) => {
+                            onChange(newValue ? newValue.id : '');
+                          }}
+                          onInputChange={(_, inputValue) => setNewVendorName(inputValue)}
+                          noOptionsText={
+                            newVendorName.trim() ? (
                               <Button
-                                variant="contained"
+                                variant="text"
                                 size="small"
-                                disabled={!newVendorName.trim()}
-                                onClick={async () => {
-                                  try {
-                                    const created = await createVendor({ name: newVendorName.trim() });
-                                    setValue('vendorId', created.vendorId);
-                                    onChange(created.vendorId);
-                                    setNewVendorName('');
-                                    setShowCreateVendorField(false);
-                                    toast.success(`Vendor '${created.name}' created.`);
-                                  } catch (err: any) {
-                                    toast.error(err.message || 'Failed to create vendor');
-                                  }
-                                }}
-                                sx={{ whiteSpace: 'nowrap' }}
+                                onMouseDown={(e) => e.preventDefault()}
+                                onClick={handleCreateVendor}
                               >
-                                Save
+                                Add "{newVendorName.trim()}" as a new vendor
                               </Button>
-                            </Box>
-                          )}
-                        </Box>
+                            ) : (
+                              'No options'
+                            )
+                          }
+                          size="small"
+                          placeholder="Select Existing Vendor"
+                          errorMessage={errors.vendorId}
+                        />
                       );
                     }}
                   />

From a4e466bf7955995ce445acb7edaf127dfa93c049 Mon Sep 17 00:00:00 2001
From: vijayab2029 <vijay.ab@northeastern.edu>
Date: Wed, 29 Jul 2026 18:22:15 -0400
Subject: [PATCH 2/3] #4290: Create Vendor Directly in Form

---
 src/frontend/src/components/NERAutocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/NERAutocomplete.tsx b/src/frontend/src/components/NERAutocomplete.tsx
index c066178030..b77b45470c 100644
--- a/src/frontend/src/components/NERAutocomplete.tsx
+++ b/src/frontend/src/components/NERAutocomplete.tsx
@@ -29,7 +29,7 @@ interface NERAutocompleteProps {
   required?: boolean;
   disabled?: boolean;
   noOptionsText?: React.ReactNode;
-  onInputChange?: (event: React.SyntheticEvent, value:string) => void;
+  onInputChange?: (event: React.SyntheticEvent, value: string) => void;
 }
 
 const NERAutocomplete: React.FC<NERAutocompleteProps> = ({

From b24122d970ef5aa5eec183092b4a2011a8e0af3c Mon Sep 17 00:00:00 2001
From: vijayab2029 <vijay.ab@northeastern.edu>
Date: Sat, 1 Aug 2026 00:22:00 -0400
Subject: [PATCH 3/3] #4290 create vendor directly in form

---
 .../ReimbursementRequestForm/ReimbursementFormView.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
index 8990468783..f37e638f26 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
@@ -379,7 +379,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                             )
                           }
                           size="small"
-                          placeholder="Select Existing Vendor"
+                          placeholder="Select Vendor"
                           errorMessage={errors.vendorId}
                         />
                       );