Restrict access to advanced settings page

Client/src/Pages/AdvancedSettings/index.jsx

@@ -10,14 +10,17 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { ConfigBox } from "../Settings/styled";
 import { useNavigate } from "react-router";
 import { updateAppSettings } from "../../Features/Settings/settingsSlice";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Select from "../../Components/Inputs/Select";
 
 const AdvancedSettings = ({ isAdmin }) => {
   const navigate = useNavigate();
-  if (!isAdmin) {
-    navigate("/");
-  }
+
+  useEffect(() => {
+    if (!isAdmin) {
+      navigate("/");
+    }
+  }, [navigate, isAdmin]);
 
   const theme = useTheme();
   const { authToken } = useSelector((state) => state.auth);
@@ -75,7 +78,6 @@ const AdvancedSettings = ({ isAdmin }) => {
         noValidate
         spellCheck="false"
       >
-        \{" "}
         <ConfigBox>
           <Box>
             <Typography component="h1">Client Settings</Typography>

Client/src/Pages/Settings/index.jsx

@@ -251,26 +251,28 @@ const Settings = ({ isAdmin }) => {
             </Stack>
           </ConfigBox>
         )}
-        <ConfigBox>
-          <Box>
-            <Typography component="h1">Advanced Settings</Typography>
-            <Typography sx={{ mt: theme.spacing(2) }}>
-              Click here to modify advanced settings
-            </Typography>
-          </Box>
-          <Stack gap={theme.spacing(20)}>
+        {isAdmin && (
+          <ConfigBox>
             <Box>
-              <Button
-                variant="contained"
-                onClick={() => {
-                  navigate("/advanced-settings");
-                }}
-              >
-                Advanced Settings
-              </Button>
+              <Typography component="h1">Advanced Settings</Typography>
+              <Typography sx={{ mt: theme.spacing(2) }}>
+                Click here to modify advanced settings
+              </Typography>
             </Box>
-          </Stack>
-        </ConfigBox>
+            <Stack gap={theme.spacing(20)}>
+              <Box>
+                <Button
+                  variant="contained"
+                  onClick={() => {
+                    navigate("/advanced-settings");
+                  }}
+                >
+                  Advanced Settings
+                </Button>
+              </Box>
+            </Stack>
+          </ConfigBox>
+        )}
         <ConfigBox>
           <Box>
             <Typography component="h1">About</Typography>