From 4d9e618b10249a2dd2f7253c79a95d1493d8d2a1 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Thu, 12 Feb 2026 01:30:09 -0500
Subject: [PATCH 01/15] 3881: added select material to copy modal

---
 .../BOM/MaterialForm/MaterialFormView.tsx     |  28 +-
 .../SelectMaterialToCopyModal.tsx             | 306 ++++++++++++++++++
 2 files changed, 333 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index 173258e005..6bb9b23b87 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -23,6 +23,7 @@ import { displayEnum } from '../../../../../utils/pipes';
 import { MaterialStatus } from 'shared';
 import React from 'react';
 import { AddCircle } from '@mui/icons-material';
+import SelectMaterialToCopyModal from './SelectMaterialToCopyModal';
 
 export interface MaterialFormViewProps {
   submitText: 'Add' | 'Edit';
@@ -72,6 +73,26 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
   const price = watch('price');
   const subtotal = quantity && price ? quantity * price : 0;
 
+  const [copyModalOpen, setCopyModalOpen] = React.useState(false);
+
+  const handleCopySelect = (m: any) => {
+    setValue('name', m.name ?? '');
+    setValue('status', m.status ?? MaterialStatus.Ordered);
+    setValue('materialTypeName', m.materialTypeName ?? '');
+    setValue('manufacturerName', m.manufacturerName ?? '');
+    setValue('manufacturerPartNumber', m.manufacturerPartNumber ?? '');
+    setValue('pdmFileName', m.pdmFileName ?? '');
+    setValue('linkUrl', m.linkUrl ?? '');
+    setValue('quantity', m.quantity ?? undefined);
+    setValue('unitName', m.unitName ?? undefined);
+    setValue('price', m.price ?? undefined);
+    setValue('notes', m.notes ?? '');
+    setValue('reimbursementRequestId', m.reimbursementRequest?.reimbursementRequestId ?? undefined);
+    setValue('assemblyId', undefined);
+
+    setCopyModalOpen(false);
+  };
+
   return (
     <NERFormModal
       open={open}
@@ -488,7 +509,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
             <Button
               variant="contained"
               disableElevation
-              onClick={() => {}}
+              onClick={() => setCopyModalOpen(true)}
               sx={{
                 mx: 0,
                 textTransform: 'none',
@@ -502,6 +523,11 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           </Box>
         </Grid>
       )}
+      <SelectMaterialToCopyModal
+        open={copyModalOpen}
+        onHide={() => setCopyModalOpen(false)}
+        onSelect={handleCopySelect}
+      />
     </NERFormModal>
   );
 };
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
new file mode 100644
index 0000000000..361b0a0778
--- /dev/null
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -0,0 +1,306 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, CircularProgress, Stack, Tab, Tabs, TextField, Typography } from '@mui/material';
+import { useForm } from 'react-hook-form';
+import { useQuery } from 'react-query';
+import { Car, Material, ProjectPreview, WbsNumber } from 'shared';
+
+import NERFormModal from '../../../../../components/NERFormModal';
+import NERAutocomplete from '../../../../../components/NERAutocomplete';
+
+import { useGetAllCars } from '../../../../../hooks/cars.hooks';
+import { useAllProjects } from '../../../../../hooks/projects.hooks';
+import { getMaterialsForWbsElement } from '../../../../../apis/bom.api';
+
+type AutocompleteOption = { label: string; id: string };
+
+interface SelectMaterialToCopyModalProps {
+  open: boolean;
+  onHide: () => void;
+  onSelect: (material: Material) => void;
+}
+
+type FormValues = Record<string, never>;
+
+const carToOption = (car: Car): AutocompleteOption => ({
+  label: String(car.wbsNum.carNumber),
+  id: car.wbsElementId
+});
+
+const projectToOption = (project: ProjectPreview): AutocompleteOption => ({
+  label: `${project.wbsNum.carNumber}.${project.wbsNum.projectNumber} - ${project.name}`,
+  id: project.wbsElementId
+});
+
+const materialToOption = (material: Material): AutocompleteOption => ({
+  label: [
+    material.name,
+    material.manufacturerName,
+    material.materialTypeName,
+    material.assemblyId ? `Assembly: ${material.assemblyId}` : undefined
+  ]
+    .filter(Boolean)
+    .join(' – '),
+  id: material.materialId
+});
+
+const projectToProjectWbs = (project: ProjectPreview): WbsNumber => ({
+  carNumber: project.wbsNum.carNumber,
+  projectNumber: project.wbsNum.projectNumber,
+  workPackageNumber: 0
+});
+
+const dedupeMaterials = (materials: Material[]): Material[] => {
+  const seen = new Set<string>();
+  const out: Material[] = [];
+  for (const m of materials) {
+    if (!seen.has(m.materialId)) {
+      seen.add(m.materialId);
+      out.push(m);
+    }
+  }
+  return out;
+};
+
+const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ open, onHide, onSelect }) => {
+  const { reset, handleSubmit } = useForm<FormValues>();
+
+  const [tab, setTab] = useState<'byProject' | 'search'>('byProject');
+
+  const [selectedCar, setSelectedCar] = useState<Car | null>(null);
+  const [selectedProject, setSelectedProject] = useState<ProjectPreview | null>(null);
+  const [selectedMaterial, setSelectedMaterial] = useState<Material | null>(null);
+
+  const [searchText, setSearchText] = useState<string>('');
+
+  const carsQuery = useGetAllCars();
+  const projectsQuery = useAllProjects();
+
+  const cars = carsQuery.data ?? [];
+  const projects = projectsQuery.data ?? [];
+
+  const projectsForSelectedCar = useMemo(() => {
+    if (!selectedCar) return [];
+    const carNumber = selectedCar.wbsNum.carNumber;
+    return projects.filter((p) => p.wbsNum.carNumber === carNumber);
+  }, [projects, selectedCar]);
+
+  const selectedProjectWbsNum = useMemo(() => {
+    if (!selectedProject) return null;
+    return projectToProjectWbs(selectedProject);
+  }, [selectedProject]);
+
+  const projectMaterialsQuery = useQuery<Material[], Error>(
+    ['materials', 'project', selectedProject?.wbsElementId ?? 'none'],
+    async () => {
+      if (!selectedProjectWbsNum) return [];
+      const { data } = await getMaterialsForWbsElement(selectedProjectWbsNum);
+      return data;
+    },
+    { enabled: !!selectedProjectWbsNum && open && tab === 'byProject' }
+  );
+
+  const carMaterialsQuery = useQuery<Material[], Error>(
+    ['materials', 'car', selectedCar?.wbsNum.carNumber ?? 'none'],
+    async () => {
+      if (!selectedCar) return [];
+      const carNumber = selectedCar.wbsNum.carNumber;
+
+      const projectsInCar = projects.filter((p) => p.wbsNum.carNumber === carNumber);
+      const results = await Promise.all(
+        projectsInCar.map(async (p) => {
+          const { data } = await getMaterialsForWbsElement(projectToProjectWbs(p));
+          return data;
+        })
+      );
+
+      return dedupeMaterials(results.flat());
+    },
+    { enabled: !!selectedCar && open && tab === 'search' }
+  );
+
+  const carOptions = useMemo(() => cars.map(carToOption), [cars]);
+  const projectOptions = useMemo(() => projectsForSelectedCar.map(projectToOption), [projectsForSelectedCar]);
+  
+
+  const projectMaterials = projectMaterialsQuery.data ?? [];
+  const carMaterials = carMaterialsQuery.data ?? [];
+
+  const projectMaterialOptions = useMemo(() => projectMaterials.map(materialToOption), [projectMaterials]);
+
+  const carSearchMaterialOptions = useMemo(() => {
+    const q = searchText.trim().toLowerCase();
+    const filtered = q.length === 0 ? carMaterials : carMaterials.filter((m) => m.name.toLowerCase().includes(q));
+    return filtered.map(materialToOption);
+  }, [carMaterials, searchText]);
+
+  useEffect(() => {
+    setSelectedProject(null);
+    setSelectedMaterial(null);
+    setSearchText('');
+  }, [selectedCar?.wbsElementId]);
+
+  useEffect(() => {
+    setSelectedMaterial(null);
+  }, [selectedProject?.wbsElementId]);
+
+  useEffect(() => {
+    if (!open) {
+      setTab('byProject');
+      setSelectedCar(null);
+      setSelectedProject(null);
+      setSelectedMaterial(null);
+      setSearchText('');
+      reset();
+    }
+  }, [open, reset]);
+
+  const anyLoading =
+    carsQuery.isLoading ||
+    projectsQuery.isLoading ||
+    (tab === 'byProject' ? projectMaterialsQuery.isLoading : false) ||
+    (tab === 'search' ? carMaterialsQuery.isLoading : false);
+
+  const anyError =
+    (carsQuery.error as Error | undefined) ||
+    (projectsQuery.error as Error | undefined) ||
+    projectMaterialsQuery.error ||
+    carMaterialsQuery.error ||
+    null;
+
+  const selectedCarOption = selectedCar ? carToOption(selectedCar) : null;
+  const selectedProjectOption = selectedProject ? projectToOption(selectedProject) : null;
+  const selectedMaterialOption = selectedMaterial ? materialToOption(selectedMaterial) : null;
+
+  const canSubmit = !!selectedMaterial;
+
+  const handleCopy = () => {
+    if (!selectedMaterial) return;
+    onSelect(selectedMaterial);
+    onHide();
+  };
+
+  return (
+    <NERFormModal
+      open={open}
+      onHide={onHide}
+      title="Select Material to Copy"
+      formId="select-material-to-copy-form"
+      reset={reset}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={handleCopy}
+      cancelText="Cancel"
+      disabled={!canSubmit}
+      showCloseButton
+    >
+      <Stack spacing={2} sx={{ p: 1 }}>
+        <Tabs
+          value={tab}
+          onChange={(_, v) => {
+            const next = v as 'byProject' | 'search';
+            setTab(next);
+            setSelectedMaterial(null);
+            setSearchText('');
+          }}
+        >
+          <Tab value="byProject" label="By Project" />
+          <Tab value="search" label="Search (by Car)" />
+        </Tabs>
+
+        {anyLoading && (
+          <Stack direction="row" spacing={1} alignItems="center">
+            <CircularProgress size={18} />
+            <Typography variant="body2">Loading…</Typography>
+          </Stack>
+        )}
+
+        {anyError && (
+          <Typography variant="body2" color="error">
+            {anyError.message}
+          </Typography>
+        )}
+
+        <NERAutocomplete
+          id="select-car"
+          size="medium"
+          placeholder="Select a car"
+          options={carOptions}
+          value={selectedCarOption}
+          onChange={(_, value) => {
+            const next = value ? cars.find((c) => c.wbsElementId === value.id) ?? null : null;
+            setSelectedCar(next);
+          }}
+          required={true}
+          disabled={carsQuery.isLoading}
+        />
+
+        {tab === 'byProject' && (
+          <>
+            <NERAutocomplete
+              id="select-project"
+              size="medium"
+              placeholder={selectedCar ? 'Select a project' : 'Select a car first'}
+              options={projectOptions}
+              value={selectedProjectOption}
+              onChange={(_, value) => {
+                const next = value ? projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null : null;
+                setSelectedProject(next);
+              }}
+              required={true}
+              disabled={!selectedCar || projectsQuery.isLoading}
+            />
+
+            <NERAutocomplete
+              id="select-material"
+              size="medium"
+              placeholder={selectedProject ? 'Select a material' : 'Select a project first'}
+              options={projectMaterialOptions}
+              value={selectedMaterialOption}
+              onChange={(_, value) => {
+                const next = value ? projectMaterials.find((m) => m.materialId === value.id) ?? null : null;
+                setSelectedMaterial(next);
+              }}
+              required={true}
+              disabled={!selectedProject || projectMaterialsQuery.isLoading}
+            />
+          </>
+        )}
+
+        {tab === 'search' && (
+          <>
+            <TextField
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
+              disabled={!selectedCar}
+              fullWidth
+            />
+
+            <Box>
+              <NERAutocomplete
+                id="search-material"
+                size="medium"
+                placeholder={selectedCar ? 'Select a material' : 'Select a car first'}
+                options={carSearchMaterialOptions}
+                value={selectedMaterialOption}
+                onChange={(_, value) => {
+                  const next = value ? carMaterials.find((m) => m.materialId === value.id) ?? null : null;
+                  setSelectedMaterial(next);
+                }}
+                required={true}
+                disabled={!selectedCar || carMaterialsQuery.isLoading}
+              />
+            </Box>
+          </>
+        )}
+
+        {!canSubmit && (
+          <Typography variant="caption" color="text.secondary">
+            Pick a material to enable “Select”.
+          </Typography>
+        )}
+      </Stack>
+    </NERFormModal>
+  );
+};
+
+export default SelectMaterialToCopyModal;

