From 1469e4ff5a987fae824af40ee85bfd6ee8c4d31e Mon Sep 17 00:00:00 2001
From: m0n02hz <mohit.nagar@walmart.com>
Date: Sun, 6 Mar 2022 01:15:51 +0530
Subject: [PATCH] [WMS-39] Role Page Added, date field bug fixed

---
 src/components/DateTimePicker/index.js |   2 +-
 src/pages/createEditUserRole/index.js  | 218 ++++++++++++++
 src/pages/createUserRole/index.js      | 382 -------------------------
 src/pages/useraccess/index.js          | 122 +++++---
 src/routes/index.js                    |   4 +-
 5 files changed, 296 insertions(+), 432 deletions(-)
 create mode 100644 src/pages/createEditUserRole/index.js
 delete mode 100644 src/pages/createUserRole/index.js

diff --git a/src/components/DateTimePicker/index.js b/src/components/DateTimePicker/index.js
index 735646d..c835a1f 100644
--- a/src/components/DateTimePicker/index.js
+++ b/src/components/DateTimePicker/index.js
@@ -11,7 +11,7 @@ export default function DateTimeInput({ disabled, value }) {
 
   useEffect(() => {
     setDate(value);
-  }, [value])
+  }, [value]);
 
   const handleChange = (newValue) => {
     setDate(newValue);
diff --git a/src/pages/createEditUserRole/index.js b/src/pages/createEditUserRole/index.js
new file mode 100644
index 0000000..b66bfe3
--- /dev/null
+++ b/src/pages/createEditUserRole/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 CreateEditUserRole() {
+  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 CreateEditUserRole;
diff --git a/src/pages/createUserRole/index.js b/src/pages/createUserRole/index.js
deleted file mode 100644
index 2811e8c..0000000
--- a/src/pages/createUserRole/index.js
+++ /dev/null
@@ -1,382 +0,0 @@
-import React from 'react';
-import MDBox from 'components/MDBox';
-import DashboardNavbar from 'components/DashboardNavbar';
-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 Typography from '@mui/material/Typography';
-import UserIcon from 'assets/images/userIcon.png';
-import EditIcon from 'assets/images/edit-icon.png';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import Breadcrumbs from 'components/Breadcrumbs';
-
-const useStyles = makeStyles(() => ({
-  labelSize: {
-    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();
-  const [personName, setPersonName] = React.useState([]);
-
-  const handleChange = (event) => {
-    const {
-      target: { value }
-    } = event;
-    setPersonName(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value
-    );
-  };
-  return (
-    <DashboardLayout>
-      <DashboardNavbar />
-      <Breadcrumbs
-        title="Role Details"
-        route={[
-          { name: 'Home', path: '/home' },
-          { name: 'Setup', path: '/setup' },
-          { name: 'Access', path: '/setup/users-access' },
-          { name: 'Role Details' }
-        ]}
-      />
-      <MDBox px={2} sx={{ backgroundColor: '#fff' }}>
-        <MDBox mx={2} sx={{ border: '1px solid #C4C4C4', borderRadius: '4px', padding: '30px' }}>
-          <MDBox sx={{ width: '50%', margin: 'auto' }}>
-            <MDBox sx={{ width: '120px', margin: 'auto', position: 'relative' }}>
-              <MDBox
-                sx={{
-                  width: '120px',
-                  height: '120px',
-                  backgroundColor: '#333333',
-                  borderRadius: '50%'
-                }}
-              />
-              <MDBox sx={{ position: 'absolute', bottom: '0', right: '0', cursor: 'pointer' }}>
-                <img src={EditIcon} alt="img" />
-              </MDBox>
-            </MDBox>
-            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component="div" sx={{}} className={classes.labelSize}>
-                User Name
-              </Box>
-              <MDInput fullWidth name="warehousename" type="text" variant="outlined" />
-            </MDBox>
-            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component="div" sx={{}} className={classes.labelSize}>
-                Phone Number
-              </Box>
-              <MDInput fullWidth name="warehousename" type="text" variant="outlined" />
-            </MDBox>
-            <MDBox sx={{ marginBottom: '24px' }}>
-              <Box component="div" sx={{}} className={classes.labelSize}>
-                Role
-              </Box>
-              <Box sx={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}>
-                <Box sx={{ width: '70%' }}>
-                  <Select
-                    multiple
-                    displayEmpty
-                    value={personName}
-                    input={<OutlinedInput />}
-                    renderValue={(selected) => {
-                      if (selected.length === 0) {
-                        return 'Placeholder';
-                      }
-
-                      return selected.join(', ');
-                    }}
-                    inputProps={{ 'aria-label': 'Without label' }}
-                    sx={{
-                      width: '100%'
-                    }}
-                    onChange={handleChange}
-                  >
-                    <MenuItem disabled value="">
-                      Placeholder
-                    </MenuItem>
-                    <MenuItem>Lorem Ipsum</MenuItem>
-                  </Select>
-                </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    width: '30%',
-                    border: '1px solid #C4C4C4',
-                    borderRadius: '4px'
-                  }}
-                >
-                  <Box
-                    component="div"
-                    sx={{
-                      fontSize: '16px',
-                      lineHeight: '20px',
-                      letterSpacing: '0.01em',
-                      textTransform: 'capitalize',
-                      color: '#000',
-                      marginLeft: '10px'
-                    }}
-                  >
-                    Access
-                  </Box>
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      position: 'relative',
-                      left: '20px'
-                    }}
-                  >
-                    <Switch checked />
-                  </Box>
-                </Box>
-              </Box>
-            </MDBox>
-            <Grid container spacing={2} className={classes.margin}>
-              <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>
-          </MDBox>
-        </MDBox>
-
-        <Grid container spacing={4} sx={{ marginTop: '-6px' }}>
-          <Grid item xs={12} md={6}>
-            <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={6}>
-            <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',
-                borderRadius: '4px'
-              }}
-            >
-              <Typography
-                gutterBottom
-                variant="h6"
-                component="div"
-                sx={{
-                  borderBottom: '1px solid #c2c2c2',
-                  padding: '10px 20px',
-                  marginBottom: '20px'
-                }}
-              >
-                Process
-              </Typography>
-              <Box sx={{ padding: ' 0px 20px' }}>
-                <MDBox
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  lineHeight={1}
-                  className={classes.switchSpacer}
-                  sx={{ marginBottom: '20px  !important' }}
-                >
-                  <MDTypography variant="body2">Stock Tracking</MDTypography>
-                  <Switch checked />
-                </MDBox>
-                <MDBox
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  lineHeight={1}
-                  className={classes.switchSpacer}
-                  sx={{ marginBottom: '20px !important' }}
-                >
-                  <MDTypography variant="body2">Replenishment</MDTypography>
-                  <Switch checked />
-                </MDBox>
-                <MDBox
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  lineHeight={1}
-                  className={classes.switchSpacer}
-                  sx={{ marginBottom: '20px  !important' }}
-                >
-                  <MDTypography variant="body2">Alerting</MDTypography>
-                  <Switch checked />
-                </MDBox>
-              </Box>
-            </MDBox>
-          </Grid>
-          <Grid item xs={12} md={3}>
-            <MDBox
-              sx={{
-                backgroundColor: '#fff',
-                border: '1px solid #c2c2c2',
-                borderTop: '7px solid #007aff',
-                borderRadius: '4px'
-              }}
-            >
-              <Typography
-                gutterBottom
-                variant="h6"
-                component="div"
-                sx={{
-                  borderBottom: '1px solid #c2c2c2',
-                  padding: '10px 20px',
-                  marginBottom: '20px'
-                }}
-              >
-                Application
-              </Typography>
-              <Box sx={{ padding: ' 0px 20px' }}>
-                <MDBox
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  lineHeight={1}
-                  className={classes.switchSpacer}
-                  sx={{ marginBottom: '20px  !important' }}
-                >
-                  <MDTypography variant="body2">Home</MDTypography>
-                  <Switch checked />
-                </MDBox>
-                <MDBox
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  lineHeight={1}
-                  className={classes.switchSpacer}
-                  sx={{ marginBottom: '20px !important' }}
-                >
-                  <MDTypography variant="body2">Setup</MDTypography>
-                  <Switch checked />
-                </MDBox>
-                <MDBox
-                  display="flex"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  lineHeight={1}
-                  className={classes.switchSpacer}
-                  sx={{ marginBottom: '20px  !important' }}
-                >
-                  <MDTypography variant="body2">Reports</MDTypography>
-                  <Switch checked />
-                </MDBox>
-              </Box>
-            </MDBox>
-          </Grid>
-        </Grid>
-        <MDBox
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          lineHeight={1}
-          sx={{ marginBottom: '15px', marginTop: '45px', paddingBottom: '30px' }}
-        >
-          <MDButton
-            size="medium"
-            color="error"
-            variant="outlined"
-            type="submit"
-            sx={{ marginRight: '15px' }}
-          >
-            Cancel
-          </MDButton>
-          <MDButton size="medium" color="primary" variant="contained">
-            Save
-          </MDButton>
-        </MDBox>
-      </MDBox>
-    </DashboardLayout>
-  );
-}
-export default CreateUserRole;
diff --git a/src/pages/useraccess/index.js b/src/pages/useraccess/index.js
index 29dd996..274c1f0 100644
--- a/src/pages/useraccess/index.js
+++ b/src/pages/useraccess/index.js
@@ -1,25 +1,28 @@
-import React, { useEffect, useMemo } from 'react';
+import moment from 'moment';
+import React, { useEffect, useState, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import { Grid, TableBody, TableCell, TableRow, Tabs, Tab } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import MDBox from 'components/MDBox';
+import EditIcon from '@mui/icons-material/Edit';
+
 import DashboardNavbar from 'components/DashboardNavbar';
 import DashboardLayout from 'layouts/DashboardLayout';
-import { styled } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
 import BasicTable from 'components/BasicTable';
-import { Grid, TableBody, TableCell, TableRow } from '@mui/material';
 import SearchBar from 'components/SearchBar';
-import EditIcon from '@mui/icons-material/Edit';
 import MDButton from 'components/Button';
-import { useState } from 'react';
-import { Tabs, Tab } from '@mui/material';
 import TabPanel from 'components/Tabs';
+import Breadcrumbs from 'components/Breadcrumbs';
+
+import WarehouseActions, { WarehouseSelectors } from 'redux/WarehouseRedux';
+import InventoryActions, { InventorySelectors } from 'redux/InventoryRedux';
+import PermissionsActions, { PermissionsSelectors } from 'redux/PermissionsRedux';
 import UsersActions, { UsersSelectors } from 'redux/UsersRedux';
 import RolesActions, { RolesSelectors } from 'redux/RolesRedux';
-import { AuthSelectors } from 'redux/AuthRedux';
+
 import { API } from 'constant';
-import { useDispatch, useSelector } from 'react-redux';
-import moment from 'moment';
-import { useNavigate } from 'react-router-dom';
-import Breadcrumbs from 'components/Breadcrumbs';
 
 const useStyles = makeStyles((theme) => ({
   iconSize: {
@@ -34,6 +37,9 @@ const useStyles = makeStyles((theme) => ({
   statusInactive: {
     color: 'red'
   },
+  limitWidth: {
+    maxWidth: '20rem'
+  },
   margin: {
     marginBottom: '20px',
     borderTop: '1px solid #ddd',
@@ -53,6 +59,10 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'hidden',
     borderRadius: '0.5rem'
   },
+  rightPlaced: {
+    position: 'absolute',
+    right: 0
+  },
   tabs: {
     borderRadius: 0,
     '& .MuiButtonBase-root.MuiTab-root': {
@@ -83,11 +93,22 @@ function UserAccessScreen() {
   const [value, setValue] = useState(1);
   const usersData = useSelector(UsersSelectors.getUsersDetail);
   const rolesData = useSelector(RolesSelectors.getRolesDetail);
-  const currentUser = useSelector(AuthSelectors.getUser);
+  const warehouses = useSelector(WarehouseSelectors.getWarehouseDetail);
+  const inventories = useSelector(InventorySelectors.getInventoryDetail);
+  const actions = useSelector(PermissionsSelectors.getActionsDetail);
+  const permissions = useSelector(PermissionsSelectors.getPermissionsDetail);
   const [userRecords, setUserRecords] = useState([]);
   const [rolesRecords, setRoleRecords] = useState([]);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    (!warehouses || warehouses.length === 0) && dispatch(WarehouseActions.warehouseDataAction({loader: 'loading-request', slug: API.GET_WAREHOUSE_DATA,method: 'get'}));
+    (!inventories || inventories.length === 0) && dispatch(InventoryActions.getInventoryAction({loader: 'loading-request', slug: API.GET_INVENTORY,method: 'get'}));
+    (!rolesData || rolesData.length === 0) && dispatch(RolesActions.getRolesAction({loader: 'loading-request', slug: API.GET_ROLES_DATA, method: 'get'}));
+    (!permissions || permissions.length === 0) && dispatch(PermissionsActions.getPermissionsAction({loader: 'loading-request', slug: API.GET_PERMISSIONS_DATA, method: 'get'}));
+    (!actions || actions.length === 0) && dispatch(PermissionsActions.getActionsAction({loader: 'loading-request', slug: API.GET_ACTIONS_DATA, method: 'get'}));
+  }, []);
+
   const userHeadCells = [
     { id: 'full_name', label: 'User Name', isEditAnchor: true, value: (record) => record.fullName },
     { id: 'phone_number', label: 'Phone Number', value: (record) => record.phoneNumber },
@@ -122,9 +143,13 @@ function UserAccessScreen() {
   ];
 
   const rolesHeadCells = [
-    { id: 'role', label: 'Role' },
-    { id: 'permissions', label: 'Permissions' },
-    { id: 'status', label: 'Status' }
+    { id: 'role', label: 'Role', isEditAnchor: true, placement: 'after', value: record => record.name },
+    { id: 'warehouse', label: 'Warehouse', limitWidth: true, value: record => warehouses && record.permissions?.warehouseScopes && record.permissions?.warehouseScopes?.length === warehouses?.length ? 'All' : record.permissions?.warehouseScopes ? record.permissions?.warehouseScopes.map(sc => sc.name).join(', ') : ''},
+    { id: 'inventory', label: 'Inventories', limitWidth: true, value: record => inventories && record.permissions?.inventoryScopes && record.permissions?.inventoryScopes?.length === inventories?.length ? 'All' : record.permissions?.inventoryScopes ? record.permissions?.inventoryScopes.map(sc => sc.name).join(', ') : ''},
+    { id: 'actions', label: 'Actions', limitWidth: true, value: record => actions && record.permissions?.actions && record.permissions?.actions?.length === actions?.length ? 'All' : record.permissions?.actions ? record.permissions?.actions.join(', ') : ''},
+    { id: 'visibilities', label: 'App Modules', limitWidth: true, value: record => permissions && record.permissions?.allowedUIModules && record.permissions?.allowedUIModules?.length === permissions?.length ? 'All' : record.permissions?.allowedUIModules ? record.permissions?.allowedUIModules.join(', ') : ''},
+    { id: 'status', label: 'Status', value: record => record.status === 'ACTIVE' ? <span className={classes.statusActive}>Active</span>
+      : <span className={classes.statusInactive}>Inactive</span> }
   ];
 
   const usersHandler = () => {
@@ -184,17 +209,32 @@ function UserAccessScreen() {
     }
   }));
 
-  const rowRenders = userRecords && userRecords.map((record, keyouter) => {
-    const canEdit = columnConfig => columnConfig.isEditAnchor && currentUser.email !== record.email;
-    return <StyledTableRow key={record.id + '-' + keyouter}>
-      {userHeadCells.map((columnConfig, key) => <TableCell key={key} onClick={() => canEdit(columnConfig) && navigate('/setup/users-access/edit-user', {state: {user: record}})}>
-        {canEdit(columnConfig) ? <span className={classes.iconwrap}>
-          <EditIcon className={classes.iconSize}/>
-          {columnConfig.value(record)}
-        </span> : <span>{columnConfig.value(record)}</span>}
-      </TableCell>)}
-    </StyledTableRow>;
-  });
+  const rowRenders = ({records, headers, navUrl, table}) => {
+    return records && records.map((record, keyouter) => {
+      return <StyledTableRow key={record.id + '-' + keyouter}>
+        {headers.map((columnConfig, key) => {
+          const canEdit = columnConfig.isEditAnchor;
+          const isAfter = columnConfig.placement && columnConfig.placement === 'after';
+          const limitWidth = columnConfig.limitWidth;
+          return <TableCell key={key} className={`${isAfter ? 'position-relative pe-5' : ''}${limitWidth ? ' overflow-auto ' + classes.limitWidth : ''}`}
+            onClick={() => canEdit && navigate(navUrl, {state: {[table]: record}})}>
+            {canEdit
+              ? isAfter
+                ? <span className={classes.iconwrap}>
+                  <EditIcon className={classes.iconSize + ' ' + classes.rightPlaced}/>
+                  {columnConfig.value(record)}
+                </span>
+                : <span className={classes.iconwrap}>
+                  {columnConfig.value(record)}
+                  <EditIcon className={classes.iconSize}/>
+                </span>
+              : <span>{columnConfig.value(record)}</span>}
+          </TableCell>;
+        }
+        )}
+      </StyledTableRow>;
+    });
+  };
 
   return (
     <DashboardLayout>
@@ -252,21 +292,10 @@ function UserAccessScreen() {
               backgroundColor="#007AFF"
               color="#fff"
             >
-              <TableBody>
-                {rolesRecords &&
-                  rolesRecords.map((item, key) => (
-                    <StyledTableRow key={item.id + '-' + key}>
-                      <TableCell>
-                        <div className={classes.iconwrap}>
-                          <EditIcon className={classes.iconSize} />
-                          {item.name}
-                        </div>
-                      </TableCell>
-                      <TableCell>{item.permissions}</TableCell>
-                      <TableCell>{item.status}</TableCell>
-                    </StyledTableRow>
-                  ))}
-              </TableBody>
+              {rolesRecords && rolesRecords.length > 0
+                ? <TableBody>
+                  {rowRenders({records: rolesRecords, headers: rolesHeadCells, navUrl: '/setup/users-access/edit-role', table: 'role'})}
+                </TableBody> : <p>No Records to Display</p>}
             </BasicTable>
           </TabPanel>
           <TabPanel value={value} index={1} className={classes.radialBorder}>
@@ -277,11 +306,10 @@ function UserAccessScreen() {
               backgroundColor="#007AFF"
               color="#fff"
             >
-              {userRecords && userRecords.length > 0 ? (
-                <TableBody>{rowRenders}</TableBody>
-              ) : (
-                'No Records to Display'
-              )}
+              {userRecords && userRecords.length > 0
+                ? <TableBody>
+                  {rowRenders({records: userRecords, headers: userHeadCells, navUrl: '/setup/users-access/edit-user', table: 'user'})}
+                </TableBody> : <p>No Records to Display</p>}
             </BasicTable>
           </TabPanel>
         </Grid>
diff --git a/src/routes/index.js b/src/routes/index.js
index a5c35d7..afa9251 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -12,7 +12,7 @@ import NewWarehouseDetails from 'pages/newWarehouseDetails';
 import EditWarehouseDetails from 'pages/editWarehouseDetails';
 import LabelingHome from 'pages/labellingHome';
 import SetupInventory from 'pages/setupInventory';
-import CreateUserRole from 'pages/createUserRole';
+import CreateEditUserRole from 'pages/createEditUserRole';
 import CreateEditUser from 'pages/createEditUser';
 import WidgetLabel from 'pages/widgetLabel';
 import ItemListing from 'pages/itemListing';
@@ -177,7 +177,7 @@ const protectedRoutes = [
         key: 'create-role',
         route: '/setup/users-access/create-role',
         hide: true,
-        component: <CreateUserRole />
+        component: <CreateEditUserRole />
       },
       {
         name: 'Create User',