From 0c4ed678ab5e32d5a89fd7b21b06c4dbd59ab2ef Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 15 Feb 2024 01:11:39 +0100
Subject: [PATCH] Created the Overview.jsx

---
 .../states/Root/pages/Overview/Overview.jsx   | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 webui/src/states/Root/pages/Overview/Overview.jsx

diff --git a/webui/src/states/Root/pages/Overview/Overview.jsx b/webui/src/states/Root/pages/Overview/Overview.jsx
new file mode 100644
index 0000000..0a2bf9d
--- /dev/null
+++ b/webui/src/states/Root/pages/Overview/Overview.jsx
@@ -0,0 +1,43 @@
+import {
+    Box,
+    Button,
+    CircularProgress,
+    Stack,
+    Typography
+} from "@mui/material";
+import {ServerContext} from "@/common/contexts/Server";
+import {useContext, useState} from "react";
+import Server from "@/states/Root/pages/Overview/components/Server/index.js";
+import {CreationDialog} from "@/states/Root/pages/Overview/components/CreationDialog/CreationDialog.jsx";
+import {t} from "i18next";
+
+export const Overview = () => {
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const {server} = useContext(ServerContext);
+
+    return (
+        <>
+            <Stack direction="column" gap={2}>
+
+                <Stack direction="row" gap={2} alignItems="center" justifyContent="space-between">
+                    <Typography fontWeight={500} variant="h5">{t("server.overview")}</Typography>
+                    <Button variant="outlined" color="primary" onClick={() => setDialogOpen(true)}>{t("server.create")}</Button>
+                </Stack>
+
+                {server === null && (
+                    <Box alignItems="center" justifyContent="center" display="flex">
+                        <CircularProgress/>
+                    </Box>
+                )}
+
+                {dialogOpen && <CreationDialog dialogOpen={dialogOpen} setDialogOpen={setDialogOpen}/>}
+
+                {server !== null && server.map((server) => (
+                    <Server key={server.uuid} uuid={server.uuid} configuration={server.configuration}
+                            status={server.status}/>
+                ))}
+            </Stack>
+        </>
+    )
+}
\ No newline at end of file