Merge pull request #3962 from Northeastern-Electric-Racing/3776-maintenence---description-field-for-rr

3776 maintenence  Description field for rr

Author: chpy04

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

@@ -83,7 +83,8 @@ export default class ReimbursementRequestsController {
         otherReimbursementProducts,
         wbsReimbursementProducts,
         accountCodeId,
-        totalCost
+        totalCost,
+        description
       } = req.body;
       const user = await getCurrentUserWithUserSettings(res);
 
@@ -96,7 +97,8 @@ export default class ReimbursementRequestsController {
         accountCodeId,
         totalCost,
         req.organization,
-        dateOfExpense
+        dateOfExpense,
+        description
       );
       res.status(200).json(createdReimbursementRequest);
     } catch (error: unknown) {
@@ -130,7 +132,8 @@ export default class ReimbursementRequestsController {
         totalCost,
         otherReimbursementProducts,
         wbsReimbursementProducts,
-        receiptPictures
+        receiptPictures,
+        description
       } = req.body;
 
       const updatedReimbursementRequestId = await ReimbursementRequestService.editReimbursementRequest(
@@ -144,7 +147,8 @@ export default class ReimbursementRequestsController {
         receiptPictures,
         req.currentUser,
         req.organization,
-        dateOfExpense
+        dateOfExpense,
+        description
       );
       res.status(200).json(updatedReimbursementRequestId);
     } catch (error: unknown) {

src/backend/src/prisma/migrations/20260309041950_add_description_to_rr/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Reimbursement_Request" ADD COLUMN     "description" TEXT NOT NULL DEFAULT '';

src/backend/src/prisma/schema.prisma

@@ -723,6 +723,7 @@ model Reimbursement_Request {
   dateCreated              DateTime                        @default(now())
   dateDeleted              DateTime?
   dateOfExpense            DateTime?
+  description              String @default("")
   reimbursementStatuses    Reimbursement_Status[]
   recipientId              String
   recipient                User                            @relation(name: "reimbursementRequestRecipient", fields: [recipientId], references: [userId])

src/backend/src/prisma/seed-data/reimbursement-requests.seed.ts

@@ -97,7 +97,8 @@ export const seedReimbursementRequests = async (
     accountCodes.equipment.accountCodeId,
     3500,
     organization,
-    new Date('2024-10-01')
+    new Date('2024-10-01'),
+    'Reimbursement request for high performance battery pack'
   );
   reimbursementRequests.push(rr1);
 

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

@@ -226,6 +226,7 @@ export default class ReimbursementRequestService {
    * @param accountCodeId the id of the account code the user made
    * @param totalCost the total cost of the reimbursement with tax
    * @param organizationId the organization the user is currently in
+   * @param description the description of the reimbursement request
    * @returns the created reimbursement request
    */
   static async createReimbursementRequest(
@@ -237,7 +238,8 @@ export default class ReimbursementRequestService {
     acccountCodeId: string,
     totalCost: number,
     organization: Organization,
-    dateOfExpense?: Date
+    dateOfExpense?: Date,
+    description?: string
   ): Promise<ReimbursementRequest> {
     if (await userHasPermission(recipient.userId, organization.organizationId, isGuest))
       throw new AccessDeniedGuestException('create a reimbursement request');
@@ -278,7 +280,8 @@ export default class ReimbursementRequestService {
           }
         },
         identifier: numReimbursementRequests + 1,
-        organization: { connect: { organizationId: organization.organizationId } }
+        organization: { connect: { organizationId: organization.organizationId } },
+        description
       }
     });
 
@@ -356,6 +359,7 @@ export default class ReimbursementRequestService {
    * @param receiptPictures the old receipts that haven't been deleted (new receipts must be separately uploaded)
    * @param submitter the person editing the reimbursement request
    * @param organizationId the organization the user is currently in
+   * @param description the updated description of the reimbursement request
    * @returns the edited reimbursement request
    */
   static async editReimbursementRequest(
@@ -369,7 +373,8 @@ export default class ReimbursementRequestService {
     receiptPictures: ReimbursementReceiptCreateArgs[],
     submitter: User,
     organization: Organization,
-    dateOfExpense?: Date
+    dateOfExpense?: Date,
+    description?: string
   ): Promise<Reimbursement_Request> {
     const oldReimbursementRequest = await prisma.reimbursement_Request.findUnique({
       where: { reimbursementRequestId: requestId },
@@ -408,6 +413,7 @@ export default class ReimbursementRequestService {
       where: { reimbursementRequestId: oldReimbursementRequest.reimbursementRequestId },
       data: {
         dateOfExpense: dateOfExpense ?? null,
+        description,
         indexCodeId,
         totalCost,
         accountCodeId: accountCode.accountCodeId,
@@ -498,6 +504,7 @@ export default class ReimbursementRequestService {
    * @param reimbursementId The id of the reimbursement to be edited
    * @param editor The user editing the reimbursement
    * @param amount The new amount of the reimbursement
+   * @param description The new description of the reimbursement
    * @param dateCreated The new date the reimbursement was created
    * @param organizationId The organization the user is currently in
    * @returns The updated reimbursement

src/backend/src/transformers/reimbursement-requests.transformer.ts

@@ -51,6 +51,7 @@ export const reimbursementRequestTransformer = (
     saboId: reimbursementRequest.saboId ?? undefined,
     dateCreated: reimbursementRequest.dateCreated,
     dateOfExpense: reimbursementRequest.dateOfExpense ?? undefined,
+    description: reimbursementRequest.description,
     reimbursementStatuses: reimbursementRequest.reimbursementStatuses.map(reimbursementStatusTransformer),
     recipient: userTransformer(reimbursementRequest.recipient),
     vendor: vendorTransformer(reimbursementRequest.vendor),

src/frontend/src/pages/FinancePage/EditReimbursementRequest/EditReimbursementRequestRenderedDefaultValues.tsx

@@ -41,6 +41,7 @@ const EditReimbursementRequestRenderedDefaultValues: React.FC<{
           vendorId: reimbursementRequest.vendor.vendorId,
           indexCodeId: reimbursementRequest.indexCode.indexCodeId,
           dateOfExpense: reimbursementRequest.dateOfExpense ? new Date(reimbursementRequest.dateOfExpense) : undefined,
+          description: reimbursementRequest.description,
           accountCodeId: reimbursementRequest.accountCode.accountCodeId,
           reimbursementProducts: reimbursementRequest.reimbursementProducts.map((product) => ({
             id: product.reimbursementProductId,

src/frontend/src/pages/FinancePage/FinanceComponents/ReimbursementRequestInfo.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Tooltip, IconButton } from '@mui/material';
 import { useLocation, useHistory, useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { isGuest, ReimbursementRequest } from 'shared';
@@ -14,6 +14,7 @@ import SidePage from './SidePagePopup';
 import ReimbursementRequestDetails from '../ReimbursementRequestDetailPage/ReimbursementRequestDetails';
 import NERDataGrid, { MapRowResult } from '../../../components/NERDataGrid';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 interface ReimbursementRequestInfoProps {
   userReimbursementRequests: ReimbursementRequest[];
@@ -169,6 +170,28 @@ const ReimbursementRequestInfo = ({
         flex: 0.7,
         minWidth: 180,
         valueGetter: (params: any) => dateUndefinedPipe(params.row.dateSubmittedToSabo)
+      },
+      {
+        field: 'description',
+        headerName: 'Description',
+        flex: 0.7,
+        minWidth: 180,
+        valueGetter: (params: any) => params.row.description,
+        renderCell: (params: any) => {
+          const { description } = params.row;
+
+          if (!description || description.trim() === '') {
+            return null;
+          }
+
+          return (
+            <Tooltip title={description} arrow placement="left">
+              <IconButton size="small" sx={{ p: 0.5, color: 'white' }}>
+                <InfoOutlinedIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+          );
+        }
       }
     );
 
@@ -212,7 +235,8 @@ const ReimbursementRequestInfo = ({
         ('$' + centsToDollar((rowData as any).amount)).toLowerCase().includes(lowercase_query) ||
         ('' + (rowData as any).reimbursementProducts.map((product: any) => product.name))
           .toLowerCase()
-          .includes(lowercase_query)
+          .includes(lowercase_query) ||
+        ('' + (rowData as any).description).toLowerCase().includes(lowercase_query)
       );
     });
   };

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

@@ -19,6 +19,7 @@ import LocalAtmIcon from '@mui/icons-material/LocalAtm';
 import StoreIcon from '@mui/icons-material/Store';
 import SellIcon from '@mui/icons-material/Sell';
 import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange';
+import Description from '@mui/icons-material/Description';
 
 import { Typography, useTheme, Link, IconButton } from '@mui/material';
 import { Box } from '@mui/system';
@@ -435,7 +436,8 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
     { label: 'SABO Number', icon: <SellIcon fontSize="small" /> },
     { label: 'Refund Source', icon: <CurrencyExchangeIcon fontSize="small" /> },
     { label: 'Expense Type', icon: <CurrencyExchangeIcon fontSize="small" /> },
-    { label: 'Assigned To', icon: <PersonOutlineIcon fontSize="small" /> }
+    { label: 'Assigned To', icon: <PersonOutlineIcon fontSize="small" /> },
+    { label: 'Description', icon: <Description fontSize="small" /> }
   ];
 
   // grab all unique refund source names
@@ -470,7 +472,8 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
       content: refundSourceNames.join(', ')
     },
     { content: accountCodePipe(reimbursementRequest.accountCode) },
-    { content: fullNamePipe(reimbursementRequest.assignee) }
+    { content: fullNamePipe(reimbursementRequest.assignee) },
+    { content: reimbursementRequest.description }
   ];
 
   const { id } = useParams<{ id: string }>();

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

@@ -744,7 +744,26 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
 
                   {/* Receipt Previews */}
                   <Box sx={{ mt: 2 }}>
-                    <Grid container spacing={2}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        gap: 2,
+                        overflowX: 'auto',
+                        overflowY: 'hidden',
+                        maxHeight: '250px',
+                        paddingBottom: '10px',
+                        '&::-webkit-scrollbar': {
+                          height: '0.55rem' // Adjust the the thickness of the scrollbar
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                          backgroundColor: '#EF4345', //FinishLine 'red' color
+                          borderRadius: '50px' //make the scrollbar rounded
+                        },
+                        '&::-webkit-scrollbar-thumb:hover': {
+                          backgroundColor: '#b0191a' // Change to a darker shade of red on hover
+                        }
+                      }}
+                    >
                       {receiptFiles.map((receiptFile, index) => {
                         let previewUrl = '';
                         // if file is newly uploaded, show local preview, else show google drive preview
@@ -755,7 +774,7 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                         }
 
                         return (
-                          <Grid item xs={6} key={index}>
+                          <Grid item xs={6} key={index} sx={{ minWidth: '250px' }}>
                             <Stack
                               direction="column"
                               spacing={1}
@@ -835,9 +854,40 @@ const ReimbursementRequestFormView: React.FC<ReimbursementRequestFormViewProps>
                           </Grid>
                         );
                       })}
-                    </Grid>
+                    </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>