Merge branch '#1610-Deny-Reimbursement-Request-Endpoint' of https://github.com/Northeastern-Electric-Racing/FinishLine into #1610-Deny-Reimbursement-Request-Endpoint

merge

Author: jessicayzhao

src/backend/src/services/reimbursement-requests.services.ts

@@ -704,7 +704,7 @@ export default class ReimbursementRequestService {
    * Adds a reimbursement status with type denied to the given reimbursement request
    *
    * @param reimbursementRequestId the id of the reimbursement request to deny
-   * @param submitter the user who is approving the reimbursement request
+   * @param submitter the user who is denying the reimbursement request
    * @returns the created reimbursment status
    */
   static async denyReimbursementRequest(reimbursementRequestId: string, submitter: User) {

src/frontend/src/components/VerticalDetailDisplay.tsx

@@ -16,16 +16,33 @@ interface VerticalDetailDisplayProps {
 const VerticalDetailDisplay: React.FC<VerticalDetailDisplayProps> = ({ label, content, boxStyle }) => {
   const theme = useTheme();
   const backgroundColor = theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[200];
+
   return (
     <Box
-      overflow={'hidden'}
+      overflow={'auto'}
       whiteSpace={'nowrap'}
-      sx={{ backgroundColor: backgroundColor, borderRadius: '10px', justifyContent: 'center', boxShadow: 1, ...boxStyle }}
+      bgcolor={backgroundColor}
+      borderRadius={'10px'}
+      justifyContent={'center'}
+      boxShadow={1}
+      sx={{
+        '&::-webkit-scrollbar': {
+          height: '0.55rem' // Adjust the the thickness of the scrollbar
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: '#EF4345', //FinishLine 'red' color
+          borderRadius: '10px' //make the scrollbar rounded
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: '#b0191a' // Change to a darker shade of red on hover
+        },
+        ...boxStyle
+      }}
     >
       <Typography textOverflow={'ellipsis'} textAlign={'center'} fontSize={50}>
         {content}
       </Typography>
-      <Typography textAlign={'center'} fontWeight={'bold'}>
+      <Typography textAlign={'center'} fontWeight={'bold'} marginBottom={'5px'}>
         {label}
       </Typography>
     </Box>

src/frontend/src/hooks/finance.hooks.ts

@@ -340,7 +340,7 @@ export const useSetSaboNumber = (reimbursementRequestId: string) => {
  */
 export const useEditAccountCode = (expenseTypeId: string) => {
   const queryClient = useQueryClient();
-  return useMutation<{ message: string }, Error, any>(
+  return useMutation<{ message: string }, Error, ExpenseTypePayload>(
     ['expense-types', 'edit'],
     async (accountCodeData: ExpenseTypePayload) => {
       const { data } = await editAccountCode(expenseTypeId, accountCodeData);
@@ -355,7 +355,7 @@ export const useEditAccountCode = (expenseTypeId: string) => {
  */
 export const useCreateAccountCode = () => {
   const queryClient = useQueryClient();
-  return useMutation<{ message: string }, Error, any>(
+  return useMutation<{ message: string }, Error, ExpenseTypePayload>(
     ['expense-types', 'create'],
     async (accountCodeData: ExpenseTypePayload) => {
       const { data } = await createAccountCode(accountCodeData);
@@ -370,7 +370,7 @@ export const useCreateAccountCode = () => {
  */
 export const useCreateVendor = () => {
   const queryClient = useQueryClient();
-  return useMutation<{ message: string }, Error, any>(['vendors', 'create'], async (vendorData: { name: string }) => {
+  return useMutation<Vendor, Error, { name: string }>(['vendors', 'create'], async (vendorData: { name: string }) => {
     const { data } = await createVendor(vendorData);
     queryClient.invalidateQueries(['vendors']);
     return data;