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/3] #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/3] #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

From 42c03174118ea45763c3fb02e2a39c257c39baa8 Mon Sep 17 00:00:00 2001
From: Madalynn Nenninger <nenninger.m@northeastern.edu>
Date: Thu, 2 Apr 2026 16:57:22 -0400
Subject: [PATCH 3/3] #3991 reordered stuff to make it more balanced

---
 .../ReimbursementFormView.tsx                 | 184 +++++++++---------
 1 file changed, 92 insertions(+), 92 deletions(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
index 89fe73acd2..069767f5f9 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx
@@ -378,67 +378,6 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                   />
                 </FormControl>
 
-                {/* Date of Expense */}
-                {(isHead(user.role) || (isEditing && isLeadershipApproved)) && (
-                  <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
-                    <Box style={{ display: 'flex', verticalAlign: 'middle', alignItems: 'center' }}>
-                      <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'
-                        }}
-                      >
-                        Date of Expense{isLeadershipApproved ? '*' : ''}
-                      </FormLabel>
-                      <Tooltip
-                        title="Reimbursements with Different Purchase Dates Should be on Different Requests. Leave Empty for Not Yet Purchased Items"
-                        placement="right"
-                      >
-                        <HelpIcon style={{ fontSize: 'medium', marginLeft: '5px' }} />
-                      </Tooltip>
-                    </Box>
-                    <Controller
-                      name="dateOfExpense"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <DatePicker
-                          value={value}
-                          open={datePickerOpen}
-                          onClose={() => setDatePickerOpen(false)}
-                          onOpen={() => setDatePickerOpen(true)}
-                          onChange={(newValue) => {
-                            onChange(newValue ?? new Date());
-                          }}
-                          slotProps={{
-                            textField: {
-                              error: !!errors.dateOfExpense,
-                              helperText: errors.dateOfExpense?.message,
-                              variant: 'outlined',
-                              fullWidth: true,
-                              size: 'small',
-                              InputProps: {
-                                onClick: (e) => {
-                                  const target = e.target as HTMLElement;
-                                  if (target.closest('button')) {
-                                    setDatePickerOpen(true);
-                                  }
-                                }
-                              }
-                            }
-                          }}
-                        />
-                      )}
-                    />
-                  </FormControl>
-                )}
-
                 {/* Account Code */}
                 <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
                   <FormLabel
@@ -682,6 +621,98 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
             {/* Right Column */}
             <Grid item xs={12} md={6}>
               <Stack spacing={2}>
+                {/* Date of Expense */}
+                {(isHead(user.role) || (isEditing && isLeadershipApproved)) && (
+                  <FormControl sx={{ borderRadius: '25px', width: '100%' }}>
+                    <Box style={{ display: 'flex', verticalAlign: 'middle', alignItems: 'center' }}>
+                      <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'
+                        }}
+                      >
+                        Date of Expense{isLeadershipApproved ? '*' : ''}
+                      </FormLabel>
+                      <Tooltip
+                        title="Reimbursements with Different Purchase Dates Should be on Different Requests. Leave Empty for Not Yet Purchased Items"
+                        placement="right"
+                      >
+                        <HelpIcon style={{ fontSize: 'medium', marginLeft: '5px' }} />
+                      </Tooltip>
+                    </Box>
+                    <Controller
+                      name="dateOfExpense"
+                      control={control}
+                      render={({ field: { onChange, value } }) => (
+                        <DatePicker
+                          value={value}
+                          open={datePickerOpen}
+                          onClose={() => setDatePickerOpen(false)}
+                          onOpen={() => setDatePickerOpen(true)}
+                          onChange={(newValue) => {
+                            onChange(newValue ?? new Date());
+                          }}
+                          slotProps={{
+                            textField: {
+                              error: !!errors.dateOfExpense,
+                              helperText: errors.dateOfExpense?.message,
+                              variant: 'outlined',
+                              fullWidth: true,
+                              size: 'small',
+                              InputProps: {
+                                onClick: (e) => {
+                                  const target = e.target as HTMLElement;
+                                  if (target.closest('button')) {
+                                    setDatePickerOpen(true);
+                                  }
+                                }
+                              }
+                            }
+                          }}
+                        />
+                      )}
+                    />
+                  </FormControl>
+                )}
+
+                {/* Description */}
+                <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',
+                      fontSize: 'x-large',
+                      fontWeight: 'bold'
+                    }}
+                  >
+                    Description
+                  </FormLabel>
+                  <Controller
+                    name="description"
+                    control={control}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        value={value || ''}
+                        onChange={onChange}
+                        placeholder="Enter Description"
+                        multiline
+                        rows={3}
+                      />
+                    )}
+                  />
+                </FormControl>
+
                 {/* Upload Receipts */}
                 <FormControl sx={{ display: 'flex', borderRadius: '25px', width: '100%' }}>
                   <FormLabel
@@ -857,37 +888,6 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                     </Box>
                   </Box>
                 </FormControl>
-
-                {/* Description */}
-                <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',
-                      fontSize: 'x-large',
-                      fontWeight: 'bold'
-                    }}
-                  >
-                    Description
-                  </FormLabel>
-                  <Controller
-                    name="description"
-                    control={control}
-                    render={({ field: { onChange, value } }) => (
-                      <TextField
-                        value={value || ''}
-                        onChange={onChange}
-                        placeholder="Enter Description"
-                        multiline
-                        rows={3}
-                      />
-                    )}
-                  />
-                </FormControl>
               </Stack>
             </Grid>
           </Grid>