Merge branch 'develop' into feature/WMS_47

.gitignore

@@ -25,3 +25,4 @@ yarn-error.log*
 yarn.lock
 
 commit.sh
+pnpm-lock.yaml

src/assets/images/ReportsIcon.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+const ReportsIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.31 16.95C11.12 16.95 10.93 16.88 10.78 16.73L9.28 15.23C8.99 14.94 8.99 14.46 9.28 14.17C9.57 13.88 10.05 13.88 10.34 14.17L11.31 15.14L14.78 11.67C15.07 11.38 15.55 11.38 15.84 11.67C16.13 11.96 16.13 12.44 15.84 12.73L11.84 16.73C11.7 16.88 11.5 16.95 11.31 16.95Z"
+      fill={color}
+    />
+    <path
+      d="M14.5 6.75H10.5C9.54 6.75 7.75 6.75 7.75 4C7.75 1.25 9.54 1.25 10.5 1.25H14.5C15.46 1.25 17.25 1.25 17.25 4C17.25 4.96 17.25 6.75 14.5 6.75ZM10.5 2.75C9.51 2.75 9.25 2.75 9.25 4C9.25 5.25 9.51 5.25 10.5 5.25H14.5C15.75 5.25 15.75 4.99 15.75 4C15.75 2.75 15.49 2.75 14.5 2.75H10.5Z"
+      fill={color}
+    />
+    <path
+      d="M15.5 22.75H9.5C3.88 22.75 2.75 20.17 2.75 16V10C2.75 5.44 4.4 3.49 8.46 3.28C8.87 3.26 9.23 3.57 9.25 3.99C9.27 4.41 8.95 4.75 8.54 4.77C5.7 4.93 4.25 5.78 4.25 10V16C4.25 19.7 4.98 21.25 9.5 21.25H15.5C20.02 21.25 20.75 19.7 20.75 16V10C20.75 5.78 19.3 4.93 16.46 4.77C16.05 4.75 15.73 4.39 15.75 3.98C15.77 3.57 16.12 3.25 16.54 3.27C20.6 3.49 22.25 5.44 22.25 9.99V15.99C22.25 20.17 21.12 22.75 15.5 22.75Z"
+      fill={color}
+    />
+  </svg>
+);
+export default ReportsIcon;
+
+ReportsIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/ScanIcon.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+const ScanIcon = ({ width = '96', height = '96', color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 36V28C8 16 16 8 28 8H68C80 8 88 16 88 28V36"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 60V68C8 80 16 88 28 88H68C80 88 88 80 88 68V60"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 48H88"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ScanIcon;
+
+ScanIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/SearchInventoryIcon.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+
+const SearchInventoryIcon = ({ width = '78', height = '86', color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 78 86"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M31 19H47C55 19 55 15 55 11C55 3 51 3 47 3H31C27 3 23 3 23 11C23 19 27 19 31 19Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M55 11.0801C68.32 11.8001 75 16.7201 75 35.0001V59.0001C75 75.0001 71 83.0001 51 83.0001H27C7 83.0001 3 75.0001 3 59.0001V35.0001C3 16.7601 9.68 11.8001 23 11.0801"
+      stroke={color}
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M37.6287 62.2582C45.7082 62.2582 52.2578 55.7086 52.2578 47.6292C52.2578 39.5497 45.7082 33 37.6287 33C29.5493 33 22.9996 39.5497 22.9996 47.6292C22.9996 55.7086 29.5493 62.2582 37.6287 62.2582Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M55.0004 64.9998L50.4288 60.4282"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SearchInventoryIcon;
+
+SearchInventoryIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/SetupIcon.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-const SetupIcon = ({ width = 25, height = 24, color = '#292D32', ...props }) => (
+const SetupIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => (
   <svg
     width={width}
     height={height}

src/components/BasicTable/index.js

@@ -28,6 +28,7 @@ const row = (x, i, header) => (
     ))}
   </TableRow>
 );
+
 export default function BasicTable({ data, header, backgroundColor }) {
   const classes = useStyles();
   const TableContainer = styled('div')(

src/components/ImageUpload/Index.js

@@ -1,95 +0,0 @@
-import MDBox from 'components/MDBox';
-import UploadIcon from 'assets/images/UploadIcon';
-import MDTypography from 'components/MDTypography';
-import pxToRem from 'assets/theme-dark/functions/pxToRem';
-import Placeholder from 'assets/images/placeholder.png';
-import { Button } from '@mui/material';
-import Close from 'assets/images/Close';
-
-
-function ImageUpload () {
-  const PreviewImg = [1,2,3,4,5,6,7,8,9,10,11];
-  return(
-    <>
-      <MDBox 
-        sx={{ 
-          border: '1px solid #c4c4c4', 
-          borderRadius:pxToRem(8),
-          padding: pxToRem(16)
-        }}
-      >
-        <MDBox sx={{
-          border: '1px dashed #C4C4C4',
-          borderRadius: pxToRem(6),
-          cursor: 'pointer',
-          position: 'relative',
-          textAlign: 'center',
-          minHeight: pxToRem(200),
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginBottom: '16px'
-        }} 
-        >
-          <MDBox multiple component="input" name="file" type="file" 
-            sx={{ 
-              width:'100%', 
-              opacity: '0',
-              cursor: 'pointer', 
-              position: 'absolute', 
-              top:'0', 
-              left:'0', 
-              right:'0',
-              bottom: '0'
-            }}
-          />  
-          <MDBox component="span" >
-            <UploadIcon />
-            <MDTypography component="span" sx={{ color:'#000', letterSpacing:'0.01em', display: 'block' }} >
-                Upload Product images
-            </MDTypography>
-          </MDBox>
-        </MDBox>
-        {/* -----------img-preview----------- */}
-        <MDBox sx={{ marginBottom:'-10px' }}>
-          {PreviewImg.map((item)=>{
-            return(
-              <MDBox key={item} component="span" 
-                sx={{ 
-                  width:'80px', 
-                  height:'63px', 
-                  marginRight: '16px', 
-                  display:'inline-block', 
-                  borderRadius:'4px', 
-                  position: 'relative' 
-                }}
-              >
-                <img src={Placeholder} alt='placeholder' width="100%"  />
-                <Button 
-                  sx={{ 
-                    backgroundColor: '#fff !important',
-                    boxShadow: '0px 1px 1px rgb(0 0 0 / 25%)',
-                    padding:'0',
-                    minWidth: '20px',
-                    minHeight: '20px',
-                    borderRadius: '100%',
-                    position: 'absolute',
-                    right: '4px',
-                    top: '4px',
-                    '&:hover' :{
-                      backgroundColor:'red !important'
-                    }
-                  }}
-                >
-                  <Close />
-                </Button>
-              </MDBox>
-            );
-          })} 
-        </MDBox>
-      </MDBox>
-    </>
-  );
-}
-
-export default ImageUpload;

src/components/ImageUpload/index.js

@@ -0,0 +1,108 @@
+import MDBox from 'components/MDBox';
+import PropTypes from 'prop-types';
+import UploadIcon from 'assets/images/UploadIcon';
+import MDTypography from 'components/MDTypography';
+import pxToRem from 'assets/theme-dark/functions/pxToRem';
+import Placeholder from 'assets/images/placeholder.png';
+import { Button } from '@mui/material';
+import Close from 'assets/images/Close';
+
+function ImageUpload({ heading, previewImg }) {
+  return (
+    <>
+      <MDBox
+        sx={{
+          border: '1px solid #c4c4c4',
+          borderRadius: pxToRem(8),
+          padding: pxToRem(16)
+        }}
+      >
+        <MDBox
+          sx={{
+            border: '1px dashed #C4C4C4',
+            borderRadius: pxToRem(6),
+            cursor: 'pointer',
+            position: 'relative',
+            textAlign: 'center',
+            minHeight: pxToRem(200),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '16px'
+          }}
+        >
+          <MDBox
+            multiple
+            component="input"
+            name="file"
+            type="file"
+            sx={{
+              width: '100%',
+              opacity: '0',
+              cursor: 'pointer',
+              position: 'absolute',
+              top: '0',
+              left: '0',
+              right: '0',
+              bottom: '0'
+            }}
+          />
+          <MDBox component="span">
+            <UploadIcon />
+            <MDTypography
+              component="span"
+              sx={{ color: '#000', letterSpacing: '0.01em', display: 'block' }}
+            >
+              {heading}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+        {/* -----------img-preview----------- */}
+        <MDBox sx={{ marginBottom: '-10px' }}>
+          {previewImg.map((item) => {
+            return (
+              <MDBox
+                key={item}
+                component="span"
+                sx={{
+                  width: '80px',
+                  height: '63px',
+                  marginRight: '16px',
+                  display: 'inline-block',
+                  borderRadius: '4px',
+                  position: 'relative'
+                }}
+              >
+                <img src={Placeholder} alt="placeholder" width="100%" />
+                <Button
+                  sx={{
+                    backgroundColor: '#fff !important',
+                    boxShadow: '0px 1px 1px rgb(0 0 0 / 25%)',
+                    padding: '0',
+                    minWidth: '20px',
+                    minHeight: '20px',
+                    borderRadius: '100%',
+                    position: 'absolute',
+                    right: '4px',
+                    top: '4px',
+                    '&:hover': {
+                      backgroundColor: 'red !important'
+                    }
+                  }}
+                >
+                  <Close />
+                </Button>
+              </MDBox>
+            );
+          })}
+        </MDBox>
+      </MDBox>
+    </>
+  );
+}
+
+export default ImageUpload;
+ImageUpload.propTypes = {
+  previewImg: PropTypes.array,
+  heading: PropTypes.string
+};

src/components/Sidenav/index.js

@@ -59,7 +59,6 @@ function Sidenav({ color, brandName, routes, ...rest }) {
   const items = pathname.split('/').slice(1);
   const itemParentName = items[1];
   const itemName = items[items.length - 1];
-  
 
   let textColor = 'white';
 
@@ -120,9 +119,11 @@ function Sidenav({ color, brandName, routes, ...rest }) {
   };
   // Render the all the collpases from the routes.js
   const renderCollapse = (collapses) =>
-    collapses.map(({ name, collapse, route, href, key }) => {
+    collapses.map(({ name, collapse, route, href, key, hide }) => {
       let returnValue;
 
+      if (hide) return null;
+
       if (collapse) {
         returnValue = (
           <SidenavItem
@@ -162,9 +163,11 @@ function Sidenav({ color, brandName, routes, ...rest }) {
 
   // Render all the routes from the routes.js (All the visible items on the Sidenav)
   const renderRoutes = routes.map(
-    ({ type, name, icon, title, collapse, noCollapse, key, href }) => {
+    ({ type, name, icon, title, collapse, noCollapse, key, href, hide }) => {
       let returnValue;
 
+      if (hide) return null;
+
       if (type === 'collapse') {
         returnValue = href ? (
           <Link
@@ -251,7 +254,13 @@ function Sidenav({ color, brandName, routes, ...rest }) {
             width={!brandName && '100%'}
             sx={(theme) => sidenavLogoLabel(theme, { miniSidenav })}
           >
-            <MDTypography fontSize="2rem"  component="h1" variant="button" fontWeight="bold"  color={textColor}>
+            <MDTypography
+              fontSize="2rem"
+              component="h1"
+              variant="button"
+              fontWeight="bold"
+              color={textColor}
+            >
               {brandName}
             </MDTypography>
           </MDBox>

src/components/Tabs/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function TabPanel({ children, value, index }) {
+  return <div>{value === index && <h1>{children}</h1>}</div>;
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  value: PropTypes.number,
+  index: PropTypes.number
+};

src/components/TileComponent/Tile/TileGrid.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { makeStyles } from '@mui/styles';
+
+import Tile from './Tile';
+
+const useStyles = makeStyles({
+  menu: {
+    display: 'grid',
+    gap: '1.75rem',
+    backgroundColor: '#f9f9f9',
+    padding: '24px 48px',
+    '@media (max-width: 900px)': {
+      gridTemplateColumns: 'repeat(2, minmax(250px, auto)) !important'
+    },
+    '@media (max-width: 690px)': {
+      gridTemplateColumns: 'repeat(1, minmax(250px, auto)) !important'
+    }
+  }
+});
+
+export default function TileGrid({ tiles }) {
+  const classes = useStyles();
+  // to make the grid adjust its elemnts:
+  const myContainer = useRef(null);
+  let gridColumns = 2;
+  useEffect(() => {
+    const grid = myContainer.current;
+    const gridChild = grid.childElementCount;
+    gridColumns = Math.floor(Math.sqrt(gridChild));
+    grid.style.gridTemplateColumns = `repeat(${gridColumns}, minmax(250px, auto))`;
+  });
+  return (
+    <Box className={classes.menu} ref={myContainer}>
+      {tiles &&
+        tiles.map((tile) => (
+          <Tile key={tile.name + tile.path} data={{ name: tile.name, path: tile.path }}>
+            {' '}
+            {tile.icon}
+          </Tile>
+        ))}
+    </Box>
+  );
+}
+
+TileGrid.propTypes = {
+  // tiles: PropTypes.object({
+  //   name: PropTypes.string.isRequired,
+  //   path: PropTypes.string.isRequired,
+  //   icon: PropTypes.any
+  // })
+  tiles: PropTypes.any
+};

src/components/TileComponent/TileGrid.js

@@ -35,7 +35,7 @@ export default function TileGrid({ tiles }) {
     <Box className={classes.menu} ref={myContainer}>
       {tiles &&
         tiles.map((tile) => (
-          <Tile key={tile.name + tile.path} data={{ name: tile.name, path: tile.path }}>
+          <Tile key={tile.name} data={{ name: tile.name, path: tile.path }} simple={tile.simple}>
             {' '}
             {tile.icon}
           </Tile>
@@ -45,10 +45,5 @@ export default function TileGrid({ tiles }) {
 }
 
 TileGrid.propTypes = {
-  // tiles: PropTypes.object({
-  //   name: PropTypes.string.isRequired,
-  //   path: PropTypes.string.isRequired,
-  //   icon: PropTypes.any
-  // })
-  tiles: PropTypes.any
+  tiles: PropTypes.array
 };

src/pages/homepage/index.js

@@ -0,0 +1,58 @@
+import MDBox from 'components/MDBox';
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import SetupIcon from 'assets/images/SetupIcon';
+import SearchInventoryIcon from 'assets/images/SearchInventoryIcon';
+import ReportsIcon from 'assets/images/ReportsIcon';
+import ScanIcon from 'assets/images/ScanIcon';
+import TileBasic from 'components/TileBasic';
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
+  margin: {
+    marginBottom: '20px'
+  }
+});
+
+function HomepageScreen() {
+  const classes = useStyles();
+  const data = [
+    {
+      name: 'Search Inventory',
+      path: '/',
+      icon: <SearchInventoryIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Scan',
+      path: '/',
+      icon: <ScanIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Setup',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Reports',
+      path: '/',
+      icon: <ReportsIcon className={classes.iconSize} color="blue" />
+    }
+  ];
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={2} py={3}>
+        <TileBasic tiles={data} />
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default HomepageScreen;

src/pages/inventory/index.js

@@ -0,0 +1,238 @@
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import { Grid, InputLabel } from '@mui/material';
+import MDInput from 'components/MDInput';
+import ImageUpload from 'components/ImageUpload';
+import Switch from 'components/Switch';
+import MDTypography from 'components/MDTypography';
+import { makeStyles } from '@mui/styles';
+import MDBox from 'components/MDBox';
+import Dropdown from 'components/Dropdown';
+import MDButton from 'components/Button';
+import BasicTable from 'components/BasicTable';
+
+const useStyles = makeStyles({
+  textWrap: {
+    whiteSpace: 'nowrap',
+    fontSize: '16px',
+    fontWeight: '800'
+  },
+  gridWrap: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  textSize: {
+    fontSize: '16px',
+    color: 'gray',
+    textAlign: 'justify'
+  },
+  btnWrap: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  marginTop: {
+    marginTop: '54px'
+  }
+});
+
+function InventoryScreen() {
+  const stockBox = [
+    {
+      text: 'Stock Tracking'
+    },
+    {
+      text: 'Replenishment'
+    },
+    {
+      text: 'Alerting'
+    },
+    {
+      text: 'Check In/Out'
+    },
+    {
+      text: 'Maintenance'
+    },
+    {
+      text: 'Location'
+    }
+  ];
+
+  const tableData = [
+    {
+      level1: 'Ipsum',
+      level2: 'Vivera'
+    },
+    {
+      level1: 'Ipsum',
+      level2: 'Vivera'
+    }
+  ];
+
+  const header = [
+    {
+      name: 'Level 1',
+      prop: 'level1'
+    },
+    {
+      name: 'Level 2',
+      prop: 'level2'
+    }
+  ];
+
+  const dropdownData = [
+    {
+      ID: '1',
+      displayname: 'Regular, full time'
+    },
+    {
+      ID: '2',
+      displayname: 'Regular, part time'
+    },
+    {
+      ID: '3',
+      displayname: 'Contractor- Arise Max'
+    }
+  ];
+
+  const dataInventory = [
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Inventory Type'
+    }
+  ];
+  const dataLevel = [
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Level 1'
+    },
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Level 2'
+    }
+  ];
+  const previewImg = [1, 2, 3];
+  const classes = useStyles();
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={5} py={5}>
+        <MDBox
+          px={5}
+          py={5}
+          sx={{
+            backgroundColor: '#fff',
+            justifyContent: 'center',
+            alignItems: 'center',
+            display: 'flex'
+          }}
+        >
+          <Grid container spacing={5}>
+            <Grid item xs={12} sm={6} md={6}>
+              <Grid container spacing={2}>
+                <Grid item xs={12} sm={12} md={12}>
+                  <InputLabel sx={{ pb: 2 }} id="demo-simple-select-label">
+                    Inventory Name
+                  </InputLabel>
+                  <MDInput sx={{ width: '100%' }} />
+                </Grid>
+                {dataInventory &&
+                  dataInventory.map((item, index) => (
+                    <Grid item xs={12} sm={12} md={12} key={index}>
+                      <Dropdown items={item} dropdownData={dropdownData} />
+                    </Grid>
+                  ))}
+                <Grid item xs={12} sm={12} md={12}>
+                  <InputLabel sx={{ pb: 2 }} id="demo-simple-select-label">
+                    Widget Name
+                  </InputLabel>
+                  <MDInput sx={{ width: '100%' }} />
+                </Grid>
+              </Grid>
+              <MDBox sx={{ my: 4 }}>
+                <MDTypography variant="h5">Policies</MDTypography>
+                <MDTypography className={classes.textSize}>
+                  Egestas pulvinar ornare vulputate porttitor consectetur condimentum at tellus
+                  quis. Leo pellentesque ipsum, a purus dignissim aliquam, orci. Elementum
+                  ullamcorper a sit eleifend ante ullamcorper ornare mi pharetra.
+                </MDTypography>
+              </MDBox>
+              <MDBox
+                mr={{ xs: 0, xl: 8 }}
+                sx={{
+                  width: '40%',
+                  padding: '12.5px 10px',
+                  backgroundColor: '#fff',
+                  border: 'solid 0.5px #c4c4c4',
+                  borderRadius: '4px',
+                  my: 5
+                }}
+              >
+                <div className={classes.wrap}>
+                  {stockBox.map((item) => (
+                    <>
+                      <div className={classes.gridWrap}>
+                        <MDTypography className={classes.textWrap}>{item.text}</MDTypography>
+                        <Switch />
+                      </div>
+                    </>
+                  ))}
+                </div>
+              </MDBox>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6}>
+              <ImageUpload heading="Upload Inventory Images" previewImg={previewImg} />
+            </Grid>
+            <Grid item xs={12} sm={12} md={12}>
+              <Grid container spacing={1}>
+                {dataLevel &&
+                  dataLevel.map((item, index) => (
+                    <Grid item xs={12} sm={6} md={4} key={index}>
+                      <Dropdown items={item} dropdownData={dropdownData} />
+                    </Grid>
+                  ))}
+                <Grid item xs={12} sm={6} md={4}>
+                  <MDButton color="primary" circular="true" className={classes.marginTop}>
+                    {'add hierarchy level'}
+                  </MDButton>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item xs={12} sm={12} md={12}>
+              <MDBox
+                sx={{
+                  backgroundColor: '#E5E5E5',
+                  width: '98%',
+                  padding: '9px'
+                }}
+              >
+                <MDTypography>Widget hierarchy</MDTypography>
+                <BasicTable
+                  className={classes.margin}
+                  data={tableData}
+                  header={header}
+                  backgroundColor="#E5E5E5"
+                />
+              </MDBox>
+            </Grid>
+            <MDBox sx={{ ml: 'auto', mr: 'auto', mt: 3 }}>
+              <MDButton sx={{ ml: 3 }} color="error" variant="outlined">
+                {'CANCEL'}
+              </MDButton>
+              <MDButton sx={{ ml: 3 }} color="primary" variant="outlined">
+                {'SAVE'}
+              </MDButton>
+              <MDButton sx={{ ml: 3 }} color="primary">
+                {'ADD ITEMS'}
+              </MDButton>
+            </MDBox>
+          </Grid>
+        </MDBox>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default InventoryScreen;

src/pages/newWarehouseDetails/index.js

@@ -2,7 +2,7 @@ import { Box, Grid, TextField } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
-import ImageUpload from 'components/ImageUpload/Index';
+import ImageUpload from 'components/ImageUpload';
 import MDButton from 'components/Button';
 
 const useStyles = makeStyles({
@@ -14,6 +14,8 @@ const useStyles = makeStyles({
   }
 });
 
+const previewImg = [1, 2, 3];
+
 function NewWarehouseDetails() {
   const classes = useStyles();
   return (
@@ -62,7 +64,7 @@ function NewWarehouseDetails() {
               </Grid>
               <Grid item xs={12} sm={6} md={6}>
                 <Box sx={{ marginTop: '30px' }}>
-                  <ImageUpload />
+                  <ImageUpload heading="Upload Warehouse Image" previewImg={previewImg} />
                 </Box>
               </Grid>
             </Grid>

src/pages/useraccess/index.js

@@ -0,0 +1,210 @@
+import MDBox from 'components/MDBox';
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import { makeStyles } from '@mui/styles';
+import BasicTable from 'components/BasicTable';
+import { Grid } from '@mui/material';
+import SearchBar from 'components/SearchBar';
+import MDButton from 'components/Button';
+import { useState } from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import { Tabs, Tab } from '@mui/material';
+import TabPanel from 'components/Tabs';
+
+const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
+  margin: {
+    marginBottom: '20px'
+  },
+  wrap: {
+    display: 'flex'
+  },
+  marginTable: {
+    marginTop: '20px'
+  },
+  tabs: {
+    '& .MuiButtonBase-root.MuiTab-root': {
+      padding: '12px 0px',
+      borderRadius: '0px'
+    },
+    '& .Mui-selected': {
+      textDecoration: 'underline',
+      backgroundColor: '#017AFF'
+    }
+  }
+});
+
+function UserAccessScreen() {
+  const classes = useStyles();
+  const [value, setValue] = useState(0);
+
+  const handleTabs = (e, val) => {
+    setValue(val);
+  };
+
+  const header = [
+    {
+      name: '',
+      prop: 'icon'
+    },
+    {
+      name: 'User Name',
+      prop: 'username'
+    },
+    {
+      name: 'Phone Number',
+      prop: 'phonenumber'
+    },
+    {
+      name: 'Roles',
+      prop: 'roles'
+    },
+    {
+      name: 'Last Updated by & Date',
+      prop: 'lastupdated'
+    },
+    {
+      name: 'Created by & Date',
+      prop: 'Createdby'
+    },
+    {
+      name: 'Last Login',
+      prop: 'lastlogin'
+    },
+    {
+      name: 'Access',
+      prop: 'access'
+    }
+  ];
+  const data = [
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    },
+    {
+      icon: <EditIcon />,
+      username: 'Floyd Miles',
+      phonenumber: '(704)555-0127',
+      roles: 'Administrator',
+      lastupdated: 'System| 1/1/2022 11:23:00 AM',
+      Createdby: 'System| 1/1/2022 11:23:00 AM',
+      lastlogin: 'System| 1/1/2022 11:23:00 AM',
+      access: 'Active'
+    }
+  ];
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={2} py={3}>
+        <Grid container spacing={2} className={classes.margin}>
+          <Grid item xs={12} sm={4} md={4}>
+            <Tabs value={value} className={classes.tabs} onChange={handleTabs}>
+              <Tab label="Roles" />
+              <Tab label="Users" />
+            </Tabs>
+            <TabPanel value={value} index={0}>
+              <div className={classes.marginTable}>
+                <BasicTable data={data} header={header} backgroundColor="#017AFF" />
+              </div>
+            </TabPanel>
+            <TabPanel value={value} index={1}>
+              Item2 Detail
+            </TabPanel>
+          </Grid>
+          <Grid item xs={12} sm={4} md={6}>
+            <SearchBar />
+          </Grid>
+          <Grid item xs={12} sm={4} md={2}>
+            <MDButton color="primary" size="medium">
+              {'+ CREATE USER'}
+            </MDButton>
+          </Grid>
+        </Grid>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default UserAccessScreen;

src/pages/warehouseDetailsTables/index.js

@@ -0,0 +1,92 @@
+import MDButton from 'components/Button';
+import DashboardNavbar from 'components/DashboardNavbar';
+import NestedTable from 'components/NestedTable';
+import DashboardLayout from 'layouts/DashboardLayout';
+import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
+
+const useStyles = makeStyles({
+  customButton: {
+    width: '100%',
+    padding: '13px 30px !important',
+    textTransform: 'uppercase',
+    borderRadius: '100px !important',
+    boxShadow: 'none !important'
+  }
+});
+
+const WarehouseDetailsTables = () => {
+  const classes = useStyles();
+  return (
+    <>
+      <DashboardLayout>
+        <DashboardNavbar />
+        <Box px={3} py={3}>
+          <NestedTable />
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              columnGap: '20px',
+              margin: '20px 0px'
+            }}
+          >
+            <MDButton
+              size="medium"
+              className={classes.customButton}
+              color="primary"
+              variant="contained"
+            >
+              add zone
+            </MDButton>
+            <MDButton
+              size="medium"
+              className={classes.customButton}
+              color="primary"
+              variant="contained"
+            >
+              add area
+            </MDButton>
+            <MDButton
+              size="medium"
+              className={classes.customButton}
+              color="primary"
+              variant="contained"
+            >
+              add row
+            </MDButton>
+            <MDButton
+              size="medium"
+              className={classes.customButton}
+              color="primary"
+              variant="contained"
+              sx={{ background: '#E5E7EB !important', color: 'rgba(75, 85, 99, 0.5)' }}
+            >
+              add bay
+            </MDButton>
+            <MDButton
+              size="medium"
+              className={classes.customButton}
+              color="primary"
+              variant="contained"
+              sx={{ background: '#E5E7EB !important', color: 'rgba(75, 85, 99, 0.5)' }}
+            >
+              split bay
+            </MDButton>
+            <MDButton
+              size="medium"
+              className={classes.customButton}
+              color="primary"
+              variant="contained"
+              sx={{ background: '#E5E7EB !important', color: 'rgba(75, 85, 99, 0.5)' }}
+            >
+              split level
+            </MDButton>
+          </Box>
+        </Box>
+      </DashboardLayout>
+    </>
+  );
+};
+
+export default WarehouseDetailsTables;

src/routes/PublicRoutes.js

@@ -10,7 +10,7 @@ const PublicRoutes = ({ component }) => {
     return <>{component} </>;
   }
 
-  return <Navigate to="/dashboard" />;
+  return <Navigate to="/home" />;
 };
 
 PublicRoutes.propTypes = {

src/routes/index.js

@@ -44,10 +44,14 @@ import LoginScreen from 'pages/authentication';
 
 // @mui icons
 import Icon from '@mui/material/Icon';
+import InventoryScreen from 'pages/inventory';
 import WarehouseScreen from 'pages/warehouse';
+import HomepageScreen from 'pages/homepage';
+import LabelingScreen from 'pages/labeling';
+import UserAccessScreen from 'pages/useraccess';
 import NewWarehouseDetails from 'pages/newWarehouseDetails';
 import SetupHome from 'pages/setup';
-import LabelingScreen from 'pages/labeling';
+import WarehouseDetailsTables from 'pages/warehouseDetailsTables';
 
 // Images
 // import profilePicture from 'assets/images/team-3.jpg';
@@ -82,11 +86,27 @@ const protectedRoutes = [
     name: 'Home',
     key: 'Home',
     icon: <Icon fontSize="medium">dashboard</Icon>,
+    collapse: [
+      {
+        name: 'Home',
+        key: 'home',
+        route: '/home',
+        component: <HomepageScreen />
+      }
+    ]
+  },
+  {
+    type: 'collapse',
+    name: 'Test',
+    key: 'Test',
+    hide: true,
+    icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
       {
         name: 'Dashboard',
         key: 'dashboard',
         route: '/dashboard',
+        hide: true,
         component: <DashboardScreen />
       }
     ]
@@ -97,6 +117,12 @@ const protectedRoutes = [
     key: 'Setup',
     icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
+      {
+        name: 'Inventory Definition',
+        key: 'inventory',
+        route: '/inventory',
+        component: <InventoryScreen />
+      },
       {
         name: 'Setup Home',
         key: 'warehouse-setup',
@@ -109,17 +135,29 @@ const protectedRoutes = [
         route: '/warehouse',
         component: <WarehouseScreen />
       },
-      {
-        name: 'New/Edit Warehouse Details',
-        key: 'warehouse-form',
-        route: '/warehouse-design-form',
-        component: <NewWarehouseDetails />
-      },
       {
         name: 'Labeling',
         key: 'labeling',
         route: '/labeling',
         component: <LabelingScreen />
+      },
+      {
+        name: 'Warehouse Details Table',
+        key: 'warehouse-details-table',
+        route: '/warehouse-details-table',
+        component: <WarehouseDetailsTables />
+      },
+      {
+        name: 'Users & Access',
+        key: 'users&access',
+        route: '/users&access',
+        component: <UserAccessScreen />
+      },
+      {
+        name: 'New/Edit Warehouse Details',
+        key: 'warehouse-form',
+        route: '/warehouse-design-form',
+        component: <NewWarehouseDetails />
       }
     ]
   }