Updated: tile basic and icon

src/components/TileBasic/index.js

@@ -3,14 +3,8 @@ import PropTypes from 'prop-types';
 import MDBox from 'components/MDBox';
 import { makeStyles } from '@mui/styles';
 import { Grid } from '@mui/material';
-import SetupIcon from 'assets/images/SetupIcon';
 
 const useStyles = makeStyles({
-  iconSize: {
-    width: '50%',
-    height: '50%',
-    marginBottom: '10px'
-  },
   centerContent: {
     display: 'flex',
     alignItems: 'center',
@@ -41,9 +35,10 @@ 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._id}
+                  key={tile.name + tile.path}
+                  data={{ name: tile.name, path: tile.path }}
                   className={classes.centerContent}
                   sx={{
                     height: 200,
@@ -51,7 +46,7 @@ export default function TileBasic({ tiles }) {
                     padding: '32px 40px'
                   }}
                 >
-                  <SetupIcon className={classes.iconSize} color="blue" />
+                  {tile.icon}
                   {tile.name}
                 </MDBox>
               </Grid>

src/pages/warehouse/index.js

@@ -8,6 +8,7 @@ import WarehouseActions from 'redux/WarehouseRedux';
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { WarehouseSelectors } from 'redux/WarehouseRedux';
+import WarehouseIcon from 'assets/images/WarehouseIcon';
 
 function WarehouseScreen() {
   const dispatch = useDispatch();
@@ -27,7 +28,12 @@ function WarehouseScreen() {
     <DashboardLayout>
       <DashboardNavbar />
       <MDBox px={2} py={3}>
-        <TileBasic tiles={warehouseData} />
+        <TileBasic
+          tiles={warehouseData.map((warehouse) => ({
+            ...warehouse,
+            icon: <WarehouseIcon height={96} width={96} />
+          }))}
+        />
       </MDBox>
       <Footer />
     </DashboardLayout>