design

src/App.js

@@ -11,7 +11,6 @@ import 'primereact/resources/themes/lara-light-indigo/theme.css';
 import 'primereact/resources/primereact.min.css';
 import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
-import './components/styles.css';
 
 function App() {
   return (

src/components/GlobalMailing.css

@@ -0,0 +1,39 @@
+.global-mailing-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .global-mailing-container h2 {
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .global-mailing-container select {
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 300px;
+  }
+  
+  .global-mailing-container button {
+    padding: 10px 20px;
+    font-size: 16px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .global-mailing-container button:hover {
+    background-color: #0056b3;
+  }

src/components/GlobalVariables.css

@@ -0,0 +1,51 @@
+.global-variables-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  
+  .global-variables-container h2 {
+    margin-bottom: 20px;
+    color: #333;
+  }
+  
+  .global-variables-container div {
+    margin-bottom: 15px;
+    width: 100%;
+  }
+  
+  .global-variables-container label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #555;
+  }
+  
+  .global-variables-container input {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  .global-variables-container button {
+    padding: 10px 20px;
+    font-size: 16px;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .global-variables-container button:hover {
+    background-color: #0056b3;
+  }

src/components/sidebar.css

@@ -1,33 +1,54 @@
 .sidebar {
-    width: 200px;
+    width: 250px;
-    padding: 20px;
-    border-right: 1px solid #ddd;
-    background-color: #f4f4f4;
     height: 100vh;
+    background-color: #2c3e50;
+    padding: 20px;
+    color: white;
     position: fixed;
     top: 0;
     left: 0;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+    z-index: 1; /* чтобы сайдбар был поверх контента */
   }
   
   .sidebar h3 {
-    margin-top: 0;
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #ecf0f1;
   }
   
   .sidebar ul {
-    list-style-type: none;
+    list-style: none;
     padding: 0;
   }
   
   .sidebar ul li {
-    margin-bottom: 10px;
+    margin: 15px 0;
   }
   
   .sidebar ul li a {
+    color: #ecf0f1;
     text-decoration: none;
-    color: #333;
+    font-size: 1.1rem;
-    font-size: 16px;
+    display: block;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
   }
   
   .sidebar ul li a:hover {
-    color: #007bff;
+    background-color: #34495e;
+  }
+  
+  .sidebar ul li a.active {
+    background-color: #2980b9;
+  }
+  
+  
+  body {
+    margin-left: 250px; 
+    padding: 0; 
   }

src/components/styles.css

@@ -1,9 +0,0 @@
-.card-custom {
-    background-color: #f9fafb;
-    border-radius: 10px;
-}
-
-.listbox-custom {
-    background-color: #fff;
-    border: 1px solid #e5e7eb;
-}

src/components/userActions.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { Button } from 'primereact/button';
 
 const UserActions = () => {
     return (
-        <div>
+        <div className="p-d-flex p-ai-center">
-        <button>Заблокировать</button>
+            <Button label="Заблокировать" icon="pi pi-lock" className="p-button-warning p-button-xs p-mr-2" />
-        <button>Удалить</button>
+            <Button label="Удалить" icon="pi pi-trash" className="p-button-danger p-button-xs p-mr-2" />
-        <button>Сменить пароль</button>
+            <Button label="Сменить пароль" icon="pi pi-key" className="p-button-secondary p-button-xs" />
         </div>
     );
 };

src/pages/GlobalMailing.js

@@ -1,4 +1,5 @@
 import React from "react";
+import '../components/GlobalMailing.css'; 
 
 const GlobalMailing = () => {
     const groups = ['Admins', 'Editors', 'Viewers'];
@@ -8,11 +9,11 @@ const GlobalMailing = () => {
     };
 
     return (
-        <div>
+        <div className="global-mailing-container">
             <h2>Global Mailing</h2>
             <select>
                 {groups.map((group, index) => (
-                    <option key = {index} value={group}>{group}</option>
+                    <option key={index} value={group}>{group}</option>
                 ))}
             </select>
             <button onClick={handleSendMail}>Send Emails</button>

src/pages/GlobalVariables.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import '../components/GlobalVariables.css'; 
 
 const GlobalVariables = () => {
     const [variables, setVariables] = useState({
@@ -18,7 +19,7 @@ const GlobalVariables = () => {
     };
 
     return (
-        <div>
+        <div className="global-variables-container">
             <h2>Global Variables</h2>
             {Object.keys(variables).map((key) => (
                 <div key={key}>

src/pages/groups.js

@@ -1,22 +1,72 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Card } from 'primereact/card';
-import { ListBox } from 'primereact/listbox';
+import { Dropdown } from 'primereact/dropdown';
 import { Panel } from 'primereact/panel';
 
 const Groups = () => {
+    const [selectedGroup, setSelectedGroup] = useState(null);
+    const [selectedSubOption, setSelectedSubOption] = useState(null);
+
+    //заглушка
     const groups = [
         { label: 'Admins', value: 'Admins' },
         { label: 'Editors', value: 'Editors' },
         { label: 'Viewers', value: 'Viewers' }
-    ]; // Заглушка (потом нужно убрать и доделать)
+    ];
+
+    
+    const groupOptions = {
+        Admins: [
+            { label: 'Manage Users', value: 'ManageUsers' },
+            { label: 'View Reports', value: 'ViewReports' }
+        ],
+        Editors: [
+            { label: 'Edit Content', value: 'EditContent' },
+            { label: 'Publish Content', value: 'PublishContent' }
+        ],
+        Viewers: [
+            { label: 'View Content', value: 'ViewContent' },
+            { label: 'Subscribe', value: 'Subscribe' }
+        ]
+    };
+
+    const onGroupChange = (e) => {
+        setSelectedGroup(e.value);
+        setSelectedSubOption(null); 
+    };
+
+    const onSubOptionChange = (e) => {
+        setSelectedSubOption(e.value);
+    };
 
     return (
         <div className="p-grid p-justify-center p-mt-5">
             <div className="p-col-12 p-md-6">
                 <Card title="Группы пользователей" className="p-shadow-3">
-                    <Panel header="Доступные группы">
+                    <Panel header="Выберите группу">
-                        <ListBox value={null} options={groups} className="p-mt-2" style={{ width: '100%' }} />
+                        <Dropdown
+                            value={selectedGroup}
+                            options={groups}
+                            onChange={onGroupChange}
+                            placeholder="Выберите группу"
+                            className="p-mt-2"
+                            style={{ width: '100%' }}
+                        />
                     </Panel>
+
+                    {}
+                    {selectedGroup && (
+                        <Panel header={`Выберите действие для ${selectedGroup}`} className="p-mt-4">
+                            <Dropdown
+                                value={selectedSubOption}
+                                options={groupOptions[selectedGroup]}
+                                onChange={onSubOptionChange}
+                                placeholder={`Выберите действие для ${selectedGroup}`}
+                                className="p-mt-2"
+                                style={{ width: '100%' }}
+                            />
+                        </Panel>
+                    )}
                 </Card>
             </div>
         </div>

src/pages/migration.js

@@ -1,14 +1,35 @@
-import React from "react";
+import React, { useState } from 'react';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
 
 const Migration = () => {
+    const [showImage, setShowImage] = useState(false);
+
     const handleMigration = () => {
-        alert('Migration started');
+        setShowImage(true);
     };
 
     return (
-        <div>
+        <div className="p-grid p-justify-center p-mt-5">
-            <h2>Data Migration</h2>
+            <div className="p-col-12 p-md-6">
-            <button onClick={handleMigration}>Start Migration</button>
+                <Card title="Data Migration" className="p-shadow-3">
+                    <Panel header="Start the Data Migration Process">
+                        <div className="p-d-flex p-jc-center p-mb-3">
+                            <Button label="Start Migration" icon="pi pi-play" className="p-button-success" onClick={handleMigration} />
+                        </div>
+                        {showImage && (
+                            <div className="p-d-flex p-jc-center" style={{ marginTop: '20px' }}>
+                                <img
+                                    src="https://avatars.dzeninfra.ru/get-zen_doc/271828/pub_65efb8c82e34d760b9c5ae41_65f3c7bdd5f4eb7797f3a3ae/scale_1200"
+                                    alt="Migration"
+                                    style={{ maxWidth: '100%', height: 'auto' }}
+                                />
+                            </div>
+                        )}
+                    </Panel>
+                </Card>
+            </div>
         </div>
     );
 };

src/pages/sidebar.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import '../components/sidebar.css'; // Импорт стилей
+import '../components/sidebar.css';
 
 const Sidebar = () => {
   return (
     <div className="sidebar">
-      <h3>Navigation</h3>
+      
       <ul>
         <li><Link to="/">Users</Link></li>
         <li><Link to="/groups">Groups</Link></li>

src/pages/users.js

@@ -1,20 +1,65 @@
-import React from 'react';
+import React, { useState } from 'react';
-import UserActions from '../components/userActions';
+import { Card } from 'primereact/card';
+import { ListBox } from 'primereact/listbox';
+import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
+import { Dropdown } from 'primereact/dropdown';
+import UserActions from '../components/userActions'; // компонент для действий пользователя
 
 const Users = () => {
-    const users = ['User1', 'User2', 'User3']; //заглушка(потом нужно убрать и доделать)
+    const users = [
+        { label: 'User1', value: 'User1', devices: ['iPhone 12 европеоидный', 'MacBook Pro пидорас', 'iPad Air с яблоками'] },
+        { label: 'User2', value: 'User2', devices: ['Samsung Galaxy S21 наш', 'Dell XPS 15 слоняра'] },
+        { label: 'User3', value: 'User3', devices: ['Google Pixel 6 хуйня ебаная', 'HP Spectre x360 хуйня для даунов'] }
+    ]; // заглушка (потом нужно убрать и доделать)
+
+    const [selectedUser, setSelectedUser] = useState(null);
+    const [selectedDevice, setSelectedDevice] = useState(null);
 
     return (
-        <div>
+        <div className="p-grid p-justify-center p-mt-5">
-            <h2>Пользователи</h2>
+            <div className="p-col-12 p-md-6">
-            <ul>
+                <Card title="Список пользователей" className="p-shadow-3">
+                    <Panel header="Доступные пользователи">
+                        <ListBox
+                            value={selectedUser}
+                            options={users}
+                            onChange={(e) => {
+                                setSelectedUser(e.value);
+                                setSelectedDevice(null); // сбросить выбранное устройство при изменении пользователя
+                            }}
+                            style={{ width: '100%' }}
+                            listStyle={{ maxHeight: '250px' }}
+                            className="p-mt-2"
+                            optionLabel="label" // показывает "label" из каждого объекта пользователя
+                        />
+                        {selectedUser && (
+                            <div className="p-mt-3">
+                                <h4>Устройства {selectedUser.label}</h4>
+                                <Dropdown
+                                    value={selectedDevice}
+                                    options={selectedUser.devices ? selectedUser.devices.map((device) => ({ label: device, value: device })) : []}
+                                    onChange={(e) => setSelectedDevice(e.value)}
+                                    placeholder="Выберите устройство"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                        )}
+                        <div className="p-d-flex p-jc-center p-mt-3">
+                            <Button label="Добавить пользователя" icon="pi pi-plus" className="p-button-success p-mr-2" />
+                        </div>
+                    </Panel>
+
+                    <Panel header="Действия с устройствами" className="p-mt-4">
                         {users.map((user, index) => (
-                    <li key={index}>
+                            <div key={index} className="p-d-flex p-ai-center p-mb-3">
-                        {user}
+                                <span className="p-mr-3">{user.label}</span>
                                 <UserActions />
-                    </li>
+                            </div>
                         ))}
-            </ul>
+                    </Panel>
+                </Card>
+            </div>
         </div>
     );
 };