Merge remote-tracking branch 'origin/install' into install

src/Mainpage.js

@@ -1,19 +1,51 @@
-import { useState, useEffect } from 'react';
+import {useState, useEffect} from 'react';
 import axios from 'axios';
 import Header from './Header';
+import './css/Mainpage.css';
 
 const Mainpage = () => {
-    const [user, setUser] = useState(null);
+    const [tasks, setTasks] = useState([]);
     const [error, setError] = useState('');
+    const [count, setCount] = useState('0');
+
+    useEffect(() => {
+        const checkSession = async () => {
+            try {
+                const response = await axios.get('/api/users/my_tasks');
+                setTasks(response.data.tasks || []);
+                setCount(response.data.count || 0);
+            } catch (err) {
+                setError('Ошибка загрузки задачи');
+            }
+        };
+
+        checkSession();
+    }, []);
 
     return (
         <>
             <Header />
-            <div className="">
-                
+            <div className="content-wrapper">
+                {
+                    error && <div className="error">{error}</div>
+                }
+                <div className="main-layout">
+                    <div className="tasks-box">
+                        <h3>Задачи ({count})</h3>
+                        {tasks.length > 0 ? (
+                            <ul>
+                                {tasks.map((task, index) => (
+                                    <li key={index}>{task.title || task.name || `Задача ${index + 1}`}</li>
+                                ))}
+                            </ul>
+                        ) : (
+                            <p>Нет задач</p>
+                        )}
+                    </div>
+                </div>
             </div>
         </>
     );
-}
+};
 
 export default Mainpage;

src/css/Mainpage.css

@@ -0,0 +1,53 @@
+.content-wrapper{
+    transition: all .4s ease;
+}
+
+.main-layout {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px auto;
+    max-width: 1200px;
+}
+
+.left-content {
+    flex: 1;
+    text-align: left;  /* Выравнивание текста слева */
+}
+
+.left-content h1,
+.left-content p,
+.left-content li {
+    text-align: left;
+    color: #CAD1D8;
+}
+
+.tasks-box {
+    flex: 0 0 300px;  /* Фиксированная ширина бокса справа */
+    background-color: #33404d;
+    border-radius: 8px;
+    padding: 20px;
+    border: 1px solid #999;
+    height: fit-content;
+}
+
+.tasks-box h3 {
+    margin-top: 0;
+    color: #CAD1D8;
+    text-align: center;
+}
+
+.tasks-box ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.tasks-box li {
+    background-color: #1f2430;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 4px;
+    color: #CAD1D8;
+    text-align: left;
+}