dashboard

frontend/src/features/dashboard/components/Grid.module.css

@@ -0,0 +1,6 @@
+.grid {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}

frontend/src/features/dashboard/components/Grid.tsx

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import styles from "./Grid.module.css"
+
+export function Grid():ReactElement {
+
+    return (
+        <>
+        <div className={styles.grid}>
+            <p>Content is here</p>
+        </div>
+        </>
+    );
+}

frontend/src/features/dashboard/components/Header.module.css

@@ -0,0 +1,7 @@
+
+.profile {
+    display: grid;
+    justify-content: end;
+    align-items: center;
+    width: 100%;
+}

frontend/src/features/dashboard/components/Header.tsx

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import styles from "./Header.module.css"
+
+export function Header():ReactElement {
+
+    return (
+        <>
+        <div className={styles.profile}>
+            <p>profile</p>
+        </div>
+        </>
+    );
+}

frontend/src/features/dashboard/components/Right_sidebar.module.css

@@ -0,0 +1,6 @@
+.right_sidebar {
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    height: 100vh;
+}

frontend/src/features/dashboard/components/Right_sidebar.tsx

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import styles from "./Right_sidebar.module.css"
+
+export function Right_sidebar():ReactElement {
+
+    return (
+        <>
+        <div className={styles.right_sidebar}>
+            <p>right_sidebar</p>
+        </div>
+        </>
+    );
+}

frontend/src/features/dashboard/components/Sidebar.module.css

