diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
index 5cbe8c5ea6..ded62d1fb4 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
@@ -34,9 +34,11 @@ import { ReimbursementRequestFormInput } from './ReimbursementRequestForm';
import { useTheme } from '@mui/system';
import { useEffect, useState, useRef } from 'react';
import { useGetAllOtherProductReason } from '../../../hooks/finance.hooks';
+import { useGetMaterialsForWbsElement } from '../../../hooks/bom.hooks';
import LoadingIndicator from '../../../components/LoadingIndicator';
import ErrorPage from '../../ErrorPage';
import { formatReasonName } from '../../../utils/reimbursement-request.utils';
+import { Material } from 'shared';
interface ReimbursementProductTableProps {
reimbursementProducts: ReimbursementProductFormArgs[];
@@ -62,6 +64,46 @@ const ListItem = styled('li')(({ theme }) => ({
margin: theme.spacing(0.5)
}));
+const MaterialAutocomplete: React.FC<{
+ wbsNum: WbsNumber;
+ onSelect: (material: Material) => void;
+}> = ({ wbsNum, onSelect }) => {
+ const { data: materials, isLoading, isError, error } = useGetMaterialsForWbsElement(wbsNum);
+
+ if (isLoading) {
+ return ;
+ }
+
+ if (isError) {
+ return ;
+ }
+
+ const materialOptions = (materials || []).map((material) => ({
+ id: material.materialId,
+ label: `${material.name}: ${material.materialTypeName}, ${material.manufacturerName}`
+ }));
+
+ return (
+ option.label}
+ onChange={(_, value) => {
+ if (value) {
+ const selectedMaterial = materials?.find((m) => m.materialId === value.id);
+ if (selectedMaterial) {
+ onSelect(selectedMaterial);
+ }
+ }
+ }}
+ value={null}
+ blurOnSelect={true}
+ size={'small'}
+ renderInput={(params) => }
+ />
+ );
+};
+
const ReimbursementProductTable: React.FC = ({
reimbursementProducts,
removeProduct,
@@ -417,197 +459,242 @@ const ReimbursementProductTable: React.FC = ({
)}
- {uniqueWbsElementsWithProducts.get(key)?.map((product) => (
-
-
-
+ {uniqueWbsElementsWithProducts.get(key)?.map((product) => {
+ const currentName = watch(`reimbursementProducts.${product.index}.name`);
+ return (
+
+
-
- (
-
- )}
- />
-
- {errors.reimbursementProducts?.[product.index]?.name?.message}
-
-
-
- {!hasMultipleRefundSources && (
-
- (
- onCostBlurHandler(parseFloat(e.target.value), product.index)}
- error={!!errors.reimbursementProducts?.[product.index]?.cost}
- />
- )}
- />
-
- {errors.reimbursementProducts?.[product.index]?.cost?.message}
-
-
-
- )}
- {hasMultipleRefundSources && (
- <>
- {showFirstSourceFields && (
-
+ {'carNumber' in product.reason ? ( // if selected is a project
+ currentName ? (
- {firstRefundSourceName}
+ {currentName}
+ ) : (
- (
-
- onAmountBlurHandler(e.target.value, product.index, `refundSources.${0}.amount`)
- }
- error={
- !!errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount
- }
- />
- )}
+ {
+ const label = `${material.name}: ${material.materialTypeName}, ${material.manufacturerName}`;
+ setValue(`reimbursementProducts.${product.index}.name`, label);
+ }}
/>
- {errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount?.message}
+ {errors.reimbursementProducts?.[product.index]?.name?.message}
-
+ )
+ ) : (
+
+ (
+
+ )}
+ />
+
+ {errors.reimbursementProducts?.[product.index]?.name?.message}
+
+
)}
- {showSecondSourceFields && (
-
+
+ {!hasMultipleRefundSources && (
+
+
+ (
+ onCostBlurHandler(parseFloat(e.target.value), product.index)}
+ error={!!errors.reimbursementProducts?.[product.index]?.cost}
+ />
+ )}
+ />
+
+ {errors.reimbursementProducts?.[product.index]?.cost?.message}
+
+
+
+ )}
+ {hasMultipleRefundSources && (
+ <>
+ {showFirstSourceFields && (
- {secondRefundSourceName}
+
+ {firstRefundSourceName}
+
+
+ (
+
+ onAmountBlurHandler(
+ e.target.value,
+ product.index,
+ `refundSources.${0}.amount`
+ )
+ }
+ error={
+ !!errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount
+ }
+ />
+ )}
+ />
+
+ {
+ errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount
+ ?.message
+ }
+
+
-
- (
-
- onAmountBlurHandler(e.target.value, product.index, `refundSources.${1}.amount`)
- }
- error={
- !!errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount
- }
- />
- )}
- />
-
- {errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount?.message}
-
-
-
- )}
-
-
- )}
+ )}
+ {showSecondSourceFields && (
+
+
+ {secondRefundSourceName}
+
+
+ (
+
+ onAmountBlurHandler(
+ e.target.value,
+ product.index,
+ `refundSources.${1}.amount`
+ )
+ }
+ error={
+ !!errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount
+ }
+ />
+ )}
+ />
+
+ {
+ errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount
+ ?.message
+ }
+
+
+
+ )}
+
+
+ )}
+
+ removeProduct(product.index)}
+ >
+
+
- removeProduct(product.index)}
- >
-
-
-
-
- ))}
+
+ );
+ })}