ProductGroupTreeView

buildtime/client/material-editor/src/components/ProductGroupTreeView.tsx

@@ -1,6 +1,9 @@
+import Paper from '@mui/material/Paper';
 import type { ProductGroup } from '../data/productGroup';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
 
 type ProductGroupTreeViewProps = {
   ProductGroups?: ProductGroup[];
@@ -17,11 +20,17 @@ export default function ProductGroupTreeView({ ProductGroups = [] }: ProductGrou
   );
 
   return ( 
+    <Paper sx={{ height: 600, width: '10vw', marginRight: 2, border: '1px solid', borderColor: 'primary.main', borderRadius: 1, p: 1, bgcolor: '#f9f9f9' }}>
+      <Typography variant="body1" component="div" sx={{ flexGrow: 1, p: 1}}>
+          Product Groups:
+      </Typography>
+      <Divider />
       <SimpleTreeView
         aria-label="Product Group Tree View"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+        sx={{ height: 500, flexGrow: 1, overflowY: 'auto' }}
       >
         {ProductGroups.map((productGroup) => renderTree(productGroup))}
       </SimpleTreeView>
+    </Paper>
   );
 }

buildtime/client/material-editor/src/components/PropertyTypesTableView.tsx

@@ -130,7 +130,7 @@ const PropertyTypesTableView = ({ selectedRow }: { selectedRow: number }) => {
         <div>
             {errorMessage !== '' && <Alert severity="error" sx={{ mb: 2 }}>{errorMessage}</Alert>}
             <CrudDataGrid
-                    paperSx={{ height: 600, width: '60vw' }}
+                    paperSx={{ height: 600, width: '60vw', color: 'primary.main' }}
                     initialState={{
                             sorting: {
                             sortModel: [{ field: 'id', sort: 'asc' }],

buildtime/client/material-editor/src/pages/ProductPage.tsx

@@ -20,13 +20,13 @@ const ProductPage: React.FC = () => {
     return (
           <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
               <Typography variant="h3">
-                  Property Type Management
+                  Product Management
               </Typography>
               <Box
                 sx={{
                   display: "flex",           // Arrange children in a row
                   flexDirection: "row",
-                  width: "100vw",             // Full width of the parent
+                  width: "98%",             // Full width of the parent
                   p: 2,                       // Padding around the flex container
                   bgcolor: "#f5f5f5"
                 }}