added Guide Tour button on Monitor to help the user navigate different tabs

typescript/frontend-marios2/package-lock.json

@@ -42,6 +42,7 @@
         "react-icons": "^4.11.0",
         "react-icons-converter": "^1.1.4",
         "react-intl": "^6.4.4",
+        "react-joyride": "^2.9.3",
         "react-redux": "^8.1.3",
         "react-router": "6.3.0",
         "react-router-dom": "6.3.0",
@@ -2876,6 +2877,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@gilbarbara/deep-equal": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
+      "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -8195,6 +8201,12 @@
       "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
       "dev": true
     },
+    "node_modules/deep-diff": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
+      "integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -8205,7 +8217,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11465,6 +11476,11 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
     },
+    "node_modules/is-lite": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
+      "integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw=="
+    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -15414,6 +15430,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -17273,6 +17299,41 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-floater": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz",
+      "integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "is-lite": "^0.8.2",
+        "popper.js": "^1.16.0",
+        "prop-types": "^15.8.1",
+        "tree-changes": "^0.9.1"
+      },
+      "peerDependencies": {
+        "react": "15 - 18",
+        "react-dom": "15 - 18"
+      }
+    },
+    "node_modules/react-floater/node_modules/@gilbarbara/deep-equal": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz",
+      "integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA=="
+    },
+    "node_modules/react-floater/node_modules/is-lite": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz",
+      "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
+    },
+    "node_modules/react-floater/node_modules/tree-changes": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz",
+      "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.1.1",
+        "is-lite": "^0.8.2"
+      }
+    },
     "node_modules/react-flow-renderer": {
       "version": "10.3.17",
       "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz",
@@ -17392,6 +17453,15 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
+      "peerDependencies": {
+        "@types/react": ">=0.0.0 <=99",
+        "react": ">=0.0.0 <=99"
+      }
+    },
     "node_modules/react-intl": {
       "version": "6.6.8",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
@@ -17423,6 +17493,44 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-joyride": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz",
+      "integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "deep-diff": "^1.0.2",
+        "deepmerge": "^4.3.1",
+        "is-lite": "^1.2.1",
+        "react-floater": "^0.7.9",
+        "react-innertext": "^1.1.5",
+        "react-is": "^16.13.1",
+        "scroll": "^3.0.1",
+        "scrollparent": "^2.1.0",
+        "tree-changes": "^0.11.2",
+        "type-fest": "^4.27.0"
+      },
+      "peerDependencies": {
+        "react": "15 - 18",
+        "react-dom": "15 - 18"
+      }
+    },
+    "node_modules/react-joyride/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-joyride/node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
@@ -18263,6 +18371,16 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
+    "node_modules/scroll": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
+      "integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg=="
+    },
+    "node_modules/scrollparent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
+      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -19771,6 +19889,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/tree-changes": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz",
+      "integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "is-lite": "^1.2.1"
+      }
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -23174,6 +23301,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "@gilbarbara/deep-equal": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
+      "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -27055,6 +27187,11 @@
       "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
       "dev": true
     },
+    "deep-diff": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
+      "integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg=="
+    },
     "deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -27064,8 +27201,7 @@
     "deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
-      "dev": true
     },
     "default-gateway": {
       "version": "6.0.3",
@@ -29458,6 +29594,11 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
     },
+    "is-lite": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
+      "integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw=="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -32446,6 +32587,11 @@
         }
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -33627,6 +33773,39 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "react-floater": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz",
+      "integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==",
+      "requires": {
+        "deepmerge": "^4.3.1",
+        "is-lite": "^0.8.2",
+        "popper.js": "^1.16.0",
+        "prop-types": "^15.8.1",
+        "tree-changes": "^0.9.1"
+      },
+      "dependencies": {
+        "@gilbarbara/deep-equal": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz",
+          "integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA=="
+        },
+        "is-lite": {
+          "version": "0.8.2",
+          "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz",
+          "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw=="
+        },
+        "tree-changes": {
+          "version": "0.9.3",
+          "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz",
+          "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
+          "requires": {
+            "@gilbarbara/deep-equal": "^0.1.1",
+            "is-lite": "^0.8.2"
+          }
+        }
+      }
+    },
     "react-flow-renderer": {
       "version": "10.3.17",
       "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz",
@@ -33725,6 +33904,12 @@
         "react": ">=16.3.0"
       }
     },
