Skip to content

Commit cf66571

Browse files
chpy04chpy04
authored
Merge pull request #4097 from Northeastern-Electric-Racing/#3991-rr-form-order-account-code
#3991 moved Account Code above Refund Source
2 parents a8c2a4f + 42c0317 commit cf66571

1 file changed

Lines changed: 124 additions & 124 deletions

File tree

‎src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementFormView.tsx‎

Lines changed: 124 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
285285
<Grid container spacing={3} alignItems="flex-start">
286286
{/* Left Column */}
287287
<Grid item xs={12} md={6}>
288-
<Stack spacing={3}>
288+
<Stack spacing={4}>
289289
{/* Vendor */}
290290
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
291291
<FormLabel
@@ -378,66 +378,59 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
378378
/>
379379
</FormControl>
380380

381-
{/* Date of Expense */}
382-
{(isHead(user.role) || (isEditing && isLeadershipApproved)) && (
383-
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
384-
<Box style={{ display: 'flex', verticalAlign: 'middle', alignItems: 'center' }}>
385-
<FormLabel
386-
sx={{
387-
color: '#dd524c',
388-
textShadow: '1.5px 0 #dd524c',
389-
letterSpacing: '0.5px',
390-
textDecoration: 'underline',
391-
textUnderlineOffset: '3.5px',
392-
textDecorationThickness: '0.6px',
393-
paddingBottom: '2px',
394-
fontSize: 'x-large',
395-
fontWeight: 'bold'
396-
}}
397-
>
398-
Date of Expense{isLeadershipApproved ? '*' : ''}
399-
</FormLabel>
400-
<Tooltip
401-
title="Reimbursements with Different Purchase Dates Should be on Different Requests. Leave Empty for Not Yet Purchased Items"
402-
placement="right"
403-
>
404-
<HelpIcon style={{ fontSize: 'medium', marginLeft: '5px' }} />
405-
</Tooltip>
406-
</Box>
407-
<Controller
408-
name="dateOfExpense"
409-
control={control}
410-
render={({ field: { onChange, value } }) => (
411-
<DatePicker
381+
{/* Account Code */}
382+
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
383+
<FormLabel
384+
sx={{
385+
color: '#dd524c',
386+
textShadow: '1.5px 0 #dd524c',
387+
letterSpacing: '0.5px',
388+
textDecoration: 'underline',
389+
textUnderlineOffset: '3.5px',
390+
textDecorationThickness: '0.6px',
391+
paddingBottom: '2px',
392+
fontSize: 'x-large',
393+
fontWeight: 'bold'
394+
}}
395+
>
396+
Account Code*
397+
</FormLabel>
398+
<Controller
399+
name="accountCodeId"
400+
control={control}
401+
render={({ field: { onChange, value } }) => {
402+
const mappedAccountCodes = allAccountCodes
403+
.filter((accountCode) => accountCode.allowed)
404+
.map(accountCodesToAutocomplete);
405+
return (
406+
<Select
412407
value={value}
413-
open={datePickerOpen}
414-
onClose={() => setDatePickerOpen(false)}
415-
onOpen={() => setDatePickerOpen(true)}
416-
onChange={(newValue) => {
417-
onChange(newValue ?? new Date());
408+
onChange={(e) => {
409+
onChange(e.target.value);
418410
}}
419-
slotProps={{
420-
textField: {
421-
error: !!errors.dateOfExpense,
422-
helperText: errors.dateOfExpense?.message,
423-
variant: 'outlined',
424-
fullWidth: true,
425-
size: 'small',
426-
InputProps: {
427-
onClick: (e) => {
428-
const target = e.target as HTMLElement;
429-
if (target.closest('button')) {
430-
setDatePickerOpen(true);
431-
}
432-
}
433-
}
411+
displayEmpty
412+
variant="outlined"
413+
fullWidth
414+
size="small"
415+
IconComponent={KeyboardArrowDownIcon}
416+
renderValue={(selected) => {
417+
if (!selected) {
418+
return <Typography style={{ color: 'gray' }}>Select Account Code</Typography>;
434419
}
420+
return mappedAccountCodes.find((accountCode) => accountCode.id === selected)?.label;
435421
}}
436-
/>
437-
)}
438-
/>
439-
</FormControl>
440-
)}
422+
>
423+
{mappedAccountCodes.map((accountCode) => (
424+
<MenuItem key={accountCode.id} value={accountCode.id}>
425+
{accountCode.label}
426+
</MenuItem>
427+
))}
428+
</Select>
429+
);
430+
}}
431+
/>
432+
<FormHelperText error>{errors.accountCodeId?.message}</FormHelperText>
433+
</FormControl>
441434

442435
{/* Refund Sources */}
443436
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
@@ -627,8 +620,69 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
627620

628621
{/* Right Column */}
629622
<Grid item xs={12} md={6}>
630-
<Stack spacing={3}>
631-
{/* Account Code */}
623+
<Stack spacing={2}>
624+
{/* Date of Expense */}
625+
{(isHead(user.role) || (isEditing && isLeadershipApproved)) && (
626+
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
627+
<Box style={{ display: 'flex', verticalAlign: 'middle', alignItems: 'center' }}>
628+
<FormLabel
629+
sx={{
630+
color: '#dd524c',
631+
textShadow: '1.5px 0 #dd524c',
632+
letterSpacing: '0.5px',
633+
textDecoration: 'underline',
634+
textUnderlineOffset: '3.5px',
635+
textDecorationThickness: '0.6px',
636+
paddingBottom: '2px',
637+
fontSize: 'x-large',
638+
fontWeight: 'bold'
639+
}}
640+
>
641+
Date of Expense{isLeadershipApproved ? '*' : ''}
642+
</FormLabel>
643+
<Tooltip
644+
title="Reimbursements with Different Purchase Dates Should be on Different Requests. Leave Empty for Not Yet Purchased Items"
645+
placement="right"
646+
>
647+
<HelpIcon style={{ fontSize: 'medium', marginLeft: '5px' }} />
648+
</Tooltip>
649+
</Box>
650+
<Controller
651+
name="dateOfExpense"
652+
control={control}
653+
render={({ field: { onChange, value } }) => (
654+
<DatePicker
655+
value={value}
656+
open={datePickerOpen}
657+
onClose={() => setDatePickerOpen(false)}
658+
onOpen={() => setDatePickerOpen(true)}
659+
onChange={(newValue) => {
660+
onChange(newValue ?? new Date());
661+
}}
662+
slotProps={{
663+
textField: {
664+
error: !!errors.dateOfExpense,
665+
helperText: errors.dateOfExpense?.message,
666+
variant: 'outlined',
667+
fullWidth: true,
668+
size: 'small',
669+
InputProps: {
670+
onClick: (e) => {
671+
const target = e.target as HTMLElement;
672+
if (target.closest('button')) {
673+
setDatePickerOpen(true);
674+
}
675+
}
676+
}
677+
}
678+
}}
679+
/>
680+
)}
681+
/>
682+
</FormControl>
683+
)}
684+
685+
{/* Description */}
632686
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
633687
<FormLabel
634688
sx={{
@@ -638,48 +692,25 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
638692
textDecoration: 'underline',
639693
textUnderlineOffset: '3.5px',
640694
textDecorationThickness: '0.6px',
641-
paddingBottom: '2px',
642695
fontSize: 'x-large',
643696
fontWeight: 'bold'
644697
}}
645698
>
646-
Account Code*
699+
Description
647700
</FormLabel>
648701
<Controller
649-
name="accountCodeId"
702+
name="description"
650703
control={control}
651-
render={({ field: { onChange, value } }) => {
652-
const mappedAccountCodes = allAccountCodes
653-
.filter((accountCode) => accountCode.allowed)
654-
.map(accountCodesToAutocomplete);
655-
return (
656-
<Select
657-
value={value}
658-
onChange={(e) => {
659-
onChange(e.target.value);
660-
}}
661-
displayEmpty
662-
variant="outlined"
663-
fullWidth
664-
size="small"
665-
IconComponent={KeyboardArrowDownIcon}
666-
renderValue={(selected) => {
667-
if (!selected) {
668-
return <Typography style={{ color: 'gray' }}>Select Account Code</Typography>;
669-
}
670-
return mappedAccountCodes.find((accountCode) => accountCode.id === selected)?.label;
671-
}}
672-
>
673-
{mappedAccountCodes.map((accountCode) => (
674-
<MenuItem key={accountCode.id} value={accountCode.id}>
675-
{accountCode.label}
676-
</MenuItem>
677-
))}
678-
</Select>
679-
);
680-
}}
704+
render={({ field: { onChange, value } }) => (
705+
<TextField
706+
value={value || ''}
707+
onChange={onChange}
708+
placeholder="Enter Description"
709+
multiline
710+
rows={3}
711+
/>
712+
)}
681713
/>
682-
<FormHelperText error>{errors.accountCodeId?.message}</FormHelperText>
683714
</FormControl>
684715

685716
{/* Upload Receipts */}
@@ -857,37 +888,6 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
857888
</Box>
858889
</Box>
859890
</FormControl>
860-
861-
{/* Description */}
862-
<FormControl sx={{ borderRadius: '25px', width: '100%' }}>
863-
<FormLabel
864-
sx={{
865-
color: '#dd524c',
866-
textShadow: '1.5px 0 #dd524c',
867-
letterSpacing: '0.5px',
868-
textDecoration: 'underline',
869-
textUnderlineOffset: '3.5px',
870-
textDecorationThickness: '0.6px',
871-
fontSize: 'x-large',
872-
fontWeight: 'bold'
873-
}}
874-
>
875-
Description
876-
</FormLabel>
877-
<Controller
878-
name="description"
879-
control={control}
880-
render={({ field: { onChange, value } }) => (
881-
<TextField
882-
value={value || ''}
883-
onChange={onChange}
884-
placeholder="Enter Description"
885-
multiline
886-
rows={3}
887-
/>
888-
)}
889-
/>
890-
</FormControl>
891891
</Stack>
892892
</Grid>
893893
</Grid>

0 commit comments

Comments
 (0)