diff --git a/jams-react-client/package.json b/jams-react-client/package.json
index 361a1230467d6a662e06941da4733d89b63d4519..47d422e0267340e295b077159d88647a42de5636 100644
--- a/jams-react-client/package.json
+++ b/jams-react-client/package.json
@@ -5,9 +5,13 @@
"private": false,
"main": "dist/index.js",
"dependencies": {
- "@material-ui/core": "4.12.4",
- "@material-ui/icons": "4.11.3",
- "@material-ui/lab": "^4.0.0-alpha.56",
+ "@emotion/react": "^11.11.1",
+ "@emotion/styled": "^11.11.0",
+ "@mui/base": "^5.0.0-beta.5",
+ "@mui/icons-material": "^5.11.16",
+ "@mui/lab": "^5.0.0-alpha.134",
+ "@mui/material": "^5.13.6",
+ "@mui/styles": "^5.13.2",
"axios": "^1.4.0",
"classnames": "2.3.2",
"formik": "^2.1.5",
@@ -21,7 +25,7 @@
"material-ui-popup-state": "^1.6.1",
"perfect-scrollbar": "1.5.5",
"prop-types": "15.8.1",
- "react": "^17.0.0",
+ "react": "^17.0.2",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^17.0.0",
@@ -60,6 +64,7 @@
},
"devDependencies": {
"@babel/core": "^7.11.6",
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-i18next-extract": "^0.8.0",
"eslint-config-prettier": "6.11.0",
diff --git a/jams-react-client/src/components/CaSetup/CaSetup.js b/jams-react-client/src/components/CaSetup/CaSetup.js
index e088606215f92f354256ea24c261bd5c09da0416..88497932ecf6c6f9d660fea236e3b96fd50dbe07 100644
--- a/jams-react-client/src/components/CaSetup/CaSetup.js
+++ b/jams-react-client/src/components/CaSetup/CaSetup.js
@@ -2,9 +2,9 @@ import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { Formik, Field } from "formik";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import { makeStyles } from "@mui/styles";
import CountrySelect from "components/CountrySelect/CountrySelect.js";
@@ -12,10 +12,10 @@ import auth from "../../auth";
import axios from "axios";
import configApiCall from "../../api";
import { api_path_post_install_ca } from "../../globalUrls";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
import * as tool from "../../tools";
-import Input from "@material-ui/core/Input";
-import Typography from "@material-ui/core/Typography";
+import Input from "@mui/material/Input";
+import Typography from "@mui/material/Typography";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/Card/Card.js b/jams-react-client/src/components/Card/Card.js
index 567dd7b9573bd0ca1529dcbe3887caaa4d748632..acecb9ace7c4a35434271e976e5ef886e751dc6b 100644
--- a/jams-react-client/src/components/Card/Card.js
+++ b/jams-react-client/src/components/Card/Card.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardStyle.js";
diff --git a/jams-react-client/src/components/Card/CardAvatar.js b/jams-react-client/src/components/Card/CardAvatar.js
index 67e5e11049fe520ccac94a1468c0079dc39e2015..4cff1dc8ab664149ad65a97b2d330deb8942e690 100644
--- a/jams-react-client/src/components/Card/CardAvatar.js
+++ b/jams-react-client/src/components/Card/CardAvatar.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardAvatarStyle.js";
diff --git a/jams-react-client/src/components/Card/CardBody.js b/jams-react-client/src/components/Card/CardBody.js
index 4c65b902c9cae7af0fe75fac78122dcaf07b0e58..93e9ee995156d73c6a67e59c036ef1aff64a23e2 100644
--- a/jams-react-client/src/components/Card/CardBody.js
+++ b/jams-react-client/src/components/Card/CardBody.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardBodyStyle.js";
diff --git a/jams-react-client/src/components/Card/CardFooter.js b/jams-react-client/src/components/Card/CardFooter.js
index 9559a388ceadbda7c21331897f90ce2b7196d928..7cc2780e0080e800e9e617172551707370aaffa6 100644
--- a/jams-react-client/src/components/Card/CardFooter.js
+++ b/jams-react-client/src/components/Card/CardFooter.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardFooterStyle.js";
diff --git a/jams-react-client/src/components/Card/CardHeader.js b/jams-react-client/src/components/Card/CardHeader.js
index 6c15a0a79b4c6bce4c3bbb1e714b4dffb7e6641c..88a9f1e1136819f8424e9be9de102699250bd0bd 100644
--- a/jams-react-client/src/components/Card/CardHeader.js
+++ b/jams-react-client/src/components/Card/CardHeader.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardHeaderStyle.js";
diff --git a/jams-react-client/src/components/Card/CardIcon.js b/jams-react-client/src/components/Card/CardIcon.js
index ba7286191e3996b418cba06e2c90f4f594087f03..9da0bc7a77b8a43f958103eb4aeae1fc4f1d887b 100644
--- a/jams-react-client/src/components/Card/CardIcon.js
+++ b/jams-react-client/src/components/Card/CardIcon.js
@@ -3,9 +3,9 @@ import React from "react";
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+// @mui/icons-material
// core components
import styles from "assets/jss/material-dashboard-react/components/cardIconStyle.js";
diff --git a/jams-react-client/src/components/CountrySelect/CountrySelect.js b/jams-react-client/src/components/CountrySelect/CountrySelect.js
index 9b7a4f46aab118ac57ea9f752bb5affe7d79def0..895930678802808a3ae280f196f312cb5fef55c1 100644
--- a/jams-react-client/src/components/CountrySelect/CountrySelect.js
+++ b/jams-react-client/src/components/CountrySelect/CountrySelect.js
@@ -1,7 +1,7 @@
import React from "react";
-import TextField from "@material-ui/core/TextField";
-import Autocomplete from "@material-ui/lab/Autocomplete";
-import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/lab/Autocomplete";
+import { makeStyles } from "@mui/styles";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/CreateAdmin/CreateAdmin.js b/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
index 31951800569099dd4deacfa16e727c8e03e27486..518fc508e77793a487409471b724d4a29e2701ea 100644
--- a/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
+++ b/jams-react-client/src/components/CreateAdmin/CreateAdmin.js
@@ -2,11 +2,11 @@ import React from "react";
import { useHistory } from "react-router-dom";
import { useFormik } from "formik";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
import axios from "axios";
import configApiCall from "../../api";
diff --git a/jams-react-client/src/components/CustomButtons/Button.js b/jams-react-client/src/components/CustomButtons/Button.js
index 09ab8f2d53c9b0498f65799e87f2d504374039dc..3ce0082f58ccd3bdb56baf3af2bff5782865f6bb 100644
--- a/jams-react-client/src/components/CustomButtons/Button.js
+++ b/jams-react-client/src/components/CustomButtons/Button.js
@@ -5,8 +5,8 @@ import classNames from "classnames";
import PropTypes from "prop-types";
// material-ui components
-import { makeStyles } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
+import { makeStyles } from "@mui/styles";
+import Button from "@mui/material/Button";
import styles from "assets/jss/material-dashboard-react/components/buttonStyle.js";
diff --git a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
index 988733d0fd46f9f6121ae251757b937925789959..f29c525b52b96e7c0b12eadb93c1bcd80fcd7a20 100644
--- a/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
+++ b/jams-react-client/src/components/CustomImgDropZone/CustomImgDropZone.js
@@ -1,8 +1,8 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import Dropzone from "react-dropzone";
-import UploadIcon from "@material-ui/icons/CloudUpload";
-import CloseIcon from "@material-ui/icons/Close";
+import UploadIcon from "@mui/icons-material/CloudUpload";
+import CloseIcon from "@mui/icons-material/Close";
const useStyles = makeStyles({
dropzoneStyle: {
diff --git a/jams-react-client/src/components/CustomInput/CustomInput.js b/jams-react-client/src/components/CustomInput/CustomInput.js
index 59e179573c82b68c8d4ac7d9a40c35d4a8665287..2b20d1f21f08cb4efc7be2e6ac2146f422cec6a2 100644
--- a/jams-react-client/src/components/CustomInput/CustomInput.js
+++ b/jams-react-client/src/components/CustomInput/CustomInput.js
@@ -1,14 +1,14 @@
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
-// @material-ui/icons
-import Clear from "@material-ui/icons/Clear";
-import Check from "@material-ui/icons/Check";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Input from "@mui/material/Input";
+// @mui/icons-material
+import Clear from "@mui/icons-material/Clear";
+import Check from "@mui/icons-material/Check";
// core components
import styles from "assets/jss/material-dashboard-react/components/customInputStyle.js";
diff --git a/jams-react-client/src/components/CustomPopupState/CustomPopupState.js b/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
index 5ee4948b01aed00729d63f6c798279e4589aabdc..a9d3e621256c1366c69395dc369f1976f2b7996f 100644
--- a/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
+++ b/jams-react-client/src/components/CustomPopupState/CustomPopupState.js
@@ -1,10 +1,10 @@
import React from "react";
-import InfoIcon from "@material-ui/icons/Info";
-import Popover from "@material-ui/core/Popover";
+import InfoIcon from "@mui/icons-material/Info";
+import Popover from "@mui/material/Popover";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
-import IconButton from "@material-ui/core/IconButton";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
export default function CustomPopupState(props) {
return (
diff --git a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
index 88a336aab2204a645e1d3c892c25a8e559f49245..c1819729e7dd8c6b92120d583a711b1154a3cd05 100644
--- a/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
+++ b/jams-react-client/src/components/CustomUiPreview/CustomUiPreview.js
@@ -1,6 +1,6 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import logoImage from "assets/img/logo-jami-net.svg";
diff --git a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
index 08add6591943119440c3d55d55254bf7d542b73d..f6a6e3442e8f5bb24d9a7b5abbdf8c823e93192d 100644
--- a/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
+++ b/jams-react-client/src/components/CustomUiPreview/JamiIdCard.js
@@ -1,6 +1,6 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import jamiIdImage from "assets/img/jami_id.svg";
import copySvg from "assets/img/BTN_Copy.svg";
diff --git a/jams-react-client/src/components/CustomUiPreview/TipBox.js b/jams-react-client/src/components/CustomUiPreview/TipBox.js
index 948bd024f029dddb57f83f484fb0cb23c5e65abb..1df6a6450a2e7e1fc0ee34f7d45f415e7305d80d 100644
--- a/jams-react-client/src/components/CustomUiPreview/TipBox.js
+++ b/jams-react-client/src/components/CustomUiPreview/TipBox.js
@@ -1,5 +1,5 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import tipLightBulbImage from "assets/img/tip_light_bulb.svg";
diff --git a/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js b/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js
index cf12276be8719757ca7f636c599453e99b94118c..3f9c39d2ff486df131e393bbc0ae0d80f151ffe4 100644
--- a/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js
+++ b/jams-react-client/src/components/CustomizedSteppers/CustomizedSteppers.js
@@ -1,14 +1,14 @@
import React from "react";
import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import clsx from "clsx";
-import Stepper from "@material-ui/core/Stepper";
-import Step from "@material-ui/core/Step";
-import StepLabel from "@material-ui/core/StepLabel";
-import Check from "@material-ui/icons/Check";
-import SettingsIcon from "@material-ui/icons/Settings";
-import GroupAddIcon from "@material-ui/icons/GroupAdd";
-import VideoLabelIcon from "@material-ui/icons/VideoLabel";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import Check from "@mui/icons-material/Check";
+import SettingsIcon from "@mui/icons-material/Settings";
+import GroupAddIcon from "@mui/icons-material/GroupAdd";
+import VideoLabelIcon from "@mui/icons-material/VideoLabel";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/Devices/Devices.js b/jams-react-client/src/components/Devices/Devices.js
index d4852b4fe20da9f7ae7f94e3e76236dc64f63db0..ecaf88e5d7ab2cb6f9b90c55e8fb9ac9e8bcd1bb 100755
--- a/jams-react-client/src/components/Devices/Devices.js
+++ b/jams-react-client/src/components/Devices/Devices.js
@@ -3,26 +3,26 @@ import { useHistory } from "react-router-dom";
import classnames from "classnames";
import { Formik, Field } from "formik";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Tooltip from "@material-ui/core/Tooltip";
-import IconButton from "@material-ui/core/IconButton";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
import Button from "components/CustomButtons/Button.js";
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import TextField from "@material-ui/core/TextField";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import TextField from "@mui/material/TextField";
-// @material-ui/icons
-import Edit from "@material-ui/icons/Edit";
-import Close from "@material-ui/icons/Close";
+// @mui/icons-material
+import Edit from "@mui/icons-material/Edit";
+import Close from "@mui/icons-material/Close";
// core components
import styles from "assets/jss/material-dashboard-react/components/devicesStyle.js";
import auth from "auth.js";
diff --git a/jams-react-client/src/components/Drawer/Drawer.js b/jams-react-client/src/components/Drawer/Drawer.js
index d1f6ab5e722fcadc559f22338cc771bc53f2b008..3a81608b62ca34f827f7d35a0067d1d66500c8c8 100644
--- a/jams-react-client/src/components/Drawer/Drawer.js
+++ b/jams-react-client/src/components/Drawer/Drawer.js
@@ -1,13 +1,13 @@
import React, { useCallback } from "react";
import clsx from "clsx";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
import CustomInput from "components/CustomInput/CustomInput.js";
-import Drawer from "@material-ui/core/Drawer";
-import List from "@material-ui/core/List";
-import Divider from "@material-ui/core/Divider";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import Avatar from "@material-ui/core/Avatar";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Avatar from "@mui/material/Avatar";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
diff --git a/jams-react-client/src/components/Footer/Footer.js b/jams-react-client/src/components/Footer/Footer.js
index eea542ed98dda2cbf0e005be41467233bfe6ebf2..1f54292dc051593cd8a5e78dd664956612d04408 100755
--- a/jams-react-client/src/components/Footer/Footer.js
+++ b/jams-react-client/src/components/Footer/Footer.js
@@ -1,6 +1,6 @@
import React from "react";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import styles from "assets/jss/material-dashboard-react/components/footerStyle.js";
diff --git a/jams-react-client/src/components/FormikField/FormikField.js b/jams-react-client/src/components/FormikField/FormikField.js
index 6692bb8761b00dacd850d83c11730dc09994f673..b1f118e2e2ee7ae5e10104da8daff8eaad3cf205 100644
--- a/jams-react-client/src/components/FormikField/FormikField.js
+++ b/jams-react-client/src/components/FormikField/FormikField.js
@@ -2,9 +2,9 @@ import React from "react";
import PropTypes from "prop-types";
import { ErrorMessage, Field } from "formik";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Input from "@mui/material/Input";
class FormikField extends React.Component {
render() {
diff --git a/jams-react-client/src/components/Grid/GridContainer.js b/jams-react-client/src/components/Grid/GridContainer.js
index e4f81135c1ee1130832b84f9304b330ad8f5a936..585746cc0f5f1ced0a1b510eac946b11e6947b53 100644
--- a/jams-react-client/src/components/Grid/GridContainer.js
+++ b/jams-react-client/src/components/Grid/GridContainer.js
@@ -1,9 +1,9 @@
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Grid from "@mui/material/Grid";
const styles = {
grid: {
diff --git a/jams-react-client/src/components/Grid/GridItem.js b/jams-react-client/src/components/Grid/GridItem.js
index bb74c2a2b61122b001417d5bb1e6093fbc5e6480..2161d6b84598987e555c1097f3f12841e0abad4c 100644
--- a/jams-react-client/src/components/Grid/GridItem.js
+++ b/jams-react-client/src/components/Grid/GridItem.js
@@ -1,9 +1,9 @@
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Grid from "@mui/material/Grid";
const styles = {
grid: {
diff --git a/jams-react-client/src/components/IdentityManagement/AdStorageForm.js b/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
index 2880ea1f8748945e23d513cfa5655105fd11cb40..6259f35b3712b9d199274c9c9feec6b60649bbf9 100644
--- a/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/AdStorageForm.js
@@ -1,11 +1,11 @@
import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
-import TextField from "@material-ui/core/TextField";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
+import TextField from "@mui/material/TextField";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
index d491f7f1150b8fbf5826a34ec35b1a24cabaf4f8..d65bd88d1fdceefc271829987b4ced787ad305fe 100644
--- a/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
+++ b/jams-react-client/src/components/IdentityManagement/IdentityManagement.js
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { Formik } from "formik";
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
-import { makeStyles } from "@material-ui/core/styles";
-import Select from "@material-ui/core/Select";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
+import { makeStyles } from "@mui/styles";
+import Select from "@mui/material/Select";
import { buildSelectMenuItems } from "../../tools";
diff --git a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
index df98d525a6f5d3bc23b6b65b423f601e2b0694d1..580f7826ea1cfbf633e0059c17fcd20bbac4ccab 100644
--- a/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/LdapStorageForm.js
@@ -1,12 +1,12 @@
import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
-import TextField from "@material-ui/core/TextField";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import Select from "@material-ui/core/Select";
+import TextField from "@mui/material/TextField";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import Select from "@mui/material/Select";
import CustomPopupState from "../CustomPopupState/CustomPopupState";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js b/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js
index 1fd17ff00e3f84a48548eafbe4277b541be6d36f..4b4dd143e1791297d01414a77178f3c4b237e366 100644
--- a/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js
+++ b/jams-react-client/src/components/IdentityManagement/LocalStorageForm.js
@@ -1,8 +1,8 @@
import React from "react";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
-import Typography from "@material-ui/core/Typography";
-import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
import CustomPopupState from "../CustomPopupState/CustomPopupState";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/LanguagePicker/LanguagePicker.js b/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
index 140970bc3f96da5f89b5e0ef401ee07d244debfc..653b9c2a072f80b17e2fc5ea7a20b1cdbef245f3 100644
--- a/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
+++ b/jams-react-client/src/components/LanguagePicker/LanguagePicker.js
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-import Button from "@material-ui/core/Button";
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
import PopupState, { bindTrigger, bindMenu } from "material-ui-popup-state";
import i18next from "i18next";
diff --git a/jams-react-client/src/components/Navbars/Navbar.js b/jams-react-client/src/components/Navbars/Navbar.js
index f9689a9e6d214e89fbffdd6313d13bc2f66e7243..ebf21761b1fa802cc0086c009c0bd51ae143bd61 100755
--- a/jams-react-client/src/components/Navbars/Navbar.js
+++ b/jams-react-client/src/components/Navbars/Navbar.js
@@ -1,14 +1,14 @@
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import IconButton from "@material-ui/core/IconButton";
-import Hidden from "@material-ui/core/Hidden";
-// @material-ui/icons
-import Menu from "@material-ui/icons/Menu";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Hidden from "@mui/material/Hidden";
+// @mui/icons-material
+import Menu from "@mui/icons-material/Menu";
// core components
import Button from "components/CustomButtons/Button.js";
diff --git a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
index b3974c115d7edbcd05a68a6f4a64aa77af00a7cf..dd59997a45a860537bf9bfeea7d05c7797ba4162 100644
--- a/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
+++ b/jams-react-client/src/components/PasswordDialog/PasswordDialog.js
@@ -1,18 +1,18 @@
import React, { useEffect, useState } from "react";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import Button from "components/CustomButtons/Button.js";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import InputAdornment from "@mui/material/InputAdornment";
import { Formik } from "formik";
import FormikField from "components/FormikField/FormikField";
@@ -22,12 +22,12 @@ import axios from "axios";
import configApiCall from "api.js";
import { api_path_put_update_user } from "globalUrls";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import RefreshIcon from "@material-ui/icons/Refresh";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import IconButton from "@material-ui/core/IconButton";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import IconButton from "@mui/material/IconButton";
import { CopyToClipboard } from "react-copy-to-clipboard";
diff --git a/jams-react-client/src/components/ServerParameters/ServerParameters.js b/jams-react-client/src/components/ServerParameters/ServerParameters.js
index 1ce5e8feeab1104cafe34ed0b43625432cda0348..1489ab7a1bed6aa14d15299a2c44c0e610b389b0 100644
--- a/jams-react-client/src/components/ServerParameters/ServerParameters.js
+++ b/jams-react-client/src/components/ServerParameters/ServerParameters.js
@@ -1,14 +1,14 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
import { Formik } from "formik";
import CustomPopupState from "../CustomPopupState/CustomPopupState";
-import Select from "@material-ui/core/Select";
-import Input from "@material-ui/core/Input";
+import Select from "@mui/material/Select";
+import Input from "@mui/material/Input";
import * as tool from "../../tools";
diff --git a/jams-react-client/src/components/Sidebar/Sidebar.js b/jams-react-client/src/components/Sidebar/Sidebar.js
index 92e84bd7f9772f732219db3ee93c19ae2a9bed2c..12beefb378a66bdf7a7a0413ffa5d277bc4ce6c7 100755
--- a/jams-react-client/src/components/Sidebar/Sidebar.js
+++ b/jams-react-client/src/components/Sidebar/Sidebar.js
@@ -3,18 +3,18 @@ import { Link, useHistory } from "react-router-dom";
import classNames from "classnames";
import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import Hidden from "@material-ui/core/Hidden";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import Icon from "@material-ui/core/Icon";
-import Snackbar from "@material-ui/core/Snackbar/Snackbar";
-
-import ExitToAppIcon from "@material-ui/icons/ExitToApp";
-import UpdateIcon from "@material-ui/icons/Update";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Drawer from "@mui/material/Drawer";
+import Hidden from "@mui/material/Hidden";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Icon from "@mui/material/Icon";
+import Snackbar from "@mui/material/Snackbar/Snackbar";
+
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import UpdateIcon from "@mui/icons-material/Update";
import styles from "assets/jss/material-dashboard-react/components/sidebarStyle.js";
diff --git a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
index d52ac284b4d6ee17c4cbaa2536840bad45cf4bcc..cf222dc700e4d6c896ef9108a1f641ec40617fa0 100644
--- a/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
+++ b/jams-react-client/src/components/Snackbar/BlueprintSnackbar.js
@@ -1,9 +1,9 @@
import React from "react";
import PropTypes from "prop-types";
-import MuiAlert from "@material-ui/lab/Alert";
-import Snackbar from "@material-ui/core/Snackbar";
-import Slide from "@material-ui/core/Slide";
+import MuiAlert from "@mui/lab/Alert";
+import Snackbar from "@mui/material/Snackbar";
+import Slide from "@mui/material/Slide";
// https://stackoverflow.com/a/67961603
const Alert = React.forwardRef(function Alert(props, ref) {
diff --git a/jams-react-client/src/index.js b/jams-react-client/src/index.js
index 7865c8188ca2052a85018e7b1ea473c822988504..3c3063da7aa83649318a15053330b78e72ad4e1d 100644
--- a/jams-react-client/src/index.js
+++ b/jams-react-client/src/index.js
@@ -23,7 +23,7 @@ import { ProtectedRoute } from "protected.route";
import { ConfiguredRoute } from "configured.route";
import auth from "./auth";
-import { ThemeProvider, createTheme } from "@material-ui/core";
+import { ThemeProvider, createTheme } from "@mui/material";
// core components
import UsersRoute from "routes/UsersRoute.js";
diff --git a/jams-react-client/src/layouts/BaseLayout.js b/jams-react-client/src/layouts/BaseLayout.js
index 5f99b236a205762c99c2a82384e7eafc111ebd5f..f36ecff8a643174d3b2182e210687b5216640ddd 100644
--- a/jams-react-client/src/layouts/BaseLayout.js
+++ b/jams-react-client/src/layouts/BaseLayout.js
@@ -2,18 +2,18 @@ import React, { useEffect, useState } from "react";
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import Navbar from "components/Navbars/Navbar.js";
import Footer from "components/Footer/Footer.js";
import Sidebar from "components/Sidebar/Sidebar.js";
-// @material-ui/icons
-import Person from "@material-ui/icons/Person";
-import Group from "@material-ui/icons/Group";
-import AllInbox from "@material-ui/icons/AllInbox";
-import SettingsIcon from "@material-ui/icons/Settings";
+// @mui/icons-material
+import Person from "@mui/icons-material/Person";
+import Group from "@mui/icons-material/Group";
+import AllInbox from "@mui/icons-material/AllInbox";
+import SettingsIcon from "@mui/icons-material/Settings";
// core components/views for Admin layout
import Users from "views/Users/Users.js";
import Groups from "views/Groups/Groups.js";
@@ -32,15 +32,15 @@ import { api_path_get_start_update } from "globalUrls";
import axios from "axios";
-import Dialog from "@material-ui/core/Dialog/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent/DialogContent";
-import DialogActions from "@material-ui/core/DialogActions/DialogActions";
-import DialogContentText from "@material-ui/core/DialogContentText/DialogContentText";
-import Button from "@material-ui/core/Button";
+import Dialog from "@mui/material/Dialog/Dialog";
+import DialogTitle from "@mui/material/DialogTitle/DialogTitle";
+import DialogContent from "@mui/material/DialogContent/DialogContent";
+import DialogActions from "@mui/material/DialogActions/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText/DialogContentText";
+import Button from "@mui/material/Button";
import i18next from "i18next";
-import { AccountCircle as AccountCircleIcon } from "@material-ui/icons";
+import { AccountCircle as AccountCircleIcon } from "@mui/icons-material";
let ps;
diff --git a/jams-react-client/src/layouts/ListLayout.js b/jams-react-client/src/layouts/ListLayout.js
index 94da32971bba0e25a6ac3a57e9726ffc3d6b0585..e0c29c58f1723f95018e196b163d779639b5f1aa 100644
--- a/jams-react-client/src/layouts/ListLayout.js
+++ b/jams-react-client/src/layouts/ListLayout.js
@@ -2,19 +2,19 @@ import React, { useEffect, useState } from "react";
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import Navbar from "components/Navbars/Navbar.js";
import Footer from "components/Footer/Footer.js";
import Sidebar from "components/Sidebar/Sidebar.js";
-// @material-ui/icons
-import AccountCircleIcon from "@material-ui/icons/AccountCircle";
-import Person from "@material-ui/icons/Person";
-import Group from "@material-ui/icons/Group";
-import AllInbox from "@material-ui/icons/AllInbox";
-import SettingsIcon from "@material-ui/icons/Settings";
+// @mui/icons-material
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import Person from "@mui/icons-material/Person";
+import Group from "@mui/icons-material/Group";
+import AllInbox from "@mui/icons-material/AllInbox";
+import SettingsIcon from "@mui/icons-material/Settings";
// core components/views for Admin layout
import Users from "views/Users/Users.js";
import Groups from "views/Groups/Groups.js";
@@ -33,12 +33,12 @@ import { api_path_get_start_update } from "globalUrls";
import axios from "axios";
-import Dialog from "@material-ui/core/Dialog/Dialog";
-import DialogTitle from "@material-ui/core/DialogTitle/DialogTitle";
-import DialogContent from "@material-ui/core/DialogContent/DialogContent";
-import DialogActions from "@material-ui/core/DialogActions/DialogActions";
-import DialogContentText from "@material-ui/core/DialogContentText/DialogContentText";
-import Button from "@material-ui/core/Button";
+import Dialog from "@mui/material/Dialog/Dialog";
+import DialogTitle from "@mui/material/DialogTitle/DialogTitle";
+import DialogContent from "@mui/material/DialogContent/DialogContent";
+import DialogActions from "@mui/material/DialogActions/DialogActions";
+import DialogContentText from "@mui/material/DialogContentText/DialogContentText";
+import Button from "@mui/material/Button";
import i18next from "i18next";
diff --git a/jams-react-client/src/layouts/SignIn.js b/jams-react-client/src/layouts/SignIn.js
index c6393c0086aa82eb505dfeca3e0503135e63b3e5..1d6366ec574edd7eeee2362ffb72ca66f77e49ce 100644
--- a/jams-react-client/src/layouts/SignIn.js
+++ b/jams-react-client/src/layouts/SignIn.js
@@ -1,15 +1,15 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Formik } from "formik";
-import Button from "@material-ui/core/Button";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import TextField from "@material-ui/core/TextField";
-import Link from "@material-ui/core/Link";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
-import Container from "@material-ui/core/Container";
-import MuiAlert from "@material-ui/lab/Alert";
+import Button from "@mui/material/Button";
+import CssBaseline from "@mui/material/CssBaseline";
+import TextField from "@mui/material/TextField";
+import Link from "@mui/material/Link";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
+import Container from "@mui/material/Container";
+import MuiAlert from "@mui/lab/Alert";
import auth from "../auth.js";
import LanguagePicker from "../components/LanguagePicker/LanguagePicker";
diff --git a/jams-react-client/src/layouts/SignUp.js b/jams-react-client/src/layouts/SignUp.js
index 84775d6f99bad1090585a71e39a7f97599e1ebc3..6f96a35f2c9874607c3ae21558018741ed6cb1a8 100644
--- a/jams-react-client/src/layouts/SignUp.js
+++ b/jams-react-client/src/layouts/SignUp.js
@@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import Link from "@material-ui/core/Link";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
-import Container from "@material-ui/core/Container";
-import MuiAlert from "@material-ui/lab/Alert";
-import Paper from "@material-ui/core/Paper";
+import CssBaseline from "@mui/material/CssBaseline";
+import Link from "@mui/material/Link";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
+import Container from "@mui/material/Container";
+import MuiAlert from "@mui/lab/Alert";
+import Paper from "@mui/material/Paper";
import logo from "assets/img/jams_logo_no_gnu_package.svg";
diff --git a/jams-react-client/src/tools.js b/jams-react-client/src/tools.js
index e3df480d6d77b0a87386e35e31a360d24ac54707..c8bf330ba48f5efe55fd4643b939b63d2c13f334 100644
--- a/jams-react-client/src/tools.js
+++ b/jams-react-client/src/tools.js
@@ -1,5 +1,5 @@
import React from "react";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
export function buildSelectMenuItems(elements) {
return elements.map((d) => (
diff --git a/jams-react-client/src/views/Blueprint/Blueprint.js b/jams-react-client/src/views/Blueprint/Blueprint.js
index ecf1a1fc798dfb442694ad03e2f9a52ac7174c15..19d9045750b266442e757124a068036a7297778e 100644
--- a/jams-react-client/src/views/Blueprint/Blueprint.js
+++ b/jams-react-client/src/views/Blueprint/Blueprint.js
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import EditBlueprintPermissions from "./EditBlueprintPermissions";
import EditBlueprintConfiguration from "./EditBlueprintConfiguration";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
index 2f4dfa99d858c1a94ff75c273bd23ed17f5d7fda..6bc9896a01870d46bfac4e7ce9da319ff5dff16c 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintConfiguration.js
@@ -1,37 +1,37 @@
import React, { useContext, useState } from "react";
import clsx from "clsx";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import InputLabel from "@mui/material/InputLabel";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormControl from "@material-ui/core/FormControl";
-import FormLabel from "@material-ui/core/FormLabel";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import Radio from "@material-ui/core/Radio";
-import RadioGroup from "@material-ui/core/RadioGroup";
-import Switch from "@material-ui/core/Switch";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import Switch from "@mui/material/Switch";
-import BuildOutlinedIcon from "@material-ui/icons/BuildOutlined";
-import IconButton from "@material-ui/core/IconButton";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import DnsOutlinedIcon from "@material-ui/icons/DnsOutlined";
-import AccountCircleIcon from "@material-ui/icons/AccountCircle";
-import VpnKeyOutlinedIcon from "@material-ui/icons/VpnKeyOutlined";
-import LanguageOutlinedIcon from "@material-ui/icons/LanguageOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import IconButton from "@mui/material/IconButton";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import DnsOutlinedIcon from "@mui/icons-material/DnsOutlined";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import VpnKeyOutlinedIcon from "@mui/icons-material/VpnKeyOutlined";
+import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
index 3ae3e513d4be8fa4b29f6391f68b62491f0d4462..8d7ca2758cbfa3b34f5c70ec0e0d982765da359c 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintPermissions.js
@@ -3,24 +3,24 @@ import { Link, useHistory } from "react-router-dom";
import axios from "axios";
import i18next from "i18next";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Checkbox from "@material-ui/core/Checkbox";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Checkbox from "@mui/material/Checkbox";
-import Avatar from "@material-ui/core/Avatar";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormLabel from "@material-ui/core/FormLabel";
-import Grid from "@material-ui/core/Grid";
-import Switch from "@material-ui/core/Switch";
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
+import Avatar from "@mui/material/Avatar";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormLabel from "@mui/material/FormLabel";
+import Grid from "@mui/material/Grid";
+import Switch from "@mui/material/Switch";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-import PriorityHighOutlinedIcon from "@material-ui/icons/PriorityHighOutlined";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import PriorityHighOutlinedIcon from "@mui/icons-material/PriorityHighOutlined";
import BlueprintSnackbar from "components/Snackbar/BlueprintSnackbar";
import Button from "components/CustomButtons/Button.js";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
index d5be85f831a02461b5c2ad15e28ab7cd0635542e..263a9ba9e38249f8085bdbb6903e2da5664a3640 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUi.js
@@ -1,8 +1,8 @@
import React, { useContext, useState } from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import SettingsIcon from "@material-ui/icons/Settings";
+import { makeStyles } from "@mui/styles";
+import Grid from "@mui/material/Grid";
+import SettingsIcon from "@mui/icons-material/Settings";
import BlueprintSnackbar from "components/Snackbar/BlueprintSnackbar";
import Card from "components/Card/Card.js";
diff --git a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
index 333853308702dcbb13dbf23b3b5eea050a635dc5..19ca4777f0cca7ca5888aaffcde002e9152ac89b 100644
--- a/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
+++ b/jams-react-client/src/views/Blueprint/EditBlueprintUiForm.js
@@ -1,13 +1,14 @@
import React, { useState } from "react";
-import Checkbox from "@material-ui/core/Checkbox";
-import Switch from "@material-ui/core/Switch";
+import Checkbox from "@mui/material/Checkbox";
+import Switch from "@mui/material/Switch";
import { SketchPicker } from "react-color";
-import FormGroup from "@material-ui/core/FormGroup";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import { TextField, makeStyles } from "@material-ui/core";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { TextField } from "@mui/material";
+import { makeStyles } from "@mui/styles";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
import CustomImgDropZone from "components/CustomImgDropZone/CustomImgDropZone";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Blueprints/Blueprints.js b/jams-react-client/src/views/Blueprints/Blueprints.js
index 2a250674a7b1b83293b685926b0d0432a5554710..c137d58d60a77944958b236a0a22e0df5c78b50e 100644
--- a/jams-react-client/src/views/Blueprints/Blueprints.js
+++ b/jams-react-client/src/views/Blueprints/Blueprints.js
@@ -1,45 +1,45 @@
import React, { useCallback, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import InputLabel from "@mui/material/InputLabel";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import Button from "components/CustomButtons/Button.js";
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from "@mui/material/IconButton";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
-import FormControl from "@material-ui/core/FormControl";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import GroupIcon from "@material-ui/icons/Group";
-import PersonIcon from "@material-ui/icons/Person";
-import Search from "@material-ui/icons/Search";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
-import InfoIcon from "@material-ui/icons/Info";
+import GroupIcon from "@mui/icons-material/Group";
+import PersonIcon from "@mui/icons-material/Person";
+import Search from "@mui/icons-material/Search";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import InfoIcon from "@mui/icons-material/Info";
-import AllInbox from "@material-ui/icons/AllInbox";
+import AllInbox from "@mui/icons-material/AllInbox";
import axios from "axios";
import configApiCall from "api.js";
import auth from "auth.js";
import { api_path_blueprints } from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.js";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
import { debounce } from "lodash";
diff --git a/jams-react-client/src/views/Contacts/Contacts.js b/jams-react-client/src/views/Contacts/Contacts.js
index 2789cbb9f8f40b0fa26c6ef76eb31a583f1ad9a2..7ed9da0a53e4c89876368cd021b697153311ed44 100644
--- a/jams-react-client/src/views/Contacts/Contacts.js
+++ b/jams-react-client/src/views/Contacts/Contacts.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
@@ -12,13 +12,13 @@ import CardAvatar from "components/Card/CardAvatar.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
-import BusinessOutlinedIcon from "@material-ui/icons/BusinessOutlined";
-import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer";
-import SmsFailedIcon from "@material-ui/icons/SmsFailed";
-import LaunchIcon from "@material-ui/icons/Launch";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import QuestionAnswerIcon from "@mui/icons-material/QuestionAnswer";
+import SmsFailedIcon from "@mui/icons-material/SmsFailed";
+import LaunchIcon from "@mui/icons-material/Launch";
-import Search from "@material-ui/icons/Search";
-import IconButton from "@material-ui/core/IconButton";
+import Search from "@mui/icons-material/Search";
+import IconButton from "@mui/material/IconButton";
import axios from "axios";
import configApiCall from "api.js";
@@ -33,19 +33,19 @@ import {
api_path_get_user_directory_search,
} from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import jami from "assets/img/faces/jami.png";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.js";
import TemporaryDrawer from "components/Drawer/Drawer";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Groups/EditGroup.js b/jams-react-client/src/views/Groups/EditGroup.js
index 3cc8e922ae9a1c08afeb1bea29fa6aa99b956138..cf15e2f15fea4d43a499d3bd4068280b5051f441 100644
--- a/jams-react-client/src/views/Groups/EditGroup.js
+++ b/jams-react-client/src/views/Groups/EditGroup.js
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import classnames from "classnames";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -14,25 +14,25 @@ import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
-import FormControl from "@material-ui/core/FormControl";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import InputLabel from "@material-ui/core/InputLabel";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import InputLabel from "@mui/material/InputLabel";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-import EditIcon from "@material-ui/icons/Edit";
-import PeopleOutlineIcon from "@material-ui/icons/PeopleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import EditIcon from "@mui/icons-material/Edit";
+import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
-import IconButton from "@material-ui/core/IconButton";
-import SaveIcon from "@material-ui/icons/Save";
+import IconButton from "@mui/material/IconButton";
+import SaveIcon from "@mui/icons-material/Save";
import axios from "axios";
import configApiCall from "../../api";
@@ -50,7 +50,7 @@ import {
import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import devicesStyle from "assets/jss/material-dashboard-react/components/devicesStyle.js";
-import Avatar from "@material-ui/core/Avatar";
+import Avatar from "@mui/material/Avatar";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
diff --git a/jams-react-client/src/views/Groups/Groups.js b/jams-react-client/src/views/Groups/Groups.js
index d3060e53c5f8f9cb8c7c7514f207a1562967fb9f..07af29799f5d9f965e9981aeb64b6f37cf66f463 100644
--- a/jams-react-client/src/views/Groups/Groups.js
+++ b/jams-react-client/src/views/Groups/Groups.js
@@ -1,10 +1,10 @@
import React, { useEffect, useState, useCallback } from "react";
import { Link, useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import InputLabel from "@material-ui/core/InputLabel";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import InputLabel from "@mui/material/InputLabel";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -13,15 +13,15 @@ import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import CustomInput from "components/CustomInput/CustomInput.js";
-import IconButton from "@material-ui/core/IconButton";
-import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
-import Search from "@material-ui/icons/Search";
-import PeopleOutlineIcon from "@material-ui/icons/PeopleOutline";
-import MailOutlineIcon from "@material-ui/icons/MailOutline";
-import PersonIcon from "@material-ui/icons/Person";
-import InfoIcon from "@material-ui/icons/Info";
+import IconButton from "@mui/material/IconButton";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import Search from "@mui/icons-material/Search";
+import PeopleOutlineIcon from "@mui/icons-material/PeopleOutline";
+import MailOutlineIcon from "@mui/icons-material/MailOutline";
+import PersonIcon from "@mui/icons-material/Person";
+import InfoIcon from "@mui/icons-material/Info";
-import Select from "@material-ui/core/Select";
+import Select from "@mui/material/Select";
import * as tool from "../../tools";
import axios from "axios";
@@ -35,21 +35,21 @@ import {
api_path_get_group_members,
} from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import FormControl from "@material-ui/core/FormControl";
-import Input from "@material-ui/core/Input";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
import { debounce } from "lodash";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/Settings/General.js b/jams-react-client/src/views/Settings/General.js
index bb82b6ca43b8d94b6bff459b462452c6b1083322..f7e8c528a4819639f9b7173c5d33b92debcd1ea8 100644
--- a/jams-react-client/src/views/Settings/General.js
+++ b/jams-react-client/src/views/Settings/General.js
@@ -2,18 +2,18 @@ import React, { useState } from "react";
import { Formik } from "formik";
import FormikField from "components/FormikField/FormikField";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
-import RefreshIcon from "@material-ui/icons/Refresh";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import IconButton from "@material-ui/core/IconButton";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import InputAdornment from "@material-ui/core/InputAdornment";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import IconButton from "@mui/material/IconButton";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import InputAdornment from "@mui/material/InputAdornment";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
diff --git a/jams-react-client/src/views/Settings/Settings.js b/jams-react-client/src/views/Settings/Settings.js
index 5398e11869a92529171f1f82b6588c97d62e96ec..eb1056ecc1fd04e3fa4268eafbcdd710eaa9ce63 100644
--- a/jams-react-client/src/views/Settings/Settings.js
+++ b/jams-react-client/src/views/Settings/Settings.js
@@ -4,14 +4,14 @@ import General from "./General";
import Subscription from "./Subscription";
import PropTypes from "prop-types";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import { infoColor } from "assets/jss/material-dashboard-react.js";
-import MuiAlert from "@material-ui/lab/Alert";
+import MuiAlert from "@mui/lab/Alert";
import auth from "auth.js";
diff --git a/jams-react-client/src/views/Settings/Subscription.js b/jams-react-client/src/views/Settings/Subscription.js
index 32745f8a5467d9a0f8d86a25a193edec5d7273cf..32ce443dbd6d74322ca7bdb7ff232a0f56e5769a 100644
--- a/jams-react-client/src/views/Settings/Subscription.js
+++ b/jams-react-client/src/views/Settings/Subscription.js
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/styles";
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index 5153a0c26d5a2a50e27b64427521e1d462a34a66..62c1796ba2b24e13799a935e8d5ed9a8b74a6cb5 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import classnames from "classnames";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -12,42 +12,42 @@ import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import EditIcon from "@material-ui/icons/Edit";
-import DeleteIcon from "@material-ui/icons/Delete";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
-
-import Table from "@material-ui/core/Table";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-
-import Grid from "@material-ui/core/Grid";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
-import BusinessCenterOutlinedIcon from "@material-ui/icons/BusinessCenterOutlined";
-import AlternateEmailOutlinedIcon from "@material-ui/icons/AlternateEmailOutlined";
-import PhoneInTalkOutlinedIcon from "@material-ui/icons/PhoneInTalkOutlined";
-import SmartphoneOutlinedIcon from "@material-ui/icons/SmartphoneOutlined";
-import LocalPrintshopOutlinedIcon from "@material-ui/icons/LocalPrintshopOutlined";
-import PhoneForwardedOutlinedIcon from "@material-ui/icons/PhoneForwardedOutlined";
-
-import Avatar from "@material-ui/core/Avatar";
-import Chip from "@material-ui/core/Chip";
+import BusinessCenterOutlinedIcon from "@mui/icons-material/BusinessCenterOutlined";
+import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";
+import PhoneInTalkOutlinedIcon from "@mui/icons-material/PhoneInTalkOutlined";
+import SmartphoneOutlinedIcon from "@mui/icons-material/SmartphoneOutlined";
+import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
+import PhoneForwardedOutlinedIcon from "@mui/icons-material/PhoneForwardedOutlined";
+
+import Avatar from "@mui/material/Avatar";
+import Chip from "@mui/material/Chip";
import CardAvatar from "components/Card/CardAvatar";
-import PersonIcon from "../../../node_modules/@material-ui/icons/Person";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import PersonIcon from "../../../node_modules/@mui/icons-material/Person";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemAvatar from "@material-ui/core/ListItemAvatar";
-import ListItemText from "@material-ui/core/ListItemText";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemText from "@mui/material/ListItemText";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import auth from "auth.js";
import configApiCall from "api.js";
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index c8b2288f09f32a10f7dfdb540a5930eb10b61e11..7c4d86c690efe6ebc8946efbb78aef75396e4f6a 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
@@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
// core components
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import Button from "components/CustomButtons/Button.js";
@@ -14,38 +14,38 @@ import CardAvatar from "components/Card/CardAvatar.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
-import InputAdornment from "@material-ui/core/InputAdornment";
-import Slider from "@material-ui/core/Slider";
-import Typography from "@material-ui/core/Typography";
+import InputAdornment from "@mui/material/InputAdornment";
+import Slider from "@mui/material/Slider";
+import Typography from "@mui/material/Typography";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
import Cropper from "react-easy-crop";
import getCroppedImg from "./cropImage";
import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react.js";
-import AccountCircleIcon from "@material-ui/icons/AccountCircle";
-import BusinessCenterOutlinedIcon from "@material-ui/icons/BusinessCenterOutlined";
-import AlternateEmailOutlinedIcon from "@material-ui/icons/AlternateEmailOutlined";
-import PhoneInTalkOutlinedIcon from "@material-ui/icons/PhoneInTalkOutlined";
-import PhoneForwardedOutlinedIcon from "@material-ui/icons/PhoneForwardedOutlined";
-import SmartphoneOutlinedIcon from "@material-ui/icons/SmartphoneOutlined";
-import LocalPrintshopOutlinedIcon from "@material-ui/icons/LocalPrintshopOutlined";
-import PersonIcon from "@material-ui/icons/Person";
-import PersonOutlinedIcon from "@material-ui/icons/PersonOutlined";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import RefreshIcon from "@material-ui/icons/Refresh";
-import VisibilityIcon from "@material-ui/icons/Visibility";
-import VisibilityOffIcon from "@material-ui/icons/VisibilityOff";
-import CancelIcon from "@material-ui/icons/Cancel";
-import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import BusinessCenterOutlinedIcon from "@mui/icons-material/BusinessCenterOutlined";
+import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";
+import PhoneInTalkOutlinedIcon from "@mui/icons-material/PhoneInTalkOutlined";
+import PhoneForwardedOutlinedIcon from "@mui/icons-material/PhoneForwardedOutlined";
+import SmartphoneOutlinedIcon from "@mui/icons-material/SmartphoneOutlined";
+import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
+import PersonIcon from "@mui/icons-material/Person";
+import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import CancelIcon from "@mui/icons-material/Cancel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import IconButton from "@material-ui/core/IconButton";
-import PhotoCamera from "@material-ui/icons/PhotoCamera";
-import FileCopyIcon from "@material-ui/icons/FileCopy";
+import IconButton from "@mui/material/IconButton";
+import PhotoCamera from "@mui/icons-material/PhotoCamera";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -69,7 +69,7 @@ import FormikField from "components/FormikField/FormikField";
import { Formik } from "formik";
import * as Yup from "yup";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import i18next from "i18next";
diff --git a/jams-react-client/src/views/UserProfile/UserProfile.js b/jams-react-client/src/views/UserProfile/UserProfile.js
index 16575b4ba18f41cc05d3607ee312a4b40c786f23..ae552028bc488f753a836169abb2b4951022b39b 100755
--- a/jams-react-client/src/views/UserProfile/UserProfile.js
+++ b/jams-react-client/src/views/UserProfile/UserProfile.js
@@ -4,11 +4,11 @@ import { useHistory } from "react-router-dom";
import Devices from "components/Devices/Devices.js";
import PropTypes from "prop-types";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
+import AppBar from "@mui/material/AppBar";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
import EditCreateUserProfile from "./EditCreateUserProfile";
diff --git a/jams-react-client/src/views/Users/Users.js b/jams-react-client/src/views/Users/Users.js
index ac0226af9afacfa4e234d455eb8942a1f37b76cd..6425874af7d4747bf33817a1750473c8268bc091 100644
--- a/jams-react-client/src/views/Users/Users.js
+++ b/jams-react-client/src/views/Users/Users.js
@@ -1,9 +1,9 @@
import React, { useState, useEffect, useCallback } from "react";
import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import Pagination from "@material-ui/lab/Pagination";
+// @mui/material components
+import { makeStyles } from "@mui/styles";
+import Pagination from "@mui/lab/Pagination";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
@@ -14,19 +14,19 @@ import Card from "components/Card/Card.js";
import CardAvatar from "components/Card/CardAvatar.js";
import CardBody from "components/Card/CardBody.js";
-import InfoIcon from "@material-ui/icons/Info";
-import BusinessOutlinedIcon from "@material-ui/icons/BusinessOutlined";
-import Search from "@material-ui/icons/Search";
-import Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import InfoIcon from "@mui/icons-material/Info";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import Search from "@mui/icons-material/Search";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
import axios from "axios";
import configApiCall from "api.js";
import auth from "auth.js";
import { api_path_get_user_directory_search } from "globalUrls";
-import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import jami from "assets/img/faces/jami.png";
import noProfilePicture from "assets/img/faces/no-profile-picture.png";
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
import headerLinksStyle from "assets/jss/material-dashboard-react/components/headerLinksStyle.js";
import { debounce } from "lodash";