+    "react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
+      "requires": {}
+    },
     "react-intl": {
       "version": "6.6.8",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
@@ -33747,6 +33932,36 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-joyride": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz",
+      "integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==",
+      "requires": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "deep-diff": "^1.0.2",
+        "deepmerge": "^4.3.1",
+        "is-lite": "^1.2.1",
+        "react-floater": "^0.7.9",
+        "react-innertext": "^1.1.5",
+        "react-is": "^16.13.1",
+        "scroll": "^3.0.1",
+        "scrollparent": "^2.1.0",
+        "tree-changes": "^0.11.2",
+        "type-fest": "^4.27.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "type-fest": {
+          "version": "4.41.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+          "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="
+        }
+      }
+    },
     "react-redux": {
       "version": "8.1.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz",
@@ -34334,6 +34549,16 @@
         }
       }
     },
+    "scroll": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
+      "integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg=="
+    },
+    "scrollparent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
+      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -35520,6 +35745,15 @@
         "punycode": "^2.1.1"
       }
     },
+    "tree-changes": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz",
+      "integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==",
+      "requires": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "is-lite": "^1.2.1"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",

typescript/frontend-marios2/package.json

@@ -38,6 +38,7 @@
     "react-icons": "^4.11.0",
     "react-icons-converter": "^1.1.4",
     "react-intl": "^6.4.4",
+    "react-joyride": "^2.9.3",
     "react-redux": "^8.1.3",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",

typescript/frontend-marios2/src/App.tsx

@@ -22,6 +22,7 @@ import AccessContextProvider from './contexts/AccessContextProvider';
 import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations';
 import SodioHomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
 import { ProductIdContext } from './contexts/ProductIdContextProvider';
