From 55215cb47ce632c633daca2e05b6d7689de8eea2 Mon Sep 17 00:00:00 2001
From: gotika <sonya.gotika@mail.ru>
Date: Sat, 21 Sep 2024 17:45:17 +0300
Subject: [PATCH] huinya

---
 package-lock.json        | 316 +++++++++++++++++++++++++++++++++++++++
 package.json             |   7 +
 public/index.html        |   4 +
 server.js                |  21 +++
 src/App.js               |  38 +++--
 src/Sidebar.css          |  29 ++++
 src/Sidebar.js           |  58 +++++++
 src/pages/Dashboard.js   |  78 ++++++++++
 src/pages/DevicesPage.js | 180 ++++++++++++++++++++++
 9 files changed, 711 insertions(+), 20 deletions(-)
 create mode 100644 server.js
 create mode 100644 src/Sidebar.css
 create mode 100644 src/Sidebar.js
 create mode 100644 src/pages/Dashboard.js
 create mode 100644 src/pages/DevicesPage.js

diff --git a/package-lock.json b/package-lock.json
index a42fb96..01203b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,16 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "leaflet": "^1.9.4",
+        "leaflet-defaulticon-compatibility": "^0.1.2",
+        "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-leaflet": "^4.2.1",
+        "react-router-dom": "^6.26.2",
         "react-scripts": "5.0.1",
+        "socket.io": "^4.8.0",
+        "socket.io-client": "^4.8.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3540,6 +3547,26 @@
         }
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "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",
@@ -3655,6 +3682,12 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -4309,6 +4342,21 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.17",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
+      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -6130,6 +6178,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6826,6 +6883,19 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -7782,6 +7852,100 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.1.tgz",
+      "integrity": "sha512-NEpDCw9hrvBW+hVEOK4T7v0jFJ++KgtPl4jKFwsZVfG1XhS0dCrSb3VMb9gPAd7VAdW52VT1EnaNiU2vM8C0og==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.1.tgz",
+      "integrity": "sha512-aYuoak7I+R83M/BBPIOs2to51BmFIpC1wZe6zZzMrT2llVsHy5cvcmdsJgP2Qz6smHu+sD9oexiSUAVd8OfBPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -13322,6 +13486,18 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet-defaulticon-compatibility": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz",
+      "integrity": "sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -15855,6 +16031,15 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.0.1.tgz",
+      "integrity": "sha512-Lpj0tPBn561WiQ3QQWXbkx8xTtB8BZkJeMZWLJIL8iaPBCoWzW1IpCeU3gY5MDqsb0+efCvEGkl9O0naP64crA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@@ -16206,6 +16391,20 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16215,6 +16414,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "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",
@@ -17228,6 +17459,83 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.0.tgz",
+      "integrity": "sha512-8U6BEgGjQOfGz3HHTYaC/L1GaxDCJ/KM0XTkJly0EhZ5U/du9uNEZy4ZgYzEzIqlx2CMm25CrCqr1ck899eLNA==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.0.tgz",
+      "integrity": "sha512-C0jdhD5yQahMws9alf/yvtsMGTaIDBnZ8Rb5HU56svyq0l5LIrGzIDZZD5pHQlmzxLuU91Gz+VpQMKgCTNYtkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -19723,6 +20031,14 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.1.tgz",
+      "integrity": "sha512-ptjR8YSJIXoA3Mbv5po7RtSYHO6mZr8s7i5VGmEk7QY2pQWyT1o0N+W1gKbOyJPUCGXGnuw0wqe8f0L6Y0ny7g==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 20a994b..4350e13 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,16 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
+    "qrcode.react": "^4.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "socket.io": "^4.8.0",
+    "socket.io-client": "^4.8.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index aa069f2..23d1da4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..6f0a335
--- /dev/null
+++ b/server.js
@@ -0,0 +1,21 @@
+const io = require("socket.io")(4000, {
+  cors: {
+    origin: "*", // Разрешить все источники
+  },
+});
+
+const devices = [
+  { id: 1, name: "Устройство 1", lat: 59.9343, lng: 30.3351, timestamp: Date.now() }, // Санкт-Петербург
+  { id: 2, name: "Устройство 2", lat: 59.9400, lng: 30.3000, timestamp: Date.now() }, // Санкт-Петербург
+];
+
+setInterval(() => {
+  // Имитируем обновление местоположения
+  devices.forEach(device => {
+    device.lat += (Math.random() - 0.5) * 0.01;
+    device.lng += (Math.random() - 0.5) * 0.01;
+    device.timestamp = Date.now();
+  });
+
+  io.emit("deviceLocationUpdate", devices); // Отправляем обновленные данные клиенту
+}, 5000); // Обновляем данные каждые 5 секунд
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..cfd1aab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,23 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Sidebar from "./Sidebar";
+import Dashboard from "./pages/Dashboard";
+import DevicesPage from "./pages/DevicesPage"; // Добавляем страницу для управления устройствами
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <div style={{ display: "flex", height: "100vh" }}>
+        <Sidebar />
+        <div style={{ flex: 1, padding: "20px" }}>
+          <Routes>
+            <Route path="/" element={<Dashboard />} /> {/* Главная страница с картой */}
+            <Route path="/devices" element={<DevicesPage />} /> {/* Страница управления устройствами */}
+          </Routes>
+        </div>
+      </div>
+    </Router>
   );
