add loading indicators, clean up code, add user tree prototype

typescript/Frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
         "@mui/icons-material": "^5.11.0",
+        "@mui/lab": "^5.0.0-alpha.120",
         "@mui/material": "^5.11.7",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -3256,6 +3257,79 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.120",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.120.tgz",
+      "integrity": "sha512-vjlF2jTKSZnNxtUO0xxHEDfpL5cG0LLNRsfKv8TYOiPs0Q1bbqO3YfqJsqxv8yh+wx7EFZc8lwJ4NSAQdenW3A==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@mui/base": "5.0.0-alpha.118",
+        "@mui/system": "^5.11.9",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.9",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab/node_modules/@mui/base": {
+      "version": "5.0.0-alpha.118",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.118.tgz",
+      "integrity": "sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.9",
+        "@popperjs/core": "^2.11.6",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.11.8",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.8.tgz",
@@ -3301,12 +3375,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.11.7",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.9.tgz",
-      "integrity": "sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA==",
+      "integrity": "sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
-        "@mui/utils": "^5.11.7",
+        "@mui/utils": "^5.11.9",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3327,11 +3401,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.11.8",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.8.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.9.tgz",
-      "integrity": "sha512-iSpZp9AoeictsDi5xAQ4PGXu7mKtQyzMl7ZaWpHIGMFpsNnfY3NQNg+wkj/gpsAZ+Zg+IIyD+t+ig71Kr9fa0w==",
+      "integrity": "sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@emotion/cache": "^11.10.5",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -3358,15 +3432,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.11.8",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.8.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.9.tgz",
-      "integrity": "sha512-zhroUcxAw2x/dISBJKhGbD70DOYCwMFRo7o/LUYTiUfQkfmLhRfEf1bopWgY9nYstn7QOxOq9fA3aR3pHrUTbw==",
+      "integrity": "sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
-        "@mui/private-theming": "^5.11.7",
+        "@mui/private-theming": "^5.11.9",
-        "@mui/styled-engine": "^5.11.8",
+        "@mui/styled-engine": "^5.11.9",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.7",
+        "@mui/utils": "^5.11.9",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -3410,11 +3484,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.11.7",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.9.tgz",
-      "integrity": "sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==",
+      "integrity": "sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -20422,6 +20496,38 @@
         "@babel/runtime": "^7.20.6"
       }
     },
+    "@mui/lab": {
+      "version": "5.0.0-alpha.120",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.120.tgz",
+      "integrity": "sha512-vjlF2jTKSZnNxtUO0xxHEDfpL5cG0LLNRsfKv8TYOiPs0Q1bbqO3YfqJsqxv8yh+wx7EFZc8lwJ4NSAQdenW3A==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@mui/base": "5.0.0-alpha.118",
+        "@mui/system": "^5.11.9",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.9",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "@mui/base": {
+          "version": "5.0.0-alpha.118",
+          "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.118.tgz",
+          "integrity": "sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==",
+          "requires": {
+            "@babel/runtime": "^7.20.13",
+            "@emotion/is-prop-valid": "^1.2.0",
+            "@mui/types": "^7.2.3",
+            "@mui/utils": "^5.11.9",
+            "@popperjs/core": "^2.11.6",
+            "clsx": "^1.2.1",
+            "prop-types": "^15.8.1",
+            "react-is": "^18.2.0"
+          }
+        }
+      }
+    },
     "@mui/material": {
       "version": "5.11.8",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.8.tgz",
@@ -20442,36 +20548,36 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.11.7",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.9.tgz",
-      "integrity": "sha512-XzRTSZdc8bhuUdjablTNv3kFkZ/XIMlKkOqqJCU0G8W3tWGXpau2DXkafPd1ddjPhF9zF3qLKNGgKCChYItjgA==",
+      "integrity": "sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
-        "@mui/utils": "^5.11.7",
+        "@mui/utils": "^5.11.9",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.11.8",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.8.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.9.tgz",
-      "integrity": "sha512-iSpZp9AoeictsDi5xAQ4PGXu7mKtQyzMl7ZaWpHIGMFpsNnfY3NQNg+wkj/gpsAZ+Zg+IIyD+t+ig71Kr9fa0w==",
+      "integrity": "sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@emotion/cache": "^11.10.5",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/system": {
-      "version": "5.11.8",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.8.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.9.tgz",
-      "integrity": "sha512-zhroUcxAw2x/dISBJKhGbD70DOYCwMFRo7o/LUYTiUfQkfmLhRfEf1bopWgY9nYstn7QOxOq9fA3aR3pHrUTbw==",
+      "integrity": "sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
-        "@mui/private-theming": "^5.11.7",
+        "@mui/private-theming": "^5.11.9",
-        "@mui/styled-engine": "^5.11.8",
+        "@mui/styled-engine": "^5.11.9",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.7",
+        "@mui/utils": "^5.11.9",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -20484,11 +20590,11 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.11.7",
+      "version": "5.11.9",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.9.tgz",
-      "integrity": "sha512-8uyNDeVHZA804Ego20Erv8TpxlbqTe/EbhTI2H1UYr4/RiIbBprat8W4Qqr2UQIsC/b3DLz+0RQ6R/E5BxEcLA==",
+      "integrity": "sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",

typescript/Frontend/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.120",
     "@mui/material": "^5.11.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

typescript/Frontend/src/App.tsx

@@ -1,8 +1,7 @@
 import useToken from "./hooks/useToken";
 import Login from "./Login";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Box, Grid, Divider, createTheme, ThemeProvider } from "@mui/material";
