Fixes/minor (#77)

Breadcrumbs, images, icon slugs, notifications Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>
2022-03-04 01:59:51 +05:30
parent e2d3ccfb7e
commit 5381f7d727
29 changed files with 647 additions and 271 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -171,7 +171,7 @@ export default function App() {
          </Routes>
          {/* <MDAlert dismissible><span>Submitted Successfully!</span></MDAlert> */}
        </ThemeProvider>
-        <ToastContainer />
+        <ToastContainer position="bottom-right" />
      </PersistGate>
    </Provider>
  );
--- a/src/assets/images/InventoryIcon.js
+++ b/src/assets/images/InventoryIcon.js
@@ -1,12 +1,38 @@
 import PropTypes from 'prop-types';

-const InventoryIcon = ({ width = 25, height = 24,  ...props }) => (
-  <svg width={width} height={height} {...props} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M37.24 58.7998L43.24 64.7998L59.24 48.7998" stroke="#007AFF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M40 24H56C64 24 64 20 64 16C64 8 60 8 56 8H40C36 8 32 8 32 16C32 24 36 24 40 24Z" stroke="#007AFF" strokeWidth="5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M64 16.0801C77.32 16.8001 84 21.7201 84 40.0001V64.0001C84 80.0001 80 88.0001 60 88.0001H36C16 88.0001 12 80.0001 12 64.0001V40.0001C12 21.7601 18.68 16.8001 32 16.0801" stroke="#007AFF" strokeWidth="5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
+const InventoryIcon = ({ width = '25', height = '25', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    {...props}
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M37.24 58.7998L43.24 64.7998L59.24 48.7998"
+      stroke="#007AFF"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M40 24H56C64 24 64 20 64 16C64 8 60 8 56 8H40C36 8 32 8 32 16C32 24 36 24 40 24Z"
+      stroke="#007AFF"
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M64 16.0801C77.32 16.8001 84 21.7201 84 40.0001V64.0001C84 80.0001 80 88.0001 60 88.0001H36C16 88.0001 12 80.0001 12 64.0001V40.0001C12 21.7601 18.68 16.8001 32 16.0801"
+      stroke="#007AFF"
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
  </svg>
-    
 );
 export default InventoryIcon;

--- a/src/assets/images/fsr-logo.png
+++ b/src/assets/images/fsr-logo.png
--- a/src/assets/images/roofing-company-houston.jpg
+++ b/src/assets/images/roofing-company-houston.jpg
--- a/src/components/Breadcrumbs/index.js
+++ b/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, Toolbar } from '@mui/material';
+import { Box, Breadcrumbs as MuiBreadcrumbs, Grid, Toolbar } from '@mui/material';
 import ArrowRight from 'assets/images/CarretArrowRightIcon';

 // Material Dashboard 2 PRO React components
@@ -53,7 +53,8 @@ const buildBreadcrumbs = (route, light) => {
  });
 };

