Merge pull request #2792 from proddy/dev

small updates

.clang-format

@@ -2,7 +2,7 @@ Language: Cpp
 BasedOnStyle: LLVM
 UseTab: Never
 IndentWidth: 4
-ColumnLimit: 220
+ColumnLimit: 160
 TabWidth: 4
 #BreakBeforeBraces: Custom
 BraceWrapping:

.clang-tidy

@@ -0,0 +1,152 @@
+---
+Checks: >-
+  *,
+  -abseil-*,
+  -android-*,
+  -boost-*,
+  -bugprone-branch-clone,
+  -bugprone-narrowing-conversions,
+  -bugprone-signed-char-misuse,
+  -bugprone-too-small-loop-variable,
+  -cert-dcl50-cpp,
+  -cert-err58-cpp,
+  -cert-oop57-cpp,
+  -cert-str34-c,
+  -clang-analyzer-optin.cplusplus.UninitializedObject,
+  -clang-analyzer-osx.*,
+  -clang-diagnostic-delete-abstract-non-virtual-dtor,
+  -clang-diagnostic-delete-non-abstract-non-virtual-dtor,
+  -clang-diagnostic-shadow-field,
+  -clang-diagnostic-sign-compare,
+  -clang-diagnostic-unused-variable,
+  -clang-diagnostic-unused-const-variable,
+  -cppcoreguidelines-avoid-c-arrays,
+  -cppcoreguidelines-avoid-goto,
+  -cppcoreguidelines-avoid-magic-numbers,
+  -cppcoreguidelines-init-variables,
+  -cppcoreguidelines-macro-usage,
+  -cppcoreguidelines-narrowing-conversions,
+  -cppcoreguidelines-non-private-member-variables-in-classes,
+  -cppcoreguidelines-owning-memory,
+  -cppcoreguidelines-pro-bounds-array-to-pointer-decay,
+  -cppcoreguidelines-pro-bounds-constant-array-index,
+  -cppcoreguidelines-pro-bounds-pointer-arithmetic,
+  -cppcoreguidelines-pro-type-const-cast,
+  -cppcoreguidelines-pro-type-cstyle-cast,
+  -cppcoreguidelines-pro-type-member-init,
+  -cppcoreguidelines-pro-type-reinterpret-cast,
+  -cppcoreguidelines-pro-type-static-cast-downcast,
+  -cppcoreguidelines-pro-type-union-access,
+  -cppcoreguidelines-pro-type-vararg,
+  -cppcoreguidelines-special-member-functions,
+  -fuchsia-default-arguments,
+  -fuchsia-multiple-inheritance,
+  -fuchsia-overloaded-operator,
+  -fuchsia-statically-constructed-objects,
+  -fuchsia-default-arguments-declarations,
+  -fuchsia-default-arguments-calls,
+  -google-build-using-namespace,
+  -google-explicit-constructor,
+  -google-readability-braces-around-statements,
+  -google-readability-casting,
+  -google-readability-todo,
+  -google-runtime-references,
+  -hicpp-*,
+  -llvm-else-after-return,
+  -llvm-header-guard,
+  -llvm-include-order,
+  -llvm-qualified-auto,
+  -llvmlibc-*,
+  -misc-non-private-member-variables-in-classes,
+  -misc-no-recursion,
+  -misc-unused-parameters,
+  -modernize-avoid-c-arrays,
+  -modernize-return-braced-init-list,
+  -modernize-use-auto,
+  -modernize-use-default-member-init,
+  -modernize-use-equals-default,
+  -modernize-use-trailing-return-type,
+  -mpi-*,
+  -objc-*,
+  -readability-braces-around-statements,
+  -readability-const-return-type,
+  -readability-convert-member-functions-to-static,
+  -readability-else-after-return,
+  -readability-implicit-bool-conversion,
+  -readability-isolate-declaration,
+  -readability-magic-numbers,
+  -readability-make-member-function-const,
+  -readability-named-parameter,
+  -readability-qualified-auto,
+  -readability-redundant-access-specifiers,
+  -readability-redundant-member-init,
+  -readability-redundant-string-init,
+  -readability-uppercase-literal-suffix,
+  -readability-use-anyofallof,
+  -warnings-as-errors
+WarningsAsErrors: '*'
+AnalyzeTemporaryDtors: false
+FormatStyle:     google
+CheckOptions:
+  - key:             google-readability-braces-around-statements.ShortStatementLines
+    value:           '1'
+  - key:             google-readability-function-size.StatementThreshold
+    value:           '800'
+  - key:             google-readability-namespace-comments.ShortNamespaceLines
+    value:           '10'
+  - key:             google-readability-namespace-comments.SpacesBeforeComments
+    value:           '2'
+  - key:             modernize-loop-convert.MaxCopySize
+    value:           '16'
+  - key:             modernize-loop-convert.MinConfidence
+    value:           reasonable
+  - key:             modernize-loop-convert.NamingStyle
+    value:           CamelCase
+  - key:             modernize-pass-by-value.IncludeStyle
+    value:           llvm
+  - key:             modernize-replace-auto-ptr.IncludeStyle
+    value:           llvm
+  - key:             modernize-use-nullptr.NullMacros
+    value:           'NULL'
+  - key:             readability-identifier-naming.LocalVariableCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ClassCase
+    value:           'CamelCase'
+  - key:             readability-identifier-naming.StructCase
+    value:           'CamelCase'
+  - key:             readability-identifier-naming.EnumCase
+    value:           'CamelCase'
+  - key:             readability-identifier-naming.EnumConstantCase
+    value:           'UPPER_CASE'
+  - key:             readability-identifier-naming.StaticConstantCase
+    value:           'UPPER_CASE'
+  - key:             readability-identifier-naming.StaticVariableCase
+    value:           'UPPER_CASE'
+  - key:             readability-identifier-naming.GlobalConstantCase
+    value:           'UPPER_CASE'
+  - key:             readability-identifier-naming.ParameterCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.PrivateMemberPrefix
+    value:           'NO_PRIVATE_MEMBERS_ALWAYS_USE_PROTECTED'
+  - key:             readability-identifier-naming.PrivateMethodPrefix
+    value:           'NO_PRIVATE_METHODS_ALWAYS_USE_PROTECTED'
+  - key:             readability-identifier-naming.ClassMemberCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ClassMemberCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ProtectedMemberCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ProtectedMemberSuffix
+    value:           '_'
+  - key:             readability-identifier-naming.FunctionCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ClassMethodCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ProtectedMethodCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.ProtectedMethodSuffix
+    value:           '_'
+  - key:             readability-identifier-naming.VirtualMethodCase
+    value:           'lower_case'
+  - key:             readability-identifier-naming.VirtualMethodSuffix
+    value:           ''

.devcontainer/devcontainer.json

