добавил новый способ маршрутизации, страницы глобальной рассылки и переменных

package-lock.json

@@ -15,6 +15,7 @@
         "react": "^18.3.1",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.1",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -3912,6 +3913,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -16682,6 +16692,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

src/pages/globalMailing.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+const GlobalMailing = () => {
+    const groups = ['Admins', 'Editors', 'Viewers'];
+
+    const handleSendMail = () => {
+        alert('Emails sent');
+    };
+
+    return (
+        <div>
+            <h2>Global Mailing</h2>
+            <select>
+                {groups.map((group, index) => (
+                    <option key = {index} value={group}>{group}</option>
+                ))}
+            </select>
+            <button onClick={handleSendMail}>Send Emails</button>
+        </div>
+    );
+};
+
+export default GlobalMailing;

src/pages/globalVariables.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+const GlobalVariables = () => {
+    const [variables, setVariables] = useState({
+        API_URL: 'https://api.example.com',
+        APP_NAME: 'Admin Dashboard',
+    });
+
+    const handleChange = (e) => {
+        setVariables({
+            ...variables,
+            [e.target.name]: e.target.value,
+        });
+    };
+
+    const handleSave = () => {
+        alert('Variables saved');
+    };
+
+    return (
+        <div>
+            <h2>Global Variables</h2>
+            {Object.keys(variables).map((key) => (
+                <div key={key}>
+                    <label>{key}</label>
+                    <input
+                        name={key}
+                        value={variables[key]}
+                        onChange={handleChange}
+                    />
+                </div>
+            ))}
+            <button onClick={handleSave}>Save</button>
+        </div>
+    );
+};
+
+export default GlobalVariables;

src/pages/groups.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Groups = () => {
+    const groups = ['Admins', 'Editors', 'Viewers']; //заглушка
+
+    return (
+        <div>
+            <h2>Группы пользователей</h2>
+            <ul>
+                {groups.map((group, index) => (
+                    <li key={index}>{group}</li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default Groups;

src/pages/migration.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Migration = () => {
+    const handleMigration = () => {
+        alert('Migration started');
+    };
+
+    return (
+        <div>
+            <h2>Data Migration</h2>
+            <button onClick={handleMigration}>Start Migration</button>
+        </div>
+    );
+};
+
+export default Migration;