Merge branch 'dev' into features/notifications

# Conflicts:
#	package-lock.json
#	package.json
#	src/components/Header/Header.jsx

src/pages/Admin/AdminPage.jsx

@@ -0,0 +1,35 @@
+import { useState, useContext } from "react";
+import styles from "./AdminPage.module.css";
+import ParticipationChart from "../../components/chart/ParticipationChart.jsx";
+import IncompleteEvents from "../../components/IncompleteEvent/IncompleteEvent.jsx";
+import PendingMembers from "../../components/PendingMembers/PendingMembers.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import { useNavigate } from "react-router";
+
+
+function AdminPage() {
+
+    const { user } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    const [selected, setSelected] = useState("3");
+    const [participationRate] = useState(89);
+
+    if(!user.isAdmin) navigate("/");
+
+    return (
+        <div className={styles.container}>
+            <ParticipationChart
+                selected={selected}
+                setSelected={setSelected}
+                participationRate={participationRate}
+            />
+            <div className={styles.rightSection}>
+                <IncompleteEvents />
+                <PendingMembers />
+            </div>
+        </div>
+    );
+}
+
+export default AdminPage;

src/pages/Admin/AdminPage.module.css

@@ -0,0 +1,29 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  gap: 20px;
+}
+
+.rightSection {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media screen and (max-width: 760px) {
+  .container {
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+  }
+
+  .rightSection {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 15px;
+  }
+}