#3885: Refactored and finished UI

Author: wavehassman

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

@@ -63,7 +63,8 @@ const BOMTable: React.FC<BOMTableProps> = ({ setHideColumn, assignMaterial, colu
       subtotal: '',
       link: '',
       notes: '',
-      assemblyId: assembly.assemblyId
+      assemblyId: assembly.assemblyId,
+      isCopied: false
     });
 
     assemblyMaterials.forEach((material, indx) => materialsWithAssemblies.push(materialToRow(material, indx)));

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';
@@ -292,10 +293,22 @@ const BOMTableWrapper: React.FC<BOMTableWrapperProps> = ({
       flex: 1.5,
       field: 'name',
       headerName: 'Name',
-      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/BOMCopyConfirmModal.tsx

@@ -0,0 +1,28 @@
+import NERModal from '../../../../../components/NERModal';
+
+export interface BOMCopyConfirmModalProps {
+  open: boolean;
+  onHide: () => void;
+  onSuccess?: () => void;
+  materialsCount: number;
+  sourceProjectName: string;
+  currentProjectName: string;
+}
+
+const BOMCopyConfirmModal = ({
+  open,
+  onHide,
+  onSuccess,
+  materialsCount,
+  sourceProjectName,
+  currentProjectName
+}: BOMCopyConfirmModalProps) => {
+  const message = `Are you sure you want to copy ${materialsCount} materials from ${sourceProjectName} to ${currentProjectName}?`;
+  return (
+    <NERModal open={open} onHide={onHide} onSubmit={onSuccess} title="Confirm Copy">
+      <p>{message}</p>
+    </NERModal>
+  );
+};
+
+export default BOMCopyConfirmModal;

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

@@ -2,6 +2,7 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Button,
   FormControl,
   FormHelperText,
   FormLabel,
@@ -504,30 +505,33 @@ const MaterialFormView: React.FC<MaterialFormViewProps> = ({
           )}
         </Grid>
       </Grid>
-      {/*submitText === 'Add' && (
+      {submitText === 'Add' && (
         <Grid item xs={12} sx={{ pl: 0, pr: 0 }}>
           <Box
             sx={{
               pt: 1
             }}
           >
-            <Button
+            {/* <Button
               variant="contained"
               disableElevation
-              onClick={() => {}}
+              onClick={() => {
+                setBomConfirmOpen(true);
+              }}
               sx={{
                 mx: 0,
+                my: 1,
                 textTransform: 'none',
                 bgcolor: '#EF4345',
                 color: (t) => t.palette.getContrastText('#EF4345'),
                 '&:hover': { bgcolor: (t) => t.palette.error.dark }
               }}
             >
               COPY FROM EXISTING BOM
-            </Button>
+            </Button> */}
           </Box>
         </Grid>
-      )*/}
+      )}
     </NERFormModal>
   );
 };

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOMTab.tsx

@@ -2,8 +2,8 @@ import { Box } from '@mui/system';
 import { MaterialPreview, Project, isGuest } from 'shared';
 import { NERButton } from '../../../components/NERButton';
 import WarningIcon from '@mui/icons-material/Warning';
+import React, { useState } from 'react';
 import { Tooltip, useTheme } from '@mui/material';
-import { useState } from 'react';
 import BOMTableWrapper from './BOM/BOMTableWrapper';
 import CreateMaterialModal from './BOM/MaterialForm/CreateMaterialModal';
 import CreateAssemblyModal from './BOM/AssemblyForm/CreateAssemblyModal';
@@ -20,6 +20,7 @@ import {
   useGetMaterialsForWbsElement
 } from '../../../hooks/bom.hooks';
 import ImportBOMModal from './BOM/ImportBOMModal';
+import BOMCopyConfirmModal from './BOM/MaterialForm/BOMCopyConfirmModal';
 
 export const addMaterialCosts = (accumulator: number, currentMaterial: MaterialPreview) =>
   (currentMaterial.subtotal ?? 0) + accumulator;
@@ -31,8 +32,9 @@ const BOMTab = ({ project }: { project: Project }) => {
   const [showAddAssembly, setShowAddAssembly] = useState(false);
   const [showCopyBOM, setShowCopyBOM] = useState(false);
   const [showImportBOM, setShowImportBOM] = useState(false);
-  const theme = useTheme();
+  const [bomConfirmOpen, setBomConfirmOpen] = useState(false);
 
+  const theme = useTheme();
   const user = useCurrentUser();
 
   const {
@@ -148,6 +150,16 @@ const BOMTab = ({ project }: { project: Project }) => {
               Copy Existing BOM
             </NERButton>
           </Box>
+          <BOMCopyConfirmModal
+            open={bomConfirmOpen}
+            onHide={() => {
+              setBomConfirmOpen(false);
+            }}
+            onSuccess={() => {}}
+            materialsCount={1}
+            sourceProjectName={'Source Project'}
+            currentProjectName={'Target Project'}
+          ></BOMCopyConfirmModal>
           <Box display="flex" gap="20px" alignItems="center">
             <Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
               Budget: ${project.budget}

src/frontend/src/utils/bom.utils.ts

@@ -20,6 +20,7 @@ export interface BomRow extends GridValidRowModel {
   link: string;
   notes: string | undefined;
   assemblyId: string | undefined;
+  isCopied: boolean;
 }
 
 export const materialToRow = (material: Material, idx: number): BomRow => {
@@ -38,7 +39,8 @@ export const materialToRow = (material: Material, idx: number): BomRow => {
     subtotal: material.subtotal !== undefined ? `$${centsToDollar(material.subtotal)}` : '',
     link: material.linkUrl,
     notes: material.notes,
-    assemblyId: material.assemblyId ?? 'assembly-misc'
+    assemblyId: material.assemblyId ?? 'assembly-misc',
+    isCopied: material.isCopied
   };
 };