dashboard

frontend/src/layouts/Main/Dashboard.module.css

@@ -0,0 +1,36 @@
+
+* {
+  outline: 1px solid red;
+}
+.wrapper {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    height: 100vh;
+}
+.left_sidebar{
+    display: grid;
+    align-content: start;
+    gap:10px;
+}
+
+.header {
+    display: grid;
+}
+
+.content {
+    display: grid;
+}
+
+.wrapper_1 {
+    display: grid;
+    grid-template-rows: 5vh 1fr;
+    height: 100%;
+}
+.wrapper_2 {
+    display: grid;
+    grid-template-columns: 70% 1fr;
+    height: 100%;
+}
+.right_sidebar{
+    display: grid;
+}

frontend/src/layouts/Main/Dashboard.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import styles from "./Dashboard.module.css"
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { fetchUser } from "../../api/UserAPI/User";
+import { logout } from "../../api/token";
+
+
+export function MainLayout({sidebar, header, content, right_sidebar }: { sidebar: ReactNode;header: ReactNode; content: ReactNode; right_sidebar: ReactNode }) {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(true);
+    const [permissions, setPermissions] = useState<Set<string>>(new Set());
+
+    useEffect(function () {
+        async function load() {
+            try {
+                const user = await fetchUser();
+
+                const permissions = new Set<string>();
+
+                for (const p of user.direct_permissions) {
+                    permissions.add(p.permission);
+                }
+                for (const g of user.group) {
+                    for (const p of g.permissions) {
+                        permissions.add(p.permission);
+                    }
+                }
+                setPermissions(permissions);
+                setLoading(false);
+            } catch {
+                navigate("/");
+            }
+        }
+        load();
+    }, [navigate]);
+    if (loading) {
+        return null;
+    }
+    async function handleLogout() {
+        await logout();
+        navigate("/");
+    }
+
+    return (
+
+        <div className={styles.wrapper}>
+            <div className={styles.left_sidebar}>
+                {sidebar}
+            </div>
+            <div className={styles.wrapper_1}>
+                <div className={styles.header}>
+                    {header}
+                    {/* {permissions.has("admin") && <div><p>test</p></div>} */}
+                    <button onClick={handleLogout}>logout</button>
+                </div>
+                <div className={styles.wrapper_2}>
+                    <div className={styles.content}>
+                        {content}
+                    </div>
+                    <div className={styles.right_sidebar}>
+                        {right_sidebar}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}