MH.Dmitrii/The_DisExcel_project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard

Browse Source
This commit is contained in:
MH.Dmitrii
2026-10-04 18:50:34 +03:00
parent 64234f8639
commit c2fd16e2d8
16 changed files with 252 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/dashboard/components/Grid.module.css
+6
View File
@@ -0,0 +1,6 @@
.grid {
display: grid;
justify-content: center;
align-items: center;
width: 100%;
}
frontend/src/features/dashboard/components/Grid.tsx
+13
View File
@@ -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
+7
View File
@@ -0,0 +1,7 @@
.profile {
display: grid;
justify-content: end;
align-items: center;
width: 100%;
}
frontend/src/features/dashboard/components/Header.tsx
+13
View File
@@ -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
+6
View File
@@ -0,0 +1,6 @@
.right_sidebar {
display: grid;
align-content: center;
justify-content: center;
height: 100vh;
}
frontend/src/features/dashboard/components/Right_sidebar.tsx
+13
View File
@@ -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
+14
View File
@@ -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
+19
View File
@@ -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
-2
View File
@@ -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/AuthLayout.css → frontend/src/layouts/Auth/AuthLayout.module.css
+2 -3
View File
@@ -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/AuthLayout.tsx → frontend/src/layouts/Auth/AuthLayout.tsx
+41 -41
View File
@@ -1,28 +1,28 @@
import type { ReactNode } from "react";
import "./AuthLayout.css";
import logo from "../assets/LOGO.png";
import img_1 from "../assets/paper.png";
import img_2 from "../assets/PC.png";
import img_3 from "../assets/graphics.png";
import styles from "./AuthLayout.module.css";
import logo from "../../assets/LOGO.png";
import img_1 from "../../assets/paper.png";
import img_2 from "../../assets/PC.png";
import img_3 from "../../assets/graphics.png";
export function AuthLayout({ children }: { children: ReactNode }) {
return (
<div className="wrapper">
<div className="left_side">
<header className="header">
<div className="container">
<div className="header_top">
<img className="img_logo" src={logo} alt="LOGO" />
<div className="header_text">
<div className="header_title">
<div className={styles.wrapper}>
<div className={styles.left_side}>
<header className={styles.header}>
<div className={styles.container}>
<div className={styles.header_top}>
<img className={styles.img_logo} src={logo} alt="LOGO" />
<div className={styles.header_text}>
<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">
<div className="contain">
<div className="main_items">
<main className={styles.main}>
<div className={styles.contain}>
<div className={styles.main_items}>
{/* 1 */}
<div className="main_item">
<img className="main_item_img" src={img_1} alt="img" />
<div className="main_item_title">Бумага</div>
<div className="main_item_p">
<div className={styles.main_item}>
<img className={styles.main_item_img} src={img_1} alt="img" />
<div className={styles.main_item_title}>Бумага</div>
<div className={styles.main_item_p}>
Ручная работа, ошибки, потери
</div>
</div>
<div className="main_i"></div>
<div className={styles.main_i}></div>
{/* 2 */}
<div className="main_item">
<img className="main_item_img" src={img_2} alt="img" />
<div className="main_item_title">Excel</div>
<div className="main_item_p">
<div className={styles.main_item}>
<img className={styles.main_item_img} src={img_2} alt="img" />
<div className={styles.main_item_title}>Excel</div>
<div className={styles.main_item_p}>
Структура, формулы, автоматизация
</div>
</div>
<div className="main_i"></div>
<div className={styles.main_i}></div>
{/* 3 */}
<div className="main_item">
<img className="main_item_img" src={img_3} alt="img" />
<div className="main_item_title">1С / Отчеты</div>
<div className="main_item_p">
<div className={styles.main_item}>
<img className={styles.main_item_img} src={img_3} alt="img" />
<div className={styles.main_item_title}>1С / Отчеты</div>
<div className={styles.main_item_p}>
Готовые процессы, аналитика, контроль
</div>
</div>
</div>
</div>
</main>
<section className="section">
<div className="section_items">
<section className={styles.section}>
<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
+36
View File
@@ -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
+68
View File
@@ -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
+12 -46
View File
@@ -1,50 +1,16 @@
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { fetchUser } from "../api/UserAPI/User";
import { logout } from "../api/token";
import { MainLayout } from "../layouts/Main/Dashboard";
import { Sidebar} from "../features/dashboard/components/Sidebar";
import { Header } from "../features/dashboard/components/Header";
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 (
<>
{permissions.has("admin") && (<div><p>test</p></div>
)}
<button onClick={handleLogout}>logout</button>
</>
<MainLayout
header={<Header />}
content={<Grid />}
sidebar={<Sidebar />}
right_sidebar={<Right_sidebar />}
>
</MainLayout>
);
}
frontend/src/pages/ForgotPasswordPage.tsx
+1 -1
View File
@@ -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 -1
View File
@@ -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";