Feature/wms 42 (#60)

* Added: transfer list component
* Updated: package.json
* Linted
* Udpated: removed width constrain
* create user role UI changes

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

package.json

@@ -17,6 +17,7 @@
     "@fullcalendar/react": "5.9.0",
     "@fullcalendar/timegrid": "5.9.0",
     "@mui/icons-material": "5.2.0",
+    "@mui/lab": "^5.0.0-alpha.69",
     "@mui/material": "5.2.0",
     "@mui/styled-engine": "5.2.0",
     "@mui/styles": "^5.3.0",
@@ -30,6 +31,7 @@
     "apisauce": "^2.1.5",
     "chart.js": "3.4.1",
     "chroma-js": "2.1.2",
+    "date-fns": "^2.28.0",
     "dotenv": "^10.0.0",
     "dropzone": "5.9.2",
     "flatpickr": "4.6.9",

src/components/DateTimePicker/index.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import DateTimePicker from '@mui/lab/DateTimePicker';
+
+export default function DateTimeInput() {
+  const [value, setValue] = React.useState(new Date());
+
+  const handleChange = (newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Stack spacing={3}>
+        <DateTimePicker
+          label=""
+          value={value}
+          renderInput={(params) => <TextField {...params} />}
+          onChange={handleChange}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

src/components/MDTransferList/index.js

@@ -5,7 +5,6 @@ import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
-import MDBox from 'components/MDBox';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
@@ -15,26 +14,26 @@ import { makeStyles } from '@mui/styles';
 const useStyles = makeStyles({
   boxStyling: {
     boxShadow: 'none',
-	borderRadius: '5px',
-	border: '1px solid #c2c2c2',
-	padding:'8px'
+    borderRadius: '5px',
+    border: '1px solid #c2c2c2',
+    padding: '8px'
   },
   label: {
-	'& .MuiTypography-root': {
-	fontSize: '12px'
-	}
+    '& .MuiTypography-root': {
+      fontSize: '12px'
+    }
   },
   line: {
-	backgroundImage: 'none',
-	margin:'0 -8px',
-	width: 'calc(100% + 16px)',
-	backgroundColor: '#c2c2c2'
+    backgroundImage: 'none',
+    margin: '0 -8px',
+    width: 'calc(100% + 16px)',
+    backgroundColor: '#c2c2c2'
   },
   unsetwidth: {
-	minWidth: 'unset',
-	'& .MuiCheckbox-root': {
-	paddingLeft: '0px'
-	}
+    minWidth: 'unset',
+    '& .MuiCheckbox-root': {
+      paddingLeft: '0px'
+    }
   }
 });
 
@@ -47,7 +46,6 @@ function intersection(a, b) {
 }
 
 export default function TransferList() {
-	
   const classes = useStyles();
   const [checked, setChecked] = React.useState([]);
   const [left, setLeft] = React.useState([0, 1, 2, 3]);
@@ -92,62 +90,58 @@ export default function TransferList() {
   };
 
   const customList = (items) => (
-      <List component="div" role="list">
-        {items.map((value) => {
-          const labelId = `transfer-list-item-${value}-label`;
+    <List component="div" role="list">
+      {items.map((value) => {
+        const labelId = `transfer-list-item-${value}-label`;
 
-          return (
-            <ListItem 
-              button
-              key={value}
-              role="listitem"
-              onClick={handleToggle(value)}
-            >
-			  <ListItemIcon className={classes.unsetwidth}>
-                <Checkbox
-                  disableRipple
-                  checked={checked.indexOf(value) !== -1}
-                  tabIndex={-1}
-                  inputProps={{
-                    'aria-labelledby': labelId
-                  }}
-                />
-              </ListItemIcon>
-			  
-              <ListItemText id={labelId} className={classes.label} primary={`Warehouse ${value + 1}`} />
-            </ListItem>
-          );
-        })}
-        <ListItem />
-      </List>
+        return (
+          <ListItem button key={value} role="listitem" onClick={handleToggle(value)}>
+            <ListItemIcon className={classes.unsetwidth}>
+              <Checkbox
+                disableRipple
+                checked={checked.indexOf(value) !== -1}
+                tabIndex={-1}
+                inputProps={{
+                  'aria-labelledby': labelId
+                }}
+              />
+            </ListItemIcon>
+
+            <ListItemText
+              id={labelId}
+              className={classes.label}
+              primary={`Warehouse ${value + 1}`}
+            />
+          </ListItem>
+        );
+      })}
+      <ListItem />
+    </List>
   );
 
   return (
-        <MDBox sx={{ backgroundColor: '#fff', border:'1px solid #c2c2c2', borderTop: '3px solid #007aff', display: 'inline-block', padding:'12px', borderRadius:'4px', width: '40%' }}>
-		 <Typography gutterBottom variant="h6" component="div">
-        Warehouse
-      </Typography>
     <Grid container>
-      <Grid item md={5} className={classes.boxStyling} >
-	<Typography gutterBottom variant="caption" component="div">
-        Unassigned
-    </Typography>	  
-	  <Divider className={classes.line} />
-	  {customList(left)}</Grid>
+      <Grid item md={5} className={classes.boxStyling}>
+        <Typography gutterBottom variant="caption" component="div">
+          Unassigned
+        </Typography>
+        <Divider className={classes.line} />
+        {customList(left)}
+      </Grid>
       <Grid item md={2}>
-	  <Grid container direction="column" alignItems="center">
+        <Grid container direction="column" alignItems="center">
           <IconButton
-            sx={{ my: 0.5, color:'#000' }}
+            sx={{ my: 0.5, color: '#000' }}
             variant="outlined"
-            size="small"		
+            size="small"
             disabled={left.length === 0}
             aria-label="move all right"
-			onClick={handleAllRight}
+            onClick={handleAllRight}
           >
             &gt;&gt;
           </IconButton>
           <IconButton
-            sx={{ my: 0.5, color:'#000' }}
+            sx={{ my: 0.5, color: '#000' }}
             variant="outlined"
             size="small"
             disabled={leftChecked.length === 0}
@@ -157,7 +151,7 @@ export default function TransferList() {
             &gt;
           </IconButton>
           <IconButton
-            sx={{ my: 0.5, color:'#000'  }}
+            sx={{ my: 0.5, color: '#000' }}
             variant="outlined"
             size="small"
             disabled={rightChecked.length === 0}
@@ -167,7 +161,7 @@ export default function TransferList() {
             &lt;
           </IconButton>
           <IconButton
-            sx={{ my: 0.5, color:'#000'  }}
+            sx={{ my: 0.5, color: '#000' }}
             variant="outlined"
             size="small"
             disabled={right.length === 0}
@@ -176,15 +170,15 @@ export default function TransferList() {
           >
             &lt;&lt;
           </IconButton>
-		  </Grid>
+        </Grid>
       </Grid>
       <Grid item md={5} className={classes.boxStyling}>
-	  <Typography gutterBottom variant="caption" component="div">
-        Assigned
-      </Typography>
-	  <Divider className={classes.line}/>
-	  {customList(right)}</Grid>
+        <Typography gutterBottom variant="caption" component="div">
+          Assigned
+        </Typography>
+        <Divider className={classes.line} />
+        {customList(right)}
+      </Grid>
     </Grid>
-	      </MDBox>
   );
 }

src/pages/createUserRole/index.js

@@ -0,0 +1,218 @@
+import React from 'react';
+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 { Box, Grid } from '@mui/material';
+import MDButton from 'components/Button';
+import TransferList from 'components/MDTransferList';
+import DateTimeInput from 'components/DateTimePicker';
+import Switch from 'components/Switch';
+import MDTypography from 'components/MDTypography';
+import MDInput from 'components/MDInput';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import Typography from '@mui/material/Typography';
+
+const useStyles = makeStyles(() => ({
+  labelSize: {
+    fontSize: '16px',
+    letterSpacing: '0.01em',
+    color: '#000',
+    marginBottom: '4px'
+  },
+  boxWrap: {
+    backgroundColor: '#fff',
+    border: '1px solid #c2c2c2',
+    borderTop: '3px solid #007aff',
+    display: 'inline-block',
+    padding: '12px',
+    borderRadius: '4px'
+  },
+  noLegend: {
+    display: 'none'
+  },
+  fullWidth: {
+    width: '100%',
+    borderColor: '#d2d6da',
+    borderRadius: '0.375rem'
+  },
+  switchSpacer: {
+    margin: '0',
+    '& .MuiFormControlLabel-root': {
+      margin: '0'
+    },
+    '& .MuiSwitch-root': {
+      margin: '0'
+    }
+  }
+}));
+function CreateUserRole() {
+  const classes = useStyles();
+  return (
+    <DashboardLayout>
+      <DashboardNavbar />
+      <MDBox px={2} py={3}>
+        <Grid container spacing={2} className={classes.margin}>
+          <Grid item xs={8} md={8}>
+            <Grid container spacing={2} className={classes.margin}>
+              <Grid item xs={12}>
+                <Box component="div" sx={{}} className={classes.labelSize}>
+                  Warehouse name
+                </Box>
+                <MDInput fullWidth name="warehousename" type="text" variant="outlined" />
+              </Grid>
+              <Grid item xs={12}>
+                <Box component="div" className={classes.labelSize}>
+                  Description
+                </Box>
+                <TextareaAutosize className={classes.fullWidth} minRows={5} />
+              </Grid>
+              <Grid item xs={12}>
+                <Grid container spacing={2} className={classes.margin}>
+                  <Grid item xs={6}>
+                    <Box component="div" className={classes.labelSize}>
+                      Created By
+                    </Box>
+                    <MDInput fullWidth name="warehousename" type="text" variant="outlined" />
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Box component="div" className={classes.labelSize}>
+                      Date &amp; Time
+                    </Box>
+                    <DateTimeInput />
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Box component="div" className={classes.labelSize}>
+                      Last Updated by
+                    </Box>
+                    <MDInput fullWidth name="warehousename" type="text" variant="outlined" />
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Box component="div" className={classes.labelSize}>
+                      Date &amp; Time
+                    </Box>
+                    <DateTimeInput />
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item xs={4}>
+            <Box component="div" className={classes.labelSize}>
+              Choose avatar component here
+            </Box>
+          </Grid>
+        </Grid>
+        <Grid container spacing={4} sx={{ marginTop: '-6px' }}>
+          <Grid item xs={12} md={4}>
+            <MDBox
+              sx={{
+                backgroundColor: '#fff',
+                border: '1px solid #c2c2c2',
+                borderTop: '7px solid #007aff',
+                padding: '12px',
+                borderRadius: '4px'
+              }}
+            >
+              <Typography gutterBottom variant="h6" component="div">
+                Warehouse
+              </Typography>
+              <TransferList />
+            </MDBox>
+          </Grid>
+          <Grid item xs={12} md={4}>
+            <MDBox
+              sx={{
+                backgroundColor: '#fff',
+                border: '1px solid #c2c2c2',
+                borderTop: '7px solid #007aff',
+                padding: '12px',
+                borderRadius: '4px'
+              }}
+            >
+              <Typography gutterBottom variant="h6" component="div">
+                Warehouse
+              </Typography>
+              <TransferList />
+            </MDBox>
+          </Grid>
+        </Grid>
+        <Grid container spacing={2} sx={{ marginTop: '12px' }}>
+          <Grid item xs={12} md={3}>
+            <MDBox
+              sx={{
+                backgroundColor: '#fff',
+                border: '1px solid #c2c2c2',
+                borderTop: '7px solid #007aff',
+                padding: '12px',
+                borderRadius: '4px'
+              }}
+            >
+              <Typography gutterBottom variant="h6" component="div">
+                Process
+              </Typography>
+              <MDBox
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                lineHeight={1}
+                className={classes.switchSpacer}
+              >
+                <MDTypography variant="body2">Sidenav Mini</MDTypography>
+                <Switch checked />
+              </MDBox>
+            </MDBox>
+          </Grid>
+          <Grid item xs={12} md={3}>
+            <MDBox
+              sx={{
+                backgroundColor: '#fff',
+                border: '1px solid #c2c2c2',
+                borderTop: '7px solid #007aff',
+                padding: '12px',
+                borderRadius: '4px'
+              }}
+            >
+              <Typography gutterBottom variant="h6" component="div">
+                Application
+              </Typography>
+              <MDBox
+                display="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                lineHeight={1}
+                className={classes.switchSpacer}
+              >
+                <MDTypography variant="body2">Sidenav Mini</MDTypography>
+                <Switch checked />
+              </MDBox>
+            </MDBox>
+          </Grid>
+        </Grid>
+        <MDBox
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          lineHeight={1}
+          sx={{ marginBottom: '15px', marginTop: '24px' }}
+        >
+          <MDButton
+            size="medium"
+            color="primary"
+            variant="outlined"
+            type="submit"
+            sx={{ marginRight: '15px' }}
+          >
+            Cancel
+          </MDButton>
+          <MDButton size="medium" color="primary" variant="contained">
+            Save
+          </MDButton>
+        </MDBox>
+      </MDBox>
+      <Footer />
+    </DashboardLayout>
+  );
+}
+export default CreateUserRole;

src/pages/useraccess/index.js

@@ -17,6 +17,7 @@ import RolesActions, { RolesSelectors } from 'redux/RolesRedux';
 import { API } from 'constant';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
+import { useNavigate } from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
   iconSize: {
@@ -80,6 +81,7 @@ function UserAccessScreen() {
   const rolesData = useSelector(RolesSelectors.getRolesDetail);
   const [userRecords, setUserRecords] = useState([]);
   const [rolesRecords, setRoleRecords] = useState([]);
+  const navigate = useNavigate();
 
   const usersHandler = () => {
     dispatch(
@@ -156,7 +158,7 @@ function UserAccessScreen() {
             <SearchBar />
           </Grid>
           <Grid item xs={12} sm={4} md={2}>
-            <MDButton color="primary" size="medium">
+            <MDButton color="primary" size="medium" onClick={() => navigate('/setup/users-access/create-role')}>
               {'+ CREATE USER'}
             </MDButton>
           </Grid>

src/routes/index.js

@@ -58,6 +58,7 @@ import SetupInventory from 'pages/setupInventory';
 import HomeIcon from 'assets/images/HomeIcon';
 import SetupIcon from 'assets/images/SetupIcon';
 import AddNewProduct from '../pages/addNewProduct';
+import CreateUserRole from 'pages/createUserRole';
 import WidgetLabel from 'pages/widgetLabel';
 
 // Images
@@ -202,6 +203,13 @@ const protectedRoutes = [
         route: '/setup/labeling/widget-label',
         hide: true,
         component: <WidgetLabel />
+      },
+      {
+        name: 'Create Role',
+        key: 'create-role',
+        route: '/setup/users-access/create-role',
+        hide: true,
+        component: <CreateUserRole />
       }
     ]
   }