design

package-lock.json

@@ -12,6 +12,9 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "chart.js": "^4.4.4",
+        "primeflex": "^3.3.1",
+        "primeicons": "^7.0.0",
+        "primereact": "^10.8.2",
         "react": "^18.3.1",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.3.1",
@@ -4761,6 +4764,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -7868,6 +7880,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -14257,7 +14279,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -16269,6 +16290,41 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/primeflex": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
+      "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==",
+      "license": "MIT"
+    },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
+    "node_modules/primereact": {
+      "version": "10.8.2",
+      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.8.2.tgz",
+      "integrity": "sha512-bf7vktogGh0PmKT9WLDcJQoQNqqFqcAlP2crUqccnlTu63FNnQV82qEYyaFvE12Qd5qhm3EYmpsHjpf6/+olTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -16304,7 +16360,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -16316,7 +16371,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/proxy-addr": {
@@ -16798,6 +16852,22 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -7,6 +7,9 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "chart.js": "^4.4.4",
+    "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.8.2",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",

src/App.css

@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

src/App.js

@@ -6,21 +6,27 @@ import Migration from './pages/migration';
 import GlobalMailing from './pages/GlobalMailing';
 import GlobalVariables from './pages/GlobalVariables';
 import PerformanceMetrics from './pages/performance';
-import Navbar from './components/navbar';
+import Sidebar from './pages/sidebar';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
 
 function App() {
   return (
     <Router>
-      <div>
+      <div style={{ display: 'flex' }}>
-        <Navbar />
+        <Sidebar />
-        <Routes>
+        <div style={{ flex: 1, marginLeft: '200px', padding: '20px' }}>
-          <Route path="/" element={<Users />} />
+          <Routes>
-          <Route path="/groups" element={<Groups />} />
+            <Route path="/" element={<Users />} />
-          <Route path="/migration" element={<Migration />} />
+            <Route path="/groups" element={<Groups />} />
-          <Route path="/globalMailing" element={<GlobalMailing />} />
+            <Route path="/migration" element={<Migration />} />
-          <Route path="/globalVariables" element={<GlobalVariables />} />
+            <Route path="/globalMailing" element={<GlobalMailing />} />
-          <Route path="/performance" element={<PerformanceMetrics />} />
+            <Route path="/globalVariables" element={<GlobalVariables />} />
-        </Routes>
+            <Route path="/performance" element={<PerformanceMetrics />} />
+          </Routes>
+        </div>
       </div>
     </Router>
   );

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/navbar.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-function Navbar() {
-  return (
-    <nav>
-      <ul>
-        <li><Link to="/">Users</Link></li>
-        <li><Link to="/groups">User Groups</Link></li>
-        <li><Link to="/migration">Data Migration</Link></li>
-        <li><Link to="/GlobalMailing">Global Mailing</Link></li>
-        <li><Link to="/GlobalVariables">Global Variables</Link></li>
-        <li><Link to="/performance">Performance Metrics</Link></li>
-      </ul>
-    </nav>
-  );
-}
-
-export default Navbar;

src/components/sidebar.css

@@ -0,0 +1,54 @@
+.sidebar {
+    width: 250px;
+    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-bottom: 20px;
+    font-size: 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: #ecf0f1;
+  }
+  
+  .sidebar ul {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .sidebar ul li {
+    margin: 15px 0;
+  }
+  
+  .sidebar ul li a {
+    color: #ecf0f1;
+    text-decoration: none;
+    font-size: 1.1rem;
+    display: block;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .sidebar ul li a:hover {
+    background-color: #34495e;
+  }
+  
+  .sidebar ul li a.active {
+    background-color: #2980b9;
+  }
+  
+  
+  body {
+    margin-left: 250px; 
+    padding: 0; 
+  }

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,16 +1,74 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Card } from 'primereact/card';
+import { Dropdown } from 'primereact/dropdown';
+import { Panel } from 'primereact/panel';
 
 const Groups = () => {
-    const groups = ['Admins', 'Editors', 'Viewers']; //заглушка(потом нужно убрать и доделать)
+    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>
+        <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">
-                {groups.map((group, index) => (
+                    <Panel header="Выберите группу">
-                    <li key={index}>{group}</li>
+                        <Dropdown
-                ))}
+                            value={selectedGroup}
-            </ul>
+                            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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import '../components/sidebar.css';
+
+const Sidebar = () => {
+  return (
+    <div className="sidebar">
+      
+      <ul>
+        <li><Link to="/">Users</Link></li>
+        <li><Link to="/groups">Groups</Link></li>
+        <li><Link to="/migration">Migration</Link></li>
+        <li><Link to="/globalMailing">Global Mailing</Link></li>
+        <li><Link to="/globalVariables">Global Variables</Link></li>
+        <li><Link to="/performance">Performance</Link></li>
+      </ul>
+    </div>
+  );
+};
+
+export default Sidebar;

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">
-                {users.map((user, index) => (
+                    <Panel header="Доступные пользователи">
-                    <li key={index}>
+                        <ListBox
-                        {user}
+                            value={selectedUser}
-                        <UserActions />
+                            options={users}
-                    </li>
+                            onChange={(e) => {
-                ))}
+                                setSelectedUser(e.value);
-            </ul>
+                                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) => (
+                            <div key={index} className="p-d-flex p-ai-center p-mb-3">
+                                <span className="p-mr-3">{user.label}</span>
+                                <UserActions />
+                            </div>
+                        ))}
+                    </Panel>
+                </Card>
+            </div>
         </div>
     );
 };