-function Breadcrumbs({ route, light, children }) {
+function Breadcrumbs({ title, route, children }) {
+  const light = false;
  return (
    <Toolbar variant="dense">
      <MDBox
@@ -63,6 +64,19 @@ function Breadcrumbs({ route, light, children }) {
          // backgroundColor: '#fff'
        }}
      >
+        {title && (
+          <Box
+            component="div"
+            sx={{
+              fontSize: '22px',
+              letterSpacing: '0.01em',
+              color: '#000',
+              marginBottom: '15px'
+            }}
+          >
+            {title}
+          </Box>
+        )}
        <Grid container spacing={2} alignItems="center">
          <Grid item>
            <MuiBreadcrumbs
@@ -86,15 +100,15 @@ function Breadcrumbs({ route, light, children }) {
  );
 }

-// Setting default values for the props of Breadcrumbs
-Breadcrumbs.defaultProps = {
-  light: false
-};
+// // Setting default values for the props of Breadcrumbs
+// Breadcrumbs.defaultProps = {
+//   light: false
+// };

 // Typechecking props for the Breadcrumbs
 Breadcrumbs.propTypes = {
  route: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
-  light: PropTypes.bool,
+  title: PropTypes.string,
  children: PropTypes.node
 };

--- a/src/components/EnhancedTable/index.js
+++ b/src/components/EnhancedTable/index.js
@@ -11,7 +11,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import TablePagination from 'components/TablePagination';
-import { Dialog, DialogActions, MenuItem, Select } from '@mui/material';
+import { Grid, MenuItem, Select } from '@mui/material';

 const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
@@ -90,12 +90,6 @@ function EnhancedTable({
  filtersControl,
  resetFilters
 }) {
-  const [filtersOpen, setFiltersOpen] = React.useState(false);
-
-  const handleFiltersClose = () => {
-    setFiltersOpen(false);
-  };
-
  return (
    <>
      <Box
@@ -106,7 +100,9 @@ function EnhancedTable({
          overflow: 'hidden'
        }}
      >
-        <Box
+        <Grid
+          container
+          fullWidth
          sx={{
            display: 'flex',
            alignItems: 'center',
@@ -114,41 +110,15 @@ function EnhancedTable({
            padding: '16px'
          }}
        >
-          <Box>{/* <SearchBar /> */}</Box>
-          <Box sx={{ display: 'flex', columnGap: '15px' }}>
-            <MDButton
-              size="small"
-              variant="outlined"
-              color="primary"
-              sx={{
-                textTransform: 'capitalize',
-                minWidth: '60px',
-                minHeight: '44px',
-                fontWeight: '500'
-              }}
-              onClick={() => {
-                setFiltersOpen(true);
-              }}
-            >
-              Filter
-            </MDButton>
+          {/* <Box><SearchBar /></Box> */}
+          <Grid container item xs={12} spacing={5}>
            {filtersControl ? (
-              <Dialog open={filtersOpen} onClose={handleFiltersClose}>
+              <>
                {filtersControl}
-                <DialogActions>
+                <Grid item sx={4}>
                  <MDButton onClick={resetFilters}>Reset Filters</MDButton>
-                  <MDButton
-                    size="small"
-                    variant="outlined"
-                    color="primary"
-                    onClick={() => {
-                      setFiltersOpen(false);
-                    }}
-                  >
-                    Close
-                  </MDButton>
-                </DialogActions>
-              </Dialog>
+                </Grid>
+              </>
            ) : null}
            {/* <MDButton
              id="fade-button"
@@ -183,8 +153,8 @@ function EnhancedTable({
              <MenuItem>My account</MenuItem>
              <MenuItem>Logout</MenuItem>
            </Menu> */}
-          </Box>
-        </Box>
+          </Grid>
+        </Grid>
        {/* Table-row- */}
        <TableContainer component={Paper} sx={{ borderRadius: '0 !important', boxShadow: 'none' }}>
          <Table aria-label="collapsible table" sx={{ minWidth: 700 }}>
--- a/src/components/ImageUploadSingle/index.js
+++ b/src/components/ImageUploadSingle/index.js
@@ -25,7 +25,7 @@ function ImageUploadSingle({ heading, accept, multiple, images, setImages }) {
              cursor: 'pointer',
              position: 'relative',
              textAlign: 'center',
-              minHeight: pxToRem(200),
+              height: pxToRem(250),
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
@@ -72,14 +72,14 @@ function ImageUploadSingle({ heading, accept, multiple, images, setImages }) {
              cursor: 'pointer',
              position: 'relative',
              textAlign: 'center',
-              minHeight: pxToRem(200),
+              height: pxToRem(250),
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '16px'
            }}
          >
-            <img src={images[0].src} alt="" width="100%" height="100%" />
+            <img src={images[0].src} alt="" height="100%" />
            <Button
              sx={{
                backgroundColor: '#fff !important',
--- a/src/layouts/AuthLayout/index.js
+++ b/src/layouts/AuthLayout/index.js
@@ -13,6 +13,8 @@ import PageLayout from 'layouts/PageLayout';
 // Material Dashboard 2 PRO React context
 import { useMaterialUIController } from 'context';

+import companyImage from 'assets/images/fsr-logo.png';
+
 function AuthLayout({ header, title, description, illustration, children }) {
  const [controller] = useMaterialUIController();
  const { darkMode } = controller;
@@ -34,12 +36,29 @@ function AuthLayout({ header, title, description, illustration, children }) {
            borderRadius="lg"
            ml={2}
            mt={2}
-            sx={{ backgroundImage: `url(${illustration})` }}
+            sx={{
+              backgroundImage: `url(${illustration})`,
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center'
+            }}
          />
        </Grid>
        <Grid item xs={11} sm={8} md={6} lg={4} xl={3} sx={{ mx: 'auto' }}>
          <MDBox display="flex" flexDirection="column" justifyContent="center" height="100vh">
            <MDBox py={3} px={3} textAlign="center">
+              <MDBox
+                display={{ xs: 'none', lg: 'flex' }}
+                width="350px"
+                height="117px"
+                borderRadius="lg"
+                ml={2}
+                my={5}
+                sx={{
+                  backgroundImage: `url(${companyImage})`,
+                  backgroundRepeat: 'no-repeat',
+                  backgroundPosition: 'center'
+                }}
+              />
              {!header ? (
                <>
                  <MDBox mb={1} textAlign="center">
--- a/src/pages/addNewProduct/index.js
+++ b/src/pages/addNewProduct/index.js
@@ -135,10 +135,6 @@ function AddNewItem() {
      );
  }, []);

-  const [pFam, setPFam] = React.useState(null);
-  const primaryFamily = useSelector(WidgetSelectors.getWidgetFamiliesByInventoryId(inventoryId));
-  const secondaryFamily = useSelector(WidgetSelectors.getWidgetsByParentId(pFam));
-
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: itemData,
@@ -217,11 +213,17 @@ function AddNewItem() {
    }
  });

+  const primaryFamily = useSelector(WidgetSelectors.getWidgetFamiliesByInventoryId(inventoryId));
+  const secondaryFamily = useSelector(
+    WidgetSelectors.getWidgetsByParentId(formik.values.primaryWidgetFamilyId)
+  );
+
  return (
    <>
      <DashboardLayout>
        <DashboardNavbar />
        <Breadcrumbs
+          title={`${widgetName} Details`}
          route={[
            { name: 'Home', path: '/home' },
            { name: 'Setup', path: '/setup' },
@@ -440,10 +442,7 @@ function AddNewItem() {
                          formik.touched.primaryWidgetFamilyId &&
                          Boolean(formik.errors.primaryWidgetFamilyId)
                        }
-                        onChange={(e, ...rest) => {
-                          setPFam(e.target.value);
-                          formik.handleChange(e, ...rest);
-                        }}
+                        onChange={formik.handleChange}
                      >
                        <MenuItem key={'none'} value={''}>
                          None Selected
@@ -497,7 +496,7 @@ function AddNewItem() {
                {itemId ? (
                  <ImageUploadMultiple
                    multiple
-                    heading="Upload Product Image"
+                    heading={`Upload ${widgetName} Image`}
                    accept="image/*"
                    images={formik.values.images}
                    setImages={(images) => {
@@ -507,7 +506,7 @@ function AddNewItem() {
                ) : (
                  <ImageUploadMultiple
                    multiple
-                    heading="Upload Product Image"
+                    heading={`Upload ${widgetName} Image`}
                    accept="image/*"
                    images={formik.values.images}
                    setImages={(images) => {
@@ -516,7 +515,7 @@ function AddNewItem() {
                  />
                )}
              </Box>
-              <Box
+              {/* <Box
                sx={{
                  display: 'flex',
                  justifyContent: 'center',
@@ -539,7 +538,7 @@ function AddNewItem() {
                <MDButton disabled size="large" color="primary" variant="outlined">
                  import
                </MDButton>
-              </Box>
+              </Box> */}
              <Box
                component="div"
                sx={{
@@ -614,11 +613,18 @@ function AddNewItem() {
                  marginBottom: '30px'
                }}
              >
-                <MDButton size="medium" color="error" variant="outlined">
+                <MDButton
+                  size="medium"
+                  color="error"
+                  variant="outlined"
+                  onClick={() => {
+                    navigate('/setup/inventory');
+                  }}
+                >
                  Cancel
                </MDButton>
                <MDButton size="medium" color="primary" variant="contained" type="submit">
-                  Add {widgetName}
+                  Save
                </MDButton>
              </Box>
            </Box>
--- a/src/pages/authentication/index.js
+++ b/src/pages/authentication/index.js
@@ -18,7 +18,7 @@ import AuthActions from 'redux/AuthRedux';
 import { API } from 'constant';

 // Image
-import bgImage from 'assets/images/illustrations/illustration-reset.jpg';
+import bgImage from 'assets/images/roofing-company-houston.jpg';
 import { useFormik } from 'formik';

 import schema from 'services/ValidationServices';
@@ -35,8 +35,7 @@ function LoginScreen() {
      rememberMe: true
    },
    validationSchema: schema.login,
-    onSubmit: (values, { resetForm, setSubmitting }) =>
-    {
+    onSubmit: (values, { resetForm, setSubmitting }) => {
      const onFailedLogin = (errorMessage) => {
        resetForm();
        setSubmitting(false);
--- a/src/pages/createEditUser/index.js
+++ b/src/pages/createEditUser/index.js
@@ -31,6 +31,7 @@ import MDInput from 'components/MDInput';
 import { API } from 'constant';
 import UserIcon from 'assets/images/userIcon.png';
 import EditIcon from 'assets/images/edit-icon.png';
+import Breadcrumbs from 'components/Breadcrumbs';

 const useStyles = makeStyles(() => ({
  labelSize: {
@@ -91,142 +92,251 @@ function CreateEditUser(props) {
  }, []);

  useEffect(() => {
-    (!warehouses || warehouses.length === 0) && dispatch(WarehouseActions.warehouseDataAction({loader: 'loading-request', slug: API.GET_WAREHOUSE_DATA,method: 'get'}));
-    (!inventories || inventories.length === 0) && dispatch(InventoryActions.getInventoryAction({loader: 'loading-request', slug: API.GET_INVENTORY,method: 'get'}));
-    (!roles || roles.length === 0) && dispatch(RolesActions.getRolesAction({loader: 'loading-request', slug: API.GET_ROLES_DATA, method: 'get'}));
-    (!permissions || permissions.length === 0) && dispatch(PermissionsActions.getPermissionsAction({loader: 'loading-request', slug: API.GET_PERMISSIONS_DATA, method: 'get'}));
-    (!actions || actions.length === 0) && dispatch(PermissionsActions.getActionsAction({loader: 'loading-request', slug: API.GET_ACTIONS_DATA, method: 'get'}));
+    (!warehouses || warehouses.length === 0) &&
+      dispatch(
+        WarehouseActions.warehouseDataAction({
+          loader: 'loading-request',
+          slug: API.GET_WAREHOUSE_DATA,
+          method: 'get'
+        })
+      );
+    (!inventories || inventories.length === 0) &&
+      dispatch(
+        InventoryActions.getInventoryAction({
+          loader: 'loading-request',
+          slug: API.GET_INVENTORY,
+          method: 'get'
+        })
+      );
+    (!roles || roles.length === 0) &&
+      dispatch(
+        RolesActions.getRolesAction({
+          loader: 'loading-request',
+          slug: API.GET_ROLES_DATA,
+          method: 'get'
+        })
+      );
+    (!permissions || permissions.length === 0) &&
+      dispatch(
+        PermissionsActions.getPermissionsAction({
+          loader: 'loading-request',
+          slug: API.GET_PERMISSIONS_DATA,
+          method: 'get'
+        })
+      );
+    (!actions || actions.length === 0) &&
+      dispatch(
+        PermissionsActions.getActionsAction({
+          loader: 'loading-request',
+          slug: API.GET_ACTIONS_DATA,
+          method: 'get'
+        })
+      );
  }, []);

  const formik = useFormik({
-    initialValues: context === 'new' ? {
-      fullName: '',
-      phoneNumber: '',
-      email: '',
-      password: '',
-      roles: '',
-      warehouses: '',
-      inventories: '',
-      actions: '',
-      visibilities: '',
-      isActive: true,
-      createdBy: currentUser ? currentUser.fullName : '',
-      createdAt: new Date(),
-      updatedBy: currentUser ? currentUser.fullName : '',
-      updatedAt: new Date()
-    } : {
-      fullName: editedUser ? editedUser.fullName : '',
-      phoneNumber: editedUser ? editedUser.phoneNumber : '',
-      email: editedUser ? editedUser.email : '',
-      password: '',
-      roles: editedUser ? editedUser.roles.map(role => role.name).join(', ') : '',
-      warehouses: editedUser?.permissions?.warehouseScopes ? editedUser.permissions.warehouseScopes.map(sc => sc.id).join(',') : '',
-      inventories: editedUser?.permissions?.inventoryScopes ? editedUser.permissions.inventoryScopes.map(sc => sc.id).join(',') : '',
-      actions: editedUser?.permissions?.actions ? editedUser.permissions.actions.join(',') : '',
-      visibilities: editedUser?.permissions?.allowedUIModules ? editedUser.permissions.allowedUIModules.join(',') : '',
-      isActive: editedUser && editedUser.isActive !== undefined ? editedUser.isActive : true,
-      createdBy: editedUser ? editedUser.createdBy?.fullName : '',
-      createdAt: editedUser ? editedUser.createdAt : '',
-      updatedBy: editedUser ? editedUser.updatedBy?.fullName : '',
-      updatedAt: editedUser ? editedUser.updatedAt : ''
-    },
+    initialValues:
+      context === 'new'
+        ? {
+            fullName: '',
+            phoneNumber: '',
+            email: '',
+            password: '',
+            roles: '',
+            warehouses: '',
+            inventories: '',
+            actions: '',
+            visibilities: '',
+            isActive: true,
+            createdBy: currentUser ? currentUser.fullName : '',
+            createdAt: new Date(),
+            updatedBy: currentUser ? currentUser.fullName : '',
+            updatedAt: new Date()
+          }
+        : {
+            fullName: editedUser ? editedUser.fullName : '',
+            phoneNumber: editedUser ? editedUser.phoneNumber : '',
+            email: editedUser ? editedUser.email : '',
+            password: '',
+            roles: editedUser ? editedUser.roles.map((role) => role.name).join(', ') : '',
+            warehouses: editedUser?.permissions?.warehouseScopes
+              ? editedUser.permissions.warehouseScopes.map((sc) => sc.id).join(',')
+              : '',
+            inventories: editedUser?.permissions?.inventoryScopes
+              ? editedUser.permissions.inventoryScopes.map((sc) => sc.id).join(',')
+              : '',
+            actions: editedUser?.permissions?.actions
+              ? editedUser.permissions.actions.join(',')
+              : '',
+            visibilities: editedUser?.permissions?.allowedUIModules
+              ? editedUser.permissions.allowedUIModules.join(',')
+              : '',
+            isActive: editedUser && editedUser.isActive !== undefined ? editedUser.isActive : true,
+            createdBy: editedUser ? editedUser.createdBy?.fullName : '',
+            createdAt: editedUser ? editedUser.createdAt : '',
+            updatedBy: editedUser ? editedUser.updatedBy?.fullName : '',
+            updatedAt: editedUser ? editedUser.updatedAt : ''
+          },
    validationSchema: schema.createUser,
-    onSubmit: (values, { setSubmitting }) =>
-    {
+    onSubmit: (values, { setSubmitting }) => {
      const onValidationFailed = () => {
        setSubmitting(false);
      };
      const onSuccessfulSubmission = () => {
        navigate('/setup/users-access');
      };
-      const adaptPayload = values => {
-        const valuesClone = {...values};
+      const adaptPayload = (values) => {
+        const valuesClone = { ...values };
        valuesClone.permissions = {};
-        valuesClone.permissions.inventoryScopes = values.inventories ? values.inventories.split(',').map(inv => ({id: inv, type: 'Inventory'})) : [];
-        valuesClone.permissions.warehouseScopes = values.warehouses ? values.warehouses.split(',').map(wh => ({id: wh, type: 'Warehouse'})) : [];
+        valuesClone.permissions.inventoryScopes = values.inventories
+          ? values.inventories.split(',').map((inv) => ({ id: inv, type: 'Inventory' }))
+          : [];
+        valuesClone.permissions.warehouseScopes = values.warehouses
+          ? values.warehouses.split(',').map((wh) => ({ id: wh, type: 'Warehouse' }))
+          : [];
        valuesClone.permissions.actions = values.actions ? values.actions.split(',') : [];
-        valuesClone.permissions.allowedUIModules = values.visibilities ? values.visibilities.split(',') : [];
+        valuesClone.permissions.allowedUIModules = values.visibilities
+          ? values.visibilities.split(',')
+          : [];
        delete valuesClone.inventories;
        delete valuesClone.warehouses;
        delete valuesClone.actions;
        delete valuesClone.visibilities;
        return valuesClone;
      };
-      values.roles = selectedRoles && selectedRoles.length > 0 ? selectedRoles.map(role => role._id) : [];
+      values.roles =
+        selectedRoles && selectedRoles.length > 0 ? selectedRoles.map((role) => role._id) : [];
      dispatch(
        UsersActions.createUserAction({
          loader: 'loading-request',
-          slug: context === 'edit' ? API.UPDATE_USER.replace(':id', editedUser._id): API.CREATE_USER,
+          slug:
+            context === 'edit' ? API.UPDATE_USER.replace(':id', editedUser._id) : API.CREATE_USER,
          method: 'post',
          data: adaptPayload(values),
          onValidationFailed,
          onSuccessfulSubmission,
-          toastMessage: context === 'edit' ? 'Updated user __placeholder__successfully' : 'Added user __placeholder__successfully'
+          toastMessage:
+            context === 'edit'
+              ? 'Updated user __placeholder__successfully'
+              : 'Added user __placeholder__successfully'
        })
      );
    }
  });

-  const handleMultiSelectChange = e => {
+  const handleMultiSelectChange = (e) => {
    const uniqueRoles = [];
-    e.target.value.forEach(role => {
-      const roleIndex = uniqueRoles.findIndex(uRole => uRole._id === role._id);
+    e.target.value.forEach((role) => {
+      const roleIndex = uniqueRoles.findIndex((uRole) => uRole._id === role._id);
      if (roleIndex > -1) {
        uniqueRoles.splice(roleIndex, 1);
      } else {
        uniqueRoles.push(role);
      }
    });
-    formik.handleChange('roles')(uniqueRoles.map(role => role.name).join());
+    formik.handleChange('roles')(uniqueRoles.map((role) => role.name).join());
    setSelectedRoles(uniqueRoles);
  };

  return (
    <DashboardLayout className={classes.createEditUserGlobal}>
      <DashboardNavbar />
-      <MDBox component='form' role='form' px={2} sx={{ backgroundColor: '#fff' }} onSubmit={formik.handleSubmit}>
-        <MDBox mx={4} sx={{ border: '1px solid #C4C4C4', borderRadius: '4px', padding: '30px' }}>
+      <Breadcrumbs
+        title="User Details"
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Access', path: '/setup/users-access' },
+          { name: 'User Details' }
+        ]}
+      />
+      <MDBox component="form" role="form" px={2} onSubmit={formik.handleSubmit}>
+        <MDBox
+          mx={4}
+          sx={{
+            border: '1px solid #C4C4C4',
+            borderRadius: '4px',
+            padding: '30px',
+            backgroundColor: '#fff'
+          }}
+        >
          <MDBox sx={{ width: '50%', margin: 'auto' }}>
            <MDBox sx={{ width: '120px', margin: 'auto', position: 'relative' }}>
-              <img src={UserIcon} alt='img' />
+              <MDBox
+                sx={{
+                  width: '120px',
+                  height: '120px',
+                  backgroundColor: '#333333',
+                  borderRadius: '50%'
+                }}
+              />
              <MDBox sx={{ position: 'absolute', bottom: '0', right: '0', cursor: 'pointer' }}>
-                <img src={EditIcon} alt='img' />
+                <img src={EditIcon} alt="img" />
              </MDBox>
            </MDBox>
            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component='div' sx={{}} className={classes.labelSize}>
+              <Box component="div" sx={{}} className={classes.labelSize}>
                User Name
              </Box>
-              <MDInput fullWidth value={formik.values.fullName} name='fullName' type='text'
-                variant='outlined' error={formik.touched.fullName && Boolean(formik.errors.fullName)}
-                helperText={formik.touched.fullName && formik.errors.fullName} onChange={formik.handleChange} />
+              <MDInput
+                fullWidth
+                value={formik.values.fullName}
+                name="fullName"
+                type="text"
+                variant="outlined"
+                error={formik.touched.fullName && Boolean(formik.errors.fullName)}
+                helperText={formik.touched.fullName && formik.errors.fullName}
+                onChange={formik.handleChange}
+              />
            </MDBox>
            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component='div' sx={{}} className={classes.labelSize}>
+              <Box component="div" sx={{}} className={classes.labelSize}>
                Email
              </Box>
-              <MDInput fullWidth disabled={context === 'edit'} value={formik.values.email} name='email' type='email'
-                variant='outlined' error={formik.touched.email && Boolean(formik.errors.email)}
-                helperText={formik.touched.email && formik.errors.email} onChange={formik.handleChange} />
+              <MDInput
+                fullWidth
+                disabled={context === 'edit'}
+                value={formik.values.email}
+                name="email"
+                type="email"
+                variant="outlined"
+                error={formik.touched.email && Boolean(formik.errors.email)}
+                helperText={formik.touched.email && formik.errors.email}
+                onChange={formik.handleChange}
+              />
            </MDBox>
            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component='div' sx={{}} className={classes.labelSize}>
+              <Box component="div" sx={{}} className={classes.labelSize}>
                Password
              </Box>
-              <MDInput fullWidth value={formik.values.password} name='password' type='password'
-                variant='outlined' error={formik.touched.password && Boolean(formik.errors.password)}
-                helperText={formik.touched.password && formik.errors.password} onChange={formik.handleChange} />
+              <MDInput
+                fullWidth
+                value={formik.values.password}
+                name="password"
+                type="password"
+                variant="outlined"
+                error={formik.touched.password && Boolean(formik.errors.password)}
+                helperText={formik.touched.password && formik.errors.password}
+                onChange={formik.handleChange}
+              />
            </MDBox>
            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component='div' sx={{}} className={classes.labelSize}>
+              <Box component="div" sx={{}} className={classes.labelSize}>
                Phone Number
              </Box>
-              <MDInput fullWidth value={formik.values.phoneNumber} name='phoneNumber' type='text'
-                variant='outlined' error={formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber)}
-                helperText={formik.touched.phoneNumber && formik.errors.phoneNumber} onChange={formik.handleChange} />
+              <MDInput
+                fullWidth
+                value={formik.values.phoneNumber}
+                name="phoneNumber"
+                type="text"
+                variant="outlined"
+                error={formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber)}
+                helperText={formik.touched.phoneNumber && formik.errors.phoneNumber}
+                onChange={formik.handleChange}
+              />
            </MDBox>
            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component='div' sx={{}} className={classes.labelSize}>
+              <Box component="div" sx={{}} className={classes.labelSize}>
                Role
              </Box>
              <Box sx={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}>
@@ -234,16 +344,25 @@ function CreateEditUser(props) {
                  <Select
                    multiple
                    displayEmpty
-                    name='roles'
+                    name="roles"
                    value={selectedRoles}
                    input={<OutlinedInput />}
                    error={formik.touched.roles && Boolean(formik.errors.roles)}
-                    renderValue={() => selectedRoles?.length === 0 ? 'Please select a role' : selectedRoles?.map(role => role.name).join(', ')}
+                    renderValue={() =>
+                      selectedRoles?.length === 0
+                        ? 'Please select a role'
+                        : selectedRoles?.map((role) => role.name).join(', ')
+                    }
                    inputProps={{ 'aria-label': 'Without label' }}
-                    sx={{width: '100%'}}
+                    sx={{ width: '100%' }}
                    onChange={handleMultiSelectChange}
                  >
-                    {roles && roles.map((role, key) => <MenuItem key={key} value={role}>{role.name}</MenuItem>)}
+                    {roles &&
+                      roles.map((role, key) => (
+                        <MenuItem key={key} value={role}>
+                          {role.name}
+                        </MenuItem>
+                      ))}
                  </Select>
                </Box>
                <Box
@@ -258,7 +377,7 @@ function CreateEditUser(props) {
                  }}
                >
                  <Box
-                    component='div'
+                    component="div"
                    sx={{
                      fontSize: '16px',
                      lineHeight: '20px',
@@ -278,7 +397,11 @@ function CreateEditUser(props) {
                      left: '20px'
                    }}
                  >
-                    <Switch name='isActive' checked={formik.values.isActive} onChange={formik.handleChange} />
+                    <Switch
+                      name="isActive"
+                      checked={formik.values.isActive}
+                      onChange={formik.handleChange}
+                    />
                  </Box>
                </Box>
              </Box>
@@ -287,28 +410,42 @@ function CreateEditUser(props) {
              <Grid item xs={12}>
                <Grid container spacing={2} className={classes.margin}>
                  <Grid item xs={6}>
-                    <Box component='div' className={classes.labelSize}>
+                    <Box component="div" className={classes.labelSize}>
                      Created By
                    </Box>
-                    <MDInput fullWidth disabled name='createdBy' type='text' value={formik.values.createdBy} variant='outlined' />
+                    <MDInput
+                      fullWidth
+                      disabled
+                      name="createdBy"
+                      type="text"
+                      value={formik.values.createdBy}
+                      variant="outlined"
+                    />
                  </Grid>
                  <Grid item xs={6}>
-                    <Box component='div' className={classes.labelSize}>
+                    <Box component="div" className={classes.labelSize}>
                      Date &amp; Time
                    </Box>
-                    <DateTimeInput disabled name='createdAt' value={formik.values.createdAt} />
+                    <DateTimeInput disabled name="createdAt" value={formik.values.createdAt} />
                  </Grid>
                  <Grid item xs={6}>
-                    <Box component='div' className={classes.labelSize}>
+                    <Box component="div" className={classes.labelSize}>
                      Last Updated by
                    </Box>
-                    <MDInput fullWidth disabled name='updatedBy' type='text' value={formik.values.updatedBy} variant='outlined' />
+                    <MDInput
+                      fullWidth
+                      disabled
+                      name="updatedBy"
+                      type="text"
+                      value={formik.values.updatedBy}
+                      variant="outlined"
+                    />
                  </Grid>
                  <Grid item xs={6}>
-                    <Box component='div' className={classes.labelSize}>
+                    <Box component="div" className={classes.labelSize}>
                      Date &amp; Time
                    </Box>
-                    <DateTimeInput disabled name='updatedAt' value={formik.values.updatedAt} />
+                    <DateTimeInput disabled name="updatedAt" value={formik.values.updatedAt} />
                  </Grid>
                </Grid>
              </Grid>
@@ -316,33 +453,59 @@ function CreateEditUser(props) {
          </MDBox>
        </MDBox>
        <Grid container spacing={4} sx={{ marginTop: '-6px' }}>
-          <AllocationManager name='warehouses' gridStyleOverride={{ paddingLeft: '4rem !important' }} initlist={formik.values.warehouses}
-            list={warehouses} matchProp={{a: '_id'}} title='Warehouse' onChange={val => formik.handleChange('warehouses')(val)} />
-          <AllocationManager name='inventories' gridStyleOverride={{ paddingRight: '2rem' }} initlist={formik.values.inventories}
-            list={inventories}  matchProp={{a: '_id'}} title='Inventory' onChange={val => formik.handleChange('inventories')(val)} />
+          <AllocationManager
+            name="warehouses"
+            gridStyleOverride={{ paddingLeft: '4rem !important' }}
+            initlist={formik.values.warehouses}
+            list={warehouses}
+            matchProp={{ a: '_id' }}
+            title="Warehouse"
+            onChange={(val) => formik.handleChange('warehouses')(val)}
+          />
+          <AllocationManager
+            name="inventories"
+            gridStyleOverride={{ paddingRight: '2rem' }}
+            initlist={formik.values.inventories}
+            list={inventories}
+            matchProp={{ a: '_id' }}
+            title="Inventory"
+            onChange={(val) => formik.handleChange('inventories')(val)}
+          />
        </Grid>
        <Grid container spacing={2} sx={{ marginTop: '12px', paddingLeft: '2rem' }}>
-          <Toggles name='actions' title='Actions' toggles={actions} inittoggles={formik.values.actions} onChange={val => formik.handleChange('actions')(val)} />
-          <Toggles name='visibilities' title='Application' toggles={permissions} inittoggles={formik.values.visibilities} onChange={val => formik.handleChange('visibilities')(val)} />
+          <Toggles
+            name="actions"
+            title="Actions"
+            toggles={actions}
+            inittoggles={formik.values.actions}
+            onChange={(val) => formik.handleChange('actions')(val)}
+          />
+          <Toggles
+            name="visibilities"
+            title="Application"
+            toggles={permissions}
+            inittoggles={formik.values.visibilities}
+            onChange={(val) => formik.handleChange('visibilities')(val)}
+          />
        </Grid>
        <MDBox
-          display='flex'
-          justifyContent='center'
-          alignItems='center'
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
          lineHeight={1}
          sx={{ marginBottom: '15px', marginTop: '45px', paddingBottom: '30px' }}
        >
          <MDButton
-            size='medium'
-            color='error'
-            variant='outlined'
-            type='button'
+            size="medium"
+            color="error"
+            variant="outlined"
+            type="button"
            sx={{ marginRight: '15px' }}
            onClick={() => navigate('/setup/users-access')}
          >
            Cancel
          </MDButton>
-          <MDButton size='medium' color='primary' variant='contained' type='submit'>
+          <MDButton size="medium" color="primary" variant="contained" type="submit">
            {context === 'new' ? 'Create' : 'Save'}
          </MDButton>
        </MDBox>
--- a/src/pages/createUserRole/index.js
+++ b/src/pages/createUserRole/index.js
@@ -16,6 +16,7 @@ import EditIcon from 'assets/images/edit-icon.png';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
+import Breadcrumbs from 'components/Breadcrumbs';

 const useStyles = makeStyles(() => ({
  labelSize: {
@@ -66,11 +67,27 @@ function CreateUserRole() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
+      <Breadcrumbs
+        title="Role Details"
+        route={[
+          { name: 'Home', path: '/home' },
+          { name: 'Setup', path: '/setup' },
+          { name: 'Access', path: '/setup/users-access' },
+          { name: 'Role Details' }
+        ]}
+      />
      <MDBox px={2} sx={{ backgroundColor: '#fff' }}>
        <MDBox mx={2} sx={{ border: '1px solid #C4C4C4', borderRadius: '4px', padding: '30px' }}>
          <MDBox sx={{ width: '50%', margin: 'auto' }}>
            <MDBox sx={{ width: '120px', margin: 'auto', position: 'relative' }}>
-              <img src={UserIcon} alt="img" />
+              <MDBox
+                sx={{
+                  width: '120px',
+                  height: '120px',
+                  backgroundColor: '#333333',
+                  borderRadius: '50%'
+                }}
+              />
              <MDBox sx={{ position: 'absolute', bottom: '0', right: '0', cursor: 'pointer' }}>
                <img src={EditIcon} alt="img" />
              </MDBox>
--- a/src/pages/editWarehouseDetails/index.js
+++ b/src/pages/editWarehouseDetails/index.js
@@ -37,6 +37,7 @@ import Breadcrumbs from 'components/Breadcrumbs';
 import { WarehouseSelectors } from 'redux/WarehouseRedux';
 import { InventorySelectors } from 'redux/InventoryRedux';
 import InventoryActions from 'redux/InventoryRedux';
+import { useNavigate } from 'react-router-dom';

 const bottomButtonStyling = {
  width: '100%',
@@ -317,6 +318,7 @@ const WarehouseNestedDetails = () => {

 function EditWarehouseDetails() {
  const { warehouseId } = useParams();
+  const navigate = useNavigate();
  const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetailById(warehouseId));

  const inventoryTypes = useSelector(InventorySelectors.getInventoryDetail);
@@ -375,6 +377,7 @@ function EditWarehouseDetails() {
      <DashboardLayout>
        <DashboardNavbar />
        <Breadcrumbs
+          title="Edit Warehouse Details"
          route={[
            { name: 'Home', path: '/home' },
            { name: 'Setup', path: '/setup' },
@@ -385,17 +388,6 @@ function EditWarehouseDetails() {
        <Box mx={3} my={3}>
          <form onSubmit={formik.handleSubmit}>
            <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
-              <Box
-                component="div"
-                sx={{
-                  fontSize: '22px',
-                  letterSpacing: '0.01em',
-                  color: '#000',
-                  marginBottom: '30px'
-                }}
-              >
-                Form to Input
-              </Box>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6} md={6}>
                  <Box component="div" sx={{ marginBottom: '15px' }}>
@@ -545,6 +537,16 @@ function EditWarehouseDetails() {
                  columnGap: '20px'
                }}
              >
+                <MDButton
+                  size="medium"
+                  color="error"
+                  variant="outlined"
+                  onClick={() => {
+                    navigate('/setup/warehouse');
+                  }}
+                >
+                  CANCEL
+                </MDButton>
                {/* ---edit-- */}
                <MDButton size="large" color="primary" variant="outlined" type="submit">
                  SAVE
--- a/src/pages/homepage/index.js
+++ b/src/pages/homepage/index.js
@@ -37,7 +37,7 @@ function HomepageScreen() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
-      <Breadcrumbs route={[{ name: 'Home', path: '/home' }]} />
+      <Breadcrumbs title="Warehouse Management System" route={[{ name: 'Home', path: '/home' }]} />
      <TileBasic tiles={data} />
    </DashboardLayout>
  );
--- a/src/pages/inventory/index.js
+++ b/src/pages/inventory/index.js
@@ -1,7 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
-import { Box, Grid, MenuItem, Select } from '@mui/material';
+import {
+  Box,
+  FormControlLabel,
+  Grid,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  useRadioGroup,
+  Select
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
 import MDInput from 'components/MDInput';
 import Switch from 'components/Switch';
 import MDTypography from 'components/MDTypography';
@@ -18,6 +29,8 @@ import { useParams } from 'react-router-dom';
 import { InventorySelectors } from 'redux/InventoryRedux';
 import { useNavigate } from 'react-router-dom';
 import WidgetNestedDataTable from 'components/WidgetNestedDataTable';
+import { GetIconFromSlug } from 'utils/inventorySlugTools';
+import { iconSlugs } from 'utils/inventorySlugTools';

 const customStyles = {
  labelSize: {
@@ -63,13 +76,34 @@ const definedPolicies = [
  {
    text: 'Alerting',
    key: 'alerting'
-  },
-  {
-    text: 'Location',
-    key: 'preferredLocations'
  }
+  // {
+  //   text: 'Location',
+  //   key: 'preferredLocations'
+  // }
 ];

+const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
+  ({ theme, checked }) => ({
+    '.MuiFormControlLabel-label': checked && {
+      border: `1px solid ${theme.palette.primary.light}`,
+      borderRadius: '10px'
+    }
+  })
+);
+
+function MyFormControlLabel(props) {
+  const radioGroup = useRadioGroup();
+  let checked = false;
+  if (radioGroup) {
+    checked = radioGroup.value === props.value;
+  }
+  return <StyledFormControlLabel checked={checked} {...props} />;
+}
+MyFormControlLabel.propTypes = {
+  value: PropTypes.any
+};
+
 function InventoryScreen() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
@@ -99,6 +133,7 @@ function InventoryScreen() {
      ? {
          name: currentInventoryData.name,
          widgetName: currentInventoryData.widgetName,
+          icon_slug: currentInventoryData.icon_slug,
          policies: {
            orderTracking: currentInventoryData.policies.orderTracking,
            alerting: currentInventoryData.policies.alerting,
@@ -110,11 +145,12 @@ function InventoryScreen() {
      : {
          name: '',
          widgetName: '',
+          icon_slug: '',
          policies: {
            orderTracking: false,
            alerting: false,
            replenishment: false,
-            preferredLocations: false,
+            preferredLocations: false, // TODO: change later
            inventory_process: 'CCR'
          }
        },
@@ -130,7 +166,7 @@ function InventoryScreen() {
              navigateTo,
              data: {
                ...values,
-                icon_slug: 'testslug'
+                icon_slug: values.icon_slug
              }
            })
          )
@@ -142,7 +178,7 @@ function InventoryScreen() {
              navigateTo,
              data: {
                ...values,
-                icon_slug: 'testslug'
+                icon_slug: values.icon_slug
              }
            })
          );
@@ -154,6 +190,7 @@ function InventoryScreen() {
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title="Inventory Details"
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
@@ -258,7 +295,31 @@ function InventoryScreen() {
                </MDBox>
              </Grid>
              <Grid item xs={12} sm={6} md={6}>
-                icon slugs selector
+                <Box
+                  sx={{
+                    width: 400,
+                    height: 300,
+                    padding: '20px',
+                    border: '1px solid #D2D6DA'
+                  }}
+                >
+                  <RadioGroup
+                    row
+                    aria-labelledby="demo-error-radios"
+                    name="icon_slug"
+                    value={formik.values.icon_slug}
+                    onChange={formik.handleChange}
+                  >
+                    {iconSlugs.map((iconSlug) => (
+                      <MyFormControlLabel
+                        key={iconSlug}
+                        value={iconSlug}
+                        control={<Radio style={{ display: 'none' }} />}
+                        label={GetIconFromSlug(iconSlug)}
+                      />
+                    ))}
+                  </RadioGroup>
+                </Box>
              </Grid>
              <MDBox sx={{ ml: 'auto', mr: 'auto', mt: 3 }}>
                <MDButton
@@ -269,12 +330,12 @@ function InventoryScreen() {
                    navigate('/setup/inventory');
                  }}
                >
-                  {'CANCEL'}
+                  {'CLOSE'}
                </MDButton>
                <MDButton sx={{ ml: 3 }} color="primary" variant="outlined" type="submit">
                  {'SAVE'}
                </MDButton>
-                <MDButton
+                {/* <MDButton
                  sx={{ ml: 3 }}
                  color="primary"
                  onClick={() => {
@@ -284,7 +345,7 @@ function InventoryScreen() {
                  }}
                >
                  {'ADD ITEMS'}
-                </MDButton>
+                </MDButton> */}
              </MDBox>
            </Grid>
          </MDBox>
--- a/src/pages/itemListing/index.js
+++ b/src/pages/itemListing/index.js
@@ -14,7 +14,7 @@ import EnhancedTable from 'components/EnhancedTable';
 import { useNavigate } from 'react-router-dom';
 import WidgetActions from 'redux/WidgetRedux';
 import { WidgetSelectors } from 'redux/WidgetRedux';
-import { DialogContent, DialogContentText, DialogTitle, MenuItem, Select } from '@mui/material';
+import { Grid, MenuItem, Select } from '@mui/material';

 const tHeads = [
  { key: 'name', name: '' },
@@ -80,6 +80,7 @@ function ItemListing() {
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title={`List of ${widgetName}s`}
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
@@ -88,8 +89,7 @@ function ItemListing() {
        ]}
      />

-      <MDBox px={2} py={3}>
-        List of {widgetName}s{/* <pre>{JSON.stringify(data, null, 4)}</pre> */}
+      <MDBox px={5} py={3}>
        <EnhancedTable
          count={count}
          page={page}
@@ -105,21 +105,22 @@ function ItemListing() {
          }}
          filtersControl={
            <>
-              <DialogTitle>Add filters</DialogTitle>
-              <DialogContent>
-                <DialogContentText>Filter by family</DialogContentText>
+              <Grid item sx={4}>
                <Select
                  select
-                  fullWidth
                  variant="outlined"
                  value={pFam}
+                  inputProps={{ 'aria-label': 'Without label' }}
+                  sx={{
+                    width: 200
+                  }}
                  onChange={(e) => {
                    setSFam('');
                    setPFam(e.target.value);
                  }}
                >
                  <MenuItem key={'none'} value={''}>
-                    None Selected
+                    Widget family L1
                  </MenuItem>
                  {primaryFamilies &&
                    primaryFamilies.map((fam) => (
@@ -128,17 +129,23 @@ function ItemListing() {
                      </MenuItem>
                    ))}
                </Select>
+              </Grid>
+              <Grid item sx={4}>
                <Select
                  select
                  fullWidth
                  variant="outlined"
                  value={sFam}
+                  inputProps={{ 'aria-label': 'Without label' }}
+                  sx={{
+                    width: 200
+                  }}
                  onChange={(e) => {
                    setSFam(e.target.value);
                  }}
                >
                  <MenuItem key={'none'} value={''}>
-                    None Selected
+                    Widget family L2
                  </MenuItem>
                  {secondaryFamilies &&
                    secondaryFamilies.map((fam) => (
@@ -147,14 +154,14 @@ function ItemListing() {
                      </MenuItem>
                    ))}
                </Select>
-              </DialogContent>
+              </Grid>
            </>
          }
          data={
            data
              ? data.map((item) => {
                  return {
-                    name: item._id,
+                    _id: item._id,
                    commonName: item.commonName,
                    formalName: item.formalName,
                    description: item.description,
--- a/src/pages/labeling/index.js
+++ b/src/pages/labeling/index.js
@@ -186,6 +186,7 @@ function LabelingScreen() {
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title="Search And Print Location Labels"
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
--- a/src/pages/labellingHome/index.js
+++ b/src/pages/labellingHome/index.js
@@ -23,6 +23,7 @@ function LabelingHome() {
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title="Labeling"
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
--- a/src/pages/newWarehouseDetails/index.js
+++ b/src/pages/newWarehouseDetails/index.js
@@ -80,6 +80,7 @@ function NewWarehouseDetails() {
      <DashboardLayout>
        <DashboardNavbar />
        <Breadcrumbs
+          title="Create A Warehouse"
          route={[
            { name: 'Home', path: '/home' },
            { name: 'Setup', path: '/setup' },
@@ -90,17 +91,6 @@ function NewWarehouseDetails() {
        <Box mx={3} my={3}>
          <form onSubmit={formik.handleSubmit}>
            <Box sx={{ backgroundColor: '#fff', padding: '30px' }}>
-              <Box
-                component="div"
-                sx={{
-                  fontSize: '22px',
-                  letterSpacing: '0.01em',
-                  color: '#000',
-                  marginBottom: '30px'
-                }}
-              >
-                Form to Input
-              </Box>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6} md={6}>
                  <Box component="div" sx={{ marginBottom: '15px' }}>
--- a/src/pages/setup/index.js
+++ b/src/pages/setup/index.js
@@ -33,7 +33,7 @@ function SetupHome() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
-      <Breadcrumbs route={[{ name: 'Home', path: '/home' }, { name: 'Setup' }]} />
+      <Breadcrumbs title="Setup Warehouse, Inventory, Users" route={[{ name: 'Home', path: '/home' }, { name: 'Setup' }]} />
      <TileBasic tiles={data} />
    </DashboardLayout>
  );
--- a/src/pages/setupInventory/index.js
+++ b/src/pages/setupInventory/index.js
@@ -56,6 +56,7 @@ function SetupInventory() {
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title="List Of Inventories"
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
--- a/src/pages/useraccess/index.js
+++ b/src/pages/useraccess/index.js
@@ -80,7 +80,7 @@ const useStyles = makeStyles((theme) => ({
 function UserAccessScreen() {
  const classes = useStyles();
  const dispatch = useDispatch();
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(1);
  const usersData = useSelector(UsersSelectors.getUsersDetail);
  const rolesData = useSelector(RolesSelectors.getRolesDetail);
  const currentUser = useSelector(AuthSelectors.getUser);
@@ -89,15 +89,35 @@ function UserAccessScreen() {
  const navigate = useNavigate();

  const userHeadCells = [
-    { id: 'full_name', label: 'User Name', isEditAnchor: true, value: record => record.fullName },
-    { id: 'phone_number', label: 'Phone Number', value: record => record.phoneNumber },
-    { id: 'role_name', label: 'Roles', value: record => record.role_name },
-    { id: 'updated_by_at', label: 'Last Updated By & Date', value: record => `${record.updatedBy?.fullName ? record.updatedBy.fullName + ' | ': ''}${moment(record.updatedAt).format('D/M/YYYY h:m:s A')}` },
-    { id: 'created_by_at', label: 'Created By & Date', value: record => `${record.createdBy?.fullName ? record.createdBy.fullName + ' | ': ''}${moment(record.createdAt).format('D/M/YYYY h:m:s A')}` },
-    { id: 'last_login', label: 'Last Login', value: record => record.lastLogin },
+    { id: 'full_name', label: 'User Name', isEditAnchor: true, value: (record) => record.fullName },
+    { id: 'phone_number', label: 'Phone Number', value: (record) => record.phoneNumber },
+    { id: 'role_name', label: 'Roles', value: (record) => record.role_name },
    {
-      id: 'is_active', label: 'Access', value: record => record.isActive ? <span className={classes.statusActive}>Active</span>
-        : <span className={classes.statusInactive}>Inactive</span>
+      id: 'updated_by_at',
+      label: 'Last Updated By & Date',
+      value: (record) =>
+        `${record.updatedBy?.fullName ? record.updatedBy.fullName + ' | ' : ''}${moment(
+          record.updatedAt
+        ).format('D/M/YYYY h:m:s A')}`
+    },
+    {
+      id: 'created_by_at',
+      label: 'Created By & Date',
+      value: (record) =>
+        `${record.createdBy?.fullName ? record.createdBy.fullName + ' | ' : ''}${moment(
+          record.createdAt
+        ).format('D/M/YYYY h:m:s A')}`
+    },
+    { id: 'last_login', label: 'Last Login', value: (record) => record.lastLogin },
+    {
+      id: 'is_active',
+      label: 'Access',
+      value: (record) =>
+        record.isActive ? (
+          <span className={classes.statusActive}>Active</span>
+        ) : (
+          <span className={classes.statusInactive}>Inactive</span>
+        )
    }
  ];

@@ -107,7 +127,6 @@ function UserAccessScreen() {
    { id: 'status', label: 'Status' }
  ];

-
  const usersHandler = () => {
    dispatch(
      UsersActions.getUsersAction({
@@ -165,50 +184,84 @@ function UserAccessScreen() {
    }
  }));

-  const rowRenders = userRecords && userRecords.map(record => {
-    const canEdit = columnConfig => columnConfig.isEditAnchor && currentUser.email !== record.email;
-    return <StyledTableRow key={record.id}>
-      {userHeadCells.map((columnConfig, key) => <TableCell key={key} onClick={() => canEdit(columnConfig) && navigate('/setup/users-access/edit-user', {state: {user: record}})}>
-        {canEdit(columnConfig) ? <span className={classes.iconwrap}>
-          <EditIcon className={classes.iconSize}/>
-          {columnConfig.value(record)}
-        </span> : <span>{columnConfig.value(record)}</span>}
-      </TableCell>)}
-    </StyledTableRow>;
-  });
+  const rowRenders =
+    userRecords &&
+    userRecords.map((record) => {
+      const canEdit = (columnConfig) =>
+        columnConfig.isEditAnchor && currentUser.email !== record.email;
+      return (
+        <StyledTableRow key={record.id}>
+          {userHeadCells.map((columnConfig, key) => (
+            <TableCell
+              key={key}
+              onClick={() =>
+                canEdit(columnConfig) &&
+                navigate('/setup/users-access/edit-user', { state: { user: record } })
+              }
+            >
+              {canEdit(columnConfig) ? (
+                <span className={classes.iconwrap}>
+                  <EditIcon className={classes.iconSize} />
+                  {columnConfig.value(record)}
+                </span>
+              ) : (
+                <span>{columnConfig.value(record)}</span>
+              )}
+            </TableCell>
+          ))}
+        </StyledTableRow>
+      );
+    });

  return (
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title="Access Details"
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
          { name: 'Users and Access', path: '/setup/users-access' }
        ]}
      />
-      <MDBox px={0} py={3}>
+      <MDBox px={5} py={3}>
        <Grid container spacing={1} className={classes.margin}>
-          <Grid item xs={12} sm={4} md={4} className='ps-2 pt-0'>
+          <Grid item xs={12} sm={4} md={4} className="ps-2 pt-0">
            <Tabs value={value} className={`p-0 h-100 ${classes.tabs}`} onChange={handleTabs}>
              <Tab label="Roles" onClick={() => rolesHandler()} />
              <Tab label="Users" onClick={() => usersHandler()} />
            </Tabs>
          </Grid>
-          <Grid item xs={12} sm={4} md={6} className='py-2' style={{ display: 'flex', alignItems: 'center' }}>
+          <Grid
+            item
+            xs={12}
+            sm={4}
+            md={6}
+            className="py-2"
+            style={{ display: 'flex', alignItems: 'center' }}
+          >
            <SearchBar />
          </Grid>
-          <Grid item xs={12} sm={4} md={2} className='py-2' style={{ display: 'flex', alignItems: 'center' }}>
+          <Grid
+            item
+            xs={12}
+            sm={4}
+            md={2}
+            className="py-2"
+            style={{ display: 'flex', alignItems: 'center' }}
+          >
            <MDButton
              color="primary"
              size="medium"
-              onClick={() => navigate(`/setup/users-access/${value === 0 ? 'create-role' : 'create-user'}`)}
+              onClick={() =>
+                navigate(`/setup/users-access/${value === 0 ? 'create-role' : 'create-user'}`)
+              }
            >
              {value === 0 ? '+ CREATE ROLE' : '+ CREATE USER'}
            </MDButton>
          </Grid>
        </Grid>
-        <Grid px={2}>
+        <Grid>
          <TabPanel value={value} index={0} className={classes.radialBorder}>
            <BasicTable
              headCells={rolesHeadCells}
@@ -241,10 +294,11 @@ function UserAccessScreen() {
              backgroundColor="#007AFF"
              color="#fff"
            >
-              {userRecords && userRecords.length > 0
-                ? <TableBody>
-                  {rowRenders}
-                </TableBody> : 'No Records to Display'}
+              {userRecords && userRecords.length > 0 ? (
+                <TableBody>{rowRenders}</TableBody>
+              ) : (
+                'No Records to Display'
+              )}
            </BasicTable>
          </TabPanel>
        </Grid>
--- a/src/pages/warehouse/index.js
+++ b/src/pages/warehouse/index.js
@@ -29,6 +29,7 @@ function WarehouseScreen() {
    <DashboardLayout>
      <DashboardNavbar />
      <Breadcrumbs
+        title="List of Warehouses"
        route={[
          { name: 'Home', path: '/home' },
          { name: 'Setup', path: '/setup' },
--- a/src/pages/widgetLabel/index.js
+++ b/src/pages/widgetLabel/index.js
@@ -194,6 +194,7 @@ function WidgetLabel() {
      <DashboardLayout>
        <DashboardNavbar />
        <Breadcrumbs
+          title="Search And Print Location Labels"
          route={[
            { name: 'Home', path: '/home' },
            { name: 'Setup', path: '/setup' },
--- a/src/sagas/Inventory.js
+++ b/src/sagas/Inventory.js
@@ -63,7 +63,9 @@ export function* onRequestAddInventoryData({ payload }) {
    payload?.data
  );
  if (response?.status === 200) {
-    toast('New inventory added');
+    toast.success('New inventory added', {
+      theme: 'colored'
+    });
    yield put(
      InventoryActions.addInventorySuccess({
        loader: payload?.loader,
@@ -72,7 +74,9 @@ export function* onRequestAddInventoryData({ payload }) {
    );
    payload.navigateTo();
  } else {
-    toast('Failed to add inventory');
+    toast.error('Failed to add inventory', {
+      theme: 'colored'
+    });
    payload.onFailedAddInventoryData(response.data.error);
    yield put(
      InventoryActions.addInventoryFailure({
@@ -91,16 +95,20 @@ export function* onRequestUpdateInventoryData({ payload }) {
    payload?.data
  );
  if (response?.status === 200) {
-    toast('Updated inventory successfully');
+    toast.success('Updated inventory successfully', {
+      theme: 'colored'
+    });
    yield put(
      InventoryActions.updateInventorySuccess({
        loader: payload?.loader,
        updateInventory: response?.data?.data
      })
    );
-    payload.navigateTo();
+    // payload.navigateTo();
  } else {
-    toast('Failed to update inventory');
+    toast.error('Failed to update inventory', {
+      theme: 'colored'
+    });
    yield put(
      InventoryActions.updateInventoryFailure({
        loader: payload?.loader,
--- a/src/sagas/Item.js
+++ b/src/sagas/Item.js
@@ -50,7 +50,9 @@ export function* onRequestOneItem({ payload }) {
    //   `/setup/inventory/browse/${payload?.widgetName}/${payload?.inventoryId}/edit/${payload?.itemId}`
    // );
  } else {
-    toast('Failed to get item details');
+    toast.error('Failed to get item details', {
+      theme: 'colored'
+    });
    yield put(
      ItemActions.itemFailure({
        loader: payload?.loader,
@@ -100,7 +102,9 @@ export function* onAddRequestItem({ payload }) {
    createFormData(payload?.data)
  );
  if (response?.status === 200) {
-    toast(`Added item: ${payload.data.commonName}`);
+    toast.success(`Added item: ${payload.data.commonName}`, {
+      theme: 'colored'
+    });
    // payload.navigateTo(
    //   `/setup/inventory/browse/${payload?.widgetName}/${payload?.inventoryId}/edit/${response?.data?.data?._id}`
    // );
@@ -112,7 +116,9 @@ export function* onAddRequestItem({ payload }) {
      })
    );
  } else {
-    toast('Failed to add item');
+    toast.error('Failed to add item', {
+      theme: 'colored'
+    });
    yield put(
      ItemActions.itemFailure({
        loader: payload?.loader,
@@ -130,7 +136,9 @@ export function* onEditRequestItem({ payload }) {
    createFormData(payload?.data)
  );
  if (response?.status === 200) {
-    toast(`Successfully edited item: ${payload.data.commonName}`);
+    toast.success(`Successfully edited item: ${payload.data.commonName}`, {
+      theme: 'colored'
+    });
    payload.navigateTo('/setup/inventory');
    yield put(
      ItemActions.addItemSuccess({
@@ -139,7 +147,9 @@ export function* onEditRequestItem({ payload }) {
      })
    );
  } else {
-    toast('Failed to edit item');
+    toast.error('Failed to edit item', {
+      theme: 'colored'
+    });
    yield put(
      ItemActions.itemFailure({
        loader: payload?.loader,
--- a/src/sagas/Warehouse.js
+++ b/src/sagas/Warehouse.js
@@ -39,7 +39,7 @@ const makeFormData = (data) => {
    data.preferredInventories.forEach((prefInv, idx) => {
      formData.append(`preferredInventories[${idx}]`, prefInv);
    });
-  if (data.image[0].file) formData.append('image', data.image[0].file);
+  if (data.image[0]?.file) formData.append('image', data.image[0].file);
  return formData;
 };

@@ -52,7 +52,9 @@ export function* onRequestCreateWarehouse({ payload }) {
  );
  if (response?.status === 200 && response?.data?.message) {
    const warehouse = response?.data?.message;
-    toast('Warehouse created successfully');
+    toast.success('Warehouse created successfully', {
+      theme: 'colored'
+    });
    yield put(
      WarehouseActions.createWarehouseSuccess({
        loader: payload?.loader,
@@ -64,7 +66,9 @@ export function* onRequestCreateWarehouse({ payload }) {
    );
    payload.navigateTo(response?.data?.message?._id);
  } else {
-    toast('Failed to create warehouse');
+    toast.error('Failed to create warehouse', {
+      theme: 'colored'
+    });
    yield put(
      WarehouseActions.createWarehouseFailure({
        loader: payload?.loader,
@@ -82,7 +86,9 @@ export function* onRequestEditWarehouse({ payload }) {
    makeFormData(payload?.data)
  );
  if (response?.status === 200 && response?.data?.data) {
-    toast('Warehouse edited successfully');
+    toast.success('Warehouse edited successfully', {
+      theme: 'colored'
+    });
    const warehouse = response?.data?.data;
    yield put(
      WarehouseActions.editWarehouseSuccess({
@@ -94,7 +100,9 @@ export function* onRequestEditWarehouse({ payload }) {
      })
    );
  } else {
-    toast('Failed to edit warehouse');
+    toast.error('Failed to edit warehouse', {
+      theme: 'colored'
+    });
    yield put(
      WarehouseActions.editWarehouseFailure({
        loader: payload?.loader,
--- a/src/services/ValidationServices.js
+++ b/src/services/ValidationServices.js
@@ -63,7 +63,7 @@ const schema = {
      preferredLocations: Yup.boolean(),
      inventory_process: Yup.string()
    }),
-    image: Yup.array()
+    icons: Yup.string()
  }),

  createUser: Yup.object({
--- a/src/utils/inventorySlugTools.js
+++ b/src/utils/inventorySlugTools.js
@@ -0,0 +1,17 @@
+import EquipmentIcon from 'assets/images/EquimpmentIcon';
+import FleetIcon from 'assets/images/FleetIcon';
+import RawMaterialIcon from 'assets/images/RawMaterialIcon';
+
+export const GetIconFromSlug = (slug) => {
+  switch (slug) {
+    case 'equipment':
+      return <EquipmentIcon />;
+    case 'fleet':
+      return <FleetIcon />;
+    case 'rawmaterial':
+    default:
+      return <RawMaterialIcon />;
+  }
+};
+
+export const iconSlugs = ['equipment', 'fleet', 'rawmaterial'];