Feature/wms 44 (#37)

* add new/update inventory

* prop validation in imageupload component

* Linted

* add table to inventory page

* Renamed: ImageUpload - Index to index

* Resolved: route merge conflict

* Resolved: ImageUpload conflicts w/ warehouse page

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

src/components/ImageUpload/Index.js

@@ -1,95 +0,0 @@
-import MDBox from 'components/MDBox';
-import UploadIcon from 'assets/images/UploadIcon';
-import MDTypography from 'components/MDTypography';
-import pxToRem from 'assets/theme-dark/functions/pxToRem';
-import Placeholder from 'assets/images/placeholder.png';
-import { Button } from '@mui/material';
-import Close from 'assets/images/Close';
-
-
-function ImageUpload () {
-  const PreviewImg = [1,2,3,4,5,6,7,8,9,10,11];
-  return(
-    <>
-      <MDBox 
-        sx={{ 
-          border: '1px solid #c4c4c4', 
-          borderRadius:pxToRem(8),
-          padding: pxToRem(16)
-        }}
-      >
-        <MDBox sx={{
-          border: '1px dashed #C4C4C4',
-          borderRadius: pxToRem(6),
-          cursor: 'pointer',
-          position: 'relative',
-          textAlign: 'center',
-          minHeight: pxToRem(200),
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginBottom: '16px'
-        }} 
-        >
-          <MDBox multiple component="input" name="file" type="file" 
-            sx={{ 
-              width:'100%', 
-              opacity: '0',
-              cursor: 'pointer', 
-              position: 'absolute', 
-              top:'0', 
-              left:'0', 
-              right:'0',
-              bottom: '0'
-            }}
-          />  
-          <MDBox component="span" >
-            <UploadIcon />
-            <MDTypography component="span" sx={{ color:'#000', letterSpacing:'0.01em', display: 'block' }} >
-                Upload Product images
-            </MDTypography>
-          </MDBox>
-        </MDBox>
-        {/* -----------img-preview----------- */}
-        <MDBox sx={{ marginBottom:'-10px' }}>
-          {PreviewImg.map((item)=>{
-            return(
-              <MDBox key={item} component="span" 
-                sx={{ 
-                  width:'80px', 
-                  height:'63px', 
-                  marginRight: '16px', 
-                  display:'inline-block', 
-                  borderRadius:'4px', 
-                  position: 'relative' 
-                }}
-              >
-                <img src={Placeholder} alt='placeholder' width="100%"  />
-                <Button 
-                  sx={{ 
-                    backgroundColor: '#fff !important',
-                    boxShadow: '0px 1px 1px rgb(0 0 0 / 25%)',
-                    padding:'0',
-                    minWidth: '20px',
-                    minHeight: '20px',
-                    borderRadius: '100%',
-                    position: 'absolute',
-                    right: '4px',
-                    top: '4px',
-                    '&:hover' :{
-                      backgroundColor:'red !important'
-                    }
-                  }}
-                >
-                  <Close />
-                </Button>
-              </MDBox>
-            );
-          })} 
-        </MDBox>
-      </MDBox>
-    </>
-  );
-}
-
-export default ImageUpload;

src/components/ImageUpload/index.js

@@ -0,0 +1,108 @@
+import MDBox from 'components/MDBox';
+import PropTypes from 'prop-types';
+import UploadIcon from 'assets/images/UploadIcon';
+import MDTypography from 'components/MDTypography';
+import pxToRem from 'assets/theme-dark/functions/pxToRem';
+import Placeholder from 'assets/images/placeholder.png';
+import { Button } from '@mui/material';
+import Close from 'assets/images/Close';
+
+function ImageUpload({ heading, previewImg }) {
+  return (
+    <>
+      <MDBox
+        sx={{
+          border: '1px solid #c4c4c4',
+          borderRadius: pxToRem(8),
+          padding: pxToRem(16)
+        }}
+      >
+        <MDBox
+          sx={{
+            border: '1px dashed #C4C4C4',
+            borderRadius: pxToRem(6),
+            cursor: 'pointer',
+            position: 'relative',
+            textAlign: 'center',
+            minHeight: pxToRem(200),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: '16px'
+          }}
+        >
+          <MDBox
+            multiple
+            component="input"
+            name="file"
+            type="file"
+            sx={{
+              width: '100%',
+              opacity: '0',
+              cursor: 'pointer',
+              position: 'absolute',
+              top: '0',
+              left: '0',
+              right: '0',
+              bottom: '0'
+            }}
+          />
+          <MDBox component="span">
+            <UploadIcon />
+            <MDTypography
+              component="span"
+              sx={{ color: '#000', letterSpacing: '0.01em', display: 'block' }}
+            >
+              {heading}
+            </MDTypography>
+          </MDBox>
+        </MDBox>
+        {/* -----------img-preview----------- */}
+        <MDBox sx={{ marginBottom: '-10px' }}>
+          {previewImg.map((item) => {
+            return (
+              <MDBox
+                key={item}
+                component="span"
+                sx={{
+                  width: '80px',
+                  height: '63px',
+                  marginRight: '16px',
+                  display: 'inline-block',
+                  borderRadius: '4px',
+                  position: 'relative'
+                }}
+              >
+                <img src={Placeholder} alt="placeholder" width="100%" />
+                <Button
+                  sx={{
+                    backgroundColor: '#fff !important',
+                    boxShadow: '0px 1px 1px rgb(0 0 0 / 25%)',
+                    padding: '0',
+                    minWidth: '20px',
+                    minHeight: '20px',
+                    borderRadius: '100%',
+                    position: 'absolute',
+                    right: '4px',
+                    top: '4px',
+                    '&:hover': {
+                      backgroundColor: 'red !important'
+                    }
+                  }}
+                >
+                  <Close />
+                </Button>
+              </MDBox>
+            );
+          })}
+        </MDBox>
+      </MDBox>
+    </>
+  );
+}
+
+export default ImageUpload;
+ImageUpload.propTypes = {
+  previewImg: PropTypes.array,
+  heading: PropTypes.string
+};

src/pages/inventory/index.js

@@ -0,0 +1,238 @@
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import { Grid, InputLabel } from '@mui/material';
+import MDInput from 'components/MDInput';
+import ImageUpload from 'components/ImageUpload';
+import Switch from 'components/Switch';
+import MDTypography from 'components/MDTypography';
+import { makeStyles } from '@mui/styles';
+import MDBox from 'components/MDBox';
+import Dropdown from 'components/Dropdown';
+import MDButton from 'components/Button';
+import BasicTable from 'components/BasicTable';
+
+const useStyles = makeStyles({
+  textWrap: {
+    whiteSpace: 'nowrap',
+    fontSize: '16px',
+    fontWeight: '800'
+  },
+  gridWrap: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  textSize: {
+    fontSize: '16px',
+    color: 'gray',
+    textAlign: 'justify'
+  },
+  btnWrap: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  marginTop: {
+    marginTop: '54px'
+  }
+});
+
+function InventoryScreen() {
+  const stockBox = [
+    {
+      text: 'Stock Tracking'
+    },
+    {
+      text: 'Replenishment'
+    },
+    {
+      text: 'Alerting'
+    },
+    {
+      text: 'Check In/Out'
+    },
+    {
+      text: 'Maintenance'
+    },
+    {
+      text: 'Location'
+    }
+  ];
+
+  const tableData = [
+    {
+      level1: 'Ipsum',
+      level2: 'Vivera'
+    },
+    {
+      level1: 'Ipsum',
+      level2: 'Vivera'
+    }
+  ];
+
+  const header = [
+    {
+      name: 'Level 1',
+      prop: 'level1'
+    },
+    {
+      name: 'Level 2',
+      prop: 'level2'
+    }
+  ];
+
+  const dropdownData = [
+    {
+      ID: '1',
+      displayname: 'Regular, full time'
+    },
+    {
+      ID: '2',
+      displayname: 'Regular, part time'
+    },
+    {
+      ID: '3',
+      displayname: 'Contractor- Arise Max'
+    }
+  ];
+
+  const dataInventory = [
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Inventory Type'
+    }
+  ];
+  const dataLevel = [
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Level 1'
+    },
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Level 2'
+    }
+  ];
+  const previewImg = [1, 2, 3];
+  const classes = useStyles();
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={5} py={5}>
+        <MDBox
+          px={5}
+          py={5}
+          sx={{
+            backgroundColor: '#fff',
+            justifyContent: 'center',
+            alignItems: 'center',
+            display: 'flex'
+          }}
+        >
+          <Grid container spacing={5}>
+            <Grid item xs={12} sm={6} md={6}>
+              <Grid container spacing={2}>
+                <Grid item xs={12} sm={12} md={12}>
+                  <InputLabel sx={{ pb: 2 }} id="demo-simple-select-label">
+                    Inventory Name
+                  </InputLabel>
+                  <MDInput sx={{ width: '100%' }} />
+                </Grid>
+                {dataInventory &&
+                  dataInventory.map((item, index) => (
+                    <Grid item xs={12} sm={12} md={12} key={index}>
+                      <Dropdown items={item} dropdownData={dropdownData} />
+                    </Grid>
+                  ))}
+                <Grid item xs={12} sm={12} md={12}>
+                  <InputLabel sx={{ pb: 2 }} id="demo-simple-select-label">
+                    Widget Name
+                  </InputLabel>
+                  <MDInput sx={{ width: '100%' }} />
+                </Grid>
+              </Grid>
+              <MDBox sx={{ my: 4 }}>
+                <MDTypography variant="h5">Policies</MDTypography>
+                <MDTypography className={classes.textSize}>
+                  Egestas pulvinar ornare vulputate porttitor consectetur condimentum at tellus
+                  quis. Leo pellentesque ipsum, a purus dignissim aliquam, orci. Elementum
+                  ullamcorper a sit eleifend ante ullamcorper ornare mi pharetra.
+                </MDTypography>
+              </MDBox>
+              <MDBox
+                mr={{ xs: 0, xl: 8 }}
+                sx={{
+                  width: '40%',
+                  padding: '12.5px 10px',
+                  backgroundColor: '#fff',
+                  border: 'solid 0.5px #c4c4c4',
+                  borderRadius: '4px',
+                  my: 5
+                }}
+              >
+                <div className={classes.wrap}>
+                  {stockBox.map((item) => (
+                    <>
+                      <div className={classes.gridWrap}>
+                        <MDTypography className={classes.textWrap}>{item.text}</MDTypography>
+                        <Switch />
+                      </div>
+                    </>
+                  ))}
+                </div>
+              </MDBox>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6}>
+              <ImageUpload heading="Upload Inventory Images" previewImg={previewImg} />
+            </Grid>
+            <Grid item xs={12} sm={12} md={12}>
+              <Grid container spacing={1}>
+                {dataLevel &&
+                  dataLevel.map((item, index) => (
+                    <Grid item xs={12} sm={6} md={4} key={index}>
+                      <Dropdown items={item} dropdownData={dropdownData} />
+                    </Grid>
+                  ))}
+                <Grid item xs={12} sm={6} md={4}>
+                  <MDButton color="primary" circular="true" className={classes.marginTop}>
+                    {'add hierarchy level'}
+                  </MDButton>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item xs={12} sm={12} md={12}>
+              <MDBox
+                sx={{
+                  backgroundColor: '#E5E5E5',
+                  width: '98%',
+                  padding: '9px'
+                }}
+              >
+                <MDTypography>Widget hierarchy</MDTypography>
+                <BasicTable
+                  className={classes.margin}
+                  data={tableData}
+                  header={header}
+                  backgroundColor="#E5E5E5"
+                />
+              </MDBox>
+            </Grid>
+            <MDBox sx={{ ml: 'auto', mr: 'auto', mt: 3 }}>
+              <MDButton sx={{ ml: 3 }} color="error" variant="outlined">
+                {'CANCEL'}
+              </MDButton>
+              <MDButton sx={{ ml: 3 }} color="primary" variant="outlined">
+                {'SAVE'}
+              </MDButton>
+              <MDButton sx={{ ml: 3 }} color="primary">
+                {'ADD ITEMS'}
+              </MDButton>
+            </MDBox>
+          </Grid>
+        </MDBox>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default InventoryScreen;