+import { TourProvider } from './contexts/TourContext';
 
 function App() {
   const context = useContext(UserContext);
@@ -127,22 +128,28 @@ function App() {
   if (!token) {
     return (
       <ThemeProvider>
-        <CssBaseline />
+        <IntlProvider
-        <Routes>
+          messages={getTranslations()}
-          <Route
+          locale={language}
-            path={''}
+          defaultLocale="en"
-            element={<Navigate to={routes.login}></Navigate>}
+        >
-          ></Route>
+          <CssBaseline />
-          <Route path={routes.login} element={<Login></Login>}></Route>
+          <Routes>
-          <Route
+            <Route
-            path={routes.forgotPassword}
+              path={''}
-            element={<ForgotPassword />}
+              element={<Navigate to={routes.login}></Navigate>}
-          ></Route>
+            ></Route>
-          <Route
+            <Route path={routes.login} element={<Login></Login>}></Route>
-            path={'*'}
+            <Route
-            element={<Navigate to={routes.login}></Navigate>}
+              path={routes.forgotPassword}
-          ></Route>
+              element={<ForgotPassword />}
-        </Routes>
+            ></Route>
+            <Route
+              path={'*'}
+              element={<Navigate to={routes.login}></Navigate>}
+            ></Route>
+          </Routes>
+        </IntlProvider>
       </ThemeProvider>
     );
   }
@@ -163,6 +170,7 @@ function App() {
         locale={language}
         defaultLocale="en"
       >
+        <TourProvider>
         <InstallationsContextProvider>
           <CssBaseline />
           <Routes>
@@ -237,6 +245,7 @@ function App() {
             </Route>
           </Routes>
         </InstallationsContextProvider>
+        </TourProvider>
       </IntlProvider>
     </ThemeProvider>
   );

typescript/frontend-marios2/src/config/tourSteps.ts

@@ -0,0 +1,117 @@
+import { Step } from 'react-joyride';
+import { IntlShape } from 'react-intl';
+
+// --- Build a single step with i18n ---
+
+function makeStep(
+  intl: IntlShape,
+  target: string,
+  titleId: string,
+  contentId: string,
+  placement: Step['placement'] = 'bottom',
+  disableBeacon = false
+): Step {
+  return {
+    target,
+    title: intl.formatMessage({ id: titleId }),
+    content: intl.formatMessage({ id: contentId }),
+    placement,
+    ...(disableBeacon ? { disableBeacon: true } : {})
+  };
+}
+
+// --- Tab key → i18n key mapping ---
+
+const tabConfig: Record<string, { titleId: string; contentId: string }> = {
+  list: { titleId: 'tourListTitle', contentId: 'tourListContent' },
+  tree: { titleId: 'tourTreeTitle', contentId: 'tourTreeContent' },
+  live: { titleId: 'tourLiveTitle', contentId: 'tourLiveContent' },
+  overview: { titleId: 'tourOverviewTitle', contentId: 'tourOverviewContent' },
+  batteryview: { titleId: 'tourBatteryviewTitle', contentId: 'tourBatteryviewContent' },
+  pvview: { titleId: 'tourPvviewTitle', contentId: 'tourPvviewContent' },
+  log: { titleId: 'tourLogTitle', contentId: 'tourLogContent' },
+  information: { titleId: 'tourInformationTitle', contentId: 'tourInformationContent' },
+  report: { titleId: 'tourReportTitle', contentId: 'tourReportContent' },
+  manage: { titleId: 'tourManageTitle', contentId: 'tourManageContent' },
+  configuration: { titleId: 'tourConfigurationTitle', contentId: 'tourConfigurationContent' },
+  history: { titleId: 'tourHistoryTitle', contentId: 'tourHistoryContent' }
+};
+
+// Steps to skip inside a specific installation (already covered in the list-page tour)
+const listPageOnlyTabs = new Set(['list', 'tree']);
+
+// --- Build tour steps from tab value list ---
+
+function buildTourSteps(intl: IntlShape, tabValues: string[], includeInstallationHint = false, isInsideInstallation = false): Step[] {
+  const steps: Step[] = [];
+  if (!isInsideInstallation) {
+    steps.push(makeStep(intl, '[data-tour="language-selector"]', 'tourLanguageTitle', 'tourLanguageContent', 'bottom', true));
+  }
+  for (const value of tabValues) {
+    if (isInsideInstallation && listPageOnlyTabs.has(value)) continue;
+    const cfg = tabConfig[value];
+    if (cfg) {
+      steps.push(makeStep(intl, `#tour-tab-${value}`, cfg.titleId, cfg.contentId, 'bottom', steps.length === 0));
+    }
+  }
+  if (includeInstallationHint && !isInsideInstallation) {
+    steps.push(makeStep(intl, '#tour-tab-list', 'tourExploreTitle', 'tourExploreContent'));
+  }
+  return steps;
+}
+
+// --- Sodistore Home (product 2) ---
+
+export const buildSodiohomeCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'live', 'overview', 'information', 'report'
+], false, inside);
+
+export const buildSodiohomePartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'live', 'overview', 'batteryview', 'log', 'information', 'report'
+], true, inside);
+
+export const buildSodiohomeAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'live', 'overview', 'batteryview', 'log', 'manage', 'information', 'configuration', 'history', 'report'
+], true, inside);
+
+// --- Salimax (product 0) / Sodistore Max (product 3) ---
+
+export const buildSalimaxCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'live', 'overview', 'information'
+], false, inside);
+
+export const buildSalimaxPartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'live', 'overview', 'batteryview', 'pvview', 'information'
+], true, inside);
+
+export const buildSalimaxAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'live', 'overview', 'batteryview', 'manage', 'log', 'information', 'configuration', 'history', 'pvview'
+], true, inside);
+
+// --- Sodistore Grid (product 4) — same as Salimax but no PV View ---
+
+export const buildSodistoregridCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'live', 'overview', 'information'
+], false, inside);
+
+export const buildSodistoregridPartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'live', 'overview', 'batteryview', 'information'
+], true, inside);
+
+export const buildSodistoregridAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'live', 'overview', 'batteryview', 'manage', 'log', 'information', 'configuration', 'history'
+], true, inside);
+
+// --- Salidomo (product 1) ---
+
+export const buildSalidomoCustomerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'batteryview', 'overview', 'information'
+], false, inside);
+
+export const buildSalidomoPartnerTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'batteryview', 'overview', 'information'
+], true, inside);
+
+export const buildSalidomoAdminTourSteps = (intl: IntlShape, inside = false) => buildTourSteps(intl, [
+  'list', 'tree', 'batteryview', 'overview', 'log', 'manage', 'information', 'history'
+], true, inside);

typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx

@@ -412,6 +412,7 @@ function InstallationTabs(props: InstallationTabsProps) {
                     ? routes[tab.value]
                     : navigateToTabPath(location.pathname, routes[tab.value])
                 }
