Merge pull request #3820 from Northeastern-Electric-Racing/rr-improvements

Misc. RR Improvements

Author: walker-sean

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

@@ -242,7 +242,7 @@ export default class ReimbursementRequestService {
     dateOfExpense?: Date
   ): Promise<ReimbursementRequest> {
     if (await userHasPermission(recipient.userId, organization.organizationId, isGuest))
-      throw new AccessDeniedGuestException('Guests cannot create a reimbursement request');
+      throw new AccessDeniedGuestException('create a reimbursement request');
 
     if (!recipient.userSecureSettings) throw new HttpException(500, 'User does not have their finance settings set up');
 

src/frontend/src/components/NERDataGrid.tsx

@@ -14,6 +14,7 @@ interface NERDataGridProps<T> {
   pageSizeDefault?: number;
   rowsPerPageOptions?: number[];
   onAdd: () => void;
+  addLabel?: string; // optional label for the add/create button (defaults to 'Add')
   onRowClick?: (item: T) => void;
   // optional simple search fields (keys of mapped row) or a custom filter function
   searchFields?: (keyof MapRowResult<T>)[];
@@ -33,6 +34,7 @@ function NERDataGrid<T>({
   pageSizeDefault = 10,
   rowsPerPageOptions,
   onAdd,
+  addLabel = 'Add',
   onRowClick,
   searchFields,
   searchFilter,
@@ -96,7 +98,7 @@ function NERDataGrid<T>({
             sx={{ flex: 1 }}
           />
           <Button variant="contained" size="small" onClick={onAdd} sx={{ ml: 1 }}>
-            Add
+            {addLabel}
           </Button>
         </Box>
 

src/frontend/src/pages/FinancePage/CreateReimbursementRequest.tsx

@@ -2,7 +2,7 @@
  * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
  * See the LICENSE file in the repository root folder for details.
  */
-import LoadingIndicator from '../../components/LoadingIndicator';
+import { useHistory } from 'react-router-dom';
 import PageLayout from '../../components/PageLayout';
 import { useCreateReimbursementRequest, useUploadManyReceipts } from '../../hooks/finance.hooks';
 import { routes } from '../../utils/routes';
@@ -14,8 +14,7 @@ const CreateReimbursementRequestPage: React.FC = () => {
   const { isLoading: createReimbursementRequestIsLoading, mutateAsync: createReimbursementRequest } =
     useCreateReimbursementRequest();
   const { isLoading: receiptsIsLoading, mutateAsync: uploadReceipts } = useUploadManyReceipts();
-
-  if (createReimbursementRequestIsLoading || receiptsIsLoading) return <LoadingIndicator />;
+  const history = useHistory();
 
   const onSubmit = async (data: ReimbursementRequestDataSubmission): Promise<string> => {
     const { reimbursementRequestId } = await createReimbursementRequest({ ...data, indexCodeId: data.indexCodeId! });
@@ -26,12 +25,23 @@ const CreateReimbursementRequestPage: React.FC = () => {
     return reimbursementRequestId;
   };
 
+  const onCancel = () => {
+    history.goBack();
+  };
+
+  const isSubmitting = createReimbursementRequestIsLoading || receiptsIsLoading;
+
   return (
     <PageLayout
       title="Create Reimbursement Request"
-      previousPages={[{ name: 'Reimbursement Requests', route: routes.FINANCE }]}
+      previousPages={[{ name: 'Reimbursement Requests', route: routes.REIMBURSEMENT_REQUESTS }]}
     >
-      <ReimbursementRequestForm submitText="Submit" submitData={onSubmit} />
+      <ReimbursementRequestForm
+        onFormExit={onCancel}
+        submitText="Submit"
+        submitData={onSubmit}
+        isSubmitting={isSubmitting}
+      />
     </PageLayout>
   );
 };

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

@@ -5,36 +5,92 @@
 import { ReimbursementRequestDataSubmission } from '../ReimbursementRequestForm/ReimbursementRequestForm';
 import {
   useEditReimbursementRequest,
+  useLeadershipApproveReimbursementRequest,
+  useMarkPendingFinance,
   useSingleReimbursementRequest,
   useUploadManyReceipts
 } from '../../../hooks/finance.hooks';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 import EditReimbursementRequestRenderedDefaultValues from './EditReimbursementRequestRenderedDefaultValues';
+import { useToast } from '../../../hooks/toasts.hooks';
+import { isHead } from 'shared';
+import { useCurrentUser } from '../../../hooks/users.hooks';
+import { isReimbursementRequestLeadershipApproved } from '../../../utils/reimbursement-request.utils';
 
-const EditReimbursementRequestPage: React.FC<{
-  onSubmitEditData: (data: ReimbursementRequestDataSubmission) => Promise<string>;
-  onExitEditPage: () => void;
-  onSubmitToFinance?: (data: ReimbursementRequestDataSubmission) => Promise<void>;
-}> = ({ onSubmitEditData, onExitEditPage, onSubmitToFinance }) => {
+const EditReimbursementRequestPage: React.FC<{}> = () => {
   const { id } = useParams<{ id: string }>();
+  const history = useHistory();
 
-  const { isLoading: editReimbursementRequestIsLoading } = useEditReimbursementRequest(id);
-  const { isLoading: uploadReceiptsIsLoading } = useUploadManyReceipts();
+  const { isLoading: editReimbursementRequestIsLoading, mutateAsync: editReimbursementRequest } =
+    useEditReimbursementRequest(id);
+  const { isLoading: uploadReceiptsIsLoading, mutateAsync: uploadReceipts } = useUploadManyReceipts();
   const { isLoading: getIsLoading, isError, error, data: reimbursementRequest } = useSingleReimbursementRequest(id);
+  const { mutateAsync: markPendingFinance } = useMarkPendingFinance(id);
+  const { mutateAsync: leadershipApproveReimbursementRequest } = useLeadershipApproveReimbursementRequest(id);
+  const user = useCurrentUser();
+  const toast = useToast();
 
   if (isError) return <ErrorPage error={error} />;
 
-  if (getIsLoading || editReimbursementRequestIsLoading || uploadReceiptsIsLoading || !reimbursementRequest)
-    return <LoadingIndicator />;
+  if (getIsLoading || !reimbursementRequest) return <LoadingIndicator />;
+
+  const isSubmitting = editReimbursementRequestIsLoading || uploadReceiptsIsLoading;
+
+  const onCancel = () => {
+    history.goBack();
+  };
+
+  const onSubmitEditData = async (data: ReimbursementRequestDataSubmission): Promise<string> => {
+    const filesToKeep = data.receiptFiles.filter((file) => file.googleFileId !== '');
+    try {
+      await editReimbursementRequest({ ...data, receiptPictures: filesToKeep, indexCodeId: data.indexCodeId! });
+      await uploadReceipts({
+        id: reimbursementRequest.reimbursementRequestId,
+        files: data.receiptFiles.filter((receipt) => receipt.googleFileId === '').map((file) => file.file!)
+      });
+      toast.success('Reimbursement request updated successfully.');
+      history.goBack();
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`Failed to update reimbursement request: ${error.message}`);
+      }
+    }
+
+    return reimbursementRequest.reimbursementRequestId;
+  };
+
+  const onSubmitToFinance = async (data: ReimbursementRequestDataSubmission) => {
+    const filesToKeep = data.receiptFiles.filter((file) => file.googleFileId !== '');
+    try {
+      await editReimbursementRequest({ ...data, receiptPictures: filesToKeep, indexCodeId: data.indexCodeId! });
+      await uploadReceipts({
+        id: reimbursementRequest.reimbursementRequestId,
+        files: data.receiptFiles.filter((receipt) => receipt.googleFileId === '').map((file) => file.file!)
+      });
+
+      if (isHead(user.role) && !isReimbursementRequestLeadershipApproved(reimbursementRequest)) {
+        await leadershipApproveReimbursementRequest();
+      }
+
+      await markPendingFinance();
+      toast.success('Reimbursement request submitted to Finance.');
+      history.goBack();
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`Failed to submit reimbursement request to Finance: ${error.message}`);
+      }
+    }
+  };
 
   return (
     <EditReimbursementRequestRenderedDefaultValues
       reimbursementRequest={reimbursementRequest}
       onSubmitData={onSubmitEditData}
-      onExitEditPage={onExitEditPage}
+      onExitEditPage={onCancel}
       onSubmitToFinance={onSubmitToFinance}
+      isSubmitting={isSubmitting}
     />
   );
 };

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

@@ -12,7 +12,8 @@ const EditReimbursementRequestRenderedDefaultValues: React.FC<{
   onSubmitData: (data: ReimbursementRequestDataSubmission) => Promise<string>;
   onExitEditPage: () => void;
   onSubmitToFinance?: (data: ReimbursementRequestDataSubmission) => Promise<void>;
-}> = ({ reimbursementRequest, onSubmitData, onExitEditPage, onSubmitToFinance }) => {
+  isSubmitting?: boolean;
+}> = ({ reimbursementRequest, onSubmitData, onExitEditPage, onSubmitToFinance, isSubmitting }) => {
   const previousPage = `${routes.REIMBURSEMENT_REQUESTS}/my-requests/${reimbursementRequest.reimbursementRequestId}`;
   const isLeadershipApproved = isReimbursementRequestLeadershipApproved(reimbursementRequest);
 
@@ -35,6 +36,7 @@ const EditReimbursementRequestRenderedDefaultValues: React.FC<{
         submitData={onSubmitData}
         isLeadershipApproved={isLeadershipApproved}
         onSubmitToFinance={onSubmitToFinance}
+        isSubmitting={isSubmitting}
         defaultValues={{
           vendorId: reimbursementRequest.vendor.vendorId,
           indexCodeId: reimbursementRequest.indexCode.indexCodeId,

src/frontend/src/pages/FinancePage/Finance.tsx

@@ -7,15 +7,17 @@ import { routes } from '../../utils/routes';
 import FinanceDashboard from './FinanceDashboard/FinanceDashboard';
 import ReimbursmentRequests from './ReimbursmentRequests';
 import CompaniesPage from './CompaniesPage';
+import CreateReimbursementRequestPage from './CreateReimbursementRequest';
+import EditReimbursementRequestPage from './EditReimbursementRequest/EditReimbursementRequest';
 
 // Redirect is used since the default display page for the table should be 'my-requests'.
 // It also allows the side page to stay highlighted for both tabs of the table
 // by directing to just 'reimbursement-requests' and having the redirect occur
 const Finance: React.FC = () => {
   return (
     <Switch>
-      <Route path={routes.REIMBURSEMENT_REQUEST_EDIT} component={ReimbursmentRequests} />
-      <Route path={routes.NEW_REIMBURSEMENT_REQUEST} component={ReimbursmentRequests} />
+      <Route path={routes.NEW_REIMBURSEMENT_REQUEST} component={CreateReimbursementRequestPage} />
+      <Route path={routes.REIMBURSEMENT_REQUEST_EDIT} component={EditReimbursementRequestPage} />
       <Route path={routes.REIMBURSEMENT_REQUEST_BY_ID} component={ReimbursmentRequests} />
       <Route path={routes.FINANCE_DASHBOARD} component={FinanceDashboard} />
       <Route