docs

Signed-off-by: jokob-sk <jokob.sk@gmail.com>

.devcontainer/Dockerfile

@@ -0,0 +1,112 @@
+# DO NOT MODIFY THIS FILE DIRECTLY. IT IS AUTO-GENERATED BY .devcontainer/scripts/generate-dockerfile.sh
+
+# ---/Dockerfile---
+FROM alpine:3.22 AS builder
+
+ARG INSTALL_DIR=/app
+
+ENV PYTHONUNBUFFERED=1
+
+# Install build dependencies
+RUN apk add --no-cache bash shadow python3 python3-dev gcc musl-dev libffi-dev openssl-dev git \
+    && python -m venv /opt/venv
+
+# Enable venv
+ENV PATH="/opt/venv/bin:$PATH"
+
+
+RUN pip install openwrt-luci-rpc asusrouter asyncio aiohttp graphene flask flask-cors unifi-sm-api tplink-omada-client wakeonlan pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros yattag git+https://github.com/foreign-sub/aiofreepybox.git
+
+# Append Iliadbox certificate to aiofreepybox
+
+# second stage
+FROM alpine:3.22 AS runner
+
+ARG INSTALL_DIR=/app
+
+COPY --from=builder /opt/venv /opt/venv
+COPY --from=builder /usr/sbin/usermod /usr/sbin/groupmod /usr/sbin/
+
+# Enable venv
+ENV PATH="/opt/venv/bin:$PATH" 
+
+# default port and listen address
+ENV PORT=20211 LISTEN_ADDR=0.0.0.0 
+
+# needed for s6-overlay
+ENV S6_CMD_WAIT_FOR_SERVICES_MAXTIME=0
+
+# ❗ IMPORTANT - if you modify this file modify the /install/install_dependecies.sh file as well ❗ 
+
+RUN apk update --no-cache \
+    && apk add --no-cache bash libbsd zip lsblk gettext-envsubst sudo mtr tzdata s6-overlay \
+    && apk add --no-cache curl arp-scan iproute2 iproute2-ss nmap nmap-scripts traceroute nbtscan avahi avahi-tools openrc dbus net-tools net-snmp-tools bind-tools awake ca-certificates \
+    && apk add --no-cache sqlite php83 php83-fpm php83-cgi php83-curl php83-sqlite3 php83-session \
+    && apk add --no-cache python3 nginx \
+    && ln -s /usr/bin/awake /usr/bin/wakeonlan \
+    && rm -f /etc/nginx/http.d/default.conf
+
+
+# Add crontab file
+COPY --chmod=600 --chown=root:root install/crontab /etc/crontabs/root
+
+# Start all required services
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=2 \
+    CMD curl -sf -o /dev/null ${LISTEN_ADDR}:${PORT}/php/server/query_json.php?file=app_state.json
+
+ENTRYPOINT ["/init"]
+
+# ---/resources/devcontainer-Dockerfile---
+
+# Devcontainer build stage (do not build directly)
+# This file is combined with the root /Dockerfile by
+#   .devcontainer/scripts/generate-dockerfile.sh
+# The generator appends this stage to produce .devcontainer/Dockerfile.
+# Prefer to place dev-only setup here; use setup.sh only for runtime fixes.
+
+FROM runner AS devcontainer
+ENV INSTALL_DIR=/app 
+ENV PYTHONPATH=/workspaces/NetAlertX/test:/workspaces/NetAlertX/server:/app:/app/server:/opt/venv/lib/python3.12/site-packages
+
+# Install common tools, create user, and set up sudo
+RUN apk add --no-cache git nano vim jq php83-pecl-xdebug py3-pip nodejs sudo gpgconf pytest pytest-cov && \
+    adduser -D -s /bin/sh netalertx && \
+    addgroup netalertx nginx && \
+    addgroup netalertx www-data && \
+    echo "netalertx ALL=(ALL) NOPASSWD:ALL" > /etc/sudoers.d/90-netalertx && \
+    chmod 440 /etc/sudoers.d/90-netalertx
+# Install debugpy in the virtualenv if present, otherwise into system python3
+RUN /bin/sh -c '(/opt/venv/bin/python3 -m pip install --no-cache-dir debugpy) || (python3 -m pip install --no-cache-dir debugpy) || true'
+# setup nginx
+COPY .devcontainer/resources/netalertx-devcontainer.conf /etc/nginx/http.d/netalert-frontend.conf
+RUN set -e; \
+    chown netalertx:nginx /etc/nginx/http.d/netalert-frontend.conf; \
+    install -d -o netalertx -g www-data -m 775 /app; \
+    install -d -o netalertx -g www-data -m 755 /run/nginx; \
+    install -d -o netalertx -g www-data -m 755 /var/lib/nginx/logs; \
+    rm -f /var/lib/nginx/logs/* || true; \
+    for f in error access; do : > /var/lib/nginx/logs/$f.log; done; \
+    install -d -o netalertx -g www-data -m 777 /run/php; \
+    install -d -o netalertx -g www-data -m 775 /var/log/php; \
+    chown -R netalertx:www-data /etc/nginx/http.d; \
+    chmod -R 775 /etc/nginx/http.d; \
+    chown -R netalertx:www-data /var/lib/nginx; \
+    chmod -R 755 /var/lib/nginx && \
+    chown -R netalertx:www-data /var/log/nginx/ && \
+    sed -i '/^user /d' /etc/nginx/nginx.conf; \
+    sed -i 's|^error_log .*|error_log /dev/stderr warn;|' /etc/nginx/nginx.conf; \
+    sed -i 's|^access_log .*|access_log /dev/stdout main;|' /etc/nginx/nginx.conf; \
+    sed -i 's|error_log .*|error_log /dev/stderr warn;|g' /etc/nginx/http.d/*.conf 2>/dev/null || true; \
+    sed -i 's|access_log .*|access_log /dev/stdout main;|g' /etc/nginx/http.d/*.conf 2>/dev/null || true; \
+    mkdir -p /run/openrc; \
+    chown netalertx:nginx /run/openrc/; \
+    rm -Rf /run/openrc/*;
+
+# setup pytest
+RUN sudo /opt/venv/bin/python -m pip install -U pytest pytest-cov
+
+WORKDIR /workspaces/NetAlertX
+
+
+ENTRYPOINT ["/bin/sh","-c","sleep infinity"]

.devcontainer/README.md

@@ -0,0 +1,30 @@
+# NetAlertX Devcontainer Notes
+
+This devcontainer replicates the production container as closely as practical, with a few development-oriented differences.
+
+Key behavior
+- No init process: Services are managed by shell scripts using killall, setsid, and nohup. Startup and restarts are script-driven rather than supervised by an init system.
+- Autogenerated Dockerfile: The effective devcontainer Dockerfile is generated on demand by `.devcontainer/scripts/generate-dockerfile.sh`. It combines the root `Dockerfile` (with certain COPY instructions removed) and an extra "devcontainer" stage from `.devcontainer/resources/devcontainer-Dockerfile`. When you change the resource Dockerfile, re-run the generator to refresh `.devcontainer/Dockerfile`.
+- Where to put setup: Prefer baking setup into `.devcontainer/resources/devcontainer-Dockerfile`. Use `.devcontainer/scripts/setup.sh` only for steps that must happen at container start (e.g., cleaning up nginx/php ownership, creating directories, touching runtime files) or depend on runtime paths.
+
+Debugging (F5)
+The Frontend and backend run in debug mode always.  You can attach your debugger at any time.  
+- Python Backend Debug: Attach - The backend runs with a debugger on port 5678. Set breakpoints in the code and press F5 to begin triggering them.
+- PHP Frontend (XDebug) Xdebug listens on 9003. Start listening and use an Xdebug extension in your browser to debug PHP.
+
+Common workflows (F1->Tasks: Run Task)
+- Regenerate the devcontainer Dockerfile: Run the VS Code task "Generate Dockerfile" or execute `.devcontainer/scripts/generate-dockerfile.sh`. The result is `.devcontainer/Dockerfile`.
+- Re-run startup provisioning: Use the task "Re-Run Startup Script" to execute `.devcontainer/scripts/setup.sh` in the container.
+- Start services:
+  - Backend (GraphQL/Flask): `.devcontainer/scripts/restart-backend.sh` starts it under debugpy and logs to `/app/log/app.log`
+  - Frontend (nginx + PHP-FPM): Started via setup.sh; can be restarted by the task "Start Frontend (nginx and PHP-FPM)".
+
+Testing
+- pytest is installed via Alpine packages (py3-pytest, py3-pytest-cov).
+- PYTHONPATH includes workspace and venv site-packages so tests can import `server/*` modules and third-party libs.
+- Run tests via VS Code Pytest Runner or `pytest -q` from the workspace root.
+
+Conventions
+- Don’t edit `.devcontainer/Dockerfile` directly; edit `.devcontainer/resources/devcontainer-Dockerfile` and regenerate.
+- Keep setup in the resource Dockerfile when possible; reserve `setup.sh` for runtime fixes.
+- Avoid hardcoding ports/secrets; prefer existing settings and helpers (see `.github/copilot-instructions.md`).

.devcontainer/devcontainer.json

@@ -0,0 +1,79 @@
+{
+  "name": "NetAlertX DevContainer",
+  "remoteUser": "netalertx",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": "..",
+    "target": "devcontainer"
+  },
+  "workspaceFolder": "/workspaces/NetAlertX",
+  "runArgs": [
+    "--add-host=host.docker.internal:host-gateway",
+    "--security-opt", "apparmor=unconfined" // for alowing ramdisk mounts
+  ],
+
+  "capAdd": [
+    "SYS_ADMIN", // For mounting ramdisks
+    "NET_ADMIN", // For network interface configuration
+    "NET_RAW"    // For raw packet manipulation
+  ],
+  
+  
+  
+  "postStartCommand": "${containerWorkspaceFolder}/.devcontainer/scripts/setup.sh",
+  
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "ms-python.python",
+        "ms-azuretools.vscode-docker",
+        "felixfbecker.php-debug",
+        "bmewburn.vscode-intelephense-client",
+        "xdebug.php-debug",
+        "ms-python.vscode-pylance",
+        "pamaron.pytest-runner",
+        "coderabbit.coderabbit-vscode",
+        "ms-python.black-formatter"
+      ]
+      ,
+      "settings": {
+        "terminal.integrated.cwd": "${containerWorkspaceFolder}",
+        // Python testing configuration
+        "python.testing.pytestEnabled": true,
+        "python.testing.unittestEnabled": false,
+        "python.testing.pytestArgs": [
+          "test"
+        ],
+        // Make sure we discover tests and import server correctly
+        "python.analysis.extraPaths": [
+          "/workspaces/NetAlertX",
+          "/workspaces/NetAlertX/server",
+          "/app",
+          "/app/server"
+        ]
+      }
+    }
+  },
+  "forwardPorts": [5678, 9000, 9003, 20211, 20212],
+
+  "portsAttributes": {
+    "20211": {
+      "label": "Frontend:Nginx+PHP"
+    },
+    "20212": {
+      "label": "Backend:GraphQL"
+    },
+    "9003": {
+      "label": "PHP Debug:Xdebug"
+    },
+    "9000": {
+      "label": "PHP-FPM:FastCGI"
+    },
+    "5678": {
+      "label": "Python Debug:debugpy"
+    }
+  },
+
+  // Optional: ensures compose services are stopped when you close the window
+  "shutdownAction": "stopContainer"
+}

.devcontainer/resources/99-xdebug.ini

@@ -0,0 +1,8 @@
+zend_extension="xdebug.so"
+[xdebug]
+xdebug.mode=develop,debug
+xdebug.log_level=0
+xdebug.client_host=host.docker.internal
+xdebug.client_port=9003
+xdebug.start_with_request=yes
+xdebug.discover_client_host=1

.devcontainer/resources/devcontainer-Dockerfile

@@ -0,0 +1,51 @@
+# Devcontainer build stage (do not build directly)
+# This file is combined with the root /Dockerfile by
+#   .devcontainer/scripts/generate-dockerfile.sh
+# The generator appends this stage to produce .devcontainer/Dockerfile.
+# Prefer to place dev-only setup here; use setup.sh only for runtime fixes.
+
+FROM runner AS devcontainer
+ENV INSTALL_DIR=/app 
+ENV PYTHONPATH=/workspaces/NetAlertX/test:/workspaces/NetAlertX/server:/app:/app/server:/opt/venv/lib/python3.12/site-packages
+
+# Install common tools, create user, and set up sudo
+RUN apk add --no-cache git nano vim jq php83-pecl-xdebug py3-pip nodejs sudo gpgconf pytest pytest-cov && \
+    adduser -D -s /bin/sh netalertx && \
+    addgroup netalertx nginx && \
+    addgroup netalertx www-data && \
+    echo "netalertx ALL=(ALL) NOPASSWD:ALL" > /etc/sudoers.d/90-netalertx && \
+    chmod 440 /etc/sudoers.d/90-netalertx
+# Install debugpy in the virtualenv if present, otherwise into system python3
+RUN /bin/sh -c '(/opt/venv/bin/python3 -m pip install --no-cache-dir debugpy) || (python3 -m pip install --no-cache-dir debugpy) || true'
+# setup nginx
+COPY .devcontainer/resources/netalertx-devcontainer.conf /etc/nginx/http.d/netalert-frontend.conf
+RUN set -e; \
+    chown netalertx:nginx /etc/nginx/http.d/netalert-frontend.conf; \
+    install -d -o netalertx -g www-data -m 775 /app; \
+    install -d -o netalertx -g www-data -m 755 /run/nginx; \
+    install -d -o netalertx -g www-data -m 755 /var/lib/nginx/logs; \
+    rm -f /var/lib/nginx/logs/* || true; \
+    for f in error access; do : > /var/lib/nginx/logs/$f.log; done; \
+    install -d -o netalertx -g www-data -m 777 /run/php; \
+    install -d -o netalertx -g www-data -m 775 /var/log/php; \
+    chown -R netalertx:www-data /etc/nginx/http.d; \
+    chmod -R 775 /etc/nginx/http.d; \
+    chown -R netalertx:www-data /var/lib/nginx; \
+    chmod -R 755 /var/lib/nginx && \
+    chown -R netalertx:www-data /var/log/nginx/ && \
+    sed -i '/^user /d' /etc/nginx/nginx.conf; \
+    sed -i 's|^error_log .*|error_log /dev/stderr warn;|' /etc/nginx/nginx.conf; \
+    sed -i 's|^access_log .*|access_log /dev/stdout main;|' /etc/nginx/nginx.conf; \
+    sed -i 's|error_log .*|error_log /dev/stderr warn;|g' /etc/nginx/http.d/*.conf 2>/dev/null || true; \
+    sed -i 's|access_log .*|access_log /dev/stdout main;|g' /etc/nginx/http.d/*.conf 2>/dev/null || true; \
+    mkdir -p /run/openrc; \
+    chown netalertx:nginx /run/openrc/; \
+    rm -Rf /run/openrc/*;
+
+# setup pytest
+RUN sudo /opt/venv/bin/python -m pip install -U pytest pytest-cov
+
+WORKDIR /workspaces/NetAlertX
+
+
+ENTRYPOINT ["/bin/sh","-c","sleep infinity"]

.devcontainer/resources/netalertx-devcontainer.conf

@@ -0,0 +1,26 @@
+log_format netalertx '$remote_addr - $remote_user [$time_local] "$request" '
+                     '$status $body_bytes_sent "$http_referer" '
+                     '"$http_user_agent" "$http_x_forwarded_for"';
+access_log /var/log/nginx/access.log netalertx flush=1s;
+error_log  /var/log/nginx/error.log  warn;
+
+server {
+    listen 20211 default_server;
+    root /app/front;
+    index index.php;
+
+    add_header X-Forwarded-Prefix "/netalertx" always;
+    proxy_set_header X-Forwarded-Prefix "/netalertx";
+
+    location ~* \.php$ {
+        add_header Cache-Control "no-store";
+        fastcgi_pass 127.0.0.1:9000;
+        include         fastcgi_params;
+        fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
+        fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
+        fastcgi_param   PHP_VALUE "xdebug.remote_enable=1";
+        fastcgi_connect_timeout 75;
+        fastcgi_send_timeout 600;
+        fastcgi_read_timeout 600;
+    }
+}

.devcontainer/scripts/generate-dockerfile.sh

@@ -0,0 +1,38 @@
+#!/bin/sh
+
+# Generator for .devcontainer/Dockerfile
+# Combines the root /Dockerfile (with some COPY lines removed) and
+# the dev-only stage in .devcontainer/resources/devcontainer-Dockerfile.
+# Run this script after modifying the resource Dockerfile to refresh
+# the final .devcontainer/Dockerfile used by the devcontainer.
+
+# Make a copy of the original Dockerfile to the .devcontainer folder
+# but remove the COPY . ${INSTALL_DIR}/ command from it. This avoids
+# overwriting /app (which uses symlinks to the workspace) and preserves
+# debugging capabilities inside the devcontainer.
+
+SCRIPT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
+DEVCONTAINER_DIR="${SCRIPT_DIR%/scripts}"
+ROOT_DIR="${DEVCONTAINER_DIR%/.devcontainer}"
+
+OUT_FILE="${DEVCONTAINER_DIR}/Dockerfile"
+
+echo "# DO NOT MODIFY THIS FILE DIRECTLY. IT IS AUTO-GENERATED BY .devcontainer/scripts/generate-dockerfile.sh" > "$OUT_FILE"
+echo "" >> "$OUT_FILE"
+echo "# ---/Dockerfile---" >> "$OUT_FILE"
+
+sed '/${INSTALL_DIR}/d' "${ROOT_DIR}/Dockerfile" >> "$OUT_FILE"
+
+# sed the line https://github.com/foreign-sub/aiofreepybox.git \\ to remove trailing backslash
+sed -i '/aiofreepybox.git/ s/ \\$//' "$OUT_FILE"
+
+# don't cat the file, just copy it in because it doesn't exist at build time
+sed -i 's|^ RUN cat ${INSTALL_DIR}/install/freebox_certificate.pem >> /opt/venv/lib/python3.12/site-packages/aiofreepybox/freebox_certificates.pem$| COPY install/freebox_certificate.pem /opt/venv/lib/python3.12/site-packages/aiofreepybox/freebox_certificates.pem |' "$OUT_FILE"
+
+echo "" >> "$OUT_FILE"
+echo "# ---/resources/devcontainer-Dockerfile---" >> "$OUT_FILE"
+echo "" >> "$OUT_FILE"
+
+cat "${DEVCONTAINER_DIR}/resources/devcontainer-Dockerfile" >> "$OUT_FILE"
+
+echo "Generated $OUT_FILE using root dir $ROOT_DIR" >&2

.devcontainer/scripts/restart-backend.sh

@@ -0,0 +1,26 @@
+#!/bin/sh
+# Start (or restart) the NetAlertX Python backend under debugpy in background.
+# This script is invoked by the VS Code task "Restart GraphQL".
+# It exists to avoid complex inline command chains that were being mangled by the task runner.
+
+set -e
+
+LOG_DIR=/app/log
+APP_DIR=/app/server
+PY=python3
+PORT_DEBUG=5678
+
+# Kill any prior debug/run instances
+sudo killall python3 2>/dev/null || true
+sleep 2
+
+echo ''|tee $LOG_DIR/stdout.log $LOG_DIR/stderr.log $LOG_DIR/app.log
+
+cd "$APP_DIR"
+
+# Launch using absolute module path for clarity; rely on cwd for local imports
+setsid nohup "${PY}" -m debugpy --listen "0.0.0.0:${PORT_DEBUG}" /app/server/__main__.py \
+  1>>"$LOG_DIR/stdout.log" \
+  2>>"$LOG_DIR/stderr.log" &
+PID=$!
+sleep 2

.devcontainer/scripts/run-tests.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+# shellcheck shell=sh
+# Simple helper to run pytest inside the devcontainer with correct paths
+set -eu
+
+# Ensure we run from the workspace root
+cd /workspaces/NetAlertX
+
+# Make sure PYTHONPATH includes server and workspace
+export PYTHONPATH="/workspaces/NetAlertX:/workspaces/NetAlertX/server:/app:/app/server:${PYTHONPATH:-}"
+
+# Default to running the full test suite under /workspaces/NetAlertX/test
+pytest -q --maxfail=1 --disable-warnings test "$@"

.devcontainer/scripts/setup.sh

@@ -0,0 +1,200 @@
+#! /bin/bash
+# Runtime setup for devcontainer (executed after container starts).
+# Prefer building setup into resources/devcontainer-Dockerfile when possible.
+# Use this script for runtime-only adjustments (permissions, sockets, ownership,
+# and services managed without init) that are difficult at build time.
+id
+
+# Define variables (paths, ports, environment)
+
+export APP_DIR="/app"
+export APP_COMMAND="/workspaces/NetAlertX/.devcontainer/scripts/restart-backend.sh"
+export PHP_FPM_BIN="/usr/sbin/php-fpm83"
+export NGINX_BIN="/usr/sbin/nginx"
+export CROND_BIN="/usr/sbin/crond -f"
+
+
+export ALWAYS_FRESH_INSTALL=false
+export INSTALL_DIR=/app
+export APP_DATA_LOCATION=/app/config
+export APP_CONFIG_LOCATION=/app/config
+export LOGS_LOCATION=/app/logs
+export CONF_FILE="app.conf"
+export NGINX_CONF_FILE=netalertx.conf
+export DB_FILE="app.db"
+export FULL_FILEDB_PATH="${INSTALL_DIR}/db/${DB_FILE}"
+export NGINX_CONFIG_FILE="/etc/nginx/http.d/${NGINX_CONF_FILE}"
+export OUI_FILE="/usr/share/arp-scan/ieee-oui.txt" # Define the path to ieee-oui.txt and ieee-iab.txt
+export TZ=Europe/Paris
+export PORT=20211
+export SOURCE_DIR="/workspaces/NetAlertX"
+
+
+ 
+main() {
+    echo "=== NetAlertX Development Container Setup ==="
+    echo "Setting up ${SOURCE_DIR}..."
+    configure_source
+    
+    echo "--- Starting Development Services ---"
+    configure_php
+
+
+    start_services
+}
+
+# safe_link: create a symlink from source to target, removing existing target if necessary
+# bypassing the default behavior of symlinking the directory into the target directory if it is a directory
+safe_link() {
+    # usage: safe_link <source> <target>
+    local src="$1"
+    local dst="$2"
+
+    # Ensure parent directory exists
+    install -d -m 775 "$(dirname "$dst")" >/dev/null 2>&1 || true
+
+    # If target exists, remove it without dereferencing symlinks
+    if [ -L "$dst" ] || [ -e "$dst" ]; then
+        rm -rf "$dst"
+    fi
+
+    # Create link; -n prevents deref, -f replaces if somehow still exists
+    ln -sfn "$src" "$dst"
+}
+
+# Setup source directory
+configure_source() {
+    echo "[1/3] Configuring Source..."
+    echo "  -> Linking source to ${INSTALL_DIR}"
+    echo "Dev">${INSTALL_DIR}/.VERSION
+
+    echo "  -> Mounting ramdisks for /log and /api"
+    sudo mount -t tmpfs -o size=256M tmpfs "${SOURCE_DIR}/log"
+    sudo mount -t tmpfs -o size=512M tmpfs "${SOURCE_DIR}/api"
+    safe_link ${SOURCE_DIR}/api           ${INSTALL_DIR}/api
+    safe_link ${SOURCE_DIR}/back          ${INSTALL_DIR}/back
+    safe_link "${SOURCE_DIR}/config"     "${INSTALL_DIR}/config"
+    safe_link "${SOURCE_DIR}/db"         "${INSTALL_DIR}/db"
+    if [ ! -f "${SOURCE_DIR}/config/app.conf" ]; then
+        cp ${SOURCE_DIR}/back/app.conf ${INSTALL_DIR}/config/
+        cp ${SOURCE_DIR}/back/app.db ${INSTALL_DIR}/db/
+    fi
+
+    safe_link "${SOURCE_DIR}/docs"       "${INSTALL_DIR}/docs"
+    safe_link "${SOURCE_DIR}/front"      "${INSTALL_DIR}/front"
+    safe_link "${SOURCE_DIR}/install"    "${INSTALL_DIR}/install"
+    safe_link "${SOURCE_DIR}/scripts"    "${INSTALL_DIR}/scripts"
+    safe_link "${SOURCE_DIR}/server"     "${INSTALL_DIR}/server"
+    safe_link "${SOURCE_DIR}/test"       "${INSTALL_DIR}/test"
+    safe_link "${SOURCE_DIR}/log"       "${INSTALL_DIR}/log"
+    safe_link "${SOURCE_DIR}/mkdocs.yml" "${INSTALL_DIR}/mkdocs.yml"
+
+    echo "  -> Copying static files to ${INSTALL_DIR}"
+    cp -R ${SOURCE_DIR}/CODE_OF_CONDUCT.md ${INSTALL_DIR}/
+    cp -R ${SOURCE_DIR}/dockerfiles ${INSTALL_DIR}/dockerfiles
+    sudo cp -na "${INSTALL_DIR}/back/${CONF_FILE}" "${INSTALL_DIR}/config/${CONF_FILE}"
+    sudo cp -na "${INSTALL_DIR}/back/${DB_FILE}" "${FULL_FILEDB_PATH}"
+    if [ -e "${INSTALL_DIR}/api/user_notifications.json" ]; then
+        echo "  -> Removing existing user_notifications.json"
+        sudo rm "${INSTALL_DIR}"/api/user_notifications.json
+    fi
+
+
+    
+    echo "  -> Setting ownership and permissions"
+    sudo find ${INSTALL_DIR}/ -type d -exec chmod 775 {} \;
+    sudo find ${INSTALL_DIR}/ -type f -exec chmod 664 {} \;
+    sudo date +%s > "${INSTALL_DIR}/front/buildtimestamp.txt"
+    sudo chmod 640 "${INSTALL_DIR}/config/${CONF_FILE}" || true
+
+
+
+    echo "  -> Setting up log directory"
+    install -d -o netalertx -g www-data -m 777 ${INSTALL_DIR}/log/plugins
+
+    echo "  -> Empty log"|tee ${INSTALL_DIR}/log/app.log \
+        ${INSTALL_DIR}/log/app_front.log \
+        ${INSTALL_DIR}/log/stdout.log
+    touch ${INSTALL_DIR}/log/stderr.log \
+    ${INSTALL_DIR}/log/execution_queue.log
+    echo 0>${INSTALL_DIR}/log/db_is_locked.log
+
+    date +%s > /app/front/buildtimestamp.txt
+
+    killall python &>/dev/null
+    sleep 1
+}
+
+#
+
+# start_services: start crond, PHP-FPM, nginx and the application
+start_services() {
+    echo "[3/3] Starting services..."
+
+    killall nohup &>/dev/null || true
+
+    killall php-fpm83 &>/dev/null || true
+    killall crond &>/dev/null || true
+    # Give the OS a moment to release the php-fpm socket
+    sleep 0.3
+    echo "      -> Starting CronD"
+    setsid nohup $CROND_BIN &>/dev/null &
+
+    echo "      -> Starting PHP-FPM"
+    setsid nohup $PHP_FPM_BIN &>/dev/null &
+
+    sudo killall nginx &>/dev/null || true
+    # Wait for the previous nginx processes to exit and for the port to free up
+    tries=0
+    while ss -ltn | grep -q ":${PORT}[[:space:]]" && [ $tries -lt 10 ]; do
+        echo "  -> Waiting for port ${PORT} to free..."
+        sleep 0.2
+        tries=$((tries+1))
+    done
+    sleep 0.2
+    echo "      -> Starting Nginx"
+    setsid nohup $NGINX_BIN &>/dev/null &
+    echo "      -> Starting Backend ${APP_DIR}/server..."
+    $APP_COMMAND 
+    sleep 2
+}
+
+# configure_php: configure PHP-FPM and enable dev debug options
+configure_php() {
+    echo "[2/3] Configuring PHP-FPM..."
+    sudo killall php-fpm83 &>/dev/null || true
+    install -d -o nginx -g www-data /run/php/ &>/dev/null
+    sudo sed -i "/^;pid/c\pid = /run/php/php8.3-fpm.pid" /etc/php83/php-fpm.conf
+    sudo sed -i 's|^listen = .*|listen = 127.0.0.1:9000|' /etc/php83/php-fpm.d/www.conf
+    sudo sed -i 's|fastcgi_pass .*|fastcgi_pass 127.0.0.1:9000;|' /etc/nginx/http.d/*.conf
+
+    #increase max child process count to 10
+    sudo sed -i -e 's/pm.max_children = 5/pm.max_children = 10/' /etc/php83/php-fpm.d/www.conf 
+
+    # find any line in php-fmp that starts with either ;error_log or error_log = and replace it with error_log = /app/log/app.php_errors.log
+    sudo sed -i '/^;*error_log\s*=/c\error_log = /app/log/app.php_errors.log' /etc/php83/php-fpm.conf
+    # If the line was not found, append it to the end of the file
+    if ! grep -q '^error_log\s*=' /etc/php83/php-fpm.conf; then
+        echo 'error_log = /app/log/app.php_errors.log' | sudo tee -a /etc/php83/php-fpm.conf
+    fi
+
+    sudo mkdir -p /etc/php83/conf.d
+    sudo cp /workspaces/NetAlertX/.devcontainer/resources/99-xdebug.ini /etc/php83/conf.d/99-xdebug.ini
+
+    sudo rm -R /var/log/php83 &>/dev/null || true
+    install -d -o netalertx -g www-data -m 755 var/log/php83;
+
+    sudo chmod 644 /etc/php83/conf.d/99-xdebug.ini || true
+
+}
+
+# (duplicate start_services removed)
+
+
+
+echo "$(git rev-parse --short=8 HEAD)">/app/.VERSION
+# Run the main function
+main
+
+
+

.devcontainer/scripts/stream-logs.sh

@@ -0,0 +1,40 @@
+#!/bin/sh
+# Stream NetAlertX logs to stdout so the Dev Containers output channel shows them.
+# This script waits briefly for the files to appear and then tails them with -F.
+
+LOG_FILES="/app/log/app.log  /app/log/db_is_locked.log /app/log/execution_queue.log /app/log/app_front.log /app/log/app.php_errors.log /app/log/IP_changes.log /app/stderr.log /app/stdout.log"
+
+wait_for_files() {
+  # Wait up to ~10s for at least one of the files to exist
+  attempts=0
+  while [ $attempts -lt 20 ]; do
+    for f in $LOG_FILES; do
+      if [ -f "$f" ]; then
+        return 0
+      fi
+    done
+    attempts=$((attempts+1))
+    sleep 0.5
+  done
+  return 1
+}
+
+if wait_for_files; then
+  echo "Starting log stream for:"
+  for f in $LOG_FILES; do
+    [ -f "$f" ] && echo "  $f"
+  done
+
+  # Use tail -F where available. If tail -F isn't supported, tail -f is used as fallback.
+  # Some minimal images may have busybox tail without -F; this handles both.
+  if tail --version >/dev/null 2>&1; then
+    # GNU tail supports -F
+    tail -n +1 -F $LOG_FILES
+  else
+    # Fallback to -f for busybox; will exit if files rotate or do not exist initially
+    tail -n +1 -f $LOG_FILES
+  fi
+else
+  echo "No log files appeared after wait; exiting stream script."
+  exit 0
+fi

.devcontainer/xdebug-trigger.ini

@@ -0,0 +1,11 @@
+zend_extension=xdebug.so
+xdebug.mode=debug
+xdebug.start_with_request=trigger
+xdebug.trigger_value=VSCODE
+xdebug.client_host=host.docker.internal
+xdebug.client_port=9003
+xdebug.log=/var/log/xdebug.log
+xdebug.log_level=7
+xdebug.idekey=VSCODE
+xdebug.discover_client_host=true
+xdebug.max_nesting_level=512

.github/FUNDING.yml

@@ -1,3 +1,3 @@
 github: jokob-sk
-patreon: 84385063
+patreon: netalertx
 buy_me_a_coffee: jokobsk

.github/copilot-instructions.md

@@ -0,0 +1,62 @@
+This is NetAlertX — network monitoring & alerting.
+
+Purpose: Guide AI assistants to follow NetAlertX architecture, conventions, and safety practices. Be concise, opinionated, and prefer existing helpers/settings over new code or hardcoded values.
+
+## Architecture (what runs where)
+- Backend (Python): main loop + GraphQL/REST endpoints orchestrate scans, plugins, workflows, notifications, and JSON export.
+	- Key: `server/__main__.py`, `server/plugin.py`, `server/initialise.py`, `server/api_server/api_server_start.py`
+- Data (SQLite): persistent state in `db/app.db`; helpers in `server/database.py` and `server/db/*`.
+- Frontend (Nginx + PHP + JS): UI reads JSON, triggers execution queue events.
+	- Key: `front/`, `front/js/common.js`, `front/php/server/*.php`
+- Plugins (Python): acquisition/enrichment/publishers under `front/plugins/*` with `config.json` manifests.
+- Messaging/Workflows: `server/messaging/*`, `server/workflows/*`
+- API JSON Cache for UI: generated under `api/*.json`
+
+Backend loop phases (see `server/__main__.py` and `server/plugin.py`): `once`, `schedule`, `always_after_scan`, `before_name_updates`, `on_new_device`, `on_notification`, plus ad‑hoc `run` via execution queue. Plugins execute as scripts that write result logs for ingestion.
+
+## Plugin patterns that matter
+- Manifest lives at `front/plugins/<code_name>/config.json`; `code_name` == folder, `unique_prefix` drives settings and filenames (e.g., `ARPSCAN`).
+- Control via settings: `<PREF>_RUN` (phase), `<PREF>_RUN_SCHD` (cron-like), `<PREF>_CMD` (script path), `<PREF>_RUN_TIMEOUT`, `<PREF>_WATCH` (diff columns).
+- Data contract: scripts write `/app/log/plugins/last_result.<PREF>.log` (pipe‑delimited: 9 required cols + optional 4). Use `front/plugins/plugin_helper.py`’s `Plugin_Objects` to sanitize text and normalize MACs, then `write_result_file()`.
+- Device import: define `database_column_definitions` when creating/updating devices; watched fields trigger notifications.
+
+### Standard Plugin Formats
+* publisher: Sends notifications to services. Runs `on_notification`. Data source: self.
+* dev scanner: Creates devices and manages online/offline status. Runs on `schedule`. Data source: self / SQLite DB.
+* name discovery: Discovers device names via various protocols. Runs `before_name_updates` or on `schedule`. Data source: self.
+* importer: Imports devices from another service. Runs on `schedule`. Data source: self / SQLite DB.
+* system: Provides core system functionality. Runs on `schedule` or is always on. Data source: self / Template.
+* other: Miscellaneous plugins. Runs at various times. Data source: self / Template.
+
+### Plugin logging & outputs
+- Always log via `mylog()` like other plugins do (no `print()`). Example: `mylog('verbose', [f'[{pluginName}] In script'])`.
+- Collect results with `Plugin_Objects.add_object(...)` during processing and call `plugin_objects.write_result_file()` exactly once at the end of the script.
+- Prefer to log a brief summary before writing (e.g., total objects added) to aid troubleshooting; keep logs concise at `verbose` level unless debugging.
+
+- Do not write ad‑hoc files for results; the only consumable output is `last_result.<PREF>.log` generated by `Plugin_Objects`.
+## API/Endpoints quick map
+- Flask app: `server/api_server/api_server_start.py` exposes routes like `/device/<mac>`, `/devices`, `/devices/export/{csv,json}`, `/devices/import`, `/devices/totals`, `/devices/by-status`, plus `nettools`, `events`, `sessions`, `dbquery`, `metrics`, `sync`.
+- Authorization: all routes expect header `Authorization: Bearer <API_TOKEN>` via `get_setting_value('API_TOKEN')`.
+
+## Conventions & helpers to reuse
+- Settings: add/modify via `ccd()` in `server/initialise.py` or per‑plugin manifest. Never hardcode ports or secrets; use `get_setting_value()`.
+- Logging: use `logger.mylog(level, [message])`; levels: none/minimal/verbose/debug/trace.
+- Time/MAC/strings: `helper.py` (`timeNowTZ`, `normalize_mac`, sanitizers). Validate MACs before DB writes.
+- DB helpers: prefer `server/db/db_helper.py` functions (e.g., `get_table_json`, device condition helpers) over raw SQL in new paths.
+
+## Dev workflow (devcontainer)
+- Services: use tasks to (re)start backend and nginx/PHP-FPM. Backend runs with debugpy on 5678; attach a Python debugger if needed.
+- Run a plugin manually: `python3 front/plugins/<code_name>/script.py` (ensure `sys.path` includes `/app/front/plugins` and `/app/server` like the template).
+- Testing: pytest available via Alpine packages. Tests live in `test/`; app code is under `server/`. PYTHONPATH is preconfigured to include workspace and `/opt/venv` site‑packages.
+
+## What “done right” looks like
+- When adding a plugin, start from `front/plugins/__template`, implement with `plugin_helper`, define manifest settings, and wire phase via `<PREF>_RUN`. Verify logs in `/app/log/plugins/` and data in `api/*.json`.
+- When introducing new config, define it once (core `ccd()` or plugin manifest) and read it via helpers everywhere.
+- When exposing new server functionality, add endpoints in `server/api_server/*` and keep authorization consistent; update UI by reading/writing JSON cache rather than bypassing the pipeline.
+
+## Useful references
+- Docs: `docs/PLUGINS_DEV.md`, `docs/SETTINGS_SYSTEM.md`, `docs/API_*.md`, `docs/DEBUG_*.md`
+- Logs: backend `/app/log/app.log`, plugin logs under `/app/log/plugins/`, nginx/php logs under `/var/log/*`
+
+Assistant expectations
+- Reference concrete files/paths. Use existing helpers/settings. Keep changes idempotent and safe. Offer a quick validation step (log line, API hit, or JSON export) for anything you add.

.github/tweet.md

@@ -1,2 +0,0 @@
-🎉 New release: **v25.7.3 - 🌍 Arabic translation and various fixes** is live! 🚀
-Check it out here: https://github.com/jokob-sk/NetAlertX/releases/tag/v25.7.3

.github/workflows/docker_rewrite.yml

@@ -0,0 +1,81 @@
+name: docker
+
+on:
+  push:
+    branches:
+      - rewrite
+    tags:
+      - '*.*.*'
+  pull_request:
+    branches:
+      - rewrite
+
+jobs: 
+  docker_rewrite:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    permissions:
+      contents: read
+      packages: write
+    if: >
+      contains(github.event.head_commit.message, 'PUSHPROD') != 'True' &&
+      github.repository == 'jokob-sk/NetAlertX'  
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Set up dynamic build ARGs
+        id: getargs        
+        run: echo "version=$(cat ./stable/VERSION)" >> $GITHUB_OUTPUT
+
+      - name: Get release version
+        id: get_version
+        run: echo "version=Dev" >> $GITHUB_OUTPUT
+
+      - name: Create .VERSION file
+        run: echo "${{ steps.get_version.outputs.version }}" >> .VERSION
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ghcr.io/jokob-sk/netalertx-dev-rewrite
+            jokobsk/netalertx-dev-rewrite
+          tags: |
+            type=raw,value=latest
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+
+      - name: Log in to Github Container Registry (GHCR)
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: jokob-sk
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Log in to DockerHub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/social_post_on_release.yml

@@ -1,4 +1,4 @@
-name: 📧 Twitter and Discord Posts
+name: 📧 Social Posts
 on:
   release:
     types: [published]
@@ -16,38 +16,3 @@ jobs:
           -d '{"content": "🎉 New release: **${{ github.event.release.name }}** is live! 🚀\nCheck it out here: ${{ github.event.release.html_url }}"}' \
           ${{ secrets.DISCORD_WEBHOOK_URL }}
 
-  post-twitter:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Wait for 15 minutes
-        run: sleep 900  # 15 minutes delay     
-
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Set Git config
-        run: |
-          git config --global user.email "github-actions@github.com"
-          git config --global user.name "GitHub Actions"
-
-      - name: Create tweet file
-        run: |
-          echo "🎉 New release: **${{ github.event.release.name }}** is live! 🚀" > .github/tweet.md
-          echo "Check it out here: ${{ github.event.release.html_url }}" >> .github/tweet.md
-          git add .github/tweet.md
-          git commit -m "Add release tweet for ${{ github.event.release.name }}"
-
-      - name: Push changes
-        run: |
-          git push https://github.com/${{ github.repository }}.git HEAD:main
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Tweet
-        uses: twitter-together/action@v3
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          TWITTER_ACCESS_TOKEN: ${{ secrets.TWITTER_ACCESS_TOKEN }}
-          TWITTER_ACCESS_TOKEN_SECRET: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}
-          TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }}
-          TWITTER_API_SECRET_KEY: ${{ secrets.TWITTER_API_SECRET_KEY }}

.vscode/launch.json

@@ -0,0 +1,34 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python Backend Debug: Attach",
+            "type": "debugpy",
+            "request": "attach",
+            "connect": {
+                "host": "localhost",
+                "port": 5678
+            },
+            "pathMappings": [
+                {
+                    // Map workspace root to /app for PHP and other resources, plus explicit server mapping for Python.
+                    "localRoot": "${workspaceFolder}",
+                    "remoteRoot": "/app"
+                },
+                {
+                    "localRoot": "${workspaceFolder}/server",
+                    "remoteRoot": "/app/server"
+                }
+            ]
+        },
+        {
+            "name": "PHP Frontend Xdebug: Listen",
+            "type": "php",
+            "request": "launch",
+            "port": 9003,
+            "pathMappings": {
+                "/app": "${workspaceFolder}"
+            }
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "terminal.integrated.suggest.enabled": true,
+    // Use pytest and look under the test/ folder
+    "python.testing.pytestEnabled": true,
+    "python.testing.unittestEnabled": false,
+    "python.testing.pytestArgs": [
+        "test"
+    ],
+    // Ensure VS Code uses the devcontainer virtualenv
+    "python.defaultInterpreterPath": "/opt/venv/bin/python",
+    // Let the Python extension invoke pytest via the interpreter; avoid hardcoded paths
+    // Removed python.testing.pytestPath and legacy pytest.command overrides
+}

.vscode/tasks.json

@@ -0,0 +1,94 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Generate Dockerfile",
+      "type": "shell",
+      "command": "${workspaceFolder:NetAlertX}/.devcontainer/scripts/generate-dockerfile.sh",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "panel": "shared",
+        "showReuseMessage": false
+      },
+      "problemMatcher": [],
+      "group": {
+        "kind": "build",
+        "isDefault": false
+      },
+      "options": {
+        "cwd": "${workspaceFolder:NetAlertX}"
+      },
+      "icon": {
+        "id": "tools",
+        "color": "terminal.ansiYellow"
+      }
+    },
+    {
+      "label": "Re-Run Startup Script",
+      "type": "shell",
+      "command": "${workspaceFolder:NetAlertX}/.devcontainer/scripts/setup.sh",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "panel": "shared",
+        "showReuseMessage": false
+      },
+      "problemMatcher": [],
+      "icon": {
+        "id": "beaker",
+        "color": "terminal.ansiBlue"
+      }
+    },
+    {
+      "label": "Start Backend (Python)",
+      "type": "shell",
+      "command": "/workspaces/NetAlertX/.devcontainer/scripts/restart-backend.sh",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "panel": "shared",
+        "showReuseMessage": false,
+        "clear": false
+      },
+      "problemMatcher": [],
+      "icon": {
+        "id": "debug-restart",
+        "color": "terminal.ansiGreen"
+      }
+    },
+    {
+      "label": "Start Frontend (nginx and PHP-FPM)",
+      "type": "shell",
+      "command": "killall php-fpm83 nginx 2>/dev/null || true; sleep 1; php-fpm83 & nginx",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "panel": "shared",
+        "showReuseMessage": false,
+        "clear": false
+      },
+      "problemMatcher": [],
+      "icon": {
+        "id": "debug-restart",
+        "color": "terminal.ansiGreen"
+      }
+    },
+    {
+      "label": "Stop Frontend & Backend Services",
+      "type": "shell",
+      "command": "pkill -f 'php-fpm83|nginx|crond|python3' || true",
+      "presentation": {
+        "echo": true,
+        "reveal": "always",
+        "panel": "shared",
+        "showReuseMessage": false
+      },
+      "problemMatcher": [],
+      "icon": {
+        "id": "debug-stop",
+        "color": "terminal.ansiRed"
+      }
+    }
+  ]
+}

Dockerfile

@@ -13,7 +13,7 @@ ENV PATH="/opt/venv/bin:$PATH"
 
 COPY . ${INSTALL_DIR}/
 
-RUN pip install openwrt-luci-rpc asusrouter asyncio aiohttp graphene flask tplink-omada-client wakeonlan pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros yattag git+https://github.com/foreign-sub/aiofreepybox.git \
+RUN pip install openwrt-luci-rpc asusrouter asyncio aiohttp graphene flask flask-cors unifi-sm-api tplink-omada-client wakeonlan pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros yattag git+https://github.com/foreign-sub/aiofreepybox.git \
     && bash -c "find ${INSTALL_DIR} -type d -exec chmod 750 {} \;" \
     && bash -c "find ${INSTALL_DIR} -type f -exec chmod 640 {} \;" \
     && bash -c "find ${INSTALL_DIR} -type f \( -name '*.sh' -o -name '*.py'  -o -name 'speedtest-cli' \) -exec chmod 750 {} \;"

Dockerfile.debian

@@ -43,7 +43,7 @@ RUN phpenmod -v 8.2 sqlite3
 RUN apt-get install -y python3-venv
 RUN python3 -m venv myenv
 
-RUN /bin/bash -c "source myenv/bin/activate && update-alternatives --install /usr/bin/python python /usr/bin/python3 10 && pip3 install openwrt-luci-rpc asusrouter asyncio aiohttp graphene flask tplink-omada-client wakeonlan pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros yattag "
+RUN /bin/bash -c "source myenv/bin/activate && update-alternatives --install /usr/bin/python python /usr/bin/python3 10 && pip3 install openwrt-luci-rpc asusrouter asyncio aiohttp graphene flask flask-cors unifi-sm-api tplink-omada-client wakeonlan pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros yattag "
 
 # Create a buildtimestamp.txt to later check if a new version was released
 RUN date +%s > ${INSTALL_DIR}/front/buildtimestamp.txt

api/.gitignore

@@ -1,2 +0,0 @@
-*
-!.gitignore

back/app.conf

@@ -24,7 +24,7 @@ LOADED_PLUGINS=['ARPSCAN', 'AVAHISCAN', 'CSVBCKP','DBCLNP', 'DIGSCAN', 'INTRNT',
 
 DAYS_TO_KEEP_EVENTS=90
 # Used for generating links in emails. Make sure not to add a trailing slash!
-REPORT_DASHBOARD_URL='http://127.0.0.1'
+REPORT_DASHBOARD_URL='update_REPORT_DASHBOARD_URL_setting'
 
 # Make sure at least these scanners are enabled for new installs, other defaults are taken from the config.json
 INTRNT_RUN='schedule'

back/device_heuristics_rules.json

@@ -0,0 +1,200 @@
+[
+  {
+    "dev_type": "Gateway",
+    "icon_html": "<i class=\"fa fa-globe\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "INTERNET", "vendor": "" }
+    ],
+    "name_pattern": []
+  },
+  {
+    "dev_type": "Access Point",
+    "icon_html": "<i class=\"fa fa-network-wired\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "74ACB9", "vendor": "Ubiquiti" },
+      { "mac_prefix": "002468", "vendor": "Cisco" },
+      { "mac_prefix": "F4F5D8", "vendor": "TP-Link" },
+      { "mac_prefix": "F88E85", "vendor": "Netgear" }
+    ],
+    "name_pattern": ["router", "gateway", "ap", "access point", "access-point", "switch"]
+  },
+  {
+    "dev_type": "Phone",
+    "icon_html": "<i class=\"fa-brands fa-apple\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "001A79", "vendor": "Apple" },
+      { "mac_prefix": "B0BE83", "vendor": "Samsung" },
+      { "mac_prefix": "BC926B", "vendor": "Motorola" }
+    ],
+    "name_pattern": ["iphone", "ipad", "pixel", "galaxy", "redmi"]
+  },
+  {
+    "dev_type": "Phone",
+    "icon_html": "<i class=\"fa-solid fa-mobile\"></i>",
+    "matching_pattern": [
+    ],
+    "name_pattern": ["android","samsung"]
+  },
+  {
+    "dev_type": "Tablet",
+    "icon_html": "<i class=\"fa fa-tablet\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "001B63", "vendor": "Apple" },
+      { "mac_prefix": "BC4C4C", "vendor": "Samsung" }
+    ],
+    "name_pattern": ["tablet", "pad"]
+  },  
+  {
+    "dev_type": "IoT",
+    "icon_html": "<i class=\"fa-brands fa-raspberry-pi\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "B827EB", "vendor": "Raspberry Pi" },
+      { "mac_prefix": "DCA632", "vendor": "Raspberry Pi" }
+    ],
+    "name_pattern": ["raspberry", "pi"]
+  },
+  {
+    "dev_type": "IoT",
+    "icon_html": "<i class=\"fa-solid fa-microchip\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "840D8E", "vendor": "Espressif" },
+      { "mac_prefix": "ECFABC", "vendor": "Espressif" },
+      { "mac_prefix": "7C9EBD", "vendor": "Espressif" }
+    ],
+    "name_pattern": ["raspberry", "pi"]
+  },
+  {
+    "dev_type": "Desktop",
+    "icon_html": "<i class=\"fa fa-desktop\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "001422", "vendor": "Dell" },
+      { "mac_prefix": "001874", "vendor": "Lenovo" },
+      { "mac_prefix": "00E04C", "vendor": "Hewlett Packard" }
+    ],
+    "name_pattern": ["desktop", "pc", "computer"]
+  },
+  {
+    "dev_type": "Laptop",
+    "icon_html": "<i class=\"fa fa-laptop\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "3C0754", "vendor": "HP" },
+      { "mac_prefix": "0017A4", "vendor": "Dell" },
+      { "mac_prefix": "F4CE46", "vendor": "Lenovo" },
+      { "mac_prefix": "409F38", "vendor": "Acer" }
+    ],
+    "name_pattern": ["macbook", "imac", "laptop", "notebook"]
+  },
+  {
+    "dev_type": "Server",
+    "icon_html": "<i class=\"fa fa-server\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "001CBF", "vendor": "Supermicro" },
+      { "mac_prefix": "002186", "vendor": "Dell" },
+      { "mac_prefix": "D02788", "vendor": "Hewlett Packard" },
+      { "mac_prefix": "002590", "vendor": "IBM" }
+    ],
+    "name_pattern": ["server", "nas"]
+  },
+  {
+    "dev_type": "VM",
+    "icon_html": "<i class=\"fa fa-server\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "525400", "vendor": "QEMU" },
+      { "mac_prefix": "005056", "vendor": "VMware" },
+      { "mac_prefix": "000C29", "vendor": "VMware" },
+      { "mac_prefix": "000569", "vendor": "VMware" },
+      { "mac_prefix": "00163E", "vendor": "Xen" },
+      { "mac_prefix": "080027", "vendor": "VirtualBox" }
+    ]
+  },
+  {
+    "dev_type": "TV",
+    "icon_html": "<i class=\"fa fa-tv\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "0013CE", "vendor": "Samsung" },
+      { "mac_prefix": "0017C8", "vendor": "LG" },
+      { "mac_prefix": "D46E0E", "vendor": "Sony" }
+    ],
+    "name_pattern": ["tv", "television", "smarttv"]
+  },
+  {
+    "dev_type": "Gaming Console",
+    "icon_html": "<i class=\"fa fa-gamepad\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "001FA7", "vendor": "Sony" },
+      { "mac_prefix": "7C04D0", "vendor": "Nintendo" },
+      { "mac_prefix": "EC26CA", "vendor": "Sony" }
+    ],
+    "name_pattern": ["playstation", "xbox"]
+  },
+  {
+    "dev_type": "Camera",
+    "icon_html": "<i class=\"fa fa-camera\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "A45E60", "vendor": "Hikvision" },
+      { "mac_prefix": "00408C", "vendor": "Axis" },
+      { "mac_prefix": "00156D", "vendor": "Amcrest" },
+      { "mac_prefix": "AC9E17", "vendor": "Reolink" }
+    ],
+    "name_pattern": ["camera", "cam", "webcam"]
+  },
+  {
+    "dev_type": "Smart Speaker",
+    "icon_html": "<i class=\"fa fa-volume-up\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "44650D", "vendor": "Amazon" },
+      { "mac_prefix": "74ACB9", "vendor": "Google" }
+    ],
+    "name_pattern": ["echo", "alexa", "dot"]
+  },
+  {
+    "dev_type": "Router",
+    "icon_html": "<i class=\"fa fa-random\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "000C29", "vendor": "Cisco" },
+      { "mac_prefix": "00155D", "vendor": "MikroTik" }
+    ],
+    "name_pattern": ["router", "gateway", "ap", "access point", "access-point"],
+    "ip_pattern": [
+      "^192\\.168\\.[0-1]\\.1$",
+      "^10\\.0\\.0\\.1$"
+    ]
+  },
+  {
+    "dev_type": "Smart Light",
+    "icon_html": "<i class=\"fa fa-lightbulb\"></i>",
+    "matching_pattern": [],
+    "name_pattern": ["hue", "lifx", "bulb"]
+  },
+  {
+    "dev_type": "Smart Home",
+    "icon_html": "<i class=\"fa fa-house\"></i>",
+    "matching_pattern": [],
+    "name_pattern": ["google", "chromecast", "nest"]
+  },
+  {
+    "dev_type": "Smartwatch",
+    "icon_html": "<i class=\"fa fa-watch\"></i>",
+    "matching_pattern": [],
+    "name_pattern": ["watch", "wear"]
+  },
+  {
+    "dev_type": "Printer",
+    "icon_html": "<i class=\"fa fa-print\"></i>",
+    "matching_pattern": [],
+    "name_pattern": ["printer", "print"]
+  },
+  {
+    "dev_type": "Security Device",
+    "icon_html": "<i class=\"fa fa-shield-alt\"></i>",
+    "matching_pattern": [],
+    "name_pattern": ["doorbell", "lock", "security"]
+  },
+  {
+    "dev_type": "Smart Light",
+    "icon_html": "<i class=\"fa-solid fa-lightbulb\"></i>",
+    "matching_pattern": [
+    ],
+    "name_pattern": ["light","bulb"]
+  }
+]

docker-compose.yml

@@ -23,11 +23,11 @@ services:
       # - ${DEV_LOCATION}/api:/app/api
       # ---------------------------------------------------------------------------
       # DELETE START anyone trying to use this file: comment out / delete BELOW lines, they are only for development purposes
-      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/dhcp1.leases:/mnt/dhcp1.leases
-      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/dhcp2.leases:/mnt/dhcp2.leases      
-      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/pihole_dhcp_full.leases:/etc/pihole/dhcp.leases      
-      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/pihole_dhcp_2.leases:/etc/pihole/dhcp2.leases      
-      - ${APP_DATA_LOCATION}/pihole/etc-pihole/pihole-FTL.db:/etc/pihole/pihole-FTL.db    
+      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/dhcp1.leases:/mnt/dhcp1.leases      # test data for DCPLSS plugin
+      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/dhcp2.leases:/mnt/dhcp2.leases      # test data for DCPLSS plugin
+      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/pihole_dhcp_full.leases:/etc/pihole/dhcp.leases      # test data for DCPLSS plugin
+      - ${APP_DATA_LOCATION}/netalertx/dhcp_samples/pihole_dhcp_2.leases:/etc/pihole/dhcp2.leases        # test data for DCPLSS plugin
+      - ${APP_DATA_LOCATION}/pihole/etc-pihole/pihole-FTL.db:/etc/pihole/pihole-FTL.db    # test data for PIHOLE plugin
       - ${DEV_LOCATION}/mkdocs.yml:/app/mkdocs.yml
       - ${DEV_LOCATION}/docs:/app/docs
       - ${DEV_LOCATION}/server:/app/server            
@@ -59,6 +59,9 @@ services:
       - ${DEV_LOCATION}/front/presence.php:/app/front/presence.php
       - ${DEV_LOCATION}/front/settings.php:/app/front/settings.php      
       - ${DEV_LOCATION}/front/systeminfo.php:/app/front/systeminfo.php      
+      - ${DEV_LOCATION}/front/systeminfoNetwork.php:/app/front/systeminfoNetwork.php      
+      - ${DEV_LOCATION}/front/systeminfoServer.php:/app/front/systeminfoServer.php      
+      - ${DEV_LOCATION}/front/systeminfoStorage.php:/app/front/systeminfoStorage.php      
       - ${DEV_LOCATION}/front/cloud_services.php:/app/front/cloud_services.php      
       - ${DEV_LOCATION}/front/report.php:/app/front/report.php      
       - ${DEV_LOCATION}/front/workflows.php:/app/front/workflows.php      

docs/API.md

@@ -1,6 +1,6 @@
-# API endpoints
+# NetAlertX API Documentation
 
-NetAlertX comes with a couple of API endpoints. All requests need to be authorized (executed in a logged in browser session) or you have to pass the value of the `API_TOKEN` settings as authorization bearer, for example:
+This API provides programmatic access to **devices, events, sessions, metrics, network tools, and sync** in NetAlertX. It is implemented as a **REST and GraphQL server**. All requests require authentication via **API Token** (`API_TOKEN` setting) unless explicitly noted. For example, to authorize a GraphQL request, you need to use a `Authorization: Bearer API_TOKEN` header as per example below:
 
 ```graphql
 curl 'http://host:GRAPHQL_PORT/graphql' \
@@ -21,241 +21,59 @@ curl 'http://host:GRAPHQL_PORT/graphql' \
   }'
 ```
 
-## API Endpoint: GraphQL
+The API server runs on `0.0.0.0:<graphql_port>` with **CORS enabled** for all main endpoints.
 
-- Endpoint URL: `php/server/query_graphql.php`
-- Host: `same as front end (web ui)`
-- Port: `20212` or as defined by the `GRAPHQL_PORT` setting
+---
 
-### Example Query to Fetch Devices
+## Authentication
 
-First, let's define the GraphQL query to fetch devices with pagination and sorting options.
+All endpoints require an API token provided in the HTTP headers:
 
-```graphql
-query GetDevices($options: PageQueryOptionsInput) {
-  devices(options: $options) {
-    devices {
-      rowid
-      devMac
-      devName
-      devOwner
-      devType
-      devVendor
-      devLastConnection
-      devStatus
-    }
-    count
-  }
-}
+```http
+Authorization: Bearer <API_TOKEN>
 ```
 
-See also: [Debugging GraphQL issues](./DEBUG_GRAPHQL.md)
-
-### `curl` Command
-
-You can use the following `curl` command to execute the query. 
-
-```sh
-curl 'http://host:GRAPHQL_PORT/graphql'   -X POST   -H 'Authorization: Bearer API_TOKEN'  -H 'Content-Type: application/json'   --data '{
-    "query": "query GetDevices($options: PageQueryOptionsInput) { devices(options: $options) { devices { rowid devMac devName devOwner devType devVendor devLastConnection devStatus } count } }",
-    "variables": {
-      "options": {
-        "page": 1,
-        "limit": 10,
-        "sort": [{ "field": "devName", "order": "asc" }],
-        "search": "",
-        "status": "connected"
-      }
-    }
-  }'
-```
-
-### Explanation:
-
-1. **GraphQL Query**:
-   - The `query` parameter contains the GraphQL query as a string.
-   - The `variables` parameter contains the input variables for the query.
-
-2. **Query Variables**:
-   - `page`: Specifies the page number of results to fetch.
-   - `limit`: Specifies the number of results per page.
-   - `sort`: Specifies the sorting options, with `field` being the field to sort by and `order` being the sort order (`asc` for ascending or `desc` for descending).
-   - `search`: A search term to filter the devices.
-   - `status`: The status filter to apply (valid values are `my_devices` (determined by the `UI_MY_DEVICES` setting), `connected`, `favorites`, `new`, `down`, `archived`, `offline`).
-
-3. **`curl` Command**:
-   - The `-X POST` option specifies that we are making a POST request.
-   - The `-H "Content-Type: application/json"` option sets the content type of the request to JSON.
-   - The `-d` option provides the request payload, which includes the GraphQL query and variables.
-
-### Sample Response
-
-The response will be in JSON format, similar to the following:
+If the token is missing or invalid, the server will return:
 
 ```json
-{
-  "data": {
-    "devices": {
-      "devices": [
-        {
-          "rowid": 1,
-          "devMac": "00:11:22:33:44:55",
-          "devName": "Device 1",
-          "devOwner": "Owner 1",
-          "devType": "Type 1",
-          "devVendor": "Vendor 1",
-          "devLastConnection": "2025-01-01T00:00:00Z",
-          "devStatus": "connected"
-        },
-        {
-          "rowid": 2,
-          "devMac": "66:77:88:99:AA:BB",
-          "devName": "Device 2",
-          "devOwner": "Owner 2",
-          "devType": "Type 2",
-          "devVendor": "Vendor 2",
-          "devLastConnection": "2025-01-02T00:00:00Z",
-          "devStatus": "connected"
-        }
-      ],
-      "count": 2
-    }
-  }
-}
+{ "error": "Forbidden" }
 ```
 
-## API Endpoint: JSON files 
+---
 
-This API endpoint retrieves static files, that are periodically updated. 
-
-- Endpoint URL: `php/server/query_json.php?file=<file name>`
-- Host: `same as front end (web ui)`
-- Port: `20211` or as defined by the $PORT docker environment variable (same as the port for the web ui)
-
-### When are the endpoints updated
-
-The endpoints are updated when objects in the API endpoints are changed.
-
-### Location of the endpoints
-
-In the container, these files are located under the `/app/api/` folder. You can access them via the `/php/server/query_json.php?file=user_notifications.json` endpoint.
-
-### Available endpoints
-
-You can access the following files:
-
-  | File name | Description | 
-  |----------------------|----------------------| 
-  | `notification_json_final.json` | The json version of the last notification (e.g. used for webhooks - [sample JSON](https://github.com/jokob-sk/NetAlertX/blob/main/front/report_templates/webhook_json_sample.json)). |
-  | `table_devices.json` | All of the available Devices detected by the app. |  
-  | `table_plugins_events.json` | The list of the unprocessed (pending) notification events (plugins_events DB table). |
-  | `table_plugins_history.json` | The list of notification events history. |  
-  | `table_plugins_objects.json` | The content of the plugins_objects table. Find more info on the [Plugin system here](https://github.com/jokob-sk/NetAlertX/tree/main/docs/PLUGINS.md)|
-  | `language_strings.json` | The content of the language_strings table, which in turn is loaded from the plugins `config.json` definitions. |  
-  | `table_custom_endpoint.json` | A custom endpoint generated by the SQL query specified by the `API_CUSTOM_SQL` setting. |
-  | `table_settings.json` | The content of the settings table. |
-  | `app_state.json` | Contains the current application state. |
-  
-
-### JSON Data format
-
-The endpoints starting with the `table_` prefix contain most, if not all, data contained in the corresponding database table. The common format for those is:
-
-```JSON
-{
-  "data": [
-        {
-          "db_column_name": "data",
-          "db_column_name2": "data2"      
-        }, 
-        {
-          "db_column_name": "data3",
-          "db_column_name2": "data4" 
-        }
-    ]
-}
+## Base URL
 
 ```
-
-Example JSON of the `table_devices.json` endpoint with two Devices (database rows):
-
-```JSON
-{
-  "data": [
-        {
-          "devMac": "Internet",
-          "devName": "Net - Huawei",
-          "devType": "Router",
-          "devVendor": null,
-          "devGroup": "Always on",
-          "devFirstConnection": "2021-01-01 00:00:00",
-          "devLastConnection": "2021-01-28 22:22:11",
-          "devLastIP": "192.168.1.24",
-          "devStaticIP": 0,
-          "devPresentLastScan": 1,
-          "devLastNotification": "2023-01-28 22:22:28.998715",
-          "devIsNew": 0,
-          "devParentMAC": "",
-          "devParentPort": "",
-          "devIcon": "globe"
-        }, 
-        {
-          "devMac": "a4:8f:ff:aa:ba:1f",
-          "devName": "Net - USG",
-          "devType": "Firewall",
-          "devVendor": "Ubiquiti Inc",
-          "devGroup": "",
-          "devFirstConnection": "2021-02-12 22:05:00",
-          "devLastConnection": "2021-07-17 15:40:00",
-          "devLastIP": "192.168.1.1",
-          "devStaticIP": 1,
-          "devPresentLastScan": 1,
-          "devLastNotification": "2021-07-17 15:40:10.667717",
-          "devIsNew": 0,
-          "devParentMAC": "Internet",
-          "devParentPort": 1,
-          "devIcon": "shield-halved"
-      }
-    ]
-}
-
+http://<server>:<GRAPHQL_PORT>/
 ```
 
-## API Endpoint: /log files
+---
 
-This API endpoint retrieves files from the `/app/log` folder. 
+## Endpoints
 
-- Endpoint URL: `php/server/query_logs.php?file=<file name>`
-- Host: `same as front end (web ui)`
-- Port: `20211` or as defined by the $PORT docker environment variable (same as the port for the web ui)
+> [!TIP]
+> When retrieving devices or settings try using the GraphQL API endpoint first as it is read-optimized.
 
-| File                     | Description                                                   |
-|--------------------------|---------------------------------------------------------------|
-| `IP_changes.log`         | Logs of IP address changes                                    |
-| `app.log`                | Main application log                                          |
-| `app.php_errors.log`     | PHP error log                                                 |
-| `app_front.log`          | Frontend application log                                      |
-| `app_nmap.log`           | Logs of Nmap scan results                                     |
-| `db_is_locked.log`       | Logs when the database is locked                              |
-| `execution_queue.log`    | Logs of execution queue activities                            |
-| `plugins/`               | Directory for temporary plugin-related files (not accessible) |
-| `report_output.html`     | HTML report output                                            |
-| `report_output.json`     | JSON format report output                                     |
-| `report_output.txt`      | Text format report output                                     |
-| `stderr.log`             | Logs of standard error output                                 |
-| `stdout.log`             | Logs of standard output                                       |
+* [Device API Endpoints](API_DEVICE.md) – Manage individual devices
+* [Devices Collection](API_DEVICES.md) – Bulk operations on multiple devices
+* [Events](API_EVENTS.md) – Device event logging and management
+* [Sessions](API_SESSIONS.md) – Connection sessions and history
+* [Settings](API_SETTINGS.md) – Settings
+* [Metrics](API_METRICS.md) – Prometheus metrics and per-device status
+* [Network Tools](API_NETTOOLS.md) – Utilities like Wake-on-LAN, traceroute, nslookup, nmap, and internet info
+* [Online History](API_ONLINEHISTORY.md) – Online/offline device records
+* [GraphQL](API_GRAPHQL.md) – Advanced queries and filtering
+* [Sync](API_SYNC.md) – Synchronization between multiple NetAlertX instances
+* [DB query](API_DBQUERY.md) (⚠ Internal) - Low level database access - use other endpoints if possible
 
+See [Testing](API_TESTS.md) for example requests and usage.
 
-## API Endpoint: /config files
+---
 
-To retrieve files from the `/app/config` folder. 
-
-- Endpoint URL: `php/server/query_config.php?file=<file name>`
-- Host: `same as front end (web ui)`
-- Port: `20211` or as defined by the $PORT docker environment variable (same as the port for the web ui)
-
-| File                     | Description                                      |
-|--------------------------|--------------------------------------------------|
-| `devices.csv`            | Devices csv file                                 |
-| `app.conf`               | Application config file                          |
+## Notes
 
+* All endpoints enforce **Bearer token authentication**.
+* Errors return JSON with `success: False` and an error message.
+* GraphQL is available for advanced queries, while REST endpoints cover structured use cases.
+* Endpoints run on `0.0.0.0:<GRAPHQL_PORT>` with **CORS enabled**.
+* Use consistent API tokens and node/plugin names when interacting with `/sync` to ensure data integrity.

docs/API_DBQUERY.md

@@ -0,0 +1,183 @@
+# Database Query API
+
+The **Database Query API** provides direct, low-level access to the NetAlertX database. It allows **read, write, update, and delete** operations against tables, using **base64-encoded** SQL or structured parameters.
+
+> [!Warning] 
+> This API is primarily used internally to generate and render the application UI. These endpoints are low-level and powerful, and should be used with caution. Wherever possible, prefer the [standard API endpoints](API.md). Invalid or unsafe queries can corrupt data.
+> If you need data in a specific format that is not already provided, please open an issue or pull request with a clear, broadly useful use case. This helps ensure new endpoints benefit the wider community rather than relying on raw database queries.
+
+---
+
+## Authentication
+
+All `/dbquery/*` endpoints require an API token in the HTTP headers:
+
+```http
+Authorization: Bearer <API_TOKEN>
+```
+
+If the token is missing or invalid:
+
+```json
+{ "error": "Forbidden" }
+```
+
+---
+
+## Endpoints
+
+### 1. `POST /dbquery/read`
+
+Execute a **read-only** SQL query (e.g., `SELECT`).
+
+#### Request Body
+
+```json
+{
+  "rawSql": "U0VMRUNUICogRlJPTSBERVZJQ0VT"   // base64 encoded SQL
+}
+```
+
+Decoded SQL:
+
+```sql
+SELECT * FROM Devices;
+```
+
+#### Response
+
+```json
+{
+  "success": true,
+  "results": [
+    { "devMac": "AA:BB:CC:DD:EE:FF", "devName": "Phone" }
+  ]
+}
+```
+
+#### `curl` Example
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/dbquery/read" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "rawSql": "U0VMRUNUICogRlJPTSBERVZJQ0VT"
+  }'
+```
+
+---
+
+### 2. `POST /dbquery/update` (safer than `/dbquery/write`)
+
+Update rows in a table by `columnName` + `id`. `/dbquery/update` is parameterized to reduce the risk of SQL injection, while `/dbquery/write` executes raw SQL directly.
+
+#### Request Body
+
+```json
+{
+  "columnName": "devMac",
+  "id": ["AA:BB:CC:DD:EE:FF"],
+  "dbtable": "Devices",
+  "columns": ["devName", "devOwner"],
+  "values": ["Laptop", "Alice"]
+}
+```
+
+#### Response
+
+```json
+{ "success": true, "updated_count": 1 }
+```
+
+#### `curl` Example
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/dbquery/update" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "columnName": "devMac",
+    "id": ["AA:BB:CC:DD:EE:FF"],
+    "dbtable": "Devices",
+    "columns": ["devName", "devOwner"],
+    "values": ["Laptop", "Alice"]
+  }'
+```
+
+---
+
+### 3. `POST /dbquery/write`
+
+Execute a **write query** (`INSERT`, `UPDATE`, `DELETE`).
+
+#### Request Body
+
+```json
+{
+  "rawSql": "SU5TRVJUIElOVE8gRGV2aWNlcyAoZGV2TWFjLCBkZXYgTmFtZSwgZGV2Rmlyc3RDb25uZWN0aW9uLCBkZXZMYXN0Q29ubmVjdGlvbiwgZGV2TGFzdElQKSBWQUxVRVMgKCc2QTpCQjo0Qzo1RDo2RTonLCAnVGVzdERldmljZScsICcyMDI1LTA4LTMwIDEyOjAwOjAwJywgJzIwMjUtMDgtMzAgMTI6MDA6MDAnLCAnMTAuMC4wLjEwJyk="
+}
+```
+
+Decoded SQL:
+
+```sql
+INSERT INTO Devices (devMac, devName, devFirstConnection, devLastConnection, devLastIP)
+VALUES ('6A:BB:4C:5D:6E', 'TestDevice', '2025-08-30 12:00:00', '2025-08-30 12:00:00', '10.0.0.10');
+```
+
+#### Response
+
+```json
+{ "success": true, "affected_rows": 1 }
+```
+
+#### `curl` Example
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/dbquery/write" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "rawSql": "SU5TRVJUIElOVE8gRGV2aWNlcyAoZGV2TWFjLCBkZXYgTmFtZSwgZGV2Rmlyc3RDb25uZWN0aW9uLCBkZXZMYXN0Q29ubmVjdGlvbiwgZGV2TGFzdElQKSBWQUxVRVMgKCc2QTpCQjo0Qzo1RDo2RTonLCAnVGVzdERldmljZScsICcyMDI1LTA4LTMwIDEyOjAwOjAwJywgJzIwMjUtMDgtMzAgMTI6MDA6MDAnLCAnMTAuMC4wLjEwJyk="
+  }'
+```
+
+---
+
+### 4. `POST /dbquery/delete`
+
+Delete rows in a table by `columnName` + `id`.
+
+#### Request Body
+
+```json
+{
+  "columnName": "devMac",
+  "id": ["AA:BB:CC:DD:EE:FF"],
+  "dbtable": "Devices"
+}
+```
+
+#### Response
+
+```json
+{ "success": true, "deleted_count": 1 }
+```
+
+#### `curl` Example
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/dbquery/delete" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "columnName": "devMac",
+    "id": ["AA:BB:CC:DD:EE:FF"],
+    "dbtable": "Devices"
+  }'
+```

docs/API_DEVICE.md

@@ -0,0 +1,233 @@
+# Device API Endpoints
+
+Manage a **single device** by its MAC address. Operations include retrieval, updates, deletion, resetting properties, and copying data between devices. All endpoints require **authorization** via Bearer token.
+
+---
+
+## 1. Retrieve Device Details
+
+* **GET** `/device/<mac>`
+  Fetch all details for a single device, including:
+
+* Computed status (`devStatus`) → `On-line`, `Off-line`, or `Down`
+* Session and event counts (`devSessions`, `devEvents`, `devDownAlerts`)
+* Presence hours (`devPresenceHours`)
+* Children devices (`devChildrenDynamic`) and NIC children (`devChildrenNicsDynamic`)
+
+**Special case**: `mac=new` returns a template for a new device with default values.
+
+**Response** (success):
+
+```json
+{
+  "devMac": "AA:BB:CC:DD:EE:FF",
+  "devName": "Net - Huawei",
+  "devOwner": "Admin",
+  "devType": "Router",
+  "devVendor": "Huawei",
+  "devStatus": "On-line",
+  "devSessions": 12,
+  "devEvents": 5,
+  "devDownAlerts": 1,
+  "devPresenceHours": 32,
+  "devChildrenDynamic": [...],
+  "devChildrenNicsDynamic": [...],
+  ...
+}
+```
+
+**Error Responses**:
+
+* Device not found → HTTP 404
+* Unauthorized → HTTP 403
+
+---
+
+## 2. Update Device Fields
+
+* **POST** `/device/<mac>`
+  Create or update a device record.
+
+**Request Body**:
+
+```json
+{
+  "devName": "New Device",
+  "devOwner": "Admin",
+  "createNew": true
+}
+```
+
+**Behavior**:
+
+* If `createNew=true` → creates a new device
+* Otherwise → updates existing device fields
+
+**Response**:
+
+```json
+{
+  "success": true
+}
+```
+
+**Error Responses**:
+
+* Unauthorized → HTTP 403
+
+---
+
+## 3. Delete a Device
+
+* **DELETE** `/device/<mac>/delete`
+  Deletes the device with the given MAC.
+
+**Response**:
+
+```json
+{
+  "success": true
+}
+```
+
+**Error Responses**:
+
+* Unauthorized → HTTP 403
+
+---
+
+## 4. Delete All Events for a Device
+
+* **DELETE** `/device/<mac>/events/delete`
+  Removes all events associated with a device.
+
+**Response**:
+
+```json
+{
+  "success": true
+}
+```
+
+---
+
+## 5. Reset Device Properties
+
+* **POST** `/device/<mac>/reset-props`
+  Resets the device's custom properties to default values.
+
+**Request Body**: Optional JSON for additional parameters.
+
+**Response**:
+
+```json
+{
+  "success": true
+}
+```
+
+---
+
+## 6. Copy Device Data
+
+* **POST** `/device/copy`
+  Copy all data from one device to another. If a device exists with `macTo`, it is replaced.
+
+**Request Body**:
+
+```json
+{
+  "macFrom": "AA:BB:CC:DD:EE:FF",
+  "macTo": "11:22:33:44:55:66"
+}
+```
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "message": "Device copied from AA:BB:CC:DD:EE:FF to 11:22:33:44:55:66"
+}
+```
+
+**Error Responses**:
+
+* Missing `macFrom` or `macTo` → HTTP 400
+* Unauthorized → HTTP 403
+
+---
+
+## 7. Update a Single Column
+
+* **POST** `/device/<mac>/update-column`
+  Update one specific column for a device.
+
+**Request Body**:
+
+```json
+{
+  "columnName": "devName",
+  "columnValue": "Updated Device Name"
+}
+```
+
+**Response** (success):
+
+```json
+{
+  "success": true
+}
+```
+
+**Error Responses**:
+
+* Device not found → HTTP 404
+* Missing `columnName` or `columnValue` → HTTP 400
+* Unauthorized → HTTP 403
+
+---
+
+## Example `curl` Requests
+
+**Get Device Details**:
+
+```bash
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/device/AA:BB:CC:DD:EE:FF" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Update Device Fields**:
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/device/AA:BB:CC:DD:EE:FF" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"devName": "New Device Name"}'
+```
+
+**Delete Device**:
+
+```bash
+curl -X DELETE "http://<server_ip>:<GRAPHQL_PORT>/device/AA:BB:CC:DD:EE:FF/delete" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Copy Device Data**:
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/device/copy" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"macFrom":"AA:BB:CC:DD:EE:FF","macTo":"11:22:33:44:55:66"}'
+```
+
+**Update Single Column**:
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/device/AA:BB:CC:DD:EE:FF/update-column" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"columnName":"devName","columnValue":"Updated Device"}'
+```
+

docs/API_DEVICES.md

@@ -0,0 +1,249 @@
+# Devices Collection API Endpoints
+
+The Devices Collection API provides operations to **retrieve, manage, import/export, and filter devices** in bulk. All endpoints require **authorization** via Bearer token.
+
+---
+
+## Endpoints
+
+### 1. Get All Devices
+
+* **GET** `/devices`
+  Retrieves all devices from the database.
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "devices": [
+    {
+      "devName": "Net - Huawei",
+      "devMAC": "AA:BB:CC:DD:EE:FF",
+      "devIP": "192.168.1.1",
+      "devType": "Router",
+      "devFavorite": 0,
+      "devStatus": "online"
+    },
+    ...
+  ]
+}
+```
+
+**Error Responses**:
+
+* Unauthorized → HTTP 403
+
+---
+
+### 2. Delete Devices by MAC
+
+* **DELETE** `/devices`
+  Deletes devices by MAC address. Supports exact matches or wildcard `*`.
+
+**Request Body**:
+
+```json
+{
+  "macs": ["AA:BB:CC:DD:EE:FF", "11:22:33:*"]
+}
+```
+
+**Behavior**:
+
+* If `macs` is omitted or `null` → deletes **all devices**.
+* Wildcards `*` match multiple devices.
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "deleted_count": 5
+}
+```
+
+**Error Responses**:
+
+* Unauthorized → HTTP 403
+
+---
+
+### 3. Delete Devices with Empty MACs
+
+* **DELETE** `/devices/empty-macs`
+  Removes all devices where MAC address is null or empty.
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "deleted": 3
+}
+```
+
+---
+
+### 4. Delete Unknown Devices
+
+* **DELETE** `/devices/unknown`
+  Deletes devices with names marked as `(unknown)` or `(name not found)`.
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "deleted": 2
+}
+```
+
+---
+
+### 5. Export Devices
+
+* **GET** `/devices/export` or `/devices/export/<format>`
+  Exports all devices in **CSV** (default) or **JSON** format.
+
+**Query Parameter / URL Parameter**:
+
+* `format` (optional) → `csv` (default) or `json`
+
+**CSV Response**:
+
+* Returns as a downloadable CSV file: `Content-Disposition: attachment; filename=devices.csv`
+
+**JSON Response**:
+
+```json
+{
+  "data": [
+    { "devName": "Net - Huawei", "devMAC": "AA:BB:CC:DD:EE:FF", ... },
+    ...
+  ],
+  "columns": ["devName", "devMAC", "devIP", "devType", "devFavorite", "devStatus"]
+}
+```
+
+**Error Responses**:
+
+* Unsupported format → HTTP 400
+
+---
+
+### 6. Import Devices from CSV
+
+* **POST** `/devices/import`
+  Imports devices from an uploaded CSV or base64-encoded CSV content.
+
+**Request Body** (multipart file or JSON with `content` field):
+
+```json
+{
+  "content": "<base64-encoded CSV content>"
+}
+```
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "inserted": 25,
+  "skipped_lines": [3, 7]
+}
+```
+
+**Error Responses**:
+
+* Missing file or content → HTTP 400 / 404
+* CSV malformed → HTTP 400
+
+---
+
+### 7. Get Device Totals
+
+* **GET** `/devices/totals`
+  Returns counts of devices by various categories.
+
+**Response**:
+
+```json
+[ 
+  120,    // Total devices
+  85,     // Connected
+  5,      // Favorites
+  10,     // New
+  8,      // Down
+  12      // Archived
+]
+```
+
+*Order: `[all, connected, favorites, new, down, archived]`*
+
+---
+
+### 8. Get Devices by Status
+
+* **GET** `/devices/by-status?status=<status>`
+  Returns devices filtered by status.
+
+**Query Parameter**:
+
+* `status` → Supported values: `online`, `offline`, `down`, `archived`, `favorites`, `new`, `my`
+* If omitted, returns **all devices**.
+
+**Response** (success):
+
+```json
+[
+  { "id": "AA:BB:CC:DD:EE:FF", "title": "Net - Huawei", "favorite": 0 },
+  { "id": "11:22:33:44:55:66", "title": "★ USG Firewall", "favorite": 1 }
+]
+```
+
+*If `devFavorite=1`, the title is prepended with a star `★`.*
+
+---
+
+## Example `curl` Requests
+
+**Get All Devices**:
+
+```sh
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/devices" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Delete Devices by MAC**:
+
+```sh
+curl -X DELETE "http://<server_ip>:<GRAPHQL_PORT>/devices" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"macs":["AA:BB:CC:DD:EE:FF","11:22:33:*"]}'
+```
+
+**Export Devices CSV**:
+
+```sh
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/devices/export?format=csv" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Import Devices from CSV**:
+
+```sh
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/devices/import" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -F "file=@devices.csv"
+```
+
+**Get Devices by Status**:
+
+```sh
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/devices/by-status?status=online" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+

docs/API_EVENTS.md

@@ -0,0 +1,169 @@
+# Events API Endpoints
+
+The Events API provides access to **device event logs**, allowing creation, retrieval, deletion, and summary of events over time.
+
+---
+
+## Endpoints
+
+### 1. Create Event
+
+* **POST** `/events/create/<mac>`
+  Create an event for a device identified by its MAC address.
+
+**Request Body** (JSON):
+
+```json
+{
+  "ip": "192.168.1.10",
+  "event_type": "Device Down",
+  "additional_info": "Optional info about the event",
+  "pending_alert": 1,
+  "event_time": "2025-08-24T12:00:00Z"
+}
+```
+
+* **Parameters**:
+
+  * `ip` (string, optional): IP address of the device
+  * `event_type` (string, optional): Type of event (default `"Device Down"`)
+  * `additional_info` (string, optional): Extra information
+  * `pending_alert` (int, optional): 1 if alert email is pending (default 1)
+  * `event_time` (ISO datetime, optional): Event timestamp; defaults to current time
+
+**Response** (JSON):
+
+```json
+{
+  "success": true,
+  "message": "Event created for 00:11:22:33:44:55"
+}
+```
+
+---
+
+### 2. Get Events
+
+* **GET** `/events`
+  Retrieve all events, optionally filtered by MAC address:
+
+```
+/events?mac=<mac>
+```
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "events": [
+    {
+      "eve_MAC": "00:11:22:33:44:55",
+      "eve_IP": "192.168.1.10",
+      "eve_DateTime": "2025-08-24T12:00:00Z",
+      "eve_EventType": "Device Down",
+      "eve_AdditionalInfo": "",
+      "eve_PendingAlertEmail": 1
+    }
+  ]
+}
+```
+
+---
+
+### 3. Delete Events
+
+* **DELETE** `/events/<mac>` → Delete events for a specific MAC
+* **DELETE** `/events` → Delete **all** events
+* **DELETE** `/events/<days>` → Delete events older than N days
+
+**Response**:
+
+```json
+{
+  "success": true,
+  "message": "Deleted events older than <days> days"
+}
+```
+
+---
+
+### 4. Event Totals Over a Period
+
+* **GET** `/sessions/totals?period=<period>`
+  Return event and session totals over a given period.
+
+**Query Parameters**:
+
+| Parameter | Description                                                                      |
+| --------- | -------------------------------------------------------------------------------- |
+| `period`  | Time period for totals, e.g., `"7 days"`, `"1 month"`, `"1 year"`, `"100 years"` |
+
+**Sample Response** (JSON Array):
+
+```json
+[120, 85, 5, 10, 3, 7]
+```
+
+**Meaning of Values**:
+
+1. Total events in the period
+2. Total sessions
+3. Missing sessions
+4. Voided events (`eve_EventType LIKE 'VOIDED%'`)
+5. New device events (`eve_EventType LIKE 'New Device'`)
+6. Device down events (`eve_EventType LIKE 'Device Down'`)
+
+---
+
+## Notes
+
+* All endpoints require **authorization** (Bearer token). Unauthorized requests return:
+
+```json
+{ "error": "Forbidden" }
+```
+
+* Events are stored in the **Events table** with the following fields:
+  `eve_MAC`, `eve_IP`, `eve_DateTime`, `eve_EventType`, `eve_AdditionalInfo`, `eve_PendingAlertEmail`.
+
+* Event creation automatically logs activity for debugging.
+
+---
+
+## Example `curl` Requests
+
+**Create Event**:
+
+```sh
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/events/create/00:11:22:33:44:55" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{
+    "ip": "192.168.1.10",
+    "event_type": "Device Down",
+    "additional_info": "Power outage",
+    "pending_alert": 1
+  }'
+```
+
+**Get Events for a Device**:
+
+```sh
+curl "http://<server_ip>:<GRAPHQL_PORT>/events?mac=00:11:22:33:44:55" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Delete Events Older Than 30 Days**:
+
+```sh
+curl -X DELETE "http://<server_ip>:<GRAPHQL_PORT>/events/30" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Get Event Totals for 7 Days**:
+
+```sh
+curl "http://<server_ip>:<GRAPHQL_PORT>/sessions/totals?period=7 days" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```

docs/API_GRAPHQL.md

@@ -0,0 +1,200 @@
+# GraphQL API Endpoint
+
+GraphQL queries are **read-optimized for speed**. Data may be slightly out of date until the file system cache refreshes. The GraphQL endpoints allows you to access the following objects:
+
+- Devices
+- Settings
+
+## Endpoints
+
+* **GET** `/graphql`
+  Returns a simple status message (useful for browser or debugging).
+
+* **POST** `/graphql`
+  Execute GraphQL queries against the `devicesSchema`.
+
+---
+
+## Devices Query
+
+### Sample Query
+
+```graphql
+query GetDevices($options: PageQueryOptionsInput) {
+  devices(options: $options) {
+    devices {
+      rowid
+      devMac
+      devName
+      devOwner
+      devType
+      devVendor
+      devLastConnection
+      devStatus
+    }
+    count
+  }
+}
+```
+
+### Query Parameters
+
+| Parameter | Description                                                                                             |
+| --------- | ------------------------------------------------------------------------------------------------------- |
+| `page`    | Page number of results to fetch.                                                                        |
+| `limit`   | Number of results per page.                                                                             |
+| `sort`    | Sorting options (`field` = field name, `order` = `asc` or `desc`).                                      |
+| `search`  | Term to filter devices.                                                                                 |
+| `status`  | Filter devices by status: `my_devices`, `connected`, `favorites`, `new`, `down`, `archived`, `offline`. |
+| `filters` | Additional filters (array of `{ filterColumn, filterValue }`).                                          |
+
+---
+
+### `curl` Example
+
+```sh
+curl 'http://host:GRAPHQL_PORT/graphql' \
+  -X POST \
+  -H 'Authorization: Bearer API_TOKEN' \
+  -H 'Content-Type: application/json' \
+  --data '{
+    "query": "query GetDevices($options: PageQueryOptionsInput) { devices(options: $options) { devices { rowid devMac devName devOwner devType devVendor devLastConnection devStatus } count } }",
+    "variables": {
+      "options": {
+        "page": 1,
+        "limit": 10,
+        "sort": [{ "field": "devName", "order": "asc" }],
+        "search": "",
+        "status": "connected"
+      }
+    }
+  }'
+```
+
+---
+
+### Sample Response
+
+```json
+{
+  "data": {
+    "devices": {
+      "devices": [
+        {
+          "rowid": 1,
+          "devMac": "00:11:22:33:44:55",
+          "devName": "Device 1",
+          "devOwner": "Owner 1",
+          "devType": "Type 1",
+          "devVendor": "Vendor 1",
+          "devLastConnection": "2025-01-01T00:00:00Z",
+          "devStatus": "connected"
+        }
+      ],
+      "count": 1
+    }
+  }
+}
+```
+
+---
+
+## Settings Query
+
+The **settings query** provides access to NetAlertX configuration stored in the settings table.
+
+### Sample Query
+
+```graphql
+query GetSettings {
+  settings {
+    settings {
+      setKey
+      setName
+      setDescription
+      setType
+      setOptions
+      setGroup
+      setValue
+      setEvents
+      setOverriddenByEnv
+    }
+    count
+  }
+}
+```
+
+### Schema Fields
+
+| Field                | Type    | Description                                                              |
+| -------------------- | ------- | ------------------------------------------------------------------------ |
+| `setKey`             | String  | Unique key identifier for the setting.                                   |
+| `setName`            | String  | Human-readable name.                                                     |
+| `setDescription`     | String  | Description or documentation of the setting.                             |
+| `setType`            | String  | Data type (`string`, `int`, `bool`, `json`, etc.).                       |
+| `setOptions`         | String  | Available options (for dropdown/select-type settings).                   |
+| `setGroup`           | String  | Group/category the setting belongs to.                                   |
+| `setValue`           | String  | Current value of the setting.                                            |
+| `setEvents`          | String  | Events or triggers related to this setting.                              |
+| `setOverriddenByEnv` | Boolean | Whether the setting is overridden by an environment variable at runtime. |
+
+---
+
+### `curl` Example
+
+```sh
+curl 'http://host:GRAPHQL_PORT/graphql' \
+  -X POST \
+  -H 'Authorization: Bearer API_TOKEN' \
+  -H 'Content-Type: application/json' \
+  --data '{
+    "query": "query GetSettings { settings { settings { setKey setName setDescription setType setOptions setGroup setValue setEvents setOverriddenByEnv } count } }"
+  }'
+```
+
+---
+
+### Sample Response
+
+```json
+{
+  "data": {
+    "settings": {
+      "settings": [
+        {
+          "setKey": "UI_MY_DEVICES",
+          "setName": "My Devices Filter",
+          "setDescription": "Defines which statuses to include in the 'My Devices' view.",
+          "setType": "list",
+          "setOptions": "[\"online\",\"new\",\"down\",\"offline\",\"archived\"]",
+          "setGroup": "UI",
+          "setValue": "[\"online\",\"new\"]",
+          "setEvents": null,
+          "setOverriddenByEnv": false
+        },
+        {
+          "setKey": "NETWORK_DEVICE_TYPES",
+          "setName": "Network Device Types",
+          "setDescription": "Types of devices considered as network infrastructure.",
+          "setType": "list",
+          "setOptions": "[\"Router\",\"Switch\",\"AP\"]",
+          "setGroup": "Network",
+          "setValue": "[\"Router\",\"Switch\"]",
+          "setEvents": null,
+          "setOverriddenByEnv": true
+        }
+      ],
+      "count": 2
+    }
+  }
+}
+```
+
+---
+
+## Notes
+
+* Device and settings queries can be combined in one request since GraphQL supports batching.
+* The `setOverriddenByEnv` flag helps identify setting values that are locked at container runtime.
+* The schema is **read-only** — updates must be performed through other APIs or configuration management. See the other [API](API.md) endpoints for details. 
+

docs/API_METRICS.md

@@ -0,0 +1,103 @@
+# Metrics API Endpoint
+
+The `/metrics` endpoint exposes **Prometheus-compatible metrics** for NetAlertX, including aggregate device counts and per-device status.
+
+---
+
+## Endpoint Details
+
+* **GET** `/metrics` → Returns metrics in plain text.
+* **Host**: NetAlertX server
+* **Port**: As configured in `GRAPHQL_PORT` (default: `20212`)
+
+---
+
+## Example Output
+
+```text
+netalertx_connected_devices 31
+netalertx_offline_devices 54
+netalertx_down_devices 0
+netalertx_new_devices 0
+netalertx_archived_devices 31
+netalertx_favorite_devices 2
+netalertx_my_devices 54
+
+netalertx_device_status{device="Net - Huawei", mac="Internet", ip="1111.111.111.111", vendor="None", first_connection="2021-01-01 00:00:00", last_connection="2025-08-04 17:57:00", dev_type="Router", device_status="Online"} 1
+netalertx_device_status{device="Net - USG", mac="74:ac:74:ac:74:ac", ip="192.168.1.1", vendor="Ubiquiti Networks Inc.", first_connection="2022-02-12 22:05:00", last_connection="2025-06-07 08:16:49", dev_type="Firewall", device_status="Archived"} 1
+netalertx_device_status{device="Raspberry Pi 4 LAN", mac="74:ac:74:ac:74:74", ip="192.168.1.9", vendor="Raspberry Pi Trading Ltd", first_connection="2022-02-12 22:05:00", last_connection="2025-08-04 17:57:00", dev_type="Singleboard Computer (SBC)", device_status="Online"} 1
+...
+```
+
+---
+
+## Metrics Overview
+
+### 1. Aggregate Device Counts
+
+| Metric                        | Description                              |
+| ----------------------------- | ---------------------------------------- |
+| `netalertx_connected_devices` | Devices currently connected              |
+| `netalertx_offline_devices`   | Devices currently offline                |
+| `netalertx_down_devices`      | Down/unreachable devices                 |
+| `netalertx_new_devices`       | Recently detected devices                |
+| `netalertx_archived_devices`  | Archived devices                         |
+| `netalertx_favorite_devices`  | User-marked favorites                    |
+| `netalertx_my_devices`        | Devices associated with the current user |
+
+---
+
+### 2. Per-Device Status
+
+Metric: `netalertx_device_status`
+Each device has labels:
+
+* `device`: friendly name
+* `mac`: MAC address (or placeholder)
+* `ip`: last recorded IP
+* `vendor`: manufacturer or "None"
+* `first_connection`: timestamp of first detection
+* `last_connection`: most recent contact
+* `dev_type`: device type/category
+* `device_status`: current status (`Online`, `Offline`, `Archived`, `Down`, …)
+
+Metric value is always `1` (presence indicator).
+
+---
+
+## Querying with `curl`
+
+```sh
+curl 'http://<server_ip>:<GRAPHQL_PORT>/metrics' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Accept: text/plain'
+```
+
+Replace placeholders:
+
+* `<server_ip>` – NetAlertX host IP/hostname
+* `<GRAPHQL_PORT>` – configured port (default `20212`)
+* `<API_TOKEN>` – your API token
+
+---
+
+## Prometheus Scraping Configuration
+
+```yaml
+scrape_configs:
+  - job_name: 'netalertx'
+    metrics_path: /metrics
+    scheme: http
+    scrape_interval: 60s
+    static_configs:
+      - targets: ['<server_ip>:<GRAPHQL_PORT>']
+    authorization:
+      type: Bearer
+      credentials: <API_TOKEN>
+```
+
+---
+
+## Grafana Dashboard Template
+
+Sample template JSON: [Download](./samples/API/Grafana_Dashboard.json)

docs/API_NETTOOLS.md

@@ -0,0 +1,243 @@
+# Net Tools API Endpoints
+
+The Net Tools API provides **network diagnostic utilities**, including Wake-on-LAN, traceroute, speed testing, DNS resolution, nmap scanning, and internet connection information.
+
+All endpoints require **authorization** via Bearer token.
+
+---
+
+## Endpoints
+
+### 1. Wake-on-LAN
+
+* **POST** `/nettools/wakeonlan`
+  Sends a Wake-on-LAN packet to wake a device.
+
+**Request Body** (JSON):
+
+```json
+{
+  "devMac": "AA:BB:CC:DD:EE:FF"
+}
+```
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "message": "WOL packet sent",
+  "output": "Sent magic packet to AA:BB:CC:DD:EE:FF"
+}
+```
+
+**Error Responses**:
+
+* Invalid MAC address → HTTP 400
+* Command failure → HTTP 500
+
+---
+
+### 2. Traceroute
+
+* **POST** `/nettools/traceroute`
+  Performs a traceroute to a specified IP address.
+
+**Request Body**:
+
+```json
+{
+  "devLastIP": "192.168.1.1"
+}
+```
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "output": "traceroute output as string"
+}
+```
+
+**Error Responses**:
+
+* Invalid IP → HTTP 400
+* Traceroute command failure → HTTP 500
+
+---
+
+### 3. Speedtest
+
+* **GET** `/nettools/speedtest`
+  Runs an internet speed test using `speedtest-cli`.
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "output": [
+    "Ping: 15 ms",
+    "Download: 120.5 Mbit/s",
+    "Upload: 22.4 Mbit/s"
+  ]
+}
+```
+
+**Error Responses**:
+
+* Command failure → HTTP 500
+
+---
+
+### 4. DNS Lookup (nslookup)
+
+* **POST** `/nettools/nslookup`
+  Resolves an IP address or hostname using `nslookup`.
+
+**Request Body**:
+
+```json
+{
+  "devLastIP": "8.8.8.8"
+}
+```
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "output": [
+    "Server: 8.8.8.8",
+    "Address: 8.8.8.8#53",
+    "Name: google-public-dns-a.google.com"
+  ]
+}
+```
+
+**Error Responses**:
+
+* Missing or invalid `devLastIP` → HTTP 400
+* Command failure → HTTP 500
+
+---
+
+### 5. Nmap Scan
+
+* **POST** `/nettools/nmap`
+  Runs an nmap scan on a target IP address or range.
+
+**Request Body**:
+
+```json
+{
+  "scan": "192.168.1.0/24",
+  "mode": "fast"
+}
+```
+
+**Supported Modes**:
+
+| Mode            | nmap Arguments |
+| --------------- | -------------- |
+| `fast`          | `-F`           |
+| `normal`        | default        |
+| `detail`        | `-A`           |
+| `skipdiscovery` | `-Pn`          |
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "mode": "fast",
+  "ip": "192.168.1.0/24",
+  "output": [
+    "Starting Nmap 7.91",
+    "Host 192.168.1.1 is up",
+    "... scan results ..."
+  ]
+}
+```
+
+**Error Responses**:
+
+* Invalid IP → HTTP 400
+* Invalid mode → HTTP 400
+* Command failure → HTTP 500
+
+---
+
+### 6. Internet Connection Info
+
+* **GET** `/nettools/internetinfo`
+  Fetches public internet connection information using `ipinfo.io`.
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "output": "IP: 203.0.113.5 City: Sydney Country: AU Org: Example ISP"
+}
+```
+
+**Error Responses**:
+
+* Failed request or empty response → HTTP 500
+
+---
+
+## Example `curl` Requests
+
+**Wake-on-LAN**:
+
+```sh
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/nettools/wakeonlan" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"devMac":"AA:BB:CC:DD:EE:FF"}'
+```
+
+**Traceroute**:
+
+```sh
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/nettools/traceroute" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"devLastIP":"192.168.1.1"}'
+```
+
+**Speedtest**:
+
+```sh
+curl "http://<server_ip>:<GRAPHQL_PORT>/nettools/speedtest" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```
+
+**Nslookup**:
+
+```sh
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/nettools/nslookup" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"devLastIP":"8.8.8.8"}'
+```
+
+**Nmap Scan**:
+
+```sh
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/nettools/nmap" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Content-Type: application/json" \
+  --data '{"scan":"192.168.1.0/24","mode":"fast"}'
+```
+
+**Internet Info**:
+
+```sh
+curl "http://<server_ip>:<GRAPHQL_PORT>/nettools/internetinfo" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```

docs/API_OLD.md

@@ -0,0 +1,370 @@
+# [Deprecated] API endpoints
+
+> [!WARNING] 
+> Some of these endpoints will be deprecated soon. Please refere to the new [API](API.md) endpoints docs for details on the new API layer. 
+
+NetAlertX comes with a couple of API endpoints. All requests need to be authorized (executed in a logged in browser session) or you have to pass the value of the `API_TOKEN` settings as authorization bearer, for example:
+
+```graphql
+curl 'http://host:GRAPHQL_PORT/graphql' \
+  -X POST \
+  -H 'Authorization: Bearer API_TOKEN' \
+  -H 'Content-Type: application/json' \
+  --data '{
+    "query": "query GetDevices($options: PageQueryOptionsInput) { devices(options: $options) { devices { rowid devMac devName devOwner devType devVendor devLastConnection devStatus } count } }",
+    "variables": {
+      "options": {
+        "page": 1,
+        "limit": 10,
+        "sort": [{ "field": "devName", "order": "asc" }],
+        "search": "",
+        "status": "connected"
+      }
+    }
+  }'
+```
+
+## API Endpoint: GraphQL
+
+- Endpoint URL: `php/server/query_graphql.php`
+- Host: `same as front end (web ui)`
+- Port: `20212` or as defined by the `GRAPHQL_PORT` setting
+
+### Example Query to Fetch Devices
+
+First, let's define the GraphQL query to fetch devices with pagination and sorting options.
+
+```graphql
+query GetDevices($options: PageQueryOptionsInput) {
+  devices(options: $options) {
+    devices {
+      rowid
+      devMac
+      devName
+      devOwner
+      devType
+      devVendor
+      devLastConnection
+      devStatus
+    }
+    count
+  }
+}
+```
+
+See also: [Debugging GraphQL issues](./DEBUG_GRAPHQL.md)
+
+### `curl` Command
+
+You can use the following `curl` command to execute the query. 
+
+```sh
+curl 'http://host:GRAPHQL_PORT/graphql'   -X POST   -H 'Authorization: Bearer API_TOKEN'  -H 'Content-Type: application/json'   --data '{
+    "query": "query GetDevices($options: PageQueryOptionsInput) { devices(options: $options) { devices { rowid devMac devName devOwner devType devVendor devLastConnection devStatus } count } }",
+    "variables": {
+      "options": {
+        "page": 1,
+        "limit": 10,
+        "sort": [{ "field": "devName", "order": "asc" }],
+        "search": "",
+        "status": "connected"
+      }
+    }
+  }'
+```
+
+### Explanation:
+
+1. **GraphQL Query**:
+   - The `query` parameter contains the GraphQL query as a string.
+   - The `variables` parameter contains the input variables for the query.
+
+2. **Query Variables**:
+   - `page`: Specifies the page number of results to fetch.
+   - `limit`: Specifies the number of results per page.
+   - `sort`: Specifies the sorting options, with `field` being the field to sort by and `order` being the sort order (`asc` for ascending or `desc` for descending).
+   - `search`: A search term to filter the devices.
+   - `status`: The status filter to apply (valid values are `my_devices` (determined by the `UI_MY_DEVICES` setting), `connected`, `favorites`, `new`, `down`, `archived`, `offline`).
+
+3. **`curl` Command**:
+   - The `-X POST` option specifies that we are making a POST request.
+   - The `-H "Content-Type: application/json"` option sets the content type of the request to JSON.
+   - The `-d` option provides the request payload, which includes the GraphQL query and variables.
+
+### Sample Response
+
+The response will be in JSON format, similar to the following:
+
+```json
+{
+  "data": {
+    "devices": {
+      "devices": [
+        {
+          "rowid": 1,
+          "devMac": "00:11:22:33:44:55",
+          "devName": "Device 1",
+          "devOwner": "Owner 1",
+          "devType": "Type 1",
+          "devVendor": "Vendor 1",
+          "devLastConnection": "2025-01-01T00:00:00Z",
+          "devStatus": "connected"
+        },
+        {
+          "rowid": 2,
+          "devMac": "66:77:88:99:AA:BB",
+          "devName": "Device 2",
+          "devOwner": "Owner 2",
+          "devType": "Type 2",
+          "devVendor": "Vendor 2",
+          "devLastConnection": "2025-01-02T00:00:00Z",
+          "devStatus": "connected"
+        }
+      ],
+      "count": 2
+    }
+  }
+}
+```
+
+## API Endpoint: JSON files 
+
+This API endpoint retrieves static files, that are periodically updated. 
+
+- Endpoint URL: `php/server/query_json.php?file=<file name>`
+- Host: `same as front end (web ui)`
+- Port: `20211` or as defined by the $PORT docker environment variable (same as the port for the web ui)
+
+### When are the endpoints updated
+
+The endpoints are updated when objects in the API endpoints are changed.
+
+### Location of the endpoints
+
+In the container, these files are located under the `/app/api/` folder. You can access them via the `/php/server/query_json.php?file=user_notifications.json` endpoint.
+
+### Available endpoints
+
+You can access the following files:
+
+  | File name | Description | 
+  |----------------------|----------------------| 
+  | `notification_json_final.json` | The json version of the last notification (e.g. used for webhooks - [sample JSON](https://github.com/jokob-sk/NetAlertX/blob/main/front/report_templates/webhook_json_sample.json)). |
+  | `table_devices.json` | All of the available Devices detected by the app. |  
+  | `table_plugins_events.json` | The list of the unprocessed (pending) notification events (plugins_events DB table). |
+  | `table_plugins_history.json` | The list of notification events history. |  
+  | `table_plugins_objects.json` | The content of the plugins_objects table. Find more info on the [Plugin system here](https://github.com/jokob-sk/NetAlertX/tree/main/docs/PLUGINS.md)|
+  | `language_strings.json` | The content of the language_strings table, which in turn is loaded from the plugins `config.json` definitions. |  
+  | `table_custom_endpoint.json` | A custom endpoint generated by the SQL query specified by the `API_CUSTOM_SQL` setting. |
+  | `table_settings.json` | The content of the settings table. |
+  | `app_state.json` | Contains the current application state. |
+  
+
+### JSON Data format
+
+The endpoints starting with the `table_` prefix contain most, if not all, data contained in the corresponding database table. The common format for those is:
+
+```JSON
+{
+  "data": [
+        {
+          "db_column_name": "data",
+          "db_column_name2": "data2"      
+        }, 
+        {
+          "db_column_name": "data3",
+          "db_column_name2": "data4" 
+        }
+    ]
+}
+
+```
+
+Example JSON of the `table_devices.json` endpoint with two Devices (database rows):
+
+```JSON
+{
+  "data": [
+        {
+          "devMac": "Internet",
+          "devName": "Net - Huawei",
+          "devType": "Router",
+          "devVendor": null,
+          "devGroup": "Always on",
+          "devFirstConnection": "2021-01-01 00:00:00",
+          "devLastConnection": "2021-01-28 22:22:11",
+          "devLastIP": "192.168.1.24",
+          "devStaticIP": 0,
+          "devPresentLastScan": 1,
+          "devLastNotification": "2023-01-28 22:22:28.998715",
+          "devIsNew": 0,
+          "devParentMAC": "",
+          "devParentPort": "",
+          "devIcon": "globe"
+        }, 
+        {
+          "devMac": "a4:8f:ff:aa:ba:1f",
+          "devName": "Net - USG",
+          "devType": "Firewall",
+          "devVendor": "Ubiquiti Inc",
+          "devGroup": "",
+          "devFirstConnection": "2021-02-12 22:05:00",
+          "devLastConnection": "2021-07-17 15:40:00",
+          "devLastIP": "192.168.1.1",
+          "devStaticIP": 1,
+          "devPresentLastScan": 1,
+          "devLastNotification": "2021-07-17 15:40:10.667717",
+          "devIsNew": 0,
+          "devParentMAC": "Internet",
+          "devParentPort": 1,
+          "devIcon": "shield-halved"
+      }
+    ]
+}
+
+```
+
+## API Endpoint: Prometheus Exporter
+
+* **Endpoint URL**: `/metrics`
+* **Host**: (where NetAlertX exporter is running)
+* **Port**: as configured in the `GRAPHQL_PORT` setting (`20212` by default)
+
+---
+
+### Example Output of the `/metrics` Endpoint
+
+Below is a representative snippet of the metrics you may find when querying the `/metrics` endpoint for `netalertx`. It includes both aggregate counters and `device_status` labels per device.
+
+```
+netalertx_connected_devices 31
+netalertx_offline_devices 54
+netalertx_down_devices 0
+netalertx_new_devices 0
+netalertx_archived_devices 31
+netalertx_favorite_devices 2
+netalertx_my_devices 54
+
+netalertx_device_status{device="Net - Huawei", mac="Internet", ip="1111.111.111.111", vendor="None", first_connection="2021-01-01 00:00:00", last_connection="2025-08-04 17:57:00", dev_type="Router", device_status="Online"} 1
+netalertx_device_status{device="Net - USG", mac="74:ac:74:ac:74:ac", ip="192.168.1.1", vendor="Ubiquiti Networks Inc.", first_connection="2022-02-12 22:05:00", last_connection="2025-06-07 08:16:49", dev_type="Firewall", device_status="Archived"} 1
+netalertx_device_status{device="Raspberry Pi 4 LAN", mac="74:ac:74:ac:74:74", ip="192.168.1.9", vendor="Raspberry Pi Trading Ltd", first_connection="2022-02-12 22:05:00", last_connection="2025-08-04 17:57:00", dev_type="Singleboard Computer (SBC)", device_status="Online"} 1
+...
+```
+
+---
+
+### Metrics Explanation
+
+#### 1. Aggregate Device Counts
+
+Metric names prefixed with `netalertx_` provide aggregated counts by device status:
+
+* `netalertx_connected_devices`: number of devices currently connected
+* `netalertx_offline_devices`: devices currently offline
+* `netalertx_down_devices`: down/unreachable devices
+* `netalertx_new_devices`: devices recently detected
+* `netalertx_archived_devices`: archived devices
+* `netalertx_favorite_devices`: user-marked favorite devices
+* `netalertx_my_devices`: devices associated with the current user context
+
+These numeric values give a high-level overview of device distribution.
+
+#### 2. Per‑Device Status with Labels
+
+Each individual device is represented by a `netalertx_device_status` metric, with descriptive labels:
+
+* `device`: friendly name of the device
+* `mac`: MAC address (or placeholder)
+* `ip`: last recorded IP address
+* `vendor`: manufacturer or "None" if unknown
+* `first_connection`: timestamp when the device was first observed
+* `last_connection`: most recent contact timestamp
+* `dev_type`: device category or type
+* `device_status`: current status (Online / Offline / Archived / Down / ...)
+
+The metric value is always `1` (indicating presence or active state) and the combination of labels identifies the device.
+
+---
+
+### How to Query with `curl`
+
+To fetch the metrics from the NetAlertX exporter:
+
+```sh
+curl 'http://<server_ip>:<GRAPHQL_PORT>/metrics' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Accept: text/plain'
+```
+
+Replace:
+
+* `<server_ip>`: IP or hostname of the NetAlertX server
+* `<GRAPHQL_PORT>`: port specified in your `GRAPHQL_PORT` setting  (default: `20212`)
+* `<API_TOKEN>` your Bearer token from the `API_TOKEN` setting
+
+---
+
+### Summary
+
+* **Endpoint**: `/metrics` provides both summary counters and per-device status entries.
+* **Aggregate metrics** help monitor overall device states.
+* **Detailed metrics** expose each device’s metadata via labels.
+* **Use case**: feed into Prometheus for scraping, monitoring, alerting, or charting dashboard views.
+
+### Prometheus Scraping Configuration
+
+```yaml
+scrape_configs:
+  - job_name: 'netalertx'
+    metrics_path: /metrics
+    scheme: http
+    scrape_interval: 60s
+    static_configs:
+      - targets: ['<server_ip>:<GRAPHQL_PORT>']
+    authorization:
+      type: Bearer
+      credentials: <API_TOKEN>
+```
+
+### Grafana template
+
+Grafana template sample: [Download json](./samples/API/Grafana_Dashboard.json)
+
+## API Endpoint: /log files
+
+This API endpoint retrieves files from the `/app/log` folder. 
+
+- Endpoint URL: `php/server/query_logs.php?file=<file name>`
+- Host: `same as front end (web ui)`
+- Port: `20211` or as defined by the $PORT docker environment variable (same as the port for the web ui)
+
+| File                     | Description                                                   |
+|--------------------------|---------------------------------------------------------------|
+| `IP_changes.log`         | Logs of IP address changes                                    |
+| `app.log`                | Main application log                                          |
+| `app.php_errors.log`     | PHP error log                                                 |
+| `app_front.log`          | Frontend application log                                      |
+| `app_nmap.log`           | Logs of Nmap scan results                                     |
+| `db_is_locked.log`       | Logs when the database is locked                              |
+| `execution_queue.log`    | Logs of execution queue activities                            |
+| `plugins/`               | Directory for temporary plugin-related files (not accessible) |
+| `report_output.html`     | HTML report output                                            |
+| `report_output.json`     | JSON format report output                                     |
+| `report_output.txt`      | Text format report output                                     |
+| `stderr.log`             | Logs of standard error output                                 |
+| `stdout.log`             | Logs of standard output                                       |
+
+
+## API Endpoint: /config files
+
+To retrieve files from the `/app/config` folder. 
+
+- Endpoint URL: `php/server/query_config.php?file=<file name>`
+- Host: `same as front end (web ui)`
+- Port: `20211` or as defined by the $PORT docker environment variable (same as the port for the web ui)
+
+| File                     | Description                                      |
+|--------------------------|--------------------------------------------------|
+| `devices.csv`            | Devices csv file                                 |
+| `app.conf`               | Application config file                          |
+

docs/API_ONLINEHISTORY.md

@@ -0,0 +1,32 @@
+# Online History API Endpoints
+
+Manage the **online history records** of devices. Currently, the API supports deletion of all history entries. All endpoints require **authorization**.
+
+---
+
+## 1. Delete Online History
+
+* **DELETE** `/history`
+  Remove **all records** from the online history table (`Online_History`). This operation **cannot be undone**.
+
+**Response** (success):
+
+```json
+{
+  "success": true,
+  "message": "Deleted online history"
+}
+```
+
+**Error Responses**:
+
+* Unauthorized → HTTP 403
+
+---
+
+### Example `curl` Request
+
+```bash
+curl -X DELETE "http://<server_ip>:<GRAPHQL_PORT>/history" \
+  -H "Authorization: Bearer <API_TOKEN>"
+```

docs/API_SESSIONS.md

@@ -0,0 +1,240 @@
+# Sessions API Endpoints
+
+Track and manage device connection sessions. Sessions record when a device connects or disconnects on the network.
+
+### Create a Session
+
+* **POST** `/sessions/create` → Create a new session for a device
+
+  **Request Body:**
+
+  ```json
+  {
+    "mac": "AA:BB:CC:DD:EE:FF",
+    "ip": "192.168.1.10",
+    "start_time": "2025-08-01T10:00:00",
+    "end_time": "2025-08-01T12:00:00",      // optional
+    "event_type_conn": "Connected",         // optional, default "Connected"
+    "event_type_disc": "Disconnected"       // optional, default "Disconnected"
+  }
+  ```
+
+  **Response:**
+
+  ```json
+  {
+    "success": true,
+    "message": "Session created for MAC AA:BB:CC:DD:EE:FF"
+  }
+  ```
+
+#### `curl` Example
+
+```bash
+curl -X POST "http://<server_ip>:<GRAPHQL_PORT>/sessions/create" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "mac": "AA:BB:CC:DD:EE:FF",
+    "ip": "192.168.1.10",
+    "start_time": "2025-08-01T10:00:00",
+    "end_time": "2025-08-01T12:00:00",
+    "event_type_conn": "Connected",
+    "event_type_disc": "Disconnected"
+  }'
+
+```
+
+---
+
+### Delete Sessions
+
+* **DELETE** `/sessions/delete` → Delete all sessions for a given MAC
+
+  **Request Body:**
+
+  ```json
+  {
+    "mac": "AA:BB:CC:DD:EE:FF"
+  }
+  ```
+
+  **Response:**
+
+  ```json
+  {
+    "success": true,
+    "message": "Deleted sessions for MAC AA:BB:CC:DD:EE:FF"
+  }
+  ```
+
+#### `curl` Example
+
+```bash
+curl -X DELETE "http://<server_ip>:<GRAPHQL_PORT>/sessions/delete" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "mac": "AA:BB:CC:DD:EE:FF"
+  }'
+```
+
+---
+
+### List Sessions
+
+* **GET** `/sessions/list` → Retrieve sessions optionally filtered by device and date range
+
+  **Query Parameters:**
+
+  * `mac` (optional) → Filter by device MAC address
+  * `start_date` (optional) → Filter sessions starting from this date (`YYYY-MM-DD`)
+  * `end_date` (optional) → Filter sessions ending by this date (`YYYY-MM-DD`)
+
+  **Example:**
+
+  ```
+  /sessions/list?mac=AA:BB:CC:DD:EE:FF&start_date=2025-08-01&end_date=2025-08-21
+  ```
+
+  **Response:**
+
+  ```json
+  {
+    "success": true,
+    "sessions": [
+      {
+        "ses_MAC": "AA:BB:CC:DD:EE:FF",
+        "ses_Connection": "2025-08-01 10:00",
+        "ses_Disconnection": "2025-08-01 12:00",
+        "ses_Duration": "2h 0m",
+        "ses_IP": "192.168.1.10",
+        "ses_Info": ""
+      }
+    ]
+  }
+  ```
+#### `curl` Example
+
+```bash
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/sessions/list?mac=AA:BB:CC:DD:EE:FF&start_date=2025-08-01&end_date=2025-08-21" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json"
+```
+---
+
+### Calendar View of Sessions
+
+* **GET** `/sessions/calendar` → View sessions in calendar format
+
+  **Query Parameters:**
+
+  * `start` → Start date (`YYYY-MM-DD`)
+  * `end` → End date (`YYYY-MM-DD`)
+
+  **Example:**
+
+  ```
+  /sessions/calendar?start=2025-08-01&end=2025-08-21
+  ```
+
+  **Response:**
+
+  ```json
+  {
+    "success": true,
+    "sessions": [
+      {
+        "resourceId": "AA:BB:CC:DD:EE:FF",
+        "title": "",
+        "start": "2025-08-01T10:00:00",
+        "end": "2025-08-01T12:00:00",
+        "color": "#00a659",
+        "tooltip": "Connection: 2025-08-01 10:00\nDisconnection: 2025-08-01 12:00\nIP: 192.168.1.10",
+        "className": "no-border"
+      }
+    ]
+  }
+  ```
+
+#### `curl` Example
+
+```bash
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/sessions/calendar?start=2025-08-01&end=2025-08-21" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json"
+```
+
+---
+
+### Device Sessions
+
+* **GET** `/sessions/<mac>` → Retrieve sessions for a specific device
+
+  **Query Parameters:**
+
+  * `period` → Period to retrieve sessions (`1 day`, `7 days`, `1 month`, etc.)
+    Default: `1 day`
+
+  **Example:**
+
+  ```
+  /sessions/AA:BB:CC:DD:EE:FF?period=7 days
+  ```
+
+  **Response:**
+
+  ```json
+  {
+    "success": true,
+    "sessions": [
+      {
+        "ses_MAC": "AA:BB:CC:DD:EE:FF",
+        "ses_Connection": "2025-08-01 10:00",
+        "ses_Disconnection": "2025-08-01 12:00",
+        "ses_Duration": "2h 0m",
+        "ses_IP": "192.168.1.10",
+        "ses_Info": ""
+      }
+    ]
+  }
+  ```
+
+#### `curl` Example
+
+```bash
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/sessions/AA:BB:CC:DD:EE:FF?period=7%20days" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json"
+```
+
+---
+
+### Session Events Summary
+
+* **GET** `/sessions/session-events` → Retrieve a summary of session events
+
+  **Query Parameters:**
+
+  * `type` → Event type (`all`, `sessions`, `missing`, `voided`, `new`, `down`)
+    Default: `all`
+  * `period` → Period to retrieve events (`7 days`, `1 month`, etc.)
+
+  **Example:**
+
+  ```
+  /sessions/session-events?type=all&period=7 days
+  ```
+
+  **Response:**
+  Returns a list of events or sessions with formatted connection, disconnection, duration, and IP information.
+
+#### `curl` Example
+
+```bash
+curl -X GET "http://<server_ip>:<GRAPHQL_PORT>/sessions/session-events?type=all&period=7%20days" \
+  -H "Authorization: Bearer <API_TOKEN>" \
+  -H "Accept: application/json"
+```

docs/API_SETTINGS.md

@@ -0,0 +1,92 @@
+# Settings API Endpoints
+
+Retrieve application settings stored in the configuration system. This endpoint is useful for quickly fetching individual settings such as `API_TOKEN` or `TIMEZONE`.
+
+For bulk or structured access (all settings, schema details, or filtering), use the [GraphQL API Endpoint](API_GRAPHQL.md).
+
+---
+
+### Get a Setting
+
+* **GET** `/settings/<key>` → Retrieve the value of a specific setting
+
+**Path Parameter:**
+
+* `key` → The setting key to retrieve (e.g., `API_TOKEN`, `TIMEZONE`)
+
+**Authorization:**
+Requires a valid API token in the `Authorization` header.
+
+---
+
+#### `curl` Example (Success)
+
+```sh
+curl 'http://<server_ip>:<GRAPHQL_PORT>/settings/API_TOKEN' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Accept: application/json'
+```
+
+**Response:**
+
+```json
+{
+  "success": true,
+  "value": "my-secret-token"
+}
+```
+
+---
+
+#### `curl` Example (Invalid Key)
+
+```sh
+curl 'http://<server_ip>:<GRAPHQL_PORT>/settings/DOES_NOT_EXIST' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Accept: application/json'
+```
+
+**Response:**
+
+```json
+{
+  "success": true,
+  "value": null
+}
+```
+
+---
+
+#### `curl` Example (Unauthorized)
+
+```sh
+curl 'http://<server_ip>:<GRAPHQL_PORT>/settings/API_TOKEN' \
+  -H 'Accept: application/json'
+```
+
+**Response:**
+
+```json
+{
+  "error": "Forbidden"
+}
+```
+
+---
+
+### Notes
+
+* This endpoint is optimized for **direct retrieval of a single setting**.
+* For **complex retrieval scenarios** (listing all settings, retrieving schema metadata like `setName`, `setDescription`, `setType`, or checking if a setting is overridden by environment variables), use the **GraphQL Settings Query**:
+
+```sh
+curl 'http://<server_ip>:<GRAPHQL_PORT>/graphql' \
+  -X POST \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -H 'Content-Type: application/json' \
+  --data '{
+    "query": "query GetSettings { settings { settings { setKey setName setDescription setType setOptions setGroup setValue setEvents setOverriddenByEnv } count } }"
+  }'
+```
+
+See the [GraphQL API Endpoint](API_GRAPHQL.md) for more details.

docs/API_SYNC.md

@@ -0,0 +1,125 @@
+# Sync API Endpoint 
+
+---
+
+The `/sync` endpoint is used by the **SYNC plugin** to synchronize data between multiple NetAlertX instances (e.g., from a node to a hub). It supports both **GET** and **POST** requests.
+
+#### 9.1 GET `/sync`
+
+Fetches data from a node to the hub. The data is returned as a **base64-encoded JSON file**.
+
+**Example Request:**
+
+```sh
+curl 'http://<server>:<GRAPHQL_PORT>/sync' \
+  -H 'Authorization: Bearer <API_TOKEN>'
+```
+
+**Response Example:**
+
+```json
+{
+  "node_name": "NODE-01",
+  "status": 200,
+  "message": "OK",
+  "data_base64": "eyJkZXZpY2VzIjogW3siZGV2TWFjIjogIjAwOjExOjIyOjMzOjQ0OjU1IiwiZGV2TmFtZSI6ICJEZXZpY2UgMSJ9XSwgImNvdW50Ijog1fQ==",
+  "timestamp": "2025-08-24T10:15:00+10:00"
+}
+```
+
+**Notes:**
+
+* `data_base64` contains the full JSON data encoded in Base64.
+* `node_name` corresponds to the `SYNC_node_name` setting on the node.
+* Errors (e.g., missing file) return HTTP 500 with an error message.
+
+---
+
+#### 9.2 POST `/sync` 
+
+The **POST** endpoint is used by nodes to **send data to the hub**. The hub expects the data as **form-encoded fields** (application/x-www-form-urlencoded or multipart/form-data). The hub then stores the data in the plugin log folder for processing.
+
+#### Required Fields
+
+| Field       | Type              | Description                                                                                                                                                                  |
+| ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data`      | string            | The payload from the plugin or devices. Typically **plain text**, **JSON**, or **encrypted Base64** data. In your Python script, `encrypt_data()` is applied before sending. |
+| `node_name` | string            | The name of the node sending the data. Matches the node’s `SYNC_node_name` setting. Used to generate the filename on the hub.                                                |
+| `plugin`    | string            | The name of the plugin sending the data. Determines the filename prefix (`last_result.<plugin>...`).                                                                         |
+| `file_path` | string (optional) | Path of the local file being sent. Used only for logging/debugging purposes on the hub; **not required for processing**.                                                     |
+
+---
+
+### How the Hub Processes the POST Data
+
+1. **Receives the data** and validates the API token.
+2. **Stores the raw payload** in:
+
+```
+INSTALL_PATH/log/plugins/last_result.<plugin>.encoded.<node_name>.<sequence>.log
+```
+
+* `<plugin>` → plugin name from the POST request.
+* `<node_name>` → node name from the POST request.
+* `<sequence>` → incremented number for each submission.
+
+3. **Decodes / decrypts the data** if necessary (Base64 or encrypted) before processing.
+4. **Processes JSON payloads** (e.g., device info) to:
+
+   * Avoid duplicates by tracking `devMac`.
+   * Add metadata like `devSyncHubNode`.
+   * Insert new devices into the database.
+5. **Renames files** to indicate they have been processed:
+
+```
+processed_last_result.<plugin>.<node_name>.<sequence>.log
+```
+
+---
+
+### Example POST Payload
+
+If a node is sending device data:
+
+```bash
+curl -X POST 'http://<hub>:<PORT>/sync' \
+  -H 'Authorization: Bearer <API_TOKEN>' \
+  -F 'data={"data":[{"devMac":"00:11:22:33:44:55","devName":"Device 1","devVendor":"Vendor A","devLastIP":"192.168.1.10"}]}' \
+  -F 'node_name=NODE-01' \
+  -F 'plugin=SYNC'
+```
+
+* The `data` field contains JSON with a **`data` array**, where each element is a **device object** or **plugin data object**.
+* The `plugin` and `node_name` fields allow the hub to **organize and store the file correctly**.
+* The data is only processed if the relevant plugins are enabled and run on the target server. 
+
+---
+
+### Key Notes
+
+* **Always use the same `plugin` and `node_name` values** for consistent storage.
+* **Encrypted data**: The Python script uses `encrypt_data()` before sending, and the hub decodes it before processing.
+* **Sequence numbers**: Every submission generates a new sequence, preventing overwriting previous data.
+* **Form-encoded**: The hub expects `multipart/form-data` (cURL `-F`) or `application/x-www-form-urlencoded`.
+
+**Storage Details:**
+
+* Data is stored under `INSTALL_PATH/log/plugins` with filenames following the pattern:
+
+```
+last_result.<plugin>.encoded.<node_name>.<sequence>.log
+```
+
+* Both encoded and decoded files are tracked, and new submissions increment the sequence number.
+* If storing fails, the API returns HTTP 500 with an error message.
+* The data is only processed if the relevant plugins are enabled and run on the target server. 
+
+---
+
+#### 9.3 Notes and Best Practices
+
+* **Authorization Required** – Both GET and POST require a valid API token.
+* **Data Integrity** – Ensure that `node_name` and `plugin` are consistent to avoid overwriting files.
+* **Monitoring** – Notifications are generated whenever data is sent or received (`write_notification`), which can be used for alerting or auditing.
+* **Use Case** – Typically used in multi-node deployments to consolidate device and event data on a central hub.
+

docs/API_TESTS.md

@@ -0,0 +1,12 @@
+### Unit Tests
+
+>[!WARNING]
+> Please note these test modify data in the database. 
+
+1. See the `/test` directory for available test cases. These are not exhaustive but cover the main API endpoints.  
+2. To run a test case, SSH into the container:  
+   `sudo docker exec -it netalertx /bin/bash`  
+3. Inside the container, install pytest (if not already installed):  
+   `pip install pytest`  
+4. Run a specific test case:  
+   `pytest /app/test/TESTFILE.py`

docs/DATABASE.md

@@ -39,6 +39,8 @@
 | `devSourcePlugin`      | Source plugin that discovered the device. | `ARPSCAN` |
 | `devCustomProps`       | [Custom properties](./CUSTOM_PROPERTIES.md) related to the device. The value is a base64-encoded JSON object. | `PHN2ZyB...` |
 | `devFQDN`              | Fully qualified domain name. | `raspberrypi.local` |
+| `devParentRelType`     | The type of relationship between the current device and it's parent node. By default, selecting `nic` will hide it from lists. | `nic` |
+| `devReqNicsOnline`     | If all NICs are required to be online to mark teh current device online. | `0` |
 
 
 To understand how values of these fields influuence application behavior, such as Notifications or Network topology, see also: 

docs/DEBUG_INVALID_JSON.md

@@ -10,7 +10,7 @@ Check the the HTTP response of the failing backend call by following these steps
 - Copy the URL causing the error and enter it in the address bar of your browser directly and hit enter. The copied URLs could look something like this (notice the query strings at the end):
   - `http://<NetAlertX URL>:20211/api/table_devices.json?nocache=1704141103121`
   - `http://<NetAlertX URL>:20211/php/server/devices.php?action=getDevicesTotals`
-  - `http://<NetAlertX URL>:20211/php/server/devices.php?action=getDevicesList&status=all`  
+
 
 - Post the error response in the existing issue thread on GitHub or create a new issue and include the redacted response of the failing query.
 

docs/DEBUG_PHP.md

@@ -0,0 +1,34 @@
+# Debugging backend PHP issues
+
+## Logs in UI
+
+![Logs UI](./img/DEBUG/maintenance_debug_php.png)
+
+You can view recent backend PHP errors directly in the **Maintenance > Logs** section of the UI. This provides quick access to logs without needing terminal access.
+
+## Accessing logs directly
+
+Sometimes, the UI might not be accessible. In that case, you can access the logs directly inside the container.
+
+### Step-by-step:
+
+1. **Open a shell into the container:**
+
+   ```bash
+   docker exec -it netalertx /bin/sh
+   ```
+
+2. **Check the NGINX error log:**
+
+   ```bash
+   cat /var/log/nginx/error.log
+   ```
+
+3. **Check the PHP application error log:**
+
+   ```bash
+   cat /app/log/app.php_errors.log
+   ```
+
+These logs will help identify syntax issues, fatal errors, or startup problems when the UI fails to load properly.
+

docs/DEVICE_HEURISTICS.md

@@ -0,0 +1,114 @@
+# Device Heuristics: Icon and Type Guessing
+
+This module is responsible for inferring the most likely **device type** and **icon** based on minimal identifying data like MAC address, vendor, IP, or device name.
+
+It does this using a set of heuristics defined in an external JSON rules file, which it evaluates **in priority order**.
+
+>[!NOTE]
+> You can find the full source code of the heuristics module in the `device_heuristics.py` file.  
+
+---
+
+## JSON Rule Format
+
+Rules are defined in a file called `device_heuristics_rules.json` (located under `/back`), structured like:
+
+```json
+[
+  {
+    "dev_type": "Phone",
+    "icon_html": "<i class=\"fa-brands fa-apple\"></i>",
+    "matching_pattern": [
+      { "mac_prefix": "001A79", "vendor": "Apple" }
+    ],
+    "name_pattern": ["iphone", "pixel"]
+  }
+]
+```
+
+>[!NOTE]
+> Feel free to raise a PR in case you'd like to add any rules into the `device_heuristics_rules.json` file. Please place new rules into the correct position and consider the priority of already available rules.
+
+### Supported fields:
+
+| Field              | Type                 | Description                                                     |
+| ------------------ | -------------------- | --------------------------------------------------------------- |
+| `dev_type`         | `string`             | Type to assign if rule matches (e.g. `"Gateway"`, `"Phone"`)    |
+| `icon_html`        | `string`             | Icon (HTML string) to assign if rule matches. Encoded to base64 at load time. |
+| `matching_pattern` | `array`              | List of `{ mac_prefix, vendor }` objects for first strict and then loose matching    |
+| `name_pattern`     | `array` *(optional)* | List of lowercase substrings (used with regex)                  |
+| `ip_pattern`       | `array` *(optional)* | Regex patterns to match IPs                                     |
+
+**Order in this array defines priority** — rules are checked top-down and short-circuit on first match.
+
+---
+
+## Matching Flow (in Priority Order)
+
+The function `guess_device_attributes(...)` runs a series of matching functions in strict order:
+
+1. MAC + Vendor → `match_mac_and_vendor()`
+2. Vendor only → `match_vendor()`
+3. Name pattern → `match_name()`
+4. IP pattern → `match_ip()`
+5. Final fallback → defaults defined in the `NEWDEV_devIcon` and `NEWDEV_devType` settings.
+
+> [!NOTE]
+> The app will try guessing the device type or icon if `devType` or `devIcon` are `""` or `"null"`.
+
+### Use of default values
+
+The guessing process runs for every device **as long as the current type or icon still matches the default values**. Even if earlier heuristics return a match, the system continues evaluating additional clues — like name or IP — to try and replace placeholders.
+
+```python
+# Still considered a match attempt if current values are defaults
+if (not type_ or type_ == default_type) or (not icon or icon == default_icon):
+    type_, icon = match_ip(ip, default_type, default_icon)
+```
+
+In other words: if the type or icon is still `"unknown"` (or matches the default), the system assumes the match isn’t final — and keeps looking. It stops only when both values are non-default (defaults are defined in the `NEWDEV_devIcon` and `NEWDEV_devType` settings).
+
+---
+
+## Match Behavior (per function)
+
+These functions are executed in the following order:
+
+### `match_mac_and_vendor(mac_clean, vendor, ...)`
+
+* Looks for MAC prefix **and** vendor substring match
+* Most precise
+* Stops as soon as a match is found
+
+### `match_vendor(vendor, ...)`
+
+* Falls back to substring match on vendor only
+* Ignores rules where `mac_prefix` is present (ensures this is really a fallback)
+
+### `match_name(name, ...)`
+
+* Lowercase name is compared against all `name_pattern` values using regex
+* Good for user-assigned labels (e.g. "AP Office", "iPhone")
+
+### `match_ip(ip, ...)`
+
+* If IP is present and matches regex patterns under any rule, it returns that type/icon
+* Usually used for gateways or local IP ranges
+
+---
+
+## Icons
+
+* Each rule can define an `icon_html`, which is converted to a `icon_base64` on load
+* If missing, it falls back to the passed-in `default_icon` (`NEWDEV_devIcon` setting)
+* If a match is found but icon is still blank, default is used
+
+**TL;DR:** Type and icon must both be matched. If only one is matched, the other falls back to the default.
+
+---
+
+## Priority Mechanics
+
+* JSON rules are evaluated **top-to-bottom**
+* Matching is **first-hit wins** — no scoring, no weights
+* Rules that are more specific (e.g. exact MAC prefixes) should be listed earlier

docs/DEV_DEVCONTAINER.md

@@ -0,0 +1,63 @@
+# Devcontainer for NetAlertX Guide
+
+This devcontainer is designed to mirror the production container environment as closely as possible, while providing a rich set of tools for development.
+
+## How to Get Started
+
+1.  **Prerequisites:**
+    * A working **Docker installation** that can be managed by your user. This can be [Docker Desktop](https://www.docker.com/products/docker-desktop/) or Docker Engine installed via other methods (like the official [get-docker script](https://get.docker.com)).
+    * [Visual Studio Code](https://code.visualstudio.com/) installed.
+    * The [VS Code Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) installed.
+
+2.  **Launch the Devcontainer:**
+    * Clone this repository.
+    * Open the repository folder in VS Code.
+    * A notification will pop up in the bottom-right corner asking to **"Reopen in Container"**. Click it.
+    * VS Code will now build the Docker image and connect your editor to the container. Your terminal, debugger, and all tools will now be running inside this isolated environment.
+
+## Key Workflows & Features
+
+Once you're inside the container, everything is set up for you.
+
+### 1. Services (Frontend & Backend)
+
+![Services](./img/DEV/devcontainer_1.png)
+
+The container's startup script (`.devcontainer/scripts/setup.sh`) automatically starts the Nginx/PHP frontend and the Python backend. You can restart them at any time using the built-in tasks.
+
+### 2. Integrated Debugging (Just Press F5!)
+
+![Debugging](./img/DEV/devcontainer_2.png)
+
+Debugging for both the Python backend and PHP frontend is pre-configured and ready to go.
+
+* **Python Backend (debugpy):** The backend automatically starts with a debugger attached on port `5678`. Simply open a Python file (e.g., `server/__main__.py`), set a breakpoint, and press **F5** (or select "Python Backend Debug: Attach") to connect the debugger.
+* **PHP Frontend (Xdebug):** Xdebug listens on port `9003`. In VS Code, start listening for Xdebug connections and use a browser extension (like "Xdebug helper") to start a debugging session for the web UI.
+
+### 3. Common Tasks (F1 -> Run Task)
+
+![Common tasks](./img/DEV/devcontainer_3.png)
+
+We've created several VS Code Tasks to simplify common operations. Access them by pressing `F1` and typing "Tasks: Run Task".
+
+* `Generate Dockerfile`: **This is important.** The actual `.devcontainer/Dockerfile` is auto-generated. If you need to change the container environment, edit `.devcontainer/resources/devcontainer-Dockerfile` and then run this task.
+* `Re-Run Startup Script`: Manually re-runs the `.devcontainer/scripts/setup.sh` script to re-link files and restart services.
+* `Start Backend (Python)` / `Start Frontend (nginx and PHP-FPM)`: Manually restart the services if needed.
+
+### 4. Running Tests
+
+![Running tests](./img/DEV/devcontainer_4.png)
+
+The environment includes `pytest`. You can run tests directly from the VS Code Test Explorer UI or by running `pytest -q` in the integrated terminal. The necessary `PYTHONPATH` is already configured so that tests can correctly import the server modules.
+
+## How to Maintain This Devcontainer
+
+The setup is designed to be easy to manage. Here are the core principles:
+
+* **Don't Edit `Dockerfile` Directly:** The main `.devcontainer/Dockerfile` is a combination of the project's root `Dockerfile` and a special dev-only stage. To add new tools or dependencies, **edit `.devcontainer/resources/devcontainer-Dockerfile`** and then run the `Generate Dockerfile` task.
+* **Build-Time vs. Run-Time Setup:**
+    * For changes that can be baked into the image (like installing a new package with `apk add`), add them to the resource Dockerfile.
+    * For changes that must happen when the container *starts* (like creating symlinks, setting permissions, or starting services), use `.devcontainer/scripts/setup.sh`.
+* **Project Conventions:** The `.github/copilot-instructions.md` file is an excellent resource to help AI and humans understand the project's architecture, conventions, and how to use existing helper functions instead of hardcoding values.
+
+This setup provides a powerful and consistent foundation for all current and future contributors to NetAlertX.

docs/DEV_ENV_SETUP.md

@@ -1,32 +1,45 @@
-# Development environment set up
+# Development Environment Setup
 
->[!NOTE]
-> Replace `/development` with the path where your code files will be stored. The default container name is `netalertx` so there might be a conflict with your running containers.
+I truly appreciate all contributions! To help keep this project maintainable, this guide provides an overview of project priorities, key design considerations, and overall philosophy. It also includes instructions for setting up your environment so you can start contributing right away.
 
 ## Development Guidelines
 
-Before starting development, please scan the below development guidelines.
+Before starting development, please review the following guidelines.
 
 ### Priority Order (Highest to Lowest)
 
-1. 🔼 Fixing core bugs that lack workarounds.
-2. 🔵 Adding core functionality that unlocks other features (e.g., plugins).
-3. 🔵 Refactoring to enable faster development.
-4. 🔽 UI improvements (PRs welcome).
+1. 🔼 Fixing core bugs that lack workarounds  
+2. 🔵 Adding core functionality that unlocks other features (e.g., plugins)  
+3. 🔵 Refactoring to enable faster development  
+4. 🔽 UI improvements (PRs welcome, but low priority)  
 
 ### Design Philosophy
 
-Focus on core functionality and integrate with existing tools rather than reinventing the wheel.  
-Examples:
+The application architecture is designed for extensibility and maintainability. It relies heavily on configuration manifests via plugins and settings to dynamically build the UI and populate the application with data from various sources.  
 
-- Using **Apprise** for notifications instead of implementing multiple separate gateways.
-- Implementing **regex-based validation** instead of one-off validation for each setting.
+For details, see:  
+- [Plugins Development](PLUGINS_DEV.md) (includes video)  
+- [Settings System](SETTINGS_SYSTEM.md)  
 
-> [!NOTE]
-> UI changes have lower priority, however, PRs are welcome, but **keep them small & focused**.
+Focus on **core functionality** and integrate with existing tools rather than reinventing the wheel.  
+
+Examples:  
+- Using **Apprise** for notifications instead of implementing multiple separate gateways  
+- Implementing **regex-based validation** instead of one-off validation for each setting  
+
+> [!NOTE]  
+> UI changes have lower priority. PRs are welcome, but please keep them **small and focused**.
 
 ## Development Environment Set Up
 
+>[!TIP]
+> There is also a ready to use [devcontainer](DEV_DEVCONTAINER.md) available.
+
+The following steps will guide you to set up your environment for local development and to run a custom docker build on your system. For most changes the container doesn't need to be rebuild which speeds up the development significantly.
+
+>[!NOTE]
+> Replace `/development` with the path where your code files will be stored. The default container name is `netalertx` so there might be a conflict with your running containers.
+
 ### 1. Download the code:
 
 - `mkdir /development`
@@ -84,14 +97,14 @@ Most code changes can be tested without rebuilding the container. When working o
 
 1. You can usually restart the backend via _Maintenance > Logs > Restart_ server
 
-![image](./img/DEV_ENV_SETUP/Maintenance_Logs_Restart_server.png)
+![image](./img/DEV/Maintenance_Logs_Restart_server.png)
 
 2. If above doesn't work, SSH into the container and kill & restart the main script loop 
 
 - `sudo docker exec -it netalertx /bin/bash`
 - `pkill -f "python /app/server" && python /app/server & `
 
-3. If none of the above work, restart the docker caontainer. 
+3. If none of the above work, restart the docker container. 
 
 - This is usually the last resort as sometimes the Docker engine becomes unresponsive and the whole engine needs to be restarted. 
 
@@ -119,3 +132,6 @@ Most code changes can be tested without rebuilding the container. When working o
 - Updating a Device
 - Plugin functionality.
 - Error log inspection.
+
+> [!NOTE]  
+> Always run all available tests as per the [Testing documentation](API_TESTS.md).

docs/DOCKER_COMPOSE.md

@@ -69,7 +69,7 @@ services:
     network_mode: "host"        
     restart: unless-stopped
     volumes:
-      - ${APP_DATA_LOCATION}/netalertx/config:/app/config
+      - ${APP_CONFIG_LOCATION}/netalertx/config:/app/config
       - ${APP_DATA_LOCATION}/netalertx/db/:/app/db/      
       # (optional) useful for debugging if you have issues setting up the container
       - ${LOGS_LOCATION}:/app/log
@@ -137,3 +137,67 @@ networks:
 
 
 ```
+
+### Example 5: same as 3 but with a top-level root directory; also works in Portainer as-is
+
+`docker-compose.yml` 
+
+```yaml
+services:
+  netalertx:
+    container_name: netalertx
+    # use the below line if you want to test the latest dev image instead of the stable release
+    # image: "ghcr.io/jokob-sk/netalertx-dev:latest" 
+    image: "ghcr.io/jokob-sk/netalertx:latest"      
+
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - ${APP_FOLDER}/netalertx/config:/app/config
+      - ${APP_FOLDER}/netalertx/db:/app/db     
+      # (optional) useful for debugging if you have issues setting up the container
+      - ${APP_FOLDER}/netalertx/log:/app/log
+      # (API: OPTION 1) default -> use for performance
+      - type: tmpfs
+        target: /app/api
+      # (API: OPTION 2) use when debugging issues 
+      # -  ${APP_FOLDER}/netalertx/api:/app/api
+    environment:
+
+      - TZ=${TZ}
+      - PORT=${PORT}
+      - PUID=${PUID}
+      - PGID=${PGID}
+      - LISTEN_ADDR=${LISTEN_ADDR}
+```
+
+`.env` file
+
+```yaml
+APP_FOLDER=/path/to/local/NetAlertX/location
+
+#ENVIRONMENT VARIABLES
+
+PUID=200
+PGID=300
+
+TZ=America/New_York
+LISTEN_ADDR=0.0.0.0
+PORT=20211
+#GLOBAL PATH VARIABLE
+
+# you may want to create a dedicated user and group to run the container with 
+# sudo groupadd -g 300 nax-g 
+# sudo useradd -u 200 -g 300 nax-u
+# mkdir -p $APP_FOLDER/{db,config,log} 
+# chown -R 200:300 $APP_FOLDER
+# chmod -R 775 $APP_FOLDER
+
+# DEVELOPMENT VARIABLES
+# you can create  multiple env files called .env.dev1, .env.dev2 etc and use them by running:
+# docker compose --env-file .env.dev1 up -d
+# you can then clone  multiple dev copies of NetAlertX just make sure to change the APP_FOLDER and PORT variables in each .env.devX file
+
+```
+
+To run the container execute: `sudo docker-compose --env-file /path/to/.env up`

docs/DOCKER_PORTAINER.md

@@ -0,0 +1,97 @@
+# Deploying NetAlertX in Portainer (via Stacks)
+
+This guide shows you how to set up **NetAlertX** using Portainer’s **Stacks** feature.
+
+![Portainer > Stacks](./img/DOCKER/DOCKER_PORTAINER.png)
+
+---
+
+## 1. Prepare Your Host
+
+Before deploying, make sure you have a folder on your Docker host for NetAlertX data. Replace `APP_FOLDER` with your preferred location, for example `/opt` here:
+
+```bash
+mkdir -p /opt/netalertx/config
+mkdir -p /opt/netalertx/db
+mkdir -p /opt/netalertx/log
+```
+
+---
+
+## 2. Open Portainer Stacks
+
+1. Log in to your **Portainer UI**.
+2. Navigate to **Stacks** → **Add stack**.
+3. Give your stack a name (e.g., `netalertx`).
+
+---
+
+## 3. Paste the Stack Configuration
+
+Copy and paste the following YAML into the **Web editor**:
+
+```yaml
+services:
+  netalertx:
+    container_name: netalertx
+
+    # Use this line for stable release
+    image: "ghcr.io/jokob-sk/netalertx:latest"      
+
+    # Or, use this for the latest development build
+    # image: "ghcr.io/jokob-sk/netalertx-dev:latest" 
+
+    network_mode: "host"
+    restart: unless-stopped
+
+    volumes:
+      - ${APP_FOLDER}/netalertx/config:/app/config
+      - ${APP_FOLDER}/netalertx/db:/app/db
+      # Optional: logs (useful for debugging setup issues, comment out for performance)
+      - ${APP_FOLDER}/netalertx/log:/app/log
+
+      # API storage options:
+      # (Option 1) tmpfs (default, best performance)
+      - type: tmpfs
+        target: /app/api
+
+      # (Option 2) bind mount (useful for debugging)
+      # - ${APP_FOLDER}/netalertx/api:/app/api
+
+    environment:
+      - TZ=${TZ}
+      - PORT=${PORT}
+      - APP_CONF_OVERRIDE=${APP_CONF_OVERRIDE}
+```
+
+---
+
+## 4. Configure Environment Variables
+
+In the **Environment variables** section of Portainer, add the following:
+
+* `APP_FOLDER=/opt` (or wherever you created the directories in step 1)
+* `TZ=Europe/Berlin` (replace with your timezone)
+* `PORT=22022` (or another port if needed)
+* `APP_CONF_OVERRIDE={"GRAPHQL_PORT":"22023"}` (optional advanced settings)
+
+---
+
+## 5. Deploy the Stack
+
+1. Scroll down and click **Deploy the stack**.
+2. Portainer will pull the image and start NetAlertX.
+3. Once running, access the app at:
+
+```
+http://<your-docker-host-ip>:22022
+```
+
+---
+
+## 6. Verify and Troubleshoot
+
+* Check logs via Portainer → **Containers** → `netalertx` → **Logs**.
+* Logs are stored under `${APP_FOLDER}/netalertx/log` if you enabled that volume.
+
+Once the application is running, configure it by reading the [initial setup](INITIAL_SETUP.md) guide, or [troubleshoot common issues](COMMON_ISSUES.md). 

docs/HW_INSTALL.md

@@ -5,51 +5,71 @@ To download and install NetAlertX on the hardware/server directly use the `curl`
 > [!NOTE]
 > This is an Experimental feature 🧪 and it relies on community support.
 >
-> 🙏 Looking for maintainers for this installation method 🙂 Curent community volunteers: 
+> 🙏 Looking for maintainers for this installation method 🙂 Current community volunteers: 
 >   - [slammingprogramming](https://github.com/slammingprogramming)
+>   - [ingoratsdorf](https://github.com/ingoratsdorf)
 >
 > There is no guarantee that the install script or any other script will gracefully handle other installed software.
 > Data loss is a possibility, **it is recommended to install NetAlertX using the supplied Docker image**.
 
-A warning to the installation method below: Piping to bash is [controversial](https://pi-hole.net/2016/07/25/curling-and-piping-to-bash) and may
+> [!WARNING]
+> A warning to the installation method below: Piping to bash is [controversial](https://pi-hole.net/2016/07/25/curling-and-piping-to-bash) and may
 be dangerous, as you cannot see the code that's about to be executed on your system.
 
-Alternatively you can download the installation script `install/install.debian.sh` from the repository and check the code yourself (beware other scripts are
-downloaded too - only from this repo).
+If you trust this repo, you can download the install script via one of the methods (curl/wget) below and it will fo its best to install NetAlertX on your system.
+
+Alternatively you can download the installation script from the repository and check the code yourself.
 
 NetAlertX will be installed in `/app` and run on port number `20211`.
 
 Some facts about what and where something will be changed/installed by the HW install setup (may not contain everything!):
 
+- dependencies will be installed from the respective system repos
+- required python modules will be installed
 - `/app` directory will be deleted and newly created
-- `/app` will contain the whole repository (downloaded by `install/install.debian.sh`)
+- `/app` will contain the whole repository (downloaded by the install script)
 - The default NGINX site `/etc/nginx/sites-enabled/default` will be disabled (sym-link deleted or backed up to `sites-available`)
 - `/var/www/html/netalertx` directory will be deleted and newly created
-- `/etc/nginx/conf.d/netalertx.conf` will be sym-linked to `/app/install/netalertx.debian.conf`
+- `/etc/nginx/conf.d/netalertx.conf` will be sym-linked to the appropriate installer location (depending on your system installer script)
 - Some files (IEEE device vendors info, ...) will be created in the directory where the installation script is executed
 
 ## Limitations
 
-- No system service is provided. NetAlertX must be started using `/app/install/start.debian.sh`.
+- No system service is provided. NetAlertX must be started using `/app/install/<system>/start.<system>.sh`.
 - No checks for other running software is done.
-- Only tested to work on Debian Bookworm (Debian 12).
+- Only tested to work on the system listed in the install directory.
 - **EXPERIMENTAL** and not recommended way to install NetAlertX.
 
-## 📥 Installation via CURL
-
 > [!TIP]  
 > If the below fails try grabbing and installing one of the [previous releases](https://github.com/jokob-sk/NetAlertX/releases) and run the installation from the zip package.
 
-```bash
-curl -o install.debian.sh https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/install/install.debian.sh && sudo chmod +x install.debian.sh && sudo ./install.debian.sh
-```
-
-## 📥 Installation via WGET
-
-```bash
-wget https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/install/install.debian.sh -O install.debian.sh && sudo chmod +x install.debian.sh && sudo ./install.debian.sh
-```
-
-These commands will download the `install.debian.sh` script from the GitHub repository, make it executable with `chmod`, and then run it using `./install.debian.sh`.
+These commands will download the `install.debian12.sh` script from the GitHub repository, make it executable with `chmod`, and then run it using `./install.debian12.sh`.
 
 Make sure you have the necessary permissions to execute the script.
+
+
+## 📥 Debian 12 (Bookworm)
+
+### Installation via curl
+```bash
+curl -o install.debian12.sh https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/install/debian12/install.debian12.sh && sudo chmod +x install.debian12.sh && sudo ./install.debian12.sh
+```
+
+### Installation via wget
+
+```bash
+wget https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/install/debian12/install.debian12.sh -O install.debian12.sh && sudo chmod +x install.debian12.sh && sudo ./install.debian12.sh
+```
+
+## 📥 Ubuntu 24 (Noble Numbat)
+
+### Installation via curl
+```bash
+curl -o install.ubuntu24.sh https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/install/ubuntu24/install.ubuntu24.sh && sudo chmod +x install.ubuntu24.sh && sudo ./install.ubuntu24.sh
+```
+
+### Installation via wget
+
+```bash
+wget https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/install/ubuntu24/install.ubuntu24.sh -O install.ubuntu24.sh && sudo chmod +x install.ubuntu24.sh && sudo ./install.ubuntu24.sh
+```

docs/NETWORK_TREE.md

@@ -1,63 +1,110 @@
-## How to setup your Network page
+## How to Set Up Your Network Page
 
-Make sure you have a root device with the MAC `Internet` (No other MAC addresses are currently supported as the root node) set to a network device type (e.g.: **Type**:`Router`).
+The **Network** page lets you map how devices connect — visually and logically.  
+It’s especially useful for planning infrastructure, assigning parent-child relationships, and spotting gaps.
 
-> 💡 Tip: You can add dummy devices via the [Create dummy device](./DEVICE_MANAGEMENT.md#dummy-devices) button in the Devices listing page.
+![Network tree details](./img/NETWORK_TREE/Network_Sample.png)
 
-> 💡 Tip: Export your configuration of the Network and Devices once in a while via the Export CSV feature under **Maintenance** -> **Backup/Restore** -> **CSV Export**.   
+To get started, you’ll need to define at least one root node and mark certain devices as network nodes (like Switches or Routers).
 
-## ⚡Quick setup:
+---
 
-* Go to a Device you want to use as network device (network nodes, such as a Switch). 
-* Set the **Type** of such a device to one of the following: AP, Firewall, Gateway, PLC, Powerline, Router, Switch, USB LAN Adapter, USB WIFI Adapter and WLAN (you can create a custom network type device with in Settings -> General -> `NETWORK_DEVICE_TYPES`).
-* Save and go to Network where the devices you've marked as network devices (by selecting the Type as mentioned above) will show up as tabs.
-* You can now assign the Unassigend devices to the network node.
-* If port is empty or 0 a wifi icon is rendered, otherwise a ethernet port icon.
+Start by creating a root device with the MAC address `Internet`, if the application didn’t create one already.  
+This special MAC address (`Internet`) is required for the root network node — no other value is currently supported.  
+Set its **Type** to a valid network type — such as `Router` or `Gateway`.
 
+> [!TIP]  
+> If you don’t have one, use the [Create new device](./DEVICE_MANAGEMENT.md#dummy-devices) button on the **Devices** page to add a root device.
 
-> [!NOTE] 
->
-> [Bulk-edit devices](./DEVICES_BULK_EDITING.md) by using the _CSV Export_ functionality in the _Maintenance_ section. You can use this to fix `Internet` node assignment issues. 
+---
 
-## 🔍Detailed example:
+## ⚡ Quick Setup
 
-In this example you will setup a device named `rapberrypi` as a `Switch` in our network. 
+1. Open the device you want to use as a network node (e.g. a Switch).
+2. Set its **Type** to one of the following:  
+   `AP`, `Firewall`, `Gateway`, `PLC`, `Powerline`, `Router`, `Switch`, `USB LAN Adapter`, `USB WIFI Adapter`, `WLAN`  
+   *(Or add custom types under **Settings → General → `NETWORK_DEVICE_TYPES`**.)*
+3. Save the device.
+4. Go to the **Network** page — supported device types will appear as tabs.
+5. Use the **Assign** button to connect unassigned devices to a network node.
+6. If the **Port** is `0` or empty, a Wi-Fi icon is shown. Otherwise, an Ethernet icon appears.
 
-### 1. Device details page
+> [!NOTE]  
+> Use [bulk editing](./DEVICES_BULK_EDITING.md) with _CSV Export_ to fix `Internet` root assignments or update many devices at once.
 
-- Go to the `Devices` (1) page:
+---
 
-![Device details](./img/NETWORK_TREE/Device_Details_Network_Type.png)
+## Example: Setting up a `raspberrypi` as a Switch
 
-- In the (2) `Details` tab navigate to the the `Type` (3) dropdown and select the type `Switch` (4).
+Let’s walk through setting up a device named `raspberrypi` to act as a network Switch that other devices connect through.
 
-> Note: Only the following device types will show up as selectable Network nodes ( = devices you can connect other devices to):
-> AP, Firewall, Gateway, Hypervisor, PLC, Powerline, Router, Switch, USB LAN Adapter, USB WIFI Adapter and WLAN. Custom types can be added via the `NETWORK_DEVICE_TYPES` setting.
+---
 
-- Assign a device to your root device from the `Node` (5) dropdown which has the MAC `Internet` (6) (Your name may differ, but the MAC needs to be set to `Internet` - this is done by default). 
+### 1. Set Device Type and Parent
 
-- Save your changes (7)
+- Go to the **Devices** page  
+- Open the device detail view for `raspberrypi`
+- In the **Type** dropdown, select `Switch`
 
-### 2. Network page
+![Device details](./img/NETWORK_TREE/Network_Device_Details.png)
 
-- Navigate to your `Network` (1) page:
+- Optionally assign a **Parent Node** (where this device connects to) and the **Relationship type** of the connection.  
+  The `nic` relationship type can affect parent notifications — see the setting description and [Notifications documentation](./NOTIFICATIONS.md) for more.
 
-![Network page](./img/NETWORK_TREE/Network_Page.png)
+![Device details](./img/NETWORK_TREE/Network_Device_Details_Parent.png)  
 
-- Notice the newly added `raspberrypi` (2) tab which now represents a network node, also showing up in the tree (3).
-- As we asssigned the `raspberrypi` in the previous (1) Device details page section to the `Internet` parent network node in step (6), the link is also showing up in the tree diagram (4)
-- We can now assign the device `(AppleTV)` (5) to this `raspberrypi` node, representing a network Switch in this example
+> [!NOTE]  
+> Only certain device types can act as network nodes:  
+> `AP`, `Firewall`, `Gateway`, `Hypervisor`, `PLC`, `Powerline`, `Router`, `Switch`, `USB LAN Adapter`, `USB WIFI Adapter`, `WLAN`  
+> You can add custom types via the `NETWORK_DEVICE_TYPES` setting.
 
-### 3. Network page with 2 levels
+- Click **Save**
 
-- After clicking the `Assign` button in the previous section, the `(AppleTV)` (1) device is now connected to our `raspberrypi` (2).
+---
 
-![Network page with 2 levels](./img/NETWORK_TREE/Network_Page_2_Levels.png)
+### 2. Confirm The Device Appears as a Network Node
 
-- You can see the `raspberrypi` represents the Network node type `Switch` (3)
-- The `(AppleTV)` to `raspberrypi` connection is also displayed in the table of `Connected devices` (4).
-- You can also see that our `raspberrypi` node is connected to it's Parent network device node with the MAC `Internet` (5). This connection again shows up in the tree (6) as well.
+You can confirm that `raspberrypi` now acts as a network device in two places:
 
+- Navigate to a different device and verify that `raspberrypi` now appears as an option for a **Parent Node**:
 
+![Parent Node dropdown](./img/NETWORK_TREE/Network_Device_ParentDropdown.png)
 
+- Go to the **Network** page — you'll now see a `raspberrypi` tab, meaning it's recognized as a network node (Switch):
 
+![Network page](./img/NETWORK_TREE/Network_Assign.png)
+
+- You can now assign other devices to it.
+
+---
+
+### 3. Assign Connected Devices
+
+- Use the **Assign** button to link other devices (e.g. PCs) to `raspberrypi`.
+- After assigning, connected devices will appear beneath the `raspberrypi` switch node.  
+
+![Assigned nodes](./img/NETWORK_TREE/Network_Assigned_Nodes.png)
+
+- Relationship lines may vary in color based on the selected Relationship type. These are editable on the device details page where you can also assign a parent node.
+
+![Hover detail](./img/NETWORK_TREE/Network_tree_setup_hover.png)
+
+> Hovering over devices in the tree reveals connection details and tooltips for quick inspection.
+
+> [!NOTE]
+> Selecting certain relationship types hides the device in the default device views.  
+> You can change this behavior by adjusting the `UI_hide_rel_types` setting, which by default is set to `["nic","virtual"]`.  
+> This means devices with `devParentRelType` set to `nic` or `virtual` will not be shown.  
+> All devices, regardless of relationship type, are always accessible in the **All devices** view.
+
+---
+
+## ✅ Summary
+
+To configure devices on the **Network** page:
+
+- Ensure a device with MAC `Internet` is set up as the root
+- Assign valid **Type** values to switches, routers, and other supported nodes that represent network devices
+- Use the **Assign** button to connect devices logically to their parent node
+
+Need to reset or undo changes? [Use backups](./BACKUPS.md) or [bulk editing](./DEVICES_BULK_EDITING.md) to manage devices at scale. You can also automate device assignment with [Workflows](./WORKFLOWS.md).

docs/NOTIFICATIONS.md

@@ -15,11 +15,12 @@ There are 4 ways how to influence notifications:
 
 ![Device notification settings](./img/NOTIFICATIONS/Device-notification-settings.png)
 
-There are 4 settings on the device for influencing notifications. You can:
+The following device properties influence notifications. You can:
 
 1. **Alert Events** - Enables alerts of connections, disconnections, IP changes (down and down reconnected notifications are still sent even if this is disabled).
 2. **Alert Down** - Alerts when a device goes down. This setting overrides a disabled **Alert Events** setting, so you will get a notification of a device going down even if you don't have **Alert Events** ticked. Disabling this will disable down and down reconnected notifications on the device.
 3. **Skip repeated notifications**, if for example you know there is a temporary issue and want to pause the same notification for this device for a given time.
+4. **Require NICs Online** - Indicates whether this device should be considered online only if all associated NICs (devices with the `nic` relationship type) are online. If disabled, the device is considered online if any NIC is online. If a NIC is online it sets the parent (this) device's status to online irrespectivelly of the detected device's status. The Relationship type is set on the childern device.
 
 > [!NOTE]
 > Please read through the [NTFPRCS plugin](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/notification_processing/README.md) documentation to understand how device and global settings influence the notification processing. 

docs/PLUGINS.md

@@ -43,51 +43,51 @@ NetAlertX supports additional plugins to extend its functionality, each with its
  
 Device-detecting plugins insert values into the `CurrentScan` database table.  The plugins that are not required are safe to ignore, however, it makes sense to have at least some device-detecting plugins enabled, such as `ARPSCAN` or `NMAPDEV`. 
 
-
-| ID            | Type    | Description                                | Features | Required | Data source  | Detailed docs                                                       |
-|---------------|---------|--------------------------------------------|----------|----------|--------------|---------------------------------------------------------------------|
-| `APPRISE`     | ▶️      | Apprise notification proxy                |           |          | Script       | [_publisher_apprise](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_apprise/)          |
-| `ARPSCAN`     | 🔍      | ARP-scan on current network               |           |          | Script       | [arp_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/arp_scan/)                              |
-| `AVAHISCAN`   | 🆎      | Avahi (mDNS-based) name resolution        |           |          | Script       | [avahi_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/avahi_scan/)                          |
-| `ASUSWRT`     | 🔍       | Import connected devices from AsusWRT    |           |          | Script       | [asuswrt_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/asuswrt_import/)                  |
-| `CSVBCKP`     | ⚙       | CSV devices backup                        |           |          | Script       | [csv_backup](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/csv_backup/)                          |
-| `CUSTPROP`    | ⚙       | Managing custom device properties values  |           |  Yes     | Template     | [custom_props](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/custom_props/)                      |
-| `DBCLNP`      | ⚙       | Database cleanup                          |           |  Yes*    | Script       | [db_cleanup](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/db_cleanup/)                          |
-| `DDNS`        | ⚙       | DDNS update                               |           |          | Script       | [ddns_update](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/ddns_update/)                        |
-| `DHCPLSS`     | 🔍/📥/🆎| Import devices from DHCP leases          |           |          | Script       | [dhcp_leases](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_leases/)                        |
-| `DHCPSRVS`    | ♻       | DHCP servers                              |           |          | Script       | [dhcp_servers](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_servers/)                      |
-| `DIGSCAN`    | 🆎       | Dig (DNS) Name resolution                 |           |          | Script       | [dig_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dig_scan/)                      |
-| `FREEBOX`     | 🔍/♻/🆎| Pull data and names from Freebox/Iliadbox |          |          | Script       | [freebox](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/freebox/)                                 |
-| `ICMP`        | ♻      | ICMP (ping) status checker                |           |          | Script       | [icmp_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/icmp_scan/)                            |
-| `INTRNT`      | 🔍      | Internet IP scanner                       |           |          | Script       | [internet_ip](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/internet_ip/)                        |
-| `INTRSPD`     | ♻       | Internet speed test                       |           |          | Script       | [internet_speedtest](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/internet_speedtest/)          |
-| `IPNEIGH`     | 🔍       | Scan ARP (IPv4) and NDP (IPv6) tables    |           |          | Script       | [ipneigh](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/ipneigh/)                                |
-| `LUCIRPC`     | 🔍       | Import connected devices from OpenWRT    |           |          | Script       | [luci_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/luci_import/)                        |
-| `MAINT`       | ⚙       | Maintenance of logs, etc.                 |           |          | Script       | [maintenance](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/maintenance/)                        |
-| `MQTT`        | ▶️      | MQTT for synching to Home Assistant       |           |          | Script       | [_publisher_mqtt](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_mqtt/)                |
-| `NBTSCAN`     | 🆎       | Nbtscan (NetBIOS-based) name resolution  |           |          | Script       | [nbtscan_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nbtscan_scan/)                      |
-| `NEWDEV`      | ⚙       | New device template                       |           |  Yes     | Template     | [newdev_template](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/newdev_template/)                |
-| `NMAP`        | ♻       | Nmap port scanning & discovery            |           |          | Script       | [nmap_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nmap_scan/)                            |
-| `NMAPDEV`     | 🔍      | Nmap dev scan on current network          |           |          | Script       | [nmap_dev_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nmap_dev_scan/)                    |
-| `NSLOOKUP`    | 🆎       | NSLookup (DNS-based) name resolution     |           |          | Script       | [nslookup_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nslookup_scan/)                    |
-| `NTFPRCS`     | ⚙       | Notification processing                   |           |  Yes     | Template     | [notification_processing](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/notification_processing/)|
-| `NTFY`        | ▶️      | NTFY notifications                        |           |          | Script       | [_publisher_ntfy](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_ntfy/)                |
-| `OMDSDN`      | 📥/🆎 ❌  |  UNMAINTAINED use `OMDSDNOPENAPI`        |   🖧 🔄  |          | Script       | [omada_sdn_imp](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/omada_sdn_imp/)                    |
-| `OMDSDNOPENAPI`| 📥/🆎   | OMADA TP-Link import via OpenAPI       |   🖧      |          | Script       | [omada_sdn_openapi](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/omada_sdn_openapi/)                    |
-| `PIHOLE`      | 🔍/🆎/📥| Pi-hole device import & sync             |           |          | SQLite DB    | [pihole_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/pihole_scan/)                        |
-| `PUSHSAFER`   | ▶️      | Pushsafer notifications                   |           |          | Script       | [_publisher_pushsafer](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_pushsafer/)      |
-| `PUSHOVER`    | ▶️      | Pushover notifications                    |           |          | Script       | [_publisher_pushover](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_pushover/)        |
-| `SETPWD`      | ⚙       | Set password                              |           |  Yes     | Template     | [set_password](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/set_password/)                      |
-| `SMTP`        | ▶️      | Email notifications                       |           |          | Script       | [_publisher_email](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_email/)              |
-| `SNMPDSC`     | 🔍/📥   | SNMP device import & sync                 |           |          | Script       | [snmp_discovery](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/snmp_discovery/)                  |
-| `SYNC`        | 🔍/⚙/📥| Sync & import from NetAlertX instances    |   🖧 🔄   | Yes     | Script        | [sync](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/sync/)                                      |
-| `TELEGRAM`    | ▶️      | Telegram notifications                    |           |          | Script       | [_publisher_telegram](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_telegram/)        |
-| `UI`          | ♻       | UI specific settings                      |           |  Yes     | Template     | [ui_settings](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/ui_settings/)                        |
-| `UNFIMP`      | 🔍/📥/🆎| UniFi device import & sync               |  🖧       |          | Script       | [unifi_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/unifi_import/)                      |
-| `VNDRPDT`     | ⚙       | Vendor database update                    |           |          | Script       | [vendor_update](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/vendor_update/)                    |
-| `WEBHOOK`     | ▶️      | Webhook notifications                     |           |          | Script       | [_publisher_webhook](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_webhook/)          |
-| `WEBMON`      | ♻       | Website down monitoring                   |           |          | Script       | [website_monitor](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/website_monitor/)                |
-| `WOL`         | ♻       | Automatic wake-on-lan                     |           |          | Script       | [wake_on_lan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/wake_on_lan/)                        |
+| ID              | Plugin docs                                                                                                      | Type     | Description                               | Features | Required |
+| --------------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------------------------- | -------- | -------- |
+| `APPRISE`       | [_publisher_apprise](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_apprise/)          | ▶️       | Apprise notification proxy                |          |          |
+| `ARPSCAN`       | [arp_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/arp_scan/)                               | 🔍       | ARP-scan on current network               |          |          |
+| `AVAHISCAN`     | [avahi_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/avahi_scan/)                           | 🆎       | Avahi (mDNS-based) name resolution        |          |          |
+| `ASUSWRT`       | [asuswrt_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/asuswrt_import/)                   | 🔍       | Import connected devices from AsusWRT     |          |          |
+| `CSVBCKP`       | [csv_backup](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/csv_backup/)                           | ⚙        | CSV devices backup                        |          |          |
+| `CUSTPROP`      | [custom_props](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/custom_props/)                       | ⚙        | Managing custom device properties values  |          | Yes      |
+| `DBCLNP`        | [db_cleanup](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/db_cleanup/)                           | ⚙        | Database cleanup                          |          | Yes\*    |
+| `DDNS`          | [ddns_update](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/ddns_update/)                         | ⚙        | DDNS update                               |          |          |
+| `DHCPLSS`       | [dhcp_leases](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_leases/)                         | 🔍/📥/🆎 | Import devices from DHCP leases           |          |          |
+| `DHCPSRVS`      | [dhcp_servers](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_servers/)                       | ♻        | DHCP servers                              |          |          |
+| `DIGSCAN`       | [dig_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dig_scan/)                               | 🆎       | Dig (DNS) Name resolution                 |          |          |
+| `FREEBOX`       | [freebox](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/freebox/)                                  | 🔍/♻/🆎  | Pull data and names from Freebox/Iliadbox |          |          |
+| `ICMP`          | [icmp_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/icmp_scan/)                             | ♻        | ICMP (ping) status checker                |          |          |
+| `INTRNT`        | [internet_ip](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/internet_ip/)                         | 🔍       | Internet IP scanner                       |          |          |
+| `INTRSPD`       | [internet_speedtest](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/internet_speedtest/)           | ♻        | Internet speed test                       |          |          |
+| `IPNEIGH`       | [ipneigh](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/ipneigh/)                                  | 🔍       | Scan ARP (IPv4) and NDP (IPv6) tables     |          |          |
+| `LUCIRPC`       | [luci_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/luci_import/)                         | 🔍       | Import connected devices from OpenWRT     |          |          |
+| `MAINT`         | [maintenance](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/maintenance/)                          | ⚙        | Maintenance of logs, etc.                 |          |          |
+| `MQTT`          | [_publisher_mqtt](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_mqtt/)                | ▶️       | MQTT for synching to Home Assistant       |          |          |
+| `NBTSCAN`       | [nbtscan_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nbtscan_scan/)                       | 🆎       | Nbtscan (NetBIOS-based) name resolution   |          |          |
+| `NEWDEV`        | [newdev_template](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/newdev_template/)                 | ⚙        | New device template                       |          | Yes      |
+| `NMAP`          | [nmap_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nmap_scan/)                             | ♻        | Nmap port scanning & discovery            |          |          |
+| `NMAPDEV`       | [nmap_dev_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nmap_dev_scan/)                    | 🔍       | Nmap dev scan on current network          |          |          |
+| `NSLOOKUP`      | [nslookup_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nslookup_scan/)                     | 🆎       | NSLookup (DNS-based) name resolution      |          |          |
+| `NTFPRCS`       | [notification_processing](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/notification_processing/) | ⚙        | Notification processing                   |          | Yes      |
+| `NTFY`          | [_publisher_ntfy](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_ntfy/)                | ▶️       | NTFY notifications                        |          |          |
+| `OMDSDN`        | [omada_sdn_imp](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/omada_sdn_imp/)                    | 📥/🆎 ❌  | UNMAINTAINED use `OMDSDNOPENAPI`          | 🖧 🔄    |          |
+| `OMDSDNOPENAPI` | [omada_sdn_openapi](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/omada_sdn_openapi/)            | 📥/🆎    | OMADA TP-Link import via OpenAPI          | 🖧       |          |
+| `PIHOLE`        | [pihole_scan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/pihole_scan/)                         | 🔍/🆎/📥 | Pi-hole device import & sync              |          |          |
+| `PUSHSAFER`     | [_publisher_pushsafer](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_pushsafer/)      | ▶️       | Pushsafer notifications                   |          |          |
+| `PUSHOVER`      | [_publisher_pushover](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_pushover/)        | ▶️       | Pushover notifications                    |          |          |
+| `SETPWD`        | [set_password](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/set_password/)                       | ⚙        | Set password                              |          | Yes      |
+| `SMTP`          | [_publisher_email](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_email/)              | ▶️       | Email notifications                       |          |          |
+| `SNMPDSC`       | [snmp_discovery](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/snmp_discovery/)                   | 🔍/📥    | SNMP device import & sync                 |          |          |
+| `SYNC`          | [sync](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/sync/)                                      | 🔍/⚙/📥  | Sync & import from NetAlertX instances    | 🖧 🔄    | Yes      |
+| `TELEGRAM`      | [_publisher_telegram](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_telegram/)        | ▶️       | Telegram notifications                    |          |          |
+| `UI`            | [ui_settings](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/ui_settings/)                         | ♻        | UI specific settings                      |          | Yes      |
+| `UNFIMP`        | [unifi_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/unifi_import/)                       | 🔍/📥/🆎 | UniFi device import & sync                | 🖧       |          |
+| `UNIFIAPI`      | [unifi_api_import](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/unifi_api_import/)               | 🔍/📥/🆎 | UniFi device import (SM API, multi-site) |           |         |
+| `VNDRPDT`       | [vendor_update](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/vendor_update/)                     | ⚙        | Vendor database update                    |          |          |
+| `WEBHOOK`       | [_publisher_webhook](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_webhook/)          | ▶️       | Webhook notifications                     |          |          |
+| `WEBMON`        | [website_monitor](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/website_monitor/)                 | ♻        | Website down monitoring                   |          |          |
+| `WOL`           | [wake_on_lan](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/wake_on_lan/)                        | ♻        | Automatic wake-on-lan                     |          |          |
 
 
 > \* The database cleanup plugin (`DBCLNP`) is not _required_ but the app will become unusable after a while if not executed.

docs/PLUGINS_DEV.md

@@ -10,6 +10,9 @@ NetAlertX comes with a plugin system to feed events from third-party scripts int
 
 > (Currently, update/overwriting of existing objects is only supported for devices via the `CurrentScan` table.)
 
+> [!NOTE]
+> For a high-level overview of how the `config.json` is used and it's lifecycle check the [config.json Lifecycle in NetAlertX Guide](PLUGINS_DEV_CONFIG.md).
+
 ### 🎥 Watch the video:
 
 > [!TIP]

docs/PLUGINS_DEV_CONFIG.md

@@ -0,0 +1,146 @@
+## config.json Lifecycle in NetAlertX
+
+This document describes on a high level how `config.json` is read, processed, and used by the NetAlertX core and plugins. It also outlines the plugin output contract and the main plugin types.
+
+> [!NOTE]
+> For a deep-dive on the specific configuration options and sections of the `config.json` plugin manifest, consult the [Plugins Development Guide](PLUGINS_DEV.md).
+
+---
+
+### 1. Loading
+
+* On startup, the app core loads `config.json` for each plugin.
+* The `config.json` represents a plugin manifest, that contains metadata and runtime settings.
+
+---
+
+### 2. Validation
+
+* The core checks that each required settings key (such as `RUN`) for a plugin exists.
+* Invalid or missing values may be replaced with defaults, or the plugin may be disabled.
+
+---
+
+### 3. Preparation
+
+* The plugin’s settings (paths, commands, parameters) are prepared.
+* Database mappings (`mapped_to_table`, `database_column_definitions`) for data ingestion into the core app are parsed.
+
+---
+
+### 4. Execution
+
+* Plugins can be run at different core app execution points, such as on schedule, once on start, after a notification, etc. 
+* At runtime, the scheduler triggers plugins according to their `interval`.
+* The plugin executes its command or script.
+
+---
+
+### 5. Parsing
+
+* Plugin output is expected in **pipe (`|`)-delimited format**.
+* The core parses lines into fields, matching the **plugin interface contract**.
+
+---
+
+### 6. Mapping
+
+* Each parsed field is moved into the `Plugins_` database tables and can be mapped into a configured database table.
+* Controlled by `database_column_definitions` and `mapped_to_table`.
+* Example: `Object_PrimaryID → Devices.MAC`.
+
+---
+
+### 6a. Plugin Output Contract
+
+Each plugin must output results in the **plugin interface contract format**, pipe (`|`)-delimited values, in the column order described under [Plugin Interface Contract](PLUGINS_DEV.md)
+
+#### IDs
+
+  * `Object_PrimaryID` and `Object_SecondaryID` identify the record (e.g. `MAC|IP`).
+
+#### **Watched values (`Watched_Value1–4`)**
+
+  * Used by the core to detect changes between runs.
+  * Changes here can trigger **notifications**.
+
+#### **Extra value (`Extra`)**
+
+  * Optional, extra field.
+  * Stored in the database but **not used for alerts**.
+
+#### **Helper values (`Helper_Value1–3`)**
+
+  * Added for cases where more than IDs + watched + extra are needed.
+  * Can be made visible in the UI.
+  * Stored in the database but **not used for alerts**.
+
+#### **Mapping matters**
+
+  * While the plugin output is free-form, the `database_column_definitions` and `mapped_to_table` settings in `config.json` determine the **target columns and data types** in NetAlertX.
+
+---
+
+### 7. Persistence
+
+* Data is upserted into the database.
+* Conflicts are resolved using `Object_PrimaryID` + `Object_SecondaryID`.
+
+---
+
+### 8. Plugin Types and Expected Outputs
+
+Beyond the `data_source` setting, plugins fall into functional categories. Each has its own input requirements and output expectations:
+
+#### **Device discovery plugins**
+
+  * **Inputs:** `N/A`, subnet, or API for discovery service, or similar.
+  * **Outputs:** At minimum `MAC` and `IP` that results in a new or updated device records in the `Devices` table.
+  * **Mapping:** Must be mapped to the `CurrentScan` table via `database_column_definitions` and `data_filters`.
+  * **Examples:** ARP-scan, NMAP device discovery (e.g., `ARPSCAN`, `NMAPDEV`).
+
+#### **Device-data enrichment plugins**
+
+  * **Inputs:** Device identifier (usually `MAC`, `IP`).
+  * **Outputs:** Additional data for that device (e.g. open ports).
+  * **Mapping:** Controlled via `database_column_definitions` and `data_filters`.
+  * **Examples:** Ports, MQTT messages (e.g., `NMAP`, `MQTT`)
+
+#### **Name resolver plugins**
+
+  * **Inputs:** Device identifiers (MAC, IP, or hostname).
+  * **Outputs:** Updated `devName` and `devFQDN` fields.
+  * **Mapping:** Not expected.
+  * **Note:** Currently requires **core app modification** to add new plugins, not fully driven by the plugins’ `config.json`.
+  * **Examples:** Avahiscan (e.g., `NBTSCAN`, `NSLOOKUP`).
+
+#### **Generic plugins**
+
+  * **Inputs:** Whatever the script or query provides.
+  * **Outputs:** Data shown only in **Integrations → Plugins**, not tied to devices.
+  * **Mapping:** Not expected.
+  * **Examples:** External monitoring data (e.g., `INTRSPD`)
+
+#### **Configuration-only plugins**
+
+  * **Inputs/Outputs:** None at runtime.
+  * **Mapping:** Not expected. 
+  * **Examples:** Used to provide additional settings or execute scripts (e.g., `MAINT`, `CSVBCKP`).
+
+---
+
+### 9. Post-Processing
+
+* Notifications are generated if watched values change.
+* UI is updated with new or updated records.
+* All values that are configured to be shown in teh UI appear in the Plugins section.
+
+---
+
+### 10. Summary
+
+The lifecycle of `config.json` entries is:
+
+**Load → Validate → Prepare → Execute → Parse → Map → Persist → Post-process**
+
+Plugins must follow the **output contract**, and their category (discovery, specific, resolver, generic, config-only) defines what inputs they require and what outputs are expected.

docs/REVERSE_PROXY.md

@@ -2,9 +2,13 @@
 
 > Submitted by amazing [cvc90](https://github.com/cvc90) 🙏
 
-
 > [!NOTE] 
-> There are 2 NGINX files for NetAlertX, one for the bare-metal Debian install (`netalertx.debian.conf`), and one for the docker container (`netalertx.template.conf`). Both can be found in the [install](https://github.com/jokob-sk/NetAlertX/tree/main/install) folder. Map, or use, the one appropriate for your setup. 
+> There are various NGINX config files for NetAlertX, some for the bare-metal install, currently Debian 12 and Ubuntu 24 (`netalertx.conf`), and one for the docker container (`netalertx.template.conf`).
+> 
+> The first one you can find in the respective bare metal installer folder `/app/install/\<system\>/netalertx.conf`.
+> The docker one can be found in the [install](https://github.com/jokob-sk/NetAlertX/tree/main/install) folder. Map, or use, the one appropriate for your setup.
+
+<br/>
 
 ## NGINX HTTP Configuration (Direct Path)
 
@@ -26,9 +30,11 @@
 
    `nginx -s reload` or `systemctl restart nginx`
 
-4. Once NGINX restarts, you should be able to access the proxy website at http://netalertx/
+4. Check your config with `nginx -t`. If there are any issues, it will tell you.
 
-<br>
+5. Once NGINX restarts, you should be able to access the proxy website at http://netalertx/
+
+<br/>
 
 ## NGINX HTTP Configuration (Sub Path)
 
@@ -50,13 +56,15 @@
     }
 ``` 
 
-3. Activate the new website by running the following command:
+3. Check your config with `nginx -t`. If there are any issues, it will tell you.
+
+4. Activate the new website by running the following command:
 
    `nginx -s reload` or `systemctl restart nginx`
 
-4. Once NGINX restarts, you should be able to access the proxy website at http://netalertx/netalertx/
+5. Once NGINX restarts, you should be able to access the proxy website at http://netalertx/netalertx/
 
-<br>
+<br/>
 
 ## NGINX HTTP Configuration (Sub Path) with module ngx_http_sub_module
 
@@ -86,13 +94,15 @@
     }
 ``` 
 
-3. Activate the new website by running the following command:
+3. Check your config with `nginx -t`. If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
    `nginx -s reload` or `systemctl restart nginx`
 
-4. Once NGINX restarts, you should be able to access the proxy website at http://netalertx/netalertx/
+5. Once NGINX restarts, you should be able to access the proxy website at http://netalertx/netalertx/
 
-<br>
+<br/>
 
 **NGINX HTTPS Configuration (Direct Path)**
 
@@ -113,13 +123,15 @@
     }
 ``` 
 
-3. Activate the new website by running the following command:
+3. Check your config with `nginx -t`. If there are any issues, it will tell you.
+
+4. Activate the new website by running the following command:
 
    `nginx -s reload` or `systemctl restart nginx`
 
-4. Once NGINX restarts, you should be able to access the proxy website at https://netalertx/
+5. Once NGINX restarts, you should be able to access the proxy website at https://netalertx/
 
-<br>
+<br/>
 
 **NGINX HTTPS Configuration (Sub Path)**
 
@@ -143,13 +155,15 @@
     }
 ``` 
 
-3. Activate the new website by running the following command:
+3. Check your config with `nginx -t`. If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
    `nginx -s reload` or `systemctl restart nginx`
 
-4. Once NGINX restarts, you should be able to access the proxy website at https://netalertx/netalertx/
+5. Once NGINX restarts, you should be able to access the proxy website at https://netalertx/netalertx/
 
-<br>
+<br/>
 
 ## NGINX HTTPS Configuration (Sub Path) with module ngx_http_sub_module
 
@@ -181,13 +195,15 @@
     }
 ``` 
 
-3. Activate the new website by running the following command:
+3. Check your config with `nginx -t`. If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
    `nginx -s reload` or `systemctl restart nginx`
 
-4. Once NGINX restarts, you should be able to access the proxy website at https://netalertx/netalertx/
+5. Once NGINX restarts, you should be able to access the proxy website at https://netalertx/netalertx/
 
-<br>
+<br/>
 
 ## Apache HTTP Configuration (Direct Path)
 
@@ -204,13 +220,15 @@
     </VirtualHost>
 ``` 
 
-3. Activate the new website by running the following command:
+3. Check your config with `httpd -t` (or `apache2ctl -t` on Debian/Ubuntu). If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
    `a2ensite netalertx` or `service apache2 reload`
 
-4. Once Apache restarts, you should be able to access the proxy website at http://netalertx/
+5. Once Apache restarts, you should be able to access the proxy website at http://netalertx/
 
-<br>
+<br/>
 
 ## Apache HTTP Configuration (Sub Path)
 
@@ -229,13 +247,15 @@
     </VirtualHost>
 ```   
 
-3. Activate the new website by running the following command:
+3. Check your config with `httpd -t` (or `apache2ctl -t` on Debian/Ubuntu). If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
    `a2ensite netalertx` or `service apache2 reload`
 
-4. Once Apache restarts, you should be able to access the proxy website at http://netalertx/
+5. Once Apache restarts, you should be able to access the proxy website at http://netalertx/
 
-<br>
+<br/>
 
 ## Apache HTTPS Configuration (Direct Path)
 
@@ -255,13 +275,15 @@
     </VirtualHost>
 ```   
 
-3. Activate the new website by running the following command:
+3. Check your config with `httpd -t` (or `apache2ctl -t` on Debian/Ubuntu). If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
     `a2ensite netalertx` or `service apache2 reload`
 
-4. Once Apache restarts, you should be able to access the proxy website at https://netalertx/
+5. Once Apache restarts, you should be able to access the proxy website at https://netalertx/
 
-<br>
+<br/>
 
 ## Apache HTTPS Configuration (Sub Path)
 
@@ -283,11 +305,15 @@
     </VirtualHost>
 ```       
 
-3. Activate the new website by running the following command:
+3. Check your config with `httpd -t` (or `apache2ctl -t` on Debian/Ubuntu). If there are any issues, it will tell you.
+   
+4. Activate the new website by running the following command:
 
    `a2ensite netalertx` or `service apache2 reload`
 
-4. Once Apache restarts, you should be able to access the proxy website at https://netalertx/netalertx/
+5. Once Apache restarts, you should be able to access the proxy website at https://netalertx/netalertx/
+
+<br/>
 
 ## Reverse proxy example by using LinuxServer's SWAG container.
 
@@ -349,12 +375,13 @@ location ^~ /netalertx/ {
 }
 ```
 
+<br/>
 
 ## Traefik
 
 > Submitted by [Isegrimm](https://github.com/Isegrimm) 🙏 (based on this [discussion](https://github.com/jokob-sk/NetAlertX/discussions/449#discussioncomment-7281442))
 
-Asuming the user already has a working Traefik setup, this is what's needed to make NetAlertX work at a URL like www.domain.com/netalertx/. 
+Assuming the user already has a working Traefik setup, this is what's needed to make NetAlertX work at a URL like www.domain.com/netalertx/. 
 
 Note: Everything in these configs assumes '**www.domain.com**' as your domainname and '**section31**' as an arbitrary name for your certificate setup. You will have to substitute these with your own.
 
@@ -480,4 +507,3 @@ docker run -d --rm --network=host \
   ghcr.io/jokob-sk/netalertx:latest
 
 ```
-

docs/UPDATES.md

@@ -1,13 +1,14 @@
 # Docker Update Strategies to upgrade NetAlertX
 
 > [!WARNING] 
-> For versions prior to `v25.6.7` upgrade to version `v25.5.24` first (`docker pull ghcr.io/jokob-sk/netalertx:25.5.24`) as later versions don't support a full upgrade. Alternatovelly, devices and settings can be migrated manually, e.g. via [CSV import](./DEVICES_BULK_EDITING.md).
+> For versions prior to `v25.6.7` upgrade to version `v25.5.24` first (`docker pull ghcr.io/jokob-sk/netalertx:25.5.24`) as later versions don't support a full upgrade. Alternatively, devices and settings can be migrated manually, e.g. via [CSV import](./DEVICES_BULK_EDITING.md).
 
 This guide outlines approaches for updating Docker containers, usually when upgrading to a newer version of NetAlertX. Each method offers different benefits depending on the situation. Here are the methods:
 
 - Manual: Direct commands to stop, remove, and rebuild containers.
 - Dockcheck: Semi-automated with more control, suited for bulk updates.
 - Watchtower: Fully automated, runs continuously to check and update containers.
+- Portainer: Manual with UI.
 
 You can choose any approach that fits your workflow.
 
@@ -107,10 +108,42 @@ docker run -d \
 
 ```
 
+## 4. Portainer controlled image
+
+This assumes you're using Portainer to manage Docker (or Docker Swarm) and want to pull the latest version of an image and redeploy the container.
+
+> [!NOTE]
+> * Portainer does **not auto-update** containers. For automation, use **Watchtower** or similar tools.
+> * Make sure you have the [persistent volumes mounted or backups ready](BACKUPS.md) before recreating.
+
+### 4.1 Steps to Update an Image in Portainer (Standalone Docker)
+
+1. **Login to Portainer.**
+2. Go to **"Containers"** in the left sidebar.
+3. Find the container you want to update, click its name.
+4. Click **"Recreate"** (top right).
+5. **Tick**: _Pull latest image_ (this ensures Portainer fetches the newest version from Docker Hub or your registry).
+6. Click **"Recreate"** again.
+7. Wait for the container to be stopped, removed, and recreated with the updated image.
+
+### 4.2 For Docker Swarm Services
+
+If you're using Docker Swarm (under **"Stacks"** or **"Services"**):
+
+1. Go to **"Stacks"**.
+2. Select the stack managing the container.
+3. Click **"Editor"** (or "Update the Stack").
+4. Add a version tag or use `:latest` if your image tag is `latest` (not recommended for production).
+5. Click **"Update the Stack"**. ⚠ Portainer will not pull the new image unless the tag changes OR the stack is forced to recreate.
+6. If image tag hasn't changed, go to **"Services"**, find the service, and click **"Force Update"**.
+
 ## Summary
 
-- Manual: Ideal for individual or critical updates.
-- Dockcheck: Suitable for controlled, mass updates.
-- Watchtower: Fully automated, best for continuous deployment setups.
+| Method     | Type         | Pros                            | Cons                         |
+|------------|--------------|----------------------------------|------------------------------|
+| Manual     | CLI          | Full control, no dependencies   | Tedious for many containers |
+| Dockcheck  | CLI Script   | Great for batch updates         | Needs setup, semi-automated |
+| Watchtower | Daemonized   | Fully automated updates         | Less control, version drift |
+| Portainer  | UI           | Easy via web interface          | No auto-updates             |
 
 These approaches allow you to maintain flexibility in how you update Docker containers, depending on the urgency and scale of the update.

docs/WORKFLOWS.md

@@ -63,68 +63,8 @@ You can include multiple actions that should execute once the conditions are met
 
 # Examples
 
-Below you can find a couple of configuration examples.
+You can find a couple of configuration examples in [Workflow Examples](WORKFLOW_EXAMPLES.md).
 
-![Workflow example](./img/WORKFLOWS/workflows.png)
-
----
-
-## Example 1: Assign Device to Network Node Based on IP
-
-This workflow assigns newly added devices with IP addresses in the `192.168.1.*` range to the device with the MAC address `6c:6d:6d:6c:6c:6c`.
-
-### Trigger:
-- **Object Type**: `Devices`
-- **Event Type**: `insert`
-
-### Conditions:
-- **Logic**: `AND`
-  - `Field`: `devLastIP`
-  - `Operator`: `contains`
-  - `Value`: `192.168.1.`
-  
-  This condition ensures that the workflow only applies to devices with an IP address in the `192.168.1.*` range.
-
-### Actions:
-- **Action Type**: `update_field`
-  - **Field**: `devNetworkNode`
-  - **Value**: `6c:6d:6d:6c:6c:6c`
-
----
-
-## Example 2: Mark Device as Not New and Delete If from Google Vendor
-
-This workflow automates the process of marking Google devices as not new and deleting them if they meet the criteria.
-
-### Trigger:
-- **Object Type**: `Devices`
-- **Event Type**: `update`
-
-### Conditions:
-- **Logic**: `AND`
-  - `Field`: `devVendor`
-  - `Operator`: `contains`
-  - `Value`: `Google`
-  
-  This condition checks if the device's vendor is `Google`.
-
-- **Logic**: `AND`
-  - `Field`: `devIsNew`
-  - `Operator`: `equals`
-  - `Value`: `1`
-  
-  This ensures the workflow applies only to new devices.
-
-### Actions:
-1. **Action Type**: `update_field`
-   - **Field**: `devIsNew`
-   - **Value**: `0`
-
-   This action marks the device as no longer new.
-
-2. **Action Type**: `delete_device`
-   
-   This action deletes the device after it is marked as not new.
 
 > [!TIP]
 > Share your workflows in [Discord](https://discord.com/invite/NczTUTWyRr) or [GitHub Discussions](https://github.com/jokob-sk/NetAlertX/discussions).  

docs/WORKFLOW_EXAMPLES.md

@@ -2,7 +2,7 @@
 
 Workflows in NetAlertX automate actions based on real-time events and conditions. Below are practical examples that demonstrate how to build automation using triggers, conditions, and actions.
 
-## Un-archive devices if detected online
+## Example 1: Un-archive devices if detected online
 
 This workflow automatically unarchives a device if it was previously archived but has now been detected as online.
 
@@ -57,4 +57,129 @@ Sometimes devices are manually archived (e.g., no longer expected on the network
 
 ### ✅ Result
 
-Whenever a previously archived device shows up during a network scan, it will be automatically unarchived — allowing it to reappear in your device lists and dashboards.
+Whenever a previously archived device shows up during a network scan, it will be automatically unarchived — allowing it to reappear in your device lists and dashboards.
+
+
+Here is your updated version of **Example 2** and **Example 3**, fully aligned with the format and structure of **Example 1** for consistency and professionalism:
+
+---
+
+## Example 2: Assign Device to Network Node Based on IP
+
+This workflow assigns newly added devices with IP addresses in the `192.168.1.*` range to a specific network node with MAC address `6c:6d:6d:6c:6c:6c`.
+
+### 📋 Use Case
+
+When new devices join your network, assigning them to the correct network node is important for accurate topology and grouping. This workflow ensures devices in a specific subnet are automatically linked to the intended node.
+
+### ⚙️ Workflow Configuration
+
+```json
+{
+  "name": "Assign Device to Network Node Based on IP",
+  "trigger": {
+    "object_type": "Devices",
+    "event_type": "insert"
+  },
+  "conditions": [
+    {
+      "logic": "AND",
+      "conditions": [
+        {
+          "field": "devLastIP",
+          "operator": "contains",
+          "value": "192.168.1."
+        }
+      ]
+    }
+  ],
+  "actions": [
+    {
+      "type": "update_field",
+      "field": "devNetworkNode",
+      "value": "6c:6d:6d:6c:6c:6c"
+    }
+  ],
+  "enabled": "Yes"
+}
+```
+
+### 🔍 Explanation
+
+* **Trigger**: Activates when a new device is added.
+* **Condition**:
+
+  * `devLastIP` contains `192.168.1.` (matches subnet).
+* **Action**:
+
+  * Sets `devNetworkNode` to the specified MAC address.
+
+### ✅ Result
+
+New devices with IPs in the `192.168.1.*` subnet are automatically assigned to the correct network node, streamlining device organization and reducing manual work.
+
+---
+
+## Example 3: Mark Device as Not New and Delete If from Google Vendor
+
+This workflow automatically marks newly detected Google devices as not new and deletes them immediately.
+
+### 📋 Use Case
+
+You may want to automatically clear out newly detected Google devices (such as Chromecast or Google Home) if they’re not needed in your device database. This workflow handles that clean-up automatically.
+
+### ⚙️ Workflow Configuration
+
+```json
+{
+  "name": "Mark Device as Not New and Delete If from Google Vendor",
+  "trigger": {
+    "object_type": "Devices",
+    "event_type": "update"
+  },
+  "conditions": [
+    {
+      "logic": "AND",
+      "conditions": [
+        {
+          "field": "devVendor",
+          "operator": "contains",
+          "value": "Google"
+        },
+        {
+          "field": "devIsNew",
+          "operator": "equals",
+          "value": "1"
+        }
+      ]
+    }
+  ],
+  "actions": [
+    {
+      "type": "update_field",
+      "field": "devIsNew",
+      "value": "0"
+    },
+    {
+      "type": "delete_device"
+    }
+  ],
+  "enabled": "Yes"
+}
+```
+
+### 🔍 Explanation
+
+* **Trigger**: Runs on device updates.
+* **Conditions**:
+
+  * Vendor contains `Google`.
+  * Device is marked as new (`devIsNew` is `1`).
+* **Actions**:
+
+  1. Set `devIsNew` to `0` (mark as not new).
+  2. Delete the device.
+
+### ✅ Result
+
+Any newly detected Google devices are cleaned up instantly — first marked as not new, then deleted — helping you avoid clutter in your device records.

front/.gitignore

@@ -0,0 +1 @@
+buildtimestamp.txt

front/appEvents.php

@@ -1,7 +1,7 @@
 <?php
 
   require 'php/templates/header.php';  
-  require 'php/templates/notification.php'; 
+  require 'php/templates/modals.php'; 
 ?>
 <!-- ----------------------------------------------------------------------- -->
  

front/appEventsCore.php

@@ -1,3 +1,8 @@
+<span class="helpIcon"> 
+    <a target="_blank" href="https://github.com/jokob-sk/NetAlertX/blob/main/docs/WORKFLOWS_DEBUGGING.md">
+      <i class="fa fa-circle-question"></i>
+    </a>
+  </span>
 <section class="content">
   <div class="nav-tabs-custom app-event-content" style="margin-bottom: 0px;">
     <ul id="tabs-location" class="nav nav-tabs col-sm-2 hidden">

front/css/app.css

@@ -12,10 +12,13 @@
 ----------------------------------------------------------------------------- */
 :root {
     --color-aqua: #00c0ef;
+    --color-lightblue: #3c8dbc;
     --color-blue: #0060df;
     --color-green: #00a65a;
     --color-yellow: #f39c12;
     --color-red: #dd4b39;
+    --color-gray: #8c8c8c;
+    --color-black: #000;
 }
 
 .input-group .checkbox
@@ -28,6 +31,45 @@ h5
     font-size: medium;
 }
 
+a[target="_blank"] {
+    position: relative;
+    display: inline-block; /* Needed for positioning */
+    padding-right: 0.6em;    /* Space for the icon */
+  }
+  
+  a[target="_blank"]::after {
+    content: '↗';
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 0.75em;
+    line-height: 1;
+  }
+
+  .select2 .hover-node-info::after {
+    padding-left: 1px ;
+  }
+
+  /* .node-standard-device .netNodeText::after
+  {
+    right: -7px;
+    top: 1px;
+  } */
+  
+/* .select2-container--default .select2-selection--multiple .select2-selection__choice
+{
+    padding-right: 15px !important;
+} */
+
+.hoverHighlight
+{
+    opacity: 0.7;
+}
+.hoverHighlight:hover
+{
+    opacity: 1;
+}
+
 /* -----------------------------------------------------------------------------
    Helper Classes
 ----------------------------------------------------------------------------- */
@@ -48,6 +90,7 @@ h5
     float: inline-end;
 }
 
+
 /* -----------------------------------------------------------------------------
    Text Classes
 ----------------------------------------------------------------------------- */
@@ -340,6 +383,21 @@ body
     width: 100%;
 }
 
+.networkTable .nav-tabs-custom
+{
+    margin-bottom: 0px;
+}
+
+.plugin-content #tabs-location .nav-tabs-custom > .nav-tabs > li
+{
+    display: contents;
+}
+
+.plugin-content .left-nav
+{
+    display: contents;
+}
+
 .pa-small-box-2 .inner h3 {
     margin-left: 0em;
     margin-bottom: 1.3em;
@@ -474,7 +532,7 @@ body
 }
 
 .bottom-border-primary {
-    border-bottom-color: #3c8dbc;
+    border-bottom-color: var(--color-lightblue);
     border-bottom-style: solid;
     border-bottom-width: 3px
 }
@@ -547,6 +605,20 @@ body
     cursor: default;
 }
 
+.btn-outline:hover
+{
+  border: 1px solid var(--color-black);
+  background: transparent;
+  color: var(--color-black);
+}
+
+.btn-outline
+{
+  border: 1px solid var(--color-gray);
+  background: transparent;
+  color: var(--color-gray);
+}
+
 /* -----------------------------------------------------------------------------
    Customized Full Calendar
 ----------------------------------------------------------------------------- */
@@ -879,6 +951,10 @@ height: 50px;
     margin: 10px;
     padding: 10px;
 }
+#notifications .notification-box{
+    min-height: 90vh;
+}
+
 
 #notificationData textarea{
     width: 100%;
@@ -1032,7 +1108,7 @@ height: 50px;
 
 .myhidden
 {
-    display:none;
+    display:none !important;
 }
 
 .center 
@@ -1354,11 +1430,13 @@ input[readonly] {
 
 .iconPreview {
     min-width: 40px;
+    /* display: inherit; */
 }
 
 .iconPreview svg{
     min-width: 20px;
     max-width: 20px;
+    margin-bottom: -3px;
 }
 
 
@@ -1399,7 +1477,8 @@ input[readonly] {
     cursor: -webkit-grab;
 }
 
-.select2-container--default .select2-selection--multiple .select2-selection__choice
+#settingsPage .select2-container--default .select2-selection--multiple .select2-selection__choice,
+#maintenancePage .select2-container--default .select2-selection--multiple .select2-selection__choice
 {
     background-color:#258744 !important;
 }
@@ -1413,6 +1492,15 @@ input[readonly] {
     background-color:#606060 !important;
 }
 
+.select2-container--default .select2-selection--multiple,
+.select2-container--default .select2-selection--single
+{
+    border-radius: 0px !important;
+    border-color: #d2d6de !important;
+    min-height: 42px;
+}
+
+
 .helpIconSmallTopRight{
     position: absolute;
     font-size: x-small;
@@ -1427,7 +1515,7 @@ input[readonly] {
 }
 
 #tableDevicesBox td svg, #tableDevicesBox td i{
-    height: 1.5em !important;
+    height: 1em !important;
 }
 
 #TileCards .tile .inner
@@ -1449,6 +1537,11 @@ input[readonly] {
     text-align: left;
 }
 
+#panDetails .input-group {
+        
+    min-height: 40px;
+}
+
 #devicePageInfoPlc
 {
     display: none;
@@ -1527,18 +1620,113 @@ input[readonly] {
 }
 /* #panDetails .dataTables_wrapper .bottom .paging_simple_numbers */
 
-#panDetails #NEWDEV_devIcon
-{
-    display: none;
-}
-
-
 
 #panDetails #NEWDEV_devCustomProps_label
 {
     display: none;
 }
 
+#deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice a
+{
+    color: #fff;
+}
+
+#deviceDetailsEdit .iconPreview svg
+{
+    height: 14px;
+}
+
+#deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice 
+{
+    height: 20px;
+}
+
+#deviceDetailsEdit .select2-container--disabled 
+{
+    background-color: #606060;    
+}
+
+#deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice span 
+{
+    font-size: 14px;
+}
+
+#deviceDetailsEdit .select2-selection 
+{
+    width: initial;
+    display: inline-block;
+    min-height: 42px;
+}
+
+/* Remove the default Select2 chevron (the down arrow) */
+.select2-container .select2-selection__arrow b {
+    display: none !important;
+  }
+
+/* Add custom icon */
+.select2-container .select2-selection__arrow::after {
+    font-family: 'Font Awesome 6 Free';
+    content: "\f078"; /* fa-chevron-down */
+    font-weight: 700;
+    position: absolute;
+    top: 75%;
+    left: 30%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+.custom-badge a
+{
+    color: #fff !important;
+    font-size: 14px;
+}
+.custom-badge
+{    
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    border-style: solid;
+    padding: 0 5px;
+    font-size: 14px;
+    display: inline-block;
+}
+
+#deviceDetailsEdit .form-control
+{
+    min-height: 42px;
+}
+
+.select2-selection--single .custom-chip
+{
+    margin-top: 11px;
+    display: flex;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered,
+.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single
+{
+    padding: 0px 0px;
+    min-height: 42px;
+}
+
+/* .select2-container--default .select2-selection--single .select2-selection__rendered, */
+.select2-container--default .select2-selection--single
+{
+    /* color:initial !important; */
+    background-color:initial !important;
+}
+
+
+#deviceDetailsEdit .select2-container 
+{
+    width: 100% !important;
+}
+
+#deviceDetailsEdit .select2-container  .selection
+{
+    width: 100% !important;
+    display: inline-grid;
+}
+
 /* ----------------------------------------------------------------- */
 /* MODAL popups */
 /* ----------------------------------------------------------------- */
@@ -1553,14 +1741,44 @@ input[readonly] {
     width: 92%;
 }
 
+#modal-ok
+{
+    z-index: 1051; /*highest priority*/
+}
+
+#modal-form-plc
+{
+    display: grid;
+}
+
 /* ----------------------------------------------------------------- */
 /* NETWORK page */
 /* ----------------------------------------------------------------- */
 
+.hide-node-names .node-name {
+    display: none;
+  }
+
+#toggleFilters
+{
+    display: block;
+    position: fixed;
+    padding-left: 32px;
+    padding-top: 10px;
+    background-color: inherit;
+    z-index: 3;
+    width: 190px;
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
+}
+
 /* AdminLTE overrides */
+.content-wrapper {
+    min-height: calc(100vh - 31px) !important;
+}
+
 #networkTree .box
 {
-    /* border-top:1px; */
+    border-width:1px;
     border-top-color:grey;
     padding:0px;
     margin:0px;
@@ -1596,6 +1814,7 @@ input[readonly] {
     opacity: 0.3;
     display: initial;    
     float: left;
+    width: 1em;
 }
 
 #networkTree
@@ -1619,6 +1838,42 @@ input[readonly] {
     width: auto;
 }
 
+#hover-box
+{
+  background-color: #ffffff;;
+}
+
+#hover-box .iconPreview
+{
+    padding: 0px;
+    display: flex;
+}
+
+#hover-box .devName
+{    
+    font-size: larger;    
+    display: contents;
+}
+
+#hover-box b
+{
+    float: left;
+}
+
+#hover-box .line
+{
+    float: left;
+    width: 100%;
+}
+
+#hover-box span
+{
+    float: right;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    max-width: 200px;
+}
 
 #networkTree .netCollapse
 {
@@ -1626,11 +1881,39 @@ input[readonly] {
     right: 0;
     margin-right: -3px;
 }
+
+/* var(--color-aqua);
+--color-aqua: #00c0ef;
+--color-blue: #0060df;
+--color-green: #00a65a;
+--color-yellow: #f39c12;
+--color-red: #dd4b39; */
+
+#networkTree .node-inner.node-network-device:hover
+{
+    box-shadow: var(--color-aqua) 0px 0px 20px;
+}
+
+#networkTree .node-inner.node-standard-device:hover
+{
+    box-shadow: var(--color-gray) 0px 0px 10px;
+}
+
+#networkTree .network-hw-icon
+{
+    position: absolute;
+    margin-left: -0.4em;
+    opacity: 0.3;
+    margin-top: 0.1em;
+}
+
 #networkTree .highlightedNode
 {
     /* border: solid; */
-    border-color:cyan;
+    border-color:var(--color-lightblue); 
+    box-shadow: var(--color-lightblue) 0px 0px 20px;
 }
+
 #networkTree .netStatus-Off-line i,
 #networkTree .netStatus-Off-line svg
 {
@@ -1654,6 +1937,23 @@ input[readonly] {
     /* margin-left: 0.2em; */
 }
 
+.networkTable
+{
+    padding-bottom: 1px;
+    z-index: 3;
+    position: relative;
+}
+
+.networkNodeTabHeaders .icon i
+{
+    padding-top: 8px !important;
+     padding-left: 6px !important;
+}
+
+.networkTable .box-body {
+    padding-top: 5px;
+}
+
 .networkTable .networkNodeTabHeaders a {
     display: block;
     height: 3em;
@@ -1682,6 +1982,8 @@ input[readonly] {
     text-wrap: nowrap;
 }
 
+
+
 @media (max-width: 767px) {
 
     .networkNodeTabHeaders .node-name
@@ -1712,7 +2014,10 @@ input[readonly] {
 /* PLUGINS page */
 /* ----------------------------------------------------------------- */
 
-
+#tabs-location
+{
+    padding-right: 0px;
+}
 
 .plugin-filters
 {    
@@ -1727,15 +2032,31 @@ input[readonly] {
     padding-bottom: 0px;
 }
 
-.plugin-content .left-nav{
+.plugin-content .nav-tabs li a
+{
+    border-right-width: 0px;
+}
+
+#tabs-content-location-wrap
+{
+    min-height: 90vh;
+}
+
+#tabs-content-location textarea {
     width: 100%;
+}
+
+.plugin-content .left-nav{
+    width: calc(100%);
     padding-right: 0px;
+    z-index: 2;
+    background-color: inherit !important;
 }
 
 .plugin-content #tabs-content-location
 {    
     margin: 0px;
-    /* padding-top: 0; */
+    padding-top: 0;
 }
 
 .integrations-plugins .content
@@ -1803,6 +2124,9 @@ input[readonly] {
 .pluginBadge
 {
     float: right;
+    margin-right: 10px;
+    opacity: 0.6;
+    margin-top: 4px;
 }
 
 .pluginBadgeWrap
@@ -1811,42 +2135,56 @@ input[readonly] {
     display: ruby;
     z-index: 1;
     position: sticky;
-    margin-top: 1px;
+    margin-top: 4px;
 }
 
 /* -----------------------------------------------------------------------------
    Spin
 ----------------------------------------------------------------------------- */
-.pa_semitransparent-panel {
-    position: absolute;
-    width: 100%; /*calc (100% -40px);*/
-    height: 100%;
-    left: 0;
-    top: 0;
+#loadingSpinner {
+    position: fixed;
+    z-index: 1000;
+    /* top: 0; */
+    /* left: 0; */
+    /* width: 100%; */
+    /* height: 100%; */
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    pointer-events: none;
     display: block;
-
-    opacity: 0.8;
-    background-color: #fff;
     z-index: 800;
 }
 
-.pa_spinner {
-    position: fixed;
-    left: 0;
-    right: 0;
+.fa-spinner
+{
+    font-size: initial;
+}
+
+#loadingSpinner.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.nax_semitransparent-panel {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    opacity: 0.5;
+    z-index: 99;
+}
+
+.nax_spinner {
+    position: absolute;
     top: 100px;
-    margin-left: auto;
-    margin-right: auto;
+    left: 50%;
+    transform: translateX(-50%);
     padding: 15px;
     width: 200px;
     background-color: #fff;
-    z-index: 801;
+    z-index: 1000;
 }
 
-#loadingSpinner
-{
-    z-index: 100;
-}
 
 /* Multi-edit adjustements */
 .box-header
@@ -1873,9 +2211,10 @@ input[readonly] {
 
 }
 
-.pia-top-left-logo
+.top-left-logo
 {
-    height:50px;
+    height:35px;
+    width:35px;
 }
 
 /* -----------------------------------------------------------------------------

front/css/dark-patch.css

@@ -10,6 +10,16 @@
 *
 * Additional fixes For Pi.Alert UI by leiweibau */
 
+:root {
+  --color-aqua: #00c0ef;
+  --color-lightblue: #3c8dbc;
+  --color-blue: #0060df;
+  --color-green: #00a65a;
+  --color-yellow: #f39c12;
+  --color-red: #dd4b39;
+  --color-gray: #8c8c8c;
+}
+
 :root {
   --datatable-bgcolor: rgba(64, 76, 88, 0.8);
 }
@@ -409,6 +419,12 @@ td.highlight {
   border: 1px solid #353c42;
 }
 
+.btn-outline {
+  border: 1px solid var(--color-black);
+  background: transparent;
+  color: var(--color-white);
+}
+
 /* Used in debug log page */
 .log-red {
   color: #ff4038;
@@ -649,8 +665,14 @@ input[type="password"]::-webkit-caps-lock-indicator {
   border-color: #888888;
 }
 .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-  background-color: rgb(189,192,198);
-  color: #444;
+  background-color: var(--datatable-bgcolor);
+  color: var(--fbc-white);
+}
+
+table.dataTable tbody  tr.selected, table.dataTable tbody  tr  .selected
+{
+  background-color: var(--datatable-bgcolor);
+  color: var(--fbc-white);
 }
 
 .db_info_table_cell:nth-child(1) {background: #272c30}
@@ -722,16 +744,46 @@ input[type="password"]::-webkit-caps-lock-indicator {
   margin-left: 0px;
 }
 .small-box:hover .icon {
-  font-size: 3.74em;
+  font-size: 3em;
 }
 .small-box .icon { 
   top: 0.01em;
   font-size: 3.25em;
 }
-.pa_semitransparent-panel{
+.nax_semitransparent-panel{
   background-color: #000 !important;
 }
 
+
+.select2-container--default .select2-selection--single {
+  color: initial !important;
+  background-color: #353c42 !important;
+}
+
+/* Chevron color */
+.select2-container .select2-selection__arrow::after {
+  color: #bec5cb;
+}
+
+/* Chevron color */
+.select2-selection .select2-selection--single {
+  color: #bec5cb;
+}
+
+.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
+  border-color: #3d444b !important;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered  .custom-chip
+{
+  color: #bec5cb;
+}
+
+#hover-box
+{
+  background-color: #353c42 !important;
+}
+
 .callout code {
   background-color: #fff !important;
   color:#000 !important;
@@ -740,4 +792,9 @@ input[type="password"]::-webkit-caps-lock-indicator {
 .thresholdFormControl
 {
   color:#000;   
+}
+
+.btn:hover
+{
+  color: var(--color-gray);
 }

front/css/system-dark-patch.css

@@ -11,6 +11,17 @@
 * Additional fixes For Pi.Alert UI by leiweibau */
 
 @media (prefers-color-scheme: dark) {
+
+  :root {
+    --color-aqua: #00c0ef;
+    --color-lightblue: #3c8dbc;
+    --color-blue: #0060df;
+    --color-green: #00a65a;
+    --color-yellow: #f39c12;
+    --color-red: #dd4b39;
+    --color-gray: #8c8c8c;
+    --color-white: #fff;
+  }
     
   :root {
     --datatable-bgcolor: rgba(64, 76, 88, 0.8);
@@ -411,6 +422,12 @@
     border: 1px solid #353c42;
   }
 
+  .btn-outline {
+    border: 1px solid var(--color-black);
+    background: transparent;
+    color: var(--color-white);
+  }
+  
   /* Used in debug log page */
   .log-red {
     color: #ff4038;
@@ -651,8 +668,14 @@
     border-color: #888888;
   }
   .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-    background-color: rgb(189,192,198);
-    color: #444;
+    background-color: var(--datatable-bgcolor);
+    color: var(--fbc-white);
+  }
+
+  table.dataTable tbody  tr.selected, table.dataTable tbody  tr  .selected
+  {
+    background-color: var(--datatable-bgcolor);
+    color: var(--fbc-white);
   }
 
   .db_info_table_cell:nth-child(1) {background: #272c30}
@@ -724,16 +747,45 @@
     margin-left: 0px;
   }
   .small-box:hover .icon {
-    font-size: 3.74em;
+    font-size: 3em;
   }
   .small-box .icon { 
     top: 0.01em;
     font-size: 3.25em;
   }
-  .pa_semitransparent-panel{
+  .nax_semitransparent-panel{
     background-color: #000 !important;
   }
 
+  .select2-container--default .select2-selection--single {
+    color: initial !important;
+    background-color: #353c42 !important;
+  }
+
+  /* Chevron color */
+  .select2-container .select2-selection__arrow::after {
+    color: #bec5cb;
+  }
+
+  /* Chevron color */
+  .select2-selection .select2-selection--single {
+    color: #bec5cb;
+  }
+
+  .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
+    border-color: #3d444b !important;
+  }
+
+  .select2-container--default .select2-selection--single .select2-selection__rendered  .custom-chip
+  {
+    color: #bec5cb;
+  }
+
+  #hover-box
+  {
+    background-color: #353c42 !important;
+  }
+
 }
 
 .callout code {
@@ -746,3 +798,7 @@
   color:#000;   
 }
 
+.btn:hover
+{
+  color: var(--color-white);
+}

front/deviceDetails.php

@@ -16,15 +16,16 @@
   require 'php/templates/header.php';
 ?>
 
-
-
+<script>
+  showSpinner();
+</script>
 
 <!-- Page ------------------------------------------------------------------ -->
   <div class="content-wrapper">
 
 <!-- Content header--------------------------------------------------------- -->
     <section class="content-header">
-      <?php require 'php/templates/notification.php'; ?>
+      <?php require 'php/templates/modals.php'; ?>
 
       <h1 id="pageTitle">
         &nbsp<small>Quering device info...</small>
@@ -122,18 +123,14 @@
               </div>
             </ul>
             
-            <div class="tab-content" style="min-height: 430px;">
+            <div class="tab-content spinnerTarget" style="min-height: 430px;">
 
 <!-- tab page 1 ------------------------------------------------------------ -->
-<!--
-              <div class="tab-pane fade in active" id="panDetails">
--->
-              <div class="tab-pane fade" id="panDetails">
 
+              <div class="tab-pane fade" id="panDetails">
                 <?php  
                   require 'deviceDetailsEdit.php';
                 ?>
-                
               </div>                                                                         
 
 <!-- tab page 2 ------------------------------------------------------------ -->
@@ -141,51 +138,38 @@
               <?php  
                   require 'deviceDetailsSessions.php';
                 ?>
-                
               </div>
-
         
 <!-- tab page "Tools" ------------------------------------------------------------ -->
 
               <div class="tab-pane fade" id="panTools">
-
                 <?php  
                   require 'deviceDetailsTools.php';
-                ?>
-              
-		      
+                ?>        	      
               </div>
 
 <!-- tab page 3 ------------------------------------------------------------ -->
-              <div class="tab-pane fade table-responsive" id="panPresence">        
-                
+              <div class="tab-pane fade table-responsive" id="panPresence">                
                 <?php
                   // Include the other page
                   include 'deviceDetailsPresence.php';
                 ?>
-
               </div>
 
 <!-- tab page 4 ------------------------------------------------------------ -->
               <div class="tab-pane fade table-responsive" id="panEvents">
-
               <?php
                   // Include the other page
                   include 'deviceDetailsEvents.php';
-                ?>
-
-                
+                ?>                
               </div>
 
 <!-- tab page 7 ------------------------------------------------------------ -->
               <div class="tab-pane fade table-responsive" id="panPlugins">
-              
-
                 <?php
                   // Include the other page
                   include 'pluginsCore.php';
                 ?>
-
               </div>
 
             </div>
@@ -241,13 +225,6 @@ switch ($UI_THEME) {
   var selectedTab         = 'tabDetails';
   var emptyArr            = ['undefined', "", undefined, null];
 
-
-// Call renderSmallBoxes, then main
-(async () => {
-    await renderSmallBoxes();
-    main();
-})();
-
 // -----------------------------------------------------------------------------
 function main () {
 
@@ -273,7 +250,7 @@ function main () {
   period = '1 day';
   sessionsRows = 50;
   eventsRows = 50;
-  $('#chkHideConnectionEvents')[0].checked = eval(eventsHide == 'true');  
+  // $('#chkHideConnectionEvents')[0].checked = eval(eventsHide == 'true');  
 
   // Initialize components with parameters
    	
@@ -282,26 +259,7 @@ function main () {
   $( document ).ready(function() {
     initializeTabs();
   });
-  
-
-  
-
-  // Events tab toggle conenction events
-  $('input').on('ifToggled', function(event){
-    // Hide / Show Events
-    if (event.currentTarget.id == 'chkHideConnectionEvents') {
-      getDeviceEvents();
-    } else {
-      // Activate save & restore
-      // activateSaveRestoreData();
-
-      // Ask skip notifications
-      // if (event.currentTarget.id == 'chkArchived' ) {
-      //   askSkipNotifications();
-      // }
-    }
-  });
-       
+         
 }
 
 
@@ -328,6 +286,63 @@ function recordSwitch(direction) {
   }
 }
 
+
+// ----------------------------------------
+// Handle previous/next arrows/chevrons
+function updateChevrons(currentMac) {
+  const devicesList = getDevicesList();
+
+  pos = devicesList.findIndex(item => item.devMac === currentMac);
+
+  if (pos === -1) {
+    console.warn('Device not found in cache. Re-caching devices...', currentMac);
+
+    showSpinner();
+
+    cacheDevices().then(() => {
+      hideSpinner();
+
+      // Retry after re-caching
+      const refreshedList = getDevicesList();
+      pos = refreshedList.findIndex(item => item.devMac === currentMac);
+
+      if (pos === -1) {
+        console.error('Still not found after re-cache:', currentMac);
+        return;
+      }
+
+      console.log('Device found after re-cache:', refreshedList[pos]);
+      // Proceed with using `refreshedList[pos]`
+    }).catch((err) => {
+      hideSpinner();
+      console.error('Failed to cache devices:', err);
+    });
+
+    return;
+  }
+
+  // Update the record number display
+  $('#txtRecord').html((pos + 1) + ' / ' + devicesList.length);
+
+  // Enable/disable previous button
+  if (pos <= 0) {
+    $('#btnPrevious').attr('disabled', '');
+    $('#btnPrevious').addClass('text-gray50');
+  } else {
+    $('#btnPrevious').removeAttr('disabled');
+    $('#btnPrevious').removeClass('text-gray50');
+  }
+
+  // Enable/disable next button
+  if (pos >= devicesList.length - 1) {
+    $('#btnNext').attr('disabled', '');
+    $('#btnNext').addClass('text-gray50');
+  } else {
+    $('#btnNext').removeAttr('disabled');
+    $('#btnNext').removeClass('text-gray50');
+  }
+}
+
 // -----------------------------------------------------------------------------
 
 function performSwitch(direction)
@@ -338,7 +353,9 @@ function performSwitch(direction)
 
   // Update the global position in the devices list variable 'pos'
   if (direction === "next") {
-    if (pos < devicesList.length - 1) {
+    console.log("direction:" + direction);
+    
+    if (pos < devicesList.length) {
       pos++;
     }
   } else if (direction === "prev") {
@@ -358,15 +375,12 @@ function performSwitch(direction)
 
 }
 
-
 // -----------------------------------------------------------------------------
 // Activate save & restore on any value change
 $(document).on('input', 'input:text', function() {  
   settingsChanged();
 });
 
-
-
 // -----------------------------------------------------------------------------
 
 function initializeTabs () {  
@@ -380,8 +394,6 @@ function initializeTabs () {
   }
   
   $('.nav-tabs a[id='+ selectedTab +']').tab('show');
-  // $('.nav-tabs a[id='+ selectedTab +']').parent().click();
-  //  $('.nav-tabs a[id="tabPlugins"]').tab('show');
 
   // When changed save new current tab
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
@@ -391,11 +403,6 @@ function initializeTabs () {
   // events on tab change
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     var target = $(e.target).attr("href") // activated tab
-
-    // if(target == "#panTools")
-    // {
-    //   // loadTools();
-    // }
   });
 }
 
@@ -415,7 +422,6 @@ async function renderSmallBoxes() {
         }
 
         const deviceData = await response.json();
-        console.log(deviceData);
 
         // Prepare custom data
         const customData = [
@@ -447,7 +453,7 @@ async function renderSmallBoxes() {
                 "labelLang": "DevDetail_Shortcut_Presence",
                 "iconId": "deviceEventsIcon",
                 "iconClass": "fa fa-calendar",
-                "dataValue": `${deviceData.devPresenceHours}h`
+                "dataValue": `${deviceData.devPresenceHours ?? 0}h`
             },
             {
                 "onclickEvent": "$('#tabEvents').trigger('click');",
@@ -482,22 +488,65 @@ async function renderSmallBoxes() {
         console.error('Error in renderSmallBoxes:', error);
     } finally {
         // Hide loading dialog
-        hideSpinner();
+        // hideSpinner();
     }
 }
 
+function updateDevicePageName(mac) {
+  let name = getDevDataByMac(mac, "devName");
+  let owner = getDevDataByMac(mac, "devOwner");
+
+  // If data is missing, re-cache and retry once
+  if (mac != 'new' && (name === null|| owner === null)) {
+    console.warn("Device not found in cache, retrying after re-cache:", mac);
+    showSpinner();
+    cacheDevices().then(() => {
+      hideSpinner();
+      // Retry after successful cache
+      updateDevicePageName(mac);
+    }).catch((err) => {
+      hideSpinner();
+      console.error("Failed to refresh devices:", err);
+    });
+    return; // Exit early to avoid showing bad data
+  }
+
+  // Page title - Name
+  if (mac == "new") {
+    $('#pageTitle').html(
+      `<i title="${getString("Gen_create_new_device")}" class="fa fa-square-plus"></i> ` + getString("Gen_create_new_device")
+    );
+    $('#devicePageInfoPlc .inner').html(
+      `<i class="fa fa-circle-info"></i> ` + getString("Gen_create_new_device_info")
+    );
+    $('#devicePageInfoPlc').show();
+  } else if (!owner || (name.toString()).indexOf(owner) !== -1) {
+    $('#pageTitle').html(name);
+    $('#devicePageInfoPlc').hide();
+  } else {
+    $('#pageTitle').html(name + ' (' + owner + ')');
+    $('#devicePageInfoPlc').hide();
+  }
+}
+
 
 //-----------------------------------------------------------------------------------
 
+// Call renderSmallBoxes, then main
+(async () => {
+      await renderSmallBoxes();
+      main();
+  })();
+
+
 window.onload = function async()
 {
-  initializeTabs();
+  // initializeTabs();
+  updateChevrons(mac);
+  updateDevicePageName(mac);
 
 }
 
-
-
-
 </script>
 
 

front/deviceDetailsEdit.php

@@ -5,7 +5,7 @@
 ?>
 
 
-<div class="row">
+<div class="row" id="deviceDetailsEdit">
   <div class="box-body form-horizontal">
     <form id="edit-form">
     <!-- Form fields will be appended here -->
@@ -39,7 +39,7 @@
   
   // -------------------------------------------------------------------  
   // Get plugin and settings data from API endpoints
-  function getDeviceData(readAllData){
+  function getDeviceData(){
 
     mac = getMac()
 
@@ -53,17 +53,13 @@
 
       var deviceData = JSON.parse(data);
 
-      // Deactivate next previous buttons
-      if (readAllData) {
-        $('#btnPrevious').attr    ('disabled','');
-        $('#btnPrevious').addClass  ('text-gray50');
-        $('#btnNext').attr      ('disabled','');
-        $('#btnNext').addClass    ('text-gray50');
-      }
-
       // some race condition, need to implement delay
       setTimeout(() => {
-        $.get('php/server/query_json.php', { file: 'table_settings.json', nocache: Date.now() }, function(res) {  
+        $.get('php/server/query_json.php', { 
+          file: 'table_settings.json', 
+          // nocache: Date.now() 
+        }, 
+          function(res) {  
         
         settingsData = res["data"];
 
@@ -85,7 +81,7 @@
             },            
              // Group for event and alert settings
              DevDetail_EveandAl_Title: {
-                data: ["devAlertEvents", "devAlertDown", "devSkipRepeated"],
+                data: ["devAlertEvents", "devAlertDown", "devSkipRepeated", "devReqNicsOnline", "devChildrenNicsDynamic"],
                 docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NOTIFICATIONS.md",
                 iconClass: "fa fa-bell",
                 inputGroupClasses: "field-group alert-group col-lg-4 col-sm-6 col-xs-12",
@@ -94,9 +90,9 @@
             },
             // Group for network details
             DevDetail_MainInfo_Network_Title: {
-                data: ["devParentMAC", "devParentPort", "devSSID", "devSite", "devSyncHubNode"],
+                data: ["devParentMAC", "devParentRelType", "devParentPort", "devSSID", "devSite", "devSyncHubNode"],
                 docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md",
-                iconClass: "fa fa-network-wired",
+                iconClass: "fa fa-sitemap fa-rotate-270",
                 inputGroupClasses: "field-group network-group col-lg-4 col-sm-6 col-xs-12",
                 labelClasses: "col-sm-4 col-xs-12 control-label",
                 inputClasses: "col-sm-8 col-xs-12 input-group"
@@ -119,12 +115,21 @@
                 labelClasses: "col-sm-4 col-xs-12 control-label",
                 inputClasses: "col-sm-8 col-xs-12 input-group"
             },
+            // Group for Children.
+            DevDetail_Children_Title: {
+                data: ["devChildrenDynamic"],
+                docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md",
+                iconClass: "fa fa-list",
+                inputGroupClasses: "field-group cutprop-group col-lg-6 col-sm-12 col-xs-12",
+                labelClasses: "col-sm-12 col-xs-12 control-label",
+                inputClasses: "col-sm-12 col-xs-12 input-group"
+            },
             // Group for Custom properties.
             DevDetail_CustomProperties_Title: {
                 data: ["devCustomProps"],
                 docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/CUSTOM_PROPERTIES.md",
                 iconClass: "fa fa-list",
-                inputGroupClasses: "field-group cutprop-group col-lg-12 col-sm-12 col-xs-12",
+                inputGroupClasses: "field-group cutprop-group col-lg-6 col-sm-12 col-xs-12",
                 labelClasses: "col-sm-12 col-xs-12 control-label",
                 inputClasses: "col-sm-12 col-xs-12 input-group"
             }
@@ -167,6 +172,7 @@
                     // Get the field data (replace 'NEWDEV_' prefix from the key)
                     fieldData = deviceData[setting.setKey.replace('NEWDEV_', '')]
                     fieldData = fieldData == null ? "" : fieldData;
+                    fieldOptionsOverride = null;
 
                     // console.log(setting.setKey);                    
                     // console.log(fieldData);                    
@@ -198,16 +204,21 @@
                                               <i class="fa-solid fa-dice" ></i>
                                           </span>`;
                     }
-
-                    // handle generate IP for new device
-                    if (setting.setKey == "NEWDEV_devIcon") {
-                      inlineControl += `<span class="input-group-addon pointer"
-                                              onclick="showIconSelection()"
-                                              title="${getString("Gen_Select")}">
-                                              <i class="fa-solid fa-chevron-down" ></i>
-                                          </span>`;
-                    }
                     
+                    // handle devChildrenDynamic or NEWDEV_devChildrenNicsDynamic - selected values and options are the same
+                    if ( 
+                        Array.isArray(fieldData) && 
+                        (setting.setKey == "NEWDEV_devChildrenDynamic" || 
+                        setting.setKey == "NEWDEV_devChildrenNicsDynamic" )                  
+                        ) 
+                      {  
+                      fieldDataNew = []                    
+                      fieldData.forEach(child => {
+                        fieldDataNew.push(child.devMac)
+                      })
+                      fieldData = fieldDataNew;
+                      fieldOptionsOverride = fieldDataNew;
+                    }
 
                     // Generate the input field HTML
                     const inputFormHtml = `<div class="form-group col-xs-12">
@@ -219,7 +230,7 @@
                                                   </i>
                                               </label>
                                               <div class="${obj.inputClasses}">
-                                                  ${generateFormHtml(settingsData, setting, fieldData.toString(), null, null)}
+                                                  ${generateFormHtml(settingsData, setting, fieldData.toString(), fieldOptionsOverride, null)}
                                                   ${inlineControl}
                                               </div>
                                           </div>`;
@@ -236,81 +247,29 @@
             updateAllIconPreviews();
 
             // update readonly fields
-            handleReadOnly(settingsData, disabledFields);
+            handleReadOnly(settingsData, disabledFields);           
+          };
 
-            // Page title - Name
-            if (mac == "new") {
-                $('#pageTitle').html(`<i title="${getString("Gen_create_new_device")}" class="fa fa-square-plus"></i> ` +  getString("Gen_create_new_device"));
-                $('#devicePageInfoPlc .inner').html(`<i class="fa fa-circle-info"></i> ` +  getString("Gen_create_new_device_info"));
-                $('#devicePageInfoPlc').show();
-            } else if (deviceData['devOwner'] == null || deviceData['devOwner'] == '' ||
-                (deviceData['devName'].toString()).indexOf(deviceData['devOwner']) != -1) {
-                $('#pageTitle').html(deviceData['devName']);
-                $('#devicePageInfoPlc').hide();
-            } else {
-                $('#pageTitle').html(deviceData['devName'] + ' (' + deviceData['devOwner'] + ')');
-                $('#devicePageInfoPlc').hide();
-            }
-        };
+          // console.log(relevantSettings)
 
-        // console.log(relevantSettings)
+          generateSimpleForm(relevantSettings);
 
-        generateSimpleForm(relevantSettings);
+          toggleNetworkConfiguration(mac == 'Internet') 
 
-        // <> chevrons
-        updateChevrons(deviceData)
+          initSelect2();
+          initHoverNodeInfo();
 
-        toggleNetworkConfiguration(mac == 'Internet') 
-
-        hideSpinner();
+          hideSpinner();
+        
+        })
       
-      })
+        }, 100);
+      });
     
-      }, 100);
-    });
+    }
+
+
   
-  }
-  
-
-  // ----------------------------------------
-  // Handle previous/next arrows/chevrons
-  function updateChevrons(deviceData) {
-
-    devicesList = getDevicesList();    
-
-    // console.log(devicesList);
-
-    // Check if device is part of the devicesList      
-    pos = devicesList.findIndex(item => item.rowid == deviceData['rowid']);        
-    
-    // console.log(pos);    
-
-    if (pos == -1) {
-      devicesList.push({"rowid" : deviceData['rowid'], "mac" : deviceData['devMac'], "name": deviceData['devName'], "type": deviceData['devType']});
-      pos=0;
-    }
-
-    // Record number
-    $('#txtRecord').html (pos+1 +' / '+ devicesList.length);
-
-    // Deactivate previous button
-    if (pos <= 0) {
-      $('#btnPrevious').attr        ('disabled','');
-      $('#btnPrevious').addClass    ('text-gray50');
-    } else {
-      $('#btnPrevious').removeAttr  ('disabled');
-      $('#btnPrevious').removeClass ('text-gray50');
-    }
-
-    // Deactivate next button
-    if (pos >= (devicesList.length-1)) {
-      $('#btnNext').attr        ('disabled','');
-      $('#btnNext').addClass    ('text-gray50');
-    } else {
-      $('#btnNext').removeAttr  ('disabled');
-      $('#btnNext').removeClass ('text-gray50');
-    }
-  }
 
   // ----------------------------------------
   // Handle the read-only fields
@@ -325,18 +284,6 @@
   });
   }
 
-
-  // ----------------------------------------
-  // Show the description of a setting
-  function showDescriptionPopup(e) {
-
-    console.log($(e).attr("my-set-key"));    
-
-    showModalOK("Info", getString($(e).attr("my-set-key") + '_description'))
-  }
-
-
-
   // -----------------------------------------------------------------------------
   // Save device data to DB
   function setDeviceData(direction = '', refreshCallback = '') {
@@ -364,7 +311,7 @@
         mac: $('#NEWDEV_devMac').val(),
         name: encodeURIComponent($('#NEWDEV_devName').val().replace(/'/g, "’")),
         owner: encodeURIComponent($('#NEWDEV_devOwner').val().replace(/'/g, "’")),
-        type: $('#NEWDEV_devType').val().replace(/'/g, ""),
+        type: $('#NEWDEV_devType').val().replace(/'/g, ""),        
         vendor: encodeURIComponent($('#NEWDEV_devVendor').val().replace(/'/g, "’")),
         icon: encodeURIComponent($('#NEWDEV_devIcon').val()),
         favorite: ($('#NEWDEV_devFavorite')[0].checked * 1),
@@ -380,6 +327,8 @@
         alertevents: ($('#NEWDEV_devAlertEvents')[0].checked * 1),
         alertdown: ($('#NEWDEV_devAlertDown')[0].checked * 1),
         skiprepeated: $('#NEWDEV_devSkipRepeated').val().split(' ')[0],
+        relType: $('#NEWDEV_devParentRelType').val().replace(/'/g, ""),
+        reqNics: ($('#NEWDEV_devReqNicsOnline')[0].checked * 1),
         newdevice: ($('#NEWDEV_devIsNew')[0].checked * 1),
         archived: ($('#NEWDEV_devIsArchived')[0].checked * 1),
         devFirstConnection: ($('#NEWDEV_devFirstConnection').val()),
@@ -427,9 +376,47 @@
     }
   }
 
+// -----------------------------------------------
+// INIT with polling for panel element visibility
+// -----------------------------------------------
+
+var deviceDetailsPageInitialized = false; 
+
+function initdeviceDetailsPage()
+{
+  // Only proceed if .plugin-content is visible
+  if (!$('#panDetails:visible').length) {
+    return; // exit early if nothing is visible
+  }
+
+  // init page once
+  if (deviceDetailsPageInitialized) return; //  ENSURE ONCE
+  deviceDetailsPageInitialized = true;
+
+  showSpinner();
+
+  getDeviceData();
+
+}
+
+// -----------------------------------------------------------------------------
+// Recurring function to monitor the URL and reinitialize if needed
+function deviceDetailsPageUpdater() {
+  initdeviceDetailsPage();
+
+  // Run updater again after delay
+  setTimeout(deviceDetailsPageUpdater, 200);
+}
+
+// if visible, load immediately, if not start updater
+if (!$('#panDetails:visible').length) {
+  deviceDetailsPageUpdater();
+}
+else
+{
+  getDeviceData();
+}
 
-  // -------------------- INIT ------------------------
-  getDeviceData(true);
 
 
 </script>

front/deviceDetailsEvents.php

@@ -7,11 +7,11 @@
  
 
 <!-- Hide Connections -->
-<div class="text-center">
-    <label>
-    <input class="checkbox blue hidden" id="chkHideConnectionEvents" type="checkbox" checked>
-    <?= lang('DevDetail_Events_CheckBox');?>
+<div class="col-sm-12 col-xs-12">
+    <label class="col-sm-3 col-xs-10">      
+      <?= lang('DevDetail_Events_CheckBox');?>
     </label>
+    <input class="checkbox blue col-sm-1 col-xs-2" id="chkHideConnectionEvents" type="checkbox" onChange="loadEventsData()">
 </div>
 
 <!-- Datatable Events -->
@@ -19,6 +19,7 @@
     <thead>
     <tr>
     <th><?= lang("DevDetail_Tab_EventsTableDate");?></th>
+    <th><?= lang("DevDetail_Tab_EventsTableDate");?></th>
     <th><?= lang("DevDetail_Tab_EventsTableEvent");?></th>
     <th><?= lang("DevDetail_Tab_EventsTableIP");?></th>
     <th><?= lang("DevDetail_Tab_EventsTableInfo");?></th>
@@ -29,66 +30,135 @@
 
 <script>
 
-  var eventsRows          = 10;
-  var eventsHide          = true;
-  var parEventsRows       = 'Front_Details_Events_Rows';
-  var parEventsHide       = 'Front_Details_Events_Hide';
 
 
 
-  // -----------------------------------------------------------------------------
 
+// -----------------------------------------------------------------------------
+function loadEventsData() {
+  const hideConnections = $('#chkHideConnectionEvents')[0].checked;
+  const hideConnectionsStr = hideConnections ? 'true' : 'false';
 
-  function loadEventsData() {
-    // Define Events datasource and query dada
-    hideConnections = $('#chkHideConnectionEvents')[0].checked;
-    $('#tableEvents').DataTable().ajax.url('php/server/events.php?action=getDeviceEvents&mac=' + mac +'&period='+ period +'&hideConnections='+ hideConnections).load();
-  }
+  mac = getMac()
 
-function initializeSessionsDatatable () {
+  const rawSql = `
+    SELECT eve_DateTime, eve_DateTime, eve_EventType, eve_IP, eve_AdditionalInfo
+    FROM Events 
+    WHERE eve_MAC = "${mac}" 
+      AND (
+        (eve_EventType NOT IN ("Connected", "Disconnected", "VOIDED - Connected", "VOIDED - Disconnected"))
+        OR "${hideConnectionsStr}" = "false"
+      )
+  `;
 
-  // Events datatable
-  $('#tableEvents').DataTable({
-    'paging'      : true,
-    'lengthChange': true,
-    'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
-    'searching'   : true,
-    'ordering'    : true,
-    'info'        : true,
-    'autoWidth'   : false,
-    'order'       : [[0,'desc']],
+  const apiUrl = `php/server/dbHelper.php?action=read&rawSql=${btoa(encodeURIComponent(rawSql))}`;
 
-    // Parameters
-    'pageLength'  : eventsRows,
+  // Manually load the data first
+  $.get(apiUrl, function (data) {
+    const parsed = JSON.parse(data);
+    
+    const rows = parsed.map(row => {
+      const rawDate = row.eve_DateTime;
+      const formattedDate = rawDate ? localizeTimestamp(rawDate) : '-';
+      return [
+        formattedDate,
+        row.eve_DateTime,
+        row.eve_EventType,
+        row.eve_IP,
+        row.eve_AdditionalInfo
+      ];
+    });
 
-    'columnDefs'  : [
-        // Replace HTML codes
-        {targets: [0],
-          'createdCell': function (td, cellData, rowData, row, col) {
-            $(td).html (translateHTMLcodes (localizeTimestamp(cellData)));
-        } }
-    ],
-
-    // Processing
-    'processing'  : true,
-    'language'    : {
-      processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
-                  '<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
-                  '</td></table>',
-      emptyTable: 'No data',
-      "lengthMenu": "<?= lang('Events_Tablelenght');?>",
-      "search":     "<?= lang('Events_Searchbox');?>: ",
-      "paginate": {
-          "next":       "<?= lang('Events_Table_nav_next');?>",
-          "previous":   "<?= lang('Events_Table_nav_prev');?>"
-      },
-      "info":           "<?= lang('Events_Table_info');?>",
-    }
-});
+    // Fill the table manually
+    const table = $('#tableEvents').DataTable();
+    table.clear();
+    table.rows.add(rows); // assuming each row is an array
+    table.draw();
 
+    hideSpinner();
+  });
 }
 
-initializeSessionsDatatable();
-loadEventsData();
+function initializeEventsDatatable (eventsRows) {
+
+  if ($.fn.dataTable.isDataTable('#tableEvents')) {
+      $('#tableEvents').DataTable().clear().destroy();
+  }
+
+  $('#tableEvents').DataTable({
+      'paging'      : true,
+      'lengthChange': true,
+      'lengthMenu'  : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
+      'searching'   : true,
+      'ordering'    : true,
+      'info'        : true,
+      'autoWidth'   : false,
+      'order'       : [[0,'desc']],
+      'pageLength'  : eventsRows,
+
+      'columnDefs'  : [
+          {   orderData: [1], targets:  [0]   },
+          {   visible:   false, targets: [1]  }, 
+          {
+              targets: [0],
+              'createdCell': function (td, cellData, rowData, row, col) {
+                  $(td).html(translateHTMLcodes(localizeTimestamp(cellData)));
+              }
+          }
+      ],
+
+      'processing'  : true,
+      'language'    : {
+          processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
+                      '<td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td></table>',
+          emptyTable: 'No data',
+          "lengthMenu": "<?= lang('Events_Tablelenght');?>",
+          "search":     "<?= lang('Events_Searchbox');?>: ",
+          "paginate": {
+              "next":     "<?= lang('Events_Table_nav_next');?>",
+              "previous": "<?= lang('Events_Table_nav_prev');?>"
+          },
+          "info": "<?= lang('Events_Table_info');?>",
+      }
+  });
+}
+
+// -----------------------------------------------
+// INIT with polling for panel element visibility
+// -----------------------------------------------
+
+var eventsPageInitialized = false; 
+
+function initDeviceEventsPage()
+{
+  // Only proceed if .plugin-content is visible
+  if (!$('#panEvents:visible').length) {
+    return; // exit early if nothing is visible
+  }
+
+  // init page once
+  if (eventsPageInitialized) return; //  ENSURE ONCE
+  eventsPageInitialized = true;
+
+  showSpinner();
+
+  var eventsRows          = 10;
+  var eventsHide          = true;
+
+  initializeEventsDatatable(eventsRows);
+  loadEventsData();
+}
+
+// -----------------------------------------------------------------------------
+// Recurring function to monitor the URL and reinitialize if needed
+function deviceEventsPageUpdater() {
+  initDeviceEventsPage();
+
+  // Run updater again after delay
+  setTimeout(deviceEventsPageUpdater, 200);
+}
+
+deviceEventsPageUpdater();
+
 
 </script>

front/deviceDetailsPresence.php

@@ -23,8 +23,6 @@
 
 
 <script>
-  initializeCalendar();    
-  loadPresenceData();
 
   // Force re-render calendar on tab change
   // (bugfix for render error at left panel)
@@ -234,6 +232,37 @@ function initializeCalendar() {
   })
 }
 
+// -----------------------------------------------
+// INIT with polling for panel element visibility
+// -----------------------------------------------
+
+var presencePageInitialized = false;
+
+function initDevicePresencePage() {
+  // Only proceed if the Presence tab is visible
+  if (!$('#panPresence:visible').length) {
+    return; // Exit early if nothing is visible
+  }
+
+  // Ensure initialization only happens once
+  if (presencePageInitialized) return;
+  presencePageInitialized = true;
+
+  showSpinner();
+
+  initializeCalendar();    
+  loadPresenceData();
+}
+
+// Recurring check to initialize when visible
+function devicePresencePageUpdater() {
+  initDevicePresencePage();
+
+  setTimeout(devicePresencePageUpdater, 200);
+}
+
+devicePresencePageUpdater();
+
 
 
 </script>

front/deviceDetailsSessions.php

@@ -24,77 +24,126 @@
 
 <script>
 
-  var parSessionsRows     = 'Front_Details_Sessions_Rows';
+
+
+function initializeSessionsDatatable (sessionsRows) {
+  // Sessions datatable
+  $('#tableSessions').DataTable({
+    'paging'      : true,
+    'lengthChange': true,
+    'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
+    'searching'   : true,
+    'ordering'    : true,
+    'info'        : true,
+    'autoWidth'   : false,
+    'order'       : [[0,'desc'], [1,'desc']],
+
+    // Parameters
+    'pageLength'  : sessionsRows,
+
+    'columnDefs'  : [
+        {visible:   false,  targets: [0]},
+
+        // Replace HTML codes
+        {targets: [3,5],
+          'createdCell': function (td, cellData, rowData, row, col) {
+            $(td).html (translateHTMLcodes (cellData));
+        } },
+          // Date
+        {targets: [1,2],
+          "createdCell": function (td, cellData, rowData, row, col) {
+            // console.log(cellData);
+            
+            if (!cellData.includes("missing event") && !cellData.includes("..."))
+            {               
+              if (cellData.includes("+")) { // Check if timezone offset is present
+                cellData = cellData.split('+')[0]; // Remove timezone offset
+              } 
+              // console.log(cellData);
+              result = localizeTimestamp(cellData);
+            } else
+            {
+              result = translateHTMLcodes(cellData)
+            }
+            
+            $(td).html (result);              
+        } }
+    ],
+
+    // Processing
+    'processing'  : true,
+    'language'    : {
+      processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
+                  '<td><i class="fa-solid fa-spinner fa-spin-pulse"></i>'+
+                  '</td></table>',
+      emptyTable: 'No data',
+      "lengthMenu": "<?= lang('Events_Tablelenght');?>",
+      "search":     "<?= lang('Events_Searchbox');?>: ",
+      "paginate": {
+          "next":       "<?= lang('Events_Table_nav_next');?>",
+          "previous":   "<?= lang('Events_Table_nav_prev');?>"
+      },
+      "info":           "<?= lang('Events_Table_info');?>",
+    }
+  });
+}
+
+
+
+// -----------------------------------------------
+// INIT with polling for panel element visibility
+// -----------------------------------------------
+
+// ----------------------------------------------------------- 
+// Init datatable
+function loadSessionsData(period){
+  const table = $('#tableSessions').DataTable();
+
+  showSpinner();
+
+  // table.clear().draw(); // Clear existing data before reloading
+
+  table.ajax
+    .url('php/server/events.php?action=getDeviceSessions&mac=' + getMac() + '&period=' + period)
+    .load(function () {
+      hideSpinner();
+    });
+}
+
+var sessionsPageInitialized = false;
+
+// -----------------------------------------------------------
+// Main init function
+function initDeviceSessionsPage()
+{
+  // Only proceed if .plugin-content is visible
+  if (!$('#panSessions:visible').length) {
+    return; // exit early if nothing is visible
+  }
+
+  // init page once
+  if (sessionsPageInitialized) return;
+  sessionsPageInitialized = true;
+
+  showSpinner();
+
   var sessionsRows        = 10;
   var period              = '1 month';
 
-  function initializeSessionsDatatable () {
-    // Sessions datatable
-    $('#tableSessions').DataTable({
-      'paging'      : true,
-      'lengthChange': true,
-      'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
-      'searching'   : true,
-      'ordering'    : true,
-      'info'        : true,
-      'autoWidth'   : false,
-      'order'       : [[0,'desc'], [1,'desc']],
+  initializeSessionsDatatable(sessionsRows);
+  loadSessionsData(period);
+}
 
-      // Parameters
-      'pageLength'  : sessionsRows,
+// -----------------------------------------------------------------------------
+// Recurring function to monitor the URL and reinitialize if needed
+function deviceSessionsPageUpdater() {
+  initDeviceSessionsPage();
 
-      'columnDefs'  : [
-          {visible:   false,  targets: [0]},
+  // Run updater again after delay
+  setTimeout(deviceSessionsPageUpdater, 200);
+}
 
-          // Replace HTML codes
-          {targets: [3,5],
-            'createdCell': function (td, cellData, rowData, row, col) {
-              $(td).html (translateHTMLcodes (cellData));
-          } },
-           // Date
-          {targets: [1,2],
-            "createdCell": function (td, cellData, rowData, row, col) {
-              // console.log(cellData);
-              
-              if (!cellData.includes("missing event") && !cellData.includes("..."))
-              {               
-                if (cellData.includes("+")) { // Check if timezone offset is present
-                  cellData = cellData.split('+')[0]; // Remove timezone offset
-                } 
-                // console.log(cellData);
-                result = localizeTimestamp(cellData);
-              } else
-              {
-                result = translateHTMLcodes(cellData)
-              }
-              
-              $(td).html (result);              
-          } }
-      ],
-
-      // Processing
-      'processing'  : true,
-      'language'    : {
-        processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
-                    '<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
-                    '</td></table>',
-        emptyTable: 'No data',
-        "lengthMenu": "<?= lang('Events_Tablelenght');?>",
-        "search":     "<?= lang('Events_Searchbox');?>: ",
-        "paginate": {
-            "next":       "<?= lang('Events_Table_nav_next');?>",
-            "previous":   "<?= lang('Events_Table_nav_prev');?>"
-        },
-        "info":           "<?= lang('Events_Table_info');?>",
-      }
-    });
-  }
-
-  function loadSessionsData(){
-    $('#tableSessions').DataTable().ajax.url('php/server/events.php?action=getDeviceSessions&mac=' + getMac() +'&period='+ period).load();
-  }
-
-  initializeSessionsDatatable();
-  loadSessionsData();
+// start updater
+deviceSessionsPageUpdater();  
 
 </script>

front/deviceDetailsTools.php

@@ -14,7 +14,7 @@
         <?= lang("DevDetail_Tab_Tools_Internet_Info_Description") ?>
     </h5>
     <br>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" id="internetinfo" class="btn btn-primary pa-btn" style="margin: auto;" onclick="internetinfo()">
             <?= lang("DevDetail_Tab_Tools_Internet_Info_Start") ?></button>
         <br>
@@ -33,13 +33,13 @@
         <?= lang("DevDetail_Copy_Device_Tooltip") ?>
     </h5>
     <br>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <select class="form-control" 
                 title="<?= lang('DevDetail_Copy_Device_Tooltip');?>" 
                 id="txtCopyFromDevice" >
                 <option value="lemp_loading" id="lemp_loading">Loading</option>
         </select>
-        <button type="button" id="internetinfo" class="btn btn-primary pa-btn" style="margin: auto;" onclick="()">
+        <button type="button" id="internetinfo" class="btn btn-primary pa-btn" style="margin: auto; margin-top:10px;" onclick="copyFromDevice()">
             <?= lang("BackDevDetail_Copy_Title") ?></button>
         <br>
     </div>
@@ -56,7 +56,7 @@
         <?= lang("DevDetail_Tools_WOL_noti_text") ?>
     </h5>
     <br>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" id="internetinfo" class="btn btn-primary pa-btn" style="margin: auto;" onclick="wakeonlan()">
             <?= lang("DevDetail_Tools_WOL_noti") ?></button>
         <br>
@@ -74,7 +74,7 @@
         <?= lang("DevDetail_button_DeleteEvents_Warning") ?>
     </h5>
     <br>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" 
                 class="btn btn-default pa-btn pa-btn-delete"  
                 style="margin-left:0px;" 
@@ -94,7 +94,7 @@
         <?= lang("DevDetail_CustomProps_reset_info") ?>
     </h5>
     <br>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" 
                 class="btn btn-default pa-btn pa-btn-delete"  
                 style="margin-left:0px;" 
@@ -116,7 +116,7 @@
         <?= lang("DevDetail_Tab_Tools_Speedtest_Description") ?>
     </h5>
     <br>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" id="speedtestcli" class="btn btn-primary pa-btn" style="margin: auto;" onclick="speedtestcli()">
             <?= lang("DevDetail_Tab_Tools_Speedtest_Start") ?></button>
         <br>
@@ -133,7 +133,7 @@
     <h5 class="">
         <?= lang("DevDetail_Tab_Tools_Traceroute_Description") ?>
     </h5>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" id="traceroute" class="btn btn-primary pa-btn" style="margin: auto;" onclick="traceroute()">
             <?= lang("DevDetail_Tab_Tools_Traceroute_Start") ?>
         </button>
@@ -151,7 +151,7 @@
     <h5 class="">
         <?= lang("DevDetail_Tab_Tools_Nslookup_Description") ?>
     </h5>
-    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+    <div style="width:100%; text-align: center;">
         <button type="button" id="nslookup" class="btn btn-primary pa-btn" style="margin: auto;" onclick="nslookup()">
             <?= lang("DevDetail_Tab_Tools_Nslookup_Start") ?>
         </button>
@@ -198,7 +198,7 @@
                 <?= lang("DevDetail_Nmap_buttonSkipDiscovery_text") ?>
             </li>
             <li>
-                <a onclick="setCache('activeMaintenanceTab', 'tab_Logging_id')" href="/maintenance.php#tab_Logging">
+                <a onclick="setCache('activeMaintenanceTab', 'tab_Logging_id')" href="maintenance.php#tab_Logging">
                     <?= lang("DevDetail_Nmap_resultsLink") ?>
                 </a>
             </li>
@@ -295,7 +295,7 @@
         function initCopyFromDevice() {
 
             const devices = getVisibleDevicesList()
-            console.log(devices);
+            // console.log(devices);
 
             const $select = $('#txtCopyFromDevice');
             $select.empty(); // Clear existing options
@@ -443,6 +443,37 @@
         }
 
         // init first time
-        initNmapButtons();
-        initCopyFromDevice();
+        // ----------------------------------------------------------- 
+        var toolsPageInitialized = false;
+
+        function initDeviceToolsPage()
+        {
+            // Only proceed if .panTools is visible
+            if (!$('#panTools:visible').length) {
+                return; // exit early if nothing is visible
+            }
+
+            // init page once
+            if (toolsPageInitialized) return;
+            toolsPageInitialized = true;
+
+            initNmapButtons();
+            initCopyFromDevice();
+
+            hideSpinner();
+
+        }
+
+        // -----------------------------------------------------------------------------
+        // Recurring function to monitor the URL and reinitialize if needed
+        function deviceToolsPageUpdater() {
+            initDeviceToolsPage();
+
+            // Run updater again after delay
+            setTimeout(deviceToolsPageUpdater, 200);
+        }
+
+        // start updater
+        deviceToolsPageUpdater();  
+
 </script>

front/devices.php

@@ -148,10 +148,7 @@ function main () {
 
   //initialize the table headers in the correct order
   var availableColumns = getSettingOptions("UI_device_columns").split(",");
-  headersDefaultOrder = availableColumns.map(val => getString(val));
-
-  console.log(headersDefaultOrder);
-  
+  headersDefaultOrder = availableColumns.map(val => getString(val));  
 
   var selectedColumns = JSON.parse(getSetting("UI_device_columns").replace(/'/g, '"'));
 
@@ -266,14 +263,16 @@ function getDevicesTotals() {
 function processDeviceTotals(devicesData) {
   // Define filter conditions and corresponding objects
   const filters = [
-    { status: 'my_devices', color: 'bg-aqua',   label: getString('Device_Shortcut_AllDevices'), icon: 'fa-laptop' },
-    { status: 'all',        color: 'bg-aqua',   label: getString('Gen_All_Devices'),            icon: 'fa-laptop' },
-    { status: 'connected',  color: 'bg-green',  label: getString('Device_Shortcut_Connected'),  icon: 'fa-plug' },
-    { status: 'favorites',  color: 'bg-yellow', label: getString('Device_Shortcut_Favorites'),  icon: 'fa-star' },
-    { status: 'new',        color: 'bg-yellow', label: getString('Device_Shortcut_NewDevices'), icon: 'fa-plus' },
-    { status: 'down',       color: 'bg-red',    label: getString('Device_Shortcut_DownOnly'),   icon: 'fa-warning' },
-    { status: 'archived',   color: 'bg-gray',   label: getString('Device_Shortcut_Archived'),   icon: 'fa-eye-slash' },
-    { status: 'offline',    color: 'bg-gray',   label: getString('Gen_Offline'),                icon: 'fa-xmark' }
+    { status: 'my_devices',         color: 'bg-aqua',   label: getString('Device_Shortcut_AllDevices'), icon: 'fa-laptop' },
+    { status: 'all',                color: 'bg-aqua',   label: getString('Gen_All_Devices'),            icon: 'fa-laptop' },
+    { status: 'connected',          color: 'bg-green',  label: getString('Device_Shortcut_Connected'),  icon: 'fa-plug' },
+    { status: 'favorites',          color: 'bg-yellow', label: getString('Device_Shortcut_Favorites'),  icon: 'fa-star' },
+    { status: 'new',                color: 'bg-yellow', label: getString('Device_Shortcut_NewDevices'), icon: 'fa-plus' },
+    { status: 'down',               color: 'bg-red',    label: getString('Device_Shortcut_DownOnly'),   icon: 'fa-warning' },
+    { status: 'archived',           color: 'bg-gray',   label: getString('Device_Shortcut_Archived'),   icon: 'fa-eye-slash' },
+    { status: 'offline',            color: 'bg-gray',   label: getString('Gen_Offline'),                icon: 'fa-xmark' },
+    { status: 'all_devices',        color: 'bg-gray',   label: getString('Gen_All_Devices'),            icon: 'fa-laptop' },
+    { status: 'network_devices',    color: 'bg-aqua',   label: getString('Network_Devices'),            icon: 'fa-sitemap fa-rotate-270' }
   ];
 
   // Initialize an empty array to store the final objects
@@ -299,13 +298,7 @@ function processDeviceTotals(devicesData) {
     }
   });
 
-  // Render info boxes/tile cards
-  console.log(getSetting('UI_hide_empty'));
-  
-  console.log(dataArray);
-  console.log(devicesData);
-  
-  
+  // Render info boxes/tile cards  
   renderInfoboxes(dataArray);
 }
 
@@ -357,8 +350,6 @@ function initFilters() {
                 // Clear any existing filters in the DOM
                 $('#columnFilters').empty();
 
-                console.log(displayedFilters);
-
                 // Ensure displayedFilters is an array and not empty
                 if (Array.isArray(displayedFilters) && displayedFilters.length > 0) {
                     $('#columnFiltersWrap').removeClass("hidden");
@@ -512,34 +503,36 @@ function collectFilters() {
 function mapColumnIndexToFieldName(index, tableColumnVisible) {
   // the order is important, don't change it!
   const columnNames = [
-    "devName", 
-    "devOwner", 
-    "devType", 
-    "devIcon", 
-    "devFavorite", 
-    "devGroup", 
-    "devFirstConnection", 
-    "devLastConnection", 
-    "devLastIP", 
-    "devIsRandomMac",   // resolved on the fly
-    "devStatus", // resolved on the fly
-    "devMac", 
-    "devIpLong", //formatIPlong(device.devLastIP) || "",  // IP orderable
-    "rowid", 
-    "devParentMAC", 
-    "devParentChildrenCount",  // resolved on the fly
-    "devLocation",
-    "devVendor", 
-    "devParentPort", 
-    "devGUID", 
-    "devSyncHubNode", 
-    "devSite", 
-    "devSSID", 
-    "devSourcePlugin",
-    "devPresentLastScan",
-    "devAlertDown",
-    "devCustomProps",
-    "devFQDN"
+    "devName",                 // 0
+    "devOwner",                // 1
+    "devType",                 // 2
+    "devIcon",                 // 3
+    "devFavorite",             // 4
+    "devGroup",                // 5
+    "devFirstConnection",      // 6
+    "devLastConnection",       // 7
+    "devLastIP",               // 8
+    "devIsRandomMac",          // 9 resolved on the fly
+    "devStatus",               // 10 resolved on the fly
+    "devMac",                  // 11
+    "devIpLong",               // 12 formatIPlong(device.devLastIP) || "",  // IP orderable
+    "rowid",                   // 13
+    "devParentMAC",            // 14
+    "devParentChildrenCount",  // 15 resolved on the fly
+    "devLocation",             // 16
+    "devVendor",               // 17
+    "devParentPort",           // 18
+    "devGUID",                 // 19
+    "devSyncHubNode",          // 20
+    "devSite",                 // 21
+    "devSSID",                 // 22
+    "devSourcePlugin",         // 23
+    "devPresentLastScan",      // 24
+    "devAlertDown",            // 25
+    "devCustomProps",          // 26
+    "devFQDN",                 // 27
+    "devParentRelType",        // 28
+    "devReqNicsOnline"         // 29
   ];
 
   // console.log("OrderBy: " + columnNames[tableColumnOrder[index]]);  
@@ -562,15 +555,17 @@ function initializeDatatable (status) {
 
   // Define color & title for the status selected
   switch (deviceStatus) {
-    case 'my_devices': tableTitle = getString('Device_Shortcut_AllDevices');  color = 'aqua';    break;
-    case 'connected':  tableTitle = getString('Device_Shortcut_Connected');   color = 'green';   break;
-    case 'all':        tableTitle = getString('Gen_All_Devices');             color = 'aqua';    break;
-    case 'favorites':  tableTitle = getString('Device_Shortcut_Favorites');   color = 'yellow';  break;
-    case 'new':        tableTitle = getString('Device_Shortcut_NewDevices');  color = 'yellow';  break;
-    case 'down':       tableTitle = getString('Device_Shortcut_DownOnly');    color = 'red';     break;
-    case 'archived':   tableTitle = getString('Device_Shortcut_Archived');    color = 'gray';    break;
-    case 'offline':    tableTitle = getString('Gen_Offline');                 color = 'gray';    break;
-    default:           tableTitle = getString('Device_Shortcut_Devices');     color = 'gray';    break;
+    case 'my_devices':      tableTitle = getString('Device_Shortcut_AllDevices');  color = 'aqua';    break;
+    case 'connected':       tableTitle = getString('Device_Shortcut_Connected');   color = 'green';   break;
+    case 'all':             tableTitle = getString('Gen_All_Devices');             color = 'aqua';    break;
+    case 'favorites':       tableTitle = getString('Device_Shortcut_Favorites');   color = 'yellow';  break;
+    case 'new':             tableTitle = getString('Device_Shortcut_NewDevices');  color = 'yellow';  break;
+    case 'down':            tableTitle = getString('Device_Shortcut_DownOnly');    color = 'red';     break;
+    case 'archived':        tableTitle = getString('Device_Shortcut_Archived');    color = 'gray';    break;
+    case 'offline':         tableTitle = getString('Gen_Offline');                 color = 'gray';    break;
+    case 'all_devices':     tableTitle = getString('Gen_All_Devices');             color = 'gray';    break;
+    case 'network_devices': tableTitle = getString('Network_Devices');             color = 'aqua';    break;
+    default:                tableTitle = getString('Device_Shortcut_Devices');     color = 'gray';    break;
   } 
 
   // Set title and color
@@ -599,7 +594,6 @@ function initializeDatatable (status) {
     }    
   }
 
-  // todo: dynamically filter based on status
   var table = $('#tableDevices').DataTable({
     "serverSide": true,
     "processing": true,
@@ -650,6 +644,8 @@ function initializeDatatable (status) {
                 devIpLong
                 devCustomProps
                 devFQDN
+                devParentRelType
+                devReqNicsOnline
               }
               count
             }
@@ -687,13 +683,19 @@ function initializeDatatable (status) {
 
         return JSON.stringify(query);  // Send the JSON request
       },
-      "dataSrc": function (json) {
-        console.log(json);
+      "dataSrc": function (res) {
 
-        // Set the total number of records for pagination
-        json.recordsTotal = json.devices.count || 0;
-        json.recordsFiltered = json.devices.count || 0;
+        console.log("Raw response:", res);
+        const json = res["data"];
 
+        // Set the total number of records for pagination at the *root level* so DataTables sees them
+        res.recordsTotal = json.devices.count || 0;
+        res.recordsFiltered = json.devices.count || 0;
+
+        // console.log("recordsTotal:", res.recordsTotal, "recordsFiltered:", res.recordsFiltered);
+        // console.log("tableRows:", tableRows);
+
+        // Return only the array of rows for the table
         return json.devices.devices.map(device => {
             // Convert each device record into the required DataTable row format
             // Order has to be the same as in the UI_device_columns setting options
@@ -707,10 +709,10 @@ function initializeDatatable (status) {
                 device.devFirstConnection || "",
                 device.devLastConnection || "",
                 device.devLastIP || "",
-                device.devIsRandomMac || "",  // Custom logic for randomized MAC
+                device.devIsRandomMac || "",
                 device.devStatus || "",
-                device.devMac || "",  // hidden
-                device.devIpLong || "",  // IP orderable
+                device.devMac || "",
+                device.devIpLong || "",
                 device.rowid || "",
                 device.devParentMAC || "",
                 device.devParentChildrenCount || 0,
@@ -725,7 +727,9 @@ function initializeDatatable (status) {
                 device.devPresentLastScan || "",
                 device.devAlertDown || "",
                 device.devCustomProps || "",
-                device.devFQDN || ""
+                device.devFQDN || "",
+                device.devParentRelType || "",
+                device.devReqNicsOnline || 0
             ];
 
             const newRow = [];
@@ -733,7 +737,6 @@ function initializeDatatable (status) {
             for (let index = 0; index < tableColumnOrder.length; index++) {
                 newRow.push(originalRow[tableColumnOrder[index]]);
             }
-
             return newRow;
         });
       }
@@ -770,17 +773,34 @@ function initializeDatatable (status) {
 
       // Device Name and FQDN
       {targets: [mapIndx(0), mapIndx(27)],
-        'createdCell': function (td, cellData, rowData, row, col) {      
-            
+        'createdCell': function (td, cellData, rowData, row, col) {    
+                      
             // console.log(cellData)      
-            $(td).html ('<b class="anonymizeDev"><a href="deviceDetails.php?mac='+ rowData[mapIndx(11)] +'" class="">'+ cellData +'</a></b>');
+            $(td).html (
+              `<b class="anonymizeDev "
+              >
+                <a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="hover-node-info"
+                  data-name="${cellData}"
+                  data-ip="${rowData[mapIndx(8)]}"
+                  data-mac="${rowData[mapIndx(11)]}"
+                  data-vendor="${rowData[mapIndx(17)]}"
+                  data-type="${rowData[mapIndx(2)]}"
+                  data-firstseen="${rowData[mapIndx(6)]}"
+                  data-lastseen="${rowData[mapIndx(7)]}"
+                  data-relationship="${rowData[mapIndx(28)]}"
+                  data-status="${rowData[mapIndx(10)]}"
+                  data-present="${rowData[mapIndx(24)]}"
+                  data-alert="${rowData[mapIndx(25)]}"
+                  data-icon="${rowData[mapIndx(3)]}">
+                ${cellData}
+                </a>
+              </b>`
+            );
       } },
 
       // Connected Devices       
       {targets: [mapIndx(15)],
-        'createdCell': function (td, cellData, rowData, row, col) {   
-
-                
+        'createdCell': function (td, cellData, rowData, row, col) {                   
           // check if this is a network device
           if(getSetting("NETWORK_DEVICE_TYPES").includes(`'${rowData[mapIndx(2)]}'`)   )
           {
@@ -822,7 +842,7 @@ function initializeDatatable (status) {
                             <a href="http://${cellData}" class="pointer" target="_blank">
                                 ${cellData}
                             </a>
-                            <span class="alignRight">
+                            <span class="alignRight lockIcon">
                               <a href="https://${cellData}" class="pointer" target="_blank">
                                 <i class="fa fa-lock "></i>
                               </a>
@@ -886,6 +906,28 @@ function initializeDatatable (status) {
           }
       } },
 
+      // Parent Mac      
+      {targets: [mapIndx(14)],
+        'createdCell': function (td, cellData, rowData, row, col) {
+          if (!isValidMac(cellData)) {
+            $(td).html('');
+            return;
+          }
+
+          const data = {
+            id: cellData,       // MAC address
+            text: cellData      // Optional display text (you could use a name or something else)
+          };
+
+          spanWrap = $(`<span class="custom-badge text-white"></span>`)
+
+          $(td).html(spanWrap);
+
+          const chipHtml = renderDeviceLink(data, spanWrap, true); // pass the td as container
+
+          $(spanWrap).append(chipHtml); 
+        } 
+      },
       // Status color      
       {targets: [mapIndx(10)],
         'createdCell': function (td, cellData, rowData, row, col) {
@@ -893,25 +935,14 @@ function initializeDatatable (status) {
           tmp_devPresentLastScan = rowData[mapIndx(24)]
           tmp_devAlertDown = rowData[mapIndx(25)]
 
-          if (tmp_devPresentLastScan == 1)
-          {
-            css = "green text-white statusOnline"
-            icon = '<i class="fa-solid fa-plug"></i>'
-          } else if (tmp_devPresentLastScan != 1 && tmp_devAlertDown == 1)
-          {
-            css = "red text-white statusDown"
-            icon = '<i class="fa-solid fa-triangle-exclamation"></i>'
-          } else if(tmp_devPresentLastScan != 1)
-          {
-            css = "gray text-white statusOffline"
-            icon = '<i class="fa-solid fa-xmark"></i>'
-          } else
-          {
-            css = "gray text-white statusUnknown"
-            icon = '<i class="fa-solid fa-question"></i>'
-          }
+          const badge = getStatusBadgeParts(
+            rowData[mapIndx(24)],   // tmp_devPresentLastScan
+            rowData[mapIndx(25)],   // tmp_devAlertDown
+            rowData[mapIndx(11)],  // MAC
+            cellData               // optional text
+          );
       
-          $(td).html (`<a href="deviceDetails.php?mac=${rowData[mapIndx(11)]}" class="badge bg-${css}">${icon} ${cellData.replace('-', '')}</a>`);
+          $(td).html (`<a href="${badge.url}" class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.text}</a>`);
       } },
     ],
     
@@ -970,7 +1001,7 @@ function initializeDatatable (status) {
               }, debounceTime);
           });
 
-          
+          initHoverNodeInfo(); 
           hideSpinner();
           
     },
@@ -980,9 +1011,7 @@ function initializeDatatable (status) {
                 
     }
     
-  });
-
-  
+  });  
 }
 
 
@@ -1035,40 +1064,24 @@ function multiEditDevices()
 // -----------------------------------------------------------------------------
 // Function collects shown devices from the DataTable  
 function getMacsOfShownDevices() {
-  rows = $('#tableDevices')[0].rows;
-  macs = [];
+  var table = $('#tableDevices').DataTable();
 
-  // var devicesDataTableData = $('#tableDevices').dataTable().fnGetData();
-  var devicesDataTableData = $('#tableDevices').DataTable().rows({ selected: false, page: 'current' }).data().toArray();
+  var macs = [];
 
-  console.log(devicesDataTableData);
+  // Get all row indexes on current page, in display order
+  var allIndexes = table.rows({ page: 'current' }).indexes();
 
-  var selectedDevices = [];
-
-  // first row is the heading, skip
-  for (var i = 1; i < rows.length; i++) {
-    var rowIndex = rows[i]._DT_RowIndex;
-    
-    // Ensure the rowIndex is valid and within bounds of devicesDataTableData
-    if (rowIndex >= 0 && rowIndex < devicesDataTableData.length) {
-      selectedDevices.push(devicesDataTableData[rowIndex]);    
-    } else {
-      console.log(`Invalid rowIndex: ${rowIndex} at row ${i}`);
+  allIndexes.each(function(idx) {
+    var rowData = table.row(idx).data();
+    if (rowData) {
+      macs.push(rowData[mapIndx(11)]);  // mapIndx(11) == MAC column
     }
-  }
-
-  for (var j = 0; j < selectedDevices.length; j++) {
-    // Ensure that selectedDevices[j] is not undefined
-    if (selectedDevices[j]) {
-      macs.push(selectedDevices[j][mapIndx(11)]);  // mapIndx(11) == MAC
-    } else {
-      console.log(`selectedDevices[${j}] is undefined`);
-    }
-  }
+  });
 
   return macs;
 }
 
+
 // -----------------------------------------------------------------------------
 // Handle custom actions/properties on a device    
 function renderCustomProps(custProps, mac) {

front/events.php

@@ -2,6 +2,10 @@
   require 'php/templates/header.php';  
 ?>
 
+<script>
+  showSpinner();
+</script>
+
 <!-- ----------------------------------------------------------------------- -->
  
 <!-- Page ------------------------------------------------------------------ -->
@@ -67,7 +71,7 @@
               <div class="inner"> <h3 id="eventsNewDevices"> -- </h3>
                 <p class="infobox_label"><?= lang('Events_Shortcut_NewDevices');?></p>
               </div>
-              <div class="icon"> <i class="ion ion-plus-round text-yellow-40"></i> </div>
+              <div class="icon"> <i class="fa-solid fa-circle-plus text-yellow-40"></i> </div>
             </div>
           </a>
         </div>
@@ -238,7 +242,7 @@ function initializeDatatable () {
     // Processing
     'processing'  : true,
     'language'    : {
-      processing: '<table><td width="130px" align="middle"><?= lang("Events_Loading");?></td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>',
+      processing: '<table><td width="130px" align="middle"><?= lang("Events_Loading");?></td><td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td></table>',
       emptyTable: 'No data',
       "lengthMenu": "<?= lang('Events_Tablelenght');?>",
       "search":     "<?= lang('Events_Searchbox');?>: ",
@@ -247,6 +251,9 @@ function initializeDatatable () {
           "previous":   "<?= lang('Events_Table_nav_prev');?>"
       },
       "info":           "<?= lang('Events_Table_info');?>",
+    },
+    initComplete: function(settings, json) {
+        hideSpinner(); // Called after the DataTable is fully initialized
     }
   });
 

front/img/manifest.json

@@ -4,7 +4,7 @@
     "display": "standalone",
     "icons": [
     {
-      "src": "",
+      "src": "/img/NetAlertX_logo.png",
       "sizes": "180x180",
       "type": "image/png"
     }

front/index.php

@@ -99,18 +99,6 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
 
   <!-- Favicon -->
   <link id="favicon" rel="icon" type="image/x-icon" href="img/NetAlertX_logo.png">
-
-  <!-- Dark-Mode Patch -->
-<?php
-switch ($UI_THEME) {
-  case "Dark":
-    echo '<link rel="stylesheet" href="css/dark-patch.css">';
-    break;
-  case "System":
-    echo '<link rel="stylesheet" href="css/system-dark-patch.css">';
-    break;
-}
-?>
   <link rel="stylesheet" href="/css/offline-font.css">
 </head>
 <body class="hold-transition login-page col-sm-12 col-sx-12">

front/js/common.js

@@ -12,7 +12,7 @@ var timerRefreshData = ''
 
 var   emptyArr      = ['undefined', "", undefined, null, 'null'];
 var   UI_LANG       = "English";
-const allLanguages  = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "pt_br", "tr_tr", "zh_cn", "cs_cz", "ar_ar", "ca_ca", "uk_ua"]; // needs to be same as in lang.php
+const allLanguages  = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "pt_br", "pt_pt", "tr_tr", "zh_cn", "cs_cz", "ar_ar", "ca_ca", "uk_ua"]; // needs to be same as in lang.php
 var   settingsJSON  = {}
 
 
@@ -328,6 +328,9 @@ function getLangCode() {
       case 'Portuguese (pt_br)':
         lang_code = 'pt_br';
         break;
+      case 'Portuguese (pt_pt)':
+        lang_code = 'pt_pt';
+        break;
       case 'Turkish (tr_tr)':
         lang_code = 'tr_tr';
         break;
@@ -362,31 +365,72 @@ function getLangCode() {
 // -----------------------------------------------------------------------------
 // String utilities
 // -----------------------------------------------------------------------------
+function localizeTimestamp(input) {
+  let tz = getSetting("TIMEZONE") || 'Europe/Berlin';
+  input = String(input || '').trim();
 
+  // ✅ 1. Unix timestamps (10 or 13 digits)
+  if (/^\d+$/.test(input)) {
+    const ms = input.length === 10 ? parseInt(input, 10) * 1000 : parseInt(input, 10);
+    return new Intl.DateTimeFormat('default', {
+      timeZone: tz,
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+      hour12: false
+    }).format(new Date(ms));
+  }
 
-function localizeTimestamp(result)
-{
-  // contains TZ in format Europe/Berlin
-  tz = getSetting("TIMEZONE")
+  // ✅ 2. European DD/MM/YYYY
+  let match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})(?:[ ,]+(\d{1,2}:\d{2}(?::\d{2})?))?(.*)$/);
+  if (match) {
+    let [ , d, m, y, t = "00:00:00", tzPart = "" ] = match;
+    const iso = `${y}-${m.padStart(2,'0')}-${d.padStart(2,'0')}T${t.length===5?t+":00":t}${tzPart}`;
+    return formatSafe(iso, tz);
+  }
 
-  // set default if not available or app still loading
-  tz == ""  ? tz = 'Europe/Berlin' : tz = tz;
-  
-  const date = new Date(result); // Assumes result is a timestamp or ISO string
-  const formatter = new Intl.DateTimeFormat('default', {
-    timeZone: tz,
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: false // change to true if you want AM/PM format
-  });
+  // ✅ 3. US MM/DD/YYYY
+  match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})(?:[ ,]+(\d{1,2}:\d{2}(?::\d{2})?))?(.*)$/);
+  if (match) {
+    let [ , m, d, y, t = "00:00:00", tzPart = "" ] = match;
+    const iso = `${y}-${m.padStart(2,'0')}-${d.padStart(2,'0')}T${t.length===5?t+":00":t}${tzPart}`;
+    return formatSafe(iso, tz);
+  }
 
-  return formatter.format(date);
+  // ✅ 4. ISO-style (with T, Z, offsets)
+  match = input.match(/^(\d{4}-\d{1,2}-\d{1,2})[ T](\d{1,2}:\d{2}(?::\d{2})?)(Z|[+-]\d{2}:?\d{2})?$/);
+  if (match) {
+    let [ , ymd, time, offset = "" ] = match;
+    // normalize to YYYY-MM-DD
+    let [y, m, d] = ymd.split('-').map(x => x.padStart(2,'0'));
+    const iso = `${y}-${m}-${d}T${time.length===5?time+":00":time}${offset}`;
+    return formatSafe(iso, tz);
+  }
+
+  // ✅ 5. RFC2822 / "25 Aug 2025 13:45:22 +0200"
+  match = input.match(/^\d{1,2} [A-Za-z]{3,} \d{4}/);
+  if (match) {
+    return formatSafe(input, tz);
+  }
+
+  // ✅ 6. Fallback (whatever Date() can parse)
+  return formatSafe(input, tz);
+
+  function formatSafe(str, tz) {
+    const date = new Date(str);
+    if (!isFinite(date)) {
+      console.error(`ERROR: Couldn't parse date: '${str}' with TIMEZONE ${tz}`);
+      return 'Failed conversion - Check browser console';
+    }
+    return new Intl.DateTimeFormat('default', {
+      timeZone: tz,
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+      hour12: false
+    }).format(date);
+  }
 }
 
+
 // ----------------------------------------------------
 /**
  * Replaces double quotes within single-quoted strings, then converts all single quotes to double quotes,
@@ -563,7 +607,7 @@ function createDeviceLink(input)
 {
   if(checkMacOrInternet(input))
   {
-    return `<span class="anonymizeMac"><a href="/deviceDetails.php?mac=${input}" target="_blank">${getNameByMacAddress(input)}</a><span>`
+    return `<span class="anonymizeMac"><a href="/deviceDetails.php?mac=${input}" target="_blank">${getDevDataByMac(input, "devName")}</a><span>`
   }
 
   return input;
@@ -767,7 +811,6 @@ function forceLoadUrl(relativeUrl) {
   
 }
 
-
 // -----------------------------------------------------------------------------
 function navigateToDeviceWithIp (ip) {
 
@@ -790,11 +833,6 @@ function navigateToDeviceWithIp (ip) {
   });
 }
 
-// -----------------------------------------------------------------------------
-function getNameByMacAddress(macAddress) {
-  return getDevDataByMac(macAddress, "devName")
-}
-
 // -----------------------------------------------------------------------------
 // Check if MAC or Internet
 function checkMacOrInternet(inputStr) {
@@ -967,7 +1005,7 @@ function getDevDataByMac(macAddress, dbColumn) {
 
   if (!devicesCache || devicesCache == "") {
       console.error(`Session variable "${sessionDataKey}" not found.`);
-      return "Unknown";
+      return null;
   }
 
   const devices = JSON.parse(devicesCache);
@@ -986,18 +1024,16 @@ function getDevDataByMac(macAddress, dbColumn) {
       }
   }
 
-  return "Unknown"; // Return a default value if MAC address is not found
+  console.error("⚠ Device with MAC not found:" + macAddress)
+  return null; // Return a default value if MAC address is not found
 }
 
 // -----------------------------------------------------------------------------
 // Cache the devices as one JSON
 function cacheDevices()
 { 
-
   return new Promise((resolve, reject) => {
 
-    // if(!getCache('completedCalls').includes('cacheDevices'))
-    // {
     $.get('php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(data) {    
         
         // console.log(data)
@@ -1021,8 +1057,7 @@ function cacheDevices()
         // console.log(getCache('devicesListAll_JSON'))
       }).then(() => handleSuccess('cacheDevices', resolve())).catch(() => handleFailure('cacheDevices', reject("cacheDevices already completed"))); // handle AJAX synchronization
     } 
-  // }
-);
+  );
 }
 
 var devicesListAll_JSON      = [];   // this will contain a list off all devices 
@@ -1063,47 +1098,102 @@ function getGuid() {
 // -----------------------------------------------------------------------------
 //  Loading Spinner overlay
 // -----------------------------------------------------------------------------
-spinnerHtml = `
-    <!-- spinner -->
-    <div id="loadingSpinner" style="display: block">
-      <div class="pa_semitransparent-panel"></div>
-      <div class="panel panel-default pa_spinner">
-        <table>
-          <td width="130px" align="middle">_text_</td>
-          <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
-        </table>
-      </div>
-    </div>
-    `
 
-function showSpinner(stringKey='Loading')
-{
+let spinnerTimeout = null;
+let animationTime = 300
 
-  if(stringKey == "")
-  {
-    text = ''
-  } else
-  {
-    text = getString(stringKey)
+function showSpinner(stringKey = 'Loading') {
+  const text = isEmpty(stringKey) ? "Loading" : getString(stringKey || "Loading");
+  const spinner = $("#loadingSpinner");
+  const target = $(".spinnerTarget").first(); // Only use the first one if multiple exist
+
+  $("#loadingSpinnerText").text(text);
+
+  if (target.length) {
+    // Position relative to target
+    const offset = target.offset();
+    const width = target.outerWidth();
+    const height = target.outerHeight();
+
+    spinner.css({
+      position: "absolute",
+      top: offset.top,
+      left: offset.left,
+      width: width,
+      height: height,
+      zIndex: 800
+    });
+  } else {
+    // Fullscreen fallback
+    spinner.css({
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 800
+    });
   }
 
-  text = isEmpty(text) ?  "Loading" : text;
-
-  if($("#loadingSpinner").length)
-  {    
-    $("#loadingSpinner").show();
-  }
-  else{    
-    $(".wrapper").append(spinnerHtml.replace('_text_',text))
-  }
-}
-// -----------------------------------------------------------------------------
-function hideSpinner()
-{
-  $("#loadingSpinner").hide()
+  requestAnimationFrame(() => {
+    spinner.addClass("visible");
+    spinner.fadeIn(animationTime);
+  });
 }
 
+function hideSpinner() {
+  clearTimeout(spinnerTimeout);
+  const spinner = $("#loadingSpinner");
 
+  if (!spinner.length) return;
+
+  const target = $(".spinnerTarget").first();
+
+  if (target.length) {
+    // Lock position to target
+    const offset = target.offset();
+    const width = target.outerWidth();
+    const height = target.outerHeight();
+
+    spinner.css({
+      position: "absolute",
+      top: offset.top,
+      left: offset.left,
+      width: width,
+      height: height,
+      zIndex: 800
+    });
+  } else {
+    // Fullscreen fallback
+    spinner.css({
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 800
+    });
+  }
+
+  // Trigger fade-out and only remove styles AFTER fade completes AND display is none
+  spinner.removeClass("visible").fadeOut(animationTime, () => {
+    // Ensure it's really hidden before resetting styles
+    spinner.css({
+      display: "none"
+    });
+
+    spinner.css({
+      position: "",
+      top: "",
+      left: "",
+      width: "",
+      height: "",
+      zIndex: ""
+    });
+  });
+}
+
+    
 // --------------------------------------------------------
 // Calls a backend function to add a front-end event to an execution queue
 function updateApi(apiEndpoints)

front/js/modal.js

@@ -161,6 +161,139 @@ function showModalFieldInput(
   $(`#${prefix}`).modal("show");
 }
 
+// -----------------------------------------------------------------------------
+function showModalPopupForm(
+  title,
+  message,
+  btnCancel = getString("Gen_Cancel"),
+  btnOK = getString("Gen_Okay"),
+  curValue = null,
+  popupFormJson = null,
+  parentSettingKey = null,
+  triggeredBy = null
+) {
+  // set captions
+  prefix = "modal-form";
+  console.log(popupFormJson);
+
+  $(`#${prefix}-title`).html(title);
+  $(`#${prefix}-message`).html(message);
+  $(`#${prefix}-cancel`).html(btnCancel);
+  $(`#${prefix}-OK`).html(btnOK);
+
+  // if curValue not null 
+
+  if (curValue)
+  {
+    initialValues = JSON.parse(atob(curValue));    
+  }
+
+  outputHtml = "";
+
+  if (Array.isArray(popupFormJson)) {
+    popupFormJson.forEach((field, index) => {
+        // You'll need to define these or map them from `field`
+        const setKey = field.function || `field_${index}`;        
+        const setName = getString(`${parentSettingKey}_popupform_${setKey}_name`);
+        const labelClasses = "col-sm-2"; // example, or from your obj.labelClasses
+        const inputClasses = "col-sm-10"; // example, or from your obj.inputClasses
+        let initialValue = '';
+        if (curValue && Array.isArray(initialValues)) {
+          const match = initialValues.find(
+            v => v[1] == setKey
+          );
+          if (match) {
+            initialValue = match[3];
+          }
+        }
+
+        const fieldOptionsOverride = field.type?.elements[0]?.elementOptions || [];        
+        const setValue = initialValue;
+        const setType = JSON.stringify(field.type); 
+        const setEvents = field.events || [];  // default to empty array if missing
+        const setObj = { setKey, setValue, setType, setEvents };
+
+        // Generate the input field HTML
+        const inputFormHtml = `
+                              <div class="form-group col-xs-12">
+                                  <label id="${setKey}_label" class="${labelClasses}"> ${setName}
+                                      <i my-set-key="${parentSettingKey}_popupform_${setKey}"
+                                          title="${getString("Settings_Show_Description")}" 
+                                          class="fa fa-circle-info pointer helpIconSmallTopRight" 
+                                          onclick="showDescriptionPopup(this)">
+                                      </i>
+                                  </label>
+                                  <div class="${inputClasses}">
+                                      ${generateFormHtml(
+                                        null, // settingsData only required for datatables
+                                        setObj, 
+                                        null, 
+                                        fieldOptionsOverride, 
+                                        null
+                                      )}
+                                  </div>
+                              </div>
+                  `;
+
+        // Append to result
+        outputHtml += inputFormHtml;
+    });
+  }
+  
+  $(`#modal-form-plc`).html(outputHtml);
+
+  // Bind OK button click event
+  $(`#${prefix}-OK`).off("click").on("click", function() {
+    let settingsArray = [];
+    if (Array.isArray(popupFormJson)) {
+        popupFormJson.forEach(field => {
+            collectSetting(
+                `${parentSettingKey}_popupform`, // prefix
+                field.function,                  // setCodeName
+                field.type,                      // setType (object)
+                settingsArray
+            );
+        });
+    }
+
+    // Encode settings
+    const jsonData = JSON.stringify(settingsArray);
+    const encodedValue = btoa(jsonData);
+
+    // Get label from the FIRST field (value in 4th column)
+    const label = settingsArray[0][3]
+
+    // Add new option to target select
+    const selectId = parentSettingKey;
+
+    // If triggered by an option, update it; otherwise append new
+    if (triggeredBy && $(triggeredBy).is("option")) {
+      // Update existing option
+      $(triggeredBy)
+        .attr("value", encodedValue)
+        .text(label);
+    } else {
+      const newOption = $("<option class='interactable-option'></option>")
+          .attr("value", encodedValue)
+          .text(label);
+  
+      $("#" + selectId).append(newOption);
+      initListInteractionOptions(newOption);
+    }
+
+    console.log("Collected popup form settings:", settingsArray);
+
+    if (typeof modalCallbackFunction === "function") {
+        modalCallbackFunction(settingsArray);
+    }
+
+    $(`#${prefix}`).modal("hide");
+  });
+
+  // Show modal
+  $(`#${prefix}`).modal("show");
+}
+
 // -----------------------------------------------------------------------------
 function modalDefaultOK() {
   // Hide modal
@@ -224,7 +357,7 @@ function modalWarningOK() {
     } else if (typeof modalCallbackFunction === "string" && typeof window[modalCallbackFunction] === "function") {
       window[modalCallbackFunction](); // Call via window
     } else {
-      console.error("Invalid callback function");
+      console.error("Invalid callback function: " + modalCallbackFunction);
     }
   }, 100);
 }

front/js/settings_utils.js

@@ -67,6 +67,15 @@ function getPluginConfig(pluginsData, prefix) {
   return result;
 }
 
+// ----------------------------------------
+// Show the description of a setting
+function showDescriptionPopup(e) {
+
+  console.log($(e).attr("my-set-key"));    
+
+  showModalOK("Info", getString($(e).attr("my-set-key") + '_description'))
+}
+
 // -------------------------------------------------------------------
 // Generate plugin HTML card based on prefixes in an array
 function pluginCards(prefixesOfEnabledPlugins, includeSettings) {
@@ -237,13 +246,6 @@ function settingsCollectedCorrectly(settingsArray, settingsJSON_DB) {
 // Manipulating Editable List options
 // -------------------------------------------------------------------
 
-// ---------------------------------------------------------
-// Add row to datatable
-function addDataTableRow(el)
-{
-  alert("a")
-}
-
 // ---------------------------------------------------------
 // Clone datatable row
 function cloneDataTableRow(el){
@@ -299,6 +301,33 @@ function removeDataTableRow(el) {
   }
 }
 
+// ---------------------------------------------------------
+// Add item via pop up form dialog
+function addViaPopupForm(element) {
+  console.log(element);
+
+  const toId = $(element).attr("my-input-to");
+  const curValue = $(`#${toId}`).val();
+  const parsed = JSON.parse(atob($(`#${toId}`).data("elementoptionsbase64")));  
+  const popupFormJson = parsed.find(obj => "popupForm" in obj)?.popupForm ?? null;
+  
+  console.log(`toId  | curValue: ${toId}  | ${curValue}`);
+
+  showModalPopupForm(
+    `<i class="fa-solid fa-square-plus"></i> ${getString("Gen_Add")}`,  // title
+    "",                                                                 // message
+    getString("Gen_Cancel"),                                            // btnCancel
+    getString("Gen_Add"),                                               // btnOK
+    null,                                                               // curValue
+    popupFormJson,                                                      // popupform
+    toId,                                                               // parentSettingKey
+    element                                                             // triggeredBy
+  );
+
+  // flag something changes to prevent navigating from page
+  settingsChanged();
+}
+
 // ---------------------------------------------------------
 // Add item to list
 function addList(element, clearInput = true) {
@@ -363,8 +392,6 @@ function removeAllOptions(element) {
 function selectAll(element) {
   settingsChanged();
 
-  // Get the <select> element with the class 'deviceSelector'
-  // var selectElement = $('.deviceSelector select');
   var selectElement = $(`#${$(element).attr("my-input-to")}`);
   
   // Iterate over each option within the select element
@@ -381,8 +408,6 @@ function selectAll(element) {
 // UN-Select All
 function unselectAll(element) {
   settingsChanged();
-  // Get the <select> element with the class 'deviceSelector'
-  // var selectElement = $('.deviceSelector select');
   var selectElement = $(`#${$(element).attr("my-input-to")}`);
   
   // Iterate over each option within the select element
@@ -399,8 +424,7 @@ function unselectAll(element) {
 // Trigger change to open up the dropdown filed
 function selectChange(element) {
   settingsChanged();
-  // Get the <select> element with the class 'deviceSelector'
-  // var selectElement = $('.deviceSelector select');
+
   var selectElement = $(`#${$(element).attr("my-input-to")}`);
   
   selectElement.parent().find("input").focus().click();
@@ -432,18 +456,41 @@ function initListInteractionOptions(element) {
       // Perform action based on click count
       if (clickCounter === 1) {
         // Single-click action
-        showModalFieldInput(
-          `<i class="fa fa-pen-to-square"></i> ${getString(
-            "Gen_Update_Value"
-          )}`,
-          getString("settings_update_item_warning"),
-          getString("Gen_Cancel"),
-          getString("Gen_Update"),
-          $option.html(),
-          function () {
-            updateOptionItem($option, $(`#modal-field-input-field`).val());
-          }
-        );
+
+        const $parent = $option.parent();
+        const transformers = $parent.attr("my-transformers");
+
+        if (transformers && transformers === "name|base64") {
+          // Parent has my-transformers="name|base64"
+          const toId =  $parent.attr("id");
+          const curValue = $option.val();
+          const parsed = JSON.parse(atob($parent.data("elementoptionsbase64")));  
+          const popupFormJson = parsed.find(obj => "popupForm" in obj)?.popupForm ?? null;
+                  
+          showModalPopupForm(
+            `<i class="fa fa-pen-to-square"></i> ${getString("Gen_Update_Value")}`, // title
+            "",                                                                     // message
+            getString("Gen_Cancel"),                                                // btnCancel
+            getString("Gen_Update"),                                                // btnOK
+            curValue,                                                               // curValue
+            popupFormJson,                                                          // popupform
+            toId,                                                                   // parentSettingKey
+            this                                                                    // triggeredBy
+          );
+        } else {
+          // Fallback to normal field input
+          showModalFieldInput(
+            `<i class="fa fa-pen-to-square"></i> ${getString("Gen_Update_Value")}`,
+            getString("settings_update_item_warning"),
+            getString("Gen_Cancel"),
+            getString("Gen_Update"),
+            $option.html(),
+            function () {
+              updateOptionItem($option, $(`#modal-field-input-field`).val());
+            }
+          );
+        }
+
       } else if (clickCounter === 2) {
         // Double-click action
         removeOptionItem($option);
@@ -624,10 +671,9 @@ function generateOptionsOrSetOptions(
   // console.log( setKey);
 
   // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
+  // obj.push({ id: item, name: item })
   options = arrayToObject(createArray(overrideOptions ? overrideOptions : getSettingOptions(setKey)))
 
-  
-  
   // Call to render lists
   renderList(
     options,
@@ -637,8 +683,6 @@ function generateOptionsOrSetOptions(
     targetField,
     transformers
   );
-  
-  
 }
 
 
@@ -659,6 +703,13 @@ function applyTransformers(val, transformers) {
           val = btoa(val);
         }
         break;
+      case "name|base64":
+        // // Implement base64  logic
+        // if (!isBase64(val)) {
+        //   val = btoa(val);
+        // }
+        val = val;   // probably TODO ⚠
+        break;
       case "getString":
         // no change
         val = val;        
@@ -671,7 +722,7 @@ function applyTransformers(val, transformers) {
 }
 
 // ------------------------------------------------------------
-// Function to reverse transformers applied to a value
+// Function to reverse transformers applied to a value - returns the LABEL
 function reverseTransformers(val, transformers) {
   transformers.reverse().forEach((transformer) => {
     switch (transformer) {
@@ -685,10 +736,24 @@ function reverseTransformers(val, transformers) {
           val = atob(val);
         }
         break;
+      case "name|base64":
+        // Implement base64 decoding logic
+        if (isBase64(val)) {
+          val = JSON.parse(atob(val))[0][3];
+        }
+        val = val;   // probably TODO ⚠
+        break;
       case "getString":
         // retrieve string
         val = getString(val);        
         break;
+      case "deviceChip":
+        mac = val  // value is mac   
+        val =  `${getDevDataByMac(mac, "devName")}`
+        break;
+      case "deviceRelType":        
+        val =  val; // nothing to do
+        break;
       default:
         console.warn(`Unknown transformer: ${transformer}`);
     }
@@ -717,8 +782,8 @@ const handleElementOptions = (setKey, elementOptions, transformers, val) => {
   let customParams = "";
   let customId = "";
   let columns = [];
-  let base64Regex = "";
-
+  let base64Regex = "";  
+  let elementOptionsBase64 = btoa(JSON.stringify(elementOptions));
 
   elementOptions.forEach((option) => {
     if (option.prefillValue) {
@@ -801,7 +866,8 @@ const handleElementOptions = (setKey, elementOptions, transformers, val) => {
     customParams,
     customId,
     columns,
-    base64Regex
+    base64Regex,
+    elementOptionsBase64
   };
 };
 
@@ -822,13 +888,14 @@ function arrayToObject(array) {
 
 // -----------------------------------------------------------------------------
 // Processor to generate options
+//          options     - available options
+//          valuesArray - values = selected options
 function generateOptions(options, valuesArray, targetField, transformers, placeholder) {
   var optionsHtml = "";
 
   resultArray    = []
   selectedArray  = []
-  cssClass       = ""
-  
+  cssClass       = ""  
 
   // determine if options or values are used in the listing
   if (valuesArray.length > 0 && options.length > 0){
@@ -847,7 +914,6 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
     // dropdown -> options only (value == 1 STRING not ARRAY)
     resultArray   = options;
   }
-
  
   // Create a map to track the index of each item in valuesArray
   const orderMap = new Map(valuesArray.map((item, index) => [item, index]));
@@ -931,13 +997,102 @@ function genListWithInputSet(options, valuesArray, targetField, transformers, pl
   $("#" + placeholder).replaceWith(listHtml);
 }
 
+// -----------------------------------------------------------------
+// Collects a setting based on code name
+function collectSetting(prefix, setCodeName, setType, settingsArray) {
+  // Parse setType if it's a JSON string
+  const setTypeObject = (typeof setType === "string") 
+      ? JSON.parse(processQuotes(setType)) 
+      : setType;
+
+  const dataType = setTypeObject.dataType;
+
+  // Pick element with input value
+  let elements = setTypeObject.elements.filter(el => el.elementHasInputValue === 1);
+  let elementWithInputValue = elements.length === 0
+      ? setTypeObject.elements[setTypeObject.elements.length - 1]
+      : elements[0];
+
+  const { elementType, elementOptions = [], transformers = [] } = elementWithInputValue;
+
+  const opts = handleElementOptions('none', elementOptions, transformers, val = "");
+
+  // Map of handlers
+  const handlers = {
+      datatableString: () => {
+          const value = collectTableData(`#${setCodeName}_table`);
+          return btoa(JSON.stringify(value));
+      },
+      simpleValue: () => {
+          let value = $(`#${setCodeName}`).val();
+          return applyTransformers(value, transformers);
+      },
+      checkbox: () => {
+          let value = $(`#${setCodeName}`).is(':checked') ? 1 : 0;
+          if (dataType === "boolean") {
+              value = value === 1 ? "True" : "False";
+          }
+          return applyTransformers(value, transformers);
+      },
+      array: () => {
+          let temps = [];
+          if (opts.isOrdeable) {
+              temps = $(`#${setCodeName}`).val();
+          } else {            
+              const sel = $(`#${setCodeName}`).attr("my-editable") === "true" ? "" : ":selected";
+              $(`#${setCodeName} option${sel}`).each(function() {
+                  const vl = $(this).val();
+                  if (vl !== '') {
+                      temps.push(applyTransformers(vl, transformers));
+                  }
+              });
+          }
+          return JSON.stringify(temps);
+      },
+      none: () => "",
+      json: () => {
+          let value = $(`#${setCodeName}`).val();
+          value = applyTransformers(value, transformers);
+          return JSON.stringify(value, null, 2);
+      },
+      fallback: () => {
+          console.error(`[collectSetting] Couldn't determine how to handle (${setCodeName}|${dataType}|${opts.inputType})`);
+          let value = $(`#${setCodeName}`).val();
+          return applyTransformers(value, transformers);
+      }
+  };
+
+  // Select handler key
+  let handlerKey;
+  if (dataType === "string" && elementType === "datatable") {
+      handlerKey = "datatableString";
+  } else if (dataType === "string" || 
+            (dataType === "integer" && (opts.inputType === "number" || opts.inputType === "text"))) {
+      handlerKey = "simpleValue";
+  } else if (opts.inputType === "checkbox") {
+      handlerKey = "checkbox";
+  } else if (dataType === "array") {
+      handlerKey = "array";
+  } else if (dataType === "none") {
+      handlerKey = "none";
+  } else if (dataType === "json") {
+      handlerKey = "json";
+  } else {
+      handlerKey = "fallback";
+  }
+
+  const value = handlers[handlerKey]();
+  settingsArray.push([prefix, setCodeName, dataType, value]);
+
+  return settingsArray;
+}
+
 
 // ------------------------------------------------------------------------------
 // Generate the form control for setting
 function generateFormHtml(settingsData, set, overrideValue, overrideOptions, originalSetKey) {
   let inputHtml = '';
 
-
   isEmpty(overrideValue) ? inVal = set['setValue'] : inVal = overrideValue;  
   const setKey = set['setKey'];
   const setType = set['setType'];
@@ -952,6 +1107,8 @@ function generateFormHtml(settingsData, set, overrideValue, overrideOptions, ori
   // }
 
   // Parse the setType JSON string
+  // console.log(processQuotes(setType));
+  
   const setTypeObject = JSON.parse(processQuotes(setType))
   const dataType = setTypeObject.dataType;
   const elements = setTypeObject.elements || [];
@@ -979,7 +1136,8 @@ function generateFormHtml(settingsData, set, overrideValue, overrideOptions, ori
       customParams,
       customId,
       columns,
-      base64Regex
+      base64Regex,
+      elementOptionsBase64
     } = handleElementOptions(setKey, elementOptions, transformers, inVal);
 
     // Override value
@@ -1007,10 +1165,13 @@ function generateFormHtml(settingsData, set, overrideValue, overrideOptions, ori
                               class="form-control ${addCss} ${cssClasses}" 
                               name="${setKey}" 
                               id="${setKey}" 
+                              my-transformers=${transformers}
                               my-customparams="${customParams}" 
                               my-customid="${customId}" 
                               my-originalSetKey="${originalSetKey}" 
-                              ${multi}>
+                              data-elementoptionsbase64="${elementOptionsBase64}"
+                              ${multi}
+                              ${readOnly ? "disabled" : ""}>
                           <option value="" id="${setKey + "_temp_"}"></option>
                         </select>`;
 
@@ -1046,6 +1207,7 @@ function generateFormHtml(settingsData, set, overrideValue, overrideOptions, ori
                         my-originalSetKey="${originalSetKey}"
                         my-input-from="${sourceIds}" 
                         my-input-to="${setKey}" 
+                        data-elementoptionsbase64="${elementOptionsBase64}"
                         onclick="${onClick}">
                         ${getString(getStringKey)}
                       </button>`;
@@ -1188,22 +1350,49 @@ function generateFormHtml(settingsData, set, overrideValue, overrideOptions, ori
  
   const eventsList = createArray(set['setEvents']); 
   // inline buttons events
-  
+if (eventsList.length > 0) {
+  eventsList.forEach(event => {
+    let eventIcon = "fa-play";
 
-  if (eventsList.length > 0) {
-    eventsList.forEach(event => {
+    switch (event) {
+      case "select_icon":
+        eventIcon = "fa-chevron-down";
+        break;
+      case "add_icon":
+      case "add_option":
+        eventIcon = "fa-square-plus";
+        break;
+      case "copy_icons":
+        eventIcon = "fa-copy";
+        break;
+      case "go_to_device":
+        eventIcon = "fa-square-up-right";
+        break;
+      case "go_to_node":
+        eventIcon = "fa-sitemap fa-rotate-270";
+        break;
+      case "run":
+        eventIcon = "fa-play";
+        break;
+      case "test":
+        eventIcon = "fa-vial-circle-check";
+        break;
+      default:
+        eventIcon = "fa-play";
+        break;
+    }
 
-        eventsHtml += `<span class="input-group-addon pointer"
-                        id="${`${event}_${setKey}`}"
-                        data-myparam-setkey="${setKey}"
-                        data-myparam="${setKey}"
-                        data-myparam-plugin="${setKey.split('_')[0] || ''}"
-                        data-myevent="${event}"  
-                        onclick="execute_settingEvent(this)">
-                        <i title="${getString(event + "_event_tooltip")}" class="fa ${getString(event + "_event_icon")}"></i>
-                      </span>`;
-    });
-  }
+    eventsHtml += `<span class="input-group-addon pointer"
+                    id="${`${event}_${setKey}`}"
+                    data-myparam-setkey="${setKey}"
+                    data-myparam="${setKey}"
+                    data-myparam-plugin="${setKey.split('_')[0] || ''}"
+                    data-myevent="${event}"  
+                    onclick="execute_settingEvent(this)">
+                    <i title="${getString(event + "_event_tooltip")}" class="fa ${eventIcon}"></i>
+                  </span>`;
+  });
+}
 
   // Combine and return the final HTML
   return inputHtml + eventsHtml;

front/js/ui_components.js

@@ -8,64 +8,6 @@
 ----------------------------------------------------------------------------- */
 
 
-// -----------------------------------------------------------------------------
-// Initialize device selectors / pickers fields
-// -----------------------------------------------------------------------------
-function initDeviceSelectors(devicesListAll_JSON) {
-
-  // Check if both device list exists
-  if (devicesListAll_JSON) {
-      // Parse the JSON string to get the device list array
-      var devicesList = JSON.parse(devicesListAll_JSON);
-
-      var selectorFieldsHTML = ''
-
-      // Loop through the devices list
-      devicesList.forEach(function(device) {         
-
-          selectorFieldsHTML += `<option value="${device.devMac}">${device.devName}</option>`;
-      });
-
-      selector = `<div class="db_info_table_row  col-sm-12" > 
-                    <div class="form-group" > 
-                      <div class="input-group col-sm-12 " > 
-                        <select class="form-control select2 select2-hidden-accessible" multiple=""  style="width: 100%;"  tabindex="-1" aria-hidden="true">
-                        ${selectorFieldsHTML}
-                        </select>
-                      </div>
-                    </div>
-                  </div>`
-
-
-      // Find HTML elements with class "deviceSelector" and append selector field
-      $('.deviceSelector').append(selector);
-  }
-
-  // Initialize selected items after a delay so selected macs are available in the context
-  setTimeout(function(){
-        // Retrieve MAC addresses from query string or cache
-        var macs = getQueryString('macs') || getCache('selectedDevices');
-
-        if(macs)
-        {
-          // Split MAC addresses if they are comma-separated
-          macs = macs.split(',');
-  
-          console.log(macs)
-
-          // Loop through macs to be selected list
-          macs.forEach(function(mac) {
-
-            // Create the option and append to Select2
-            var option = new Option($('.deviceSelector select option[value="' + mac + '"]').html(), mac, true, true);
-
-            $('.deviceSelector select').append(option).trigger('change');
-          });       
-
-        }        
-    
-    }, 10);
-}
 
 // -------------------------------------------------------------------
 // Utility function to generate a random API token in the format t_<random string of specified length>
@@ -128,9 +70,6 @@ function getRandomBytes(elem, length) {
   targetElement.val(formattedHex);
 }
 
-
-
-
 // ----------------------------------------------
 // Updates the icon preview  
 function updateAllIconPreviews() {
@@ -342,6 +281,7 @@ function execute_settingEvent(element) {
   feSetKey    = $(element).attr('data-myparam-setkey');
   feParam     = $(element).attr('data-myparam');
   feSourceId  = $(element).attr('id');
+  feValue     = $("#"+feSetKey).val();
 
   if (["test", "run"].includes(feEvent)) {
     // Calls a backend function to add a front-end event (specified by the attributes 'data-myevent' and 'data-myparam-plugin' on the passed  element) to an execution queue
@@ -383,8 +323,12 @@ function execute_settingEvent(element) {
       () => addIconAsBase64(element), // Wrap in an arrow function
       feSourceId // triggered by id
     );
-  } else if (["copy_icons"].includes(feEvent)) {
+  } else if (["select_icon"].includes(feEvent)) {
 
+    showIconSelection(feSetKey)
+    // myparam-setkey  
+
+  } else if (["copy_icons"].includes(feEvent)) {
 
     // Ask overwrite icon types 
     showModalWarning (
@@ -392,28 +336,78 @@ function execute_settingEvent(element) {
       getString('DevDetail_button_OverwriteIcons_Warning'),
       getString('Gen_Cancel'), 
       getString('Gen_Okay'), 
-      'overwriteIconType'
+      'overwriteIconType',
+      feSourceId // triggered by id
     );
-  } else if (["go_to_node"].includes(feEvent)) {
+  } else if (["go_to_device"].includes(feEvent)) {
 
-    goToNetworkNode('NEWDEV_devParentMAC');
+    goToDevice(feValue);
+  } else if (["go_to_node"].includes(feEvent)) {
+    
+    goToNetworkNode(feValue);
 
   } else {
     console.warn(`🔺Not implemented: ${feEvent}`)
-  }
-  
+  } 
   
 }
 
 
 // -----------------------------------------------------------------------------
 // Go to the correct network node in the Network section
-function goToNetworkNode(dropdownId)
-{  
-  setCache('activeNetworkTab', $('#'+dropdownId).val().replaceAll(":","_")+'_id');
+function overwriteIconType()
+{ 
+  const mac = getMac();
+
+  if (!isValidMac(mac)) {
+    showModalOK("Error", getString("Gen_InvalidMac")) 
+    return;
+  }
+
+  // Construct SQL query
+  const rawSql = `
+   UPDATE Devices 
+    SET devIcon = (
+      SELECT devIcon FROM Devices WHERE devMac = "${mac}"
+    )
+    WHERE devType IN (
+      SELECT devType FROM Devices WHERE devMac = "${mac}"
+    )
+  `;
+
+  const apiUrl = `php/server/dbHelper.php?action=write&rawSql=${btoa(encodeURIComponent(rawSql))}`;
+
+  $.get(apiUrl, function(response) {
+    if (response === 'OK') {
+      showMessage (response);
+      updateApi("devices")
+    } else {
+      showMessage (response, 3000, "modal_red");
+    }
+  });
+}
+
+
+// -----------------------------------------------------------------------------
+// Go to the correct network node in the Network section
+function goToNetworkNode(mac)
+{ 
+  setCache('activeNetworkTab', mac.replaceAll(":","_")+'_id');
   window.location.href = './network.php';
   
 }
+
+// -----------------------------------------------------------------------------
+// Go to the device 
+function goToDevice(mac, newtab = false) {
+  const url = './deviceDetails.php?mac=' + encodeURIComponent(mac);
+  
+  if (newtab) {
+    window.open(url, '_blank');
+  } else {
+    window.location.href = url;
+  }
+}
   
 
 // --------------------------------------------------------
@@ -494,10 +488,11 @@ function addIconAsBase64 (el) {
 
 }
 
+// -----------------------------------------------
+// modal pop up for icon selection
+function showIconSelection(setKey) {
 
-
-function showIconSelection() {
-  const selectElement = document.getElementById('NEWDEV_devIcon');
+  const selectElement = document.getElementById(setKey);
   const modalId = 'dynamicIconModal';
 
   // Create modal HTML dynamically
@@ -574,19 +569,9 @@ function showIconSelection() {
   
 }
 
-// "Device_TableHead_Owner",
-// "Device_TableHead_Type",
-// "Device_TableHead_Group",
-// "Device_TableHead_Status",
-// "Device_TableHead_Location",
-// "Device_TableHead_Vendor",
-// "Device_TableHead_SyncHubNodeName",
-// "Device_TableHead_NetworkSite",
-// "Device_TableHead_SSID",
-// "Device_TableHead_SourcePlugin"
 
 // -----------------------------------------------------------------------------
-// Get teh correct db column code name based on table header title string
+// Get the correct db column code name based on table header title string
 function getColumnNameFromLangString(headStringKey) {
   columnNameMap = {
     "Device_TableHead_Name": "devName",
@@ -615,12 +600,96 @@ function getColumnNameFromLangString(headStringKey) {
     "Device_TableHead_SourcePlugin": "devSourcePlugin",
     "Device_TableHead_PresentLastScan": "devPresentLastScan",
     "Device_TableHead_AlertDown": "devAlertDown",
-    "Device_TableHead_CustomProps": "devCustomProps"
+    "Device_TableHead_CustomProps": "devCustomProps",
+    "Device_TableHead_FQDN": "devFQDN",
+    "Device_TableHead_ParentRelType": "devParentRelType",
+    "Device_TableHead_ReqNicsOnline": "devReqNicsOnline"
   };
 
   return columnNameMap[headStringKey] || "";
 }
 
+//--------------------------------------------------------------
+// Generating the device status chip
+function getStatusBadgeParts(devPresentLastScan, devAlertDown, devMac, statusText = '') {
+  let css = 'bg-gray text-white statusUnknown';
+  let icon = '<i class="fa-solid fa-question"></i>';
+  let status = 'unknown';
+  let cssText = '';
+
+  if (devPresentLastScan == 1) {
+    css = 'bg-green text-white statusOnline';
+    cssText = 'text-green';
+    icon = '<i class="fa-solid fa-plug"></i>';
+    status = 'online';
+  } else if (devAlertDown == 1) {
+    css = 'bg-red text-white statusDown';
+    cssText = 'text-red';
+    icon = '<i class="fa-solid fa-triangle-exclamation"></i>';
+    status = 'down';
+  } else if (devPresentLastScan != 1) {
+    css = 'bg-gray text-white statusOffline';
+    cssText = 'text-gray50';
+    icon = '<i class="fa-solid fa-xmark"></i>';
+    status = 'offline';
+  }
+
+  const cleanedText = statusText.replace(/-/g, '');
+  const url = `deviceDetails.php?mac=${encodeURIComponent(devMac)}`;
+
+  return {
+    cssClass: css,
+    cssText: cssText,
+    iconHtml: icon,
+    mac: devMac,
+    text: cleanedText,
+    status: status,
+    url: url
+  };
+}
+
+//--------------------------------------------------------------
+// Getting the color and css class for device relationships
+function getRelationshipConf(relType) {
+  let cssClass = '';
+  let color = '';
+
+  // --color-aqua: #00c0ef;
+  // --color-blue: #0060df;
+  // --color-green: #00a65a;
+  // --color-yellow: #f39c12;
+  // --color-red: #dd4b39;
+
+  switch (relType) {
+        
+    case "child":
+      color = "#f39c12"; // yellow
+      cssClass = "text-yellow";
+      break;
+    case "nic":
+      color = "#dd4b39"; // red
+      cssClass = "text-red";
+      break;
+    case "virtual":
+      color = "#0060df"; // blue
+      cssClass = "text-blue";
+      break;      
+    case "logical":
+      color = "#00a65a"; // green
+      cssClass = "text-green";
+      break;      
+    default:
+      color = "#5B5B66"; // grey
+      cssClass = "text-light-grey";
+      break;
+  }
+
+  return {
+    cssClass: cssClass,
+    color: color
+  };
+}
+
 
 // -----------------------------------------------------------------------------
 // initialize
@@ -634,17 +703,52 @@ function initSelect2() {
   //  check if cache ready
   if(isValidJSON(devicesListAll_JSON))
   {
-    // prepare HTML DOM before initializing the frotend
-    initDeviceSelectors(devicesListAll_JSON)
-
     
     // --------------------------------------------------------
     //Initialize Select2 Elements and make them sortable
     
     $(function () {
       // Iterate over each Select2 dropdown
-      $('.select2').each(function() {
-          var selectEl = $(this).select2();
+      $('.select2').each(function() {          
+          // handle Device chips, if my-transformers="deviceChip"
+          if($(this).attr("my-transformers") == "deviceChip")
+          {
+            var selectEl = $(this).select2({
+              templateSelection: function (data, container) {
+                return $(renderDeviceLink(data, container));
+              },
+              escapeMarkup: function (m) {
+                return m; // Allow HTML
+              }
+            });
+            
+          } else if($(this).attr("my-transformers") == "deviceRelType") // handling dropdown for relationships
+          {
+            var selectEl = $(this).select2({
+              minimumResultsForSearch: Infinity,
+              templateSelection: function (data, container) {
+                if (!data.id) return data.text; // default for placeholder etc.
+
+                const relConf = getRelationshipConf(data.text);
+                                
+                // Custom HTML
+                const html = $(`                  
+                    <span class="custom-chip ${relConf.cssClass}" >                      
+                      ${data.text}                      
+                    </span>                  
+                `);
+          
+                return html;
+              },
+              escapeMarkup: function (m) {
+                return m; // Allow HTML
+              }
+            });
+            
+          } else // default handling - default template
+          {
+            var selectEl = $(this).select2();
+          }
     
           // Apply sortable functionality to the dropdown's dropdown-container
           selectEl.next().children().children().children().sortable({
@@ -675,14 +779,178 @@ function initSelect2() {
   }  
 }
 
-// init functions after dom loaded
-window.addEventListener("load", function() {
-  // try to initialize 
-  setTimeout(() => {
-    initSelect2()
-    // initializeiCheck();
-  }, 1000);
-});
+// ------------------------------------------
+// Render a device link with hover-over functionality
+function renderDeviceLink(data, container, useName = false) {
+  // If no valid MAC, return placeholder text
+  if (!data.id || !isValidMac(data.id)) {
+    return `<span>${data.text}<span/>`;
+  }
+
+  const device = getDevDataByMac(data.id);
+  if (!device) {
+    return data.text;
+  }
+
+  // Build and return badge parts
+  const badge = getStatusBadgeParts(
+    device.devPresentLastScan,
+    device.devAlertDown,
+    device.devMac
+  );
+
+  // badge class and hover-info class to container
+  $(container)
+    .addClass(`${badge.cssClass} hover-node-info`)
+    .attr({
+      'data-name': device.devName,
+      'data-ip': device.devLastIP,
+      'data-mac': device.devMac,
+      'data-vendor': device.devVendor,
+      'data-type': device.devType,
+      'data-lastseen': device.devLastConnection,
+      'data-firstseen': device.devFirstConnection,
+      'data-relationship': device.devParentRelType,
+      'data-status': device.devStatus,
+      'data-present': device.devPresentLastScan,
+      'data-alert': device.devAlertDown,
+      'data-icon': device.devIcon
+    });
+  
+  return `
+    <a href="${badge.url}" target="_blank">
+      <span class="custom-chip">
+        <span class="iconPreview">${atob(device.devIcon)}</span>
+        ${useName ? device.devName : data.text}
+        <span>
+          (${badge.iconHtml})
+        </span>
+      </span>
+    </a>
+  `;
+}
+
+// ------------------------------------------
+// Display device info on hover (attach only once)
+function initHoverNodeInfo() {
+  if ($('#hover-box').length === 0) {
+    $('<div id="hover-box"></div>').appendTo('body').hide().css({
+      position: 'absolute',
+      zIndex: 9999,
+      border: '1px solid #ccc',
+      borderRadius: '8px',
+      padding: '10px',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+      minWidth: '200px',
+      maxWidth: '300px',
+      fontSize: '14px',
+      pointerEvents: 'none',
+      backgroundColor: '#fff'
+    });
+  }
+
+  // check if handlers already attached to prevent flickering
+  if (initHoverNodeInfo._handlersAttached) return;
+  initHoverNodeInfo._handlersAttached = true;
+
+  let hoverTimeout = null;
+  let lastTarget = null;
+
+  // remove title as it's replaced by the hover-box
+  $(document).on('mouseover', '.hover-node-info', function () {
+    this.removeAttribute('title');
+
+    $(this).attr("title", ""); // remove title as it's replaced by the hover-box
+  });
+
+  $(document).on('mouseenter', '.hover-node-info', function (e) {
+    const $el = $(this);
+    lastTarget = this;
+    
+    // use timeout to prevent a quick hover and exit toi flash a card when navigating to a target node with your mouse
+    clearTimeout(hoverTimeout);
+
+    hoverTimeout = setTimeout(() => {
+      if (lastTarget !== this) return;
+
+      const icon = $el.data('icon');
+      const name = $el.data('name') || 'Unknown';
+      const ip = $el.data('ip') || 'N/A';
+      const mac = $el.data('mac') || 'N/A';
+      const vendor = $el.data('vendor') || 'Unknown';
+      const type = $el.data('type') || 'Unknown';
+      const lastseen = $el.data('lastseen') || 'Unknown';
+      const firstseen = $el.data('firstseen') || 'Unknown';
+      const relationship = $el.data('relationship') || 'Unknown';
+      const badge = getStatusBadgeParts( $el.data('present'),  $el.data('alert'), $el.data('mac'))
+      const status =`<span class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</span>`
+
+      const html = `
+        <div>
+          <b> <div class="iconPreview">${atob(icon)}</div> </b><b class="devName"> ${name}</b><br>
+        </div>
+        <hr/>
+        <div class="line">
+          <b>Status:</b> <span>${status}</span><br>
+        </div>
+        <div class="line">  
+          <b>IP:</b> <span>${ip}</span><br>
+        </div>
+        <div class="line">  
+          <b>MAC:</b> <span>${mac}</span><br>
+        </div>
+        <div class="line">  
+          <b>Vendor:</b> <span>${vendor}</span><br>
+        </div>
+        <div class="line">  
+          <b>Type:</b> <span>${type}</span><br>
+        </div>
+        <div class="line">  
+          <b>First seen:</b> <span>${firstseen}</span><br>
+        </div>
+        <div class="line">  
+          <b>Last seen:</b> <span>${lastseen}</span><br>
+        </div>
+        <div class="line">  
+          <b>Relationship:</b> <span class="${getRelationshipConf(relationship).cssClass}">${relationship}</span>
+        </div>
+      `;
+
+      $('#hover-box').html(html).fadeIn(150);
+    }, 300);
+  });
+
+  $(document).on('mousemove', '.hover-node-info', function (e) {
+    const hoverBox = $('#hover-box');
+    const boxWidth = hoverBox.outerWidth();
+    const boxHeight = hoverBox.outerHeight();
+    const padding = 15;
+
+    const winWidth = $(window).width();
+    const winHeight = $(window).height();
+
+    let left = e.pageX + padding;
+    let top = e.pageY + padding;
+
+    // Position leftward if close to right edge
+    if (e.pageX + boxWidth + padding > winWidth) {
+      left = e.pageX - boxWidth - padding;
+    }
+
+    // Position upward if close to bottom edge
+    if (e.pageY + boxHeight + padding > winHeight) {
+      top = e.pageY - boxHeight - padding;
+    }
+
+    hoverBox.css({ top: top + 'px', left: left + 'px' });
+  });
+
+  $(document).on('mouseleave', '.hover-node-info', function () {
+    clearTimeout(hoverTimeout);
+    lastTarget = null;
+    $('#hover-box').fadeOut(100);
+  });
+}
 
 
 console.log("init ui_components.js")