From 8a6b34aadf0c782503a3c64375d44cd7941a3956 Mon Sep 17 00:00:00 2001
From: Anthony Basko <75228079+nunnyu@users.noreply.github.com>
Date: Mon, 9 Feb 2026 01:15:39 -0500
Subject: [PATCH 1/3] #3887: added dropdown for materials, and prints the
 material on select.

---
 .../ReimbursementProductTable.tsx             | 91 +++++++++++++++----
 1 file changed, 72 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
index 5cbe8c5ea6..7579bc3464 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,48 @@ 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 <LoadingIndicator />;
+  }
+
+  if (isError) {
+    return <ErrorPage message={error?.message || 'Failed to load materials'} />;
+  }
+
+  const materialOptions = (materials || []).map((material) => ({
+    id: material.materialId,
+    label: `${material.name}: ${material.materialTypeName}, ${material.manufacturerName}`
+  }));
+
+  return (
+    <Autocomplete
+      sx={{ flex: 1 }}
+      options={materialOptions}
+      getOptionLabel={(option) => 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) => (
+        <TextField {...params} variant="outlined" placeholder="Select Material" fullWidth />
+      )}
+    />
+  );
+};
+
 const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
   reimbursementProducts,
   removeProduct,
@@ -435,26 +479,35 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                                 minWidth: '80px',
                                 width: { xs: '100%', md: 'auto' }
                               }}
-                            >
-                              <FormControl fullWidth margin="dense" variant="outlined" size="small">
-                                <Controller
-                                  name={`reimbursementProducts.${product.index}.name`}
-                                  control={control}
-                                  render={({ field }) => (
-                                    <TextField
-                                      {...field}
-                                      variant="outlined"
-                                      placeholder={'Product Name/Description'}
-                                      autoComplete="off"
-                                      fullWidth
-                                      error={!!errors.reimbursementProducts?.[product.index]?.name}
-                                    />
-                                  )}
+                            > 
+                              {'carNumber' in product.reason ? ( // if selected is a project
+                                <MaterialAutocomplete
+                                  wbsNum={product.reason as WbsNumber}
+                                  onSelect={(material) => {
+                                    console.log(material);
+                                  }}
                                 />
-                                <FormHelperText error>
-                                  {errors.reimbursementProducts?.[product.index]?.name?.message}
-                                </FormHelperText>
-                              </FormControl>
+                              ) : (
+                                <FormControl fullWidth margin="dense" variant="outlined" size="small">
+                                  <Controller
+                                    name={`reimbursementProducts.${product.index}.name`}
+                                    control={control}
+                                    render={({ field }) => (
+                                      <TextField
+                                        {...field}
+                                        variant="outlined"
+                                        placeholder={'Product Name/Description'}
+                                        autoComplete="off"
+                                        fullWidth
+                                        error={!!errors.reimbursementProducts?.[product.index]?.name}
+                                      />
+                                    )}
+                                  />
+                                  <FormHelperText error>
+                                    {errors.reimbursementProducts?.[product.index]?.name?.message}
+                                  </FormHelperText>
+                                </FormControl>
+                              )}
                             </Box>
                             {!hasMultipleRefundSources && (
                               <Box

From 641fd9b7a603861051f273a85ee29165f910b72d Mon Sep 17 00:00:00 2001
From: Anthony Basko <75228079+nunnyu@users.noreply.github.com>
Date: Mon, 9 Feb 2026 03:15:42 -0500
Subject: [PATCH 2/3] #3887: selected material shows up when chosen on submit
 and in UI

---
 .../ReimbursementProductTable.tsx             | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
index 7579bc3464..85313c4073 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
@@ -461,7 +461,9 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                         </>
                       )}
                     </Box>
