Merge pull request #3060 from proddy/core3

rename mail -> email

.github/ISSUE_TEMPLATE/bug_report.md

@@ -21,8 +21,8 @@ _Make sure your have performed every step and checked the applicable boxes befor
 
 - [ ] 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)
+- [ ] Searched the issue in the [docs](https://emsesp.org/Troubleshooting/)
+- [ ] Searched the issue in the [chat](https://discord.gg/GP9DPSgeJq)
 - [ ] Provide the System information in the area below, taken from `http://<IP>/api/system`
 
 ```json

.github/ISSUE_TEMPLATE/config.yml

@@ -1,11 +1,11 @@
 blank_issues_enabled: false
 contact_links:
   - name: EMS-ESP Docs
-    url: https://docs.emsesp.org
+    url: https://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
+    url: https://discord.gg/GP9DPSgeJq
     about: Chat for feedback, questions and troubleshooting.

.github/workflows/dev_release.yml

@@ -28,7 +28,7 @@ jobs:
           node-version: 24
 
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
   
       - name: Enable Corepack
         run: corepack enable pnpm
@@ -47,7 +47,7 @@ jobs:
 
       - name: Build webUI
         run: |
-          platformio run -e build_webUI
+          platformio run -e build-webUI
 
       - name: Build modbus
         run: |
@@ -62,35 +62,13 @@ jobs:
           platformio run
 
       - name: Commit the generated files
-        uses: stefanzweifel/git-auto-commit-action@v5
+        uses: stefanzweifel/git-auto-commit-action@v7
         with:
-          commit_message: "chore: update generated files"
-
-      - name: Configure Git
-        run: |
-          git config --local user.email "action@github.com"
-          git config --local user.name "GitHub Action"
-
-      - name: Check for changes and commit
-        run: |
-          if [ -n "$(git status --porcelain)" ]; then
-            echo "Changes detected, committing..."
-            git add .
-            git commit -m "Auto-commit build artifacts and configuration updates
-
-            - Updated build configurations
-            - Generated build artifacts
-            - Version: ${{steps.build_info.outputs.VERSION}}"
-            
-            echo "Pushing changes to repository..."
-            git push origin dev
-          else
-            echo "No changes to commit"
-          fi
+          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
+        uses: emsesp/action-automatic-releases@v1.0.1
         with:
           repo_token: '${{ secrets.GITHUB_TOKEN }}'
           title: Development Build v${{steps.build_info.outputs.VERSION}}
@@ -99,3 +77,23 @@ jobs:
           files: |
             CHANGELOG_LATEST.md
             ./build/firmware/*.*
+
+      - name: Update version in Cloudflare KV store
+        if: github.repository == 'emsesp/EMS-ESP32'
+        env:
+          CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
+          CF_NAMESPACE_ID: ${{ secrets.CF_NAMESPACE_ID }}
+          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+          VERSION: ${{ steps.build_info.outputs.VERSION }}
+        run: |
+          JSON_DATA=$(jq -n \
+            --arg version "$VERSION" \
+            --arg date "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
+            '{version: $version, date: $date}')
+          echo "JSON_DATA: $JSON_DATA"
+          curl -sS --fail-with-body \
+            -X PUT "https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/storage/kv/namespaces/${CF_NAMESPACE_ID}/values/dev" \
+            -H "Authorization: Bearer ${CF_API_TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "$JSON_DATA"
+          echo

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

@@ -11,7 +11,7 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         
       - name: GitHub Releases To Discord
         uses: SethCohen/github-releases-to-discord@v1.13.1

.github/workflows/pr_check.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Install python 3.13
         uses: actions/setup-python@v6

.github/workflows/sonar_check.yml

@@ -19,7 +19,7 @@ jobs:
       BUILD_WRAPPER_OUT_DIR: bw-output
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
       - name: Install Build Wrapper

.github/workflows/stable_release.yml

@@ -26,11 +26,18 @@ jobs:
           node-version: 24
 
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - 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
@@ -39,7 +46,7 @@ jobs:
 
       - name: Build webUI
         run: |
-          platformio run -e build_webUI
+          platformio run -e build-webUI
 
       - name: Build modbus
         run: |
@@ -54,10 +61,30 @@ jobs:
           platformio run
 
       - name: Create GitHub Release
-        uses: emsesp/action-automatic-releases@v1.0.0
+        uses: emsesp/action-automatic-releases@v1.0.1
         with:
           repo_token: '${{ secrets.GITHUB_TOKEN }}'
           prerelease: false
           files: |
             CHANGELOG.md
             ./build/firmware/*.*
+
+      - name: Update version in Cloudflare KV store
+        if: github.repository == 'emsesp/EMS-ESP32'
+        env:
+          CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
+          CF_NAMESPACE_ID: ${{ secrets.CF_NAMESPACE_ID }}
+          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+          VERSION: ${{ steps.build_info.outputs.VERSION }}
+        run: |
+          JSON_DATA=$(jq -n \
+            --arg version "$VERSION" \
+            --arg date "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
+            '{version: $version, date: $date}')
+          echo "JSON_DATA: $JSON_DATA"
+          curl -sS --fail-with-body \
+            -X PUT "https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/storage/kv/namespaces/${CF_NAMESPACE_ID}/values/stable" \
+            -H "Authorization: Bearer ${CF_API_TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "$JSON_DATA"
+          echo

.github/workflows/test_release.yml

@@ -28,7 +28,7 @@ jobs:
           node-version: 24
 
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Enable Corepack
         run: corepack enable pnpm
@@ -47,7 +47,7 @@ jobs:
 
       - name: Build webUI
         run: |
-          platformio run -e build_webUI
+          platformio run -e build-webUI
 
       - name: Build modbus
         run: |
@@ -63,7 +63,7 @@ jobs:
 
       - name: Create GitHub Release
         id: 'automatic_releases'
-        uses: emsesp/action-automatic-releases@v1.0.0
+        uses: emsesp/action-automatic-releases@v1.0.1
         with:
           repo_token: '${{ secrets.GITHUB_TOKEN }}'
           title: Test Build v${{steps.build_info.outputs.VERSION}}

.github/workflows/update_versions.yml

@@ -0,0 +1,40 @@
+name: 'Update versions'
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  update-version:
+    name: 'Update versions in Cloudflare KV store'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Get and Send EMS-ESP version to Cloudflare
+        env:
+          CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
+          CF_NAMESPACE_ID: ${{ secrets.CF_NAMESPACE_ID }}
+          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
+        run: |
+          version=$(grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}')
+          if [ "$GITHUB_REF" = "refs/heads/main" ]; then
+            KV_ENV="stable"
+          else
+            KV_ENV="dev"
+          fi
+          JSON_DATA=$(jq -n \
+            --arg version "$version" \
+            --arg date "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
+            '{version: $version, date: $date}')
+          echo "KV_ENV: $KV_ENV"
+          echo "JSON_DATA: $JSON_DATA"
+          curl -sS --fail-with-body \
+            -X PUT "https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/storage/kv/namespaces/${CF_NAMESPACE_ID}/values/${KV_ENV}" \
+            -H "Authorization: Bearer ${CF_API_TOKEN}" \
+            -H "Content-Type: application/json" \
+            -d "$JSON_DATA"
+          echo

.gitignore

@@ -64,7 +64,7 @@ words-found-verbose.txt
 # sonarlint
 compile_commands.json
 
-# pioarduino + hybrid
+# other files
 managed_components
 dependencies.lock
 CMakeLists.txt
@@ -73,4 +73,7 @@ logs/*
 sdkconfig.*
 sdkconfig_tasmota_esp32
 pnpm-lock.yaml
-package.json
+.cache/
+interface/.tsbuildinfo
+test/test_api/package-lock.json
+.clangd

.vscode/settings.json

@@ -1,101 +0,0 @@
-{
-    "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.md

@@ -5,6 +5,120 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.8.1] 11 January 2026
+
+## Added
+
+- update time saved in nvs
+- heatpump entities [#2883](https://github.com/emsesp/EMS-ESP32/issues/2883)
+- HA input number format (mode) selectable box/slider (slider for max range 100) [#2900](https://github.com/emsesp/EMS-ESP32/discussions/2900)
+
+## Fixed
+
+- fix EMS bus disconnected errors on some systems [#2881](https://github.com/emsesp/EMS-ESP32/issues/2881)
+- selflowtemp fix [#2876](https://github.com/emsesp/EMS-ESP32/issues/2876)
+- updated valid GPIOs for ESP32S2, ESP32S3 and ESP32 that caused custom systems to block gpios [#2887](https://github.com/emsesp/EMS-ESP32/issues/2887)
+- Junkers wwcharge offset [#2860](https://github.com/emsesp/EMS-ESP32/issues/2860)
+- fixed minflowtemp [#2890](https://github.com/emsesp/EMS-ESP32/issues/2890)
+- don't add HA uom/classes for bool values [#2885](https://github.com/emsesp/EMS-ESP32/issues/2885)
+- fixed missing progress bar on web firmware uploads
+
+## Changed
+
+- snapshot gpios stored in temporary ram
+- GPIOs stored along with the name and reported in log if conflicting
+- free GPIOs depend on board profile [#2901](https://github.com/emsesp/EMS-ESP32/issues/2901)
+- prefer PSram for mqtt queue [#2889](https://github.com/emsesp/EMS-ESP32/issues/2889)
+- day schedule defult to all days, no day selected is not allowed
+- board profile `CUSTOM` can only be selected in developer mode
+- mqtt sends round values without decimals (`28` instead of `28.0`)
+
+
+## [3.8.0] 31 December 2025
+
+## Added
+
+- 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)
+- added 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
+- heating assistance, rounding custum settings [#2763](https://github.com/emsesp/EMS-ESP32/discussions/2763)
+- added counter 0..2 for short pulses, high frequency [#2758](https://github.com/emsesp/EMS-ESP32/issues/2758)
+- 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)
+- added RTL8201 to eth phy list [#2800](https://github.com/emsesp/EMS-ESP32/issues/2800)
+- added partitions to Web UI Version page, so previous firmware versions can be installed [#2837](https://github.com/emsesp/EMS-ESP32/issues/2837)
+- button pressures show LED. On a long press (10 seconds) the LED flashes for 5 seconds to indicate a factory reset is about to happen. [#2848](https://github.com/emsesp/EMS-ESP32/issues/2848)
+- added `txpause` command to pause the TX, by setting Txmode to 0 (disabled) [#2850](https://github.com/emsesp/EMS-ESP32/issues/2850)
+
+## Fixed
+
+- 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.
+- check for valid GPIOs when board profile is changed [#2841](https://github.com/emsesp/EMS-ESP32/issues/2841)
+
+## Changed
+
+- show console log with ISO date/time [#2533](https://github.com/emsesp/EMS-ESP32/discussions/2533)
+- removed 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
+- on tx read fail delay the 3rd. retry 2 sec
+- move vectors and lists to PSRAM
+- removed unused last topic/payload echo-check
+- added Home Assistant device details to MQTT Discovery for all devices
+- device_class and state_class changes for HA MQTT Discovery [#2825](https://github.com/emsesp/EMS-ESP32/issues/2825)
+
 ## [3.7.2] 22 March 2025
 
 ## Added
@@ -85,7 +199,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The automatically generated temperature sensor ID has replaced dashes (`-`) with underscores (`_`) to be compatible with Home Assistant.
 - `api/system/info` has it's JSON key names changed to camelCase syntax.
 
-For more details go to [docs.emsesp.org](https://docs.emsesp.org/).
+For more details go to [emsesp.org](https://emsesp.org/).
 
 ## Added
 

CHANGELOG_LATEST.md

@@ -1,59 +1,41 @@
 # Changelog
 
-For more details go to [docs.emsesp.org](https://docs.emsesp.org/).
+For more details go to [emsesp.org](https://emsesp.org/).
 
-## [3.7.3]
+## [3.9.0]
 
 ## Added
 
-- 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)
-- Fuse settings for BBQKees boards
-- 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)
+- comfortpoint for BC400 [#2935](https://github.com/emsesp/EMS-ESP32/issues/2935)
+- customize device brand [#2784](https://github.com/emsesp/EMS-ESP32/issues/2784)
+- set model for ems-esp devices temperature, analog, etc. [#2958](https://github.com/emsesp/EMS-ESP32/discussions/2958)
+- prometheus metrics for temperature/analog/scheduler/custom [#2962](https://github.com/emsesp/EMS-ESP32/issues/2962)
+- boiler pumpkick [#2965](https://github.com/emsesp/EMS-ESP32/discussions/2965)
+- heatpump reset [#2933](https://github.com/emsesp/EMS-ESP32/issues/2933)
+- e-mail notification using ReadyMail Client
+- 2.nd freshwater module (dhw4, dhw5) [#2991](https://github.com/emsesp/EMS-ESP32/issues/2991)
+- full system backup and restore
+- updated version check [#3047](https://github.com/emsesp/EMS-ESP32/issues/3047)
 
 ## Fixed
 
-- 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)
+- SRC climate creation [#2936](https://github.com/emsesp/EMS-ESP32/issues/2936) and [#2960](https://github.com/emsesp/EMS-ESP32/issues/2960)
+- missing translations [#3015](https://github.com/emsesp/EMS-ESP32/issues/3015)
+- custom entities check fetch length
 
 ## Changed
 
-- 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)
+- weblogbuffer up to 1000 messages with PSRAM, mentioned in [#2933](https://github.com/emsesp/EMS-ESP32/issues/2933)
+- validate custom entity writes, [#2931](https://github.com/emsesp/EMS-ESP32/issues/2931)
+- remove wrong burnMinPower [#2918](https://github.com/emsesp/EMS-ESP32/issues/2918)
+- store scheduler active state to nvs [#2946](https://github.com/emsesp/EMS-ESP32/discussions/2946)
+- translated modes `heat` and `eco` for HA-climate mode-str-tpl
+- support `minflowtemp` and `baseflowtemp` [#2969](https://github.com/emsesp/EMS-ESP32/discussions/2969)
+- update version if it is 00.00 in first read [#2981](https://github.com/emsesp/EMS-ESP32/issues/2981)
+- device class for % values [#2980](https://github.com/emsesp/EMS-ESP32/issues/2980)
+- use tasmota core 2026.03.30
+- secure mqtt uses ESP_SSLClient
+- fetch telegrams: set length to fetch [#3017](https://github.com/emsesp/EMS-ESP32/issues/3017)
+- move http client from stack to heap
+- heap optimizations [#3021](https://github.com/emsesp/EMS-ESP32/discussions/3021)
+- refactored network code into a single class [#3052](https://github.com/emsesp/EMS-ESP32/pull/3052)

CONTRIBUTING.md

@@ -6,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://docs.emsesp.org)
+- contributing to missing [documentation](https://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.
 

Makefile

@@ -21,13 +21,14 @@ endif
 
 # Optimize parallel build configuration
 UNAME_S := $(shell uname -s)
+JOBS ?= 1
 ifeq ($(UNAME_S),Linux)
     EXTRA_CPPFLAGS = -D LINUX
-	JOBS ?= $(shell nproc)
+	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)
+	JOBS := $(shell sysctl -n hw.ncpu)
 endif
 
 # Set optimal parallel build settings
@@ -46,27 +47,28 @@ MAKEFLAGS += -j$(JOBS) -l$(shell echo $$(($(JOBS) * 2)))
 #----------------------------------------------------------------------
 TARGET    := emsesp
 BUILD     := build
-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
+SOURCES   := src/core src/devices src/web src/test lib_standalone       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_standalone lib/* 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=gnu++17
+CHECKFLAGS = -q --force --std=gnu++20
 
 #----------------------------------------------------------------------
 # Languages Standard
 #----------------------------------------------------------------------
-C_STANDARD   := -std=c17
-CXX_STANDARD := -std=gnu++17
+C_STANDARD   := -std=c20
+CXX_STANDARD := -std=gnu++20
 
 #----------------------------------------------------------------------
 # Defined Symbols
 #----------------------------------------------------------------------
 DEFINES += -DARDUINOJSON_ENABLE -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSON_USE_DOUBLE=0 
 DEFINES += -DEMSESP_STANDALONE -DEMSESP_TEST -DEMSESP_DEBUG -DEMC_RX_BUFFER_SIZE=1500
+DEFINES += -DNO_TLS_SUPPORT
 DEFINES += $(ARGS)
 
-DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_TX_MODE=8 -DEMSESP_DEFAULT_VERSION=\"3.7.3-dev\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32S3\"
+DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32S3\"
 
 #----------------------------------------------------------------------
 # Sources & Files
@@ -78,6 +80,10 @@ SYMBOLS    := $(CURDIR)/$(BUILD)/$(TARGET).out
 CSOURCES   := $(shell find $(SOURCES) -name "*.c" 2>/dev/null)
 CXXSOURCES := $(shell find $(SOURCES) -name "*.cpp" 2>/dev/null)
 
+# Exclude files not needed for standalone build, if they exist
+CSOURCES   := $(filter-out src/core/ModuleLibrary.c,$(CSOURCES))
+CXXSOURCES := $(filter-out src/core/ModuleLibrary.cpp,$(CXXSOURCES))
+
 OBJS       := $(patsubst %,$(BUILD)/%.o,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)))
 DEPS       := $(patsubst %,$(BUILD)/%.d,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)))
 
@@ -107,7 +113,7 @@ CXX := /usr/bin/g++
 CPPFLAGS  += $(DEFINES) $(DEFAULTS) $(INCLUDE)
 CPPFLAGS  += -ggdb -g3 -MMD
 CPPFLAGS  += -flto=auto
-CPPFLAGS  += -Wall -Wextra -Werror -Wswitch-enum
+CPPFLAGS  += -Wall -Wextra -Werror -Wno-switch-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
@@ -137,6 +143,7 @@ DEPFLAGS   += -MF $(BUILD)/$*.d -MT $@
 LINK.o      = $(LD) $(LDFLAGS) $(LDLIBS) $^ -o $@
 COMPILE.c   = $(CC) $(C_STANDARD) $(CFLAGS) $(DEPFLAGS) -c $< -o $@
 COMPILE.cpp = $(CXX) $(CXX_STANDARD) $(CXXFLAGS) $(DEPFLAGS) -c $< -o $@
+COMPILE.s   = $(CC) $(CFLAGS) $(DEPFLAGS) -c $< -o $@
 
 #----------------------------------------------------------------------
 # Special Built-in Target
@@ -180,6 +187,7 @@ $(BUILD)/%.o: %.cpp
 
 $(BUILD)/%.o: %.s
 	@mkdir -p $(@D)
+	@$(ECHO) Compiling $@
 	@$(COMPILE.s)
 
 cppcheck: $(SOURCES)

README.md

@@ -15,10 +15,10 @@
   <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">
+  <a href="https://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">
+  <a href="https://discord.gg/GP9DPSgeJq">
     <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">
@@ -32,7 +32,8 @@
 [![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)
-[![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/3J3GgnzpyT)
+[![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/GP9DPSgeJq)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/emsesp/EMS-ESP32)
 
 [![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-ESP32/network)
@@ -40,7 +41,8 @@
 
 **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.
 
-It requires a small circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl> or custom built.
+It requires a small circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl>. These gateways are tested thoroughly and certified to work with EMS-ESP.
+
 
 ## 📦&nbsp; **Key Features**
 
@@ -60,33 +62,31 @@ It requires a small circuit to interface with the EMS bus which can be purchased
 
 ## 🚀&nbsp; **Installing**
 
-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.
+Head over to the [Installation Guide](https://emsesp.org/Installing) section of the documentation for instructions on how to install EMS-ESP.
 
 ## 📋&nbsp; **Documentation**
 
-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.
+Visit [emsesp.org](https://emsesp.org) for more details on how to setup and configure EMS-ESP. You'll also find more a collection of example configuarations, Frequently Asked Questions and Troubleshooting tips.
 
 ## 💬&nbsp; **Getting Support**
 
-To chat with the community reach out on our [Discord Server](https://discord.gg/3J3GgnzpyT).
+To chat with the community reach out on our [Discord Server](https://discord.gg/GP9DPSgeJq).
 
-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.
+If you find an issue or have a request, see the [Getting Support](https://emsesp.org/Support/) section of the documentation. Note if you are using a non-BBQKees EMS gateway, you may need to contact the manufacturer for support.
 
 ## 🎥&nbsp; **Live Demo**
 
-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.
+To see a live demo go to [demo.emsesp.org](https://demo.emsesp.org). Pick a language and use any username and password to log in. Note whast you're seeing is static example data so not all features are operational.
 
 ## 💖&nbsp; **Contributors**
 
-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).
+EMS-ESP is a project originally created by [proddy](https://github.com/proddy) and maintained by the ems-esp community.
 
 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.
 
 ## 📦&nbsp; **Building**
 
-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`.
-
-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`).
+See the [Building the firmware](https://emsesp.org/Building) guide in the documentation for instructions on how to build EMS-ESP from this source code.
 
 ## 📢&nbsp; **Libraries used**
 

SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please report any security vulnerabilities using the [Contact Form](https://emsesp.org/About/#-contact).

boards/c3_mini_4M.json

@@ -5,7 +5,7 @@
       },
       "core": "esp32",
       "extra_flags": [
-        "-DTASMOTA_SDK",
+        "-DNO_TLS_SUPPORT",
         "-DARDUINO_LOLIN_C3_MINI",
         "-DARDUINO_USB_MODE=1",
         "-DARDUINO_USB_CDC_ON_BOOT=1"

boards/s2_4M_P.json

@@ -6,7 +6,7 @@
       "core": "esp32",
       "extra_flags": [
         "-DBOARD_HAS_PSRAM",
-        "-DTASMOTA_SDK",
+        "-DNO_TLS_SUPPORT",
         "-DARDUINO_USB_CDC_ON_BOOT=1",
         "-DARDUINO_USB_MODE=0"
       ],
@@ -37,8 +37,8 @@
       "flash_size": "4MB",
       "maximum_ram_size": 327680,
       "maximum_size": 4194304,
-      "use_1200bps_touch": true,
-      "wait_for_upload_port": true,
+      "use_1200bps_touch": false,
+      "wait_for_upload_port": false,
       "require_upload_port": true,
       "speed": 921600
     },

boards/s3_32M_P.json

@@ -21,11 +21,11 @@
       "arduino",
       "espidf"
     ],
-    "name": "Espressif ESP32-S3 32M Flash OPI PSRAM, 4608KB Code/OTA, 2MB FS",
+    "name": "Tasmota ESP32-S3 32M Flash OPI PSRAM, 4608KB Code/OTA, 2MB FS",
     "upload": {
       "flash_size": "32MB",
       "maximum_ram_size": 327680,
-      "maximum_size": 16777216,
+      "maximum_size": 33554432,
       "require_upload_port": true,
       "speed": 460800
     },

boards/s_16M.json

@@ -1,7 +1,7 @@
 {
     "build": {
       "core": "esp32",
-      "extra_flags": "-DTASMOTA_SDK",
+      "extra_flags": "-DNO_TLS_SUPPORT",
       "f_cpu": "240000000L",
       "f_flash": "40000000L",
       "flash_mode": "dio",
@@ -19,7 +19,7 @@
       "arduino",
       "espidf"
     ],
-    "name": "Espressif ESP32 16M Flash, 4608KB Code/OTA, 2MB FS",
+    "name": "Tasmota ESP32 16M Flash, 4608KB Code/OTA, 2MB FS",
     "upload": {
       "flash_size": "16MB",
       "maximum_ram_size": 327680,

boards/s_16M_P.json

@@ -19,7 +19,7 @@
       "arduino",
       "espidf"
     ],
-    "name": "Espressif ESP32 16M Flash DIO PSRAM, 4608KB Code/OTA, 2MB FS",
+    "name": "Tasmota ESP32 16M Flash DIO PSRAM, 4608KB Code/OTA, 2MB FS",
     "upload": {
       "flash_size": "16MB",
       "maximum_ram_size": 327680,

boards/s_4M.json

@@ -1,7 +1,7 @@
 {
     "build": {
       "core": "esp32",
-      "extra_flags": "-DTASMOTA_SDK",
+      "extra_flags": "-DNO_TLS_SUPPORT",
       "f_cpu": "240000000L",
       "f_flash": "40000000L",
       "flash_mode": "dio",

boards/seeed_xiao_esp32c6.json

@@ -2,6 +2,7 @@
   "build": {
     "core": "esp32",
     "extra_flags": [
+      "-DNO_TLS_SUPPORT",
       "-DARDUINO_XIAO_ESP32C6",
       "-DARDUINO_USB_MODE=1",
       "-DARDUINO_USB_CDC_ON_BOOT=1"

cspell.json

@@ -9,6 +9,7 @@
       }
     ],
     "dictionaries": ["project-words"],
+    "caseSensitive": false,
     "ignorePaths": [
     "node_modules", 
     "compile_commands.json", 
@@ -34,6 +35,10 @@
     "sdkconfig.*",
     "managed_components/**",
     "pnpm-*.yaml",
-    "vite.config.ts"
+    "vite.config.ts",
+    "lib/esp32-psram/**",
+    "test/test_api/test_api.h",
+    "lib_standalone/**",
+    "**/*.js"
   ]
   }

data/pre_load.json

@@ -1,10 +1,22 @@
+{
+  "type": "systembackup",
+  "version": "3.8.2",
+  "date": "2026-03-29T13:28:15",
+  "systembackup": [
     {
       "type": "settings",
       "Network": {
-      "ssid": "my_wifi_ssid",
+        "ssid": "",
         "bssid": "",
-      "password": "my_wifi_password",
-      "hostname": "ems-esp"
+        "password": "",
+        "hostname": "ems-esp",
+        "static_ip_config": false,
+        "bandwidth20": false,
+        "nosleep": true,
+        "enableMDNS": true,
+        "enableCORS": false,
+        "CORSOrigin": "*",
+        "tx_power": 0
       },
       "AP": {
         "provision_mode": 2,
@@ -21,12 +33,14 @@
         "enableTLS": false,
         "rootCA": "",
         "enabled": false,
-      "host": "127.0.0.1",
+        "host": "",
         "port": 1883,
         "base": "ems-esp",
-      "username": "username",
-      "password": "password",
-      "client_id": "ems-esp",
+        "username": "",
+        "password": "",
+        "client_id": "esp32-b8ffc9ec",
+        "keep_alive": 60,
+        "clean_session": false,
         "entity_format": 1,
         "publish_time_boiler": 10,
         "publish_time_thermostat": 10,
@@ -42,6 +56,7 @@
         "nested_format": 1,
         "discovery_prefix": "homeassistant",
         "discovery_type": 0,
+        "ha_number_mode": 0,
         "publish_single": false,
         "publish_single2cmd": false,
         "send_response": false
@@ -68,18 +83,146 @@
         ]
       },
       "Settings": {
-      "board_profile": "S3",
+        "version": "3.8.2",
+        "board_profile": "E32V2_2",
+        "platform": "ESP32",
         "locale": "en",
         "tx_mode": 1,
         "ems_bus_id": 11,
+        "syslog_enabled": false,
+        "syslog_level": 3,
+        "trace_raw": false,
+        "syslog_mark_interval": 0,
+        "syslog_host": "",
+        "syslog_port": 514,
         "boiler_heatingoff": false,
-      "hide_led": true,
+        "remote_timeout": 24,
+        "remote_timeout_en": false,
+        "shower_timer": false,
+        "shower_alert": false,
+        "shower_alert_coldshot": 10,
+        "shower_alert_trigger": 7,
+        "shower_min_duration": 180,
+        "rx_gpio": 4,
+        "tx_gpio": 5,
+        "dallas_gpio": 14,
+        "dallas_parasite": false,
+        "led_gpio": 32,
+        "hide_led": false,
+        "led_type": 1,
+        "low_clock": false,
         "telnet_enabled": true,
         "notoken_api": false,
+        "readonly_mode": false,
         "analog_enabled": true,
+        "pbutton_gpio": 34,
+        "solar_maxflow": 30,
         "fahrenheit": false,
         "bool_format": 1,
         "bool_dashboard": 1,
-      "enum_format": 1
+        "enum_format": 1,
+        "weblog_level": 6,
+        "weblog_buffer": 50,
+        "weblog_compact": true,
+        "phy_type": 1,
+        "eth_power": 15,
+        "eth_phy_addr": 0,
+        "eth_clock_mode": 1,
+        "modbus_enabled": false,
+        "modbus_port": 502,
+        "modbus_max_clients": 10,
+        "modbus_timeout": 300,
+        "developer_mode": true,
+        "email_enabled": false,
+        "email_ssl": false,
+        "email_starttls": true,
+        "email_server": "smtp.example.net",
+        "email_port": 587,
+        "email_login": "",
+        "email_pass": "",
+        "email_sender": "ems-esp@example.net",
+        "email_recp": "",
+        "email_subject": "ems-esp notification"
+      }
+    },
+    {
+      "type": "schedule",
+      "Schedule": {
+        "schedule": []
+      }
+    },
+    {
+      "type": "customizations",
+      "Customizations": {
+        "ts": [
+          {
+            "id": "28_1767_7B13_2502",
+            "name": "gateway_temperature",
+            "offset": 0,
+            "is_system": true
+          }
+        ],
+        "as": [
+          {
+            "gpio": 39,
+            "name": "core_voltage",
+            "offset": 0,
+            "factor": 0.003771,
+            "uom": 23,
+            "type": 3,
+            "is_system": true
+          },
+          {
+            "gpio": 36,
+            "name": "supply_voltage",
+            "offset": 0,
+            "factor": 0.017,
+            "uom": 23,
+            "type": 3,
+            "is_system": true
+          },
+          {
+            "gpio": 2,
+            "name": "led",
+            "offset": 0,
+            "factor": 1,
+            "uom": 0,
+            "type": 6,
+            "is_system": true
+          }
+        ],
+        "masked_entities": []
+      }
+    },
+    {
+      "type": "entities",
+      "Entities": {
+        "entities": []
+      }
+    },
+    {
+      "type": "modules",
+      "Modules": {
+        "modules": []
+      }
+    },
+    {
+      "type": "customSupport",
+      "Support": {
+        "html": [
+          "This product is installed and managed by:",
+          "",
+          "<b>Bosch Installer Example</b>",
+          "",
+          "Nefit Road 12",
+          "1234 AB Amsterdam",
+          "Phone: +31 123 456 789",
+          "email: support@boschinstaller.nl",
+          "",
+          "For help and questions please <a target='_blank' href='https://emsesp.org'>contact</a> your installer."
+        ],
+        "img_url": "https://emsesp.org/media/images/designer.png"
       }
     }
+  ]
+}

docs/dump_telegrams.csv

@@ -72,11 +72,12 @@ telegram_type_id,name,is_fetched
 0xE6,UBAParametersPlus,fetched
 0xE9,UBAMonitorWWPlus, 
 0xEA,UBAParameterWWPlus,fetched
+0xEB,PumpKick,fetched
 0x0101,ISM1Set,fetched
 0x0103,ISM1StatusMessage,fetched
 0x0104,ISM2StatusMessage, 
 0x010C,IPMStatusMessage, 
-0x011E,JunkersDisp,fetched
+0x011E,IPMTempMessage, 
 0x012E,HPEnergy1, 
 0x013B,HPEnergy2, 
 0x0165,JunkersSet, 
@@ -111,10 +112,10 @@ telegram_type_id,name,is_fetched
 0x02A0,RC300Curves, 
 0x02A1,RC300Curves, 
 0x02A2,RC300Curves, 
-0x02A5,RC300Monitor, 
-0x02A6,RC300Monitor, 
+0x02A5,RC300Monitor,fetched
+0x02A6,CRFMonitor, 
 0x02A7,RC300Monitor, 
-0x02A8,RC300Monitor, 
+0x02A8,CRFMonitor, 
 0x02A9,RC300Monitor, 
 0x02AA,RC300Monitor, 
 0x02AB,RC300Monitor, 
@@ -136,10 +137,7 @@ telegram_type_id,name,is_fetched
 0x02BF,RC300Set, 
 0x02C0,RC300Set, 
 0x02CC,HPPressure,fetched
-0x02CD,MMPLUSConfigMessage,fetched
-0x02CE,RC300Set2, 
-0x02D0,RC300Set2, 
-0x02D2,RC300Set2, 
+0x02CD,MMPLUSConfigMessage, 
 0x02D6,HPPump2,fetched
 0x02D7,MMPLUSStatusMessage, 
 0x02E0,UBASetPoints, 
@@ -164,11 +162,16 @@ telegram_type_id,name,is_fetched
 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, 
+0x0470,RC300Summer2, 
 0x0471,RC300Summer2, 
 0x0472,RC300Summer2, 
 0x0473,RC300Summer2, 
@@ -176,7 +179,6 @@ telegram_type_id,name,is_fetched
 0x0475,RC300Summer2, 
 0x0476,RC300Summer2, 
 0x0477,RC300Summer2, 
-0x0478,RC300Summer2, 
 0x047B,HP2, 
 0x0484,HPSilentMode,fetched
 0x0485,HpCooling,fetched
@@ -196,7 +198,7 @@ telegram_type_id,name,is_fetched
 0x04A2,HpInput,fetched
 0x04A5,HPFan,fetched
 0x04A7,HPPowerLimit,fetched
-0x04AA,HPPower2,fetched
+0x04AA,HPPower, 
 0x04AE,HPEnergy,fetched
 0x04AF,HPMeters,fetched
 0x055C,VentilationSet,fetched

interface/.typesafe-i18n.json

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

interface/eslint.config.js

@@ -1,9 +1,10 @@
 // @ts-check
 import eslint from '@eslint/js';
 import prettierConfig from 'eslint-config-prettier';
+import { defineConfig } from 'eslint/config';
 import tseslint from 'typescript-eslint';
 
-export default tseslint.config(
+export default defineConfig(
   eslint.configs.recommended,
   ...tseslint.configs.recommendedTypeChecked,
   prettierConfig,

interface/package.json

@@ -1,9 +1,9 @@
 {
   "name": "EMS-ESP",
-  "version": "3.7.3",
+  "version": "3.9.0",
   "description": "EMS-ESP WebUI",
   "homepage": "https://emsesp.org",
-  "author": "proddy, emsesp.org",
+  "author": "emsesp.org",
   "license": "MIT",
   "private": true,
   "type": "module",
@@ -12,57 +12,53 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "build-hosted": "typesafe-i18n && vite build --mode hosted",
-    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"pnpm:mock-rest\" \"vite preview\"",
+    "build-hosted": "typesafe-i18n --no-watch && vite build --mode hosted",
     "mock-rest": "bun --watch ../mock-api/restServer.ts",
-    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"pnpm:mock-rest\" \"vite\"",
+    "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",
-    "webUI": "node progmem-generator.js",
+    "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\""
   },
   "dependencies": {
-    "@alova/adapter-xhr": "2.2.1",
+    "@alova/adapter-xhr": "2.3.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
     "@table-library/react-table-library": "4.1.15",
-    "alova": "3.3.4",
+    "alova": "^3.5.1",
     "async-validator": "^4.2.5",
-    "formidable": "^3.5.4",
+    "etag": "^1.8.1",
     "jwt-decode": "^4.0.0",
-    "magic-string": "^0.30.21",
-    "mime-types": "^3.0.1",
-    "preact": "^10.27.2",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-icons": "^5.5.0",
-    "react-router": "^7.9.5",
-    "react-toastify": "^11.0.5",
-    "typesafe-i18n": "^5.26.2",
-    "typescript": "^5.9.3"
+    "mime-types": "^3.0.2",
+    "preact": "^10.29.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-icons": "^5.6.0",
+    "react-router": "^7.15.0",
+    "react-toastify": "^11.1.0",
+    "typesafe-i18n": "^5.27.1",
+    "typescript": "^6.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@eslint/js": "^9.39.0",
-    "@preact/compat": "^18.3.1",
-    "@preact/preset-vite": "^2.10.2",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@eslint/js": "^10.0.1",
+    "@preact/preset-vite": "^2.10.5",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "concurrently": "^9.2.1",
-    "eslint": "^9.39.0",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
-    "prettier": "^3.6.2",
-    "rollup-plugin-visualizer": "^6.0.5",
-    "terser": "^5.44.0",
-    "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.12",
-    "vite-plugin-imagemin": "^0.6.1",
-    "vite-tsconfig-paths": "^5.1.4"
+    "prettier": "^3.8.3",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "terser": "^5.46.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.10",
+    "vite-plugin-imagemin": "^0.6.1"
   },
-  "packageManager": "pnpm@10.20.0"
+  "packageManager": "pnpm@10.33.3+sha512.a19744364a7e248b92657a4ca5973f9354d21caf982579674b1c539f32c7420c47138ad8b1254df07aba9bc782d9b3029e3db34d5dbff974326eb74dac8ff489"
 }

interface/progmem-generator.js

@@ -1,10 +1,9 @@
-import crypto from 'crypto';
+import etag from 'etag';
 import {
   createWriteStream,
   existsSync,
   readFileSync,
   readdirSync,
-  statSync,
   unlinkSync
 } from 'fs';
 import mime from 'mime-types';
@@ -25,20 +24,26 @@ let bundleStats = {
   other: { count: 0, uncompressed: 0, compressed: 0 }
 };
 
-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:
+// AsyncWebHandler that performs the lookup.
+const generateWWWClass = () => `// 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((f) => `${INDENT.repeat(3)}handler("${f.uri}", "${f.mimeType}", ${f.variable}, ${f.size}, "${f.hash}");`).join('\n')}
-${INDENT.repeat(2)}}
+struct WWWAsset {
+${INDENT}const char *    uri;
+${INDENT}const char *    contentType;
+${INDENT}const uint8_t * content;
+${INDENT}size_t          len;
+${INDENT}const char *    etag; // already includes enclosing double quotes
 };
+
+static const WWWAsset WWW_ASSETS[] = {
+${fileInfo.map((f) => `${INDENT}{"${f.uri}", "${f.mimeType}", ${f.variable}, ${f.size}, "\\"${f.rawHash}\\""},`).join('\n')}
+};
+
+static constexpr size_t WWW_ASSETS_COUNT = sizeof(WWW_ASSETS) / sizeof(WWW_ASSETS[0]);
 `;
 
 const getFilesSync = (dir, files = []) => {
@@ -71,7 +76,9 @@ const writeFile = (relativeFilePath, buffer) => {
   writeStream.write(`const uint8_t ${variable}[] = {`);
 
   const zipBuffer = zlib.gzipSync(buffer, { level: 9 });
-  const hash = crypto.createHash('sha256').update(zipBuffer).digest('hex');
+  // const hash = crypto.createHash('sha256').update(zipBuffer).digest('hex');
+  const hash = etag(zipBuffer); // use smaller md5 instead of sha256
+  const rawHash = hash.replace(/^"|"$/g, '');
 
   zipBuffer.forEach((b) => {
     if (!(size % bytesPerLine)) {
@@ -94,7 +101,8 @@ const writeFile = (relativeFilePath, buffer) => {
     mimeType,
     variable,
     size,
-    hash
+    hash,
+    rawHash
   });
 
   totalSize += size;

interface/src/App.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { ToastContainer, Zoom } from 'react-toastify';
 
 import AppRouting from 'AppRouting';
@@ -8,7 +8,6 @@ import type { Locales } from 'i18n/i18n-types';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
 import { detectLocale, navigatorDetector } from 'typesafe-i18n/detectors';
 
-// Memoize available locales to prevent recreation on every render
 const AVAILABLE_LOCALES = [
   'de',
   'en',
@@ -23,27 +22,8 @@ const AVAILABLE_LOCALES = [
   'cz'
 ] as Locales[];
 
-const App = memo(() => {
-  const [wasLoaded, setWasLoaded] = useState(false);
-  const [locale, setLocale] = useState<Locales>('en');
-
-  // 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);
-  }, []);
-
-  useEffect(() => {
-    void initializeLocale();
-  }, [initializeLocale]);
-
-  // Memoize toast container props to prevent recreation
-  const toastContainerProps = useMemo(
-    () => ({
+// Static toast configuration - no need to recreate on every render
+const TOAST_CONTAINER_PROPS = {
   position: 'bottom-left' as const,
   autoClose: 3000,
   hideProgressBar: false,
@@ -60,9 +40,23 @@ const App = memo(() => {
     border: '1px solid #177ac9',
     width: 'fit-content'
   }
-    }),
-    []
-  );
+};
+
+const App = memo(() => {
+  const [wasLoaded, setWasLoaded] = useState(false);
+  const [locale, setLocale] = useState<Locales>('en');
+
+  useEffect(() => {
+    const initializeLocale = 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);
+    };
+    void initializeLocale();
+  }, []);
 
   if (!wasLoaded) return null;
 
@@ -70,7 +64,7 @@ const App = memo(() => {
     <TypesafeI18n locale={locale}>
       <CustomTheme>
         <AppRouting />
-        <ToastContainer {...toastContainerProps} />
+        <ToastContainer {...TOAST_CONTAINER_PROPS} />
       </CustomTheme>
     </TypesafeI18n>
   );

interface/src/AppRouting.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { type FC, memo, useContext, useEffect, useRef } from 'react';
 import { Navigate, Route, Routes } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -9,20 +9,32 @@ import { Authentication, AuthenticationContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
 interface SecurityRedirectProps {
-  message: string;
-  signOut?: boolean;
+  readonly message: string;
+  readonly signOut?: boolean;
 }
 
-const RootRedirect = ({ message, signOut }: SecurityRedirectProps) => {
-  const authenticationContext = useContext(AuthenticationContext);
-  useEffect(() => {
-    signOut && authenticationContext.signOut(false);
-    toast.success(message);
-  }, [message, signOut, authenticationContext]);
-  return <Navigate to="/" />;
-};
+const RootRedirect: FC<SecurityRedirectProps> = memo(
+  ({ message, signOut = false }) => {
+    const { signOut: contextSignOut } = useContext(AuthenticationContext);
+    const hasShownToast = useRef(false);
 
-const AppRouting = () => {
+    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 (
@@ -55,6 +67,6 @@ const AppRouting = () => {
       </Routes>
     </Authentication>
   );
-};
+});
 
 export default AppRouting;

interface/src/AuthenticatedRouting.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import { Navigate, Route, Routes } from 'react-router';
 
 import CustomEntities from 'app/main/CustomEntities';
@@ -9,12 +9,14 @@ import Help from 'app/main/Help';
 import Modules from 'app/main/Modules';
 import Scheduler from 'app/main/Scheduler';
 import Sensors from 'app/main/Sensors';
+import UserProfile from 'app/main/UserProfile';
 import APSettings from 'app/settings/APSettings';
 import ApplicationSettings from 'app/settings/ApplicationSettings';
 import DownloadUpload from 'app/settings/DownloadUpload';
 import MqttSettings from 'app/settings/MqttSettings';
 import NTPSettings from 'app/settings/NTPSettings';
 import Settings from 'app/settings/Settings';
+import Version from 'app/settings/Version';
 import Network from 'app/settings/network/Network';
 import Security from 'app/settings/security/Security';
 import APStatus from 'app/status/APStatus';
@@ -25,11 +27,10 @@ import NTPStatus from 'app/status/NTPStatus';
 import NetworkStatus from 'app/status/NetworkStatus';
 import Status from 'app/status/Status';
 import SystemLog from 'app/status/SystemLog';
-import Version from 'app/status/Version';
 import { Layout } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 
-const AuthenticatedRouting = () => {
+const AuthenticatedRouting = memo(() => {
   const { me } = useContext(AuthenticatedContext);
   return (
     <Layout>
@@ -38,6 +39,7 @@ const AuthenticatedRouting = () => {
         <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 />} />
@@ -47,11 +49,11 @@ const AuthenticatedRouting = () => {
         <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/version" element={<Version />} />
             <Route path="/settings/application" element={<ApplicationSettings />} />
             <Route path="/settings/mqtt" element={<MqttSettings />} />
             <Route path="/settings/ntp" element={<NTPSettings />} />
@@ -72,6 +74,6 @@ const AuthenticatedRouting = () => {
       </Routes>
     </Layout>
   );
-};
+});
 
 export default AuthenticatedRouting;

interface/src/CustomTheme.tsx

@@ -11,17 +11,15 @@ import { createTheme } from '@mui/material/styles';
 
 import type { RequiredChildrenProps } from 'utils';
 
-// Memoize dialog style to prevent recreation
 export const dialogStyle = {
   '& .MuiDialog-paper': {
     borderRadius: '8px',
     borderColor: '#565656',
     borderStyle: 'solid',
-    borderWidth: '1px'
+    borderWidth: '2px'
   }
 } as const;
 
-// Memoize theme creation to prevent recreation
 const theme = responsiveFontSizes(
   createTheme({
     typography: {

interface/src/SignIn.tsx

@@ -1,8 +1,9 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import ForwardIcon from '@mui/icons-material/Forward';
 import { Box, Button, Paper, Typography } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
 
 import * as AuthenticationApi from 'components/routing/authentication';
 import { useRequest } from 'alova/client';
@@ -17,9 +18,9 @@ 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';
+import { SIGN_IN_REQUEST_VALIDATOR, ValidationError, validate } from 'validators';
 
-const SignIn = () => {
+const SignIn = memo(() => {
   const authenticationContext = useContext(AuthenticationContext);
 
   const { LL } = useI18nContext();
@@ -36,15 +37,23 @@ const SignIn = () => {
     {
       immediate: false
     }
-  ).onSuccess((response) => {
+  ).onSuccess((response: { data: { access_token: string } }) => {
     if (response.data) {
       authenticationContext.signIn(response.data.access_token);
     }
   });
 
-  const updateLoginRequestValue = updateValue(setSignInRequest);
+  const updateLoginRequestValue = useMemo(
+    () =>
+      updateValue((updater) =>
+        setSignInRequest(
+          updater as unknown as (prevState: SignInRequest) => SignInRequest
+        )
+      ),
+    []
+  );
 
-  const signIn = async () => {
+  const signIn = useCallback(async () => {
     await callSignIn(signInRequest).catch((event: Error) => {
       if (event.message === 'Unauthorized') {
         toast.warning(LL.INVALID_LOGIN());
@@ -53,7 +62,7 @@ const SignIn = () => {
       }
       setProcessing(false);
     });
-  };
+  }, [callSignIn, signInRequest, LL]);
 
   const validateAndSignIn = async () => {
     setProcessing(true);
@@ -64,22 +73,33 @@ const SignIn = () => {
       await validate(SIGN_IN_REQUEST_VALIDATOR, signInRequest);
       await signIn();
     } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
       setProcessing(false);
     }
   };
 
-  const submitOnEnter = onEnterCallback(signIn);
+  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}
+      sx={(theme: Theme) => ({
+        display: 'flex',
+        height: '100vh',
+        margin: 'auto',
+        padding: 2,
+        justifyContent: 'center',
+        flexDirection: 'column',
+        maxWidth: theme.breakpoints.values.sm
+      })}
     >
       <Paper
         sx={(theme) => ({
@@ -92,23 +112,29 @@ const SignIn = () => {
           width: '100%'
         })}
       >
-        <Typography variant="h4">{PROJECT_NAME}</Typography>
-
+        <Typography sx={{ mb: 1 }} variant="h4">
+          {PROJECT_NAME}
+        </Typography>
         <LanguageSelector />
-
-        <Box display="flex" flexDirection="column" alignItems="center">
+        <Box
+          sx={{
+            mt: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            alignItems: 'center'
+          }}
+        >
           <ValidatedTextField
             fieldErrors={fieldErrors || {}}
             disabled={processing}
             sx={{
-              width: 240
+              width: '32ch'
             }}
             name="username"
             label={LL.USERNAME(0)}
             value={signInRequest.username}
             onChange={updateLoginRequestValue}
-            margin="normal"
-            variant="outlined"
             slotProps={{
               input: {
                 autoCapitalize: 'none',
@@ -120,14 +146,13 @@ const SignIn = () => {
             fieldErrors={fieldErrors || {}}
             disabled={processing}
             sx={{
-              width: 240
+              width: '32ch'
             }}
             name="password"
             label={LL.PASSWORD()}
             value={signInRequest.password}
             onChange={updateLoginRequestValue}
             onKeyDown={submitOnEnter}
-            variant="outlined"
           />
         </Box>
 
@@ -144,6 +169,6 @@ const SignIn = () => {
       </Paper>
     </Box>
   );
-};
+});
 
 export default SignIn;

interface/src/api/app.ts

@@ -20,19 +20,18 @@ import type {
   WriteTemperatureSensor
 } from '../app/main/types';
 
+const MSGPACK_CONFIG = { responseType: 'arraybuffer' as const };
+
 // Dashboard
 export const readDashboard = () =>
-  alovaInstance.Get<DashboardData>('/rest/dashboardData', {
-    responseType: 'arraybuffer' // uses msgpack
-  });
+  alovaInstance.Get<DashboardData>('/rest/dashboardData', MSGPACK_CONFIG);
 
 // Devices
-export const readCoreData = () => alovaInstance.Get<CoreData>(`/rest/coreData`);
+export const readCoreData = () => alovaInstance.Get<CoreData>('/rest/coreData');
 export const readDeviceData = (id: number) =>
   alovaInstance.Get<DeviceData>('/rest/deviceData', {
-    // alovaInstance.Get<DeviceData>(`/rest/deviceData/${id}`, {
     params: { id },
-    responseType: 'arraybuffer' // uses msgpack
+    ...MSGPACK_CONFIG
   });
 export const writeDeviceValue = (data: { id: number; c: string; v: unknown }) =>
   alovaInstance.Post('/rest/writeDeviceValue', data);
@@ -66,13 +65,13 @@ export const callAction = (action: Action) =>
 
 // SettingsCustomization
 export const readDeviceEntities = (id: number) =>
-  // alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities/${id}`, {
-  alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
+  alovaInstance.Get<DeviceEntity[]>('/rest/deviceEntities', {
     params: { id },
-    responseType: 'arraybuffer',
+    ...MSGPACK_CONFIG,
     // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
     transform(data) {
-      return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
+      const entities = data as DeviceEntity[];
+      return entities.map((de) => ({
         ...de,
         o_m: de.m,
         o_cn: de.cn,
@@ -95,7 +94,8 @@ export const readSchedule = () =>
   alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
     // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
     transform(data) {
-      return (data as Schedule).schedule.map((si: ScheduleItem) => ({
+      const schedule = (data as Schedule).schedule;
+      return schedule.map((si) => ({
         ...si,
         o_id: si.id,
         o_active: si.active,
@@ -115,7 +115,8 @@ export const writeSchedule = (data: Schedule) =>
 export const readModules = () =>
   alovaInstance.Get<ModuleItem[]>('/rest/modules', {
     transform(data) {
-      return (data as Modules).modules.map((mi: ModuleItem) => ({
+      const modules = (data as Modules).modules;
+      return modules.map((mi) => ({
         ...mi,
         o_enabled: mi.enabled,
         o_license: mi.license
@@ -133,7 +134,8 @@ export const readCustomEntities = () =>
   alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
     // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
     transform(data) {
-      return (data as Entities).entities.map((ei: EntityItem) => ({
+      const entities = (data as Entities).entities;
+      return entities.map((ei) => ({
         ...ei,
         o_id: ei.id,
         o_ram: ei.ram,

interface/src/api/endpoints.ts

@@ -4,63 +4,56 @@ import ReactHook from 'alova/react';
 
 import { unpack } from './unpack';
 
-export const ACCESS_TOKEN = 'access_token';
+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,
-  // timeout: 3000, // 3 seconds before throwing a timeout error, default is 0 = none
   cacheFor: null, // disable cache
-  // cacheFor: {
-  //   GET: {
-  //     mode: 'memory',
-  //     expire: 60 * 10 * 1000 // 60 seconds in cache
-  //   }
-  // },
   requestAdapter: xhrRequestAdapter(),
   beforeRequest(method) {
-    if (localStorage.getItem(ACCESS_TOKEN)) {
-      method.config.headers.Authorization =
-        'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
+    const token = getAccessToken();
+    if (token) {
+      method.config.headers.Authorization = `Bearer ${token}`;
     }
-    // for simulating very slow networks
-    // return new Promise((resolve) => {
-    //   const random = 3000 + Math.random() * 2000;
-    //   setTimeout(resolve, Math.floor(random));
-    // });
   },
-
   responded: {
-    onSuccess: async (response: AlovaXHRResponse) => {
-      // if (response.status === 202) {
-      //   throw new Error('Wait'); // wifi scan in progress
-      // } else
-      if (response.status === 205) {
-        throw new Error('Reboot required');
-      } else if (response.status === 400) {
-        throw new Error('Request Failed');
-      } else if (response.status >= 400) {
-        throw new Error(response.statusText);
-      }
-      const data: ArrayBuffer = (await response.data) as ArrayBuffer;
-      if (response.data instanceof ArrayBuffer) {
-        return unpack(data) as ArrayBuffer;
-      }
-      return data;
-    }
-
-    // Interceptor for request failure. This interceptor will be entered when the request is wrong.
-    // http errors like 401 (unauthorized) are handled either in the methods or AuthenticatedRouting()
-    // onError: (error, method) => {
-    //   alert(error.message);
-    // }
+    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/network.ts

@@ -2,12 +2,14 @@ import type { NetworkSettingsType, NetworkStatusType, WiFiNetworkList } from 'ty
 
 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: 20000 // 20 seconds
+    timeout: LIST_NETWORKS_TIMEOUT
   });
 export const readNetworkSettings = () =>
   alovaInstance.Get<NetworkSettingsType>('/rest/networkSettings');

interface/src/api/ntp.ts

@@ -6,7 +6,7 @@ export const readNTPStatus = () =>
   alovaInstance.Get<NTPStatusType>('/rest/ntpStatus');
 
 export const readNTPSettings = () =>
-  alovaInstance.Get<NTPSettingsType>('/rest/ntpSettings', {});
+  alovaInstance.Get<NTPSettingsType>('/rest/ntpSettings');
 export const updateNTPSettings = (data: NTPSettingsType) =>
   alovaInstance.Post<NTPSettingsType>('/rest/ntpSettings', data);
 

interface/src/api/system.ts

@@ -1,6 +1,6 @@
 import type { LogSettings, SystemStatus } from 'types';
 
-import { alovaInstance, alovaInstanceGH } from './endpoints';
+import { alovaInstance } from './endpoints';
 
 // systemStatus - also used to ping in System Monitor for pinging
 export const readSystemStatus = () =>
@@ -8,38 +8,17 @@ export const readSystemStatus = () =>
 
 // SystemLog
 export const readLogSettings = () =>
-  alovaInstance.Get<LogSettings>(`/rest/logSettings`);
+  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: 60000 // override timeout for uploading firmware - 1 minute
+    timeout: UPLOAD_TIMEOUT
   });
 };

interface/src/api/unpack.ts

@@ -54,7 +54,7 @@ export class Unpackr {
     }
     Object.assign(this, options);
   }
-  unpack(source, options?: any) {
+  unpack(source, options?: { start?: number; end?: number; lazy?: boolean }) {
     if (src) {
       return saveState(() => {
         clearSource();
@@ -184,7 +184,7 @@ export class Unpackr {
 function getPosition() {
   return position;
 }
-function checkedRead(options: any) {
+function checkedRead(options?: { lazy?: boolean }) {
   try {
     if (!currentUnpackr.trusted && !sequentialMode) {
       const sharedLength = currentStructures.sharedLength || 0;

interface/src/app/main/CustomEntities.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -35,6 +35,10 @@ 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);
@@ -64,7 +68,7 @@ const CustomEntities = () => {
     { immediate: false }
   );
 
-  function hasEntityChanged(ei: EntityItem) {
+  const hasEntityChanged = (ei: EntityItem) => {
     return (
       ei.id !== ei.o_id ||
       ei.ram !== ei.o_ram ||
@@ -80,7 +84,7 @@ const CustomEntities = () => {
       ei.deleted !== ei.o_deleted ||
       (ei.value || '') !== (ei.o_value || '')
     );
-  }
+  };
 
   const entity_theme = useTheme({
     Table: `
@@ -165,11 +169,11 @@ const CustomEntities = () => {
       });
   };
 
-  const editEntityItem = useCallback((ei: EntityItem) => {
+  const editEntityItem = (ei: EntityItem) => {
     setCreating(false);
     setSelectedEntityItem(ei);
     setDialogOpen(true);
-  }, []);
+  };
 
   const onDialogClose = () => {
     setDialogOpen(false);
@@ -200,7 +204,7 @@ const CustomEntities = () => {
   const onDialogDup = (item: EntityItem) => {
     setCreating(true);
     setSelectedEntityItem({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
       name: item.name + '_',
       ram: item.ram,
       device_id: item.device_id,
@@ -220,7 +224,7 @@ const CustomEntities = () => {
   const addEntityItem = () => {
     setCreating(true);
     setSelectedEntityItem({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
       name: '',
       ram: 0,
       device_id: '0',
@@ -237,18 +241,23 @@ const CustomEntities = () => {
     setDialogOpen(true);
   };
 
-  function formatValue(value: unknown, uom: number) {
+  const formatValue = (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]);
-  }
+          (uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`)
+        : `${value as string}${uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`}`;
+  };
 
-  function showHex(value: number, digit: number) {
-    return '0x' + value.toString(16).toUpperCase().padStart(digit, '0');
-  }
+  const showHex = (value: number, digit: number) => {
+    return `0x${value.toString(16).toUpperCase().padStart(digit, '0')}`;
+  };
+
+  const filteredAndSortedEntities =
+    entities
+      ?.filter((ei: EntityItem) => !ei.deleted)
+      .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name)) ?? [];
 
   const renderEntity = () => {
     if (!entities) {
@@ -260,9 +269,7 @@ const CustomEntities = () => {
     return (
       <Table
         data={{
-          nodes: entities
-            .filter((ei: EntityItem) => !ei.deleted)
-            .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name))
+          nodes: filteredAndSortedEntities
         }}
         theme={entity_theme}
         layout={{ custom: true }}
@@ -285,16 +292,21 @@ const CustomEntities = () => {
                   <Cell>
                     {ei.name}&nbsp;
                     {ei.writeable && (
-                      <EditOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+                      <EditOutlinedIcon
+                        color="primary"
+                        sx={{ fontSize: ICON_SIZE }}
+                      />
                     )}
                   </Cell>
+                  <Cell>{ei.ram > 0 ? '' : showHex(ei.device_id as number, 2)}</Cell>
+                  <Cell>{ei.ram > 0 ? '' : showHex(ei.type_id as number, 3)}</Cell>
+                  <Cell>{ei.ram > 0 ? '' : ei.offset}</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]}
+                    {ei.ram === 1
+                      ? 'RAM'
+                      : ei.ram === 2
+                        ? 'NVS'
+                        : DeviceValueTypeNames[ei.value_type]}
                   </Cell>
                   <Cell>{formatValue(ei.value, ei.uom)}</Cell>
                 </Row>
@@ -309,9 +321,9 @@ const CustomEntities = () => {
   return (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      <Box mb={2} color="warning.main">
-        <Typography variant="body1">{LL.ENTITIES_HELP_1()}.</Typography>
-      </Box>
+      <Typography sx={{ mb: 2 }} color="warning" variant="body1">
+        {LL.ENTITIES_HELP_1()}.
+      </Typography>
 
       {renderEntity()}
 
@@ -327,8 +339,8 @@ const CustomEntities = () => {
         />
       )}
 
-      <Box mt={2} display="flex" flexWrap="wrap">
-        <Box flexGrow={1}>
+      <Box sx={{ mt: 2, display: 'flex', flexWrap: 'wrap' }}>
+        <Box sx={{ flexGrow: 1 }}>
           {numChanges > 0 && (
             <ButtonRow>
               <Button
@@ -350,7 +362,7 @@ const CustomEntities = () => {
             </ButtonRow>
           )}
         </Box>
-        <Box flexWrap="nowrap" whiteSpace="nowrap">
+        <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
           <Button
             startIcon={<AddIcon />}
             variant="outlined"

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -7,7 +7,7 @@ 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 RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
 import {
   Box,
   Button,
@@ -28,11 +28,24 @@ 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 { ValidationError, 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;
@@ -55,21 +68,35 @@ const CustomEntitiesDialog = ({
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = updateValue(
+    setEditItem as unknown as React.Dispatch<
+      React.SetStateAction<Record<string, unknown>>
+    >
+  );
 
   useEffect(() => {
     if (open) {
       setFieldErrors(undefined);
-      setEditItem(selectedItem);
-      // convert to hex strings straight away
+      // 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: selectedItem.device_id.toString(16).toUpperCase(),
-        type_id: selectedItem.type_id.toString(16).toUpperCase(),
-        factor:
-          selectedItem.value_type === DeviceValueType.BOOL
-            ? selectedItem.factor.toString(16).toUpperCase()
-            : selectedItem.factor
+        device_id: deviceIdHex,
+        type_id: typeIdHex,
+        factor: factorValue
       });
     }
   }, [open, selectedItem]);
@@ -87,42 +114,48 @@ const CustomEntitiesDialog = ({
     try {
       setFieldErrors(undefined);
       await validate(validator, editItem);
-      if (typeof editItem.device_id === 'string') {
-        editItem.device_id = parseInt(editItem.device_id, 16);
+
+      // 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 editItem.type_id === 'string') {
-        editItem.type_id = parseInt(editItem.type_id, 16);
+      if (typeof processedItem.type_id === 'string') {
+        processedItem.type_id = Number.parseInt(processedItem.type_id, 16);
       }
       if (
-        editItem.value_type === DeviceValueType.BOOL &&
-        typeof editItem.factor === 'string'
+        processedItem.value_type === DeviceValueType.BOOL &&
+        typeof processedItem.factor === 'string'
       ) {
-        editItem.factor = parseInt(editItem.factor, 16);
+        processedItem.factor = Number.parseInt(processedItem.factor, 16);
       }
-      onSave(editItem);
+      onSave(processedItem);
     } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
   const remove = () => {
-    editItem.deleted = true;
-    onSave(editItem);
+    onSave({ ...editItem, deleted: true });
   };
 
   const dup = () => {
     onDup(editItem);
   };
 
+  const uomMenuItems = 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>
-        <Box display="flex" flexWrap="wrap" mb={1}>
-          <Box flexWrap="nowrap" whiteSpace="nowrap" />
-        </Box>
         <Grid container spacing={2} rowSpacing={0}>
           <Grid size={12}>
             <ValidatedTextField
@@ -135,7 +168,7 @@ const CustomEntitiesDialog = ({
               onChange={updateFormValue}
             />
           </Grid>
-          <Grid mt={3}>
+          <Grid sx={{ mt: 3 }}>
             <BlockFormControlLabel
               control={
                 <Checkbox
@@ -162,16 +195,17 @@ const CustomEntitiesDialog = ({
             >
               <MenuItem value={0}>EMS-{LL.VALUE(1)}</MenuItem>
               <MenuItem value={1}>RAM-{LL.VALUE(1)}</MenuItem>
+              <MenuItem value={2}>NVS-{LL.VALUE(1)}</MenuItem>
             </TextField>
           </Grid>
-          {editItem.ram === 1 && (
+          {editItem.ram > 0 && (
             <>
               <Grid>
                 <TextField
                   name="value"
                   label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
                   type="string"
-                  value={editItem.value as string}
+                  value={editItem.value}
                   variant="outlined"
                   onChange={updateFormValue}
                   fullWidth
@@ -187,18 +221,14 @@ const CustomEntitiesDialog = ({
                   onChange={updateFormValue}
                   select
                 >
-                  {DeviceValueUOM_s.map((val, i) => (
-                    <MenuItem key={val} value={i}>
-                      {val}
-                    </MenuItem>
-                  ))}
+                  {uomMenuItems}
                 </TextField>
               </Grid>
             </>
           )}
           {editItem.ram === 0 && (
             <>
-              <Grid mt={3}>
+              <Grid sx={{ mt: 3 }}>
                 <BlockFormControlLabel
                   control={
                     <Checkbox
@@ -220,7 +250,7 @@ const CustomEntitiesDialog = ({
                   margin="normal"
                   sx={{ width: '11ch' }}
                   type="string"
-                  value={editItem.device_id as string}
+                  value={editItem.device_id}
                   onChange={updateFormValue}
                   slotProps={{
                     input: {
@@ -240,7 +270,7 @@ const CustomEntitiesDialog = ({
                   margin="normal"
                   sx={{ width: '11ch' }}
                   type="string"
-                  value={editItem.type_id as string}
+                  value={editItem.type_id}
                   onChange={updateFormValue}
                   slotProps={{
                     input: {
@@ -275,33 +305,11 @@ const CustomEntitiesDialog = ({
                   margin="normal"
                   select
                 >
-                  <MenuItem value={DeviceValueType.BOOL}>
-                    {DeviceValueTypeNames[DeviceValueType.BOOL]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.INT8}>
-                    {DeviceValueTypeNames[DeviceValueType.INT8]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT8}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT8]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.INT16}>
-                    {DeviceValueTypeNames[DeviceValueType.INT16]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT16}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT16]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT24}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT24]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.TIME}>
-                    {DeviceValueTypeNames[DeviceValueType.TIME]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT32}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT32]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.STRING}>
-                    {DeviceValueTypeNames[DeviceValueType.STRING]}
+                  {VALUE_TYPE_OPTIONS.map((valueType) => (
+                    <MenuItem key={valueType} value={valueType}>
+                      {DeviceValueTypeNames[valueType]}
                     </MenuItem>
+                  ))}
                 </TextField>
               </Grid>
 
@@ -333,11 +341,7 @@ const CustomEntitiesDialog = ({
                         onChange={updateFormValue}
                         select
                       >
-                        {DeviceValueUOM_s.map((val, i) => (
-                          <MenuItem key={val} value={i}>
-                            {val}
-                          </MenuItem>
-                        ))}
+                        {uomMenuItems}
                       </TextField>
                     </Grid>
                   </>
@@ -367,7 +371,7 @@ const CustomEntitiesDialog = ({
                     fieldErrors={fieldErrors || {}}
                     name="factor"
                     label={LL.BITMASK()}
-                    value={editItem.factor as string}
+                    value={editItem.factor}
                     sx={{ width: '11ch' }}
                     variant="outlined"
                     onChange={updateFormValue}
@@ -390,7 +394,7 @@ const CustomEntitiesDialog = ({
       </DialogContent>
       <DialogActions>
         {!creating && (
-          <Box flexGrow={1}>
+          <Box sx={{ flexGrow: 1 }}>
             <Button
               startIcon={<RemoveIcon />}
               variant="outlined"

interface/src/app/main/Customizations.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useBlocker, useLocation } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -62,7 +62,24 @@ import OptionIcon from './OptionIcon';
 import { DeviceEntityMask } from './types';
 import type { APIcall, Device, DeviceEntity } from './types';
 
-export const APIURL = window.location.origin + '/api/';
+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();
@@ -94,13 +111,14 @@ const Customizations = () => {
   const [selectedDeviceTypeNameURL, setSelectedDeviceTypeNameURL] =
     useState<string>(''); // needed for API URL
   const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
+  const [selectedDeviceBrand, setSelectedDeviceBrand] = useState<string>('');
 
   const { send: sendResetCustomizations } = useRequest(resetCustomizations(), {
     immediate: false
   });
 
   const { send: sendDeviceName } = useRequest(
-    (data: { id: number; name: string }) => writeDeviceName(data),
+    (data: { id: number; name: string; brand: string }) => writeDeviceName(data),
     {
       immediate: false
     }
@@ -229,19 +247,8 @@ const Customizations = () => {
 
   useEffect(() => {
     if (deviceEntities.length) {
-      setNumChanges(
-        deviceEntities
-          .filter((de) => hasEntityChanged(de))
-          .map(
-            (new_de) =>
-              new_de.m.toString(16).padStart(2, '0') +
-              new_de.id +
-              (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
-              (new_de.cn ? new_de.cn : '') +
-              (new_de.mi ? '>' + new_de.mi : '') +
-              (new_de.ma ? '<' + new_de.ma : '')
-          ).length
-      );
+      const changedEntities = deviceEntities.filter((de) => hasEntityChanged(de));
+      setNumChanges(changedEntities.length);
     }
   }, [deviceEntities]);
 
@@ -257,6 +264,7 @@ const Customizations = () => {
         if (device) {
           setSelectedDeviceTypeNameURL(device.url || '');
           setSelectedDeviceName(device.n);
+          setSelectedDeviceBrand(device.b);
         }
         setNumChanges(0);
         setRestartNeeded(false);
@@ -275,18 +283,23 @@ const Customizations = () => {
     return value as string;
   }
 
-  const formatName = (de: DeviceEntity, withShortname: boolean) =>
-    (de.n && de.n[0] === '!'
-      ? de.t
-        ? LL.COMMAND(1) + ': ' + de.t + ' ' + de.n.slice(1)
-        : LL.COMMAND(1) + ': ' + de.n.slice(1)
-      : de.cn && de.cn !== ''
-        ? de.t
-          ? de.t + ' ' + de.cn
-          : de.cn
-        : de.t
-          ? de.t + ' ' + de.n
-          : de.n) + (withShortname ? ' ' + de.id : '');
+  const isCommand = (de: DeviceEntity) => {
+    return de.n && de.n[0] === '!';
+  };
+
+  const formatName = (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;
+  };
 
   const getMaskNumber = (newMask: string[]) => {
     let new_mask = 0;
@@ -321,24 +334,17 @@ const Customizations = () => {
     formatName(de, true).toLowerCase().includes(search.toLowerCase());
 
   const maskDisabled = (set: boolean) => {
-    setDeviceEntities(
-      deviceEntities.map(function (de) {
+    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 |
-                (DeviceEntityMask.DV_API_MQTT_EXCLUDE |
-                  DeviceEntityMask.DV_WEB_EXCLUDE)
-              : de.m &
-                ~(
-                  DeviceEntityMask.DV_API_MQTT_EXCLUDE |
-                  DeviceEntityMask.DV_WEB_EXCLUDE
-                )
+            m: set ? de.m | excludeMask : de.m & ~excludeMask
           };
-        } else {
-          return de;
         }
+        return de;
       })
     );
   };
@@ -351,6 +357,7 @@ const Customizations = () => {
       toast.error((error as Error).message);
     } finally {
       setConfirmReset(false);
+      setRestarting(true);
     }
   };
 
@@ -360,9 +367,10 @@ const Customizations = () => {
 
   const updateDeviceEntity = (updatedItem: DeviceEntity) => {
     setDeviceEntities(
-      deviceEntities?.map((de) =>
+      (prev) =>
+        prev?.map((de) =>
           de.id === updatedItem.id ? { ...de, ...updatedItem } : de
-      )
+        ) ?? []
     );
   };
 
@@ -371,7 +379,7 @@ const Customizations = () => {
     updateDeviceEntity(updatedItem);
   };
 
-  const editDeviceEntity = useCallback((de: DeviceEntity) => {
+  const editDeviceEntity = (de: DeviceEntity) => {
     if (de.n === undefined || (de.n && de.n[0] === '!')) {
       return;
     }
@@ -382,25 +390,20 @@ const Customizations = () => {
 
     setSelectedDeviceEntity(de);
     setDialogOpen(true);
-  }, []);
+  };
 
   const saveCustomization = async () => {
-    if (devices && deviceEntities && selectedDevice !== -1) {
+    if (!devices || !deviceEntities || selectedDevice === -1) {
+      return;
+    }
+
     const masked_entities = deviceEntities
       .filter((de: DeviceEntity) => hasEntityChanged(de))
-        .map(
-          (new_de) =>
-            new_de.m.toString(16).padStart(2, '0') +
-            new_de.id +
-            (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
-            (new_de.cn ? new_de.cn : '') +
-            (new_de.mi ? '>' + new_de.mi : '') +
-            (new_de.ma ? '<' + new_de.ma : '')
-        );
+      .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 > 2000) {
+    if (bytes > MAX_BUFFER_SIZE) {
       toast.warning(LL.CUSTOMIZATIONS_FULL());
       return;
     }
@@ -422,16 +425,19 @@ const Customizations = () => {
       .finally(() => {
         setOriginalSettings(deviceEntities);
       });
-    }
   };
 
   const renameDevice = async () => {
-    await sendDeviceName({ id: selectedDevice, name: selectedDeviceName })
+    await sendDeviceName({
+      id: selectedDevice,
+      name: selectedDeviceName,
+      brand: selectedDeviceBrand
+    })
       .then(() => {
         toast.success(LL.UPDATED_OF(LL.NAME(1)));
       })
       .catch(() => {
-        toast.error(LL.UPDATE_OF(LL.NAME(1)) + ' ' + LL.FAILED(1));
+        toast.error(`${LL.UPDATE_OF(LL.NAME(1))} ${LL.FAILED(1)}`);
       })
       .finally(async () => {
         setRename(false);
@@ -441,20 +447,31 @@ const Customizations = () => {
 
   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}>
+      <Typography sx={{ mb: 1 }} color="warning" variant="body1">
+        {LL.CUSTOMIZATIONS_HELP_1()}.
+      </Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 2 }}>
         {rename ? (
+          <>
             <TextField
               name="device"
               label={LL.EMS_DEVICE()}
-            fullWidth
+              style={{ minWidth: '48%' }}
               variant="outlined"
               value={selectedDeviceName}
               onChange={(e) => setSelectedDeviceName(e.target.value)}
               margin="normal"
             />
+            <TextField
+              name="brand"
+              label={LL.BRAND()}
+              style={{ minWidth: '48%' }}
+              variant="outlined"
+              value={selectedDeviceBrand}
+              onChange={(e) => setSelectedDeviceBrand(e.target.value)}
+              margin="normal"
+            />
+          </>
         ) : (
           <TextField
             name="device"
@@ -500,6 +517,7 @@ const Customizations = () => {
               </Button>
             </>
           ) : (
+            <>
               <Button
                 startIcon={<EditIcon />}
                 variant="outlined"
@@ -507,43 +525,48 @@ const Customizations = () => {
               >
                 {LL.RENAME()}
               </Button>
+              <Button
+                startIcon={<SettingsBackupRestoreIcon />}
+                variant="outlined"
+                color="error"
+                onClick={() => setConfirmReset(true)}
+              >
+                {LL.REMOVE_ALL()}
+              </Button>
+            </>
           ))}
       </Box>
     </>
   );
 
-  const renderDeviceData = () => {
-    const shown_data = deviceEntities.filter((de) => filter_entity(de));
+  const filteredEntities = deviceEntities.filter((de) => filter_entity(de));
 
+  const renderDeviceData = () => {
     return (
       <>
-        <Box color="warning.main">
-          <Typography variant="body2" mt={1}>
+        <Typography sx={{ mt: 1, mb: 1 }} color="warning" variant="body2">
           <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="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"
+          sx={{ mb: 1, mt: 0, justifyContent: 'flex-start', alignItems: 'center' }}
         >
           <Grid>
             <TextField
               size="small"
               variant="outlined"
               placeholder={LL.SEARCH()}
+              aria-label={LL.SEARCH()}
               onChange={(event) => {
                 setSearch(event.target.value);
               }}
@@ -612,13 +635,13 @@ const Customizations = () => {
           </Grid>
           <Grid>
             <Typography variant="subtitle2" color="grey">
-              {LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
+              {LL.SHOWING()}&nbsp;{filteredEntities.length}/{deviceEntities.length}
               &nbsp;{LL.ENTITIES(deviceEntities.length)}
             </Typography>
           </Grid>
         </Grid>
         <Table
-          data={{ nodes: shown_data }}
+          data={{ nodes: filteredEntities }}
           theme={entities_theme}
           layout={{ custom: true }}
         >
@@ -640,14 +663,27 @@ const Customizations = () => {
                       <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)}
@@ -672,7 +708,7 @@ const Customizations = () => {
       open={confirmReset}
       onClose={() => setConfirmReset(false)}
     >
-      <DialogTitle>{LL.RESET(1)}</DialogTitle>
+      <DialogTitle>{LL.REMOVE_ALL()}</DialogTitle>
       <DialogContent dividers>{LL.CUSTOMIZATIONS_RESET()}</DialogContent>
       <DialogActions>
         <Button
@@ -689,7 +725,7 @@ const Customizations = () => {
           onClick={resetCustomization}
           color="error"
         >
-          {LL.RESET(0)}
+          {LL.REMOVE_ALL()}
         </Button>
       </DialogActions>
     </Dialog>
@@ -700,8 +736,9 @@ const Customizations = () => {
       {devices && renderDeviceList()}
       {selectedDevice !== -1 && !rename && renderDeviceData()}
       {restartNeeded ? (
-        <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
+        <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
           <Button
+            sx={{ ml: 2 }}
             startIcon={<PowerSettingsNewIcon />}
             variant="contained"
             color="error"
@@ -711,15 +748,19 @@ const Customizations = () => {
           </Button>
         </MessageBox>
       ) : (
-        <Box display="flex" flexWrap="wrap">
-          <Box flexGrow={1}>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+          <Box sx={{ flexGrow: 1 }}>
             {numChanges !== 0 && (
               <ButtonRow>
                 <Button
                   startIcon={<CancelIcon />}
                   variant="outlined"
                   color="secondary"
-                  onClick={() => devices && sendDeviceEntities(selectedDevice)}
+                  onClick={() => {
+                    if (devices) {
+                      void sendDeviceEntities(selectedDevice);
+                    }
+                  }}
                 >
                   {LL.CANCEL()}
                 </Button>
@@ -734,28 +775,18 @@ const Customizations = () => {
               </ButtonRow>
             )}
           </Box>
-          {!rename && (
-            <ButtonRow mt={1}>
-              <Button
-                startIcon={<SettingsBackupRestoreIcon />}
-                variant="outlined"
-                color="error"
-                onClick={() => setConfirmReset(true)}
-              >
-                {LL.RESET(0)}
-              </Button>
-            </ButtonRow>
-          )}
         </Box>
       )}
       {renderResetDialog()}
     </>
   );
 
-  return (
+  return restarting ? (
+    <SystemMonitor />
+  ) : (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {restarting ? <SystemMonitor /> : renderContent()}
+      {renderContent()}
       {selectedDeviceEntity && (
         <SettingsCustomizationsDialog
           open={dialogOpen}

interface/src/app/main/CustomizationsDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import CloseIcon from '@mui/icons-material/Close';
@@ -30,6 +30,23 @@ interface SettingsCustomizationsDialogProps {
   selectedItem: DeviceEntity;
 }
 
+interface LabelValueProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+const LabelValue = memo(({ label, value }: LabelValueProps) => (
+  <Grid container direction="row">
+    <Typography variant="body2" color="warning">
+      {label}:&nbsp;
+    </Typography>
+    <Typography variant="body2">{value}</Typography>
+  </Grid>
+));
+LabelValue.displayName = 'LabelValue';
+
+const ICON_SIZE = 16;
+
 const CustomizationsDialog = ({
   open,
   onClose,
@@ -40,7 +57,11 @@ const CustomizationsDialog = ({
   const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
   const [error, setError] = useState<boolean>(false);
 
-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = updateValue(
+    setEditItem as unknown as React.Dispatch<
+      React.SetStateAction<Record<string, unknown>>
+    >
+  );
 
   const isWriteableNumber =
     typeof editItem.v === 'number' &&
@@ -68,7 +89,7 @@ const CustomizationsDialog = ({
       isWriteableNumber &&
       editItem.mi &&
       editItem.ma &&
-      editItem.mi > editItem?.ma
+      editItem.mi > editItem.ma
     ) {
       setError(true);
     } else {
@@ -77,43 +98,33 @@ const CustomizationsDialog = ({
   };
 
   const updateDeviceEntity = (updatedItem: DeviceEntity) => {
-    setEditItem({ ...editItem, m: updatedItem.m });
+    setEditItem((prev) => ({ ...prev, m: updatedItem.m }));
   };
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
+      <DialogTitle>{`${LL.EDIT()} ${LL.ENTITY()}`}</DialogTitle>
       <DialogContent dividers>
-        <Grid container>
-          <Typography variant="body2" color="warning.main">
-            {LL.ID_OF(LL.ENTITY())}:&nbsp;
-          </Typography>
-          <Typography variant="body2">{editItem.id}</Typography>
-        </Grid>
-
-        <Grid container direction="row">
-          <Typography variant="body2" color="warning.main">
-            {LL.DEFAULT(1) + ' ' + LL.ENTITY_NAME(1)}:&nbsp;
-          </Typography>
-          <Typography variant="body2">{editItem.n}</Typography>
-        </Grid>
-
-        <Grid container direction="row">
-          <Typography variant="body2" color="warning.main">
-            {LL.WRITEABLE()}:&nbsp;
-          </Typography>
-          <Typography variant="body2">
-            {editItem.w ? (
-              <DoneIcon color="success" sx={{ fontSize: 16 }} />
+        <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={
+            editItem.w ? (
+              <DoneIcon color="success" sx={{ fontSize: ICON_SIZE }} />
             ) : (
-              <CloseIcon color="error" sx={{ fontSize: 16 }} />
-            )}
-          </Typography>
-        </Grid>
+              <CloseIcon color="error" sx={{ fontSize: ICON_SIZE }} />
+            )
+          }
+        />
 
-        <Box mt={1} mb={2}>
+        <Box sx={{ mt: 1, mb: 2 }}>
           <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
         </Box>
+
         <Grid container spacing={2}>
           <Grid>
             <TextField
@@ -149,12 +160,14 @@ const CustomizationsDialog = ({
             </>
           )}
         </Grid>
+
         {error && (
-          <Typography variant="body2" color="error" mt={2}>
+          <Typography sx={{ mt: 2 }} variant="body2" color="error">
             Error: Check min and max values
           </Typography>
         )}
       </DialogContent>
+
       <DialogActions>
         <Button
           startIcon={<CancelIcon />}

interface/src/app/main/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useContext, useEffect, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { Link } from 'react-router';
 import { toast } from 'react-toastify';
@@ -6,7 +6,7 @@ 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 HelpOutlineIcon from '@mui/icons-material/HelpOutlined';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import {
@@ -77,8 +77,7 @@ const Dashboard = memo(() => {
     }
   );
 
-  const deviceValueDialogSave = useCallback(
-    async (devicevalue: DeviceValue) => {
+  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
     if (!selectedDashboardItem) {
       return;
     }
@@ -94,13 +93,9 @@ const Dashboard = memo(() => {
         setDeviceValueDialogOpen(false);
         setSelectedDashboardItem(undefined);
       });
-    },
-    [selectedDashboardItem, sendDeviceValue, LL]
-  );
+  };
 
-  const dashboard_theme = useMemo(
-    () =>
-      useTheme({
+  const dashboard_theme = useTheme({
     Table: `
       --data-table-library_grid-template-columns: minmax(80px, auto) 120px 32px;
     `,
@@ -128,12 +123,10 @@ const Dashboard = memo(() => {
         text-align: right;
       }
     `
-      }),
-    []
-  );
+  });
 
   const tree = useTree(
-    { nodes: data.nodes },
+    { nodes: [...data.nodes] },
     {
       onChange: () => {} // not used but needed
     },
@@ -164,19 +157,14 @@ const Dashboard = memo(() => {
     }
   });
 
-  const nodeIds = useMemo(
-    () => data.nodes.map((item: DashboardItem) => item.id),
-    [data.nodes]
-  );
-
   useEffect(() => {
+    const nodeIds = data.nodes.map((item: DashboardItem) => item.id);
     showAll
       ? tree.fns.onAddAll(nodeIds) // expand tree
       : tree.fns.onRemoveAll(); // collapse tree
   }, [parentNodes]);
 
-  const showType = useCallback(
-    (n?: string, t?: number) => {
+  const showType = (n?: string, t?: number) => {
     // if we have a name show it
     if (n) {
       return n;
@@ -197,12 +185,9 @@ const Dashboard = memo(() => {
       }
     }
     return '';
-    },
-    [LL]
-  );
+  };
 
-  const showName = useCallback(
-    (di: DashboardItem) => {
+  const showName = (di: DashboardItem) => {
     if (di.id < 100) {
       // if its a device (parent node) and has entities
       if (di.nodes?.length) {
@@ -219,24 +204,17 @@ const Dashboard = memo(() => {
       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 hasMask = (id: string, mask: number) =>
+    (parseInt(id.slice(0, 2), 16) & mask) === mask;
 
-  const editDashboardValue = useCallback(
-    (di: DashboardItem) => {
+  const editDashboardValue = (di: DashboardItem) => {
     if (me.admin && di.dv?.c) {
       setSelectedDashboardItem(di);
       setDeviceValueDialogOpen(true);
     }
-    },
-    [me.admin]
-  );
+  };
 
   const handleShowAll = (
     _event: React.MouseEvent<HTMLElement>,
@@ -248,10 +226,9 @@ const Dashboard = memo(() => {
     }
   };
 
-  const hasFavEntities = useMemo(
-    () => data.nodes.filter((item: DashboardItem) => item.id <= 90).length,
-    [data.nodes]
-  );
+  const hasFavEntities = data.nodes.filter(
+    (item: DashboardItem) => item.id <= 90
+  ).length;
 
   const renderContent = () => {
     if (!data) {
@@ -262,12 +239,8 @@ const Dashboard = memo(() => {
 
     return (
       <>
-        {!data.connected && (
-          <MessageBox mb={2} level="error" message={LL.EMS_BUS_WARNING()} />
-        )}
-
         {data.connected && data.nodes.length > 0 && !hasFavEntities && (
-          <MessageBox mb={2} level="warning">
+          <MessageBox sx={{ mb: 2 }} level="warning">
             <Typography>
               {LL.NO_DATA_1()}&nbsp;
               <Link to="/customizations" style={{ color: 'white' }}>
@@ -283,13 +256,13 @@ const Dashboard = memo(() => {
           </MessageBox>
         )}
 
-        {data.nodes.length > 0 && (
-          <>
         <Box
-              display="flex"
-              justifyContent="flex-end"
-              flexWrap="nowrap"
-              whiteSpace="nowrap"
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flexWrap: 'nowrap',
+            whiteSpace: 'nowrap'
+          }}
         >
           <ToggleButtonGroup
             size="small"
@@ -309,20 +282,10 @@ const Dashboard = memo(() => {
               </ToggleButton>
             </ButtonTooltip>
           </ToggleButtonGroup>
-              <Tooltip title={LL.DASHBOARD_1()}>
-                <HelpOutlineIcon
-                  sx={{
-                    ml: 1,
-                    mt: 1,
-                    fontSize: 20,
-                    verticalAlign: 'middle'
-                  }}
-                  color="primary"
-                />
-              </Tooltip>
         </Box>
 
-            <Box mt={1} justifyContent="center" flexDirection="column">
+        {data.nodes.length > 0 ? (
+          <Box sx={{ mt: 1, justifyContent: 'center', flexDirection: 'column' }}>
             <IconContext.Provider
               value={{
                 color: 'lightblue',
@@ -358,12 +321,12 @@ const Dashboard = memo(() => {
                             <Cell>
                               {me.admin &&
                                 di.dv?.c &&
-                                  !hasMask(
-                                    di.dv.id,
-                                    DeviceEntityMask.DV_READONLY
-                                  ) && (
+                                !hasMask(di.dv.id, DeviceEntityMask.DV_READONLY) && (
                                   <IconButton
                                     size="small"
+                                    aria-label={
+                                      LL.CHANGE_VALUE() + ' ' + LL.VALUE(0)
+                                    }
                                     onClick={() => editDashboardValue(di)}
                                   >
                                     <EditIcon
@@ -388,7 +351,23 @@ const Dashboard = memo(() => {
               </Table>
             </IconContext.Provider>
           </Box>
-          </>
+        ) : (
+          <Box sx={{ display: 'flex' }}>
+            <Typography sx={{ mt: 1 }} color="warning" variant="body1">
+              no data
+            </Typography>
+            <Tooltip title={LL.DASHBOARD_1()}>
+              <HelpOutlineIcon
+                sx={{
+                  ml: 1,
+                  mt: 1,
+                  fontSize: 20,
+                  verticalAlign: 'middle'
+                }}
+                color="primary"
+              />
+            </Tooltip>
+          </Box>
         )}
       </>
     );

interface/src/app/main/DeviceIcon.tsx

@@ -1,26 +1,24 @@
+import { memo } from 'react';
+import type { IconType } from 'react-icons';
 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 { MdPlaylistAdd } from 'react-icons/md';
-import { MdMoreTime } from 'react-icons/md';
 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: {
-  [key in DeviceType]: React.ComponentType<SvgIconProps> | undefined;
-} = {
+const deviceIconLookup: Record<DeviceType, IconType | null> = {
   [DeviceType.TEMPERATURESENSOR]: TiThermometer,
   [DeviceType.ANALOGSENSOR]: PiGauge,
   [DeviceType.BOILER]: CgSmartHomeBoiler,
@@ -39,15 +37,19 @@ const deviceIconLookup: {
   [DeviceType.POOL]: MdOutlinePool,
   [DeviceType.CUSTOM]: MdPlaylistAdd,
   [DeviceType.UNKNOWN]: MdOutlineSensors,
-  [DeviceType.SYSTEM]: undefined,
+  [DeviceType.SYSTEM]: null,
   [DeviceType.SCHEDULER]: MdMoreTime,
   [DeviceType.GENERIC]: MdOutlineSensors,
   [DeviceType.VENTILATION]: PiFan
 };
 
-const DeviceIcon = ({ type_id }: { type_id: DeviceType }) => {
+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

@@ -4,11 +4,10 @@ import {
   useContext,
   useEffect,
   useLayoutEffect,
-  useMemo,
   useState
 } from 'react';
 import { IconContext } from 'react-icons';
-import { useNavigate } from 'react-router';
+import { Link, useNavigate } from 'react-router';
 import { toast } from 'react-toastify';
 
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
@@ -93,7 +92,7 @@ const Devices = memo(() => {
 
   useLayoutTitle(LL.DEVICES());
 
-  const { data: coreData, send: sendCoreData } = useRequest(() => readCoreData(), {
+  const { data: coreData, send: sendCoreData } = useRequest(readCoreData, {
     initialData: {
       connected: true,
       devices: []
@@ -118,34 +117,30 @@ const Devices = memo(() => {
   );
 
   useLayoutEffect(() => {
-    function updateSize() {
+    let raf = 0;
+    const updateSize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
         setSize([window.innerWidth, window.innerHeight]);
-    }
+      });
+    };
     window.addEventListener('resize', updateSize);
     updateSize();
-    return () => window.removeEventListener('resize', updateSize);
+    return () => {
+      window.removeEventListener('resize', updateSize);
+      cancelAnimationFrame(raf);
+    };
   }, []);
 
   const leftOffset = () => {
     const devicesWindow = document.getElementById('devices-window');
-    if (!devicesWindow) {
-      return 0;
-    }
-
-    const clientRect = devicesWindow.getBoundingClientRect();
-    const left = clientRect.left;
-    const right = clientRect.right;
-
-    if (!left || !right) {
-      return 0;
-    }
-
+    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({
+  const common_theme = useTheme({
     BaseRow: `
       font-size: 14px;
     `,
@@ -167,13 +162,9 @@ const Devices = memo(() => {
         background-color: #177ac9;
       }
     `
-      }),
-    []
-  );
+  });
 
-  const device_theme = useMemo(
-    () =>
-      useTheme([
+  const device_theme = useTheme([
     common_theme,
     {
       BaseRow: `
@@ -198,13 +189,9 @@ const Devices = memo(() => {
       },
     `
     }
-      ]),
-    [common_theme]
-  );
+  ]);
 
-  const data_theme = useMemo(
-    () =>
-      useTheme([
+  const data_theme = useTheme([
     common_theme,
     {
       Table: `
@@ -246,9 +233,7 @@ const Devices = memo(() => {
     }
     `
     }
-      ]),
-    [common_theme]
-  );
+  ]);
 
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
@@ -261,7 +246,7 @@ const Devices = memo(() => {
   };
 
   const dv_sort = useSort(
-    { nodes: deviceData.nodes },
+    { nodes: [...deviceData.nodes] },
     {},
     {
       sortIcon: {
@@ -291,7 +276,7 @@ const Devices = memo(() => {
   }
 
   const device_select = useRowSelect(
-    { nodes: coreData.devices },
+    { nodes: [...coreData.devices] },
     {
       onChange: onSelectChange
     }
@@ -347,10 +332,8 @@ const Devices = memo(() => {
     return sc;
   };
 
-  const hasMask = useCallback(
-    (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask,
-    []
-  );
+  const hasMask = (id: string, mask: number) =>
+    (parseInt(id.slice(0, 2), 16) & mask) === mask;
 
   const handleDownloadCsv = () => {
     const deviceIndex = coreData.devices.findIndex(
@@ -535,7 +518,20 @@ const Devices = memo(() => {
 
   const renderCoreData = () => (
     <>
-      <Box justifyContent="center" flexDirection="column">
+      {!coreData.connected ? (
+        <MessageBox level="error" message={LL.EMS_BUS_WARNING() + '.'}>
+          &nbsp;(
+          <Link
+            target="_blank"
+            to="https://docs.emsesp.org/Troubleshooting#ems-bus-is-not-connecting"
+            style={{ color: 'white' }}
+          >
+            {LL.ONLINE_HELP()}
+          </Link>
+          )
+        </MessageBox>
+      ) : (
+        <Box sx={{ justifyContent: 'center', flexDirection: 'column' }}>
           <IconContext.Provider
             value={{
               color: 'lightblue',
@@ -543,13 +539,8 @@ const Devices = memo(() => {
               style: { verticalAlign: 'middle' }
             }}
           >
-          {!coreData.connected && (
-            <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
-          )}
-
-          {coreData.connected && (
             <Table
-              data={{ nodes: coreData.devices }}
+              data={{ nodes: [...coreData.devices] }}
               select={device_select}
               theme={device_theme}
               layout={{ custom: true }}
@@ -583,9 +574,9 @@ const Devices = memo(() => {
                 </>
               )}
             </Table>
-          )}
           </IconContext.Provider>
         </Box>
+      )}
     </>
   );
 
@@ -601,13 +592,12 @@ const Devices = memo(() => {
       return;
     }
 
-    const showDeviceValue = useCallback((dv: DeviceValue) => {
+    const showDeviceValue = (dv: DeviceValue) => {
       setSelectedDeviceValue(dv);
       setDeviceValueDialogOpen(true);
-    }, []);
+    };
 
-    const renderNameCell = useCallback(
-      (dv: DeviceValue) => (
+    const renderNameCell = (dv: DeviceValue) => (
       <>
         {dv.id.slice(2)}&nbsp;
         {hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) && (
@@ -620,22 +610,17 @@ const Devices = memo(() => {
           <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
         )}
       </>
-      ),
-      [hasMask]
     );
 
-    const shown_data = useMemo(() => {
-      if (onlyFav) {
-        return deviceData.nodes.filter(
+    const shown_data = onlyFav
+      ? 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) =>
+        )
+      : 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
@@ -654,7 +639,7 @@ const Devices = memo(() => {
         sx={{
           backgroundColor: 'black',
           position: 'absolute',
-          left: () => leftOffset(),
+          left: leftOffset,
           right: 0,
           bottom: 0,
           top: 64,
@@ -664,14 +649,14 @@ const Devices = memo(() => {
         }}
       >
         <Box sx={{ p: 1 }}>
-          <Grid container justifyContent="space-between">
-            <Typography noWrap variant="subtitle1" color="warning.main">
+          <Grid container sx={{ justifyContent: 'space-between' }}>
+            <Typography noWrap variant="subtitle1" color="warning">
               {deviceInfo.n}&nbsp;(
               {deviceInfo.tn})
             </Typography>
-            <Grid justifyContent="flex-end">
+            <Grid sx={{ justifyContent: 'flex-end' }}>
               <ButtonTooltip title={LL.CLOSE()}>
-                <IconButton onClick={resetDeviceSelect}>
+                <IconButton onClick={resetDeviceSelect} aria-label={LL.CLOSE()}>
                   <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
                 </IconButton>
               </ButtonTooltip>
@@ -683,6 +668,7 @@ const Devices = memo(() => {
             variant="outlined"
             sx={{ width: '22ch' }}
             placeholder={LL.SEARCH()}
+            aria-label={LL.SEARCH()}
             onChange={(event) => {
               setSearch(event.target.value);
             }}
@@ -697,19 +683,22 @@ const Devices = memo(() => {
             }}
           />
           <ButtonTooltip title={LL.DEVICE_DETAILS()}>
-            <IconButton onClick={() => setShowDeviceInfo(true)}>
+            <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}>
+              <IconButton onClick={customize} aria-label={LL.CUSTOMIZATIONS()}>
                 <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
               </IconButton>
             </ButtonTooltip>
           )}
           <ButtonTooltip title={LL.EXPORT()}>
-            <IconButton onClick={handleDownloadCsv}>
+            <IconButton onClick={handleDownloadCsv} aria-label={LL.EXPORT()}>
               <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
             </IconButton>
           </ButtonTooltip>
@@ -744,7 +733,7 @@ const Devices = memo(() => {
         </Box>
 
         <Table
-          data={{ nodes: shown_data }}
+          data={{ nodes: Array.from(shown_data) }}
           theme={data_theme}
           sort={dv_sort}
           layout={{ custom: true, fixedHeader: true }}

interface/src/app/main/DevicesDialog.tsx

@@ -24,7 +24,7 @@ import type { ValidateFieldsError } from 'async-validator';
 import { ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 
 import { DeviceValueUOM, DeviceValueUOM_s } from './types';
 import type { DeviceValue } from './types';
@@ -61,17 +61,13 @@ const DevicesDialog = ({
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
-  };
-
   const save = async () => {
     try {
       setFieldErrors(undefined);
       await validate(validator, editItem);
       onSave(editItem);
     } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
@@ -91,37 +87,44 @@ const DevicesDialog = ({
     }
   };
 
-  const showHelperText = (dv: DeviceValue) =>
-    dv.h ? (
-      dv.h
-    ) : dv.l ? (
-      dv.l.join(' | ')
-    ) : dv.m !== undefined && dv.x !== undefined ? (
+  const showHelperText = (dv: DeviceValue) => {
+    if (dv.h) return dv.h;
+    if (dv.l) return dv.l.join(' | ');
+    if (dv.m !== undefined && dv.x !== undefined) {
+      return (
         <>
           {dv.m}&nbsp;&rarr;&nbsp;{dv.x}
         </>
-    ) : undefined;
+      );
+    }
+    return undefined;
+  };
 
-  return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
-      <DialogTitle>
-        {selectedItem.v === '' && selectedItem.c
+  const isCommand = selectedItem.v === '' && selectedItem.c;
+  const dialogTitle = isCommand
     ? LL.RUN_COMMAND()
     : writeable
       ? LL.CHANGE_VALUE()
-            : LL.VALUE(0)}
-      </DialogTitle>
+      : LL.VALUE(0);
+  const buttonLabel = isCommand ? LL.EXECUTE() : LL.UPDATE();
+  const helperText = showHelperText(editItem);
+
+  const valueLabel = LL.VALUE(0);
+
+  return (
+    <Dialog sx={dialogStyle} open={open} onClose={onClose}>
+      <DialogTitle>{dialogTitle}</DialogTitle>
       <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
-          <Typography variant="body2">{editItem.id.slice(2)}</Typography>
-        </Box>
+        <Typography sx={{ mb: 2 }} color="warning" variant="body2">
+          {editItem.id.slice(2)}
+        </Typography>
         <Grid container>
           <Grid size={12}>
             {editItem.l ? (
               <TextField
                 name="v"
-                // label={LL.VALUE(0)}
                 value={editItem.v}
+                aria-label={valueLabel}
                 disabled={!writeable}
                 sx={{ width: '30ch' }}
                 select
@@ -137,7 +140,7 @@ const DevicesDialog = ({
               <ValidatedTextField
                 fieldErrors={fieldErrors || {}}
                 name="v"
-                label={LL.VALUE(0)}
+                label={valueLabel}
                 value={numberValue(Math.round((editItem.v as number) * 10) / 10)}
                 autoFocus
                 disabled={!writeable}
@@ -161,7 +164,7 @@ const DevicesDialog = ({
               <ValidatedTextField
                 fieldErrors={fieldErrors || {}}
                 name="v"
-                label={LL.VALUE(0)}
+                label={valueLabel}
                 value={editItem.v}
                 disabled={!writeable}
                 sx={{ width: '30ch' }}
@@ -170,9 +173,9 @@ const DevicesDialog = ({
               />
             )}
           </Grid>
-          {writeable && (
+          {writeable && helperText && (
             <Grid>
-              <FormHelperText>{showHelperText(editItem)}</FormHelperText>
+              <FormHelperText>{helperText}</FormHelperText>
             </Grid>
           )}
         </Grid>
@@ -191,7 +194,7 @@ const DevicesDialog = ({
             <Button
               startIcon={<CancelIcon />}
               variant="outlined"
-              onClick={close}
+              onClick={onClose}
               color="secondary"
             >
               {LL.CANCEL()}
@@ -202,7 +205,7 @@ const DevicesDialog = ({
               onClick={save}
               color="primary"
             >
-              {selectedItem.v === '' && selectedItem.c ? LL.EXECUTE() : LL.UPDATE()}
+              {buttonLabel}
             </Button>
             {progress && (
               <CircularProgress
@@ -217,7 +220,7 @@ const DevicesDialog = ({
             )}
           </Box>
         ) : (
-          <Button variant="outlined" onClick={close} color="secondary">
+          <Button variant="outlined" onClick={onClose} color="secondary">
             {LL.CLOSE()}
           </Button>
         )}

interface/src/app/main/EntityMaskToggle.tsx

@@ -9,33 +9,42 @@ interface EntityMaskToggleProps {
   de: DeviceEntity;
 }
 
-const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
-  const getMaskNumber = (newMask: string[]) => {
-    let new_mask = 0;
-    for (const entry of newMask) {
-      new_mask |= Number(entry);
-    }
-    return new_mask;
-  };
+const MASK_VALUES = [
+  DeviceEntityMask.DV_WEB_EXCLUDE, // 1
+  DeviceEntityMask.DV_API_MQTT_EXCLUDE, // 2
+  DeviceEntityMask.DV_READONLY, // 4
+  DeviceEntityMask.DV_FAVORITE, // 8
+  DeviceEntityMask.DV_DELETED // 128
+];
 
-  const getMaskString = (m: number) => {
-    const new_masks: string[] = [];
-    if ((m & 1) === 1) {
-      new_masks.push('1');
+const getMaskNumber = (newMask: string[]): number =>
+  newMask.reduce((mask, entry) => mask | Number(entry), 0);
+
+const getMaskString = (mask: number): string[] =>
+  MASK_VALUES.filter((value) => (mask & value) === value).map((value) =>
+    String(value)
+  );
+
+const hasMask = (mask: number, flag: number): boolean => (mask & flag) === flag;
+
+const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
+  const handleChange = (_event: unknown, mask: string[]) => {
+    const newMask = getMaskNumber(mask);
+    const updatedDe = { ...de };
+
+    // If entity has no name and is set to readonly, also exclude from web
+    if (updatedDe.n === '' && hasMask(newMask, DeviceEntityMask.DV_READONLY)) {
+      updatedDe.m = newMask | DeviceEntityMask.DV_WEB_EXCLUDE;
+    } else {
+      updatedDe.m = newMask;
     }
-    if ((m & 2) === 2) {
-      new_masks.push('2');
+
+    // If excluded from web, cannot be favorite
+    if (hasMask(updatedDe.m, DeviceEntityMask.DV_WEB_EXCLUDE)) {
+      updatedDe.m = updatedDe.m & ~DeviceEntityMask.DV_FAVORITE;
     }
-    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;
+
+    onUpdate(updatedDe);
   };
 
   return (
@@ -43,57 +52,59 @@ const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
       size="small"
       color="secondary"
       value={getMaskString(de.m)}
-      onChange={(_event, mask: string[]) => {
-        de.m = getMaskNumber(mask);
-        if (de.n === '' && de.m & DeviceEntityMask.DV_READONLY) {
-          de.m = de.m | DeviceEntityMask.DV_WEB_EXCLUDE;
-        }
-        if (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) {
-          de.m = de.m & ~DeviceEntityMask.DV_FAVORITE;
-        }
-        onUpdate(de);
-      }}
+      onChange={handleChange}
+    >
+      <ToggleButton
+        value="8"
+        disabled={
+          hasMask(
+            de.m,
+            DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_DELETED
+          ) || de.n === undefined
+        }
       >
-      <ToggleButton value="8" disabled={(de.m & 0x81) !== 0 || de.n === undefined}>
         <OptionIcon
           type="favorite"
-          isSet={
-            (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE
-          }
+          isSet={hasMask(de.m, DeviceEntityMask.DV_FAVORITE)}
         />
       </ToggleButton>
-      <ToggleButton value="4" disabled={!de.w || (de.m & 0x83) >= 3}>
+      <ToggleButton
+        value="4"
+        disabled={
+          !de.w ||
+          hasMask(
+            de.m,
+            DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_FAVORITE
+          )
+        }
+      >
         <OptionIcon
           type="readonly"
-          isSet={
-            (de.m & DeviceEntityMask.DV_READONLY) === DeviceEntityMask.DV_READONLY
-          }
+          isSet={hasMask(de.m, DeviceEntityMask.DV_READONLY)}
         />
       </ToggleButton>
-      <ToggleButton value="2" disabled={de.n === '' || (de.m & 0x80) !== 0}>
+      <ToggleButton
+        value="2"
+        disabled={de.n === '' || hasMask(de.m, DeviceEntityMask.DV_DELETED)}
+      >
         <OptionIcon
           type="api_mqtt_exclude"
-          isSet={
-            (de.m & DeviceEntityMask.DV_API_MQTT_EXCLUDE) ===
-            DeviceEntityMask.DV_API_MQTT_EXCLUDE
-          }
+          isSet={hasMask(de.m, DeviceEntityMask.DV_API_MQTT_EXCLUDE)}
         />
       </ToggleButton>
-      <ToggleButton value="1" disabled={de.n === undefined || (de.m & 0x80) !== 0}>
+      <ToggleButton
+        value="1"
+        disabled={de.n === undefined || hasMask(de.m, DeviceEntityMask.DV_DELETED)}
+      >
         <OptionIcon
           type="web_exclude"
-          isSet={
-            (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) ===
-            DeviceEntityMask.DV_WEB_EXCLUDE
-          }
+          isSet={hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE)}
         />
       </ToggleButton>
       <ToggleButton value="128">
         <OptionIcon
           type="deleted"
-          isSet={
-            (de.m & DeviceEntityMask.DV_DELETED) === DeviceEntityMask.DV_DELETED
-          }
+          isSet={hasMask(de.m, DeviceEntityMask.DV_DELETED)}
         />
       </ToggleButton>
     </ToggleButtonGroup>

interface/src/app/main/Help.tsx

@@ -1,4 +1,5 @@
-import { useContext, useState } from 'react';
+import { memo, useContext, useState } from 'react';
+import type { ReactElement } from 'react';
 import { toast } from 'react-toastify';
 
 import CommentIcon from '@mui/icons-material/CommentTwoTone';
@@ -10,6 +11,7 @@ import {
   Box,
   Button,
   Divider,
+  Grid,
   Link,
   List,
   ListItem,
@@ -19,6 +21,7 @@ import {
   Stack,
   Typography
 } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
 
 import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
@@ -29,26 +32,57 @@ import { saveFile } from 'utils';
 import { API, callAction } from '../../api/app';
 import type { APIcall } from './types';
 
-const Help = () => {
+interface HelpLink {
+  href: string;
+  icon: ReactElement;
+  label: () => string;
+}
+
+interface CustomSupport {
+  img_url: string | null;
+  html: string | null;
+}
+
+const DEFAULT_IMAGE_URL = 'https://emsesp.org/media/images/installer.jpeg';
+
+const SUPPORT_BOX_STYLES: SxProps<Theme> = {
+  borderRadius: 3,
+  border: '1px solid lightblue',
+  justifyContent: 'space-evenly',
+  alignItems: 'center'
+};
+
+const IMAGE_STYLES: SxProps<Theme> = {
+  maxHeight: { xs: 100, md: 250 }
+};
+
+const AVATAR_STYLES: SxProps<Theme> = {
+  bgcolor: '#72caf9'
+};
+
+const SYSTEM_INFO_API: APIcall = { device: 'system', cmd: 'info', id: 0 };
+
+const HelpComponent = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.HELP());
 
   const { me } = useContext(AuthenticatedContext);
 
-  const [customSupportIMG, setCustomSupportIMG] = useState<string | null>(null);
-  const [customSupportHTML, setCustomSupportHTML] = useState<string | null>(null);
-  const [notFound, setNotFound] = useState<boolean>(false);
+  const [customSupport, setCustomSupport] = useState<CustomSupport>({
+    img_url: null,
+    html: null
+  });
+  const [imgError, setImgError] = useState<boolean>(false);
 
-  useRequest(() => callAction({ action: 'getCustomSupport' })).onSuccess((event) => {
-    if (event && event.data && Object.keys(event.data).length !== 0) {
-      const data = (event.data as { Support: { img_url?: string; html?: string[] } })
-        .Support;
-      if (data.img_url) {
-        setCustomSupportIMG(data.img_url);
-      }
-      if (data.html) {
-        setCustomSupportHTML(data.html.join('<br/>'));
-      }
+  useRequest(callAction({ action: 'getCustomSupport' })).onSuccess((event) => {
+    if (event?.data && Object.keys(event.data).length !== 0) {
+      const { Support } = event.data as {
+        Support: { img_url?: string; html?: string[] };
+      };
+      setCustomSupport({
+        img_url: Support.img_url || null,
+        html: Support.html?.join('<br/>') || null
+      });
     }
   });
 
@@ -63,110 +97,85 @@ const Help = () => {
       toast.error(String(error.error?.message || 'An error occurred'));
     });
 
+  const helpLinks: HelpLink[] = [
+    {
+      href: 'https://emsesp.org',
+      icon: <MenuBookIcon />,
+      label: () => LL.HELP_INFORMATION_1()
+    },
+    {
+      href: 'https://discord.gg/GP9DPSgeJq',
+      icon: <CommentIcon />,
+      label: () => LL.HELP_INFORMATION_2()
+    },
+    {
+      href: 'https://github.com/emsesp/EMS-ESP32/issues/new/choose',
+      icon: <GitHubIcon />,
+      label: () => LL.HELP_INFORMATION_3()
+    }
+  ];
+
+  const imageSrc =
+    imgError || !customSupport.img_url ? DEFAULT_IMAGE_URL : customSupport.img_url;
+
   return (
     <SectionContent>
-      {customSupportHTML && (
+      {customSupport.html && (
         <Stack
-          padding={1}
-          mb={2}
           direction="row"
           divider={<Divider orientation="vertical" flexItem />}
-          sx={{
-            borderRadius: 3,
-            border: '1px solid lightblue',
-            justifyContent: 'space-evenly',
-            alignItems: 'center'
-          }}
+          sx={{ padding: 1, mb: 2, ...SUPPORT_BOX_STYLES }}
         >
           <Typography variant="subtitle1">
-            <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
+            <div dangerouslySetInnerHTML={{ __html: customSupport.html }} />
           </Typography>
           <Box
             component="img"
             referrerPolicy="no-referrer"
-            sx={{
-              maxHeight: { xs: 100, md: 250 }
-            }}
-            onError={() => setNotFound(true)}
-            src={
-              notFound
-                ? ''
-                : customSupportIMG ||
-                  'https://docs.emsesp.org/_media/images/installer.jpeg'
-            }
+            sx={IMAGE_STYLES}
+            onError={() => setImgError(true)}
+            src={imageSrc}
           />
         </Stack>
       )}
 
-      {me.admin && (
+      {me?.admin && (
         <List>
-          <ListItem>
+          {helpLinks.map(({ href, icon, label }) => (
+            <ListItem key={href}>
               <ListItemButton
                 component="a"
                 target="_blank"
                 rel="noreferrer"
-              href="https://docs.emsesp.org"
+                href={href}
               >
                 <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <MenuBookIcon />
-                </Avatar>
+                  <Avatar sx={AVATAR_STYLES}>{icon}</Avatar>
                 </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_1()} />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton
-              component="a"
-              target="_blank"
-              rel="noreferrer"
-              href="https://discord.gg/3J3GgnzpyT"
-            >
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <CommentIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_2()} />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton
-              component="a"
-              target="_blank"
-              rel="noreferrer"
-              href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
-            >
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <GitHubIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_3()} />
+                <ListItemText primary={label()} />
               </ListItemButton>
             </ListItem>
+          ))}
         </List>
       )}
 
-      <Box p={2} color="warning.main">
-        <Typography mb={1} variant="body1">
-          {LL.HELP_INFORMATION_4()}.
+      <Grid container spacing={2} sx={{ mt: 2, alignItems: 'center' }}>
+        <Typography sx={{ mb: 1 }} color="warning" variant="body1">
+          {LL.HELP_INFORMATION_4()}:
         </Typography>
         <Button
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-          onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
+          onClick={() => void sendAPI(SYSTEM_INFO_API)}
         >
           {LL.SUPPORT_INFORMATION(0)}
         </Button>
-      </Box>
+      </Grid>
 
       <Divider sx={{ mt: 4 }} />
 
-      <Typography color="white" variant="subtitle1" align="center" mt={1}>
+      <Typography color="white" variant="subtitle1" align="center" sx={{ mt: 1 }}>
         &copy;&nbsp;
         <Link
           target="_blank"
@@ -174,11 +183,13 @@ const Help = () => {
           href="https://emsesp.org"
           color="primary"
         >
-          {'emsesp.org'}
+          emsesp.org
         </Link>
       </Typography>
     </SectionContent>
   );
 };
 
+const Help = memo(HelpComponent);
+
 export default Help;

interface/src/app/main/Modules.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { memo, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -31,6 +31,19 @@ import { readModules, writeModules } from '../../api/app';
 import ModulesDialog from './ModulesDialog';
 import type { ModuleItem } from './types';
 
+const PENDING_COLOR = 'red';
+const ACTIVATED_COLOR = '#00FF7F';
+
+const hasModulesChanged = (mi: ModuleItem): boolean =>
+  mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
+
+const ColorStatus = memo(({ status }: { status: number }) => {
+  if (status === 1) {
+    return <div style={{ color: PENDING_COLOR }}>Pending Activation</div>;
+  }
+  return <div style={{ color: ACTIVATED_COLOR }}>Activated</div>;
+});
+
 const Modules = () => {
   const { LL } = useI18nContext();
   const [numChanges, setNumChanges] = useState<number>(0);
@@ -102,15 +115,25 @@ const Modules = () => {
     setDialogOpen(false);
   };
 
+  const updateModuleItem = (updatedItem: ModuleItem) => {
+    void updateState(readModules(), (data: ModuleItem[]) => {
+      const new_data = data.map((mi) =>
+        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
+      );
+      setNumChanges(new_data.filter(hasModulesChanged).length);
+      return new_data;
+    });
+  };
+
   const onDialogSave = (updatedItem: ModuleItem) => {
     setDialogOpen(false);
     updateModuleItem(updatedItem);
   };
 
-  const editModuleItem = useCallback((mi: ModuleItem) => {
+  const editModuleItem = (mi: ModuleItem) => {
     setSelectedModuleItem(mi);
     setDialogOpen(true);
-  }, []);
+  };
 
   const onCancel = async () => {
     await fetchModules().then(() => {
@@ -118,21 +141,8 @@ const Modules = () => {
     });
   };
 
-  function hasModulesChanged(mi: ModuleItem) {
-    return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
-  }
-
-  const updateModuleItem = (updatedItem: ModuleItem) => {
-    void updateState(readModules(), (data: ModuleItem[]) => {
-      const new_data = data.map((mi) =>
-        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
-      );
-      setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
-      return new_data;
-    });
-  };
-
   const saveModules = async () => {
+    try {
       await Promise.all(
         modules.map((condensed_mi: ModuleItem) =>
           updateModules({
@@ -141,17 +151,14 @@ const Modules = () => {
             license: condensed_mi.license
           })
         )
-    )
-      .then(() => {
+      );
       toast.success(LL.MODULES_UPDATED());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(async () => {
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+    } finally {
       await fetchModules();
       setNumChanges(0);
-      });
+    }
   };
 
   const renderContent = () => {
@@ -169,18 +176,11 @@ const Modules = () => {
       );
     }
 
-    const colorStatus = (status: number) => {
-      if (status === 1) {
-        return <div style={{ color: 'red' }}>Pending Activation</div>;
-      }
-      return <div style={{ color: '#00FF7F' }}>Activated</div>;
-    };
-
     return (
       <>
-        <Box mb={2} color="warning.main">
-          <Typography variant="body1">{LL.MODULES_DESCRIPTION()}.</Typography>
-        </Box>
+        <Typography sx={{ mb: 2 }} color="warning" variant="body1">
+          {LL.MODULES_DESCRIPTION()}.
+        </Typography>
         <Table
           data={{ nodes: modules }}
           theme={modules_theme}
@@ -218,7 +218,9 @@ const Modules = () => {
                     <Cell>{mi.author}</Cell>
                     <Cell>{mi.version}</Cell>
                     <Cell>{mi.message}</Cell>
-                    <Cell>{colorStatus(mi.status)}</Cell>
+                    <Cell>
+                      <ColorStatus status={mi.status} />
+                    </Cell>
                   </Row>
                 ))}
               </Body>
@@ -226,8 +228,8 @@ const Modules = () => {
           )}
         </Table>
 
-        <Box mt={1} display="flex" flexWrap="wrap">
-          <Box flexGrow={1}>
+        <Box sx={{ mt: 1, display: 'flex', flexWrap: 'wrap' }}>
+          <Box sx={{ flexGrow: 1 }}>
             {numChanges !== 0 && (
               <ButtonRow>
                 <Button

interface/src/app/main/ModulesDialog.tsx

@@ -37,25 +37,26 @@ const ModulesDialog = ({
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<ModuleItem>(selectedItem);
 
-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = updateValue(
+    setEditItem as unknown as React.Dispatch<
+      React.SetStateAction<Record<string, unknown>>
+    >
+  );
 
+  // Sync form state when dialog opens or selected item changes
   useEffect(() => {
     if (open) {
       setEditItem(selectedItem);
     }
   }, [open, selectedItem]);
 
-  const close = () => {
-    onClose();
-  };
-
-  const save = () => {
+  const handleSave = () => {
     onSave(editItem);
   };
 
   return (
     <Dialog sx={dialogStyle} fullWidth maxWidth="xs" open={open} onClose={onClose}>
-      <DialogTitle>{LL.EDIT() + ' ' + editItem.key}</DialogTitle>
+      <DialogTitle>{`${LL.EDIT()} ${editItem.key}`}</DialogTitle>
       <DialogContent dividers>
         <Grid container>
           <BlockFormControlLabel
@@ -69,7 +70,7 @@ const ModulesDialog = ({
             label="Enabled"
           />
         </Grid>
-        <Box mt={2} mb={1}>
+        <Box sx={{ mt: 2, mb: 1 }}>
           <TextField
             name="license"
             label="License Key"
@@ -85,7 +86,7 @@ const ModulesDialog = ({
         <Button
           startIcon={<CancelIcon />}
           variant="outlined"
-          onClick={close}
+          onClick={onClose}
           color="secondary"
         >
           {LL.CANCEL()}
@@ -93,7 +94,7 @@ const ModulesDialog = ({
         <Button
           startIcon={<DoneIcon />}
           variant="outlined"
-          onClick={save}
+          onClick={handleSave}
           color="primary"
         >
           {LL.UPDATE()}

interface/src/app/main/OptionIcon.tsx

@@ -1,42 +1,50 @@
+import { memo } from 'react';
+
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined';
 import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined';
 import StarIcon from '@mui/icons-material/Star';
-import StarOutlineIcon from '@mui/icons-material/StarOutline';
+import StarOutlineIcon from '@mui/icons-material/StarOutlined';
 import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import type { SvgIconProps } from '@mui/material';
 
-type OptionType =
+export type OptionType =
   | 'deleted'
   | 'readonly'
   | 'web_exclude'
   | 'api_mqtt_exclude'
   | 'favorite';
 
-const OPTION_ICONS: {
-  [type in OptionType]: [
+type IconPair = [
   React.ComponentType<SvgIconProps>,
   React.ComponentType<SvgIconProps>
 ];
-} = {
+
+const OPTION_ICONS: Record<OptionType, IconPair> = {
   deleted: [DeleteForeverIcon, DeleteOutlineIcon],
   readonly: [EditOffOutlinedIcon, EditOutlinedIcon],
   web_exclude: [VisibilityOffOutlinedIcon, VisibilityOutlinedIcon],
   api_mqtt_exclude: [CommentsDisabledOutlinedIcon, InsertCommentOutlinedIcon],
   favorite: [StarIcon, StarOutlineIcon]
+} as const;
+
+const ICON_SIZE = 16;
+const ICON_SX = { fontSize: ICON_SIZE, verticalAlign: 'middle' } as const;
+
+export interface OptionIconProps {
+  readonly type: OptionType;
+  readonly isSet: boolean;
+}
+
+const OptionIcon = ({ type, isSet }: OptionIconProps) => {
+  const [SetIcon, UnsetIcon] = OPTION_ICONS[type];
+  const Icon = isSet ? SetIcon : UnsetIcon;
+
+  return <Icon {...(isSet && { color: 'primary' })} sx={ICON_SX} />;
 };
 
-const OptionIcon = ({ type, isSet }: { type: OptionType; isSet: boolean }) => {
-  const Icon = OPTION_ICONS[type][isSet ? 0 : 1];
-  return isSet ? (
-    <Icon color="primary" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
-  ) : (
-    <Icon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
-  );
-};
-
-export default OptionIcon;
+export default memo(OptionIcon);

interface/src/app/main/Scheduler.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';
 
@@ -35,64 +35,31 @@ import { ScheduleFlag } from './types';
 import type { Schedule, ScheduleItem } from './types';
 import { schedulerItemValidation } from './validators';
 
-const Scheduler = () => {
-  const { LL, locale } = useI18nContext();
-  const [numChanges, setNumChanges] = useState<number>(0);
-  const blocker = useBlocker(numChanges !== 0);
-  const [selectedScheduleItem, setSelectedScheduleItem] = useState<ScheduleItem>();
-  const [dow, setDow] = useState<string[]>([]);
-  const [creating, setCreating] = useState<boolean>(false);
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+// Constants
+const INTERVAL_DELAY = 30000; // 30 seconds
+const MIN_ID = -100;
+const MAX_ID = 100;
+const ICON_SIZE = 16;
+const SCHEDULE_FLAG_THRESHOLD = 127;
+const FLAG_ALL_DAYS = 127;
+const REFERENCE_YEAR = 2017;
+const REFERENCE_MONTH = '01';
+const LOG_2 = Math.log(2);
 
-  useLayoutTitle(LL.SCHEDULER());
+// Days of week starting from Monday (1-7)
+const WEEK_DAYS = [1, 2, 3, 4, 5, 6, 7] as const;
 
-  const {
-    data: schedule,
-    send: fetchSchedule,
-    error
-  } = useRequest(readSchedule, {
-    initialData: []
-  });
+const DEFAULT_SCHEDULE_ITEM: Omit<ScheduleItem, 'id' | 'o_id'> = {
+  active: false,
+  deleted: false,
+  flags: FLAG_ALL_DAYS,
+  time: '',
+  cmd: '',
+  value: '',
+  name: ''
+};
 
-  const { send: updateSchedule } = useRequest(
-    (data: Schedule) => writeSchedule(data),
-    {
-      immediate: false
-    }
-  );
-
-  function hasScheduleChanged(si: ScheduleItem) {
-    return (
-      si.id !== si.o_id ||
-      (si.name || '') !== (si.o_name || '') ||
-      si.active !== si.o_active ||
-      si.deleted !== si.o_deleted ||
-      si.flags !== si.o_flags ||
-      si.time !== si.o_time ||
-      si.cmd !== si.o_cmd ||
-      si.value !== si.o_value
-    );
-  }
-
-  useInterval(() => {
-    if (numChanges === 0) {
-      void fetchSchedule();
-    }
-  });
-
-  useEffect(() => {
-    const formatter = new Intl.DateTimeFormat(locale, {
-      weekday: 'short',
-      timeZone: 'UTC'
-    });
-    const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
-      const dd = day < 10 ? `0${day}` : day;
-      return new Date(`2017-01-${dd}T00:00:00+00:00`);
-    });
-    setDow(days.map((date) => formatter.format(date)));
-  }, [locale]);
-
-  const schedule_theme = useTheme({
+const scheduleTheme = {
   Table: `
     --data-table-library_grid-template-columns: 36px 210px 100px 192px repeat(1, minmax(100px, 1fr)) 160px;
   `,
@@ -130,9 +97,78 @@ const Scheduler = () => {
       background-color: #177ac9;
     }
   `
+};
+
+const scheduleTypeLabels: Record<number, string> = {
+  [ScheduleFlag.SCHEDULE_IMMEDIATE]: 'Immediate',
+  [ScheduleFlag.SCHEDULE_TIMER]: 'Timer',
+  [ScheduleFlag.SCHEDULE_CONDITION]: 'Condition',
+  [ScheduleFlag.SCHEDULE_ONCHANGE]: 'On Change'
+};
+
+const Scheduler = () => {
+  const { LL, locale } = useI18nContext();
+  const [numChanges, setNumChanges] = useState<number>(0);
+  const blocker = useBlocker(numChanges !== 0);
+  const [selectedScheduleItem, setSelectedScheduleItem] = useState<ScheduleItem>();
+  const [dow, setDow] = useState<string[]>([]);
+  const [creating, setCreating] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  useLayoutTitle(LL.SCHEDULER());
+
+  const {
+    data: schedule,
+    send: fetchSchedule,
+    error
+  } = useRequest(readSchedule, {
+    initialData: []
   });
 
+  const { send: updateSchedule } = useRequest(
+    (data: Schedule) => writeSchedule(data),
+    {
+      immediate: false
+    }
+  );
+
+  const hasScheduleChanged = (si: ScheduleItem) => {
+    return (
+      si.id !== si.o_id ||
+      (si.name || '') !== (si.o_name || '') ||
+      si.active !== si.o_active ||
+      si.deleted !== si.o_deleted ||
+      si.flags !== si.o_flags ||
+      si.time !== si.o_time ||
+      si.cmd !== si.o_cmd ||
+      si.value !== si.o_value
+    );
+  };
+
+  useInterval(() => {
+    if (numChanges === 0) {
+      void fetchSchedule();
+    }
+  }, INTERVAL_DELAY);
+
+  useEffect(() => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      weekday: 'short',
+      timeZone: 'UTC'
+    });
+    const days = WEEK_DAYS.map((day) => {
+      const dayStr = String(day).padStart(2, '0');
+      return new Date(
+        `${REFERENCE_YEAR}-${REFERENCE_MONTH}-${dayStr}T00:00:00+00:00`
+      );
+    });
+    setDow(days.map((date) => formatter.format(date)));
+  }, [locale]);
+
+  const schedule_theme = useTheme(scheduleTheme);
+
   const saveSchedule = async () => {
+    try {
       await updateSchedule({
         schedule: schedule
           .filter((si: ScheduleItem) => !si.deleted)
@@ -145,27 +181,25 @@ const Scheduler = () => {
             value: condensed_si.value,
             name: condensed_si.name
           }))
-    })
-      .then(() => {
+      });
       toast.success(LL.SCHEDULE_UPDATED());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(async () => {
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(message);
+    } finally {
       await fetchSchedule();
       setNumChanges(0);
-      });
+    }
   };
 
-  const editScheduleItem = useCallback((si: ScheduleItem) => {
+  const editScheduleItem = (si: ScheduleItem) => {
     setCreating(false);
     setSelectedScheduleItem(si);
     setDialogOpen(true);
     if (si.o_name === undefined) {
       si.o_name = si.name;
     }
-  }, []);
+  };
 
   const onDialogClose = () => {
     setDialogOpen(false);
@@ -181,10 +215,7 @@ const Scheduler = () => {
     setDialogOpen(false);
     void updateState(readSchedule(), (data: ScheduleItem[]) => {
       const new_data = creating
-        ? [
-            ...data.filter((si) => creating || si.o_id !== updatedItem.o_id),
-            updatedItem
-          ]
+        ? [...data, updatedItem]
         : data.map((si) =>
             si.id === updatedItem.id ? { ...si, ...updatedItem } : si
           );
@@ -197,19 +228,46 @@ const Scheduler = () => {
 
   const addScheduleItem = () => {
     setCreating(true);
-    setSelectedScheduleItem({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
-      active: false,
-      deleted: false,
-      flags: ScheduleFlag.SCHEDULE_DAY,
-      time: '',
-      cmd: '',
-      value: '',
-      name: ''
-    });
+    const newItem: ScheduleItem = {
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      ...DEFAULT_SCHEDULE_ITEM
+    };
+    setSelectedScheduleItem(newItem);
     setDialogOpen(true);
   };
 
+  const filteredAndSortedSchedule = schedule
+    .filter((si: ScheduleItem) => !si.deleted)
+    .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags);
+
+  const dayBox = (si: ScheduleItem, flag: number) => {
+    const dayIndex = Math.log(flag) / LOG_2;
+    const isActive = (si.flags & flag) === flag;
+
+    return (
+      <>
+        <Box>
+          <Typography sx={{ fontSize: 11 }} color={isActive ? 'primary' : 'grey'}>
+            {dow[dayIndex]}
+          </Typography>
+        </Box>
+        <Divider orientation="vertical" flexItem />
+      </>
+    );
+  };
+
+  const scheduleType = (si: ScheduleItem) => {
+    const label = scheduleTypeLabels[si.flags];
+
+    return (
+      <Box>
+        <Typography sx={{ fontSize: 11 }} color="primary">
+          {label || ''}
+        </Typography>
+      </Box>
+    );
+  };
+
   const renderSchedule = () => {
     if (!schedule) {
       return (
@@ -217,45 +275,9 @@ const Scheduler = () => {
       );
     }
 
-    const dayBox = (si: ScheduleItem, flag: number) => (
-      <>
-        <Box>
-          <Typography
-            sx={{ fontSize: 11 }}
-            color={(si.flags & flag) === flag ? 'primary' : 'grey'}
-          >
-            {dow[Math.log(flag) / Math.log(2)]}
-          </Typography>
-        </Box>
-        <Divider orientation="vertical" flexItem />
-      </>
-    );
-
-    const scheduleType = (si: ScheduleItem) => (
-      <Box>
-        <Typography sx={{ fontSize: 11 }} color="primary">
-          {si.flags === ScheduleFlag.SCHEDULE_IMMEDIATE ? (
-            <>Immediate</>
-          ) : si.flags === ScheduleFlag.SCHEDULE_TIMER ? (
-            <>Timer</>
-          ) : si.flags === ScheduleFlag.SCHEDULE_CONDITION ? (
-            <>Condition</>
-          ) : si.flags === ScheduleFlag.SCHEDULE_ONCHANGE ? (
-            <>On Change</>
-          ) : (
-            <></>
-          )}
-        </Typography>
-      </Box>
-    );
-
     return (
       <Table
-        data={{
-          nodes: schedule
-            .filter((si: ScheduleItem) => !si.deleted)
-            .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags)
-        }}
+        data={{ nodes: filteredAndSortedSchedule }}
         theme={schedule_theme}
         layout={{ custom: true }}
       >
@@ -275,22 +297,15 @@ const Scheduler = () => {
               {tableList.map((si: ScheduleItem) => (
                 <Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
                   <Cell stiff>
-                    {si.active ? (
                     <CircleIcon
-                        color="success"
-                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                      color={si.active ? 'success' : 'error'}
+                      sx={{ fontSize: ICON_SIZE, verticalAlign: 'middle' }}
                     />
-                    ) : (
-                      <CircleIcon
-                        color="error"
-                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
-                      />
-                    )}
                   </Cell>
                   <Cell stiff>
                     <Stack spacing={0.5} direction="row">
                       <Divider orientation="vertical" flexItem />
-                      {si.flags > 127 ? (
+                      {si.flags > SCHEDULE_FLAG_THRESHOLD ? (
                         scheduleType(si)
                       ) : (
                         <>
@@ -321,9 +336,9 @@ const Scheduler = () => {
   return (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      <Box mb={2} color="warning.main">
-        <Typography variant="body1">{LL.SCHEDULER_HELP_1()}.</Typography>
-      </Box>
+      <Typography sx={{ mb: 2 }} color="warning" variant="body1">
+        {LL.SCHEDULER_HELP_1()}.
+      </Typography>
       {renderSchedule()}
 
       {selectedScheduleItem && (
@@ -338,8 +353,8 @@ const Scheduler = () => {
         />
       )}
 
-      <Box display="flex" flexWrap="wrap">
-        <Box flexGrow={1}>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Box sx={{ flexGrow: 1 }}>
           {numChanges !== 0 && (
             <ButtonRow>
               <Button
@@ -361,7 +376,7 @@ const Scheduler = () => {
             </ButtonRow>
           )}
         </Box>
-        <Box flexWrap="nowrap" whiteSpace="nowrap">
+        <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
           <ButtonRow>
             <Button
               startIcon={<AddIcon />}

interface/src/app/main/SchedulerDialog.tsx

@@ -4,7 +4,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
 import {
   Box,
   Button,
@@ -26,11 +26,46 @@ import type { ValidateFieldsError } from 'async-validator';
 import { BlockFormControlLabel, ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { updateValue } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 
 import { ScheduleFlag } from './types';
 import type { ScheduleItem } from './types';
 
+// Constants
+const FLAG_MASK_127 = 127;
+const SCHEDULE_TYPE_THRESHOLD = 127;
+const FLAG_ALL_DAYS = 127;
+const DEFAULT_TIME = '00:00';
+const TYPOGRAPHY_FONT_SIZE = 10;
+
+// Day of week flag configuration (static, defined outside component)
+const DAY_FLAGS = [
+  { value: '2', flag: ScheduleFlag.SCHEDULE_MON },
+  { value: '4', flag: ScheduleFlag.SCHEDULE_TUE },
+  { value: '8', flag: ScheduleFlag.SCHEDULE_WED },
+  { value: '16', flag: ScheduleFlag.SCHEDULE_THU },
+  { value: '32', flag: ScheduleFlag.SCHEDULE_FRI },
+  { value: '64', flag: ScheduleFlag.SCHEDULE_SAT },
+  { value: '1', flag: ScheduleFlag.SCHEDULE_SUN }
+] as const;
+
+// Day of week flag values array (static)
+const FLAG_VALUES = [
+  ScheduleFlag.SCHEDULE_SUN,
+  ScheduleFlag.SCHEDULE_MON,
+  ScheduleFlag.SCHEDULE_TUE,
+  ScheduleFlag.SCHEDULE_WED,
+  ScheduleFlag.SCHEDULE_THU,
+  ScheduleFlag.SCHEDULE_FRI,
+  ScheduleFlag.SCHEDULE_SAT
+] as const;
+
+const getFlagDOWnumber = (flags: string[]) =>
+  flags.reduce((acc, flag) => acc | Number(flag), 0) & FLAG_MASK_127;
+
+const getFlagDOWstring = (f: number) =>
+  FLAG_VALUES.filter((flag) => (f & flag) === flag).map((flag) => String(flag));
+
 interface SchedulerDialogProps {
   open: boolean;
   creating: boolean;
@@ -53,96 +88,66 @@ const SchedulerDialog = ({
   const { LL } = useI18nContext();
   const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-
   const [scheduleType, setScheduleType] = useState<ScheduleFlag>();
 
-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = updateValue(
+    setEditItem as unknown as React.Dispatch<
+      React.SetStateAction<Record<string, unknown>>
+    >
+  );
 
   useEffect(() => {
     if (open) {
       setFieldErrors(undefined);
       setEditItem(selectedItem);
-      // set the flags based on type when page is loaded...
+      // Set the flags based on type when page is loaded:
       // 0-127 is day schedule
       // 128 is timer
       // 129 is on change
       // 130 is on condition
       // 132 is immediate
       setScheduleType(
-        selectedItem.flags < 128 ? ScheduleFlag.SCHEDULE_DAY : selectedItem.flags
+        selectedItem.flags <= SCHEDULE_TYPE_THRESHOLD
+          ? ScheduleFlag.SCHEDULE_DAY
+          : selectedItem.flags
       );
     }
   }, [open, selectedItem]);
 
-  const save = async () => {
+  const handleSave = async (itemToSave: ScheduleItem) => {
     try {
       setFieldErrors(undefined);
-      await validate(validator, editItem);
-      onSave(editItem);
+      await validate(validator, itemToSave);
+      onSave(itemToSave);
     } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
+  const save = async () => {
+    await handleSave(editItem);
+  };
+
   const saveandactivate = async () => {
-    editItem.active = true;
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, editItem);
-      onSave(editItem);
-    } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
-    }
+    await handleSave({ ...editItem, active: true });
   };
 
   const remove = () => {
-    editItem.deleted = true;
-    onSave(editItem);
+    onSave({ ...editItem, deleted: true });
   };
 
-  const getFlagDOWnumber = (newFlag: string[]) => {
-    let new_flag = 0;
-    for (const entry of newFlag) {
-      new_flag |= Number(entry);
-    }
-    return new_flag & 127;
-  };
-
-  const getFlagDOWstring = (f: number) => {
-    const new_flags: string[] = [];
-    if ((f & 129) === 1) {
-      new_flags.push('1');
-    }
-    if ((f & 130) === 2) {
-      new_flags.push('2');
-    }
-    if ((f & 4) === 4) {
-      new_flags.push('4');
-    }
-    if ((f & 8) === 8) {
-      new_flags.push('8');
-    }
-    if ((f & 16) === 16) {
-      new_flags.push('16');
-    }
-    if ((f & 32) === 32) {
-      new_flags.push('32');
-    }
-    if ((f & 64) === 64) {
-      new_flags.push('64');
-    }
-
-    return new_flags;
-  };
-
-  const showDOW = (si: ScheduleItem, flag: number) => (
+  const DayOfWeekButton = (flag: number) => {
+    const dayIndex = Math.log2(flag);
+    const isSelected = (editItem.flags & flag) === flag;
+    return (
       <Typography
-      sx={{ fontSize: 10 }}
-      color={(si.flags & flag) === flag ? 'primary' : 'grey'}
+        sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+        color={isSelected ? 'primary' : 'grey'}
       >
-      {dow[Math.log(flag) / Math.log(2)]}
+        {dow[dayIndex]}
       </Typography>
     );
+  };
 
   const handleClose = (
     _event: React.SyntheticEvent,
@@ -153,10 +158,56 @@ const SchedulerDialog = ({
     }
   };
 
+  const handleScheduleTypeChange = (
+    _event: React.SyntheticEvent<HTMLElement>,
+    flag: ScheduleFlag | null
+  ) => {
+    if (flag !== null) {
+      setFieldErrors(undefined); // clear any validation errors
+      setScheduleType(flag);
+      // wipe the time field when changing the schedule type
+      // set the flags based on type
+      const newFlags = flag === ScheduleFlag.SCHEDULE_DAY ? FLAG_ALL_DAYS : flag;
+      setEditItem((prev) => ({ ...prev, time: '', flags: newFlags }));
+    }
+  };
+
+  const handleDOWChange = (
+    _event: React.SyntheticEvent<HTMLElement>,
+    flags: string[]
+  ) => {
+    const newFlags =
+      getFlagDOWnumber(flags) === 0 ? FLAG_ALL_DAYS : getFlagDOWnumber(flags);
+    setEditItem((prev) => ({ ...prev, flags: newFlags }));
+  };
+
+  const isDaySchedule = scheduleType === ScheduleFlag.SCHEDULE_DAY;
+  const isTimerSchedule = scheduleType === ScheduleFlag.SCHEDULE_TIMER;
+  const isImmediateSchedule = scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE;
+  const needsTimeField = isDaySchedule || isTimerSchedule;
+
+  const dowFlags = getFlagDOWstring(editItem.flags);
+
+  const timeFieldValue = needsTimeField
+    ? editItem.time === ''
+      ? DEFAULT_TIME
+      : editItem.time
+    : editItem.time === DEFAULT_TIME
+      ? ''
+      : editItem.time;
+
+  const timeFieldLabel = (() => {
+    if (scheduleType === ScheduleFlag.SCHEDULE_TIMER) return LL.TIMER(1);
+    if (scheduleType === ScheduleFlag.SCHEDULE_CONDITION) return LL.CONDITION();
+    if (scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE) return LL.ONCHANGE();
+    if (scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE) return LL.IMMEDIATE();
+    return LL.TIME(1);
+  })();
+
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>
-        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
+        {creating ? `${LL.ADD(1)} ${LL.NEW(0)}` : LL.EDIT()}&nbsp;
         {LL.SCHEDULE(1)}
       </DialogTitle>
       <DialogContent dividers>
@@ -166,47 +217,27 @@ const SchedulerDialog = ({
           value={scheduleType}
           exclusive
           disabled={!creating}
-          onChange={(_event, flag: ScheduleFlag) => {
-            if (flag !== null) {
-              setFieldErrors(undefined); // clear any validation errors
-              setScheduleType(flag);
-              // wipe the time field when changing the schedule type
-              setEditItem({ ...editItem, time: '' });
-              // set the flags based on type
-              // 0-127 is day schedule
-              // 128 is timer
-              // 129 is on change
-              // 130 is on condition
-              // 132 is immediate
-              setEditItem(
-                flag === ScheduleFlag.SCHEDULE_DAY
-                  ? { ...editItem, flags: 0 }
-                  : { ...editItem, flags: flag }
-              );
-            }
-          }}
+          onChange={handleScheduleTypeChange}
         >
           <ToggleButton value={ScheduleFlag.SCHEDULE_DAY}>
             <Typography
-              sx={{ fontSize: 10 }}
-              color={scheduleType === ScheduleFlag.SCHEDULE_DAY ? 'primary' : 'grey'}
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              color={isDaySchedule ? 'primary' : 'grey'}
             >
               {LL.SCHEDULE(0)}
             </Typography>
           </ToggleButton>
           <ToggleButton value={ScheduleFlag.SCHEDULE_TIMER}>
             <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_TIMER ? 'primary' : 'grey'
-              }
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              color={isTimerSchedule ? 'primary' : 'grey'}
             >
               {LL.TIMER(0)}
             </Typography>
           </ToggleButton>
           <ToggleButton value={ScheduleFlag.SCHEDULE_ONCHANGE}>
             <Typography
-              sx={{ fontSize: 10 }}
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
               color={
                 scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE ? 'primary' : 'grey'
               }
@@ -216,7 +247,7 @@ const SchedulerDialog = ({
           </ToggleButton>
           <ToggleButton value={ScheduleFlag.SCHEDULE_CONDITION}>
             <Typography
-              sx={{ fontSize: 10 }}
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
               color={
                 scheduleType === ScheduleFlag.SCHEDULE_CONDITION ? 'primary' : 'grey'
               }
@@ -226,50 +257,30 @@ const SchedulerDialog = ({
           </ToggleButton>
           <ToggleButton value={ScheduleFlag.SCHEDULE_IMMEDIATE}>
             <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE ? 'primary' : 'grey'
-              }
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              color={isImmediateSchedule ? 'primary' : 'grey'}
             >
               {LL.IMMEDIATE()}
             </Typography>
           </ToggleButton>
         </ToggleButtonGroup>
 
-        {scheduleType === ScheduleFlag.SCHEDULE_DAY && (
+        {isDaySchedule && (
           <ToggleButtonGroup
             size="small"
             color="secondary"
-            value={getFlagDOWstring(editItem.flags)}
-            onChange={(_event, flag: string[]) => {
-              setEditItem({ ...editItem, flags: getFlagDOWnumber(flag) });
-            }}
+            value={dowFlags}
+            onChange={handleDOWChange}
           >
-            <ToggleButton value="2">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_MON)}
-            </ToggleButton>
-            <ToggleButton value="4">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_TUE)}
-            </ToggleButton>
-            <ToggleButton value="8">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_WED)}
-            </ToggleButton>
-            <ToggleButton value="16">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_THU)}
-            </ToggleButton>
-            <ToggleButton value="32">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_FRI)}
-            </ToggleButton>
-            <ToggleButton value="64">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_SAT)}
-            </ToggleButton>
-            <ToggleButton value="1">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_SUN)}
+            {DAY_FLAGS.map(({ value, flag }) => (
+              <ToggleButton key={value} value={value}>
+                {DayOfWeekButton(flag)}
               </ToggleButton>
+            ))}
           </ToggleButtonGroup>
         )}
 
-        {scheduleType !== ScheduleFlag.SCHEDULE_IMMEDIATE && (
+        {!isImmediateSchedule && (
           <>
             <Grid container>
               <BlockFormControlLabel
@@ -284,42 +295,33 @@ const SchedulerDialog = ({
               />
             </Grid>
             <Grid container>
-              {scheduleType === ScheduleFlag.SCHEDULE_DAY ||
-              scheduleType === ScheduleFlag.SCHEDULE_TIMER ? (
+              {needsTimeField ? (
                 <>
                   <TextField
                     name="time"
                     type="time"
-                    label={
-                      scheduleType === ScheduleFlag.SCHEDULE_TIMER
-                        ? LL.TIMER(1)
-                        : LL.TIME(1)
-                    }
-                    value={editItem.time === '' ? '00:00' : editItem.time}
+                    label={timeFieldLabel}
+                    value={timeFieldValue}
                     margin="normal"
                     onChange={updateFormValue}
                   />
-                  {scheduleType === ScheduleFlag.SCHEDULE_TIMER && (
-                    <Box color="warning.main" ml={2} mt={4}>
-                      <Typography variant="body2">
+                  {isTimerSchedule && (
+                    <Typography
+                      sx={{ ml: 2, mt: 4 }}
+                      color="warning"
+                      variant="body2"
+                    >
                       {LL.SCHEDULER_HELP_2()}
                     </Typography>
-                    </Box>
                   )}
                 </>
               ) : (
                 <TextField
                   name="time"
-                  label={
-                    scheduleType === ScheduleFlag.SCHEDULE_CONDITION
-                      ? LL.CONDITION()
-                      : scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE
-                        ? LL.ONCHANGE()
-                        : LL.IMMEDIATE()
-                  }
+                  label={timeFieldLabel}
                   multiline
                   fullWidth
-                  value={editItem.time === '00:00' ? '' : editItem.time}
+                  value={timeFieldValue}
                   margin="normal"
                   onChange={updateFormValue}
                 />
@@ -359,7 +361,7 @@ const SchedulerDialog = ({
 
       <DialogActions>
         {!creating && (
-          <Box flexGrow={1}>
+          <Box sx={{ flexGrow: 1 }}>
             <Button
               startIcon={<RemoveIcon />}
               variant="outlined"
@@ -386,7 +388,7 @@ const SchedulerDialog = ({
         >
           {creating ? LL.ADD(0) : LL.UPDATE()}
         </Button>
-        {scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE && editItem.cmd !== '' && (
+        {isImmediateSchedule && editItem.cmd !== '' && (
           <Button
             startIcon={<PlayArrowIcon />}
             variant="outlined"

interface/src/app/main/Sensors.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
@@ -49,50 +49,27 @@ import {
   temperatureSensorItemValidation
 } from './validators';
 
-const Sensors = () => {
-  const { LL } = useI18nContext();
-  const { me } = useContext(AuthenticatedContext);
+// Constants
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MIN_TEMP_ID = -100;
+const MAX_TEMP_ID = 100;
+const GPIO_25 = 25;
+const GPIO_26 = 26;
 
-  const [selectedTemperatureSensor, setSelectedTemperatureSensor] =
-    useState<TemperatureSensor>();
-  const [selectedAnalogSensor, setSelectedAnalogSensor] = useState<AnalogSensor>();
-  const [temperatureDialogOpen, setTemperatureDialogOpen] = useState<boolean>(false);
-  const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
-  const [creating, setCreating] = useState<boolean>(false);
+const HEADER_BUTTON_STYLE: React.CSSProperties = {
+  fontSize: '14px',
+  justifyContent: 'flex-start'
+};
 
-  const { data: sensorData, send: fetchSensorData } = useRequest(
-    () => readSensorData(),
-    {
-      initialData: {
-        ts: [],
-        as: [],
-        analog_enabled: false,
-        platform: 'ESP32'
-      }
-    }
-  );
+const HEADER_BUTTON_STYLE_END: React.CSSProperties = {
+  fontSize: '14px',
+  justifyContent: 'flex-end'
+};
 
-  const { send: sendTemperatureSensor } = useRequest(
-    (data: WriteTemperatureSensor) => writeTemperatureSensor(data),
-    {
-      immediate: false
-    }
-  );
-
-  const { send: sendAnalogSensor } = useRequest(
-    (data: WriteAnalogSensor) => writeAnalogSensor(data),
-    {
-      immediate: false
-    }
-  );
-
-  useInterval(() => {
-    if (!temperatureDialogOpen && !analogDialogOpen) {
-      void fetchSensorData();
-    }
-  });
-
-  const common_theme = useTheme({
+const common_theme = {
   BaseRow: `
     font-size: 14px;
     .td {
@@ -118,6 +95,7 @@ const Sensors = () => {
     }
     &:hover .td {
       background-color: #177ac9;
+      color: white;
     }
   `,
   Cell: `
@@ -125,76 +103,70 @@ const Sensors = () => {
       text-align: right;
     },
   `
-  });
+};
 
-  const temperature_theme = useTheme([
-    common_theme,
-    {
+const temperature_theme_config = {
   Table: `
     --data-table-library_grid-template-columns: minmax(0, 1fr) 35%;
   `
-    }
-  ]);
+};
 
-  const analog_theme = useTheme([
-    common_theme,
-    {
+const analog_theme_config = {
   Table: `
     --data-table-library_grid-template-columns: 80px repeat(1, minmax(0, 1fr)) 120px 110px;
   `
-    }
-  ]);
+};
 
-  const RenderTemperatureSensors = () => (
-    <Table
-      data={{ nodes: sensorData.ts }}
-      theme={temperature_theme}
-      sort={temperature_sort}
-      layout={{ custom: true }}
-    >
-      {(tableList: TemperatureSensor[]) => (
-        <>
-          <Header>
-            <HeaderRow>
-              <HeaderCell resize>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                  endIcon={getSortIcon(temperature_sort.state, 'NAME')}
-                  onClick={() =>
-                    temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
+const Sensors = () => {
+  const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);
+
+  const [selectedTemperatureSensor, setSelectedTemperatureSensor] =
+    useState<TemperatureSensor>();
+  const [selectedAnalogSensor, setSelectedAnalogSensor] = useState<AnalogSensor>();
+  const [temperatureDialogOpen, setTemperatureDialogOpen] = useState<boolean>(false);
+  const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
+  const [creating, setCreating] = useState<boolean>(false);
+  const firstAvailableGPIO = useRef<number>(undefined);
+
+  const { data: sensorData, send: fetchSensorData } = useRequest(readSensorData, {
+    initialData: {
+      ts: [],
+      as: [],
+      analog_enabled: false,
+      available_gpios: [] as number[],
+      platform: 'ESP32'
     }
-                >
-                  {LL.NAME(0)}
-                </Button>
-              </HeaderCell>
-              <HeaderCell stiff>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
-                  endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
-                  onClick={() =>
-                    temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
+  }).onSuccess((event) => {
+    // store the first available GPIO in a ref
+    if (event.data.available_gpios.length > 0) {
+      firstAvailableGPIO.current = event.data.available_gpios[0];
+    }
+  });
+
+  const { send: sendTemperatureSensor } = useRequest(
+    (data: WriteTemperatureSensor) => writeTemperatureSensor(data),
+    {
+      immediate: false
     }
-                >
-                  {LL.VALUE(0)}
-                </Button>
-              </HeaderCell>
-            </HeaderRow>
-          </Header>
-          <Body>
-            {tableList.map((ts: TemperatureSensor) => (
-              <Row key={ts.id} item={ts} onClick={() => updateTemperatureSensor(ts)}>
-                <Cell>{ts.n}</Cell>
-                <Cell>{formatValue(ts.t, ts.u)}</Cell>
-              </Row>
-            ))}
-          </Body>
-        </>
-      )}
-    </Table>
   );
 
+  const { send: sendAnalogSensor } = useRequest(
+    (data: WriteAnalogSensor) => writeAnalogSensor(data),
+    {
+      immediate: false
+    }
+  );
+
+  useInterval(() => {
+    if (!temperatureDialogOpen && !analogDialogOpen) {
+      void fetchSensorData();
+    }
+  });
+
+  const temperature_theme = useTheme([common_theme, temperature_theme_config]);
+  const analog_theme = useTheme([common_theme, analog_theme_config]);
+
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
@@ -216,11 +188,20 @@ const Sensors = () => {
       },
       sortToggleType: SortToggleType.AlternateWithReset,
       sortFns: {
-        GPIO: (array) => array.sort((a, b) => a.g - b.g),
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
-        TYPE: (array) => array.sort((a, b) => a.t - b.t),
-        VALUE: (array) => array.sort((a, b) => a.v - b.v)
+        GPIO: (array) =>
+          [...array].sort(
+            (a, b) => ((a as AnalogSensor)?.g ?? 0) - ((b as AnalogSensor)?.g ?? 0)
+          ),
+        NAME: (array) =>
+          [...array].sort((a, b) =>
+            ((a as AnalogSensor)?.n ?? '').localeCompare(
+              (b as AnalogSensor)?.n ?? ''
+            )
+          ),
+        TYPE: (array) =>
+          [...array].sort((a, b) => (a as AnalogSensor).t - (b as AnalogSensor).t),
+        VALUE: (array) =>
+          [...array].sort((a, b) => (a as AnalogSensor).v - (b as AnalogSensor).v)
       }
     }
   );
@@ -236,9 +217,15 @@ const Sensors = () => {
       },
       sortToggleType: SortToggleType.AlternateWithReset,
       sortFns: {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
-        VALUE: (array) => array.sort((a, b) => a.t - b.t)
+        NAME: (array) =>
+          [...array].sort((a, b) =>
+            (a as TemperatureSensor).n.localeCompare((b as TemperatureSensor).n)
+          ),
+        VALUE: (array) =>
+          [...array].sort(
+            (a, b) =>
+              ((a as TemperatureSensor).t ?? 0) - ((b as TemperatureSensor).t ?? 0)
+          )
       }
     }
   );
@@ -246,24 +233,25 @@ const Sensors = () => {
   useLayoutTitle(LL.SENSORS());
 
   const formatDurationMin = (duration_min: number) => {
-    const days = Math.trunc((duration_min * 60000) / 86400000);
-    const hours = Math.trunc((duration_min * 60000) / 3600000) % 24;
-    const minutes = Math.trunc((duration_min * 60000) / 60000) % 60;
+    const totalMs = duration_min * MS_PER_MINUTE;
+    const days = Math.trunc(totalMs / MS_PER_DAY);
+    const hours = Math.trunc(totalMs / MS_PER_HOUR) % 24;
+    const minutes = Math.trunc(totalMs / MS_PER_MINUTE) % 60;
 
-    let formatted = '';
-    if (days) {
-      formatted += LL.NUM_DAYS({ num: days }) + ' ';
+    const parts: string[] = [];
+    if (days > 0) {
+      parts.push(LL.NUM_DAYS({ num: days }));
     }
-    if (hours) {
-      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
+    if (hours > 0) {
+      parts.push(LL.NUM_HOURS({ num: hours }));
     }
-    if (minutes) {
-      formatted += LL.NUM_MINUTES({ num: minutes });
+    if (minutes > 0) {
+      parts.push(LL.NUM_MINUTES({ num: minutes }));
     }
-    return formatted;
+    return parts.join(' ');
   };
 
-  function formatValue(value: unknown, uom: DeviceValueUOM) {
+  const formatValue = (value: unknown, uom: DeviceValueUOM) => {
     if (value === undefined) {
       return '';
     }
@@ -292,7 +280,7 @@ const Sensors = () => {
       default:
         return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
     }
-  }
+  };
 
   const updateTemperatureSensor = (ts: TemperatureSensor) => {
     if (me.admin) {
@@ -308,7 +296,12 @@ const Sensors = () => {
   };
 
   const onTemperatureDialogSave = async (ts: TemperatureSensor) => {
-    await sendTemperatureSensor({ id: ts.id, name: ts.n, offset: ts.o })
+    await sendTemperatureSensor({
+      id: ts.id,
+      name: ts.n,
+      offset: ts.o,
+      is_system: ts.s
+    })
       .then(() => {
         toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
       })
@@ -337,17 +330,22 @@ const Sensors = () => {
   };
 
   const addAnalogSensor = () => {
+    if (firstAvailableGPIO.current === undefined) {
+      toast.error(LL.NO_GPIO());
+      return;
+    }
     setCreating(true);
     setSelectedAnalogSensor({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      id: Math.floor(Math.random() * (MAX_TEMP_ID - MIN_TEMP_ID) + MIN_TEMP_ID),
       n: '',
-      g: 21, // default GPIO 21 which is safe for all platforms
-      u: 0,
+      g: firstAvailableGPIO.current,
+      u: DeviceValueUOM.NONE,
       v: 0,
       o: 0,
-      t: 0,
       f: 1,
+      t: AnalogType.DIGITAL_IN, // default to digital in 1
       d: false,
+      s: false,
       o_n: ''
     });
     setAnalogDialogOpen(true);
@@ -362,7 +360,8 @@ const Sensors = () => {
       factor: as.f,
       uom: as.u,
       type: as.t,
-      deleted: as.d
+      deleted: as.d,
+      is_system: as.s
     })
       .then(() => {
         toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
@@ -377,7 +376,7 @@ const Sensors = () => {
       });
   };
 
-  const RenderAnalogSensors = () => (
+  const RenderAnalogSensors = (
     <Table
       data={{ nodes: sensorData.as }}
       theme={analog_theme}
@@ -391,7 +390,7 @@ const Sensors = () => {
               <HeaderCell stiff>
                 <Button
                   fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  style={HEADER_BUTTON_STYLE}
                   endIcon={getSortIcon(analog_sort.state, 'GPIO')}
                   onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
                 >
@@ -401,7 +400,7 @@ const Sensors = () => {
               <HeaderCell resize>
                 <Button
                   fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  style={HEADER_BUTTON_STYLE}
                   endIcon={getSortIcon(analog_sort.state, 'NAME')}
                   onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
                 >
@@ -411,7 +410,7 @@ const Sensors = () => {
               <HeaderCell stiff>
                 <Button
                   fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                  style={HEADER_BUTTON_STYLE}
                   endIcon={getSortIcon(analog_sort.state, 'TYPE')}
                   onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
                 >
@@ -421,7 +420,7 @@ const Sensors = () => {
               <HeaderCell stiff>
                 <Button
                   fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
+                  style={HEADER_BUTTON_STYLE_END}
                   endIcon={getSortIcon(analog_sort.state, 'VALUE')}
                   onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
                 >
@@ -431,17 +430,24 @@ const Sensors = () => {
             </HeaderRow>
           </Header>
           <Body>
-            {tableList.map((a: AnalogSensor) => (
-              <Row key={a.id} item={a} onClick={() => updateAnalogSensor(a)}>
-                <Cell stiff>{a.g}</Cell>
-                <Cell>{a.n}</Cell>
-                <Cell stiff>{AnalogTypeNames[a.t]} </Cell>
-                {(a.t === AnalogType.DIGITAL_OUT && a.g !== 25 && a.g !== 26) ||
-                a.t === AnalogType.DIGITAL_IN ||
-                a.t === AnalogType.PULSE ? (
-                  <Cell stiff>{a.v ? LL.ON() : LL.OFF()}</Cell>
+            {tableList.map((as: AnalogSensor) => (
+              <Row
+                style={{ color: as.s ? 'grey' : 'inherit' }}
+                key={as.id}
+                item={as}
+                onClick={() => updateAnalogSensor(as)}
+              >
+                <Cell stiff>{as.g}</Cell>
+                <Cell>{as.n}</Cell>
+                <Cell stiff>{AnalogTypeNames[as.t - 1]} </Cell>
+                {(as.t === AnalogType.DIGITAL_OUT &&
+                  as.g !== GPIO_25 &&
+                  as.g !== GPIO_26) ||
+                as.t === AnalogType.DIGITAL_IN ||
+                as.t === AnalogType.PULSE ? (
+                  <Cell stiff>{as.v ? LL.ON() : LL.OFF()}</Cell>
                 ) : (
-                  <Cell stiff>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
+                  <Cell stiff>{formatValue(as.v, as.u)}</Cell>
                 )}
               </Row>
             ))}
@@ -451,12 +457,67 @@ const Sensors = () => {
     </Table>
   );
 
+  const RenderTemperatureSensors = (
+    <Table
+      data={{ nodes: sensorData.ts }}
+      theme={temperature_theme}
+      sort={temperature_sort}
+      layout={{ custom: true }}
+    >
+      {(tableList: TemperatureSensor[]) => (
+        <>
+          <Header>
+            <HeaderRow>
+              <HeaderCell resize>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE}
+                  endIcon={getSortIcon(temperature_sort.state, 'NAME')}
+                  onClick={() =>
+                    temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
+                  }
+                >
+                  {LL.NAME(0)}
+                </Button>
+              </HeaderCell>
+              <HeaderCell stiff>
+                <Button
+                  fullWidth
+                  style={HEADER_BUTTON_STYLE_END}
+                  endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
+                  onClick={() =>
+                    temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
+                  }
+                >
+                  {LL.VALUE(0)}
+                </Button>
+              </HeaderCell>
+            </HeaderRow>
+          </Header>
+          <Body>
+            {tableList.map((ts: TemperatureSensor) => (
+              <Row
+                style={{ color: ts.s ? 'grey' : 'inherit' }}
+                key={ts.id}
+                item={ts}
+                onClick={() => updateTemperatureSensor(ts)}
+              >
+                <Cell>{ts.n}</Cell>
+                <Cell>{formatValue(ts.t, ts.u)}</Cell>
+              </Row>
+            ))}
+          </Body>
+        </>
+      )}
+    </Table>
+  );
+
   return (
     <SectionContent>
-      <Typography sx={{ pb: 1 }} variant="h6" color="secondary">
+      <Typography sx={{ pb: 1 }} variant="h6" color="primary">
         {LL.TEMP_SENSORS()}
       </Typography>
-      <RenderTemperatureSensors />
+      {RenderTemperatureSensors}
       {selectedTemperatureSensor && (
         <DashboardSensorsTemperatureDialog
           open={temperatureDialogOpen}
@@ -469,10 +530,10 @@ const Sensors = () => {
           )}
         />
       )}
-      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="secondary">
+      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="primary">
         {LL.ANALOG_SENSORS()}
       </Typography>
-      <RenderAnalogSensors />
+      {RenderAnalogSensors}
       {selectedAnalogSensor && (
         <DashboardSensorsAnalogDialog
           open={analogDialogOpen}
@@ -480,16 +541,20 @@ const Sensors = () => {
           onSave={onAnalogDialogSave}
           creating={creating}
           selectedItem={selectedAnalogSensor}
-          validator={analogSensorItemValidation(
-            sensorData.as,
-            selectedAnalogSensor,
-            creating,
-            sensorData.platform
-          )}
+          analogGPIOList={sensorData.available_gpios}
+          disabledTypeList={sensorData.exclude_types}
+          validator={analogSensorItemValidation(sensorData.as, selectedAnalogSensor)}
         />
       )}
       {sensorData?.analog_enabled === true && me.admin && (
-        <Box mt={2} display="flex" flexWrap="wrap" justifyContent="flex-end">
+        <Box
+          sx={{
+            mt: 2,
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'flex-end'
+          }}
+        >
           <Button
             variant="outlined"
             color="primary"

interface/src/app/main/SensorsAnalogDialog.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
+import DoneIcon from '@mui/icons-material/Done';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
   Box,
@@ -13,7 +14,6 @@ import {
   Grid,
   InputAdornment,
   MenuItem,
-  TextField,
   Typography
 } from '@mui/material';
 
@@ -23,7 +23,7 @@ import type { ValidateFieldsError } from 'async-validator';
 import { ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 
 import { AnalogType, AnalogTypeNames, DeviceValueUOM_s } from './types';
 import type { AnalogSensor } from './types';
@@ -34,6 +34,8 @@ interface DashboardSensorsAnalogDialogProps {
   onSave: (as: AnalogSensor) => void;
   creating: boolean;
   selectedItem: AnalogSensor;
+  analogGPIOList: number[];
+  disabledTypeList: number[];
   validator: Schema;
 }
 
@@ -43,13 +45,81 @@ const SensorsAnalogDialog = ({
   onSave,
   creating,
   selectedItem,
+  analogGPIOList,
+  disabledTypeList,
   validator
 }: DashboardSensorsAnalogDialogProps) => {
   const { LL } = useI18nContext();
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
   const [editItem, setEditItem] = useState<AnalogSensor>(selectedItem);
-  const updateFormValue = updateValue(setEditItem);
 
+  const updateFormValue = updateValue((updater) =>
+    setEditItem(
+      (prev) =>
+        updater(
+          prev as unknown as Record<string, unknown>
+        ) as unknown as AnalogSensor
+    )
+  );
+
+  const isCounterOrRate =
+    editItem.t === AnalogType.COUNTER ||
+    editItem.t === AnalogType.RATE ||
+    (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2);
+  const isCounter =
+    editItem.t === AnalogType.COUNTER ||
+    (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2);
+  const isFreqType =
+    editItem.t >= AnalogType.FREQ_0 && editItem.t <= AnalogType.FREQ_2;
+  const isPWM =
+    editItem.t === AnalogType.PWM_0 ||
+    editItem.t === AnalogType.PWM_1 ||
+    editItem.t === AnalogType.PWM_2;
+  const isDACOutGPIO =
+    editItem.t === AnalogType.DIGITAL_OUT &&
+    (editItem.g === 25 || editItem.g === 26);
+  const isDigitalOutGPIO =
+    editItem.t === AnalogType.DIGITAL_OUT && editItem.g !== 25 && editItem.g !== 26;
+
+  const analogTypeMenuItems = AnalogTypeNames.map((val, i) => ({
+    name: val,
+    value: i + 1
+  }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map(({ name, value }) => (
+      <MenuItem
+        key={name}
+        value={value}
+        disabled={disabledTypeList?.includes(value)}
+      >
+        {name}
+      </MenuItem>
+    ));
+
+  const uomMenuItems = DeviceValueUOM_s.map((val, i) => (
+    <MenuItem key={val} value={i}>
+      {val}
+    </MenuItem>
+  ));
+
+  const analogGPIOMenuItems = () =>
+    // add selectedItem.g to the list
+    [
+      ...(analogGPIOList?.includes(selectedItem.g) || selectedItem.g === undefined
+        ? analogGPIOList
+        : [selectedItem.g, ...analogGPIOList])
+    ]
+      .filter((gpio, idx, arr) => arr.indexOf(gpio) === idx)
+      .sort((a, b) => a - b)
+      .map((gpio: number) => {
+        return (
+          <MenuItem key={gpio} value={gpio}>
+            {gpio}
+          </MenuItem>
+        );
+      });
+
+  // Reset form when dialog opens or selectedItem changes
   useEffect(() => {
     if (open) {
       setFieldErrors(undefined);
@@ -72,99 +142,82 @@ const SensorsAnalogDialog = ({
       await validate(validator, editItem);
       onSave(editItem);
     } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
   const remove = () => {
-    editItem.d = true;
-    onSave(editItem);
+    onSave({ ...editItem, d: true });
   };
 
+  const dialogTitle = `${creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()} ${LL.ANALOG_SENSOR(0)}`;
+
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
-        {LL.ANALOG_SENSOR(0)}
-      </DialogTitle>
+      <DialogTitle>{dialogTitle}</DialogTitle>
       <DialogContent dividers>
         <Grid container spacing={2}>
-          <Grid>
           <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
             name="g"
             label="GPIO"
-              sx={{ width: '11ch' }}
-              value={numberValue(editItem.g)}
-              type="number"
-              variant="outlined"
+            value={editItem.g}
+            sx={{ width: '9ch' }}
+            disabled={editItem.s || !creating}
+            select
             onChange={updateFormValue}
-            />
-          </Grid>
-          {creating && (
-            <Grid>
-              <Box color="warning.main" mt={2}>
-                <Typography variant="body2">{LL.WARN_GPIO()}</Typography>
-              </Box>
-            </Grid>
-          )}
+          >
+            {analogGPIOMenuItems()}
+          </ValidatedTextField>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
               name="n"
               label={LL.NAME(0)}
               value={editItem.n}
               fullWidth
-              variant="outlined"
               onChange={updateFormValue}
             />
           </Grid>
           <Grid>
-            <TextField
+            <ValidatedTextField
               name="t"
               label={LL.TYPE(0)}
               value={editItem.t}
               fullWidth
               select
               onChange={updateFormValue}
+              disabled={editItem.s}
             >
-              {AnalogTypeNames.map((val, i) => (
-                <MenuItem key={val} value={i}>
-                  {val}
-                </MenuItem>
-              ))}
-            </TextField>
+              {analogTypeMenuItems}
+            </ValidatedTextField>
           </Grid>
-          {((editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE) ||
-            (editItem.t >= AnalogType.FREQ_0 &&
-              editItem.t <= AnalogType.FREQ_2)) && (
+          {(isCounterOrRate ||
+            isFreqType ||
+            editItem.t === AnalogType.ADC ||
+            editItem.t === AnalogType.TIMER) && (
             <Grid>
-              <TextField
+              <ValidatedTextField
                 name="u"
                 label={LL.UNIT()}
                 value={editItem.u}
                 sx={{ width: '15ch' }}
                 select
                 onChange={updateFormValue}
+                disabled={editItem.s}
               >
-                {DeviceValueUOM_s.map((val, i) => (
-                  <MenuItem key={val} value={i}>
-                    {val}
-                  </MenuItem>
-                ))}
-              </TextField>
+                {uomMenuItems}
+              </ValidatedTextField>
             </Grid>
           )}
           {editItem.t === AnalogType.ADC && (
             <Grid>
-              <TextField
+              <ValidatedTextField
                 name="o"
                 label={LL.OFFSET()}
                 value={numberValue(editItem.o)}
                 type="number"
                 sx={{ width: '11ch' }}
-                variant="outlined"
                 onChange={updateFormValue}
+                disabled={editItem.s}
                 slotProps={{
                   input: {
                     startAdornment: (
@@ -178,14 +231,14 @@ const SensorsAnalogDialog = ({
           )}
           {editItem.t === AnalogType.NTC && (
             <Grid>
-              <TextField
+              <ValidatedTextField
                 name="o"
                 label={LL.OFFSET()}
                 value={numberValue(editItem.o)}
                 sx={{ width: '11ch' }}
                 type="number"
-                variant="outlined"
                 onChange={updateFormValue}
+                disabled={editItem.s}
                 slotProps={{
                   input: {
                     startAdornment: (
@@ -197,16 +250,16 @@ const SensorsAnalogDialog = ({
               />
             </Grid>
           )}
-          {editItem.t === AnalogType.COUNTER && (
+          {isCounter && (
             <Grid>
-              <TextField
+              <ValidatedTextField
                 name="o"
                 label={LL.STARTVALUE()}
                 value={numberValue(editItem.o)}
                 type="number"
                 sx={{ width: '11ch' }}
-                variant="outlined"
                 onChange={updateFormValue}
+                disabled={editItem.s}
                 slotProps={{
                   htmlInput: { step: '0.001' }
                 }}
@@ -215,88 +268,90 @@ const SensorsAnalogDialog = ({
           )}
           {editItem.t === AnalogType.RGB && (
             <Grid>
-              <TextField
+              <ValidatedTextField
                 name="o"
                 label={'RGB ' + LL.VALUE(0)}
                 value={numberValue(editItem.o)}
                 type="number"
                 sx={{ width: '11ch' }}
-                variant="outlined"
                 onChange={updateFormValue}
+                disabled={editItem.s}
               />
             </Grid>
           )}
-          {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
+          {(isCounterOrRate ||
+            isFreqType ||
+            editItem.t === AnalogType.ADC ||
+            editItem.t === AnalogType.TIMER) && (
             <Grid>
-              <TextField
+              <ValidatedTextField
                 name="f"
                 label={LL.FACTOR()}
                 value={numberValue(editItem.f)}
-                sx={{ width: '11ch' }}
+                sx={{ width: '14ch' }}
                 type="number"
-                variant="outlined"
                 onChange={updateFormValue}
+                disabled={editItem.s}
                 slotProps={{
                   htmlInput: { step: '0.001' }
                 }}
               />
             </Grid>
           )}
-          {editItem.t === AnalogType.DIGITAL_OUT &&
-            (editItem.g === 25 || editItem.g === 26) && (
+          {isDACOutGPIO && (
             <Grid>
-                <TextField
+              <ValidatedTextField
                 name="o"
                 label={LL.VALUE(0)}
                 value={numberValue(editItem.o)}
                 sx={{ width: '11ch' }}
                 type="number"
-                  variant="outlined"
                 onChange={updateFormValue}
+                disabled={editItem.s}
                 slotProps={{
                   htmlInput: { min: '0', max: '255', step: '1' }
                 }}
               />
             </Grid>
           )}
-          {editItem.t === AnalogType.DIGITAL_OUT &&
-            editItem.g !== 25 &&
-            editItem.g !== 26 && (
+          {isDigitalOutGPIO && (
             <>
               <Grid>
-                  <TextField
+                <ValidatedTextField
                   name="o"
                   label={LL.VALUE(0)}
                   value={numberValue(editItem.o)}
                   select
-                    variant="outlined"
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                 >
                   <MenuItem value={0}>{LL.OFF()}</MenuItem>
                   <MenuItem value={1}>{LL.ON()}</MenuItem>
-                  </TextField>
+                </ValidatedTextField>
               </Grid>
               <Grid>
-                  <TextField
+                <ValidatedTextField
                   name="f"
                   label={LL.POLARITY()}
                   value={editItem.f}
                   sx={{ width: '15ch' }}
                   select
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                 >
                   <MenuItem value={1}>{LL.ACTIVEHIGH()}</MenuItem>
                   <MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
-                  </TextField>
+                </ValidatedTextField>
               </Grid>
               <Grid>
-                  <TextField
+                <ValidatedTextField
                   name="u"
                   label={LL.STARTVALUE()}
                   sx={{ width: '15ch' }}
                   value={editItem.u}
                   select
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                 >
                   <MenuItem value={0}>{LL.UNCHANGED()}</MenuItem>
                   <MenuItem value={1}>
@@ -305,23 +360,21 @@ const SensorsAnalogDialog = ({
                   <MenuItem value={2}>
                     {LL.ALWAYS()}&nbsp;{LL.ON()}
                   </MenuItem>
-                  </TextField>
+                </ValidatedTextField>
               </Grid>
             </>
           )}
-          {(editItem.t === AnalogType.PWM_0 ||
-            editItem.t === AnalogType.PWM_1 ||
-            editItem.t === AnalogType.PWM_2) && (
+          {isPWM && (
             <>
               <Grid>
-                <TextField
+                <ValidatedTextField
                   name="f"
                   label={LL.FREQ()}
                   value={numberValue(editItem.f)}
                   type="number"
-                  variant="outlined"
                   sx={{ width: '11ch' }}
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                   slotProps={{
                     input: {
                       startAdornment: (
@@ -333,14 +386,14 @@ const SensorsAnalogDialog = ({
                 />
               </Grid>
               <Grid>
-                <TextField
+                <ValidatedTextField
                   name="o"
                   label={LL.DUTY_CYCLE()}
                   value={numberValue(editItem.o)}
                   type="number"
                   sx={{ width: '11ch' }}
-                  variant="outlined"
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                   slotProps={{
                     input: {
                       startAdornment: (
@@ -356,27 +409,28 @@ const SensorsAnalogDialog = ({
           {editItem.t === AnalogType.PULSE && (
             <>
               <Grid>
-                <TextField
+                <ValidatedTextField
                   name="o"
                   label={LL.POLARITY()}
                   value={editItem.o}
                   sx={{ width: '11ch' }}
                   select
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                 >
                   <MenuItem value={0}>{LL.ACTIVEHIGH()}</MenuItem>
                   <MenuItem value={1}>{LL.ACTIVELOW()}</MenuItem>
-                </TextField>
+                </ValidatedTextField>
               </Grid>
               <Grid>
-                <TextField
+                <ValidatedTextField
                   name="f"
                   label="Pulse"
                   value={numberValue(editItem.f)}
                   type="number"
                   sx={{ width: '15ch' }}
-                  variant="outlined"
                   onChange={updateFormValue}
+                  disabled={editItem.s}
                   slotProps={{
                     input: {
                       startAdornment: (
@@ -390,12 +444,43 @@ const SensorsAnalogDialog = ({
             </>
           )}
         </Grid>
+        {fieldErrors && Object.keys(fieldErrors).length > 0 && (
+          <Box sx={{ mt: 1 }}>
+            {Object.values(fieldErrors).map((errArr, idx) =>
+              Array.isArray(errArr)
+                ? errArr.map((err, j) => (
+                    <Typography
+                      key={`${idx}-${j}`}
+                      color="error"
+                      variant="caption"
+                      sx={{ display: 'block' }}
+                    >
+                      {err.message}
+                    </Typography>
+                  ))
+                : null
+            )}
+          </Box>
+        )}
+        {editItem.s && (
+          <Grid>
+            <Typography sx={{ mt: 1 }} color="warning" variant="body2">
+              <WarningIcon
+                fontSize="small"
+                sx={{ mr: 1, verticalAlign: 'middle' }}
+                color="warning"
+              />
+              {LL.SYSTEM(0)} {LL.SENSOR(0)}
+            </Typography>
+          </Grid>
+        )}
       </DialogContent>
       <DialogActions>
         {!creating && (
-          <Box flexGrow={1} sx={{ '& button': { mt: 0 } }}>
+          <Box sx={{ flexGrow: 1, '& button': { mt: 0 } }}>
             <Button
               startIcon={<RemoveIcon />}
+              disabled={editItem.s}
               variant="outlined"
               color="warning"
               onClick={remove}
@@ -413,7 +498,7 @@ const SensorsAnalogDialog = ({
           {LL.CANCEL()}
         </Button>
         <Button
-          startIcon={<WarningIcon color="warning" />}
+          startIcon={<DoneIcon />}
           variant="outlined"
           onClick={save}
           color="primary"

interface/src/app/main/SensorsTemperatureDialog.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
+import DoneIcon from '@mui/icons-material/Done';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -21,7 +21,7 @@ import type { ValidateFieldsError } from 'async-validator';
 import { ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 
 import type { TemperatureSensor } from './types';
 
@@ -33,6 +33,12 @@ interface SensorsTemperatureDialogProps {
   validator: Schema;
 }
 
+// Constants
+const OFFSET_MIN = -5;
+const OFFSET_MAX = 5;
+const OFFSET_STEP = 0.1;
+const TEMP_UNIT = '°C';
+
 const SensorsTemperatureDialog = ({
   open,
   onClose,
@@ -43,7 +49,14 @@ const SensorsTemperatureDialog = ({
   const { LL } = useI18nContext();
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
   const [editItem, setEditItem] = useState<TemperatureSensor>(selectedItem);
-  const updateFormValue = updateValue(setEditItem);
+
+  const updateFormValue = updateValue(
+    setEditItem as unknown as (
+      updater: (
+        prevState: Readonly<Record<string, unknown>>
+      ) => Record<string, unknown>
+    ) => void
+  );
 
   useEffect(() => {
     if (open) {
@@ -52,10 +65,7 @@ const SensorsTemperatureDialog = ({
     }
   }, [open, selectedItem]);
 
-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
+  const handleClose = (_event: React.SyntheticEvent, reason?: string) => {
     if (reason !== 'backdropClick') {
       onClose();
     }
@@ -67,25 +77,21 @@ const SensorsTemperatureDialog = ({
       await validate(validator, editItem);
       onSave(editItem);
     } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
   return (
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {LL.EDIT()}&nbsp;{LL.TEMP_SENSOR()}
-      </DialogTitle>
+      <DialogTitle>{`${LL.EDIT()} ${LL.TEMP_SENSOR()}`}</DialogTitle>
       <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
-          <Typography variant="body2">
+        <Typography sx={{ mb: 2 }} color="warning" variant="body2">
           {LL.ID_OF(LL.SENSOR(0))}: {editItem.id}
         </Typography>
-        </Box>
         <Grid container spacing={2}>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? {}}
               name="n"
               label={LL.NAME(0)}
               value={editItem.n}
@@ -105,14 +111,30 @@ const SensorsTemperatureDialog = ({
               slotProps={{
                 input: {
                   startAdornment: (
-                    <InputAdornment position="start">°C</InputAdornment>
+                    <InputAdornment position="start">{TEMP_UNIT}</InputAdornment>
                   )
                 },
-                htmlInput: { min: '-5', max: '5', step: '0.1' }
+                htmlInput: {
+                  min: OFFSET_MIN,
+                  max: OFFSET_MAX,
+                  step: OFFSET_STEP
+                }
               }}
             />
           </Grid>
         </Grid>
+        {editItem.s && (
+          <Grid>
+            <Typography sx={{ mt: 1 }} color="warning" variant="body2">
+              <WarningIcon
+                fontSize="small"
+                sx={{ mr: 1, verticalAlign: 'middle' }}
+                color="warning"
+              />
+              {LL.SYSTEM(0)} {LL.SENSOR(0)}
+            </Typography>
+          </Grid>
+        )}
       </DialogContent>
       <DialogActions>
         <Button
@@ -124,7 +146,7 @@ const SensorsTemperatureDialog = ({
           {LL.CANCEL()}
         </Button>
         <Button
-          startIcon={<WarningIcon color="warning" />}
+          startIcon={<DoneIcon />}
           variant="outlined"
           onClick={save}
           color="primary"

interface/src/app/main/UserProfile.tsx

@@ -0,0 +1,69 @@
+import { memo, useContext } from 'react';
+
+import PersonIcon from '@mui/icons-material/Person';
+import {
+  Avatar,
+  Box,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  Typography
+} from '@mui/material';
+
+import { AuthenticatedContext } from '@/contexts/authentication';
+import { SectionContent, useLayoutTitle } from 'components';
+import { LanguageSelector } from 'components/inputs';
+import { useI18nContext } from 'i18n/i18n-react';
+
+const UserProfileComponent = () => {
+  const { LL } = useI18nContext();
+  const { me, signOut } = useContext(AuthenticatedContext);
+
+  useLayoutTitle(LL.USER_PROFILE());
+
+  const handleSignOut = () => {
+    signOut(true);
+  };
+
+  return (
+    <SectionContent>
+      <List sx={{ flexGrow: 1 }}>
+        <ListItem disablePadding>
+          <Avatar sx={{ bgcolor: '#9e9e9e', color: 'white' }}>
+            <PersonIcon />
+          </Avatar>
+          <ListItemText
+            sx={{ pl: 2, color: '#2196f3' }}
+            primary={me.username}
+            secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
+          />
+        </ListItem>
+      </List>
+      <Box sx={{ mt: 2, mb: 2, display: 'flex', alignItems: 'center' }}>
+        <Typography
+          sx={{ mr: 2, textAlign: 'center' }}
+          color="warning"
+          variant="body1"
+        >
+          {LL.LANGUAGE()}:
+        </Typography>
+        <LanguageSelector />
+      </Box>
+      <Divider />
+      <Button
+        sx={{ mt: 2 }}
+        variant="outlined"
+        color="primary"
+        onClick={handleSignOut}
+      >
+        {LL.SIGN_OUT()}
+      </Button>
+    </SectionContent>
+  );
+};
+
+const UserProfile = memo(UserProfileComponent);
+
+export default UserProfile;

interface/src/app/main/deviceValue.ts

@@ -2,27 +2,30 @@ import type { TranslationFunctions } from 'i18n/i18n-types';
 
 import { DeviceValueUOM, DeviceValueUOM_s } from './types';
 
+// Cache NumberFormat instances for better performance
+const numberFormatter = new Intl.NumberFormat();
+const numberFormatterWithDecimal = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 1
+});
+
 const formatDurationMin = (LL: TranslationFunctions, duration_min: number) => {
-  const days = Math.trunc((duration_min * 60000) / 86400000);
-  const hours = Math.trunc((duration_min * 60000) / 3600000) % 24;
-  const minutes = Math.trunc((duration_min * 60000) / 60000) % 60;
+  const totalMs = duration_min * 60000;
+  const days = Math.trunc(totalMs / 86400000);
+  const hours = Math.trunc(totalMs / 3600000) % 24;
+  const minutes = Math.trunc(duration_min) % 60;
 
-  let formatted = '';
+  const parts: string[] = [];
   if (days) {
-    formatted += LL.NUM_DAYS({ num: days });
+    parts.push(LL.NUM_DAYS({ num: days }));
   }
-
   if (hours) {
-    if (formatted) formatted += ' ';
-    formatted += LL.NUM_HOURS({ num: hours });
+    parts.push(LL.NUM_HOURS({ num: hours }));
   }
-
   if (minutes) {
-    if (formatted) formatted += ' ';
-    formatted += LL.NUM_MINUTES({ num: minutes });
+    parts.push(LL.NUM_MINUTES({ num: minutes }));
   }
 
-  return formatted;
+  return parts.join(' ');
 };
 
 export function formatValue(
@@ -30,18 +33,21 @@ export function formatValue(
   value?: unknown,
   uom?: DeviceValueUOM
 ) {
+  // Handle non-numeric values or missing data
   if (typeof value !== 'number' || uom === undefined || value === undefined) {
     if (value === undefined || typeof value === 'boolean') {
       return '';
     }
+    // Type assertion is safe here since we know it's not a number, boolean, or undefined
     return (
       (value as string) +
-      (value === '' || uom === undefined || uom === 0
+      (value === '' || uom === undefined || uom === DeviceValueUOM.NONE
         ? ''
         : ' ' + DeviceValueUOM_s[uom])
     );
   }
 
+  // Handle numeric values
   switch (uom) {
     case DeviceValueUOM.HOURS:
       return value ? formatDurationMin(LL, value * 60) : LL.NUM_HOURS({ num: 0 });
@@ -50,18 +56,12 @@ export function formatValue(
     case DeviceValueUOM.SECONDS:
       return LL.NUM_SECONDS({ num: value });
     case DeviceValueUOM.NONE:
-      return new Intl.NumberFormat().format(value);
+      return numberFormatter.format(value);
     case DeviceValueUOM.DEGREES:
     case DeviceValueUOM.DEGREES_R:
     case DeviceValueUOM.FAHRENHEIT:
-      return (
-        new Intl.NumberFormat(undefined, {
-          minimumFractionDigits: 1
-        }).format(value) +
-        ' ' +
-        DeviceValueUOM_s[uom]
-      );
+      return numberFormatterWithDecimal.format(value) + ' ' + DeviceValueUOM_s[uom];
     default:
-      return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+      return numberFormatter.format(value) + ' ' + DeviceValueUOM_s[uom];
   }
 }

interface/src/app/main/types.ts

@@ -43,6 +43,16 @@ export interface Settings {
   modbus_port: number;
   modbus_max_clients: number;
   modbus_timeout: number;
+  email_enabled: boolean;
+  email_ssl?: boolean;
+  email_starttls?: boolean;
+  email_server: string;
+  email_port: number;
+  email_login: string;
+  email_pass: string;
+  email_sender: string;
+  email_recp: string;
+  email_subject: string;
   developer_mode: boolean;
 }
 
@@ -60,7 +70,7 @@ export interface Stat {
 }
 
 export interface Activity {
-  stats: Stat[];
+  readonly stats: readonly Stat[];
 }
 
 export interface Device {
@@ -82,38 +92,43 @@ export interface TemperatureSensor {
   t?: number; // temp, optional
   o: number; // offset
   u: number; // uom
+  s: boolean; // system sensor flag
   o_n?: string;
 }
 
 export interface AnalogSensor {
   id: number;
   g: number; // GPIO
-  n: string;
-  v: number;
-  u: number;
-  o: number;
-  f: number;
-  t: number;
+  n: string; // name
+  v: number; // value
+  u: number; // uom
+  o: number; // offset
+  f: number; // factor
+  t: number; // type
   d: boolean; // deleted flag
-  o_n?: string;
+  s: boolean; // system sensor flag
+  o_n?: string; // original name
 }
 
 export interface WriteTemperatureSensor {
   id: string;
   name: string;
   offset: number;
+  is_system: boolean;
 }
 
 export interface SensorData {
   ts: TemperatureSensor[];
   as: AnalogSensor[];
   analog_enabled: boolean;
+  available_gpios: number[];
+  exclude_types: number[];
   platform: string;
 }
 
 export interface CoreData {
-  connected: boolean;
-  devices: Device[];
+  readonly connected: boolean;
+  readonly devices: readonly Device[];
 }
 
 export interface DashboardItem {
@@ -122,11 +137,12 @@ export interface DashboardItem {
   n?: string; // name, optional
   dv?: DeviceValue; // device value, optional
   nodes?: DashboardItem[]; // children nodes, optional
+  parentNode: DashboardItem; // to stop lint errors
 }
 
 export interface DashboardData {
-  connected: boolean; // true if connected to EMS bus
-  nodes: DashboardItem[];
+  readonly connected: boolean; // true if connected to EMS bus
+  readonly nodes: readonly DashboardItem[];
 }
 
 export interface DeviceValue {
@@ -139,10 +155,11 @@ export interface DeviceValue {
   s?: string; // steps for up/down, optional
   m?: number; // min, optional
   x?: number; // max, optional
+  [key: string]: unknown;
 }
 
 export interface DeviceData {
-  nodes: DeviceValue[];
+  readonly nodes: readonly DeviceValue[];
 }
 
 export interface DeviceEntity {
@@ -189,13 +206,13 @@ export enum DeviceValueUOM {
   MBAR,
   LH,
   CTKWH,
-  HZ
+  HERTZ
 }
 
 export const DeviceValueUOM_s = [
   '',
   '°C',
-  '°C',
+  '°C Rel',
   '%',
   'l/min',
   'kWh',
@@ -221,11 +238,10 @@ export const DeviceValueUOM_s = [
   'l/h',
   'ct/kWh',
   'Hz'
-];
+] as const;
 
 export enum AnalogType {
   REMOVED = -1,
-  NOTUSED = 0,
   DIGITAL_IN = 1,
   COUNTER = 2,
   ADC = 3,
@@ -240,31 +256,34 @@ export enum AnalogType {
   PULSE = 12,
   FREQ_0 = 13,
   FREQ_1 = 14,
-  FREQ_2 = 15
+  FREQ_2 = 15,
+  CNT_0 = 16,
+  CNT_1 = 17,
+  CNT_2 = 18
 }
 
 export const AnalogTypeNames = [
-  '(disabled)',
-  'Digital In',
-  'Counter',
-  'ADC In',
-  'Timer',
-  'Rate',
-  'Digital Out',
-  'PWM 0',
-  'PWM 1',
-  'PWM 2',
-  'NTC Temp.',
-  'RGB Led',
-  'Pulse',
-  'Freq 0',
-  'Freq 1',
-  'Freq 2'
-];
+  'Digital In', // 1
+  'Counter', // 2
+  'ADC In', // 3
+  'Timer', // 4
+  'Rate', // 5
+  'Digital Out', // 6
+  'PWM 0', // 7
+  'PWM 1', // 8
+  'PWM 2', // 9
+  'NTC Temp', // 10
+  'RGB Led', // 11
+  'Pulse', // 12
+  'Freq 0', // 13
+  'Freq 1', // 14
+  'Freq 2', // 15
+  'Counter 0', // 16
+  'Counter 1', // 17
+  'Counter 2' // 18
+] as const;
 
-type BoardProfiles = Record<string, string>;
-
-export const BOARD_PROFILES: BoardProfiles = {
+export const BOARD_PROFILES = {
   S32: 'BBQKees Gateway S32',
   S32S3: 'BBQKees Gateway S3',
   E32: 'BBQKees Gateway E32',
@@ -278,7 +297,9 @@ export const BOARD_PROFILES: BoardProfiles = {
   C3MINI: 'Wemos C3 Mini',
   S2MINI: 'Wemos S2 Mini',
   S3MINI: 'Liligo S3'
-};
+} as const;
+
+export type BoardProfileKey = keyof typeof BOARD_PROFILES;
 
 export interface BoardProfile {
   board_profile: string;
@@ -315,6 +336,7 @@ export interface WriteAnalogSensor {
   uom: number;
   type: number;
   deleted: boolean;
+  is_system: boolean;
 }
 
 export enum DeviceEntityMask {
@@ -346,7 +368,7 @@ export interface ScheduleItem {
 }
 
 export interface Schedule {
-  schedule: ScheduleItem[];
+  readonly schedule: readonly ScheduleItem[];
 }
 
 export interface ModuleItem {
@@ -364,7 +386,7 @@ export interface ModuleItem {
 }
 
 export interface Modules {
-  modules: ModuleItem[];
+  readonly modules: readonly ModuleItem[];
 }
 
 export enum ScheduleFlag {
@@ -413,7 +435,7 @@ export interface EntityItem {
 }
 
 export interface Entities {
-  entities: EntityItem[];
+  readonly entities: readonly EntityItem[];
 }
 
 // matches emsdevice.h DeviceType
@@ -469,4 +491,4 @@ export const DeviceValueTypeNames = [
   'ENUM',
   'RAW',
   'CMD'
-];
+] as const;

interface/src/app/main/validators.ts

@@ -11,273 +11,158 @@ import type {
   TemperatureSensor
 } from './types';
 
-export const GPIO_VALIDATOR = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      (value === 1 ||
-        (value >= 6 && value <= 11) ||
-        value === 20 ||
-        value === 24 ||
-        (value >= 28 && value <= 31) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
+// Constants
+const ERROR_MESSAGES = {
+  GPIO_INVALID: 'Must be an valid GPIO port',
+  NAME_DUPLICATE: 'Name already in use',
+  GPIO_DUPLICATE: 'GPIO already in use',
+  VALUE_OUT_OF_RANGE: 'Value out of range',
+  HEX_REQUIRED: 'Is required and must be in hex format'
+} as const;
 
-export const GPIO_VALIDATORR = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      (value === 1 ||
-        (value >= 6 && value <= 11) ||
-        (value >= 16 && value <= 17) ||
-        value === 20 ||
-        value === 24 ||
-        (value >= 28 && value <= 31) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
+const VALIDATION_LIMITS = {
+  PORT_MIN: 0,
+  PORT_MAX: 65535,
+  MODBUS_MAX_CLIENTS_MIN: 0,
+  MODBUS_MAX_CLIENTS_MAX: 50,
+  MODBUS_TIMEOUT_MIN: 100,
+  MODBUS_TIMEOUT_MAX: 20000,
+  SYSLOG_MARK_INTERVAL_MIN: 0,
+  SYSLOG_MARK_INTERVAL_MAX: 3600,
+  SHOWER_MIN_DURATION_MIN: 10,
+  SHOWER_MIN_DURATION_MAX: 360,
+  SHOWER_ALERT_TRIGGER_MIN: 1,
+  SHOWER_ALERT_TRIGGER_MAX: 20,
+  SHOWER_ALERT_COLDSHOT_MIN: 1,
+  SHOWER_ALERT_COLDSHOT_MAX: 10,
+  REMOTE_TIMEOUT_MIN: 1,
+  REMOTE_TIMEOUT_MAX: 240,
+  OFFSET_MIN: 0,
+  OFFSET_MAX: 255,
+  COMMAND_MIN: 1,
+  COMMAND_MAX: 300,
+  NAME_MAX_LENGTH: 19,
+  HEX_BASE: 16
+} as const;
 
-export const GPIO_VALIDATORC3 = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (value && ((value >= 11 && value <= 19) || value > 21 || value < 0)) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
+type ValidationRules = Array<{
+  required?: boolean;
+  message?: string;
+  [key: string]: unknown;
+}>;
 
-export const GPIO_VALIDATORS2 = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      ((value >= 19 && value <= 20) ||
-        (value >= 22 && value <= 32) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
+export const createSettingsValidator = (settings: Settings) => {
+  const schema: Record<string, ValidationRules> = {};
 
-export const GPIO_VALIDATORS3 = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      ((value >= 19 && value <= 20) ||
-        (value >= 22 && value <= 37) ||
-        (value >= 39 && value <= 42) ||
-        value > 48 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const createSettingsValidator = (settings: Settings) =>
-  new Schema({
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        rx_gpio: [{ required: true, message: 'Rx GPIO is required' }, GPIO_VALIDATOR]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32C3' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORC3
-        ]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32S2' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORS2
-        ]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32S3' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORS3
-        ]
-      }),
-    ...(settings.syslog_enabled && {
-      syslog_host: [
+  // Syslog validations
+  if (settings.syslog_enabled) {
+    schema.syslog_host = [
       { required: true, message: 'Host is required' },
       IP_OR_HOSTNAME_VALIDATOR
-      ],
-      syslog_port: [
+    ];
+    schema.syslog_port = [
       { required: true, message: 'Port is required' },
-        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
-      ],
-      syslog_mark_interval: [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.PORT_MIN,
+        max: VALIDATION_LIMITS.PORT_MAX,
+        message: 'Invalid Port'
+      }
+    ];
+    schema.syslog_mark_interval = [
       { required: true, message: 'Mark interval is required' },
-        { type: 'number', min: 0, max: 10, message: 'Must be between 0 and 10' }
-      ]
-    }),
-    ...(settings.modbus_enabled && {
-      modbus_max_clients: [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MIN,
+        max: VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MAX,
+        message: `Must be between ${VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MIN} and ${VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MAX}`
+      }
+    ];
+  }
+
+  // Modbus validations
+  if (settings.modbus_enabled) {
+    schema.modbus_max_clients = [
       { required: true, message: 'Max clients is required' },
-        { type: 'number', min: 0, max: 50, message: 'Invalid number' }
-      ],
-      modbus_port: [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.MODBUS_MAX_CLIENTS_MIN,
+        max: VALIDATION_LIMITS.MODBUS_MAX_CLIENTS_MAX,
+        message: 'Invalid number'
+      }
+    ];
+    schema.modbus_port = [
       { required: true, message: 'Port is required' },
-        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
-      ],
-      modbus_timeout: [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.PORT_MIN,
+        max: VALIDATION_LIMITS.PORT_MAX,
+        message: 'Invalid Port'
+      }
+    ];
+    schema.modbus_timeout = [
       { required: true, message: 'Timeout is required' },
       {
         type: 'number',
-          min: 100,
-          max: 20000,
-          message: 'Must be between 100 and 20000'
+        min: VALIDATION_LIMITS.MODBUS_TIMEOUT_MIN,
+        max: VALIDATION_LIMITS.MODBUS_TIMEOUT_MAX,
+        message: `Must be between ${VALIDATION_LIMITS.MODBUS_TIMEOUT_MIN} and ${VALIDATION_LIMITS.MODBUS_TIMEOUT_MAX}`
       }
-      ]
-    }),
-    ...(settings.shower_timer && {
-      shower_min_duration: [
-        {
-          type: 'number',
-          min: 10,
-          max: 360,
-          message: 'Time must be between 10 and 360 seconds'
+    ];
   }
-      ]
-    }),
-    ...(settings.shower_alert && {
-      shower_alert_trigger: [
-        {
-          type: 'number',
-          min: 1,
-          max: 20,
-          message: 'Time must be between 1 and 20 minutes'
-        }
-      ],
-      shower_alert_coldshot: [
-        {
-          type: 'number',
-          min: 1,
-          max: 10,
-          message: 'Time must be between 1 and 10 seconds'
-        }
-      ]
-    }),
-    ...(settings.remote_timeout_en && {
-      remote_timeout: [
-        {
-          type: 'number',
-          min: 1,
-          max: 240,
-          message: 'Timeout must be between 1 and 240 hours'
-        }
-      ]
-    })
-  });
 
-export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) => ({
+  // Shower timer validations
+  if (settings.shower_timer) {
+    schema.shower_min_duration = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SHOWER_MIN_DURATION_MIN,
+        max: VALIDATION_LIMITS.SHOWER_MIN_DURATION_MAX,
+        message: `Time must be between ${VALIDATION_LIMITS.SHOWER_MIN_DURATION_MIN} and ${VALIDATION_LIMITS.SHOWER_MIN_DURATION_MAX} seconds`
+      }
+    ];
+  }
+
+  // Shower alert validations
+  if (settings.shower_alert) {
+    schema.shower_alert_trigger = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MIN,
+        max: VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MAX,
+        message: `Time must be between ${VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MIN} and ${VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MAX} minutes`
+      }
+    ];
+    schema.shower_alert_coldshot = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MIN,
+        max: VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MAX,
+        message: `Time must be between ${VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MIN} and ${VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MAX} seconds`
+      }
+    ];
+  }
+
+  // Remote timeout validations
+  if (settings.remote_timeout_en) {
+    schema.remote_timeout = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.REMOTE_TIMEOUT_MIN,
+        max: VALIDATION_LIMITS.REMOTE_TIMEOUT_MAX,
+        message: `Timeout must be between ${VALIDATION_LIMITS.REMOTE_TIMEOUT_MIN} and ${VALIDATION_LIMITS.REMOTE_TIMEOUT_MAX} hours`
+      }
+    ];
+  }
+
+  return new Schema(schema);
+};
+
+// Generic unique name validator factory
+const createUniqueNameValidator = <T extends { name: string }>(
+  items: T[],
+  originalName?: string
+) => ({
   validator(
     _rule: InternalRuleItem,
     name: string,
@@ -285,43 +170,22 @@ export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) =
   ) {
     if (
       name !== '' &&
-      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
-      schedule.find((si) => si.name.toLowerCase() === name.toLowerCase())
+      (originalName === undefined ||
+        originalName.toLowerCase() !== name.toLowerCase()) &&
+      items.find((item) => item.name.toLowerCase() === name.toLowerCase())
     ) {
-      callback('Name already in use');
-    } else {
+      callback(ERROR_MESSAGES.NAME_DUPLICATE);
+      return;
+    }
     callback();
   }
-  }
 });
 
-export const schedulerItemValidation = (
-  schedule: ScheduleItem[],
-  scheduleItem: ScheduleItem
-) =>
-  new Schema({
-    name: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueNameValidator(schedule, scheduleItem.o_name)]
-    ],
-    cmd: [
-      { required: true, message: 'Command is required' },
-      {
-        type: 'string',
-        min: 1,
-        max: 300,
-        message: 'Command must be 1-300 characters'
-      }
-    ]
-  });
-
-export const uniqueCustomNameValidator = (
-  entity: EntityItem[],
-  o_name?: string
+// Generic field name validator (for cases where the name field has different property names)
+const createUniqueFieldNameValidator = <T>(
+  items: T[],
+  getName: (item: T) => string,
+  originalName?: string
 ) => ({
   validator(
     _rule: InternalRuleItem,
@@ -329,58 +193,91 @@ export const uniqueCustomNameValidator = (
     callback: (error?: string) => void
   ) {
     if (
-      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
-      entity.find((ei) => ei.name.toLowerCase() === name.toLowerCase())
+      name !== '' &&
+      (originalName === undefined ||
+        originalName.toLowerCase() !== name.toLowerCase()) &&
+      items.find((item) => getName(item).toLowerCase() === name.toLowerCase())
     ) {
-      callback('Name already in use');
-    } else {
+      callback(ERROR_MESSAGES.NAME_DUPLICATE);
+      return;
+    }
     callback();
   }
-  }
 });
 
+const NAME_PATTERN_BASE = '[a-zA-Z0-9_]';
+const NAME_PATTERN_MESSAGE = `Must be <${VALIDATION_LIMITS.NAME_MAX_LENGTH + 1} characters: alphanumeric or '_'`;
+
+const NAME_PATTERN = {
+  type: 'string' as const,
+  pattern: new RegExp(
+    `^${NAME_PATTERN_BASE}{0,${VALIDATION_LIMITS.NAME_MAX_LENGTH}}$`
+  ),
+  message: NAME_PATTERN_MESSAGE
+};
+
+const NAME_PATTERN_REQUIRED = {
+  type: 'string' as const,
+  pattern: new RegExp(
+    `^${NAME_PATTERN_BASE}{1,${VALIDATION_LIMITS.NAME_MAX_LENGTH}}$`
+  ),
+  message: NAME_PATTERN_MESSAGE
+};
+
+export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) =>
+  createUniqueNameValidator(schedule, o_name);
+
+export const schedulerItemValidation = (
+  schedule: ScheduleItem[],
+  scheduleItem: ScheduleItem
+) =>
+  new Schema({
+    name: [NAME_PATTERN, uniqueNameValidator(schedule, scheduleItem.o_name)],
+    cmd: [
+      { required: true, message: 'Command is required' },
+      {
+        type: 'string',
+        min: VALIDATION_LIMITS.COMMAND_MIN,
+        max: VALIDATION_LIMITS.COMMAND_MAX,
+        message: `Command must be ${VALIDATION_LIMITS.COMMAND_MIN}-${VALIDATION_LIMITS.COMMAND_MAX} characters`
+      }
+    ]
+  });
+
+export const uniqueCustomNameValidator = (entity: EntityItem[], o_name?: string) =>
+  createUniqueNameValidator(entity, o_name);
+
+const hexValidator = {
+  validator(
+    _rule: InternalRuleItem,
+    value: string,
+    callback: (error?: string) => void
+  ) {
+    if (!value || Number.isNaN(Number.parseInt(value, VALIDATION_LIMITS.HEX_BASE))) {
+      callback(ERROR_MESSAGES.HEX_REQUIRED);
+      return;
+    }
+    callback();
+  }
+};
+
 export const entityItemValidation = (entity: EntityItem[], entityItem: EntityItem) =>
   new Schema({
     name: [
       { required: true, message: 'Name is required' },
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{1,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueCustomNameValidator(entity, entityItem.o_name)]
-    ],
-    device_id: [
-      {
-        validator(
-          _rule: InternalRuleItem,
-          value: string,
-          callback: (error?: string) => void
-        ) {
-          if (isNaN(parseInt(value, 16))) {
-            callback('Is required and must be in hex format');
-          }
-          callback();
-        }
-      }
-    ],
-    type_id: [
-      {
-        validator(
-          _rule: InternalRuleItem,
-          value: string,
-          callback: (error?: string) => void
-        ) {
-          if (isNaN(parseInt(value, 16))) {
-            callback('Is required and must be in hex format');
-          }
-          callback();
-        }
-      }
+      NAME_PATTERN_REQUIRED,
+      uniqueCustomNameValidator(entity, entityItem.o_name)
     ],
+    device_id: [hexValidator],
+    type_id: [hexValidator],
     offset: [
       { required: true, message: 'Offset is required' },
-      { type: 'number', min: 0, max: 255, message: 'Must be between 0 and 255' }
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.OFFSET_MIN,
+        max: VALIDATION_LIMITS.OFFSET_MAX,
+        message: `Must be between ${VALIDATION_LIMITS.OFFSET_MIN} and ${VALIDATION_LIMITS.OFFSET_MAX}`
+      }
     ],
     factor: [{ required: true, message: 'is required' }]
   });
@@ -388,93 +285,34 @@ export const entityItemValidation = (entity: EntityItem[], entityItem: EntityIte
 export const uniqueTemperatureNameValidator = (
   sensors: TemperatureSensor[],
   o_name?: string
-) => ({
-  validator(_rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== n.toLowerCase()) &&
-      n !== '' &&
-      sensors.find((ts) => ts.n.toLowerCase() === n.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
+) => createUniqueFieldNameValidator(sensors, (s) => s.n, o_name);
 
 export const temperatureSensorItemValidation = (
   sensors: TemperatureSensor[],
   sensor: TemperatureSensor
 ) =>
   new Schema({
-    n: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueTemperatureNameValidator(sensors, sensor.o_n)]
-    ]
-  });
-
-export const isGPIOUniqueValidator = (sensors: AnalogSensor[]) => ({
-  validator(
-    _rule: InternalRuleItem,
-    gpio: number,
-    callback: (error?: string) => void
-  ) {
-    if (sensors.find((as) => as.g === gpio)) {
-      callback('GPIO already in use');
-    } else {
-      callback();
-    }
-  }
+    n: [NAME_PATTERN, uniqueTemperatureNameValidator(sensors, sensor.o_n)]
   });
 
 export const uniqueAnalogNameValidator = (
   sensors: AnalogSensor[],
   o_name?: string
-) => ({
-  validator(_rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== n.toLowerCase()) &&
-      n !== '' &&
-      sensors.find((as) => as.n.toLowerCase() === n.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
+) => createUniqueFieldNameValidator(sensors, (s) => s.n, o_name);
 
 export const analogSensorItemValidation = (
   sensors: AnalogSensor[],
-  sensor: AnalogSensor,
-  creating: boolean,
-  platform: string
-) =>
-  new Schema({
+  sensor: AnalogSensor
+) => {
+  return new Schema({
+    // name is required and must be unique
     n: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueAnalogNameValidator(sensors, sensor.o_n)]
-    ],
-    g: [
-      { required: true, message: 'GPIO is required' },
-      platform === 'ESP32S3'
-        ? GPIO_VALIDATORS3
-        : platform === 'ESP32S2'
-          ? GPIO_VALIDATORS2
-          : platform === 'ESP32C3'
-            ? GPIO_VALIDATORC3
-            : GPIO_VALIDATOR,
-      ...(creating ? [isGPIOUniqueValidator(sensors)] : [])
+      { required: true, message: 'Name is required' },
+      NAME_PATTERN,
+      uniqueAnalogNameValidator(sensors, sensor.o_n)
     ]
   });
+};
 
 export const deviceValueItemValidation = (dv: DeviceValue) =>
   new Schema({
@@ -488,11 +326,12 @@ export const deviceValueItemValidation = (dv: DeviceValue) =>
         ) {
           if (
             typeof value === 'number' &&
-            dv.m &&
-            dv.x &&
+            dv.m !== undefined &&
+            dv.x !== undefined &&
             (value < dv.m || value > dv.x)
           ) {
-            callback('Value out of range');
+            callback(ERROR_MESSAGES.VALUE_OUT_OF_RANGE);
+            return;
           }
           callback();
         }

interface/src/app/settings/APSettings.tsx

@@ -21,12 +21,24 @@ import { useI18nContext } from 'i18n/i18n-react';
 import type { APSettingsType } from 'types';
 import { APProvisionMode } from 'types';
 import { numberValue, updateValueDirty, useRest } from 'utils';
-import { createAPSettingsValidator, validate } from 'validators';
+import { ValidationError, createAPSettingsValidator, validate } from 'validators';
 
 export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
-  provision_mode === APProvisionMode.AP_MODE_ALWAYS ||
   provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;
 
+// Efficient range function without recursion
+const createRange = (start: number, end: number): number[] => {
+  const result: number[] = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+
+// Pre-computed ranges for better performance
+const CHANNEL_RANGE = createRange(1, 14);
+const MAX_CLIENTS_RANGE = createRange(1, 9);
+
 const APSettings = () => {
   const {
     loadData,
@@ -51,30 +63,29 @@ const APSettings = () => {
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
   const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
     dirtyFlags,
     setDirtyFlags,
     updateDataValue as (value: unknown) => void
   );
 
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
+  const apEnabled = data ? isAPEnabled(data) : false;
 
   const validateAndSubmit = async () => {
+    if (!data) return;
+
     try {
       setFieldErrors(undefined);
       await validate(createAPSettingsValidator(data), data);
       await saveData();
     } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
-    // no lodash - https://asleepace.com/blog/typescript-range-without-a-loop/
-    function range(a: number, b: number): number[] {
-      return a < b ? [a, ...range(a + 1, b)] : [b];
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
     }
 
     return (
@@ -90,9 +101,6 @@ const APSettings = () => {
           onChange={updateFormValue}
           margin="normal"
         >
-          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>
-            {LL.AP_PROVIDE_TEXT_1()}
-          </MenuItem>
           <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>
             {LL.AP_PROVIDE_TEXT_2()}
           </MenuItem>
@@ -100,7 +108,7 @@ const APSettings = () => {
             {LL.AP_PROVIDE_TEXT_3()}
           </MenuItem>
         </ValidatedTextField>
-        {isAPEnabled(data) && (
+        {apEnabled && (
           <>
             <ValidatedTextField
               fieldErrors={fieldErrors || {}}
@@ -134,7 +142,7 @@ const APSettings = () => {
               onChange={updateFormValue}
               margin="normal"
             >
-              {range(1, 14).map((i) => (
+              {CHANNEL_RANGE.map((i) => (
                 <MenuItem key={i} value={i}>
                   {i}
                 </MenuItem>
@@ -162,7 +170,7 @@ const APSettings = () => {
               onChange={updateFormValue}
               margin="normal"
             >
-              {range(1, 9).map((i) => (
+              {MAX_CLIENTS_RANGE.map((i) => (
                 <MenuItem key={i} value={i}>
                   {i}
                 </MenuItem>

interface/src/app/settings/ApplicationSettings.tsx

@@ -28,22 +28,23 @@ import {
   FormLoader,
   MessageBox,
   SectionContent,
+  ValidatedPasswordField,
   ValidatedTextField,
   useLayoutTitle
 } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValueDirty, useRest } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 
 import { API, getBoardProfile, readSettings, writeSettings } from '../../api/app';
 import { BOARD_PROFILES } from '../main/types';
-import type { APIcall, Settings } from '../main/types';
+import type { APIcall, BoardProfileKey, Settings } from '../main/types';
 import { createSettingsValidator } from '../main/validators';
 
 export function boardProfileSelectItems() {
   return Object.keys(BOARD_PROFILES).map((code) => (
     <MenuItem key={code} value={code}>
-      {BOARD_PROFILES[code]}
+      {BOARD_PROFILES[code as BoardProfileKey]}
     </MenuItem>
   ));
 }
@@ -72,7 +73,7 @@ const ApplicationSettings = () => {
   const { LL } = useI18nContext();
 
   const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
     dirtyFlags,
     setDirtyFlags,
     updateDataValue as (value: unknown) => void
@@ -106,6 +107,18 @@ const ApplicationSettings = () => {
     });
   });
 
+  const SecondsInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+  };
+
+  const MinutesInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
+  };
+
+  const HoursInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
+  };
+
   const doRestart = async () => {
     setRestarting(true);
     await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
@@ -123,27 +136,12 @@ const ApplicationSettings = () => {
 
   useLayoutTitle(LL.APPLICATION());
 
-  const SecondsInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-  };
-  const MinutesInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
-  };
-  const HoursInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
-  };
-
-  const content = () => {
-    if (!data || !hardwareData) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
-
   const validateAndSubmit = async () => {
     try {
       setFieldErrors(undefined);
       await validate(createSettingsValidator(data), data);
     } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     } finally {
       await saveData();
     }
@@ -167,6 +165,28 @@ const ApplicationSettings = () => {
     await doRestart();
   };
 
+  const sendemail = async () => {
+    await sendAPI({
+      device: 'system',
+      cmd: 'sendemail',
+      data: 'Email notification test successful!',
+      id: 0
+    })
+      .then(() => {
+        toast.success(LL.TEST_EMAIL_SUCCESSFUL());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      });
+  };
+
+  const boardProfileItems = boardProfileSelectItems();
+
+  const content = () => {
+    if (!data || !hardwareData) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    }
+
     return (
       <>
         <Typography sx={{ pb: 1 }} variant="h6" color="primary">
@@ -307,9 +327,9 @@ const ApplicationSettings = () => {
               >
                 <MenuItem value={-1}>OFF</MenuItem>
                 <MenuItem value={3}>ERR</MenuItem>
+                <MenuItem value={4}>WARN</MenuItem>
                 <MenuItem value={5}>NOTICE</MenuItem>
                 <MenuItem value={6}>INFO</MenuItem>
-                <MenuItem value={7}>DEBUG</MenuItem>
                 <MenuItem value={9}>ALL</MenuItem>
               </TextField>
             </Grid>
@@ -330,6 +350,169 @@ const ApplicationSettings = () => {
             </Grid>
           </Grid>
         )}
+        <Typography color="secondary">eMail</Typography>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              checked={data.email_enabled}
+              onChange={updateFormValue}
+              name="email_enabled"
+              disabled={!hardwareData.psram}
+            />
+          }
+          label={
+            <Typography color={!hardwareData.psram ? 'grey' : 'default'}>
+              Enable eMail notification
+              {!hardwareData.psram && (
+                <Typography variant="caption">
+                  &nbsp; &#40;{LL.IS_REQUIRED('PSRAM')}&#41;
+                </Typography>
+              )}
+            </Typography>
+          }
+        />
+        {data.email_enabled && (
+          <>
+            <Grid
+              container
+              spacing={2}
+              direction="row"
+              sx={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}
+            >
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="email_server"
+                  label="SMTP Server"
+                  variant="outlined"
+                  value={data.email_server}
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  sx={{ width: '12ch' }}
+                  name="email_port"
+                  variant="outlined"
+                  label="Port"
+                  value={numberValue(data.email_port)}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+              <Grid
+                size={4}
+                sx={{ mt: !data.email_ssl && !data.email_starttls ? 0 : 3 }}
+              >
+                {!data.email_starttls && (
+                  <BlockFormControlLabel
+                    sx={{ width: '12ch' }}
+                    control={
+                      <Checkbox
+                        checked={data.email_ssl}
+                        onChange={updateFormValue}
+                        name="email_ssl"
+                        disabled={
+                          data.email_starttls || data.email_ssl === undefined
+                        }
+                      />
+                    }
+                    label="SSL/TLS"
+                  />
+                )}
+                {!data.email_ssl && (
+                  <BlockFormControlLabel
+                    sx={{ width: '12ch' }}
+                    control={
+                      <Checkbox
+                        checked={data.email_starttls}
+                        onChange={updateFormValue}
+                        name="email_starttls"
+                        disabled={
+                          data.email_ssl || data.email_starttls === undefined
+                        }
+                      />
+                    }
+                    label="STARTTLS"
+                  />
+                )}
+              </Grid>
+            </Grid>
+            <Grid container spacing={2} rowSpacing={0}>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="email_login"
+                  label="Login"
+                  variant="outlined"
+                  value={data.email_login}
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+              <Grid>
+                <ValidatedPasswordField
+                  fieldErrors={fieldErrors || {}}
+                  name="email_pass"
+                  label="Password"
+                  variant="outlined"
+                  value={data.email_pass}
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+            </Grid>
+            <Grid container spacing={2} rowSpacing={0}>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="email_sender"
+                  label="From"
+                  variant="outlined"
+                  value={data.email_sender}
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="email_recp"
+                  label="To"
+                  variant="outlined"
+                  value={data.email_recp}
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+              <Grid>
+                <ValidatedTextField
+                  fieldErrors={fieldErrors || {}}
+                  name="email_subject"
+                  label="Subject"
+                  variant="outlined"
+                  value={data.email_subject}
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              </Grid>
+              <Grid>
+                <Button
+                  sx={{ mt: 3 }}
+                  variant="outlined"
+                  color="primary"
+                  disabled={dirtyFlags.length !== 0}
+                  onClick={sendemail}
+                >
+                  Send test email
+                </Button>
+              </Grid>
+            </Grid>
+          </>
+        )}
         <Typography sx={{ pb: 1, pt: 2 }} variant="h6" color="primary">
           {LL.SENSORS()}
         </Typography>
@@ -468,17 +651,25 @@ const ApplicationSettings = () => {
           name="board_profile"
           label={LL.BOARD_PROFILE()}
           value={data.board_profile}
-          disabled={processingBoard || hardwareData.model.startsWith('BBQKees')}
+          disabled={processingBoard}
           variant="outlined"
           onChange={changeBoardProfile}
           margin="normal"
           select
         >
-          {boardProfileSelectItems()}
-          <Divider />
+          {hardwareData.model.startsWith('BBQKees') ? (
+            <MenuItem key={hardwareData.board} value={hardwareData.board}>
+              {BOARD_PROFILES[hardwareData.board as BoardProfileKey]}
+            </MenuItem>
+          ) : (
+            boardProfileItems
+          )}
+          {(data.board_profile === 'CUSTOM' || data.developer_mode) && <Divider />}
+          {(data.board_profile === 'CUSTOM' || data.developer_mode) && (
             <MenuItem key={'CUSTOM'} value={'CUSTOM'}>
               {LL.CUSTOM()}&hellip;
             </MenuItem>
+          )}
         </TextField>
         {data.board_profile === 'CUSTOM' && (
           <>
@@ -581,6 +772,7 @@ const ApplicationSettings = () => {
                   <MenuItem value={0}>{LL.DISABLED(1)}</MenuItem>
                   <MenuItem value={1}>LAN8720</MenuItem>
                   <MenuItem value={2}>TLK110</MenuItem>
+                  <MenuItem value={3}>RTL8201</MenuItem>
                 </TextField>
               </Grid>
             </Grid>
@@ -741,7 +933,7 @@ const ApplicationSettings = () => {
           label={LL.REMOTE_TIMEOUT_EN()}
         />
         {data.remote_timeout_en && (
-          <Box mt={2}>
+          <Box sx={{ mt: 2 }}>
             <ValidatedTextField
               fieldErrors={fieldErrors || {}}
               name="remote_timeout"
@@ -836,8 +1028,9 @@ const ApplicationSettings = () => {
         </Grid>
 
         {restartNeeded && (
-          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
+          <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
             <Button
+              sx={{ ml: 2 }}
               startIcon={<PowerSettingsNewIcon />}
               variant="contained"
               color="error"
@@ -873,10 +1066,12 @@ const ApplicationSettings = () => {
     );
   };
 
-  return (
+  return restarting ? (
+    <SystemMonitor />
+  ) : (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {restarting ? <SystemMonitor /> : content()}
+      {content()}
     </SectionContent>
   );
 };

interface/src/app/settings/DownloadUpload.tsx

@@ -1,12 +1,23 @@
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 
+import CancelIcon from '@mui/icons-material/Cancel';
 import DownloadIcon from '@mui/icons-material/GetApp';
-import { Box, Button, Grid, Typography } from '@mui/material';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  Typography
+} from '@mui/material';
 
 import * as SystemApi from 'api/system';
 import { API, callAction } from 'api/app';
 
+import { dialogStyle } from '@/CustomTheme';
 import { useRequest } from 'alova/client';
 import type { APIcall } from 'app/main/types';
 import SystemMonitor from 'app/status/SystemMonitor';
@@ -22,6 +33,8 @@ import { saveFile } from 'utils';
 const DownloadUpload = () => {
   const { LL } = useI18nContext();
 
+  const [confirmBackup, setConfirmBackup] = useState<boolean>(false);
+
   const [restarting, setRestarting] = useState<boolean>(false);
 
   const { send: sendExportData } = useRequest(
@@ -46,93 +59,118 @@ const DownloadUpload = () => {
 
   const doRestart = async () => {
     setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
+    try {
+      await sendAPI({ device: 'system', cmd: 'restart', id: 0 });
+    } catch (error) {
+      toast.error((error as Error).message);
+      setRestarting(false);
     }
-    );
   };
 
   useLayoutTitle(LL.DOWNLOAD_UPLOAD());
 
-  const content = () => {
+  const handleCloseBackupDialog = () => {
+    setConfirmBackup(false);
+  };
+
+  const handleDownload = (type: string) => () => {
+    void sendExportData(type);
+    setConfirmBackup(false);
+  };
+
+  if (restarting) {
+    return <SystemMonitor />;
+  }
+
   if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
   return (
-      <>
+    <SectionContent>
+      <Dialog
+        sx={dialogStyle}
+        open={confirmBackup}
+        onClose={handleCloseBackupDialog}
+      >
+        <DialogTitle>{LL.DOWNLOAD_SYSTEM_BACKUP()}</DialogTitle>
+        <DialogContent dividers>
+          <WarningIcon color="warning" sx={{ fontSize: 18 }} />
+          &nbsp;
+          {LL.WARNING_SYSTEM_BACKUP()}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={handleCloseBackupDialog}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<DownloadIcon />}
+            variant="outlined"
+            onClick={handleDownload('systembackup')}
+            color="primary"
+          >
+            {LL.DOWNLOAD(0)}
+          </Button>
+        </DialogActions>
+      </Dialog>
+
       <Typography sx={{ pb: 2 }} variant="h6" color="primary">
         {LL.DOWNLOAD(0)}
       </Typography>
 
-        <Typography mb={1} variant="body1" color="warning">
-          {LL.DOWNLOAD_SETTINGS_TEXT()}.
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          alignItems: 'center'
+        }}
+      >
+        <Typography variant="body1" color="warning">
+          {LL.DOWNLOAD_SETTINGS_TEXT()}:
         </Typography>
-        <Grid container spacing={1}>
         <Button
-            sx={{ ml: 2 }}
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-            onClick={() => sendExportData('settings')}
+          onClick={() => setConfirmBackup(true)}
         >
-            {LL.SETTINGS_OF(LL.APPLICATION())}
-          </Button>
-
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('customizations')}
-          >
-            {LL.CUSTOMIZATIONS()}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('entities')}
-          >
-            {LL.CUSTOM_ENTITIES(0)}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('schedule')}
-          >
-            {LL.SCHEDULE(0)}
+          {LL.DOWNLOAD_SYSTEM_BACKUP()}
         </Button>
       </Grid>
+
+      <Grid container spacing={2} sx={{ mt: 2, alignItems: 'center' }}>
+        <Typography variant="body1" color="warning">
+          {LL.DOWNLOAD_SETTINGS_TEXT2()}:
+        </Typography>
         <Button
-          sx={{ ml: 2, mt: 2 }}
           startIcon={<DownloadIcon />}
           variant="outlined"
           color="primary"
-          onClick={() => sendExportData('allvalues')}
+          onClick={handleDownload('allvalues')}
         >
           {LL.ALLVALUES()}
         </Button>
+      </Grid>
 
       <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
         {LL.UPLOAD()}
       </Typography>
 
-        <Box color="warning.main" sx={{ pb: 2 }}>
-          <Typography variant="body1">{LL.UPLOAD_TEXT()}.</Typography>
-        </Box>
+      <Typography sx={{ pb: 2 }} color="warning" variant="body1">
+        {LL.UPLOAD_TEXT()}:
+      </Typography>
 
-        <SingleUpload text={LL.UPLOAD_DRAG()} doRestart={doRestart} />
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <SystemMonitor /> : content()}</SectionContent>
+      <SingleUpload doRestart={doRestart} />
+    </SectionContent>
   );
 };
 

interface/src/app/settings/MqttSettings.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
+  Box,
   Button,
   Checkbox,
   Grid,
@@ -28,7 +31,9 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import type { MqttSettingsType } from 'types';
 import { numberValue, updateValueDirty, useRest } from 'utils';
-import { createMqttSettingsValidator, validate } from 'validators';
+import { ValidationError, createMqttSettingsValidator, validate } from 'validators';
+
+import { callAction } from '../../api/app';
 
 const MqttSettings = () => {
   const {
@@ -52,8 +57,18 @@ const MqttSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
+  const sendResetMQTT = () => {
+    void callAction({ action: 'resetMQTT' })
+      .then(() => {
+        toast.success('MQTT ' + LL.REFRESH() + ' successful');
+      })
+      .catch((error) => {
+        toast.error(String(error.error?.message || 'An error occurred'));
+      });
+  };
+
   const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
     dirtyFlags,
     setDirtyFlags,
     updateDataValue as (value: unknown) => void
@@ -63,23 +78,46 @@ const MqttSettings = () => {
     endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
   };
 
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
-
   const validateAndSubmit = async () => {
+    if (!data) return;
     try {
       setFieldErrors(undefined);
       await validate(createMqttSettingsValidator(data), data);
       await saveData();
     } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
+  const publishIntervalFields = [
+    { name: 'publish_time_heartbeat', label: 'Heartbeat', validated: true },
+    { name: 'publish_time_boiler', label: LL.MQTT_INT_BOILER(), validated: false },
+    {
+      name: 'publish_time_thermostat',
+      label: LL.MQTT_INT_THERMOSTATS(),
+      validated: false
+    },
+    { name: 'publish_time_solar', label: LL.MQTT_INT_SOLAR(), validated: false },
+    { name: 'publish_time_mixer', label: LL.MQTT_INT_MIXER(), validated: false },
+    { name: 'publish_time_water', label: LL.MQTT_INT_WATER(), validated: false },
+    { name: 'publish_time_sensor', label: LL.SENSORS(), validated: false },
+    { name: 'publish_time_other', label: LL.DEFAULT(0), validated: false }
+  ];
+
+  if (!data) {
     return (
+      <SectionContent>
+        {blocker ? <BlockNavigation blocker={blocker} /> : null}
+        <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
       <>
+        <Box sx={{ display: 'flex', gap: 2, mb: 1 }}>
           <BlockFormControlLabel
             control={
               <Checkbox
@@ -90,10 +128,21 @@ const MqttSettings = () => {
             }
             label={LL.ENABLE_MQTT()}
           />
+          {data.enabled && (
+            <Button
+              startIcon={<SettingsBackupRestoreIcon />}
+              color="secondary"
+              variant="outlined"
+              onClick={sendResetMQTT}
+            >
+              {LL.REFRESH() + ' MQTT'}
+            </Button>
+          )}
+        </Box>
         <Grid container spacing={2} rowSpacing={0}>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? {}}
               name="host"
               label={LL.ADDRESS_OF(LL.BROKER())}
               multiline
@@ -105,7 +154,7 @@ const MqttSettings = () => {
           </Grid>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? {}}
               name="port"
               label="Port"
               variant="outlined"
@@ -117,7 +166,7 @@ const MqttSettings = () => {
           </Grid>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? {}}
               name="base"
               label={LL.BASE_TOPIC()}
               variant="outlined"
@@ -129,7 +178,7 @@ const MqttSettings = () => {
           <Grid>
             <TextField
               name="client_id"
-              label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
+              label={`${LL.ID_OF(LL.CLIENT())} (${LL.OPTIONAL()})`}
               variant="outlined"
               value={data.client_id}
               onChange={updateFormValue}
@@ -158,7 +207,7 @@ const MqttSettings = () => {
           </Grid>
           <Grid>
             <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? {}}
               name="keep_alive"
               label="Keep Alive"
               slotProps={{
@@ -205,6 +254,7 @@ const MqttSettings = () => {
             label={LL.CERT()}
             variant="outlined"
             value={data.rootCA}
+            sx={{ width: '50ch' }}
             onChange={updateFormValue}
             margin="normal"
           />
@@ -283,7 +333,7 @@ const MqttSettings = () => {
             </Grid>
           )}
         </Grid>
-        <Grid container spacing={2} rowSpacing={0}>
+        {/* <Grid container spacing={2} rowSpacing={0}> */}
         <Grid>
           <BlockFormControlLabel
             control={
@@ -336,127 +386,68 @@ const MqttSettings = () => {
               >
                 <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
                 <MenuItem value={3}>
-                    {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(v3.6)
+                  {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(v3.5)
                 </MenuItem>
                 <MenuItem value={4}>
-                    {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(v3.6)
+                  {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(v3.5)
+                </MenuItem>
+                <MenuItem value={1}>
+                  {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(latest)
+                </MenuItem>
+                <MenuItem value={2}>
+                  {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(latest)
                 </MenuItem>
-                  <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
-                  <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
               </TextField>
             </Grid>
+            <Grid>
+              {data.discovery_type === 0 && (
+                <TextField
+                  name="ha_number_mode"
+                  label={LL.MQTT_INPUT_NUMBER_FORMAT()}
+                  value={data.ha_number_mode}
+                  variant="outlined"
+                  onChange={updateFormValue}
+                  sx={{ width: '20ch' }}
+                  margin="normal"
+                  select
+                >
+                  <MenuItem value={0}>Box</MenuItem>
+                  <MenuItem value={1}>Slider</MenuItem>
+                </TextField>
+              )}
+            </Grid>
           </Grid>
         )}
-        </Grid>
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
         </Typography>
         <Grid container spacing={2} rowSpacing={0}>
-          <Grid>
+          {publishIntervalFields.map((field) => (
+            <Grid key={field.name}>
+              {field.validated ? (
                 <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
-              name="publish_time_heartbeat"
-              label="Heartbeat"
+                  fieldErrors={fieldErrors ?? {}}
+                  name={field.name}
+                  label={field.label}
                   slotProps={{
                     input: SecondsInputProps
                   }}
                   variant="outlined"
-              value={numberValue(data.publish_time_heartbeat)}
+                  value={numberValue(
+                    data[field.name as keyof MqttSettingsType] as number
+                  )}
                   type="number"
                   onChange={updateFormValue}
                   margin="normal"
                 />
-          </Grid>
-          <Grid>
+              ) : (
                 <TextField
-              name="publish_time_boiler"
-              label={LL.MQTT_INT_BOILER()}
+                  name={field.name}
+                  label={field.label}
                   variant="outlined"
-              value={numberValue(data.publish_time_boiler)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_thermostat"
-              label={LL.MQTT_INT_THERMOSTATS()}
-              variant="outlined"
-              value={numberValue(data.publish_time_thermostat)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_solar"
-              label={LL.MQTT_INT_SOLAR()}
-              variant="outlined"
-              value={numberValue(data.publish_time_solar)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_mixer"
-              label={LL.MQTT_INT_MIXER()}
-              variant="outlined"
-              value={numberValue(data.publish_time_mixer)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_water"
-              label={LL.MQTT_INT_WATER()}
-              variant="outlined"
-              value={numberValue(data.publish_time_water)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_sensor"
-              label={LL.SENSORS()}
-              variant="outlined"
-              value={numberValue(data.publish_time_sensor)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_other"
-              label={LL.DEFAULT(0)}
-              variant="outlined"
-              value={numberValue(data.publish_time_other)}
+                  value={numberValue(
+                    data[field.name as keyof MqttSettingsType] as number
+                  )}
                   type="number"
                   onChange={updateFormValue}
                   margin="normal"
@@ -464,7 +455,9 @@ const MqttSettings = () => {
                     input: SecondsInputProps
                   }}
                 />
+              )}
             </Grid>
+          ))}
         </Grid>
         {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
@@ -491,13 +484,6 @@ const MqttSettings = () => {
           </ButtonRow>
         )}
       </>
-    );
-  };
-
-  return (
-    <SectionContent>
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
     </SectionContent>
   );
 };

interface/src/app/settings/NTPSettings.tsx

@@ -36,10 +36,10 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NTPSettingsType, Time } from 'types';
 import { formatLocalDateTime, updateValueDirty, useRest } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
 
-import { TIME_ZONES, selectedTimeZone, timeZoneSelectItems } from './TZ';
+import { TIME_ZONES, selectedTimeZone, useTimeZoneSelectItems } from './TZ';
 
 const NTPSettings = () => {
   const {
@@ -61,9 +61,16 @@ const NTPSettings = () => {
   const { LL } = useI18nContext();
   useLayoutTitle('NTP');
 
+  const timeZoneItems = useTimeZoneSelectItems();
+
+  const selectedTzValue = data
+    ? selectedTimeZone(data.tz_label, data.tz_format)
+    : undefined;
+
   const [localTime, setLocalTime] = useState<string>('');
   const [settingTime, setSettingTime] = useState<boolean>(false);
   const [processing, setProcessing] = useState<boolean>(false);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
   const { send: updateTime } = useRequest(
     (local_time: Time) => NTPApi.updateTime(local_time),
@@ -73,14 +80,12 @@ const NTPSettings = () => {
   );
 
   const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
     dirtyFlags,
     setDirtyFlags,
     updateDataValue as (value: unknown) => void
   );
 
-  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-
   const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) =>
     setLocalTime(event.target.value);
 
@@ -92,79 +97,28 @@ const NTPSettings = () => {
   const configureTime = async () => {
     setProcessing(true);
 
-    await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) })
-      .then(async () => {
+    try {
+      await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) });
       toast.success(LL.TIME_SET());
       setSettingTime(false);
       await loadData();
-      })
-      .catch(() => {
+    } catch {
       toast.error(LL.PROBLEM_UPDATING());
-      })
-      .finally(() => {
+    } finally {
       setProcessing(false);
-      });
+    }
   };
 
-  const renderSetTimeDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={settingTime}
-      onClose={() => setSettingTime(false)}
-    >
-      <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
-      <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
-          <Typography variant="body2">{LL.SET_TIME_TEXT()}</Typography>
-        </Box>
-        <TextField
-          label={LL.LOCAL_TIME(0)}
-          type="datetime-local"
-          value={localTime}
-          onChange={updateLocalTime}
-          disabled={processing}
-          fullWidth
-          slotProps={{
-            inputLabel: {
-              shrink: true
-            }
-          }}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setSettingTime(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<AccessTimeIcon />}
-          variant="outlined"
-          onClick={configureTime}
-          disabled={processing}
-          color="primary"
-        >
-          {LL.UPDATE()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
+  const handleCloseSetTime = () => setSettingTime(false);
 
   const validateAndSubmit = async () => {
+    if (!data) return;
     try {
       setFieldErrors(undefined);
       await validate(NTP_SETTINGS_VALIDATOR, data);
       await saveData();
     } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
   };
 
@@ -177,6 +131,11 @@ const NTPSettings = () => {
     updateFormValue(event);
   };
 
+  const renderContent = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    }
+
     return (
       <>
         <BlockFormControlLabel
@@ -205,18 +164,18 @@ const NTPSettings = () => {
           label={LL.TIME_ZONE()}
           fullWidth
           variant="outlined"
-          value={selectedTimeZone(data.tz_label, data.tz_format)}
+          value={selectedTzValue}
           onChange={changeTimeZone}
           margin="normal"
           select
         >
           <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
-          {timeZoneSelectItems()}
+          {timeZoneItems}
         </ValidatedTextField>
 
-        <Box display="flex" flexWrap="wrap">
+        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
           {!data.enabled && !dirtyFlags.length && (
-            <Box flexWrap="nowrap" whiteSpace="nowrap">
+            <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
               <ButtonRow>
                 <Button
                   onClick={openSetTime}
@@ -230,7 +189,6 @@ const NTPSettings = () => {
             </Box>
           )}
         </Box>
-        {renderSetTimeDialog()}
 
         {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
@@ -263,7 +221,47 @@ const NTPSettings = () => {
   return (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
+      {renderContent()}
+      <Dialog sx={dialogStyle} open={settingTime} onClose={handleCloseSetTime}>
+        <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
+        <DialogContent dividers>
+          <Typography color="warning" variant="body2">
+            {LL.SET_TIME_TEXT()}
+          </Typography>
+          <TextField
+            label={LL.LOCAL_TIME(0)}
+            type="datetime-local"
+            value={localTime}
+            onChange={updateLocalTime}
+            disabled={processing}
+            fullWidth
+            slotProps={{
+              inputLabel: {
+                shrink: true
+              }
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={handleCloseSetTime}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<AccessTimeIcon />}
+            variant="outlined"
+            onClick={configureTime}
+            disabled={processing}
+            color="primary"
+          >
+            {LL.UPDATE()}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </SectionContent>
   );
 };

interface/src/app/settings/Settings.tsx

@@ -1,83 +1,43 @@
-import { useState } from 'react';
+import { useContext } from 'react';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CancelIcon from '@mui/icons-material/Cancel';
+import BuildIcon from '@mui/icons-material/Build';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import LockIcon from '@mui/icons-material/Lock';
-import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TuneIcon from '@mui/icons-material/Tune';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  List
-} from '@mui/material';
+import { List } from '@mui/material';
 
-import { API } from 'api/app';
-
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import type { APIcall } from 'app/main/types';
 import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
+import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const Settings = () => {
   const { LL } = useI18nContext();
+  const { versions } = useContext(AuthenticatedContext);
   useLayoutTitle(LL.SETTINGS(0));
 
-  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  const doFormat = async () => {
-    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
-      setConfirmFactoryReset(false);
-    });
-  };
-
-  const renderFactoryResetDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmFactoryReset}
-      onClose={() => setConfirmFactoryReset(false)}
-    >
-      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmFactoryReset(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={doFormat}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
+  const upgradeAvailable = versions?.current?.upgradeable ?? false;
+  const firmwareText = versions?.current?.version
+    ? `v${versions.current.version}${upgradeAvailable ? ` (${LL.UPDATE_AVAILABLE()})` : ''}`
+    : '';
 
   return (
     <SectionContent>
       <List>
+        <ListMenuItem
+          icon={BuildIcon}
+          bgcolor="#72caf9"
+          label="EMS-ESP Firmware"
+          text={firmwareText}
+          to="/settings/version"
+          badge={upgradeAvailable}
+        />
+
         <ListMenuItem
           icon={TuneIcon}
           bgcolor="#134ba2"
@@ -141,27 +101,6 @@ const Settings = () => {
           to="downloadUpload"
         />
       </List>
-
-      {renderFactoryResetDialog()}
-
-      <Divider />
-
-      <Box
-        mt={2}
-        display="flex"
-        justifyContent="flex-end"
-        flexWrap="nowrap"
-        whiteSpace="nowrap"
-      >
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={() => setConfirmFactoryReset(true)}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </Box>
     </SectionContent>
   );
 };

interface/src/app/settings/TZ.tsx

@@ -1,8 +1,6 @@
 import { MenuItem } from '@mui/material';
 
-type TimeZones = Record<string, string>;
-
-export const TIME_ZONES: TimeZones = {
+export const TIME_ZONES: Record<string, string> = {
   'Africa/Abidjan': 'GMT0',
   'Africa/Accra': 'GMT0',
   'Africa/Addis_Ababa': 'EAT-3',
@@ -465,14 +463,23 @@ export const TIME_ZONES: TimeZones = {
   'Pacific/Wallis': 'UNK-12'
 };
 
+// Pre-compute sorted timezone labels for better performance
+export const TIME_ZONE_LABELS = Object.keys(TIME_ZONES).sort();
+
 export function selectedTimeZone(label: string, format: string) {
   return TIME_ZONES[label] === format ? label : undefined;
 }
 
-export function timeZoneSelectItems() {
-  return Object.keys(TIME_ZONES).map((label) => (
+const precomputedTimeZoneItems = TIME_ZONE_LABELS.map((label) => (
   <MenuItem key={label} value={label}>
     {label}
   </MenuItem>
 ));
+
+export function useTimeZoneSelectItems() {
+  return precomputedTimeZoneItems;
+}
+
+export function timeZoneSelectItems() {
+  return precomputedTimeZoneItems;
 }

interface/src/app/settings/Version.tsx

@@ -0,0 +1,958 @@
+import { memo, useContext, useMemo, useState } from 'react';
+import { Link } from 'react-router';
+import { toast } from 'react-toastify';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
+import CheckIcon from '@mui/icons-material/Done';
+import DownloadIcon from '@mui/icons-material/GetApp';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography
+} from '@mui/material';
+
+import * as SystemApi from 'api/system';
+import { API, callAction } from 'api/app';
+
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
+import type { APIcall } from 'app/main/types';
+import SystemMonitor from 'app/status/SystemMonitor';
+import {
+  FormLoader,
+  SectionContent,
+  SingleUpload,
+  useLayoutTitle
+} from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+import type { TranslationFunctions } from 'i18n/i18n-types';
+import type { VersionInfo } from 'types';
+import { prettyDateTime } from 'utils/time';
+
+// Constants moved outside component to avoid recreation
+const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
+const STABLE_RELNOTES_URL =
+  'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
+const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
+const DEV_RELNOTES_URL =
+  'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
+
+// Types for better type safety
+interface PartitionData {
+  partition: string;
+  version: string;
+  install_date?: string;
+  size: number;
+}
+
+interface VersionData {
+  emsesp_version: string;
+  arduino_version: string;
+  esp_platform: string;
+  flash_chip_size: number;
+  psram: boolean;
+  build_flags?: string;
+  partition: string;
+  partitions: PartitionData[];
+  developer_mode: boolean;
+}
+
+// Memoized components for better performance
+const VersionInfoDialog = memo(
+  ({
+    showVersionInfo,
+    latestVersion,
+    latestDevVersion,
+    partitionVersion,
+    partition,
+    currentPartition,
+    size,
+    locale,
+    LL,
+    onClose
+  }: {
+    showVersionInfo: number;
+    latestVersion: VersionInfo | undefined;
+    latestDevVersion: VersionInfo | undefined;
+    partitionVersion: VersionInfo | undefined;
+    partition: string;
+    currentPartition: string;
+    size: number;
+    locale: string;
+    LL: TranslationFunctions;
+    onClose: () => void;
+  }) => {
+    if (showVersionInfo === 0) return null;
+
+    const isStable = showVersionInfo === 1;
+    const isDev = showVersionInfo === 2;
+    const isPartition = showVersionInfo === 3;
+
+    const version = isStable
+      ? latestVersion
+      : isDev
+        ? latestDevVersion
+        : partitionVersion;
+    const relNotesUrl = isStable
+      ? STABLE_RELNOTES_URL
+      : isDev
+        ? DEV_RELNOTES_URL
+        : '';
+
+    return (
+      <Dialog sx={dialogStyle} open={showVersionInfo !== 0} onClose={onClose}>
+        <DialogTitle>{LL.FIRMWARE_VERSION_INFO()}</DialogTitle>
+        <DialogContent dividers>
+          <Table size="small" sx={{ borderCollapse: 'collapse', minWidth: 0 }}>
+            <TableBody>
+              <TableRow sx={{ height: 24, borderBottom: 'none' }}>
+                <TableCell
+                  component="th"
+                  scope="row"
+                  sx={{
+                    color: 'lightblue',
+                    borderBottom: 'none',
+                    pr: 1,
+                    py: 0.5,
+                    fontSize: 13
+                  }}
+                >
+                  {LL.VERSION()}
+                </TableCell>
+                <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
+                  {isPartition
+                    ? typeof version === 'string'
+                      ? version
+                      : version?.version
+                    : version?.version}
+                </TableCell>
+              </TableRow>
+              <TableRow sx={{ height: 24, borderBottom: 'none' }}>
+                <TableCell
+                  component="th"
+                  scope="row"
+                  sx={{
+                    color: 'lightblue',
+                    borderBottom: 'none',
+                    pr: 1,
+                    py: 0.5,
+                    fontSize: 13,
+                    width: 140
+                  }}
+                >
+                  {isPartition ? LL.TYPE(0) : LL.RELEASE_TYPE()}
+                </TableCell>
+                <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
+                  {partition === currentPartition && LL.ACTIVE() + ' '}
+                  {isStable
+                    ? LL.STABLE()
+                    : isDev
+                      ? LL.DEVELOPMENT()
+                      : 'Partition ' + LL.VERSION()}
+                </TableCell>
+              </TableRow>
+              {isPartition && (
+                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    sx={{
+                      color: 'lightblue',
+                      borderBottom: 'none',
+                      pr: 1,
+                      py: 0.5,
+                      fontSize: 13
+                    }}
+                  >
+                    Partition
+                  </TableCell>
+                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
+                    {partition}
+                  </TableCell>
+                </TableRow>
+              )}
+              {isPartition && (
+                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    sx={{
+                      color: 'lightblue',
+                      borderBottom: 'none',
+                      pr: 1,
+                      py: 0.5,
+                      fontSize: 13
+                    }}
+                  >
+                    Size
+                  </TableCell>
+                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
+                    {size} KB
+                  </TableCell>
+                </TableRow>
+              )}
+              {version && version.date && (
+                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
+                  <TableCell
+                    component="th"
+                    scope="row"
+                    sx={{
+                      color: 'lightblue',
+                      borderBottom: 'none',
+                      pr: 1,
+                      py: 0.5,
+                      fontSize: 13
+                    }}
+                  >
+                    {isPartition ? 'Install Date' : 'Build Date'}
+                  </TableCell>
+                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
+                    {prettyDateTime(locale, new Date(version.date))}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </DialogContent>
+        <DialogActions>
+          {!isPartition && (
+            <Button
+              variant="outlined"
+              component="a"
+              href={relNotesUrl}
+              target="_blank"
+              color="primary"
+            >
+              Changelog
+            </Button>
+          )}
+          <Button variant="outlined" onClick={onClose} color="secondary">
+            {LL.CLOSE()}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+);
+
+const InstallDialog = memo(
+  ({
+    openInstallDialog,
+    fetchDevVersion,
+    latestVersion,
+    latestDevVersion,
+    upgradeImportantMessageType,
+    downloadOnly,
+    platform,
+    LL,
+    onClose,
+    onInstall
+  }: {
+    openInstallDialog: boolean;
+    fetchDevVersion: boolean;
+    latestVersion: VersionInfo | undefined;
+    latestDevVersion: VersionInfo | undefined;
+    upgradeImportantMessageType: number;
+    downloadOnly: boolean;
+    platform: string;
+    LL: TranslationFunctions;
+    onClose: () => void;
+    onInstall: (url: string) => void;
+  }) => {
+    const binURL = (() => {
+      if (!latestVersion || !latestDevVersion) return '';
+      const version = fetchDevVersion ? latestDevVersion : latestVersion;
+      const filename = `EMS-ESP-${version.version.replaceAll('.', '_')}-${platform}.bin`;
+      return fetchDevVersion
+        ? `${DEV_URL}${filename}`
+        : `${STABLE_URL}v${version.version}/${filename}`;
+    })();
+
+    return (
+      <Dialog sx={dialogStyle} open={openInstallDialog} onClose={onClose}>
+        <DialogTitle>
+          {`${LL.INSTALL()} ${fetchDevVersion ? LL.DEVELOPMENT() : LL.STABLE()} Firmware`}
+        </DialogTitle>
+        <DialogContent dividers>
+          <Typography sx={{ mb: 2 }}>
+            {LL.INSTALL_VERSION(
+              downloadOnly ? LL.DOWNLOAD(1) : LL.INSTALL(),
+              fetchDevVersion ? latestDevVersion?.version : latestVersion?.version
+            )}
+          </Typography>
+          {upgradeImportantMessageType === 2 && LL.UPGRADE_IMPORTANT_MESSAGES_2()}
+          {upgradeImportantMessageType === 1 && (
+            <>
+              {LL.UPGRADE_IMPORTANT_MESSAGES_1()}
+              <Typography sx={{ mt: 2 }}>
+                <Link to="/settings/downloadUpload" style={{ color: 'lightblue' }}>
+                  {LL.DOWNLOAD_SYSTEM_BACKUP()}
+                </Link>
+              </Typography>
+            </>
+          )}
+          <Typography sx={{ mt: 2 }}>
+            <Link
+              to="https://docs.emsesp.org/FAQ#upgrading-the-firmware"
+              target="_blank"
+              rel="noreferrer"
+              style={{ color: 'lightblue' }}
+            >
+              {LL.ONLINE_HELP()}
+            </Link>
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={onClose}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<DownloadIcon />}
+            variant="outlined"
+            onClick={onClose}
+            color="primary"
+          >
+            <Link
+              to={binURL}
+              target="_blank"
+              rel="noreferrer"
+              style={{ color: 'lightblue', textDecoration: 'none' }}
+            >
+              {LL.DOWNLOAD(0)}
+            </Link>
+          </Button>
+          {!downloadOnly && (
+            <Button
+              startIcon={<WarningIcon color="warning" />}
+              variant="outlined"
+              onClick={() => onInstall(binURL)}
+              color="primary"
+            >
+              {LL.INSTALL()}
+            </Button>
+          )}
+        </DialogActions>
+      </Dialog>
+    );
+  }
+);
+
+const InstallPartitionDialog = memo(
+  ({
+    openInstallPartitionDialog,
+    version,
+    partition,
+    LL,
+    onClose,
+    onInstall
+  }: {
+    openInstallPartitionDialog: boolean;
+    version: string;
+    partition: string;
+    LL: TranslationFunctions;
+    onClose: () => void;
+    onInstall: (partition: string) => void;
+  }) => {
+    return (
+      <Dialog sx={dialogStyle} open={openInstallPartitionDialog} onClose={onClose}>
+        <DialogTitle>
+          {LL.INSTALL()} {LL.STORED_VERSIONS()}
+        </DialogTitle>
+        <DialogContent dividers>
+          <Typography sx={{ mb: 2 }}>
+            {LL.INSTALL_VERSION(LL.INSTALL(), version)}
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={onClose}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+
+          <Button
+            startIcon={<WarningIcon color="warning" />}
+            variant="outlined"
+            onClick={() => onInstall(partition)}
+            color="primary"
+          >
+            {LL.INSTALL()}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+);
+
+// Helper function moved outside component
+const getPlatform = (data: VersionData): string => {
+  return `${data.esp_platform}-${data.flash_chip_size >= 16384 ? '16MB' : '4MB'}${data.psram ? '+' : ''}`;
+};
+
+const Version = () => {
+  const { LL, locale } = useI18nContext();
+  const { me, versions } = useContext(AuthenticatedContext);
+
+  const [restarting, setRestarting] = useState<boolean>(false);
+  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
+  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
+  const [openInstallDialog, setOpenInstallDialog] = useState<boolean>(false);
+
+  const [partitionVersion, setPartitionVersion] = useState<VersionInfo | undefined>(
+    undefined
+  );
+  const [partition, setPartition] = useState<string>('');
+  const [openInstallPartitionDialog, setOpenInstallPartitionDialog] =
+    useState<boolean>(false);
+
+  const [fetchDevVersion, setFetchDevVersion] = useState<boolean>(false);
+  const [downloadOnly, setDownloadOnly] = useState<boolean>(false);
+  const [showVersionInfo, setShowVersionInfo] = useState<number>(0); // 1 = stable, 2 = dev, 3 = partition
+  const [firmwareSize, setFirmwareSize] = useState<number>(0);
+
+  const latestVersion = useMemo<VersionInfo | undefined>(
+    () =>
+      versions?.stable
+        ? { version: versions.stable.version, date: versions.stable.date }
+        : undefined,
+    [versions?.stable]
+  );
+  const latestDevVersion = useMemo<VersionInfo | undefined>(
+    () =>
+      versions?.dev
+        ? { version: versions.dev.version, date: versions.dev.date }
+        : undefined,
+    [versions?.dev]
+  );
+  const usingDevVersion = versions?.current?.type === 'dev';
+  const stableUpgradeAvailable = versions?.stable?.upgradeable ?? false;
+  const devUpgradeAvailable = versions?.dev?.upgradeable ?? false;
+  const internetLive = Boolean(versions?.stable || versions?.dev);
+
+  const { send: sendSetPartition } = useRequest(
+    (partition: string) => callAction({ action: 'setPartition', param: partition }),
+    { immediate: false }
+  ).onError((error) => {
+    toast.error(String(error.error?.message || 'An error occurred'));
+  });
+
+  const {
+    data,
+    send: loadData,
+    error
+  } = useRequest(SystemApi.readSystemStatus).onSuccess((event) => {
+    const systemData = event.data as VersionData;
+    if (systemData.arduino_version.startsWith('Tasmota')) {
+      setDownloadOnly(true);
+    }
+  });
+
+  const { send: sendUploadURL } = useRequest(
+    (url: string) => callAction({ action: 'uploadURL', param: url }),
+    { immediate: false }
+  );
+
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  });
+
+  const [upgradeImportantMessageType, setUpgradeImportantMessageType] =
+    useState<number>(0);
+
+  const { send: checkUpgradeImportantMessages } = useRequest(
+    (version: string) =>
+      callAction({ action: 'upgradeImportantMessages', param: version }),
+    {
+      immediate: false
+    }
+  )
+    .onSuccess((event) => {
+      const upgradeImportantMessageType_n = (
+        event.data as { upgradeImportantMessageType: number }
+      ).upgradeImportantMessageType;
+      setUpgradeImportantMessageType(upgradeImportantMessageType_n);
+    })
+    .onError((error) => {
+      toast.error(String(error.error?.message || 'An error occurred'));
+    });
+
+  const platform = data ? getPlatform(data) : '';
+
+  const otherPartitions =
+    data?.partitions.filter((p) => p.partition !== data.partition) ?? [];
+
+  const setPartitionVersionInfo = (partition: string) => {
+    setShowVersionInfo(3);
+    const partitionData = data?.partitions.find((p) => p.partition === partition);
+    if (partitionData) {
+      setPartitionVersion({
+        version: partitionData.version,
+        date: partitionData.install_date ?? ''
+      });
+      setPartition(partitionData.partition);
+      setFirmwareSize(partitionData.size);
+    }
+  };
+
+  const doRestart = async () => {
+    setConfirmRestart(false);
+    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+    setRestarting(true);
+  };
+
+  const doFormat = async () => {
+    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
+      setRestarting(true);
+      setConfirmFactoryReset(false);
+    });
+  };
+
+  const handleFactoryResetClose = () => setConfirmFactoryReset(false);
+  const handleFactoryResetClick = () => setConfirmFactoryReset(true);
+  const handleRestartClose = () => setConfirmRestart(false);
+  const handleRestartClick = () => setConfirmRestart(true);
+
+  const installFirmwareURL = async (url: string) => {
+    await sendUploadURL(url).catch((error: Error) => {
+      toast.error(error.message);
+    });
+    await doRestart();
+  };
+
+  const installPartitionFirmware = async (partition: string) => {
+    await sendSetPartition(partition).catch((error: Error) => {
+      toast.error(error.message);
+    });
+    setRestarting(true);
+  };
+
+  const showPartitionDialog = (
+    version: string,
+    partition: string,
+    install_date: string
+  ) => {
+    setOpenInstallPartitionDialog(true);
+    setPartitionVersion({ version: version, date: install_date });
+    setPartition(partition);
+  };
+
+  const showFirmwareDialog = (useDevVersion: boolean) => {
+    setFetchDevVersion(useDevVersion);
+    const targetVersion = useDevVersion
+      ? latestDevVersion?.version
+      : latestVersion?.version;
+    if (targetVersion) {
+      void checkUpgradeImportantMessages(targetVersion);
+    }
+    setOpenInstallDialog(true);
+  };
+
+  const closeInstallDialog = () => setOpenInstallDialog(false);
+  const closeInstallPartitionDialog = () => setOpenInstallPartitionDialog(false);
+
+  const handleVersionInfoClose = () => {
+    setShowVersionInfo(0);
+    setPartitionVersion(undefined);
+    setPartition('');
+  };
+
+  useLayoutTitle('EMS-ESP Firmware');
+
+  const showButtons = (showingDev: boolean) => {
+    const choice = showingDev
+      ? !usingDevVersion
+        ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT())
+        : devUpgradeAvailable
+          ? LL.UPDATE_AVAILABLE()
+          : undefined
+      : usingDevVersion
+        ? LL.SWITCH_RELEASE_TYPE(LL.STABLE())
+        : stableUpgradeAvailable
+          ? LL.UPDATE_AVAILABLE()
+          : undefined;
+
+    if (!choice) {
+      return (
+        <>
+          <CheckIcon
+            color="success"
+            sx={{ verticalAlign: 'middle', ml: 0.5, mr: 0.5 }}
+          />
+          <span style={{ color: '#66bb6a', fontSize: '0.8em' }}>
+            {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())}
+          </span>
+          <Button
+            sx={{ ml: 1 }}
+            variant="outlined"
+            size="small"
+            onClick={() => showFirmwareDialog(showingDev)}
+          >
+            {LL.REINSTALL()}
+          </Button>
+        </>
+      );
+    }
+
+    if (!me.admin) return null;
+
+    const isUpdateAvailable = choice === LL.UPDATE_AVAILABLE();
+
+    return (
+      <Button
+        sx={{ ml: 1 }}
+        variant="outlined"
+        color={isUpdateAvailable ? 'success' : 'warning'}
+        size="small"
+        onClick={() => showFirmwareDialog(showingDev)}
+      >
+        {choice}
+        {isUpdateAvailable && (
+          <Box
+            component="span"
+            aria-label="update available"
+            sx={{
+              display: 'inline-block',
+              width: 8,
+              height: 8,
+              ml: 1,
+              verticalAlign: 'middle',
+              borderRadius: '50%',
+              backgroundColor: '#ffeb3b',
+              boxShadow: '0 0 6px rgba(255, 235, 59, 0.8)'
+            }}
+          />
+        )}
+      </Button>
+    );
+  };
+
+  if (restarting) {
+    return <SystemMonitor />;
+  }
+
+  if (!data) {
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
+      <Box sx={{ p: 2, border: '1px solid #565656', borderRadius: 2 }}>
+        <Typography sx={{ mb: 1 }} variant="h6" color="primary">
+          {LL.THIS_VERSION()}
+        </Typography>
+
+        <Grid
+          container
+          direction="row"
+          sx={{
+            justifyContent: 'flex-start',
+            alignItems: 'baseline'
+          }}
+        >
+          <Grid size={{ xs: 4, md: 2 }}>
+            <Typography color="secondary">{LL.VERSION()}</Typography>
+          </Grid>
+          <Grid size={{ xs: 8, md: 10 }}>
+            <Typography>
+              {data.emsesp_version}
+              {data.build_flags && (
+                <Typography variant="caption">
+                  &nbsp; &#40;{data.build_flags}&#41;
+                </Typography>
+              )}
+              <IconButton
+                onClick={() => setPartitionVersionInfo(data.partition)}
+                aria-label={LL.FIRMWARE_VERSION_INFO()}
+              >
+                <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+              </IconButton>
+            </Typography>
+          </Grid>
+
+          <Grid size={{ xs: 4, md: 2 }}>
+            <Typography color="secondary">{LL.PLATFORM()}</Typography>
+          </Grid>
+          <Grid size={{ xs: 8, md: 10 }}>
+            <Typography>
+              {platform}
+              <Typography variant="caption">
+                &nbsp; &#40;
+                {data.psram ? (
+                  <CheckIcon
+                    color="success"
+                    sx={{
+                      fontSize: '1.5em',
+                      verticalAlign: 'middle'
+                    }}
+                  />
+                ) : (
+                  <CloseIcon
+                    color="error"
+                    sx={{
+                      fontSize: '1.5em',
+                      verticalAlign: 'middle'
+                    }}
+                  />
+                )}
+                PSRAM&#41;
+              </Typography>
+            </Typography>
+          </Grid>
+        </Grid>
+
+        {internetLive ? (
+          <>
+            <Typography sx={{ mt: 4, mb: 1 }} variant="h6" color="primary">
+              {LL.AVAILABLE_VERSION()}
+            </Typography>
+
+            <Grid
+              container
+              direction="row"
+              rowSpacing={1}
+              sx={{
+                justifyContent: 'flex-start',
+                alignItems: 'baseline'
+              }}
+            >
+              {otherPartitions.length > 0 && data.developer_mode && (
+                <>
+                  <Grid size={{ xs: 4, md: 2 }}>
+                    <Typography color="secondary">{LL.STORED_VERSIONS()}</Typography>
+                  </Grid>
+                  <Grid size={{ xs: 8, md: 10 }}>
+                    {otherPartitions.map((partition) => (
+                      <Typography key={partition.partition} sx={{ mb: 1 }}>
+                        {partition.version}
+                        <IconButton
+                          onClick={() =>
+                            setPartitionVersionInfo(partition.partition)
+                          }
+                          aria-label={LL.FIRMWARE_VERSION_INFO()}
+                        >
+                          <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                        </IconButton>
+                        <Button
+                          sx={{ ml: 0 }}
+                          variant="outlined"
+                          size="small"
+                          onClick={() =>
+                            showPartitionDialog(
+                              partition.version,
+                              partition.partition,
+                              partition.install_date ?? ''
+                            )
+                          }
+                        >
+                          {LL.INSTALL()}
+                        </Button>
+                      </Typography>
+                    ))}
+                  </Grid>
+                </>
+              )}
+              <Grid size={{ xs: 4, md: 2 }}>
+                <Typography color="secondary">{LL.STABLE()}</Typography>
+              </Grid>
+              <Grid size={{ xs: 8, md: 10 }}>
+                <Typography>
+                  {latestVersion?.version}
+                  <IconButton
+                    onClick={() => setShowVersionInfo(1)}
+                    aria-label={LL.FIRMWARE_VERSION_INFO()}
+                  >
+                    <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                  </IconButton>
+                  {showButtons(false)}
+                </Typography>
+              </Grid>
+
+              <Grid size={{ xs: 4, md: 2 }}>
+                <Typography color="secondary">{LL.DEVELOPMENT()}</Typography>
+              </Grid>
+              <Grid size={{ xs: 8, md: 10 }}>
+                <Typography>
+                  {latestDevVersion?.version}
+                  <IconButton
+                    onClick={() => setShowVersionInfo(2)}
+                    aria-label={LL.FIRMWARE_VERSION_INFO()}
+                  >
+                    <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
+                  </IconButton>
+                  {showButtons(true)}
+                </Typography>
+              </Grid>
+            </Grid>
+          </>
+        ) : (
+          <Typography sx={{ mt: 2 }} color="warning">
+            <WarningIcon color="warning" sx={{ verticalAlign: 'middle', mr: 2 }} />
+            {LL.INTERNET_CONNECTION_REQUIRED()}
+          </Typography>
+        )}
+        {me.admin && (
+          <>
+            <VersionInfoDialog
+              showVersionInfo={showVersionInfo}
+              latestVersion={latestVersion}
+              latestDevVersion={latestDevVersion}
+              partitionVersion={partitionVersion}
+              locale={locale}
+              partition={partition}
+              currentPartition={data?.partition ?? ''}
+              size={firmwareSize}
+              LL={LL}
+              onClose={handleVersionInfoClose}
+            />
+            <InstallDialog
+              openInstallDialog={openInstallDialog}
+              fetchDevVersion={fetchDevVersion}
+              latestVersion={latestVersion}
+              latestDevVersion={latestDevVersion}
+              upgradeImportantMessageType={upgradeImportantMessageType}
+              downloadOnly={downloadOnly}
+              platform={platform}
+              LL={LL}
+              onClose={closeInstallDialog}
+              onInstall={installFirmwareURL}
+            />
+            <InstallPartitionDialog
+              openInstallPartitionDialog={openInstallPartitionDialog}
+              version={partitionVersion?.version || ''}
+              partition={partition}
+              LL={LL}
+              onClose={closeInstallPartitionDialog}
+              onInstall={installPartitionFirmware}
+            />
+            <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+              {LL.UPLOAD()}
+            </Typography>
+            <SingleUpload doRestart={doRestart} />
+          </>
+        )}
+      </Box>
+
+      {me.admin && (
+        <>
+          <Dialog
+            sx={dialogStyle}
+            open={confirmFactoryReset}
+            onClose={handleFactoryResetClose}
+          >
+            <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+            <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
+            <DialogActions>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                onClick={handleFactoryResetClose}
+                color="secondary"
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<SettingsBackupRestoreIcon />}
+                variant="outlined"
+                onClick={doFormat}
+                color="error"
+              >
+                {LL.FACTORY_RESET()}
+              </Button>
+            </DialogActions>
+          </Dialog>
+
+          <Dialog
+            sx={dialogStyle}
+            open={confirmRestart}
+            onClose={handleRestartClose}
+          >
+            <DialogTitle>{LL.RESTART()}</DialogTitle>
+            <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
+            <DialogActions>
+              <Button
+                startIcon={<CancelIcon />}
+                variant="outlined"
+                onClick={handleRestartClose}
+                color="secondary"
+              >
+                {LL.CANCEL()}
+              </Button>
+              <Button
+                startIcon={<PowerSettingsNewIcon />}
+                variant="outlined"
+                onClick={doRestart}
+                color="error"
+              >
+                {LL.RESTART()}
+              </Button>
+            </DialogActions>
+          </Dialog>
+
+          <Box
+            sx={{
+              mt: 2,
+              display: 'flex',
+              justifyContent: 'flex-end',
+              flexWrap: 'nowrap',
+              whiteSpace: 'nowrap',
+              gap: 1
+            }}
+          >
+            <Button
+              startIcon={<PowerSettingsNewIcon />}
+              variant="outlined"
+              onClick={handleRestartClick}
+              color="error"
+            >
+              {LL.RESTART()}
+            </Button>
+            {data.developer_mode && (
+              <Button
+                startIcon={<SettingsBackupRestoreIcon />}
+                variant="outlined"
+                onClick={handleFactoryResetClick}
+                color="error"
+              >
+                {LL.FACTORY_RESET()}
+              </Button>
+            )}
+          </Box>
+        </>
+      )}
+    </SectionContent>
+  );
+};
+
+export default memo(Version);

interface/src/app/settings/network/Network.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { memo, useState } from 'react';
 import {
   Navigate,
   Route,
@@ -28,8 +28,7 @@ const Network = () => {
     [
       {
         path: '/settings/network/settings',
-        element: <NetworkSettings />,
-        dog: 'woof'
+        element: <NetworkSettings />
       },
       { path: '/settings/network/scan', element: <WiFiNetworkScanner /> }
     ],
@@ -41,26 +40,23 @@ const Network = () => {
 
   const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();
 
-  const selectNetwork = useCallback(
-    (network: WiFiNetwork) => {
+  const selectNetwork = (network: WiFiNetwork) => {
     setSelectedNetwork(network);
     void navigate('/settings/network/settings');
-    },
-    [navigate]
-  );
+  };
 
-  const deselectNetwork = useCallback(() => {
+  const deselectNetwork = () => {
     setSelectedNetwork(undefined);
-  }, []);
+  };
 
-  return (
-    <WiFiConnectionContext.Provider
-      value={{
+  const contextValue = {
     ...(selectedNetwork && { selectedNetwork }),
     selectNetwork,
     deselectNetwork
-      }}
-    >
+  };
+
+  return (
+    <WiFiConnectionContext.Provider value={contextValue}>
       <RouterTabs value={routerTab}>
         <Tab
           value="/settings/network/settings"
@@ -80,4 +76,4 @@ const Network = () => {
   );
 };
 
-export default Network;
+export default memo(Network);

interface/src/app/settings/network/NetworkSettings.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -40,7 +40,7 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NetworkSettingsType } from 'types';
 import { updateValueDirty, useRest } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 import { createNetworkSettingsValidator } from 'validators/network';
 
 import SystemMonitor from '../../status/SystemMonitor';
@@ -89,7 +89,7 @@ const NetworkSettings = () => {
             static_ip_config: false,
             bandwidth20: false,
             tx_power: 0,
-            nosleep: false,
+            nosleep: true,
             enableMDNS: true,
             enableCORS: false,
             CORSOrigin: '*'
@@ -109,23 +109,17 @@ const NetworkSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  useEffect(() => deselectNetwork, [deselectNetwork]);
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
-
-    const validateAndSubmit = async () => {
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
     try {
       setFieldErrors(undefined);
       await validate(createNetworkSettingsValidator(data), data);
       await saveData();
     } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
     }
     deselectNetwork();
-    };
+  }, [data, saveData, deselectNetwork]);
 
   const setCancel = async () => {
     deselectNetwork();
@@ -141,6 +135,11 @@ const NetworkSettings = () => {
     );
   };
 
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    }
+
     return (
       <>
         <Typography variant="h6" color="primary">
@@ -165,7 +164,7 @@ const NetworkSettings = () => {
                   selectedNetwork.bssid
                 }
               />
-              <IconButton onClick={setCancel}>
+              <IconButton onClick={setCancel} aria-label={LL.CANCEL()}>
                 <DeleteIcon />
               </IconButton>
             </ListItem>
@@ -174,7 +173,7 @@ const NetworkSettings = () => {
           <ValidatedTextField
             fieldErrors={fieldErrors || {}}
             name="ssid"
-            label={'SSID (' + LL.NETWORK_BLANK_SSID() + ')'}
+            label="SSID"
             fullWidth
             variant="outlined"
             value={data.ssid}
@@ -356,8 +355,9 @@ const NetworkSettings = () => {
           </>
         )}
         {restartNeeded && (
-          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
+          <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
             <Button
+              sx={{ ml: 2 }}
               startIcon={<PowerSettingsNewIcon />}
               variant="contained"
               color="error"
@@ -397,12 +397,14 @@ const NetworkSettings = () => {
     );
   };
 
-  return (
+  return restarting ? (
+    <SystemMonitor />
+  ) : (
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {restarting ? <SystemMonitor /> : content()}
+      {content()}
     </SectionContent>
   );
 };
 
-export default NetworkSettings;
+export default memo(NetworkSettings);

interface/src/app/settings/network/WiFiNetworkScanner.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import { Button } from '@mui/material';
@@ -73,4 +73,4 @@ const WiFiNetworkScanner = () => {
   );
 };
 
-export default WiFiNetworkScanner;
+export default memo(WiFiNetworkScanner);

interface/src/app/settings/network/WiFiNetworkSelector.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -91,10 +91,10 @@ const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList })
   );
 
   if (networkList.networks.length === 0) {
-    return <MessageBox mt={2} mb={1} message={LL.NETWORK_NO_WIFI()} level="info" />;
+    return <MessageBox message={LL.NETWORK_NO_WIFI()} level="info" />;
   }
 
   return <List>{networkList.networks.map(renderNetwork)}</List>;
 };
 
-export default WiFiNetworkSelector;
+export default memo(WiFiNetworkSelector);

interface/src/app/settings/security/GenerateToken.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 
 import CloseIcon from '@mui/icons-material/Close';
 import {
@@ -40,7 +40,7 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
     if (open) {
       void generateToken();
     }
-  }, [open]);
+  }, [open, generateToken]);
 
   return (
     <Dialog
@@ -54,19 +54,27 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
       <DialogContent dividers>
         {token ? (
           <>
-            <MessageBox message={LL.ACCESS_TOKEN_TEXT()} level="info" my={2} />
-            <Box mt={2} mb={2}>
+            <MessageBox
+              message={LL.ACCESS_TOKEN_TEXT()}
+              level="info"
+              sx={{ mt: 2, mb: 2 }}
+            />
+            <Box sx={{ mt: 2, mb: 2 }}>
               <TextField
                 label="Token"
                 multiline
                 value={token.token}
                 fullWidth
-                contentEditable={false}
+                slotProps={{
+                  input: {
+                    readOnly: true
+                  }
+                }}
               />
             </Box>
           </>
         ) : (
-          <Box m={4} textAlign="center">
+          <Box sx={{ m: 4, textAlign: 'center' }}>
             <LinearProgress />
             <Typography variant="h6">{LL.GENERATING_TOKEN()}&hellip;</Typography>
           </Box>
@@ -86,4 +94,4 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
   );
 };
 
-export default GenerateToken;
+export default memo(GenerateToken);

interface/src/app/settings/security/ManageUsers.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useState } from 'react';
 import { useBlocker } from 'react-router';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -95,14 +95,10 @@ const ManageUsers = () => {
     `
   });
 
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
-
-    const noAdminConfigured = () => !data.users.find((u) => u.admin);
+  const noAdminConfigured = () => !data?.users.find((u) => u.admin);
 
   const removeUser = (toRemove: UserType) => {
+    if (!data) return;
     const users = data.users.filter((u) => u.username !== toRemove.username);
     updateDataValue({ ...data, users });
     setChanged(changed + 1);
@@ -127,7 +123,7 @@ const ManageUsers = () => {
   };
 
   const doneEditingUser = () => {
-      if (user) {
+    if (user && data) {
       const users = [
         ...data.users.filter(
           (u: { username: string }) => u.username !== user.username
@@ -140,11 +136,11 @@ const ManageUsers = () => {
     }
   };
 
-    const closeGenerateToken = () => {
+  const closeGenerateToken = useCallback(() => {
     setGeneratingToken(undefined);
-    };
+  }, []);
 
-    const generateToken = (username: string) => {
+  const generateTokenForUser = (username: string) => {
     setGeneratingToken(username);
   };
 
@@ -159,6 +155,11 @@ const ManageUsers = () => {
     setChanged(0);
   };
 
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    }
+
     interface UserType2 {
       id: string;
       username: string;
@@ -166,7 +167,6 @@ const ManageUsers = () => {
       admin: boolean;
     }
 
-    // add id to the type, needed for the table
     const user_table = data.users.map((u) => ({
       ...u,
       id: u.username
@@ -196,15 +196,24 @@ const ManageUsers = () => {
                     <Cell stiff>
                       <IconButton
                         size="small"
+                        aria-label={LL.GENERATING_TOKEN()}
                         disabled={!authenticatedContext.me.admin}
-                        onClick={() => generateToken(u.username)}
+                        onClick={() => generateTokenForUser(u.username)}
                       >
                         <VpnKeyIcon />
                       </IconButton>
-                      <IconButton size="small" onClick={() => removeUser(u)}>
+                      <IconButton
+                        size="small"
+                        onClick={() => removeUser(u)}
+                        aria-label={LL.REMOVE()}
+                      >
                         <DeleteIcon />
                       </IconButton>
-                      <IconButton size="small" onClick={() => editUser(u)}>
+                      <IconButton
+                        size="small"
+                        onClick={() => editUser(u)}
+                        aria-label={LL.EDIT()}
+                      >
                         <EditIcon />
                       </IconButton>
                     </Cell>
@@ -216,12 +225,16 @@ const ManageUsers = () => {
         </Table>
 
         {noAdminConfigured() && (
-          <MessageBox level="warning" message={LL.USER_WARNING()} my={2} />
+          <MessageBox
+            level="warning"
+            message={LL.USER_WARNING()}
+            sx={{ mt: 2, mb: 2 }}
+          />
         )}
 
-        <Box display="flex" flexWrap="wrap">
+        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
           {changed !== 0 && (
-            <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
+            <Box sx={{ flexGrow: 1, '& button': { mt: 2 } }}>
               <ButtonRow>
                 <Button
                   startIcon={<CancelIcon />}
@@ -246,7 +259,7 @@ const ManageUsers = () => {
               </ButtonRow>
             </Box>
           )}
-          <Box flexWrap="nowrap" whiteSpace="nowrap">
+          <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
             <ButtonRow>
               <Button
                 startIcon={<PersonAddIcon />}
@@ -286,4 +299,4 @@ const ManageUsers = () => {
   );
 };
 
-export default ManageUsers;
+export default memo(ManageUsers);

interface/src/app/settings/security/Security.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Navigate, Route, Routes, matchRoutes, useLocation } from 'react-router';
 
 import { Tab } from '@mui/material';
@@ -12,12 +13,17 @@ const Security = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SECURITY(0));
 
+  const location = useLocation();
+
   const matchedRoutes = matchRoutes(
     [
-      { path: '/settings/security/settings', element: <ManageUsers />, dog: 'woof' },
+      {
+        path: '/settings/security/settings',
+        element: <ManageUsers />
+      },
       { path: '/settings/security/users', element: <SecuritySettings /> }
     ],
-    useLocation()
+    location
   );
   const routerTab = matchedRoutes?.[0]?.route.path || false;
 
@@ -42,4 +48,4 @@ const Security = () => {
   );
 };
 
-export default Security;
+export default memo(Security);

interface/src/app/settings/security/SecuritySettings.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -19,7 +19,7 @@ import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { SecuritySettingsType } from 'types';
 import { updateValueDirty, useRest } from 'utils';
-import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';
+import { SECURITY_SETTINGS_VALIDATOR, ValidationError, validate } from 'validators';
 
 const SecuritySettings = () => {
   const { LL } = useI18nContext();
@@ -44,27 +44,28 @@ const SecuritySettings = () => {
   const authenticatedContext = useContext(AuthenticatedContext);
 
   const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
     dirtyFlags,
     setDirtyFlags,
     updateDataValue as (value: unknown) => void
   );
 
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
-    }
-
-    const validateAndSubmit = async () => {
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
     try {
       setFieldErrors(undefined);
       await validate(SECURITY_SETTINGS_VALIDATOR, data);
       await saveData();
       await authenticatedContext.refresh();
     } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+      setFieldErrors((error as ValidationError).fieldErrors);
+    }
+  }, [data, saveData, authenticatedContext]);
+
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
     }
-    };
 
     return (
       <>
@@ -78,7 +79,7 @@ const SecuritySettings = () => {
           onChange={updateFormValue}
           margin="normal"
         />
-        <MessageBox level="info" message={LL.SU_TEXT()} mt={1} />
+        <MessageBox level="info" message={LL.SU_TEXT()} sx={{ mt: 1 }} />
         {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
             <Button
@@ -115,4 +116,4 @@ const SecuritySettings = () => {
   );
 };
 
-export default SecuritySettings;
+export default memo(SecuritySettings);

interface/src/app/settings/security/User.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import type { FC } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -24,7 +24,7 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import type { UserType } from 'types';
 import { updateValue } from 'utils';
-import { validate } from 'validators';
+import { ValidationError, validate } from 'validators';
 
 interface UserFormProps {
   creating: boolean;
@@ -45,7 +45,14 @@ const User: FC<UserFormProps> = ({
 }) => {
   const { LL } = useI18nContext();
 
-  const updateFormValue = updateValue(setUser);
+  const updateFormValue = updateValue((updater) => {
+    setUser((prevState) => {
+      if (!prevState) return prevState;
+      return updater(
+        prevState as unknown as Record<string, unknown>
+      ) as unknown as UserType;
+    });
+  });
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
   const open = !!user;
 
@@ -62,7 +69,7 @@ const User: FC<UserFormProps> = ({
         await validate(validator, user);
         onDoneEditing();
       } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
+        setFieldErrors((error as ValidationError).fieldErrors);
       }
     }
   };
@@ -137,4 +144,4 @@ const User: FC<UserFormProps> = ({
   );
 };
 
-export default User;
+export default memo(User);

interface/src/app/status/APStatus.tsx

@@ -34,19 +34,10 @@ export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
   }
 };
 
-const APStatus = () => {
-  const { data, send: loadData, error } = useRequest(APApi.readAPStatus);
-
-  useInterval(() => {
-    void loadData();
-  });
-
-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.ACCESS_POINT(0));
-
-  const theme = useTheme();
-
-  const apStatus = ({ status }: APStatusType) => {
+const getApStatusText = (
+  status: APNetworkStatus,
+  LL: ReturnType<typeof useI18nContext>['LL']
+) => {
   switch (status) {
     case APNetworkStatus.ACTIVE:
       return LL.ACTIVE();
@@ -59,12 +50,27 @@ const APStatus = () => {
   }
 };
 
-  const content = () => {
+const APStatus = () => {
+  const { data, send: loadData, error } = useRequest(APApi.readAPStatus);
+  const { LL } = useI18nContext();
+  const theme = useTheme();
+
+  useLayoutTitle(LL.ACCESS_POINT(0));
+
+  useInterval(() => {
+    void loadData();
+  });
+
   if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
   return (
+    <SectionContent>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -72,19 +78,26 @@ const APStatus = () => {
               <SettingsInputAntennaIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={LL.STATUS_OF('')} secondary={apStatus(data)} />
+          <ListItemText
+            primary={LL.STATUS_OF('')}
+            secondary={getApStatusText(data.status, LL)}
+          />
         </ListItem>
+
         <Divider variant="inset" component="li" />
+
         <ListItem>
           <ListItemAvatar>
-            <Avatar>IP</Avatar>
+            <Avatar sx={{ bgcolor: 'primary.main' }}>IP</Avatar>
           </ListItemAvatar>
           <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
         </ListItem>
+
         <Divider variant="inset" component="li" />
+
         <ListItem>
           <ListItemAvatar>
-            <Avatar>
+            <Avatar sx={{ bgcolor: 'primary.main' }}>
               <DeviceHubIcon />
             </Avatar>
           </ListItemAvatar>
@@ -93,21 +106,22 @@ const APStatus = () => {
             secondary={data.mac_address}
           />
         </ListItem>
+
         <Divider variant="inset" component="li" />
+
         <ListItem>
           <ListItemAvatar>
-            <Avatar>
+            <Avatar sx={{ bgcolor: 'primary.main' }}>
               <ComputerIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={LL.AP_CLIENTS()} secondary={data.station_num} />
         </ListItem>
+
         <Divider variant="inset" component="li" />
       </List>
+    </SectionContent>
   );
 };
 
-  return <SectionContent>{content()}</SectionContent>;
-};
-
 export default APStatus;

interface/src/app/status/Activity.tsx

@@ -17,6 +17,12 @@ import { useInterval } from 'utils';
 import { readActivity } from '../../api/app';
 import type { Stat } from '../main/types';
 
+const QUALITY_COLORS = {
+  PERFECT: '#00FF7F',
+  WARNING: 'orange',
+  POOR: 'red'
+} as const;
+
 const SystemActivity = () => {
   const { data, send: loadData, error } = useRequest(readActivity);
 
@@ -77,21 +83,25 @@ const SystemActivity = () => {
       return;
     }
     if (stat.q === 100) {
-      return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
+      return <div style={{ color: QUALITY_COLORS.PERFECT }}>{stat.q}%</div>;
     }
     if (stat.q >= 95) {
-      return <div style={{ color: 'orange' }}>{stat.q}%</div>;
+      return <div style={{ color: QUALITY_COLORS.WARNING }}>{stat.q}%</div>;
     } else {
-      return <div style={{ color: 'red' }}>{stat.q}%</div>;
+      return <div style={{ color: QUALITY_COLORS.POOR }}>{stat.q}%</div>;
     }
   };
 
-  const content = () => {
   if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
   return (
+    <SectionContent>
       <Table
         data={{ nodes: data.stats }}
         theme={stats_theme}
@@ -120,10 +130,8 @@ const SystemActivity = () => {
           </>
         )}
       </Table>
+    </SectionContent>
   );
 };
 
-  return <SectionContent>{content()}</SectionContent>;
-};
-
 export default SystemActivity;

interface/src/app/status/HardwareStatus.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import AppsIcon from '@mui/icons-material/Apps';
 import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
 import DevicesIcon from '@mui/icons-material/Devices';
@@ -24,10 +26,61 @@ import { useInterval } from 'utils';
 
 import BBQKeesIcon from './bbqkees.svg';
 
+// Constants
+const AVATAR_COLORS = {
+  DEFAULT: '#5f9a5f',
+  BBQKEES: '#003289'
+} as const;
+
+const TEMP_THRESHOLD_CELSIUS = 90; // Temperature threshold to determine F vs C
+
 function formatNumber(num: number) {
   return new Intl.NumberFormat().format(num);
 }
 
+function formatTemperature(temp?: number): string {
+  if (!temp) return '';
+  const unit = temp > TEMP_THRESHOLD_CELSIUS ? 'F' : 'C';
+  return `, T: ${temp} °${unit}`;
+}
+
+function formatFlashSpeed(speed: number): string {
+  return (speed / 1000000).toFixed(0) + ' MHz';
+}
+
+function formatCPUCores(cores: number): string {
+  return cores === 1 ? 'single-core)' : 'dual-core)';
+}
+
+// Reusable component for hardware status list items
+interface HardwareListItemProps {
+  icon: ReactElement;
+  primary: string;
+  secondary: string;
+  avatarColor?: string;
+  customIcon?: ReactElement | undefined;
+}
+
+const HardwareListItem = ({
+  icon,
+  primary,
+  secondary,
+  avatarColor = AVATAR_COLORS.DEFAULT,
+  customIcon
+}: HardwareListItemProps) => (
+  <>
+    <ListItem>
+      <ListItemAvatar>
+        <Avatar sx={{ bgcolor: avatarColor, color: 'white' }}>
+          {customIcon || icon}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={primary} secondary={secondary} />
+    </ListItem>
+    <Divider variant="inset" component="li" />
+  </>
+);
+
 const HardwareStatus = () => {
   const { LL } = useI18nContext();
 
@@ -39,175 +92,72 @@ const HardwareStatus = () => {
     void loadData();
   });
 
-  const content = () => {
   if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
   return (
+    <SectionContent>
       <List>
-        <ListItem>
-          <ListItemAvatar>
-            {data.model ? (
-              <Avatar sx={{ bgcolor: '#003289', color: 'white' }}>
+        <HardwareListItem
+          icon={<TapAndPlayIcon />}
+          primary={`${LL.HARDWARE()} ${LL.DEVICE()}`}
+          secondary={data.model || data.cpu_type}
+          avatarColor={data.model ? AVATAR_COLORS.BBQKEES : AVATAR_COLORS.DEFAULT}
+          customIcon={
+            data.model ? (
               <img
                 alt="BBQKees"
                 src={BBQKeesIcon}
                 style={{ width: 16, verticalAlign: 'middle' }}
               />
-              </Avatar>
-            ) : (
-              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                <TapAndPlayIcon />
-              </Avatar>
-            )}
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.HARDWARE() + ' ' + LL.DEVICE()}
-            secondary={data.model ? data.model : data.cpu_type}
+            ) : undefined
+          }
         />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <DevicesIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
+        <HardwareListItem
+          icon={<DevicesIcon />}
           primary="SDK"
-            secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version}
+          secondary={`${data.arduino_version} / ESP-IDF ${data.sdk_version}`}
         />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <DeveloperBoardIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
+        <HardwareListItem
+          icon={<DeveloperBoardIcon />}
           primary="CPU"
-            secondary={
-              data.esp_platform +
-              '/' +
-              data.cpu_type +
-              ' (rev.' +
-              data.cpu_rev +
-              ', ' +
-              (data.cpu_cores === 1 ? 'single-core)' : 'dual-core)') +
-              ' @ ' +
-              data.cpu_freq_mhz +
-              ' Mhz' +
-              // bit of a hack : if the CPU temp is higher than 90 (=32 Fahrenheit if using Celsius), show F, otherwise C
-              (data.temperature
-                ? ', T: ' +
-                  data.temperature +
-                  ' °' +
-                  (data.temperature > 90 ? 'F' : 'C')
-                : '')
-            }
+          secondary={`${data.esp_platform}/${data.cpu_type} (rev.${data.cpu_rev}, ${formatCPUCores(data.cpu_cores)} @ ${data.cpu_freq_mhz} Mhz${formatTemperature(data.temperature)}`}
         />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <MemoryIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
+        <HardwareListItem
+          icon={<MemoryIcon />}
           primary={LL.FREE_MEMORY()}
-            secondary={
-              formatNumber(data.free_heap) +
-              ' KB (' +
-              formatNumber(data.max_alloc_heap) +
-              ' KB max alloc, ' +
-              formatNumber(data.free_caps) +
-              ' KB caps)'
-            }
+          secondary={`${formatNumber(data.free_heap)} KB (${formatNumber(data.max_alloc_heap)} KB max alloc, ${formatNumber(data.free_caps)} KB caps)`}
         />
-        </ListItem>
         {data.psram_size !== undefined && data.free_psram !== undefined && (
-          <>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                  <AppsIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
+          <HardwareListItem
+            icon={<AppsIcon />}
             primary={LL.PSRAM()}
-                secondary={
-                  formatNumber(data.psram_size) +
-                  ' KB / ' +
-                  formatNumber(data.free_psram) +
-                  ' KB'
-                }
+            secondary={`${formatNumber(data.psram_size)} KB / ${formatNumber(data.free_psram)} KB`}
           />
-            </ListItem>
-          </>
         )}
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <SdStorageIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
+        <HardwareListItem
+          icon={<SdStorageIcon />}
           primary={LL.FLASH()}
-            secondary={
-              formatNumber(data.flash_chip_size) +
-              ' KB , ' +
-              (data.flash_chip_speed / 1000000).toFixed(0) +
-              ' MHz'
-            }
+          secondary={`${formatNumber(data.flash_chip_size)} KB , ${formatFlashSpeed(data.flash_chip_speed)}`}
         />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <SdCardAlertIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
+        <HardwareListItem
+          icon={<SdCardAlertIcon />}
           primary={LL.APPSIZE()}
-            secondary={
-              data.partition +
-              ': ' +
-              formatNumber(data.app_used) +
-              ' KB / ' +
-              formatNumber(data.app_free) +
-              ' KB'
-            }
+          secondary={`${data.partition}: ${formatNumber(data.app_used)} KB / ${formatNumber(data.app_free)} KB`}
         />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <FolderIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
+        <HardwareListItem
+          icon={<FolderIcon />}
           primary={LL.FILESYSTEM()}
-            secondary={
-              formatNumber(data.fs_used) +
-              ' KB / ' +
-              formatNumber(data.fs_free) +
-              ' KB'
-            }
+          secondary={`${formatNumber(data.fs_used)} KB / ${formatNumber(data.fs_free)} KB`}
         />
-        </ListItem>
-        <Divider variant="inset" component="li" />
       </List>
+    </SectionContent>
   );
 };
 
-  return <SectionContent>{content()}</SectionContent>;
-};
-
 export default HardwareStatus;

interface/src/app/status/MqttStatus.tsx

@@ -1,3 +1,5 @@
+import { type FC, memo } from 'react';
+
 import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ReportIcon from '@mui/icons-material/Report';
@@ -22,17 +24,28 @@ import type { MqttStatusType } from 'types';
 import { MqttDisconnectReason } from 'types';
 import { useInterval } from 'utils';
 
+// Disconnect reason lookup table - created once, reused across renders
+const DISCONNECT_REASONS: Record<MqttDisconnectReason, string> = {
+  [MqttDisconnectReason.USER_OK]: 'User disconnected',
+  [MqttDisconnectReason.TCP_DISCONNECTED]: 'TCP disconnected',
+  [MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION]:
+    'Unacceptable protocol version',
+  [MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED]: 'Client ID rejected',
+  [MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE]: 'Server unavailable',
+  [MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS]: 'Malformed credentials',
+  [MqttDisconnectReason.MQTT_NOT_AUTHORIZED]: 'Not authorized',
+  [MqttDisconnectReason.TLS_BAD_FINGERPRINT]: 'TLS fingerprint invalid'
+};
+
+const getDisconnectReason = (disconnect_reason: MqttDisconnectReason): string =>
+  DISCONNECT_REASONS[disconnect_reason] ?? 'Unknown';
+
 export const mqttStatusHighlight = (
   { enabled, connected }: MqttStatusType,
   theme: Theme
 ) => {
-  if (!enabled) {
-    return theme.palette.info.main;
-  }
-  if (connected) {
-    return theme.palette.success.main;
-  }
-  return theme.palette.error.main;
+  if (!enabled) return theme.palette.info.main;
+  return connected ? theme.palette.success.main : theme.palette.error.main;
 };
 
 export const mqttPublishHighlight = (
@@ -41,68 +54,22 @@ export const mqttPublishHighlight = (
 ) => {
   if (mqtt_fails === 0) return theme.palette.success.main;
   if (mqtt_fails < 10) return theme.palette.warning.main;
-
   return theme.palette.error.main;
 };
 
-export const mqttQueueHighlight = (
-  { mqtt_queued }: MqttStatusType,
-  theme: Theme
-) => {
-  if (mqtt_queued <= 1) return theme.palette.success.main;
+export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatusType, theme: Theme) =>
+  mqtt_queued <= 1 ? theme.palette.success.main : theme.palette.warning.main;
 
-  return theme.palette.warning.main;
-};
-
-const MqttStatus = () => {
-  const { data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
-
-  useInterval(() => {
-    void loadData();
-  });
+interface ConnectionStatusProps {
+  data: MqttStatusType;
+  theme: Theme;
+}
 
+// Memoized component to prevent unnecessary re-renders when parent updates
+const ConnectionStatus: FC<ConnectionStatusProps> = memo(({ data, theme }) => {
   const { LL } = useI18nContext();
-  useLayoutTitle('MQTT');
 
-  const theme = useTheme();
-
-  const mqttStatus = ({ enabled, connected, connect_count }: MqttStatusType) => {
-    if (!enabled) {
-      return LL.NOT_ENABLED();
-    }
-    if (connected) {
-      return LL.CONNECTED(0) + ' (' + connect_count + ')';
-    }
-    return LL.DISCONNECTED() + ' (' + connect_count + ')';
-  };
-
-  const disconnectReason = ({ disconnect_reason }: MqttStatusType) => {
-    switch (disconnect_reason) {
-      case MqttDisconnectReason.TCP_DISCONNECTED:
-        return 'TCP disconnected';
-      case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
-        return 'Unacceptable protocol version';
-      case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
-        return 'Client ID rejected';
-      case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
-        return 'Server unavailable';
-      case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
-        return 'Malformed credentials';
-      case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
-        return 'Not authorized';
-      case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
-        return 'TLS fingerprint invalid';
-      default:
-        return 'Unknown';
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
-    const renderConnectionStatus = () => (
+  return (
     <>
       {!data.connected && (
         <>
@@ -114,7 +81,7 @@ const MqttStatus = () => {
             </ListItemAvatar>
             <ListItemText
               primary={LL.DISCONNECT_REASON()}
-                secondary={disconnectReason(data)}
+              secondary={getDisconnectReason(data.disconnect_reason)}
             />
           </ListItem>
           <Divider variant="inset" component="li" />
@@ -147,8 +114,39 @@ const MqttStatus = () => {
       <Divider variant="inset" component="li" />
     </>
   );
+});
+
+const MqttStatus = () => {
+  const { data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
+  const { LL } = useI18nContext();
+  const theme = useTheme();
+
+  useLayoutTitle('MQTT');
+
+  useInterval(() => {
+    void loadData();
+  });
+
+  const errorMessage = error?.message || '';
+
+  const mqttStatusText = !data
+    ? ''
+    : !data.enabled
+      ? LL.NOT_ENABLED()
+      : data.connected
+        ? `${LL.CONNECTED(0)} (${data.connect_count})`
+        : `${LL.DISCONNECTED()} (${data.connect_count})`;
+
+  if (!data) {
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={errorMessage} />
+      </SectionContent>
+    );
+  }
 
   return (
+    <SectionContent>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -156,15 +154,13 @@ const MqttStatus = () => {
               <DeviceHubIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={LL.STATUS_OF('')} secondary={mqttStatus(data)} />
+          <ListItemText primary={LL.STATUS_OF('')} secondary={mqttStatusText} />
         </ListItem>
         <Divider variant="inset" component="li" />
-        {data.enabled && renderConnectionStatus()}
+        {data.enabled && <ConnectionStatus data={data} theme={theme} />}
       </List>
+    </SectionContent>
   );
 };
 
-  return <SectionContent>{content()}</SectionContent>;
-};
-
 export default MqttStatus;

interface/src/app/status/NTPStatus.tsx

@@ -23,18 +23,7 @@ import { NTPSyncStatus } from 'types';
 import { useInterval } from 'utils';
 import { formatDateTime } from 'utils';
 
-const NTPStatus = () => {
-  const { data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
-
-  useInterval(() => {
-    void loadData();
-  });
-
-  const { LL } = useI18nContext();
-  useLayoutTitle('NTP');
-
-  NTPApi.updateTime;
-
+// Utility functions
 const isNtpEnabled = ({ status }: NTPStatusType) =>
   status !== NTPSyncStatus.NTP_DISABLED;
 
@@ -51,6 +40,16 @@ const NTPStatus = () => {
   }
 };
 
+const NTPStatus = () => {
+  const { data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);
+
+  useInterval(() => {
+    void loadData();
+  });
+
+  const { LL } = useI18nContext();
+  useLayoutTitle('NTP');
+
   const theme = useTheme();
 
   const ntpStatus = ({ status }: NTPStatusType) => {
@@ -66,13 +65,16 @@ const NTPStatus = () => {
     }
   };
 
-  const content = () => {
   if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
   return (
-      <>
+    <SectionContent>
       <List>
         <ListItem>
           <ListItemAvatar>
@@ -121,11 +123,8 @@ const NTPStatus = () => {
         </ListItem>
         <Divider variant="inset" component="li" />
       </List>
-      </>
+    </SectionContent>
   );
 };
 
-  return <SectionContent>{content()}</SectionContent>;
-};
-
 export default NTPStatus;

interface/src/app/status/NetworkStatus.tsx

@@ -25,10 +25,17 @@ import type { NetworkStatusType } from 'types';
 import { NetworkConnectionStatus } from 'types';
 import { useInterval } from 'utils';
 
+// Utility functions
 const isConnected = ({ status }: NetworkStatusType) =>
   status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
   status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
 
+export const isWiFi = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
+
+export const isEthernet = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
+
 const networkStatusHighlight = ({ status }: NetworkStatusType, theme: Theme) => {
   switch (status) {
     case NetworkConnectionStatus.WIFI_STATUS_IDLE:
@@ -55,11 +62,6 @@ const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
   return theme.palette.success.main;
 };
 
-export const isWiFi = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
-export const isEthernet = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
-
 const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
   if (!dns_ip_1) {
     return 'none';
@@ -81,6 +83,33 @@ const IPs = (status: NetworkStatusType) => {
   return status.local_ip + ', ' + status.local_ipv6;
 };
 
+const getNetworkStatusText = (
+  status: NetworkConnectionStatus,
+  reconnectCount: number,
+  LL: ReturnType<typeof useI18nContext>['LL']
+) => {
+  switch (status) {
+    case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+      return LL.CONNECTED(0) + ' (Ethernet)';
+    case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+      return LL.INACTIVE(1);
+    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+      return LL.IDLE();
+    case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
+      return 'No SSID Available';
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+      return LL.CONNECTED(0) + ' (WiFi) (' + reconnectCount + ')';
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+      return LL.CONNECTED(1) + ' ' + LL.FAILED(0) + ' (' + reconnectCount + ')';
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+      return LL.CONNECTED(1) + ' ' + LL.LOST() + ' (' + reconnectCount + ')';
+    case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+      return LL.DISCONNECTED();
+    default:
+      return LL.UNKNOWN();
+  }
+};
+
 const NetworkStatus = () => {
   const { data, send: loadData, error } = useRequest(NetworkApi.readNetworkStatus);
 
@@ -93,51 +122,34 @@ const NetworkStatus = () => {
 
   const theme = useTheme();
 
-  const networkStatus = ({ status }: NetworkStatusType) => {
-    switch (status) {
-      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (Ethernet)';
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-        return LL.INACTIVE(1);
-      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-        return LL.IDLE();
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
-        return 'No SSID Available';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (WiFi) (' + data.reconnect_count + ')';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-        return (
-          LL.CONNECTED(1) + ' ' + LL.FAILED(0) + ' (' + data.reconnect_count + ')'
-        );
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return LL.CONNECTED(1) + ' ' + LL.LOST() + ' (' + data.reconnect_count + ')';
-      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-        return LL.DISCONNECTED();
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const content = () => {
   if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
+  const statusText = getNetworkStatusText(data.status, data.reconnect_count, LL);
+  const statusColor = networkStatusHighlight(data, theme);
+  const qualityColor = networkQualityHighlight(data, theme);
+
   return (
+    <SectionContent>
       <List>
         <ListItem>
           <ListItemAvatar>
-            <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+            <Avatar sx={{ bgcolor: statusColor }}>
               {isWiFi(data) && <WifiIcon />}
               {isEthernet(data) && <RouterIcon />}
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="Status" secondary={networkStatus(data)} />
+          <ListItemText primary="Status" secondary={statusText} />
         </ListItem>
         <Divider variant="inset" component="li" />
         <ListItem>
           <ListItemAvatar>
-            <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+            <Avatar sx={{ bgcolor: statusColor }}>
               <GiteIcon />
             </Avatar>
           </ListItemAvatar>
@@ -148,13 +160,13 @@ const NetworkStatus = () => {
           <>
             <ListItem>
               <ListItemAvatar>
-                <Avatar sx={{ bgcolor: networkQualityHighlight(data, theme) }}>
+                <Avatar sx={{ bgcolor: qualityColor }}>
                   <SettingsInputAntennaIcon />
                 </Avatar>
               </ListItemAvatar>
               <ListItemText
                 primary="SSID (RSSI)"
-                secondary={data.ssid + ' (' + data.rssi + ' dBm)'}
+                secondary={`${data.ssid} (${data.rssi} dBm)`}
               />
             </ListItem>
             <Divider variant="inset" component="li" />
@@ -217,10 +229,8 @@ const NetworkStatus = () => {
           </>
         )}
       </List>
+    </SectionContent>
   );
 };
 
-  return <SectionContent>{content()}</SectionContent>;
-};
-
 export default NetworkStatus;

interface/src/app/status/Status.tsx

@@ -1,25 +1,16 @@
-import { useContext, useState } from 'react';
-import { toast } from 'react-toastify';
+import { useContext } from 'react';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import BuildIcon from '@mui/icons-material/Build';
-import CancelIcon from '@mui/icons-material/Cancel';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
 import LogoDevIcon from '@mui/icons-material/LogoDev';
 import MemoryIcon from '@mui/icons-material/Memory';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
 import RouterIcon from '@mui/icons-material/Router';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-import TimerIcon from '@mui/icons-material/Timer';
 import WifiIcon from '@mui/icons-material/Wifi';
 import {
   Avatar,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   List,
   ListItem,
   ListItemAvatar,
@@ -27,21 +18,38 @@ import {
   useTheme
 } from '@mui/material';
 
-import { API } from 'api/app';
 import { readSystemStatus } from 'api/system';
 
-import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
-import { type APIcall, busConnectionStatus } from 'app/main/types';
+import { busConnectionStatus } from 'app/main/types';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
-import { NTPSyncStatus, NetworkConnectionStatus } from 'types';
+import { NTPSyncStatus, NetworkConnectionStatus, SystemStatusCodes } from 'types';
 import { useInterval } from 'utils';
 import { formatDateTime } from 'utils/time';
 
-import SystemMonitor from './SystemMonitor';
+const formatNumber = (num: number) => new Intl.NumberFormat().format(num);
+
+const formatDurationSec = (
+  duration_sec: number,
+  LL: ReturnType<typeof useI18nContext>['LL']
+) => {
+  const ms = duration_sec * 1000;
+  const days = Math.trunc(ms / 86400000);
+  const hours = Math.trunc(ms / 3600000) % 24;
+  const minutes = Math.trunc(ms / 60000) % 60;
+  const seconds = Math.trunc(ms / 1000) % 60;
+
+  const parts: string[] = [];
+  if (days) parts.push(LL.NUM_DAYS({ num: days }));
+  if (hours) parts.push(LL.NUM_HOURS({ num: hours }));
+  if (minutes) parts.push(LL.NUM_MINUTES({ num: minutes }));
+  parts.push(LL.NUM_SECONDS({ num: seconds }));
+
+  return parts.join(' ');
+};
 
 const SystemStatus = () => {
   const { LL } = useI18nContext();
@@ -50,25 +58,7 @@ const SystemStatus = () => {
 
   const { me } = useContext(AuthenticatedContext);
 
-  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
-  const [restarting, setRestarting] = useState<boolean>();
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  const {
-    data,
-    send: loadData,
-    error
-  } = useRequest(readSystemStatus, {
-    initialData: [],
-    async middleware(_, next) {
-      if (!restarting) {
-        await next();
-      }
-    }
-  });
+  const { data, send: loadData, error } = useRequest(readSystemStatus);
 
   useInterval(() => {
     void loadData();
@@ -76,51 +66,40 @@ const SystemStatus = () => {
 
   const theme = useTheme();
 
-  const formatDurationSec = (duration_sec: number) => {
-    const days = Math.trunc((duration_sec * 1000) / 86400000);
-    const hours = Math.trunc((duration_sec * 1000) / 3600000) % 24;
-    const minutes = Math.trunc((duration_sec * 1000) / 60000) % 60;
-    const seconds = Math.trunc((duration_sec * 1000) / 1000) % 60;
-
-    let formatted = '';
-    if (days) {
-      formatted += LL.NUM_DAYS({ num: days }) + ' ';
-    }
-    if (hours) {
-      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
-    }
-    if (minutes) {
-      formatted += LL.NUM_MINUTES({ num: minutes }) + ' ';
-    }
-    formatted += LL.NUM_SECONDS({ num: seconds });
-    return formatted;
-  };
-
-  function formatNumber(num: number) {
-    return new Intl.NumberFormat().format(num);
-  }
-
-  const busStatus = () => {
-    if (data) {
+  const busStatus = (() => {
+    if (!data) return 'EMS state unknown';
     switch (data.bus_status) {
       case busConnectionStatus.BUS_STATUS_CONNECTED:
-          return (
-            'EMS ' +
-            LL.CONNECTED(0) +
-            ' (' +
-            formatDurationSec(data.bus_uptime) +
-            ')'
-          );
+        return `EMS ${LL.CONNECTED(0)} (${formatDurationSec(data.bus_uptime, LL)})`;
       case busConnectionStatus.BUS_STATUS_TX_ERRORS:
         return 'EMS ' + LL.TX_ISSUES();
       case busConnectionStatus.BUS_STATUS_OFFLINE:
         return 'EMS ' + LL.DISCONNECTED();
-      }
-    }
+      default:
         return 'EMS state unknown';
-  };
+    }
+  })();
 
-  const busStatusHighlight = () => {
+  const systemStatus = (() => {
+    if (!data) return '??';
+    switch (data.status) {
+      case SystemStatusCodes.SYSTEM_STATUS_PENDING_UPLOAD:
+      case SystemStatusCodes.SYSTEM_STATUS_UPLOADING:
+        return LL.WAIT_FIRMWARE();
+      case SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD:
+        return LL.ERROR();
+      case SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART:
+      case SystemStatusCodes.SYSTEM_STATUS_RESTART_REQUESTED:
+        return LL.RESTARTING_PRE();
+      case SystemStatusCodes.SYSTEM_STATUS_INVALID_GPIO:
+        return LL.GPIO_OF(LL.FAILED(0));
+      default:
+        return 'OK';
+    }
+  })();
+
+  const busStatusHighlight = (() => {
+    if (!data) return theme.palette.warning.main;
     switch (data.bus_status) {
       case busConnectionStatus.BUS_STATUS_TX_ERRORS:
         return theme.palette.warning.main;
@@ -131,27 +110,26 @@ const SystemStatus = () => {
       default:
         return theme.palette.warning.main;
     }
-  };
+  })();
 
-  const ntpStatus = () => {
+  const ntpStatus = (() => {
+    if (!data) return LL.UNKNOWN();
     switch (data.ntp_status) {
       case NTPSyncStatus.NTP_DISABLED:
         return LL.NOT_ENABLED();
       case NTPSyncStatus.NTP_INACTIVE:
         return LL.INACTIVE(0);
       case NTPSyncStatus.NTP_ACTIVE:
-        return (
-          LL.ACTIVE() +
-          (data.ntp_time !== undefined
-            ? ' (' + formatDateTime(data.ntp_time) + ')'
-            : '')
-        );
+        return data.ntp_time
+          ? `${LL.ACTIVE()} (${formatDateTime(data.ntp_time)})`
+          : LL.ACTIVE();
       default:
         return LL.UNKNOWN();
     }
-  };
+  })();
 
-  const ntpStatusHighlight = () => {
+  const ntpStatusHighlight = (() => {
+    if (!data) return theme.palette.error.main;
     switch (data.ntp_status) {
       case NTPSyncStatus.NTP_DISABLED:
         return theme.palette.info.main;
@@ -162,9 +140,10 @@ const SystemStatus = () => {
       default:
         return theme.palette.error.main;
     }
-  };
+  })();
 
-  const networkStatusHighlight = () => {
+  const networkStatusHighlight = (() => {
+    if (!data) return theme.palette.warning.main;
     switch (data.network_status) {
       case NetworkConnectionStatus.WIFI_STATUS_IDLE:
       case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
@@ -179,9 +158,10 @@ const SystemStatus = () => {
       default:
         return theme.palette.warning.main;
     }
-  };
+  })();
 
-  const networkStatus = () => {
+  const networkStatus = (() => {
+    if (!data) return LL.UNKNOWN();
     switch (data.network_status) {
       case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
         return LL.INACTIVE(1);
@@ -190,98 +170,44 @@ const SystemStatus = () => {
       case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
         return 'No SSID Available';
       case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (WiFi, ' + data.wifi_rssi + ' dBm)';
+        return `${LL.CONNECTED(0)} (WiFi, ${data.wifi_rssi} dBm)`;
       case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (Ethernet)';
+        return `${LL.CONNECTED(0)} (Ethernet)`;
       case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-        return LL.CONNECTED(1) + ' ' + LL.FAILED(0);
+        return `${LL.CONNECTED(1)} ${LL.FAILED(0)}`;
       case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return LL.CONNECTED(1) + ' ' + LL.LOST();
+        return `${LL.CONNECTED(1)} ${LL.LOST()}`;
       case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
         return LL.DISCONNECTED();
       default:
         return LL.UNKNOWN();
     }
-  };
+  })();
 
   const activeHighlight = (value: boolean) =>
     value ? theme.palette.success.main : theme.palette.info.main;
 
-  const doRestart = async () => {
-    setConfirmRestart(false);
-    setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-  };
-
-  const renderRestartDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmRestart}
-      onClose={() => setConfirmRestart(false)}
-    >
-      <DialogTitle>{LL.RESTART()}</DialogTitle>
-      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmRestart(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<PowerSettingsNewIcon />}
-          variant="outlined"
-          onClick={doRestart}
-          color="error"
-        >
-          {LL.RESTART()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
-  const content = () => {
   if (!data || !LL) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
+    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
   }
 
   return (
-      <>
+    <SectionContent>
       <List>
-          <ListMenuItem
-            icon={BuildIcon}
-            bgcolor="#72caf9"
-            label="EMS-ESP Firmware"
-            text={'v' + data.emsesp_version}
-            to="version"
-          />
-
         <ListItem>
           <ListItemAvatar>
             <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
-                <TimerIcon />
+              <MonitorHeartIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText
-              primary={LL.UPTIME()}
-              secondary={formatDurationSec(data.uptime)}
+            primary={LL.STATUS_OF(LL.SYSTEM(0))}
+            secondary={`${systemStatus} (${LL.UPTIME()}: ${formatDurationSec(data.uptime, LL)})`}
           />
-            {me.admin && (
-              <Button
-                startIcon={<PowerSettingsNewIcon />}
-                variant="outlined"
-                color="error"
-                onClick={() => setConfirmRestart(true)}
-              >
-                {LL.RESTART()}
-              </Button>
-            )}
         </ListItem>
 
         <ListMenuItem
@@ -289,16 +215,16 @@ const SystemStatus = () => {
           icon={MemoryIcon}
           bgcolor="#68374d"
           label={LL.HARDWARE()}
-            text={formatNumber(data.free_heap) + ' KB' + ' ' + LL.FREE_MEMORY()}
+          text={`${formatNumber(data.free_heap)} KB ${LL.FREE_MEMORY()}`}
           to="/status/hardwarestatus"
         />
 
         <ListMenuItem
           disabled={!me.admin}
           icon={DirectionsBusIcon}
-            bgcolor={busStatusHighlight()}
+          bgcolor={busStatusHighlight}
           label={LL.DATA_TRAFFIC()}
-            text={busStatus()}
+          text={busStatus}
           to="/status/activity"
         />
 
@@ -309,9 +235,9 @@ const SystemStatus = () => {
               ? WifiIcon
               : RouterIcon
           }
-            bgcolor={networkStatusHighlight()}
+          bgcolor={networkStatusHighlight}
           label={LL.NETWORK(1)}
-            text={networkStatus()}
+          text={networkStatus}
           to="/status/network"
         />
 
@@ -327,9 +253,9 @@ const SystemStatus = () => {
         <ListMenuItem
           disabled={!me.admin}
           icon={AccessTimeIcon}
-            bgcolor={ntpStatusHighlight()}
+          bgcolor={ntpStatusHighlight}
           label="NTP"
-            text={ntpStatus()}
+          text={ntpStatus}
           to="/status/ntp"
         />
 
@@ -351,14 +277,7 @@ const SystemStatus = () => {
           to="/status/log"
         />
       </List>
-
-        {renderRestartDialog()}
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <SystemMonitor /> : content()}</SectionContent>
+    </SectionContent>
   );
 };
 

interface/src/app/status/SystemLog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -47,11 +47,6 @@ const LogEntryLine = styled('span')(
   })
 );
 
-const topOffset = () =>
-  document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
-const leftOffset = () =>
-  document.getElementById('log-window')?.getBoundingClientRect().left || 0;
-
 const levelLabel = (level: LogLevel) => {
   switch (level) {
     case LogLevel.ERROR:
@@ -71,6 +66,39 @@ const levelLabel = (level: LogLevel) => {
   }
 };
 
+const paddedLevelLabel = (level: LogLevel, compact: boolean) => {
+  const label = levelLabel(level);
+  return compact ? ' ' + label[0] : label.padStart(8, '\xa0');
+};
+
+const paddedNameLabel = (name: string, compact: boolean) => {
+  const label = '[' + name + ']';
+  return compact ? label : label.padEnd(12, '\xa0');
+};
+
+const paddedIDLabel = (id: number, compact: boolean) => {
+  const label = id + ':';
+  return compact ? label : label.padEnd(7, '\xa0');
+};
+
+// Memoized log entry component to prevent unnecessary re-renders
+const LogEntryItem = memo(
+  ({ entry, compact }: { entry: LogEntry; compact: boolean }) => {
+    return (
+      <div style={{ font: '13px monospace', whiteSpace: 'nowrap' }}>
+        <span>{entry.t}</span>
+        <span>{paddedLevelLabel(entry.l, compact)}&nbsp;</span>
+        <span>{paddedIDLabel(entry.i, compact)} </span>
+        <span>{paddedNameLabel(entry.n, compact)} </span>
+        <LogEntryLine details={{ level: entry.l }}>{entry.m}</LogEntryLine>
+      </div>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.entry.i === nextProps.entry.i &&
+    prevProps.compact === nextProps.compact
+);
+
 const SystemLog = () => {
   const { LL } = useI18nContext();
 
@@ -102,54 +130,84 @@ const SystemLog = () => {
   const [readOpen, setReadOpen] = useState(false);
   const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
   const [autoscroll, setAutoscroll] = useState(true);
-  const [lastId, setLastId] = useState<number>(-1);
+  const [boxPosition, setBoxPosition] = useState({ top: 0, left: 0 });
 
   const ALPHA_NUMERIC_DASH_REGEX = /^[a-fA-F0-9 ]+$/;
 
   const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
     dirtyFlags,
     setDirtyFlags,
     updateDataValue as (value: unknown) => void
   );
 
+  // Calculate box position after layout
+  useLayoutEffect(() => {
+    const logWindow = document.getElementById('log-window');
+    if (!logWindow) {
+      return;
+    }
+
+    const updatePosition = () => {
+      const windowElement = document.getElementById('log-window');
+      if (!windowElement) {
+        return;
+      }
+      const rect = windowElement.getBoundingClientRect();
+      setBoxPosition({ top: rect.bottom, left: rect.left });
+    };
+
+    updatePosition();
+
+    // Debounce resize events with requestAnimationFrame
+    let rafId: number;
+    const handleResize = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(updatePosition);
+    };
+
+    // Update position on window resize
+    window.addEventListener('resize', handleResize);
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(logWindow);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      resizeObserver.disconnect();
+      cancelAnimationFrame(rafId);
+    };
+  }, [data]); // Recalculate when data changes (in case layout shifts)
+
+  const handleLogMessage = (message: { data: string }) => {
+    const rawData = message.data;
+    const logentry = JSON.parse(rawData) as LogEntry;
+    setLogEntries((log) => {
+      // Skip if this is a duplicate entry (check last entry id)
+      if (log.length > 0) {
+        const lastEntry = log[log.length - 1];
+        if (lastEntry && logentry.i <= lastEntry.i) {
+          return log;
+        }
+      }
+      const newLog = [...log, logentry];
+      return newLog;
+    });
+  };
+
   useSSE(fetchLogES, {
     immediate: true,
     interceptByGlobalResponded: false
   })
-    .onMessage((message: { data: string }) => {
-      const rawData = message.data;
-      const logentry = JSON.parse(rawData) as LogEntry;
-      if (lastId < logentry.i) {
-        setLogEntries((log) => [...log, logentry]);
-        setLastId(logentry.i);
-      }
-    })
+    .onMessage(handleLogMessage)
     .onError(() => {
       toast.error('No connection to Log service');
     });
 
-  const paddedLevelLabel = (level: LogLevel) => {
-    const label = levelLabel(level);
-    return data?.compact ? ' ' + label[0] : label.padStart(8, '\xa0');
-  };
-
-  const paddedNameLabel = (name: string) => {
-    const label = '[' + name + ']';
-    return data?.compact ? label : label.padEnd(12, '\xa0');
-  };
-
-  const paddedIDLabel = (id: number) => {
-    const label = id + ':';
-    return data?.compact ? label : label.padEnd(7, '\xa0');
-  };
-
   const onDownload = () => {
-    let result = '';
-    for (const i of logEntries) {
-      result +=
-        i.t + ' ' + levelLabel(i.l) + ' ' + i.i + ': [' + i.n + '] ' + i.m + '\n';
-    }
+    const result = logEntries
+      .map((i) => `${i.t} ${levelLabel(i.l)} ${i.i}: [${i.n}] ${i.m}`)
+      .join('\n');
+
     const a = document.createElement('a');
     a.setAttribute(
       'href',
@@ -165,16 +223,20 @@ const SystemLog = () => {
     await saveData();
   };
 
-  // handle scrolling
+  // handle scrolling - optimized to only scroll when needed
   const ref = useRef<HTMLDivElement>(null);
+  const logWindowRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (logEntries.length && autoscroll) {
-      ref.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end'
+      const container = logWindowRef.current;
+      if (container) {
+        requestAnimationFrame(() => {
+          container.scrollTop = container.scrollHeight;
         });
       }
-  }, [logEntries.length]);
+    }
+  }, [logEntries.length, autoscroll]);
 
   const sendReadCommand = () => {
     if (readValue === '') {
@@ -196,7 +258,7 @@ const SystemLog = () => {
 
     return (
       <>
-        <Grid container spacing={2} alignItems="center">
+        <Grid container spacing={2} sx={{ alignItems: 'center' }}>
           <Grid>
             <TextField
               name="level"
@@ -232,6 +294,8 @@ const SystemLog = () => {
                 <MenuItem value={50}>50</MenuItem>
                 <MenuItem value={75}>75</MenuItem>
                 <MenuItem value={100}>100</MenuItem>
+                <MenuItem value={500}>500</MenuItem>
+                <MenuItem value={1000}>1000</MenuItem>
               </TextField>
             </Grid>
           )}
@@ -279,6 +343,7 @@ const SystemLog = () => {
             >
               <IconButton
                 disableRipple
+                aria-label={LL.CANCEL()}
                 onClick={() => {
                   setReadOpen(false);
                   setReadValue('');
@@ -304,7 +369,7 @@ const SystemLog = () => {
           ) : (
             <>
               {data.developer_mode && (
-                <IconButton onClick={sendReadCommand}>
+                <IconButton onClick={sendReadCommand} aria-label={LL.EXECUTE()}>
                   <PlayArrowIcon color="primary" />
                 </IconButton>
               )}
@@ -326,27 +391,20 @@ const SystemLog = () => {
         </Grid>
 
         <Box
+          ref={logWindowRef}
           sx={{
             backgroundColor: 'black',
             overflowY: 'scroll',
             position: 'absolute',
             right: 18,
             bottom: 18,
-            left: () => leftOffset(),
-            top: () => topOffset(),
+            left: boxPosition.left,
+            top: boxPosition.top,
             p: 1
           }}
         >
           {logEntries.map((e) => (
-            <div key={e.i} style={{ font: '14px monospace', whiteSpace: 'nowrap' }}>
-              <span>{e.t}</span>
-              <span>{paddedLevelLabel(e.l)}&nbsp;</span>
-              <span>{paddedIDLabel(e.i)} </span>
-              <span>{paddedNameLabel(e.n)} </span>
-              <LogEntryLine details={{ level: e.l }} key={e.i}>
-                {e.m}
-              </LogEntryLine>
-            </div>
+            <LogEntryItem key={e.i} entry={e} compact={data.compact} />
           ))}
 
           <div ref={ref} />

interface/src/app/status/SystemMonitor.tsx

@@ -1,12 +1,11 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import { Box, Button, Dialog, DialogContent, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 
 import { callAction } from 'api/app';
 import { readSystemStatus } from 'api/system';
 
-import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
 import MessageBox from 'components/MessageBox';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -17,11 +16,9 @@ import { LinearProgressWithLabel } from '../../components/upload/LinearProgressW
 
 const SystemMonitor = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
-
+  const hasInitialized = useRef(false);
   const { LL } = useI18nContext();
 
-  let count = 0;
-
   const { send: setSystemStatus } = useRequest(
     (status: string) => callAction({ action: 'systemStatus', param: status }),
     {
@@ -32,10 +29,12 @@ const SystemMonitor = () => {
   const { data, send } = useRequest(readSystemStatus, {
     force: true,
     async middleware(_, next) {
-      if (count++ >= 1) {
-        // skip first request (1 second) to allow AsyncWS to send its response
-        await next();
+      // Skip first request to allow AsyncWS to send its response
+      if (!hasInitialized.current) {
+        hasInitialized.current = true;
+        return; // Don't await next() on first call
       }
+      await next();
     }
   })
     .onSuccess((event) => {
@@ -58,40 +57,77 @@ const SystemMonitor = () => {
     void send();
   }, 1000); // check every 1 second
 
+  const status = data?.status;
+
+  const statusMessage =
+    status && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING
+      ? LL.WAIT_FIRMWARE()
+      : status === SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART
+        ? LL.APPLICATION_RESTARTING()
+        : status === SystemStatusCodes.SYSTEM_STATUS_NORMAL
+          ? LL.RESTARTING_PRE()
+          : status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
+            ? 'Upload Failed'
+            : LL.RESTARTING_POST();
+
+  const isUploading =
+    status !== undefined && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING;
+  const progressValue =
+    isUploading && status
+      ? Math.round(status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING)
+      : 0;
+
   const onCancel = async () => {
     setErrorMessage(undefined);
-    await setSystemStatus(
-      SystemStatusCodes.SYSTEM_STATUS_NORMAL as unknown as string
-    );
+    await setSystemStatus(String(SystemStatusCodes.SYSTEM_STATUS_NORMAL));
     document.location.href = '/';
   };
 
   return (
-    <Dialog fullWidth={true} sx={dialogStyle} open={true}>
-      <DialogContent dividers>
-        <Box m={0} py={0} display="flex" alignItems="center" flexDirection="column">
-          <Typography
-            color="secondary"
-            variant="h6"
-            fontWeight={400}
-            textAlign="center"
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+        // backdropFilter: 'blur(8px)'
+      }}
     >
-            {data?.status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING
-              ? LL.WAIT_FIRMWARE()
-              : data?.status === SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART
-                ? LL.APPLICATION_RESTARTING()
-                : data?.status === SystemStatusCodes.SYSTEM_STATUS_NORMAL
-                  ? LL.RESTARTING_PRE()
-                  : data?.status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
-                    ? 'Upload Failed'
-                    : LL.RESTARTING_POST()}
+      <Box
+        sx={{
+          width: '30%',
+          minWidth: '300px',
+          maxWidth: '500px',
+          backgroundColor: '#393939',
+          border: 2,
+          borderColor: '#565656',
+          borderRadius: '8px',
+          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+          p: 3
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+          <img
+            src="/app/icon.png"
+            alt="EMS-ESP"
+            style={{ width: '40px', height: '40px', marginBottom: '16px' }}
+          />
+          <Typography
+            sx={{ color: 'secondary', fontWeight: 400, textAlign: 'center' }}
+            variant="h6"
+          >
+            {statusMessage}
           </Typography>
 
           {errorMessage ? (
-            <MessageBox my={2} level="error" message={errorMessage}>
+            <MessageBox level="error" message={errorMessage}>
               <Button
-                size="small"
                 sx={{ ml: 2 }}
+                size="small"
                 startIcon={<CancelIcon />}
                 variant="contained"
                 color="error"
@@ -102,23 +138,22 @@ const SystemMonitor = () => {
             </MessageBox>
           ) : (
             <>
-              <Typography mt={2} variant="h6" fontWeight={400} textAlign="center">
+              <Typography
+                sx={{ mt: 2, fontWeight: 400, textAlign: 'center' }}
+                variant="h6"
+              >
                 {LL.PLEASE_WAIT()}&hellip;
               </Typography>
-              {data && data.status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING && (
-                <Box width="100%" pl={2} pr={2} py={2}>
-                  <LinearProgressWithLabel
-                    value={Math.round(
-                      data?.status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING
-                    )}
-                  />
+              {isUploading && (
+                <Box sx={{ width: '100%', pl: 2, pr: 2, py: 2 }}>
+                  <LinearProgressWithLabel value={progressValue} />
                 </Box>
               )}
             </>
           )}
         </Box>
-      </DialogContent>
-    </Dialog>
+      </Box>
+    </Box>
   );
 };
 

interface/src/app/status/Version.tsx

@@ -1,653 +0,0 @@
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import CancelIcon from '@mui/icons-material/Cancel';
-import CloseIcon from '@mui/icons-material/Close';
-import CheckIcon from '@mui/icons-material/Done';
-import DownloadIcon from '@mui/icons-material/GetApp';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import WarningIcon from '@mui/icons-material/Warning';
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControlLabel,
-  Grid,
-  IconButton,
-  Link,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-  Typography
-} from '@mui/material';
-
-import * as SystemApi from 'api/system';
-import { API, callAction } from 'api/app';
-import { getDevVersion, getStableVersion } from 'api/system';
-
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import type { APIcall } from 'app/main/types';
-import SystemMonitor from 'app/status/SystemMonitor';
-import {
-  FormLoader,
-  SectionContent,
-  SingleUpload,
-  useLayoutTitle
-} from 'components';
-import { AuthenticatedContext } from 'contexts/authentication';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { TranslationFunctions } from 'i18n/i18n-types';
-import { prettyDateTime } from 'utils/time';
-
-// Constants moved outside component to avoid recreation
-const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
-const STABLE_RELNOTES_URL =
-  'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
-const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
-const DEV_RELNOTES_URL =
-  'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
-
-// Types for better type safety
-interface VersionData {
-  emsesp_version: string;
-  arduino_version: string;
-  esp_platform: string;
-  flash_chip_size: number;
-  psram: boolean;
-  build_flags?: string;
-}
-
-interface UpgradeCheckData {
-  emsesp_version: string;
-  dev_upgradeable: boolean;
-  stable_upgradeable: boolean;
-}
-
-interface VersionInfo {
-  name: string;
-  published_at?: string;
-}
-
-// Memoized components for better performance
-const VersionInfoDialog = memo(
-  ({
-    showVersionInfo,
-    latestVersion,
-    latestDevVersion,
-    locale,
-    LL,
-    onClose
-  }: {
-    showVersionInfo: number;
-    latestVersion?: VersionInfo;
-    latestDevVersion?: VersionInfo;
-    locale: string;
-    LL: TranslationFunctions;
-    onClose: () => void;
-  }) => {
-    if (showVersionInfo === 0) return null;
-
-    const isStable = showVersionInfo === 1;
-    const version = isStable ? latestVersion : latestDevVersion;
-    const relNotesUrl = isStable ? STABLE_RELNOTES_URL : DEV_RELNOTES_URL;
-
-    return (
-      <Dialog sx={dialogStyle} open={showVersionInfo !== 0} onClose={onClose}>
-        <DialogTitle>{LL.FIRMWARE_VERSION_INFO()}</DialogTitle>
-        <DialogContent dividers>
-          <Table size="small" sx={{ borderCollapse: 'collapse', minWidth: 0 }}>
-            <TableBody>
-              <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  sx={{
-                    color: 'lightblue',
-                    borderBottom: 'none',
-                    pr: 1,
-                    py: 0.5,
-                    fontSize: 13,
-                    width: 90
-                  }}
-                >
-                  {LL.TYPE(0)}
-                </TableCell>
-                <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                  {isStable ? LL.STABLE() : LL.DEVELOPMENT()}
-                </TableCell>
-              </TableRow>
-              <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  sx={{
-                    color: 'lightblue',
-                    borderBottom: 'none',
-                    pr: 1,
-                    py: 0.5,
-                    fontSize: 13
-                  }}
-                >
-                  {LL.VERSION()}
-                </TableCell>
-                <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                  {version?.name}
-                </TableCell>
-              </TableRow>
-              {version?.published_at && (
-                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    sx={{
-                      color: 'lightblue',
-                      borderBottom: 'none',
-                      pr: 1,
-                      py: 0.5,
-                      fontSize: 13
-                    }}
-                  >
-                    Build Date
-                  </TableCell>
-                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                    {prettyDateTime(locale, new Date(version.published_at))}
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            variant="outlined"
-            component="a"
-            href={relNotesUrl}
-            target="_blank"
-            color="primary"
-          >
-            Changelog
-          </Button>
-          <Button variant="outlined" onClick={onClose} color="secondary">
-            {LL.CLOSE()}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-);
-
-const InstallDialog = memo(
-  ({
-    openInstallDialog,
-    fetchDevVersion,
-    latestVersion,
-    latestDevVersion,
-    downloadOnly,
-    platform,
-    LL,
-    onClose,
-    onInstall
-  }: {
-    openInstallDialog: boolean;
-    fetchDevVersion: boolean;
-    latestVersion?: VersionInfo;
-    latestDevVersion?: VersionInfo;
-    downloadOnly: boolean;
-    platform: string;
-    LL: TranslationFunctions;
-    onClose: () => void;
-    onInstall: (url: string) => void;
-  }) => {
-    const binURL = useMemo(() => {
-      if (!latestVersion || !latestDevVersion) return '';
-
-      const version = fetchDevVersion ? latestDevVersion : latestVersion;
-      const filename = `EMS-ESP-${version.name.replaceAll('.', '_')}-${platform}.bin`;
-
-      return fetchDevVersion
-        ? `${DEV_URL}${filename}`
-        : `${STABLE_URL}v${version.name}/${filename}`;
-    }, [fetchDevVersion, latestVersion, latestDevVersion, platform]);
-
-    return (
-      <Dialog sx={dialogStyle} open={openInstallDialog} onClose={onClose}>
-        <DialogTitle>
-          {`${LL.UPDATE()} ${fetchDevVersion ? LL.DEVELOPMENT() : LL.STABLE()} Firmware`}
-        </DialogTitle>
-        <DialogContent dividers>
-          <Typography mb={2}>
-            {LL.INSTALL_VERSION(
-              downloadOnly ? LL.DOWNLOAD(1) : LL.INSTALL(),
-              fetchDevVersion ? latestDevVersion?.name : latestVersion?.name
-            )}
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<CancelIcon />}
-            variant="outlined"
-            onClick={onClose}
-            color="secondary"
-          >
-            {LL.CANCEL()}
-          </Button>
-          <Button
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            onClick={onClose}
-            color="primary"
-          >
-            <Link underline="none" target="_blank" href={binURL} color="primary">
-              {LL.DOWNLOAD(0)}
-            </Link>
-          </Button>
-          {!downloadOnly && (
-            <Button
-              startIcon={<WarningIcon color="warning" />}
-              variant="outlined"
-              onClick={() => onInstall(binURL)}
-              color="primary"
-            >
-              {LL.INSTALL()}
-            </Button>
-          )}
-        </DialogActions>
-      </Dialog>
-    );
-  }
-);
-
-// Helper function moved outside component
-const getPlatform = (data: VersionData): string => {
-  return `${data.esp_platform}-${data.flash_chip_size >= 16384 ? '16MB' : '4MB'}${data.psram ? '+' : ''}`;
-};
-
-const Version = () => {
-  const { LL, locale } = useI18nContext();
-  const { me } = useContext(AuthenticatedContext);
-
-  // State management
-  const [restarting, setRestarting] = useState<boolean>(false);
-  const [openInstallDialog, setOpenInstallDialog] = useState<boolean>(false);
-  const [usingDevVersion, setUsingDevVersion] = useState<boolean>(false);
-  const [fetchDevVersion, setFetchDevVersion] = useState<boolean>(false);
-  const [devUpgradeAvailable, setDevUpgradeAvailable] = useState<boolean>(false);
-  const [stableUpgradeAvailable, setStableUpgradeAvailable] =
-    useState<boolean>(false);
-  const [internetLive, setInternetLive] = useState<boolean>(false);
-  const [downloadOnly, setDownloadOnly] = useState<boolean>(false);
-  const [showVersionInfo, setShowVersionInfo] = useState<number>(0);
-
-  // API calls with optimized error handling
-  const { send: sendCheckUpgrade } = useRequest(
-    (versions: string) => callAction({ action: 'checkUpgrade', param: versions }),
-    { immediate: false }
-  ).onSuccess((event) => {
-    const data = event.data as UpgradeCheckData;
-    setDevUpgradeAvailable(data.dev_upgradeable);
-    setStableUpgradeAvailable(data.stable_upgradeable);
-  });
-
-  const {
-    data,
-    send: loadData,
-    error
-  } = useRequest(SystemApi.readSystemStatus).onSuccess((event) => {
-    const systemData = event.data as VersionData;
-    if (systemData.arduino_version.startsWith('Tasmota')) {
-      setDownloadOnly(true);
-    }
-    setUsingDevVersion(systemData.emsesp_version.includes('dev'));
-  });
-
-  const { send: sendUploadURL } = useRequest(
-    (url: string) => callAction({ action: 'uploadURL', param: url }),
-    { immediate: false }
-  );
-
-  const { data: latestVersion } = useRequest(getStableVersion);
-  const { data: latestDevVersion } = useRequest(getDevVersion);
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  // Memoized values
-  const platform = useMemo(() => (data ? getPlatform(data) : ''), [data]);
-  const isDev = useMemo(
-    () => data?.emsesp_version.includes('dev') ?? false,
-    [data?.emsesp_version]
-  );
-
-  const doRestart = useCallback(async () => {
-    setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-  }, [sendAPI]);
-
-  const installFirmwareURL = useCallback(
-    async (url: string) => {
-      await sendUploadURL(url).catch((error: Error) => {
-        toast.error(error.message);
-      });
-      setRestarting(true);
-    },
-    [sendUploadURL]
-  );
-
-  const showFirmwareDialog = useCallback((useDevVersion: boolean) => {
-    setFetchDevVersion(useDevVersion);
-    setOpenInstallDialog(true);
-  }, []);
-
-  const closeInstallDialog = useCallback(() => {
-    setOpenInstallDialog(false);
-  }, []);
-
-  const handleVersionInfoClose = useCallback(() => {
-    setShowVersionInfo(0);
-  }, []);
-
-  // Effect for checking upgrades
-  useEffect(() => {
-    if (latestVersion && latestDevVersion) {
-      const versions = `${latestDevVersion.name},${latestVersion.name}`;
-      sendCheckUpgrade(versions)
-        .catch((error: Error) => {
-          toast.error(`Failed to check for upgrades: ${error.message}`);
-        })
-        .finally(() => {
-          setInternetLive(true);
-        });
-    }
-  }, [latestVersion, latestDevVersion, sendCheckUpgrade]);
-
-  useLayoutTitle('EMS-ESP Firmware');
-
-  // Memoized button rendering logic
-  const showButtons = useCallback(
-    (showingDev: boolean) => {
-      const choice = showingDev
-        ? !usingDevVersion
-          ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT())
-          : devUpgradeAvailable
-            ? LL.UPDATE_AVAILABLE()
-            : undefined
-        : usingDevVersion
-          ? LL.SWITCH_RELEASE_TYPE(LL.STABLE())
-          : stableUpgradeAvailable
-            ? LL.UPDATE_AVAILABLE()
-            : undefined;
-
-      if (!choice) {
-        return (
-          <>
-            <CheckIcon
-              color="success"
-              sx={{ verticalAlign: 'middle', ml: 0.5, mr: 0.5 }}
-            />
-            <span style={{ color: '#66bb6a', fontSize: '0.8em' }}>
-              {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())}
-            </span>
-            <Button
-              sx={{ ml: 2 }}
-              variant="outlined"
-              size="small"
-              onClick={() => showFirmwareDialog(showingDev)}
-            >
-              {LL.REINSTALL()}
-            </Button>
-          </>
-        );
-      }
-
-      if (!me.admin) return null;
-
-      return (
-        <Button
-          sx={{ ml: 2 }}
-          variant="outlined"
-          color={choice === LL.UPDATE_AVAILABLE() ? 'success' : 'warning'}
-          size="small"
-          onClick={() => showFirmwareDialog(showingDev)}
-        >
-          {choice}
-        </Button>
-      );
-    },
-    [
-      usingDevVersion,
-      devUpgradeAvailable,
-      stableUpgradeAvailable,
-      me.admin,
-      LL,
-      showFirmwareDialog
-    ]
-  );
-
-  const content = useMemo(() => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
-    return (
-      <>
-        <Box p={2} border="1px solid grey" borderRadius={2}>
-          <Typography mb={2} variant="h6" color="primary">
-            {LL.THIS_VERSION()}
-          </Typography>
-
-          <Grid
-            container
-            direction="row"
-            rowSpacing={1}
-            sx={{
-              justifyContent: 'flex-start',
-              alignItems: 'baseline'
-            }}
-          >
-            <Grid size={{ xs: 4, md: 2 }}>
-              <Typography color="secondary">{LL.VERSION()}</Typography>
-            </Grid>
-            <Grid size={{ xs: 8, md: 10 }}>
-              <Typography>
-                {data.emsesp_version}
-                {data.build_flags && (
-                  <Typography variant="caption">
-                    &nbsp; &#40;{data.build_flags}&#41;
-                  </Typography>
-                )}
-              </Typography>
-            </Grid>
-
-            <Grid size={{ xs: 4, md: 2 }}>
-              <Typography color="secondary">{LL.PLATFORM()}</Typography>
-            </Grid>
-            <Grid size={{ xs: 8, md: 10 }}>
-              <Typography>
-                {platform}
-                <Typography variant="caption">
-                  &nbsp; &#40;
-                  {data.psram ? (
-                    <CheckIcon
-                      color="success"
-                      sx={{
-                        fontSize: '1.5em',
-                        verticalAlign: 'middle'
-                      }}
-                    />
-                  ) : (
-                    <CloseIcon
-                      color="error"
-                      sx={{
-                        fontSize: '1.5em',
-                        verticalAlign: 'middle'
-                      }}
-                    />
-                  )}
-                  PSRAM&#41;
-                </Typography>
-              </Typography>
-            </Grid>
-
-            <Grid size={{ xs: 4, md: 2 }}>
-              <Typography color="secondary">{LL.RELEASE_TYPE()}</Typography>
-            </Grid>
-            <Grid size={{ xs: 8, md: 10 }}>
-              <FormControlLabel
-                disabled={!isDev}
-                control={
-                  <Checkbox
-                    sx={{
-                      '&.Mui-checked': {
-                        color: 'lightblue'
-                      }
-                    }}
-                  />
-                }
-                slotProps={{
-                  typography: {
-                    color: 'grey'
-                  }
-                }}
-                checked={!isDev}
-                label={LL.STABLE()}
-                sx={{ '& .MuiSvgIcon-root': { fontSize: 16 } }}
-              />
-              <FormControlLabel
-                disabled={isDev}
-                control={
-                  <Checkbox
-                    sx={{
-                      '&.Mui-checked': {
-                        color: 'lightblue'
-                      }
-                    }}
-                  />
-                }
-                slotProps={{
-                  typography: {
-                    color: 'grey'
-                  }
-                }}
-                checked={isDev}
-                label={LL.DEVELOPMENT()}
-                sx={{ '& .MuiSvgIcon-root': { fontSize: 16 } }}
-              />
-            </Grid>
-          </Grid>
-
-          {internetLive ? (
-            <>
-              <Typography mt={2} mb={2} variant="h6" color="primary">
-                {LL.AVAILABLE_VERSION()}
-              </Typography>
-
-              <Grid
-                container
-                direction="row"
-                rowSpacing={1}
-                sx={{
-                  justifyContent: 'flex-start',
-                  alignItems: 'baseline'
-                }}
-              >
-                <Grid size={{ xs: 4, md: 2 }}>
-                  <Typography color="secondary">{LL.STABLE()}</Typography>
-                </Grid>
-                <Grid size={{ xs: 8, md: 10 }}>
-                  <Typography>
-                    {latestVersion?.name}
-                    <IconButton onClick={() => setShowVersionInfo(1)}>
-                      <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                    </IconButton>
-                    {showButtons(false)}
-                  </Typography>
-                </Grid>
-
-                <Grid size={{ xs: 4, md: 2 }}>
-                  <Typography color="secondary">{LL.DEVELOPMENT()}</Typography>
-                </Grid>
-                <Grid size={{ xs: 8, md: 10 }}>
-                  <Typography>
-                    {latestDevVersion?.name}
-                    <IconButton onClick={() => setShowVersionInfo(2)}>
-                      <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                    </IconButton>
-                    {showButtons(true)}
-                  </Typography>
-                </Grid>
-              </Grid>
-            </>
-          ) : (
-            <Typography mt={2} color="warning">
-              <WarningIcon color="warning" sx={{ verticalAlign: 'middle', mr: 2 }} />
-              {LL.INTERNET_CONNECTION_REQUIRED()}
-            </Typography>
-          )}
-          {me.admin && (
-            <>
-              <VersionInfoDialog
-                showVersionInfo={showVersionInfo}
-                latestVersion={latestVersion}
-                latestDevVersion={latestDevVersion}
-                locale={locale}
-                LL={LL}
-                onClose={handleVersionInfoClose}
-              />
-              <InstallDialog
-                openInstallDialog={openInstallDialog}
-                fetchDevVersion={fetchDevVersion}
-                latestVersion={latestVersion}
-                latestDevVersion={latestDevVersion}
-                downloadOnly={downloadOnly}
-                platform={platform}
-                LL={LL}
-                onClose={closeInstallDialog}
-                onInstall={installFirmwareURL}
-              />
-              <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-                {LL.UPLOAD()}
-              </Typography>
-              <SingleUpload text={LL.UPLOAD_DROP_TEXT()} doRestart={doRestart} />
-            </>
-          )}
-        </Box>
-      </>
-    );
-  }, [
-    data,
-    error,
-    loadData,
-    LL,
-    platform,
-    isDev,
-    internetLive,
-    latestVersion,
-    latestDevVersion,
-    showVersionInfo,
-    locale,
-    openInstallDialog,
-    fetchDevVersion,
-    downloadOnly,
-    me.admin,
-    showButtons,
-    handleVersionInfoClose,
-    closeInstallDialog,
-    installFirmwareURL,
-    doRestart
-  ]);
-
-  return <SectionContent>{restarting ? <SystemMonitor /> : content}</SectionContent>;
-};
-
-export default memo(Version);

interface/src/components/ButtonRow.tsx

@@ -1,9 +1,9 @@
-import { memo } from 'react';
+import { type FC, type PropsWithChildren, memo } from 'react';
 
 import { Box } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 
-const ButtonRow = memo<BoxProps>(({ children, ...rest }) => (
+const ButtonRow: FC<PropsWithChildren<BoxProps>> = memo(({ children, ...rest }) => (
   <Box
     sx={{
       '& button, & a, & .MuiCard-root': {
@@ -19,6 +19,4 @@ const ButtonRow = memo<BoxProps>(({ children, ...rest }) => (
   </Box>
 ));
 
-ButtonRow.displayName = 'ButtonRow';
-
 export default ButtonRow;

interface/src/components/MessageBox.tsx

@@ -1,38 +1,35 @@
-import type { FC } from 'react';
+import { type FC, type PropsWithChildren, memo } from 'react';
 
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorIcon from '@mui/icons-material/Error';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { Box, Typography, useTheme } from '@mui/material';
-import type { BoxProps, SvgIconProps, Theme } from '@mui/material';
+import type { BoxProps, SvgIconProps } from '@mui/material';
 
 type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';
 
 export interface MessageBoxProps extends BoxProps {
   level: MessageBoxLevel;
   message?: string;
+  children?: React.ReactNode;
 }
 
-const LEVEL_ICONS: {
-  [type in MessageBoxLevel]: React.ComponentType<SvgIconProps>;
-} = {
+const LEVEL_ICONS: Record<MessageBoxLevel, React.ComponentType<SvgIconProps>> = {
   success: CheckCircleOutlineOutlinedIcon,
   info: InfoOutlinedIcon,
   warning: ReportProblemOutlinedIcon,
   error: ErrorIcon
 };
 
-const LEVEL_BACKGROUNDS: {
-  [type in MessageBoxLevel]: (theme: Theme) => string;
-} = {
-  success: (theme: Theme) => theme.palette.success.dark,
-  info: (theme: Theme) => theme.palette.info.main,
-  warning: (theme: Theme) => theme.palette.warning.dark,
-  error: (theme: Theme) => theme.palette.error.dark
+const LEVEL_PALETTE_PATHS: Record<MessageBoxLevel, string> = {
+  success: 'success.dark',
+  info: 'info.main',
+  warning: 'warning.dark',
+  error: 'error.dark'
 };
 
-const MessageBox: FC<MessageBoxProps> = ({
+const MessageBox: FC<PropsWithChildren<MessageBoxProps>> = ({
   level,
   message,
   sx,
@@ -40,25 +37,41 @@ const MessageBox: FC<MessageBoxProps> = ({
   ...rest
 }) => {
   const theme = useTheme();
+
   const Icon = LEVEL_ICONS[level];
-  const backgroundColor = LEVEL_BACKGROUNDS[level](theme);
-  const color = 'white';
+  const palettePath = LEVEL_PALETTE_PATHS[level];
+  const [paletteKeyName, shade] = palettePath.split('.') as [
+    keyof typeof theme.palette,
+    string
+  ];
+  const paletteKey = theme.palette[paletteKeyName] as unknown as Record<
+    string,
+    string
+  >;
+  const backgroundColor = paletteKey[shade];
+
   return (
     <Box
-      p={2}
-      display="flex"
-      alignItems="center"
-      borderRadius={1}
-      sx={{ backgroundColor, color, ...sx }}
       {...rest}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: 1,
+        backgroundColor,
+        color: 'white',
+        p: 2,
+        ...sx
+      }}
     >
       <Icon />
+      {(message || children) && (
         <Typography sx={{ ml: 2 }} variant="body1">
-        {message ?? ''}
-      </Typography>
+          {message}
           {children}
+        </Typography>
+      )}
     </Box>
   );
 };
 
-export default MessageBox;
+export default memo(MessageBox);

interface/src/components/SectionContent.tsx

@@ -1,6 +1,8 @@
+import { memo } from 'react';
 import type { FC } from 'react';
 
 import { Paper } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
 
 import type { RequiredChildrenProps } from 'utils';
 
@@ -8,16 +10,19 @@ interface SectionContentProps extends RequiredChildrenProps {
   id?: string;
 }
 
-const SectionContent: FC<SectionContentProps> = (props) => {
-  const { children, id } = props;
-  return (
-    <Paper
-      id={id}
-      sx={{ p: 1.5, m: 1.5, borderRadius: 3, border: '1px solid rgb(65, 65, 65)' }}
-    >
+// Extract styles to avoid recreation on every render
+const paperStyles: SxProps<Theme> = {
+  p: 1.5,
+  m: 1.5,
+  borderRadius: 3,
+  border: '1px solid rgb(65, 65, 65)'
+};
+
+const SectionContent: FC<SectionContentProps> = ({ children, id }) => (
+  <Paper id={id} sx={paperStyles}>
     {children}
   </Paper>
 );
-};
 
-export default SectionContent;
+// Memoize to prevent unnecessary re-renders
+export default memo(SectionContent);

interface/src/components/index.ts

@@ -1,4 +1,4 @@
-// Optimized exports - use direct exports to reduce bundle size
+// use direct exports to reduce bundle size
 export { default as SectionContent } from './SectionContent';
 export { default as ButtonRow } from './ButtonRow';
 export { default as MessageBox } from './MessageBox';

interface/src/components/inputs/BlockFormControlLabel.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import type { FC } from 'react';
 
 import { FormControlLabel } from '@mui/material';
@@ -9,4 +10,4 @@ const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
   </div>
 );
 
-export default BlockFormControlLabel;
+export default memo(BlockFormControlLabel);

interface/src/components/inputs/LanguageSelector.tsx

@@ -1,4 +1,6 @@
-import { type ChangeEventHandler, useContext } from 'react';
+import { memo, useContext } from 'react';
+import type { ChangeEventHandler } from 'react';
+import type { CSSProperties } from 'react';
 
 import { MenuItem, TextField } from '@mui/material';
 
@@ -17,8 +19,30 @@ import { I18nContext } from 'i18n/i18n-react';
 import type { Locales } from 'i18n/i18n-types';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
 
+const flagStyle: CSSProperties = { width: 16, verticalAlign: 'middle' };
+
+interface LanguageOption {
+  key: Locales;
+  flag: string;
+  label: string;
+}
+
+const LANGUAGE_OPTIONS: LanguageOption[] = [
+  { key: 'cz', flag: CZflag, label: 'CZ' },
+  { key: 'de', flag: DEflag, label: 'DE' },
+  { key: 'en', flag: GBflag, label: 'EN' },
+  { key: 'fr', flag: FRflag, label: 'FR' },
+  { key: 'it', flag: ITflag, label: 'IT' },
+  { key: 'nl', flag: NLflag, label: 'NL' },
+  { key: 'no', flag: NOflag, label: 'NO' },
+  { key: 'pl', flag: PLflag, label: 'PL' },
+  { key: 'sk', flag: SKflag, label: 'SK' },
+  { key: 'sv', flag: SVflag, label: 'SV' },
+  { key: 'tr', flag: TRflag, label: 'TR' }
+];
+
 const LanguageSelector = () => {
-  const { setLocale, locale } = useContext(I18nContext);
+  const { setLocale, locale, LL } = useContext(I18nContext);
 
   const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
     target
@@ -33,57 +57,20 @@ const LanguageSelector = () => {
     <TextField
       name="locale"
       variant="outlined"
+      aria-label={LL.LANGUAGE()}
       value={locale}
       onChange={onLocaleSelected}
       size="small"
       select
     >
-      <MenuItem key="cz" value="cz">
-        <img src={CZflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;CZ
-      </MenuItem>
-      <MenuItem key="de" value="de">
-        <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;DE
-      </MenuItem>
-      <MenuItem key="en" value="en">
-        <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;EN
-      </MenuItem>
-      <MenuItem key="fr" value="fr">
-        <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;FR
-      </MenuItem>
-      <MenuItem key="it" value="it">
-        <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;IT
-      </MenuItem>
-      <MenuItem key="nl" value="nl">
-        <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;NL
-      </MenuItem>
-      <MenuItem key="no" value="no">
-        <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;NO
-      </MenuItem>
-      <MenuItem key="pl" value="pl">
-        <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;PL
-      </MenuItem>
-      <MenuItem key="sk" value="sk">
-        <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;SK
-      </MenuItem>
-      <MenuItem key="sv" value="sv">
-        <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;SV
-      </MenuItem>
-      <MenuItem key="tr" value="tr">
-        <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;TR
+      {LANGUAGE_OPTIONS.map(({ key, flag, label }) => (
+        <MenuItem key={key} value={key}>
+          <img src={flag} style={flagStyle} alt={label} />
+          &nbsp;{label}
         </MenuItem>
+      ))}
     </TextField>
   );
 };
 
-export default LanguageSelector;
+export default memo(LanguageSelector);