Feature/wms 29 (#29)

* tileGrid page
* fixed: overlap issue

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

src/components/TileBasic/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MDBox from 'components/MDBox';
+import { makeStyles } from '@mui/styles';
+import { Grid } from '@mui/material';
+
+const useStyles = makeStyles({
+  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',
+    '&:hover': {
+      backgroundColor: '#007AFF',
+      cursor: 'default',
+      color: 'white',
+      '& svg': {
+        '& path': {
+          fill: '#fff'
+        }
+      }
+    }
+  }
+});
+
+export default function TileBasic({ tiles }) {
+  const classes = useStyles();
+  return (
+    <>
+      <container>
+        <Grid container spacing={2}>
+          {tiles &&
+            tiles.map((tile) => (
+              <>
+                <Grid item xs={12} sm={6} md={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>
+              </>
+            ))}
+        </Grid>
+      </container>
+    </>
+  );
+}
+
+TileBasic.propTypes = {
+  tiles: PropTypes.any
+};

src/components/TileComponent/TileGrid.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import { makeStyles } from '@mui/styles';
 
-import SetupIcon from 'assets/images/SetupIcon';
 import Tile from './Tile';
 
 const useStyles = makeStyles({
@@ -20,11 +20,7 @@ const useStyles = makeStyles({
   }
 });
 
-
-// TODO: When using this component, please use props here instead.
-// The below code was left as a sample for testing.
-// Please also remove this comment when the above are complete
-export default function TileGrid() {
+export default function TileGrid({ tiles }) {
   const classes = useStyles();
   // to make the grid adjust its elemnts:
   const myContainer = useRef(null);
@@ -37,42 +33,22 @@ export default function TileGrid() {
   });
   return (
     <Box className={classes.menu} ref={myContainer}>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="50px" height="50px" />
-      </Tile>
-      <Tile data={{ name: 'Setup', path: '/' }}>
-        {' '}
-        <SetupIcon color="#007aff" width="40px" height="40px" />
-      </Tile>
+      {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/pages/warehouse/index.js

@@ -0,0 +1,80 @@
+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 TileBasic from 'components/TileBasic';
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
+  margin: {
+    marginBottom: '20px'
+  }
+});
+
+function WarehouseScreen() {
+  const classes = useStyles();
+  const data = [
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    },
+    {
+      name: 'Warehouse 1',
+      path: '/',
+      icon: <SetupIcon className={classes.iconSize} color="blue" />
+    }
+  ];
+
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={2} py={3}>
+        <TileBasic tiles={data} />
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default WarehouseScreen;

src/routes/index.js

@@ -44,6 +44,7 @@ import LoginScreen from 'pages/authentication';
 
 // @mui icons
 import Icon from '@mui/material/Icon';
+import WarehouseScreen from 'pages/warehouse';
 
 // Images
 // import profilePicture from 'assets/images/team-3.jpg';
@@ -84,6 +85,20 @@ const protectedRoutes = [
         key: 'dashboard',
         route: '/dashboard',
         component: <DashboardScreen />
+      }      
+    ]
+  },
+  {
+    type: 'collapse',
+    name: 'Setup',
+    key: 'Setup',
+    icon: <Icon fontSize="medium">dashboard</Icon>,
+    collapse: [
+      {
+        name: 'Warehouse Design',
+        key: 'warehouse',
+        route: '/warehouse',
+        component: <WarehouseScreen />
       }
     ]
   }