Feature/wms 5 (#32)

* Start the home page

* Fix the Tile and Tile Grid Component and also created the homePage

* Recreated the tile component with TileBasic

* fix the tile component

* Fixed: tile length sizing

* Rename page export

* Added: page to routes

* Renamed: sidenav title

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

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/TileBasic/index.js

@@ -36,7 +36,7 @@ export default function TileBasic({ tiles }) {
           {tiles &&
             tiles.map((tile) => (
               <>
-                <Grid item xs={12} sm={6} md={4}>
+                <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 }}

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({
+  tiles: PropTypes.array
-  //   name: PropTypes.string.isRequired,
-  //   path: PropTypes.string.isRequired,
-  //   icon: PropTypes.any
-  // })
-  tiles: PropTypes.any
 };

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/routes/index.js

@@ -46,6 +46,7 @@ import LoginScreen from 'pages/authentication';
 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';
@@ -85,6 +86,20 @@ 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',
+    icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
       {
         name: 'Dashboard',