From 1a1ccaac4458fe8bee7e6d2064cf2ea5a0d02f4e Mon Sep 17 00:00:00 2001
From: Madalynn Nenninger <nenninger.m@northeastern.edu>
Date: Thu, 26 Mar 2026 19:18:35 -0400
Subject: [PATCH 1/2] #3991 moved account code to left column

---
 .../ReimbursementFormView.tsx                 | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
index c21e06e633..93b6e93297 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
@@ -439,6 +439,60 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                   </FormControl>
                 )}
 
+                {/* Account Code */}
+                <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
+                  <FormLabel
+                    sx={{
+                      color: '#dd524c',
+                      textShadow: '1.5px 0 #dd524c',
+                      letterSpacing: '0.5px',
+                      textDecoration: 'underline',
+                      textUnderlineOffset: '3.5px',
+                      textDecorationThickness: '0.6px',
+                      paddingBottom: '2px',
+                      fontSize: 'x-large',
+                      fontWeight: 'bold'
+                    }}
+                  >
+                    Account Code*
+                  </FormLabel>
+                  <Controller
+                    name="accountCodeId"
+                    control={control}
+                    render={({ field: { onChange, value } }) => {
+                      const mappedAccountCodes = allAccountCodes
+                        .filter((accountCode) => accountCode.allowed)
+                        .map(accountCodesToAutocomplete);
+                      return (
+                        <Select
+                          value={value}
+                          onChange={(e) => {
+                            onChange(e.target.value);
+                          }}
+                          displayEmpty
+                          variant="outlined"
+                          fullWidth
+                          size="small"
+                          IconComponent={KeyboardArrowDownIcon}
+                          renderValue={(selected) => {
+                            if (!selected) {
+                              return <Typography style={{ color: 'gray' }}>Select Account Code</Typography>;
+                            }
+                            return mappedAccountCodes.find((accountCode) => accountCode.id === selected)?.label;
+                          }}
+                        >
+                          {mappedAccountCodes.map((accountCode) => (
+                            <MenuItem key={accountCode.id} value={accountCode.id}>
+                              {accountCode.label}
+                            </MenuItem>
+                          ))}
+                        </Select>
+                      );
+                    }}
+                  />
+                  <FormHelperText error>{errors.accountCodeId?.message}</FormHelperText>
+                </FormControl>
+
                 {/* Refund Sources */}
                 <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
                   <FormLabel
@@ -628,60 +682,6 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
             {/* Right Column */}
             <Grid item xs={12} md={6}>
               <Stack spacing={3}>
-                {/* Account Code */}
-                <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
-                  <FormLabel
-                    sx={{
-                      color: '#dd524c',
-                      textShadow: '1.5px 0 #dd524c',
-                      letterSpacing: '0.5px',
-                      textDecoration: 'underline',
-                      textUnderlineOffset: '3.5px',
-                      textDecorationThickness: '0.6px',
-                      paddingBottom: '2px',
-                      fontSize: 'x-large',
-                      fontWeight: 'bold'
-                    }}
-                  >
-                    Account Code*
-                  </FormLabel>
-                  <Controller
-                    name="accountCodeId"
-                    control={control}
-                    render={({ field: { onChange, value } }) => {
-                      const mappedAccountCodes = allAccountCodes
-                        .filter((accountCode) => accountCode.allowed)
-                        .map(accountCodesToAutocomplete);
-                      return (
-                        <Select
-                          value={value}
-                          onChange={(e) => {
-                            onChange(e.target.value);
-                          }}
-                          displayEmpty
-                          variant="outlined"
-                          fullWidth
-                          size="small"
-                          IconComponent={KeyboardArrowDownIcon}
-                          renderValue={(selected) => {
-                            if (!selected) {
-                              return <Typography style={{ color: 'gray' }}>Select Account Code</Typography>;
-                            }
-                            return mappedAccountCodes.find((accountCode) => accountCode.id === selected)?.label;
-                          }}
-                        >
-                          {mappedAccountCodes.map((accountCode) => (
-                            <MenuItem key={accountCode.id} value={accountCode.id}>
-                              {accountCode.label}
-                            </MenuItem>
-                          ))}
-                        </Select>
-                      );
-                    }}
-                  />
-                  <FormHelperText error>{errors.accountCodeId?.message}</FormHelperText>
-                </FormControl>
-
                 {/* Upload Receipts */}
                 <FormControl sx={{ display: 'flex', borderRadius: '25px', width: '100%' }}>
                   <FormLabel

From e5b56a025a417096b04b529b20eca0768ed6272a Mon Sep 17 00:00:00 2001
From: Madalynn Nenninger <nenninger.m@northeastern.edu>
Date: Thu, 26 Mar 2026 22:56:37 -0400
Subject: [PATCH 2/2] #3991 stack spacing

---
 .../ReimbursementRequestForm/ReimbursementFormView.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
index 93b6e93297..89fe73acd2 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
@@ -285,7 +285,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
           <Grid container spacing={3} alignItems="flex-start">
             {/* Left Column */}
             <Grid item xs={12} md={6}>
-              <Stack spacing={3}>
+              <Stack spacing={4}>
                 {/* Vendor */}
                 <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
                   <FormLabel
@@ -681,7 +681,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
 
             {/* Right Column */}
             <Grid item xs={12} md={6}>
-              <Stack spacing={3}>
+              <Stack spacing={2}>
                 {/* Upload Receipts */}
                 <FormControl sx={{ display: 'flex', borderRadius: '25px', width: '100%' }}>
                   <FormLabel