From 7932c66c8782cc1bdd8a3b60092ba5ef8f02eab7 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Wed, 18 Mar 2026 01:15:44 -0400
Subject: [PATCH 02/15] #3881: Create Selected Material to Copy Modal

---
 .../SelectMaterialToCopyModal.tsx             | 214 +++++++++---------
 src/frontend/src/utils/teams.utils.ts         |   4 +-
 2 files changed, 112 insertions(+), 106 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 361b0a0778..557a5206b8 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, CircularProgress, Stack, Tab, Tabs, TextField, Typography } from '@mui/material';
+import { Box, CircularProgress, Stack, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { useQuery } from 'react-query';
 import { Car, Material, ProjectPreview, WbsNumber } from 'shared';
@@ -13,6 +13,11 @@ import { getMaterialsForWbsElement } from '../../../../../apis/bom.api';
 
 type AutocompleteOption = { label: string; id: string };
 
+type SearchResult = {
+  material: Material;
+  project: ProjectPreview;
+};
+
 interface SelectMaterialToCopyModalProps {
   open: boolean;
   onHide: () => void;
@@ -43,33 +48,28 @@ const materialToOption = (material: Material): AutocompleteOption => ({
   id: material.materialId
 });
 
+const searchResultToOption = ({ material, project }: SearchResult): AutocompleteOption => ({
+  label: `${material.name} – ${project.wbsNum.carNumber}.${project.wbsNum.projectNumber} - ${project.name}`,
+  id: material.materialId
+});
+
 const projectToProjectWbs = (project: ProjectPreview): WbsNumber => ({
   carNumber: project.wbsNum.carNumber,
   projectNumber: project.wbsNum.projectNumber,
   workPackageNumber: 0
 });
 
-const dedupeMaterials = (materials: Material[]): Material[] => {
-  const seen = new Set<string>();
-  const out: Material[] = [];
-  for (const m of materials) {
-    if (!seen.has(m.materialId)) {
-      seen.add(m.materialId);
-      out.push(m);
-    }
-  }
-  return out;
+const getLatestCar = (cars: Car[]): Car | null => {
+  if (cars.length === 0) return null;
+  return [...cars].sort((a, b) => b.wbsNum.carNumber - a.wbsNum.carNumber)[0];
 };
 
 const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ open, onHide, onSelect }) => {
   const { reset, handleSubmit } = useForm<FormValues>();
 
-  const [tab, setTab] = useState<'byProject' | 'search'>('byProject');
-
   const [selectedCar, setSelectedCar] = useState<Car | null>(null);
   const [selectedProject, setSelectedProject] = useState<ProjectPreview | null>(null);
   const [selectedMaterial, setSelectedMaterial] = useState<Material | null>(null);
-
   const [searchText, setSearchText] = useState<string>('');
 
   const carsQuery = useGetAllCars();
@@ -78,6 +78,8 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   const cars = carsQuery.data ?? [];
   const projects = projectsQuery.data ?? [];
 
+  const latestCar = useMemo(() => getLatestCar(cars), [cars]);
+
   const projectsForSelectedCar = useMemo(() => {
     if (!selectedCar) return [];
     const carNumber = selectedCar.wbsNum.carNumber;
@@ -96,10 +98,10 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
       const { data } = await getMaterialsForWbsElement(selectedProjectWbsNum);
       return data;
     },
-    { enabled: !!selectedProjectWbsNum && open && tab === 'byProject' }
+    { enabled: !!selectedProjectWbsNum && open }
   );
 
-  const carMaterialsQuery = useQuery<Material[], Error>(
+  const carMaterialsQuery = useQuery<SearchResult[], Error>(
     ['materials', 'car', selectedCar?.wbsNum.carNumber ?? 'none'],
     async () => {
       if (!selectedCar) return [];
@@ -109,29 +111,49 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
       const results = await Promise.all(
         projectsInCar.map(async (p) => {
           const { data } = await getMaterialsForWbsElement(projectToProjectWbs(p));
-          return data;
+          return data.map((material) => ({
+            material,
+            project: p
+          }));
         })
       );
 
-      return dedupeMaterials(results.flat());
+      // (if I have two projects with the same name being searched, only show one)
+      const flattened = results.flat();
+      const seen = new Set<string>();
+
+      return flattened.filter(({ material, project }) => {
+        const key = `${material.name.toLowerCase()}-${project.name.toLowerCase()}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
     },
-    { enabled: !!selectedCar && open && tab === 'search' }
+    { enabled: !!selectedCar && open }
   );
 
-  const carOptions = useMemo(() => cars.map(carToOption), [cars]);
-  const projectOptions = useMemo(() => projectsForSelectedCar.map(projectToOption), [projectsForSelectedCar]);
-  
-
   const projectMaterials = projectMaterialsQuery.data ?? [];
-  const carMaterials = carMaterialsQuery.data ?? [];
+  const carSearchResults = carMaterialsQuery.data ?? [];
 
+  const carOptions = useMemo(() => cars.map(carToOption), [cars]);
+  const projectOptions = useMemo(() => projectsForSelectedCar.map(projectToOption), [projectsForSelectedCar]);
   const projectMaterialOptions = useMemo(() => projectMaterials.map(materialToOption), [projectMaterials]);
 
-  const carSearchMaterialOptions = useMemo(() => {
+  const searchOptions = useMemo(() => {
     const q = searchText.trim().toLowerCase();
-    const filtered = q.length === 0 ? carMaterials : carMaterials.filter((m) => m.name.toLowerCase().includes(q));
-    return filtered.map(materialToOption);
-  }, [carMaterials, searchText]);
+    const filtered =
+      q.length === 0
+        ? carSearchResults
+        : carSearchResults.filter(({ material }) => material.name.toLowerCase().includes(q));
+
+    return filtered.map(searchResultToOption);
+  }, [carSearchResults, searchText]);
+
+  useEffect(() => {
+    if (open && !selectedCar && latestCar) {
+      setSelectedCar(latestCar);
+    }
+  }, [open, selectedCar, latestCar]);
 
   useEffect(() => {
     setSelectedProject(null);
@@ -145,7 +167,6 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
 
   useEffect(() => {
     if (!open) {
-      setTab('byProject');
       setSelectedCar(null);
       setSelectedProject(null);
       setSelectedMaterial(null);
@@ -157,8 +178,8 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   const anyLoading =
     carsQuery.isLoading ||
     projectsQuery.isLoading ||
-    (tab === 'byProject' ? projectMaterialsQuery.isLoading : false) ||
-    (tab === 'search' ? carMaterialsQuery.isLoading : false);
+    projectMaterialsQuery.isLoading ||
+    carMaterialsQuery.isLoading;
 
   const anyError =
     (carsQuery.error as Error | undefined) ||
@@ -188,24 +209,12 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
       reset={reset}
       handleUseFormSubmit={handleSubmit}
       onFormSubmit={handleCopy}
+      submitText="Copy"
       cancelText="Cancel"
       disabled={!canSubmit}
       showCloseButton
     >
       <Stack spacing={2} sx={{ p: 1 }}>
-        <Tabs
-          value={tab}
-          onChange={(_, v) => {
-            const next = v as 'byProject' | 'search';
-            setTab(next);
-            setSelectedMaterial(null);
-            setSearchText('');
-          }}
-        >
-          <Tab value="byProject" label="By Project" />
-          <Tab value="search" label="Search (by Car)" />
-        </Tabs>
-
         {anyLoading && (
           <Stack direction="row" spacing={1} alignItems="center">
             <CircularProgress size={18} />
@@ -219,6 +228,35 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           </Typography>
         )}
 
+        <TextField
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
+          disabled={!selectedCar}
+          fullWidth
+        />
+
+        <Box>
+          <NERAutocomplete
+            id="search-material"
+            size="medium"
+            placeholder={selectedCar ? 'Search results' : 'Select a car first'}
+            options={searchOptions}
+            value={null}
+            onChange={(_, value) => {
+              if (!value) return;
+
+              const match = carSearchResults.find(({ material }) => material.materialId === value.id) ?? null;
+              if (!match) return;
+
+              setSelectedProject(match.project);
+              setSelectedMaterial(match.material);
+            }}
+            required={false}
+            disabled={!selectedCar || carMaterialsQuery.isLoading}
+          />
+        </Box>
+
         <NERAutocomplete
           id="select-car"
           size="medium"
@@ -233,69 +271,37 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           disabled={carsQuery.isLoading}
         />
 
-        {tab === 'byProject' && (
-          <>
-            <NERAutocomplete
-              id="select-project"
-              size="medium"
-              placeholder={selectedCar ? 'Select a project' : 'Select a car first'}
-              options={projectOptions}
-              value={selectedProjectOption}
-              onChange={(_, value) => {
-                const next = value ? projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null : null;
-                setSelectedProject(next);
-              }}
-              required={true}
-              disabled={!selectedCar || projectsQuery.isLoading}
-            />
-
-            <NERAutocomplete
-              id="select-material"
-              size="medium"
-              placeholder={selectedProject ? 'Select a material' : 'Select a project first'}
-              options={projectMaterialOptions}
-              value={selectedMaterialOption}
-              onChange={(_, value) => {
-                const next = value ? projectMaterials.find((m) => m.materialId === value.id) ?? null : null;
-                setSelectedMaterial(next);
-              }}
-              required={true}
-              disabled={!selectedProject || projectMaterialsQuery.isLoading}
-            />
-          </>
-        )}
+        <NERAutocomplete
+          id="select-project"
+          size="medium"
+          placeholder={selectedCar ? 'Select a project' : 'Select a car first'}
+          options={projectOptions}
+          value={selectedProjectOption}
+          onChange={(_, value) => {
+            const next = value ? projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null : null;
+            setSelectedProject(next);
+          }}
+          required={true}
+          disabled={!selectedCar || projectsQuery.isLoading}
+        />
 
-        {tab === 'search' && (
-          <>
-            <TextField
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
-              disabled={!selectedCar}
-              fullWidth
-            />
-
-            <Box>
-              <NERAutocomplete
-                id="search-material"
-                size="medium"
-                placeholder={selectedCar ? 'Select a material' : 'Select a car first'}
-                options={carSearchMaterialOptions}
-                value={selectedMaterialOption}
-                onChange={(_, value) => {
-                  const next = value ? carMaterials.find((m) => m.materialId === value.id) ?? null : null;
-                  setSelectedMaterial(next);
-                }}
-                required={true}
-                disabled={!selectedCar || carMaterialsQuery.isLoading}
-              />
-            </Box>
-          </>
-        )}
+        <NERAutocomplete
+          id="select-material"
+          size="medium"
+          placeholder={selectedProject ? 'Select a material' : 'Select a project first'}
+          options={projectMaterialOptions}
+          value={selectedMaterialOption}
+          onChange={(_, value) => {
+            const next = value ? projectMaterials.find((m) => m.materialId === value.id) ?? null : null;
+            setSelectedMaterial(next);
+          }}
+          required={true}
+          disabled={!selectedProject || projectMaterialsQuery.isLoading}
+        />
 
         {!canSubmit && (
           <Typography variant="caption" color="text.secondary">
-            Pick a material to enable “Select”.
+            Pick a material to enable “Copy”.
           </Typography>
         )}
       </Stack>
@@ -303,4 +309,4 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   );
 };
 
-export default SelectMaterialToCopyModal;
+export default SelectMaterialToCopyModal;
\ No newline at end of file
diff --git a/src/frontend/src/utils/teams.utils.ts b/src/frontend/src/utils/teams.utils.ts
index 01bb0c5262..91144c75ae 100644
--- a/src/frontend/src/utils/teams.utils.ts
+++ b/src/frontend/src/utils/teams.utils.ts
@@ -45,6 +45,6 @@ export type SubmitText =
   | 'Mark Submitted'
   | 'Create Change Request'
   | 'Update'
-  | 'Submit Vendor';
-
+  | 'Submit Vendor'
+  | 'Copy';
 export type CancelText = 'Cancel' | 'Delete' | 'Exit' | 'No';

From de9fffcd9733b84637f82dc6eb1513851d555bbe Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Wed, 18 Mar 2026 17:24:44 -0400
Subject: [PATCH 03/15] search bar + state/query timing issues

---
 .../SelectMaterialToCopyModal.tsx             | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 557a5206b8..4e2a272476 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, CircularProgress, Stack, TextField, Typography } from '@mui/material';
+import { Autocomplete, Box, CircularProgress, Stack, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { useQuery } from 'react-query';
 import { Car, Material, ProjectPreview, WbsNumber } from 'shared';
@@ -118,7 +118,6 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
         })
       );
 
-      // (if I have two projects with the same name being searched, only show one)
       const flattened = results.flat();
       const seen = new Set<string>();
 
@@ -213,6 +212,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
       cancelText="Cancel"
       disabled={!canSubmit}
       showCloseButton
+      paperProps={{ width: '500px', maxWidth: '95vw' }}
     >
       <Stack spacing={2} sx={{ p: 1 }}>
         {anyLoading && (
@@ -228,32 +228,45 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           </Typography>
         )}
 
-        <TextField
-          value={searchText}
-          onChange={(e) => setSearchText(e.target.value)}
-          placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
-          disabled={!selectedCar}
-          fullWidth
-        />
-
         <Box>
-          <NERAutocomplete
+          <Autocomplete
             id="search-material"
-            size="medium"
-            placeholder={selectedCar ? 'Search results' : 'Select a car first'}
             options={searchOptions}
             value={null}
-            onChange={(_, value) => {
+            getOptionLabel={(option) => option.label}
+            onInputChange={(_, value) => {
+              setSearchText(value);
+            }}
+            onChange={async (_, value) => {
               if (!value) return;
 
-              const match = carSearchResults.find(({ material }) => material.materialId === value.id) ?? null;
+              const match =
+                carSearchResults.find(({ material, project }) => {
+                  return (
+                    material.materialId === value.id &&
+                    `${material.name} – ${project.wbsNum.carNumber}.${project.wbsNum.projectNumber} - ${project.name}` ===
+                      value.label
+                  );
+                }) ?? null;
+
               if (!match) return;
 
               setSelectedProject(match.project);
-              setSelectedMaterial(match.material);
+              setSearchText(match.material.name);
+
+              const { data } = await getMaterialsForWbsElement(projectToProjectWbs(match.project));
+              const selected = data.find((m) => m.materialId === match.material.materialId) ?? null;
+
+              setSelectedMaterial(selected);
             }}
-            required={false}
             disabled={!selectedCar || carMaterialsQuery.isLoading}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
+                fullWidth
+              />
+            )}
           />
         </Box>
 

From 75400e4adac1f0a0cfc90d508b2348c4ce9f2226 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Wed, 18 Mar 2026 23:31:02 -0400
Subject: [PATCH 04/15] merge conflicts

---
 .../BOM/MaterialForm/MaterialFormView.tsx                 | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index 84b680af07..131b43433f 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -2,6 +2,7 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Button,
   FormControl,
   FormHelperText,
   FormLabel,
@@ -78,7 +79,6 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
   const price = watch('price');
   const subtotal = quantity && price ? quantity * price : 0;
 
-<<<<<<< HEAD
   const [copyModalOpen, setCopyModalOpen] = React.useState(false);
 
   const handleCopySelect = (m: any) => {
@@ -98,7 +98,6 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
 
     setCopyModalOpen(false);
   };
-=======
   const optionalFields = (
     <Grid container spacing={2}>
       <Grid item xs={12}>
@@ -379,7 +378,6 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
       </Grid>
     </Grid>
   );
->>>>>>> origin/feature/bom-improvement-pt2
 
   return (
     <NERFormModal
@@ -527,7 +525,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           )}
         </Grid>
       </Grid>
-      {/*submitText === 'Add' && (
+      {submitText === 'Add' && (
         <Grid item xs={12} sx={{ pl: 0, pr: 0 }}>
           <Box
             sx={{
@@ -550,7 +548,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
             </Button>
           </Box>
         </Grid>
-      )*/}
+      )}
     </NERFormModal>
   );
 };

From 4c73b17dfd82ad22ebce65be85321415c46e4343 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Wed, 18 Mar 2026 23:46:59 -0400
Subject: [PATCH 05/15] linting/prettier checks

---
 .../SelectMaterialToCopyModal.tsx             | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 4e2a272476..1276231835 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -82,7 +82,9 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
 
   const projectsForSelectedCar = useMemo(() => {
     if (!selectedCar) return [];
-    const carNumber = selectedCar.wbsNum.carNumber;
+    const {
+      wbsNum: { carNumber }
+    } = selectedCar;
     return projects.filter((p) => p.wbsNum.carNumber === carNumber);
   }, [projects, selectedCar]);
 
@@ -105,8 +107,9 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
     ['materials', 'car', selectedCar?.wbsNum.carNumber ?? 'none'],
     async () => {
       if (!selectedCar) return [];
-      const carNumber = selectedCar.wbsNum.carNumber;
-
+      const {
+        wbsNum: { carNumber }
+      } = selectedCar;
       const projectsInCar = projects.filter((p) => p.wbsNum.carNumber === carNumber);
       const results = await Promise.all(
         projectsInCar.map(async (p) => {
@@ -141,9 +144,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   const searchOptions = useMemo(() => {
     const q = searchText.trim().toLowerCase();
     const filtered =
-      q.length === 0
-        ? carSearchResults
-        : carSearchResults.filter(({ material }) => material.name.toLowerCase().includes(q));
+      q.length === 0 ? carSearchResults : carSearchResults.filter(({ material }) => material.name.toLowerCase().includes(q));
 
     return filtered.map(searchResultToOption);
   }, [carSearchResults, searchText]);
@@ -175,10 +176,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   }, [open, reset]);
 
   const anyLoading =
-    carsQuery.isLoading ||
-    projectsQuery.isLoading ||
-    projectMaterialsQuery.isLoading ||
-    carMaterialsQuery.isLoading;
+    carsQuery.isLoading || projectsQuery.isLoading || projectMaterialsQuery.isLoading || carMaterialsQuery.isLoading;
 
   const anyError =
     (carsQuery.error as Error | undefined) ||
@@ -277,7 +275,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           options={carOptions}
           value={selectedCarOption}
           onChange={(_, value) => {
-            const next = value ? cars.find((c) => c.wbsElementId === value.id) ?? null : null;
+            const next = value ? (cars.find((c) => c.wbsElementId === value.id) ?? null) : null;
             setSelectedCar(next);
           }}
           required={true}
@@ -291,7 +289,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           options={projectOptions}
           value={selectedProjectOption}
           onChange={(_, value) => {
-            const next = value ? projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null : null;
+            const next = value ? (projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null) : null;
             setSelectedProject(next);
           }}
           required={true}
@@ -305,7 +303,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           options={projectMaterialOptions}
           value={selectedMaterialOption}
           onChange={(_, value) => {
-            const next = value ? projectMaterials.find((m) => m.materialId === value.id) ?? null : null;
+            const next = value ? (projectMaterials.find((m) => m.materialId === value.id) ?? null) : null;
             setSelectedMaterial(next);
           }}
           required={true}
@@ -322,4 +320,4 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   );
 };
 
-export default SelectMaterialToCopyModal;
\ No newline at end of file
+export default SelectMaterialToCopyModal;

From e0b6ba6da3878b8b0223566d42a3ab084d6ad1dd Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Thu, 19 Mar 2026 00:11:33 -0400
Subject: [PATCH 06/15] lint issues

---
 .../ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index 131b43433f..7a5ffde584 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -93,7 +93,6 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
     setValue('unitName', m.unitName ?? undefined);
     setValue('price', m.price ?? undefined);
     setValue('notes', m.notes ?? '');
-    setValue('reimbursementRequestId', m.reimbursementRequest?.reimbursementRequestId ?? undefined);
     setValue('assemblyId', undefined);
 
     setCopyModalOpen(false);

From 7edfe314122259ffea735f0799d43e50d22a0ded Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Thu, 19 Mar 2026 01:31:54 -0400
Subject: [PATCH 07/15] merge conflicts resolved

---
 .../BOM/BOMTableWrapper.tsx                   | 21 ++++---------------
 .../BOM/MaterialForm/MaterialFormView.tsx     |  7 ++++++-
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
index 381d236a65..e8e4756aa3 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
@@ -11,8 +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 ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { Button, Link, Tooltip, 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';
@@ -298,22 +297,10 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       flex: 1.5,
       field: 'name',
       headerName: 'Name',
+      type: 'string',
       sortable: false,
       filterable: false,
-      hide: hideColumn[3],
-      renderCell: (params) => {
-        const material = materials.find((m) => m.materialId === params.row.materialId);
-        return (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            <Typography variant="body2">{params.value}</Typography>
-            {material?.isCopied && (
-              <Tooltip title="Copied from another BOM">
-                <ContentCopyIcon sx={{ fontSize: 14, color: 'warning.main' }} />
-              </Tooltip>
-            )}
-          </Box>
-        );
-      }
+      hide: hideColumn[3]
     },
     {
       ...bomBaseColDef,
@@ -427,4 +414,4 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
   );
 };
 
-export default BOMTableWrapper;
+export default BOMTableWrapper;
\ No newline at end of file
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index 7a5ffde584..b83b0f6226 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -91,7 +91,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
     setValue('linkUrl', m.linkUrl ?? '');
     setValue('quantity', m.quantity ?? undefined);
     setValue('unitName', m.unitName ?? undefined);
-    setValue('price', m.price ?? undefined);
+    setValue('price', m.price != null ? m.price / 100 : undefined);
     setValue('notes', m.notes ?? '');
     setValue('assemblyId', undefined);
 
@@ -548,6 +548,11 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           </Box>
         </Grid>
       )}
+      <SelectMaterialToCopyModal
+        open={copyModalOpen}
+        onHide={() => setCopyModalOpen(false)}
+        onSelect={handleCopySelect}
+      />
     </NERFormModal>
   );
 };

From 7f05c72f1af5ad7a92ff54f8481a6e05c588d16b Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Thu, 19 Mar 2026 01:40:04 -0400
Subject: [PATCH 08/15] more lint/prettier

---
 .../ProjectViewContainer/BOM/BOMTableWrapper.tsx          | 2 +-
 .../BOM/MaterialForm/MaterialFormView.tsx                 | 6 +-----
 .../BOM/MaterialForm/SelectMaterialToCopyModal.tsx        | 8 ++++----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
index e8e4756aa3..c9afa898dc 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
@@ -414,4 +414,4 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
   );
 };
 
-export default BOMTableWrapper;
\ No newline at end of file
+export default BOMTableWrapper;
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index b83b0f6226..bd1574bf09 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -548,11 +548,7 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           </Box>
         </Grid>
       )}
-      <SelectMaterialToCopyModal
-        open={copyModalOpen}
-        onHide={() => setCopyModalOpen(false)}
-        onSelect={handleCopySelect}
-      />
+      <SelectMaterialToCopyModal open={copyModalOpen} onHide={() => setCopyModalOpen(false)} onSelect={handleCopySelect} />
     </NERFormModal>
   );
 };
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 1276231835..0cefd1bda5 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -75,8 +75,8 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   const carsQuery = useGetAllCars();
   const projectsQuery = useAllProjects();
 
-  const cars = carsQuery.data ?? [];
-  const projects = projectsQuery.data ?? [];
+  const cars = useMemo(() => carsQuery.data ?? [], [carsQuery.data]);
+  const projects = useMemo(() => projectsQuery.data ?? [], [projectsQuery.data]);
 
   const latestCar = useMemo(() => getLatestCar(cars), [cars]);
 
@@ -134,8 +134,8 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
     { enabled: !!selectedCar && open }
   );
 
-  const projectMaterials = projectMaterialsQuery.data ?? [];
-  const carSearchResults = carMaterialsQuery.data ?? [];
+  const projectMaterials = useMemo(() => projectMaterialsQuery.data ?? [], [projectMaterialsQuery.data]);
+  const carSearchResults = useMemo(() => carMaterialsQuery.data ?? [], [carMaterialsQuery.data]);
 
   const carOptions = useMemo(() => cars.map(carToOption), [cars]);
   const projectOptions = useMemo(() => projectsForSelectedCar.map(projectToOption), [projectsForSelectedCar]);

From 650bcd0e76b68352c02d63d1952f75bc59fc1721 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Mon, 23 Mar 2026 15:29:12 -0400
Subject: [PATCH 09/15] material form fixes

---
 .../BOM/MaterialForm/MaterialForm.tsx            |  7 +++++--
 .../BOM/MaterialForm/MaterialFormView.tsx        | 16 ++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx
index a815c2983c..9311cd5e51 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx
@@ -29,7 +29,8 @@ const schema = yup.object().shape({
   linkUrl: yup.string().optional(),
   notes: yup.string().optional(),
   pdmFileName: yup.string().optional(),
-  assemblyId: yup.string().optional()
+  assemblyId: yup.string().optional(),
+  reimbursementRequestId: yup.string().optional()
 });
 
 export interface MaterialFormInput {
@@ -45,6 +46,7 @@ export interface MaterialFormInput {
   linkUrl?: string;
   notes?: string;
   assemblyId?: string;
+  reimbursementRequestId?: string;
 }
 
 export interface MaterialDataSubmission {
@@ -101,7 +103,8 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
       unitName: defaultValues?.unitName,
       linkUrl: defaultValues?.linkUrl ?? '',
       notes: defaultValues?.notes,
-      assemblyId: defaultValues?.assemblyId
+      assemblyId: defaultValues?.assemblyId,
+      reimbursementRequestId: defaultValues?.reimbursementRequestId
     },
     resolver: yupResolver(schema)
   });
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index bd1574bf09..58b9fa774f 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import { Box } from '@mui/system';
 import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue, UseFormWatch } from 'react-hook-form';
-import { Assembly, Manufacturer, MaterialType, Unit } from 'shared';
+import { Assembly, Manufacturer, Material, MaterialType, Unit } from 'shared';
 import ReactHookTextField from '../../../../../components/ReactHookTextField';
 import { MaterialFormInput } from './MaterialForm';
 import NERFormModal from '../../../../../components/NERFormModal';
@@ -44,7 +44,6 @@ export interface MaterialFormViewProps {
   watch: UseFormWatch<MaterialFormInput>;
   createManufacturer: (name: string) => void;
   setValue: UseFormSetValue<MaterialFormInput>;
-  copyFromExistingBomAction?: React.ReactNode;
   fromRRForm?: boolean;
 }
 
@@ -81,19 +80,19 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
 
   const [copyModalOpen, setCopyModalOpen] = React.useState(false);
 
-  const handleCopySelect = (m: any) => {
+  const handleCopySelect = (m: Material) => {
     setValue('name', m.name ?? '');
-    setValue('status', m.status ?? MaterialStatus.Ordered);
     setValue('materialTypeName', m.materialTypeName ?? '');
     setValue('manufacturerName', m.manufacturerName ?? '');
     setValue('manufacturerPartNumber', m.manufacturerPartNumber ?? '');
     setValue('pdmFileName', m.pdmFileName ?? '');
     setValue('linkUrl', m.linkUrl ?? '');
-    setValue('quantity', m.quantity ?? undefined);
+    setValue('quantity', m.quantity != null ? Number(m.quantity) : undefined);
     setValue('unitName', m.unitName ?? undefined);
     setValue('price', m.price != null ? m.price / 100 : undefined);
     setValue('notes', m.notes ?? '');
     setValue('assemblyId', undefined);
+    setValue('reimbursementRequestId', undefined);
 
     setCopyModalOpen(false);
   };
@@ -548,7 +547,12 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           </Box>
         </Grid>
       )}
-      <SelectMaterialToCopyModal open={copyModalOpen} onHide={() => setCopyModalOpen(false)} onSelect={handleCopySelect} />
+      <SelectMaterialToCopyModal 
+        open={copyModalOpen} 
+        onHide={() => setCopyModalOpen(false)} 
+        onSelect={handleCopySelect} 
+        assemblies={assemblies ?? []}
+      />
     </NERFormModal>
   );
 };

From bcdb591ca07096c20320b569e6b0446e64fd60ba Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Mon, 23 Mar 2026 16:11:24 -0400
Subject: [PATCH 10/15] review request changes

---
 .../BOM/BOMTableWrapper.tsx                   | 18 ++++++-
 .../BOM/MaterialForm/MaterialFormView.tsx     |  8 +--
 .../SelectMaterialToCopyModal.tsx             | 50 +++++++++++++------
 3 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
index c9afa898dc..4345afcf96 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/BOMTableWrapper.tsx
@@ -11,7 +11,8 @@ 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 { Button, Link, Typography } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { Button, Link, Tooltip, Typography } from '@mui/material';
 import { bomBaseColDef } from '../../../../utils/bom.utils';
 import NERModal from '../../../../components/NERModal';
 import { renderStatusBOM } from './BOMTableCustomCells';
@@ -300,7 +301,20 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       type: 'string',
       sortable: false,
       filterable: false,
-      hide: hideColumn[3]
+      hide: hideColumn[3],
+      renderCell: (params) => {
+        const material = materials.find((m) => m.materialId === params.row.materialId);
+        return (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Typography variant="body2">{params.value}</Typography>
+            {material?.isCopied && (
+              <Tooltip title="Copied from another BOM">
+                <ContentCopyIcon sx={{ fontSize: 14, color: 'warning.main' }} />
+              </Tooltip>
+            )}
+          </Box>
+        );
+      }
     },
     {
       ...bomBaseColDef,
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index 58b9fa774f..8eeb756387 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -547,10 +547,10 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           </Box>
         </Grid>
       )}
-      <SelectMaterialToCopyModal 
-        open={copyModalOpen} 
-        onHide={() => setCopyModalOpen(false)} 
-        onSelect={handleCopySelect} 
+      <SelectMaterialToCopyModal
+        open={copyModalOpen}
+        onHide={() => setCopyModalOpen(false)}
+        onSelect={handleCopySelect}
         assemblies={assemblies ?? []}
       />
     </NERFormModal>
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 0cefd1bda5..f16c463b48 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Autocomplete, Box, CircularProgress, Stack, TextField, Typography } from '@mui/material';
+import { Autocomplete, Box, CircularProgress, InputAdornment, Stack, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { useQuery } from 'react-query';
-import { Car, Material, ProjectPreview, WbsNumber } from 'shared';
+import { Assembly, Car, Material, ProjectPreview, WbsNumber } from 'shared';
 
 import NERFormModal from '../../../../../components/NERFormModal';
 import NERAutocomplete from '../../../../../components/NERAutocomplete';
@@ -10,6 +10,7 @@ import NERAutocomplete from '../../../../../components/NERAutocomplete';
 import { useGetAllCars } from '../../../../../hooks/cars.hooks';
 import { useAllProjects } from '../../../../../hooks/projects.hooks';
 import { getMaterialsForWbsElement } from '../../../../../apis/bom.api';
+import SearchIcon from '@mui/icons-material/Search';
 
 type AutocompleteOption = { label: string; id: string };
 
@@ -22,12 +23,13 @@ interface SelectMaterialToCopyModalProps {
   open: boolean;
   onHide: () => void;
   onSelect: (material: Material) => void;
+  assemblies: Assembly[];
 }
 
 type FormValues = Record<string, never>;
 
 const carToOption = (car: Car): AutocompleteOption => ({
-  label: String(car.wbsNum.carNumber),
+  label: `Car ${car.wbsNum.carNumber} - ${car.name}`,
   id: car.wbsElementId
 });
 
@@ -36,18 +38,6 @@ const projectToOption = (project: ProjectPreview): AutocompleteOption => ({
   id: project.wbsElementId
 });
 
-const materialToOption = (material: Material): AutocompleteOption => ({
-  label: [
-    material.name,
-    material.manufacturerName,
-    material.materialTypeName,
-    material.assemblyId ? `Assembly: ${material.assemblyId}` : undefined
-  ]
-    .filter(Boolean)
-    .join(' – '),
-  id: material.materialId
-});
-
 const searchResultToOption = ({ material, project }: SearchResult): AutocompleteOption => ({
   label: `${material.name} – ${project.wbsNum.carNumber}.${project.wbsNum.projectNumber} - ${project.name}`,
   id: material.materialId
@@ -64,7 +54,7 @@ const getLatestCar = (cars: Car[]): Car | null => {
   return [...cars].sort((a, b) => b.wbsNum.carNumber - a.wbsNum.carNumber)[0];
 };
 
-const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ open, onHide, onSelect }) => {
+const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ open, onHide, onSelect, assemblies }) => {
   const { reset, handleSubmit } = useForm<FormValues>();
 
   const [selectedCar, setSelectedCar] = useState<Car | null>(null);
@@ -93,6 +83,23 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
     return projectToProjectWbs(selectedProject);
   }, [selectedProject]);
 
+  const assemblyNameById = useMemo(
+    () => new Map(assemblies.map((assembly) => [assembly.assemblyId, assembly.name])),
+    [assemblies]
+  );
+
+  const materialToOption = (material: Material): AutocompleteOption => ({
+    label: [
+      material.name,
+      material.manufacturerName,
+      material.materialTypeName,
+      material.assemblyId ? `Assembly: ${assemblyNameById.get(material.assemblyId) ?? material.assemblyId}` : undefined
+    ]
+      .filter(Boolean)
+      .join(' – '),
+    id: material.materialId
+  });
+
   const projectMaterialsQuery = useQuery<Material[], Error>(
     ['materials', 'project', selectedProject?.wbsElementId ?? 'none'],
     async () => {
@@ -263,6 +270,17 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
                 {...params}
                 placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
                 fullWidth
+                InputProps={{
+                  ...params.InputProps,
+                  startAdornment: (
+                    <>
+                      <InputAdornment position="start">
+                        <SearchIcon />
+                      </InputAdornment>
+                      {params.InputProps.startAdornment}
+                    </>
+                  )
+                }}
               />
             )}
           />

From 18c9373521ecf7f23e2d9d11710e65cbef92de43 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Mon, 23 Mar 2026 16:23:01 -0400
Subject: [PATCH 11/15] linting issues

---
 .../SelectMaterialToCopyModal.tsx             | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index f16c463b48..7a844ac607 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Autocomplete, Box, CircularProgress, InputAdornment, Stack, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { useQuery } from 'react-query';
@@ -88,17 +88,20 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
     [assemblies]
   );
 
-  const materialToOption = (material: Material): AutocompleteOption => ({
-    label: [
-      material.name,
-      material.manufacturerName,
-      material.materialTypeName,
-      material.assemblyId ? `Assembly: ${assemblyNameById.get(material.assemblyId) ?? material.assemblyId}` : undefined
-    ]
-      .filter(Boolean)
-      .join(' – '),
-    id: material.materialId
-  });
+  const materialToOption = useCallback(
+    (material: Material): AutocompleteOption => ({
+        label: [
+        material.name,
+        material.manufacturerName,
+        material.materialTypeName,
+        material.assemblyId ? `Assembly: ${assemblyNameById.get(material.assemblyId) ?? material.assemblyId}` : undefined
+        ]
+        .filter(Boolean)
+        .join(' – '),
+        id: material.materialId
+    }),
+    [assemblyNameById]
+  );
 
   const projectMaterialsQuery = useQuery<Material[], Error>(
     ['materials', 'project', selectedProject?.wbsElementId ?? 'none'],
@@ -146,7 +149,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
 
   const carOptions = useMemo(() => cars.map(carToOption), [cars]);
   const projectOptions = useMemo(() => projectsForSelectedCar.map(projectToOption), [projectsForSelectedCar]);
-  const projectMaterialOptions = useMemo(() => projectMaterials.map(materialToOption), [projectMaterials]);
+  const projectMaterialOptions = useMemo(() => projectMaterials.map(materialToOption), [projectMaterials, materialToOption]);
 
   const searchOptions = useMemo(() => {
     const q = searchText.trim().toLowerCase();

From 49c6eeb7040cf30c193ddd6970849cf34d2b8e79 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Mon, 23 Mar 2026 16:26:20 -0400
Subject: [PATCH 12/15] prettier checks

---
 .../BOM/MaterialForm/SelectMaterialToCopyModal.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 7a844ac607..ae31ebb13c 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -90,15 +90,15 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
 
   const materialToOption = useCallback(
     (material: Material): AutocompleteOption => ({
-        label: [
+      label: [
         material.name,
         material.manufacturerName,
         material.materialTypeName,
         material.assemblyId ? `Assembly: ${assemblyNameById.get(material.assemblyId) ?? material.assemblyId}` : undefined
-        ]
+      ]
         .filter(Boolean)
         .join(' – '),
-        id: material.materialId
+      id: material.materialId
     }),
     [assemblyNameById]
   );

From a26582b314f8e720bb6241ea6cf8787083e347d3 Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Tue, 24 Mar 2026 23:23:55 -0400
Subject: [PATCH 13/15] removed unnecessary changes

---
 .../ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx
index 9311cd5e51..a815c2983c 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialForm.tsx
@@ -29,8 +29,7 @@ const schema = yup.object().shape({
   linkUrl: yup.string().optional(),
   notes: yup.string().optional(),
   pdmFileName: yup.string().optional(),
-  assemblyId: yup.string().optional(),
-  reimbursementRequestId: yup.string().optional()
+  assemblyId: yup.string().optional()
 });
 
 export interface MaterialFormInput {
@@ -46,7 +45,6 @@ export interface MaterialFormInput {
   linkUrl?: string;
   notes?: string;
   assemblyId?: string;
-  reimbursementRequestId?: string;
 }
 
 export interface MaterialDataSubmission {
@@ -103,8 +101,7 @@ const MaterialForm: React.FC<MaterialFormProps> = ({
       unitName: defaultValues?.unitName,
       linkUrl: defaultValues?.linkUrl ?? '',
       notes: defaultValues?.notes,
-      assemblyId: defaultValues?.assemblyId,
-      reimbursementRequestId: defaultValues?.reimbursementRequestId
+      assemblyId: defaultValues?.assemblyId
     },
     resolver: yupResolver(schema)
   });

From 11bdb51a3cd699b19e5e53bcb77b68714ea0969a Mon Sep 17 00:00:00 2001
From: Samuel Shrestha <samgunss@Samuels-MacBook-Pro.local>
Date: Wed, 25 Mar 2026 00:26:58 -0400
Subject: [PATCH 14/15] final touches

---
 .../ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx  | 1 -
 .../BOM/MaterialForm/SelectMaterialToCopyModal.tsx              | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
index 8eeb756387..fc3b89c531 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/MaterialFormView.tsx
@@ -92,7 +92,6 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
     setValue('price', m.price != null ? m.price / 100 : undefined);
     setValue('notes', m.notes ?? '');
     setValue('assemblyId', undefined);
-    setValue('reimbursementRequestId', undefined);
 
     setCopyModalOpen(false);
   };
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index ae31ebb13c..58ae1343aa 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -271,7 +271,7 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
             renderInput={(params) => (
               <TextField
                 {...params}
-                placeholder={selectedCar ? 'Search materials by name…' : 'Select a car first'}
+                placeholder={selectedCar ? 'Search' : 'Select a car first'}
                 fullWidth
                 InputProps={{
                   ...params.InputProps,

From aa467b11eff721842fbda57cee49eb5d5c6c0f65 Mon Sep 17 00:00:00 2001
From: wavehassman <wavehassman@gmail.com>
Date: Sun, 29 Mar 2026 20:30:15 -0400
Subject: [PATCH 15/15] #3881 requested changes

---
 src/frontend/src/hooks/bom.hooks.ts           |  32 +-
 .../SelectMaterialToCopyModal.tsx             | 385 +++++++-----------
 2 files changed, 189 insertions(+), 228 deletions(-)

diff --git a/src/frontend/src/hooks/bom.hooks.ts b/src/frontend/src/hooks/bom.hooks.ts
index 85539f970e..b078517aa3 100644
--- a/src/frontend/src/hooks/bom.hooks.ts
+++ b/src/frontend/src/hooks/bom.hooks.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { Assembly, Manufacturer, Material, MaterialType, Unit, WbsNumber, wbsPipe } from 'shared';
+import { Assembly, Manufacturer, Material, MaterialType, ProjectPreview, Unit, WbsNumber, wbsPipe } from 'shared';
 import { useToast } from '../hooks/toasts.hooks';
 import {
   assignMaterialToAssembly,
@@ -326,3 +326,33 @@ export const useGetMaterialsForWbsElement = (wbsNum: WbsNumber) => {
     return data;
   });
 };
+
+export const useGetMaterialsForCar = (carNumber: number | null, projects: ProjectPreview[]) => {
+  const projectsInCar = projects.filter((p) => p.wbsNum.carNumber === carNumber);
+
+  return useQuery<Material[], Error>(
+    ['materials', 'car', carNumber ?? 'none'],
+    async () => {
+      const results = await Promise.all(
+        projectsInCar.map(async (p) => {
+          const { data } = await getMaterialsForWbsElement({
+            carNumber: p.wbsNum.carNumber,
+            projectNumber: p.wbsNum.projectNumber,
+            workPackageNumber: 0
+          });
+          return data;
+        })
+      );
+
+      const flat = results.flat();
+      const seen = new Set<string>();
+      return flat.filter((material) => {
+        const key = `${material.name.toLowerCase()}-${material.assemblyId ?? 'no-assembly'}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+    },
+    { enabled: carNumber !== null && projectsInCar.length > 0 }
+  );
+};
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
index 58ae1343aa..7aece296e1 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx
@@ -1,24 +1,20 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Autocomplete, Box, CircularProgress, InputAdornment, Stack, TextField, Typography } from '@mui/material';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Autocomplete, InputAdornment, Stack, TextField, Typography } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
 import { useForm } from 'react-hook-form';
-import { useQuery } from 'react-query';
 import { Assembly, Car, Material, ProjectPreview, WbsNumber } from 'shared';
 
 import NERFormModal from '../../../../../components/NERFormModal';
 import NERAutocomplete from '../../../../../components/NERAutocomplete';
+import LoadingIndicator from '../../../../../components/LoadingIndicator';
+import ErrorPage from '../../../../ErrorPage';
 
 import { useGetAllCars } from '../../../../../hooks/cars.hooks';
 import { useAllProjects } from '../../../../../hooks/projects.hooks';
-import { getMaterialsForWbsElement } from '../../../../../apis/bom.api';
-import SearchIcon from '@mui/icons-material/Search';
+import { useGetMaterialsForWbsElement, useGetMaterialsForCar } from '../../../../../hooks/bom.hooks';
 
 type AutocompleteOption = { label: string; id: string };
 
-type SearchResult = {
-  material: Material;
-  project: ProjectPreview;
-};
-
 interface SelectMaterialToCopyModalProps {
   open: boolean;
   onHide: () => void;
@@ -38,12 +34,7 @@ const projectToOption = (project: ProjectPreview): AutocompleteOption => ({
   id: project.wbsElementId
 });
 
-const searchResultToOption = ({ material, project }: SearchResult): AutocompleteOption => ({
-  label: `${material.name} – ${project.wbsNum.carNumber}.${project.wbsNum.projectNumber} - ${project.name}`,
-  id: material.materialId
-});
-
-const projectToProjectWbs = (project: ProjectPreview): WbsNumber => ({
+const projectToWbsNumber = (project: ProjectPreview): WbsNumber => ({
   carNumber: project.wbsNum.carNumber,
   projectNumber: project.wbsNum.projectNumber,
   workPackageNumber: 0
@@ -60,34 +51,45 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
   const [selectedCar, setSelectedCar] = useState<Car | null>(null);
   const [selectedProject, setSelectedProject] = useState<ProjectPreview | null>(null);
   const [selectedMaterial, setSelectedMaterial] = useState<Material | null>(null);
-  const [searchText, setSearchText] = useState<string>('');
 
-  const carsQuery = useGetAllCars();
-  const projectsQuery = useAllProjects();
+  const { data: cars, isLoading: carsIsLoading, isError: carsIsError, error: carsError } = useGetAllCars();
+
+  const { data: projects, isLoading: projectsIsLoading, isError: projectsIsError, error: projectsError } = useAllProjects();
 
-  const cars = useMemo(() => carsQuery.data ?? [], [carsQuery.data]);
-  const projects = useMemo(() => projectsQuery.data ?? [], [projectsQuery.data]);
+  const allCars = useMemo(() => cars ?? [], [cars]);
+  const allProjects = useMemo(() => projects ?? [], [projects]);
 
-  const latestCar = useMemo(() => getLatestCar(cars), [cars]);
+  const latestCar = useMemo(() => getLatestCar(allCars), [allCars]);
+  const effectiveCar = selectedCar ?? latestCar;
 
   const projectsForSelectedCar = useMemo(() => {
-    if (!selectedCar) return [];
-    const {
-      wbsNum: { carNumber }
-    } = selectedCar;
-    return projects.filter((p) => p.wbsNum.carNumber === carNumber);
-  }, [projects, selectedCar]);
-
-  const selectedProjectWbsNum = useMemo(() => {
-    if (!selectedProject) return null;
-    return projectToProjectWbs(selectedProject);
-  }, [selectedProject]);
-
-  const assemblyNameById = useMemo(
-    () => new Map(assemblies.map((assembly) => [assembly.assemblyId, assembly.name])),
-    [assemblies]
+    if (!effectiveCar) return [];
+    return allProjects.filter((p) => p.wbsNum.carNumber === effectiveCar.wbsNum.carNumber);
+  }, [allProjects, effectiveCar]);
+
+  const selectedProjectWbsNum = useMemo(
+    () => (selectedProject ? projectToWbsNumber(selectedProject) : null),
+    [selectedProject]
   );
 
+  // Materials for the selected project for autocomplete
+  const {
+    data: projectMaterials,
+    isLoading: projectMaterialsIsLoading,
+    isError: projectMaterialsIsError,
+    error: projectMaterialsError
+  } = useGetMaterialsForWbsElement(selectedProjectWbsNum ?? { carNumber: 0, projectNumber: 0, workPackageNumber: 0 });
+
+  // All materials across the selected car for search bar
+  const {
+    data: carMaterials,
+    isLoading: carMaterialsIsLoading,
+    isError: carMaterialsIsError,
+    error: carMaterialsError
+  } = useGetMaterialsForCar(effectiveCar?.wbsNum.carNumber ?? null, allProjects);
+
+  const assemblyNameById = useMemo(() => new Map(assemblies.map((a) => [a.assemblyId, a.name])), [assemblies]);
+
   const materialToOption = useCallback(
     (material: Material): AutocompleteOption => ({
       label: [
@@ -103,191 +105,111 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
     [assemblyNameById]
   );
 
-  const projectMaterialsQuery = useQuery<Material[], Error>(
-    ['materials', 'project', selectedProject?.wbsElementId ?? 'none'],
-    async () => {
-      if (!selectedProjectWbsNum) return [];
-      const { data } = await getMaterialsForWbsElement(selectedProjectWbsNum);
-      return data;
-    },
-    { enabled: !!selectedProjectWbsNum && open }
-  );
+  const materials = useMemo(() => (selectedProject ? (projectMaterials ?? []) : []), [selectedProject, projectMaterials]);
 
-  const carMaterialsQuery = useQuery<SearchResult[], Error>(
-    ['materials', 'car', selectedCar?.wbsNum.carNumber ?? 'none'],
-    async () => {
-      if (!selectedCar) return [];
-      const {
-        wbsNum: { carNumber }
-      } = selectedCar;
-      const projectsInCar = projects.filter((p) => p.wbsNum.carNumber === carNumber);
-      const results = await Promise.all(
-        projectsInCar.map(async (p) => {
-          const { data } = await getMaterialsForWbsElement(projectToProjectWbs(p));
-          return data.map((material) => ({
-            material,
-            project: p
-          }));
-        })
-      );
-
-      const flattened = results.flat();
-      const seen = new Set<string>();
-
-      return flattened.filter(({ material, project }) => {
-        const key = `${material.name.toLowerCase()}-${project.name.toLowerCase()}`;
-        if (seen.has(key)) return false;
-        seen.add(key);
-        return true;
-      });
-    },
-    { enabled: !!selectedCar && open }
-  );
-
-  const projectMaterials = useMemo(() => projectMaterialsQuery.data ?? [], [projectMaterialsQuery.data]);
-  const carSearchResults = useMemo(() => carMaterialsQuery.data ?? [], [carMaterialsQuery.data]);
-
-  const carOptions = useMemo(() => cars.map(carToOption), [cars]);
+  const carOptions = useMemo(() => allCars.map(carToOption), [allCars]);
   const projectOptions = useMemo(() => projectsForSelectedCar.map(projectToOption), [projectsForSelectedCar]);
-  const projectMaterialOptions = useMemo(() => projectMaterials.map(materialToOption), [projectMaterials, materialToOption]);
-
-  const searchOptions = useMemo(() => {
-    const q = searchText.trim().toLowerCase();
-    const filtered =
-      q.length === 0 ? carSearchResults : carSearchResults.filter(({ material }) => material.name.toLowerCase().includes(q));
-
-    return filtered.map(searchResultToOption);
-  }, [carSearchResults, searchText]);
+  const materialOptions = useMemo(() => materials.map(materialToOption), [materials, materialToOption]);
+  const carMaterialOptions = useMemo(() => (carMaterials ?? []).map(materialToOption), [carMaterials, materialToOption]);
 
-  useEffect(() => {
-    if (open && !selectedCar && latestCar) {
-      setSelectedCar(latestCar);
-    }
-  }, [open, selectedCar, latestCar]);
-
-  useEffect(() => {
-    setSelectedProject(null);
-    setSelectedMaterial(null);
-    setSearchText('');
-  }, [selectedCar?.wbsElementId]);
+  const selectedCarOption = effectiveCar ? (carOptions.find((o) => o.id === effectiveCar.wbsElementId) ?? null) : null;
+  const selectedProjectOption = selectedProject ? projectToOption(selectedProject) : null;
+  const selectedMaterialOption = selectedMaterial ? materialToOption(selectedMaterial) : null;
 
-  useEffect(() => {
-    setSelectedMaterial(null);
-  }, [selectedProject?.wbsElementId]);
+  // Selecting from the search bar auto-populates the project and material dropdowns
+  const handleSearchSelect = useCallback(
+    (_: React.SyntheticEvent, value: AutocompleteOption | null) => {
+      if (!value) return;
+      const material = (carMaterials ?? []).find((m) => m.materialId === value.id) ?? null;
+      if (!material) return;
+      const project = allProjects.find((p) => p.wbsElementId === material.wbsElementId) ?? null;
+      setSelectedProject(project);
+      setSelectedMaterial(material);
+    },
+    [carMaterials, allProjects]
+  );
 
-  useEffect(() => {
-    if (!open) {
-      setSelectedCar(null);
+  const handleCarChange = useCallback(
+    (_: React.SyntheticEvent, value: AutocompleteOption | null) => {
+      const next = value ? (allCars.find((c) => c.wbsElementId === value.id) ?? null) : null;
+      setSelectedCar(next);
       setSelectedProject(null);
       setSelectedMaterial(null);
-      setSearchText('');
-      reset();
-    }
-  }, [open, reset]);
-
-  const anyLoading =
-    carsQuery.isLoading || projectsQuery.isLoading || projectMaterialsQuery.isLoading || carMaterialsQuery.isLoading;
-
-  const anyError =
-    (carsQuery.error as Error | undefined) ||
-    (projectsQuery.error as Error | undefined) ||
-    projectMaterialsQuery.error ||
-    carMaterialsQuery.error ||
-    null;
-
-  const selectedCarOption = selectedCar ? carToOption(selectedCar) : null;
-  const selectedProjectOption = selectedProject ? projectToOption(selectedProject) : null;
-  const selectedMaterialOption = selectedMaterial ? materialToOption(selectedMaterial) : null;
+    },
+    [allCars]
+  );
 
-  const canSubmit = !!selectedMaterial;
+  const handleProjectChange = useCallback(
+    (_: React.SyntheticEvent, value: AutocompleteOption | null) => {
+      const next = value ? (projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null) : null;
+      setSelectedProject(next);
+      setSelectedMaterial(null);
+    },
+    [projectsForSelectedCar]
+  );
+
+  const handleMaterialChange = useCallback(
+    (_: React.SyntheticEvent, value: AutocompleteOption | null) => {
+      const next = value ? (materials.find((m) => m.materialId === value.id) ?? null) : null;
+      setSelectedMaterial(next);
+    },
+    [materials]
+  );
 
   const handleCopy = () => {
     if (!selectedMaterial) return;
     onSelect(selectedMaterial);
     onHide();
+    reset();
+    setSelectedCar(null);
+    setSelectedProject(null);
+    setSelectedMaterial(null);
   };
 
-  return (
-    <NERFormModal
-      open={open}
-      onHide={onHide}
-      title="Select Material to Copy"
-      formId="select-material-to-copy-form"
-      reset={reset}
-      handleUseFormSubmit={handleSubmit}
-      onFormSubmit={handleCopy}
-      submitText="Copy"
-      cancelText="Cancel"
-      disabled={!canSubmit}
-      showCloseButton
-      paperProps={{ width: '500px', maxWidth: '95vw' }}
-    >
-      <Stack spacing={2} sx={{ p: 1 }}>
-        {anyLoading && (
-          <Stack direction="row" spacing={1} alignItems="center">
-            <CircularProgress size={18} />
-            <Typography variant="body2">Loading…</Typography>
-          </Stack>
-        )}
+  const handleHide = () => {
+    onHide();
+    reset();
+    setSelectedCar(null);
+    setSelectedProject(null);
+    setSelectedMaterial(null);
+  };
 
-        {anyError && (
-          <Typography variant="body2" color="error">
-            {anyError.message}
-          </Typography>
-        )}
+  const modalContent = () => {
+    if (carsIsError) return <ErrorPage message={carsError?.message} />;
+    if (projectsIsError) return <ErrorPage message={projectsError?.message} />;
+    if (projectMaterialsIsError) return <ErrorPage message={projectMaterialsError?.message} />;
+    if (carMaterialsIsError) return <ErrorPage message={carMaterialsError?.message} />;
+    if (carsIsLoading || projectsIsLoading) return <LoadingIndicator />;
 
-        <Box>
-          <Autocomplete
-            id="search-material"
-            options={searchOptions}
-            value={null}
-            getOptionLabel={(option) => option.label}
-            onInputChange={(_, value) => {
-              setSearchText(value);
-            }}
-            onChange={async (_, value) => {
-              if (!value) return;
-
-              const match =
-                carSearchResults.find(({ material, project }) => {
-                  return (
-                    material.materialId === value.id &&
-                    `${material.name} – ${project.wbsNum.carNumber}.${project.wbsNum.projectNumber} - ${project.name}` ===
-                      value.label
-                  );
-                }) ?? null;
-
-              if (!match) return;
-
-              setSelectedProject(match.project);
-              setSearchText(match.material.name);
-
-              const { data } = await getMaterialsForWbsElement(projectToProjectWbs(match.project));
-              const selected = data.find((m) => m.materialId === match.material.materialId) ?? null;
-
-              setSelectedMaterial(selected);
-            }}
-            disabled={!selectedCar || carMaterialsQuery.isLoading}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                placeholder={selectedCar ? 'Search' : 'Select a car first'}
-                fullWidth
-                InputProps={{
-                  ...params.InputProps,
-                  startAdornment: (
-                    <>
-                      <InputAdornment position="start">
-                        <SearchIcon />
-                      </InputAdornment>
-                      {params.InputProps.startAdornment}
-                    </>
-                  )
-                }}
-              />
-            )}
-          />
-        </Box>
+    return (
+      <Stack spacing={2} sx={{ p: 1 }}>
+        <Autocomplete
+          id="search-material"
+          options={carMaterialOptions}
+          value={null}
+          loading={carMaterialsIsLoading}
+          getOptionLabel={(option) => option.label}
+          onChange={handleSearchSelect}
+          disabled={!effectiveCar || carMaterialsIsLoading}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              placeholder={effectiveCar ? 'Search all materials in this car...' : 'Select a car first'}
+              fullWidth
+              InputProps={{
+                ...params.InputProps,
+                startAdornment: (
+                  <>
+                    <InputAdornment position="start">
+                      <SearchIcon />
+                    </InputAdornment>
+                    {params.InputProps.startAdornment}
+                  </>
+                )
+              }}
+            />
+          )}
+        />
 
         <NERAutocomplete
           id="select-car"
@@ -295,48 +217,57 @@ const SelectMaterialToCopyModal: React.FC<SelectMaterialToCopyModalProps> = ({ o
           placeholder="Select a car"
           options={carOptions}
           value={selectedCarOption}
-          onChange={(_, value) => {
-            const next = value ? (cars.find((c) => c.wbsElementId === value.id) ?? null) : null;
-            setSelectedCar(next);
-          }}
-          required={true}
-          disabled={carsQuery.isLoading}
+          onChange={handleCarChange}
+          required
         />
 
         <NERAutocomplete
           id="select-project"
           size="medium"
-          placeholder={selectedCar ? 'Select a project' : 'Select a car first'}
+          placeholder={effectiveCar ? 'Select a project' : 'Select a car first'}
           options={projectOptions}
           value={selectedProjectOption}
-          onChange={(_, value) => {
-            const next = value ? (projectsForSelectedCar.find((p) => p.wbsElementId === value.id) ?? null) : null;
-            setSelectedProject(next);
-          }}
-          required={true}
-          disabled={!selectedCar || projectsQuery.isLoading}
+          onChange={handleProjectChange}
+          required
+          disabled={!effectiveCar}
         />
 
         <NERAutocomplete
           id="select-material"
           size="medium"
           placeholder={selectedProject ? 'Select a material' : 'Select a project first'}
-          options={projectMaterialOptions}
+          options={materialOptions}
           value={selectedMaterialOption}
-          onChange={(_, value) => {
-            const next = value ? (projectMaterials.find((m) => m.materialId === value.id) ?? null) : null;
-            setSelectedMaterial(next);
-          }}
-          required={true}
-          disabled={!selectedProject || projectMaterialsQuery.isLoading}
+          onChange={handleMaterialChange}
+          required
+          disabled={!selectedProject || projectMaterialsIsLoading}
         />
 
-        {!canSubmit && (
+        {!selectedMaterial && (
           <Typography variant="caption" color="text.secondary">
-            Pick a material to enable “Copy”.
+            Pick a material to enable "Copy".
           </Typography>
         )}
       </Stack>
+    );
+  };
+
+  return (
+    <NERFormModal
+      open={open}
+      onHide={handleHide}
+      title="Select Material to Copy"
+      formId="select-material-to-copy-form"
+      reset={reset}
+      handleUseFormSubmit={handleSubmit}
+      onFormSubmit={handleCopy}
+      submitText="Copy"
+      cancelText="Cancel"
+      disabled={!selectedMaterial}
+      showCloseButton
+      paperProps={{ width: '600px', minHeight: '500px' }}
+    >
+      {modalContent()}
     </NERFormModal>
   );
 };