Feat/wms 49 (#45)

* Added: inventory home route
* Deleted: extra file
* Updated: linted
* Fixed: Tilegrid for tile component
* Integrated: tile component
* Fixed: routes
* Updated: Setup page order
* Added: redirect to inventory
* Fixed: add new inventory redirect
* Udpate: restructured code

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

src/components/TileComponent/Tile/TileGrid.js

@@ -1,54 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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';
-
-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} data={{ name: tile.name, path: tile.path }}>
-            {' '}
-            {tile.icon}
-          </Tile>
-        ))}
-    </Box>
-  );
-}
-
-TileGrid.propTypes = {
-  tiles: PropTypes.array
-};

src/components/TileComponent/index.js

@@ -7,6 +7,7 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import useStyles from './styles';
 import LOGGER from 'services/Logger';
+import { Link } from 'react-router-dom';
 
 export default function Tile({ data, children }) {
   let [expand, setExpand] = useState(false);
@@ -28,43 +29,31 @@ export default function Tile({ data, children }) {
             expand ? null : classes.column
           }`}
         >
-          {children}{' '}
+          {children}
           <Box className={`${classes.name} ${expand ? null : classes.content}`}>{data.name}</Box>
         </Box>
       </AccordionSummary>
       <AccordionDetails className={`${classes.row2} ${expand ? null : classes.remove}`}>
-        <Box
-          className={classes.box}
-          onClick={() => {
-            console.log(data.path.update);
-          }}
-        >
-          Update {data.name} <ArrowRightIcon />{' '}
-        </Box>
-        <Box
-          className={`${classes.box} ${classes.boxEven}`}
-          onClick={() => {
-            console.log(data.path.addNew);
-          }}
-        >
-          Add New {data.name} <ArrowRightIcon />{' '}
-        </Box>
-        <Box
-          className={classes.box}
-          onClick={() => {
-            console.log(data.path.cycleCount);
-          }}
-        >
-          Cycle Count <ArrowRightIcon />{' '}
-        </Box>
-        <Box
-          className={`${classes.box} ${classes.boxEven}`}
-          onClick={() => {
-            console.log(data.path.list);
-          }}
-        >
-          {data.name} List <ArrowRightIcon />{' '}
-        </Box>
+        <Link to={data.path.update}>
+          <Box className={classes.box}>
+            Update {data.name} <ArrowRightIcon />
+          </Box>
+        </Link>
+        <Link to={data.path.addNew}>
+          <Box className={`${classes.box} ${classes.boxEven}`}>
+            Add New {data.name} <ArrowRightIcon />
+          </Box>
+        </Link>
+        <Link to={data.path.cycleCount}>
+          <Box className={classes.box}>
+            Cycle Count <ArrowRightIcon />
+          </Box>
+        </Link>
+        <Link to={data.path.list}>
+          <Box className={`${classes.box} ${classes.boxEven}`}>
+            {data.name} List <ArrowRightIcon />
+          </Box>
+        </Link>
       </AccordionDetails>
     </Accordion>
   );

src/pages/setup/index.js

@@ -16,7 +16,7 @@ function SetupHome() {
     },
     {
       name: 'Inventory',
-      path: '/',
+      path: '/inventory',
       icon: <InventoryIcon width={96} height={96} color="#007AFF" />
     },
     {

src/pages/setupInventory/index.js

@@ -2,32 +2,33 @@ 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';
+import { Grid } from '@mui/material';
+import Tile from 'components/TileComponent';
 
 function SetupInventory() {
-  const tileList = [
-    {
-      name: 'Equipment',
-      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
-      icon: <EquipmentIcon />
-    },
+  const tiles = [
     {
       name: 'Raw Material',
-      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      path: { update: '/', addNew: '/', cycleCount: '/', list: '/' },
       icon: <RawMaterialIcon />
     },
     {
       name: 'Products',
-      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      path: { update: '/', addNew: '/inventory-new', cycleCount: '/', list: '/' },
       icon: <ProductsIcon />
     },
+    {
+      name: 'Equipment',
+      path: { update: '/', addNew: '/', cycleCount: '/', list: '/' },
+      icon: <EquipmentIcon />
+    },
     {
       name: 'Fleet',
-      path: { update: '/update', addNew: '/addNew', cycleCount: '/cycleCount', list: '/list' },
+      path: { update: '/', addNew: '/', cycleCount: '/', list: '/' },
       icon: <FleetIcon />
     }
   ];
@@ -35,7 +36,14 @@ function SetupInventory() {
     <DashboardLayout>
       <DashboardNavbar />
       <MDBox px={2} py={3}>
-        <TileGrid tiles={tileList} />
+        <Grid container spacing={2}>
+          {tiles &&
+            tiles.map((tile) => (
+              <Grid item xs={12} sm={6} md={tiles.length > 4 ? 4 : 6} key={tile.name}>
+                <Tile data={{ name: tile.name, path: tile.path }}>{tile.icon}</Tile>
+              </Grid>
+            ))}
+        </Grid>
       </MDBox>
       <Footer />
     </DashboardLayout>

src/routes/index.js

@@ -53,6 +53,7 @@ import NewWarehouseDetails from 'pages/newWarehouseDetails';
 import SetupHome from 'pages/setup';
 import WarehouseDetailsTables from 'pages/warehouseDetailsTables';
 import LabelingHome from 'pages/labellingHome';
+import SetupInventory from 'pages/setupInventory';
 
 // Images
 // import profilePicture from 'assets/images/team-3.jpg';
@@ -120,14 +121,21 @@ const protectedRoutes = [
     collapse: [
       {
         name: 'Setup Home',
-        key: 'setup-home',
+        key: 'setup',
         route: '/setup',
         component: <SetupHome />
       },
       {
-        name: 'Inventory Definition',
+        name: 'Inventory Home',
         key: 'inventory',
         route: '/inventory',
+        component: <SetupInventory />
+      },
+      {
+        name: 'Inventory Definition',
+        key: 'inventory-new',
+        hide: true,
+        route: '/inventory-new',
         component: <InventoryScreen />
       },
       {
@@ -138,7 +146,7 @@ const protectedRoutes = [
       },
       {
         name: 'Location Labeling',
-        key: 'Location labeling',
+        key: 'location-labeling',
         route: '/location-labeling',
         component: <LocationLabelingScreen />
       },
@@ -157,14 +165,14 @@ const protectedRoutes = [
       },
       {
         name: 'Users & Access',
-        key: 'users&access',
-        route: '/users&access',
+        key: 'users-access',
+        route: '/users-access',
         component: <UserAccessScreen />
       },
       {
         name: 'New/Edit Warehouse Details',
         key: 'warehouse-form',
-        route: '/warehouse-design-form',
+        route: '/warehouse-form',
         component: <NewWarehouseDetails />
       }
     ]