+                id={`tour-tab-${tab.value}`}
               />
             ))}
           </Tabs>
@@ -480,6 +481,7 @@ function InstallationTabs(props: InstallationTabsProps) {
                 component={Link}
                 label={tab.label}
                 to={routes[tab.value]}
+                id={`tour-tab-${tab.value}`}
               />
             ))}
           </Tabs>

typescript/frontend-marios2/src/content/dashboards/SalidomoInstallations/index.tsx

@@ -288,6 +288,7 @@ function SalidomoInstallationTabs(props: InstallationTabsProps) {
                     ? routes[tab.value]
                     : navigateToTabPath(location.pathname, routes[tab.value])
                 }
+                id={`tour-tab-${tab.value}`}
               />
             ))}
           </Tabs>
@@ -349,6 +350,7 @@ function SalidomoInstallationTabs(props: InstallationTabsProps) {
                 component={Link}
                 label={tab.label}
                 to={routes[tab.value]}
+                id={`tour-tab-${tab.value}`}
               />
             ))}
           </Tabs>

typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/index.tsx

@@ -416,6 +416,7 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
                 icon={tab.icon}
                 component={Link}
                 label={tab.label}
+                id={`tour-tab-${tab.value}`}
                 to={
                   tab.value === 'list' || tab.value === 'tree'
                     ? routes[tab.value]
@@ -482,6 +483,7 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
                 component={Link}
                 label={tab.label}
                 to={routes[tab.value]}
+                id={`tour-tab-${tab.value}`}
               />
             ))}
           </Tabs>

typescript/frontend-marios2/src/contexts/TourContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+interface TourContextType {
+  runTour: boolean;
+  startTour: () => void;
+  stopTour: () => void;
+}
+
+const TourContext = createContext<TourContextType>({
+  runTour: false,
+  startTour: () => {},
+  stopTour: () => {}
+});
+
+export const useTour = () => useContext(TourContext);
+
+interface TourProviderProps {
+  children: ReactNode;
+}
+
+export function TourProvider({ children }: TourProviderProps) {
+  const [runTour, setRunTour] = useState(false);
+
+  const startTour = useCallback(() => setRunTour(true), []);
+  const stopTour = useCallback(() => setRunTour(false), []);
+
+  return (
+    <TourContext.Provider value={{ runTour, startTour, stopTour }}>
+      {children}
+    </TourContext.Provider>
+  );
+}

typescript/frontend-marios2/src/lang/de.json

@@ -469,5 +469,33 @@
   "powerW": "Leistung (W)",
   "enterPowerValue": "Positiven oder negativen Leistungswert eingeben",
   "startDateTime": "Startdatum und -zeit (Startzeit < Stoppzeit)",
