[WIP] add users route, change routing structure, change styling of tabs

typescript/Frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import useToken from "./hooks/useToken";
 import Login from "./Login";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { Grid } from "@mui/material";
+import { Container, Grid } from "@mui/material";
 import routes from "./routes.json";
 import { IntlProvider } from "react-intl";
 import { useState } from "react";
@@ -10,21 +10,23 @@ import de from "./lang/de.json";
 import Installations from "./components/Installations/Installations";
 import LanguageSelect from "./components/Layout/LanguageSelect";
 import LogoutButton from "./components/Layout/LogoutButton";
-import Groups from "./components/Groups/Groups";
+import Users from "./components/Users/Users";
+import NavigationButtons from "./components/Layout/NavigationButtons";
+import InstallationPage from "./components/Installations/InstallationPage";
 
 const App = () => {
   const { token, setToken, removeToken } = useToken();
-  const [language, setLanguage] = useState("en");
+  const [language, setLanguage] = useState("EN");
 
   const getTranslations = () => {
-    if (language === "de") {
+    if (language === "DE") {
       return de;
     }
     return en;
   };
 
   if (!token) {
-    return <Login setToken={setToken} />;
+    return <Login setToken={setToken} setLanguage={setLanguage} />;
   }
 
   return (
@@ -32,12 +34,24 @@ const App = () => {
       <IntlProvider
         messages={getTranslations()}
         locale={language}
-        defaultLocale="en"
+        defaultLocale="EN"
+      >
+        <Container maxWidth="xl" sx={{ margin: 2 }}>
+          <Grid container spacing={2}>
+            <Grid item xs={3}>
+              <NavigationButtons />
+            </Grid>
+            <Grid
+              item
+              xs={9}
+              container
+              justifyContent="flex-end"
+              sx={{ px: 1, pt: 1 }}
             >
-        <Grid container justifyContent="flex-end" sx={{ px: 1, pt: 1 }}>
               <LanguageSelect language={language} setLanguage={setLanguage} />
               <LogoutButton removeToken={removeToken} />
             </Grid>
+          </Grid>
           <Routes>
             <Route
               path="*"
@@ -45,10 +59,11 @@ const App = () => {
             />
             <Route
               path={routes.installations + "*"}
-            element={<Installations />}
+              element={<InstallationPage />}
             />
-          <Route path={routes.groups + "*"} element={<Groups />} />
+            <Route path={routes.users + "*"} element={<Users />} />
           </Routes>
+        </Container>
       </IntlProvider>
     </BrowserRouter>
   );

typescript/Frontend/src/Login.tsx

@@ -10,7 +10,12 @@ const loginUser = async (username: string, password: string) => {
   });
 };
 
-const Login = ({ setToken }: { setToken: (value: string) => void }) => {
+interface I_LoginProps {
+  setToken: (value: string) => void;
+  setLanguage: (value: string) => void;
+}
+
+const Login = ({ setToken, setLanguage }: I_LoginProps) => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
@@ -31,6 +36,7 @@ const Login = ({ setToken }: { setToken: (value: string) => void }) => {
           .then(() => {
             setToken(data.token);
             setLoading(false);
+            setLanguage(data.user.language);
           })
           .catch((err) => {
             setError(err);

typescript/Frontend/src/components/Context/UserContextProvider.tsx

@@ -0,0 +1,109 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { useParams } from "react-router-dom";
+import axiosConfig from "../../config/axiosConfig";
+import { I_User, UserWithInheritedAccess } from "../../util/user.util";
+import { GroupContext } from "./GroupContextProvider";
+
+interface UserContextProviderProps {
+  directAccessUsers: I_User[];
+  setDirectAccessUsers: (value: I_User[]) => void;
+  inheritedAccessUsers: UserWithInheritedAccess[];
+  setInheritedAccessUsers: (value: UserWithInheritedAccess[]) => void;
+  availableUsers: I_User[];
+  setAvailableUsers: (value: I_User[]) => void;
+  getAvailableUsers: () => I_User[];
+  fetchUsersWithInheritedAccessForResource: () => Promise<void>;
+  fetchUsersWithDirectAccessForResource: () => Promise<void>;
+}
+
+export const UserContext = createContext<UserContextProviderProps>({
+  directAccessUsers: [],
+  setDirectAccessUsers: () => {},
+  inheritedAccessUsers: [],
+  setInheritedAccessUsers: () => {},
+  availableUsers: [],
+  setAvailableUsers: () => {},
+  getAvailableUsers: () => {
+    return [];
+  },
+  fetchUsersWithInheritedAccessForResource: () => {
+    return Promise.resolve();
+  },
+  fetchUsersWithDirectAccessForResource: () => {
+    return Promise.resolve();
+  },
+});
+
+const UserContextProvider = ({ children }: { children: ReactNode }) => {
+  const [directAccessUsers, setDirectAccessUsers] = useState<I_User[]>([]);
+  const [inheritedAccessUsers, setInheritedAccessUsers] = useState<
+    UserWithInheritedAccess[]
+  >([]);
+  const [availableUsers, setAvailableUsers] = useState<I_User[]>([]);
+
+  const { currentType } = useContext(GroupContext);
+  const { id } = useParams();
+
+  const fetchUsers = useCallback(
+    async (route: string, setState: (value: any) => void) => {
+      axiosConfig.get(route + currentType, { params: { id } }).then((res) => {
+        setState(res.data);
+      });
+    },
+    [currentType, id]
+  );
+
+  const fetchUsersWithInheritedAccessForResource = useCallback(async () => {
+    fetchUsers("/GetUsersWithInheritedAccessTo", setInheritedAccessUsers);
+  }, [fetchUsers]);
+
+  const fetchUsersWithDirectAccessForResource = useCallback(async () => {
+    fetchUsers("/GetUsersWithDirectAccessTo", setDirectAccessUsers);
+  }, [fetchUsers]);
+
+  const getAvailableUsersForResource = () => {
+    const inheritedUsers = inheritedAccessUsers.map(
+      (inheritedAccessUser) => inheritedAccessUser.user
+    );
+    const allUsersWithAccess = [...inheritedUsers, ...directAccessUsers];
+    return availableUsers.filter(
+      (availableUser) =>
+        !allUsersWithAccess.find(
+          (userWithAccess) => availableUser.id === userWithAccess.id
+        )
+    );
+  };
+
+  useEffect(() => {
+    axiosConfig.get("/GetAllChildUsers").then((res) => {
+      setAvailableUsers(res.data);
+    });
+  }, []);
+
+  return (
+    <UserContext.Provider
+      value={{
+        directAccessUsers,
+        setDirectAccessUsers,
+        inheritedAccessUsers,
+        setInheritedAccessUsers,
+        availableUsers,
+        setAvailableUsers,
+        getAvailableUsers: getAvailableUsersForResource,
+        fetchUsersWithInheritedAccessForResource,
+        fetchUsersWithDirectAccessForResource,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContextProvider;

typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx

@@ -1,23 +1,24 @@
 import { Grid } from "@mui/material";
-import AvailableUserList from "./AvailableUserList";
+import UserContextProvider from "../../Context/UserContextProvider";
-import InnovenergyList from "./UserList";
+import AvailableUserDialog from "./AvailableUserDialog";
+import InnovenergyList from "./InnovenergyList";
 import UsersWithDirectAccess from "./UsersWithDirectAccess";
 import UsersWithInheritedAccess from "./UsersWithInheritedAccess";
 
-const Users = () => {
+const AccessManagement = () => {
   return (
-    <>
+    <UserContextProvider>
-      <AvailableUserList />
       <Grid container sx={{ mt: 1 }}>
         <Grid item xs={6}>
+          <AvailableUserDialog />
           <InnovenergyList>
             <UsersWithDirectAccess />
             <UsersWithInheritedAccess />
           </InnovenergyList>
         </Grid>
       </Grid>
-    </>
+    </UserContextProvider>
   );
 };
 
-export default Users;
+export default AccessManagement;

typescript/Frontend/src/components/Groups/AccessManagement/AvailableUserDialog.tsx

@@ -1,23 +1,32 @@
-import { Autocomplete, Button, Grid, TextField } from "@mui/material";
+import {
-import { useContext, useEffect, useState } from "react";
+  Autocomplete,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import DialogActions from "@mui/material/DialogActions";
+import { useContext, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router-dom";
 import axiosConfig from "../../../config/axiosConfig";
-import { User } from "../../../util/user.util";
+import { I_User } from "../../../util/user.util";
 import { GroupContext } from "../../Context/GroupContextProvider";
+import { UserContext } from "../../Context/UserContextProvider";
 
-const AvailableUserList = () => {
+const AvailableUserDialog = () => {
-  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUsers, setSelectedUsers] = useState<I_User[]>([]);
-  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const [open, setOpen] = useState(false);
 
   const { currentType } = useContext(GroupContext);
   const { id } = useParams();
+  const {
+    getAvailableUsers,
+    fetchUsersWithDirectAccessForResource,
+    fetchUsersWithInheritedAccessForResource,
+  } = useContext(UserContext);
 
-  useEffect(() => {
-    axiosConfig.get("/GetAllChildUsers").then((res) => {
-      setUsers(res.data);
-    });
-  }, []);
   const handleGrant = () => {
     selectedUsers.forEach((user) => {
       const bodyProp = currentType === "Folder" ? "folderId" : "installationId";
@@ -29,20 +38,32 @@ const AvailableUserList = () => {
             : "/GrantUserAccessToInstallation",
           { userId: user.id, [bodyProp]: elementId }
         )
-        .then((res) => {
+        .then(() => {
-          console.log(res);
+          fetchUsersWithDirectAccessForResource();
+          fetchUsersWithInheritedAccessForResource();
         });
     });
   };
-  if (users) {
+
   return (
     <>
-        <Grid container sx={{ pt: 1 }}>
+      <Dialog
+        onClose={() => setOpen(false)}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+        sx={{
+          ".MuiDialogContent-root": { overflowX: "hidden" },
+          maxHeight: 500,
+        }}
+        scroll="paper"
+      >
+        <DialogTitle>Create new folder</DialogTitle>
+        <DialogContent>
           <Autocomplete
             sx={{ width: "500px" }}
             multiple
             id="tags-standard"
-            options={users}
+            options={getAvailableUsers()}
             getOptionLabel={(option) => option.name}
             renderInput={(params) => (
               <TextField
@@ -54,6 +75,8 @@ const AvailableUserList = () => {
             )}
             onChange={(event, values) => setSelectedUsers(values)}
           />
+        </DialogContent>
+        <DialogActions>
           <Button
             variant="outlined"
             type="submit"
@@ -62,11 +85,13 @@ const AvailableUserList = () => {
           >
             <FormattedMessage id="grantAccess" defaultMessage="Grant access" />
           </Button>
-        </Grid>
+        </DialogActions>
+      </Dialog>
+      <Button variant="outlined" type="submit" onClick={() => setOpen(true)}>
+        <FormattedMessage id="grantAccess" defaultMessage="Grant access" />
+      </Button>
     </>
   );
-  }
-  return null;
 };
 
-export default AvailableUserList;
+export default AvailableUserDialog;

typescript/Frontend/src/components/Groups/AccessManagement/UsersWithDirectAccess.tsx

@@ -6,31 +6,23 @@ import {
   Avatar,
   ListItemAvatar,
 } from "@mui/material";
-import { Fragment, useCallback, useContext, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect } from "react";
 import axiosConfig from "../../../config/axiosConfig";
-import { User } from "../../../util/user.util";
 import PersonRemoveIcon from "@mui/icons-material/PersonRemove";
-import { GroupContext } from "../../Context/GroupContextProvider";
-import { useParams } from "react-router-dom";
 import PersonIcon from "@mui/icons-material/Person";
+import { UserContext } from "../../Context/UserContextProvider";
+import { useParams } from "react-router-dom";
+import { GroupContext } from "../../Context/GroupContextProvider";
 
 const UsersWithDirectAccess = () => {
-  const [users, setUsers] = useState<User[]>();
+  const { fetchUsersWithDirectAccessForResource, directAccessUsers } =
-
+    useContext(UserContext);
   const { currentType } = useContext(GroupContext);
   const { id } = useParams();
 
-  const fetchUsers = useCallback(async () => {
-    axiosConfig
-      .get("/GetUsersWithDirectAccessTo" + currentType, { params: { id } })
-      .then((res) => {
-        setUsers(res.data);
-      });
-  }, [currentType, id]);
-
   useEffect(() => {
-    fetchUsers();
+    fetchUsersWithDirectAccessForResource();
-  }, [fetchUsers]);
+  }, [fetchUsersWithDirectAccessForResource]);
 
   const handleIconClick = (userId: number) => {
     const folderId = id ? parseInt(id) : "";
@@ -40,14 +32,14 @@ const UsersWithDirectAccess = () => {
         folderId: folderId,
       })
       .then((res) => {
-        fetchUsers();
+        fetchUsersWithDirectAccessForResource();
       });
   };
 
-  if (users && users.length) {
+  if (directAccessUsers && directAccessUsers.length) {
     return (
       <>
-        {users.map((user) => {
+        {directAccessUsers.map((user) => {
           return (
             <Fragment key={user.id}>
               <ListItem

typescript/Frontend/src/components/Groups/AccessManagement/UsersWithInheritedAccess.tsx

@@ -5,39 +5,28 @@ import {
   ListItemAvatar,
   Avatar,
 } from "@mui/material";
-import { Fragment, useCallback, useContext, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
-import axiosConfig from "../../../config/axiosConfig";
 import {
   filterDuplicateUsers,
   UserWithInheritedAccess,
 } from "../../../util/user.util";
-import { GroupContext } from "../../Context/GroupContextProvider";
 import routes from "../../../routes.json";
 import PersonIcon from "@mui/icons-material/Person";
+import { UserContext } from "../../Context/UserContextProvider";
 
 const UsersWithInheritedAccess = () => {
-  const [users, setUsers] = useState<UserWithInheritedAccess[]>();
+  const { fetchUsersWithInheritedAccessForResource, inheritedAccessUsers } =
-
+    useContext(UserContext);
-  const { currentType } = useContext(GroupContext);
-  const { id } = useParams();
-
-  const fetchUsers = useCallback(async () => {
-    axiosConfig
-      .get("/GetUsersWithInheritedAccessTo" + currentType, { params: { id } })
-      .then((res) => {
-        setUsers(res.data);
-      });
-  }, [currentType, id]);
 
   useEffect(() => {
-    fetchUsers();
+    fetchUsersWithInheritedAccessForResource();
-  }, [fetchUsers]);
+  }, [fetchUsersWithInheritedAccessForResource]);
 
-  if (users && users.length) {
+  if (inheritedAccessUsers && inheritedAccessUsers.length) {
     return (
       <>
-        {filterDuplicateUsers(users).map(
+        {filterDuplicateUsers(inheritedAccessUsers).map(
           ({ user, folderName }: UserWithInheritedAccess) => {
             return (
               <Fragment key={user.id}>
@@ -52,7 +41,11 @@ const UsersWithInheritedAccess = () => {
                     secondary={
                       <>
                         Inherited access from{" "}
-                        <Link to={routes.groups + routes.users + user.parentId}>
+                        <Link
+                          to={
+                            routes.groups + routes.manageAccess + user.parentId
+                          }
+                        >
                           {folderName}
                         </Link>
                       </>

typescript/Frontend/src/components/Groups/AddNewDialog.tsx

@@ -0,0 +1,46 @@
+import { Button, Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import axiosConfig from "../../config/axiosConfig";
+import { I_Folder } from "../../util/types";
+import FolderForm from "./FolderForm";
+
+interface AddNewDialogProps {
+  values: I_Folder;
+}
+
+const AddNewDialog = (props: AddNewDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleSubmit = (data: I_Folder, childData: Partial<I_Folder>) => {
+    return axiosConfig.post("/CreateFolder", {
+      ...childData,
+      parentId: data.id,
+    });
+  };
+
+  return (
+    <>
+      <Button variant="outlined" sx={{ ml: 2 }} onClick={() => setOpen(true)}>
+        <FormattedMessage id="addNewChild" defaultMessage="Add new child" />
+      </Button>
+      <Dialog
+        onClose={() => setOpen(false)}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+        sx={{
+          ".MuiDialogContent-root": { overflowX: "hidden" },
+          maxHeight: 500,
+        }}
+        scroll="paper"
+      >
+        <DialogTitle>Create new folder</DialogTitle>
+        <DialogContent>
+          <FolderForm values={props.values} handleSubmit={handleSubmit} />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default AddNewDialog;

typescript/Frontend/src/components/Groups/Folder.tsx

@@ -3,12 +3,14 @@ import { AxiosError } from "axios";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
-import { I_Installation } from "../../util/types";
+import { I_Folder } from "../../util/types";
+import AddNewDialog from "./AddNewDialog";
 import FolderForm from "./FolderForm";
+import MoveDialog from "./Tree/MoveDialog";
 
 const Folder = () => {
   const { id } = useParams();
-  const [values, setValues] = useState<I_Installation>();
+  const [values, setValues] = useState<I_Folder>();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<AxiosError>();
 
@@ -26,11 +28,22 @@ const Folder = () => {
       });
   }, [id]);
 
+  const handleSubmit = (data: I_Folder, formikValues: Partial<I_Folder>) => {
+    return axiosConfig.put("/UpdateFolder", { ...data, ...formikValues });
+  };
+
   if (values && values.id && values.id.toString() === id) {
+    const moveDialog = <MoveDialog values={values} />;
+    const addNewDialog = <AddNewDialog values={values} />;
+
     return (
       <>
         <Box sx={{ py: 3 }}>
-          <FolderForm values={values} id={id} />
+          <FolderForm
+            values={values}
+            handleSubmit={handleSubmit}
+            additionalButtons={[moveDialog, addNewDialog]}
+          />
         </Box>
       </>
     );

typescript/Frontend/src/components/Groups/FolderForm.tsx

@@ -1,25 +1,24 @@
 import { Button, CircularProgress, Grid } from "@mui/material";
+import { AxiosResponse } from "axios";
 import { useFormik } from "formik";
-import { useContext, useState } from "react";
+import { ReactNode, useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import axiosConfig from "../../config/axiosConfig";
 import { I_Folder } from "../../util/types";
 import { GroupContext } from "../Context/GroupContextProvider";
 import InnovenergySnackbar from "../InnovenergySnackbar";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
-import MoveDialog from "./Tree/MoveDialog";
 
 interface I_CustomerFormProps {
   values: I_Folder;
-  id: string;
+  handleSubmit: (
+    data: I_Folder,
+    formikValues: Partial<I_Folder>
+  ) => Promise<AxiosResponse>;
+  additionalButtons?: ReactNode[];
 }
 
-const updateFolder = (data: I_Folder) => {
-  return axiosConfig.put("/UpdateFolder", data);
-};
-
 const FolderForm = (props: I_CustomerFormProps) => {
-  const { values, id } = props;
+  const { values, additionalButtons, handleSubmit } = props;
   const intl = useIntl();
   const { fetchData } = useContext(GroupContext);
 
@@ -34,14 +33,8 @@ const FolderForm = (props: I_CustomerFormProps) => {
     },
     onSubmit: (formikValues) => {
       setLoading(true);
-      const idAsNumber = parseInt(id, 10);
+      handleSubmit(values, formikValues)
-      updateFolder({
+        .then(() => {
-        ...values,
-        ...formikValues,
-        id: idAsNumber,
-      })
-        .then((res) => {
-          // TODO figure out why this isnt refreshing tree
           fetchData();
           setSnackbarOpen(true);
           setLoading(false);
@@ -79,12 +72,9 @@ const FolderForm = (props: I_CustomerFormProps) => {
         />
         <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
           {loading && <CircularProgress />}
-          <MoveDialog values={values} />
+          {additionalButtons && additionalButtons.map((button) => button)}
           <Button variant="outlined" type="submit" sx={{ ml: 2 }}>
-            <FormattedMessage
+            <FormattedMessage id="submit" defaultMessage="Submit" />
-              id="applyChanges"
-              defaultMessage="Apply changes"
-            />
           </Button>
         </Grid>
         <InnovenergySnackbar

typescript/Frontend/src/components/Groups/GroupTabs.tsx

@@ -1,34 +1,33 @@
-import * as React from "react";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
 import { Link } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import { GroupContext } from "../Context/GroupContextProvider";
+import { useContext } from "react";
+import { AntTabs, StyledTab } from "../../util/installation.util";
 
 const GroupTabs = () => {
   const routeMatch = useRouteMatch([
     routes.groups + routes.folder + ":id",
-    routes.groups + routes.users + ":id",
+    routes.groups + routes.manageAccess + ":id",
     routes.groups + routes.installation + ":id",
   ]);
 
   const id = routeMatch?.params?.id;
   const intl = useIntl();
-  const { currentType } = React.useContext(GroupContext);
+  const { currentType } = useContext(GroupContext);
 
   if (id) {
     return (
       <Box sx={{ width: "100%" }}>
         <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-          <Tabs
+          <AntTabs
             value={routeMatch?.pattern?.path}
             aria-label="basic tabs example"
           >
             {currentType === "Folder" ? (
-              <Tab
+              <StyledTab
                 label={intl.formatMessage({
                   id: "folder",
                   defaultMessage: "Folder",
@@ -38,7 +37,7 @@ const GroupTabs = () => {
                 to={routes.folder + id}
               />
             ) : (
-              <Tab
+              <StyledTab
                 label={intl.formatMessage({
                   id: "installation",
                   defaultMessage: "Installation",
@@ -49,16 +48,16 @@ const GroupTabs = () => {
               />
             )}
 
-            <Tab
+            <StyledTab
               label={intl.formatMessage({
-                id: "users",
+                id: "manageAccess",
-                defaultMessage: "Users",
+                defaultMessage: "Manage access",
               })}
-              value={routes.groups + routes.users + ":id"}
+              value={routes.groups + routes.manageAccess + ":id"}
               component={Link}
-              to={routes.users + id}
+              to={routes.manageAccess + id}
             />
-          </Tabs>
+          </AntTabs>
         </Box>
       </Box>
     );

typescript/Frontend/src/components/Groups/Groups.tsx

@@ -2,36 +2,43 @@ import { Grid } from "@mui/material";
 import { Container } from "@mui/system";
 import { Routes, Route } from "react-router";
 import routes from "../../routes.json";
-import Installation from "../Installations/Installation";
 import Folder from "./Folder";
 import GroupTabs from "./GroupTabs";
 import GroupContextProvider from "../Context/GroupContextProvider";
 import GroupTree from "./Tree/GroupTree";
 import NavigationButtons from "../Layout/NavigationButtons";
-import Users from "./Users/Users";
+import AccessManagement from "./AccessManagement/AccessManagement";
+import { I_Installation } from "../../util/types";
+import InstallationForm from "../Installations/InstallationForm";
+import Detail from "../Layout/Detail";
 
 const Groups = () => {
   return (
     <GroupContextProvider>
-      <Container maxWidth="xl">
       <Grid container spacing={2}>
         <Grid item xs={3}>
-            <NavigationButtons />
           <GroupTree />
         </Grid>
         <Grid item xs={9}>
           <GroupTabs />
           <Routes>
             <Route path={routes.folder + ":id"} element={<Folder />} index />
-              <Route path={routes.users + ":id"} element={<Users />} />
+            <Route
+              path={routes.manageAccess + ":id"}
+              element={<AccessManagement />}
+            />
             <Route
               path={routes.installation + ":id"}
-                element={<Installation />}
+              element={
+                <Detail<I_Installation>
+                  route="/GetInstallationById?id="
+                  formComponent={InstallationForm}
+                />
+              }
             />
           </Routes>
         </Grid>
       </Grid>
-      </Container>
     </GroupContextProvider>
   );
 };

typescript/Frontend/src/components/Installations/InstallationForm.tsx

@@ -4,13 +4,14 @@ import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Installation } from "../../util/types";
+import MoveDialog from "../Groups/Tree/MoveDialog";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
 
-interface I_CustomerFormProps {
+interface I_InstallationFormProps {
   values: I_Installation;
   id: string | undefined;
 }
-const CustomerForm = (props: I_CustomerFormProps) => {
+const InstallationForm = (props: I_InstallationFormProps) => {
   const { values, id } = props;
   const [open, setOpen] = useState(false);
 
@@ -93,6 +94,7 @@ const CustomerForm = (props: I_CustomerFormProps) => {
         handleChange={formik.handleChange}
       />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
+        <MoveDialog values={values} />
         <Button variant="outlined" type="submit">
           <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
         </Button>
@@ -117,4 +119,4 @@ const CustomerForm = (props: I_CustomerFormProps) => {
   );
 };
 
-export default CustomerForm;
+export default InstallationForm;

typescript/Frontend/src/components/Installations/InstallationList.tsx

@@ -43,7 +43,6 @@ const InstallationList = (props: InstallationListProps) => {
   const routeMatch = useRouteMatch([
     routes.installations + routes.installation + ":id",
     routes.installations + routes.alarms + ":id",
-    routes.installations + routes.users + ":id",
     routes.installations + routes.log + ":id",
   ]);
 

typescript/Frontend/src/components/Installations/InstallationPage.tsx

@@ -0,0 +1,23 @@
+import { Route, Routes } from "react-router-dom";
+import Groups from "../Groups/Groups";
+import ModeButtons from "../Layout/ModeButtons";
+import Installations from "./Installations";
+import routes from "../../routes.json";
+import { Grid } from "@mui/material";
+
+const InstallationPage = () => {
+  return (
+    <>
+      <Grid container spacing={2}>
+        <Grid item xs={3}>
+          <ModeButtons />
+        </Grid>
+      </Grid>
+      <Routes>
+        <Route path={routes.tree + "*"} element={<Groups />} />
+        <Route path={routes.list + "*"} element={<Installations />} />
+      </Routes>
+    </>
+  );
+};
+export default InstallationPage;

typescript/Frontend/src/components/Installations/InstallationTabs.tsx

@@ -2,17 +2,18 @@ import * as React from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
-import { Link } from "react-router-dom";
+import { Link, Routes } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
+import { styled } from "@mui/material";
+import { AntTabs, StyledTab } from "../../util/installation.util";
 
 const InstallationTabs = () => {
   const routeMatch = useRouteMatch([
-    routes.installations + routes.installation + ":id",
+    routes.installations + routes.list + routes.installation + ":id",
-    routes.installations + routes.alarms + ":id",
+    routes.installations + routes.list + routes.alarms + ":id",
-    routes.installations + routes.users + ":id",
+    routes.installations + routes.list + routes.log + ":id",
-    routes.installations + routes.log + ":id",
   ]);
 
   const id = routeMatch?.params?.id;
@@ -22,47 +23,40 @@ const InstallationTabs = () => {
     return (
       <Box sx={{ width: "100%" }}>
         <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-          <Tabs
+          <AntTabs
             value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
             aria-label="basic tabs example"
           >
-            <Tab
+            <StyledTab
               label={intl.formatMessage({
                 id: "installation",
                 defaultMessage: "Installation",
               })}
-              value={routes.installations + routes.installation + ":id"}
+              value={
+                routes.installations + routes.list + routes.installation + ":id"
+              }
               component={Link}
               to={routes.installation + id}
             />
-            <Tab
+            <StyledTab
               label={intl.formatMessage({
                 id: "alarms",
                 defaultMessage: "Alarms",
               })}
-              value={routes.installations + routes.alarms + ":id"}
+              value={routes.installations + routes.list + routes.alarms + ":id"}
               component={Link}
               to={routes.alarms + id}
             />
-            <Tab
+            <StyledTab
-              label={intl.formatMessage({
-                id: "users",
-                defaultMessage: "Users",
-              })}
-              value={routes.installations + routes.users + ":id"}
-              component={Link}
-              to={routes.users + id}
-            />
-            <Tab
               label={intl.formatMessage({
                 id: "log",
                 defaultMessage: "Log",
               })}
-              value={routes.installations + routes.log + ":id"}
+              value={routes.installations + routes.list + routes.log + ":id"}
               component={Link}
               to={routes.log + id}
             />
-          </Tabs>
+          </AntTabs>
         </Box>
       </Box>
     );

typescript/Frontend/src/components/Installations/Installations.tsx

@@ -3,21 +3,20 @@ import { Container } from "@mui/system";
 import { Routes, Route } from "react-router";
 import NavigationButtons from "../Layout/NavigationButtons";
 import Sidebar from "../Layout/Sidebar";
-import BasicTable from "../Layout/Table";
 import Alarms from "./Alarms";
-import Installation from "./Installation";
 import InstallationTabs from "./InstallationTabs";
 import Log from "./Log";
 import routes from "../../routes.json";
 import InstallationContextProvider from "../Context/InstallationContextProvider";
+import Detail from "../Layout/Detail";
+import { I_Installation } from "../../util/types";
+import InstallationForm from "./InstallationForm";
 
 const Installations = () => {
   return (
     <InstallationContextProvider>
-      <Container maxWidth="xl">
+      <Grid container spacing={2}>
-        <Grid container spacing={4}>
         <Grid item xs={3}>
-            <NavigationButtons />
           <Sidebar />
         </Grid>
         <Grid item xs={9}>
@@ -25,16 +24,19 @@ const Installations = () => {
           <Routes>
             <Route
               path={routes.installation + ":id"}
-                element={<Installation />}
+              element={
+                <Detail<I_Installation>
+                  route="/GetInstallationById?id="
+                  formComponent={InstallationForm}
+                />
+              }
               index
             />
             <Route path={routes.alarms + ":id"} element={<Alarms />} />
-              <Route path={routes.users + ":id"} element={<BasicTable />} />
             <Route path={routes.log + ":id"} element={<Log />} />
           </Routes>
         </Grid>
       </Grid>
-      </Container>
     </InstallationContextProvider>
   );
 };

typescript/Frontend/src/components/Layout/Detail.tsx

@@ -1,22 +1,27 @@
-import { Alert, Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Alert } from "@mui/material";
 import { AxiosError } from "axios";
-import { useEffect, useState } from "react";
+import { useState, useEffect, FC } from "react";
 import { useParams } from "react-router-dom";
-import CustomerForm from "./CustomerForm";
 import axiosConfig from "../../config/axiosConfig";
-import { I_Installation } from "../../util/types";
+export interface I_FormProps<T> {
-import LocationForm from "../Groups/LocationForm";
+  values: T;
-
+  id: string;
-const Installation = () => {
+}
+interface I_DetailProps<T> {
+  formComponent: FC<I_FormProps<T>>;
+  route: string;
+}
+const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
   const { id } = useParams();
-  const [values, setValues] = useState<I_Installation>();
+  const { formComponent: FormComponent, route } = props;
+  const [values, setValues] = useState<T>();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<AxiosError>();
 
   useEffect(() => {
     setLoading(true);
     axiosConfig
-      .get("/GetInstallationById?id=" + id)
+      .get(route + id)
       .then((res) => {
         setValues(res.data);
         setLoading(false);
@@ -25,15 +30,10 @@ const Installation = () => {
         setError(err);
         setLoading(false);
       });
-  }, [id]);
+  }, [id, route]);
 
   if (values && values.id && values.id.toString() === id) {
-    return (
+    return <FormComponent values={values} id={id} />;
-      <Box sx={{ py: 3 }}>
-        <CustomerForm values={values} id={id} />
-        <LocationForm parentId={values.parentId} />
-      </Box>
-    );
   } else if (loading) {
     return (
       <Box
@@ -52,4 +52,4 @@ const Installation = () => {
   return null;
 };
 
-export default Installation;
+export default Detail;

typescript/Frontend/src/components/Layout/LanguageSelect.tsx

@@ -14,10 +14,10 @@ const LanguageSelect = (props: LanguageSelectProps) => {
       label="Age"
       onChange={(e) => props.setLanguage(e.target.value)}
     >
-      <MenuItem value="en">
+      <MenuItem value="EN">
         <FormattedMessage id="english" defaultMessage="English" />
       </MenuItem>
-      <MenuItem value="de">
+      <MenuItem value="DE">
         <FormattedMessage id="german" defaultMessage="German" />
       </MenuItem>
     </Select>

typescript/Frontend/src/components/Layout/ModeButtons.tsx

@@ -0,0 +1,59 @@
+import { Link } from "react-router-dom";
+import useRouteMatch from "../../hooks/useRouteMatch";
+import routes from "../../routes.json";
+import ListIcon from "@mui/icons-material/List";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
+import { AntTabs, StyledTab } from "../../util/installation.util";
+
+const ModeButtons = () => {
+  const routeMatch = useRouteMatch([
+    routes.installations + routes.tree + "*",
+    routes.installations + routes.list + "*",
+  ]);
+
+  return (
+    <>
+      <AntTabs
+        value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
+        aria-label="basic tabs example"
+      >
+        <StyledTab
+          icon={<ListIcon />}
+          value={routes.installations + routes.list + "*"}
+          component={Link}
+          to={routes.list}
+        />
+        <StyledTab
+          icon={<AccountTreeIcon />}
+          value={routes.installations + routes.tree + "*"}
+          component={Link}
+          to={routes.tree}
+        />
+      </AntTabs>
+      {/*   <ToggleButtonGroup
+        color="primary"
+        value={routeMatch?.pattern?.path}
+        exclusive
+        sx={{ mb: 1 }}
+        size="small"
+      >
+        <ToggleButton
+          value={routes.installations + routes.list + "*"}
+          component={Link}
+          to={routes.list}
+        >
+          <ListIcon />
+        </ToggleButton>
+        <ToggleButton
+          value={routes.installations + routes.tree + "*"}
+          component={Link}
+          to={routes.tree}
+        >
+          <AccountTreeIcon />
+        </ToggleButton>
+      </ToggleButtonGroup> */}
+    </>
+  );
+};
+
+export default ModeButtons;

typescript/Frontend/src/components/Layout/NavigationButtons.tsx

@@ -7,7 +7,7 @@ import routes from "../../routes.json";
 const NavigationButtons = () => {
   const routeMatch = useRouteMatch([
     routes.installations + "*",
-    routes.groups + "*",
+    routes.users + "*",
   ]);
 
   return (
@@ -16,23 +16,21 @@ const NavigationButtons = () => {
       value={routeMatch?.pattern?.path}
       exclusive
       sx={{ mb: 1 }}
+      fullWidth
     >
       <ToggleButton
         value={routes.installations + "*"}
         component={Link}
         to={routes.installations}
       >
-        <FormattedMessage
+        <FormattedMessage id="installations" defaultMessage="Installations" />
-          id="allInstallations"
-          defaultMessage="All installations"
-        />
       </ToggleButton>
       <ToggleButton
-        value={routes.groups + "*"}
+        value={routes.users + "*"}
         component={Link}
-        to={routes.groups}
+        to={routes.users}
       >
-        <FormattedMessage id="groups" defaultMessage="Groups" />
+        <FormattedMessage id="users" defaultMessage="Users" />
       </ToggleButton>
     </ToggleButtonGroup>
   );

typescript/Frontend/src/components/Layout/Sidebar.tsx

@@ -20,6 +20,7 @@ const Sidebar = () => {
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
+
       <InstallationList searchQuery={searchQuery} />
     </>
   );

typescript/Frontend/src/components/Users/UserForm.tsx

@@ -0,0 +1,87 @@
+import { Alert, Button, Grid, Snackbar } from "@mui/material";
+import { useFormik } from "formik";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import axiosConfig from "../../config/axiosConfig";
+import { I_User } from "../../util/user.util";
+import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
+
+interface I_UserFormProps {
+  values: I_User;
+  id: string;
+}
+const UserForm = (props: I_UserFormProps) => {
+  const { values, id } = props;
+  const [open, setOpen] = useState(false);
+
+  const intl = useIntl();
+
+  const formik = useFormik({
+    initialValues: {
+      email: values.email,
+      information: values.information,
+    },
+    onSubmit: (formikValues) => {
+      axiosConfig
+        .put("/UpdateUser", {
+          ...formikValues,
+          id: id,
+        })
+        .then(() => {
+          setOpen(true);
+        });
+    },
+  });
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <InnovenergyTextfield
+        id="name-textfield"
+        label={intl.formatMessage({
+          id: "email",
+          defaultMessage: "Email",
+        })}
+        name="email"
+        value={formik.values.email}
+        handleChange={formik.handleChange}
+      />
+      <InnovenergyTextfield
+        id="region-textfield"
+        label={intl.formatMessage({
+          id: "Information",
+          defaultMessage: "Information",
+        })}
+        name="information"
+        value={formik.values.information}
+        handleChange={formik.handleChange}
+      />
+      <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
+        <Button variant="outlined" type="submit">
+          <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
+        </Button>
+      </Grid>
+      <Snackbar
+        open={open}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+        autoHideDuration={6000}
+        onClose={handleClose}
+      >
+        <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
+          <FormattedMessage
+            id="updatedSuccessfully"
+            defaultMessage="Updated successfully"
+          />
+        </Alert>
+      </Snackbar>
+    </form>
+  );
+};
+
+export default UserForm;

typescript/Frontend/src/components/Users/UserList.tsx

@@ -0,0 +1,77 @@
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import { Divider } from "@mui/material";
+import { Link } from "react-router-dom";
+import useRouteMatch from "../../hooks/useRouteMatch";
+import routes from "../../routes.json";
+import { Fragment, useContext } from "react";
+import { I_Installation } from "../../util/types";
+import { UserContext } from "../Context/UserContextProvider";
+
+const getPathWithoutId = (path?: string) => {
+  if (path) {
+    const splitString = path.split(":");
+    return splitString[0];
+  }
+  return routes.user;
+};
+
+const filterData = (
+  searchQuery: string,
+  data: I_Installation[] | undefined
+) => {
+  if (data) {
+    return data.filter(
+      (installation) =>
+        installation.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        installation.location.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }
+  return data;
+};
+
+const UserList = () => {
+  const { availableUsers } = useContext(UserContext);
+
+  const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
+
+  if (availableUsers && availableUsers.length) {
+    return (
+      <List
+        sx={{
+          width: "100%",
+          bgcolor: "background.paper",
+          position: "relative",
+          overflow: "auto",
+          maxHeight: 400,
+          py: 0,
+          mt: 1,
+        }}
+        component="nav"
+        aria-labelledby="nested-list-subheader"
+      >
+        {availableUsers.map((user) => {
+          return (
+            <Fragment key={user.id}>
+              <Link
+                to={getPathWithoutId(routeMatch?.pattern?.path) + user.id}
+                style={{ textDecoration: "none", color: "black" }}
+              >
+                <ListItemButton
+                  selected={user.id === Number(routeMatch?.params.id)}
+                >
+                  <ListItemText primary={user.name} />
+                </ListItemButton>
+              </Link>
+              <Divider />
+            </Fragment>
+          );
+        })}
+      </List>
+    );
+  }
+  return null;
+};
+
+export default UserList;

typescript/Frontend/src/components/Users/UserTabs.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import { Link } from "react-router-dom";
+import routes from "../../routes.json";
+import useRouteMatch from "../../hooks/useRouteMatch";
+import { useIntl } from "react-intl";
+
+const UserTabs = () => {
+  const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
+
+  const id = routeMatch?.params?.id;
+  const intl = useIntl();
+
+  if (id) {
+    return (
+      <Box sx={{ width: "100%" }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs
+            value={routeMatch?.pattern?.path ?? routes.user + ":id"}
+            aria-label="basic tabs example"
+          >
+            <Tab
+              label={intl.formatMessage({
+                id: "user",
+                defaultMessage: "User",
+              })}
+              value={routes.users + routes.user + ":id"}
+              component={Link}
+              to={routes.user + id}
+            />
+          </Tabs>
+        </Box>
+      </Box>
+    );
+  }
+  return null;
+};
+
+export default UserTabs;

typescript/Frontend/src/components/Users/Users.tsx

@@ -0,0 +1,39 @@
+import { Grid } from "@mui/material";
+import { Container } from "@mui/system";
+import { Routes, Route } from "react-router";
+import routes from "../../routes.json";
+import { I_User } from "../../util/user.util";
+import UserContextProvider from "../Context/UserContextProvider";
+import Detail from "../Layout/Detail";
+import UserForm from "./UserForm";
+import UserList from "./UserList";
+import UserTabs from "./UserTabs";
+
+const Users = () => {
+  return (
+    <UserContextProvider>
+      <Grid container spacing={2}>
+        <Grid item xs={3}>
+          <UserList />
+        </Grid>
+        <Grid item xs={9}>
+          <UserTabs />
+          <Routes>
+            <Route
+              path={routes.user + ":id"}
+              element={
+                <Detail<I_User>
+                  route="/GetUserById?id="
+                  formComponent={UserForm}
+                />
+              }
+              index
+            />
+          </Routes>
+        </Grid>
+      </Grid>
+    </UserContextProvider>
+  );
+};
+
+export default Users;

typescript/Frontend/src/routes.json

@@ -1,10 +1,14 @@
 {
   "installation": "installation/",
   "alarms": "alarms/",
-  "users": "users/",
+  "users": "/users/",
   "log": "log/",
   "installations": "/installations/",
   "groups": "/groups/",
   "group": "group/",
-  "folder": "folder/"
+  "folder": "folder/",
+  "manageAccess": "manageAccess/",
+  "user": "user/",
+  "tree": "tree/",
+  "list": "list/"
 }

typescript/Frontend/src/util/installation.util.tsx

@@ -0,0 +1,46 @@
+import { styled, Tab, Tabs } from "@mui/material";
+
+export const StyledTab = styled((props: any) => (
+  <Tab disableRipple {...props} />
+))(({ theme }) => ({
+  textTransform: "none",
+  fontWeight: theme.typography.fontWeightRegular,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  color: "#0d6efd",
+  background: "0 0",
+  border: "1px solid transparent",
+  borderTopLeftRadius: "0.25rem",
+  borderTopRightRadius: "0.25rem",
+  padding: ".5rem 1rem",
+  textDecoration: "none",
+  transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
+  "&.Mui-selected": {
+    color: "#495057",
+    backgroundColor: "#fff",
+    borderColor: "#dee2e6 #dee2e6 #fff",
+    marginBottom: "-2px",
+  },
+  "&.Mui-focusVisible": {
+    backgroundColor: "rgba(100, 95, 228, 0.32)",
+  },
+}));
+
+export const AntTabs = styled(Tabs)({
+  borderBottom: "1px solid #dee2e6",
+
+  overflow: "visible!important",
+  "& div.MuiTabs-scroller": {
+    overflow: "visible!important",
+  },
+  "&.Mui-selected": {
+    color: "#495057",
+    backgroundColor: "red",
+    borderColor: `#dee2e6 #dee2e6 #fff`,
+  },
+  "& .MuiTabs-indicator": {
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+  },
+});

typescript/Frontend/src/util/user.util.tsx

@@ -1,4 +1,4 @@
-export interface User {
+export interface I_User {
   email: string;
   hasWriteAccess: boolean;
   id: number;
@@ -14,7 +14,7 @@ export interface User {
 export interface UserWithInheritedAccess {
   folderId: number;
   folderName: string;
-  user: User;
+  user: I_User;
 }
 
 export const filterDuplicateUsers = (data: any[]) => {