Feature/wms 35 (#34)

Added: Location label form

Co-authored-by: [Diksha] <[diksha39511@gmail.com]>
Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>
Co-authored-by: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com>

src/components/BasicTable/index.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+
+const useStyles = makeStyles({
+  headColor: {
+    display: 'revert'
+  },
+  rowStyle: {
+    color: '#007aff'
+  },
+  tablebody: {
+    fontSize: '13px',
+    color: '#7F7F7F'
+  }
+});
+
+const row = (x, i, header) => (
+  <TableRow key={`tr-${i}`}>
+    {header.map((y, k) => (
+      <TableCell key={`tc-${k}`}>{x[y.prop]}</TableCell>
+    ))}
+  </TableRow>
+);
+export default function BasicTable({ data, header, backgroundColor }) {
+  const classes = useStyles();
+  const TableContainer = styled('div')(
+    () => `
+  td,
+  th {
+    border-right: 1px solid #EBEBEB;
+    border-bottom: 1px solid #EBEBEB;
+    border-left: 1px solid #EBEBEB;
+    text-align: left;
+    white-space: nowrap;
+    background-color: white;
+  }
+  th {
+    background-color: ${backgroundColor};,
+    color: #9B9B9B;
+  }
+  `
+  );
+
+  return (
+    <TableContainer sx={{ width: 200, maxWidth: '100%' }}>
+      <Table sx={{ minWidth: 700 }} style={{ width: 1200 }}>
+        <TableHead className={classes.headColor}>
+          <TableRow className={classes.tableRowContainer}>
+            {header && header.map((x, i) => <TableCell key={`thc-${i}`}>{x.name}</TableCell>)}
+          </TableRow>
+        </TableHead>
+        <TableBody>{data.map((x, i) => row(x, i, header))}</TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+BasicTable.propTypes = {
+  data: PropTypes.array,
+  header: PropTypes.array,
+  backgroundColor: PropTypes.string
+};

src/components/Dropdown/index.js

@@ -1,13 +1,29 @@
-import * as React from 'react';
+import React, { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
 // import InputLabel from '@mui/material/InputLabel'
+import PropTypes from 'prop-types';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
+import { InputLabel } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 
-export default function Dropdown() {
-  const [age, setAge] = React.useState('');
+const useStyles = makeStyles({
+  font: {
+    fontWeight: 'bold',
+    color: 'black'
+  }
+});
+export default function Dropdown({ items, dropdownData }) {
+  const classes = useStyles();
+
+  const [age, setAge] = useState('');
+  const [dropDownValue, setDropDownValue] = useState([]);
+
+  useEffect(() => {
+    setDropDownValue(items);
+  }, [items]);
 
   const handleChange = (event) => {
     const {
@@ -20,32 +36,40 @@ export default function Dropdown() {
   };
 
   return (
-    <Box sx={{ width: '100%' }}>
-      <FormControl sx={{ width: '100%' }}>
-        {/* <InputLabel id="demo-simple-select-label">Equipment</InputLabel> */}
-        <Select
-          displayEmpty
-          input={<OutlinedInput />}
-          value={age}
-          renderValue={(selected) => {
-            if (selected.length === 0) {
-              return <span>Placeholder</span>;
-            }
+    <>
+      <Box sx={{ width: '100%' }}>
+        <InputLabel className={classes.font} id="demo-simple-select-label" sx={{ pb: 2, pt: 3 }}>
+          {dropDownValue?.label}
+        </InputLabel>
+        <FormControl sx={{ width: '100%' }}>
+          <Select
+            displayEmpty
+            input={<OutlinedInput />}
+            value={age}
+            renderValue={(selected) => {
+              if (selected.length === 0) {
+                return <span>{dropDownValue?.placeholder}</span>;
+              }
+              return selected;
+            }}
+            inputProps={{ 'aria-label': 'Without label' }}
+            onChange={handleChange}
+          >
+            <MenuItem disabled value="">
+              <span>{dropDownValue?.label}</span>
+            </MenuItem>
+            {dropdownData && dropdownData.map((data) => (
+              <MenuItem value={data.displayname} key={data.ID}>{data.displayname}</MenuItem>
+            ))}
             
-            return selected;
-          }}
-          inputProps={{ 'aria-label': 'Without label' }}
-          onChange={handleChange}
-        >
-          <MenuItem disabled value="">
-            {' '}
-            <span>Placeholder</span>{' '}
-          </MenuItem>
-          <MenuItem value={'Ten'}>Ten</MenuItem>
-          <MenuItem value={'Twenty'}>Twenty</MenuItem>
-          <MenuItem value={'Thirty'}>Thirty</MenuItem>
-        </Select>
-      </FormControl>
-    </Box>
+          </Select>
+        </FormControl>
+      </Box>
+    </>
   );
 }
+Dropdown.propTypes = {
+  items: PropTypes.object.isRequired,
+  dropdownData: PropTypes.object.isRequired
+
+};

src/pages/labeling/index.js

@@ -0,0 +1,162 @@
+import MDBox from 'components/MDBox';
+import DashboardNavbar from 'components/DashboardNavbar';
+import Footer from 'components/Footer';
+import DashboardLayout from 'layouts/DashboardLayout';
+import { makeStyles } from '@mui/styles';
+import Dropdown from 'components/Dropdown';
+import { Grid } from '@mui/material';
+import BasicTable from 'components/BasicTable';
+import MDButton from 'components/Button';
+
+const useStyles = makeStyles({
+  iconSize: {
+    width: '50%',
+    height: '50%',
+    marginBottom: '10px'
+  },
+  margin: {
+    margin: '20px'
+  },
+  buttondiv: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '200px'
+  }
+});
+
+function LabelingScreen() {
+  const classes = useStyles();
+
+  const dropdownData = [
+    {
+      ID: '1',
+      displayname: 'Regular, full time'
+    },
+    {
+      ID: '2',
+      displayname: 'Regular, part time'
+    },
+    {
+      ID: '3',
+      displayname: 'Contractor- Arise Max'
+    }
+  ];
+  const data = [
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Select Warehouse'
+    },
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Select Zone'
+    },
+    {
+      placeholder: 'Lorem Ipsum',
+      label: 'Select Area'
+    },
+    {
+      placeholder: 'Warehouse 1',
+      label: 'Select Row'
+    }
+  ];
+  const data2 = [
+    {
+      placeholder: 'Z01-A02-R001-B001',
+      label: 'Bay TOTEM Labels'
+    },
+    {
+      placeholder: 'Z01-A02-R001-B001',
+      label: 'BIN Location Labels'
+    }
+  ];
+
+  const tableData = [
+    {
+      warehouse: 'Ipsum',
+      zone: 'Vivera',
+      area: 'Nisi',
+      row: 'Nulla',
+      label: 'Mauris',
+      bay: ''
+    },
+    {
+      warehouse: 'Ipsum',
+      zone: 'Vivera',
+      area: 'Nisi',
+      row: 'Nulla',
+      label: 'Mauris',
+      bay: ''
+    },
+    {
+      warehouse: 'Ipsum',
+      zone: 'Vivera',
+      area: 'Nisi',
+      row: 'Nulla',
+      label: 'Mauris',
+      bay: ''
+    }
+  ];
+
+  const header = [
+    {
+      name: 'Warehouse',
+      prop: 'warehouse'
+    },
+    {
+      name: 'Zone',
+      prop: 'zone'
+    },
+    {
+      name: 'Area',
+      prop: 'area'
+    },
+    {
+      name: 'Row',
+      prop: 'row'
+    },
+    {
+      name: 'Label',
+      prop: 'label'
+    },
+    {
+      name: 'Bay',
+      prop: 'bay'
+    }
+  ];
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={5} py={5}>
+        <Grid container spacing={2}>
+          {data &&
+            data.map((item, index) => (
+              <Grid item xs={12} sm={6} md={3} key={index}>
+                <Dropdown items={item} dropdownData={dropdownData} />
+              </Grid>
+            ))}
+        </Grid>
+        <br />
+        <BasicTable
+          className={classes.margin}
+          data={tableData}
+          header={header}
+          backgroundColor="gray"
+        />
+        <Grid container spacing={2}>
+          {data2 &&
+            data2.map((item, index) => (
+              <Grid item xs={12} sm={6} md={3} key={index}>
+                <Dropdown items={item} dropdownData={dropdownData} />
+              </Grid>
+            ))}
+        </Grid>
+        <div className={classes.buttondiv}>
+          <MDButton color="primary">{'Print Labels'}</MDButton>
+        </div>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default LabelingScreen;

src/routes/index.js

@@ -45,6 +45,7 @@ import LoginScreen from 'pages/authentication';
 // @mui icons
 import Icon from '@mui/material/Icon';
 import WarehouseScreen from 'pages/warehouse';
+import LabelingScreen from 'pages/labeling';
 
 // Images
 // import profilePicture from 'assets/images/team-3.jpg';
@@ -101,6 +102,26 @@ const protectedRoutes = [
         component: <WarehouseScreen />
       }
     ]
+  },
+  {
+    type: 'collapse',
+    name: 'Setup',
+    key: 'Setup',
+    icon: <Icon fontSize="medium">dashboard</Icon>,
+    collapse: [
+      {
+        name: 'Warehouse Design',
+        key: 'warehouse',
+        route: '/warehouse',
+        component: <WarehouseScreen />
+      },
+      {
+        name: 'Labeling',
+        key: 'labeling',
+        route: '/labeling',
+        component: <LabelingScreen />
+      }
+    ]
   }
   // { type: 'title', title: 'Pages', key: 'title-pages' },
   // {