Fixes/overall (#64)

* Update: remove autofocus
* Update: Breadcrumbs functionality
* Update: removed validation for attributes
* Update: Field name
* Update: warehouse setup breadcrumbs
* Update: Inventory setup breadcrumbs

Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/components/Breadcrumbs/index.js

@@ -16,7 +16,7 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 // @mui material components
-import { Breadcrumbs as MuiBreadcrumbs, Grid } from '@mui/material';
+import { Breadcrumbs as MuiBreadcrumbs, Grid, Toolbar } from '@mui/material';
 import ArrowRight from 'assets/images/CarretArrowRightIcon';
 
 // Material Dashboard 2 PRO React components
@@ -24,14 +24,9 @@ import MDBox from 'components/MDBox';
 import MDTypography from 'components/MDTypography';
 
 const buildBreadcrumbs = (route, light) => {
-  if (route[0] === 'home') route = [];
+  return route.map((el) => {
-  else if (route.length === 1) route = ['home'];
+    return el.path ? (
-  else {
+      <Link to={el.path} key={el}>
-    route = ['home', ...route];
-    route.pop();
-  }
-  return route.map((el) => (
-    <Link to={`/${el}`} key={el}>
         <MDTypography
           component="span"
           variant="button"
@@ -40,19 +35,31 @@ const buildBreadcrumbs = (route, light) => {
           color={light ? 'white' : 'dark'}
           sx={{ lineHeight: 0 }}
         >
-        {el}
+          {el.name}
         </MDTypography>
       </Link>
-  ));
+    ) : (
+      <MDTypography
+        variant="button"
+        fontWeight="regular"
+        textTransform="capitalize"
+        color={light ? 'white' : 'dark'}
+        sx={{ lineHeight: 0 }}
+      >
+        {el.name}
+      </MDTypography>
+    );
+  });
 };
 
-function Breadcrumbs({ title, route, light, children }) {
+function Breadcrumbs({ route, light, children }) {
   return (
+    <Toolbar variant="dense">
       <MDBox
         mr={{ xs: 0, xl: 8 }}
         sx={{
-        padding: '12.5px 24px',
+          padding: '12.5px 24px'
-        backgroundColor: '#fff'
+          // backgroundColor: '#fff'
         }}
       >
         <Grid container spacing={2} alignItems="center">
@@ -67,15 +74,6 @@ function Breadcrumbs({ title, route, light, children }) {
               separator={<ArrowRight height={15} width={15} />}
             >
               {buildBreadcrumbs(route, light)}
-            <MDTypography
-              variant="button"
-              fontWeight="regular"
-              textTransform="capitalize"
-              color={light ? 'white' : 'dark'}
-              sx={{ lineHeight: 0 }}
-            >
-              {title.replace('-', ' ')}
-            </MDTypography>
             </MuiBreadcrumbs>
           </Grid>
           <Grid item md={4} whiteSpace="nowrap" position="absolute" right="16px">
@@ -83,6 +81,7 @@ function Breadcrumbs({ title, route, light, children }) {
           </Grid>
         </Grid>
       </MDBox>
+    </Toolbar>
   );
 }
 
@@ -93,7 +92,6 @@ Breadcrumbs.defaultProps = {
 
 // Typechecking props for the Breadcrumbs
 Breadcrumbs.propTypes = {
-  title: PropTypes.string.isRequired,
   route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
   light: PropTypes.bool,
   children: PropTypes.node

src/components/DashboardNavbar/index.js

@@ -17,7 +17,7 @@ import { useState, useEffect } from 'react';
 // import Grid from '@mui/material/Grid';
 
 // react-router components
-import { useLocation } from 'react-router-dom';
+// import { useLocation } from 'react-router-dom';
 
 import { useDispatch } from 'react-redux';
 import AuthActions from 'redux/AuthRedux';
@@ -40,7 +40,7 @@ import MDBox from 'components/MDBox';
 // import MDBadge from 'components/MDBadge';
 
 // Material Dashboard 2 PRO React example components
-import Breadcrumbs from 'components/Breadcrumbs';
+// import Breadcrumbs from 'components/Breadcrumbs';
 import NotificationItem from 'components/NotificationItem';
 
 // import InputAdornment from '@mui/material/InputAdornment';
@@ -49,7 +49,7 @@ import NotificationItem from 'components/NotificationItem';
 import {
   // navbar,
   // navbarContainer,
-  navbarRow,
+  // navbarRow,
   navbarIconButton,
   // navbarDesktopMenu,
   navbarMobileMenu
@@ -81,14 +81,14 @@ const useStyles = makeStyles(() => ({
   }
 }));
 
-function DashboardNavbar({ absolute, light, isMini, children }) {
+function DashboardNavbar({ absolute, light, isMini /*, children*/ }) {
   const [navbarType, setNavbarType] = useState();
   const [controller, dispatch] = useMaterialUIController();
   const { miniSidenav, transparentNavbar, fixedNavbar, /*openConfigurator,*/ darkMode } =
     controller;
   // const [openMenu, setOpenMenu] = useState(false);
   const [openProfileMenu, setOpenProfileMenu] = useState(false);
-  const route = useLocation().pathname.split('/').slice(1);
+  // const route = useLocation().pathname.split('/').slice(1);
   const dispatchLogout = useDispatch();
   const handleLogout = () => dispatchLogout(AuthActions.logout());
   const classes = useStyles();
@@ -270,13 +270,13 @@ function DashboardNavbar({ absolute, light, isMini, children }) {
           )}
         </Toolbar>
       </Box>
-      <Toolbar variant="dense">
+      {/* <Toolbar variant="dense">
         <MDBox color="inherit" mb={{ xs: 2, md: 0 }} sx={(theme) => navbarRow(theme, { isMini })}>
           <Breadcrumbs icon="home" title={route[route.length - 1]} route={route} light={light}>
             {children}
           </Breadcrumbs>
         </MDBox>
-      </Toolbar>
+      </Toolbar> */}
     </AppBar>
   );
 }

src/pages/addNewProduct/index.js

@@ -19,6 +19,7 @@ import { useDispatch } from 'react-redux';
 import ProductActions from 'redux/ProductsRedux';
 import { API } from 'constant';
 import LOGGER from 'services/Logger';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 const useStyles = makeStyles({
   labelSize: {
@@ -118,6 +119,15 @@ function AddNewProduct() {
     <>
       <DashboardLayout>
         <DashboardNavbar />
+        <Breadcrumbs
+          route={[
+            { name: 'Home', path: '/home' },
+            { name: 'Setup', path: '/setup' },
+            { name: 'Inventory', path: '/setup/inventory' },
+            { name: 'Products' },
+            { name: 'Add New Product' }
+          ]}
+        />
         <Box mx={3} my={3}>
           <form onSubmit={formik.handleSubmit}>
             <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>

src/pages/editWarehouseDetails/index.js

@@ -24,7 +24,6 @@ import MDInput from 'components/MDInput';
 import { useLocation } from 'react-router-dom';
 import WarehouseActions from 'redux/WarehouseRedux';
 import SnackBar from 'components/SnackBar';
-import { useNavigate } from 'react-router-dom';
 import { getChildLocationType } from 'utils/nestedTableTools';
 import { getPropertiesOfLocationType } from 'utils/nestedTableTools';
 import { getInitialvaluesFromParentData } from 'utils/nestedTableTools';
@@ -36,6 +35,7 @@ import { useParams } from 'react-router-dom';
 import { WarehouseLocationsSelectors } from 'redux/WarehouseLocationsRedux';
 import { API } from 'constant';
 import NestedDataTable from 'components/NestedTable';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 const bottomButtonStyling = {
   width: '100%',
@@ -86,7 +86,6 @@ const AddForm = ({ addFormOpen, setAddFormOpen, selected, warehouseId }) => {
         {fields &&
           fields.map((fieldName) => (
             <TextField
-              autoFocus
               fullWidth
               key={fieldName}
               margin="dense"
@@ -318,7 +317,6 @@ const WarehouseNestedDetails = () => {
 const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];
 
 function EditWarehouseDetails() {
-  const navigate = useNavigate();
   const location = useLocation();
   const [open, setOpen] = useState(false);
   const ITEM_HEIGHT = 48;
@@ -370,6 +368,14 @@ function EditWarehouseDetails() {
     <>
       <DashboardLayout>
         <DashboardNavbar />
+        <Breadcrumbs
+          route={[
+            { name: 'Home', path: '/home' },
+            { name: 'Setup', path: '/setup' },
+            { name: 'Warehouse', path: '/setup/warehouse' },
+            { name: location.state.name || '' }
+          ]}
+        />
         <Box mx={3} my={3}>
           <form onSubmit={formik.handleSubmit}>
             <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
@@ -442,7 +448,7 @@ function EditWarehouseDetails() {
                         marginBottom: '4px'
                       }}
                     >
-                      Types of inventories hosted
+                      Inventories hosted
                     </Box>
                     <Select
                       multiple
@@ -533,7 +539,7 @@ function EditWarehouseDetails() {
                 <MDButton size="large" color="primary" variant="outlined" type="submit">
                   SAVE
                 </MDButton>
-                <MDButton
+                {/* <MDButton
                   size="large"
                   color="primary"
                   variant="contained"
@@ -542,7 +548,7 @@ function EditWarehouseDetails() {
                   }}
                 >
                   SHOW DETAILS
-                </MDButton>
+                </MDButton> */}
               </Box>
             </Box>
           </form>

src/pages/homepage/index.js

@@ -5,6 +5,7 @@ import SearchInventoryIcon from 'assets/images/SearchInventoryIcon';
 import ReportsIcon from 'assets/images/ReportsIcon';
 import ScanIcon from 'assets/images/ScanIcon';
 import TileBasic from 'components/TileBasic';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 function HomepageScreen() {
   const data = [
@@ -36,6 +37,7 @@ function HomepageScreen() {
   return (
     <DashboardLayout>
       <DashboardNavbar />
+      <Breadcrumbs route={[{ name: 'Home', path: '/home' }]} />
       <TileBasic tiles={data} />
     </DashboardLayout>
   );

src/pages/inventory/index.js

@@ -15,6 +15,7 @@ import { API } from 'constant';
 import { useDispatch } from 'react-redux';
 import InventoryActions from 'redux/InventoryRedux';
 import LOGGER from 'services/Logger';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 const customStyles = {
   labelSize: {
@@ -158,6 +159,14 @@ function InventoryScreen() {
   return (
     <DashboardLayout>
       <DashboardNavbar />
+      <Breadcrumbs
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Inventory Definition' },
+          { name: 'Add New/Update Inventory' }
+        ]}
+      />
       <MDBox px={5} py={5}>
         <form onSubmit={formik.handleSubmit}>
           <MDBox

src/pages/newWarehouseDetails/index.js

@@ -11,6 +11,7 @@ import MDInput from 'components/MDInput';
 import WarehouseActions from 'redux/WarehouseRedux';
 import { API } from 'constant';
 import SnackBar from 'components/SnackBar';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 const inventoryTypes = ['Perishable', 'Material', 'Product', 'Inventory', 'Fleet'];
 
@@ -67,6 +68,14 @@ function NewWarehouseDetails() {
     <>
       <DashboardLayout>
         <DashboardNavbar />
+        <Breadcrumbs
+          route={[
+            { name: 'Home', path: '/home' },
+            { name: 'Setup', path: '/setup' },
+            { name: 'Warehouse', path: '/setup/warehouse' },
+            { name: 'Add new' }
+          ]}
+        />
         <Box mx={3} my={3}>
           <form onSubmit={formik.handleSubmit}>
             <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
@@ -139,7 +148,7 @@ function NewWarehouseDetails() {
                         marginBottom: '4px'
                       }}
                     >
-                      Types of inventories hosted
+                      Inventories hosted
                     </Box>
                     <Select
                       multiple
@@ -232,9 +241,9 @@ function NewWarehouseDetails() {
                 <MDButton size="medium" color="primary" variant="outlined" type="submit">
                   SAVE
                 </MDButton>
-                <MDButton size="medium" color="primary" variant="contained">
+                {/* <MDButton size="medium" color="primary" variant="contained">
                   NEXT
-                </MDButton>
+                </MDButton> */}
               </Box>
             </Box>
           </form>

src/pages/setup/index.js

@@ -5,6 +5,7 @@ import InventoryIcon from 'assets/images/InventoryIcon';
 import ProfileCircleIcon from 'assets/images/ProfileCircleIcon';
 import LabelIcon from 'assets/images/LabelIcon';
 import TileBasic from 'components/TileBasic';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 function SetupHome() {
   const data = [
@@ -32,6 +33,7 @@ function SetupHome() {
   return (
     <DashboardLayout>
       <DashboardNavbar />
+      <Breadcrumbs route={[{ name: 'Home', path: '/home' }, { name: 'Setup' }]} />
       <TileBasic tiles={data} />
     </DashboardLayout>
   );

src/pages/setupInventory/index.js

@@ -9,9 +9,9 @@ import { Grid } from '@mui/material';
 import Tile from 'components/TileComponent';
 import MDButton from 'components/Button';
 import { useNavigate } from 'react-router-dom';
+import Breadcrumbs from 'components/Breadcrumbs';
 
-function SetupInventory()
+function SetupInventory() {
-{
   const navigate = useNavigate();
 
   const tiles = [
@@ -43,11 +43,22 @@ function SetupInventory()
   ];
   return (
     <DashboardLayout>
-      <DashboardNavbar>
+      <DashboardNavbar />
-        <MDButton sx={{ ml: 3 }} color="primary" onClick={() => navigate('/setup/inventory/inventory-new')}>
+      <Breadcrumbs
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Inventory' }
+        ]}
+      >
+        <MDButton
+          sx={{ ml: 3 }}
+          color="primary"
+          onClick={() => navigate('/setup/inventory/inventory-new')}
+        >
           Add new Inventory
         </MDButton>
-      </DashboardNavbar>
+      </Breadcrumbs>
       <MDBox px={2} py={3}>
         <Grid container spacing={2}>
           {tiles &&

src/pages/warehouse/index.js

@@ -9,6 +9,7 @@ import { WarehouseSelectors } from 'redux/WarehouseRedux';
 import WarehouseIcon from 'assets/images/WarehouseIcon';
 import MDButton from 'components/Button';
 import { useNavigate } from 'react-router-dom';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 function WarehouseScreen() {
   const dispatch = useDispatch();
@@ -26,7 +27,14 @@ function WarehouseScreen() {
 
   return (
     <DashboardLayout>
-      <DashboardNavbar>
+      <DashboardNavbar />
+      <Breadcrumbs
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Warehouse' }
+        ]}
+      >
         <MDButton
           sx={{ ml: 3 }}
           color="primary"
@@ -34,7 +42,7 @@ function WarehouseScreen() {
         >
           Add new Warehouse
         </MDButton>
-      </DashboardNavbar>
+      </Breadcrumbs>
       <TileBasic
         tiles={warehouseData.map((warehouse) => ({
           ...warehouse,

src/services/ValidationServices.js

@@ -25,7 +25,7 @@ const schema = {
     inventorytype: Yup.array('Enter inventory Type')
       .of(Yup.string())
       .required('inventory Type is required'),
-    attributes: Yup.string('Enter other attributes').required('attributes is required')
+    attributes: Yup.string('Enter other attributes')
   }),
 
   addNewProduct: Yup.object({