+import { Box, Grid, Divider } from "@mui/material";
-import InstallationList from "./components/InstallationList";
 import BasicTable from "./components/Table";
 import InstallationTabs from "./components/InstallationTabs";
 import Alarms from "./routes/Alarms";
@@ -17,20 +16,13 @@ import LanguageSelect from "./components/LanguageSelect";
 import LogoutButton from "./components/LogoutButton";
 import NavigationButtons from "./components/NavigationButtons";
 import UserList from "./components/UserTree";
+import Sidebar from "./components/Sidebar";
 
 const App = () => {
   const { token, setToken, removeToken } = useToken();
   const [language, setLanguage] = useState("en");
   const [currentView, setCurrentView] = useState("installations");
 
-  const theme = createTheme({
-    palette: {
-      primary: {
-        main: "#F59100",
-      },
-    },
-  });
-
   const getTranslations = () => {
     if (language === "de") {
       return de;
@@ -44,7 +36,6 @@ const App = () => {
 
   return (
     <BrowserRouter>
-      <ThemeProvider theme={theme}>
       <IntlProvider
         messages={getTranslations()}
         locale={language}
@@ -61,11 +52,7 @@ const App = () => {
                 currentView={currentView}
                 setCurrentView={setCurrentView}
               />
-                {currentView === "installations" ? (
+              {currentView === "installations" ? <Sidebar /> : <UserList />}
-                  <InstallationList />
-                ) : (
-                  <UserList />
-                )}
             </Grid>
             <Grid
               item
@@ -87,10 +74,7 @@ const App = () => {
                       element={<InstallationDetail />}
                     />
                     <Route path={routes.alarmsWithId} element={<Alarms />} />
-                      <Route
+                    <Route path={routes.usersWithId} element={<BasicTable />} />
-                        path={routes.usersWithId}
-                        element={<BasicTable />}
-                      />
                     <Route path={routes.logWithId} element={<Log />} />
                   </Routes>
                 </>
@@ -99,7 +83,6 @@ const App = () => {
           </Grid>
         </Box>
       </IntlProvider>
-      </ThemeProvider>
     </BrowserRouter>
   );
 };

typescript/Frontend/src/components/CustomerForm.tsx

@@ -1,9 +1,9 @@
-import { Alert, Button, Grid, InputLabel, Snackbar } from "@mui/material";
+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_Installation } from "../util/installation.util";
+import { I_Installation } from "../util/types";
 import InnovenergyTextfield from "./InnovenergyTextfield";
 
 interface I_CustomerFormProps {

typescript/Frontend/src/components/InstallationList.tsx

@@ -1,14 +1,17 @@
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import { Divider, TextField } from "@mui/material";
+import { CircularProgress, Divider, Grid } from "@mui/material";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../hooks/useRouteMatch";
 import routes from "../routes.json";
 import { Fragment, useEffect, useState } from "react";
-import { I_Installation } from "../util/installation.util";
+import { I_Installation } from "../util/types";
 import axiosConfig from "../config/axiosConfig";
-import { useIntl } from "react-intl";
+
+interface InstallationListProps {
+  searchQuery: string;
+}
 
 const getPathWithoutId = (path?: string) => {
   if (path) {
@@ -32,11 +35,10 @@ const filterData = (
   return data;
 };
 
-const InstallationList = () => {
+const InstallationList = (props: InstallationListProps) => {
   const [data, setData] = useState<I_Installation[]>();
-  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(false);
-  const intl = useIntl();
+  const filteredData = filterData(props.searchQuery, data);
-  const filteredData = filterData(searchQuery, data);
 
   const routeMatch = useRouteMatch([
     routes.installationWithId,
@@ -46,24 +48,21 @@ const InstallationList = () => {
   ]);
 
   useEffect(() => {
+    setLoading(true);
     axiosConfig.get("/GetAllInstallations", {}).then((res) => {
       setData(res.data);
+      setLoading(false);
     });
   }, []);
 
   return (
     <>
-      <TextField
+      {loading && (
-        id="outlined-search"
+        <Grid container justifyContent="center" width="100%">
-        label={intl.formatMessage({
+          <CircularProgress sx={{ m: 6 }} />
-          id: "search",
+        </Grid>
-          defaultMessage: "Search",
+      )}
-        })}
+      {data && (
-        type="search"
-        fullWidth
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-      />
         <List
           sx={{
             width: "100%",
@@ -80,7 +79,9 @@ const InstallationList = () => {
           {filteredData?.map((installation) => (
             <Fragment key={installation.id}>
               <Link
-              to={getPathWithoutId(routeMatch?.pattern?.path) + installation.id}
+                to={
+                  getPathWithoutId(routeMatch?.pattern?.path) + installation.id
+                }
                 style={{ textDecoration: "none", color: "black" }}
               >
                 <ListItemButton
@@ -95,6 +96,7 @@ const InstallationList = () => {
             </Fragment>
           ))}
         </List>
+      )}
     </>
   );
 };

typescript/Frontend/src/components/Sidebar.tsx

@@ -0,0 +1,28 @@
+import { TextField } from "@mui/material";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import InstallationList from "./InstallationList";
+
+const Sidebar = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const intl = useIntl();
+
+  return (
+    <>
+      <TextField
+        id="outlined-search"
+        label={intl.formatMessage({
+          id: "search",
+          defaultMessage: "Search",
+        })}
+        type="search"
+        fullWidth
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+      <InstallationList searchQuery={searchQuery} />
+    </>
+  );
+};
+
+export default Sidebar;

typescript/Frontend/src/components/UserTree.tsx

@@ -1,5 +1,137 @@
+import TreeView from "@mui/lab/TreeView";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { ReactNode } from "react";
+import { TreeItem } from "@mui/lab";
+import { I_Folder, I_Installation } from "../util/types";
 const UserList = () => {
-  return <div>Userlist</div>;
+  const data: I_Folder[] = [
+    {
+      id: 107,
+      name: "Bruen-Tromp",
+      information: "05 Burrows Terrace",
+      parentId: 75,
+      type: "Folder",
+      children: [
+        {
+          id: 100,
+          name: "Sporer and Sons",
+          information: "820 Helena Terrace",
+          parentId: 107,
+          type: "Folder",
+        },
+        {
+          id: 101,
+          name: "Hahn-Heaney",
+          information: "144 Di Loreto Center",
+          parentId: 107,
+          type: "Folder",
+        },
+      ],
+    },
+    {
+      id: 125,
+      name: "Sporer and Sons",
+      information: "820 Helena Terrace",
+      parentId: 107,
+      type: "Folder",
+      children: [
+        {
+          location: "Säffle",
+          region: "SG",
+          country: "SE",
+          orderNumbers: "1LWDGmdXCLmCRFJHTKwcmpoP7bcNeaWJuj",
+          lat: 0,
+          long: 0,
+          s3Bucket: "",
+          id: 632,
+          name: "Nikolas Scholz",
+          information: "",
+          parentId: 125,
+          type: "Installation",
+        },
+        {
+          location: "Krasnoye",
+          region: "ZH",
+          country: "RU",
+          orderNumbers: "1M4Rw8toMSJn3d8ULouDd1gYKzANFXeMWh",
+          lat: 0,
+          long: 0,
+          s3Bucket: "",
+          id: 248,
+          name: "Judye Goldson",
+          information: "",
+          parentId: 125,
+          type: "Installation",
+        },
+        {
+          id: 103,
+          name: "Bruen-Tromp",
+          information: "05 Burrows Terrace",
+          parentId: 75,
+          type: "Folder",
+          children: [
+            {
+              id: 100,
+              name: "Sporer and Sons",
+              information: "820 Helena Terrace",
+              parentId: 107,
+              type: "Folder",
+            },
+            {
+              id: 101,
+              name: "Hahn-Heaney",
+              information: "144 Di Loreto Center",
+              parentId: 107,
+              type: "Folder",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 135,
+      name: "Hahn-Heaney",
+      information: "144 Di Loreto Center",
+      parentId: 107,
+      type: "Folder",
+    },
+  ];
+
+  const instanceOfFolder = (object: any): object is I_Folder => {
+    return "children" in object;
+  };
+
+  const getNodes = (element: I_Folder | I_Installation): null | ReactNode => {
+    if (instanceOfFolder(element)) {
+      return element.children ? renderTree(element.children) : null;
+    }
+    return null;
+  };
+
+  const renderTree = (data: (I_Folder | I_Installation)[]): ReactNode => {
+    return data.map((element) => {
+      return (
+        <TreeItem
+          key={element.id}
+          nodeId={element.id.toString()}
+          label={element.name}
+        >
+          {getNodes(element)}
+        </TreeItem>
+      );
+    });
+  };
+  return (
+    <TreeView
+      aria-label="rich object"
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 300, flexGrow: 1, maxWidth: 400 }}
+    >
+      {renderTree(data)}
+    </TreeView>
+  );
 };
 
 export default UserList;

typescript/Frontend/src/index.tsx

@@ -1,16 +1,28 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
+import { createTheme, ThemeProvider } from "@mui/material";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#F59100",
+    },
+  },
+});
+
 root.render(
   <React.StrictMode>
+    <ThemeProvider theme={theme}>
       <App />
-  </React.StrictMode>,
+    </ThemeProvider>
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

typescript/Frontend/src/routes.json

@@ -6,5 +6,6 @@
   "usersWithId": "/users/:id",
   "users": "/users/",
   "logWithId": "/log/:id",
-    "log": "/log/"
+  "log": "/log/",
+  "installations": "/installations"
 }

typescript/Frontend/src/routes/Installation.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import CustomerForm from "../components/CustomerForm";
 import axiosConfig from "../config/axiosConfig";
-import { I_Installation } from "../util/installation.util";
+import { I_Installation } from "../util/types";
 
 const InstallationDetail = () => {
   const { id } = useParams();
@@ -13,8 +13,6 @@ const InstallationDetail = () => {
   const [error, setError] = useState<AxiosError>();
 
   useEffect(() => {
-    if (id !== "undefined") {
-      console.log(id);
     setLoading(true);
     axiosConfig
       .get("/GetInstallationById?id=" + id)
@@ -26,7 +24,6 @@ const InstallationDetail = () => {
         setError(err);
         setLoading(false);
       });
-    }
   }, [id]);
 
   if (values && values.id && values.id.toString() === id) {
@@ -36,7 +33,13 @@ const InstallationDetail = () => {
       </Box>
     );
   } else if (loading) {
-    return <CircularProgress sx={{ m: 2 }} />;
+    return (
+      <Box
+        sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
+      >
+        <CircularProgress sx={{ m: 2 }} />
+      </Box>
+    );
   } else if (error) {
     return (
       <Alert severity="error" sx={{ mt: 1 }}>

typescript/Frontend/src/util/types.tsx

@@ -17,3 +17,12 @@ export interface I_Installation {
   information: string;
   parentId: number;
 }
+
+export interface I_Folder {
+  id: number;
+  name: string;
+  information: string;
+  parentId: number;
+  type: string;
+  children?: (I_Installation | I_Folder)[];
+}