-  "stopDateTime": "Stoppdatum und -zeit (Startzeit < Stoppzeit)"
+  "stopDateTime": "Stoppdatum und -zeit (Startzeit < Stoppzeit)",
+  "tourLanguageTitle": "Sprache",
+  "tourLanguageContent": "Wählen Sie Ihre bevorzugte Sprache. Die Oberfläche unterstützt Englisch, Deutsch, Französisch und Italienisch.",
+  "tourExploreTitle": "Installation erkunden",
+  "tourExploreContent": "Klicken Sie auf eine Installation, um sie zu öffnen. Klicken Sie darin erneut auf die Tour-Schaltfläche für eine detaillierte Anleitung aller verfügbaren Tabs.",
+  "tourListTitle": "Installationsliste",
+  "tourListContent": "Suchen und durchsuchen Sie alle Ihre Installationen. Klicken Sie auf eine Installation, um deren Dashboard zu öffnen.",
+  "tourTreeTitle": "Ordneransicht",
+  "tourTreeContent": "Ihre Installationen nach Ordnern organisiert. Erweitern Sie Ordner, um Installationen nach Standort zu finden.",
+  "tourLiveTitle": "Live-Daten",
+  "tourLiveContent": "Echtzeitdaten Ihres Systems — Batteriestatus, Energiefluss und Systemstatus, kontinuierlich aktualisiert.",
+  "tourOverviewTitle": "Überblick",
+  "tourOverviewContent": "Visuelle Zusammenfassung mit Diagrammen — Produktion, Verbrauch und Batterieladung im Zeitverlauf. Verwenden Sie die Datumssteuerung, um einen bestimmten Tag oder Zeitraum anzuzeigen.",
+  "tourBatteryviewTitle": "Batterieansicht",
+  "tourBatteryviewContent": "Detaillierte Batterieüberwachung — Ladezustand (%), Energiefluss (kW), Spannung und Strom pro Batterieeinheit.",
+  "tourPvviewTitle": "PV-Ansicht",
+  "tourPvviewContent": "Solaranlagen-Überwachung — Produktionsdaten Ihrer Photovoltaikanlage.",
+  "tourLogTitle": "Protokoll",
+  "tourLogContent": "Geräte-Ereignisprotokolle — Systemereignisse, Warnungen und Fehler im Zeitverlauf.",
+  "tourInformationTitle": "Systeminformationen",
+  "tourInformationContent": "Installationsdetails — Standort, Geräteseriennummern und Firmware-Versionen. Nutzen Sie dies als Referenz bei Kontakt mit dem Support.",
+  "tourReportTitle": "Energieberichte",
+  "tourReportContent": "Energiedaten in kWh anzeigen. Wechseln Sie zwischen wöchentlichen (Montag–Sonntag), monatlichen und jährlichen Berichten, um zu sehen, wie viel Energie produziert, verbraucht oder gespeichert wurde.",
+  "tourManageTitle": "Zugriffsverwaltung",
+  "tourManageContent": "Verwalten Sie, welche Benutzer Zugriff auf diese Installation haben, und legen Sie deren Berechtigungen fest.",
+  "tourConfigurationTitle": "Konfiguration",
+  "tourConfigurationContent": "Geräteeinstellungen für diese Installation anzeigen und ändern.",
+  "tourHistoryTitle": "Verlauf",
+  "tourHistoryContent": "Protokoll der Aktionen an dieser Installation — wer hat was und wann geändert."
 }

typescript/frontend-marios2/src/lang/en.json

@@ -217,5 +217,33 @@
   "powerW": "Power (W)",
   "enterPowerValue": "Enter a positive or negative power value",
   "startDateTime": "Start Date and Time (Start Time < Stop Time)",
-  "stopDateTime": "Stop Date and Time (Start Time < Stop Time)"
+  "stopDateTime": "Stop Date and Time (Start Time < Stop Time)",
+  "tourLanguageTitle": "Language",
+  "tourLanguageContent": "Choose your preferred language. The interface supports English, German, French, and Italian.",
+  "tourExploreTitle": "Explore an Installation",
+  "tourExploreContent": "Click any installation to open it. Once inside, click the tour button again for a detailed guide of all available tabs.",
+  "tourListTitle": "Installation List",
+  "tourListContent": "Search and browse all your installations. Click any installation to open its dashboard.",
+  "tourTreeTitle": "Folder View",
+  "tourTreeContent": "Your installations organised in folders. Expand folders to find installations by site or location.",
+  "tourLiveTitle": "Live Data",
+  "tourLiveContent": "Real-time data from your system — battery state, power flow, and system status, updated continuously.",
+  "tourOverviewTitle": "Overview",
+  "tourOverviewContent": "Visual summary with charts — production, consumption, and battery charge over time. Use the date controls to view a specific day or custom range.",
+  "tourBatteryviewTitle": "Battery View",
+  "tourBatteryviewContent": "Detailed battery monitoring — state of charge (%), power flow (kW), voltage, and current per battery unit.",
+  "tourPvviewTitle": "PV View",
+  "tourPvviewContent": "Solar panel monitoring — see production data from your photovoltaic system.",
+  "tourLogTitle": "Log",
+  "tourLogContent": "Device event logs — view system events, warnings, and errors over time.",
+  "tourInformationTitle": "System Information",
+  "tourInformationContent": "Installation details — location, device serial numbers, and firmware versions. Use this as reference if you contact support.",
+  "tourReportTitle": "Energy Reports",
+  "tourReportContent": "View energy data in kWh. Switch between weekly (Monday–Sunday), monthly, and yearly reports to see how much energy was produced, consumed, or stored.",
+  "tourManageTitle": "Access Management",
+  "tourManageContent": "Manage which users have access to this installation and set their permissions.",
+  "tourConfigurationTitle": "Configuration",
+  "tourConfigurationContent": "View and modify device settings for this installation.",
+  "tourHistoryTitle": "History",
+  "tourHistoryContent": "Audit trail of actions performed on this installation — who changed what and when."
 }

