Feature/wms 62 (#47)

* create warehouse
* edit warehouse changes
* Update: linted and formatted
* add warehouse button
* Update: linted
* Added: icons
* Update: Hidden pre decoration
* Updated: breadcrumbs logic

Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/assets/images/HomeIcon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function HomeIcon({ width = 24, height = 24, stroke = 'white' }) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.79 22.75H6.21C3.47 22.75 1.25 20.52 1.25 17.78V10.37C1.25 9.00997 2.09 7.29997 3.17 6.45997L8.56 2.25997C10.18 0.999974 12.77 0.939974 14.45 2.11997L20.63 6.44997C21.82 7.27997 22.75 9.05997 22.75 10.51V17.79C22.75 20.52 20.53 22.75 17.79 22.75ZM9.48 3.43997L4.09 7.63997C3.38 8.19997 2.75 9.46997 2.75 10.37V17.78C2.75 19.69 4.3 21.25 6.21 21.25H17.79C19.7 21.25 21.25 19.7 21.25 17.79V10.51C21.25 9.54997 20.56 8.21997 19.77 7.67997L13.59 3.34997C12.45 2.54997 10.57 2.58997 9.48 3.43997Z"
+        fill={stroke}
+      />
+      <path
+        d="M12 18.75C11.59 18.75 11.25 18.41 11.25 18V15C11.25 14.59 11.59 14.25 12 14.25C12.41 14.25 12.75 14.59 12.75 15V18C12.75 18.41 12.41 18.75 12 18.75Z"
+        fill={stroke}
+      />
+    </svg>
+  );
+}
+
+HomeIcon.propTypes = {
+  width: Number,
+  height: Number,
+  stroke: String
+};

src/assets/images/SearchInventoryIcon.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-const SearchInventoryIcon = ({ width = '78', height = '86', color = '#007AFF', ...props }) => (
+const SearchInventoryIcon = ({ width = 78, height = 86, color = '#007AFF', ...props }) => (
   <svg
     width={width}
     height={height}

src/components/Breadcrumbs/index.js

@@ -16,13 +16,36 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 // @mui material components
-import { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
+import { Breadcrumbs as MuiBreadcrumbs, Grid } from '@mui/material';
 import ArrowRight from 'assets/images/CarretArrowRightIcon';
 
 // Material Dashboard 2 PRO React components
 import MDBox from 'components/MDBox';
 import MDTypography from 'components/MDTypography';
 
+const buildBreadcrumbs = (route, light) => {
+  if (route[0] === 'home') route = [];
+  else if (route.length === 1) route = ['home'];
+  else {
+    route = ['home', ...route];
+    route.pop();
+  }
+  return route.map((el) => (
+    <Link to={`/${el}`} key={el}>
+      <MDTypography
+        component="span"
+        variant="button"
+        fontWeight="regular"
+        textTransform="capitalize"
+        color={light ? 'white' : 'dark'}
+        sx={{ lineHeight: 0 }}
+      >
+        {el}
+      </MDTypography>
+    </Link>
+  ));
+};
+
 function Breadcrumbs({ title, route, light, children }) {
   return (
     <MDBox
@@ -32,55 +55,33 @@ function Breadcrumbs({ title, route, light, children }) {
         backgroundColor: '#fff'
       }}
     >
-      <MuiBreadcrumbs
+      <Grid container spacing={2} justifyContent="space-between" alignItems="center">
-        sx={{
+        <Grid item>
-          '& .MuiBreadcrumbs-separator': {
+          <MuiBreadcrumbs
-            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
+            sx={{
-            padding: '0 8px'
+              '& .MuiBreadcrumbs-separator': {
-          }
+                color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
-        }}
+                padding: '0 8px'
-        separator={<ArrowRight height={15} width={15} />}
+              }
-      >
+            }}
-        {route.map((el) => (
+            separator={<ArrowRight height={15} width={15} />}
-          <Link to={`/${el}`} key={el}>
+          >
+            {buildBreadcrumbs(route, light)}
             <MDTypography
-              component="span"
               variant="button"
               fontWeight="regular"
               textTransform="capitalize"
               color={light ? 'white' : 'dark'}
               sx={{ lineHeight: 0 }}
             >
-              {el}
+              {title.replace('-', ' ')}
             </MDTypography>
-          </Link>
+          </MuiBreadcrumbs>
-        ))}
+        </Grid>
-        <MDTypography
+        <Grid item md={4}>
-          variant="button"
-          fontWeight="regular"
-          textTransform="capitalize"
-          color={light ? 'white' : 'dark'}
-          sx={{ lineHeight: 0 }}
-        >
-          {title.replace('-', ' ')}
-        </MDTypography>
-        <MDTypography
-          component="span"
-          variant="button"
-          fontWeight="regular"
-          textTransform="capitalize"
-          color={light ? 'white' : 'dark'}
-          sx={{
-            lineHeight: 0,
-            position: 'absolute',
-            right: 0,
-            padding: '0px 20px',
-            marginTop: '-20px'
-          }}
-        >
           {children}
-        </MDTypography>
+        </Grid>
-      </MuiBreadcrumbs>
+      </Grid>
     </MDBox>
   );
 }

src/components/Sidenav/SidenavItem.js

@@ -56,7 +56,7 @@ function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
             })
           }
         >
-          <ListItemText primary={name}  />
+          <ListItemText primary={name} />
           {children && (
             <Icon
               component="i"

src/components/Sidenav/styles/sidenavItem.js

@@ -62,7 +62,7 @@ function item(theme, ownerState) {
 
 function itemContent(theme, ownerState) {
   const { palette, typography, transitions, functions } = theme;
-  const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
+  const { miniSidenav, /*name,*/ active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
 
   const { white, dark } = palette;
   const { size, fontWeightRegular, fontWeightLight } = typography;
@@ -93,7 +93,7 @@ function itemContent(theme, ownerState) {
     },
 
     '&::before': {
-      content: `"${name[0]}"`,
+      // content: `"${name[0]}"`,
       color:
         ((transparentSidenav && !darkMode) || whiteSidenav) && (active === 'isParent' || !active)
           ? dark.main

src/routes/index.js

@@ -55,6 +55,8 @@ import WarehouseDetailsTables from 'pages/warehouseDetailsTables';
 import EditWarehouseDetails from 'pages/editWarehouseDetails';
 import LabelingHome from 'pages/labellingHome';
 import SetupInventory from 'pages/setupInventory';
+import HomeIcon from 'assets/images/HomeIcon';
+import SetupIcon from 'assets/images/SetupIcon';
 
 // Images
 // import profilePicture from 'assets/images/team-3.jpg';
@@ -88,7 +90,7 @@ const protectedRoutes = [
     type: 'collapse',
     name: 'Home',
     key: 'Home',
-    icon: <Icon fontSize="medium">dashboard</Icon>,
+    icon: <HomeIcon width={24} height={24} color="white" />,
     collapse: [
       {
         name: 'Home',
@@ -118,7 +120,7 @@ const protectedRoutes = [
     type: 'collapse',
     name: 'Setup',
     key: 'Setup',
-    icon: <Icon fontSize="medium">dashboard</Icon>,
+    icon: <SetupIcon width={24} height={24} color="white" />,
     collapse: [
       {
         name: 'Setup Home',