-                    {uniqueWbsElementsWithProducts.get(key)?.map((product) => (
+                    {uniqueWbsElementsWithProducts.get(key)?.map((product) => {
+                      const currentName = watch(`reimbursementProducts.${product.index}.name`);
+                      return (
                       <ListItem key={product.id}>
                         <Box sx={{ display: 'flex' }}>
                           <Box
@@ -479,14 +481,28 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                                 minWidth: '80px',
                                 width: { xs: '100%', md: 'auto' }
                               }}
-                            > 
+                            >
                               {'carNumber' in product.reason ? ( // if selected is a project
-                                <MaterialAutocomplete
-                                  wbsNum={product.reason as WbsNumber}
-                                  onSelect={(material) => {
-                                    console.log(material);
-                                  }}
-                                />
+                                currentName ? (
+                                  <Box
+                                    sx={{
+                                      border: '1px solid',
+                                      borderColor: 'divider',
+                                      borderRadius: 1,
+                                      p: 1
+                                    }}
+                                  >
+                                    <Typography variant="body2">{currentName}</Typography>
+                                  </Box>
+                                ) : (
+                                  <MaterialAutocomplete
+                                    wbsNum={product.reason as WbsNumber}
+                                    onSelect={(material) => {
+                                      const label = `${material.name}: ${material.materialTypeName}, ${material.manufacturerName}`;
+                                      setValue(`reimbursementProducts.${product.index}.name`, label);
+                                    }}
+                                  />
+                                )
                               ) : (
                                 <FormControl fullWidth margin="dense" variant="outlined" size="small">
                                   <Controller
@@ -660,7 +676,7 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                           </IconButton>
                         </Box>
                       </ListItem>
-                    ))}
+                    )})}
                   </Box>
                   <Button
                     sx={{

From 37142551e875a7894fca7ec4aaf5a89e169ab9b1 Mon Sep 17 00:00:00 2001
From: Anthony Basko <75228079+nunnyu@users.noreply.github.com>
Date: Mon, 16 Feb 2026 22:25:40 -0500
Subject: [PATCH 3/3] #3887: wrapped autocomplete in form

---
 .../ReimbursementProductTable.tsx             | 400 +++++++++---------
 .../ReimbursementRequestForm.tsx              |   2 +-
 2 files changed, 210 insertions(+), 192 deletions(-)

diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
index 85313c4073..ded62d1fb4 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx
@@ -99,9 +99,7 @@ const MaterialAutocomplete: React.FC<{
       value={null}
       blurOnSelect={true}
       size={'small'}
-      renderInput={(params) => (
-        <TextField {...params} variant="outlined" placeholder="Select Material" fullWidth />
-      )}
+      renderInput={(params) => <TextField {...params} variant="outlined" placeholder="Select Material" fullWidth />}
     />
   );
 };
@@ -464,219 +462,239 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                     {uniqueWbsElementsWithProducts.get(key)?.map((product) => {
                       const currentName = watch(`reimbursementProducts.${product.index}.name`);
                       return (
-                      <ListItem key={product.id}>
-                        <Box sx={{ display: 'flex' }}>
-                          <Box
-                            sx={{
-                              display: 'flex',
-                              width: '100%',
-                              alignItems: 'center',
-                              gap: { xs: '3px', sm: '12px' },
-                              flexDirection: { xs: 'column', md: 'row' }
-                            }}
-                          >
+                        <ListItem key={product.id}>
+                          <Box sx={{ display: 'flex' }}>
                             <Box
                               sx={{
-                                flex: hasMultipleRefundSources ? { xs: '1', md: '4' } : '7',
-                                minWidth: '80px',
-                                width: { xs: '100%', md: 'auto' }
+                                display: 'flex',
+                                width: '100%',
+                                alignItems: 'center',
+                                gap: { xs: '3px', sm: '12px' },
+                                flexDirection: { xs: 'column', md: 'row' }
                               }}
                             >
-                              {'carNumber' in product.reason ? ( // if selected is a project
-                                currentName ? (
-                                  <Box
-                                    sx={{
-                                      border: '1px solid',
-                                      borderColor: 'divider',
-                                      borderRadius: 1,
-                                      p: 1
-                                    }}
-                                  >
-                                    <Typography variant="body2">{currentName}</Typography>
-                                  </Box>
-                                ) : (
-                                  <MaterialAutocomplete
-                                    wbsNum={product.reason as WbsNumber}
-                                    onSelect={(material) => {
-                                      const label = `${material.name}: ${material.materialTypeName}, ${material.manufacturerName}`;
-                                      setValue(`reimbursementProducts.${product.index}.name`, label);
-                                    }}
-                                  />
-                                )
-                              ) : (
-                                <FormControl fullWidth margin="dense" variant="outlined" size="small">
-                                  <Controller
-                                    name={`reimbursementProducts.${product.index}.name`}
-                                    control={control}
-                                    render={({ field }) => (
-                                      <TextField
-                                        {...field}
-                                        variant="outlined"
-                                        placeholder={'Product Name/Description'}
-                                        autoComplete="off"
-                                        fullWidth
-                                        error={!!errors.reimbursementProducts?.[product.index]?.name}
-                                      />
-                                    )}
-                                  />
-                                  <FormHelperText error>
-                                    {errors.reimbursementProducts?.[product.index]?.name?.message}
-                                  </FormHelperText>
-                                </FormControl>
-                              )}
-                            </Box>
-                            {!hasMultipleRefundSources && (
                               <Box
                                 sx={{
-                                  flex: '1.5',
-                                  width: '100%'
+                                  flex: hasMultipleRefundSources ? { xs: '1', md: '4' } : '7',
+                                  minWidth: '80px',
+                                  width: { xs: '100%', md: 'auto' }
                                 }}
                               >
-                                <FormControl fullWidth margin="dense" variant="outlined" size="small">
-                                  <Controller
-                                    name={`reimbursementProducts.${product.index}.cost`}
-                                    control={control}
-                                    render={({ field }) => (
-                                      <TextField
-                                        {...field}
-                                        variant="outlined"
-                                        value={field.value === 0 ? '' : field.value}
-                                        placeholder={'$ Cost'}
-                                        type="number"
-                                        fullWidth
-                                        onBlur={(e) => onCostBlurHandler(parseFloat(e.target.value), product.index)}
-                                        error={!!errors.reimbursementProducts?.[product.index]?.cost}
-                                      />
-                                    )}
-                                  />
-                                  <FormHelperText error>
-                                    {errors.reimbursementProducts?.[product.index]?.cost?.message}
-                                  </FormHelperText>
-                                </FormControl>
-                              </Box>
-                            )}
-                            {hasMultipleRefundSources && (
-                              <>
-                                {showFirstSourceFields && (
-                                  <Box
-                                    sx={{
-                                      flex: '1.5',
-                                      width: '100%'
-                                    }}
-                                  >
+                                {'carNumber' in product.reason ? ( // if selected is a project
+                                  currentName ? (
                                     <Box
                                       sx={{
-                                        display: { xs: 'block', md: 'none' },
-                                        textAlign: 'left',
-                                        mb: 1,
-                                        color: '#dd524c',
-                                        textShadow: '0.5px 0 #dd524c',
-                                        letterSpacing: '0.5px'
+                                        border: '1px solid',
+                                        borderColor: 'divider',
+                                        borderRadius: 1,
+                                        p: 1
                                       }}
                                     >
-                                      <Typography>{firstRefundSourceName}</Typography>
+                                      <Typography variant="body2">{currentName}</Typography>
                                     </Box>
+                                  ) : (
                                     <FormControl fullWidth margin="dense" variant="outlined" size="small">
-                                      <Controller
-                                        name={`reimbursementProducts.${product.index}.refundSources.${0}.amount`}
-                                        control={control}
-                                        render={({ field }) => (
-                                          <TextField
-                                            {...field}
-                                            value={field.value === 0 ? '' : field.value}
-                                            disabled={firstRefundSourceIndexCode === undefined}
-                                            variant="outlined"
-                                            placeholder={'$ Amt'}
-                                            type="number"
-                                            fullWidth
-                                            onBlur={(e) =>
-                                              onAmountBlurHandler(e.target.value, product.index, `refundSources.${0}.amount`)
-                                            }
-                                            error={
-                                              !!errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount
-                                            }
-                                          />
-                                        )}
+                                      <MaterialAutocomplete
+                                        wbsNum={product.reason as WbsNumber}
+                                        onSelect={(material) => {
+                                          const label = `${material.name}: ${material.materialTypeName}, ${material.manufacturerName}`;
+                                          setValue(`reimbursementProducts.${product.index}.name`, label);
+                                        }}
                                       />
                                       <FormHelperText error>
-                                        {errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount?.message}
+                                        {errors.reimbursementProducts?.[product.index]?.name?.message}
                                       </FormHelperText>
                                     </FormControl>
-                                  </Box>
+                                  )
+                                ) : (
+                                  <FormControl fullWidth margin="dense" variant="outlined" size="small">
+                                    <Controller
+                                      name={`reimbursementProducts.${product.index}.name`}
+                                      control={control}
+                                      render={({ field }) => (
+                                        <TextField
+                                          {...field}
+                                          variant="outlined"
+                                          placeholder={'Product Name/Description'}
+                                          autoComplete="off"
+                                          fullWidth
+                                          error={!!errors.reimbursementProducts?.[product.index]?.name}
+                                        />
+                                      )}
+                                    />
+                                    <FormHelperText error>
+                                      {errors.reimbursementProducts?.[product.index]?.name?.message}
+                                    </FormHelperText>
+                                  </FormControl>
                                 )}
-                                {showSecondSourceFields && (
-                                  <Box
-                                    sx={{
-                                      flex: '1.5',
-                                      width: '100%'
-                                    }}
-                                  >
+                              </Box>
+                              {!hasMultipleRefundSources && (
+                                <Box
+                                  sx={{
+                                    flex: '1.5',
+                                    width: '100%'
+                                  }}
+                                >
+                                  <FormControl fullWidth margin="dense" variant="outlined" size="small">
+                                    <Controller
+                                      name={`reimbursementProducts.${product.index}.cost`}
+                                      control={control}
+                                      render={({ field }) => (
+                                        <TextField
+                                          {...field}
+                                          variant="outlined"
+                                          value={field.value === 0 ? '' : field.value}
+                                          placeholder={'$ Cost'}
+                                          type="number"
+                                          fullWidth
+                                          onBlur={(e) => onCostBlurHandler(parseFloat(e.target.value), product.index)}
+                                          error={!!errors.reimbursementProducts?.[product.index]?.cost}
+                                        />
+                                      )}
+                                    />
+                                    <FormHelperText error>
+                                      {errors.reimbursementProducts?.[product.index]?.cost?.message}
+                                    </FormHelperText>
+                                  </FormControl>
+                                </Box>
+                              )}
+                              {hasMultipleRefundSources && (
+                                <>
+                                  {showFirstSourceFields && (
                                     <Box
                                       sx={{
-                                        display: { xs: 'block', md: 'none' },
-                                        textAlign: 'left',
-                                        mb: 1,
-                                        color: '#dd524c',
-                                        textShadow: '0.5px 0 #dd524c',
-                                        letterSpacing: '0.5px'
+                                        flex: '1.5',
+                                        width: '100%'
                                       }}
                                     >
-                                      <Typography>{secondRefundSourceName}</Typography>
+                                      <Box
+                                        sx={{
+                                          display: { xs: 'block', md: 'none' },
+                                          textAlign: 'left',
+                                          mb: 1,
+                                          color: '#dd524c',
+                                          textShadow: '0.5px 0 #dd524c',
+                                          letterSpacing: '0.5px'
+                                        }}
+                                      >
+                                        <Typography>{firstRefundSourceName}</Typography>
+                                      </Box>
+                                      <FormControl fullWidth margin="dense" variant="outlined" size="small">
+                                        <Controller
+                                          name={`reimbursementProducts.${product.index}.refundSources.${0}.amount`}
+                                          control={control}
+                                          render={({ field }) => (
+                                            <TextField
+                                              {...field}
+                                              value={field.value === 0 ? '' : field.value}
+                                              disabled={firstRefundSourceIndexCode === undefined}
+                                              variant="outlined"
+                                              placeholder={'$ Amt'}
+                                              type="number"
+                                              fullWidth
+                                              onBlur={(e) =>
+                                                onAmountBlurHandler(
+                                                  e.target.value,
+                                                  product.index,
+                                                  `refundSources.${0}.amount`
+                                                )
+                                              }
+                                              error={
+                                                !!errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount
+                                              }
+                                            />
+                                          )}
+                                        />
+                                        <FormHelperText error>
+                                          {
+                                            errors.reimbursementProducts?.[product.index]?.refundSources?.[0]?.amount
+                                              ?.message
+                                          }
+                                        </FormHelperText>
+                                      </FormControl>
                                     </Box>
-                                    <FormControl fullWidth margin="dense" variant="outlined" size="small">
-                                      <Controller
-                                        name={`reimbursementProducts.${product.index}.refundSources.${1}.amount`}
-                                        control={control}
-                                        render={({ field }) => (
-                                          <TextField
-                                            {...field}
-                                            value={field.value === 0 ? '' : field.value}
-                                            disabled={secondRefundSourceIndexCode === undefined}
-                                            variant="outlined"
-                                            placeholder={'$ Amt'}
-                                            type="number"
-                                            fullWidth
-                                            onBlur={(e) =>
-                                              onAmountBlurHandler(e.target.value, product.index, `refundSources.${1}.amount`)
-                                            }
-                                            error={
-                                              !!errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount
-                                            }
-                                          />
-                                        )}
-                                      />
-                                      <FormHelperText error>
-                                        {errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount?.message}
-                                      </FormHelperText>
-                                    </FormControl>
-                                  </Box>
-                                )}
-                                <Box
-                                  sx={{
-                                    display: { xs: 'block', md: 'none' },
-                                    width: '100%',
-                                    borderBottom: '1px solid rgb(81, 81, 81)',
-                                    my: 2
-                                  }}
-                                />
-                              </>
-                            )}
+                                  )}
+                                  {showSecondSourceFields && (
+                                    <Box
+                                      sx={{
+                                        flex: '1.5',
+                                        width: '100%'
+                                      }}
+                                    >
+                                      <Box
+                                        sx={{
+                                          display: { xs: 'block', md: 'none' },
+                                          textAlign: 'left',
+                                          mb: 1,
+                                          color: '#dd524c',
+                                          textShadow: '0.5px 0 #dd524c',
+                                          letterSpacing: '0.5px'
+                                        }}
+                                      >
+                                        <Typography>{secondRefundSourceName}</Typography>
+                                      </Box>
+                                      <FormControl fullWidth margin="dense" variant="outlined" size="small">
+                                        <Controller
+                                          name={`reimbursementProducts.${product.index}.refundSources.${1}.amount`}
+                                          control={control}
+                                          render={({ field }) => (
+                                            <TextField
+                                              {...field}
+                                              value={field.value === 0 ? '' : field.value}
+                                              disabled={secondRefundSourceIndexCode === undefined}
+                                              variant="outlined"
+                                              placeholder={'$ Amt'}
+                                              type="number"
+                                              fullWidth
+                                              onBlur={(e) =>
+                                                onAmountBlurHandler(
+                                                  e.target.value,
+                                                  product.index,
+                                                  `refundSources.${1}.amount`
+                                                )
+                                              }
+                                              error={
+                                                !!errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount
+                                              }
+                                            />
+                                          )}
+                                        />
+                                        <FormHelperText error>
+                                          {
+                                            errors.reimbursementProducts?.[product.index]?.refundSources?.[1]?.amount
+                                              ?.message
+                                          }
+                                        </FormHelperText>
+                                      </FormControl>
+                                    </Box>
+                                  )}
+                                  <Box
+                                    sx={{
+                                      display: { xs: 'block', md: 'none' },
+                                      width: '100%',
+                                      borderBottom: '1px solid rgb(81, 81, 81)',
+                                      my: 2
+                                    }}
+                                  />
+                                </>
+                              )}
+                            </Box>
+                            <IconButton
+                              sx={{
+                                alignSelf: { xs: 'flex-start', md: 'center' },
+                                marginTop: { xs: '10px', md: '1px' },
+                                '&:hover': {
+                                  backgroundColor: hoverColor
+                                }
+                              }}
+                              onClick={() => removeProduct(product.index)}
+                            >
+                              <RemoveCircleOutline />
+                            </IconButton>
                           </Box>
-                          <IconButton
-                            sx={{
-                              alignSelf: { xs: 'flex-start', md: 'center' },
-                              marginTop: { xs: '10px', md: '1px' },
-                              '&:hover': {
-                                backgroundColor: hoverColor
-                              }
-                            }}
-                            onClick={() => removeProduct(product.index)}
-                          >
-                            <RemoveCircleOutline />
-                          </IconButton>
-                        </Box>
-                      </ListItem>
-                    )})}
+                        </ListItem>
+                      );
+                    })}
                   </Box>
                   <Button
                     sx={{
diff --git a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx
index 3e046a84af..13ed3dd0fe 100644
--- a/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx
+++ b/src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementRequestForm.tsx
@@ -100,7 +100,7 @@ const schema = yup.object().shape({
     .array()
     .of(
       yup.object().shape({
-        name: yup.string().required('Description is required'),
+        name: yup.string().required('Material / Description is required'),
         reason: yup.mixed().required(),
         refundSources: yup.array().of(
           yup.object({