typescript/frontend-marios2/src/lang/fr.json

@@ -469,5 +469,33 @@
   "powerW": "Puissance (W)",
   "enterPowerValue": "Entrez une valeur de puissance positive ou négative",
   "startDateTime": "Date et heure de début (Début < Fin)",
-  "stopDateTime": "Date et heure de fin (Début < Fin)"
+  "stopDateTime": "Date et heure de fin (Début < Fin)",
+  "tourLanguageTitle": "Langue",
+  "tourLanguageContent": "Choisissez votre langue préférée. L'interface est disponible en anglais, allemand, français et italien.",
+  "tourExploreTitle": "Explorer une installation",
+  "tourExploreContent": "Cliquez sur une installation pour l'ouvrir. Une fois à l'intérieur, cliquez à nouveau sur le bouton de visite pour un guide détaillé de tous les onglets disponibles.",
+  "tourListTitle": "Liste des installations",
+  "tourListContent": "Recherchez et parcourez toutes vos installations. Cliquez sur une installation pour ouvrir son tableau de bord.",
+  "tourTreeTitle": "Vue par dossiers",
+  "tourTreeContent": "Vos installations organisées en dossiers. Développez les dossiers pour trouver les installations par site ou emplacement.",
+  "tourLiveTitle": "Données en direct",
+  "tourLiveContent": "Données en temps réel de votre système — état de la batterie, flux d'énergie et état du système, mis à jour en continu.",
+  "tourOverviewTitle": "Aperçu",
+  "tourOverviewContent": "Résumé visuel avec graphiques — production, consommation et charge de la batterie au fil du temps. Utilisez les contrôles de date pour afficher un jour spécifique ou une plage personnalisée.",
+  "tourBatteryviewTitle": "Vue batterie",
+  "tourBatteryviewContent": "Surveillance détaillée de la batterie — état de charge (%), flux d'énergie (kW), tension et courant par unité de batterie.",
+  "tourPvviewTitle": "Vue PV",
+  "tourPvviewContent": "Surveillance des panneaux solaires — consultez les données de production de votre système photovoltaïque.",
+  "tourLogTitle": "Journal",
+  "tourLogContent": "Journaux d'événements — événements système, avertissements et erreurs au fil du temps.",
+  "tourInformationTitle": "Informations système",
+  "tourInformationContent": "Détails de l'installation — emplacement, numéros de série des appareils et versions du firmware. Utilisez ceci comme référence si vous contactez le support.",
+  "tourReportTitle": "Rapports énergétiques",
+  "tourReportContent": "Afficher les données énergétiques en kWh. Basculez entre les rapports hebdomadaires (lundi–dimanche), mensuels et annuels pour voir combien d'énergie a été produite, consommée ou stockée.",
+  "tourManageTitle": "Gestion des accès",
+  "tourManageContent": "Gérez quels utilisateurs ont accès à cette installation et définissez leurs autorisations.",
+  "tourConfigurationTitle": "Configuration",
+  "tourConfigurationContent": "Afficher et modifier les paramètres de l'appareil pour cette installation.",
+  "tourHistoryTitle": "Historique",
+  "tourHistoryContent": "Journal des actions effectuées sur cette installation — qui a changé quoi et quand."
 }

typescript/frontend-marios2/src/lang/it.json

@@ -469,5 +469,33 @@
   "powerW": "Potenza (W)",
   "enterPowerValue": "Inserire un valore di potenza positivo o negativo",
   "startDateTime": "Data e ora di inizio (Inizio < Fine)",
