review request changes

Author: Samuel Shrestha

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,

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>

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/MaterialForm/SelectMaterialToCopyModal.tsx

@@ -1,15 +1,16 @@
 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';
 
 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}
+                    </>
+                  )
+                }}
               />
             )}
           />