@@ -0,0 +1,14 @@
+.sidebar_elements{
+    display: grid;
+    align-content: start;
+    gap: 15px;
+}
+.logo {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+.p {
+    display: grid;
+    text-align: center;
+    place-items: center;
+}

frontend/src/features/dashboard/components/Sidebar.tsx

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+import styles from "./Sidebar.module.css"
+
+export function Sidebar():ReactElement {
+
+    return (
+        <>
+        <div className={styles.logo}>
+            <p className={styles.p}>logo</p>
+            <p className={styles.p}>Project name</p>
+        </div>
+        <div className={styles.sidebar_elements}>
+            <button>Dashboard</button>
+            <button>Excel</button>
+            <button>Papers</button>
+        </div>
+        </>
+    );
+}

frontend/src/index.css

@@ -6,8 +6,6 @@
 a:focus,a:active{outline: none;}
 nav,footer,header,aside{display: block;}
 html,body{
-  height:100%;width:100%;
-  padding: 30px;
   font-family: 'Manrope', sans-serif;
   user-select: none;
   font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}

frontend/src/layouts/Auth/AuthLayout.module.css

@@ -1,10 +1,9 @@
 .wrapper {
+    position: absolute;
+    inset: 30px;
     display: flex;
     flex-direction: row;
-    min-height: auto;
-    width: 100%;
     overflow: hidden;
-    height: 100%;
     box-shadow: 1px 1px 20px 1px rgba(68, 68, 68, 0.5);
     border-radius: 40px;
     border: 1px solid #444;

frontend/src/layouts/Auth/AuthLayout.tsx

@@ -1,28 +1,28 @@
 import type { ReactNode } from "react";
-import "./AuthLayout.css";
+import styles from "./AuthLayout.module.css";
-import logo from "../assets/LOGO.png";
+import logo from "../../assets/LOGO.png";
-import img_1 from "../assets/paper.png";
+import img_1 from "../../assets/paper.png";
-import img_2 from "../assets/PC.png";
+import img_2 from "../../assets/PC.png";
-import img_3 from "../assets/graphics.png";
+import img_3 from "../../assets/graphics.png";
 
 export function AuthLayout({ children }: { children: ReactNode }) {
     return (
-        <div className="wrapper">
+        <div className={styles.wrapper}>
-            <div className="left_side">
+            <div className={styles.left_side}>
-                <header className="header">
+                <header className={styles.header}>
-                    <div className="container">
+                    <div className={styles.container}>
-                        <div className="header_top">
+                        <div className={styles.header_top}>
-                        <img className="img_logo" src={logo} alt="LOGO" />
+                        <img className={styles.img_logo} src={logo} alt="LOGO" />
-                        <div className="header_text">
+                        <div className={styles.header_text}>
-                        <div className="header_title">
+                        <div className={styles.header_title}>
                             The DisExcel
                         </div>
-                        <div className="header_heading">
+                        <div className={styles.header_heading}>
                             Project
                         </div>
                         </div>
                         </div>
-                        <div className="header_bottom">
+                        <div className={styles.header_bottom}>
                             <p>
                                 Избавляем от ручной работы. <br />
                                 Переводим процессы из бумаги в Excel, <br />
@@ -31,69 +31,69 @@ export function AuthLayout({ children }: { children: ReactNode }) {
                         </div>
                     </div>
                 </header>
-                <main className="main">
+                <main className={styles.main}>
-                    <div className="contain">
+                    <div className={styles.contain}>
-                        <div className="main_items">
+                        <div className={styles.main_items}>
                             {/* 1 */}
-                            <div className="main_item">
+                            <div className={styles.main_item}>
-                                <img className="main_item_img" src={img_1} alt="img" />
+                                <img className={styles.main_item_img} src={img_1} alt="img" />
-                                <div className="main_item_title">Бумага</div>
+                                <div className={styles.main_item_title}>Бумага</div>
-                                <div className="main_item_p">
+                                <div className={styles.main_item_p}>
                                     Ручная работа, ошибки, потери
                                 </div>
                             </div>
-                            <div className="main_i"></div>
+                            <div className={styles.main_i}></div>
                             {/* 2 */}
-                            <div className="main_item">
+                            <div className={styles.main_item}>
-                                <img className="main_item_img" src={img_2} alt="img" />
+                                <img className={styles.main_item_img} src={img_2} alt="img" />
-                                <div className="main_item_title">Excel</div>
+                                <div className={styles.main_item_title}>Excel</div>
-                                <div className="main_item_p">
+                                <div className={styles.main_item_p}>
                                     Структура, формулы, автоматизация
                                 </div>
                             </div>
-                            <div className="main_i"></div>
+                            <div className={styles.main_i}></div>
                             {/* 3 */}
-                            <div className="main_item">
+                            <div className={styles.main_item}>
-                                <img className="main_item_img" src={img_3} alt="img" />
+                                <img className={styles.main_item_img} src={img_3} alt="img" />
-                                <div className="main_item_title">1С / Отчеты</div>
+                                <div className={styles.main_item_title}>1С / Отчеты</div>
-                                <div className="main_item_p">
+                                <div className={styles.main_item_p}>
                                     Готовые процессы, аналитика, контроль
                                 </div>
                             </div>
                         </div>
                     </div>
                 </main>
-                <section className="section">
+                <section className={styles.section}>
-                    <div className="section_items">
+                    <div className={styles.section_items}>
                         {/* 1 */}
-                        <div className="section_item">
+                        <div className={styles.section_item}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
                         <circle cx="24" cy="24" r="16" stroke="#087A55" strokeWidth="3"/>
                         <path d="M24 14v11l7 4" stroke="#087A55" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                         </svg>
                         Экономим <br /> время
                         </div>
-                        <div className="section_line"></div>
+                        <div className={styles.section_line}></div>
                         {/* 2 */}
-                        <div className="section_item">
+                        <div className={styles.section_item}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
                         <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" strokeWidth="3" strokeLinejoin="round"/>
                         <path d="m17 24 5 5 10-11" stroke="#087A55" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                         </svg>
                         Снижаем <br /> ошибки
                         </div>
-                        <div className="section_line"></div>
+                        <div className={styles.section_line}></div>
                         {/* 3 */}
-                        <div className="section_item">
+                        <div className={styles.section_item}>
                         <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path stroke="#087A55" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.63l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.43h-3.84a.5.5 0 0 0-.5.43l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.85a.5.5 0 0 0 .12.63l2.03 1.58c-.05.3-.08.63-.08.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.63l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54a.5.5 0 0 0 .5.43h3.84a.5.5 0 0 0 .5-.43l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.63l-2.03-1.58Z"/>
                         <circle cx="12" cy="12" r="3.5" stroke="#087A55" strokeWidth="1.6"/>
                         </svg>
                         Автоматизируем <br /> процессы
                         </div>
-                        <div className="section_line"></div>
+                        <div className={styles.section_line}></div>
                         {/* 4 */}
-                        <div className="section_item">
+                        <div className={styles.section_item}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
                         <path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" strokeWidth="3" strokeLinejoin="round"/>
                         <path d="m17 24 5 5 10-11" stroke="#087A55" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>

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>
+    );
+}

frontend/src/pages/Dashboard.tsx

@@ -1,50 +1,16 @@
-import { useEffect, useState } from "react";
+import { MainLayout } from "../layouts/Main/Dashboard";
-import { useNavigate } from "react-router-dom";
+import { Sidebar} from "../features/dashboard/components/Sidebar";
-import { fetchUser } from "../api/UserAPI/User";
+import { Header } from "../features/dashboard/components/Header";
-import { logout } from "../api/token";
+import { Grid } from "../features/dashboard/components/Grid";
-
+import { Right_sidebar } from "../features/dashboard/components/Right_sidebar";
-
 export function DashboardPage() {
-    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 (
-        <>
+        <MainLayout
-        {permissions.has("admin") && (<div><p>test</p></div>
+            header={<Header />}
-        )}
+            content={<Grid />}
-        <button onClick={handleLogout}>logout</button>
+            sidebar={<Sidebar />}
-        </>
+            right_sidebar={<Right_sidebar />}
+            >
+        </MainLayout>
     );
 }

frontend/src/pages/ForgotPasswordPage.tsx

@@ -1,5 +1,5 @@
 import { Reset } from "../features/auth/components/ResetComponent";
-import { AuthLayout } from "../layouts/AuthLayout";
+import { AuthLayout } from "../layouts/Auth/AuthLayout";
 
 export function ForgotPasswordPage() {
     return (

frontend/src/pages/LoginPage.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { Auth } from "../features/auth/components/AuthComponent";
-import { AuthLayout } from "../layouts/AuthLayout";
+import { AuthLayout } from "../layouts/Auth/AuthLayout";
 import { useEffect, useState } from "react";
 import { fetchUser } from "../api/UserAPI/User";
 import { getAccessToken } from "../api/token";