-}
+};
 
 export default App;
diff --git a/src/Sidebar.css b/src/Sidebar.css
new file mode 100644
index 0000000..9b15b64
--- /dev/null
+++ b/src/Sidebar.css
@@ -0,0 +1,29 @@
+.sidebar {
+    width: 250px;
+    height: 100vh;
+    background-color: #2c3e50;
+    color: white;
+    padding: 20px;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
+  }
+  
+  .sidebar h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .sidebar ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  .sidebar li {
+    margin: 15px 0;
+    cursor: pointer;
+  }
+  
+  .sidebar li:hover {
+    background-color: #34495e;
+    padding: 10px;
+    border-radius: 5px;
+  }
\ No newline at end of file
diff --git a/src/Sidebar.js b/src/Sidebar.js
new file mode 100644
index 0000000..910678c
--- /dev/null
+++ b/src/Sidebar.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Sidebar = () => {
+  return (
+    <div style={styles.sidebar}>
+      <h2 style={styles.heading}>Навигация</h2>
+      <ul style={styles.list}>
+        <li style={styles.listItem}>
+          <Link to="/" style={styles.link}>Карта всех устройств</Link>
+        </li>
+        <li style={styles.listItem}>
+          <Link to="/devices" style={styles.link}>Устройства</Link>
+        </li>
+        <li style={styles.listItem}>
+          <Link to="#" style={styles.link}>Группы устройств</Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+// Объект с инлайн-стилями
+const styles = {
+  sidebar: {
+    width: '250px',
+    backgroundColor: '#2c3e50',
+    padding: '20px',
+    height: '100vh',
+    color: 'white',
+    boxShadow: '2px 0 5px rgba(0, 0, 0, 0.1)',
+  },
+  heading: {
+    fontSize: '24px',
+    marginBottom: '20px',
+    color: '#ecf0f1',
+    borderBottom: '2px solid #34495e',
+    paddingBottom: '10px',
+  },
+  list: {
+    listStyleType: 'none',
+    padding: '0',
+  },
+  listItem: {
+    marginBottom: '15px',
+  },
+  link: {
+    color: '#ecf0f1',
+    textDecoration: 'none',
+    fontSize: '18px',
+    display: 'block',
+    padding: '10px',
+    borderRadius: '4px',
+    transition: 'background-color 0.3s',
+  },
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
new file mode 100644
index 0000000..cc0305a
--- /dev/null
+++ b/src/pages/Dashboard.js
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-defaulticon-compatibility";
+import io from "socket.io-client";
+
+// Инициализация WebSocket соединения
+const socket = io("ws://localhost:4000");
+
+const Dashboard = () => {
+  const [devices, setDevices] = useState([]);
+  const [userLocation, setUserLocation] = useState([59.9343, 30.3351]); // Центр по умолчанию на Санкт-Петербург
+  const [locationLoaded, setLocationLoaded] = useState(false); // Флаг загрузки местоположения
+
+  useEffect(() => {
+    // Получаем местоположение пользователя
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          setUserLocation([latitude, longitude]); // Устанавливаем координаты пользователя
+          setLocationLoaded(true); // Флаг, что местоположение загружено
+        },
+        (error) => {
+          console.error("Ошибка при получении геолокации:", error);
+          setLocationLoaded(true); // Продолжаем даже при ошибке
+        }
+      );
+    } else {
+      console.error("Геолокация не поддерживается вашим браузером");
+      setLocationLoaded(true); // Продолжаем даже если геолокация недоступна
+    }
+
+    // Получаем данные устройств в реальном времени
+    socket.on("deviceLocationUpdate", (data) => {
+      setDevices(data);
+    });
+
+    return () => {
+      socket.off("deviceLocationUpdate");
+    };
+  }, []);
+
+  return (
+    <div style={{ flex: 1 }}>
+      <h1>Панель мониторинга - Карта устройств</h1>
+      {locationLoaded ? (
+        <MapContainer
+          center={userLocation} // Центрируем карту на координатах пользователя
+          zoom={12} // Начальный зум
+          style={{ height: "90vh" }}
+        >
+          <TileLayer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          />
+          {devices.map((device, index) => (
+            <Marker key={index} position={[device.lat, device.lng]}>
+              <Popup>
+                <b>{device.name}</b>
+                <br />
+                Последнее обновление: {new Date(device.timestamp).toLocaleString("ru-RU")}
+              </Popup>
+            </Marker>
+          ))}
+          {/* Маркер текущего местоположения пользователя */}
+          <Marker position={userLocation}>
+            <Popup>Вы здесь</Popup>
+          </Marker>
+        </MapContainer>
+      ) : (
+        <p>Загрузка карты...</p>
+      )}
+    </div>
+  );
+};
+
+export default Dashboard;
\ No newline at end of file
diff --git a/src/pages/DevicesPage.js b/src/pages/DevicesPage.js
new file mode 100644
index 0000000..e919589
--- /dev/null
+++ b/src/pages/DevicesPage.js
@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { QRCodeCanvas } from "qrcode.react";
+
+const DevicesPage = () => {
+  const [devices, setDevices] = useState([]);
+  const [newDeviceName, setNewDeviceName] = useState("");
+  const [editDeviceId, setEditDeviceId] = useState(null);
+  const [editDeviceName, setEditDeviceName] = useState("");
+
+  const addDevice = () => {
+    if (newDeviceName) {
+      setDevices([...devices, { name: newDeviceName, id: Date.now() }]);
+      setNewDeviceName("");
+    }
+  };
+
+  const removeDevice = (id) => {
+    setDevices(devices.filter((device) => device.id !== id));
+  };
+
+  const startEditDevice = (device) => {
+    setEditDeviceId(device.id);
+    setEditDeviceName(device.name);
+  };
+
+  const saveDeviceEdit = () => {
+    setDevices(
+      devices.map((device) =>
+        device.id === editDeviceId ? { ...device, name: editDeviceName } : device
+      )
+    );
+    setEditDeviceId(null);
+    setEditDeviceName("");
+  };
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>Устройства</h1>
+      <div style={styles.addDevice}>
+        <input
+          type="text"
+          value={newDeviceName}
+          onChange={(e) => setNewDeviceName(e.target.value)}
+          placeholder="Название нового устройства"
+          style={styles.input}
+        />
+        <button onClick={addDevice} style={styles.addButton}>Добавить устройство</button>
+      </div>
+
+      <ul style={styles.deviceList}>
+        {devices.map((device) => (
+          <li key={device.id} style={styles.deviceItem}>
+            {editDeviceId === device.id ? (
+              <div style={styles.editContainer}>
+                <input
+                  type="text"
+                  value={editDeviceName}
+                  onChange={(e) => setEditDeviceName(e.target.value)}
+                  placeholder="Новое имя устройства"
+                  style={styles.input}
+                />
+                <button onClick={saveDeviceEdit} style={styles.saveButton}>Сохранить</button>
+                <button onClick={() => setEditDeviceId(null)} style={styles.cancelButton}>Отмена</button>
+              </div>
+            ) : (
+              <>
+                <b style={styles.deviceName}>{device.name}</b>
+                <button onClick={() => startEditDevice(device)} style={styles.editButton}>
+                  Редактировать
+                </button>
+                <button onClick={() => removeDevice(device.id)} style={styles.deleteButton}>
+                  Удалить
+                </button>
+                {/* Генерация QR-кода для устройства */}
+                <QRCodeCanvas value={`Device ID: ${device.id}, Device Name: ${device.name}`} />
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    padding: "20px",
+    backgroundColor: "#f5f5f5",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  },
+  title: {
+    marginBottom: "20px",
+    color: "#333",
+  },
+  addDevice: {
+    marginBottom: "20px",
+    display: "flex",
+    alignItems: "center",
+  },
+  input: {
+    padding: "10px",
+    marginRight: "10px",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    flexGrow: 1,
+  },
+  addButton: {
+    padding: "10px 15px",
+    backgroundColor: "#3498db",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "background-color 0.3s",
+  },
+  addButtonHover: {
+    backgroundColor: "#2980b9",
+  },
+  deviceList: {
+    listStyleType: "none",
+    padding: "0",
+  },
+  deviceItem: {
+    backgroundColor: "white",
+    borderRadius: "5px",
+    padding: "15px",
+    marginBottom: "10px",
+    boxShadow: "0 1px 5px rgba(0, 0, 0, 0.1)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  editContainer: {
+    display: "flex",
+    alignItems: "center",
+  },
+  deviceName: {
+    flexGrow: 1,
+    fontWeight: "bold",
+  },
+  editButton: {
+    marginLeft: "10px",
+    padding: "5px 10px",
+    backgroundColor: "#f39c12",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+  },
+  deleteButton: {
+    marginLeft: "10px",
+    padding: "5px 10px",
+    backgroundColor: "#e74c3c",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+  },
+  saveButton: {
+    marginLeft: "10px",
+    padding: "5px 10px",
+    backgroundColor: "#2ecc71",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+  },
+  cancelButton: {
+    marginLeft: "10px",
+    padding: "5px 10px",
+    backgroundColor: "#95a5a6",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+  },
+};
+
+export default DevicesPage;
\ No newline at end of file