настроена маршрутизация, нужно доделать группы юзеров

src/App.js

@@ -1,24 +1,28 @@
-import logo from './logo.svg';
+import React from 'react';
-import './App.css';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Users from './pages/users';
+import Groups from './pages/groups';
+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';
 
 function App() {
   return (
-    <div className="App">
+    <Router>
-      <header className="App-header">
+      <div>
-        <img src={logo} className="App-logo" alt="logo" />
+        <Navbar />
-        <p>
+        <Routes>
-          Edit <code>src/App.js</code> and save to reload.
+          <Route path="/" element={<Users />} />
-        </p>
+          <Route path="/groups" element={<Groups />} />
-        <a
+          <Route path="/migration" element={<Migration />} />
-          className="App-link"
+          <Route path="/globalMailing" element={<GlobalMailing />} />
-          href="https://reactjs.org"
+          <Route path="/globalVariables" element={<GlobalVariables />} />
-          target="_blank"
+          <Route path="/performance" element={<PerformanceMetrics />} />
-          rel="noopener noreferrer"
+        </Routes>
-        >
+      </div>
-          Learn React
+    </Router>
-        </a>
-      </header>
-    </div>
   );
 }
 

src/components/navbar.js

@@ -0,0 +1,19 @@
+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/pages/groups.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Groups = () => {
-    const groups = ['Admins', 'Editors', 'Viewers']; //заглушка
+    const groups = ['Admins', 'Editors', 'Viewers']; //заглушка(потом нужно убрать и доделать)
 
     return (
         <div>

src/pages/performance.js

@@ -0,0 +1,59 @@
+import React from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const PerformanceMetrics = () => {
+    const data = {
+        labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май'],
+        datasets: [
+            {
+                label: 'Производительность',
+                data: [65, 59, 80, 81, 56],
+                fill: false,
+                backgroundColor: 'rgb(75, 192, 192)',
+                borderColor: 'rgba(75, 192, 192, 0.2)',
+            },
+        ],
+    };
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'График производительности',
+            },
+        },
+    };
+
+    return (
+        <div>
+            <h2>Производительность</h2>
+            <Line data={data} options={options} />
+        </div>
+    );
+};
+
+export default PerformanceMetrics;

src/pages/users.js

@@ -2,7 +2,7 @@ import React from 'react';
 import UserActions from '../components/userActions';
 
 const Users = () => {
-    const users = ['User1', 'User2', 'User3']; //заглушка(потом можно убрать)
+    const users = ['User1', 'User2', 'User3']; //заглушка(потом нужно убрать и доделать)
 
     return (
         <div>