-  "stopDateTime": "Data e ora di fine (Inizio < Fine)"
+  "stopDateTime": "Data e ora di fine (Inizio < Fine)",
+  "tourLanguageTitle": "Lingua",
+  "tourLanguageContent": "Scegli la tua lingua preferita. L'interfaccia supporta inglese, tedesco, francese e italiano.",
+  "tourExploreTitle": "Esplora un'installazione",
+  "tourExploreContent": "Clicca su un'installazione per aprirla. Una volta dentro, clicca nuovamente sul pulsante del tour per una guida dettagliata di tutte le schede disponibili.",
+  "tourListTitle": "Elenco installazioni",
+  "tourListContent": "Cerca e sfoglia tutte le tue installazioni. Clicca su un'installazione per aprire la sua dashboard.",
+  "tourTreeTitle": "Vista cartelle",
+  "tourTreeContent": "Le tue installazioni organizzate in cartelle. Espandi le cartelle per trovare le installazioni per sito o posizione.",
+  "tourLiveTitle": "Dati in tempo reale",
+  "tourLiveContent": "Dati in tempo reale dal tuo sistema — stato della batteria, flusso di energia e stato del sistema, aggiornati continuamente.",
+  "tourOverviewTitle": "Panoramica",
+  "tourOverviewContent": "Riepilogo visivo con grafici — produzione, consumo e carica della batteria nel tempo. Usa i controlli della data per visualizzare un giorno specifico o un intervallo personalizzato.",
+  "tourBatteryviewTitle": "Vista batteria",
+  "tourBatteryviewContent": "Monitoraggio dettagliato della batteria — stato di carica (%), flusso di energia (kW), tensione e corrente per unità di batteria.",
+  "tourPvviewTitle": "Vista PV",
+  "tourPvviewContent": "Monitoraggio dei pannelli solari — visualizza i dati di produzione del tuo impianto fotovoltaico.",
+  "tourLogTitle": "Registro",
+  "tourLogContent": "Registri degli eventi — eventi di sistema, avvisi ed errori nel tempo.",
+  "tourInformationTitle": "Informazioni di sistema",
+  "tourInformationContent": "Dettagli dell'installazione — posizione, numeri di serie dei dispositivi e versioni firmware. Usa come riferimento se contatti l'assistenza.",
+  "tourReportTitle": "Rapporti energetici",
+  "tourReportContent": "Visualizza i dati energetici in kWh. Passa tra rapporti settimanali (lunedì–domenica), mensili e annuali per vedere quanta energia è stata prodotta, consumata o immagazzinata.",
+  "tourManageTitle": "Gestione accessi",
+  "tourManageContent": "Gestisci quali utenti hanno accesso a questa installazione e imposta i loro permessi.",
+  "tourConfigurationTitle": "Configurazione",
+  "tourConfigurationContent": "Visualizza e modifica le impostazioni del dispositivo per questa installazione.",
+  "tourHistoryTitle": "Cronologia",
+  "tourHistoryContent": "Registro delle azioni eseguite su questa installazione — chi ha cambiato cosa e quando."
 }

typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Menu/index.tsx

