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,32 +16,21 @@ 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';
 
-function Breadcrumbs({ title, route, light, children }) {
-  return (
-    <MDBox
-      mr={{ xs: 0, xl: 8 }}
-      sx={{
-        padding: '12.5px 24px',
-        backgroundColor: '#fff'
-      }}
-    >
-      <MuiBreadcrumbs
-        sx={{
-          '& .MuiBreadcrumbs-separator': {
-            color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
-            padding: '0 8px'
+const buildBreadcrumbs = (route, light) => {
+  if (route[0] === 'home') route = [];
+  else if (route.length === 1) route = ['home'];
+  else {
+    route = ['home', ...route];
+    route.pop();
   }
-        }}
-        separator={<ArrowRight height={15} width={15} />}
-      >
-        {route.map((el) => (
+  return route.map((el) => (
     <Link to={`/${el}`} key={el}>
       <MDTypography
         component="span"
@@ -54,7 +43,30 @@ function Breadcrumbs({ title, route, light, children }) {
         {el}
       </MDTypography>
     </Link>
-        ))}
+  ));
+};
+
+function Breadcrumbs({ title, route, light, children }) {
+  return (
+    <MDBox
+      mr={{ xs: 0, xl: 8 }}
+      sx={{
+        padding: '12.5px 24px',
+        backgroundColor: '#fff'
+      }}
+    >
+      <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
               variant="button"
               fontWeight="regular"
@@ -64,23 +76,12 @@ function Breadcrumbs({ title, route, light, children }) {
             >
               {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>
           </MuiBreadcrumbs>
+        </Grid>
+        <Grid item md={4}>
+          {children}
+        </Grid>
+      </Grid>
     </MDBox>
   );
 }

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',