src/pages/newWarehouseDetails/index.js

@@ -2,7 +2,7 @@ import { Box, Grid, TextField } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
-import ImageUpload from 'components/ImageUpload/Index';
+import ImageUpload from 'components/ImageUpload';
 import MDButton from 'components/Button';
 
 const useStyles = makeStyles({
@@ -14,6 +14,8 @@ const useStyles = makeStyles({
   }
 });
 
+const previewImg = [1, 2, 3];
+
 function NewWarehouseDetails() {
   const classes = useStyles();
   return (
@@ -62,7 +64,7 @@ function NewWarehouseDetails() {
               </Grid>
               <Grid item xs={12} sm={6} md={6}>
                 <Box sx={{ marginTop: '30px' }}>
-                  <ImageUpload />
+                  <ImageUpload heading="Upload Warehouse Image" previewImg={previewImg} />
                 </Box>
               </Grid>
             </Grid>

src/routes/index.js

@@ -44,6 +44,7 @@ import LoginScreen from 'pages/authentication';
 
 // @mui icons
 import Icon from '@mui/material/Icon';
+import InventoryScreen from 'pages/inventory';
 import WarehouseScreen from 'pages/warehouse';
 import LabelingScreen from 'pages/labeling';
 import UserAccessScreen from 'pages/useraccess';
@@ -98,6 +99,12 @@ const protectedRoutes = [
     key: 'Setup',
     icon: <Icon fontSize="medium">dashboard</Icon>,
     collapse: [
+      {
+        name: 'Inventory Definition',
+        key: 'inventory',
+        route: '/inventory',
+        component: <InventoryScreen />
+      },
       {
         name: 'Setup Home',
         key: 'warehouse-setup',