Merge pull request #1419 from Northeastern-Electric-Racing/1292-finance-fixes-expense-types-should-be-displayed-with-their-code

1292 finance fixes expense types should be displayed with their code

Author: RChandler234

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementRequestDetailsView.tsx

@@ -3,6 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
+import { expenseTypePipe } from '../../../utils/pipes';
 import { Edit } from '@mui/icons-material';
 import CheckIcon from '@mui/icons-material/Check';
 import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
@@ -118,7 +119,7 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
             <VerticalDetailDisplay label="Refund Source" content={`${reimbursementRequest.account}`} />
           </Grid>
           <Grid item sm={6} xs={12}>
-            <VerticalDetailDisplay label="Expense Type" content={`${reimbursementRequest.expenseType.name}`} />
+            <VerticalDetailDisplay label="Expense Type" content={expenseTypePipe(reimbursementRequest.expenseType)} />
           </Grid>
           <Grid item sm={6} xs={12}>
             <VerticalDetailDisplay label="Date Delivered" content={dateUndefinedPipe(reimbursementRequest.dateDelivered)} />

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

@@ -29,6 +29,7 @@ import NERSuccessButton from '../../../components/NERSuccessButton';
 import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
 import { useState } from 'react';
 import { useToast } from '../../../hooks/toasts.hooks';
+import { expenseTypePipe } from '../../../utils/pipes';
 
 interface ReimbursementRequestFormViewProps {
   allVendors: Vendor[];
@@ -195,7 +196,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                     >
                       {allExpenseTypes.map((expenseType) => (
                         <MenuItem key={expenseType.expenseTypeId} value={expenseType.expenseTypeId}>
-                          {expenseType.name}
+                          {expenseTypePipe(expenseType)}
                         </MenuItem>
                       ))}
                     </Select>

src/frontend/src/utils/pipes.ts

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { WbsNumber, User, wbsPipe, WbsElement } from 'shared';
+import { WbsNumber, User, wbsPipe, WbsElement, ExpenseType } from 'shared';
 
 /**
  * Pipes:
@@ -85,6 +85,10 @@ export const numberParamPipe = (param: string | null) => {
   }
 };
 
+export const expenseTypePipe = (expenseType: ExpenseType) => {
+  return `${expenseType.code} - ${expenseType.name}`;
+};
+
 /** Display timeline status in readable form
  *  E.G. VERY_BEHIND -> Very Behind
  */