diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx index c21e06e633..069767f5f9 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 {/* Left Column */} - + {/* Vendor */} /> - {/* Date of Expense */} - {(isHead(user.role) || (isEditing && isLeadershipApproved)) && ( - - - - Date of Expense{isLeadershipApproved ? '*' : ''} - - - - - - ( - + + Account Code* + + { + const mappedAccountCodes = allAccountCodes + .filter((accountCode) => accountCode.allowed) + .map(accountCodesToAutocomplete); + return ( + + ); + }} + /> + {errors.accountCodeId?.message} + {/* Refund Sources */} @@ -627,8 +620,69 @@ const ReimbursementRequestFormView: React.FC {/* Right Column */} - - {/* Account Code */} + + {/* Date of Expense */} + {(isHead(user.role) || (isEditing && isLeadershipApproved)) && ( + + + + Date of Expense{isLeadershipApproved ? '*' : ''} + + + + + + ( + 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); + } + } + } + } + }} + /> + )} + /> + + )} + + {/* Description */} textDecoration: 'underline', textUnderlineOffset: '3.5px', textDecorationThickness: '0.6px', - paddingBottom: '2px', fontSize: 'x-large', fontWeight: 'bold' }} > - Account Code* + Description { - const mappedAccountCodes = allAccountCodes - .filter((accountCode) => accountCode.allowed) - .map(accountCodesToAutocomplete); - return ( - - ); - }} + render={({ field: { onChange, value } }) => ( + + )} /> - {errors.accountCodeId?.message} {/* Upload Receipts */} @@ -857,37 +888,6 @@ const ReimbursementRequestFormView: React.FC - - {/* Description */} - - - Description - - ( - - )} - /> -