From ef4e3a2d9fb9ca7cc1c04eebccb290a020354207 Mon Sep 17 00:00:00 2001
From: Llewellyn Dsouza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 08:03:20 +0530
Subject: [PATCH 01/16] Fix: eslint config

---
 .eslintrc.js | 6 +++++-
 package.json | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 72115e8..82682b6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,10 @@ module.exports = {
   extends: ['eslint:recommended', 'plugin:react/recommended'],
   parser: '@babel/eslint-parser',
   parserOptions: {
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@babel/preset-react']
+    },
     ecmaFeatures: {
       jsx: true,
       modules: true,
@@ -23,7 +27,7 @@ module.exports = {
     'linebreak-style': ['error', 'unix'],
     quotes: ['warn', 'single'],
     semi: ['warn', 'always'],
-    'no-unused-vars' : 'warn',
+    'no-unused-vars': 'warn',
     'comma-dangle': [
       'warn',
       {
diff --git a/package.json b/package.json
index 11b1bc4..9762331 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
     "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-react": "^7.16.7",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "8.3.0",

From be258aea3409826e21d6835aa62344f6f80d7948 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:08:08 +0530
Subject: [PATCH 02/16] Fixed: dropdown component

---
 src/components/Dropdown/index.js | 37 ++++++++------------------------
 1 file changed, 9 insertions(+), 28 deletions(-)

diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
index f512550..f113dc6 100644
--- a/src/components/Dropdown/index.js
+++ b/src/components/Dropdown/index.js
@@ -14,22 +14,8 @@ const useStyles = makeStyles({
   }
 });
 
-export default function Dropdown({ dropdownData, label, dropdownChange = null }) {
+export default function Dropdown({ dropdownData, label, onChange, value }) {
   const classes = useStyles();
-  const [age, setAge] = useState('');
-
-  const handleChange = (event) => {
-    if (dropdownChange !== null) {
-      dropdownChange(event);
-    }
-    const {
-      target: { value }
-    } = event;
-    setAge(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value
-    );
-  };
 
   return (
     <>
@@ -40,22 +26,16 @@ export default function Dropdown({ dropdownData, label, dropdownChange = null })
         <FormControl sx={{ width: '100%' }}>
           <Select
             displayEmpty
-            value={age}
-            renderValue={(selected) => {
-              if (selected.length === 0) {
-                return <span>{/* {dropDownValue?.placeholder} */}</span>;
-              }
-              return selected;
-            }}
+            value={value}
             inputProps={{ 'aria-label': 'Without label' }}
-            onChange={handleChange}
+            onChange={onChange}
           >
             <MenuItem disabled value="">
-              {/* <span>{dropDownValue?.label}</span> */}
+              None selected
             </MenuItem>
             {dropdownData &&
               dropdownData.map((data) => (
-                <MenuItem value={data.name} key={data._id}>
+                <MenuItem value={data._id} key={data._id}>
                   {data.name}
                 </MenuItem>
               ))}
@@ -66,7 +46,8 @@ export default function Dropdown({ dropdownData, label, dropdownChange = null })
   );
 }
 Dropdown.propTypes = {
-  dropdownData: PropTypes.object.isRequired,
-  dropdownChange: PropTypes.object,
-  label: PropTypes.string
+  dropdownData: PropTypes.array,
+  onChange: PropTypes.any,
+  label: PropTypes.string,
+  value: PropTypes.any
 };

From 75b6f2a88bbe1ae5fa399b5cc3b8076adc9b2f19 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:08:16 +0530
Subject: [PATCH 03/16] Fixed: location labelling

---
 src/pages/labeling/index.js | 114 +++++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/pages/labeling/index.js b/src/pages/labeling/index.js
index d43a93a..fbf91f8 100644
--- a/src/pages/labeling/index.js
+++ b/src/pages/labeling/index.js
@@ -42,51 +42,54 @@ const useStyles = makeStyles({
   }
 });
 
+const headCells = [
+  {
+    id: 'warehouse',
+    label: 'Warehouse'
+  },
+  {
+    id: 'zone',
+    label: 'Zone'
+  },
+  {
+    id: 'area',
+    label: 'Area'
+  },
+  {
+    id: 'row',
+    label: 'Row'
+  },
+  {
+    id: 'bay',
+    label: 'Bay'
+  }
+];
+
 function LabelingScreen() {
   const classes = useStyles();
   const dispatch = useDispatch();
+
+  const [warehouseId, setWarehouseId] = useState('');
   const [zoneId, setZoneId] = useState('');
   const [areaId, setAreaId] = useState('');
   const [rowId, setRowId] = useState('');
-  const [bayId, setBayId] = useState('');
+
+  const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
+  const zonedata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(warehouseId));
+  const areadata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(zoneId));
+  const rowdata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(areaId));
+
   const [allLabelData, setAllLabelData] = useState([]);
   const [totemLabelData, setTotemLabelData] = useState([]);
   const [locationLabelData, setLocationLabelData] = useState([]);
 
-  const warehouseData = useSelector(WarehouseSelectors.getWarehouseDetail);
-  const zonedata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(zoneId));
-  const areadata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(areaId));
-  const rowdata = useSelector(WarehouseLocationsSelectors.getChildrenOfParent(rowId));
   const labelData = useSelector(LabellingSelectors.getLabelDetail);
 
   React.useEffect(() => {
-    if (labelData && zoneId && areaId && rowId && bayId) {
+    if (labelData && warehouseId && zoneId && areaId && rowId) {
       setAllLabelData(labelData);
     }
-  }, [labelData, zoneId, areaId, rowId]);
-
-  const headCells = [
-    {
-      id: 'warehouse',
-      label: 'Warehouse'
-    },
-    {
-      id: 'zone',
-      label: 'Zone'
-    },
-    {
-      id: 'area',
-      label: 'Area'
-    },
-    {
-      id: 'row',
-      label: 'Row'
-    },
-    {
-      id: 'bay',
-      label: 'Bay'
-    }
-  ];
+  }, [labelData, warehouseId, zoneId, areaId]);
 
   useEffect(() => {
     dispatch(
@@ -99,10 +102,12 @@ function LabelingScreen() {
   }, []);
 
   const warehouseChange = (event) => {
-    const filterData = warehouseData.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
+    const id = event.target.value;
     const type = 'warehouse';
-    setZoneId(id);
+    setWarehouseId(id);
+    setZoneId('');
+    setAreaId('');
+    setRowId('');
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -114,10 +119,11 @@ function LabelingScreen() {
   };
 
   const zoneChange = (event) => {
-    const filterData = zonedata.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    const type = filterData[0].location;
-    setAreaId(id);
+    const id = event.target.value;
+    const type = 'zone';
+    setZoneId(id);
+    setAreaId('');
+    setRowId('');
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -129,10 +135,10 @@ function LabelingScreen() {
   };
 
   const areaChange = (event) => {
-    const filterData = areadata.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    const type = filterData[0].location;
-    setRowId(id);
+    const id = event.target.value;
+    const type = 'area';
+    setAreaId(id);
+    setRowId('');
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -144,10 +150,9 @@ function LabelingScreen() {
   };
 
   const rowChange = (event) => {
-    const filterData = rowdata.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    const type = filterData[0].location;
-    setBayId(id);
+    const id = event.target.value;
+    const type = 'row';
+    setRowId(id);
     dispatch(
       WarehouseLocationsActions.locationRequest({
         loader: 'loading-request',
@@ -162,10 +167,10 @@ function LabelingScreen() {
         slug: API.GET_LABEL,
         method: 'post',
         data: {
-          warehouse: zoneId,
-          zone: areaId,
-          area: rowId,
-          row: bayId
+          warehouse: warehouseId,
+          zone: zoneId,
+          area: areaId,
+          row: rowId
         }
       })
     );
@@ -199,18 +204,19 @@ function LabelingScreen() {
           <Grid item xs={12} sm={6} md={3}>
             <Dropdown
               dropdownData={warehouseData}
-              dropdownChange={warehouseChange}
+              value={warehouseId}
               label="Select warehouse"
+              onChange={warehouseChange}
             />
           </Grid>
           <Grid item xs={12} sm={6} md={3}>
-            <Dropdown dropdownData={zonedata} dropdownChange={zoneChange} label="Select Zone" />
+            <Dropdown dropdownData={zonedata} label="Select Zone" onChange={zoneChange} />
           </Grid>
           <Grid item xs={12} sm={6} md={3}>
-            <Dropdown dropdownData={areadata} dropdownChange={areaChange} label="Select Area" />
+            <Dropdown dropdownData={areadata} label="Select Area" onChange={areaChange} />
           </Grid>
           <Grid item xs={12} sm={6} md={3}>
-            <Dropdown dropdownData={rowdata} dropdownChange={rowChange} label="Select Row" />
+            <Dropdown dropdownData={rowdata} label="Select Row" onChange={rowChange} />
           </Grid>
         </Grid>
         <br />
@@ -221,7 +227,7 @@ function LabelingScreen() {
           color="#8D8D8D"
         >
           <TableBody>
-            {bayId ? (
+            {rowId ? (
               allLabelData &&
               allLabelData.map((item) => (
                 <TableRow key={item._id}>

From 70cda3d3f2ca2cf83ef3022abc96eb7fb7d64a06 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:10:35 +0530
Subject: [PATCH 04/16] Fixed: widget labelling

---
 src/pages/widgetLabel/index.js | 35 ++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/pages/widgetLabel/index.js b/src/pages/widgetLabel/index.js
index 285ca59..3daece8 100644
--- a/src/pages/widgetLabel/index.js
+++ b/src/pages/widgetLabel/index.js
@@ -105,9 +105,11 @@ const headCellsNew = [
 function WidgetLabel() {
   const classes = useStyles();
   const dispatch = useDispatch();
+
   const [labelData, setLabelData] = useState([]);
   const [inventoryId, setInventoryId] = useState('');
   const [familyId, setFamilyId] = useState('');
+  const [subFamilyId, setSubFamilyId] = useState('');
   const [allProductData, setAllProductData] = useState([]);
   const [filterClick, setFilterClick] = useState(false);
 
@@ -133,9 +135,10 @@ function WidgetLabel() {
   }, [productData, filterClick]);
 
   const inventoryChange = (event) => {
-    const filterData = inventoryData.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    setInventoryId(filterData[0]._id);
+    const id = event.target.value;
+    setInventoryId(id);
+    setFamilyId('');
+    setSubFamilyId('');
     dispatch(
       WidgetActions.widgetRequest({
         loader: 'loading-request',
@@ -146,9 +149,9 @@ function WidgetLabel() {
   };
 
   const familyChange = (event) => {
-    const filterData = familyData.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
-    setFamilyId(filterData[0]._id);
+    const id = event.target.value;
+    setFamilyId(id);
+    setSubFamilyId('');
     dispatch(
       WidgetActions.widgetRequest({
         loader: 'loading-request',
@@ -159,8 +162,8 @@ function WidgetLabel() {
   };
 
   const subFamilyChange = (event) => {
-    const filterData = subFamilyData.filter((item) => item.name === event.target.value);
-    const id = filterData[0]._id;
+    const id = event.target.value;
+    setSubFamilyId(id);
     dispatch(
       WidgetActions.widgetRequest({
         loader: 'loading-request',
@@ -169,6 +172,7 @@ function WidgetLabel() {
       })
     );
   };
+
   const filterHandler = () => {
     setInventoryId('');
     setFilterClick(true);
@@ -206,23 +210,26 @@ function WidgetLabel() {
           <Grid container spacing={2}>
             <Grid item xs={12} sm={6} md={3}>
               <Dropdown
-                dropdownData={inventoryData}
-                dropdownChange={inventoryChange}
                 label="Select Inventory"
+                dropdownData={inventoryData}
+                value={inventoryId}
+                onChange={inventoryChange}
               />
             </Grid>
             <Grid item xs={12} sm={6} md={3}>
               <Dropdown
-                dropdownData={familyData}
-                dropdownChange={familyChange}
                 label="Select Family"
+                dropdownData={familyData}
+                value={familyId}
+                onChange={familyChange}
               />
             </Grid>
             <Grid item xs={12} sm={6} md={3}>
               <Dropdown
-                dropdownData={subFamilyData}
                 label="Select Sub Family"
-                dropdownChange={subFamilyChange}
+                value={subFamilyId}
+                dropdownData={subFamilyData}
+                onChange={subFamilyChange}
               />
             </Grid>
             <Grid item xs={12} sm={6} md={3}>

From 0fb3f3bf552276cafa8fe9f7779df06fb04f8c0b Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:10:59 +0530
Subject: [PATCH 05/16] Linted: search bar

---
 src/components/SearchBar/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchBar/index.js b/src/components/SearchBar/index.js
index 5a8e7ef..8467136 100644
--- a/src/components/SearchBar/index.js
+++ b/src/components/SearchBar/index.js
@@ -4,8 +4,7 @@ import { makeStyles } from '@mui/styles';
 import Search from 'assets/images/SearchIcon';
 
 function SearchBar(props) {
-
-  const {onChange} = props;
+  const { onChange } = props;
 
   const useStyles = makeStyles(() => ({
     textField: {
@@ -41,5 +40,5 @@ function SearchBar(props) {
 
 SearchBar.propTypes = {
   onChange: PropTypes.func
-}
+};
 export default SearchBar;

From 940c1e704efb05d5db2eba3fa2df7abd92be0bf6 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:11:55 +0530
Subject: [PATCH 06/16] Linted: dropdown

---
 src/components/Dropdown/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
index f113dc6..0413022 100644
--- a/src/components/Dropdown/index.js
+++ b/src/components/Dropdown/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Box from '@mui/material/Box';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';

From 913c1dbcf23440b9ff485d1f3040c269e21ff050 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:45:07 +0530
Subject: [PATCH 07/16] Removed: reset inventory after filter click

---
 src/pages/widgetLabel/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/widgetLabel/index.js b/src/pages/widgetLabel/index.js
index 3daece8..7b9da99 100644
--- a/src/pages/widgetLabel/index.js
+++ b/src/pages/widgetLabel/index.js
@@ -174,7 +174,6 @@ function WidgetLabel() {
   };
 
   const filterHandler = () => {
-    setInventoryId('');
     setFilterClick(true);
     dispatch(
       ProductActions.getProductByIdAction({

From e75e270cdf2dd9da3d2fe33cb3f96df3cebe29d2 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 16:51:31 +0530
Subject: [PATCH 08/16] Added: vertical and horizontal overflows

---
 src/pages/widgetLabel/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/widgetLabel/index.js b/src/pages/widgetLabel/index.js
index 7b9da99..a53cf1d 100644
--- a/src/pages/widgetLabel/index.js
+++ b/src/pages/widgetLabel/index.js
@@ -241,7 +241,15 @@ function WidgetLabel() {
               </MDButton>
             </Grid>
           </Grid>
-          <Box sx={{ marginTop: '24px', backgroundColor: '#FFFFFF' }}>
+          <Box
+            sx={{
+              marginTop: '24px',
+              backgroundColor: '#FFFFFF',
+              overflowX: 'auto',
+              overflowY: 'auto',
+              height: '60vh'
+            }}
+          >
             <BasicTable
               headCells={headCells}
               records={allProductData}

From 51dc7c33c308eb55f1ea207c03afaf3e5a8e1172 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 17:18:25 +0530
Subject: [PATCH 09/16] Update: increase gradient distance

---
 src/components/NestedTable/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NestedTable/index.js b/src/components/NestedTable/index.js
index 818aa63..00c090e 100644
--- a/src/components/NestedTable/index.js
+++ b/src/components/NestedTable/index.js
@@ -90,7 +90,7 @@ function NestedDataTable({ data, selected, setSelected, populateChildren }) {
             selected?.id === data.id
               ? 'linear-gradient(135deg, ' +
                 getColorOfLocationType(data.location) +
-                ' 0%, #f9f9f9 20%)'
+                ' 0%, #f9f9f9 100%)'
               : '#f9f9f9'
         }}
       >

From 30b4b5d7c20d14e55504b7c226d1249ab7bdd9d2 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Tue, 8 Mar 2022 17:47:36 +0530
Subject: [PATCH 10/16] fixed: unupdated state id for row removed: unecessary
 dispatch action Updated: label saga to listen to every dispatch

---
 src/pages/labeling/index.js | 18 +++++++++---------
 src/sagas/Labelling.js      |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/labeling/index.js b/src/pages/labeling/index.js
index fbf91f8..3137303 100644
--- a/src/pages/labeling/index.js
+++ b/src/pages/labeling/index.js
@@ -153,14 +153,14 @@ function LabelingScreen() {
     const id = event.target.value;
     const type = 'row';
     setRowId(id);
-    dispatch(
-      WarehouseLocationsActions.locationRequest({
-        loader: 'loading-request',
-        slug: API.GET_CHILDREN_FROM_PARENT,
-        method: 'post',
-        data: { id, type }
-      })
-    );
+    // dispatch(
+    //   WarehouseLocationsActions.locationRequest({
+    //     loader: 'loading-request',
+    //     slug: API.GET_CHILDREN_FROM_PARENT,
+    //     method: 'post',
+    //     data: { id, type }
+    //   })
+    // );
     dispatch(
       LabellingActions.getLabelAction({
         loader: 'labelling-request',
@@ -170,7 +170,7 @@ function LabelingScreen() {
           warehouse: warehouseId,
           zone: zoneId,
           area: areaId,
-          row: rowId
+          row: id
         }
       })
     );
diff --git a/src/sagas/Labelling.js b/src/sagas/Labelling.js
index 51bcbcb..905f77a 100644
--- a/src/sagas/Labelling.js
+++ b/src/sagas/Labelling.js
@@ -1,5 +1,5 @@
 import { AuthorizedAPI } from 'config';
-import { takeLatest, call, put } from 'redux-saga/effects';
+import { call, put, takeEvery } from 'redux-saga/effects';
 import LabellingActions from 'redux/LabellingRedux';
 import { LabellingTypes } from 'redux/LabellingRedux';
 import ApiServices from 'services/API/ApiServices';
@@ -28,4 +28,4 @@ export function* onRequestGetLabelData({ payload }) {
     );
   }
 }
-export default [takeLatest(LabellingTypes.GET_LABEL_ACTION, onRequestGetLabelData)];
+export default [takeEvery(LabellingTypes.GET_LABEL_ACTION, onRequestGetLabelData)];

From c62453e318983e40f5c3acfde7dc144118e66148 Mon Sep 17 00:00:00 2001
From: Llewellyn Dsouza <lledsouza2209@gmail.com>
Date: Wed, 9 Mar 2022 12:04:55 +0530
Subject: [PATCH 11/16] Added: filter button to location labelling

---
 src/pages/labeling/index.js | 66 +++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/pages/labeling/index.js b/src/pages/labeling/index.js
index 3137303..5fbc29a 100644
--- a/src/pages/labeling/index.js
+++ b/src/pages/labeling/index.js
@@ -151,29 +151,7 @@ function LabelingScreen() {
 
   const rowChange = (event) => {
     const id = event.target.value;
-    const type = 'row';
     setRowId(id);
-    // dispatch(
-    //   WarehouseLocationsActions.locationRequest({
-    //     loader: 'loading-request',
-    //     slug: API.GET_CHILDREN_FROM_PARENT,
-    //     method: 'post',
-    //     data: { id, type }
-    //   })
-    // );
-    dispatch(
-      LabellingActions.getLabelAction({
-        loader: 'labelling-request',
-        slug: API.GET_LABEL,
-        method: 'post',
-        data: {
-          warehouse: warehouseId,
-          zone: zoneId,
-          area: areaId,
-          row: id
-        }
-      })
-    );
   };
 
   const getTableItem = (e, item) => {
@@ -200,8 +178,8 @@ function LabelingScreen() {
         ]}
       />
       <MDBox px={5} py={5}>
-        <Grid container spacing={2}>
-          <Grid item xs={12} sm={6} md={3}>
+        <Grid container spacing={2} alignItems="end">
+          <Grid item xs={12} md={2.5}>
             <Dropdown
               dropdownData={warehouseData}
               value={warehouseId}
@@ -209,15 +187,45 @@ function LabelingScreen() {
               onChange={warehouseChange}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={3}>
+          <Grid item xs={12} md={2.5}>
             <Dropdown dropdownData={zonedata} label="Select Zone" onChange={zoneChange} />
           </Grid>
-          <Grid item xs={12} sm={6} md={3}>
+          <Grid item xs={12} md={2.5}>
             <Dropdown dropdownData={areadata} label="Select Area" onChange={areaChange} />
           </Grid>
-          <Grid item xs={12} sm={6} md={3}>
+          <Grid item xs={12} md={2.5}>
             <Dropdown dropdownData={rowdata} label="Select Row" onChange={rowChange} />
           </Grid>
+          <Grid item xs={12} md={2}>
+            <MDButton
+              fullWidth
+              color="primary"
+              sx={{
+                height: '45px'
+              }}
+              onClick={() => {
+                warehouseId &&
+                  zoneId &&
+                  areaId &&
+                  rowId &&
+                  dispatch(
+                    LabellingActions.getLabelAction({
+                      loader: 'labelling-request',
+                      slug: API.GET_LABEL,
+                      method: 'post',
+                      data: {
+                        warehouse: warehouseId,
+                        zone: zoneId,
+                        area: areaId,
+                        row: rowId
+                      }
+                    })
+                  );
+              }}
+            >
+              Filter
+            </MDButton>
+          </Grid>
         </Grid>
         <br />
         <BasicTable
@@ -251,13 +259,13 @@ function LabelingScreen() {
           </TableBody>
         </BasicTable>
         <Grid container spacing={2} py={5}>
-          <Grid item xs={12} sm={6} md={3}>
+          <Grid item xs={12} md={3}>
             <Box sx={{ backgroundColor: '#FFBC26', padding: '3px 12px' }}>Bay Totem Labels</Box>
             <Box sx={{ border: '1px solid black', padding: '3px 12px', height: '300px' }}>
               {totemLabelData && totemLabelData.map((item, index) => <div key={index}>{item}</div>)}
             </Box>
           </Grid>
-          <Grid item xs={12} sm={6} md={3}>
+          <Grid item xs={12} md={3}>
             <Box sx={{ backgroundColor: '#FFBC26', padding: '3px 12px' }}>Bin Location Labels</Box>
             <Box sx={{ border: '1px solid black', padding: '3px 12px', height: '300px' }}>
               {locationLabelData &&

From 7131e86792a9f4f19c6fab0f35d51889e9a68e59 Mon Sep 17 00:00:00 2001
From: Dikshajain39511 <98263148+Dikshajain39511@users.noreply.github.com>
Date: Wed, 9 Mar 2022 12:48:58 +0530
Subject: [PATCH 12/16] Feature/wms 72 (#89)

* remove duplicates name validation
* popop made for inventory icon slug
* add item page:breadcrumb changes
* remove new
* Update: naming and redirections
* Removed: validation code

Co-authored-by: evdigitech <evdigitech@gmail.com>
---
 src/components/TileComponent/index.js   |   4 +-
 src/pages/addNewProduct/index.js        |  20 +++--
 src/pages/editWarehouseDetails/index.js |  11 ++-
 src/pages/inventory/index.js            | 105 ++++++++++++++++--------
 src/pages/itemListing/index.js          |   6 +-
 src/pages/newWarehouseDetails/index.js  |  17 +++-
 src/routes/index.js                     |   9 +-
 src/services/ValidationServices.js      |  18 ++--
 src/utils/inventorySlugTools.js         |   1 +
 9 files changed, 130 insertions(+), 61 deletions(-)

diff --git a/src/components/TileComponent/index.js b/src/components/TileComponent/index.js
index 894c9fc..c7a41a3 100644
--- a/src/components/TileComponent/index.js
+++ b/src/components/TileComponent/index.js
@@ -39,7 +39,7 @@ export default function Tile({ data, children }) {
             Update {data.name} <ArrowRightIcon />
           </Box>
         </Link>
-        <Link to={`/setup/inventory/new-item/${data.widgetname}/${data.id}`}>
+        <Link to={`/setup/inventory/new-item/${data.name}/${data.widgetname}/${data.id}`}>
           <Box className={`${classes.box} ${classes.boxEven}`}>
             Add New {data.widgetname} <ArrowRightIcon />
           </Box>
@@ -49,7 +49,7 @@ export default function Tile({ data, children }) {
             Cycle Count <ArrowRightIcon />
           </Box>
         </Link>
-        <Link to={`/setup/inventory/browse/${data.widgetname}/${data.id}`}>
+        <Link to={`/setup/inventory/browse/${data.name}/${data.widgetname}/${data.id}`}>
           <Box className={`${classes.box} ${classes.boxEven}`}>
             {data.widgetname} List <ArrowRightIcon />
           </Box>
diff --git a/src/pages/addNewProduct/index.js b/src/pages/addNewProduct/index.js
index bf9b555..69baee0 100644
--- a/src/pages/addNewProduct/index.js
+++ b/src/pages/addNewProduct/index.js
@@ -51,7 +51,7 @@ const useStyles = makeStyles({
 
 function AddNewItem() {
   const classes = useStyles();
-  const { widgetName, inventoryId, itemId } = useParams();
+  const { widgetName, inventoryName, inventoryId, itemId } = useParams();
   const getInitialFormValues = (data) => {
     return data && data._id === itemId
       ? {
@@ -228,8 +228,8 @@ function AddNewItem() {
             { name: 'Home', path: '/home' },
             { name: 'Setup', path: '/setup' },
             { name: 'Inventory', path: '/setup/inventory' },
-            { name: `${widgetName || 'Item'}` },
-            { name: `Add New ${widgetName || 'Item'}` }
+            { name: `${inventoryName || 'Inventory'}` },
+            { name: `${itemId ? 'Edit' : 'Add'} ${widgetName || 'Item'}` }
           ]}
         />
         <Box mx={3} my={3}>
@@ -248,7 +248,12 @@ function AddNewItem() {
                       variant="outlined"
                       value={formik.values.commonName}
                       error={formik.touched.commonName && Boolean(formik.errors.commonName)}
-                      helperText={formik.touched.commonName && formik.errors.commonName}
+                      helperText={
+                        formik.touched.commonName &&
+                        formik.errors.commonName && (
+                          <div style={{ color: 'red' }}>{formik.errors.commonName}</div>
+                        )
+                      }
                       onChange={formik.handleChange}
                     />
                   </Box>
@@ -343,7 +348,12 @@ function AddNewItem() {
                       variant="outlined"
                       value={formik.values.formalName}
                       error={formik.touched.formalName && Boolean(formik.errors.formalName)}
-                      helperText={formik.touched.formalName && formik.errors.formalName}
+                      helperText={
+                        formik.touched.formalName &&
+                        formik.errors.formalName && (
+                          <div style={{ color: 'red' }}>{formik.errors.formalName}</div>
+                        )
+                      }
                       onChange={formik.handleChange}
                     />
                   </Box>
diff --git a/src/pages/editWarehouseDetails/index.js b/src/pages/editWarehouseDetails/index.js
index 1791320..e630e37 100644
--- a/src/pages/editWarehouseDetails/index.js
+++ b/src/pages/editWarehouseDetails/index.js
@@ -40,6 +40,7 @@ import { WarehouseSelectors } from 'redux/WarehouseRedux';
 import { InventorySelectors } from 'redux/InventoryRedux';
 import InventoryActions from 'redux/InventoryRedux';
 import { useNavigate } from 'react-router-dom';
+import schema from 'services/ValidationServices';
 
 const bottomButtonStyling = {
   width: '100%',
@@ -358,7 +359,7 @@ function EditWarehouseDetails() {
       specs: warehouseData.specs || '',
       image: warehouseData.image_url ? [{ src: warehouseData.image_url }] : []
     },
-    // validationSchema: schema.warehouseForm,
+    validationSchema: schema.warehouseForm,
     onSubmit: (values) => {
       dispatch(
         WarehouseActions.editWarehouseAction({
@@ -422,7 +423,9 @@ function EditWarehouseDetails() {
                       variant="outlined"
                       value={formik.values.warehousename}
                       error={formik.touched.warehousename && Boolean(formik.errors.warehousename)}
-                      helperText={formik.touched.warehousename && formik.errors.warehousename}
+                      helperText={formik.touched.warehousename && formik.errors.warehousename && (
+                        <div style={{ color: 'red' }}>{formik.errors.warehousename}</div>
+                      ) }
                       onChange={formik.handleChange}
                     />
                   </Box>
@@ -445,7 +448,9 @@ function EditWarehouseDetails() {
                       variant="outlined"
                       value={formik.values.address}
                       error={formik.touched.address && Boolean(formik.errors.address)}
-                      helperText={formik.touched.address && formik.errors.address}
+                      helperText={formik.touched.address && formik.errors.address && (
+                        <div style={{ color: 'red' }}>{formik.errors.address}</div>
+                      ) }
                       onChange={formik.handleChange}
                     />
                   </Box>
diff --git a/src/pages/inventory/index.js b/src/pages/inventory/index.js
index 1d12b7b..ae16552 100644
--- a/src/pages/inventory/index.js
+++ b/src/pages/inventory/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
@@ -37,6 +37,7 @@ import { useNavigate } from 'react-router-dom';
 import WidgetNestedDataTable from 'components/WidgetNestedDataTable';
 import { GetIconFromSlug } from 'utils/inventorySlugTools';
 import { iconSlugs } from 'utils/inventorySlugTools';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 
 const customStyles = {
   labelSize: {
@@ -120,18 +121,16 @@ function InventoryScreen() {
   };
 
   const currentInventoryData = useSelector(InventorySelectors.getInventoryDetailById(inventoryId));
-  // LOGGER.log({ currentInventoryData });
-  // const [inventoryAllData, setInventoryAllData] = useState([]);
-  // const initialInventoryName='';
+  const [iconSelect, setIconSelect] = React.useState('');
 
-  // useEffect(() => {
-  //     const filterData = inventoryData.filter((item) => item._id === inventoryId);
-  //     console.log('filterData', filterData);
-  //     setInitialInventoryName(filterData[0].name)
-  //     setInventoryAllData(filterData[0].widgetName);
-  // }, []);
-
-  // LOGGER.log('initialInventoryName', initialInventoryName);
+  useEffect(() => {
+    if (inventoryId) {
+      const iconFilter = iconSlugs.filter(
+        (iconSlug) => iconSlug === currentInventoryData.icon_slug
+      );
+      setIconSelect(GetIconFromSlug(iconFilter[0]));
+    }
+  }, [inventoryId]);
 
   /* eslint-disable indent */
   const formik = useFormik({
@@ -199,6 +198,19 @@ function InventoryScreen() {
     setDeleteAlertOpen(true);
   };
 
+  const [iconSlugOpen, setIconSlugOpen] = React.useState(null);
+  const handleIconSlugClose = () => {
+    setIconSlugOpen(false);
+  };
+  const handleIconSlugOpen = () => {
+    setIconSlugOpen(true);
+  };
+
+  const handleIconSlug = (value) => {
+    const iconFilter = iconSlugs.filter((iconSlug) => iconSlug === value);
+    setIconSelect(GetIconFromSlug(iconFilter[0]));
+    setIconSlugOpen(false);
+  };
   return (
     <DashboardLayout>
       <DashboardNavbar />
@@ -236,7 +248,10 @@ function InventoryScreen() {
                     variant="outlined"
                     value={formik.values.name}
                     error={formik.touched.name && Boolean(formik.errors.name)}
-                    helpertText={formik.touched.name && formik.errors.name}
+                    helperText={
+                      formik.touched.name &&
+                      formik.errors.name && <div style={{ color: 'red' }}>{formik.errors.name}</div>
+                    }
                     onChange={formik.handleChange}
                   />
                 </Box>
@@ -252,7 +267,12 @@ function InventoryScreen() {
                     variant="outlined"
                     value={formik.values.widgetName}
                     error={formik.touched.widgetName && Boolean(formik.errors.widgetName)}
-                    helpertext={formik.touched.widgetName && formik.errors.widgetName}
+                    helperText={
+                      formik.touched.widgetName &&
+                      formik.errors.widgetName && (
+                        <div style={{ color: 'red' }}>{formik.errors.widgetName}</div>
+                      )
+                    }
                     onChange={formik.handleChange}
                   />
                 </Grid>
@@ -367,25 +387,46 @@ function InventoryScreen() {
                       Choose the icon to represent the inventory
                     </MDTypography>
                   </MDBox>
-                  <RadioGroup
-                    row
-                    sx={{
-                      marginTop: '15px'
-                    }}
-                    aria-labelledby="demo-error-radios"
-                    name="icon_slug"
-                    value={formik.values.icon_slug}
-                    onChange={formik.handleChange}
+
+                  <AddCircleIcon fontSize="large" onClick={handleIconSlugOpen} />
+                  {iconSelect}
+                  <Dialog
+                    open={iconSlugOpen}
+                    aria-labelledby="alert-dialog-title"
+                    aria-describedby="alert-dialog-description"
+                    onClose={handleIconSlugClose}
                   >
-                    {iconSlugs.map((iconSlug) => (
-                      <MyFormControlLabel
-                        key={iconSlug}
-                        value={iconSlug}
-                        control={<Radio style={{ display: 'none' }} />}
-                        label={GetIconFromSlug(iconSlug)}
-                      />
-                    ))}
-                  </RadioGroup>
+                    <DialogTitle id="alert-dialog-title">Select Icon</DialogTitle>
+                    <DialogContent>
+                      <DialogContentText id="alert-dialog-description">
+                        <RadioGroup
+                          row
+                          sx={{
+                            marginTop: '15px'
+                          }}
+                          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>
+                      </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                      <Button autoFocus onClick={handleIconSlugClose}>
+                        No
+                      </Button>
+                      <Button onClick={() => handleIconSlug(formik.values.icon_slug)}>Yes</Button>
+                    </DialogActions>
+                  </Dialog>
                 </Box>
               </Grid>
               <MDBox sx={{ ml: 'auto', mr: 'auto', mt: 3 }}>
diff --git a/src/pages/itemListing/index.js b/src/pages/itemListing/index.js
index 0c703c4..a6c1845 100644
--- a/src/pages/itemListing/index.js
+++ b/src/pages/itemListing/index.js
@@ -44,7 +44,7 @@ const tHeads = [
 
 function ItemListing() {
   const dispatch = useDispatch();
-  const { widgetName, inventoryId } = useParams();
+  const { inventoryName, widgetName, inventoryId } = useParams();
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
   LOGGER.log({ widgetName, inventoryId });
@@ -162,7 +162,9 @@ function ItemListing() {
           perPage={perPage}
           setPerPage={setPerPage}
           editHandler={(id) => {
-            navigateTo(`/setup/inventory/browse/${widgetName}/${inventoryId}/edit/${id}`);
+            navigateTo(
+              `/setup/inventory/browse/${inventoryName}/${widgetName}/${inventoryId}/edit/${id}`
+            );
           }}
           deleteHandler={(id) => {
             handleDeleteAlertOpen(id);
diff --git a/src/pages/newWarehouseDetails/index.js b/src/pages/newWarehouseDetails/index.js
index 78abe89..d5cb94a 100644
--- a/src/pages/newWarehouseDetails/index.js
+++ b/src/pages/newWarehouseDetails/index.js
@@ -15,6 +15,7 @@ import Breadcrumbs from 'components/Breadcrumbs';
 import { useNavigate } from 'react-router-dom';
 import { InventorySelectors } from 'redux/InventoryRedux';
 import InventoryActions from 'redux/InventoryRedux';
+import schema from 'services/ValidationServices';
 
 function NewWarehouseDetails() {
   const dispatch = useDispatch();
@@ -54,7 +55,7 @@ function NewWarehouseDetails() {
       specs: '',
       image: []
     },
-    // validationSchema: schema.warehouseForm,
+    validationSchema: schema.warehouseForm,
     onSubmit: (values) => {
       dispatch(
         WarehouseActions.createWarehouseAction({
@@ -112,7 +113,12 @@ function NewWarehouseDetails() {
                       name="warehousename"
                       value={formik.values.warehousename}
                       error={formik.touched.warehousename && Boolean(formik.errors.warehousename)}
-                      helperText={formik.touched.warehousename && formik.errors.warehousename}
+                      helperText={
+                        formik.touched.warehousename &&
+                        formik.errors.warehousename && (
+                          <div style={{ color: 'red' }}>{formik.errors.warehousename}</div>
+                        )
+                      }
                       onChange={formik.handleChange}
                     />
                   </Box>
@@ -135,7 +141,12 @@ function NewWarehouseDetails() {
                       name="address"
                       value={formik.values.address}
                       error={formik.touched.address && Boolean(formik.errors.address)}
-                      helperText={formik.touched.address && formik.errors.address}
+                      helperText={
+                        formik.touched.address &&
+                        formik.errors.address && (
+                          <div style={{ color: 'red' }}>{formik.errors.address}</div>
+                        )
+                      }
                       onChange={formik.handleChange}
                     />
                   </Box>
diff --git a/src/routes/index.js b/src/routes/index.js
index 8850780..3398d43 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -114,22 +114,21 @@ const protectedRoutes = [
         name: 'Add New Item',
         key: 'add-new-item',
         hide: true,
-        route: '/setup/inventory/new-item/:widgetName/:inventoryId',
+        route: '/setup/inventory/new-item/:inventoryName/:widgetName/:inventoryId',
         component: <AddNewItem />
       },
       {
         name: 'Update Item',
         key: 'udpate-item',
         hide: true,
-        route: '/setup/inventory/browse/:widgetName/:inventoryId/edit/:itemId',
+        route: '/setup/inventory/browse/:inventoryName/:widgetName/:inventoryId/edit/:itemId',
         component: <AddNewItem />
       },
-      // /setup/inventory/browse/${payload?.widgetName}/${payload?.inventoryId}/edit/${payload?.id}
       {
         name: 'View Items',
         key: 'view-items',
         hide: true,
-        route: '/setup/inventory/browse/:widgetName/:inventoryId',
+        route: '/setup/inventory/browse/:inventoryName/:widgetName/:inventoryId',
         component: <ItemListing />
       },
       {
@@ -184,7 +183,7 @@ const protectedRoutes = [
         key: 'create-user',
         route: '/setup/users-access/create-user',
         hide: true,
-        component: <CreateEditUser context='new' />
+        component: <CreateEditUser context="new" />
       },
       {
         name: 'Edit User',
diff --git a/src/services/ValidationServices.js b/src/services/ValidationServices.js
index 208b6ac..45712bc 100644
--- a/src/services/ValidationServices.js
+++ b/src/services/ValidationServices.js
@@ -32,17 +32,17 @@ const schema = {
   addNewItem: Yup.object({
     commonName: Yup.string('Enter details').required(),
     formalName: Yup.string('Enter details').required(),
-    description: Yup.string('Enter details').required(),
-    manufacturer: Yup.string('Enter details').required(),
-    size: Yup.string('Enter details').required(),
-    color: Yup.string('Enter details').required(),
-    type: Yup.string('Enter details').required(),
-    unitOfMaterial: Yup.string('Enter details').required(),
+    description: Yup.string('Enter details'),
+    manufacturer: Yup.string('Enter details'),
+    size: Yup.string('Enter details'),
+    color: Yup.string('Enter details'),
+    type: Yup.string('Enter details'),
+    unitOfMaterial: Yup.string('Enter details'),
     unitCost: Yup.number().test((val) => val >= 0),
     packageCount: Yup.number().test((val) => val >= 0),
     countPerPallet: Yup.number().test((val) => val >= 0),
     countPerPalletPackage: Yup.number().test((val) => val >= 0),
-    primaryWidgetFamilyId: Yup.string('Enter details').required(),
+    primaryWidgetFamilyId: Yup.string('Enter details'),
     secondaryWidgetFamilyId: Yup.string('Enter details'),
     policiesMetadata: Yup.object({
       underStockLevelCount: Yup.number().test((val) => val >= 0),
@@ -54,8 +54,8 @@ const schema = {
   }),
 
   addInventory: Yup.object({
-    name: Yup.string('Enter Widget Name').required('Widget Name is required'),
-    widgetName: Yup.string('Enter Inventory name').required('Inventory name is required'),
+    name: Yup.string('Enter Inventory Name').required('Inventory Name is required'),
+    widgetName: Yup.string('Enter Widget name').required('Widget Name is required'),
     policies: Yup.object({
       orderTracking: Yup.boolean(),
       alerting: Yup.boolean(),
diff --git a/src/utils/inventorySlugTools.js b/src/utils/inventorySlugTools.js
index 0806ecf..06db995 100644
--- a/src/utils/inventorySlugTools.js
+++ b/src/utils/inventorySlugTools.js
@@ -9,6 +9,7 @@ export const GetIconFromSlug = (slug) => {
     case 'fleet':
       return <FleetIcon />;
     case 'rawmaterial':
+      return <RawMaterialIcon />;
     default:
       return <RawMaterialIcon />;
   }

From 7561006ce01b0f2fb5d9a278c3d381e5ee51503e Mon Sep 17 00:00:00 2001
From: Llewellyn Dsouza <lledsouza2209@gmail.com>
Date: Wed, 9 Mar 2022 12:53:42 +0530
Subject: [PATCH 13/16] Fixed: warehouse listing key

---
 src/components/TileBasic/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TileBasic/index.js b/src/components/TileBasic/index.js
index 40949b6..cafe350 100644
--- a/src/components/TileBasic/index.js
+++ b/src/components/TileBasic/index.js
@@ -67,7 +67,7 @@ export default function TileBasic({ tiles }) {
         <Grid container spacing={2}>
           {tiles &&
             tiles.map((item) => (
-              <Grid item key={item.name} xs={12} sm={6} md={tiles.length > 4 ? 4 : 6}>
+              <Grid item key={item._id} xs={12} sm={6} md={tiles.length > 4 ? 4 : 6}>
                 {item.disabled ? (
                   <MDBox
                     key={item.name + item.path}

From b2c0c3f958dd12f4c2282d66e8481825ada564e9 Mon Sep 17 00:00:00 2001
From: Llewellyn Dsouza <lledsouza2209@gmail.com>
Date: Thu, 10 Mar 2022 10:40:36 +0530
Subject: [PATCH 14/16] Update: item listing breadcrumbs

---
 src/pages/itemListing/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/itemListing/index.js b/src/pages/itemListing/index.js
index a6c1845..2b5450e 100644
--- a/src/pages/itemListing/index.js
+++ b/src/pages/itemListing/index.js
@@ -103,6 +103,7 @@ function ItemListing() {
           { name: 'Home', path: '/home' },
           { name: 'Setup', path: '/setup' },
           { name: 'Inventory', path: '/setup/inventory' },
+          { name: inventoryName || 'Inventory' },
           { name: `${widgetName}s List` }
         ]}
       />

From 4d3b6ec9df9f6d7130944b59866565fdc4c38525 Mon Sep 17 00:00:00 2001
From: Llewellyn Dsouza <lledsouza2209@gmail.com>
Date: Thu, 10 Mar 2022 10:57:54 +0530
Subject: [PATCH 15/16] Fixed: labels on widget dropdown select

---
 src/pages/itemListing/index.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/pages/itemListing/index.js b/src/pages/itemListing/index.js
index 2b5450e..5631534 100644
--- a/src/pages/itemListing/index.js
+++ b/src/pages/itemListing/index.js
@@ -178,8 +178,7 @@ function ItemListing() {
             <>
               <Grid item sx={4}>
                 <Select
-                  select
-                  variant="outlined"
+                  displayEmpty
                   value={pFam}
                   inputProps={{ 'aria-label': 'Without label' }}
                   sx={{
@@ -190,7 +189,7 @@ function ItemListing() {
                     setPFam(e.target.value);
                   }}
                 >
-                  <MenuItem key={'none'} value={''}>
+                  <MenuItem disabled key={'none'} value={''}>
                     Widget family L1
                   </MenuItem>
                   {primaryFamilies &&
@@ -203,8 +202,7 @@ function ItemListing() {
               </Grid>
               <Grid item sx={4}>
                 <Select
-                  select
-                  fullWidth
+                  displayEmpty
                   variant="outlined"
                   value={sFam}
                   inputProps={{ 'aria-label': 'Without label' }}
@@ -215,7 +213,7 @@ function ItemListing() {
                     setSFam(e.target.value);
                   }}
                 >
-                  <MenuItem key={'none'} value={''}>
+                  <MenuItem disabled key={'none'} value={''}>
                     Widget family L2
                   </MenuItem>
                   {secondaryFamilies &&

From ceb9256f1bc2c052bd0c4710812ae3bb45779141 Mon Sep 17 00:00:00 2001
From: Dikshajain39511 <98263148+Dikshajain39511@users.noreply.github.com>
Date: Thu, 10 Mar 2022 22:31:51 +0530
Subject: [PATCH 16/16] Feature/wms 70 (#93)

* Warehouse edit - Inventory hosted selector fix
* Update: Unique key fix

Co-authored-by: evdigitech <evdigitech@gmail.com>
Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>
---
 src/pages/editWarehouseDetails/index.js | 24 ++++++++++++++++--------
 src/pages/newWarehouseDetails/index.js  |  2 +-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/pages/editWarehouseDetails/index.js b/src/pages/editWarehouseDetails/index.js
index e630e37..4bcba95 100644
--- a/src/pages/editWarehouseDetails/index.js
+++ b/src/pages/editWarehouseDetails/index.js
@@ -355,7 +355,7 @@ function EditWarehouseDetails() {
     initialValues: {
       warehousename: warehouseData.name,
       address: warehouseData.address || '',
-      preferredInventories: warehouseData.preferredInventories || [],
+      preferredInventories: [...warehouseData.preferredInventories] || [],
       specs: warehouseData.specs || '',
       image: warehouseData.image_url ? [{ src: warehouseData.image_url }] : []
     },
@@ -423,9 +423,12 @@ function EditWarehouseDetails() {
                       variant="outlined"
                       value={formik.values.warehousename}
                       error={formik.touched.warehousename && Boolean(formik.errors.warehousename)}
-                      helperText={formik.touched.warehousename && formik.errors.warehousename && (
-                        <div style={{ color: 'red' }}>{formik.errors.warehousename}</div>
-                      ) }
+                      helperText={
+                        formik.touched.warehousename &&
+                        formik.errors.warehousename && (
+                          <div style={{ color: 'red' }}>{formik.errors.warehousename}</div>
+                        )
+                      }
                       onChange={formik.handleChange}
                     />
                   </Box>
@@ -448,9 +451,12 @@ function EditWarehouseDetails() {
                       variant="outlined"
                       value={formik.values.address}
                       error={formik.touched.address && Boolean(formik.errors.address)}
-                      helperText={formik.touched.address && formik.errors.address && (
-                        <div style={{ color: 'red' }}>{formik.errors.address}</div>
-                      ) }
+                      helperText={
+                        formik.touched.address &&
+                        formik.errors.address && (
+                          <div style={{ color: 'red' }}>{formik.errors.address}</div>
+                        )
+                      }
                       onChange={formik.handleChange}
                     />
                   </Box>
@@ -469,7 +475,6 @@ function EditWarehouseDetails() {
                     <Select
                       multiple
                       select
-                      disabled
                       fullWidth
                       variant="outlined"
                       name="preferredInventories"
@@ -502,6 +507,9 @@ function EditWarehouseDetails() {
                         );
                       }}
                     >
+                      <MenuItem disabled key={'none'} value={''}>
+                        None Selected
+                      </MenuItem>
                       {inventoryTypes &&
                         inventoryTypes.map((inventory) => (
                           <MenuItem key={inventory._id} value={inventory._id}>
diff --git a/src/pages/newWarehouseDetails/index.js b/src/pages/newWarehouseDetails/index.js
index d5cb94a..4f7cbcf 100644
--- a/src/pages/newWarehouseDetails/index.js
+++ b/src/pages/newWarehouseDetails/index.js
@@ -197,7 +197,7 @@ function NewWarehouseDetails() {
                         );
                       }}
                     >
-                      <MenuItem key={''} value={''}>
+                      <MenuItem disabled key={'none'} value={''}>
                         None Selected
                       </MenuItem>
                       {inventoryTypes &&