diff --git a/package.json b/package.json
index e203fa2..d907114 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/DateTimePicker/index.js b/src/components/DateTimePicker/index.js
new file mode 100644
index 0000000..092e8ed
--- /dev/null
+++ b/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 (
+
+
+ }
+ onChange={handleChange}
+ />
+
+
+ );
+}
diff --git a/src/components/MDTransferList/index.js b/src/components/MDTransferList/index.js
index a913ed4..5dd3fa6 100644
--- a/src/components/MDTransferList/index.js
+++ b/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) => (
-
- {items.map((value) => {
- const labelId = `transfer-list-item-${value}-label`;
+
+ {items.map((value) => {
+ const labelId = `transfer-list-item-${value}-label`;
- return (
-
-
-
-
-
-
-
- );
- })}
-
-
+ return (
+
+
+
+
+
+
+
+ );
+ })}
+
+
);
return (
-
-
- Warehouse
-
-
-
- Unassigned
-
-
- {customList(left)}
+
+
+ Unassigned
+
+
+ {customList(left)}
+
-
+
>>
<<
-
+
-
- Assigned
-
-
- {customList(right)}
+
+ Assigned
+
+
+ {customList(right)}
+
-
);
}
diff --git a/src/pages/createUserRole/index.js b/src/pages/createUserRole/index.js
new file mode 100644
index 0000000..802b0b4
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ Warehouse name
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+ Created By
+
+
+
+
+
+ Date & Time
+
+
+
+
+
+ Last Updated by
+
+
+
+
+
+ Date & Time
+
+
+
+
+
+
+
+
+
+ Choose avatar component here
+
+
+
+
+
+
+
+ Warehouse
+
+
+
+
+
+
+
+ Warehouse
+
+
+
+
+
+
+
+
+
+ Process
+
+
+ Sidenav Mini
+
+
+
+
+
+
+
+ Application
+
+
+ Sidenav Mini
+
+
+
+
+
+
+
+ Cancel
+
+
+ Save
+
+
+
+
+
+ );
+}
+export default CreateUserRole;
diff --git a/src/pages/useraccess/index.js b/src/pages/useraccess/index.js
index 881f45d..e6b8a20 100644
--- a/src/pages/useraccess/index.js
+++ b/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() {
-
+ navigate('/setup/users-access/create-role')}>
{'+ CREATE USER'}
diff --git a/src/routes/index.js b/src/routes/index.js
index 5ee232e..d2436c2 100644
--- a/src/routes/index.js
+++ b/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:
+ },
+ {
+ name: 'Create Role',
+ key: 'create-role',
+ route: '/setup/users-access/create-role',
+ hide: true,
+ component:
}
]
}