@@ -0,0 +1,27 @@
+{
+	"name": "EMS-ESP Devcontainer",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {},
+		"ghcr.io/devcontainers-extra/features/pnpm:2": {},
+		"ghcr.io/devcontainers/features/python:1": {},
+		"ghcr.io/shyim/devcontainers-features/bun:0": {}
+	},
+
+	"forwardPorts": [
+		3000,
+		3080
+	],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "cd mock-api && pnpm install && cd .. && cd interface && pnpm install",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"platformio.platformio-ide"
+			]
+		}
+	}
+}

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,132 @@
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
+at [https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,35 +1,50 @@
 ---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
+name: Problem Report/Change Request
+about: Create a Report to help us improve
 ---
 
-*Before creating a new issue please check that you have:*
+<!-- Thanks for reporting an issue for this project. READ THIS FIRST:
 
-* *searched the existing [issues](https://github.com/emsesp/EMS-ESP32/issues) (both open and closed)*
-* *searched the [documentation help section](https://emsesp.github.io/docs)*
+Please DO NOT OPEN AN ISSUE if your EMS-ESP version is not the latest from the dev branch, please update your device before submitting your issue. Your issue might already be solved. The latest precompiled binaries of EMS-ESP can be downloaded from https://github.com/emsesp/EMS-ESP32/releases/tag/latest
 
-*Completing this template will help developers and contributors to address the issue. Try to be as specific and extensive as possible. If the information provided is not enough the issue will likely be closed.*
+Please take a few minutes to complete the requested information below.
 
-*You can now remove this line and the above ones. Text in italic is meant to be replaced by your own words. If any of the sections below are not relevant to the issue (for instance, the screenshots) then you can delete them.*
+-->
 
-**Bug description**
-*A clear and concise description of what the bug is. Mention which EMS-ESP version you're using.*
+### DESCRIPTION
 
-**Steps to reproduce**
-*Steps to reproduce the behavior.*
+_A clear and concise description of what the problem is or the change requested._
 
-**Expected behavior**
-*A clear and concise description of what you expected to happen.*
+### REQUESTED INFORMATION
 
-**Screenshots**
-*If applicable, add screenshots to help explain your problem.*
+_Make sure your have performed every step and checked the applicable boxes before submitting your issue. Thank you!_
 
-**Device information**
-*Copy-paste here the information as it is outputted by the device. You can get this information by from http://ems-esp.local/api?device=system&cmd=info*
+- [ ] Searched the issue in [issues](https://github.com/emsesp/EMS-ESP32/issues)
+- [ ] Searched the issue in [discussions](https://github.com/emsesp/EMS-ESP32/discussions)
+- [ ] Searched the issue in the [docs](https://docs.emsesp.org/Troubleshooting/)
+- [ ] Searched the issue in the [chat](https://discord.gg/3J3GgnzpyT)
+- [ ] Provide the System information in the area below, taken from `http://<IP>/api/system`
 
-**Additional context**
-*Add any other context about the problem here.*
+```json
+  Paste System information here....
+
+
+```
+
+### TO REPRODUCE
+
+_Steps to reproduce the behavior:_
+
+### EXPECTED BEHAVIOUR
+
+_A clear and concise description of what you expected to happen._
+
+### SCREENSHOTS
+
+_If applicable, add screenshots to help explain your issue._
+
+### ADDITIONAL CONTEXT
+
+_Add any other context about the issue here._
+
+**(Please remember to close the issue when it has been addressed)**

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: EMS-ESP Docs
+    url: https://docs.emsesp.org
+    about: All the information related to EMS-ESP.
+  - name: EMS-ESP Discussions and Support
+    url: https://github.com/emsesp/EMS-ESP32/discussions
+    about: EMS-ESP usage Questions, Feature Requests and Projects.
+  - name: EMS-ESP Users Chat
+    url: https://discord.gg/3J3GgnzpyT
+    about: Chat for feedback, questions and troubleshooting.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,26 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: enhancement
-assignees: ''
-
----
-
-*Before creating a new feature request please check that you have searched the existing [issues](https://github.com/emsesp/EMS-ESP32/issues) (both open and closed)*
-
-*Completing this template will help developers and contributors evaluating the feature. If the information provided is not enough the issue will likely be closed.*
-
-*You can now remove this line and the above ones. Text in italic is meant to be replaced by your own words. If any of the sections below are not relevant to the request then you can delete them.*
-
-**Is your feature request related to a problem? Please describe.**
-*A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]*
-
-**Describe the solution you'd like**
-*A clear and concise description of what you want to happen.*
-
-**Describe alternatives you've considered**
-*A clear and concise description of any alternative solutions or features you've considered.*
-
-**Additional context**
-*Add any other context or screenshots about the feature request here.*

.github/ISSUE_TEMPLATE/questions---troubleshooting.md

@@ -1,29 +0,0 @@
----
-name: Questions & Troubleshooting
-about: Anything not a bug or feature request
-title: ''
-labels: question
-assignees: ''
-
----
-
-*Before creating a new issue please check that you have:*
-
-* *searched the existing [issues](https://github.com/emsesp/EMS-ESP32/issues) (both open and closed)*
-* *searched the [documentation help section](https://emsesp.github.io/docs)*
-
-*Completing this template will help developers and contributors help you. Try to be as specific and extensive as possible. If the information provided is not enough the issue will likely be closed.*
-
-*You can now remove this line and the above ones. Text in italic is meant to be replaced by your own words. If any of the sections below are not relevant to the issue (for instance, the screenshots) then you can delete them.*
-
-**Question**
-*A clear and concise description of what the problem/doubt is.*
-
-**Screenshots**
-*If applicable, add screenshots to help explain your problem.*
-
-**Device information**
-*Copy-paste here the information as it is outputted by the device. You can get this information from http://ems-esp.local/api?device=system&cmd=info*
-
-**Additional context**
-*Add any other context about the problem here.*

.github/SUPPORT.md

@@ -0,0 +1 @@
+# Support

.github/workflows/check_code.yml

@@ -1,37 +0,0 @@
-name: Code Check
-
-on:
-  push:
-    branches: [ dev ]
-  pull_request:
-    branches: [ dev ] 
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ['cpp']
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-
-    - run: |
-         make
-         
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/dev_release.yml

@@ -0,0 +1,79 @@
+name: 'Build dev release'
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - 'src/emsesp_version.h'
+    branches:
+      - 'dev'
+
+permissions:
+  contents: write
+
+jobs:
+  pre-release:
+    name: 'Build Dev Release'
+    runs-on: ubuntu-latest
+    steps:
+        
+      - name: Install python 3.13
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.13'
+
+      - name: Install Node.js 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+  
+      - name: Enable Corepack
+        run: corepack enable pnpm
+
+      - name: Get the EMS-ESP version
+        id: build_info
+        run: |
+          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}'`
+          echo "VERSION=$version" >> $GITHUB_OUTPUT
+
+      - name: Install PlatformIO
+        run: |
+          python -m pip install --upgrade pip
+          pip install -U platformio
+          python -m pip install intelhex
+
+      - name: Build webUI
+        run: |
+          platformio run -e build_webUI
+
+      - name: Build modbus
+        run: |
+          platformio run -e build_modbus
+
+      - name: Build standalone
+        run: |
+          platformio run -e build_standalone
+
+      - name: Build all PIO target environments, from default_envs
+        run: |
+          platformio run
+
+      - name: Commit the generated files
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "chore: update generated files for v${{steps.build_info.outputs.VERSION}}"
+
+      - name: Create GitHub Release
+        id: 'automatic_releases'
+        uses: emsesp/action-automatic-releases@v1.0.0
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          title: Development Build v${{steps.build_info.outputs.VERSION}}
+          automatic_release_tag: 'latest'
+          prerelease: true
+          files: |
+            CHANGELOG_LATEST.md
+            ./build/firmware/*.*

.github/workflows/github-releases-to-discord.yml

@@ -0,0 +1,26 @@
+name: 'Publish releases to discord'
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  github-releases-to-discord:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+        
+      - name: GitHub Releases To Discord
+        uses: SethCohen/github-releases-to-discord@v1.13.1
+        with:
+          webhook_url: ${{ secrets.WEBHOOK_URL }}
+          color: '2105893'
+          username: 'Release Changelog'
+          avatar_url: 'https://cdn.discordapp.com/icons/816637840644505620/0b14718532d855c452903851b4f0c9a2.png'
+          content: '||@everyone||'
+          footer_title: 'Changelog'
+          footer_icon_url: 'https://cdn.discordapp.com/icons/816637840644505620/0b14718532d855c452903851b4f0c9a2.png'
+          footer_timestamp: true

.github/workflows/pr_check.yml

@@ -0,0 +1,32 @@
+name: 'Pre-check on PR'
+permissions:
+  contents: read
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: dev
+    paths:
+      - 'src/**'
+      
+jobs:
+  pre-release:
+    name: 'Automatic pre-release build'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Install python 3.13
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.13'
+
+      - name: Install PlatformIO
+        run: |
+          pip install wheel
+          pip install -U platformio
+
+      - name: Run unit tests
+        run: |
+          platformio run -e native-test -t exec

.github/workflows/pre_release.yml

@@ -1,61 +0,0 @@
-name: "pre-release"
-
-on:
-  push:
-    branches:
-      - "dev"
-
-jobs:
-  pre-release:
-
-    name: "Automatic pre-release build"
-    runs-on: ubuntu-latest
-
-    steps:
-
-      - name: Checkout source code
-        uses: actions/checkout@v2
-
-      - name: Get build variables
-        id: build_info
-        run: |
-          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
-          echo "::set-output name=version::$version"
-          platform=`grep -E '^#define EMSESP_PLATFORM' ./src/version.h | awk -F'"' '{print $2}'`
-          echo "::set-output name=platform::$platform"
-
-      - name: Compile locally
-        run: make
-
-      - name: Setup Python
-        uses: actions/setup-python@v2
-
-      - name: Install pio
-        run: |
-          python -m pip install --upgrade pip
-          pip install -U platformio
-          platformio upgrade
-          platformio update
-
-      - name: Build web
-        run: |
-          cd interface
-          npm install
-          npm run build
-
-      - name: Build firmware
-        run: |
-          platformio run -e ci
-
-      - name: Release
-        id: "automatic_releases"
-        uses: "marvinpinto/action-automatic-releases@latest"
-        with:
-          repo_token: "${{ secrets.GITHUB_TOKEN }}"
-          title: ${{steps.build_info.outputs.platform}} Development Build v${{steps.build_info.outputs.version}}
-          automatic_release_tag: "latest"
-          prerelease: true
-          files: |
-            CHANGELOG_LATEST.md
-            ./build/firmware/*.*
-

.github/workflows/sonar_check.yml

@@ -0,0 +1,33 @@
+# see https://github.com/marketplace/actions/sonarcloud-scan-for-c-and-c#usage
+name: Sonar Check
+permissions:
+  contents: read
+  
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - 'src/**'
+
+jobs:
+  build:
+    name: Build and analyze
+    if: github.repository == 'emsesp/EMS-ESP32'
+    runs-on: ubuntu-latest
+    env:
+      BUILD_WRAPPER_OUT_DIR: bw-output
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+      - name: Install Build Wrapper
+        uses: SonarSource/sonarqube-scan-action/install-build-wrapper@master
+      - name: Run Build Wrapper
+        run: build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make all
+      - name: SonarQube Scan
+        uses: SonarSource/sonarqube-scan-action@master
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+            

.github/workflows/stable_release.yml

@@ -0,0 +1,63 @@
+name: 'Build stable release'
+
+permissions:
+  contents: write
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  tagged-release:
+    name: 'Build Stable Release'
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Install python 3.13
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.13'
+
+      - name: Install Node.js 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+  
+      - name: Enable Corepack
+        run: corepack enable pnpm
+
+      - name: Install PlatformIO
+        run: |
+          python -m pip install --upgrade pip
+          pip install -U platformio
+          python -m pip install intelhex
+
+      - name: Build webUI
+        run: |
+          platformio run -e build_webUI
+
+      - name: Build modbus
+        run: |
+          platformio run -e build_modbus
+
+      - name: Build standalone
+        run: |
+          platformio run -e build_standalone
+
+      - name: Build all PIO target environments, from default_envs
+        run: |
+          platformio run
+
+      - name: Create GitHub Release
+        uses: emsesp/action-automatic-releases@v1.0.0
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          prerelease: false
+          files: |
+            CHANGELOG.md
+            ./build/firmware/*.*

.github/workflows/stale_issues.yml

@@ -0,0 +1,27 @@
+name: "Mark or close stale issues and PRs"
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+ 
+on:
+  schedule:
+    - cron: "30 1 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v10
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-stale: 30
+          days-before-close: 5
+          stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment otherwise this will be closed in 5 days."
+          stale-pr-message: "This PR has been automatically marked as stale because there has been no activity in last 30 days. It will be closed if no further activity occurs. Thank you for your contributions."
+          close-issue-message: "This issue was closed because it has been stalled for 5 days with no activity."
+          close-pr-message: "This PR was automatically closed because of being stale."
+          stale-pr-label: "stale"
+          stale-issue-label: "stale"
+          exempt-issue-labels: "bug,enhancement,pinned,security"
+          exempt-pr-labels: "bug,enhancement,pinned,security"

.github/workflows/tagged_release.yml

@@ -1,56 +0,0 @@
-name: "tagged-release"
-
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  tagged-release:
-
-    name: "Tagged Release"
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout source code
-        uses: actions/checkout@v2
-
-      - name: Get build variables
-        id: build_info
-        run: |
-          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
-          echo "::set-output name=version::$version"
-          platform=`grep -E '^#define EMSESP_PLATFORM' ./src/version.h | awk -F'"' '{print $2}'`
-          echo "::set-output name=platform::$platform"
-
-      - name: Compile locally
-        run: make
-
-      - name: Setup Python
-        uses: actions/setup-python@v2
-
-      - name: Install pio
-        run: |
-          python -m pip install --upgrade pip
-          pip install -U platformio
-          platformio upgrade
-          platformio update
-
-      - name: Build web
-        run: |
-          cd interface
-          npm install
-          npm run build
-
-      - name: Build firmware
-        run: |
-          platformio run -e ci
-
-      - name: Release
-        uses: "marvinpinto/action-automatic-releases@latest"
-        with:
-          repo_token: "${{ secrets.GITHUB_TOKEN }}"
-          prerelease: false
-          files: |
-            CHANGELOG.md
-            ./build/firmware/*.*

.github/workflows/test_release.yml

@@ -0,0 +1,75 @@
+name: 'Build test release'
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'test'
+
+permissions:
+  contents: read
+
+jobs:
+  pre-release:
+    name: 'Build Test Release'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+
+      - name: Install python 3.13
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.13'
+
+      - name: Install Node.js 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
+      - name: Enable Corepack
+        run: corepack enable pnpm
+
+      - name: Get the EMS-ESP version
+        id: build_info
+        run: |
+          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}'`
+          echo "VERSION=$version" >> $GITHUB_OUTPUT
+
+      - name: Install PlatformIO
+        run: |
+          python -m pip install --upgrade pip
+          pip install -U platformio
+          python -m pip install intelhex
+
+      - name: Build webUI
+        run: |
+          platformio run -e build_webUI
+
+      - name: Build modbus
+        run: |
+          platformio run -e build_modbus
+
+      - name: Build standalone
+        run: |
+          platformio run -e build_standalone
+          
+      - name: Build all PIO target environments, from default_envs
+        run: |
+          platformio run
+
+      - name: Create GitHub Release
+        id: 'automatic_releases'
+        uses: emsesp/action-automatic-releases@v1.0.0
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          title: Test Build v${{steps.build_info.outputs.VERSION}}
+          automatic_release_tag: 'test'
+          prerelease: true
+          files: |
+            CHANGELOG_LATEST.md
+            ./build/firmware/*.*
+            

.gitignore

@@ -1,28 +1,77 @@
 # vscode
-.vscode
+.vscode/c_cpp_properties.json
+.vscode/extensions.json
+.vscode/launch.json
 
-# build
-build/
+# c++ compiling
 .clang_complete
 .gcc-flags.json
 cppcheck.out.xml
-debug.log
 
 # platformio
 .pio
 pio_local.ini
-/.VSCodeCounter
 
 # OS specific
 .DS_Store
 *Thumbs.db
 
-# project specfic
-/scripts/stackdmp.txt
-emsesp
+# web specific
+build/
+dist/
 /data/www
-/lib/framework/WWWData.h
 /interface/build
-/interface/node_modules
+node_modules
 /interface/.eslintcache
+stats.html
+*.sln
+*.sw?
+.pnp.*
+analyse.html
+interface/vite.config.ts.timestamp*
+*.local
+src/ESP32React/WWWData.h
 
+# i18n generated files
+interface/src/i18n/i18n-react.tsx
+interface/src/i18n/i18n-types.ts
+interface/src/i18n/i18n-util.ts
+interface/src/i18n/i18n-util.sync.ts
+interface/src/i18n/i18n-util.async.ts
+
+# scripts
+test.sh
+scripts/run.sh
+scripts/__pycache__
+scripts/stackdmp.txt
+
+# sonar
+.scannerwork/
+sonar/
+bw-output/
+
+# standalone executable for testing
+emsesp
+interface/tsconfig.tsbuildinfo
+
+# python virtual environment
+venv/
+
+# cspell
+words-found-verbose.txt
+
+# sonarlint
+compile_commands.json
+
+# pioarduino + hybrid
+managed_components
+dependencies.lock
+CMakeLists.txt
+.dummy/*
+logs/*
+sdkconfig.*
+sdkconfig_tasmota_esp32
+pnpm-lock.yaml
+.cache/
+interface/.tsbuildinfo
+test/test_api/package-lock.json

.markdownlint.json

@@ -0,0 +1,6 @@
+{
+    "MD033": false,
+    "MD013": false,
+    "MD045": false,
+    "MD041": false
+}

.prettierignore

@@ -0,0 +1,6 @@
+*/node_modules/
+build/
+dist/*
+interface/src/i18n/*
+
+.typesafe-i18n.json

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 85,
+  "bracketSpacing": true,
+  "importOrder": ["^react", "^@mui/(.*)$", "^api*/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true
+} 

.sonarlint/connectedMode.json

@@ -0,0 +1,4 @@
+{
+    "sonarCloudOrganization": "emsesp",
+    "projectKey": "emsesp_EMS-ESP32"
+}

.vscode/settings.json

@@ -0,0 +1,101 @@
+{
+    "search.exclude": {
+      "**/.yarn": true,
+      "**/.pnp.*": true
+    },
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit"
+    },
+    "eslint.validate": [
+      "typescript"
+    ],
+    "eslint.codeActionsOnSave.rules": null,
+    "eslint.nodePath": "interface/.yarn/sdks",
+    "eslint.workingDirectories": ["interface"],
+    "prettier.prettierPath": "",
+    "typescript.enablePromptUseWorkspaceTsdk": true,
+    "files.associations": {
+      "*.tsx": "typescriptreact",
+      "*.tcc": "cpp",
+      "optional": "cpp",
+      "istream": "cpp",
+      "ostream": "cpp",
+      "ratio": "cpp",
+      "system_error": "cpp",
+      "array": "cpp",
+      "functional": "cpp",
+      "regex": "cpp",
+      "tuple": "cpp",
+      "type_traits": "cpp",
+      "utility": "cpp",
+      "string": "cpp",
+      "string_view": "cpp",
+      "atomic": "cpp",
+      "bitset": "cpp",
+      "cctype": "cpp",
+      "chrono": "cpp",
+      "clocale": "cpp",
+      "cmath": "cpp",
+      "condition_variable": "cpp",
+      "cstdarg": "cpp",
+      "cstddef": "cpp",
+      "cstdint": "cpp",
+      "cstdio": "cpp",
+      "cstdlib": "cpp",
+      "cstring": "cpp",
+      "ctime": "cpp",
+      "cwchar": "cpp",
+      "cwctype": "cpp",
+      "deque": "cpp",
+      "list": "cpp",
+      "unordered_map": "cpp",
+      "unordered_set": "cpp",
+      "vector": "cpp",
+      "exception": "cpp",
+      "algorithm": "cpp",
+      "iterator": "cpp",
+      "map": "cpp",
+      "memory": "cpp",
+      "memory_resource": "cpp",
+      "numeric": "cpp",
+      "random": "cpp",
+      "set": "cpp",
+      "fstream": "cpp",
+      "initializer_list": "cpp",
+      "iomanip": "cpp",
+      "iosfwd": "cpp",
+      "iostream": "cpp",
+      "limits": "cpp",
+      "mutex": "cpp",
+      "new": "cpp",
+      "sstream": "cpp",
+      "stdexcept": "cpp",
+      "streambuf": "cpp",
+      "thread": "cpp",
+      "cinttypes": "cpp",
+      "typeinfo": "cpp"
+    },
+    "todo-tree.filtering.excludeGlobs": [
+      "**/vendor/**",
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/bower_components/**",
+      "**/build/**",
+      "**/.vscode/**",
+      "**/.github/**",
+      "**/_output/**",
+      "**/*.min.*",
+      "**/*.map",
+      "**/ArduinoJson/**"
+    ],
+    "cSpell.enableFiletypes": [
+      "ini",
+      "makefile"
+    ],
+    "typescript.preferences.preferTypeOnlyAutoImports": true,
+    "sonarlint.pathToCompileCommands": "${workspaceFolder}/compile_commands.json",
+    "sonarlint.connectedMode.project": {
+      "connectionId": "emsesp",
+      "projectKey": "emsesp_EMS-ESP32"
+    }
+  }

CHANGELOG_LATEST.md

@@ -1,57 +1,77 @@
 # Changelog
 
+For more details go to [docs.emsesp.org](https://docs.emsesp.org/).
+
+## [3.7.3]
+
 ## Added
 
-- power settings, disabling BLE and turning off Wifi sleep
-- Rx and Tx counts to Heartbeat MQTT payload
-- ethernet support
-- id to info command to show only a heatingcircuit
-- add sending devices that are not listed to 0x07
-- extra MQTT boolean option for "ON" and "OFF"
-- support for chunked MQTT payloads to allow large data sets > 2kb
-- external Button support (#708) for resetting to factory defaults and other actions
-- new console set command in `system`, `set ethernet <profile>` for quickly enabling cabled ethernet connections without using the captive wifi portal
-- added in MQTT nested mode, for thermostat and mixer, like we had back in v2
-- cascade MC400 (product-id 210) (3.0.0b6), power values for heating sources (3.0.1b1)
-- values for wwMaxPower, wwFlowtempOffset
-- RC300 `thermostat temp -1` to clear temporary setpoint in auto mode
-- syslog port selectable (#744)
-- individual mqtt commands (#31)
-- board Profiles (#11)
+- analogsensor types: NTC and RGB-Led
+- Flag for HMC310 [#2465](https://github.com/emsesp/EMS-ESP32/issues/2465)
+- boiler auxheatersource [#2489](https://github.com/emsesp/EMS-ESP32/discussions/2489)
+- thermostat last error for RC100/300 [#2501](https://github.com/emsesp/EMS-ESP32/issues/2501)
+- boiler 0xC6 telegram [#1963](https://github.com/emsesp/EMS-ESP32/issues/1963)
+- CS6800i changes [#2448](https://github.com/emsesp/EMS-ESP32/issues/2448), [#2449](https://github.com/emsesp/EMS-ESP32/issues/2449)
+- charging pump [#2544](https://github.com/emsesp/EMS-ESP32/issues/2544)
+- hybrid CSH5800iG [#2569](https://github.com/emsesp/EMS-ESP32/issues/2569)
+- add EMS Device details to Home Assistant MQTT Discovery
+- disinfection command [#2601](https://github.com/emsesp/EMS-ESP32/issues/2601)
+- added new board profile for upcoming BBQKees E32V2.2
+- set differential pressure entity in Mixer device
+- set set climate action cooling/heating in HA [#2583](https://github.com/emsesp/EMS-ESP32/issues/2583)
+- Internal sensors of E32V2_2
+- FW200 display options [#2610](https://github.com/emsesp/EMS-ESP32/discussions/2610)
+- CR11 mode settings OFF/MANUAL depends on selTemp [#2437](https://github.com/emsesp/EMS-ESP32/issues/2437)
+- implemented eFuse settings for BBQKees boards to store model type and ESP chipset
+- Analogsensors for pulse output [#2624](https://github.com/emsesp/EMS-ESP32/discussions/2624)
+- Analogsensors frequency input [#2631](https://github.com/emsesp/EMS-ESP32/discussions/2631)
+- SRC plus thermostats [#2636](https://github.com/emsesp/EMS-ESP32/issues/2636)
+- Greenstar 2000 [#2645](https://github.com/emsesp/EMS-ESP32/issues/2645)
+- RC3xx `dhw modetype` [#2659](https://github.com/emsesp/EMS-ESP32/discussions/2659)
+- new boiler entities VR0,VR1, compressor speed [#2669](https://github.com/emsesp/EMS-ESP32/issues/2669)
+- solar temperature TS16 [#2690](https://github.com/emsesp/EMS-ESP32/issues/2690)
+- pumpmode enum for HT3 boilers, add commands for manual defrost, chimneysweeper [#2727](https://github.com/emsesp/EMS-ESP32/issues/2727)
+- pid settings [#2735](https://github.com/emsesp/EMS-ESP32/issues/2735)
+- refresh MQTT button added to MQTT Settings page
+- added LWT (Last Will and Testament) to MQTT entities in Home Assistant
+- added api/metrics endpoint for prometheus integration by @gr3enk
+ [#2774](https://github.com/emsesp/EMS-ESP32/pull/2774)
 
 ## Fixed
 
-- telegrams matched to masterthermostat 0x18
-- multiple roomcontrollers
-- readback after write with delay (give ems-devices time to set the value)
-- thermostat ES72/RC20 device 66 to command-set RC20_2
-- MQTT payloads not adding to queue when MQTT is re-connecting (fixes #369)
-- fix for HA topics with invalid command formats (#728)
-- wrong position of values #723, #732
-- OTA Upload via Web on OSX
-- Rx and Tx quality % would sometimes show > 100
+- dhw/switchtime [#2490](https://github.com/emsesp/EMS-ESP32/issues/2490)
+- switch to secure mqtt [#2492](https://github.com/emsesp/EMS-ESP32/issues/2492)
+- update link buttons [#2497](https://github.com/emsesp/EMS-ESP32/issues/2497)
+- refresh scheduler states [#2502](https://github.com/emsesp/EMS-ESP32/discussions/2502)
+- also rebuild HA config on mqtt connect for scheduler, custom and shower
+- FB100 controls the hc, not the master [#2510](https://github.com/emsesp/EMS-ESP32/issues/2510)
+- IPM DHW module, [#2524](https://github.com/emsesp/EMS-ESP32/issues/2524)
+- charge optimization [#2543](https://github.com/emsesp/EMS-ESP32/issues/2543)
+- shower active state retained, shows correctly in HA
+- MQTT Command Topic with slashes [#2571](https://github.com/emsesp/EMS-ESP32/issues/2571)
+- Add pulsed water meter input to V1.3 gateway with Lilygo S3 [#2550](https://github.com/emsesp/EMS-ESP32/issues/2550)
+- fix missing long 10-second press of Button to perform a factory reset
+- fix wwMaxPower on Junkers ZBS14 [#2609](https://github.com/emsesp/EMS-ESP32/issues/2609)
+- ventilation bypass state from telegram 0x55C [#1197](https://github.com/emsesp/EMS-ESP32/issues/1197)
+- set selflowtemp for ems+ boilers [#2641](https://github.com/emsesp/EMS-ESP32/discussions/2641)
+- syslog timestamp [#2704](https://github.com/emsesp/EMS-ESP32/issues/2704)
+- fixed FS format command [#2720](https://github.com/emsesp/EMS-ESP32/discussions/2720)
+- dhw priority setting to boiler and mixer, telegrams 0x2CC, 0x2CD, etc.
 
 ## Changed
 
-- changed how telegram parameters are rendered for mqtt, console and web (#632)
-- split `show values` in smaller packages (edited)
-- extended length of IP/hostname from 32 to 48 chars (#676)
-- check flowsensor for `tap_water_active`
-- mqtt prefixed with `Base`
-- count Dallas sensor fails
-- switch from SPIFFS to LITTLEFS
-- added ID to MQTT payloads which is the Device's product ID and used in HA to identify a unique HA device
-- increased MQTT buffer and reduced wait time between publishes
-- updated to the latest ArduinoJson library
-- some names of mqtt-tags like in v2.2.1
-- new ESP32 partition side to allow for smoother OTA and fallback
-- network Gateway IP is optional (#682)emsesp/EMS-ESP
-- moved to a new GitHub repo https://github.com/emsesp/EMS-ESP32
-- invert LED changed to Hide LED. Default is off.
-- renamed Scan Network to Scan WiFi Network
-- added version to cmd=settings
-- Allow both WiFi and Ethernet together, fall back to AP when Ethernet disconnects
-
-## Removed
-
-- Shower Alert (disabled for now)
+- show console log with ISO date/time [#2533](https://github.com/emsesp/EMS-ESP32/discussions/2533)
+- remove ESP32 CPU temperature
+- updated core libraries like AsyncTCP, AsyncWebServer and Modbus
+- remove command `scan deep`
+- ignore repeated `forceheatingoff` commands [#2641](https://github.com/emsesp/EMS-ESP32/discussions/2641)
+- optimized web for better performance by adding lazy loading and caching
+- internal system analog sensors (core_voltage, supply_voltage and gateway_temperature) cannot be accidentally removed
+- double click button reconnects EMS-ESP to AP
+- place system message command in side scheduler loop to reduce stack memory usage by 2KB
+- syslog mark interval set to 1 hour
+- handle process_telegram in oneloop
+- improved GPIO validation for Analog Sensors and System GPIOs
+- entities with no values are greyed out in the Web UI in the Customization page
+- added System Status to Web Status page
+- show number on entities and supported languages in log on boot

CONTRIBUTING.md

@@ -1,5 +1,3 @@
-<img src="/media/EMS-ESP_logo_dark.png" alt="Logo" align="right" height="76"/>
-
 # Contributing
 
 **Any contribution helps EMS-ESP get better for the entire community!**
@@ -8,7 +6,7 @@ Everybody is welcome and invited to contribute to the EMS-ESP Project by:
 
 - providing Pull Requests (Features, Fixes, suggestions)
 - testing new released features and report issues on your EMS equipment
-- contributing to missing [documentation](https://emsesp.github.io/docs)
+- contributing to missing [documentation](https://docs.emsesp.org)
 
 This document describes rules that are in effect for this repository, meant for handling issues by contributors in the issue tracker and PRs.
 
@@ -24,17 +22,17 @@ This document describes rules that are in effect for this repository, meant for
 
 ## Triaging of Issues/PR's
 
-1.	Any contributor to the project can participate in the triaging process, if he/she chooses to do so.
-2.	An issue that needs to be closed, either due to not complying with this policy, or for other reasons, should be closed by a contributor.
-3.	Issues that are accepted should be marked with appropriate labels.
-4.	Issues that could impact functionality for many users should be considered severe.
-5.	Issues caused by the SDK or chip should not be marked severe, as there usually isn’t much to be done. Common sense should be applied when deciding. Such issues should be documented in the documentation, for reference by users.
-6.	Issues with feature requests should be discussed for viability/desirability.
-7.	Feature requests or changes that are meant to address a very specific/limited use case, especially if at the expense of increased code complexity, may be denied, or may be required to be redesigned, generalized, or simplified.
-8.	Feature requests that are not accompanied by a PR:
-    * could be closed immediately (denied).
-    * could be closed after some predetermined period of time (left as candidate for somebody to pick up).
-9.	In some cases, feedback may be requested from the issue reporter, either as additional info for clarification, additional testing, or other. If no feedback is provided, the issue may be closed by a contributor or after 40 days by the STALE bot.
+1. Any contributor to the project can participate in the triaging process, if he/she chooses to do so.
+2. An issue that needs to be closed, either due to not complying with this policy, or for other reasons, should be closed by a contributor.
+3. Issues that are accepted should be marked with appropriate labels.
+4. Issues that could impact functionality for many users should be considered severe.
+5. Issues caused by the SDK or chip should not be marked severe, as there usually isn’t much to be done. Common sense should be applied when deciding. Such issues should be documented in the documentation, for reference by users.
+6. Issues with feature requests should be discussed for viability/desirability.
+7. Feature requests or changes that are meant to address a very specific/limited use case, especially if at the expense of increased code complexity, may be denied, or may be required to be redesigned, generalized, or simplified.
+8. Feature requests that are not accompanied by a PR:
+   - could be closed immediately (denied).
+   - could be closed after some predetermined period of time (left as candidate for somebody to pick up).
+9. In some cases, feedback may be requested from the issue reporter, either as additional info for clarification, additional testing, or other. If no feedback is provided, the issue may be closed by a contributor or after 40 days by the STALE bot.
 
 ## Pull requests
 
@@ -42,24 +40,24 @@ A Pull Request (PR) is the process where code modifications are managed in GitHu
 
 The process is straight-forward.
 
- - Read [How to get faster PR reviews](https://github.com/kubernetes/community/blob/master/contributors/guide/pull-requests.md#best-practices-for-faster-reviews) by Kubernetes (but skip step 0)
- - Fork the EMS-ESP Repository [git repository](https://github.com/emsesp/EMS-ESP32).
- - Write/Change the code in your Fork for a new feature, bug fix, new sensor, optimization, etc.
- - Ensure tests work.
- - Create a Pull Request against the [**dev**](https://github.com/emsesp/EMS-ESP32/tree/dev) branch of EMS-ESP.
+- Read [How to get faster PR reviews](https://github.com/kubernetes/community/blob/master/contributors/guide/pull-requests.md#best-practices-for-faster-reviews) by Kubernetes (but skip step 0)
+- Fork the EMS-ESP Repository [git repository](https://github.com/emsesp/EMS-ESP32).
+- Write/Change the code in your Fork for a new feature, bug fix, new sensor, optimization, etc.
+- Ensure tests work.
+- Create a Pull Request against the [**dev**](https://github.com/emsesp/EMS-ESP32/tree/dev) branch of EMS-ESP.
 
 1. All pull requests must be done against the dev branch.
-2. Make sure code is formatting per the `.clang-format`
-3. Only relevant files should be touched (Also beware if your editor has auto-formatting feature enabled).
-4. Only one feature/fix should be added per PR.
-5. PRs that don't compile (fail in CI Tests) or cause coding errors will not be merged. Please fix the issue. Same goes for PRs that are raised against older commit in dev - you might need to rebase and resolve conflicts.
-6. All pull requests should undergo peer review by at least one contributor other than the creator, excepts for the owner.
-7. All pull requests should consider updates to the documentation.
-8. Pull requests that address an outstanding issue, particularly an issue deemed to be severe, should be given priority.
-9. If a PR is accepted, then it should undergo review and updated based on the feedback provided, then merged.
-10. By submitting a PR, it is needed to use the provided PR template and check all boxes, performing the required tasks and accepting the CLA.
-11. Pull requests that don't meet the above will be denied and closed.
-
+2. Make sure code is formatting per the `.clang-format`.
+3. Make sure any new code is clearly commented explaining what the function/logic does.
+4. Only relevant files should be touched (Also beware if your editor has auto-formatting feature enabled).
+5. Only one feature/fix should be added per PR.
+6. PRs that don't compile (fail in CI Tests) or cause coding errors will not be merged. Please fix the issue. Same goes for PRs that are raised against older commit in dev - you might need to rebase and resolve conflicts.
+7. All pull requests should undergo peer review by at least one contributor other than the creator, excepts for the owner.
+8. All pull requests should consider updates to the documentation.
+9. Pull requests that address an outstanding issue, particularly an issue deemed to be severe, should be given priority.
+10. If a PR is accepted, then it should undergo review and updated based on the feedback provided, then merged.
+11. By submitting a PR, it is needed to use the provided PR template and check all boxes, performing the required tasks and accepting the CLA.
+12. Pull requests that don't meet the above will be denied and closed.
 
 ## Semantic Commit Messages
 
@@ -71,7 +69,7 @@ Format: `<type>(<scope>): <subject>`
 
 ## Example
 
-```
+```text
 feat: add hat wobble
 ^--^  ^------------^
 |     |
@@ -92,13 +90,13 @@ More Examples:
 
 References:
 
-- https://www.conventionalcommits.org/
+- <https://www.conventionalcommits.org/>
 
---------------------------------------
+---
 
 ## Contributor License Agreement (CLA)
 
-```
+```text
 By making a contribution to this project, I certify that:
 
 (a) The contribution was created in whole or in part by me and I
@@ -123,7 +121,7 @@ By making a contribution to this project, I certify that:
 
 This Contributor License Agreement (CLA) was adopted on April 1st, 2019.
 
-The text of this license is available under the [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/).  It is based on the Linux [Developer Certificate Of Origin](http://elinux.org/Developer_Certificate_Of_Origin), but is modified to explicitly use the GPL-3.0 license and not mention sign-off (due to GitHub.com keeps an historial, with your user name, of PRs' commits and all editions on PR's comments).
+The text of this license is available under the [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/). It is based on the Linux [Developer Certificate Of Origin](http://elinux.org/Developer_Certificate_Of_Origin), but is modified to explicitly use the GPL-3.0 license and not mention sign-off (due to GitHub.com keeps an historial, with your user name, of PRs' commits and all editions on PR's comments).
 
 **Why a CLA ?**
 
@@ -133,10 +131,10 @@ A CLA is a legal document in which you state _you are entitled to contribute the
 
 CLA is a safety because it also ensures that once you have provided a contribution, you cannot try to withdraw permission for its use at a later date. People can therefore use that software, confident that they will not be asked to stop using pieces of the code at a later date.
 
-A __license__ grants "outbound" rights to the user of project.
+A **license** grants "outbound" rights to the user of project.
 
-A __CLA__ enables a contributor to grant "inbound" rights to a project.
+A **CLA** enables a contributor to grant "inbound" rights to a project.
 
 <Other>
 <A table should be maintained for relating maintainers and components. When triaging, this is essential to figure out if someone in particular should be consulted about specific changes.>
-<A stable release cadence should be established, e.g.: every month.>
+<A stable release cadence should be established, e.g.: every month.>

Makefile

@@ -1,9 +1,41 @@
 #
 # GNUMakefile for EMS-ESP
-# (c) 2020 Paul Derbyshire
 #
-NUMJOBS=${NUMJOBS:-" -j4 "}
-MAKEFLAGS+="j "
+
+_mkfile_path := $(abspath $(lastword $(MAKEFILE_LIST)))
+I := $(patsubst %/,%,$(dir $(_mkfile_path)))
+
+ifneq ($(words $(MAKECMDGOALS)),1)
+.DEFAULT_GOAL = all
+%:
+	@$(MAKE) $@ --no-print-directory -rRf $(firstword $(MAKEFILE_LIST))
+else
+ifndef ECHO
+T := $(shell $(MAKE) $(MAKECMDGOALS) --no-print-directory \
+      -nrRf $(firstword $(MAKEFILE_LIST)) \
+      ECHO="COUNTTHIS" | grep -c "COUNTTHIS")
+N := x
+C = $(words $N)$(eval N := x $N)
+ECHO = python3 $(I)/scripts/echo_progress.py --stepno=$C --nsteps=$T
+endif
+
+# Optimize parallel build configuration
+UNAME_S := $(shell uname -s)
+JOBS ?= 1
+ifeq ($(UNAME_S),Linux)
+    EXTRA_CPPFLAGS = -D LINUX
+	JOBS := $(shell nproc)
+endif
+ifeq ($(UNAME_S),Darwin)
+    EXTRA_CPPFLAGS = -D OSX -Wno-tautological-constant-out-of-range-compare
+	JOBS := $(shell sysctl -n hw.ncpu)
+endif
+
+# Set optimal parallel build settings
+MAKEFLAGS += -j$(JOBS) -l$(shell echo $$(($(JOBS) * 2)))
+
+# $(info Number of jobs: $(JOBS))
+
 #----------------------------------------------------------------------
 # Project Structure
 #----------------------------------------------------------------------
@@ -13,27 +45,29 @@ MAKEFLAGS+="j "
 # INCLUDES  is a list of directories containing header files
 # LIBRARIES is a list of directories containing libraries, this must be the top level containing include and lib
 #----------------------------------------------------------------------
-
-#TARGET    := $(notdir $(CURDIR))
 TARGET    := emsesp
 BUILD     := build
-SOURCES   := src lib_standalone lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src src/devices lib/ArduinoJson/src lib/PButton src/test 
-INCLUDES  := lib/ArduinoJson/src lib_standalone lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src lib/uuid-telnet/src lib/uuid-syslog/src lib/PButton src/devices lib src
-LIBRARIES := 
+SOURCES   := src/core src/devices src/web src/test       lib_standalone lib/semver lib/espMqttClient/src lib/espMqttClient/src/*         lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src   lib/PButton 
+INCLUDES  := src/core src/devices src/web src/test lib/* lib_standalone lib/semver lib/espMqttClient/src lib/espMqttClient/src/Transport lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src   lib/uuid-telnet/src lib/uuid-syslog/src
+LIBRARIES :=
 
 CPPCHECK = cppcheck
-CHECKFLAGS = -q --force --std=c++11
+CHECKFLAGS = -q --force --std=gnu++17
 
 #----------------------------------------------------------------------
 # Languages Standard
 #----------------------------------------------------------------------
-C_STANDARD   := -std=c11
-CXX_STANDARD := -std=c++11
+C_STANDARD   := -std=c17
+CXX_STANDARD := -std=gnu++17
 
 #----------------------------------------------------------------------
 # Defined Symbols
 #----------------------------------------------------------------------
-DEFINES += -DARDUINOJSON_ENABLE_STD_STRING=1 -DARDUINOJSON_ENABLE_ARDUINO_STRING -DEMSESP_DEBUG -DEMSESP_STANDALONE -DEMSESP_TEST -DEMSESP_DEFAULT_BOARD_PROFILE=\"LOLIN\"
+DEFINES += -DARDUINOJSON_ENABLE -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSON_USE_DOUBLE=0
+DEFINES += -DEMSESP_STANDALONE -DEMSESP_TEST -DEMSESP_DEBUG -DEMC_RX_BUFFER_SIZE=1500
+DEFINES += $(ARGS)
+
+DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_TX_MODE=8 -DEMSESP_DEFAULT_VERSION=\"3.7.3-dev\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32S3\"
 
 #----------------------------------------------------------------------
 # Sources & Files
@@ -41,16 +75,21 @@ DEFINES += -DARDUINOJSON_ENABLE_STD_STRING=1 -DARDUINOJSON_ENABLE_ARDUINO_STRING
 OUTPUT     := $(CURDIR)/$(TARGET)
 SYMBOLS    := $(CURDIR)/$(BUILD)/$(TARGET).out
 
-CSOURCES   := $(foreach dir,$(SOURCES),$(wildcard $(dir)/*.c))
-CXXSOURCES := $(foreach dir,$(SOURCES),$(wildcard $(dir)/*.cpp))
+# Optimize source discovery - use shell find for better performance
+CSOURCES   := $(shell find $(SOURCES) -name "*.c" 2>/dev/null)
+CXXSOURCES := $(shell find $(SOURCES) -name "*.cpp" 2>/dev/null)
 
-OBJS       := $(patsubst %,$(BUILD)/%.o,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)) )
-DEPS       := $(patsubst %,$(BUILD)/%.d,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)) ) 
+OBJS       := $(patsubst %,$(BUILD)/%.o,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)))
+DEPS       := $(patsubst %,$(BUILD)/%.d,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)))
 
-INCLUDE    += $(addprefix -I,$(foreach dir,$(INCLUDES), $(wildcard $(dir))))
-INCLUDE    += $(addprefix -I,$(foreach dir,$(LIBRARIES),$(wildcard $(dir)/include)))
+# Optimize include path discovery
+INCLUDE_DIRS := $(shell find $(INCLUDES) -type d 2>/dev/null)
+LIBRARY_INCLUDES := $(shell find $(LIBRARIES) -name "include" -type d 2>/dev/null)
+INCLUDE    += $(addprefix -I,$(INCLUDE_DIRS) $(LIBRARY_INCLUDES))
 
-LDLIBS     += $(addprefix -L,$(foreach dir,$(LIBRARIES),$(wildcard $(dir)/lib)))
+# Optimize library path discovery
+LIBRARY_DIRS := $(shell find $(LIBRARIES) -name "lib" -type d 2>/dev/null)
+LDLIBS     += $(addprefix -L,$(LIBRARY_DIRS))
 
 #----------------------------------------------------------------------
 # Compiler & Linker
@@ -66,17 +105,19 @@ CXX := /usr/bin/g++
 # CXXFLAGS  C++ Compiler Flags
 # LDFLAGS   Linker Flags
 #----------------------------------------------------------------------
-CPPFLAGS  += $(DEFINES) $(INCLUDE)
-CPPFLAGS  += -ggdb
-CPPFLAGS  += -g3
-CPPFLAGS  += -Os
+CPPFLAGS  += $(DEFINES) $(DEFAULTS) $(INCLUDE)
+CPPFLAGS  += -ggdb -g3 -MMD
+CPPFLAGS  += -flto=auto
+CPPFLAGS  += -Wall -Wextra -Werror -Wswitch-enum
+CPPFLAGS  += -Wno-unused-parameter -Wno-missing-braces -Wno-vla-cxx-extension
+CPPFLAGS  += -ffunction-sections -fdata-sections -fno-exceptions -fno-rtti -fno-threadsafe-statics
+CPPFLAGS  += -Os -DNDEBUG
+
+CPPFLAGS  += $(EXTRA_CPPFLAGS)
 
 CFLAGS    += $(CPPFLAGS)
-# CFLAGS    += -Wall
-# CFLAGS    += -Wno-unused -Wno-restrict
-# CFLAGS    += -Wextra
-
-CXXFLAGS  += $(CFLAGS) -MMD
+CXXFLAGS  += $(CPPFLAGS)
+LDFLAGS =
 
 #----------------------------------------------------------------------
 # Compiler & Linker Commands
@@ -91,7 +132,8 @@ else
     LD := $(CXX)
 endif
 
-#DEPFLAGS   += -MF $(BUILD)/$*.d
+# Dependency file generation
+DEPFLAGS   += -MF $(BUILD)/$*.d -MT $@
 
 LINK.o      = $(LD) $(LDFLAGS) $(LDLIBS) $^ -o $@
 COMPILE.c   = $(CC) $(C_STANDARD) $(CFLAGS) $(DEPFLAGS) -c $< -o $@
@@ -108,29 +150,38 @@ COMPILE.cpp = $(CXX) $(CXX_STANDARD) $(CXXFLAGS) $(DEPFLAGS) -c $< -o $@
 .SUFFIXES:
 .INTERMEDIATE:
 .PRECIOUS: $(OBJS) $(DEPS)
-.PHONY: all clean help
+.PHONY: all clean help cppcheck run
+
+# Enable second expansion for more flexible rules
+.SECONDEXPANSION:
 
 #----------------------------------------------------------------------
 # Targets
 #----------------------------------------------------------------------
+.PHONY: all
+.SILENT: $(OUTPUT)
+
 all: $(OUTPUT)
+	@$(ECHO) Build complete.
 
 $(OUTPUT): $(OBJS)
 	@mkdir -p $(@D)
+	@$(ECHO) Linking $@
 	$(LINK.o)
-	$(SYMBOLS.out)
-
+	
 $(BUILD)/%.o: %.c
 	@mkdir -p $(@D)
-	$(COMPILE.c)
+	@$(ECHO) Compiling $@
+	@$(COMPILE.c)
 
 $(BUILD)/%.o: %.cpp
 	@mkdir -p $(@D)
-	$(COMPILE.cpp)
+	@$(ECHO) Compiling $@
+	@$(COMPILE.cpp)
 
 $(BUILD)/%.o: %.s
 	@mkdir -p $(@D)
-	$(COMPILE.s)
+	@$(COMPILE.s)
 
 cppcheck: $(SOURCES)
 	$(CPPCHECK) $(CHECKFLAGS) $^
@@ -138,11 +189,22 @@ cppcheck: $(SOURCES)
 run: $(OUTPUT)
 	@$<
 
+.PHONY: clean
+
 clean:
-	@$(RM) -r $(BUILD) $(OUTPUT)
+	@$(RM) -rf $(BUILD) $(OUTPUT)
 
 help:
-	@echo available targets: all run clean
-	@echo $(OUTPUT)
+	@echo "Available targets:"
+	@echo "  all      - Build the project (default)"
+	@echo "  run      - Build and run the executable"
+	@echo "  clean    - Remove build artifacts"
+	@echo "  cppcheck - Run static analysis"
+	@echo "  help     - Show this help message"
+	@echo ""
+	@echo "Output: $(OUTPUT)"
+	@echo "Jobs: $(JOBS)"
 
 -include $(DEPS)
+
+endif

README.md

@@ -1,101 +1,119 @@
-# ![logo](media/EMS-ESP_logo_dark.png)
+<div align="center">
+  <p align="center">
+    <a href="#">
+      <img src="https://raw.githubusercontent.com/emsesp/EMS-ESP32/dev/media/favicon/android-chrome-512x512.png" height="100px" />
+    </a>
+  </p>
+</div>
 
-**EMS-ESP** is an open-source firmware for the Espressif ESP8266 and ESP32 microcontroller that communicates with **EMS** (Energy Management System) based equipment from manufacturers like Bosch, Buderus, Nefit, Junkers, Worcester and Sieger.
+<h1 align="center">EMS-ESP</h1>
 
-This is the firmware for the ESP32.
+<p align="center">
+  <a href="https://emsesp.org">
+    <img src="https://img.shields.io/badge/Website-0077b5?style=for-the-badge&logo=googlehome&logoColor=white" alt="Website" />
+  </a>
+  <a href="https://github.com/emsesp/EMS-ESP32/blob/dev/CONTRIBUTING.md">
+    <img src="https://img.shields.io/badge/Contribute-ff4785?style=for-the-badge&logo=git&logoColor=white" alt="Contribute" />
+  </a>
+  <a href="https://docs.emsesp.org">
+    <img src="https://img.shields.io/badge/Documentation-0077b5?style=for-the-badge&logo=googledocs&logoColor=white" alt="Guides" />
+  </a>
+  <a href="https://discord.gg/3J3GgnzpyT">
+    <img src="https://img.shields.io/badge/Discord-7289da?style=for-the-badge&logo=discord&logoColor=white" alt="Discord" />
+  </a>
+  <a href="https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md">
+    <img src="https://img.shields.io/badge/Changelog-6c5ce7?style=for-the-badge&logo=git&logoColor=white" alt="Changelog" />
+  </a>
+</p>
 
 [![version](https://img.shields.io/github/release/emsesp/EMS-ESP32.svg?label=Latest%20Release)](https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md)
 [![release-date](https://img.shields.io/github/release-date/emsesp/EMS-ESP32.svg?label=Released)](https://github.com/emsesp/EMS-ESP32/commits/main)
 [![license](https://img.shields.io/github/license/emsesp/EMS-ESP32.svg)](LICENSE)
-[![Codacy Badge](https://app.codacy.com/project/badge/Grade/9441142f49424ef891e8f5251866ee6b)](https://www.codacy.com/gh/emsesp/EMS-ESP32/dashboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=emsesp/EMS-ESP32&amp;utm_campaign=Badge_Grade)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=emsesp_EMS-ESP32&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=emsesp_EMS-ESP32)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/9441142f49424ef891e8f5251866ee6b)](https://app.codacy.com/gh/emsesp/EMS-ESP32/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
 [![downloads](https://img.shields.io/github/downloads/emsesp/EMS-ESP32/total.svg)](https://github.com/emsesp/EMS-ESP32/releases)
-[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/emsesp/EMS-ESP32.svg)](http://isitmaintained.com/project/emsesp/EMS-ESP32 "Average time to resolve an issue")
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/emsesp/EMS-ESP32.svg)](http://isitmaintained.com/project/emsesp/EMS-ESP32 "Percentage of issues still open")
-<br/>
 [![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/3J3GgnzpyT)
 
-If you like **EMS-ESP**, please give it a star, or fork it and contribute!
-
 [![GitHub stars](https://img.shields.io/github/stars/emsesp/EMS-ESP32.svg?style=social&label=Star)](https://github.com/emsesp/EMS-ESP32/stargazers)
-[![GitHub forks](https://img.shields.io/github/forks/emsesp/EMS-ESP32.svg?style=social&label=Fork)](https://github.com/emsesp/EMS-ES32P/network)
+[![GitHub forks](https://img.shields.io/github/forks/emsesp/EMS-ESP32.svg?style=social&label=Fork)](https://github.com/emsesp/EMS-ESP32/network)
 [![donate](https://img.shields.io/badge/donate-PayPal-blue.svg)](https://www.paypal.com/paypalme/prderbyshire/2)
 
-Note, EMS-ESP requires a small hardware circuit that can convert the EMS bus data to be read by the microcontroller. These can be ordered at https://bbqkees-electronics.nl.
+**EMS-ESP** is an open-source firmware for the Espressif ESP32 microcontroller to communicate with **EMS** (Energy Management System) compatible equipment from manufacturers such as Bosch, Buderus, Nefit, Junkers, Worcester, Sieger, elm.leblanc and iVT.
 
-<img src="media/gateway-integration.jpg" width=40%>
+It requires a small circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl> or custom built.
 
----
+## 📦&nbsp; **Key Features**
 
-## **Features**
+- Compatible with EMS, EMS+, EMS2, EMS Plus, Logamatic EMS, Junkers 2-wire, Heatronic 3 and 4
+- Supporting over 120 different EMS compatible devices such as thermostats, boilers, heat pumps, mixing units, solar modules, connect modules, ventilation units, switches and more
+- Easy to add external Temperature and Analog sensors that are attached to GPIO pins on the ESP32 board
+- A multi-user, multi-language web interface to change settings and monitor incoming data
+- A simple to use console, accessible via Serial/USB or Telnet for advanced operations and detailed monitoring
+- Native integration with Home Assistant, Domoticz, openHAB and Modbus
+- Easy setup and install with automatic updates
+- Simulation of remote thermostats
+- Localized in 11 languages, and customizable to rename any device or sensor
+- Extendable by adding own custom EMS entities
+- Expandable via adding user-built external modules
+- A powerful Scheduler to automate tasks and trigger events based data changes
+- A Notification service to alert you of important events
 
-- Compatible with both ESP8266 and ESP32
-- A multi-user secure web interface to change settings and monitor the data
-- A console, accessible via Serial and Telnet for more monitoring
-- Native support for Home Assistant via [MQTT Discovery](https://www.home-assistant.io/docs/mqtt/discovery/)
-- Can run standalone as an independent WiFi Access Point or join an existing WiFi network
-- Easy first-time configuration via a web Captive Portal
-- Support for more than [70 EMS devices](https://emsesp.github.io/docs/#/Supported-EMS-Devices) (boilers, thermostats, solar modules, mixer modules, heat pumps, gateways)
-  
-## **Screenshots**
+## 🚀&nbsp; **Installing**
 
-### Web Interface:
+Head over to [download.emsesp.org](https://download.emsesp.org) for instructions on how to install EMS-ESP. There is also further details on which boards are supported in [this section](https://docs.emsesp.org/Installing/) of the documentation.
 
-| | |
-| --- | --- |
-| <img src="media/web_settings.PNG"> | <img src="media/web_status.PNG"> |
-| <img src="media/web_devices.PNG"> | <img src="media/web_mqtt.PNG"> |
+## 📋&nbsp; **Documentation**
 
-### Telnet Console:
-<img src="media/console.PNG" width=80% height=80%>
+Visit [emsesp.org](https://docs.emsesp.org) for more details on how to install and configure EMS-ESP. There is also a collection of Frequently Asked Questions and Troubleshooting tips with example customizations from the community.
 
-### In Home Assistant:
-<img src="media/ha_lovelace.PNG" width=80% height=80%>
-  
-## **Installing**
+## 💬&nbsp; **Getting Support**
 
-Refer to the [official documentation](https://emsesp.github.io/docs) to how to install the firmware and configure it. The documentation is being constantly updated as new features and settings are added.
+To chat with the community reach out on our [Discord Server](https://discord.gg/3J3GgnzpyT).
 
-You can choose to use an pre-built firmware image or compile the code yourself:
+If you find an issue or have a request, see [how to request support](https://docs.emsesp.org/Support/) on how to submit a bug report or feature request.
 
-* [Uploading a pre-built firmware build](https://emsesp.github.io/docs/#/Uploading-firmware)
-* [Building the firmware from source code and flashing manually](https://emsesp.github.io/docs/#/Building-firmware)
+## 🎥&nbsp; **Live Demo**
 
-## **Support Information**
+For a live demo go to [demo.emsesp.org](https://demo.emsesp.org). Pick a language from the sign on page and log in with any username or password. Note not all features are operational as it's based on static data.
 
-If you're looking for support on **EMS-ESP** there are some options available:
+## 💖&nbsp; **Contributors**
 
-### Documentation
+EMS-ESP is a project created by [proddy](https://github.com/proddy) and owned and maintained by both [proddy](https://github.com/proddy) and [MichaelDvP](https://github.com/MichaelDvP) with support from [BBQKees Electronics](https://bbqkees-electronics.nl).
 
-* [Official EMS-ESP Documentation](https://emsesp.github.io/docs): For information on how to build and upload the firmware
-* [FAQ and Troubleshooting](https://emsesp.github.io/docs/#/Troubleshooting): For information on common problems and solutions. See also [BBQKees's wiki](https://bbqkees-electronics.nl/wiki/gateway/troubleshooting.html)
+If you like **EMS-ESP**, please give it a ✨ on GitHub, or even better fork it and contribute. You can also offer a small donation. This is an open-source project maintained by volunteers, and your support is greatly appreciated.
 
-### Support Community
+## 📦&nbsp; **Building**
 
-* [Discord Server](https://discord.gg/3J3GgnzpyT): For support, troubleshooting and general questions. You have better chances to get fast answers from members of the community
-* [Search in Issues](https://github.com/emsesp/EMS-ESP32/issues): You might find an answer to your question by searching current or closed issues
+To build the web interface only, run `platformio run -e build_webUI`. This will install the necessary dependencies and build the web interface and also create the embedded code used need to build the firmware. You can run the web interface locally by going to the `interface` directory and running `pnpm standalone`.
 
-### Developer's Community
+To build the firmware, run `platformio run`. This will build the firmware for all ESP32 modules and place the binaries in the `build/firmware` folder. If you want to configure the build for a single platform create a local `pio_local.ni` file in the root directory (see example in `pio_local.ini_example`).
 
-* [Bug Report](https://github.com/emsesp/EMS-ESP32/issues/new?template=bug_report.md): For reporting Bugs
-* [Feature Request](https://github.com/emsesp/EMS-ESP32/issues/new?template=feature_request.md): For requesting features/functions
-* [Troubleshooting](https://github.com/emsesp/EMS-ESP32/issues/new?template=questions---troubleshooting.md): As a last resort, you can open new *Troubleshooting & Question* issue on GitHub if the solution could not be found using the other channels. Just remember: the more info you provide the more chances you'll have to get an accurate answer
+## 📢&nbsp; **Libraries used**
 
-## **Contributing**
+- [esp8266-react](https://github.com/rjwats/esp8266-react) originally by @rjwats for the core framework that provides the Web UI, which has been heavily modified
+- [uuid-\*](https://github.com/nomis/mcu-uuid-console) from @nomis. The console, syslog, telnet and logging are based off these awesome open source libraries
+- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) for all the JSON processing
+- [espMqttClient](https://github.com/bertmelis/espMqttClient) for the MQTT client
+- [ESPAsyncWebServer](https://github.com/ESP32Async/ESPAsyncWebServer) and [AsyncTCP](https://github.com/ESP32Async/AsyncTCP) for the Web server
 
-You can contribute to EMS-ESP by
-- providing Pull Requests (Features, Fixes, suggestions)
-- testing new released features and report issues on your EMS equipment
-- contributing to missing [Documentation](https://emsesp.github.io/docs)
-
-## **Credits**
-
-A shout out to the people helping EMS-ESP get to where it is today...
-- **@MichaelDvP** for all his amazing contributions and patience. Specifically for the improved uart library, thermostat and mixer logic.
-- **@BBQKees** for his endless testing and building the awesome circuit boards
-- **@rjwats** for his [esp8266-react](https://github.com/rjwats/esp8266-react) framework that provides the new Web UI
-- **@nomis** for his core [console](https://github.com/nomis/mcu-uuid-console), telnet and syslog core libraries  
-- plus everyone else providing suggestions, PRs and the odd donation that keeps this project open source. Thanks!
-
-## **License**
+## 📜&nbsp; **License**
 
 This program is licensed under GPL-3.0
+
+## **Screenshots**
+
+### Web Interface
+
+|                                    |                                  |
+| ---------------------------------- | -------------------------------- |
+| ![Web Settings](media/web_settings.png) | ![Web Status](media/web_status.png) |
+| ![Web Devices](media/web_devices.png)  | ![Web MQTT](media/web_mqtt.png)   |
+| ![Web Edit](media/web_edit.png)     | ![Web Log](media/web_log.png)    |
+
+### Telnet Console
+
+![Console](media/console0.png)
+
+### Home Assistant
+
+![Home Assistant](media/ha_lovelace.png)

RELEASENOTES.md

@@ -1,6 +0,0 @@
-# ![logo](https://github.com/emsesp/EMS-ESP32/blob/main/media/EMS-ESP_logo_dark.png)
-
-# Firmware Installation
-
-Follow the instructions in the [documentation](https://emsesp.github.io/docs) on how to install the firmware binaries in the Assets below.
-

RELEASENOTES_DEV.md

@@ -1,8 +0,0 @@
-# ![logo](https://github.com/emsesp/EMS-ESP32/blob/main/media/EMS-ESP_logo_dark.png)
-
-This is a snapshot of the current "beta" development code and firmware binaries for the ESP32. It has all the latest features and fixes but please be aware that this is still experimental firmware used for testing and thus may contain the odd bug. Use at your own risk and remember to report an issue if you find something unusual.
-
-# Firmware Installation
-
-Follow the instructions in the [documentation](https://emsesp.github.io/docs) on how to install the firmware binaries in the Assets below.
-

boards/c3_mini_4M.json

@@ -0,0 +1,45 @@
+{
+    "build": {
+      "arduino": {
+        "ldscript": "esp32c3_out.ld"
+      },
+      "core": "esp32",
+      "extra_flags": [
+        "-DTASMOTA_SDK",
+        "-DARDUINO_LOLIN_C3_MINI",
+        "-DARDUINO_USB_MODE=1",
+        "-DARDUINO_USB_CDC_ON_BOOT=1"
+      ],
+      "f_cpu": "160000000L",
+      "f_flash": "80000000L",
+      "flash_mode": "qio",
+      "hwids": [
+        [
+          "0X303A",
+          "0x1001"
+        ]
+      ],
+      "mcu": "esp32c3",
+      "variant": "lolin_c3_mini"
+    },
+    "connectivity": [
+      "wifi"
+    ],
+    "debug": {
+      "openocd_target": "esp32c3.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "WEMOS LOLIN C3 Mini",
+    "upload": {
+      "flash_size": "4MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 4194304,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "url": "https://www.wemos.cc/en/latest/c3/c3_mini.html",
+    "vendor": "WEMOS"
+  }

boards/esp32dev.json

@@ -0,0 +1,34 @@
+{
+    "build": {
+      "core": "esp32",
+      "f_cpu": "240000000L",
+      "f_flash": "40000000L",
+      "flash_mode": "dio",
+      "mcu": "esp32",
+      "variant": "esp32"
+    },
+    "connectivity": [
+      "wifi",
+      "ethernet"
+    ],
+    "debug": {
+      "openocd_board": "esp32.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "Espressif ESP32 Dev Module",
+    "upload": {
+      "flash_size": "16MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 16777216,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "download": {
+        "speed": 230400
+    },
+    "url": "https://en.wikipedia.org/wiki/ESP32",
+    "vendor": "Espressif"
+  }

boards/s2_4M_P.json

@@ -0,0 +1,47 @@
+{
+    "build": {
+      "arduino": {
+        "ldscript": "esp32s2_out.ld"
+      },
+      "core": "esp32",
+      "extra_flags": [
+        "-DBOARD_HAS_PSRAM",
+        "-DTASMOTA_SDK",
+        "-DARDUINO_USB_CDC_ON_BOOT=1",
+        "-DARDUINO_USB_MODE=0"
+      ],
+      "f_cpu": "240000000L",
+      "f_flash": "80000000L",
+      "flash_mode": "dio",
+      "hwids": [
+        [
+          "0X303A",
+          "0x80C2"
+        ]
+      ],
+      "mcu": "esp32s2",
+      "variant": "lolin_s2_mini"
+    },
+    "connectivity": [
+      "wifi"
+    ],
+    "debug": {
+      "openocd_target": "esp32s2.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "WEMOS LOLIN S2 Mini",
+    "upload": {
+      "flash_size": "4MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 4194304,
+      "use_1200bps_touch": true,
+      "wait_for_upload_port": true,
+      "require_upload_port": true,
+      "speed": 921600
+    },
+    "url": "https://www.wemos.cc/en/latest/s2/s2_mini.html",
+    "vendor": "WEMOS"
+  }

boards/s3_16M_P.json

@@ -0,0 +1,44 @@
+{
+    "build": {
+      "arduino": {
+        "ldscript": "esp32s3_out.ld",
+        "memory_type": "qio_opi"
+      },
+      "core": "esp32",
+      "extra_flags": [
+        "-DBOARD_HAS_PSRAM",
+        "-DARDUINO_USB_MODE=1",
+        "-DARDUINO_USB_CDC_ON_BOOT=1",
+        "-DARDUINO_RUNNING_CORE=1",
+        "-DARDUINO_EVENT_RUNNING_CORE=1"
+      ],
+      "f_cpu": "240000000L",
+      "f_flash": "80000000L",
+      "flash_mode": "qio",
+      "mcu": "esp32s3",
+      "variant": "esp32s3"
+    },
+    "connectivity": [
+      "wifi"
+    ],
+    "debug": {
+      "openocd_target": "esp32s3.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "Espressif ESP32-S3 16M Flash OPI PSRAM, 4608KB Code/OTA, 2MB FS",
+    "upload": {
+      "flash_size": "16MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 16777216,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "download": {
+      "speed": 230400
+    },
+    "url": "https://docs.espressif.com/projects/esp-idf/en/latest/esp32s3/hw-reference/esp32s3/",
+    "vendor": "Espressif"
+  }

boards/s3_32M_P.json

@@ -0,0 +1,37 @@
+{
+    "build": {
+      "arduino":{
+        "memory_type": "opi_opi"
+      },
+      "core": "esp32",
+      "extra_flags": "-DBOARD_HAS_PSRAM",
+      "f_cpu": "240000000L",
+      "f_flash": "80000000L",
+      "flash_mode": "opi",
+      "mcu": "esp32s3",
+      "variant": "esp32s3"
+    },
+    "connectivity": [
+      "wifi"
+    ],
+    "debug": {
+      "openocd_target": "esp32s3.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "Espressif ESP32-S3 32M Flash OPI PSRAM, 4608KB Code/OTA, 2MB FS",
+    "upload": {
+      "flash_size": "32MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 33554432,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "download": {
+      "speed": 230400
+    },
+    "url": "https://docs.espressif.com/projects/esp-idf/en/latest/esp32s3/hw-reference/esp32s3/",
+    "vendor": "Espressif"
+  }

boards/s_16M.json

@@ -0,0 +1,35 @@
+{
+    "build": {
+      "core": "esp32",
+      "extra_flags": "-DTASMOTA_SDK",
+      "f_cpu": "240000000L",
+      "f_flash": "40000000L",
+      "flash_mode": "dio",
+      "mcu": "esp32",
+      "variant": "esp32"
+    },
+    "connectivity": [
+      "wifi",
+      "ethernet"
+    ],
+    "debug": {
+      "openocd_target": "esp32.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "Espressif ESP32 16M Flash, 4608KB Code/OTA, 2MB FS",
+    "upload": {
+      "flash_size": "16MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 16777216,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "download": {
+      "speed": 230400
+    },
+    "url": "https://en.wikipedia.org/wiki/ESP32",
+    "vendor": "Espressif"
+  }

boards/s_16M_P.json

@@ -0,0 +1,35 @@
+{
+    "build": {
+      "core": "esp32",
+      "extra_flags": "-DBOARD_HAS_PSRAM",
+      "f_cpu": "240000000L",
+      "f_flash": "80000000L",
+      "flash_mode": "dio",
+      "mcu": "esp32",
+      "variant": "esp32"
+    },
+    "connectivity": [
+      "wifi",
+      "ethernet"
+    ],
+    "debug": {
+      "openocd_target": "esp32.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "Espressif ESP32 16M Flash DIO PSRAM, 4608KB Code/OTA, 2MB FS",
+    "upload": {
+      "flash_size": "16MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 16777216,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "download": {
+      "speed": 230400
+    },
+    "url": "https://en.wikipedia.org/wiki/ESP32",
+    "vendor": "Espressif"
+  }

boards/s_4M.json

@@ -0,0 +1,34 @@
+{
+    "build": {
+      "core": "esp32",
+      "extra_flags": "-DTASMOTA_SDK",
+      "f_cpu": "240000000L",
+      "f_flash": "40000000L",
+      "flash_mode": "dio",
+      "mcu": "esp32",
+      "variant": "esp32"
+    },
+    "connectivity": [
+      "wifi"
+    ],
+    "debug": {
+      "openocd_target": "esp32.cfg"
+    },
+    "frameworks": [
+      "arduino",
+      "espidf"
+    ],
+    "name": "Tasmota ESP32 4M Flash, 4608KB Code/OTA, 2MB FS",
+    "upload": {
+      "flash_size": "4MB",
+      "maximum_ram_size": 327680,
+      "maximum_size": 4194304,
+      "require_upload_port": true,
+      "speed": 460800
+    },
+    "download": {
+      "speed": 230400
+    },
+    "url": "https://en.wikipedia.org/wiki/ESP32",
+    "vendor": "Espressif"
+  }

boards/seeed_xiao_esp32c6.json

@@ -0,0 +1,48 @@
+{
+  "build": {
+    "core": "esp32",
+    "extra_flags": [
+      "-DARDUINO_XIAO_ESP32C6",
+      "-DARDUINO_USB_MODE=1",
+      "-DARDUINO_USB_CDC_ON_BOOT=1"
+    ],
+    "f_cpu": "160000000L",
+    "f_flash": "80000000L",
+    "flash_mode": "qio",
+    "hwids": [
+      [
+        "0x2886",
+        "0x0046"
+      ],
+      [
+        "0x303a",
+        "0x1001"
+      ]
+    ],
+    "mcu": "esp32c6",
+    "variant": "XIAO_ESP32C6"
+  },
+  "connectivity": [
+    "wifi",
+    "bluetooth",
+    "zigbee",
+    "thread"
+  ],
+  "debug": {
+    "openocd_target": "esp32c6.cfg"
+  },
+  "frameworks": [
+    "arduino",
+    "espidf"
+  ],
+  "name": "Seeed Studio XIAO ESP32C6",
+  "upload": {
+    "flash_size": "4MB",
+    "maximum_ram_size": 327680,
+    "maximum_size": 4194304,
+    "require_upload_port": true,
+    "speed": 460800
+  },
+  "url": "https://wiki.seeedstudio.com/XIAO_ESP32C6_Getting_Started/",
+  "vendor": "Seeed Studio"
+}

cspell.json

@@ -0,0 +1,39 @@
+{
+    "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
+    "version": "0.2",
+    "dictionaryDefinitions": [
+      {
+        "name": "project-words",
+        "path": "./project-words.txt",
+        "addWords": true
+      }
+    ],
+    "dictionaries": ["project-words"],
+    "ignorePaths": [
+    "node_modules", 
+    "compile_commands.json", 
+    "WWWData.h", "**/venv/**", 
+    "lib/eModbus", 
+    "lib/ESPAsyncWebServer", 
+    "lib/espMqttClient", 
+    "analyse.html", 
+    "dist", 
+    "**/*.csv", 
+    "**/*.md", 
+    "**/*.py", 
+    "locale_translations.h", 
+    "TZ.tsx", 
+    "**/*.txt",
+    "build/**", 
+    "**/i18n/**", 
+    "/project-words.txt",
+    "Makefile",
+    "**/*.ini",
+    "**/*.json",
+    "src/core/modbus_entity_parameters.hpp",
+    "sdkconfig.*",
+    "managed_components/**",
+    "pnpm-*.yaml",
+    "vite.config.ts"
+  ]
+  }

data/pre_load.json

@@ -0,0 +1,85 @@
+{
+    "type": "settings",
+    "Network": {
+      "ssid": "my_wifi_ssid",
+      "bssid": "",
+      "password": "my_wifi_password",
+      "hostname": "ems-esp"
+    },
+    "AP": {
+      "provision_mode": 2,
+      "ssid": "ems-esp",
+      "password": "ems-esp-neo",
+      "channel": 1,
+      "ssid_hidden": false,
+      "max_clients": 4,
+      "local_ip": "192.168.4.1",
+      "gateway_ip": "192.168.4.1",
+      "subnet_mask": "255.255.255.0"
+    },
+    "MQTT": {
+      "enableTLS": false,
+      "rootCA": "",
+      "enabled": false,
+      "host": "127.0.0.1",
+      "port": 1883,
+      "base": "ems-esp",
+      "username": "username",
+      "password": "password",
+      "client_id": "ems-esp",
+      "entity_format": 1,
+      "publish_time_boiler": 10,
+      "publish_time_thermostat": 10,
+      "publish_time_solar": 10,
+      "publish_time_mixer": 10,
+      "publish_time_water": 10,
+      "publish_time_other": 60,
+      "publish_time_sensor": 10,
+      "publish_time_heartbeat": 60,
+      "mqtt_qos": 0,
+      "mqtt_retain": false,
+      "ha_enabled": false,
+      "nested_format": 1,
+      "discovery_prefix": "homeassistant",
+      "discovery_type": 0,
+      "publish_single": false,
+      "publish_single2cmd": false,
+      "send_response": false
+    },
+    "NTP": {
+      "enabled": true,
+      "server": "time.google.com",
+      "tz_label": "Europe/Amsterdam",
+      "tz_format": "CET-1CEST,M3.5.0,M10.5.0/3"
+    },
+    "Security": {
+      "jwt_secret": "ems-esp-neo",
+      "users": [
+        {
+          "username": "admin",
+          "password": "admin",
+          "admin": true
+        },
+        {
+          "username": "guest",
+          "password": "guest",
+          "admin": false
+        }
+      ]
+    },
+    "Settings": {
+      "board_profile": "S3",
+      "locale": "en",
+      "tx_mode": 1,
+      "ems_bus_id": 11,
+      "boiler_heatingoff": false,
+      "hide_led": true,
+      "telnet_enabled": true,
+      "notoken_api": false,
+      "analog_enabled": true,
+      "fahrenheit": false,
+      "bool_format": 1,
+      "bool_dashboard": 1,
+      "enum_format": 1
+    }
+  }

docs/dump_telegrams.csv

@@ -0,0 +1,232 @@
+telegram_type_id,name,is_fetched
+0x04,UBAFactory,fetched
+0x06,RCTime, 
+0x0A,EasyMonitor,fetched
+0x10,UBAErrorMessage1, 
+0x11,UBAErrorMessage2, 
+0x12,RCErrorMessage, 
+0x13,RCErrorMessage2, 
+0x14,UBATotalUptime,fetched
+0x15,UBAMaintenanceData, 
+0x16,UBAParameters,fetched
+0x18,UBAMonitorFast, 
+0x19,UBAMonitorSlow, 
+0x1A,UBASetPoints, 
+0x1C,UBAMaintenanceStatus, 
+0x1E,WM10TempMessage, 
+0x23,JunkersSetMixer,fetched
+0x27,UBASettingsWW,fetched
+0x28,WeatherComp,fetched
+0x2A,MC110Status, 
+0x2E,Meters, 
+0x33,UBAParameterWW,fetched
+0x34,UBAMonitorWW, 
+0x35,UBAFlags, 
+0x37,WWSettings,fetched
+0x38,WWTimer,fetched
+0x39,WWCircTimer,fetched
+0x3A,RC30WWSettings,fetched
+0x3B,Energy, 
+0x3D,RC35Set, 
+0x3E,RC35Monitor, 
+0x3F,RC35Timer, 
+0x40,RC30Temp, 
+0x41,RC30Monitor, 
+0x42,RC35Timer2, 
+0x47,RC35Set, 
+0x48,RC35Monitor, 
+0x49,RC35Timer, 
+0x4C,RC35Timer2, 
+0x51,RC35Set, 
+0x52,RC35Monitor, 
+0x53,RC35Timer, 
+0x56,RC35Timer2, 
+0x5B,RC35Set, 
+0x5C,RC35Monitor, 
+0x5D,RC35Timer, 
+0x60,RC35Timer2, 
+0x96,SM10Config,fetched
+0x97,SM10Monitor, 
+0x9C,WM10MonitorMessage, 
+0x9D,WM10SetMessage, 
+0xA2,RCError, 
+0xA3,RCOutdoorTemp, 
+0xA5,IBASettings,fetched
+0xA7,RC30Set, 
+0xA9,RC30Vacation,fetched
+0xAA,MMConfigMessage,fetched
+0xAB,MMStatusMessage, 
+0xAC,MMSetMessage, 
+0xAF,RC20Remote, 
+0xB0,RC10Set, 
+0xB1,RC10Monitor, 
+0xBB,HybridSettings,fetched
+0xBF,ErrorMessage, 
+0xC0,RCErrorMessage, 
+0xC2,UBAErrorMessage3, 
+0xC6,UBAErrorMessage3, 
+0xD1,UBAOutdoorTemp, 
+0xE3,UBAMonitorSlowPlus2, 
+0xE4,UBAMonitorFastPlus, 
+0xE5,UBAMonitorSlowPlus, 
+0xE6,UBAParametersPlus,fetched
+0xE9,UBAMonitorWWPlus, 
+0xEA,UBAParameterWWPlus,fetched
+0x0101,ISM1Set,fetched
+0x0103,ISM1StatusMessage,fetched
+0x0104,ISM2StatusMessage, 
+0x010C,IPMStatusMessage, 
+0x011E,JunkersDisp,fetched
+0x012E,HPEnergy1, 
+0x013B,HPEnergy2, 
+0x0165,JunkersSet, 
+0x0166,JunkersSet, 
+0x0167,JunkersSet, 
+0x0168,JunkersSet, 
+0x016E,Absent,fetched
+0x016F,JunkersMonitor, 
+0x0170,JunkersMonitor, 
+0x0171,JunkersMonitor, 
+0x0172,JunkersMonitor, 
+0x0179,JunkersSet, 
+0x017A,JunkersSet, 
+0x017B,JunkersSet, 
+0x017C,JunkersSet, 
+0x01D3,JunkersDhw,fetched
+0x023A,RC300OutdoorTemp,fetched
+0x023E,PVSettings,fetched
+0x0240,RC300Settings,fetched
+0x0241,RC300Settings,fetched
+0x0267,RC300Floordry, 
+0x0269,RC300Holiday,fetched
+0x0291,HPMode,fetched
+0x0292,HPMode,fetched
+0x0293,HPMode,fetched
+0x0294,HPMode,fetched
+0x029B,RC300Curves, 
+0x029C,RC300Curves, 
+0x029D,RC300Curves, 
+0x029E,RC300Curves, 
+0x029F,RC300Curves, 
+0x02A0,RC300Curves, 
+0x02A1,RC300Curves, 
+0x02A2,RC300Curves, 
+0x02A5,RC300Monitor,fetched
+0x02A6,RC300Monitor, 
+0x02A7,RC300Monitor, 
+0x02A8,RC300Monitor, 
+0x02A9,RC300Monitor, 
+0x02AA,RC300Monitor, 
+0x02AB,RC300Monitor, 
+0x02AC,RC300Monitor, 
+0x02AF,RC300Summer, 
+0x02B0,RC300Summer, 
+0x02B1,RC300Summer, 
+0x02B2,RC300Summer, 
+0x02B3,RC300Summer, 
+0x02B4,RC300Summer, 
+0x02B5,RC300Summer, 
+0x02B6,RC300Summer, 
+0x02B9,RC300Set, 
+0x02BA,RC300Set, 
+0x02BB,RC300Set, 
+0x02BC,RC300Set, 
+0x02BD,RC300Set, 
+0x02BE,RC300Set, 
+0x02BF,RC300Set, 
+0x02C0,RC300Set, 
+0x02CC,HPPressure,fetched
+0x02CD,MMPLUSConfigMessage, 
+0x02D6,HPPump2,fetched
+0x02D7,MMPLUSStatusMessage, 
+0x02E0,UBASetPoints, 
+0x02F5,RC300WWmode,fetched
+0x02F6,RC300WW2mode,fetched
+0x0313,MMPLUSConfigMessage_WWC,fetched
+0x031B,RC300WWtemp,fetched
+0x031D,RC300WWmode2, 
+0x031E,RC300WWmode2, 
+0x0331,MMPLUSStatusMessage_WWC, 
+0x0358,SM100SystemConfig,fetched
+0x035A,SM100CircuitConfig,fetched
+0x035C,SM100HeatAssist,fetched
+0x035D,SM100Circuit2Config,fetched
+0x035F,SM100Config1,fetched
+0x0361,SM100Differential,fetched
+0x0362,SM100Monitor, 
+0x0363,SM100Monitor2, 
+0x0364,SM100Status, 
+0x0366,SM100Config, 
+0x036A,SM100Status2, 
+0x0380,SM100CollectorConfig,fetched
+0x038E,SM100Energy,fetched
+0x0391,SM100Time,fetched
+0x0421,RC300Set2, 
+0x0422,RC300Set2, 
+0x0423,RC300Set2, 
+0x0424,RC300Set2, 
+0x043F,CRHolidays,fetched
+0x0467,HPSet, 
+0x0468,HPSet, 
+0x0469,HPSet, 
+0x046A,HPSet, 
+0x0471,RC300Summer2, 
+0x0472,RC300Summer2, 
+0x0473,RC300Summer2, 
+0x0474,RC300Summer2, 
+0x0475,RC300Summer2, 
+0x0476,RC300Summer2, 
+0x0477,RC300Summer2, 
+0x0478,RC300Summer2, 
+0x047B,HP2, 
+0x0484,HPSilentMode,fetched
+0x0485,HpCooling,fetched
+0x0486,HpInConfig,fetched
+0x0488,HPValve,fetched
+0x048A,HpPool,fetched
+0x048B,HPPumps,fetched
+0x048D,HpPower,fetched
+0x048F,HpTemperatures, 
+0x0491,HPAdditionalHeater,fetched
+0x0492,HpHeaterConfig,fetched
+0x0494,UBAEnergySupplied, 
+0x0495,UBAInformation, 
+0x0499,HPDhwSettings,fetched
+0x049C,HPSettings2,fetched
+0x049D,HPSettings3,fetched
+0x04A2,HpInput,fetched
+0x04A5,HPFan,fetched
+0x04A7,HPPowerLimit,fetched
+0x04AA,HPPower2,fetched
+0x04AE,HPEnergy,fetched
+0x04AF,HPMeters,fetched
+0x055C,VentilationSet,fetched
+0x056B,VentilationMode,fetched
+0x0583,VentilationMonitor, 
+0x0585,Blowerspeed, 
+0x0587,Bypass, 
+0x05BA,HpPoolStatus,fetched
+0x05D9,Airquality, 
+0x0772,HIUSettings, 
+0x0779,HIUMonitor, 
+0x07A5,SM100wwCirc,fetched
+0x07A6,SM100wwParam,fetched
+0x07AA,SM100wwStatus, 
+0x07AB,SM100wwCommand, 
+0x07AC,SM100wwParam1, 
+0x07AD,SM100ValveStatus, 
+0x07AE,SM100wwKeepWarm,fetched
+0x07D6,SM100wwTemperature, 
+0x07E0,SM100wwStatus2,fetched
+0x0935,EM100SetMessage,fetched
+0x0936,EM100OutMessage, 
+0x0937,EM100TempMessage, 
+0x0938,EM100InputMessage, 
+0x0939,EM100MonitorMessage, 
+0x093A,EM100ConfigMessage, 
+0x0998,HPSettings,fetched
+0x0999,HPFunctionTest,fetched
+0x099A,HPStarts, 
+0x099B,HPFlowTemp, 
+0x099C,HPComp, 
+0x09A0,HPTemperature, 

esp32_partition_app1984k_spiffs64k.csv

@@ -1,6 +0,0 @@
-# Name,   Type, SubType, Offset,  Size, Flags
-nvs,      data, nvs,     0x9000,  0x5000,
-otadata,  data, ota,     0xe000,  0x2000,
-app0,     app,  ota_0,   0x10000, 0x1F0000,
-app1,     app,  ota_1,   0x200000, 0x1F0000,
-spiffs,   data, spiffs,  0x3F0000,0x10000,

factory_settings.ini

@@ -7,8 +7,8 @@ build_flags =
 
 	; Access point settings
     -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
-    -D FACTORY_AP_SSID=\"ems-esp\" ; 1-64 characters
-    -D FACTORY_AP_PASSWORD=\"ems-esp-neo\" ; 8-64 characters
+    -D FACTORY_AP_SSID=\"ems-esp\"
+    -D FACTORY_AP_PASSWORD=\"ems-esp-neo\"
     -D FACTORY_AP_LOCAL_IP=\"192.168.4.1\"
     -D FACTORY_AP_GATEWAY_IP=\"192.168.4.1\"
     -D FACTORY_AP_SUBNET_MASK=\"255.255.255.0\"
@@ -25,20 +25,14 @@ build_flags =
     -D FACTORY_NTP_TIME_ZONE_FORMAT=\"CET-1CEST,M3.5.0,M10.5.0/3\"
     -D FACTORY_NTP_SERVER=\"time.google.com\"
 
-    ; OTA settings
-    -D FACTORY_OTA_PORT=8266
-    -D FACTORY_OTA_PASSWORD=\"ems-esp-neo\"
-    -D FACTORY_OTA_ENABLED=true
-
     ; MQTT settings
     -D FACTORY_MQTT_ENABLED=false
-    -D FACTORY_MQTT_HOST=\"test.mosquitto.org\"
+    -D FACTORY_MQTT_HOST=\"\"
     -D FACTORY_MQTT_PORT=1883
     -D FACTORY_MQTT_USERNAME=\"\"
     -D FACTORY_MQTT_PASSWORD=\"\"
-    -D FACTORY_MQTT_CLIENT_ID=\"ems-esp\"
     -D FACTORY_MQTT_KEEP_ALIVE=60
-    -D FACTORY_MQTT_CLEAN_SESSION=true
+    -D FACTORY_MQTT_CLEAN_SESSION=false
     -D FACTORY_MQTT_MAX_TOPIC_LENGTH=128
 
     ; JWT Secret

interface/.env

@@ -1,5 +0,0 @@
-# This is the name of your project. It appears on the sign-in page and in the menu bar.
-REACT_APP_PROJECT_NAME=EMS-ESP
-
-# This is the url path your project will be exposed under.
-REACT_APP_PROJECT_PATH=ems-esp

interface/.env.development

@@ -1,11 +1,2 @@
-# Change the IP address to that of your ESP device to enable local development of the UI.
-# Remember to also enable CORS in platformio.ini before uploading the code to the device
-# with -DENABLE_CORS
-
-# my Wifi
-#REACT_APP_HTTP_ROOT=http://10.10.10.101
-#REACT_APP_WEB_SOCKET_ROOT=ws://10.10.10.101
-
-# my Ethernet
-REACT_APP_HTTP_ROOT=http://192.168.1.134
-REACT_APP_WEB_SOCKET_ROOT=ws://http://192.168.1.134
+VITE_ALOVA_TIPS=0
+REACT_APP_ALOVA_TIPS=0

interface/.env.production

@@ -1 +0,0 @@
-GENERATE_SOURCEMAP=false

interface/.prettierignore

@@ -0,0 +1,7 @@
+node_modules/
+build/
+dist/
+src/i18n/*
+
+.prettierrc
+.typesafe-i18n.json

interface/.typesafe-i18n.json

@@ -0,0 +1,5 @@
+{
+   "adapter": "react",
+   "baseLocale": "pl",
+   "$schema": "https://unpkg.com/typesafe-i18n@5.26.2/schema/typesafe-i18n.json"
+}

interface/config-overrides.js

@@ -1,37 +0,0 @@
-const ManifestPlugin = require('webpack-manifest-plugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
-const ProgmemGenerator = require('./progmem-generator.js');
-
-const path = require('path');
-const fs = require('fs');
-
-module.exports = function override(config, env) {
-  if (env === "production") {
-    // rename the ouput file, we need it's path to be short, for SPIFFS
-    config.output.filename = 'js/[id].[chunkhash:4].js';
-    config.output.chunkFilename = 'js/[id].[chunkhash:4].js';
-
-    // take out the manifest and service worker plugins
-    config.plugins = config.plugins.filter(plugin => !(plugin instanceof ManifestPlugin));
-    config.plugins = config.plugins.filter(plugin => !(plugin instanceof WorkboxWebpackPlugin.GenerateSW));
-
-    // shorten css filenames
-    const miniCssExtractPlugin = config.plugins.find((plugin) => plugin instanceof MiniCssExtractPlugin);
-    miniCssExtractPlugin.options.filename = "css/[id].[contenthash:4].css";
-    miniCssExtractPlugin.options.chunkFilename = "css/[id].[contenthash:4].c.css";
-
-    // build progmem data files
-    config.plugins.push(new ProgmemGenerator({ outputPath: "../lib/framework/WWWData.h", bytesPerLine: 20 }));
-
-    // add compression plugin, compress javascript
-    config.plugins.push(new CompressionPlugin({
-      filename: "[path].gz[query]",
-      algorithm: "gzip",
-      test: /\.(js)$/,
-      deleteOriginalAssets: true
-    }));
-  }
-  return config;
-}

interface/eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+import eslint from '@eslint/js';
+import prettierConfig from 'eslint-config-prettier';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  prettierConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true
+      }
+    }
+  },
+  {
+    ignores: [
+      'dist/*',
+      '*.mjs',
+      'build/*',
+      '*.js',
+      '**/*.cjs',
+      '**/unpack.ts',
+      'i18n*.*'
+    ]
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-unsafe-enum-comparison': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-misused-promises': [
+        'error',
+        {
+          checksVoidReturn: false
+        }
+      ]
+    }
+  }
+);

interface/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="/css/roboto.css" />
+    <link rel="manifest" href="/app/manifest.json" />
+    <title>EMS-ESP</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

interface/package.json

@@ -1,56 +1,71 @@
 {
-  "name": "esp8266-react",
-  "version": "0.1.0",
+  "name": "EMS-ESP",
+  "version": "3.7.3",
+  "description": "EMS-ESP WebUI",
+  "homepage": "https://emsesp.org",
+  "author": "proddy, emsesp.org",
+  "license": "MIT",
   "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^12.20.4",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-material-ui-form-validator": "^2.1.0",
-    "@types/react-router": "^5.1.12",
-    "@types/react-router-dom": "^5.1.6",
-    "compression-webpack-plugin": "^4.0.0",
-    "jwt-decode": "^3.1.2",
-    "lodash": "^4.17.21",
-    "mime-types": "^2.1.29",
-    "notistack": "^1.0.5",
-    "parse-ms": "^2.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-dropzone": "^11.3.1",
-    "react-form-validator-core": "^1.1.1",
-    "react-material-ui-form-validator": "^2.1.4",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
-    "sockette": "^2.0.6",
-    "typescript": "4.0.5",
-    "zlib": "^1.0.5"
-  },
+  "type": "module",
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "eject": "react-scripts eject"
+    "preinstall": "npx only-allow pnpm",
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build-hosted": "typesafe-i18n && vite build --mode hosted",
+    "mock-rest": "bun --watch ../mock-api/restServer.ts",
+    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"pnpm:mock-rest\" \"vite preview\"",
+    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"pnpm:mock-rest\" \"vite dev\"",
+    "typesafe-i18n": "typesafe-i18n --no-watch",
+    "build_webUI": "typesafe-i18n --no-watch && vite build && node progmem-generator.js",
+    "format": "prettier -l -w '**/*.{ts,tsx,js,css,json,md}'",
+    "lint": "eslint . --fix",
+    "standalone-devcontainer": "concurrently -c \"auto\" \"typesafe-i18n\" \"pnpm:mock-rest\" \"vite --host\""
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "@alova/adapter-xhr": "2.3.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
+    "@preact/compat": "^18.3.1",
+    "@table-library/react-table-library": "4.1.15",
+    "alova": "3.4.0",
+    "async-validator": "^4.2.5",
+    "etag": "^1.8.1",
+    "formidable": "^3.5.4",
+    "jwt-decode": "^4.0.0",
+    "magic-string": "^0.30.21",
+    "mime-types": "^3.0.2",
+    "preact": "^10.28.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.10.1",
+    "react-toastify": "^11.0.5",
+    "typesafe-i18n": "^5.26.2",
+    "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "react-app-rewired": "^2.1.8"
-  }
+    "@babel/core": "^7.28.5",
+    "@eslint/js": "^9.39.1",
+    "@preact/compat": "^18.3.1",
+    "@preact/preset-vite": "^2.10.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "axe-core": "^4.11.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.7.4",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "terser": "^5.44.1",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a"
 }

interface/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+onlyBuiltDependencies:
+  - cwebp-bin
+  - esbuild
+  - gifsicle
+  - jpegtran-bin
+  - mozjpeg
+  - optipng-bin
+  - pngquant-bin

interface/progmem-generator.js

@@ -1,122 +1,148 @@
-const { resolve, relative, sep } = require('path');
-const { readdirSync, existsSync, unlinkSync, readFileSync, createWriteStream } = require('fs');
-var zlib = require('zlib');
-var mime = require('mime-types');
+import etag from 'etag';
+import {
+  createWriteStream,
+  existsSync,
+  readFileSync,
+  readdirSync,
+  unlinkSync
+} from 'fs';
+import mime from 'mime-types';
+import { relative, resolve, sep } from 'path';
+import zlib from 'zlib';
 
-const ARDUINO_INCLUDES = "#include <Arduino.h>\n\n";
+const ARDUINO_INCLUDES = '#include <Arduino.h>\n\n';
+const INDENT = '  ';
+const outputPath = '../src/ESP32React/WWWData.h';
+const sourcePath = './dist';
+const bytesPerLine = 20;
+let totalSize = 0;
+let bundleStats = {
+  js: { count: 0, uncompressed: 0, compressed: 0 },
+  css: { count: 0, uncompressed: 0, compressed: 0 },
+  html: { count: 0, uncompressed: 0, compressed: 0 },
+  svg: { count: 0, uncompressed: 0, compressed: 0 },
+  other: { count: 0, uncompressed: 0, compressed: 0 }
+};
 
-function getFilesSync(dir, files = []) {
-  readdirSync(dir, { withFileTypes: true }).forEach(entry => {
-    const entryPath = resolve(dir, entry.name);
-    if (entry.isDirectory()) {
-      getFilesSync(entryPath, files);
-    } else {
-      files.push(entryPath);
-    }
-  })
-  return files;
-}
-
-function coherseToBuffer(input) {
-  return Buffer.isBuffer(input) ? input : Buffer.from(input);
-}
-
-function cleanAndOpen(path) {
-  if (existsSync(path)) {
-    unlinkSync(path);
-  }
-  return createWriteStream(path, { flags: "w+" });
-}
-
-class ProgmemGenerator {
-
-  constructor(options = {}) {
-    const { outputPath, bytesPerLine = 20, indent = "  ", includes = ARDUINO_INCLUDES } = options;
-    this.options = { outputPath, bytesPerLine, indent, includes };
-  }
-
-  apply(compiler) {
-    compiler.hooks.emit.tapAsync(
-      { name: 'ProgmemGenerator' },
-      (compilation, callback) => {
-        const { outputPath, bytesPerLine, indent, includes } = this.options;
-        const fileInfo = [];
-        const writeStream = cleanAndOpen(resolve(compilation.options.context, outputPath));
-        try {
-          const writeIncludes = () => {
-            writeStream.write(includes);
-          }
-
-          const writeFile = (relativeFilePath, buffer) => {
-            const variable = "ESP_REACT_DATA_" + fileInfo.length;
-            const mimeType = mime.lookup(relativeFilePath);
-            var size = 0;
-            writeStream.write("const uint8_t " + variable + "[] PROGMEM = {");
-            const zipBuffer = zlib.gzipSync(buffer);
-            zipBuffer.forEach((b) => {
-              if (!(size % bytesPerLine)) {
-                writeStream.write("\n");
-                writeStream.write(indent);
-              }
-              writeStream.write("0x" + ("00" + b.toString(16).toUpperCase()).substr(-2) + ",");
-              size++;
-            });
-            if (size % bytesPerLine) {
-              writeStream.write("\n");
-            }
-            writeStream.write("};\n\n");
-            fileInfo.push({
-              uri: '/' + relativeFilePath.replace(sep, '/'),
-              mimeType,
-              variable,
-              size
-            });
-          };
-
-          const writeFiles = () => {
-            // process static files
-            const buildPath = compilation.options.output.path;
-            for (const filePath of getFilesSync(buildPath)) {
-              const readStream = readFileSync(filePath);
-              const relativeFilePath = relative(buildPath, filePath);
-              writeFile(relativeFilePath, readStream);
-            }
-            // process assets
-            const { assets } = compilation;
-            Object.keys(assets).forEach((relativeFilePath) => {
-              writeFile(relativeFilePath, coherseToBuffer(assets[relativeFilePath].source()));
-            });
-          }
-
-          const generateWWWClass = () => {
-            return `typedef std::function<void(const String& uri, const String& contentType, const uint8_t * content, size_t len)> RouteRegistrationHandler;          
+const generateWWWClass =
+  () => `typedef std::function<void(const char * uri, const String & contentType, const uint8_t * content, size_t len, const String & hash)> RouteRegistrationHandler;
+// Bundle Statistics:
+// - Total compressed size: ${(totalSize / 1000).toFixed(1)} KB
+// - Total uncompressed size: ${(Object.values(bundleStats).reduce((sum, stat) => sum + stat.uncompressed, 0) / 1000).toFixed(1)} KB
+// - Compression ratio: ${(((Object.values(bundleStats).reduce((sum, stat) => sum + stat.uncompressed, 0) - totalSize) / Object.values(bundleStats).reduce((sum, stat) => sum + stat.uncompressed, 0)) * 100).toFixed(1)}%
+// - Generated on: ${new Date().toISOString()}
 
 class WWWData {
-${indent}public:
-${indent.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
-${fileInfo.map(file => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size});`).join('\n')}
-${indent.repeat(2)}}
+${INDENT}public:
+${INDENT.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
+${fileInfo.map((f) => `${INDENT.repeat(3)}handler("${f.uri}", "${f.mimeType}", ${f.variable}, ${f.size}, ${f.hash});`).join('\n')}
+${INDENT.repeat(2)}}
 };
 `;
-          }
 
-          const writeWWWClass = () => {
-            writeStream.write(generateWWWClass());
-          }
+const getFilesSync = (dir, files = []) => {
+  readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
+    const entryPath = resolve(dir, entry.name);
+    entry.isDirectory() ? getFilesSync(entryPath, files) : files.push(entryPath);
+  });
+  return files;
+};
 
-          writeIncludes();
-          writeFiles();
-          writeWWWClass();
+const cleanAndOpen = (path) => {
+  existsSync(path) && unlinkSync(path);
+  return createWriteStream(path, { flags: 'w+' });
+};
 
-          writeStream.on('finish', () => {
-            callback();
-          });
-        } finally {
-          writeStream.end();
-        }
-      }
-    );
-  }
+const getFileType = (filePath) => {
+  const ext = filePath.split('.').pop().toLowerCase();
+  if (ext === 'js') return 'js';
+  if (ext === 'css') return 'css';
+  if (ext === 'html') return 'html';
+  if (ext === 'svg') return 'svg';
+  return 'other';
+};
+
+const writeFile = (relativeFilePath, buffer) => {
+  const variable = `ESP_REACT_DATA_${fileInfo.length}`;
+  const mimeType = mime.lookup(relativeFilePath);
+  const fileType = getFileType(relativeFilePath);
+  let size = 0;
+  writeStream.write(`const uint8_t ${variable}[] = {`);
+
+  const zipBuffer = zlib.gzipSync(buffer, { level: 9 });
+  // const hash = crypto.createHash('sha256').update(zipBuffer).digest('hex');
+  const hash = etag(zipBuffer); // use smaller md5 instead of sha256
+
+  zipBuffer.forEach((b) => {
+    if (!(size % bytesPerLine)) {
+      writeStream.write('\n' + INDENT);
+    }
+    writeStream.write('0x' + b.toString(16).toUpperCase().padStart(2, '0') + ',');
+    size++;
+  });
+
+  size % bytesPerLine && writeStream.write('\n');
+  writeStream.write('};\n\n');
+
+  // Update bundle statistics
+  bundleStats[fileType].count++;
+  bundleStats[fileType].uncompressed += buffer.length;
+  bundleStats[fileType].compressed += zipBuffer.length;
+
+  fileInfo.push({
+    uri: '/' + relativeFilePath.replace(sep, '/'),
+    mimeType,
+    variable,
+    size,
+    hash
+  });
+
+  totalSize += size;
+};
+
+console.log(`Generating ${outputPath} from ${sourcePath}`);
+const fileInfo = [];
+const writeStream = cleanAndOpen(resolve(outputPath));
+
+writeStream.write(ARDUINO_INCLUDES);
+
+const buildPath = resolve(sourcePath);
+for (const filePath of getFilesSync(buildPath)) {
+  writeFile(relative(buildPath, filePath), readFileSync(filePath));
 }
 
-module.exports = ProgmemGenerator;
+writeStream.write(generateWWWClass());
+writeStream.end();
+
+// Calculate and display bundle statistics
+const totalUncompressed = Object.values(bundleStats).reduce(
+  (sum, stat) => sum + stat.uncompressed,
+  0
+);
+const totalCompressed = Object.values(bundleStats).reduce(
+  (sum, stat) => sum + stat.compressed,
+  0
+);
+const compressionRatio = (
+  ((totalUncompressed - totalCompressed) / totalUncompressed) *
+  100
+).toFixed(1);
+
+console.log('\n📊 Bundle Size Analysis:');
+console.log('='.repeat(50));
+console.log(`Total compressed size: ${(totalSize / 1000).toFixed(1)} KB`);
+console.log(`Total uncompressed size: ${(totalUncompressed / 1000).toFixed(1)} KB`);
+console.log(`Compression ratio: ${compressionRatio}%`);
+console.log('\n📁 File Type Breakdown:');
+Object.entries(bundleStats).forEach(([type, stats]) => {
+  if (stats.count > 0) {
+    const ratio = (
+      ((stats.uncompressed - stats.compressed) / stats.uncompressed) *
+      100
+    ).toFixed(1);
+    console.log(
+      `${type.toUpperCase().padEnd(4)}: ${stats.count} files, ${(stats.uncompressed / 1000).toFixed(1)} KB → ${(stats.compressed / 1000).toFixed(1)} KB (${ratio}% compression)`
+    );
+  }
+});
+console.log('='.repeat(50));

interface/public/app/manifest.json

@@ -1,12 +1,12 @@
 {
-  "name":"EMS-ESP",
-  "icons":[
+  "name": "EMS-ESP",
+  "icons": [
     {
-      "src":"/app/icon.png",
-      "sizes":"48x48 72x72 96x96 128x128 256x256"
+      "src": "/app/icon.png",
+      "sizes": "48x48 72x72 96x96 128x128 256x256"
     }
   ],
-  "start_url":"/",
-  "display":"fullscreen",
-  "orientation":"any"
+  "start_url": "/",
+  "display": "fullscreen",
+  "orientation": "any"
 }

interface/public/css/roboto.css

@@ -1,22 +1,21 @@
-/* Just supporting latin due to size constrains on the esp chip */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/li.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-}
+/*
+* Uses font-weight 400 (normal) only, no bold, and Latin with a few extra unicode chars.
+* This is to keep flash memory to a minimum
+* View fonts on https://fonts.google.com/
+* Download woff2 using e.g. https://fonts.googleapis.com/css2?family=Lato or https://fonts.googleapis.com/css2?family=Roboto
+*/
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/re.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+  /* src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); */
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url(../fonts/re.woff2) format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0104-0107, U+0118-0119, U+011E-011F, U+0130-0131, U+0141-0144,
+    U+0152-0153, U+015A-015B, U+015E-015F, U+0179-017C, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
 }
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/me.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-}

interface/public/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css">
-    <link rel="manifest" href="%PUBLIC_URL%/app/manifest.json">
-    <title>EMS-ESP</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-  </body>
-</html>

interface/src/App.tsx

@@ -1,50 +1,75 @@
-import React, { Component, RefObject } from 'react';
-import { Redirect, Route, Switch } from 'react-router';
-import { SnackbarProvider } from 'notistack';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { ToastContainer, Zoom } from 'react-toastify';
 
-import { IconButton } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import AppRouting from 'AppRouting';
+import CustomTheme from 'CustomTheme';
+import TypesafeI18n from 'i18n/i18n-react';
+import type { Locales } from 'i18n/i18n-types';
+import { loadLocaleAsync } from 'i18n/i18n-util.async';
+import { detectLocale, navigatorDetector } from 'typesafe-i18n/detectors';
 
-import AppRouting from './AppRouting';
-import CustomMuiTheme from './CustomMuiTheme';
-import { PROJECT_NAME } from './api';
-import FeaturesWrapper from './features/FeaturesWrapper';
+const AVAILABLE_LOCALES = [
+  'de',
+  'en',
+  'it',
+  'fr',
+  'nl',
+  'no',
+  'pl',
+  'sk',
+  'sv',
+  'tr',
+  'cz'
+] as Locales[];
 
-// this redirect forces a call to authenticationContext.refresh() which invalidates the JWT if it is invalid.
-const unauthorizedRedirect = () => <Redirect to="/" />;
-
-class App extends Component {
-
-  notistackRef: RefObject<any> = React.createRef();
-
-  componentDidMount() {
-    document.title = PROJECT_NAME;
+// Static toast configuration - no need to recreate on every render
+const TOAST_CONTAINER_PROPS = {
+  position: 'bottom-left' as const,
+  autoClose: 3000,
+  hideProgressBar: false,
+  newestOnTop: false,
+  closeOnClick: true,
+  rtl: false,
+  pauseOnFocusLoss: true,
+  draggable: false,
+  pauseOnHover: false,
+  transition: Zoom,
+  closeButton: false,
+  theme: 'dark' as const,
+  toastStyle: {
+    border: '1px solid #177ac9',
+    width: 'fit-content'
   }
+};
 
-  onClickDismiss = (key: string | number | undefined) => () => {
-    this.notistackRef.current.closeSnackbar(key);
-  }
+const App = memo(() => {
+  const [wasLoaded, setWasLoaded] = useState(false);
+  const [locale, setLocale] = useState<Locales>('en');
 
-  render() {
-    return (
-      <CustomMuiTheme>
-        <SnackbarProvider autoHideDuration={3000} maxSnack={3} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          ref={this.notistackRef}
-          action={(key) => (
-            <IconButton onClick={this.onClickDismiss(key)} size="small">
-              <CloseIcon />
-            </IconButton>
-          )}>
-          <FeaturesWrapper>
-            <Switch>
-              <Route exact path="/unauthorized" component={unauthorizedRedirect} />
-              <Route component={AppRouting} />
-            </Switch>
-          </FeaturesWrapper>
-        </SnackbarProvider>
-      </CustomMuiTheme>
-    );
-  }
-}
+  // Memoize locale initialization to prevent unnecessary re-runs
+  const initializeLocale = useCallback(async () => {
+    const browserLocale = detectLocale('en', AVAILABLE_LOCALES, navigatorDetector);
+    const newLocale = (localStorage.getItem('lang') || browserLocale) as Locales;
+    localStorage.setItem('lang', newLocale);
+    setLocale(newLocale);
+    await loadLocaleAsync(newLocale);
+    setWasLoaded(true);
+  }, []);
 
-export default App
+  useEffect(() => {
+    void initializeLocale();
+  }, [initializeLocale]);
+
+  if (!wasLoaded) return null;
+
+  return (
+    <TypesafeI18n locale={locale}>
+      <CustomTheme>
+        <AppRouting />
+        <ToastContainer {...TOAST_CONTAINER_PROPS} />
+      </CustomTheme>
+    </TypesafeI18n>
+  );
+});
+
+export default App;

interface/src/AppRouting.tsx

@@ -1,59 +1,80 @@
-import React, { Component } from 'react';
-import { Switch, Redirect } from 'react-router';
+import { type FC, Suspense, lazy, memo, useContext, useEffect, useRef } from 'react';
+import { Navigate, Route, Routes } from 'react-router';
+import { toast } from 'react-toastify';
 
-import * as Authentication from './authentication/Authentication';
-import AuthenticationWrapper from './authentication/AuthenticationWrapper';
-import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
-import AuthenticatedRoute from './authentication/AuthenticatedRoute';
+import {
+  LoadingSpinner,
+  RequireAuthenticated,
+  RequireUnauthenticated
+} from 'components';
+import { Authentication, AuthenticationContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
 
-import SignIn from './SignIn';
-import ProjectRouting from './project/ProjectRouting';
-import NetworkConnection from './network/NetworkConnection';
-import AccessPoint from './ap/AccessPoint';
-import NetworkTime from './ntp/NetworkTime';
-import Security from './security/Security';
-import System from './system/System';
+// Lazy load route components for better code splitting
+const SignIn = lazy(() => import('SignIn'));
+const AuthenticatedRouting = lazy(() => import('AuthenticatedRouting'));
 
-import { PROJECT_PATH } from './api';
-import Mqtt from './mqtt/Mqtt';
-import { withFeatures, WithFeaturesProps } from './features/FeaturesContext';
-import { Features } from './features/types';
-
-export const getDefaultRoute = (features: Features) => features.project ? `/${PROJECT_PATH}/` : "/network/";
-class AppRouting extends Component<WithFeaturesProps> {
-
-  componentDidMount() {
-    Authentication.clearLoginRedirect();
-  }
-
-  render() {
-    const { features } = this.props;
-    return (
-      <AuthenticationWrapper>
-        <Switch>
-          {features.security && (
-            <UnauthenticatedRoute exact path="/" component={SignIn} />
-          )}
-          {features.project && (
-            <AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} component={ProjectRouting} />
-          )}
-          <AuthenticatedRoute exact path="/network/*" component={NetworkConnection} />
-          <AuthenticatedRoute exact path="/ap/*" component={AccessPoint} />
-          {features.ntp && (
-            <AuthenticatedRoute exact path="/ntp/*" component={NetworkTime} />
-          )}
-          {features.mqtt && (
-            <AuthenticatedRoute exact path="/mqtt/*" component={Mqtt} />
-          )}
-          {features.security && (
-            <AuthenticatedRoute exact path="/security/*" component={Security} />
-          )}
-          <AuthenticatedRoute exact path="/system/*" component={System} />
-          <Redirect to={getDefaultRoute(features)} />
-        </Switch>
-      </AuthenticationWrapper>
-    )
-  }
+interface SecurityRedirectProps {
+  readonly message: string;
+  readonly signOut?: boolean;
 }
 
-export default withFeatures(AppRouting);
+const RootRedirect: FC<SecurityRedirectProps> = memo(
+  ({ message, signOut = false }) => {
+    const { signOut: contextSignOut } = useContext(AuthenticationContext);
+    const hasShownToast = useRef(false);
+
+    useEffect(() => {
+      // Prevent duplicate toasts on strict mode or re-renders
+      if (!hasShownToast.current) {
+        hasShownToast.current = true;
+        if (signOut) {
+          contextSignOut(false);
+        }
+        toast.success(message);
+      }
+      // Only run once on mount - using ref to track execution
+    }, []);
+
+    return <Navigate to="/" replace />;
+  }
+);
+
+const AppRouting: FC = memo(() => {
+  const { LL } = useI18nContext();
+
+  return (
+    <Authentication>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          <Route
+            path="/unauthorized"
+            element={<RootRedirect message={LL.PLEASE_SIGNIN()} signOut />}
+          />
+          <Route
+            path="/fileUpdated"
+            element={<RootRedirect message={LL.UPLOAD_SUCCESSFUL()} />}
+          />
+          <Route
+            path="/"
+            element={
+              <RequireUnauthenticated>
+                <SignIn />
+              </RequireUnauthenticated>
+            }
+          />
+          <Route
+            path="/*"
+            element={
+              <RequireAuthenticated>
+                <AuthenticatedRouting />
+              </RequireAuthenticated>
+            }
+          />
+        </Routes>
+      </Suspense>
+    </Authentication>
+  );
+});
+
+export default AppRouting;

interface/src/AuthenticatedRouting.tsx

@@ -0,0 +1,88 @@
+import { Suspense, lazy, memo, useContext } from 'react';
+import { Navigate, Route, Routes } from 'react-router';
+
+import { Layout, LoadingSpinner } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+
+// Lazy load all route components for better code splitting
+const Dashboard = lazy(() => import('app/main/Dashboard'));
+const Devices = lazy(() => import('app/main/Devices'));
+const Sensors = lazy(() => import('app/main/Sensors'));
+const Help = lazy(() => import('app/main/Help'));
+const Customizations = lazy(() => import('app/main/Customizations'));
+const Scheduler = lazy(() => import('app/main/Scheduler'));
+const CustomEntities = lazy(() => import('app/main/CustomEntities'));
+const Modules = lazy(() => import('app/main/Modules'));
+const UserProfile = lazy(() => import('app/main/UserProfile'));
+
+const Status = lazy(() => import('app/status/Status'));
+const HardwareStatus = lazy(() => import('app/status/HardwareStatus'));
+const Activity = lazy(() => import('app/status/Activity'));
+const SystemLog = lazy(() => import('app/status/SystemLog'));
+const MqttStatus = lazy(() => import('app/status/MqttStatus'));
+const NTPStatus = lazy(() => import('app/status/NTPStatus'));
+const APStatus = lazy(() => import('app/status/APStatus'));
+const NetworkStatus = lazy(() => import('app/status/NetworkStatus'));
+const Version = lazy(() => import('app/status/Version'));
+
+const Settings = lazy(() => import('app/settings/Settings'));
+const ApplicationSettings = lazy(() => import('app/settings/ApplicationSettings'));
+const MqttSettings = lazy(() => import('app/settings/MqttSettings'));
+const NTPSettings = lazy(() => import('app/settings/NTPSettings'));
+const APSettings = lazy(() => import('app/settings/APSettings'));
+const DownloadUpload = lazy(() => import('app/settings/DownloadUpload'));
+const Network = lazy(() => import('app/settings/network/Network'));
+const Security = lazy(() => import('app/settings/security/Security'));
+
+const AuthenticatedRouting = memo(() => {
+  const { me } = useContext(AuthenticatedContext);
+  return (
+    <Layout>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          <Route path="/dashboard/*" element={<Dashboard />} />
+          <Route path="/devices/*" element={<Devices />} />
+          <Route path="/sensors/*" element={<Sensors />} />
+          <Route path="/help/*" element={<Help />} />
+          <Route path="/user/*" element={<UserProfile />} />
+
+          <Route path="/status/*" element={<Status />} />
+          <Route path="/status/hardwarestatus/*" element={<HardwareStatus />} />
+          <Route path="/status/activity" element={<Activity />} />
+          <Route path="/status/log" element={<SystemLog />} />
+          <Route path="/status/mqtt" element={<MqttStatus />} />
+          <Route path="/status/ntp" element={<NTPStatus />} />
+          <Route path="/status/ap" element={<APStatus />} />
+          <Route path="/status/network" element={<NetworkStatus />} />
+          <Route path="/status/version" element={<Version />} />
+
+          {me.admin && (
+            <>
+              <Route path="/settings" element={<Settings />} />
+              <Route
+                path="/settings/application"
+                element={<ApplicationSettings />}
+              />
+              <Route path="/settings/mqtt" element={<MqttSettings />} />
+              <Route path="/settings/ntp" element={<NTPSettings />} />
+              <Route path="/settings/ap" element={<APSettings />} />
+              <Route path="/settings/modules" element={<Modules />} />
+              <Route path="/settings/downloadUpload" element={<DownloadUpload />} />
+
+              <Route path="/settings/network/*" element={<Network />} />
+              <Route path="/settings/security/*" element={<Security />} />
+
+              <Route path="/customizations" element={<Customizations />} />
+              <Route path="/scheduler" element={<Scheduler />} />
+              <Route path="/customentities" element={<CustomEntities />} />
+            </>
+          )}
+
+          <Route path="/*" element={<Navigate to="/" />} />
+        </Routes>
+      </Suspense>
+    </Layout>
+  );
+});
+
+export default AuthenticatedRouting;

interface/src/CustomMuiTheme.tsx

@@ -1,44 +0,0 @@
-import React, { Component } from 'react';
-
-import { CssBaseline } from '@material-ui/core';
-import { MuiThemeProvider, createMuiTheme, StylesProvider } from '@material-ui/core/styles';
-import { blueGrey, orange, red, green } from '@material-ui/core/colors';
-
-const theme = createMuiTheme({
-  palette: {
-    type: "dark",
-    primary: {
-      main: '#33bfff',
-    },
-    secondary: {
-      main: '#3d5afe',
-    },
-    info: {
-      main: blueGrey[500]
-    },
-    warning: {
-      main: orange[500]
-    },
-    error: {
-      main: red[500]
-    },
-    success: {
-      main: green[500]
-    }
-  }
-});
-
-export default class CustomMuiTheme extends Component {
-
-  render() {
-    return (
-      <StylesProvider>
-        <MuiThemeProvider theme={theme}>
-          <CssBaseline />
-          {this.props.children}
-        </MuiThemeProvider>
-      </StylesProvider>
-    );
-  }
-
-}

interface/src/CustomTheme.tsx

@@ -0,0 +1,80 @@
+import { memo } from 'react';
+import type { FC } from 'react';
+
+import {
+  CssBaseline,
+  ThemeProvider,
+  responsiveFontSizes,
+  tooltipClasses
+} from '@mui/material';
+import { createTheme } from '@mui/material/styles';
+
+import type { RequiredChildrenProps } from 'utils';
+
+export const dialogStyle = {
+  '& .MuiDialog-paper': {
+    borderRadius: '8px',
+    borderColor: '#565656',
+    borderStyle: 'solid',
+    borderWidth: '2px'
+  }
+} as const;
+
+const theme = responsiveFontSizes(
+  createTheme({
+    typography: {
+      fontSize: 13
+    },
+    palette: {
+      mode: 'dark',
+      secondary: {
+        main: '#2196f3' // blue[500]
+      },
+      info: {
+        main: '#607d8b' // blueGrey[500]
+      },
+      text: {
+        disabled: '#eee' // white
+      }
+    },
+    components: {
+      MuiListItemText: {
+        styleOverrides: {
+          primary: {
+            fontSize: 14
+          },
+          secondary: {
+            color: '#9e9e9e' // grey[500]
+          }
+        }
+      },
+      MuiTooltip: {
+        defaultProps: {
+          placement: 'top',
+          arrow: true
+        },
+        styleOverrides: {
+          tooltip: {
+            padding: '4px 8px',
+            fontSize: 10,
+            color: 'rgba(0, 0, 0, 0.87)',
+            backgroundColor: '#4caf50', // MUI success.main default color
+            boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
+            [`& .${tooltipClasses.arrow}`]: {
+              color: '#4caf50'
+            }
+          }
+        }
+      }
+    }
+  })
+);
+
+const CustomTheme: FC<RequiredChildrenProps> = memo(({ children }) => (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+));
+
+export default CustomTheme;

interface/src/SignIn.tsx

@@ -1,147 +1,171 @@
-import React, { Component } from 'react';
-import { withSnackbar, WithSnackbarProps } from 'notistack';
-import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
 
-import { withStyles, createStyles, Theme, WithStyles } from '@material-ui/core/styles';
-import { Paper, Typography, Fab } from '@material-ui/core';
-import ForwardIcon from '@material-ui/icons/Forward';
+import ForwardIcon from '@mui/icons-material/Forward';
+import { Box, Button, Paper, Typography } from '@mui/material';
 
-import { withAuthenticationContext, AuthenticationContextProps } from './authentication/AuthenticationContext';
-import {PasswordValidator} from './components';
-import { PROJECT_NAME, SIGN_IN_ENDPOINT } from './api';
+import * as AuthenticationApi from 'components/routing/authentication';
+import { useRequest } from 'alova/client';
+import type { ValidateFieldsError } from 'async-validator';
+import {
+  LanguageSelector,
+  ValidatedPasswordField,
+  ValidatedTextField
+} from 'components';
+import { AuthenticationContext } from 'contexts/authentication';
+import { PROJECT_NAME } from 'env';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { SignInRequest } from 'types';
+import { onEnterCallback, updateValue } from 'utils';
+import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';
 
-const styles = (theme: Theme) => createStyles({
-  signInPage: {
-    display: "flex",
-    height: "100vh",
-    margin: "auto",
-    padding: theme.spacing(2),
-    justifyContent: "center",
-    flexDirection: "column",
-    maxWidth: theme.breakpoints.values.sm
-  },
-  signInPanel: {
-    textAlign: "center",
-    padding: theme.spacing(2),
-    paddingTop: "200px",
-    backgroundImage: 'url("/app/icon.png")',
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "50% " + theme.spacing(2) + "px",
-    backgroundSize: "auto 150px",
-    width: "100%"
-  },
-  extendedIcon: {
-    marginRight: theme.spacing(0.5),
-  },
-  button: {
-    marginRight: theme.spacing(2),
-    marginTop: theme.spacing(2),
-  }
+const SignIn = memo(() => {
+  const authenticationContext = useContext(AuthenticationContext);
+
+  const { LL } = useI18nContext();
+
+  const [signInRequest, setSignInRequest] = useState<SignInRequest>({
+    username: '',
+    password: ''
+  });
+  const [processing, setProcessing] = useState<boolean>(false);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
+  const { send: callSignIn } = useRequest(
+    (request: SignInRequest) => AuthenticationApi.signIn(request),
+    {
+      immediate: false
+    }
+  ).onSuccess((response) => {
+    if (response.data) {
+      authenticationContext.signIn(response.data.access_token);
+    }
+  });
+
+  // Memoize callback to prevent recreation on every render
+  const updateLoginRequestValue = useMemo(
+    () =>
+      updateValue((updater) =>
+        setSignInRequest(
+          updater as unknown as (prevState: SignInRequest) => SignInRequest
+        )
+      ),
+    []
+  );
+
+  const signIn = useCallback(async () => {
+    await callSignIn(signInRequest).catch((event: Error) => {
+      if (event.message === 'Unauthorized') {
+        toast.warning(LL.INVALID_LOGIN());
+      } else {
+        toast.error(LL.ERROR() + ' ' + event.message);
+      }
+      setProcessing(false);
+    });
+  }, [callSignIn, signInRequest, LL]);
+
+  const validateAndSignIn = useCallback(async () => {
+    setProcessing(true);
+    SIGN_IN_REQUEST_VALIDATOR.messages({
+      required: LL.IS_REQUIRED('%s')
+    });
+    try {
+      await validate(SIGN_IN_REQUEST_VALIDATOR, signInRequest);
+      await signIn();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+      setProcessing(false);
+    }
+  }, [signInRequest, signIn, LL]);
+
+  // Memoize callback to prevent recreation on every render
+  const submitOnEnter = useMemo(() => onEnterCallback(signIn), [signIn]);
+
+  // get rid of scrollbar
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+
+  return (
+    <Box
+      display="flex"
+      height="100vh"
+      margin="auto"
+      padding={2}
+      justifyContent="center"
+      flexDirection="column"
+      maxWidth={(theme) => theme.breakpoints.values.sm}
+    >
+      <Paper
+        sx={(theme) => ({
+          textAlign: 'center',
+          padding: theme.spacing(2),
+          paddingTop: '172px',
+          backgroundImage: 'url("/app/icon.png")',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '50% ' + theme.spacing(2),
+          width: '100%'
+        })}
+      >
+        <Typography mb={1} variant="h4">
+          {PROJECT_NAME}
+        </Typography>
+        <LanguageSelector />
+        <Box
+          mt={1}
+          display="flex"
+          flexDirection="column"
+          gap={1}
+          alignItems="center"
+        >
+          <ValidatedTextField
+            fieldErrors={fieldErrors || {}}
+            disabled={processing}
+            sx={{
+              width: '32ch'
+            }}
+            name="username"
+            label={LL.USERNAME(0)}
+            value={signInRequest.username}
+            onChange={updateLoginRequestValue}
+            slotProps={{
+              input: {
+                autoCapitalize: 'none',
+                autoCorrect: 'off'
+              }
+            }}
+          />
+          <ValidatedPasswordField
+            fieldErrors={fieldErrors || {}}
+            disabled={processing}
+            sx={{
+              width: '32ch'
+            }}
+            name="password"
+            label={LL.PASSWORD()}
+            value={signInRequest.password}
+            onChange={updateLoginRequestValue}
+            onKeyDown={submitOnEnter}
+          />
+        </Box>
+
+        <Button
+          variant="contained"
+          color="primary"
+          sx={{ mt: 2 }}
+          onClick={validateAndSignIn}
+          disabled={processing}
+        >
+          <ForwardIcon sx={{ mr: 1 }} />
+          {LL.SIGN_IN()}
+        </Button>
+      </Paper>
+    </Box>
+  );
 });
 
-type SignInProps = WithSnackbarProps & WithStyles<typeof styles> & AuthenticationContextProps;
-
-interface SignInState {
-  username: string,
-  password: string,
-  processing: boolean
-}
-
-class SignIn extends Component<SignInProps, SignInState> {
-
-  constructor(props: SignInProps) {
-    super(props);
-    this.state = {
-      username: '',
-      password: '',
-      processing: false
-    };
-  }
-
-  updateInputElement = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { name, value } = event.currentTarget;
-    this.setState(prevState => ({
-      ...prevState,
-      [name]: value,
-    }))
-  };
-
-  onSubmit = () => {
-    const { username, password } = this.state;
-    const { authenticationContext } = this.props;
-    this.setState({ processing: true });
-    fetch(SIGN_IN_ENDPOINT, {
-      method: 'POST',
-      body: JSON.stringify({ username, password }),
-      headers: new Headers({
-        'Content-Type': 'application/json'
-      })
-    })
-      .then(response => {
-        if (response.status === 200) {
-          return response.json();
-        } else if (response.status === 401) {
-          throw Error("Invalid credentials.");
-        } else {
-          throw Error("Invalid status code: " + response.status);
-        }
-      }).then(json => {
-        authenticationContext.signIn(json.access_token);
-      })
-      .catch(error => {
-        this.props.enqueueSnackbar(error.message, {
-          variant: 'warning',
-        });
-        this.setState({ processing: false });
-      });
-  };
-
-  render() {
-    const { username, password, processing } = this.state;
-    const { classes } = this.props;
-    return (
-      <div className={classes.signInPage}>
-        <Paper className={classes.signInPanel}>
-          <Typography variant="h4">{PROJECT_NAME}</Typography>
-          <ValidatorForm onSubmit={this.onSubmit}>
-            <TextValidator
-              disabled={processing}
-              validators={['required']}
-              errorMessages={['Username is required']}
-              name="username"
-              label="Username"
-              fullWidth
-              variant="outlined"
-              value={username}
-              onChange={this.updateInputElement}
-              margin="normal"
-              inputProps={{
-                autoCapitalize: "none",
-                autoCorrect: "off",
-              }}
-            />
-            <PasswordValidator
-              disabled={processing}
-              validators={['required']}
-              errorMessages={['Password is required']}
-              name="password"
-              label="Password"
-              fullWidth
-              variant="outlined"
-              value={password}
-              onChange={this.updateInputElement}
-              margin="normal"
-            />
-            <Fab variant="extended" color="primary" className={classes.button} type="submit" disabled={processing}>
-              <ForwardIcon className={classes.extendedIcon} />
-              Sign In
-            </Fab>
-          </ValidatorForm>
-        </Paper>
-      </div>
-    );
-  }
-
-}
-
-export default withAuthenticationContext(withSnackbar(withStyles(styles)(SignIn)));
+export default SignIn;

interface/src/ap/APModes.ts

@@ -1,5 +0,0 @@
-import { APSettings, APProvisionMode } from "./types";
-
-export const isAPEnabled = ({ provision_mode }: APSettings) => {
-    return provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
-}

interface/src/ap/APSettingsController.tsx

@@ -1,30 +0,0 @@
-import React, { Component } from 'react';
-
-import { AP_SETTINGS_ENDPOINT } from '../api';
-import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
-
-import APSettingsForm from './APSettingsForm';
-import { APSettings } from './types';
-
-type APSettingsControllerProps = RestControllerProps<APSettings>;
-
-class APSettingsController extends Component<APSettingsControllerProps> {
-
-  componentDidMount() {
-    this.props.loadData();
-  }
-
-  render() {
-    return (
-      <SectionContent title="Access Point Settings" titleGutter>
-        <RestFormLoader
-          {...this.props}
-          render={formProps => <APSettingsForm {...formProps} />}
-        />
-      </SectionContent>
-    )
-  }
-
-}
-
-export default restController(AP_SETTINGS_ENDPOINT, APSettingsController);

interface/src/ap/APSettingsForm.tsx

@@ -1,106 +0,0 @@
-import React, { Fragment } from 'react';
-import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
-
-import MenuItem from '@material-ui/core/MenuItem';
-import SaveIcon from '@material-ui/icons/Save';
-
-import { PasswordValidator, RestFormProps, FormActions, FormButton } from '../components';
-
-import { isAPEnabled } from './APModes';
-import { APSettings, APProvisionMode } from './types';
-import { isIP } from '../validators';
-
-type APSettingsFormProps = RestFormProps<APSettings>;
-
-class APSettingsForm extends React.Component<APSettingsFormProps> {
-
-  componentDidMount() {
-    ValidatorForm.addValidationRule('isIP', isIP);
-  }
-
-  render() {
-    const { data, handleValueChange, saveData } = this.props;
-    return (
-      <ValidatorForm onSubmit={saveData} ref="APSettingsForm">
-        <SelectValidator name="provision_mode"
-          label="Provide Access Point&hellip;"
-          value={data.provision_mode}
-          fullWidth
-          variant="outlined"
-          onChange={handleValueChange('provision_mode')}
-          margin="normal">
-          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>Always</MenuItem>
-          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>When Network Disconnected</MenuItem>
-          <MenuItem value={APProvisionMode.AP_NEVER}>Never</MenuItem>
-        </SelectValidator>
-        {
-          isAPEnabled(data) &&
-          <Fragment>
-            <TextValidator
-              validators={['required', 'matchRegexp:^.{1,32}$']}
-              errorMessages={['Access Point SSID is required', 'Access Point SSID must be 32 characters or less']}
-              name="ssid"
-              label="Access Point SSID"
-              fullWidth
-              variant="outlined"
-              value={data.ssid}
-              onChange={handleValueChange('ssid')}
-              margin="normal"
-            />
-            <PasswordValidator
-              validators={['required', 'matchRegexp:^.{8,64}$']}
-              errorMessages={['Access Point Password is required', 'Access Point Password must be 8-64 characters']}
-              name="password"
-              label="Access Point Password"
-              fullWidth
-              variant="outlined"
-              value={data.password}
-              onChange={handleValueChange('password')}
-              margin="normal"
-            />
-            <TextValidator
-              validators={['required', 'isIP']}
-              errorMessages={['Local IP is required', 'Must be an IP address']}
-              name="local_ip"
-              label="Local IP"
-              fullWidth
-              variant="outlined"
-              value={data.local_ip}
-              onChange={handleValueChange('local_ip')}
-              margin="normal"
-            />
-            <TextValidator
-              validators={['required', 'isIP']}
-              errorMessages={['Gateway IP is required', 'Must be an IP address']}
-              name="gateway_ip"
-              label="Gateway"
-              fullWidth
-              variant="outlined"
-              value={data.gateway_ip}
-              onChange={handleValueChange('gateway_ip')}
-              margin="normal"
-            />
-            <TextValidator
-              validators={['required', 'isIP']}
-              errorMessages={['Subnet mask is required', 'Must be an IP address']}
-              name="subnet_mask"
-              label="Subnet"
-              fullWidth
-              variant="outlined"
-              value={data.subnet_mask}
-              onChange={handleValueChange('subnet_mask')}
-              margin="normal"
-            />
-          </Fragment>
-        }
-        <FormActions>
-          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
-            Save
-          </FormButton>
-        </FormActions>
-      </ValidatorForm>
-    );
-  }
-}
-
-export default APSettingsForm;

interface/src/ap/APStatus.ts

@@ -1,28 +0,0 @@
-import { Theme } from "@material-ui/core";
-import { APStatus, APNetworkStatus } from "./types";
-
-export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
-  switch (status) {
-    case APNetworkStatus.ACTIVE:
-      return theme.palette.success.main;
-    case APNetworkStatus.INACTIVE:
-      return theme.palette.info.main;
-    case APNetworkStatus.LINGERING:
-      return theme.palette.warning.main;
-    default:
-      return theme.palette.warning.main;
-  }
-}
-
-export const apStatus = ({ status }: APStatus) => {
-  switch (status) {
-    case APNetworkStatus.ACTIVE:
-      return "Active";
-    case APNetworkStatus.INACTIVE:
-      return "Inactive";
-    case APNetworkStatus.LINGERING:
-      return "Lingering until idle";
-    default:
-      return "Unknown";
-  }
-};

interface/src/ap/APStatusController.tsx

@@ -1,29 +0,0 @@
-import React, { Component } from 'react';
-
-import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
-import { AP_STATUS_ENDPOINT } from '../api';
-
-import APStatusForm from './APStatusForm';
-import { APStatus } from './types';
-
-type APStatusControllerProps = RestControllerProps<APStatus>;
-
-class APStatusController extends Component<APStatusControllerProps> {
-
-  componentDidMount() {
-    this.props.loadData();
-  }
-
-  render() {
-    return (
-      <SectionContent title="Access Point Status">
-        <RestFormLoader
-          {...this.props}
-          render={formProps => <APStatusForm {...formProps} />}
-        />
-      </SectionContent>
-    )
-  }
-}
-
-export default restController(AP_STATUS_ENDPOINT, APStatusController);

interface/src/ap/APStatusForm.tsx

@@ -1,78 +0,0 @@
-import React, { Component, Fragment } from 'react';
-
-import { WithTheme, withTheme } from '@material-ui/core/styles';
-import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
-
-import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna';
-import DeviceHubIcon from '@material-ui/icons/DeviceHub';
-import ComputerIcon from '@material-ui/icons/Computer';
-import RefreshIcon from '@material-ui/icons/Refresh';
-
-import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
-import { apStatusHighlight, apStatus } from './APStatus';
-import { APStatus } from './types';
-
-type APStatusFormProps = RestFormProps<APStatus> & WithTheme;
-
-class APStatusForm extends Component<APStatusFormProps> {
-
-  createListItems() {
-    const { data, theme } = this.props
-    return (
-      <Fragment>
-        <ListItem>
-          <ListItemAvatar>
-            <HighlightAvatar color={apStatusHighlight(data, theme)}>
-              <SettingsInputAntennaIcon />
-            </HighlightAvatar>
-          </ListItemAvatar>
-          <ListItemText primary="Status" secondary={apStatus(data)} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>IP</Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="IP Address" secondary={data.ip_address} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <DeviceHubIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="MAC Address" secondary={data.mac_address} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>
-              <ComputerIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="AP Clients" secondary={data.station_num} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-      </Fragment>
-    );
-  }
-
-  render() {
-    return (
-      <Fragment>
-        <List>
-          {this.createListItems()}
-        </List>
-        <FormActions>
-          <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>
-            Refresh
-          </FormButton>
-        </FormActions>
-      </Fragment>
-    );
-  }
-
-}
-
-export default withTheme(APStatusForm);

interface/src/ap/AccessPoint.tsx

@@ -1,38 +0,0 @@
-import React, { Component } from 'react';
-import { Redirect, Switch, RouteComponentProps } from 'react-router-dom'
-
-import { Tabs, Tab } from '@material-ui/core';
-
-import { AuthenticatedContextProps, withAuthenticatedContext, AuthenticatedRoute } from '../authentication';
-import { MenuAppBar } from '../components';
-
-import APSettingsController from './APSettingsController';
-import APStatusController from './APStatusController';
-
-type AccessPointProps = AuthenticatedContextProps & RouteComponentProps;
-
-class AccessPoint extends Component<AccessPointProps> {
-
-  handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
-    this.props.history.push(path);
-  };
-
-  render() {
-    const { authenticatedContext } = this.props;
-    return (
-      <MenuAppBar sectionTitle="Access Point">
-        <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
-          <Tab value="/ap/status" label="Access Point Status" />
-          <Tab value="/ap/settings" label="Access Point Settings" disabled={!authenticatedContext.me.admin} />
-        </Tabs>
-        <Switch>
-          <AuthenticatedRoute exact path="/ap/status" component={APStatusController} />
-          <AuthenticatedRoute exact path="/ap/settings" component={APSettingsController} />
-          <Redirect to="/ap/status" />
-        </Switch>
-      </MenuAppBar>
-    )
-  }
-}
-
-export default withAuthenticatedContext(AccessPoint);

interface/src/api/Endpoints.ts

@@ -1,22 +0,0 @@
-import { ENDPOINT_ROOT } from './Env';
-
-export const FEATURES_ENDPOINT = ENDPOINT_ROOT + "features";
-export const NTP_STATUS_ENDPOINT = ENDPOINT_ROOT + "ntpStatus";
-export const NTP_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "ntpSettings";
-export const TIME_ENDPOINT = ENDPOINT_ROOT + "time";
-export const AP_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "apSettings";
-export const AP_STATUS_ENDPOINT = ENDPOINT_ROOT + "apStatus";
-export const SCAN_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "scanNetworks";
-export const LIST_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "listNetworks";
-export const NETWORK_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "networkSettings";
-export const NETWORK_STATUS_ENDPOINT = ENDPOINT_ROOT + "networkStatus";
-export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings";
-export const UPLOAD_FIRMWARE_ENDPOINT = ENDPOINT_ROOT + "uploadFirmware";
-export const MQTT_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "mqttSettings";
-export const MQTT_STATUS_ENDPOINT = ENDPOINT_ROOT + "mqttStatus";
-export const SYSTEM_STATUS_ENDPOINT = ENDPOINT_ROOT + "systemStatus";
-export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";
-export const VERIFY_AUTHORIZATION_ENDPOINT = ENDPOINT_ROOT + "verifyAuthorization";
-export const SECURITY_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "securitySettings";
-export const RESTART_ENDPOINT = ENDPOINT_ROOT + "restart";
-export const FACTORY_RESET_ENDPOINT = ENDPOINT_ROOT + "factoryReset";

interface/src/api/Env.ts

@@ -1,24 +0,0 @@
-export const PROJECT_NAME = process.env.REACT_APP_PROJECT_NAME!;
-export const PROJECT_PATH = process.env.REACT_APP_PROJECT_PATH!;
-
-export const ENDPOINT_ROOT = calculateEndpointRoot("/rest/");
-export const WEB_SOCKET_ROOT = calculateWebSocketRoot("/ws/");
-
-function calculateEndpointRoot(endpointPath: string) {
-    const httpRoot = process.env.REACT_APP_HTTP_ROOT;
-    if (httpRoot) {
-        return httpRoot + endpointPath;
-    }
-    const location = window.location;
-    return location.protocol + "//" + location.host + endpointPath;
-}
-
-function calculateWebSocketRoot(webSocketPath: string) {
-    const webSocketRoot = process.env.REACT_APP_WEB_SOCKET_ROOT;
-    if (webSocketRoot) {
-        return webSocketRoot + webSocketPath;
-    }
-    const location = window.location;
-    const webProtocol = location.protocol === "https:" ? "wss:" : "ws:";
-    return webProtocol + "//" + location.host + webSocketPath;
-}

interface/src/api/ap.ts

@@ -0,0 +1,9 @@
+import type { APSettingsType, APStatusType } from 'types';
+
+import { alovaInstance } from './endpoints';
+
+export const readAPStatus = () => alovaInstance.Get<APStatusType>('/rest/apStatus');
+export const readAPSettings = () =>
+  alovaInstance.Get<APSettingsType>('/rest/apSettings');
+export const updateAPSettings = (data: APSettingsType) =>
+  alovaInstance.Post<APSettingsType>('/rest/apSettings', data);

interface/src/api/app.ts

@@ -0,0 +1,157 @@
+import { alovaInstance } from 'api/endpoints';
+
+import type {
+  APIcall,
+  Action,
+  Activity,
+  CoreData,
+  DashboardData,
+  DeviceData,
+  DeviceEntity,
+  Entities,
+  EntityItem,
+  ModuleItem,
+  Modules,
+  Schedule,
+  ScheduleItem,
+  SensorData,
+  Settings,
+  WriteAnalogSensor,
+  WriteTemperatureSensor
+} from '../app/main/types';
+
+const MSGPACK_CONFIG = { responseType: 'arraybuffer' as const };
+
+// Dashboard
+export const readDashboard = () =>
+  alovaInstance.Get<DashboardData>('/rest/dashboardData', MSGPACK_CONFIG);
+
+// Devices
+export const readCoreData = () => alovaInstance.Get<CoreData>('/rest/coreData');
+export const readDeviceData = (id: number) =>
+  alovaInstance.Get<DeviceData>('/rest/deviceData', {
+    params: { id },
+    ...MSGPACK_CONFIG
+  });
+export const writeDeviceValue = (data: { id: number; c: string; v: unknown }) =>
+  alovaInstance.Post('/rest/writeDeviceValue', data);
+
+// Application Settings
+export const readSettings = () => alovaInstance.Get<Settings>('/rest/settings');
+export const writeSettings = (data: Settings) =>
+  alovaInstance.Post('/rest/settings', data);
+export const getBoardProfile = (boardProfile: string) =>
+  alovaInstance.Get('/rest/boardProfile', {
+    params: { boardProfile }
+  });
+
+// Sensors
+export const readSensorData = () =>
+  alovaInstance.Get<SensorData>('/rest/sensorData');
+export const writeTemperatureSensor = (ts: WriteTemperatureSensor) =>
+  alovaInstance.Post('/rest/writeTemperatureSensor', ts);
+export const writeAnalogSensor = (as: WriteAnalogSensor) =>
+  alovaInstance.Post('/rest/writeAnalogSensor', as);
+
+// Activity
+export const readActivity = () => alovaInstance.Get<Activity>('/rest/activity');
+
+// API
+export const API = (apiCall: APIcall) => alovaInstance.Post('/api', apiCall);
+
+// Generic action
+export const callAction = (action: Action) =>
+  alovaInstance.Post('/rest/action', action);
+
+// SettingsCustomization
+export const readDeviceEntities = (id: number) =>
+  alovaInstance.Get<DeviceEntity[]>('/rest/deviceEntities', {
+    params: { id },
+    ...MSGPACK_CONFIG,
+    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
+    transform(data) {
+      const entities = data as DeviceEntity[];
+      return entities.map((de) => ({
+        ...de,
+        o_m: de.m,
+        o_cn: de.cn,
+        o_mi: de.mi,
+        o_ma: de.ma
+      }));
+    }
+  });
+export const resetCustomizations = () =>
+  alovaInstance.Post('/rest/resetCustomizations');
+export const writeCustomizationEntities = (data: {
+  id: number;
+  entity_ids: string[];
+}) => alovaInstance.Post('/rest/customizationEntities', data);
+export const writeDeviceName = (data: { id: number; name: string }) =>
+  alovaInstance.Post('/rest/writeDeviceName', data);
+
+// SettingsScheduler
+export const readSchedule = () =>
+  alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
+    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
+    transform(data) {
+      const schedule = (data as Schedule).schedule;
+      return schedule.map((si) => ({
+        ...si,
+        o_id: si.id,
+        o_active: si.active,
+        o_deleted: si.deleted,
+        o_flags: si.flags,
+        o_time: si.time,
+        o_cmd: si.cmd,
+        o_value: si.value,
+        o_name: si.name
+      }));
+    }
+  });
+export const writeSchedule = (data: Schedule) =>
+  alovaInstance.Post('/rest/schedule', data);
+
+// Modules
+export const readModules = () =>
+  alovaInstance.Get<ModuleItem[]>('/rest/modules', {
+    transform(data) {
+      const modules = (data as Modules).modules;
+      return modules.map((mi) => ({
+        ...mi,
+        o_enabled: mi.enabled,
+        o_license: mi.license
+      }));
+    }
+  });
+export const writeModules = (data: {
+  key: string;
+  enabled: boolean;
+  license: string;
+}) => alovaInstance.Post('/rest/modules', data);
+
+// CustomEntities
+export const readCustomEntities = () =>
+  alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
+    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
+    transform(data) {
+      const entities = (data as Entities).entities;
+      return entities.map((ei) => ({
+        ...ei,
+        o_id: ei.id,
+        o_ram: ei.ram,
+        o_device_id: ei.device_id,
+        o_type_id: ei.type_id,
+        o_offset: ei.offset,
+        o_factor: ei.factor,
+        o_uom: ei.uom,
+        o_value_type: ei.value_type,
+        o_name: ei.name,
+        o_writeable: ei.writeable,
+        o_value: ei.value,
+        o_deleted: ei.deleted,
+        o_hide: ei.hide
+      }));
+    }
+  });
+export const writeCustomEntities = (data: Entities) =>
+  alovaInstance.Post('/rest/customEntities', data);

interface/src/api/endpoints.ts

@@ -0,0 +1,68 @@
+import { type AlovaXHRResponse, xhrRequestAdapter } from '@alova/adapter-xhr';
+import { createAlova } from 'alova';
+import ReactHook from 'alova/react';
+
+import { unpack } from './unpack';
+
+export const ACCESS_TOKEN = 'access_token' as const;
+
+// Cached token to avoid repeated localStorage access
+let cachedToken: string | null = null;
+
+const getAccessToken = (): string | null => {
+  if (cachedToken === null) {
+    cachedToken = localStorage.getItem(ACCESS_TOKEN);
+  }
+  return cachedToken;
+};
+
+// Clear token cache when needed (e.g., on logout)
+export const clearTokenCache = (): void => {
+  cachedToken = null;
+};
+
+const handleResponse = async (response: AlovaXHRResponse) => {
+  // Handle various HTTP status codes
+  if (response.status === 205) {
+    throw new Error('Reboot required');
+  }
+  if (response.status === 400) {
+    throw new Error('Request Failed');
+  }
+  if (response.status >= 400) {
+    throw new Error(response.statusText);
+  }
+
+  const data = (await response.data) as ArrayBuffer;
+
+  // Unpack MessagePack data if ArrayBuffer
+  if (data instanceof ArrayBuffer) {
+    return unpack(data) as ArrayBuffer;
+  }
+
+  return data;
+};
+
+export const alovaInstance = createAlova({
+  statesHook: ReactHook,
+  cacheFor: null, // disable cache
+  requestAdapter: xhrRequestAdapter(),
+  beforeRequest(method) {
+    const token = getAccessToken();
+    if (token) {
+      method.config.headers.Authorization = `Bearer ${token}`;
+    }
+  },
+  responded: {
+    onSuccess: handleResponse
+  }
+});
+
+export const alovaInstanceGH = createAlova({
+  baseURL:
+    process.env.NODE_ENV === 'development'
+      ? '/gh'
+      : 'https://api.github.com/repos/emsesp/EMS-ESP32/releases',
+  statesHook: ReactHook,
+  requestAdapter: xhrRequestAdapter()
+});

interface/src/api/index.ts

@@ -1,2 +0,0 @@
-export * from './Env'
-export * from './Endpoints'

interface/src/api/mqtt.ts

@@ -0,0 +1,10 @@
+import type { MqttSettingsType, MqttStatusType } from 'types';
+
+import { alovaInstance } from './endpoints';
+
+export const readMqttStatus = () =>
+  alovaInstance.Get<MqttStatusType>('/rest/mqttStatus');
+export const readMqttSettings = () =>
+  alovaInstance.Get<MqttSettingsType>('/rest/mqttSettings');
+export const updateMqttSettings = (data: MqttSettingsType) =>
+  alovaInstance.Post<MqttSettingsType>('/rest/mqttSettings', data);

interface/src/api/network.ts

@@ -0,0 +1,17 @@
+import type { NetworkSettingsType, NetworkStatusType, WiFiNetworkList } from 'types';
+
+import { alovaInstance } from './endpoints';
+
+const LIST_NETWORKS_TIMEOUT = 20000; // 20 seconds
+
+export const readNetworkStatus = () =>
+  alovaInstance.Get<NetworkStatusType>('/rest/networkStatus');
+export const scanNetworks = () => alovaInstance.Get('/rest/scanNetworks');
+export const listNetworks = () =>
+  alovaInstance.Get<WiFiNetworkList>('/rest/listNetworks', {
+    timeout: LIST_NETWORKS_TIMEOUT
+  });
+export const readNetworkSettings = () =>
+  alovaInstance.Get<NetworkSettingsType>('/rest/networkSettings');
+export const updateNetworkSettings = (wifiSettings: NetworkSettingsType) =>
+  alovaInstance.Post<NetworkSettingsType>('/rest/networkSettings', wifiSettings);

interface/src/api/ntp.ts

@@ -0,0 +1,14 @@
+import type { NTPSettingsType, NTPStatusType, Time } from 'types';
+
+import { alovaInstance } from './endpoints';
+
+export const readNTPStatus = () =>
+  alovaInstance.Get<NTPStatusType>('/rest/ntpStatus');
+
+export const readNTPSettings = () =>
+  alovaInstance.Get<NTPSettingsType>('/rest/ntpSettings');
+export const updateNTPSettings = (data: NTPSettingsType) =>
+  alovaInstance.Post<NTPSettingsType>('/rest/ntpSettings', data);
+
+export const updateTime = (data: Time) =>
+  alovaInstance.Post<Time>('/rest/time', data);

interface/src/api/security.ts

@@ -0,0 +1,14 @@
+import type { SecuritySettingsType, Token } from 'types';
+
+import { alovaInstance } from './endpoints';
+
+export const readSecuritySettings = () =>
+  alovaInstance.Get<SecuritySettingsType>('/rest/securitySettings');
+
+export const updateSecuritySettings = (securitySettings: SecuritySettingsType) =>
+  alovaInstance.Post('/rest/securitySettings', securitySettings);
+
+export const generateToken = (username?: string) =>
+  alovaInstance.Get<Token>('/rest/generateToken', {
+    params: { username }
+  });

interface/src/api/system.ts

@@ -0,0 +1,47 @@
+import type { LogSettings, SystemStatus } from 'types';
+
+import { alovaInstance, alovaInstanceGH } from './endpoints';
+
+// systemStatus - also used to ping in System Monitor for pinging
+export const readSystemStatus = () =>
+  alovaInstance.Get<SystemStatus>('/rest/systemStatus');
+
+// SystemLog
+export const readLogSettings = () =>
+  alovaInstance.Get<LogSettings>('/rest/logSettings');
+export const updateLogSettings = (data: LogSettings) =>
+  alovaInstance.Post('/rest/logSettings', data);
+export const fetchLogES = () => alovaInstance.Get('/es/log');
+
+// Get versions from GitHub
+// cache for 10 minutes to stop getting the IP blocked by GitHub
+export const getStableVersion = () =>
+  alovaInstanceGH.Get('latest', {
+    cacheFor: 60 * 10 * 1000,
+    transform(response: { data: { name: string; published_at: string } }) {
+      return {
+        name: response.data.name.substring(1),
+        published_at: response.data.published_at
+      };
+    }
+  });
+export const getDevVersion = () =>
+  alovaInstanceGH.Get('tags/latest', {
+    cacheFor: 60 * 10 * 1000,
+    transform(response: { data: { name: string; published_at: string } }) {
+      return {
+        name: response.data.name.split(/\s+/).splice(-1)[0]?.substring(1) || '',
+        published_at: response.data.published_at
+      };
+    }
+  });
+
+const UPLOAD_TIMEOUT = 60000; // 1 minute
+
+export const uploadFile = (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  return alovaInstance.Post('/rest/uploadFile', formData, {
+    timeout: UPLOAD_TIMEOUT
+  });
+};

interface/src/app/main/CustomEntities.tsx

@@ -0,0 +1,400 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useBlocker } from 'react-router';
+import { toast } from 'react-toastify';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Button, Typography } from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { updateState, useRequest } from 'alova/client';
+import {
+  BlockNavigation,
+  ButtonRow,
+  FormLoader,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { useInterval } from 'utils';
+
+import { readCustomEntities, writeCustomEntities } from '../../api/app';
+import SettingsCustomEntitiesDialog from './CustomEntitiesDialog';
+import { DeviceValueTypeNames, DeviceValueUOM_s } from './types';
+import type { Entities, EntityItem } from './types';
+import { entityItemValidation } from './validators';
+
+const MIN_ID = -100;
+const MAX_ID = 100;
+const ICON_SIZE = 12;
+
+const CustomEntities = () => {
+  const { LL } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+  const [selectedEntityItem, setSelectedEntityItem] = useState<EntityItem>();
+  const [creating, setCreating] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  useLayoutTitle(LL.CUSTOM_ENTITIES(0));
+
+  const {
+    data: entities,
+    send: fetchEntities,
+    error
+  } = useRequest(readCustomEntities, {
+    initialData: []
+  });
+
+  const intervalCallback = useCallback(() => {
+    if (!dialogOpen && !numChanges) {
+      void fetchEntities();
+    }
+  }, [dialogOpen, numChanges, fetchEntities]);
+
+  useInterval(intervalCallback);
+
+  const { send: writeEntities } = useRequest(
+    (data: Entities) => writeCustomEntities(data),
+    { immediate: false }
+  );
+
+  const hasEntityChanged = useCallback((ei: EntityItem) => {
+    return (
+      ei.id !== ei.o_id ||
+      ei.ram !== ei.o_ram ||
+      (ei?.name || '') !== (ei?.o_name || '') ||
+      ei.device_id !== ei.o_device_id ||
+      ei.type_id !== ei.o_type_id ||
+      ei.offset !== ei.o_offset ||
+      ei.uom !== ei.o_uom ||
+      ei.factor !== ei.o_factor ||
+      ei.value_type !== ei.o_value_type ||
+      ei.writeable !== ei.o_writeable ||
+      ei.hide !== ei.o_hide ||
+      ei.deleted !== ei.o_deleted ||
+      (ei.value || '') !== (ei.o_value || '')
+    );
+  }, []);
+
+  const entity_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
+      --data-table-library_grid-template-columns: repeat(1, minmax(60px, 1fr)) minmax(80px, auto) 80px 80px 80px 120px;
+    `,
+        BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+        BaseCell: `
+      &:nth-of-type(1) {
+        padding: 8px;
+      }
+      &:nth-of-type(2) {
+        text-align: center;
+      }
+      &:nth-of-type(3) {
+        text-align: center;
+      }
+      &:nth-of-type(4) {
+        text-align: center;
+      }
+      &:nth-of-type(5) {
+        text-align: center;
+      }
+      &:nth-of-type(6) {
+        text-align: center;
+      }
+    `,
+        HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+        height: 36px;
+      }
+    `,
+        Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        border-bottom: 1px solid #565656;
+      }
+      &:hover .td {
+        background-color: #177ac9;
+      }
+    `
+      }),
+    []
+  );
+
+  const saveEntities = useCallback(async () => {
+    await writeEntities({
+      entities: entities
+        .filter((ei: EntityItem) => !ei.deleted)
+        .map((condensed_ei: EntityItem) => ({
+          id: condensed_ei.id,
+          ram: condensed_ei.ram,
+          name: condensed_ei.name,
+          device_id: condensed_ei.device_id,
+          type_id: condensed_ei.type_id,
+          offset: condensed_ei.offset,
+          factor: condensed_ei.factor,
+          uom: condensed_ei.uom,
+          writeable: condensed_ei.writeable,
+          hide: condensed_ei.hide,
+          value_type: condensed_ei.value_type,
+          value: condensed_ei.value
+        }))
+    })
+      .then(() => {
+        toast.success(LL.ENTITIES_UPDATED());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        await fetchEntities();
+        setNumChanges(0);
+      });
+  }, [entities, writeEntities, LL, fetchEntities]);
+
+  const editEntityItem = useCallback((ei: EntityItem) => {
+    setCreating(false);
+    setSelectedEntityItem(ei);
+    setDialogOpen(true);
+  }, []);
+
+  const onDialogClose = useCallback(() => {
+    setDialogOpen(false);
+  }, []);
+
+  const onDialogCancel = useCallback(async () => {
+    await fetchEntities().then(() => {
+      setNumChanges(0);
+    });
+  }, [fetchEntities]);
+
+  const onDialogSave = useCallback(
+    (updatedItem: EntityItem) => {
+      setDialogOpen(false);
+      void updateState(readCustomEntities(), (data: EntityItem[]) => {
+        const new_data = creating
+          ? [
+              ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),
+              updatedItem
+            ]
+          : data.map((ei) =>
+              ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei
+            );
+        setNumChanges(new_data.filter((ei) => hasEntityChanged(ei)).length);
+        return new_data;
+      });
+    },
+    [creating, hasEntityChanged]
+  );
+
+  const onDialogDup = useCallback((item: EntityItem) => {
+    setCreating(true);
+    setSelectedEntityItem({
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      name: item.name + '_',
+      ram: item.ram,
+      device_id: item.device_id,
+      type_id: item.type_id,
+      offset: item.offset,
+      factor: item.factor,
+      uom: item.uom,
+      value_type: item.value_type,
+      writeable: item.writeable,
+      deleted: false,
+      hide: item.hide,
+      value: item.value
+    });
+    setDialogOpen(true);
+  }, []);
+
+  const addEntityItem = useCallback(() => {
+    setCreating(true);
+    setSelectedEntityItem({
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      name: '',
+      ram: 0,
+      device_id: '0',
+      type_id: '0',
+      offset: 0,
+      factor: 1,
+      uom: 0,
+      value_type: 0,
+      writeable: false,
+      deleted: false,
+      hide: false,
+      value: ''
+    });
+    setDialogOpen(true);
+  }, []);
+
+  const formatValue = useCallback((value: unknown, uom: number) => {
+    return value === undefined
+      ? ''
+      : typeof value === 'number'
+        ? new Intl.NumberFormat().format(value) +
+          (uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`)
+        : `${value as string}${uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`}`;
+  }, []);
+
+  const showHex = useCallback((value: number, digit: number) => {
+    return `0x${value.toString(16).toUpperCase().padStart(digit, '0')}`;
+  }, []);
+
+  const filteredAndSortedEntities = useMemo(
+    () =>
+      entities
+        ?.filter((ei: EntityItem) => !ei.deleted)
+        .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name)) ?? [],
+    [entities]
+  );
+
+  const renderEntity = useCallback(() => {
+    if (!entities) {
+      return (
+        <FormLoader onRetry={fetchEntities} errorMessage={error?.message || ''} />
+      );
+    }
+
+    return (
+      <Table
+        data={{
+          nodes: filteredAndSortedEntities
+        }}
+        theme={entity_theme}
+        layout={{ custom: true }}
+      >
+        {(tableList: EntityItem[]) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell>{LL.NAME(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.ID_OF(LL.DEVICE())}</HeaderCell>
+                <HeaderCell stiff>{LL.ID_OF(LL.TYPE(1))}</HeaderCell>
+                <HeaderCell stiff>{LL.OFFSET()}</HeaderCell>
+                <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((ei: EntityItem) => (
+                <Row key={ei.name} item={ei} onClick={() => editEntityItem(ei)}>
+                  <Cell>
+                    {ei.name}&nbsp;
+                    {ei.writeable && (
+                      <EditOutlinedIcon
+                        color="primary"
+                        sx={{ fontSize: ICON_SIZE }}
+                      />
+                    )}
+                  </Cell>
+                  <Cell>
+                    {ei.ram === 1 ? '' : showHex(ei.device_id as number, 2)}
+                  </Cell>
+                  <Cell>{ei.ram === 1 ? '' : showHex(ei.type_id as number, 3)}</Cell>
+                  <Cell>{ei.ram === 1 ? '' : ei.offset}</Cell>
+                  <Cell>
+                    {ei.ram === 1 ? 'RAM' : DeviceValueTypeNames[ei.value_type]}
+                  </Cell>
+                  <Cell>{formatValue(ei.value, ei.uom)}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    );
+  }, [
+    entities,
+    error,
+    fetchEntities,
+    entity_theme,
+    editEntityItem,
+    LL,
+    filteredAndSortedEntities,
+    showHex,
+    formatValue
+  ]);
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      <Box mb={2} color="warning.main">
+        <Typography variant="body1">{LL.ENTITIES_HELP_1()}.</Typography>
+      </Box>
+
+      {renderEntity()}
+
+      {selectedEntityItem && (
+        <SettingsCustomEntitiesDialog
+          open={dialogOpen}
+          creating={creating}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          onDup={onDialogDup}
+          selectedItem={selectedEntityItem}
+          validator={entityItemValidation(entities, selectedEntityItem)}
+        />
+      )}
+
+      <Box mt={2} display="flex" flexWrap="wrap">
+        <Box flexGrow={1}>
+          {numChanges > 0 && (
+            <ButtonRow>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                onClick={onDialogCancel}
+                color="secondary"
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<WarningIcon color="warning" />}
+                variant="contained"
+                color="info"
+                onClick={saveEntities}
+              >
+                {LL.APPLY_CHANGES(numChanges)}
+              </Button>
+            </ButtonRow>
+          )}
+        </Box>
+        <Box flexWrap="nowrap" whiteSpace="nowrap">
+          <Button
+            startIcon={<AddIcon />}
+            variant="outlined"
+            color="primary"
+            onClick={addEntityItem}
+          >
+            {LL.ADD(0)}
+          </Button>
+        </Box>
+      </Box>
+    </SectionContent>
+  );
+};
+
+export default CustomEntities;

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -0,0 +1,447 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
+import DoneIcon from '@mui/icons-material/Done';
+import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  MenuItem,
+  TextField
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
+import { BlockFormControlLabel, ValidatedTextField } from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValue } from 'utils';
+import { validate } from 'validators';
+
+import { DeviceValueType, DeviceValueTypeNames, DeviceValueUOM_s } from './types';
+import type { EntityItem } from './types';
+
+// Constant value type options for the dropdown
+const VALUE_TYPE_OPTIONS = [
+  DeviceValueType.BOOL,
+  DeviceValueType.INT8,
+  DeviceValueType.UINT8,
+  DeviceValueType.INT16,
+  DeviceValueType.UINT16,
+  DeviceValueType.UINT24,
+  DeviceValueType.TIME,
+  DeviceValueType.UINT32,
+  DeviceValueType.STRING
+] as const;
+
+interface CustomEntitiesDialogProps {
+  open: boolean;
+  creating: boolean;
+  onClose: () => void;
+  onSave: (ei: EntityItem) => void;
+  onDup: (ei: EntityItem) => void;
+  selectedItem: EntityItem;
+  validator: Schema;
+}
+
+const CustomEntitiesDialog = ({
+  open,
+  creating,
+  onClose,
+  onSave,
+  onDup,
+  selectedItem,
+  validator
+}: CustomEntitiesDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as React.Dispatch<
+          React.SetStateAction<Record<string, unknown>>
+        >
+      ),
+    []
+  );
+
+  useEffect(() => {
+    if (open) {
+      setFieldErrors(undefined);
+      // Convert to hex strings - combined into single setEditItem call
+      const deviceIdHex =
+        typeof selectedItem.device_id === 'number'
+          ? selectedItem.device_id.toString(16).toUpperCase()
+          : selectedItem.device_id;
+      const typeIdHex =
+        typeof selectedItem.type_id === 'number'
+          ? selectedItem.type_id.toString(16).toUpperCase()
+          : selectedItem.type_id;
+      const factorValue =
+        selectedItem.value_type === DeviceValueType.BOOL &&
+        typeof selectedItem.factor === 'number'
+          ? selectedItem.factor.toString(16).toUpperCase()
+          : selectedItem.factor;
+
+      setEditItem({
+        ...selectedItem,
+        device_id: deviceIdHex,
+        type_id: typeIdHex,
+        factor: factorValue
+      });
+    }
+  }, [open, selectedItem]);
+
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  const save = useCallback(async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+
+      // Create a copy to avoid mutating the state directly
+      const processedItem: EntityItem = { ...editItem };
+
+      if (typeof processedItem.device_id === 'string') {
+        processedItem.device_id = Number.parseInt(processedItem.device_id, 16);
+      }
+      if (typeof processedItem.type_id === 'string') {
+        processedItem.type_id = Number.parseInt(processedItem.type_id, 16);
+      }
+      if (
+        processedItem.value_type === DeviceValueType.BOOL &&
+        typeof processedItem.factor === 'string'
+      ) {
+        processedItem.factor = Number.parseInt(processedItem.factor, 16);
+      }
+      onSave(processedItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  }, [validator, editItem, onSave]);
+
+  const remove = useCallback(() => {
+    const itemWithDeleted = { ...editItem, deleted: true };
+    onSave(itemWithDeleted);
+  }, [editItem, onSave]);
+
+  const dup = useCallback(() => {
+    onDup(editItem);
+  }, [editItem, onDup]);
+
+  // Memoize UOM menu items to avoid recreating on every render
+  const uomMenuItems = useMemo(
+    () =>
+      DeviceValueUOM_s.map((val, i) => (
+        <MenuItem key={val} value={i}>
+          {val}
+        </MenuItem>
+      )),
+    []
+  );
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>
+        {creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()}&nbsp;{LL.ENTITY()}
+      </DialogTitle>
+      <DialogContent dividers>
+        <Grid container spacing={2} rowSpacing={0}>
+          <Grid size={12}>
+            <ValidatedTextField
+              fieldErrors={fieldErrors || {}}
+              name="name"
+              label={LL.NAME(0)}
+              value={editItem.name}
+              margin="normal"
+              fullWidth
+              onChange={updateFormValue}
+            />
+          </Grid>
+          <Grid mt={3}>
+            <BlockFormControlLabel
+              control={
+                <Checkbox
+                  icon={<InsertCommentOutlinedIcon htmlColor="white" />}
+                  checkedIcon={<CommentsDisabledOutlinedIcon color="primary" />}
+                  checked={editItem.hide}
+                  onChange={updateFormValue}
+                  name="hide"
+                />
+              }
+              label="API/MQTT"
+            />
+          </Grid>
+          <Grid>
+            <TextField
+              name="ram"
+              label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
+              value={editItem.ram}
+              variant="outlined"
+              onChange={updateFormValue}
+              margin="normal"
+              fullWidth
+              select
+            >
+              <MenuItem value={0}>EMS-{LL.VALUE(1)}</MenuItem>
+              <MenuItem value={1}>RAM-{LL.VALUE(1)}</MenuItem>
+            </TextField>
+          </Grid>
+          {editItem.ram === 1 && (
+            <>
+              <Grid>
+                <TextField
+                  name="value"
+                  label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
+                  type="string"
+                  value={editItem.value as string}
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  fullWidth
+                  margin="normal"
+                />
+              </Grid>
+              <Grid>
+                <TextField
+                  name="uom"
+                  label={LL.UNIT()}
+                  value={editItem.uom}
+                  margin="normal"
+                  onChange={updateFormValue}
+                  select
+                >
+                  {uomMenuItems}
+                </TextField>
+              </Grid>
+            </>
+          )}
+          {editItem.ram === 0 && (
+            <>
+              <Grid mt={3}>
+                <BlockFormControlLabel
+                  control={
+                    <Checkbox
+                      icon={<EditOffOutlinedIcon color="primary" />}
+                      checkedIcon={<EditOutlinedIcon htmlColor="white" />}
+                      checked={editItem.writeable}
+                      onChange={updateFormValue}
+                      name="writeable"
+                    />
+                  }
+                  label={LL.WRITEABLE()}
+                />
+              </Grid>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="device_id"
+                  label={LL.ID_OF(LL.DEVICE())}
+                  margin="normal"
+                  sx={{ width: '11ch' }}
+                  type="string"
+                  value={editItem.device_id as string}
+                  onChange={updateFormValue}
+                  slotProps={{
+                    input: {
+                      startAdornment: (
+                        <InputAdornment position="start">0x</InputAdornment>
+                      )
+                    },
+                    htmlInput: { style: { textTransform: 'uppercase' } }
+                  }}
+                />
+              </Grid>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="type_id"
+                  label={LL.ID_OF(LL.TYPE(1))}
+                  margin="normal"
+                  sx={{ width: '11ch' }}
+                  type="string"
+                  value={editItem.type_id as string}
+                  onChange={updateFormValue}
+                  slotProps={{
+                    input: {
+                      startAdornment: (
+                        <InputAdornment position="start">0x</InputAdornment>
+                      )
+                    },
+                    htmlInput: { style: { textTransform: 'uppercase' } }
+                  }}
+                />
+              </Grid>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="offset"
+                  label={LL.OFFSET()}
+                  margin="normal"
+                  sx={{ width: '11ch' }}
+                  type="number"
+                  value={numberValue(editItem.offset)}
+                  onChange={updateFormValue}
+                />
+              </Grid>
+              <Grid>
+                <TextField
+                  name="value_type"
+                  label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
+                  value={editItem.value_type}
+                  variant="outlined"
+                  sx={{ width: '11ch' }}
+                  onChange={updateFormValue}
+                  margin="normal"
+                  select
+                >
+                  {VALUE_TYPE_OPTIONS.map((valueType) => (
+                    <MenuItem key={valueType} value={valueType}>
+                      {DeviceValueTypeNames[valueType]}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+
+              {editItem.value_type !== DeviceValueType.BOOL &&
+                editItem.value_type !== DeviceValueType.STRING && (
+                  <>
+                    <Grid>
+                      <TextField
+                        name="factor"
+                        label={LL.FACTOR()}
+                        value={numberValue(editItem.factor as number)}
+                        variant="outlined"
+                        onChange={updateFormValue}
+                        sx={{ width: '11ch' }}
+                        margin="normal"
+                        type="number"
+                        slotProps={{
+                          htmlInput: { step: '0.001' }
+                        }}
+                      />
+                    </Grid>
+                    <Grid>
+                      <TextField
+                        name="uom"
+                        label={LL.UNIT()}
+                        value={editItem.uom}
+                        margin="normal"
+                        sx={{ width: '11ch' }}
+                        onChange={updateFormValue}
+                        select
+                      >
+                        {uomMenuItems}
+                      </TextField>
+                    </Grid>
+                  </>
+                )}
+              {editItem.value_type === DeviceValueType.STRING &&
+                editItem.device_id !== '0' && (
+                  <Grid>
+                    <ValidatedTextField
+                      fieldErrors={fieldErrors || {}}
+                      name="factor"
+                      label={LL.BYTES()}
+                      value={numberValue(editItem.factor as number)}
+                      sx={{ width: '11ch' }}
+                      variant="outlined"
+                      onChange={updateFormValue}
+                      margin="normal"
+                      type="number"
+                      slotProps={{
+                        htmlInput: { step: '1', min: '1', max: '255' }
+                      }}
+                    />
+                  </Grid>
+                )}
+              {editItem.value_type === DeviceValueType.BOOL && (
+                <Grid>
+                  <ValidatedTextField
+                    fieldErrors={fieldErrors || {}}
+                    name="factor"
+                    label={LL.BITMASK()}
+                    value={editItem.factor as string}
+                    sx={{ width: '11ch' }}
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    type="string"
+                    slotProps={{
+                      input: {
+                        startAdornment: (
+                          <InputAdornment position="start">0x</InputAdornment>
+                        )
+                      },
+                      htmlInput: { style: { textTransform: 'uppercase' } }
+                    }}
+                  />
+                </Grid>
+              )}
+            </>
+          )}
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        {!creating && (
+          <Box flexGrow={1}>
+            <Button
+              startIcon={<RemoveIcon />}
+              variant="outlined"
+              color="warning"
+              onClick={remove}
+            >
+              {LL.REMOVE()}
+            </Button>
+            <Button
+              sx={{ ml: 1 }}
+              startIcon={<AddIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={dup}
+            >
+              {LL.DUPLICATE()}
+            </Button>
+          </Box>
+        )}
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={creating ? <AddIcon /> : <DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {creating ? LL.ADD(0) : LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CustomEntitiesDialog;

interface/src/app/main/Customizations.tsx

@@ -0,0 +1,807 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useBlocker, useLocation } from 'react-router';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import EditIcon from '@mui/icons-material/Edit';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import SaveIcon from '@mui/icons-material/Save';
+import SearchIcon from '@mui/icons-material/Search';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  InputAdornment,
+  Link,
+  MenuItem,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography
+} from '@mui/material';
+
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
+import SystemMonitor from 'app/status/SystemMonitor';
+import {
+  BlockNavigation,
+  ButtonRow,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { useI18nContext } from 'i18n/i18n-react';
+
+import {
+  API,
+  readCoreData,
+  readDeviceEntities,
+  resetCustomizations,
+  writeCustomizationEntities,
+  writeDeviceName
+} from '../../api/app';
+import SettingsCustomizationsDialog from './CustomizationsDialog';
+import EntityMaskToggle from './EntityMaskToggle';
+import OptionIcon from './OptionIcon';
+import { DeviceEntityMask } from './types';
+import type { APIcall, Device, DeviceEntity } from './types';
+
+export const APIURL = `${window.location.origin}/api/`;
+
+const MAX_BUFFER_SIZE = 2000;
+
+// Helper function to create masked entity ID - extracted to avoid duplication
+const createMaskedEntityId = (de: DeviceEntity): string => {
+  const maskHex = de.m.toString(16).padStart(2, '0');
+  const hasCustomizations = !!(de.cn || de.mi || de.ma);
+  const customizations = [
+    de.cn || '',
+    de.mi ? `>${de.mi}` : '',
+    de.ma ? `<${de.ma}` : ''
+  ]
+    .filter(Boolean)
+    .join('');
+
+  return `${maskHex}${de.id}${hasCustomizations ? `|${customizations}` : ''}`;
+};
+
+const Customizations = () => {
+  const { LL } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+
+  const [restarting, setRestarting] = useState<boolean>(false);
+  const [restartNeeded, setRestartNeeded] = useState<boolean>(false);
+  const [deviceEntities, setDeviceEntities] = useState<DeviceEntity[]>([]);
+  const [confirmReset, setConfirmReset] = useState<boolean>(false);
+  const [selectedFilters, setSelectedFilters] = useState<number>(0);
+  const [search, setSearch] = useState('');
+  const [selectedDeviceEntity, setSelectedDeviceEntity] = useState<DeviceEntity>();
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [rename, setRename] = useState<boolean>(false);
+
+  useLayoutTitle(LL.CUSTOMIZATIONS());
+
+  // fetch devices first from coreData
+  const { data: devices, send: fetchCoreData } = useRequest(readCoreData);
+
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  });
+
+  const [selectedDevice, setSelectedDevice] = useState<number>(
+    Number(useLocation().state) || -1
+  );
+  const [selectedDeviceTypeNameURL, setSelectedDeviceTypeNameURL] =
+    useState<string>(''); // needed for API URL
+  const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
+
+  const { send: sendResetCustomizations } = useRequest(resetCustomizations(), {
+    immediate: false
+  });
+
+  const { send: sendDeviceName } = useRequest(
+    (data: { id: number; name: string }) => writeDeviceName(data),
+    {
+      immediate: false
+    }
+  );
+
+  const { send: sendCustomizationEntities } = useRequest(
+    (data: { id: number; entity_ids: string[] }) => writeCustomizationEntities(data),
+    {
+      immediate: false
+    }
+  );
+
+  const { send: sendDeviceEntities } = useRequest(
+    (data: number) => readDeviceEntities(data),
+    {
+      initialData: [],
+      immediate: false
+    }
+  ).onSuccess((event) => {
+    setOriginalSettings(event.data);
+  });
+
+  const setOriginalSettings = (data: DeviceEntity[]) => {
+    setDeviceEntities(
+      data.map((de) => {
+        const result: DeviceEntity = {
+          ...de,
+          o_m: de.m
+        };
+        if (de.cn !== undefined) {
+          result.o_cn = de.cn;
+        }
+        if (de.mi !== undefined) {
+          result.o_mi = de.mi;
+        }
+        if (de.ma !== undefined) {
+          result.o_ma = de.ma;
+        }
+        return result;
+      })
+    );
+  };
+
+  const doRestart = async () => {
+    setRestarting(true);
+    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+  };
+
+  const entities_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
+      --data-table-library_grid-template-columns: 156px repeat(1, minmax(80px, 1fr)) 45px minmax(45px, auto) minmax(120px, auto);
+    `,
+        BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 32px;
+      }
+    `,
+        BaseCell: `
+      &:nth-of-type(3) {
+        text-align: right;
+      }
+      &:nth-of-type(4) {
+        text-align: right;
+      }
+      &:last-of-type {
+        text-align: right;
+      }
+    `,
+        HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+        height: 36px;
+      }
+      &:nth-of-type(1) .th {
+        text-align: center;
+      }
+    `,
+        Row: `
+      background-color: #1e1e1e;
+      position: relative;
+      cursor: pointer;
+      .td {
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+      }
+      &.tr.tr-body.row-select.row-select-single-selected {
+        background-color: #3d4752;
+      }
+      &:hover .td {
+        border-top: 1px solid #177ac9;
+        background-color: #177ac9;
+      }
+    `,
+        Cell: `
+      &:nth-of-type(2) {
+        padding: 8px;
+      }
+      &:nth-of-type(3) {
+        padding-right: 4px;
+      }
+      &:nth-of-type(4) {
+        padding-right: 4px;
+      }
+      &:last-of-type {
+        padding-right: 8px;
+      }
+    `
+      }),
+    []
+  );
+
+  function hasEntityChanged(de: DeviceEntity) {
+    return (
+      (de?.cn || '') !== (de?.o_cn || '') ||
+      de.m !== de.o_m ||
+      de.ma !== de.o_ma ||
+      de.mi !== de.o_mi
+    );
+  }
+
+  useEffect(() => {
+    if (deviceEntities.length) {
+      const changedEntities = deviceEntities.filter((de) => hasEntityChanged(de));
+      setNumChanges(changedEntities.length);
+    }
+  }, [deviceEntities]);
+
+  useEffect(() => {
+    if (devices && selectedDevice !== -1) {
+      void sendDeviceEntities(selectedDevice);
+      const index = devices.devices.findIndex((d) => d.id === selectedDevice);
+      if (index === -1) {
+        setSelectedDevice(-1);
+        setSelectedDeviceTypeNameURL('');
+      } else {
+        const device = devices.devices[index];
+        if (device) {
+          setSelectedDeviceTypeNameURL(device.url || '');
+          setSelectedDeviceName(device.n);
+        }
+        setNumChanges(0);
+        setRestartNeeded(false);
+      }
+    }
+  }, [devices, selectedDevice]);
+
+  function formatValue(value: unknown) {
+    if (typeof value === 'number') {
+      return new Intl.NumberFormat().format(value);
+    } else if (value === undefined) {
+      return '';
+    } else if (typeof value === 'boolean') {
+      return value ? 'true' : 'false';
+    }
+    return value as string;
+  }
+
+  const isCommand = useCallback((de: DeviceEntity) => {
+    return de.n && de.n[0] === '!';
+  }, []);
+
+  const formatName = useCallback(
+    (de: DeviceEntity, withShortname: boolean) => {
+      let name: string;
+      if (isCommand(de)) {
+        name = de.t
+          ? `${LL.COMMAND(1)}: ${de.t} ${de.n?.slice(1)}`
+          : `${LL.COMMAND(1)}: ${de.n?.slice(1)}`;
+      } else if (de.cn && de.cn !== '') {
+        name = de.t ? `${de.t} ${de.cn}` : de.cn;
+      } else {
+        name = de.t ? `${de.t} ${de.n}` : de.n || '';
+      }
+      return withShortname ? `${name} ${de.id}` : name;
+    },
+    [LL]
+  );
+
+  const getMaskNumber = (newMask: string[]) => {
+    let new_mask = 0;
+    for (const entry of newMask) {
+      new_mask |= Number(entry);
+    }
+    return new_mask;
+  };
+
+  const getMaskString = (m: number) => {
+    const new_masks: string[] = [];
+    if ((m & 1) === 1) {
+      new_masks.push('1');
+    }
+    if ((m & 2) === 2) {
+      new_masks.push('2');
+    }
+    if ((m & 4) === 4) {
+      new_masks.push('4');
+    }
+    if ((m & 8) === 8) {
+      new_masks.push('8');
+    }
+    if ((m & 128) === 128) {
+      new_masks.push('128');
+    }
+    return new_masks;
+  };
+
+  const filter_entity = useCallback(
+    (de: DeviceEntity) =>
+      (de.m & selectedFilters || !selectedFilters) &&
+      formatName(de, true).toLowerCase().includes(search.toLowerCase()),
+    [selectedFilters, search, formatName]
+  );
+
+  const maskDisabled = useCallback(
+    (set: boolean) => {
+      setDeviceEntities((prev) =>
+        prev.map((de) => {
+          if (filter_entity(de)) {
+            const excludeMask =
+              DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE;
+            return {
+              ...de,
+              m: set ? de.m | excludeMask : de.m & ~excludeMask
+            };
+          }
+          return de;
+        })
+      );
+    },
+    [filter_entity]
+  );
+
+  const resetCustomization = useCallback(async () => {
+    try {
+      await sendResetCustomizations();
+      toast.info(LL.CUSTOMIZATIONS_RESTART());
+    } catch (error) {
+      toast.error((error as Error).message);
+    } finally {
+      setConfirmReset(false);
+      setRestarting(true);
+    }
+  }, [sendResetCustomizations, LL]);
+
+  const onDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  const updateDeviceEntity = useCallback((updatedItem: DeviceEntity) => {
+    setDeviceEntities(
+      (prev) =>
+        prev?.map((de) =>
+          de.id === updatedItem.id ? { ...de, ...updatedItem } : de
+        ) ?? []
+    );
+  }, []);
+
+  const onDialogSave = useCallback(
+    (updatedItem: DeviceEntity) => {
+      setDialogOpen(false);
+      updateDeviceEntity(updatedItem);
+    },
+    [updateDeviceEntity]
+  );
+
+  const editDeviceEntity = useCallback((de: DeviceEntity) => {
+    if (de.n === undefined || (de.n && de.n[0] === '!')) {
+      return;
+    }
+
+    if (de.cn === undefined) {
+      de.cn = '';
+    }
+
+    setSelectedDeviceEntity(de);
+    setDialogOpen(true);
+  }, []);
+
+  const saveCustomization = useCallback(async () => {
+    if (!devices || !deviceEntities || selectedDevice === -1) {
+      return;
+    }
+
+    const masked_entities = deviceEntities
+      .filter((de: DeviceEntity) => hasEntityChanged(de))
+      .map((new_de) => createMaskedEntityId(new_de));
+
+    // check size in bytes to match buffer in CPP, which is 2048
+    const bytes = new TextEncoder().encode(JSON.stringify(masked_entities)).length;
+    if (bytes > MAX_BUFFER_SIZE) {
+      toast.warning(LL.CUSTOMIZATIONS_FULL());
+      return;
+    }
+
+    await sendCustomizationEntities({
+      id: selectedDevice,
+      entity_ids: masked_entities
+    })
+      .then(() => {
+        toast.success(LL.CUSTOMIZATIONS_SAVED());
+      })
+      .catch((error: Error) => {
+        if (error.message === 'Reboot required') {
+          setRestartNeeded(true);
+        } else {
+          toast.error(error.message);
+        }
+      })
+      .finally(() => {
+        setOriginalSettings(deviceEntities);
+      });
+  }, [devices, deviceEntities, selectedDevice, sendCustomizationEntities, LL]);
+
+  const renameDevice = useCallback(async () => {
+    await sendDeviceName({ id: selectedDevice, name: selectedDeviceName })
+      .then(() => {
+        toast.success(LL.UPDATED_OF(LL.NAME(1)));
+      })
+      .catch(() => {
+        toast.error(`${LL.UPDATE_OF(LL.NAME(1))} ${LL.FAILED(1)}`);
+      })
+      .finally(async () => {
+        setRename(false);
+        await fetchCoreData();
+      });
+  }, [selectedDevice, selectedDeviceName, sendDeviceName, LL, fetchCoreData]);
+
+  const renderDeviceList = () => (
+    <>
+      <Box mb={1} color="warning.main">
+        <Typography variant="body1">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
+      </Box>
+      <Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
+        {rename ? (
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            fullWidth
+            variant="outlined"
+            value={selectedDeviceName}
+            onChange={(e) => setSelectedDeviceName(e.target.value)}
+            margin="normal"
+          />
+        ) : (
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            variant="outlined"
+            value={selectedDevice}
+            disabled={numChanges !== 0}
+            onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
+            margin="normal"
+            style={{ minWidth: '50%' }}
+            select
+          >
+            <MenuItem disabled key={-1} value={-1}>
+              {LL.SELECT_DEVICE()}...
+            </MenuItem>
+            {devices.devices.map(
+              (device: Device) =>
+                device.id < 90 && (
+                  <MenuItem key={device.id} value={device.id}>
+                    {device.n}&nbsp;({device.tn})
+                  </MenuItem>
+                )
+            )}
+          </TextField>
+        )}
+        {selectedDevice !== -1 &&
+          (rename ? (
+            <>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                color="secondary"
+                onClick={() => setRename(false)}
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<SaveIcon />}
+                variant="outlined"
+                onClick={() => renameDevice()}
+              >
+                {LL.RENAME()}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                startIcon={<EditIcon />}
+                variant="outlined"
+                onClick={() => setRename(true)}
+              >
+                {LL.RENAME()}
+              </Button>
+              <Button
+                startIcon={<SettingsBackupRestoreIcon />}
+                variant="outlined"
+                color="error"
+                onClick={() => setConfirmReset(true)}
+              >
+                {LL.REMOVE_ALL()}
+              </Button>
+            </>
+          ))}
+      </Box>
+    </>
+  );
+
+  const filteredEntities = useMemo(
+    () => deviceEntities.filter((de) => filter_entity(de)),
+    [deviceEntities, filter_entity]
+  );
+
+  const renderDeviceData = () => {
+    return (
+      <>
+        <Box color="warning.main">
+          <Typography variant="body2" mt={1} mb={1}>
+            <OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}
+            &nbsp;&nbsp;
+            <OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}
+            &nbsp;&nbsp;
+            <OptionIcon type="api_mqtt_exclude" isSet={true} />=
+            {LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
+            <OptionIcon type="web_exclude" isSet={true} />=
+            {LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
+            <OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
+          </Typography>
+        </Box>
+        <Grid
+          container
+          mb={1}
+          mt={0}
+          spacing={2}
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="center"
+        >
+          <Grid>
+            <TextField
+              size="small"
+              variant="outlined"
+              placeholder={LL.SEARCH()}
+              aria-label={LL.SEARCH()}
+              onChange={(event) => {
+                setSearch(event.target.value);
+              }}
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon color="primary" sx={{ fontSize: 16 }} />
+                    </InputAdornment>
+                  )
+                }
+              }}
+            />
+          </Grid>
+          <Grid>
+            <ToggleButtonGroup
+              size="small"
+              color="secondary"
+              value={getMaskString(selectedFilters)}
+              onChange={(_, mask: string[]) => {
+                setSelectedFilters(getMaskNumber(mask));
+              }}
+            >
+              <ToggleButton value="8">
+                <OptionIcon type="favorite" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="4">
+                <OptionIcon type="readonly" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="2">
+                <OptionIcon type="api_mqtt_exclude" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="1">
+                <OptionIcon type="web_exclude" isSet={true} />
+              </ToggleButton>
+              <ToggleButton value="128">
+                <OptionIcon type="deleted" isSet={true} />
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Grid>
+          <Grid>
+            <Button
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(false)}
+            >
+              {LL.SET_ALL()}&nbsp;
+              <OptionIcon type="api_mqtt_exclude" isSet={false} />
+              <OptionIcon type="web_exclude" isSet={false} />
+            </Button>
+          </Grid>
+          <Grid>
+            <Button
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(true)}
+            >
+              {LL.SET_ALL()}&nbsp;
+              <OptionIcon type="api_mqtt_exclude" isSet={true} />
+              <OptionIcon type="web_exclude" isSet={true} />
+            </Button>
+          </Grid>
+          <Grid>
+            <Typography variant="subtitle2" color="grey">
+              {LL.SHOWING()}&nbsp;{filteredEntities.length}/{deviceEntities.length}
+              &nbsp;{LL.ENTITIES(deviceEntities.length)}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Table
+          data={{ nodes: filteredEntities }}
+          theme={entities_theme}
+          layout={{ custom: true }}
+        >
+          {(tableList: DeviceEntity[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell stiff>{LL.OPTIONS()}</HeaderCell>
+                  <HeaderCell resize>{LL.NAME(1)}</HeaderCell>
+                  <HeaderCell stiff>{LL.MIN()}</HeaderCell>
+                  <HeaderCell stiff>{LL.MAX()}</HeaderCell>
+                  <HeaderCell resize>{LL.VALUE(0)}</HeaderCell>
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((de: DeviceEntity) => (
+                  <Row key={de.id} item={de} onClick={() => editDeviceEntity(de)}>
+                    <Cell stiff>
+                      <EntityMaskToggle onUpdate={updateDeviceEntity} de={de} />
+                    </Cell>
+                    <Cell>
+                      <span
+                        style={{
+                          color:
+                            de.v === undefined && !isCommand(de) ? 'grey' : 'inherit'
+                        }}
+                      >
+                        {formatName(de, false)}&nbsp;(
+                        <Link
+                          style={{
+                            color:
+                              de.v === undefined && !isCommand(de)
+                                ? 'grey'
+                                : 'primary'
+                          }}
+                          target="_blank"
+                          href={APIURL + selectedDeviceTypeNameURL + '/' + de.id}
+                        >
+                          {de.id}
+                        </Link>
+                        )
+                      </span>
+                    </Cell>
+                    <Cell>
+                      {!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.mi)}
+                    </Cell>
+                    <Cell>
+                      {!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.ma)}
+                    </Cell>
+                    <Cell>{formatValue(de.v)}</Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+      </>
+    );
+  };
+
+  const renderResetDialog = () => (
+    <Dialog
+      sx={dialogStyle}
+      open={confirmReset}
+      onClose={() => setConfirmReset(false)}
+    >
+      <DialogTitle>{LL.REMOVE_ALL()}</DialogTitle>
+      <DialogContent dividers>{LL.CUSTOMIZATIONS_RESET()}</DialogContent>
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={() => setConfirmReset(false)}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={resetCustomization}
+          color="error"
+        >
+          {LL.REMOVE_ALL()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  const renderContent = () => (
+    <>
+      {devices && renderDeviceList()}
+      {selectedDevice !== -1 && !rename && renderDeviceData()}
+      {restartNeeded ? (
+        <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
+          <Button
+            sx={{ ml: 2 }}
+            startIcon={<PowerSettingsNewIcon />}
+            variant="contained"
+            color="error"
+            onClick={doRestart}
+          >
+            {LL.RESTART()}
+          </Button>
+        </MessageBox>
+      ) : (
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
+            {numChanges !== 0 && (
+              <ButtonRow>
+                <Button
+                  startIcon={<CancelIcon />}
+                  variant="outlined"
+                  color="secondary"
+                  onClick={() => {
+                    if (devices) {
+                      void sendDeviceEntities(selectedDevice);
+                    }
+                  }}
+                >
+                  {LL.CANCEL()}
+                </Button>
+                <Button
+                  startIcon={<WarningIcon color="warning" />}
+                  variant="contained"
+                  color="info"
+                  onClick={saveCustomization}
+                >
+                  {LL.APPLY_CHANGES(numChanges)}
+                </Button>
+              </ButtonRow>
+            )}
+          </Box>
+        </Box>
+      )}
+      {renderResetDialog()}
+    </>
+  );
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {restarting ? <SystemMonitor /> : renderContent()}
+      {selectedDeviceEntity && (
+        <SettingsCustomizationsDialog
+          open={dialogOpen}
+          onClose={onDialogClose}
+          onSave={onDialogSave}
+          selectedItem={selectedDeviceEntity}
+        />
+      )}
+    </SectionContent>
+  );
+};
+
+export default Customizations;

interface/src/app/main/CustomizationsDialog.tsx

@@ -0,0 +1,203 @@
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  TextField,
+  Typography
+} from '@mui/material';
+
+import { dialogStyle } from 'CustomTheme';
+import { useI18nContext } from 'i18n/i18n-react';
+import { numberValue, updateValue } from 'utils';
+
+import EntityMaskToggle from './EntityMaskToggle';
+import { DeviceEntityMask } from './types';
+import type { DeviceEntity } from './types';
+
+interface SettingsCustomizationsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (di: DeviceEntity) => void;
+  selectedItem: DeviceEntity;
+}
+
+interface LabelValueProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+const LabelValue = memo(({ label, value }: LabelValueProps) => (
+  <Grid container direction="row">
+    <Typography variant="body2" color="warning.main">
+      {label}:&nbsp;
+    </Typography>
+    <Typography variant="body2">{value}</Typography>
+  </Grid>
+));
+LabelValue.displayName = 'LabelValue';
+
+const ICON_SIZE = 16;
+
+const CustomizationsDialog = ({
+  open,
+  onClose,
+  onSave,
+  selectedItem
+}: SettingsCustomizationsDialogProps) => {
+  const { LL } = useI18nContext();
+  const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
+  const [error, setError] = useState<boolean>(false);
+
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as React.Dispatch<
+          React.SetStateAction<Record<string, unknown>>
+        >
+      ),
+    []
+  );
+
+  const isWriteableNumber = useMemo(
+    () =>
+      typeof editItem.v === 'number' &&
+      editItem.w &&
+      !(editItem.m & DeviceEntityMask.DV_READONLY),
+    [editItem.v, editItem.w, editItem.m]
+  );
+
+  useEffect(() => {
+    if (open) {
+      setError(false);
+      setEditItem(selectedItem);
+    }
+  }, [open, selectedItem]);
+
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  const save = useCallback(() => {
+    if (
+      isWriteableNumber &&
+      editItem.mi &&
+      editItem.ma &&
+      editItem.mi > editItem.ma
+    ) {
+      setError(true);
+    } else {
+      onSave(editItem);
+    }
+  }, [isWriteableNumber, editItem, onSave]);
+
+  const updateDeviceEntity = useCallback((updatedItem: DeviceEntity) => {
+    setEditItem((prev) => ({ ...prev, m: updatedItem.m }));
+  }, []);
+
+  const dialogTitle = useMemo(() => `${LL.EDIT()} ${LL.ENTITY()}`, [LL]);
+
+  const writeableIcon = useMemo(
+    () =>
+      editItem.w ? (
+        <DoneIcon color="success" sx={{ fontSize: ICON_SIZE }} />
+      ) : (
+        <CloseIcon color="error" sx={{ fontSize: ICON_SIZE }} />
+      ),
+    [editItem.w]
+  );
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
+      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogContent dividers>
+        <LabelValue label={LL.ID_OF(LL.ENTITY())} value={editItem.id} />
+        <LabelValue
+          label={`${LL.DEFAULT(1)} ${LL.ENTITY_NAME(1)}`}
+          value={editItem.n}
+        />
+        <LabelValue label={LL.WRITEABLE()} value={writeableIcon} />
+
+        <Box mt={1} mb={2}>
+          <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
+        </Box>
+
+        <Grid container spacing={2}>
+          <Grid>
+            <TextField
+              name="cn"
+              label={LL.NEW_NAME_OF(LL.ENTITY())}
+              value={editItem.cn}
+              sx={{ width: '30ch' }}
+              onChange={updateFormValue}
+            />
+          </Grid>
+          {isWriteableNumber && (
+            <>
+              <Grid>
+                <TextField
+                  name="mi"
+                  label={LL.MIN()}
+                  value={numberValue(editItem.mi)}
+                  sx={{ width: '11ch' }}
+                  type="number"
+                  onChange={updateFormValue}
+                />
+              </Grid>
+              <Grid>
+                <TextField
+                  name="ma"
+                  label={LL.MAX()}
+                  value={numberValue(editItem.ma)}
+                  sx={{ width: '11ch' }}
+                  type="number"
+                  onChange={updateFormValue}
+                />
+              </Grid>
+            </>
+          )}
+        </Grid>
+
+        {error && (
+          <Typography variant="body2" color="error" mt={2}>
+            Error: Check min and max values
+          </Typography>
+        )}
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          startIcon={<CancelIcon />}
+          variant="outlined"
+          onClick={onClose}
+          color="secondary"
+        >
+          {LL.CANCEL()}
+        </Button>
+        <Button
+          startIcon={<DoneIcon />}
+          variant="outlined"
+          onClick={save}
+          color="primary"
+        >
+          {LL.UPDATE()}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CustomizationsDialog;

interface/src/app/main/Dashboard.tsx

@@ -0,0 +1,424 @@
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { IconContext } from 'react-icons/lib';
+import { Link } from 'react-router';
+import { toast } from 'react-toastify';
+
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import EditIcon from '@mui/icons-material/Edit';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import {
+  Box,
+  IconButton,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  Typography
+} from '@mui/material';
+
+import { Body, Cell, Row, Table } from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { CellTree, useTree } from '@table-library/react-table-library/tree';
+import { useRequest } from 'alova/client';
+import {
+  ButtonTooltip,
+  FormLoader,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+import { useInterval, usePersistState } from 'utils';
+
+import { readDashboard, writeDeviceValue } from '../../api/app';
+import DeviceIcon from './DeviceIcon';
+import DevicesDialog from './DevicesDialog';
+import { formatValue } from './deviceValue';
+import {
+  type DashboardItem,
+  DeviceEntityMask,
+  DeviceType,
+  type DeviceValue
+} from './types';
+import { deviceValueItemValidation } from './validators';
+
+const Dashboard = memo(() => {
+  const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
+  useLayoutTitle(LL.DASHBOARD());
+
+  const [showAll, setShowAll] = usePersistState(true, 'showAll');
+
+  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState<boolean>(false);
+  const [parentNodes, setParentNodes] = useState<number>(0);
+  const [selectedDashboardItem, setSelectedDashboardItem] =
+    useState<DashboardItem>();
+
+  const {
+    data,
+    send: fetchDashboard,
+    error
+  } = useRequest(readDashboard, {
+    initialData: { connected: true, nodes: [] }
+  }).onSuccess((event) => {
+    if (event.data.nodes.length !== parentNodes) {
+      setParentNodes(event.data.nodes.length); // count number of parents/devices
+    }
+  });
+
+  const { loading: submitting, send: sendDeviceValue } = useRequest(
+    (data: { id: number; c: string; v: unknown }) => writeDeviceValue(data),
+    {
+      immediate: false
+    }
+  );
+
+  const deviceValueDialogSave = useCallback(
+    async (devicevalue: DeviceValue) => {
+      if (!selectedDashboardItem) {
+        return;
+      }
+      const id = selectedDashboardItem.parentNode.id; // this is the parent ID
+      await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+        .then(() => {
+          toast.success(LL.WRITE_CMD_SENT());
+        })
+        .catch((error: Error) => {
+          toast.error(error.message);
+        })
+        .finally(() => {
+          setDeviceValueDialogOpen(false);
+          setSelectedDashboardItem(undefined);
+        });
+    },
+    [selectedDashboardItem, sendDeviceValue, LL]
+  );
+
+  const dashboard_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
+      --data-table-library_grid-template-columns: minmax(80px, auto) 120px 32px;
+    `,
+        BaseRow: `
+      font-size: 14px;
+      .td {
+        height: 28px;
+      }
+    `,
+        Row: `
+      cursor: pointer;
+      background-color: #1e1e1e;
+      &:nth-of-type(odd) .td {
+          background-color: #303030;
+      },
+      &:hover .td {
+        background-color: #177ac9;
+      },
+    `,
+        BaseCell: `
+      &:nth-of-type(2) {
+        text-align: right;
+      }
+      &:nth-of-type(3) {
+        text-align: right;
+      }
+    `
+      }),
+    []
+  );
+
+  const tree = useTree(
+    { nodes: [...data.nodes] },
+    {
+      onChange: () => {} // not used but needed
+    },
+    {
+      treeIcon: {
+        margin: '4px',
+        iconDefault: null,
+        iconRight: (
+          <ChevronRightIcon
+            sx={{ fontSize: 16, verticalAlign: 'middle' }}
+            color="info"
+          />
+        ),
+        iconDown: (
+          <ExpandMoreIcon
+            sx={{ fontSize: 16, verticalAlign: 'middle' }}
+            color="info"
+          />
+        )
+      },
+      indentation: 45
+    }
+  );
+
+  useInterval(() => {
+    if (!deviceValueDialogOpen) {
+      void fetchDashboard();
+    }
+  });
+
+  const nodeIds = useMemo(
+    () => data.nodes.map((item: DashboardItem) => item.id),
+    [data.nodes]
+  );
+
+  useEffect(() => {
+    showAll
+      ? tree.fns.onAddAll(nodeIds) // expand tree
+      : tree.fns.onRemoveAll(); // collapse tree
+  }, [parentNodes]);
+
+  const showType = useCallback(
+    (n?: string, t?: number) => {
+      // if we have a name show it
+      if (n) {
+        return n;
+      }
+      if (t) {
+        // otherwise pick translation based on type
+        switch (t) {
+          case DeviceType.CUSTOM:
+            return LL.CUSTOM_ENTITIES(0);
+          case DeviceType.ANALOGSENSOR:
+            return LL.ANALOG_SENSORS();
+          case DeviceType.TEMPERATURESENSOR:
+            return LL.TEMP_SENSORS();
+          case DeviceType.SCHEDULER:
+            return LL.SCHEDULER();
+          default:
+            break;
+        }
+      }
+      return '';
+    },
+    [LL]
+  );
+
+  const showName = useCallback(
+    (di: DashboardItem) => {
+      if (di.id < 100) {
+        // if its a device (parent node) and has entities
+        if (di.nodes?.length) {
+          return (
+            <span style={{ fontSize: '15px' }}>
+              <DeviceIcon type_id={di.t ?? 0} />
+              &nbsp;&nbsp;{showType(di.n, di.t)}
+              <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
+            </span>
+          );
+        }
+      }
+      if (di.dv) {
+        return <span>{di.dv.id.slice(2)}</span>;
+      }
+      return null;
+    },
+    [showType]
+  );
+
+  const hasMask = useCallback(
+    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
+    []
+  );
+
+  const editDashboardValue = useCallback(
+    (di: DashboardItem) => {
+      if (me.admin && di.dv?.c) {
+        setSelectedDashboardItem(di);
+        setDeviceValueDialogOpen(true);
+      }
+    },
+    [me.admin]
+  );
+
+  const handleShowAll = (
+    _event: React.MouseEvent<HTMLElement>,
+    toggle: boolean | null
+  ) => {
+    if (toggle !== null) {
+      tree.fns.onToggleAll({});
+      setShowAll(toggle);
+    }
+  };
+
+  const hasFavEntities = useMemo(
+    () => data.nodes.filter((item: DashboardItem) => item.id <= 90).length,
+    [data.nodes]
+  );
+
+  const renderContent = () => {
+    if (!data) {
+      return (
+        <FormLoader onRetry={fetchDashboard} errorMessage={error?.message || ''} />
+      );
+    }
+
+    return (
+      <>
+        {!data.connected && (
+          <MessageBox level="error" message={LL.EMS_BUS_WARNING()} />
+        )}
+
+        {data.connected && data.nodes.length > 0 && !hasFavEntities && (
+          <MessageBox mb={2} level="warning">
+            <Typography>
+              {LL.NO_DATA_1()}&nbsp;
+              <Link to="/customizations" style={{ color: 'white' }}>
+                {LL.CUSTOMIZATIONS()}
+              </Link>
+              &nbsp;{LL.NO_DATA_2()}&nbsp;
+              {LL.NO_DATA_3()}&nbsp;
+              <Link to="/devices" style={{ color: 'white' }}>
+                {LL.DEVICES()}
+              </Link>
+              .
+            </Typography>
+          </MessageBox>
+        )}
+
+        <Box
+          display="flex"
+          justifyContent="flex-end"
+          flexWrap="nowrap"
+          whiteSpace="nowrap"
+        >
+          <ToggleButtonGroup
+            size="small"
+            color="primary"
+            value={showAll}
+            exclusive
+            onChange={handleShowAll}
+          >
+            <ButtonTooltip title={LL.ALLVALUES()}>
+              <ToggleButton value={true}>
+                <UnfoldMoreIcon sx={{ fontSize: 18 }} />
+              </ToggleButton>
+            </ButtonTooltip>
+            <ButtonTooltip title={LL.COMPACT()}>
+              <ToggleButton value={false}>
+                <UnfoldLessIcon sx={{ fontSize: 18 }} />
+              </ToggleButton>
+            </ButtonTooltip>
+          </ToggleButtonGroup>
+        </Box>
+
+        {data.nodes.length > 0 ? (
+          <Box mt={1} justifyContent="center" flexDirection="column">
+            <IconContext.Provider
+              value={{
+                color: 'lightblue',
+                size: '18',
+                style: { verticalAlign: 'middle' }
+              }}
+            >
+              <Table
+                data={{ nodes: data.nodes }}
+                theme={dashboard_theme}
+                layout={{ custom: true }}
+                tree={tree}
+              >
+                {(tableList: DashboardItem[]) => (
+                  <Body>
+                    {tableList.map((di: DashboardItem) => (
+                      <Row
+                        key={di.id}
+                        item={di}
+                        onClick={() => editDashboardValue(di)}
+                      >
+                        {di.id > 99 ? (
+                          <>
+                            <Cell>{showName(di)}</Cell>
+                            <Cell>
+                              <ButtonTooltip
+                                title={formatValue(LL, di.dv?.v, di.dv?.u)}
+                              >
+                                <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
+                              </ButtonTooltip>
+                            </Cell>
+
+                            <Cell>
+                              {me.admin &&
+                                di.dv?.c &&
+                                !hasMask(di.dv.id, DeviceEntityMask.DV_READONLY) && (
+                                  <IconButton
+                                    size="small"
+                                    aria-label={
+                                      LL.CHANGE_VALUE() + ' ' + LL.VALUE(0)
+                                    }
+                                    onClick={() => editDashboardValue(di)}
+                                  >
+                                    <EditIcon
+                                      color="primary"
+                                      sx={{ fontSize: 16 }}
+                                    />
+                                  </IconButton>
+                                )}
+                            </Cell>
+                          </>
+                        ) : (
+                          <>
+                            <CellTree item={di}>{showName(di)}</CellTree>
+                            <Cell />
+                            <Cell />
+                          </>
+                        )}
+                      </Row>
+                    ))}
+                  </Body>
+                )}
+              </Table>
+            </IconContext.Provider>
+          </Box>
+        ) : (
+          <Box
+            display="flex"
+            // justifyContent="flex-end"
+            // flexWrap="nowrap"
+            // whiteSpace="nowrap"
+          >
+            <Typography mt={1} color="warning.main" variant="body1">
+              no data
+            </Typography>
+            <Tooltip title={LL.DASHBOARD_1()}>
+              <HelpOutlineIcon
+                sx={{
+                  ml: 1,
+                  mt: 1,
+                  fontSize: 20,
+                  verticalAlign: 'middle'
+                }}
+                color="primary"
+              />
+            </Tooltip>
+          </Box>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {renderContent()}
+      {selectedDashboardItem && selectedDashboardItem.dv && (
+        <DevicesDialog
+          open={deviceValueDialogOpen}
+          onClose={() => setDeviceValueDialogOpen(false)}
+          onSave={deviceValueDialogSave}
+          selectedItem={selectedDashboardItem.dv}
+          writeable={true}
+          validator={deviceValueItemValidation(selectedDashboardItem.dv)}
+          progress={submitting}
+        />
+      )}
+    </SectionContent>
+  );
+});
+
+export default Dashboard;

interface/src/app/main/DeviceIcon.tsx

@@ -0,0 +1,59 @@
+import { memo } from 'react';
+import { AiOutlineAlert, AiOutlineControl, AiOutlineGateway } from 'react-icons/ai';
+import { CgSmartHomeBoiler } from 'react-icons/cg';
+import { FaSolarPanel } from 'react-icons/fa';
+import { GiHeatHaze, GiTap } from 'react-icons/gi';
+import {
+  MdMoreTime,
+  MdOutlineDevices,
+  MdOutlinePool,
+  MdOutlineSensors,
+  MdPlaylistAdd,
+  MdThermostatAuto
+} from 'react-icons/md';
+import { PiFan, PiGauge } from 'react-icons/pi';
+import { TiFlowSwitch, TiThermometer } from 'react-icons/ti';
+import { VscVmConnect } from 'react-icons/vsc';
+
+import type { SvgIconProps } from '@mui/material';
+
+import { DeviceType } from './types';
+
+const deviceIconLookup: Record<
+  DeviceType,
+  React.ComponentType<SvgIconProps> | null
+> = {
+  [DeviceType.TEMPERATURESENSOR]: TiThermometer,
+  [DeviceType.ANALOGSENSOR]: PiGauge,
+  [DeviceType.BOILER]: CgSmartHomeBoiler,
+  [DeviceType.HEATSOURCE]: CgSmartHomeBoiler,
+  [DeviceType.THERMOSTAT]: MdThermostatAuto,
+  [DeviceType.MIXER]: AiOutlineControl,
+  [DeviceType.SOLAR]: FaSolarPanel,
+  [DeviceType.HEATPUMP]: GiHeatHaze,
+  [DeviceType.GATEWAY]: AiOutlineGateway,
+  [DeviceType.SWITCH]: TiFlowSwitch,
+  [DeviceType.CONTROLLER]: VscVmConnect,
+  [DeviceType.CONNECT]: VscVmConnect,
+  [DeviceType.ALERT]: AiOutlineAlert,
+  [DeviceType.EXTENSION]: MdOutlineDevices,
+  [DeviceType.WATER]: GiTap,
+  [DeviceType.POOL]: MdOutlinePool,
+  [DeviceType.CUSTOM]: MdPlaylistAdd,
+  [DeviceType.UNKNOWN]: MdOutlineSensors,
+  [DeviceType.SYSTEM]: null,
+  [DeviceType.SCHEDULER]: MdMoreTime,
+  [DeviceType.GENERIC]: MdOutlineSensors,
+  [DeviceType.VENTILATION]: PiFan
+};
+
+interface DeviceIconProps {
+  type_id: DeviceType;
+}
+
+const DeviceIcon = memo(({ type_id }: DeviceIconProps) => {
+  const Icon = deviceIconLookup[type_id];
+  return Icon ? <Icon /> : null;
+});
+
+export default DeviceIcon;

interface/src/app/main/Devices.tsx

@@ -0,0 +1,833 @@
+import {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from 'react';
+import { IconContext } from 'react-icons';
+import { useNavigate } from 'react-router';
+import { toast } from 'react-toastify';
+
+import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
+import ConstructionIcon from '@mui/icons-material/Construction';
+import EditIcon from '@mui/icons-material/Edit';
+import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
+import DownloadIcon from '@mui/icons-material/GetApp';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import SearchIcon from '@mui/icons-material/Search';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  InputAdornment,
+  List,
+  ListItem,
+  ListItemText,
+  TextField,
+  ToggleButton,
+  Typography
+} from '@mui/material';
+
+import { useRowSelect } from '@table-library/react-table-library/select';
+import { SortToggleType, useSort } from '@table-library/react-table-library/sort';
+import {
+  Body,
+  Cell,
+  Header,
+  HeaderCell,
+  HeaderRow,
+  Row,
+  Table
+} from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import type { Action, State } from '@table-library/react-table-library/types/common';
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
+import {
+  ButtonTooltip,
+  MessageBox,
+  SectionContent,
+  useLayoutTitle
+} from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+import { useInterval } from 'utils';
+
+import { readCoreData, readDeviceData, writeDeviceValue } from '../../api/app';
+import DeviceIcon from './DeviceIcon';
+import DevicesDialog from './DevicesDialog';
+import { formatValue } from './deviceValue';
+import { DeviceEntityMask, DeviceType, DeviceValueUOM_s } from './types';
+import type { Device, DeviceValue } from './types';
+import { deviceValueItemValidation } from './validators';
+
+const Devices = memo(() => {
+  const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
+  const [size, setSize] = useState([0, 0]);
+  const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
+  const [onlyFav, setOnlyFav] = useState(false);
+  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
+  const [showDeviceInfo, setShowDeviceInfo] = useState(false);
+  const [selectedDevice, setSelectedDevice] = useState<number>();
+  const [search, setSearch] = useState('');
+
+  const navigate = useNavigate();
+
+  useLayoutTitle(LL.DEVICES());
+
+  const { data: coreData, send: sendCoreData } = useRequest(readCoreData, {
+    initialData: {
+      connected: true,
+      devices: []
+    }
+  });
+
+  const { data: deviceData, send: sendDeviceData } = useRequest(
+    (id: number) => readDeviceData(id),
+    {
+      initialData: {
+        nodes: []
+      },
+      immediate: false
+    }
+  );
+
+  const { loading: submitting, send: sendDeviceValue } = useRequest(
+    (data: { id: number; c: string; v: unknown }) => writeDeviceValue(data),
+    {
+      immediate: false
+    }
+  );
+
+  useLayoutEffect(() => {
+    let raf = 0;
+    const updateSize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        setSize([window.innerWidth, window.innerHeight]);
+      });
+    };
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => {
+      window.removeEventListener('resize', updateSize);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  const leftOffset = useCallback(() => {
+    const devicesWindow = document.getElementById('devices-window');
+    if (!devicesWindow) return 0;
+    const { left, right } = devicesWindow.getBoundingClientRect();
+    if (!left || !right) return 0;
+    return left + (right - left < 400 ? 0 : 200);
+  }, []);
+
+  const common_theme = useMemo(
+    () =>
+      useTheme({
+        BaseRow: `
+      font-size: 14px;
+    `,
+        HeaderRow: `
+      text-transform: uppercase;
+      background-color: black;
+      color: #90CAF9;
+      .th {
+        border-bottom: 1px solid #565656;
+      }
+    `,
+        Row: `
+      cursor: pointer;
+      background-color: #1E1E1E;
+      .td {
+        padding: 8px;
+      }
+      &.tr.tr-body.row-select.row-select-single-selected {
+        background-color: #177ac9;
+      }
+    `
+      }),
+    []
+  );
+
+  const device_theme = useMemo(
+    () =>
+      useTheme([
+        common_theme,
+        {
+          BaseRow: `
+          font-size: 15px;
+          .td {
+           height: 28px;
+          }
+        `,
+          Table: `
+        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
+      `,
+          HeaderRow: `
+        .th {
+          padding: 8px;
+      `,
+          Row: `
+        &:nth-of-type(odd) .td {
+            background-color: #303030;
+        },
+        &:hover .td {
+          background-color: #177ac9;
+        },
+      `
+        }
+      ]),
+    [common_theme]
+  );
+
+  const data_theme = useMemo(
+    () =>
+      useTheme([
+        common_theme,
+        {
+          Table: `
+        --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
+        height: auto;
+        max-height: 100%;
+        overflow-y: scroll;
+        ::-webkit-scrollbar {
+          display:none;
+        }
+      `,
+          BaseRow: `
+      .td {
+        height: 32px;
+      }
+     `,
+          BaseCell: `
+        &:nth-of-type(1) {
+          border-left: 1px solid #177ac9;
+        },
+        &:nth-of-type(2) {
+          text-align: right;
+        },
+        &:nth-of-type(3) {
+          border-right: 1px solid #177ac9;
+        }
+      `,
+          HeaderRow: `
+        .th {
+          border-top: 1px solid #565656;
+        }
+      `,
+          Row: `
+        &:nth-of-type(odd) .td {
+          background-color: #303030;
+        },
+        &:hover .td {
+          background-color: #177ac9;
+      }
+      `
+        }
+      ]),
+    [common_theme]
+  );
+
+  const getSortIcon = (state: State, sortKey: unknown) => {
+    if (state.sortKey === sortKey && state.reverse) {
+      return <KeyboardArrowDownOutlinedIcon />;
+    }
+    if (state.sortKey === sortKey && !state.reverse) {
+      return <KeyboardArrowUpOutlinedIcon />;
+    }
+    return <UnfoldMoreOutlinedIcon />;
+  };
+
+  const dv_sort = useSort(
+    { nodes: [...deviceData.nodes] },
+    {},
+    {
+      sortIcon: {
+        iconDefault: <UnfoldMoreOutlinedIcon />,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortToggleType: SortToggleType.AlternateWithReset,
+      sortFns: {
+        NAME: (array) =>
+          array.sort((a, b) =>
+            a.id.toString().slice(2).localeCompare(b.id.toString().slice(2))
+          ),
+
+        VALUE: (array) =>
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
+      }
+    }
+  );
+
+  async function onSelectChange(action: Action, state: State) {
+    setSelectedDevice(state.id as number);
+    if (action.type === 'ADD_BY_ID_EXCLUSIVELY') {
+      await sendDeviceData(state.id as number);
+    }
+  }
+
+  const device_select = useRowSelect(
+    { nodes: [...coreData.devices] },
+    {
+      onChange: onSelectChange
+    }
+  );
+
+  const resetDeviceSelect = () => {
+    device_select.fns.onRemoveAll();
+    setSearch('');
+  };
+
+  const escFunction = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        if (device_select) {
+          device_select.fns.onRemoveAll();
+        }
+      }
+    },
+    [device_select]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction);
+    return () => {
+      document.removeEventListener('keydown', escFunction);
+    };
+  }, [escFunction]);
+
+  const customize = () => {
+    if (selectedDevice === 99) {
+      void navigate('/customentities');
+    } else {
+      void navigate('/customizations', { state: selectedDevice });
+    }
+  };
+
+  const escapeCsvCell = (cell: string) => {
+    if (cell == null) {
+      return '';
+    }
+    const sc = cell.toString().trim();
+    if (sc === '' || sc === '""') {
+      return sc;
+    }
+    if (
+      sc.includes('"') ||
+      sc.includes(';') ||
+      sc.includes('\n') ||
+      sc.includes('\r')
+    ) {
+      return '"' + sc.replace(/"/g, '""') + '"';
+    }
+    return sc;
+  };
+
+  const hasMask = useCallback(
+    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
+    []
+  );
+
+  const handleDownloadCsv = () => {
+    const deviceIndex = coreData.devices.findIndex(
+      (d: Device) => d.id === device_select.state.id
+    );
+    if (deviceIndex === -1) {
+      return;
+    }
+    const selectedDevice = coreData.devices[deviceIndex];
+    if (!selectedDevice) {
+      return;
+    }
+    const filename = selectedDevice.tn + '_' + selectedDevice.n;
+
+    const columns = [
+      {
+        accessor: (dv: DeviceValue) => dv.id.slice(2),
+        name: LL.ENTITY_NAME(0)
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          typeof dv.v === 'number' ? new Intl.NumberFormat().format(dv.v) : dv.v,
+        name: LL.VALUE(0)
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          dv.u !== undefined && DeviceValueUOM_s[dv.u]
+            ? DeviceValueUOM_s[dv.u]?.replace(/[^a-zA-Z0-9]/g, '')
+            : '',
+        name: 'UoM'
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          dv.c && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) ? 'yes' : 'no',
+        name: LL.WRITEABLE()
+      },
+      {
+        accessor: (dv: DeviceValue) =>
+          dv.h
+            ? dv.h
+            : dv.l
+              ? dv.l.join(' | ')
+              : dv.m !== undefined && dv.x !== undefined
+                ? dv.m + ', ' + dv.x
+                : '',
+        name: 'Range'
+      }
+    ];
+
+    const data = onlyFav
+      ? deviceData.nodes.filter((dv: DeviceValue) =>
+          hasMask(dv.id, DeviceEntityMask.DV_FAVORITE)
+        )
+      : deviceData.nodes;
+
+    const csvData = data.reduce(
+      (csvString: string, rowItem: DeviceValue) =>
+        csvString +
+        columns
+          .map(({ accessor }: { accessor: (dv: DeviceValue) => unknown }) =>
+            escapeCsvCell(accessor(rowItem) as string)
+          )
+          .join(';') +
+        '\r\n',
+      columns.map(({ name }: { name: string }) => escapeCsvCell(name)).join(';') +
+        '\r\n'
+    );
+
+    const downloadBlob = (blob: Blob) => {
+      const downloadLink = document.createElement('a');
+      downloadLink.download = filename;
+      downloadLink.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+    };
+
+    const device = { ...{ device: coreData.devices[deviceIndex] }, ...deviceData };
+    downloadBlob(
+      new Blob([JSON.stringify(device, null, 2)], {
+        type: 'text;charset:utf-8'
+      })
+    );
+
+    downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
+  };
+
+  useInterval(() => {
+    if (!deviceValueDialogOpen) {
+      selectedDevice ? void sendDeviceData(selectedDevice) : void sendCoreData();
+    }
+  });
+
+  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
+    const id = Number(device_select.state.id);
+    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+      .then(() => {
+        toast.success(LL.WRITE_CMD_SENT());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        setDeviceValueDialogOpen(false);
+        await sendDeviceData(id);
+        setSelectedDeviceValue(undefined);
+      });
+  };
+
+  const renderDeviceDetails = () => {
+    if (showDeviceInfo) {
+      const deviceIndex = coreData.devices.findIndex(
+        (d: Device) => d.id === device_select.state.id
+      );
+      if (deviceIndex === -1) {
+        return null;
+      }
+      const deviceDetails = coreData.devices[deviceIndex];
+      if (!deviceDetails) {
+        return null;
+      }
+
+      return (
+        <Dialog
+          sx={dialogStyle}
+          open={showDeviceInfo}
+          onClose={() => setShowDeviceInfo(false)}
+        >
+          <DialogTitle>{LL.DEVICE_DETAILS()}</DialogTitle>
+          <DialogContent dividers>
+            <List dense={true}>
+              <ListItem>
+                <ListItemText primary={LL.TYPE(0)} secondary={deviceDetails.tn} />
+              </ListItem>
+              <ListItem>
+                <ListItemText primary={LL.NAME(0)} secondary={deviceDetails.n} />
+              </ListItem>
+              {deviceDetails.t !== DeviceType.CUSTOM && (
+                <>
+                  <ListItem>
+                    <ListItemText primary={LL.BRAND()} secondary={deviceDetails.b} />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.ID_OF(LL.DEVICE())}
+                      secondary={
+                        '0x' +
+                        ('00' + deviceDetails.d.toString(16).toUpperCase()).slice(-2)
+                      }
+                    />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.ID_OF(LL.PRODUCT())}
+                      secondary={deviceDetails.p}
+                    />
+                  </ListItem>
+                  <ListItem>
+                    <ListItemText
+                      primary={LL.VERSION()}
+                      secondary={deviceDetails.v}
+                    />
+                  </ListItem>
+                </>
+              )}
+            </List>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              variant="outlined"
+              onClick={() => setShowDeviceInfo(false)}
+              color="secondary"
+            >
+              {LL.CLOSE()}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      );
+    }
+    return null;
+  };
+
+  const renderCoreData = () => (
+    <>
+      {!coreData.connected ? (
+        <MessageBox level="error" message={LL.EMS_BUS_WARNING()} />
+      ) : (
+        <Box justifyContent="center" flexDirection="column">
+          <IconContext.Provider
+            value={{
+              color: 'lightblue',
+              size: '18',
+              style: { verticalAlign: 'middle' }
+            }}
+          >
+            <Table
+              data={{ nodes: [...coreData.devices] }}
+              select={device_select}
+              theme={device_theme}
+              layout={{ custom: true }}
+            >
+              {(tableList: Device[]) => (
+                <>
+                  <Header>
+                    <HeaderRow>
+                      <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
+                      <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
+                    </HeaderRow>
+                  </Header>
+                  <Body>
+                    {tableList.length === 0 && (
+                      <CircularProgress sx={{ margin: 1 }} size={18} />
+                    )}
+                    {tableList.map((device: Device) => (
+                      <Row key={device.id} item={device}>
+                        <Cell>
+                          <DeviceIcon type_id={device.t} />
+                          &nbsp;&nbsp;
+                          {device.n}
+                          <span style={{ color: 'lightblue' }}>
+                            &nbsp;&nbsp;({device.e})
+                          </span>
+                        </Cell>
+                        <Cell stiff>{device.tn}</Cell>
+                      </Row>
+                    ))}
+                  </Body>
+                </>
+              )}
+            </Table>
+          </IconContext.Provider>
+        </Box>
+      )}
+    </>
+  );
+
+  const deviceValueDialogClose = () => {
+    setDeviceValueDialogOpen(false);
+    if (selectedDevice !== undefined) {
+      void sendDeviceData(selectedDevice);
+    }
+  };
+
+  const renderDeviceData = () => {
+    if (!selectedDevice) {
+      return;
+    }
+
+    const showDeviceValue = useCallback((dv: DeviceValue) => {
+      setSelectedDeviceValue(dv);
+      setDeviceValueDialogOpen(true);
+    }, []);
+
+    const renderNameCell = useCallback(
+      (dv: DeviceValue) => (
+        <>
+          {dv.id.slice(2)}&nbsp;
+          {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
+            <StarIcon color="primary" sx={{ fontSize: 12 }} />
+          )}
+          {hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+            <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+          )}
+          {hasMask(dv.id, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
+            <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+          )}
+        </>
+      ),
+      [hasMask]
+    );
+
+    const shown_data = useMemo(() => {
+      if (onlyFav) {
+        return deviceData.nodes.filter(
+          (dv: DeviceValue) =>
+            hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) &&
+            dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
+        );
+      }
+      return deviceData.nodes.filter((dv: DeviceValue) =>
+        dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
+      );
+    }, [deviceData.nodes, onlyFav, search]);
+
+    const deviceIndex = coreData.devices.findIndex(
+      (d: Device) => d.id === device_select.state.id
+    );
+    if (deviceIndex === -1) {
+      return;
+    }
+    const deviceInfo = coreData.devices[deviceIndex];
+    if (!deviceInfo) {
+      return;
+    }
+
+    const [, height] = size;
+    return (
+      <Box
+        sx={{
+          backgroundColor: 'black',
+          position: 'absolute',
+          left: leftOffset,
+          right: 0,
+          bottom: 0,
+          top: 64,
+          zIndex: 'modal',
+          maxHeight: () => (height || 0) - 126,
+          border: '1px solid #177ac9'
+        }}
+      >
+        <Box sx={{ p: 1 }}>
+          <Grid container justifyContent="space-between">
+            <Typography noWrap variant="subtitle1" color="warning.main">
+              {deviceInfo.n}&nbsp;(
+              {deviceInfo.tn})
+            </Typography>
+            <Grid justifyContent="flex-end">
+              <ButtonTooltip title={LL.CLOSE()}>
+                <IconButton onClick={resetDeviceSelect} aria-label={LL.CLOSE()}>
+                  <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
+                </IconButton>
+              </ButtonTooltip>
+            </Grid>
+          </Grid>
+
+          <TextField
+            size="small"
+            variant="outlined"
+            sx={{ width: '22ch' }}
+            placeholder={LL.SEARCH()}
+            aria-label={LL.SEARCH()}
+            onChange={(event) => {
+              setSearch(event.target.value);
+            }}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon color="primary" sx={{ fontSize: 16 }} />
+                  </InputAdornment>
+                )
+              }
+            }}
+          />
+          <ButtonTooltip title={LL.DEVICE_DETAILS()}>
+            <IconButton
+              onClick={() => setShowDeviceInfo(true)}
+              aria-label={LL.DEVICE_DETAILS()}
+            >
+              <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+            </IconButton>
+          </ButtonTooltip>
+          {me.admin && (
+            <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
+              <IconButton onClick={customize} aria-label={LL.CUSTOMIZATIONS()}>
+                <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
+              </IconButton>
+            </ButtonTooltip>
+          )}
+          <ButtonTooltip title={LL.EXPORT()}>
+            <IconButton onClick={handleDownloadCsv} aria-label={LL.EXPORT()}>
+              <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
+            </IconButton>
+          </ButtonTooltip>
+
+          <ButtonTooltip title={LL.FAVORITES()}>
+            <ToggleButton
+              value="1"
+              size="small"
+              selected={onlyFav}
+              onChange={() => {
+                setOnlyFav(!onlyFav);
+              }}
+            >
+              {onlyFav ? (
+                <StarIcon color="primary" sx={{ fontSize: 18 }} />
+              ) : (
+                <StarBorderOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+              )}{' '}
+            </ToggleButton>
+          </ButtonTooltip>
+
+          <span style={{ color: 'grey', fontSize: '12px' }}>
+            &nbsp;
+            {LL.SHOWING() +
+              ' ' +
+              shown_data.length +
+              '/' +
+              deviceInfo.e +
+              ' ' +
+              LL.ENTITIES(shown_data.length)}
+          </span>
+        </Box>
+
+        <Table
+          data={{ nodes: Array.from(shown_data) }}
+          theme={data_theme}
+          sort={dv_sort}
+          layout={{ custom: true, fixedHeader: true }}
+        >
+          {(tableList: DeviceValue[]) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCell resize>
+                    <Button
+                      fullWidth
+                      style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                      endIcon={getSortIcon(dv_sort.state, 'NAME')}
+                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                    >
+                      {LL.ENTITY_NAME(0)}
+                    </Button>
+                  </HeaderCell>
+                  <HeaderCell resize>
+                    <Button
+                      fullWidth
+                      style={{ fontSize: '14px', justifyContent: 'flex-end' }}
+                      endIcon={getSortIcon(dv_sort.state, 'VALUE')}
+                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
+                    >
+                      {LL.VALUE(0)}
+                    </Button>
+                  </HeaderCell>
+                  <HeaderCell stiff />
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((dv: DeviceValue) => (
+                  <Row key={dv.id} item={dv} onClick={() => showDeviceValue(dv)}>
+                    <Cell>{renderNameCell(dv)}</Cell>
+                    <Cell>{formatValue(LL, dv.v, dv.u)}</Cell>
+                    <Cell stiff>
+                      {me.admin &&
+                        dv.c &&
+                        !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+                          <IconButton
+                            size="small"
+                            onClick={() => showDeviceValue(dv)}
+                          >
+                            {dv.v === '' ? (
+                              <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
+                            ) : (
+                              <EditIcon color="primary" sx={{ fontSize: 16 }} />
+                            )}
+                          </IconButton>
+                        )}
+                    </Cell>
+                  </Row>
+                ))}
+              </Body>
+            </>
+          )}
+        </Table>
+      </Box>
+    );
+  };
+
+  return (
+    <SectionContent id="devices-window">
+      {renderCoreData()}
+      {renderDeviceData()}
+      {renderDeviceDetails()}
+      {selectedDeviceValue && (
+        <DevicesDialog
+          open={deviceValueDialogOpen}
+          onClose={deviceValueDialogClose}
+          onSave={deviceValueDialogSave}
+          selectedItem={selectedDeviceValue}
+          writeable={
+            selectedDeviceValue.c !== undefined &&
+            !hasMask(selectedDeviceValue.id, DeviceEntityMask.DV_READONLY)
+          }
+          validator={deviceValueItemValidation(selectedDeviceValue)}
+          progress={submitting}
+        />
+      )}
+    </SectionContent>
+  );
+});
+
+export default Devices;