@@ -112,6 +112,7 @@ function HeaderMenu(props: HeaderButtonsProps) {
         sx={{
           color: isMobile ? 'white' : ''
         }}
+        data-tour="language-selector"
       >
         <List disablePadding component={Box} display="flex">
           <ListItem

typescript/frontend-marios2/src/layouts/SidebarLayout/Header/index.tsx

@@ -13,10 +13,12 @@ import {
   useTheme
 } from '@mui/material';
 import MenuTwoToneIcon from '@mui/icons-material/MenuTwoTone';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import { SidebarContext } from 'src/contexts/SidebarContext';
 import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone';
 import HeaderUserbox from './Userbox';
 import HeaderMenu from './Menu';
+import { useTour } from 'src/contexts/TourContext';
 
 const HeaderWrapper = styled(Box)(
   ({ theme }) => `
@@ -44,6 +46,7 @@ interface HeaderProps {
 
 function Header(props: HeaderProps) {
   const { sidebarToggle, toggleSidebar } = useContext(SidebarContext);
+  const { startTour } = useTour();
   const theme = useTheme();
   const isMobile = window.innerWidth <= 1280;
 
@@ -96,6 +99,14 @@ function Header(props: HeaderProps) {
       ></Stack>
 
       <Box display="flex" alignItems="center">
+        <Tooltip arrow title="Take a Tour">
+          <IconButton
+            sx={{ color: isMobile ? 'white' : theme.header.textColor }}
+            onClick={startTour}
+          >
+            <HelpOutlineIcon />
+          </IconButton>
+        </Tooltip>
         <HeaderMenu
           language={props.language}
           onSelectLanguage={props.onSelectLanguage}

typescript/frontend-marios2/src/layouts/SidebarLayout/index.tsx

@@ -1,6 +1,17 @@
-import { ReactNode } from 'react';
+import { ReactNode, useContext, useEffect, useState } from 'react';
 import { alpha, Box, lighten, useTheme } from '@mui/material';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride';
+import { useIntl, IntlShape } from 'react-intl';
+import { useTour } from 'src/contexts/TourContext';
+import { UserContext } from 'src/contexts/userContext';
+import { UserType } from 'src/interfaces/UserTypes';
+import {
+  buildSodiohomeCustomerTourSteps, buildSodiohomePartnerTourSteps, buildSodiohomeAdminTourSteps,
+  buildSalimaxCustomerTourSteps, buildSalimaxPartnerTourSteps, buildSalimaxAdminTourSteps,
+  buildSodistoregridCustomerTourSteps, buildSodistoregridPartnerTourSteps, buildSodistoregridAdminTourSteps,
+  buildSalidomoCustomerTourSteps, buildSalidomoPartnerTourSteps, buildSalidomoAdminTourSteps
+} from 'src/config/tourSteps';
 
 import Sidebar from './Sidebar';
 import Header from './Header';
@@ -11,11 +22,88 @@ interface SidebarLayoutProps {
   onSelectLanguage: (item: string) => void;
 }
 
+function getTourSteps(pathname: string, userType: UserType, intl: IntlShape, isInsideInstallation: boolean): Step[] {
+  const role = userType === UserType.admin ? 'admin'
+    : userType === UserType.partner ? 'partner'
+    : 'customer';
+
+  if (pathname.includes('/sodiohome_installations')) {
+    if (role === 'admin') return buildSodiohomeAdminTourSteps(intl, isInsideInstallation);
+    if (role === 'partner') return buildSodiohomePartnerTourSteps(intl, isInsideInstallation);
+    return buildSodiohomeCustomerTourSteps(intl, isInsideInstallation);
+  }
+  if (pathname.includes('/salidomo_installations')) {
+    if (role === 'admin') return buildSalidomoAdminTourSteps(intl, isInsideInstallation);
+    if (role === 'partner') return buildSalidomoPartnerTourSteps(intl, isInsideInstallation);
+    return buildSalidomoCustomerTourSteps(intl, isInsideInstallation);
+  }
+  if (pathname.includes('/sodistoregrid_installations')) {
+    if (role === 'admin') return buildSodistoregridAdminTourSteps(intl, isInsideInstallation);
+    if (role === 'partner') return buildSodistoregridPartnerTourSteps(intl, isInsideInstallation);
+    return buildSodistoregridCustomerTourSteps(intl, isInsideInstallation);
+  }
+  // Salimax (/installations/) and Sodistore Max (/sodistore_installations/)
+  if (role === 'admin') return buildSalimaxAdminTourSteps(intl, isInsideInstallation);
+  if (role === 'partner') return buildSalimaxPartnerTourSteps(intl, isInsideInstallation);
+  return buildSalimaxCustomerTourSteps(intl, isInsideInstallation);
+}
+
 const SidebarLayout = (props: SidebarLayoutProps) => {
   const theme = useTheme();
+  const intl = useIntl();
+  const { runTour, stopTour } = useTour();
+  const location = useLocation();
+  const { currentUser } = useContext(UserContext);
+  const [tourSteps, setTourSteps] = useState<Step[]>([]);
+  const [tourReady, setTourReady] = useState(false);
+
+  useEffect(() => {
+    if (!runTour) {
+      setTourReady(false);
+      return;
+    }
+    // Delay to let child components render their tour target elements
+    const timer = setTimeout(() => {
+      const userType = currentUser?.userType ?? UserType.client;
+      const isInsideInstallation = location.pathname.includes('/installation/');
+      const steps = getTourSteps(location.pathname, userType, intl, isInsideInstallation);
+      const filtered = steps.filter((step) => {
+        if (typeof step.target === 'string') {
+          return document.querySelector(step.target) !== null;
+        }
+        return true;
+      });
+      setTourSteps(filtered);
+      setTourReady(true);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [runTour, location.pathname, currentUser?.userType, intl]);
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { status } = data;
+    if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
+      stopTour();
+    }
+  };
 
   return (
     <>
+      <Joyride
+        steps={tourSteps}
+        run={tourReady}
+        callback={handleJoyrideCallback}
+        continuous
+        showSkipButton
+        showProgress
+        scrollToFirstStep
+        disableOverlayClose
+        styles={{
+          options: {
+            primaryColor: '#ffc04d',
+            zIndex: 10000
+          }
+        }}
+      />
       <Box
         sx={{
           flex: 1,