Feature/wms 33 (#31)

* Start the home page
* Created Setup Inventory Page
* delete useless files
* fixed a bug
* Add links for the sub actions
* fix naming
* Fix the tiles
* fix the path bug

Co-authored-by: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com>

src/assets/images/EquimpmentIcon.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+const EquipmentIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M47.9994 53.1999C47.4794 53.1999 46.9594 53.08 46.4794 52.8L11.1594 32.3601C9.71941 31.5201 9.23933 29.68 10.0793 28.24C10.9193 26.8 12.7193 26.3199 14.1993 27.1599L47.9994 46.72L81.5993 27.28C83.0394 26.44 84.8793 26.9601 85.7193 28.3601C86.5593 29.8001 86.0394 31.64 84.6394 32.48L49.5594 52.8C49.0394 53.04 48.5194 53.1999 47.9994 53.1999Z"
+      fill={color}
+    />
+    <path
+      d="M48 89.4402C46.36 89.4402 45 88.0802 45 86.4402V50.1602C45 48.5202 46.36 47.1602 48 47.1602C49.64 47.1602 51 48.5202 51 50.1602V86.4402C51 88.0802 49.64 89.4402 48 89.4402Z"
+      fill={color}
+    />
+    <path
+      d="M48.0005 91C44.4805 91 41.0005 90.2399 38.2405 88.7199L16.8805 76.8401C11.0805 73.6401 6.56055 65.92 6.56055 59.28V36.6799C6.56055 30.0399 11.0805 22.3601 16.8805 19.1201L38.2405 7.28C43.7205 4.24 52.2805 4.24 57.7605 7.28L79.1205 19.1599C84.9205 22.3599 89.4404 30.0799 89.4404 36.7199V59.32C89.4404 65.96 84.9205 73.6399 79.1205 76.8799L57.7605 88.7199C55.0005 90.2399 51.5205 91 48.0005 91ZM48.0005 11C45.4805 11 43.0005 11.52 41.1605 12.52L19.8005 24.3999C15.9605 26.5599 12.5605 32.2799 12.5605 36.7199V59.32C12.5605 63.72 15.9605 69.4799 19.8005 71.6399L41.1605 83.52C44.8005 85.56 51.2005 85.56 54.8405 83.52L76.2004 71.6399C80.0404 69.4799 83.4404 63.76 83.4404 59.32V36.7199C83.4404 32.3199 80.0404 26.5599 76.2004 24.3999L54.8405 12.52C53.0005 11.52 50.5205 11 48.0005 11Z"
+      fill={color}
+    />
+    <path
+      d="M68.0007 55.9602C66.3607 55.9602 65.0007 54.6002 65.0007 52.9602V40.0803L28.5207 19.0403C27.0807 18.2003 26.6007 16.3602 27.4407 14.9602C28.2807 13.5202 30.0807 13.0401 31.5207 13.8801L69.4807 35.8003C70.4007 36.3203 71.0007 37.3201 71.0007 38.4001V53.0403C71.0007 54.6003 69.6407 55.9602 68.0007 55.9602Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default EquipmentIcon;
+EquipmentIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/FleetIcon.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+const FleetIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    {...props}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M60 8V48C60 52.4 56.4 56 52 56H8V24C8 15.16 15.16 8 24 8H60Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M88 56V68C88 74.64 82.64 80 76 80H72C72 75.6 68.4 72 64 72C59.6 72 56 75.6 56 80H40C40 75.6 36.4 72 32 72C27.6 72 24 75.6 24 80H20C13.36 80 8 74.64 8 68V56H52C56.4 56 60 52.4 60 48V20H67.36C70.24 20 72.8799 21.56 74.3199 24.04L81.16 36H76C73.8 36 72 37.8 72 40V52C72 54.2 73.8 56 76 56H88Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M32 88C36.4183 88 40 84.4183 40 80C40 75.5817 36.4183 72 32 72C27.5817 72 24 75.5817 24 80C24 84.4183 27.5817 88 32 88Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M64 88C68.4183 88 72 84.4183 72 80C72 75.5817 68.4183 72 64 72C59.5817 72 56 75.5817 56 80C56 84.4183 59.5817 88 64 88Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M88 48V56H76C73.8 56 72 54.2 72 52V40C72 37.8 73.8 36 76 36H81.16L88 48Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default FleetIcon;
+FleetIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/ProductsIcon.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+
+const ProductsIcon = ({ width = '96', height = '96', color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    {...props}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.6802 29.7598L48.0001 50.1997L83.0801 29.8796"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M48 86.4402V50.1602"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M39.72 9.92L18.36 21.8001C13.52 24.4801 9.56006 31.2 9.56006 36.72V59.3201C9.56006 64.8401 13.52 71.5601 18.36 74.2401L39.72 86.1202C44.28 88.6402 51.7599 88.6402 56.3199 86.1202L77.6801 74.2401C82.5201 71.5601 86.48 64.8401 86.48 59.3201V36.72C86.48 31.2 82.5201 24.4801 77.6801 21.8001L56.3199 9.92C51.7199 7.36 44.28 7.36 39.72 9.92Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M67.6794 38L68 38.3206L30.04 16.4004"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ProductsIcon;
+
+ProductsIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/RawMaterialIcon.js

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+
+const RawMaterialIcon = ({ width = '96', height = '96', color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    {...props}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M47.9999 37.28C52.7599 37.28 56.6399 33.4 56.6399 28.64C56.6399 23.88 52.7599 20 47.9999 20C43.2399 20 39.3599 23.88 39.3599 28.64C39.3599 33.4 43.2399 37.28 47.9999 37.28Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M27.16 76.0002C31.92 76.0002 35.8 72.1202 35.8 67.3602C35.8 62.6002 31.92 58.7202 27.16 58.7202C22.4 58.7202 18.52 62.6002 18.52 67.3602C18.52 72.1202 22.36 76.0002 27.16 76.0002Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M68.8402 76.0002C73.6002 76.0002 77.4802 72.1202 77.4802 67.3602C77.4802 62.6002 73.6002 58.7202 68.8402 58.7202C64.0802 58.7202 60.2002 62.6002 60.2002 67.3602C60.2002 72.1202 64.0802 76.0002 68.8402 76.0002Z"
+      stroke={color}
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default RawMaterialIcon;
+
+RawMaterialIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/components/TileComponent/Tile/index.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import ArrowRightIcon from 'assets/images/ArrowRightIcon';
-
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -12,13 +11,9 @@ import LOGGER from 'services/Logger';
 export default function Tile({ data, children }) {
   let [expand, setExpand] = useState(false);
   const classes = useStyles();
+
   return (
-    <Accordion
-      className={`${classes.root} ${expand ? null : classes.hoverChange}`}
-      onClick={() => {
-        LOGGER.log(data.path);
-      }}
-    >
+    <Accordion className={`${classes.root} ${expand ? null : classes.hoverChange}`}>
       <AccordionSummary
         aria-controls="panel1a-content"
         id="panel1a-header"
@@ -38,16 +33,36 @@ export default function Tile({ data, children }) {
         </Box>
       </AccordionSummary>
       <AccordionDetails className={`${classes.row2} ${expand ? null : classes.remove}`}>
-        <Box className={classes.box}>
+        <Box
+          className={classes.box}
+          onClick={() => {
+            console.log(data.path.update);
+          }}
+        >
           Update {data.name} <ArrowRightIcon />{' '}
         </Box>
-        <Box className={`${classes.box} ${classes.boxEven}`}>
+        <Box
+          className={`${classes.box} ${classes.boxEven}`}
+          onClick={() => {
+            console.log(data.path.addNew);
+          }}
+        >
           Add New {data.name} <ArrowRightIcon />{' '}
         </Box>
-        <Box className={classes.box}>
+        <Box
+          className={classes.box}
+          onClick={() => {
+            console.log(data.path.cycleCount);
+          }}
+        >
           Cycle Count <ArrowRightIcon />{' '}
         </Box>
-        <Box className={`${classes.box} ${classes.boxEven}`}>
+        <Box
+          className={`${classes.box} ${classes.boxEven}`}
+          onClick={() => {
+            console.log(data.path.list);
+          }}
+        >
           {data.name} List <ArrowRightIcon />{' '}
         </Box>
       </AccordionDetails>

src/components/TileComponent/Tile/styles.js

@@ -4,7 +4,8 @@ const useStyles = makeStyles({
   root: {
     backgroundColor: 'white',
     borderRadius: '8px',
-    boxShadow: '0px 4px 24px #0000000d'
+    boxShadow: '0px 4px 24px #0000000d',
+    height: '230px'
   },
   hoverChange: {
     '&:hover': {

src/components/TileComponent/TileGrid.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import { makeStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
 
 import Tile from './Tile';
 
@@ -35,7 +36,7 @@ export default function TileGrid({ tiles }) {
     <Box className={classes.menu} ref={myContainer}>
       {tiles &&
         tiles.map((tile) => (
-          <Tile key={tile.name} data={{ name: tile.name, path: tile.path }} simple={tile.simple}>
+          <Tile key={tile.name} data={{ name: tile.name, path: tile.path }}>
             {' '}
             {tile.icon}
           </Tile>

src/pages/SetupInventory/index.js

@@ -0,0 +1,44 @@
+import MDBox from 'components/MDBox';
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import TileGrid from 'components/TileComponent/TileGrid';
+import EquipmentIcon from 'assets/images/EquimpmentIcon';
+import ProductsIcon from 'assets/images/ProductsIcon';
+import FleetIcon from 'assets/images/FleetIcon';
+import RawMaterialIcon from 'assets/images/RawMaterialIcon';
+
+function SetupInventory() {
+  const tileList = [
+    {
+      name: 'Equipment',
+      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      icon: <EquipmentIcon />
+    },
+    {
+      name: 'Raw Material',
+      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      icon: <RawMaterialIcon />
+    },
+    {
+      name: 'Products',
+      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      icon: <ProductsIcon />
+    },
+    {
+      name: 'Fleet',
+      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      icon: <FleetIcon />
+    }
+  ];
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={2} py={3}>
+        <TileGrid tiles={tileList} />
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default SetupInventory;