Feat/wms 51 (#44)

* Added: icons
* Updated: routes
* Updated: Tilebasic component
* Updated: homepage component and styling
* Updated: Setup page styles and component
* Updated: Labelling home styles and components
* Fixed: missing footer
* Updated: reorder routes
* Fixed: tiles width for many items
* Fixed: warehouse missing path
* Fixed: setup screen icon sizes

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>

src/assets/images/LocationLabelIcon.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+
+const LocationLabelIcon = ({ width = 96, height = 96, color = 'white', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M48 53.7198C54.8925 53.7198 60.48 48.1323 60.48 41.2398C60.48 34.3473 54.8925 28.7598 48 28.7598C41.1075 28.7598 35.52 34.3473 35.52 41.2398C35.52 48.1323 41.1075 53.7198 48 53.7198Z"
+      stroke={color}
+      strokeWidth="5"
+    />
+    <path
+      d="M14.4798 33.96C22.3598 -0.679991 73.6798 -0.63999 81.5198 34C86.1198 54.32 73.4798 71.52 62.3998 82.16C54.3598 89.92 41.6398 89.92 33.5598 82.16C22.5198 71.52 9.87981 54.28 14.4798 33.96Z"
+      stroke={color}
+      strokeWidth="5"
+    />
+  </svg>
+);
+export default LocationLabelIcon;
+
+LocationLabelIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/WidgetLabelIcon.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+
+const WidgetLabelIcon = ({ width = 96, height = 96, color = 'white', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M88 34.08V15.92C88 10.28 85.44 8 79.08 8H62.92C56.56 8 54 10.28 54 15.92V34.04C54 39.72 56.56 41.96 62.92 41.96H79.08C85.44 42 88 39.72 88 34.08Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M88 79.08V62.92C88 56.56 85.44 54 79.08 54H62.92C56.56 54 54 56.56 54 62.92V79.08C54 85.44 56.56 88 62.92 88H79.08C85.44 88 88 85.44 88 79.08Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M42 34.08V15.92C42 10.28 39.44 8 33.08 8H16.92C10.56 8 8 10.28 8 15.92V34.04C8 39.72 10.56 41.96 16.92 41.96H33.08C39.44 42 42 39.72 42 34.08Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M42 79.08V62.92C42 56.56 39.44 54 33.08 54H16.92C10.56 54 8 56.56 8 62.92V79.08C8 85.44 10.56 88 16.92 88H33.08C39.44 88 42 85.44 42 79.08Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default WidgetLabelIcon;
+
+WidgetLabelIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/components/TileBasic/index.js

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import MDBox from 'components/MDBox';
 import { makeStyles } from '@mui/styles';
 import { Grid } from '@mui/material';
+import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
+  margin: {
+    marginBottom: '20px'
+  },
   centerContent: {
     display: 'flex',
     alignItems: 'center',
@@ -14,13 +23,19 @@ const useStyles = makeStyles({
     boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.05)',
     borderRadius: '8px',
     marginBottom: '20px',
+    cursor: 'pointer !important',
+    '& svg': {
+      '&path': {
+        stroke: '#007AFF !important'
+      }
+    },
     '&:hover': {
       backgroundColor: '#007AFF',
       cursor: 'default',
       color: 'white',
       '& svg': {
         '& path': {
-          fill: '#fff'
+          stroke: '#fff'
         }
       }
     }
@@ -31,28 +46,31 @@ export default function TileBasic({ tiles }) {
   const classes = useStyles();
   return (
     <>
-      <Grid container spacing={2}>
-        {tiles &&
-          tiles.map((tile) => (
+      <MDBox px={2} py={3}>
+        <Grid container spacing={2}>
+          {tiles.map((items) => (
             <>
-              <Grid item xs={12} sm={6} md={tiles.length <= 4 ? undefined : 4}>
-                <MDBox
-                  key={tile.name + tile.path}
-                  data={{ name: tile.name, path: tile.path }}
-                  className={classes.centerContent}
-                  sx={{
-                    height: 200,
-                    backgroundColor: ({ palette: { white } }) => white.main,
-                    padding: '32px 40px'
-                  }}
-                >
-                  {tile.icon}
-                  {tile.name}
-                </MDBox>
+              <Grid item xs={12} sm={6} md={tiles.length > 4 ? 4 : 6}>
+                <Link to={items.path}>
+                  <MDBox
+                    key={items.name + items.path}
+                    data={{ name: items.name, path: items.path }}
+                    className={classes.centerContent}
+                    sx={{
+                      height: 230,
+                      backgroundColor: ({ palette: { white } }) => white.main,
+                      padding: '32px 40px'
+                    }}
+                  >
+                    {items.icon}
+                    {items.name}
+                  </MDBox>
+                </Link>
               </Grid>
             </>
           ))}
-      </Grid>
+        </Grid>
+      </MDBox>
     </>
   );
 }

src/pages/homepage/index.js

@@ -1,4 +1,3 @@
-import MDBox from 'components/MDBox';
 import DashboardNavbar from 'components/DashboardNavbar';
 import Footer from 'components/Footer';
 import DashboardLayout from 'layouts/DashboardLayout';
@@ -7,50 +6,35 @@ 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" />
+      icon: <SearchInventoryIcon color="#007AFF" />
     },
     {
       name: 'Scan',
       path: '/',
-      icon: <ScanIcon className={classes.iconSize} color="blue" />
+      icon: <ScanIcon color="#007AFF" />
     },
     {
       name: 'Setup',
-      path: '/',
-      icon: <SetupIcon className={classes.iconSize} color="blue" />
+      path: '/setup',
+      icon: <SetupIcon color="#007AFF" />
     },
     {
       name: 'Reports',
       path: '/',
-      icon: <ReportsIcon className={classes.iconSize} color="blue" />
+      icon: <ReportsIcon color="#007AFF" />
     }
   ];
 
   return (
     <DashboardLayout>
       <DashboardNavbar />
-      <MDBox px={2} py={3}>
-        <TileBasic tiles={data} />
-      </MDBox>
+      <TileBasic tiles={data} />
       <Footer />
     </DashboardLayout>
   );

src/pages/labellingHome/index.js

@@ -0,0 +1,30 @@
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import LocationLabelIcon from 'assets/images/LocationLabelIcon';
+import WidgetLabelIcon from 'assets/images/WidgetLabelIcon';
+import TileBasic from 'components/TileBasic';
+
+function LabelingHome() {
+  const data = [
+    {
+      name: 'Location Label',
+      path: '/location-labeling',
+      icon: <LocationLabelIcon color="#007AFF" />
+    },
+    {
+      name: 'Widget Label',
+      path: '/',
+      icon: <WidgetLabelIcon color="#007AFF" />
+    }
+  ];
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <TileBasic tiles={data} />
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default LabelingHome;

src/pages/setup/index.js

@@ -1,103 +1,40 @@
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
-import { makeStyles } from '@mui/styles';
-import MDBox from 'components/MDBox';
-import { Grid } from '@mui/material';
 import WarehouseIcon from 'assets/images/WarehouseIcon';
 import InventoryIcon from 'assets/images/InventoryIcon';
 import ProfileCircleIcon from 'assets/images/ProfileCircleIcon';
 import LabelIcon from 'assets/images/LabelIcon';
-import { Link } from 'react-router-dom';
-
-const useStyles = makeStyles({
-  iconSize: {
-    width: '50%',
-    height: '50%',
-    marginBottom: '10px'
-  },
-  margin: {
-    marginBottom: '20px'
-  },
-  centerContent: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    marginLeft: '20px',
-    boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.05)',
-    borderRadius: '8px',
-    marginBottom: '20px',
-    cursor: 'pointer !important',
-    '& svg': {
-      '&path': {
-        stroke: '#007AFF !important'
-      }
-    },
-    '&:hover': {
-      backgroundColor: '#007AFF',
-      cursor: 'default',
-      color: 'white',
-      '& svg': {
-        '& path': {
-          stroke: '#fff'
-        }
-      }
-    }
-  }
-});
+import TileBasic from 'components/TileBasic';
+import Footer from 'components/Footer';
 
 function SetupHome() {
-  const classes = useStyles();
   const data = [
     {
       name: 'Warehouse',
       path: '/warehouse',
-      icon: <WarehouseIcon className={classes.iconSize} color="blue" />
+      icon: <WarehouseIcon width={96} height={96} color="#007AFF" />
     },
     {
       name: 'Inventory',
       path: '/',
-      icon: <InventoryIcon className={classes.iconSize} color="blue" />
+      icon: <InventoryIcon width={96} height={96} color="#007AFF" />
     },
     {
       name: 'User & Access',
       path: '/',
-      icon: <ProfileCircleIcon className={classes.iconSize} color="blue" />
+      icon: <ProfileCircleIcon width={96} height={96} color="#007AFF" />
     },
     {
       name: 'Labeling',
-      path: '/',
-      icon: <LabelIcon className={classes.iconSize} color="blue" />
+      path: '/labeling',
+      icon: <LabelIcon width={96} height={96} color="#007AFF" />
     }
   ];
   return (
     <DashboardLayout>
       <DashboardNavbar />
-      <MDBox px={2} py={3}>
-        <Grid container spacing={2}>
-          {data.map((items) => (
-            <>
-              <Grid item xs={12} sm={6} md={6}>
-                <Link to={items.path}>
-                  <MDBox
-                    key={items.name + items.path}
-                    data={{ name: items.name, path: items.path }}
-                    className={classes.centerContent}
-                    sx={{
-                      height: 230,
-                      backgroundColor: ({ palette: { white } }) => white.main,
-                      padding: '32px 40px'
-                    }}
-                  >
-                    {items.icon}
-                    {items.name}
-                  </MDBox>
-                </Link>
-              </Grid>
-            </>
-          ))}
-        </Grid>
-      </MDBox>
+      <TileBasic tiles={data} />
+      <Footer />
     </DashboardLayout>
   );
 }

src/pages/warehouse/index.js

@@ -1,4 +1,3 @@
-import MDBox from 'components/MDBox';
 import DashboardNavbar from 'components/DashboardNavbar';
 import Footer from 'components/Footer';
 import DashboardLayout from 'layouts/DashboardLayout';
@@ -27,14 +26,13 @@ function WarehouseScreen() {
   return (
     <DashboardLayout>
       <DashboardNavbar />
-      <MDBox px={2} py={3}>
-        <TileBasic
-          tiles={warehouseData.map((warehouse) => ({
-            ...warehouse,
-            icon: <WarehouseIcon height={96} width={96} />
-          }))}
-        />
-      </MDBox>
+      <TileBasic
+        tiles={warehouseData.map((warehouse) => ({
+          ...warehouse,
+          icon: <WarehouseIcon height={96} width={96} />,
+          path: '/'
+        }))}
+      />
       <Footer />
     </DashboardLayout>
   );

src/routes/index.js

@@ -47,11 +47,12 @@ 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 LocationLabelingScreen from 'pages/labeling';
 import UserAccessScreen from 'pages/useraccess';
 import NewWarehouseDetails from 'pages/newWarehouseDetails';
 import SetupHome from 'pages/setup';
 import WarehouseDetailsTables from 'pages/warehouseDetailsTables';
+import LabelingHome from 'pages/labellingHome';
 
 // Images
 // import profilePicture from 'assets/images/team-3.jpg';
@@ -117,29 +118,36 @@ const protectedRoutes = [
     key: 'Setup',
     icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
+      {
+        name: 'Setup Home',
+        key: 'setup-home',
+        route: '/setup',
+        component: <SetupHome />
+      },
       {
         name: 'Inventory Definition',
         key: 'inventory',
         route: '/inventory',
         component: <InventoryScreen />
       },
-      {
-        name: 'Setup Home',
-        key: 'warehouse-setup',
-        route: '/warehouse-setup',
-        component: <SetupHome />
-      },
       {
         name: 'Warehouse Design',
         key: 'warehouse',
         route: '/warehouse',
         component: <WarehouseScreen />
       },
+      {
+        name: 'Location Labeling',
+        key: 'Location labeling',
+        route: '/location-labeling',
+        component: <LocationLabelingScreen />
+      },
       {
         name: 'Labeling',
         key: 'labeling',
+        hide: true,
         route: '/labeling',
-        component: <LabelingScreen />
+        component: <LabelingHome />
       },
       {
         name: 'Warehouse Details Table',