From 27ff4e17db176eeb9cffe7d63112ab33147a12ce Mon Sep 17 00:00:00 2001
From: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com>
Date: Mon, 7 Feb 2022 22:53:05 +0530
Subject: [PATCH] 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                | 28 +++++++
 src/assets/images/SearchInventoryIcon.js     |  2 +-
 src/components/Breadcrumbs/index.js          | 83 ++++++++++----------
 src/components/Sidenav/SidenavItem.js        |  2 +-
 src/components/Sidenav/styles/sidenavItem.js |  4 +-
 src/routes/index.js                          |  6 +-
 6 files changed, 78 insertions(+), 47 deletions(-)
 create mode 100644 src/assets/images/HomeIcon.js

diff --git a/src/assets/images/HomeIcon.js b/src/assets/images/HomeIcon.js
new file mode 100644
index 0000000..3eb238a
--- /dev/null
+++ b/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
+};
diff --git a/src/assets/images/SearchInventoryIcon.js b/src/assets/images/SearchInventoryIcon.js
index 8db5cb0..6ddbe56 100644
--- a/src/assets/images/SearchInventoryIcon.js
+++ b/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}
diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js
index 863e123..ddbce26 100644
--- a/src/components/Breadcrumbs/index.js
+++ b/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
-        sx={{
-          '& .MuiBreadcrumbs-separator': {
-            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
-            padding: '0 8px'
-          }
-        }}
-        separator={<ArrowRight height={15} width={15} />}
-      >
-        {route.map((el) => (
-          <Link to={`/${el}`} key={el}>
+      <Grid container spacing={2} justifyContent="space-between" alignItems="center">
+        <Grid item>
+          <MuiBreadcrumbs
+            sx={{
+              '& .MuiBreadcrumbs-separator': {
+                color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
+                padding: '0 8px'
+              }
+            }}
+            separator={<ArrowRight height={15} width={15} />}
+          >
+            {buildBreadcrumbs(route, light)}
             <MDTypography
-              component="span"
               variant="button"
               fontWeight="regular"
               textTransform="capitalize"
               color={light ? 'white' : 'dark'}
               sx={{ lineHeight: 0 }}
             >
-              {el}
+              {title.replace('-', ' ')}
             </MDTypography>
-          </Link>
-        ))}
-        <MDTypography
-          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'
-          }}
-        >
+          </MuiBreadcrumbs>
+        </Grid>
+        <Grid item md={4}>
           {children}
-        </MDTypography>
-      </MuiBreadcrumbs>
+        </Grid>
+      </Grid>
     </MDBox>
   );
 }
diff --git a/src/components/Sidenav/SidenavItem.js b/src/components/Sidenav/SidenavItem.js
index 746595d..356bf66 100644
--- a/src/components/Sidenav/SidenavItem.js
+++ b/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"
diff --git a/src/components/Sidenav/styles/sidenavItem.js b/src/components/Sidenav/styles/sidenavItem.js
index a46be91..2bf8952 100644
--- a/src/components/Sidenav/styles/sidenavItem.js
+++ b/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
diff --git a/src/routes/index.js b/src/routes/index.js
index ab061e6..43da933 100644
--- a/src/routes/index.js
+++ b/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',