#3893: added create RR button for materials wout linked RR

Author: Samuel Shrestha

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

@@ -2,14 +2,23 @@
  * 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 { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
+import { WbsNumber, CreateRefundSourceArgs, ReimbursementReceiptUploadArgs } from 'shared';
+import { ReimbursementRequestFormInput } from './ReimbursementRequestForm/ReimbursementRequestForm';
 import PageLayout from '../../components/PageLayout';
 import { useCreateReimbursementRequest, useUploadManyReceipts } from '../../hooks/finance.hooks';
 import { routes } from '../../utils/routes';
 import ReimbursementRequestForm, {
   ReimbursementRequestDataSubmission
 } from './ReimbursementRequestForm/ReimbursementRequestForm';
 
+type CreateRRPrefillState = {
+  projectWbsNum: WbsNumber;
+  materialId: string;
+  materialName: string;
+  prefillCost?: number;
+};
+
 const CreateReimbursementRequestPage: React.FC = () => {
   const { isLoading: createReimbursementRequestIsLoading, mutateAsync: createReimbursementRequest } =
     useCreateReimbursementRequest();
@@ -31,6 +40,31 @@ const CreateReimbursementRequestPage: React.FC = () => {
 
   const isSubmitting = createReimbursementRequestIsLoading || receiptsIsLoading;
 
+  // for pre-filling the form when user clicks "Create Reimbursement Request" from a material in the BOM table
+  const location = useLocation<CreateRRPrefillState | undefined>();
+  const prefill = location.state;
+
+  const defaultValues: ReimbursementRequestFormInput | undefined =
+    prefill?.projectWbsNum && prefill?.materialId
+      ? {
+          vendorId: '',
+          dateOfExpense: undefined,
+          accountCodeId: '',
+          indexCodeId: '',
+          secondaryAccount: undefined,
+          receiptFiles: [] as ReimbursementReceiptUploadArgs[],
+          reimbursementProducts: [
+            {
+              name: prefill.materialName,
+              materialId: prefill.materialId,
+              reason: prefill.projectWbsNum,
+              cost: prefill.prefillCost ?? 0,
+              refundSources: [] as CreateRefundSourceArgs[]
+            }
+          ]
+        }
+      : undefined;
+
   return (
     <PageLayout
       title="Create Reimbursement Request"
@@ -41,9 +75,10 @@ const CreateReimbursementRequestPage: React.FC = () => {
         submitText="Submit"
         submitData={onSubmit}
         isSubmitting={isSubmitting}
+        defaultValues={defaultValues}
       />
     </PageLayout>
   );
 };
 
-export default CreateReimbursementRequestPage;
+export default CreateReimbursementRequestPage;

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx

@@ -11,7 +11,7 @@ import { useToast } from '../../../../hooks/toasts.hooks';
 import { useAssignMaterialToAssembly, useDeleteAssembly, useDeleteMaterial } from '../../../../hooks/bom.hooks';
 import LoadingIndicator from '../../../../components/LoadingIndicator';
 import EditMaterialModal from './MaterialForm/EditMaterialModal';
-import { Link, Typography } from '@mui/material';
+import { Button, Link, Typography } from '@mui/material';
 import { bomBaseColDef } from '../../../../utils/bom.utils';
 import NERModal from '../../../../components/NERModal';
 import { renderStatusBOM } from './BOMTableCustomCells';
@@ -217,11 +217,13 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       hide: hideColumn[0],
       renderCell: (params) => {
         const material = materials.find((m) => m.materialId === params.row.materialId);
-        const reimbursementRequest = material?.reimbursementRequest;
+        if (!material) return null;
 
-        if (!reimbursementRequest) return null;
-
-        return (
+        const reimbursementRequest = material.reimbursementRequest;
+        
+        // case 1 (if reimbursement request exists): link to the reimbursement request page
+        if (reimbursementRequest) {
+          return (
           <Link
             component={RouterLink}
             to={`${routes.REIMBURSEMENT_REQUESTS}/view/${reimbursementRequest.reimbursementRequestId}`}
@@ -231,6 +233,39 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
           >
             {reimbursementRequest.identifier}
           </Link>
+          );
+        }
+        
+        // case 2 (if reimbursement request does not exist): link to the create reimbursement request page with pre-filled info
+        const qty = material.quantity != null ? Number(material.quantity) : undefined;
+        const unitPrice = material.price != null ? Number(material.price) : undefined;
+
+        const prefillCost = qty != null && unitPrice != null ? qty * unitPrice : undefined;
+
+        return (
+          <Button
+            component={RouterLink}
+            to={{
+              pathname: routes.NEW_REIMBURSEMENT_REQUEST,
+              state: {
+                projectWbsNum: project.wbsNum,
+                materialId: material.materialId,
+                materialName: material.name,
+                prefillCost
+              }
+            }}
+            variant="contained"
+            size="small"
+            onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
+            sx={{
+              backgroundColor: '#dd514c',
+              textTransform: 'none',
+              fontWeight: 600,
+              '&:hover': { backgroundColor: '#c7443f' }
+            }}
+          >
+            Create RR
+          </Button>
         );
       }
     },