Merge branch 'main' of https://github.com/jokob-sk/NetAlertX

Restore manual naming of static leases using comments for MKSCAN + cleanups

.dockerignore

@@ -6,14 +6,10 @@
 docker-compose.yml
 Dockerfile
 Dockerfile.debian
-dockerfiles/LICENSE
-dockerfiles/README.md
-dockerfiles/README_ES.md
 docs
 LICENSE.txt
 README.md
 CONTRIBUTING
 FUNDING.yml
 config/.gitignore
-db/.gitignore
-
+db/.gitignore

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -9,20 +9,6 @@ body:
     options:
     - label: I have searched the existing open and closed issues
       required: true
-- type: checkboxes
-  attributes:
-    label: Am I willing to test this? 🧪
-    description: I rely on the community to test unreleased features. If you are requesting a feature, please be willing to test it within 48h of test request. Otherwise, the feature might be pulled from the code base. 
-    options:
-    - label: I will do my best to test this feature on the `netlertx-dev` image when requested within 48h and report bugs to help deliver a great user experience for everyone and not to break existing installations.
-      required: true
-- type: checkboxes
-  attributes:
-    label: Can I help implement this? 👩‍💻👨‍💻 
-    description: The maintainer will provide guidance and help. The implementer will read the PR guidelines https://github.com/jokob-sk/NetAlertX/tree/main/docs#-pull-requests-prs
-    options:
-    - label: "Yes"
-    - label: "No"
 - type: textarea
   attributes:
     label: Is your feature request related to a problem? Please describe
@@ -50,3 +36,17 @@ body:
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
   validations:
     required: true
+- type: checkboxes
+  attributes:
+    label: Am I willing to test this? 🧪
+    description: I rely on the community to test unreleased features. If you are requesting a feature, please be willing to test it within 48h of test request. Otherwise, the feature might be pulled from the code base. 
+    options:
+    - label: I will do my best to test this feature on the `netlertx-dev` image when requested within 48h and report bugs to help deliver a great user experience for everyone and not to break existing installations.
+      required: true
+- type: checkboxes
+  attributes:
+    label: Can I help implement this? 👩‍💻👨‍💻 
+    description: The maintainer will provide guidance and help. The implementer will read the PR guidelines https://github.com/jokob-sk/NetAlertX/tree/main/docs#-pull-requests-prs
+    options:
+    - label: "Yes"
+    - label: "No"

.github/ISSUE_TEMPLATE/i-have-an-issue.yml

@@ -9,6 +9,16 @@ body:
     options:
     - label: I have searched the existing open and closed issues and I checked the docs https://github.com/jokob-sk/NetAlertX/tree/main/docs
       required: true
+- type: checkboxes
+  attributes:
+    label: The issue occurs in the following browsers. Select at least 2.
+    description: This step helps me understand if this is a cache or browser-specific issue. 
+    options:
+    - label: "Firefox"
+    - label: "Chrome"
+    - label: "Edge"
+    - label: "Safari (unsupported) - PRs welcome"
+    - label: "N/A - This is an issue with the backend"
 - type: textarea
   attributes:
     label: Current Behavior
@@ -64,7 +74,7 @@ body:
       ***Generally speaking, all bug reports should have logs provided.***
       Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
       Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
-      You can use `tail -100 /app/front/log/app.log` in the container if you have trouble getting to the log files. 
+      You can use `tail -100 /app/log/app.log` in the container if you have trouble getting to the log files. 
   validations:
     required: false
 - type: checkboxes

.gitignore

@@ -7,8 +7,11 @@ db/*
 db/pialert.db
 db/app.db
 front/log/*
+/log/*
 front/api/*
+/api/*
 **/plugins/**/*.log
+**/plugins/cloud_services/*
 **/%40eaDir/
 **/@eaDir/
 
@@ -19,4 +22,13 @@ __pycache__/
 **/last_result.log
 **/script.log
 **/pialert.conf_bak
-**/pialert.db_bak
+**/pialert.db_bak
+.*.swp
+
+front/img/cloud_services/*
+**/cloud_services.php
+**/cloud_services.js
+front/css/cloud_services.css
+
+docker-compose.yml.ffsb42
+.env.omada.ffsb42

Dockerfile

@@ -1,13 +1,12 @@
-FROM alpine:3.20 as builder
+FROM alpine:3.20 AS builder
 
 ARG INSTALL_DIR=/app
 
-ENV PYTHONUNBUFFERED 1
+ENV PYTHONUNBUFFERED=1
 
 # Install build dependencies
-RUN apk add --no-cache bash python3 python3-dev gcc musl-dev libffi-dev openssl-dev \
+RUN apk add --no-cache bash python3 python3-dev gcc musl-dev libffi-dev openssl-dev git\
     && python -m venv /opt/venv
-    
 
 # Enable venv
 ENV PATH="/opt/venv/bin:$PATH"
@@ -15,13 +14,29 @@ ENV PATH="/opt/venv/bin:$PATH"
 COPY . ${INSTALL_DIR}/
 
 
-RUN pip install netifaces tplink-omada-client pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython   \
+RUN pip install openwrt-luci-rpc graphene flask netifaces tplink-omada-client wakeonlan  pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros 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 {} \;"
 
+# Append Iliadbox certificate to aiofreepybox
+RUN printf "\n-----BEGIN CERTIFICATE-----\n\
+MIICOjCCAcCgAwIBAgIUI0Tu7zsrBJACQIZgLMJobtbdNn4wCgYIKoZIzj0EAwIw\n\
+TDELMAkGA1UEBhMCSVQxDjAMBgNVBAgMBUl0YWx5MQ4wDAYDVQQKDAVJbGlhZDEd\n\
+MBsGA1UEAwwUSWxpYWRib3ggRUNDIFJvb3QgQ0EwHhcNMjAxMTI3MDkzODEzWhcN\n\
+NDAxMTIyMDkzODEzWjBMMQswCQYDVQQGEwJJVDEOMAwGA1UECAwFSXRhbHkxDjAM\n\
+BgNVBAoMBUlsaWFkMR0wGwYDVQQDDBRJbGlhZGJveCBFQ0MgUm9vdCBDQTB2MBAG\n\
+ByqGSM49AgEGBSuBBAAiA2IABMryJyb2loHNAioY8IztN5MI3UgbVHVP/vZwcnre\n\
+ZvJOyDvE4HJgIti5qmfswlnMzpNbwf/MkT+7HAU8jJoTorRm1wtAnQ9cWD3Ebv79\n\
+RPwtjjy3Bza3SgdVxmd6fWPUKaNjMGEwHQYDVR0OBBYEFDUij/4lpoJ+kOXRyrcM\n\
+jf2RPzOqMB8GA1UdIwQYMBaAFDUij/4lpoJ+kOXRyrcMjf2RPzOqMA8GA1UdEwEB\n\
+/wQFMAMBAf8wDgYDVR0PAQH/BAQDAgGGMAoGCCqGSM49BAMCA2gAMGUCMQC6eUV1\n\
+pFh4UpJOTc1JToztN4ttnQR6rIzxMZ6mNCe+nhjkohWp24pr7BpUYSbEizYCMAQ6\n\
+LCiBKV2j7QQGy7N1aBmdur17ZepYzR1YV0eI+Kd978aZggsmhjXENQYVTmm/XA==\n\
+-----END CERTIFICATE-----\n" >> /opt/venv/lib/python3.12/site-packages/aiofreepybox/freebox_certificates.pem
+
 # second stage
-FROM alpine:3.20 as runner
+FROM alpine:3.20 AS runner
 
 ARG INSTALL_DIR=/app
 
@@ -40,7 +55,7 @@ ENV S6_CMD_WAIT_FOR_SERVICES_MAXTIME=0
 
 RUN apk update --no-cache \
     && apk add --no-cache bash zip lsblk gettext-envsubst sudo mtr tzdata s6-overlay \
-    && apk add --no-cache curl arp-scan iproute2 iproute2-ss nmap nmap-scripts traceroute nbtscan net-tools net-snmp-tools bind-tools awake ca-certificates  \
+    && 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 \
     && apk add --no-cache dcron \
@@ -54,9 +69,9 @@ COPY --from=builder --chown=nginx:www-data ${INSTALL_DIR}/ ${INSTALL_DIR}/
 COPY install/crontab /etc/crontabs/root
 
 # Start all required services
-RUN ${INSTALL_DIR}/dockerfiles/pre-setup.sh
+RUN ${INSTALL_DIR}/dockerfiles/start.sh
 
 HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=2 \
-  CMD curl -sf -o /dev/null ${LISTEN_ADDR}:${PORT}/api/app_state.json
+    CMD curl -sf -o /dev/null ${LISTEN_ADDR}:${PORT}/php/server/query_json.php?file=app_state.json
 
 ENTRYPOINT ["/init"]

Dockerfile.debian

@@ -1,7 +1,7 @@
 FROM debian:bookworm-slim
 
 # default UID and GID
-ENV USER=pi USER_ID=1000 USER_GID=1000  PORT=20211 
+ENV USER=pi USER_ID=1000 USER_GID=1000 PORT=20211 
 #TZ=Europe/London
 
 # Todo, figure out why using a workdir instead of full paths don't work
@@ -33,7 +33,7 @@ COPY --chmod=775 --chown=${USER_ID}:${USER_GID} . ${INSTALL_DIR}/
 RUN apt-get install -y \
     tini snmp ca-certificates curl libwww-perl arp-scan perl apt-utils cron sudo \
     nginx-light php php-cgi php-fpm php-sqlite3 php-curl sqlite3 dnsutils net-tools php-openssl \
-    python3 python3-dev iproute2 nmap python3-pip zip systemctl usbutils traceroute nbtscan
+    python3 python3-dev iproute2 nmap python3-pip zip systemctl usbutils traceroute nbtscan avahi avahi-tools openrc dbus
 
 # Alternate dependencies
 RUN apt-get install nginx nginx-core mtr php-fpm php8.2-fpm php-cli php8.2 php8.2-sqlite3 -y
@@ -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 tplink-omada-client pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython cryptography "
+RUN /bin/bash -c "source myenv/bin/activate && update-alternatives --install /usr/bin/python python /usr/bin/python3 10 && pip3 install openwrt-luci-rpc graphene flask netifaces tplink-omada-client wakeonlan pycryptodome requests paho-mqtt scapy cron-converter pytz json2table dhcp-leases pyunifi speedtest-cli chardet python-nmap dnspython librouteros "
 
 # Create a buildtimestamp.txt to later check if a new version was released
 RUN date +%s > ${INSTALL_DIR}/front/buildtimestamp.txt

README.md

@@ -1,30 +1,26 @@
-# 💻🔍 Network scanner & notification framework
+[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub&style=for-the-badge)](https://github.com/jokob-sk/NetAlertX/releases)
+[![Discord](https://img.shields.io/discord/1274490466481602755?color=0aa8d2&logoColor=fff&logo=Discord&style=for-the-badge)](https://discord.gg/NczTUTWyRr)
+
+# 🖧🔍 Network scanner & notification framework
 
 Get visibility of what's going on on your WIFI/LAN network. Schedule scans for devices, port changes and get alerts if unknown devices or changes are found. Write your own [Plugins](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins#readme) with auto-generated UI and in-build notification system. Build out and easily maintain your network source of truth (NSoT).
 
-[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/NetAlertX?color=40ba12&label=Committed&logo=GitHub&logoColor=fff)](https://github.com/jokob-sk/NetAlertX)
-[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-[![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub)](https://github.com/jokob-sk/NetAlertX/releases)
-[![GitHub Sponsors](https://img.shields.io/github/sponsors/jokob-sk?style=social)](https://github.com/sponsors/jokob-sk)
 
-  | 🐳 [Docker hub](https://registry.hub.docker.com/r/jokobsk/netalertx) |  📑 [Docker guide](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) |🆕 [Release notes](https://github.com/jokob-sk/NetAlertX/releases) | 📚 [All Docs](https://github.com/jokob-sk/NetAlertX/tree/main/docs) | 
-  |----------------------|----------------------| ----------------------|  ----------------------| 
-
-
-  | ![Main screen][main] | ![device_details 1][device_details]  | ![Screen network][network] |
-  |----------------------|----------------------| ----------------------| 
-
-  ![network_setup][network_setup] 
+| [📑 Docker guide](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) | [🚀 Releases](https://github.com/jokob-sk/NetAlertX/releases) | [📚 Docs](https://github.com/jokob-sk/NetAlertX/tree/main/docs) | [🔌 Plugins](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md) | [🤖 Ask AI](https://gurubase.io/g/netalertx)
+|----------------------| ----------------------|  ----------------------| ----------------------| ----------------------| 
 
+![showcase][showcase] 
 
 Head to [https://netalertx.com/](https://netalertx.com/) for more gifs and screenshots 📷.
 
 <details>
   <summary>📷 Click for more screenshots</summary>
 
-  | ![presence][presence] | ![maintenance][maintenance] | ![settings][settings]  |
+  | ![Main screen][main] | ![device_details 1][device_details]  | ![Screen network][network] |
   |----------------------|----------------------|----------------------|
+  | ![presence][presence] | ![maintenance][maintenance] | ![settings][settings]  |
   | ![sync_hub][sync_hub] | ![report1][report1] | ![device_nmap][device_nmap]  |
 
 </details>
@@ -34,9 +30,9 @@ Head to [https://netalertx.com/](https://netalertx.com/) for more gifs and scree
 
   <hr>
 
-  Most of us don't know what's going on on our home network, but we want our family and data to be safe.  _Command-line tools_ are great, but the output can be _hard to understand_ and action if you are not a network specialist.
+  Most of us don't know what's going on on our home network, but we want our family and data to be safe. _Command-line tools_ are great, but the output can be _hard to understand_ and action if you are not a network specialist.
 
-  Net<b>Alert</b><sup>x</sup> gives you peace of mind. _Visualize and immediately report 📬_ what is going on in your network - this is the first step to enhance your _network security 🔐_. 
+  Net<b>Alert</b><sup>x</sup> gives you peace of mind. _Visualize and immediately report 📬_ what is going on in your network - this is the first step to enhance your _network security 🔐_.
 
   Net<b>Alert</b><sup>x</sup> combines several network and other scanning tools 🔍 with notifications 📧 into one user-friendly package 📦. 
 
@@ -61,10 +57,12 @@ Head to [https://netalertx.com/](https://netalertx.com/) for more gifs and scree
 ## Installation & Documentation
 <!--- --------------------------------------------------------------------- --->
 
+Supported browsers: Chrome, Firefox
+
 | Docs        | Link    | 
 |-------------|-------------|
 | 📥🐳  | [Docker instructions](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) 
-| 📥💻  | [HW install (experimental 🧪)](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HW_INSTALL.md) |
+| 📥🗄️  | [HW install (experimental 🧪)](https://github.com/jokob-sk/NetAlertX/blob/main/docs/HW_INSTALL.md) |
 | 📥🟧  | [Unraid App](https://unraid.net/community/apps) |
 | 📚     | [All Documentation](https://github.com/jokob-sk/NetAlertX/blob/main/docs/README.md) (App Usage and Configuration) |
  
@@ -85,19 +83,14 @@ Get notified about a new release, what new functionality you can use and about b
 
 [![GitHub Sponsors](https://img.shields.io/github/sponsors/jokob-sk?style=social)](https://github.com/sponsors/jokob-sk)
 
-Thank you to all the wonderful people who are sponsoring this project. 
-
-> preventing my burnout😅 are:
+Thank you to all the wonderful people who are sponsoring this project (private sponsors are hidden). 
 
 <!-- SPONSORS-LIST DO NOT MODIFY BELOW -->
 | All Sponsors |
 |---|
-| [iptvcld](https://github.com/iptvcld) |
 
 <!-- SPONSORS-LIST DO NOT MODIFY ABOVE -->
 
-
-
 <details>
   <summary>Click for more ways to donate</summary>
   
@@ -117,7 +110,7 @@ Thank you to all the wonderful people who are sponsoring this project.
 
 This project would be nothing without the amazing work of the community, with special thanks to: 
 
-> [pucherot/Pi.Alert](https://github.com/pucherot/Pi.Alert) (the original creator of PiAlert), [leiweibau](https://github.com/leiweibau/Pi.Alert): Dark mode (and much more), [Macleykun](https://github.com/Macleykun) (Help with Dockerfile clean-up) [Final-Hawk](https://github.com/Final-Hawk) (Help with NTFY, styling and other fixes), [TeroRERO](https://github.com/terorero) (Spanish translations), [Data-Monkey](https://github.com/Data-Monkey), (Split-up of the python.py file and more), [cvc90](https://github.com/cvc90) (Spanish translation and various UI work) to name a few...
+> [pucherot/Pi.Alert](https://github.com/pucherot/Pi.Alert) (the original creator of PiAlert), [leiweibau](https://github.com/leiweibau/Pi.Alert): Dark mode (and much more), [Macleykun](https://github.com/Macleykun) (Help with Dockerfile clean-up), [vladaurosh](https://github.com/vladaurosh) for Alpine re-base help, [Final-Hawk](https://github.com/Final-Hawk) (Help with NTFY, styling and other fixes), [TeroRERO](https://github.com/terorero) (Spanish translations), [Data-Monkey](https://github.com/Data-Monkey), (Split-up of the python.py file and more), [cvc90](https://github.com/cvc90) (Spanish translation and various UI work) to name a few. Check out all the [amazing contributors](https://github.com/jokob-sk/NetAlertX/graphs/contributors). 
 
 
 ## Everything else
@@ -146,7 +139,7 @@ Help out and suggest languages in the [online portal of Weblate](https://hosted.
 [maintenance]:              ./docs/img/maintenance.png                    "Screen 4"
 [network]:                  ./docs/img/network.png                        "Screen 5"
 [settings]:                 ./docs/img/settings.png                       "Screen 6"
-[network_setup]:            ./docs/img/network_setup.gif                  "Screen 6"
+[showcase]:                 ./docs/img/showcase.gif                       "Screen 6"
 [help_faq]:                 ./docs/img/help_faq.png                       "Screen 7"
 [sync_hub]:                 ./docs/img/sync_hub.png                       "Screen 8"
 [notification_center]:      ./docs/img/notification_center.png            "Screen 8"

back/app.conf

@@ -17,9 +17,10 @@
 # Scan multiple interfaces (eth1 and eth0):
 # SCAN_SUBNETS    = [ '192.168.1.0/24 --interface=eth1', '192.168.1.0/24 --interface=eth0' ]
 
-SCAN_SUBNETS=['192.168.1.0/24 --interface=eth1']
+DISCOVER_PLUGINS=True
+SCAN_SUBNETS=['192.168.1.0/24 --interface=eth0']
 TIMEZONE='Europe/Berlin'
-LOADED_PLUGINS = ['ARPSCAN','CSVBCKP','DBCLNP', 'INTRNT','MAINT','NEWDEV','NSLOOKUP','NTFPRCS', 'PHOLUS','SETPWD','SMTP', 'SYNC', 'VNDRPDT', 'WORKFLOWS']
+LOADED_PLUGINS = ['ARPSCAN','CSVBCKP','DBCLNP', 'INTRNT','MAINT','NEWDEV','NSLOOKUP','NTFPRCS', 'AVAHISCAN', 'SETPWD','SMTP', 'SYNC', 'VNDRPDT', 'WORKFLOWS', 'UI']
 
 DAYS_TO_KEEP_EVENTS=90
 # Used for generating links in emails. Make sure not to add a trailing slash!
@@ -28,7 +29,6 @@ REPORT_DASHBOARD_URL='http://netalertx'
 # Make sure at least these scanners are enabled for new installs, other defaults are taken from the config.json
 INTRNT_RUN='schedule'
 ARPSCAN_RUN='schedule'
-PHOLUS_RUN='on_new_device'
 NSLOOKUP_RUN='before_name_updates'
 
 # Email 

back/cron_script.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 export INSTALL_DIR=/app
 
-LOG_FILE="${INSTALL_DIR}/front/log/execution_queue.log"
+LOG_FILE="${INSTALL_DIR}/log/execution_queue.log"
 
 # Check if there are any entries with cron_restart_backend
 if grep -q "cron_restart_backend" "$LOG_FILE"; then

back/update_vendors.sh

@@ -30,13 +30,12 @@ IEEE_OUI_URL="http://standards-oui.ieee.org/oui/oui.txt"
 # Download the file using wget
 wget "$IEEE_OUI_URL" -O ieee-oui_dl.txt
 
-# Filter lines containing "(base 16)" and remove the "(base 16)" string
-grep "(base 16)" ieee-oui_dl.txt | sed 's/ *(base 16)//' > ieee-oui_new.txt
-
-# Combine ieee-oui_new.txt and ieee-oui.txt, and extract unique MAC start values along with vendor names
+# Filter lines containing "(base 16)" and format them with a tab between MAC and vendor
+grep "(base 16)" ieee-oui_dl.txt | sed -E 's/ *\(base 16\)//' | awk -F' ' '{printf "%s\t%s\n", $1, substr($0, index($0, $2))}' > ieee-oui_new.txt
 
+# Combine, sort, and remove duplicates, ensuring tab-separated output
 cat ieee-oui.txt ieee-oui_new.txt >> ieee-oui_all.txt
-sort ieee-oui_all.txt > ieee-oui_all_sort.txt
-awk '{$1=$1; print}' ieee-oui_all_sort.txt | sort -u > ieee-oui_all_filtered.txt
+sort ieee-oui_all.txt | awk '{$1=$1; print}' | sort -u | awk -F' ' '{printf "%s\t%s\n", $1, substr($0, index($0, $2))}' > ieee-oui_all_filtered.txt
+
 
 

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   netalertx:
     privileged: true
@@ -16,7 +15,12 @@ services:
       # - ${APP_DATA_LOCATION}/netalertx_dev/db:/app/db      
       - ${APP_DATA_LOCATION}/netalertx/db:/app/db           
       # (optional) useful for debugging if you have issues setting up the container
-      # - ${LOGS_LOCATION}:/app/front/log      
+      - ${APP_DATA_LOCATION}/netalertx/log:/app/log      
+      # (API: OPTION 1) use for performance
+      - type: tmpfs
+        target: /app/api
+      # (API: OPTION 2) use when debugging issues 
+      # - ${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
@@ -25,6 +29,7 @@ services:
       - ${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    
       - ${DEV_LOCATION}/server:/app/server            
+      - ${DEV_LOCATION}/test:/app/test            
       - ${DEV_LOCATION}/dockerfiles:/app/dockerfiles
       # - ${APP_DATA_LOCATION}/netalertx/php.ini:/etc/php/8.2/fpm/php.ini      
       - ${DEV_LOCATION}/install:/app/install
@@ -34,15 +39,14 @@ services:
       - ${DEV_LOCATION}/front/lib:/app/front/lib
       - ${DEV_LOCATION}/front/js:/app/front/js
       - ${DEV_LOCATION}/front/report_templates:/front/report_templates
-      - ${DEV_LOCATION}/install/start.debian.sh:/app/install/start.debian.sh
-      - ${DEV_LOCATION}/install/user-mapping.debian.sh:/app/install/user-mapping.debian.sh
-      - ${DEV_LOCATION}/install/install.debian.sh:/app/install/install.debian.sh      
-      - ${DEV_LOCATION}/install/install_dependencies.debian.sh:/app/install/install_dependencies.debian.sh      
-      - ${DEV_LOCATION}/front/api:/app/front/api
       - ${DEV_LOCATION}/front/php:/app/front/php      
       - ${DEV_LOCATION}/front/deviceDetails.php:/app/front/deviceDetails.php
+      - ${DEV_LOCATION}/front/deviceDetailsEdit.php:/app/front/deviceDetailsEdit.php
       - ${DEV_LOCATION}/front/userNotifications.php:/app/front/userNotifications.php
       - ${DEV_LOCATION}/front/deviceDetailsTools.php:/app/front/deviceDetailsTools.php
+      - ${DEV_LOCATION}/front/deviceDetailsPresence.php:/app/front/deviceDetailsPresence.php
+      - ${DEV_LOCATION}/front/deviceDetailsSessions.php:/app/front/deviceDetailsSessions.php
+      - ${DEV_LOCATION}/front/deviceDetailsEvents.php:/app/front/deviceDetailsEvents.php
       - ${DEV_LOCATION}/front/devices.php:/app/front/devices.php
       - ${DEV_LOCATION}/front/events.php:/app/front/events.php
       - ${DEV_LOCATION}/front/plugins.php:/app/front/plugins.php
@@ -54,6 +58,7 @@ 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/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      
       - ${DEV_LOCATION}/front/appEventsCore.php:/app/front/appEventsCore.php      
@@ -62,8 +67,10 @@ services:
       - ${DEV_LOCATION}/front/plugins:/app/front/plugins      
       # DELETE END anyone trying to use this file: comment out / delete ABOVE lines, they are only for development purposes
       # ---------------------------------------------------------------------------
-    environment:
+    environment:      
+      # - APP_CONF_OVERRIDE={"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","GRAPHQL_PORT":"20223","UI_theme":"Light"}
       - TZ=${TZ}
-      - PORT=${PORT}
+      - PORT=${PORT}      
       # ❗ DANGER ZONE BELOW - Setting ALWAYS_FRESH_INSTALL=true will delete the content of the /db & /config folders
       - ALWAYS_FRESH_INSTALL=${ALWAYS_FRESH_INSTALL}
+      

dockerfiles/README.md

@@ -1,13 +1,13 @@
-[![GitHub Committed](https://img.shields.io/github/last-commit/jokob-sk/NetAlertX?color=40ba12&label=Committed&logo=GitHub&logoColor=fff)](https://github.com/jokob-sk/NetAlertX)
-[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff)](https://hub.docker.com/r/jokobsk/netalertx)
-![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub)
-[![GitHub Sponsors](https://img.shields.io/github/sponsors/jokob-sk?style=social)](https://github.com/sponsors/jokob-sk)
+[![Docker Size](https://img.shields.io/docker/image-size/jokobsk/netalertx?label=Size&logo=Docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![Docker Pulls](https://img.shields.io/docker/pulls/jokobsk/netalertx?label=Pulls&logo=docker&color=0aa8d2&logoColor=fff&style=for-the-badge)](https://hub.docker.com/r/jokobsk/netalertx)
+[![GitHub Release](https://img.shields.io/github/v/release/jokob-sk/NetAlertX?color=0aa8d2&logoColor=fff&logo=GitHub&style=for-the-badge)](https://github.com/jokob-sk/NetAlertX/releases)
+[![Discord](https://img.shields.io/discord/1274490466481602755?color=0aa8d2&logoColor=fff&logo=Discord&style=for-the-badge)](https://discord.gg/NczTUTWyRr)
 
-# NetAlertX 💻🔍 Network scanner & notification framework
 
-  | 🐳 [Docker hub](https://registry.hub.docker.com/r/jokobsk/netalertx) |  📑 [Docker guide](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) |🆕 [Release notes](https://github.com/jokob-sk/NetAlertX/releases) | 📚 [All Docs](https://github.com/jokob-sk/NetAlertX/tree/main/docs) |
-  |----------------------|----------------------| ----------------------|  ----------------------| 
+# NetAlertX 🖧🔍 Network scanner & notification framework
+
+| [📑 Docker guide](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md) | [🚀 Releases](https://github.com/jokob-sk/NetAlertX/releases) | [📚 Docs](https://github.com/jokob-sk/NetAlertX/tree/main/docs) | [🔌 Plugins](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md) | [🤖 Ask AI](https://gurubase.io/g/netalertx)
+|----------------------| ----------------------|  ----------------------| ----------------------| ----------------------| 
 
 <a href="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/GENERAL/github_social_image.jpg" target="_blank">
   <img src="https://raw.githubusercontent.com/jokob-sk/NetAlertX/main/docs/img/GENERAL/github_social_image.jpg" width="1000px" />
@@ -21,17 +21,19 @@ Head to [https://netalertx.com/](https://netalertx.com/) for more gifs and scree
 ## 📕 Basic Usage 
 
 > [!WARNING]
-> You will have to run the container on the `host` network.
+> You will have to run the container on the `host` network and specify `SCAN_SUBNETS` unless you use other [plugin scanners](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md). The initial scan can take a few minutes, so please wait 5-10 minutes for the initial discovery to finish.
 
 ```yaml
 docker run -d --rm --network=host \
-  -v local/path/config:/app/config \
-  -v local/path/db:/app/db \
+  -v local_path/config:/app/config \
+  -v local_path/db:/app/db \
+  --mount type=tmpfs,target=/app/api \
   -e TZ=Europe/Berlin \
   -e PORT=20211 \
   jokobsk/netalertx:latest
 ```
-- The initial scan can take up to 15min (with 50 devices and MQTT). Subsequent ones 3 and 5 minutes so wait that long for all of the scans to run.
+
+See alternative [docked-compose examples](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DOCKER_COMPOSE.md).
 
 ### Docker environment variables
 
@@ -40,7 +42,10 @@ docker run -d --rm --network=host \
 | `PORT`      |Port of the web interface  |  `20211` |
 | `LISTEN_ADDR`      |Set the specific IP Address for the listener address for the nginx webserver (web interface). This could be useful when using multiple subnets to hide the web interface from all untrusted networks. |  `0.0.0.0` |
 |`TZ` |Time zone to display stats correctly. Find your time zone [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)  |  `Europe/Berlin` |
-|`ALWAYS_FRESH_INSTALL` | Setting  to `true` will delete the content of the `/db` & `/config` folders. For testing purposes. Can be coupled with [watchtower](https://github.com/containrrr/watchtower) to have an always freshly installed `netalertx`/`-dev` image.   |    `N/A` |
+|`APP_CONF_OVERRIDE` | JSON override for settings, e.g. `{"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","GRAPHQL_PORT":"20212"}`  |  `N/A` |
+|`ALWAYS_FRESH_INSTALL` | If `true` will delete the content of the `/db` & `/config` folders. For testing purposes. Can be coupled with [watchtower](https://github.com/containrrr/watchtower) to have an always freshly installed `netalertx`/`netalertx-dev` image.   |    `N/A` |
+
+> You can override the default GraphQL port setting `GRAPHQL_PORT` (set to `20212`) by using the `APP_CONF_OVERRIDE` env variable. 
 
 ### Docker paths
 
@@ -49,53 +54,34 @@ docker run -d --rm --network=host \
 
 | Required | Path | Description |
 | :------------- | :------------- | :-------------| 
-| ✅ | `:/app/config` | Folder which will contain the `app.conf` & `devices.csv` ([read about devices.csv](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md)) files (see below for details).  | 
-| ✅ | `:/app/db` | Folder which will contain the `app.db` file  | 
-| | `:/app/front/log` |  Logs folder useful for debugging if you have issues setting up the container  | 
-| | `:/etc/pihole/pihole-FTL.db` |  PiHole's `pihole-FTL.db` database file. Required if you want to use PiHole DB mapping.  | 
-| | `:/etc/pihole/dhcp.leases` |  PiHole's `dhcp.leases` file. Required if you want to use PiHole `dhcp.leases` file. This has to be matched with a corresponding `DHCPLSS_paths_to_check` setting entry (the path in the container must contain `pihole`)| 
-| | `:/app/front/api` |  A simple [API endpoint](https://github.com/jokob-sk/NetAlertX/blob/main/docs/API.md) containing static (but regularly updated) json and other files.   | 
+| ✅ | `:/app/config` | Folder which will contain the `app.conf` & `devices.csv` ([read about devices.csv](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md)) files  | 
+| ✅ | `:/app/db` | Folder which will contain the `app.db` database file  | 
+| | `:/app/log` |  Logs folder useful for debugging if you have issues setting up the container  | 
+| | `:/app/api` |  A simple [API endpoint](https://github.com/jokob-sk/NetAlertX/blob/main/docs/API.md) containing static (but regularly updated) json and other files.   | 
 | | `:/app/front/plugins/<plugin>/ignore_plugin` | Map a file `ignore_plugin` to ignore a plugin. Plugins can be soft-disabled via settings. More in the [Plugin docs](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md).  | 
 | | `:/etc/resolv.conf` | Use a custom `resolv.conf` file for [better name resolution](https://github.com/jokob-sk/NetAlertX/blob/main/docs/REVERSE_DNS.md).  | 
 
-> Use separate `db` and `config` directories, don't nest them.
+> Use separate `db` and `config` directories, do not nest them.
 
-### (If UI is not available) Modify the config (`app.conf`) 
+### Initial setup
 
-- The preferred way is to manage the configuration via the Settings section in the UI.
-- You can modify [app.conf](https://github.com/jokob-sk/NetAlertX/tree/main/config) directly, if needed.
 - If unavailable, the app generates a default `app.conf` and `app.db` file on the first run.
+- The preferred way is to manage the configuration via the Settings section in the UI, if UI is inaccessible you can modify [app.conf](https://github.com/jokob-sk/NetAlertX/tree/main/back) in the `/app/config/` folder directly 
 
-### ⚙ Important settings
+### Setting up scanners
 
-These are the most important settings to get at least some output in your Devices screen. Usually, only one approach is used, but you can combine these approaches.
-
-| Scan method | Setting | Description |
-| :------------- | :------------- | :-------------| 
-| arp-scan, nmap-scan | `SCAN_SUBNETS` | See the documentation on how [to setup SUBNETS, VLANs & limitations](https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md) |
-| PiHole | `PIHOLE_RUN` | There are 2 approaches how to get PiHole devices imported. Via the PiHole import (`PIHOLE`) plugin or DHCP leases (`DHCPLSS`) plugin. The `PIHOLE` plugin requires you to map the PiHole database, as mentioned above. |
-| dhcp.leases | `DHCPLSS_RUN` | You need to map `:/etc/myfiles/dhcp.leases` in the `docker-compose.yml` file if you enable this setting. This path has to be matched with a corresponding `DHCPLSS_paths_to_check` setting entry (check the [DHCPLSS plugin readme](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_leases#overview) for details). |
+You have to specify which network(s) should be scanned. This is done by entering subnets that are accessible from the host. If you use the default `ARPSCAN` plugin, you have to specify at least one valid subnet and interface in the `SCAN_SUBNETS` setting. See the documentation on [How to set up multiple SUBNETS, VLANs and what are limitations](https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md) for troubleshooting and more advanced scenarios. 
 
+If you are running PiHole you can synchronize devices directly. Check the [PiHole configuration guide](https://github.com/jokob-sk/NetAlertX/blob/main/docs/PIHOLE_GUIDE.md) for details. 
 
 > [!NOTE]
-> It's recommended to use the same schedule interval for all plugins responsible for discovering new devices.
-
+> You can bulk-import devices via the [CSV import method](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md).
 
 #### 🧭 Community guides
 
-Use the official installation guides at first and use community content as supplementary material. Open an issue if you'd like to add your link to the list 🙏 
+You can read or watch several [community configuration guides](https://github.com/jokob-sk/NetAlertX/blob/main/docs/COMMUNITY_GUIDES.md) in Chinese, Korean, German, or French. 
 
-- ▶ [Home Lab Network Monitoring - Scotti-BYTE Enterprise Consulting Services](https://www.youtube.com/watch?v=0DryhzrQSJA) (July 2024)
-- 📄 [How to Install NetAlertX on Your Synology NAS - Marius hosting](https://mariushosting.com/how-to-install-pi-alert-on-your-synology-nas/) (Updated frequently)
-- 📄 [Using the PiAlert Network Security Scanner on a Raspberry Pi - PiMyLifeUp](https://pimylifeup.com/raspberry-pi-pialert/)
-- ▶ [How to Setup Pi.Alert on Your Synology NAS - Digital Aloha](https://www.youtube.com/watch?v=M4YhpuRFaUg) 
-- 📄 [시놀/헤놀에서 네트워크 스캐너 Pi.Alert Docker로 설치 및 사용하기 (Korean)](https://blog.dalso.org/article/%EC%8B%9C%EB%86%80-%ED%97%A4%EB%86%80%EC%97%90%EC%84%9C-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%8A%A4%EC%BA%90%EB%84%88-pi-alert-docker%EB%A1%9C-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9) (July 2023)
-- 📄 [网络入侵探测器Pi.Alert (Chinese)](https://codeantenna.com/a/VgUvIAjZ7J) (May 2023)
-- ▶ [Pi.Alert auf Synology & Docker by - Jürgen Barth (German)](https://www.youtube.com/watch?v=-ouvA2UNu-A) (March 2023)
-- ▶ [Top Docker Container for Home Server Security - VirtualizationHowto](https://www.youtube.com/watch?v=tY-w-enLF6Q) (March 2023)
-- ▶ [Pi.Alert or WatchYourLAN can alert you to unknown devices appearing on your WiFi or LAN network - Danie van der Merwe](https://www.youtube.com/watch?v=v6an9QG2xF0) (November 2022)
-
-> Ordered by last update time. 
+> Please note these might be outdated. Rely on official documentation first. 
  
 ### **Common issues** 
 
@@ -103,129 +89,6 @@ Use the official installation guides at first and use community content as suppl
 
 ⚠ Check also common issues and [debugging tips](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEBUG_TIPS.md). 
 
-> [!NOTE]
-> You can bulk-update devices via the [CSV import method](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md).
-
-## 📄 docker-compose.yml Examples
-
-### Example 1
-
-```yaml
-version: "3"
-services:
-  netalertx:
-    container_name: netalertx
-    # use the below line if you want to test the latest dev image
-    # image: "jokobsk/netalertx-dev:latest" 
-    image: "jokobsk/netalertx:latest"      
-    network_mode: "host"        
-    restart: unless-stopped
-    volumes:
-      - local/path/config:/app/config
-      - local/path/db:/app/db      
-      # (optional) useful for debugging if you have issues setting up the container
-      - local/path/logs:/app/front/log
-    environment:
-      - TZ=Europe/Berlin      
-      - PORT=20211
-```
-
-To run the container execute: `sudo docker-compose up -d`
-
-### Example 2
-
-Example by [SeimuS](https://github.com/SeimusS).
-
-```yaml
-  netalertx:
-    container_name: NetAlertX
-    hostname: NetAlertX
-    privileged: true
-    # use the below line if you want to test the latest dev image
-    # image: "jokobsk/netalertx-dev:latest" 
-    image: jokobsk/netalertx:latest
-    environment:
-      - TZ=Europe/Bratislava
-    restart: always
-    volumes:
-      - ./netalertx/db:/app/db
-      - ./netalertx/config:/app/config
-    network_mode: host
-```
-
-To run the container execute: `sudo docker-compose up -d`
-
-### Example 3
-
-`docker-compose.yml` 
-
-```yaml
-version: "3"
-services:
-  netalertx:
-    container_name: netalertx
-    # use the below line if you want to test the latest dev image
-    # image: "jokobsk/netalertx-dev:latest" 
-    image: "jokobsk/netalertx:latest"      
-    network_mode: "host"        
-    restart: unless-stopped
-    volumes:
-      - ${APP_DATA_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/front/log
-    environment:
-      - TZ=${TZ}      
-      - PORT=${PORT}
-```
-
-`.env` file
-
-```yaml
-#GLOBAL PATH VARIABLES
-
-APP_DATA_LOCATION=/path/to/docker_appdata
-APP_CONFIG_LOCATION=/path/to/docker_config
-LOGS_LOCATION=/path/to/docker_logs
-
-#ENVIRONMENT VARIABLES
-
-TZ=Europe/Paris
-PORT=20211
-
-#DEVELOPMENT VARIABLES
-
-DEV_LOCATION=/path/to/local/source/code
-```
-
-To run the container execute: `sudo docker-compose --env-file /path/to/.env up`
-
-### Example 4
-
-Courtesy of [pbek](https://github.com/pbek). The volume `netalertx_db` is used by the db directory. The two config files are mounted directly from a local folder to their places in the config folder. You can backup the `docker-compose.yaml` folder and the docker volumes folder.
-
-```yaml
-  netalertx:
-    # use the below line if you want to test the latest dev image
-    # image: "jokobsk/netalertx-dev:latest" 
-    image: jokobsk/netalertx
-    ports:
-      - "80:20211/tcp"
-    environment:
-      - TZ=Europe/Vienna
-    networks:
-      local:
-        ipv4_address: 192.168.1.2
-    restart: unless-stopped
-    volumes:
-      - netalertx_db:/app/db
-      - ./netalertx/:/app/config/      
-```
-
-## 🏅 Recognitions
-
-Big thanks to <a href="https://github.com/Macleykun">@Macleykun</a> & for help and tips & tricks for Dockerfile(s) and <a href="https://github.com/vladaurosh">@vladaurosh</a> for Alpine re-base help.
-
 ## ❤ Support me 
 
 | [![GitHub](https://i.imgur.com/emsRCPh.png)](https://github.com/sponsors/jokob-sk) | [![Buy Me A Coffee](https://i.imgur.com/pIM6YXL.png)](https://www.buymeacoffee.com/jokobsk) | [![Patreon](https://i.imgur.com/MuYsrq1.png)](https://www.patreon.com/user?u=84385063) | 
@@ -234,4 +97,4 @@ Big thanks to <a href="https://github.com/Macleykun">@Macleykun</a> & for help a
 - Bitcoin: `1N8tupjeCK12qRVU2XrV17WvKK7LCawyZM`
 - Ethereum: `0x6e2749Cb42F4411bc98501406BdcD82244e3f9C7`
 
-> 📧 Email me at [jokob@duck.com](mailto:jokob@duck.com?subject=NetAlertX) if you want to get in touch or if I should add other sponsorship platforms.
+> 📧 Email me at [jokob@duck.com](mailto:jokob@duck.com?subject=NetAlertX) if you want to get in touch or if I should add other sponsorship platforms.

dockerfiles/init.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/with-contenv bash
 
 echo "---------------------------------------------------------"
-echo "[INSTALL]                                    Run setup.sh"
+echo "[INSTALL]                                    Run init.sh"
 echo "---------------------------------------------------------"
 
 export INSTALL_DIR=/app  # Specify the installation directory here
@@ -41,6 +41,20 @@ if [ "$ALWAYS_FRESH_INSTALL" = true ]; then
   rm -rf "$INSTALL_DIR_OLD/db/"*
 fi
 
+# OVERRIDE settings: Handling APP_CONF_OVERRIDE
+# Check if APP_CONF_OVERRIDE is set
+
+# remove old
+rm "${INSTALL_DIR}/config/app_conf_override.json"
+
+if [ -z "$APP_CONF_OVERRIDE" ]; then
+  echo "APP_CONF_OVERRIDE is not set. Skipping config file creation."
+else
+  # Save the APP_CONF_OVERRIDE env variable as a JSON file
+  echo "$APP_CONF_OVERRIDE" > "${INSTALL_DIR}/config/app_conf_override.json"
+  echo "Config file saved to ${INSTALL_DIR}/config/app_conf_override.json"
+fi
+
 # 🔻 FOR BACKWARD COMPATIBILITY - REMOVE AFTER 12/12/2024
 
 # Check if pialert.db exists, then create a symbolic link to app.db
@@ -92,15 +106,17 @@ fi
 
 # Create an empty log files
 # Create the execution_queue.log and app_front.log files if they don't exist
-touch "${INSTALL_DIR}"/front/log/{app.log,execution_queue.log,app_front.log,app.php_errors.log,stderr.log,stdout.log,db_is_locked.log}
-touch "${INSTALL_DIR}"/front/api/user_notifications.json
+touch "${INSTALL_DIR}"/log/{app.log,execution_queue.log,app_front.log,app.php_errors.log,stderr.log,stdout.log,db_is_locked.log}
+touch "${INSTALL_DIR}"/api/user_notifications.json
+# Create plugins sub-directory if it doesn't exist in case a custom log folder is used
+mkdir -p "${INSTALL_DIR}"/log/plugins
 
 echo "[INSTALL] Fixing permissions after copied starter config & DB"
-chown -R nginx:www-data "${INSTALL_DIR}"/{config,front/log,db,front/api}
-chown -R nginx:www-data "${INSTALL_DIR}"/front/api/user_notifications.json
+chown -R nginx:www-data "${INSTALL_DIR}"/{config,log,db,api}
+chown -R nginx:www-data "${INSTALL_DIR}"/api/user_notifications.json
 
-chmod 750 "${INSTALL_DIR}"/{config,front/log,db}
-find "${INSTALL_DIR}"/{config,front/log,db} -type f -exec chmod 640 {} \;
+chmod 750 "${INSTALL_DIR}"/{config,log,db}
+find "${INSTALL_DIR}"/{config,log,db} -type f -exec chmod 640 {} \;
 
 # Check if buildtimestamp.txt doesn't exist
 if [ ! -f "${INSTALL_DIR}/front/buildtimestamp.txt" ]; then

dockerfiles/start.sh

@@ -19,7 +19,7 @@ echo "oneshot" > /etc/s6-overlay/s6-rc.d/SetupOneshot/type
 echo "longrun" > /etc/s6-overlay/s6-rc.d/php-fpm/type
 echo "longrun" > /etc/s6-overlay/s6-rc.d/nginx/type
 echo "longrun" > /etc/s6-overlay/s6-rc.d/$APP_NAME/type
-echo -e "${INSTALL_DIR}/dockerfiles/setup.sh" > /etc/s6-overlay/s6-rc.d/SetupOneshot/up
+echo -e "${INSTALL_DIR}/dockerfiles/init.sh" > /etc/s6-overlay/s6-rc.d/SetupOneshot/up
 echo -e "#!/bin/execlineb -P\n/usr/sbin/php-fpm83 -F" > /etc/s6-overlay/s6-rc.d/php-fpm/run
 echo -e '#!/bin/execlineb -P\nnginx -g "daemon off;"' > /etc/s6-overlay/s6-rc.d/nginx/run
 echo -e '#!/bin/execlineb -P
@@ -38,6 +38,5 @@ touch /etc/s6-overlay/s6-rc.d/user/contents.d/{SetupOneshot,php-fpm,nginx,$APP_N
 touch /etc/s6-overlay/s6-rc.d/nginx/dependencies.d/php-fpm
 touch /etc/s6-overlay/s6-rc.d/$APP_NAME/dependencies.d/nginx
 
-
-
-rm -f $0
+# this removes the current file
+# rm -f $0

docs/API.md

@@ -1,7 +1,134 @@
-## API endpoints
+# API endpoints
 
-NetAlertX comes with a simple API. These API endpoints are static files, that are periodically updated based on your settings. 
+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
+  }
+}
+```
+
+### `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 
+
+These API endpoint are 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
 
@@ -9,7 +136,7 @@ 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/front/api/` folder and thus on the `<netalertx_url>/api/<File name>` url.
+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
 
@@ -21,7 +148,6 @@ You can access the following files:
   | `notification_text.html` | The full HTML of the last email notification. |
   | `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` | The current (at the time of the last update as mentioned above on this page) state of all of the available Devices detected by the app. |  
-  | `table_pholus_scan.json` | The latest state of the [pholus](https://github.com/jokob-sk/NetAlertX/tree/main/pholus) (A multicast DNS and DNS Service Discovery Security Assessment Tool) scan results. |
   | `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/front/plugins)|
@@ -58,41 +184,79 @@ Example JSON of the `table_devices.json` endpoint with two Devices (database row
 {
   "data": [
         {
-          "dev_MAC": "Internet",
-          "dev_Name": "Net - Huawei",
-          "dev_DeviceType": "Router",
-          "dev_Vendor": null,
-          "dev_Group": "Always on",
-          "dev_FirstConnection": "2021-01-01 00:00:00",
-          "dev_LastConnection": "2021-01-28 22:22:11",
-          "dev_LastIP": "192.168.1.24",
-          "dev_StaticIP": 0,
-          "dev_PresentLastScan": 1,
-          "dev_LastNotification": "2023-01-28 22:22:28.998715",
-          "dev_NewDevice": 0,
-          "dev_Network_Node_MAC_ADDR": "",
-          "dev_Network_Node_port": "",
-          "dev_Icon": "globe"
+          "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"
         }, 
         {
-          "dev_MAC": "a4:8f:ff:aa:ba:1f",
-          "dev_Name": "Net - USG",
-          "dev_DeviceType": "Firewall",
-          "dev_Vendor": "Ubiquiti Inc",
-          "dev_Group": "",
-          "dev_FirstConnection": "2021-02-12 22:05:00",
-          "dev_LastConnection": "2021-07-17 15:40:00",
-          "dev_LastIP": "192.168.1.1",
-          "dev_StaticIP": 1,
-          "dev_PresentLastScan": 1,
-          "dev_LastNotification": "2021-07-17 15:40:10.667717",
-          "dev_NewDevice": 0,
-          "dev_Network_Node_MAC_ADDR": "Internet",
-          "dev_Network_Node_port": 1,
-          "dev_Icon": "shield-halved"
+          "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: /log files
+
+To retrieve 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 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/AUTHELIA.md

@@ -0,0 +1,275 @@
+(DRAFT) Authelia support
+
+
+
+```yaml
+theme: dark
+
+default_2fa_method: "totp"
+
+server:
+  address: 0.0.0.0:9091
+  endpoints:
+    enable_expvars: false
+    enable_pprof: false
+    authz:
+      forward-auth:
+        implementation: 'ForwardAuth'
+        authn_strategies:
+          - name: 'HeaderAuthorization'
+            schemes:
+              - 'Basic'
+          - name: 'CookieSession'
+      ext-authz:
+        implementation: 'ExtAuthz'
+        authn_strategies:
+          - name: 'HeaderAuthorization'
+            schemes:
+              - 'Basic'
+          - name: 'CookieSession'
+      auth-request:
+        implementation: 'AuthRequest'
+        authn_strategies:
+          - name: 'HeaderAuthRequestProxyAuthorization'
+            schemes:
+              - 'Basic'
+          - name: 'CookieSession'
+      legacy:
+        implementation: 'Legacy'
+        authn_strategies:
+          - name: 'HeaderLegacy'
+          - name: 'CookieSession'
+  disable_healthcheck: false
+  tls:
+    key: ""
+    certificate: ""
+    client_certificates: []
+  headers:
+    csp_template: ""
+
+log:
+  ## Level of verbosity for logs: info, debug, trace.
+  level: info
+
+###############################################################
+# The most important section
+###############################################################
+access_control:
+  ## Default policy can either be 'bypass', 'one_factor', 'two_factor' or 'deny'.
+  default_policy: deny
+  networks:
+    - name: internal
+      networks:
+        - '192.168.0.0/18'
+        - '10.10.10.0/8' # Zerotier
+    - name: private
+      networks:
+        - '172.16.0.0/12'
+  rules:
+    - networks:
+        - private
+      domain:
+        - '*'
+      policy: bypass
+    - networks:
+        - internal
+      domain:
+        - '*'
+      policy: bypass
+    - domain:
+        # exclude itself from auth, should not happen as we use Traefik middleware on a case-by-case screnario
+        - 'auth.MYDOMAIN1.TLD'
+        - 'authelia.MYDOMAIN1.TLD'
+        - 'auth.MYDOMAIN2.TLD'
+        - 'authelia.MYDOMAIN2.TLD'
+      policy: bypass
+    - domain:
+        #All subdomains match
+        - 'MYDOMAIN1.TLD'
+        - '*.MYDOMAIN1.TLD'
+      policy: two_factor
+    - domain:
+        # This will not work yet as Authelio does not support multi-domain authentication
+        - 'MYDOMAIN2.TLD'
+        - '*.MYDOMAIN2.TLD'
+      policy: two_factor
+
+
+############################################################
+identity_validation:
+  reset_password:
+    jwt_secret: "[REDACTED]"
+
+identity_providers:
+  oidc:
+    enable_client_debug_messages: true
+    enforce_pkce: public_clients_only
+    hmac_secret: [REDACTED]
+    lifespans:
+      authorize_code: 1m
+      id_token: 1h
+      refresh_token: 90m
+      access_token: 1h
+    cors:
+      endpoints:
+        - authorization
+        - token
+        - revocation
+        - introspection
+        - userinfo
+      allowed_origins:
+        - "*"
+      allowed_origins_from_client_redirect_uris: false
+    jwks:
+      - key: [REDACTED]
+        certificate_chain:
+    clients:
+      - client_id: portainer
+        client_name: Portainer
+        # generate secret with "authelia crypto hash generate pbkdf2 --random --random.length 32 --random.charset alphanumeric"
+        # Random Password: [REDACTED]
+        # Digest: [REDACTED]
+        client_secret: [REDACTED]
+        token_endpoint_auth_method: 'client_secret_post'
+        public: false
+        authorization_policy: two_factor
+        consent_mode: pre-configured #explicit
+        pre_configured_consent_duration: '6M' #Must be re-authorised every 6 Months
+        scopes:
+          - openid
+          #- groups #Currently not supported in Authelia V
+          - email
+          - profile
+        redirect_uris:
+          - https://portainer.MYDOMAIN1.LTD
+        userinfo_signed_response_alg: none
+
+      - client_id: openproject
+        client_name: OpenProject
+        # generate secret with "authelia crypto hash generate pbkdf2 --random --random.length 32 --random.charset alphanumeric"
+        # Random Password: [REDACTED]
+        # Digest: [REDACTED]
+        client_secret: [REDACTED]
+        token_endpoint_auth_method: 'client_secret_basic'
+        public: false
+        authorization_policy: two_factor
+        consent_mode: pre-configured #explicit
+        pre_configured_consent_duration: '6M' #Must be re-authorised every 6 Months
+        scopes:
+          - openid
+          #- groups #Currently not supported in Authelia V
+          - email
+          - profile
+        redirect_uris:
+          - https://op.MYDOMAIN.TLD
+        #grant_types:
+        #  - refresh_token
+        #  - authorization_code
+        #response_types:
+        #  - code
+        #response_modes:
+        #  - form_post
+        #  - query
+        #  - fragment
+        userinfo_signed_response_alg: none
+##################################################################
+
+
+telemetry:
+  metrics:
+    enabled: false
+    address: tcp://0.0.0.0:9959
+
+totp:
+  disable: false
+  issuer: authelia.com
+  algorithm: sha1
+  digits: 6
+  period: 30 ## The period in seconds a one-time password is valid for.
+  skew: 1
+  secret_size: 32
+
+webauthn:
+  disable: false
+  timeout: 60s ## Adjust the interaction timeout for Webauthn dialogues.
+  display_name: Authelia
+  attestation_conveyance_preference: indirect
+  user_verification: preferred
+
+ntp:
+  address: "pool.ntp.org"
+  version: 4
+  max_desync: 5s
+  disable_startup_check: false
+  disable_failure: false
+
+authentication_backend:
+  password_reset:
+    disable: false
+    custom_url: ""
+  refresh_interval: 5m
+  file:
+    path: /config/users_database.yml
+    watch: true
+    password:
+      algorithm: argon2
+      argon2:
+        variant: argon2id
+        iterations: 3
+        memory: 65536
+        parallelism: 4
+        key_length: 32
+        salt_length: 16
+
+password_policy:
+  standard:
+    enabled: false
+    min_length: 8
+    max_length: 0
+    require_uppercase: true
+    require_lowercase: true
+    require_number: true
+    require_special: true
+  ## zxcvbn is a well known and used password strength algorithm. It does not have tunable settings.
+  zxcvbn:
+    enabled: false
+    min_score: 3
+
+regulation:
+  max_retries: 3
+  find_time: 2m
+  ban_time: 5m
+
+session:
+  name: authelia_session
+  secret: [REDACTED]
+  expiration: 60m
+  inactivity: 15m
+  cookies:
+    - domain: 'MYDOMAIN1.LTD'
+      authelia_url: 'https://auth.MYDOMAIN1.LTD'
+      name: 'authelia_session'
+      default_redirection_url: 'https://MYDOMAIN1.LTD'
+    - domain: 'MYDOMAIN2.LTD'
+      authelia_url: 'https://auth.MYDOMAIN2.LTD'
+      name: 'authelia_session_other'
+      default_redirection_url: 'https://MYDOMAIN2.LTD'
+
+storage:
+  encryption_key: [REDACTED]
+  local:
+    path: /config/db.sqlite3
+
+notifier:
+  disable_startup_check: true
+  smtp:
+    address: MYOTHERDOMAIN.LTD:465
+    timeout: 5s
+    username: "USER@DOMAIN"
+    password: "[REDACTED]"
+    sender: "Authelia <postmaster@MYOTHERDOMAIN.LTD>"
+    identifier: NAME@MYOTHERDOMAIN.LTD
+    subject: "[Authelia] {title}"
+    startup_check_address: postmaster@MYOTHERDOMAIN.LTD
+
+```

docs/BACKUPS.md

@@ -1,17 +1,18 @@
 # 💾 Backing things up
 
 > [!NOTE]
-> To backup 99% of your configuration backup at least the `/config` folder. Please read the whole page (or at least "Scenario 2: Corrupted database") for details.
+> To backup 99% of your configuration backup at least the `/app/config` folder. Please read the whole page (or at least "Scenario 2: Corrupted database") for details.
+> Please also note that database definitions might change over versions. The safest way is to restore your older backups into the **same version** of the app and then gradually upgarde between releases to the latest version.
 
 There are 3 artifacts that can be used to backup the application:
 
 | File                  | Description                   | Limitations                   |
 |-----------------------|-------------------------------|-------------------------------|
 | `/db/app.db`       | Database file(s)  | The database file might be in an uncommitted state or corrupted |
-| `/config/app.conf` | Configuration file |   Doesn't contain settings from the Maintenance section        |
+| `/config/app.conf` | Configuration file |  Can be overridden with the [`APP_CONF_OVERRIDE` env variable](https://github.com/jokob-sk/NetAlertX/tree/main/dockerfiles#docker-environment-variables).  |
 | `/config/devices.csv`  | CSV file containing device information |     Doesn't contain historical data        |
 
-## Data and cackup storage
+## Data and backup storage
 
 To decide on a backup strategy, check where the data is stored:
 
@@ -22,16 +23,17 @@ The core application configuration is in the `app.conf` file (See [Settings Syst
 - Notification settings
 - Scanner settings
 - Scheduled maintenance settings
-- UI configuration (80%)
+- UI configuration
 
 ### Core Device Data
 
-The core device data is backed up to the `devices_<timestamp>.csv` file via the [CSV Backup `CSVBCKP` Plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/csv_backup). This file contains data, such as:
+The core device data is backed up to the `devices_<timestamp>.csv` or `devices.csv` file via the [CSV Backup `CSVBCKP` Plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/csv_backup). This file contains data, such as:
 
 - Device names
-- Device Icons
-- Device Network configuration
+- Device icons
+- Device network configuration
 - Device categorization 
+- Device custom properties data
 
 ### Historical data
 
@@ -40,13 +42,13 @@ Historical data is stored in the `app.db` database (See [Database overview](http
 - Plugin objects
 - Plugin historical entries
 - History of Events, Notifications, Workflow Events
-- Presence History
+- Presence history
 
 ## 🧭 Backup strategies
 
 The safest approach to backups is to backup all of the above, by taking regular file system backups (I use [Kopia](https://github.com/kopia/kopia)). 
 
-Arguably, the most time is spent setting up the device list, so if only one file is kept I'd recommend to have a latest backup of the `devices_<timestamp>.csv` file, followed by the `app.conf` file. 
+Arguably, the most time is spent setting up the device list, so if only one file is kept I'd recommend to have a latest backup of the `devices_<timestamp>.csv` or `devices.csv` file, followed by the `app.conf` file. 
 
 ### Scenario 1: Full backup
 
@@ -54,8 +56,8 @@ End-result: Full restore
 
 #### Source artifacts:
 
-- `/db/app.db` (uncorrupted)
-- `/config/app.conf`
+- `/app/db/app.db` (uncorrupted)
+- `/app/config/app.conf`
 
 #### Recovery:
 
@@ -68,15 +70,15 @@ End-result: Partial restore (historical data & configurations from the Maintenan
 
 #### Source artifacts:
 
-- `/config/app.conf`
-- `/config/devices_<timestamp>.csv` or `/config/devices.csv`
+- `/app/config/app.conf`
+- `/app/config/devices_<timestamp>.csv` or `/app/config/devices.csv`
 
 #### Recovery:
 
-Even with a corrupted database you can recover what I would argue is 99% of the configuration (except of a couple of settings under Maintenance). 
+Even with a corrupted database you can recover what I would argue is 99% of the configuration. 
 
-- map the `/config/app.conf` file as described in the [Setup documentation](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md#docker-paths).
-- rename the `devices_<timestamp>.csv` to `devices.csv` and place it in the `/config` folder
+- upload the `app.conf` file into the mounted `/app/config/` folder as described in the [Setup documentation](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md#docker-paths).
+- rename the `devices_<timestamp>.csv` to `devices.csv` and place it in the `/app/config` folder
 - Restore the `devices.csv` backup via the [Maintenance section](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md)
 
 

docs/COMMUNITY_GUIDES.md

@@ -0,0 +1,14 @@
+# Community Guides
+
+Use the official installation guides at first and use community content as supplementary material. Open an issue or PR if you'd like to add your link to the list 🙏 (Ordered by last update time)
+
+- ▶ [Home Lab Network Monitoring - Scotti-BYTE Enterprise Consulting Services](https://www.youtube.com/watch?v=0DryhzrQSJA) (July 2024)
+- 📄 [How to Install NetAlertX on Your Synology NAS - Marius hosting](https://mariushosting.com/how-to-install-pi-alert-on-your-synology-nas/) (Updated frequently)
+- 📄 [Using the PiAlert Network Security Scanner on a Raspberry Pi - PiMyLifeUp](https://pimylifeup.com/raspberry-pi-pialert/)
+- ▶ [How to Setup Pi.Alert on Your Synology NAS - Digital Aloha](https://www.youtube.com/watch?v=M4YhpuRFaUg) 
+- 📄 [防蹭网神器，网络安全助手 | 极空间部署网络扫描和通知系统『NetAlertX』](https://blog.csdn.net/qq_63499861/article/details/141105273)
+- 📄 [시놀/헤놀에서 네트워크 스캐너 Pi.Alert Docker로 설치 및 사용하기](https://blog.dalso.org/article/%EC%8B%9C%EB%86%80-%ED%97%A4%EB%86%80%EC%97%90%EC%84%9C-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%8A%A4%EC%BA%90%EB%84%88-pi-alert-docker%EB%A1%9C-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9) (July 2023)
+- 📄 [网络入侵探测器Pi.Alert (Chinese)](https://codeantenna.com/a/VgUvIAjZ7J) (May 2023)
+- ▶ [Pi.Alert auf Synology & Docker by - Jürgen Barth](https://www.youtube.com/watch?v=-ouvA2UNu-A) (March 2023)
+- ▶ [Top Docker Container for Home Server Security - VirtualizationHowto](https://www.youtube.com/watch?v=tY-w-enLF6Q) (March 2023)
+- ▶ [Pi.Alert or WatchYourLAN can alert you to unknown devices appearing on your WiFi or LAN network - Danie van der Merwe](https://www.youtube.com/watch?v=v6an9QG2xF0) (November 2022)

docs/CUSTOM_PROPERTIES.md

@@ -0,0 +1,85 @@
+# Custom Properties for Devices
+
+![Custom Properties](/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties.png)
+
+## Overview
+
+This functionality allows you to define **custom properties** for devices, which can store and display additional information on the device listing page. By marking properties as visible, you can enhance the user interface with quick actions, notes, or external links.
+
+### Key Features:
+- **Customizable Properties**: Define specific properties for each device.
+- **Visibility Control**: Choose which properties are displayed on the device listing page.
+- **Interactive Elements**: Include actions like links, modals, and device management directly in the interface.
+
+---
+
+## Defining Custom Properties
+
+Custom properties are structured as a list of objects, where each property includes the following fields:
+
+| Field             | Description                                                                 |
+|--------------------|-----------------------------------------------------------------------------|
+| `CUSTPROP_icon`    | The icon (Base64-encoded HTML) displayed for the property.                 |
+| `CUSTPROP_type`    | The action type (e.g., `show_notes`, `link`, `delete_dev`).                |
+| `CUSTPROP_name`    | A short name or title for the property.                                    |
+| `CUSTPROP_args`    | Arguments for the action (e.g., URL or modal text).                        |
+| `CUSTPROP_notes`   | Additional notes or details displayed when applicable.                    |
+| `CUSTPROP_show`    | A boolean to control visibility (`true` to show on the listing page).      |
+
+---
+
+## Available Action Types
+
+- **Show Notes**: Displays a modal with a title and additional notes.
+  - **Example**: Show firmware details or custom messages.
+- **Link**: Redirects to a specified URL in the current browser tab. (**Arguments** Needs to contain the full URL.)
+- **Link (New Tab)**: Opens a specified URL in a new browser tab. (**Arguments** Needs to contain the full URL.)
+- **Delete Device**: Deletes the device using its MAC address.
+- **Run Plugin**: Placeholder for executing custom plugins (not implemented yet).
+
+---
+
+## Usage on the Device Listing Page
+
+![Custom Properties](/docs/img/CUSTOM_PROPERTIES/Device_Custom_Properties_vid.gif)
+
+Visible properties (`CUSTPROP_show: true`) are displayed as interactive icons in the device listing. Each icon can perform one of the following actions based on the `CUSTPROP_type`:
+
+1. **Modals (e.g., Show Notes)**:
+   - Displays detailed information in a popup modal.
+   - Example: Firmware version details.
+
+2. **Links**:
+   - Redirect to an external or internal URL.
+   - Example: Open a device's documentation or external site.
+
+3. **Device Actions**:
+   - Manage devices with actions like delete.
+   - Example: Quickly remove a device from the network.
+
+4. **Plugins**:
+   - Future placeholder for running custom plugin scripts.
+   - **Note**: Not implemented yet.
+
+---
+
+## Example Scenarios
+
+1. **Device Documentation Link**:
+   - Add a custom property with `CUSTPROP_type` set to `link` or `link_new_tab` to allow quick navigation to the documentation.
+
+2. **Firmware Details**:
+   - Use `CUSTPROP_type: show_notes` to display firmware versions or upgrade instructions in a modal.
+
+3. **Device Removal**:
+   - Enable device removal functionality using `CUSTPROP_type: delete_dev`.
+
+---
+
+## Notes
+
+- **Plugin Functionality**: The `run_plugin` action type is currently not implemented and will show an alert if used.
+- **Custom Icons (Experimental 🧪)**: Use Base64-encoded HTML to provide custom icons for each property. You can add your icons in Setttings via the `CUSTPROP_icon` settings 
+- **Visibility Control**: Only properties with `CUSTPROP_show: true` will appear on the listing page.
+
+This feature provides a flexible way to enhance device management and display with interactive elements tailored to your needs.

docs/DATABASE.md

@@ -14,10 +14,9 @@
   | Events | Used to collect connection/disconnection events. | ![Screen4][screen4]  |   
   | Online_History   | Used to display the `Device presence` chart  | ![Screen6][screen6]  | 
   | Parameters       | Used to pass values between the frontend and backend. | ![Screen7][screen7]  | 
-  | Pholus_Scan      | Scan results of the Pholus python network penetration script. | ![Screen8][screen8]  |   
   | Plugins_Events   | For capturing events exposed by a plugin via the `last_result.log` file. If unique then saved into the `Plugins_Objects` table. Entries are deleted once processed and stored in the `Plugins_History` and/or `Plugins_Objects` tables.  | ![Screen10][screen10]  | 
   | Plugins_History  | History of all entries from the `Plugins_Events` table | ![Screen11][screen11]  | 
-  | Plugins_Language_Strings  | Language strings colelcted from the plugin `config.json` files used for string resolution in the frontend. | ![Screen12][screen12]  | 
+  | Plugins_Language_Strings  | Language strings collected from the plugin `config.json` files used for string resolution in the frontend. | ![Screen12][screen12]  | 
   | Plugins_Objects  | Unique objects detected by individual plugins. | ![Screen13][screen13]  | 
   | Sessions  | Used to display sessions in the charts | ![Screen15][screen15]  | 
   | Settings  | Database representation of the sum of all settings from `app.conf` and plugins coming from `config.json` files. | ![Screen16][screen16]  | 
@@ -29,7 +28,6 @@
   [screen4]: /docs/img/DATABASE/Events.png  
   [screen6]: /docs/img/DATABASE/Online_History.png
   [screen7]: /docs/img/DATABASE/Parameters.png
-  [screen8]: /docs/img/DATABASE/Pholus_Scan.png  
   [screen10]: /docs/img/DATABASE/Plugins_Events.png
   [screen11]: /docs/img/DATABASE/Plugins_History.png
   [screen12]: /docs/img/DATABASE/Plugins_Language_Strings.png

docs/DEBUG_PLUGINS.md

@@ -55,7 +55,7 @@ Input data from the plugin might cause mapping issues in specific edge cases. Lo
 17:31:05 [Plugins] SQL sqlParams for mapping: [('01:01:01:01:01:01', '172.30.0.1', 0, 'aaaa', 'vvvvvvvvv', 'PIHOLE'), ('02:42:ac:1e:00:02', '172.30.0.2', 0, 'dddd', 'vvvvv2222', 'PIHOLE')]
 🔺
 17:31:05 [API] Update API starting
-17:31:06 [API] Updating table_plugins_history.json file in /front/api
+17:31:06 [API] Updating table_plugins_history.json file in /api
 ```
 
 > The debug output between the 🔻red arrows🔺 is important for debugging (arrows added only to highlight the section on this page, they are not available in the actual debug log)
@@ -76,3 +76,16 @@ In the above output notice the section logging how many events are produced by t
 These values, if formatted correctly, will also show up in the UI:
 
 ![Plugins table](/docs/img/DEBUG_PLUGINS/plugin_objects_pihole.png)
+
+
+### Sharing application state
+
+Sometimes specific log sections are needed to debug issues. The Devices and CurrentScan table data is sometimes needed to figure out what's wrong. 
+
+1. Please set `LOG_LEVEL` to `trace` (Disable it once you have the info as this produces big log files).
+2. Wait for the issue to occur.
+3. Search for `================ DEVICES table content  ================` in your logs.
+4. Search for `================ CurrentScan table content  ================` in your logs.
+5. Open a new issue and post (redacted) output into the issue description (or send to the netalertx@gmail.com email if sensitive data present).
+6. Please set `LOG_LEVEL` to `debug` or lower.
+

docs/DEBUG_TIPS.md

@@ -49,11 +49,22 @@ services:
     # Other service configurations...
 ```
 
+## 5. Sharing application state
+
+Sometimes specific log sections are needed to debug issues. The Devices and CurrentScan table data is sometimes needed to figure out what's wrong. 
+
+1. Please set `LOG_LEVEL` to `trace` (Disable it once you have the info as this produces big log files).
+2. Wait for the issue to occur.
+3. Search for `================ DEVICES table content  ================` in your logs.
+4. Search for `================ CurrentScan table content  ================` in your logs.
+5. Open a new issue and post (redacted) output into the issue description (or send to the netalertx@gmail.com email if sensitive data present).
+6. Please set `LOG_LEVEL` to `debug` or lower.
+
 ## 📃Common issues
 
 ### Permissions
 
-* If facing issues (AJAX errors, can't write to DB, empty screen, etc,) make sure permissions are set correctly, and check the logs under `/app/front/log`. 
+* If facing issues (AJAX errors, can't write to DB, empty screen, etc,) make sure permissions are set correctly, and check the logs under `/app/log`. 
 * To solve permission issues you can try setting the owner and group of the `app.db` by executing the following on the host system: `docker exec netalertx chown -R www-data:www-data /app/db/app.db`. 
 * If still facing issues, try to map the app.db file (⚠ not folder) to `:/app/db/app.db` (see [docker-compose Examples](https://github.com/jokob-sk/NetAlertX/blob/main/dockerfiles/README.md#-docker-composeyml-examples) for details)
 
@@ -81,3 +92,7 @@ sudo dpkg -i libseccomp2_2.5.3-2_armhf.deb
 ```
 
 The link above will probably break in time too. Go to https://packages.debian.org/sid/armhf/libseccomp2/download to find the new version number and put that in the url.
+
+### Only Router and own device show up
+
+Make sure that the subnet and interface in SCAN_SUBNETS are the correct ones. If your device/NAS has multiple ethernet ports, you probably need to change eth0 to something else!

docs/DEVICE_DISPLAY_SETTINGS.md

@@ -0,0 +1,6 @@
+# Device Display Settings
+
+This set of settings allows you to group Devices under different views. The Archived toggle allows you to exclude a Device from most listings and notifications. 
+
+
+![Display settings](/docs/img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)

docs/DEVICE_MANAGEMENT.md

@@ -1,107 +1,52 @@
 # NetAlertX - Device Management
-<!--- --------------------------------------------------------------------- --->
-To edit device information:
-  - Select "Devices" in the menu on the left of the screen
-  - Find the device you want to edit in the central table
-  - Go to the device page by clicking on the device name or status
-  - Press "Details" tab of the device
-  - Edit the device data
-  - Press the "Save" button
+
+The Main Info section is where most of the device identifiable information is stored and edited. Some of the information is autodetected via various plugins. Initial values for most of the fields can be specified in the `NEWDEV` plugin.
 
 
 > [!NOTE] 
 >
-> [Bulk-edit devices](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md) by using the _CSV Export_ functionality in the _Maintenance_ section.
+> You can multi-edit devices by selecting them in the main Devices view, from the Mainetence section, or via the CSV Export functionality under Maintenance. More info can be found in the [Devices Bulk-editing docs](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICES_BULK_EDITING.md).
 
 
-![Device Details][screen1]
+ ![Main Info](/docs/img/DEVICE_MANAGEMENT/DeviceManagement_MainInfo.png)
 
 
 ## Main Info
-  - **MAC**: MAC addres of the device. Not editable.
-  - **Name**: Friendly device name
-  - **Owner**: Device owner (The list is self-populated with existing owners)
-  - **Type**: Select a device type from the dropdown list (Smartphone, Table,
-      Laptop, TV, router, ....) or type a new device type
-  - **Vendor**: Automatically updated by NetAlertX when empty or unknown
-  - **Favorite**: Mark the device as favorite and then it will appears at the
-      begining of the device list
-  - **Group**: Select a grouper ('Always on', 'Personal', Friends') or type
-      your own Group name
-  - **Comments**: Type any comments for the device
 
-## Session Info
-  - **Status**: Show device status : On-line / Off-Line
-  - **First Session**: Date and time of the first connection
-  - **Last Offline**: Date and time of the last last time the device was offline
-  - **Last IP**: Last known IP used during the last connection
-  - **Static IP**: Check this box to identify devices that always use the
-      same IP
+  - **MAC**: MAC addres of the device. Not editable, unless creating a new dummy device.
+  - **Last IP**: IP addres of the device. Not editable, unless creating a new dummy device.
+  - **Name**: Friendly device name. Autodetected via various 🆎 Name discovery [plugins](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md).
+  - **Icon**: Partially autodetected. Select an existing or [add a custom icon](https://github.com/jokob-sk/NetAlertX/blob/main/docs/ICONS.md). You can also auto-apply the same icon on all devices of the same type. 
+  - **Owner**: Device owner (The list is self-populated with existing owners and you can add custom values).
+  - **Type**: Select a device type from the dropdown list (`Smartphone`, `Tablet`,
+      `Laptop`, `TV`, `router`, etc.) or add a new device type. If you want the device to act as a **Network device** (and be able to be a network node in the Network view), select a type under Network Devices or add a new Network Device type in Settings. More information can be found in the [Network Setup docs](https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md). 
+  - **Vendor**: The manufacturing vendor. Automatically updated by NetAlertX when empty or unknown, can be edited.
+  - **Group**: Select a group (`Always on`, `Personal`, `Friends`, etc.) or type
+      your own Group name.
+  - **Location**: Select the location, usually a room, where the device is located (`Kitchen`, `Attic`, `Living room`, etc.) or add a custom Location.  
+  - **Comments**: Add any comments for the device, such as a serial number, or maintenance information.
 
-## Events & Alerts config
-  - **Scan Cycle**: Select the scan cycle: 0, 1', 15'
-    - Some devices do not respond to all ARP packets, for this cases is better
-      to use a 15' cycle.
-    - **For Apple devices I recommend using 15' cycle**
-  - **Alert All Events**: Send a notification in each event (connection,
-      disconnection, IP Changed, ...)
-  - **Alert Down**: Send a notification when the device is down
-    - *(Userful with "always connected" devices: Camera, Alexa,...)*
-  - **Skip repeated notifications during**: Do not send more than one
-      notification to this device for X hours
-    - *(Useful to avoid notification saturation on devices that frequently
-      connects and disconnects)*
+> [!NOTE] 
+>
+> Please note the above usage of the fields are only suggestions. You can use most of these fields for other purposes, such as storing the network interface, company owning a device, or similar. 
 
-# Privacy & Random MAC's
-<!--- --------------------------------------------------------------------- --->
+## Dummy devices
 
-The latest versions of some operating systems (IOS and Android) incorporate a
-new & interesting functionality to improve privacy: **Random MACs**.
+You can create dummy devices from the Devices listing screen. 
 
-This functionality allows you to **hide the true MAC** of the device and
-**assign a random MAC** when we connect to WIFI networks.
+![Create Dummy Device](/docs/img/DEVICE_MANAGEMENT/Devices_CreateDummyDevice.png)
 
-This behavior is especially useful when connecting to WIFI's that we do not
-know, but it **is totally useless when connecting to our own WIFI's** or known
-networks.
+The **MAC** field and the **Last IP** field will then become editable.
 
-**I recommend disabling this operation when connecting our devices to our own
-WIFI's**, in this way, NetAlertX will be able to identify the device, and it
-will not identify it as a new device every so often (every time IOS or Android
-decides to change the MAC).
-
-### IOS
-![ios][ios]
-
-  - [Use private Wi-Fi addresses in iOS 14](https://support.apple.com/en-us/HT211227)
-
-### Android
-![Android][Android]
-
-  - [How to Disable MAC Randomization in Android 10](https://support.boingo.com/s/article/How-to-Disable-MAC-Randomization-in-Android-10-Android-Q)
-  - [How do I disable random Wi-Fi MAC address on Android 10](https://support.plume.com/hc/en-gb/articles/360052070714-How-do-I-disable-random-Wi-Fi-MAC-address-on-Android-10-)
-  
-### License
-  GPL 3.0
-  [Read more here](../LICENSE.txt)
-
-### Contact 
-
-  Always use the Issue tracker for the correct fork, for example: 
-  
-  [jokob-sk/NetAlertX](https://github.com/jokob-sk/NetAlertX/issues). Please also follow the guidelines on:
-
-  - ➕ [Pull Request guidelines](https://github.com/jokob-sk/NetAlertX/tree/main/docs#-pull-requests-prs) 
-  - 🙏 [Feature request guidelines](https://github.com/jokob-sk/NetAlertX/tree/main/docs#-feature-requests) 
-  - 🐛 [Issue guidelines](https://github.com/jokob-sk/NetAlertX/tree/main/docs#-submitting-an-issue-or-bug)
-
-    
-  ***Suggestions and comments are welcome***
+![Save Dummy Device](/docs/img/DEVICE_MANAGEMENT/DeviceEdit_SaveDummyDevice.png)
 
 
-<!--- --------------------------------------------------------------------- --->
-[main]:    ./img/1_devices.jpg           "Main screen"
-[screen1]: ./img/2_1_device_details.jpg  "Screen 1"
-[ios]:     https://9to5mac.com/wp-content/uploads/sites/6/2020/08/how-to-use-private-wifi-mac-address-iphone-ipad.png?resize=2048,1009 "ios"
-[Android]: ./img/android_random_mac.jpg  "Android"
+> [!NOTE] 
+>
+> You can couple this with the `ICMP` plugin which can be used to monitor the status of these devices, if they are actual devices reachable with the `ping` command. If not, you can use a loopback IP address so they appear online, such as `0.0.0.0` or `127.0.0.1`.
+
+## Copying data from an existing device. 
+
+To speed up device population you can also copy data from an existing device. This can be done from the **Tools** tab on the Device details. 
+
 

docs/DEV_ENV_SETUP.md

@@ -1,4 +1,4 @@
-## Development environemnt set up
+## Development environment set up
 
 >[!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.
@@ -52,13 +52,19 @@ A command to stop, remove the container and the image (replace `netalertx` and `
 
 - `sudo docker container stop netalertx ; sudo docker container rm netalertx ; sudo docker image rm netalertx-netalertx`
 
-### Restart hanging python script
+### Restart the server backend
 
-SSH into the container and kill & restart the main script loop 
+Most code changes can be tetsed without rebuilding the container. When working on the python server backend, you only need to restart the server.
+
+1. You can usually restart the backend via Maintenance > Logs > Restart server
+
+![image](/docs/img/DEV_ENV_SETUP/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 image. This is usually the last resort as sometimes the Docker engine becomes unresponsive and the whole engine needs to be restarted. 
 
 

docs/DOCKER_COMPOSE.md

@@ -0,0 +1,128 @@
+# `docker-compose.yaml` Examples
+
+### Example 1
+
+```yaml
+services:
+  netalertx:
+    container_name: netalertx
+    # use the below line if you want to test the latest dev image
+    # image: "jokobsk/netalertx-dev:latest" 
+    image: "jokobsk/netalertx:latest"      
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - local_path/config:/app/config
+      - local_path/db:/app/db      
+      # (optional) useful for debugging if you have issues setting up the container
+      - local_path/logs:/app/log
+      # (API: OPTION 1) use for performance
+      - type: tmpfs
+        target: /app/api
+      # (API: OPTION 2) use when debugging issues 
+      # -  local_path/api:/app/api
+    environment:
+      - TZ=Europe/Berlin      
+      - PORT=20211
+```
+
+To run the container execute: `sudo docker-compose up -d`
+
+### Example 2
+
+Example by [SeimuS](https://github.com/SeimusS).
+
+```yaml
+  netalertx:
+    container_name: NetAlertX
+    hostname: NetAlertX
+    privileged: true
+    # use the below line if you want to test the latest dev image
+    # image: "jokobsk/netalertx-dev:latest" 
+    image: jokobsk/netalertx:latest
+    environment:
+      - TZ=Europe/Bratislava
+    restart: always
+    volumes:
+      - ./netalertx/db:/app/db
+      - ./netalertx/config:/app/config
+    network_mode: host
+```
+
+To run the container execute: `sudo docker-compose up -d`
+
+### Example 3
+
+`docker-compose.yml` 
+
+```yaml
+services:
+  netalertx:
+    container_name: netalertx
+    # use the below line if you want to test the latest dev image
+    # image: "jokobsk/netalertx-dev:latest" 
+    image: "jokobsk/netalertx:latest"      
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - ${APP_DATA_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
+      # (API: OPTION 1) use for performance
+      - type: tmpfs
+        target: /app/api
+      # (API: OPTION 2) use when debugging issues 
+      # -  local/path/api:/app/api
+    environment:
+      - TZ=${TZ}      
+      - PORT=${PORT}
+```
+
+`.env` file
+
+```yaml
+#GLOBAL PATH VARIABLES
+
+APP_DATA_LOCATION=/path/to/docker_appdata
+APP_CONFIG_LOCATION=/path/to/docker_config
+LOGS_LOCATION=/path/to/docker_logs
+
+#ENVIRONMENT VARIABLES
+
+TZ=Europe/Paris
+PORT=20211
+
+#DEVELOPMENT VARIABLES
+
+DEV_LOCATION=/path/to/local/source/code
+```
+
+To run the container execute: `sudo docker-compose --env-file /path/to/.env up`
+
+### Example 4
+
+Courtesy of [pbek](https://github.com/pbek). The volume `netalertx_db` is used by the db directory. The two config files are mounted directly from a local folder to their places in the config folder. You can backup the `docker-compose.yaml` folder and the docker volumes folder.
+
+```yaml
+  netalertx:
+    # use the below line if you want to test the latest dev image
+    # image: "jokobsk/netalertx-dev:latest" 
+    image: jokobsk/netalertx
+    ports:
+      - "80:20211/tcp"
+    environment:
+      - TZ=Europe/Vienna
+    networks:
+      local:
+        ipv4_address: 192.168.1.2
+    restart: unless-stopped
+    volumes:
+      - netalertx_db:/app/db
+      - ./netalertx/:/app/config/      
+      # (API: OPTION 1) use for performance
+      - type: tmpfs
+        target: /app/api
+      # (API: OPTION 2) use when debugging issues 
+      # -  local/path/api:/app/api
+```

docs/FRONTEND_DEVELOPMENT.md

@@ -38,7 +38,7 @@ Some examples how to apply the above:
 
 Some useful frontend JavaScript functions:
 
-- `getDeviceDataByMac(macAddress, devicesColumn)` - method to retrieve any device data (database column) based on MAC address in the frontend 
+- `getDevDataByMac(macAddress, devicesColumn)` - method to retrieve any device data (database column) based on MAC address in the frontend 
 - `getString(string stringKey)` - method to retrieve translated strings in the frontend 
 - `getSetting(string stringKey)` - method to retrieve settings in the frontend 
 

docs/HOME_ASSISTANT.md

@@ -6,6 +6,7 @@ NetAlertX comes with MQTT support, allowing you to show all detected devices as
 
 - Please note that discovery takes about ~10s per device.
 - Deleting of devices is not handled automatically. Please use [MQTT Explorer](https://mqtt-explorer.com/) to delete devices in the broker (Home Assistant), if needed. 
+- For optimization reasons, the devices are not always fully synchronized. You can delete Plugin objects as described in the [MQTT plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/_publisher_mqtt#forcing-an-update) docs to force a full synchronization.
 
 
 ## 🧭 Guide

docs/HW_INSTALL.md

@@ -5,6 +5,8 @@ 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 🙂
+>
 > 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**.
 
@@ -34,6 +36,9 @@ Some facts about what and where something will be changed/installed by the HW in
 
 ## 📥 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
 ```

docs/ICONS.md

@@ -45,7 +45,7 @@ Copying the HTML code from [Font Awesome](https://fontawesome.com/search?o=r&m=f
 If you own the premium package of Font Awesome icons you can mount it in your Docker container the following way:
 
 ```yaml
-/font-awesome:/app/front/lib/AdminLTE/bower_components/font-awesome:ro
+/font-awesome:/app/front/lib/font-awesome:ro
 ```
 
 You can use the full range of Font Awesome icons afterwards. 

docs/MIGRATION.md

@@ -85,7 +85,7 @@ services:
       - local/path/config:/app/config         # ⚠  This has changed (🔺required) 
       - local/path/db:/app/db                 # ⚠  This has changed (🔺required) 
       # (optional) useful for debugging if you have issues setting up the container
-      - local/path/logs:/app/front/log        # ⚠  This has changed (🟡optional) 
+      - local/path/logs:/app/log        # ⚠  This has changed (🟡optional) 
     environment:
       - TZ=Europe/Berlin      
       - PORT=20211
@@ -135,7 +135,7 @@ services:
       - local/path/config/app.conf:/app/config/app.conf # ⚠  This has changed (🔺required) 
       - local/path/db/app.db:/app/db/app.db             # ⚠  This has changed (🔺required) 
       # (optional) useful for debugging if you have issues setting up the container
-      - local/path/logs:/app/front/log                  # ⚠  This has changed (🟡optional) 
+      - local/path/logs:/app/log                  # ⚠  This has changed (🟡optional) 
     environment:
       - TZ=Europe/Berlin      
       - PORT=20211

docs/NETWORK_TREE.md

@@ -2,7 +2,7 @@
 
 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`).
 
-> 💡 Tip: You can add dummy devices via the [Undiscoverables plugin](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/undiscoverables/README.md)
+> 💡 Tip: You can add dummy devices via the [Create dummy device](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICE_MANAGEMENT.md#dummy-devices) button in the Devices listing page.
 
 > 💡 Tip: Export your configuration of the Network and Devices once in a while via the Export CSV feature under **Maintenance** -> **Backup/Restore** -> **CSV Export**.   
 

docs/NOTIFICATIONS.md

@@ -11,17 +11,15 @@ There are 4 ways how to influence notifications:
 > It's recommended to use the same schedule interval for all plugins responsible for scanning devices, otherwise false positives might be reported if different devices are discovered by different plugins. Check the **Settings** > **Enabled settings** section for a warning:
 > ![Schedules out-of-sync](/docs/img/NOTIFICATIONS/Schedules_out-of-sync.png)
 
-
 ## Device settings 💻
 
 ![Device notification settings](/docs/img/NOTIFICATIONS/Device-notification-settings.png)
 
 There are 4 settings on the device for influencing notifications. You can:
 
-1. Completely disable the scanning of the device
-2. **Alert all events**, connections, disconnections, IP changes (noisy, usually not recommended)
-3. **Alert down** - alerts when a device goes down. This setting overrides disabled Alert All Events, so you will get a notification of a device going down even if you don't have Alert All Events ticked.
-4. **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.
+1. **Alert Events** - Enables alerts of connections, disconnections, IP changes.
+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.
+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.
 
 ## Plugin settings 🔌
 
@@ -40,7 +38,7 @@ Click the **Read more in the docs.** Link at the top of each plugin to get more
 
 In Notification Processing settings, you can specify blanket rules. These allow you to specify exceptions to the Plugin and Device settings and will override those.
 
-1. Notify on (`NTFPRCS_INCLUDED_SECTIONS`) allows you to specify which events trigger notifications. Usual setups will have `new_devices`, `down_devices`, and possibly `events` set. Setting `plugin` might be too noisy for most setups. More info in the [NTFPRCS plugin](/front/plugins/notification_processing/README.md)
+1. Notify on (`NTFPRCS_INCLUDED_SECTIONS`) allows you to specify which events trigger notifications. Usual setups will have `new_devices`, `down_devices`, and possibly `down_reconnected` set. Including `plugin` (dependenton the Plugin `<plugin>_WATCH` and `<plugin>_REPORT_ON` settings) and `events` (dependent on the on-device **Alert Events** setting) might be too noisy for most setups. More info in the [NTFPRCS plugin](/front/plugins/notification_processing/README.md)
 2. Alert down after (`NTFPRCS_alert_down_time`) is useful if you want to wait for some time before the system sends out a down notification for a device. This is related to the on-device **Alert down** setting and only devices with this checked will trigger a down notification.
 3. A filter to allow you to set device-specific exceptions to New devices being added to the app.
 4. A filter to allow you to set device-specific exceptions to generated Events.

docs/PERFORMANCE.md

@@ -0,0 +1,59 @@
+# Performance tips
+
+The application runs regular maintenance and DB cleanup tasks. If these tasks fail, you might encounter performance issues. 
+
+Most performance issues are caused by a big database or large log files. Enabling unnecessary plugins will also lead to performance degradation. 
+
+You can always check the size of your database and database tables under the Maintenance page. 
+
+![Db size check](/docs/img/PERFORMANCE/db_size_check.png)
+
+> [!NOTE]
+> For around 100 devices the database should be approximately `50MB` and none of the entries (rows) should exceed the value of `10 000` on a healthy system. These numbers will depend on your network activity and settings. 
+
+## Maintenance plugins
+
+There are 2 plugins responsible for maintaining the overal health of the application. One is responsible for the database cleanup and one for other tasks, such as log cleanup. 
+
+### DB Cleanup (DBCLNP)
+
+The database cleanup plugin. Check details and related setting in the [DB Cleanup plugin docs](/front/plugins/db_cleanup/README.md). Make sure the plugin is not failing by checking the logs. Try changing the schedule `DBCLNP_RUN_SCHD` and the timeout `DBCLNP_RUN_TIMEOUT` (increase) if the plugin is failing to execute.
+
+### Maintenance (MAINT)
+
+The maintenance plugin. Check details and related setting in the [Maintenance plugin docs](/front/plugins/maintenance/README.md). Make sure the plugin is not failing by checking the logs. Try changing the schedule `MAINT_RUN_SCHD` and the timeout `MAINT_RUN_TIMEOUT` (increase) if the plugin is failing to execute.
+
+## Scan frequency and coverage
+
+The more often you scan the networks the more resources, traffic and DB read/write cycles are executed. Especially on busy networks and lower end hardware, consider increasing scan intervals (`<PLUGIN>_RUN_SCHD`)  and timeouts (`<PLUGIN>_RUN_TIMEOUT`).
+
+Also consider decreasing the scanned subnet, e.g. from `/16` to `/24` if need be.   
+
+# Store temporary files in memory
+
+You can also store temporary files in application memory (`/app/api` and `/app/log` folders). See highlighted lines `◀` below.
+
+```yaml
+version: "3"
+services:
+  netalertx:
+    container_name: netalertx
+    # use the below line if you want to test the latest dev image
+    # image: "jokobsk/netalertx-dev:latest" 
+    image: "jokobsk/netalertx:latest"      
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - local/path/config:/app/config
+      - local/path/db:/app/db      
+      # (optional) useful for debugging if you have issues setting up the container
+      - local/path/logs:/app/log
+      # (API: OPTION 1) use for performance
+      - type: tmpfs              # ◀
+        target: /app/api         # ◀
+      # (API: OPTION 2) use when debugging issues 
+      # -  local/path/api:/app/api
+    environment:
+      - TZ=Europe/Berlin      
+      - PORT=20211
+```

docs/PIHOLE_GUIDE.md

@@ -0,0 +1,45 @@
+# Integration with PiHole
+
+NetAlertX comes with 2 plugins suitable for integarting with your existing PiHole instace. One plugin is using a direct SQLite DB connection, the other leverages the DHCP.leases file generated by PiHole. You can combine both approaches and also supplement it with other [plugins](/front/plugins/README.md). 
+
+## Approach 1: `DHCPLSS` Plugin - Import devices from the PiHole DHCP leases file
+
+![DHCPLSS sample settings](/docs/img/PIHOLE_GUIDE/DHCPLSS_pihole_settings.png)
+
+### Settings
+
+| Setting | Description | Recommended value |
+| :------------- | :------------- | :-------------|
+| `DHCPLSS_RUN` | When the plugin should run.  | `schedule` |
+| `DHCPLSS_RUN_SCHD` | If you run multiple device scanner plugins, align the schedules of all plugins to the same value.  | `*/5 * * * *` |
+| `DHCPLSS_paths_to_check` | You need to map the value in this setting in the `docker-compose.yml` file. The in-container path must contain `pihole` so it's parsed correctly. | `['/etc/pihole/dhcp.leases']` |
+
+Check the [DHCPLSS plugin readme](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/dhcp_leases#overview) for details
+
+### docker-compose changes
+
+| Path | Description |
+| :------------- | :------------- |
+| `:/etc/pihole/dhcp.leases` |  PiHole's `dhcp.leases` file. Required if you want to use PiHole `dhcp.leases` file. This has to be matched with a corresponding `DHCPLSS_paths_to_check` setting entry (the path in the container must contain `pihole`) |
+
+
+## Approach 2: `PIHOLE` Plugin - Import devices directly from the PiHole database
+
+![DHCPLSS sample settings](/docs/img/PIHOLE_GUIDE/PIHOLE_settings.png)
+
+| Setting | Description | Recommended value |
+| :------------- | :------------- | :-------------| 
+| `PIHOLE_RUN` | When the plugin should run.  | `schedule` |
+| `PIHOLE_RUN_SCHD` | If you run multiple device scanner plugins, align the schedules of all plugins to the same value.  | `*/5 * * * *` |
+| `PIHOLE_DB_PATH` | You need to map the value in this setting in the `docker-compose.yml` file. | `/etc/pihole/pihole-FTL.db` |
+
+Check the [PiHole plugin readme](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/pihole_scan) for details
+
+### docker-compose changes
+
+| Path | Description |
+| :------------- | :------------- |
+| `:/etc/pihole/pihole-FTL.db` |  PiHole's `pihole-FTL.db` database file.  |
+
+
+Check out other [plugins](/front/plugins/README.md) that can help you discover more about your network or check how to scan [Remote networks](/docs/REMOTE_NETWORKS.md).

docs/PLUGINS_DEV.md

@@ -12,6 +12,9 @@ NetAlertX comes with a plugin system to feed events from third-party scripts int
 
 ### 🎥 Watch the video:
 
+> [!TIP]
+> Read this guide [Development environment setup guide](/docs/DEV_ENV_SETUP.md) to set up your local environment for development. 👩‍💻
+
 [![Watch the video](/docs/img/YouTube_thumbnail.png)](https://youtu.be/cdbxlwiWhv8)
 
 ### 📸 Screenshots
@@ -33,24 +36,9 @@ Example use cases for plugins could be:
 
 If you wish to develop a plugin, please check the existing plugin structure. Once the settings are saved by the user they need to be removed from the `app.conf` file manually if you want to re-initialize them from the `config.json` of the plugin. 
 
-Again, please read the below carefully if you'd like to contribute with a plugin yourself. This documentation file might be outdated, so double-check the sample plugins as well. 
-
 ## ⚠ Disclaimer
 
-Follow the below very carefully and check example plugin(s) if you'd like to write one yourself. Plugin UI is not my priority right now, happy to approve PRs if you are interested in extending/improving the UI experience (See [Frontend guidelines](/docs/FRONTEND_DEVELOPMENT.md)). Example improvements for the taking:
-
-* Making the tables sortable/filterable
-* Using the same approach to display table data as in the Devices section (solves above)
-* Adding form controls supported to display the data (Currently supported ones are listed in the section "UI settings in database_column_definitions" below)
-* ...
-
-## ❗ Known limitations:
-
-These issues will be hopefully fixed with time, so please don't report them. Instead, if you know how, feel free to investigate and submit a PR to fix the below. Keep the PRs small as it's easier to approve them:
-
-* Existing plugin objects are sometimes not interpreted correctly and a new object is created instead, resulting in duplicate entries. (race condition?)
-* Occasional (experienced twice) hanging of processing plugin script file.
-* UI displays outdated values until the API endpoints get refreshed. 
+Please read the below carefully if you'd like to contribute with a plugin yourself. This documentation file might be outdated, so double-check the sample plugins as well. 
 
 ## Plugin file structure overview 
 
@@ -61,16 +49,16 @@ These issues will be hopefully fixed with time, so please don't report them. Ins
   |----------------------|----------------------|----------------------| 
   | `config.json` | yes | Contains the plugin configuration (manifest) including the settings available to the user. |
   | `script.py` |  no | The Python script itself. You may call any valid linux command.  |
-  | `last_result.log` | no | The file used to interface between NetAlertX and the plugin. Required for a script plugin if you want to feed data into the app. |
+  | `last_result.<prefix>.log` | no | The file used to interface between NetAlertX and the plugin. Required for a script plugin if you want to feed data into the app. Stored in the `/api/log/plugins/` |
   | `script.log` | no | Logging output (recommended) |
   | `README.md` | yes | Any setup considerations or overview  |
 
 More on specifics below.
 
-### Column order and values
+### Column order and values (plugins interface contract)
 
 > [!IMPORTANT] 
-> Spend some time reading and trying to understand the below table. This is the interface between the Plugins and the core application.  
+> Spend some time reading and trying to understand the below table. This is the interface between the Plugins and the core application. The application expets 9 or 13 values The first 9 values are mandatory. The next 4 values (`HelpVal1` to `HelpVal4`) are optional. However, if you use any of these optional values (e.g., `HelpVal1`), you need to supply all optional values (e.g., `HelpVal2`, `HelpVal3`, and `HelpVal4`). If a value is not used, it should be padded with `null`.
 
   | Order | Represented Column | Value Required | Description | 
   |----------------------|----------------------|----------------------|----------------------| 
@@ -83,6 +71,11 @@ More on specifics below.
   | 6 | `Watched_Value4` | no | As above  |
   | 7 | `Extra` | no | Any other data you want to pass and display in NetAlertX and the notifications |
   | 8 | `ForeignKey` | no | A foreign key that can be used to link to the parent object (usually a MAC address) |
+  | 9 | `HelpVal1` | no | (optional) A helper value |
+  | 10 | `HelpVal2` | no | (optional) A helper value |
+  | 11 | `HelpVal3` | no | (optional) A helper value |
+  | 12 | `HelpVal4` | no | (optional) A helper value |
+  
 
 > [!NOTE] 
 > De-duplication is run once an hour on the `Plugins_Objects` database table and duplicate entries with the same value in columns `Object_PrimaryID`, `Object_SecondaryID`, `Plugin` (auto-filled based on `unique_prefix` of the plugin), `UserData` (can be populated with the `"type": "textbox_save"` column type) are removed.
@@ -93,7 +86,7 @@ The `config.json` file is the manifest of the plugin. It contains mainly setting
 
 ## Execution order
 
-The execution order is used to specify wwhen a plugin is executed. This is useful if a plugin has access and surfaces more information than others. If a device is detected by 2 plugins and inserted into the `CurrentScan` table, the plugin with the higher priority (e.g.: `Level_0` is a higher priority than `Level_1`) will insert it's values first. These values (devices) will be then prioritized over any values inserted later.
+The execution order is used to specify when a plugin is executed. This is useful if a plugin has access and surfaces more information than others. If a device is detected by 2 plugins and inserted into the `CurrentScan` table, the plugin with the higher priority (e.g.: `Level_0` is a higher priority than `Level_1`) will insert it's values first. These values (devices) will be then prioritized over any values inserted later.
 
 ```json
 {
@@ -113,7 +106,7 @@ Currently, these data sources are supported (valid `data_source` value).
 | External SQLite DB query | `sqlite-db-query` | yes | Executes a SQL query from the `CMD` setting on an external SQLite database mapped in the `DB_PATH` setting.  |
 | Plugin type | `plugin_type` | no | Specifies the type of the plugin and in which section the Plugin settings are displayed ( one of `general/system/scanner/other/publisher` ). | 
 
-> * "Needs to return a "table" means that the application expects a `last_result.log` file with some results. It's not a blocker, however warnings in the `app.log` might be logged.
+> * "Needs to return a "table" means that the application expects a `last_result.<prefix>.log` file with some results. It's not a blocker, however warnings in the `app.log` might be logged.
 
 > 🔎Example
 >```json
@@ -130,21 +123,21 @@ You can show or hide the UI on the "Plugins" page and "Plugins" tab for a plugin
 
 ### "data_source":  "script"
 
- If the `data_source` is set to `script` the `CMD` setting (that you specify in the `settings` array section in the `config.json`) contains an executable Linux command, that usually generates a `last_result.log` file (not required if you don't import any data into the app). The `last_result.log` file needs to be saved in the same folder as the plugin. 
+ If the `data_source` is set to `script` the `CMD` setting (that you specify in the `settings` array section in the `config.json`) contains an executable Linux command, that usually generates a `last_result.<prefix>.log` file (not required if you don't import any data into the app). The `last_result.<prefix>.log` file needs to be saved in `/api/log/plugins`. 
 
 > [!IMPORTANT]
-> A lot of the work is taken care of by the [`plugin_helper.py` library](/front/plugins/plugin_helper.py). You don't need to manage the `last_result.log` file if using the helper objects. Check other `script.py` of other plugins for details (The [Undicoverables plugins `script.py` file](/front/plugins/undiscoverables/script.py) is a good example).
+> A lot of the work is taken care of by the [`plugin_helper.py` library](/front/plugins/plugin_helper.py). You don't need to manage the `last_result.<prefix>.log` file if using the helper objects. Check other `script.py` of other plugins for details (The [Undicoverables plugins `script.py` file](/front/plugins/undiscoverables/script.py) is a good example).
  
- The content of the `last_result.log` file needs to contain the columns as defined in the "Column order and values" section above. The order of columns can't be changed. After every scan it should contain only the results from the latest scan/execution. 
+ The content of the `last_result.<prefix>.log` file needs to contain the columns as defined in the "Column order and values" section above. The order of columns can't be changed. After every scan it should contain only the results from the latest scan/execution. 
 
-- The format of the `last_result.log` is a `csv`-like file with the pipe `|` as a separator. 
+- The format of the `last_result.<prefix>.log` is a `csv`-like file with the pipe `|` as a separator. 
 - 9 (nine) values need to be supplied, so every line needs to contain 8 pipe separators. Empty values are represented by `null`.  
 - Don't render "headers" for these "columns".
 Every scan result/event entry needs to be on a new line.
 - You can find which "columns" need to be present, and if the value is required or optional, in the "Column order and values" section. 
 - The order of these "columns" can't be changed.
 
-#### 🔎 last_result.log examples
+#### 🔎 last_result.prefix.log examples
 
 Valid CSV:
 
@@ -180,20 +173,20 @@ This SQL query is executed on the `app.db` SQLite database file.
 > SQL query example:
 > 
 > ```SQL
-> SELECT  dv.dev_Name as Object_PrimaryID, 
->     cast(dv.dev_LastIP as VARCHAR(100)) || ':' || cast( SUBSTR(ns.Port ,0, INSTR(ns.Port , '/')) as VARCHAR(100)) as Object_SecondaryID,  
+> SELECT  dv.devName as Object_PrimaryID, 
+>     cast(dv.devLastIP as VARCHAR(100)) || ':' || cast( SUBSTR(ns.Port ,0, INSTR(ns.Port , '/')) as VARCHAR(100)) as Object_SecondaryID,  
 >     datetime() as DateTime,  
 >     ns.Service as Watched_Value1,        
 >     ns.State as Watched_Value2,
 >     'null' as Watched_Value3,
 >     'null' as Watched_Value4,
 >     ns.Extra as Extra,
->     dv.dev_MAC as ForeignKey 
+>     dv.devMac as ForeignKey 
 > FROM 
 >     (SELECT * FROM Nmap_Scan) ns 
 > LEFT JOIN 
->     (SELECT dev_Name, dev_MAC, dev_LastIP FROM Devices) dv 
-> ON ns.MAC = dv.dev_MAC
+>     (SELECT devName, devMac, devLastIP FROM Devices) dv 
+> ON ns.MAC = dv.devMac
 > ```
 > 
 > Required `CMD` setting example with above query (you can set `"type": "label"` if you want it to make uneditable in the UI):
@@ -202,7 +195,7 @@ This SQL query is executed on the `app.db` SQLite database file.
 > {
 >             "function": "CMD",
 >            "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]},
->            "default_value":"SELECT  dv.dev_Name as Object_PrimaryID, cast(dv.dev_LastIP as VARCHAR(100)) || ':' || cast( SUBSTR(ns.Port ,0, INSTR(ns.Port , '/')) as VARCHAR(100)) as Object_SecondaryID,  datetime() as DateTime,  ns.Service as Watched_Value1,        ns.State as Watched_Value2,        'null' as Watched_Value3,        'null' as Watched_Value4,        ns.Extra as Extra        FROM (SELECT * FROM Nmap_Scan) ns LEFT JOIN (SELECT dev_Name, dev_MAC, dev_LastIP FROM Devices) dv   ON ns.MAC = dv.dev_MAC",
+>            "default_value":"SELECT  dv.devName as Object_PrimaryID, cast(dv.devLastIP as VARCHAR(100)) || ':' || cast( SUBSTR(ns.Port ,0, INSTR(ns.Port , '/')) as VARCHAR(100)) as Object_SecondaryID,  datetime() as DateTime,  ns.Service as Watched_Value1,        ns.State as Watched_Value2,        'null' as Watched_Value3,        'null' as Watched_Value4,        ns.Extra as Extra        FROM (SELECT * FROM Nmap_Scan) ns LEFT JOIN (SELECT devName, devMac, devLastIP FROM Devices) dv   ON ns.MAC = dv.devMac",
 >            "options": [],
 >            "localized": ["name", "description"],
 >            "name" : [{
@@ -371,7 +364,7 @@ Plugin results are always inserted into the standard `Plugin_Objects` database t
 >3.  That's it. The app takes care of the rest. It loops thru the objects discovered by the plugin, takes the results line-by-line, and inserts them into the database table specified in `"mapped_to_table"`. The columns are translated from the generic plugin columns to the target table columns via the `"mapped_to_column"` property in the column definitions.
 
 > [!NOTE] 
-> You can create a column mapping with a default value via the `mapped_to_column_data` property. This means that the value of the given column will always be this value. That also menas that the `"column": "NameDoesntMatter"` is not important as there is no database source column. 
+> You can create a column mapping with a default value via the `mapped_to_column_data` property. This means that the value of the given column will always be this value. That also means that the `"column": "NameDoesntMatter"` is not important as there is no database source column. 
 
 
 >🔍 Example:
@@ -470,7 +463,7 @@ Below are some general additional notes, when defining `params`:
 
 - `"name":"name_value"` - is used as a wildcard replacement in the `CMD` setting value by using curly brackets `{name_value}`. The wildcard is replaced by the result of the `"value" : "param_value"` and `"type":"type_value"` combo configuration below.
 - `"type":"<sql|setting>"` - is used to specify the type of the params, currently only 2 supported (`sql`,`setting`).
-  - `"type":"sql"` - will execute the SQL query specified in the `value` property. The sql query needs to return only one column. The column is flattened and separated by commas (`,`), e.g: `SELECT dev_MAC from DEVICES` -> `Internet,74:ac:74:ac:74:ac,44:44:74:ac:74:ac`. This is then used to replace the wildcards in the `CMD` setting.  
+  - `"type":"sql"` - will execute the SQL query specified in the `value` property. The sql query needs to return only one column. The column is flattened and separated by commas (`,`), e.g: `SELECT devMac from DEVICES` -> `Internet,74:ac:74:ac:74:ac,44:44:74:ac:74:ac`. This is then used to replace the wildcards in the `CMD` setting.  
   - `"type":"setting"` - The setting code name. A combination of the value from `unique_prefix` + `_` + `function` value, or otherwise the code name you can find in the Settings page under the Setting display name, e.g. `PIHOLE_RUN`. 
 - `"value": "param_value"` - Needs to contain a setting code name or SQL query without wildcards.
 - `"timeoutMultiplier" : true` - used to indicate if the value should multiply the max timeout for the whole script run by the number of values in the given parameter.
@@ -484,13 +477,13 @@ Below are some general additional notes, when defining `params`:
 >     "params" : [{
 >            "name"              : "ips",
 >            "type"              : "sql",
->            "value"             : "SELECT dev_LastIP from DEVICES",
+>            "value"             : "SELECT devLastIP from DEVICES",
 >            "timeoutMultiplier" : true
 >        },
 >        {
 >            "name"              : "macs",
 >            "type"              : "sql",
->            "value"             : "SELECT dev_MAC from DEVICES"            
+>            "value"             : "SELECT devMac from DEVICES"            
 >        },
 >        {
 >            "name"              : "timeout",
@@ -528,6 +521,60 @@ Required attributes are:
 | (optional) `"override_value"` | Used to determine a user-defined override for the setting. Useful for template-based plugins, where you can choose to leave the current value or override it with the value defined in the setting. (Work in progress) |
 | (optional) `"events"` | Used to trigger the plugin. Usually used on the `RUN` setting. Not fully tested in all scenarios. Will show a play button next to the setting. After clicking, an event is generated for the backend in the `Parameters` database table to process the front-end event on the next run. |
 
+### UI Component Types Documentation
+
+This section outlines the structure and types of UI components, primarily used to build HTML forms or interactive elements dynamically. Each UI component has a `"type"` which defines its structure, behavior, and rendering options.
+
+#### UI Component JSON Structure
+The UI component is defined as a JSON object containing a list of `elements`. Each element specifies how it should behave, with properties like `elementType`, `elementOptions`, and any associated `transformers` to modify the data. The example below demonstrates how a component with two elements (`span` and `select`) is structured:
+
+```json
+{
+      "function": "devIcon",
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "span",
+            "elementOptions": [
+              { "cssClasses": "input-group-addon iconPreview" },
+              { "getStringKey": "Gen_SelectToPreview" },
+              { "customId": "NEWDEV_devIcon_preview" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "select",
+            "elementHasInputValue": 1,
+            "elementOptions": [
+              { "cssClasses": "col-xs-12" },
+              {
+                "onChange": "updateIconPreview(this)"
+              },
+              { "customParams": "NEWDEV_devIcon,NEWDEV_devIcon_preview" }
+            ],
+            "transformers": []
+          }          
+        ]
+      }
+}
+
+```
+
+### Rendering Logic
+
+The code snippet provided demonstrates how the elements are iterated over to generate their corresponding HTML. Depending on the `elementType`, different HTML tags (like `<select>`, `<input>`, `<textarea>`, `<button>`, etc.) are created with the respective attributes such as `onChange`, `my-data-type`, and `class` based on the provided `elementOptions`. Events can also be attached to elements like buttons or select inputs.
+
+### Key Element Types
+
+- **`select`**: Renders a dropdown list. Additional options like `isMultiSelect` and event handlers (e.g., `onChange`) can be attached.
+- **`input`**: Handles various types of input fields, including checkboxes, text, and others, with customizable attributes like `readOnly`, `placeholder`, etc.
+- **`button`**: Generates clickable buttons with custom event handlers (`onClick`), icons, or labels.
+- **`textarea`**: Creates a multi-line input box for text input.
+- **`span`**: Used for inline text or content with customizable classes and data attributes.
+
+Each element may also have associated events (e.g., running a scan or triggering a notification) defined under `Events`.
+
     
 ##### Supported settings `function` values
 
@@ -605,7 +652,7 @@ The UI will adjust how columns are displayed in the UI based on the resolvers de
 | See below for information on `threshold`, `replace`. | |
 |  |  |
 | `options` Property | Used in conjunction with types like `threshold`, `replace`, `regex`. |
-| `options_params` Property | Used in conjunction with a `"options": "[{value}]"` template and `text.select`/`list.select`. Can specify SQL query (needs to return 2 columns `SELECT dev_Name as name, dev_Mac as id`) or Setting (not tested) to populate the dropdown. Check example below or have a look at the `NEWDEV` plugin `config.json` file. |
+| `options_params` Property | Used in conjunction with a `"options": "[{value}]"` template and `text.select`/`list.select`. Can specify SQL query (needs to return 2 columns `SELECT devName as name, devMac as id`) or Setting (not tested) to populate the dropdown. Check example below or have a look at the `NEWDEV` plugin `config.json` file. |
 | `threshold` | The `options` array contains objects ordered from the lowest `maximum` to the highest. The corresponding `hexColor` is used for the value background color if it's less than the specified `maximum` but more than the previous one in the `options` array. |
 | `replace` | The `options` array contains objects with an `equals` property, which is compared to the "value." If the values are the same, the string in `replacement` is displayed in the UI instead of the actual "value". |
 | `regex` | Applies a regex to the value.  The `options` array contains objects with an `type` (must be set to `regex`) and `param` (must contain the regex itself) property. |
@@ -625,7 +672,7 @@ The UI will adjust how columns are displayed in the UI based on the resolvers de
 
 
 ```json
-        "function": "dev_DeviceType",
+        "function": "devType",
         "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
         "maxLength": 30,
         "default_value": "",
@@ -634,7 +681,7 @@ The UI will adjust how columns are displayed in the UI based on the resolvers de
             {
                 "name"  : "value",
                 "type"  : "sql",
-                "value" : "SELECT '' as id, '' as name UNION SELECT dev_DeviceType as id, dev_DeviceType as name FROM (SELECT dev_DeviceType FROM Devices UNION SELECT 'Smartphone' UNION SELECT 'Tablet' UNION SELECT 'Laptop' UNION SELECT 'PC' UNION SELECT 'Printer' UNION SELECT 'Server' UNION SELECT 'NAS' UNION SELECT 'Domotic' UNION SELECT 'Game Console' UNION SELECT 'SmartTV' UNION SELECT 'Clock' UNION SELECT 'House Appliance' UNION SELECT 'Phone' UNION SELECT 'AP' UNION SELECT 'Gateway' UNION SELECT 'Firewall' UNION SELECT 'Switch' UNION SELECT 'WLAN' UNION SELECT 'Router' UNION SELECT 'Other') AS all_devices ORDER BY id;"
+                "value" : "SELECT '' as id, '' as name UNION SELECT devType as id, devType as name FROM (SELECT devType FROM Devices UNION SELECT 'Smartphone' UNION SELECT 'Tablet' UNION SELECT 'Laptop' UNION SELECT 'PC' UNION SELECT 'Printer' UNION SELECT 'Server' UNION SELECT 'NAS' UNION SELECT 'Domotic' UNION SELECT 'Game Console' UNION SELECT 'SmartTV' UNION SELECT 'Clock' UNION SELECT 'House Appliance' UNION SELECT 'Phone' UNION SELECT 'AP' UNION SELECT 'Gateway' UNION SELECT 'Firewall' UNION SELECT 'Switch' UNION SELECT 'WLAN' UNION SELECT 'Router' UNION SELECT 'Other') AS all_devices ORDER BY id;"
             },
             {
                 "name"  : "uilang",

docs/README.md

@@ -27,7 +27,9 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 
 #### 📥 Initial Setup
 
+- [Synology Guide](/docs/SYNOLOGY_GUIDE.md)
 - [Subnets and VLANs configuration for arp-scan](/docs/SUBNETS.md)
+- [Scanning Remote Networks](/docs/REMOTE_NETWORKS.md)
 - [SMTP server config](/docs/SMTP.md)
 - [Custom Icon configuration and support](/docs/ICONS.md)
 - [Notifications](/docs/NOTIFICATIONS.md)
@@ -43,6 +45,7 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 - [Invalid JSON errors debug help](/docs/DEBUG_INVALID_JSON.md)
 - [Troubleshooting Plugins](/docs/DEBUG_PLUGINS.md)
 - [File Permissions](/docs/FILE_PERMISSIONS.md)
+- [Performance tips](/docs/PERFORMANCE.md)
 
 #### 🔝 Popular/Suggested
 
@@ -54,7 +57,6 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 - [Manage devices (legacy docs)](/docs/DEVICE_MANAGEMENT.md)
 - [Random MAC/MAC icon meaning (legacy docs)](/docs/RANDOM_MAC.md)
 
-
 #### 🔎 Examples
 
 - [N8N webhook example](/docs/WEBHOOK_N8N.md)
@@ -63,6 +65,8 @@ There is also an in-app Help / FAQ section that should be answering frequently a
 
 - [Version history (legacy)](/docs/VERSIONS_HISTORY.md)
 - [Reverse proxy (Nginx, Apache, SWAG)](/docs/REVERSE_PROXY.md)
+- [Installing Updates](/docs/UPDATES.md)
+- [Setting up Authelia](/docs/AUTHELIA.md) (DRAFT)
 
 #### 👩‍💻For Developers👨‍💻
 

docs/REMOTE_NETWORKS.md

@@ -0,0 +1,49 @@
+# Scanning Remote or Inaccessible Networks
+
+By design, local network scanners such as `arp-scan` use ARP (Address Resolution Protocol) to map IP addresses to MAC addresses on the local network. Since ARP operates at Layer 2 (Data Link Layer), it typically works only within a single broadcast domain, usually limited to a single router or network segment.
+
+To scan multiple locally accessible network segments, add them as subnets according to the [subnets](https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md) documentation.
+
+## Complex Use Cases
+
+The following network setups might make some devices undetectable. Check the specific setup to understand the cause and find potential workarounds to still report on these devices.
+
+### Wi-Fi Extenders
+
+Wi-Fi extenders typically create a separate network or subnet, which can prevent network scanning tools like `arp-scan` from detecting devices behind the extender.
+
+> **Possible workaround**: Scan the specific subnet that the extender uses, if it is separate from the main network.
+
+### VPNs
+
+ARP operates at Layer 2 (Data Link Layer) and works only within a local area network (LAN). VPNs, which operate at Layer 3 (Network Layer), route traffic between networks, preventing ARP requests from discovering devices outside the local network.
+
+VPNs use virtual interfaces (e.g., `tun0`, `tap0`) to encapsulate traffic, bypassing ARP-based discovery. Additionally, many VPNs use NAT, which masks individual devices behind a shared IP address.
+
+> **Possible workaround**: Configure the VPN to bridge networks instead of routing to enable ARP, though this depends on the VPN setup and security requirements.
+
+# Other Workarounds
+
+The following workarounds should work for most complex network setups.
+
+## Supplementing Plugins
+
+You can use supplementary plugins that employ alternate methods. Protocols used by the `SNMPDSC` or `DHCPLSS` plugins are widely supported on different routers and can be effective as workarounds. Check the [plugins list](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/README.md) to find a plugin that works with your router and network setup.
+
+## Multiple NetAlertX Instances
+
+If you have servers in different networks, you can set up separate NetAlertX instances on those subnets and synchronize the results into one instance using the [`SYNC` plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/sync).
+
+## Manual Entry
+
+If you don't need to discover new devices and only need to report on their status (`online`, `offline`, `down`), you can manually enter devices and check their status using the [`ICMP` plugin](https://github.com/jokob-sk/NetAlertX/blob/main/front/plugins/icmp_scan/), which uses the `ping` command internally.
+
+For more information on how to add devices manually (or dummy devices), refer to the [Device Management](https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICE_MANAGEMENT.md) documentation.
+
+To create truly dummy devices, you can use a loopback IP address (e.g., `0.0.0.0` or `127.0.0.1`) so they appear online.
+
+## NMAP and Fake MAC Addresses
+
+Scanning remote networks with NMAP is possible (via the `NMAPDEV` plugin), but since it cannot retrieve the MAC address, you need to enable the `NMAPDEV_FAKE_MAC` setting. This will generate a fake MAC address based on the IP address, allowing you to track devices. However, this can lead to inconsistencies, especially if the IP address changes or a previously logged device is rediscovered. If this setting is disabled, only the IP address will be discovered, and devices with missing MAC addresses will be skipped.
+
+Check the [NMAPDEV plugin](https://github.com/jokob-sk/NetAlertX/tree/main/front/plugins/nmap_dev_scan) for details

docs/REVERSE_DNS.md

@@ -27,6 +27,29 @@ If you are running a DNS server, such as **AdGuard**, set up **Private reverse D
 5. Click **Apply** to save your settings.
 
 
+### Specifying the DNS in the container
+
+You can specify the DNS server in the docker-compose to improve name resolution on your network. 
+
+```yaml
+services:
+  netalertx:
+    container_name: netalertx
+    image: "jokobsk/netalertx:latest"
+    restart: unless-stopped
+    volumes:
+      -  /home/netalertx/config:/app/config
+      -  /home/netalertx/db:/app/db
+      -  /home/netalertx/log:/app/log
+    environment:
+      - TZ=Europe/Berlin
+      - PORT=20211
+    network_mode: host
+    dns:           # specifying the DNS servers used for the container
+      - 10.8.0.1
+      - 10.8.0.17
+```
+
 ### Using a custom resolv.conf file
 
 You can configure a custom **/etc/resolv.conf** file in **docker-compose.yml** and set the nameserver to your LAN DNS server (e.g.: Pi-Hole). See the relevant [resolv.conf man](https://www.man7.org/linux/man-pages/man5/resolv.conf.5.html) entry for details. 
@@ -43,7 +66,7 @@ services:
     volumes:
       - ./config/app.conf:/app/config/app.conf
       - ./db:/app/db
-      - ./log:/app/front/log
+      - ./log:/app/log
       - ./config/resolv.conf:/etc/resolv.conf                          # Mapping the /resolv.conf file for better name resolution
     environment:
       - TZ=Europe/Berlin

docs/SESSION_INFO.md

@@ -0,0 +1,62 @@
+# Sessions Section in Device View
+
+The **Sessions Section** provides details about a device's connection history. This data is automatically detected and cannot be edited by the user.
+
+ ![Session info](/docs/img/SESSION_INFO/DeviceDetails_SessionInfo.png)
+
+---
+
+## Key Fields
+
+1. **Date and Time of First Connection**
+   - **Description:** Displays the first detected connection time for the device.
+   - **Editability:** Uneditable (auto-detected).
+   - **Source:** Automatically captured when the device is first added to the system.
+
+2. **Date and Time of Last Connection**
+   - **Description:** Shows the most recent time the device was online.
+   - **Editability:** Uneditable (auto-detected).
+   - **Source:** Updated with every new connection event.
+
+3. **Offline Devices with Missing or Conflicting Data**
+   - **Description:** Handles cases where a device is offline but has incomplete or conflicting session data (e.g., missing start times).
+   - **Handling:** The system flags these cases for review and attempts to infer missing details.
+
+---
+
+## How Sessions are Discovered and Calculated
+
+### 1. Detecting New Devices
+When a device is first detected in the network, the system logs it in the events table:
+
+`INSERT INTO Events (eve_MAC, eve_IP, eve_DateTime, eve_EventType, eve_AdditionalInfo, eve_PendingAlertEmail) SELECT cur_MAC, cur_IP, '{startTime}', 'New Device', cur_Vendor, 1 FROM CurrentScan WHERE NOT EXISTS (SELECT 1 FROM Devices WHERE devMac = cur_MAC)`
+
+- Devices scanned in the current cycle (**CurrentScan**) are checked against the **Devices** table.
+- If a device is new:
+  - A **New Device** event is logged.
+  - The device’s MAC, IP, vendor, and detection time are recorded.
+
+### 2. Logging Connection Sessions
+When a new connection is detected, the system creates a session record:
+
+`INSERT INTO Sessions (ses_MAC, ses_IP, ses_EventTypeConnection, ses_DateTimeConnection, ses_EventTypeDisconnection, ses_DateTimeDisconnection, ses_StillConnected, ses_AdditionalInfo) SELECT cur_MAC, cur_IP, 'Connected', '{startTime}', NULL, NULL, 1, cur_Vendor FROM CurrentScan WHERE NOT EXISTS (SELECT 1 FROM Sessions WHERE ses_MAC = cur_MAC)`
+
+- A new session is logged in the **Sessions** table if no prior session exists.
+- Fields like `MAC`, `IP`, `Connection Type`, and `Connection Time` are populated.
+- The `Still Connected` flag is set to `1` (active connection).
+
+### 3. Handling Missing or Conflicting Data
+- Devices with incomplete or conflicting session data (e.g., missing start times) are detected.
+- The system flags these records and attempts corrections by inferring details from available data.
+
+### 4. Updating Sessions
+- When a device reconnects, its session is updated with a new connection timestamp.
+- When a device disconnects:
+  - The **Disconnection Time** is recorded.
+  - The `Still Connected` flag is set to `0`.
+
+The session information is then used to display the device presence under **Monitoring** -> **Presence**.
+
+![Monitoring Device Presence](/docs/img/SESSION_INFO/Monitoring_Presence.png)
+
+

docs/SUBNETS.md

@@ -1,106 +1,116 @@
-# Subnets configuration
+# Subnets Configuration
 
-You need to specify the network interface and the network mask. You can also configure multiple subnets and specify VLANS (see exceptions below).
+You need to specify the network interface and the network mask. You can also configure multiple subnets and specify VLANs (see VLAN exceptions below).
 
-> [!TIP]
-> You may need to increase the time between scans `ARPSCAN_RUN_SCHD` and the timeout `ARPSCAN_RUN_TIMEOUT` (and similar setting on related plugins) when adding more subnets. If the timeout setting is exceeded, the scan is cancelled to prevent application hanging from rogue plugins. Check [debugging plugins](/docs/DEBUG_PLUGINS.md) for more tips.
+`ARPSCAN` can scan multiple networks if the network allows it. To scan networks directly, the subnets must be accessible from the network where NetAlertX is running. This means NetAlertX needs to have access to the interface attached to that subnet. You can verify this by running the following command in the container (replace the interface and ip mask):
 
-## Examples
+`sudo arp-scan --interface=eth0 192.168.1.0/24`
+
+In this example, `--interface=eth0 192.168.1.0/24` represents a neighboring subnet. If this command returns no results, the network is not accessible due to your network or firewall restrictions.
+
+If direct scans are not possible (Wi-Fi Extenders, VPNs and inaccessible networks), check the [remote networks documentation](https://github.com/jokob-sk/NetAlertX/blob/main/docs/REMOTE_NETWORKS.md). 
+
+> [!TIP] 
+> You may need to increase the time between scans `ARPSCAN_RUN_SCHD` and the timeout `ARPSCAN_RUN_TIMEOUT` (and similar settings for related plugins) when adding more subnets. If the timeout setting is exceeded, the scan is canceled to prevent the application from hanging due to rogue plugins.  
+> Check [debugging plugins](/docs/DEBUG_PLUGINS.md) for more tips.
+
+## Example Values
 
 > [!NOTE] 
-> Please use the UI to configure settings as that ensures that the config file is in the correct format. Edit `app.conf` directly only when really necessary.
-> ![settings](/docs/img/SUBNETS/subnets-setting-location.png)
+> Please use the UI to configure settings as it ensures the config file is in the correct format. Edit `app.conf` directly only when really necessary.  
+> ![Settings location](/docs/img/SUBNETS/subnets-setting-location.png)
 
-* Examples for one and two subnets  (❗ Note the `['...','...']` format):
-   * One subnet:   `SCAN_SUBNETS = ['192.168.1.0/24 --interface=eth0']`
-   * Two subnets:  `SCAN_SUBNETS = ['192.168.1.0/24 --interface=eth0','192.168.1.0/24 --interface=eth1 -vlan=107']` 
+* **Examples for one and two subnets:**
+  * One subnet: `SCAN_SUBNETS = ['192.168.1.0/24 --interface=eth0']`
+  * Two subnets: `SCAN_SUBNETS = ['192.168.1.0/24 --interface=eth0','192.168.1.0/24 --interface=eth1 -vlan=107']`
 
+If you get timeout messages, decrease the network mask (e.g.: from `/16` to `/24`) or increase the `TIMEOUT` setting (e.g.: `ARPSCAN_RUN_TIMEOUT` to `300` (5-minute timeout)) for the plugin and the interval between scans (e.g.: `ARPSCAN_RUN_SCHD` to `*/10 * * * *` (scans every 10 minutes)).
+
+---
 
 ## Explanation
 
-### Network mask
+### Network Mask
 
-**Example value: `192.168.1.0/24`**
+**Example value:** `192.168.1.0/24`
 
-The arp-scan time itself depends on the number of IP addresses to check. 
+The `arp-scan` time itself depends on the number of IP addresses to check.
 
-> The number of IPs to check depends on the [network mask](https://www.calculator.net/ip-subnet-calculator.html) you set on the `SCAN_SUBNETS` setting. 
-> For example, a `/24` mask results in 256 IPs to check, whereas a `/16` mask checks around 65,536. Every IP takes a couple of seconds. This means that with an incorrect configuration, the arp-scan will take hours to complete instead of seconds.
+> The number of IPs to check depends on the [network mask](https://www.calculator.net/ip-subnet-calculator.html) you set in the `SCAN_SUBNETS` setting.  
+> For example, a `/24` mask results in 256 IPs to check, whereas a `/16` mask checks around 65,536 IPs. Each IP takes a couple of seconds, so an incorrect configuration could make `arp-scan` take hours instead of seconds.
 
-Specify the network filter (which **significantly** speeds up the scan process). For example, the filter `192.168.1.0/24` covers IP ranges `192.168.1.0` to `192.168.1.255`.
+Specify the network filter, which **significantly** speeds up the scan process. For example, the filter `192.168.1.0/24` covers IP ranges from `192.168.1.0` to `192.168.1.255`.
 
-### Network interface (adapter)
+### Network Interface (Adapter)
 
-**Example value: `--interface=eth0`**
+**Example value:** `--interface=eth0`
 
-The adapter will probably be `eth0` or `eth1`. (Check `System info` > `Network Hardware` or run `iwconfig` in the container to find your interface name(s)) 
+The adapter will probably be `eth0` or `eth1`. (Check `System Info` > `Network Hardware`, or run `iwconfig` in the container to find your interface name(s)).
 
 ![Network hardware](/docs/img/SUBNETS/system_info-network_hardware.png)
 
-> [!TIP]
-> Alterantive to `iwconfig` run `ip -o link show | awk -F': ' '!/lo|vir|docker/ {print $2}'` in your container to find your interface name(s) (e.g.: `eth0`, `eth1`).
+> [!TIP]  
+> As an alternative to `iwconfig`, run `ip -o link show | awk -F': ' '!/lo|vir|docker/ {print $2}'` in your container to find your interface name(s) (e.g.: `eth0`, `eth1`):
+> ```bash
+> Synology-NAS:/# ip -o link show | awk -F': ' '!/lo|vir|docker/ {print $2}'
+> sit0@NONE
+> eth1
+> eth0
+> ```
 
 ### VLANs
 
-**Example value: `-vlan=107`**
+**Example value:** `--vlan=107`
 
-- Append e.g.: ` -vlan=107` to the interface field (e.g.: `eth0 -vlan=107`) for multiple vlans. More details in this [comment in this issue](https://github.com/jokob-sk/NetAlertX/issues/170#issuecomment-1419902988)
+- Append `--vlan=107` to the `SCAN_SUBNETS` field (e.g.: `192.168.1.0/24 --interface=vmbr0 --vlan=107`) for multiple VLANs.
+
+#### VLANs on a Hyper-V Setup
+
+> Community-sourced content by [mscreations](https://github.com/mscreations) from this [discussion](https://github.com/jokob-sk/NetAlertX/discussions/404).
+
+**Tested Setup:** Bare Metal → Hyper-V on Win Server 2019 → Ubuntu 22.04 VM → Docker → NetAlertX.
+
+**Approach 1 (may cause issues):**  
+Configure multiple network adapters in Hyper-V with distinct VLANs connected to each one using Hyper-V's network setup. However, this action can potentially lead to the Docker host's inability to handle network traffic correctly. This might interfere with other applications such as Authentik.
+
+**Approach 2 (working example):**
+
+Network connections to switches are configured as trunk and allow all VLANs access to the server.
+
+By default, Hyper-V only allows untagged packets through to the VM interface, blocking VLAN-tagged packets. To fix this, follow these steps:
+
+1. Run the following command in PowerShell on the Hyper-V machine:
+
+   ```powershell
+   Set-VMNetworkAdapterVlan -VMName <Docker VM Name> -Trunk -NativeVlanId 0 -AllowedVlanIdList "<comma separated list of vlans>"
+   ```
 
 
-#### VLANs on a Hyper-V setup
+2. Within the VM, set up sub-interfaces for each VLAN to enable scanning. On Ubuntu 22.04, Netplan can be used. In /etc/netplan/00-installer-config.yaml, add VLAN definitions:
 
-> Community sourced content by [mscreations](https://github.com/mscreations) from this [discussion](https://github.com/jokob-sk/NetAlertX/discussions/404).
+  ```yaml
 
-> [!NOTE] 
-> The setup this was tested on: Bare Metal -> Hyper-V on Win Server 2019 -> Ubuntu 22.04 VM -> Docker -> NetAlertX. 
+      network:
+        ethernets:
+          eth0:
+            dhcp4: yes
+        vlans:
+          eth0.2:
+            id: 2
+            link: eth0
+            addresses: [ "192.168.2.2/24" ]
+            routes:
+              - to: 192.168.2.0/24
+                via: 192.168.1.1
+  ```
 
-**Approach 1 (may cause issues):**
+3. Run `sudo netplan apply` to activate the interfaces for scanning in NetAlertX.
 
-Configure multiple network adapters in Hyper-V with distinct VLANs connected to each one using Hyper-V's network setup. However, this action can potentially lead to the Docker host's inability to handle network traffic correctly. The issue may stem from the creation of routes for network time servers or domain controllers on every interface, thereby preventing proper synchronization of the underlying Ubuntu VM. This interference can affect the performance of other applications such as Authentik.
+In this case, use `192.168.2.0/24 --interface=eth0.2` in NetAlertX.
 
-**Approach 2 (working example)**
+#### VLAN Support & Exceptions
 
-Network connections to switches are configured as trunk and allow all VLANs access to the server. 
-
-By default Hyper-V only allows untagged packets through to the VM interface and no VLAN tagged packets get through. In order to fix this follow these steps:
-
-1) Run the following command in Powershell on the Hyper-V machine: 
-
-```shell
-Set-VMNetworkAdapterVlan -VMName <Docker VM Name> -Trunk -NativeVlanId 0 -AllowedVlanIdList "<comma separated list of vlans>"
-```
-
-(There might be other ways how adjust this.)
-
-2) Within the VM, set up sub-interfaces for each of the VLANs so they can be scanned. On Ubuntu 22.04 Netplan can be used.
-
-In /etc/netplan/00-installer-config.yaml, add vlan definitions:
-
-```
-network:
-  ethernets:
-    eth0:
-      dhcp4: yes
-  vlans:
-    eth0.2:
-      id: 2
-      link: eth0
-      addresses: [ "192.168.2.2/24" ]
-      routes:
-        - to: 192.168.2.0/24
-          via: 192.168.1.1 
-```
-
-3) Run `sudo netplan apply` and the interfaces are then available to scan in NetAlertX. 
-4) In this case, use `192.168.2.0/24 --interface=eth0.2` in NetAlertX
-
-#### VLAN 🔍Example:
-
-![Vlan configuration example](/docs/img/SUBNETS/subnets_vlan.png)
-
-#### Support for VLANS (& exceptions)
-
-Please note the accessibility of the macvlans when they are configured on the same computer. My understanding this is a general networking behavior, but feel free to clarify via a PR/issue.
+Please note the accessibility of macvlans when configured on the same computer. This is a general networking behavior, but feel free to clarify via a PR/issue.
 
 - NetAlertX does not detect the macvlan container when it is running on the same computer.
 - NetAlertX recognizes the macvlan container when it is running on a different computer.

docs/SYNOLOGY_GUIDE.md

@@ -0,0 +1,74 @@
+# Installation on a Synology NAS
+
+There are different ways to install NetAlertX on a Synology, including SSH-ing into the machine and using the command line. For this guide, we will use the Project option in Container manager. 
+
+## Create the folder structure
+
+The folders you are creating below will contain the configuration and the database. Back them up regularly. 
+
+1. Create a parent folder named `netalertx`
+2. Create a `db` sub-folder
+
+![Folder structure](/docs/img/SYNOLOGY/01_Create_folder_structure.png)
+![Folder structure](/docs/img/SYNOLOGY/02_Create_folder_structure_db.png)
+![Folder structure](/docs/img/SYNOLOGY/03_Create_folder_structure_db.png)
+
+3. Create a `config` sub-folder
+
+![Folder structure](/docs/img/SYNOLOGY/04_Create_folder_structure_config.png)
+
+4. Note down the folders Locations:
+
+![Getting the location](/docs/img/SYNOLOGY/05_Access_folder_properties.png)
+![Getting the location](/docs/img/SYNOLOGY/06_Note_location.png)
+
+5. Open **Container manager** -> **Project** and click **Create**.
+6. Fill in the details:
+
+- Project name: `netalertx`
+- Path: `/app_storage/netalertx` (will differ from yours)
+- Paste in the following template:
+
+```yaml
+version: "3"
+services:
+  netalertx:
+    container_name: netalertx
+    # use the below line if you want to test the latest dev image
+    # image: "jokobsk/netalertx-dev:latest" 
+    image: "jokobsk/netalertx:latest"      
+    network_mode: "host"        
+    restart: unless-stopped
+    volumes:
+      - local/path/config:/app/config
+      - local/path/db:/app/db      
+      # (optional) useful for debugging if you have issues setting up the container
+      - local/path/logs:/app/log
+    environment:
+      - TZ=Europe/Berlin      
+      - PORT=20211
+```
+
+![Project settings](/docs/img/SYNOLOGY/07_Create_project.png)
+
+7. Replace the paths to your volume and/or comment out unnecessary line(s):
+
+- This is only an example, your paths will differ.
+
+```yaml
+ volumes:
+      - /volume1/app_storage/netalertx/config:/app/config
+      - /volume1/app_storage/netalertx/db:/app/db      
+      # (optional) useful for debugging if you have issues setting up the container
+      # - local/path/logs:/app/log <- commented out with # ⚠
+```
+
+![Adjusting docker-compose](/docs/img/SYNOLOGY/08_Adjust_docker_compose_volumes.png)
+
+8. (optional) Change the port number from `20211` to an unused port if this port is already used.
+9. Build the project:
+
+![Build](/docs/img/SYNOLOGY/09_Run_and_build.png)
+
+10. Navigate to `<Synology URL>:20211` (or your custom port).
+11. Read the [Subnets](/docs/SUBNETS.md) and [Plugins](/front/plugins/README.md) docs to complete your setup. 

docs/UPDATES.md

@@ -0,0 +1,110 @@
+# Docker Update Strategies for NetAlertX
+
+This guide outlines several approaches for updating Docker containers, specifically using 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.
+
+You can choose any approach that fits your workflow.
+
+> In the examples I assume that the container name is `netalertx` and the image name is `netalertx` as well.
+
+## 1. Manual Updates
+
+Use this method when you need precise control over a single container or when dealing with a broken container that needs immediate attention.
+Example Commands
+
+To manually update the `netalertx` container, stop it, delete it, remove the old image, and start a fresh one with `docker-compose`.
+
+```bash
+# Stop the container
+sudo docker container stop netalertx
+
+# Remove the container
+sudo docker container rm netalertx
+
+# Remove the old image
+sudo docker image rm netalertx
+
+# Pull and start a new container
+sudo docker-compose up -d
+```
+
+### Alternative: Force Pull with Docker Compose
+
+You can also use `--pull always` to ensure Docker pulls the latest image before starting the container:
+
+```bash
+sudo docker-compose up --pull always -d
+```
+
+## 2. Dockcheck for Bulk Container Updates
+
+Always check the [Dockcheck](https://github.com/mag37/dockcheck) docs if encountering issues with the guide below. 
+
+Dockcheck is a useful tool if you have multiple containers to update and some flexibility for handling potential issues that might arise during mass updates. Dockcheck allows you to inspect each container and decide when to update.
+
+### Example Workflow with Dockcheck
+
+You might use Dockcheck to:
+
+- Inspect container versions.
+- Pull the latest images in bulk.
+- Apply updates selectively.
+
+Dockcheck can help streamline bulk updates, especially if you’re managing multiple containers.
+
+Below is a script I use to run an update of the Dockcheck script and start a check for new containers:
+
+```bash
+cd /path/to/Docker &&
+rm dockcheck.sh &&
+wget https://raw.githubusercontent.com/mag37/dockcheck/main/dockcheck.sh &&
+sudo chmod +x dockcheck.sh &&
+sudo ./dockcheck.sh
+```
+
+## 3. Automated Updates with Watchtower
+
+Always check the [watchtower](https://github.com/containrrr/watchtower) docs if encountering issues with the guide below. 
+
+Watchtower monitors your Docker containers and automatically updates them when new images are available. This is ideal for ongoing updates without manual intervention.
+
+### Setting Up Watchtower
+
+#### 1. Pull the Watchtower Image:
+
+```bash
+docker pull containrrr/watchtower
+```
+
+#### 2. Run Watchtower to update all images:
+
+```bash
+docker run -d \
+  --name watchtower \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  containrrr/watchtower \
+  --interval 300 # Check for updates every 5 minutes
+```
+
+#### 3. Run Watchtower to update only NetAlertX: 
+
+You can specify which containers to monitor by listing them. For example, to monitor netalertx only:
+
+```bash
+docker run -d \
+  --name watchtower \
+  -v /var/run/docker.sock:/var/run/docker.sock \
+  containrrr/watchtower netalertx
+
+```
+
+## Summary
+
+- Manual: Ideal for individual or critical updates.
+- Dockcheck: Suitable for controlled, mass updates.
+- Watchtower: Fully automated, best for continuous deployment setups.
+
+These approaches allow you to maintain flexibility in how you update Docker containers, depending on the urgency and scale of the update.

docs/WEB_UI_PORT_DEBUG.md

@@ -41,7 +41,7 @@ In the container execute:
 
 `cat /var/log/nginx/error.log`
 
-`cat /app/front/log/app.php_errors.log`
+`cat /app/log/app.php_errors.log`
 
 ## 8. Make sure permissions are correct
 

front/appEventsCore.php

@@ -9,6 +9,8 @@
     </div>
 </section>
 
+
+
 <script>
 
 // show loading dialog
@@ -17,7 +19,7 @@ showSpinner()
 $(document).ready(function() {
 
     // Load JSON data from the provided URL
-    $.getJSON('/api/table_appevents.json', function(data) {
+    $.getJSON('/php/server/query_json.php?file=table_appevents.json', function(data) {
         // Process the JSON data and generate UI dynamically        
         processData(data)
 
@@ -89,7 +91,3 @@ function processData(data) {
 
 </script>
 
-<!-- Datatable -->
-<link rel="stylesheet" href="lib/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"/>
-<script src="lib/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
-<script src="lib/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

front/css/app.css

@@ -12,11 +12,42 @@
 ----------------------------------------------------------------------------- */
 :root {
     --color-aqua: #00c0ef;
+    --color-blue: #0060df;
     --color-green: #00a65a;
     --color-yellow: #f39c12;
     --color-red: #dd4b39;
 }
 
+.input-group .checkbox
+{
+    margin-left: 5px;
+}
+
+h5
+{
+    font-size: medium;
+}
+
+/* -----------------------------------------------------------------------------
+   Helper Classes
+----------------------------------------------------------------------------- */
+
+.pointer
+{
+    cursor: pointer;
+}
+
+.question
+{
+    cursor: help;
+}
+
+.alignRight
+{
+    text-align: end;
+    float: inline-end;
+}
+
 /* -----------------------------------------------------------------------------
    Text Classes
 ----------------------------------------------------------------------------- */
@@ -124,6 +155,21 @@
     border: none;
 }
 
+@media (min-width: 768px) {
+
+    .hideOnBigScreen{
+        display: none;
+    }
+}
+
+@media (max-width: 767px) { /* on mobile */
+
+    .hideOnMobile{
+        display: none;
+    }
+}
+
+
 /* -----------------------------------------------------------------------------
    Main Sections
 ----------------------------------------------------------------------------- */
@@ -197,6 +243,12 @@
 {
     line-height: 30px;
 }
+
+body
+{
+    background-image: url('../img/background.png');
+}
+
 /* -----------------------------------------------------------------------------
    Customized Main Menu
 ----------------------------------------------------------------------------- */
@@ -235,11 +287,6 @@
     margin-left: 150px;    
 }
 
-#settingsPage
-{
-    display: grid;
-}
-
 
 @media (max-width: 767px) {
     .main-header .logo {
@@ -261,7 +308,7 @@
     .main-sidebar {
         padding-top: 50px;
     }
-    .content-header {
+    .content-header #pageTitle{
         display: none;
     }
 }
@@ -568,7 +615,7 @@
 
 .modal_red
 {
-    color: rgb(245, 245, 245);
+    color: #d41001;
     background-color: #e2acaa;
     border-color: #d41001;
 }
@@ -745,6 +792,47 @@ height: 50px;
 .infobox_label {
     font-size: 16px !important;
 }
+
+.deviceSelector 
+{
+    display: block;
+}
+
+.deviceSelector  input
+{
+    width: 100% !important;
+    display: inline-grid;
+}
+
+/* --------------------------------------------------------- */
+/*                         Presence                          */
+/* --------------------------------------------------------- */
+.presencenceKey
+{
+    float: right;
+}
+
+.presenceOnlineNow{
+    background-color: var(--color-green);
+}
+
+.presenceOnlinePast{
+    background-color: var(--color-blue);
+}
+
+.presenceOnlinePastMiss{
+    background-color: var(--color-yellow);
+}
+
+.presenceKeyBoxes
+{
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    /* background: #fff; */
+    opacity: .75; 
+}
+
 /* --------------------------------------------------------- */
 /*                         report                            */
 /* --------------------------------------------------------- */
@@ -769,20 +857,20 @@ height: 50px;
 /*                          settings                         */
 /* --------------------------------------------------------- */
 
-@media (max-width: 767px) {
+@media (max-width: 767px) { /* on mobile */
     /* hide on mobile */
     .setting_description {
       /* color: red; */
       display: none;
     }
-    .setting_input{
+    /* .setting_input{
         width:70%;
-        /* background-color: red; */
+        
     }
     .setting_name
     {
         width:30%;         
-    }
+    } */
   }
 
 @media (min-width: 768px) {
@@ -790,16 +878,44 @@ height: 50px;
     /* color: green; */
     display: block;
 }
-.setting_input{
+/* .setting_input{
     width:40%;        
-    /* background-color: green; */
+
 }
 .setting_name
 {
     width:19%;         
+} */
 }
+
+/* Hide unusable buttons on the settings page for the NEWDEV plugin*/
+#settingsPage #add_option_NEWDEV_devGroup, 
+#settingsPage #add_option_NEWDEV_devLocation, 
+#settingsPage #add_option_NEWDEV_devOwner,
+#settingsPage #copy_icons_NEWDEV_devIcon,
+#settingsPage #add_icon_NEWDEV_devIcon,
+#settingsPage #add_option_NEWDEV_devSite,
+#settingsPage #add_option_NEWDEV_devType
+{
+    display: none;
 }
 
+
+
+#settingsPage
+{
+    display: grid;
+}
+
+
+#settingsPage .small-box .inner .card-title {
+    overflow: hidden;
+    text-overflow: ellipsis;        
+    white-space: nowrap;
+    color: white;
+}
+  
+
 .settingswrap
 {
     margin-bottom: 100px;
@@ -862,10 +978,10 @@ height: 50px;
 }
 
 
-.table_row {    
+#settingsPage .table_row {    
     padding: 3px;    
-    width:100%;
-    display: flex;
+    /* width:100%; */
+    /* display: flex; */
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-color: #606060;
@@ -885,10 +1001,6 @@ height: 50px;
     font-weight: 300;    
 }
 
-.setting_description
-{
-    width:40%;
-}
 
 .myhidden
 {
@@ -1029,7 +1141,11 @@ input[readonly] {
 
 .settingsSearchWrap
 {
-    padding:10px;
+    /* padding:10px; */
+    /* display: flex; */
+    justify-content: center; /* Centers horizontally */
+    align-items: center;     /* Centers vertically */
+    /* height: 60px;             */
 }
 
 .settings-sticky-bottom-section {
@@ -1039,11 +1155,12 @@ input[readonly] {
     /* opacity: 0.8; */
     bottom: 30px;
     border-radius: 5px;
-    margin:1px;
+    /* margin:1px; */
     border-width: 1px;
     border-style: solid;
     border-color: inherit;
     /* width: 87%; */
+    padding: 10px;
   }
 
   .settings-sticky-bottom-section:hover {
@@ -1062,7 +1179,7 @@ input[readonly] {
     width: 14px;
     position: absolute;
     right: -6px;
-    top: 6px;
+    top: 13px;
 
 }
 
@@ -1074,20 +1191,146 @@ input[readonly] {
 .saveSettingsWrapper button
 {
     width:70%;
-    margin-top:20px;
+    /* margin-top:20px; */
     margin-left:15%;
-    margin-bottom:20px;
+    /* margin-bottom:20px; */
 }
 
+#settingsPage .select2-selection 
+{
+    width: initial;
+    display: inline-block;
+}
+
+#settingsPage  .form-control
+{
+    min-height: 42px;
+}
+
+#settingsPage  .select2-selection
+{
+    background-color: rgb(96, 96, 96);
+} 
+#settingsPage  .select2-container 
+{
+    width: 100% !important;
+}
+
+#settingsPage  .select2-container  .selection
+{
+    width: 100% !important;
+    display: inline-grid;
+}
+
+
+/* Basic style for the div elements */
+#settingsPage  .setting_overriden_by_env {
+    position: relative;
+    /* width: 300px;
+    height: 200px; */
+    background-color: #f3f3f3;
+    border: 1px solid #ccc;
+    z-index: 10;
+  }
+
+  /* Style for the overlay */
+  #settingsPage .setting_overriden_by_env::after {
+    content: "Overridden with ENV variable";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6); /* semi-transparent black overlay */
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 700;
+    z-index: 11;
+  }
+
 /* ----------------------------------------------------------------- */
 /*                    Devices page                                   */
 /* ----------------------------------------------------------------- */
 
-#txtIconFA {
+.modal-header .close
+{
+    display: flex;
+}
+
+.modal-title
+{
+    display: inline;
+}
+
+#iconList
+{
+    padding: 10px;
+    padding-bottom:30px;
+}
+
+.iconPreviewSelector:hover
+{
+    backdrop-filter: brightness(50%);
+}
+
+.iconPreviewSelector 
+{
+    text-align: center;
+    padding: 15px;
+    height: 80px;
+    margin-bottom: 15px;
+}
+
+.iconList
+{
+    display: flex;
+}
+
+.iconColumn
+{
+    max-height: 25px;
+}
+
+.iconPreviewSelector svg
+{
+    width:40px;
+    height: 40px;
+}
+
+.iconPreviewSelector i
+{
+    font-size: 30px;
+    height: 40px;
+}
+
+.iconPreview {
     min-width: 40px;
 }
 
 
+.dummyDevice 
+{
+    text-align: end;
+}
+
+#tableDevices .fab
+{
+    font-size: 1.2em;
+}
+
+#tableDevices .fa
+{
+    font-size: 1.0em;
+}
+
+#tableDevices tbody tr
+{
+    height: 1.5em;
+}
+
 .info-icon-nav
 {   
     top: -6px;
@@ -1097,11 +1340,6 @@ input[readonly] {
     font-size: large;
 }
 
-.pointer
-{
-    cursor: pointer;
-}
-
 .drag
 {
     cursor: move; /* fallback if grab cursor is unsupported */
@@ -1110,24 +1348,25 @@ input[readonly] {
     cursor: -webkit-grab;
 }
 
-.db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice
+.select2-container--default .select2-selection--multiple .select2-selection__choice
 {
-    background-color:#258744;
+    background-color:#258744 !important;
 }
-.db_info_table_row .select2-container--default .select2-selection--multiple
+.select2-container--default .select2-selection--multiple
 {
-    background-color:#606060;
+    background-color:#606060 !important;
 }
 
 .select2-container .select2-dropdown
 {
-    background-color:#606060;
+    background-color:#606060 !important;
 }
 
-.networkPageHelp{
+.helpIconSmallTopRight{
     position: absolute;
     font-size: x-small;
     margin-bottom: 6px;
+    margin-left: 3px;
 }
 
 .pageHelp{
@@ -1155,10 +1394,91 @@ input[readonly] {
     height: 1em !important;
 }
 
+#panDetails .control-label{
+    text-align: left;
+}
+
+#devicePageInfoPlc
+{
+    display: none;
+    padding-top: 2em;
+}
+
+/* ----------------------------------------------------------------- */
+/* Device details */
+/* ----------------------------------------------------------------- */
+
+.dataTables_length label .form-control, .dataTables_filter label .form-control
+{
+    float: none;
+}
+
+
+.form-inline .input-group
+{
+    width: 100%;
+}
+
+.input-group .actionIcon
+{
+    height: 2.4em;
+}
+
+.input-group .actionIcon:hover
+{
+    backdrop-filter: brightness(50%);
+    background-color: rgba(0, 0, 0, 0.2); /* darkens the background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out;
+}
+
+.devicePropAction
+{    
+    width: 1.2em;
+    height: 1.2em;
+    display: inline-block;
+    padding: 0.1em;
+    margin: 0.1em;
+    /* transition: font-size 0.3s;*/
+}
+
+.devicePropAction:hover
+{    
+    font-size: larger;
+    padding: 0em;
+    margin: 0em;
+    
+}
+
+
+#panDetails .dataTables_wrapper .bottom div
+{
+    max-width: 34%;
+    display: block;
+    float:inline-end;
+    height: 2em;
+} 
+
+#panDetails .dataTables_wrapper .bottom .dataTables_info
+{
+    float:inline-start;
+}
+
+#panDetails .dataTables_wrapper .bottom .dataTables_length
+{
+    padding: 0.3em;
+}
+/* #panDetails .dataTables_wrapper .bottom .paging_simple_numbers */
+
+
+#panDetails #NEWDEV_devCustomProps_label
+{
+    display: none;
+}
+
 /* ----------------------------------------------------------------- */
 /* MODAL popups */
 /* ----------------------------------------------------------------- */
-
 #modal-input-textarea
 {
     width: 100%;
@@ -1241,7 +1561,8 @@ input[readonly] {
     border: solid;
     border-color:cyan;
 }
-#networkTree .netStatus-Off-line i
+#networkTree .netStatus-Off-line i,
+#networkTree .netStatus-Off-line svg
 {
     color: #dd4b39;
 }
@@ -1322,7 +1643,18 @@ input[readonly] {
 .plugin-content #tabs-content-location
 {    
     margin: 0px;
+    /* padding-top: 0; */
+}
 
+.integrations-plugins .content
+{
+    display: table;
+    width: 100%;
+}
+
+.plugin-content .tab-content
+{    
+    padding-top: 10px;
 }
 
 .plugins-description
@@ -1369,13 +1701,33 @@ input[readonly] {
     }
   }
 
-#settingsPage .small-box .inner .card-title {
-    overflow: hidden;
-    text-overflow: ellipsis;        
-    white-space: nowrap;
-    color: white;
+
+.textOverflow
+{
+    white-space: nowrap;        /* Prevent text from wrapping to a new line */
+    overflow: hidden;           /* Hide the overflowed text */
+    text-overflow: ellipsis;    /* Show ellipsis (...) */
+}
+
+.table-stretched
+{
+    min-width: -moz-available;
+    min-width: -webkit-fill-available;
+}
+
+.pluginBadge
+{
+    float: right;
+}
+
+.pluginBadgeWrap
+{
+    float: right;
+    display: ruby;
+    z-index: 1;
+    position: sticky;
+    margin-top: 1px;
 }
-  
 
 /* -----------------------------------------------------------------------------
    Spin
@@ -1390,7 +1742,7 @@ input[readonly] {
 
     opacity: 0.8;
     background-color: #fff;
-    z-index: 99;
+    z-index: 800;
 }
 
 .pa_spinner {
@@ -1403,7 +1755,7 @@ input[readonly] {
     padding: 15px;
     width: 200px;
     background-color: #fff;
-    z-index: 100;
+    z-index: 801;
 }
 
 #loadingSpinner
@@ -1455,7 +1807,8 @@ input[readonly] {
 
 table.dataTable tbody > tr.selected
 {
-  color:red;
+  /* color:red; */
+  color: #353c42;
 }
 
 /* -----------------------------------------------------------------------------

front/css/dark-patch.css

@@ -17,6 +17,10 @@ html {
   background-color: #353c42;
 }
 
+/* body {
+  background-image: url('../img/boxed-bg-dark.png') !important;
+} */
+
 body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
 
   background-color: #353c42 !important;
@@ -728,4 +732,8 @@ input[type="password"]::-webkit-caps-lock-indicator {
   background-color: #000 !important;
 }
 
+.callout code {
+  background-color: #fff !important;
+  color:#000 !important;
+}
 

front/css/system-dark-patch-cal.css

@@ -0,0 +1,21 @@
+@media (prefers-color-scheme: dark) {
+
+  .fc-sat {  
+  background-color: #444D56; }
+  .fc-sun {  
+  background-color: #444D56; }
+  .fc-today {
+    background-color: #8D9AAC !important;
+    border: none !important;
+  } 
+  .fc-cell-content {
+	  background-color: #272c30;
+  }
+  .fc-widget-header {
+	  background-color: #353c42;
+  }
+  .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
+	  border-color: #353c42 !important;
+  }
+
+}

front/css/system-dark-patch.css

@@ -0,0 +1,742 @@
+/* Pi-hole: A black hole for Internet advertisements
+*  (c) 2020 Pi-hole, LLC (https://pi-hole.net)
+*  Network-wide ad blocking via your own hardware.
+*
+*  This file is copyright under the latest version of the EUPL.
+*  Please see LICENSE file for your rights under this license.
+*
+*  The colors used in this theme has been inspired by
+*  https://github.com/anvyst/adminlte-skin-midnight
+*
+* Additional fixes For Pi.Alert UI by leiweibau */
+
+@media (prefers-color-scheme: dark) {
+    
+  :root {
+    --datatable-bgcolor: rgba(64, 76, 88, 0.8);
+  }
+  html {
+    background-color: #353c42;
+  }
+
+  /* body {
+    background-image: url('../img/boxed-bg-dark.png') !important;
+  } */
+
+  body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
+
+    background-color: #353c42 !important;
+    color: #bec5cb !important;
+  }
+  h4 {
+    color: #44def1;
+  }
+  .content-header > .breadcrumb > li > a {
+    color: #bec5cb;
+  }
+  .table > thead > tr > th,
+  .table > tbody > tr > th,
+  .table > tfoot > tr > th,
+  .table > thead > tr > td,
+  .table > tbody > tr > td,
+  .table > tfoot > tr > td {
+    border-top: 0;
+  }
+  .table > thead > tr.odd,
+  .table > tbody > tr.odd,
+  .table > tfoot > tr.odd {
+    background-color: #2a2f34;
+  }
+  .table > thead > tr.odd:hover,
+  .table > tbody > tr.odd:hover,
+  .table > tfoot > tr.odd:hover,
+  .table > thead > tr.even:hover,
+  .table > tbody > tr.even:hover,
+  .table > tfoot > tr.even:hover {
+    background-color: #1e2226;
+  }
+  .table-bordered,
+  .table-bordered > thead > tr > th,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > th,
+  .table-bordered > thead > tr > td,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > tfoot > tr > td {
+    border: 1px solid #353c42;
+  }
+  .dataTables_wrapper input[type="search"] {
+    border-radius: 4px;
+    background-color: #353c42;
+    border: 0;
+    color: #bec5cb;
+  }
+  .dataTables_paginate .pagination li > a {
+    background-color: #353c42;
+    border-color: #353c42;
+  }
+  .pagination > .disabled > a,
+  .pagination > .disabled > a:focus,
+  .pagination > .disabled > a:hover,
+  .pagination > .disabled > span,
+  .pagination > .disabled > span:focus,
+  .pagination > .disabled > span:hover {
+    cursor: not-allowed;
+    color: #bec5cb;
+    background-color: #353c42;
+    border-color: #353c42;
+  }
+  .pagination > li > a:focus,
+  .pagination > li > a:hover,
+  .pagination > li > span:focus,
+  .pagination > li > span:hover {
+    z-index: 2;
+    color: #bec5cb;
+    background-color: #54606b;
+    border-color: #54606b;
+  }
+  .wrapper,
+  .main-sidebar,
+  .left-side {
+    background-color: #272c30;
+  }
+  .user-panel > .info,
+  .user-panel > .info > a {
+    color: #fff;
+  }
+  .sidebar-menu > li.header {
+    color: #556068;
+    background-color: #1e2225;
+  }
+  .sidebar-menu > li > a {
+    border-left: 3px solid transparent;
+  }
+  .sidebar-menu > li:hover > a,
+  .sidebar-menu > li > a:focus,
+  .sidebar-menu > li.active > a {
+    color: #fff;
+    background-color: #22272a;
+    border-color: #3c8dbc;
+  }
+  .sidebar-menu > li > .treeview-menu {
+    margin: 0 1px;
+    background-color: #32393e;
+  }
+  .sidebar a {
+    color: #bec5cb;
+  }
+  .sidebar a:hover {
+    text-decoration: none;
+  }
+  .treeview-menu > li > a {
+    color: #949fa8;
+  }
+  .treeview-menu > li.active > a,
+  .treeview-menu > li > a:hover,
+  .treeview-menu > li > a:focus {
+    color: #fff;
+  }
+  .sidebar-form {
+    border-radius: 3px;
+    border: 1px solid #3e464c;
+    margin: 10px;
+  }
+  .sidebar-form input[type="text"],
+  .sidebar-form .btn {
+    box-shadow: none;
+    background-color: #3e464c;
+    border: 1px solid transparent;
+    height: 35px;
+  }
+  .sidebar-form input[type="text"] {
+    color: #666;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 2px;
+  }
+  .sidebar-form input[type="text"]:focus,
+  .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+    background-color: #fff;
+    color: #666;
+  }
+  .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+    border-left-color: #fff;
+  }
+  .sidebar-form .btn {
+    color: #999;
+    border-top-left-radius: 0;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 0;
+  }
+  .box,
+  .box-footer,
+  .info-box,
+  .box-comment,
+  .comment-text,
+  .comment-text .username {
+    color: #bec5cb;
+    background-color: #272c30;
+  }
+  .box-comments .box-comment {
+    border-bottom-color: #353c42;
+  }
+  .box-footer {
+    border-top: 1px solid #353c42;
+  }
+  .box-header.with-border {
+    border-bottom: 1px solid #353c42;
+  }
+  .box-solid,
+  .box {
+    border: 1px solid #272c30;
+  }
+  .box-solid > .box-header,
+  .box > .box-header {
+    color: #bec5cb;
+  }
+  .box-solid > .box-header .btn,
+  .box > .box-header .btn {
+    color: #bec5cb;
+  }
+  .box.box-info,
+  .box.box-primary,
+  .box.box-success,
+  .box.box-warning,
+  .box.box-danger {
+    border-top-width: 3px;
+  }
+  .main-header .navbar {
+    background-color: #272c30;
+  }
+  .main-header .navbar .nav > li > a,
+  .main-header .navbar .nav > li > .navbar-text {
+    color: #bec5cb;
+    max-height: 50px;
+  }
+  .main-header .navbar .nav > li > a:hover,
+  .main-header .navbar .nav > li > a:active,
+  .main-header .navbar .nav > li > a:focus,
+  .main-header .navbar .nav .open > a,
+  .main-header .navbar .nav .open > a:hover,
+  .main-header .navbar .nav .open > a:focus,
+  .main-header .navbar .nav > .active > a {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: #f6f6f6;
+  }
+  .main-header .navbar .sidebar-toggle {
+    color: #bec5cb;
+  }
+  .main-header .navbar .sidebar-toggle:hover {
+    color: #f6f6f6;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .timeline li .timeline-item {
+    color: #bec5cb;
+    background-color: #272c30;
+    border-color: #353c42;
+  }
+  .timeline li .timeline-header {
+    border-bottom-color: #353c42;
+  }
+  .nav-stacked > li > a {
+    color: #bec5cb;
+  }
+  .nav-stacked > li > a:hover {
+    color: white;
+    background-color: #1e2226;
+  }
+  .content-wrapper,
+  .right-side {
+    background-color: #353c42;
+  }
+  .main-footer,
+  .nav-tabs-custom {
+    background-color: #272c30;
+    border-top-color: #353c42;
+    color: #bec5cb;
+  }
+  .main-footer .nav-tabs,
+  .nav-tabs-custom .nav-tabs {
+    background-color: #30383f;
+    border-bottom-color: #2f363b;
+  }
+  .main-footer .tab-content,
+  .nav-tabs-custom .tab-content {
+    background-color: #30383f;
+  }
+  .nav-tabs-custom > .nav-tabs {
+    background: rgba(64, 72, 80, 0.666);
+  }
+  .nav-tabs-custom > .nav-tabs > li {
+    margin-right: 1px;
+    color: #bec5cb;
+  }
+  .nav-tabs-custom > .nav-tabs > li.active > a,
+  .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    border-left-color: #30383f;
+    border-right-color: #30383f;
+    background-color: #30383f;
+    color: #bec5cb;
+  }
+  .nav-tabs-custom > .nav-tabs > li:not(.active):hover {
+    border-top-color: #d2d6de;
+    background-color: transparent;
+  }
+  .nav-tabs-custom > .nav-tabs > li > a {
+    color: #8e959b;
+  }
+  .nav-tabs-custom > .nav-tabs > li > a:focus {
+    color: #3c8dbc;
+  }
+  .nav-tabs-custom > .nav-tabs > li:hover > a,
+  .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    background-color: #353c42;
+    color: #bec5cb;
+  }
+
+  .list-group {
+    color: #bec5cb;
+    background-color: #272c30;
+  }
+  .list-group .list-group-item {
+    border-color: #353c42;
+    background-color: #272c30;
+  }
+  .input-group .input-group-addon {
+    border-right: 1px solid #272c30;
+  }
+  .select2 .select2-selection {
+    background-color: #353c42;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+  .select2 .select2-selection .select2-container--default,
+  .select2 .select2-selection .select2-selection--single,
+  .select2 .select2-selection .select2-selection--multiple,
+  .select2 .select2-selection .select2-selection__rendered {
+    color: #bec5cb;
+  }
+  .select2-dropdown {
+    background-color: #353c42;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+  .select2-dropdown .select2-search__field {
+    background-color: #272c30;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+  .select2-container--default.select2-container--open {
+    background-color: #272c30;
+  }
+
+  .layout-boxed {
+    background: url("../../img/boxed-bg-dark.png") repeat fixed;
+  }
+  .not-used {
+    background-color: #eee;
+  }
+  .not-used:hover {
+    background-color: #c5c5c5;
+  }
+  .used {
+    background-color: #fff;
+  }
+  .used:hover {
+    background-color: #ddd;
+  }
+
+  .graphs-grid {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .graphs-ticks {
+    color: #b8c7ce;
+  }
+  .queries-permitted {
+    background-color: #00a65a;
+  }
+  .queries-blocked {
+    background-color: #999;
+  }
+  .progress {
+    background-color: #333;
+  }
+
+  .bg-green {
+    background-color: #005c32 !important;
+  }
+  .bg-aqua {
+    background-color: #007997 !important;
+  }
+  .bg-yellow {
+    background-color: #b1720c !important;
+  }
+  .bg-red {
+    background-color: #913225 !important;
+  }
+
+  code,
+  pre {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #bec5cb;
+    background-color: #353c42;
+    border-radius: 4px;
+  }
+
+  /* Used in the Query Log table */
+  .text-green-light {
+    color: #5ca314 !important;
+  }
+  .text-green {
+    color: #00aa60 !important;
+  }
+  .text-orange {
+    color: #b1720c !important;
+  }
+  .text-red {
+    color: #bd2c19 !important;
+  }
+  .text-vivid-blue {
+    color: #007997 !important;
+  }
+  td.highlight {
+    background-color: rgba(255, 204, 0, 0.333);
+  }
+  .btn-default {
+    box-shadow: none;
+    background-color: #3e464c;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+
+  /* Used in debug log page */
+  .log-red {
+    color: #ff4038;
+  }
+  .log-green {
+    color: #4c4;
+  }
+  .log-yellow {
+    color: #fb0;
+  }
+  .log-blue {
+    color: #48f;
+  }
+  .log-purple {
+    color: #b8e;
+  }
+  .log-cyan {
+    color: #0df;
+  }
+  .log-gray {
+    color: #999;
+  }
+
+  #output {
+    border-color: #505458;
+    background: #272c30;
+  }
+
+  /* Used by the long-term pages */
+  .daterangepicker {
+    background-color: #3e464c;
+    border-radius: 4px;
+    border: 1px solid #353c42;
+  }
+  .daterangepicker .ranges li:hover {
+    background-color: #353c42;
+  }
+  .daterangepicker .ranges li.active {
+    background-color: #1e2226; /* Color also used in table pagination */
+  }
+  .daterangepicker .calendar-table {
+    background-color: #3e464c;
+    border-radius: 4px;
+    border: 1px solid #353c42;
+  }
+  .daterangepicker td.off,
+  .daterangepicker td.off.in-range,
+  .daterangepicker td.off.start-date,
+  .daterangepicker td.off.end-date {
+    background-color: #485158;
+  }
+  .daterangepicker td.available:hover,
+  .daterangepicker th.available:hover {
+    background-color: #1e2226;
+  }
+  .daterangepicker td.active,
+  .daterangepicker td.active:hover,
+  .daterangepicker td.in-range:hover {
+    background-color: #225e92;
+  }
+  .daterangepicker td.in-range {
+    background-color: #1e2226;
+    color: #bec5cb;
+  }
+  input,
+  select,
+  select.form-control,
+  .form-group .input-group-addon,
+  .input-group .input-group-addon,
+  .form-group input,
+  .input-group input,
+  .form-group textarea,
+  .input-group textarea,
+  .daterangepicker select.hourselect,
+  .daterangepicker select.minuteselect,
+  .daterangepicker select.secondselect,
+  .daterangepicker select.ampmselect,
+  .form-control,
+  div.dataTables_wrapper div.dataTables_length select {
+    background-color: #353c42;
+    color: #bec5cb;
+    border: 1px solid #3d444b;
+  }
+  .form-control[disabled],
+  .form-control[readonly],
+  fieldset[disabled] .form-control {
+    background-color: #353c42;
+    opacity: 1;
+  }
+  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+    background-color: #4c5761;
+    color: #bec5cb;
+    border: 1px solid #171c20;
+  }
+  .table-striped > tbody > tr:nth-of-type(2n + 1) {
+    background-color: #2d343a;
+  }
+  .panel,
+  .panel-body,
+  .panel-default > .panel-heading {
+    background-color: #3e464c;
+    border-radius: 4px;
+    border: 1px solid #353c42;
+    color: #bec5cb;
+  }
+  .box.box-solid.box-info,
+  .box.box-solid.box-info > .box-header {
+    color: #bec5cb;
+    background-color: #367fa9 !important;
+    border: 1px solid #367fa9;
+  }
+  input[type="password"]::-webkit-credentials-auto-fill-button {
+    background: #bfc5ca;
+  }
+  input[type="password"]::-webkit-caps-lock-indicator {
+    filter: invert(100%);
+  }
+
+  .network-never {
+    background-color: #661b02;
+  }
+  .network-recent {
+    background-color: #114100;
+  }
+  .network-old {
+    background-color: #525200;
+  }
+  .network-older {
+    background-color: #502b00;
+  }
+  .network-gradient {
+    background-image: linear-gradient(to right, #114100 0%, #525200 100%);
+  }
+
+  .icheckbox_polaris,
+  .icheckbox_futurico,
+  .icheckbox_minimal-blue {
+    margin-right: 10px;
+  }
+  .iradio_polaris,
+  .iradio_futurico,
+  .iradio_minimal-blue {
+    margin-right: 8px;
+  }
+
+  /* Overlay box with spinners as shown during data collection for graphs */
+  .box .overlay,
+  .overlay-wrapper .overlay {
+    z-index: 50;
+    background-color: rgba(53, 60, 66, 0.733);
+    border-radius: 3px;
+  }
+  .box .overlay > .fa,
+  .overlay-wrapper .overlay > .fa,
+  .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+    color: #bec5cb !important;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+    background-color: #353c42bb;
+    padding: 10px;
+  }
+
+  .modal-content {
+    background: #272c30;
+  }
+  .modal-header {
+    border-bottom-color: #353c42;
+  }
+  .modal-footer {
+    border-top-color: #353c42;
+  }
+  .close {
+    color: #383838;
+  }
+
+  /*** Fix login input visual misalignment ***/
+  #loginform,
+  #loginform input {
+    color: rgb(120, 127, 133);
+  }
+
+  .login-options input,
+  .login-options [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
+  .login-options [class*="icheck-"] > input:first-child + label::before {
+    background: none;
+    border-color: rgb(120, 127, 133);
+  }
+
+  /*** Additional fixes For Pi.Alert UI ***/
+  .small-box {
+      border-radius: 10px;
+      border-top: 0px;
+  }
+  .pa-small-box-aqua .inner {
+    background-color: rgb(45,108,133);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-green .inner {
+    background-color: rgb(31,76,46);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-yellow .inner {
+    background-color: rgb(151,104,37);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-red .inner {
+    background-color: rgb(120,50,38);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-gray .inner {
+    background-color: #777;
+    /* color: rgba(20,20,20,30%); */
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-gray .inner h3 {
+    color:  #bbb;
+  }
+  .text-gray-20 {
+    color: rgba(220,220,220,30%);
+  }
+  .bg-gray {
+    background-color: #888888 !important;
+  }
+  .badge.bg-green {
+      background-color: #00A000 !important;
+  }
+  .badge.bg-gray {
+      background-color: #888 !important;
+  }
+  #txtRecord {
+    background-color: #353c42;
+    border-color: #888888;
+  }
+  .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+    background-color: rgb(189,192,198);
+    color: #444;
+  }
+
+  .db_info_table_cell:nth-child(1) {background: #272c30}
+  .db_info_table_cell:nth-child(2) {background: #272c30}
+  .db_tools_table_cell_a:nth-child(1) {background: #272c30}
+  .db_tools_table_cell_a:nth-child(2) {background: #272c30}
+  .db_tools_table_cell_b:nth-child(1) {background: #272c30}
+  .db_tools_table_cell_b:nth-child(2) {background: #272c30}
+
+  .db_info_table { 
+     display: table;
+     border-spacing: 0em;
+     font-weight: 400;
+     font-size: 15px;
+     width: 100%;
+     margin: auto;
+  }
+
+  .nav-tabs-custom > .nav-tabs > li:hover > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    background-color: #272c30;
+    color: #bec5cb;
+  }
+
+  .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    border-left-color: #30383f;
+    border-right-color: #30383f;
+    background-color: #272c30;
+    color: #bec5cb;
+  }
+  .nav-tabs-custom > .nav-tabs {
+    background-color: #353c42;
+  }
+  .nav-tabs-custom .tab-content {
+    background-color: #272c30;
+  }
+  .top_small_box_gray_text {
+    color: white !important;
+  }
+
+  /* remove white border that appears on mobile screen sizes */
+  .box-body {
+      border: 0px;
+  }
+  /* remove white border that appears on mobile screen sizes */
+  .table-responsive {
+    border: 0px;
+  }
+
+  .login-page {
+    background-color: transparent;
+  }
+
+  .login-logo a {
+    color: white;
+  }
+
+  .login-box-body {
+    color: #bec5cb;
+    background-color: #272c30;
+  }
+  /* Add border radius to bottom of the status boxes*/
+  .pa-small-box-footer {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+
+  .small-box > .inner h3, .small-box > .inner p {
+    margin-bottom: 0px;
+    margin-left: 0px;
+  }
+  .small-box:hover .icon {
+    font-size: 3.74em;
+  }
+  .small-box .icon { 
+    top: 0.01em;
+    font-size: 3.25em;
+  }
+  .pa_semitransparent-panel{
+    background-color: #000 !important;
+  }
+
+}
+
+.callout code {
+  background-color: #fff !important;
+  color:#000 !important;
+}

front/deviceDetailsEdit.php

@@ -0,0 +1,434 @@
+<?php
+  //------------------------------------------------------------------------------
+  // check if authenticated
+  require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
+?>
+
+
+<div class="row">
+  <div class="box-body form-horizontal">
+    <form id="edit-form">
+    <!-- Form fields will be appended here -->
+    </form>
+  </div>
+  <!-- Buttons -->
+  <div class="col-xs-12">
+    <div class="pull-right">
+        <button type="button" 
+                class="btn btn-default pa-btn pa-btn-delete"  
+                style="margin-left:0px;"  
+                id="btnDelete"   
+                onclick="askDeleteDevice()">   
+                  <i class="fas fa-trash-alt"></i> 
+                  <?= lang('DevDetail_button_Delete');?> 
+        </button>
+        <button type="button" 
+                class="btn btn-primary pa-btn" 
+                style="margin-left:6px; "  
+                id="btnSave"     
+                onclick="setDeviceData()" >     
+                  <i class="fas fa-save"></i>
+                  <?= lang('DevDetail_button_Save');?> 
+        </button>
+    </div>
+    </div>
+</div>
+
+
+<script defer>
+  
+  // -------------------------------------------------------------------  
+  // Get plugin and settings data from API endpoints
+  function getDeviceData(readAllData){
+
+    mac = getMac()
+
+    console.log(mac);
+
+    // get data from server 
+    $.get('php/server/devices.php?action=getServerDeviceData&mac='+ mac + '&period='+ period, function(data) {      
+
+      // show loading dialog
+      showSpinner()
+
+      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) {  
+        
+        settingsData = res["data"];
+
+        // columns to hide
+        hiddenFields = ["NEWDEV_devScan", "NEWDEV_devPresentLastScan" ]
+        // columns to disable - conditional depending if a new dummy device is created
+        disabledFields =  mac == "new" ? ["NEWDEV_devLastNotification", "NEWDEV_devFirstConnection", "NEWDEV_devLastConnection"] : ["NEWDEV_devLastNotification", "NEWDEV_devFirstConnection", "NEWDEV_devLastConnection", "NEWDEV_devMac", "NEWDEV_devLastIP", "NEWDEV_devSyncHubNode" ];
+        
+        // Grouping of fields into categories with associated documentation links
+        const fieldGroups = {
+            // Group for device main information
+            DevDetail_MainInfo_Title: {
+                data: ["devMac", "devLastIP", "devName", "devOwner", "devType", "devVendor", "devGroup", "devIcon", "devLocation", "devComments"], 
+                docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICE_MANAGEMENT.md",
+                iconClass: "fa fa-pencil",
+                inputGroupClasses: "field-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"
+            },
+            // Group for session information
+            DevDetail_SessionInfo_Title: {
+                data: ["devStatus", "devLastConnection", "devFirstConnection"],
+                docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/SESSION_INFO.md",
+                iconClass: "fa fa-calendar",
+                inputGroupClasses: "field-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"
+            },
+             // Group for event and alert settings
+             DevDetail_EveandAl_Title: {
+                data: ["devAlertEvents", "devAlertDown", "devSkipRepeated"],
+                docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NOTIFICATIONS.md",
+                iconClass: "fa fa-bell",
+                inputGroupClasses: "field-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"
+            },
+            // Group for network details
+            DevDetail_MainInfo_Network_Title: {
+                data: ["devParentMAC", "devParentPort", "devSSID", "devSite", "devSyncHubNode"],
+                docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md",
+                iconClass: "fa fa-network-wired",
+                inputGroupClasses: "field-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"
+            },
+            // Group for other fields like static IP, archived status, etc.
+            DevDetail_DisplayFields_Title: {
+                data: ["devStaticIP", "devIsNew", "devFavorite", "devIsArchived"],
+                docs: "https://github.com/jokob-sk/NetAlertX/blob/main/docs/DEVICE_DISPLAY_SETTINGS.md",
+                iconClass: "fa fa-list-check",
+                inputGroupClasses: "field-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"
+            },
+            // 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 col-lg-12 col-sm-12 col-xs-12",
+                labelClasses: "col-sm-12 col-xs-12 control-label",
+                inputClasses: "col-sm-12 col-xs-12 input-group"
+            }
+        };
+
+        // Filter settings data to get relevant settings
+        const relevantSettings = settingsData.filter(set =>
+            set.setGroup === "NEWDEV" &&               // Filter for settings in the "NEWDEV" group
+            set.setKey.includes("_dev") &&             // Include settings with '_dev' in the key
+            !hiddenFields.includes(set.setKey) &&     // Exclude settings listed in hiddenFields
+            !set.setKey.includes("__metadata")        // Exclude metadata fields
+        );
+
+        // Function to generate the form
+        const generateSimpleForm = settings => {
+            const form = $('#edit-form');  // Get the form element to append generated fields
+
+            // Loop over each field group to generate sections for each category
+            Object.entries(fieldGroups).forEach(([groupName, obj]) => {
+                const groupDiv = $('<div>').addClass(obj.inputGroupClasses); // Create a div for each group with responsive Bootstrap classes
+                
+                // Add group title and documentation link
+                groupDiv.append(`<h5><i class="${obj.iconClass}"></i>  ${getString(groupName)} 
+                                    <span class="helpIconSmallTopRight">
+                                        <a target="_blank" href="${obj.docs}">
+                                            <i class="fa fa-circle-question"></i>
+                                        </a>
+                                    </span> 
+                                  </h5>
+                                  <hr>
+                                `);
+
+                // Filter relevant settings for the current group
+                const groupSettings = settings.filter(set => obj.data.includes(set.setKey.replace('NEWDEV_', '')));
+
+                // Loop over each setting in the group to generate form fields
+                groupSettings.forEach(setting => {
+                    const column = $('<div>');  // Create a column for each setting (Bootstrap column)
+
+                    // Get the field data (replace 'NEWDEV_' prefix from the key)
+                    fieldData = deviceData[setting.setKey.replace('NEWDEV_', '')]
+                    fieldData = fieldData == null ? "" : fieldData;
+
+                    // console.log(setting.setKey);                    
+                    // console.log(fieldData);                    
+
+                    // Additional form elements like the random MAC address button for devMac
+                    let inlineControl = "";
+                    // handle rendom mac
+                    if (setting.setKey == "NEWDEV_devMac" && deviceData["devIsRandomMAC"] == true) {
+                      inlineControl += `<span class="input-group-addon pointer"
+                                              title="${getString("RandomMAC_hover")}">
+                                              <a href="https://github.com/jokob-sk/NetAlertX/blob/main/docs/RANDOM_MAC.md" target="_blank">     
+                                                  <i class="fa-solid fa-shuffle"></i>
+                                              </a>
+                                          </span>`;
+                    }
+                    // handle generate MAC for new device
+                    if (setting.setKey == "NEWDEV_devMac" && deviceData["devMac"] == "") {
+                      inlineControl += `<span class="input-group-addon pointer"
+                                              onclick="generate_NEWDEV_devMac()"
+                                              title="${getString("Gen_Generate")}">
+                                              <i class="fa-solid fa-dice" ></i>
+                                          </span>`;
+                    }
+                    // handle generate IP for new device
+                    if (setting.setKey == "NEWDEV_devLastIP" && deviceData["devLastIP"] == "") {
+                      inlineControl += `<span class="input-group-addon pointer"
+                                              onclick="generate_NEWDEV_devLastIP()"
+                                              title="${getString("Gen_Generate")}">
+                                              <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>`;
+                    }
+                    
+
+                    // Generate the input field HTML
+                    const inputFormHtml = `<div class="form-group col-xs-12">
+                                              <label id="${setting.setKey}_label" class="${obj.labelClasses}" > ${setting.setName}    
+                                                  <i my-set-key="${setting.setKey}"
+                                                      title="${getString("Settings_Show_Description")}" 
+                                                      class="fa fa-circle-info pointer helpIconSmallTopRight" 
+                                                      onclick="showDescriptionPopup(this)">
+                                                  </i>
+                                              </label>
+                                              <div class="${obj.inputClasses}">
+                                                  ${generateFormHtml(settingsData, setting, fieldData.toString(), null, null)}
+                                                  ${inlineControl}
+                                              </div>
+                                          </div>`;
+
+                    column.append(inputFormHtml);  // Append the input field to the column
+                    groupDiv.append(column);       // Append the column to the group div
+                });
+
+                form.append(groupDiv);  // Append the group div (containing columns) to the form
+            });
+
+
+            // wait until everything is initialized to update icons
+            updateAllIconPreviews();
+
+            // update readonly fields
+            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)
+
+        generateSimpleForm(relevantSettings);
+
+        // <> chevrons
+        updateChevrons(deviceData)
+
+        toggleNetworkConfiguration(mac == 'Internet') 
+
+        hideSpinner();
+      
+      })
+    
+      }, 1);
+    });
+  
+  }
+  
+
+  // ----------------------------------------
+  // 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
+  function handleReadOnly(settingsData, disabledFields) {
+    settingsData.forEach(setting => {
+    const element = $(`#${setting.setKey}`);
+    if (disabledFields.includes(setting.setKey)) {
+      element.prop('readonly', true);
+    } else {
+      element.prop('readonly', false);
+    }
+  });
+  }
+
+
+  // ----------------------------------------
+  // 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'))
+  }
+
+
+
+  // -----------------------------------------------------------------------------
+  function setDeviceData(direction = '', refreshCallback = '') {
+    // Check MAC
+    if (mac === '') {
+      return;
+    }
+
+    // Determine if a new device should be created
+    const createNew = mac === 'new' ? 1 : 0;
+
+    const devLastIP = $('#NEWDEV_devLastIP').val();
+
+    // Validate MAC and Last IP
+    if (mac === '' || !(isValidIPv4(devLastIP) || isValidIPv6(devLastIP))) {
+      showMessage(getString("DeviceEdit_ValidMacIp"), 5000, "modal_red");
+      return;
+    }
+
+    showSpinner();
+
+     // Update data to server using POST
+    $.post('php/server/devices.php?action=setDeviceData', {
+        mac: $('#NEWDEV_devMac').val(),
+        name: encodeURIComponent($('#NEWDEV_devName').val().replace(/'/g, "")),
+        owner: encodeURIComponent($('#NEWDEV_devOwner').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),
+        group: encodeURIComponent($('#NEWDEV_devGroup').val().replace(/'/g, "")),
+        location: encodeURIComponent($('#NEWDEV_devLocation').val().replace(/'/g, "")),
+        comments: encodeURIComponent(encodeSpecialChars($('#NEWDEV_devComments').val())),
+        networknode: $('#NEWDEV_devParentMAC').val(),
+        networknodeport: $('#NEWDEV_devParentPort').val(),
+        ssid: $('#NEWDEV_devSSID').val(),
+        networksite: $('#NEWDEV_devSite').val(),
+        staticIP: ($('#NEWDEV_devStaticIP')[0].checked * 1),
+        scancycle: "1",
+        alertevents: ($('#NEWDEV_devAlertEvents')[0].checked * 1),
+        alertdown: ($('#NEWDEV_devAlertDown')[0].checked * 1),
+        skiprepeated: $('#NEWDEV_devSkipRepeated').val().split(' ')[0],
+        newdevice: ($('#NEWDEV_devIsNew')[0].checked * 1),
+        archived: ($('#NEWDEV_devIsArchived')[0].checked * 1),
+        devFirstConnection: ($('#NEWDEV_devFirstConnection').val()),
+        devLastConnection: ($('#NEWDEV_devLastConnection').val()),
+        devCustomProps: btoa(JSON.stringify(collectTableData("#NEWDEV_devCustomProps_table"))),
+        ip: ($('#NEWDEV_devLastIP').val()),
+        createNew: createNew
+    }, function(msg) {
+        showMessage(msg);
+
+        // Remove navigation prompt "Are you sure you want to leave..."
+        window.onbeforeunload = null;
+        somethingChanged = false;
+
+        // refresh API
+        updateApi("devices,appevents");
+
+        // Callback function
+        if (typeof refreshCallback == 'function') {
+            refreshCallback(direction);
+        }
+
+        // Everything loaded
+        hideSpinner();
+    });
+
+  }
+
+  //-----------------------------------------------------------------------------------
+  // Disables or enables network configuration for the root node
+  function toggleNetworkConfiguration(disable) {
+    if (disable) {  
+      // Completely disable the NEWDEV_devParentMAC <select> and NEWDEV_devParentPort
+      $('#NEWDEV_devParentMAC').prop('disabled', true).val("").prop('selectedIndex', 0); 
+      $('#NEWDEV_devParentMAC').empty() // Remove all options
+      .append('<option value="">Root Node</option>')
+      $('#NEWDEV_devParentPort').prop('disabled', true);
+      $('#NEWDEV_devParentPort').prop('readonly', true );
+      $('#NEWDEV_devParentMAC').prop('readonly', true );
+    } else {
+      // Enable the NEWDEV_devParentMAC <select> and NEWDEV_devParentPort
+      $('#NEWDEV_devParentMAC').prop('disabled', false);
+      $('#NEWDEV_devParentPort').prop('disabled', false);
+      $('#NEWDEV_devParentPort').prop('readonly', false );
+      $('#NEWDEV_devParentMAC').prop('readonly', false );
+    }
+  }
+
+
+  // -------------------- INIT ------------------------
+  getDeviceData(true);
+
+
+</script>

front/deviceDetailsEvents.php

@@ -0,0 +1,94 @@
+<?php
+  //------------------------------------------------------------------------------
+  // check if authenticated
+  require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
+?>
+<!-- ----------------------------------------------------------------------- -->
+ 
+
+<!-- Hide Connections -->
+<div class="text-center">
+    <label>
+    <input class="checkbox blue hidden" id="chkHideConnectionEvents" type="checkbox" checked>
+    <?= lang('DevDetail_Events_CheckBox');?>
+    </label>
+</div>
+
+<!-- Datatable Events -->
+<table id="tableEvents" class="table table-bordered table-hover table-striped ">
+    <thead>
+    <tr>
+    <th><?= lang("DevDetail_Tab_EventsTableDate");?></th>
+    <th><?= lang("DevDetail_Tab_EventsTableEvent");?></th>
+    <th><?= lang("DevDetail_Tab_EventsTableIP");?></th>
+    <th><?= lang("DevDetail_Tab_EventsTableInfo");?></th>
+    </tr>
+    </thead>
+</table>
+
+
+<script>
+
+  var eventsRows          = 10;
+  var eventsHide          = true;
+  var parEventsRows       = 'Front_Details_Events_Rows';
+  var parEventsHide       = 'Front_Details_Events_Hide';
+
+
+
+  // -----------------------------------------------------------------------------
+
+
+  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();
+  }
+
+function initializeSessionsDatatable () {
+
+  // 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']],
+
+    // Parameters
+    'pageLength'  : eventsRows,
+
+    'columnDefs'  : [
+        // Replace HTML codes
+        {targets: [0],
+          'createdCell': function (td, cellData, rowData, row, col) {
+            $(td).html (translateHTMLcodes (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');?>",
+    }
+});
+
+}
+
+initializeSessionsDatatable();
+loadEventsData();
+
+</script>

front/deviceDetailsPresence.php

@@ -0,0 +1,240 @@
+<?php
+  //------------------------------------------------------------------------------
+  // check if authenticated
+  require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
+?>
+
+<!-- fullCalendar -->
+
+<link rel="stylesheet" href="lib/fullcalendar/fullcalendar.min.css">
+  <link rel="stylesheet" href="lib/fullcalendar/fullcalendar.print.min.css" media="print">
+  <script src="lib/moment/moment.js"></script>
+  <script src="lib/fullcalendar/fullcalendar.min.js"></script>
+  <script src="lib/fullcalendar/locale-all.js"></script>
+
+<!-- fullCalendar Scheduler -->
+  <link href="lib/fullcalendar-scheduler/scheduler.min.css" rel="stylesheet">
+  <script src="lib/fullcalendar-scheduler/scheduler.min.js"></script>
+
+
+<!-- Calendar -->
+<div id="calendar">
+</div>
+
+
+<script>
+  initializeCalendar();    
+  loadPresenceData();
+
+  // Force re-render calendar on tab change
+  // (bugfix for render error at left panel)
+  $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (nav) {
+    if ($(nav.target).attr('href') == '#panPresence') {
+      $('#calendar').fullCalendar('rerenderEvents');
+    }
+  });
+
+
+  // ---------------------------------------
+  // query data
+  function loadPresenceData()
+  {
+     // Define Presence datasource and query data
+    $('#calendar').fullCalendar('removeEventSources');
+    $('#calendar').fullCalendar('addEventSource',
+    { url: 'php/server/events.php?action=getDevicePresence&mac=' + mac});
+  }
+
+  // ---------------------------------------
+  function initializeCalendar_() {
+
+  
+    var calendarEl = document.getElementById('calendar');
+
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'dayGridYear,dayGridMonth,timeGridWeek'
+      },
+      initialView: 'dayGridYear',
+      initialDate: '2023-01-12',
+      editable: true,
+      selectable: true,
+      dayMaxEvents: true, // allow "more" link when too many events
+      // businessHours: true,
+      // weekends: false,
+      events: [
+        {
+          title: 'All Day Event',
+          start: '2023-01-01'
+        },
+        {
+          title: 'Long Event',
+          start: '2023-01-07',
+          end: '2023-01-10'
+        },
+        {
+          groupId: 999,
+          title: 'Repeating Event',
+          start: '2023-01-09T16:00:00'
+        },
+        {
+          groupId: 999,
+          title: 'Repeating Event',
+          start: '2023-01-16T16:00:00'
+        },
+        {
+          title: 'Conference',
+          start: '2023-01-11',
+          end: '2023-01-13'
+        },
+        {
+          title: 'Meeting',
+          start: '2023-01-12T10:30:00',
+          end: '2023-01-12T12:30:00'
+        },
+        {
+          title: 'Lunch',
+          start: '2023-01-12T12:00:00'
+        },
+        {
+          title: 'Meeting',
+          start: '2023-01-12T14:30:00'
+        },
+        {
+          title: 'Happy Hour',
+          start: '2023-01-12T17:30:00'
+        },
+        {
+          title: 'Dinner',
+          start: '2023-01-12T20:00:00'
+        },
+        {
+          title: 'Birthday Party',
+          start: '2023-01-13T07:00:00'
+        },
+        {
+          title: 'Click for Google',
+          url: 'http://google.com/',
+          start: '2023-01-28'
+        }
+      ]
+    });
+
+    calendar.render();
+  
+
+}
+
+// -----------------------------------------------------------------------------
+function initializeCalendar() {
+  $('#calendar').fullCalendar({
+    editable          : false,
+    droppable         : false,
+    defaultView       : 'agendaMonth',
+    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
+    height            : 'auto',
+    firstDay          : 1,
+    allDaySlot        : false,
+    slotDuration      : '02:00:00',
+    slotLabelInterval : '04:00:00',
+    slotLabelFormat   : 'H:mm',
+    timeFormat        : 'H:mm', 
+    locale            : '<?= lang('Presence_CalHead_lang');?>',
+    header: {
+      left            : 'prev,next today',
+      center          : 'title',
+      right           : 'agendaYear,agendaMonth,agendaWeek'
+    },
+
+    views: {
+      agendaYear: {
+        type               : 'agenda',
+        duration           : { year: 1 },
+        buttonText         : '<?= lang('Presence_CalHead_year');?>',
+        columnHeaderFormat : ''
+      },
+
+      agendaMonth: {
+        type               : 'agenda',
+        duration           : { month: 1 },
+        buttonText         : '<?= lang('Presence_CalHead_month');?>',
+        columnHeaderFormat : 'D'
+      },
+      agendaWeek: {
+        buttonText         : '<?= lang('Presence_CalHead_week');?>',
+      },
+      agendaDay: {
+        type              : 'agenda',
+        duration          : { day: 1 },
+        buttonText        : '<?= lang('Presence_CalHead_day');?>',
+        slotLabelFormat   : 'H',
+        slotDuration      : '01:00:00'
+      }
+
+      
+    },
+
+    viewRender: function(view) {
+      if (view.name === 'agendaYear') {
+        var listHeader  = $('.fc-day-header')[0];
+        var listContent = $('.fc-widget-content')[0];
+
+        for (i=0; i < listHeader.length-2 ; i++) {
+          listHeader[i].style.borderColor = 'transparent';
+          listContent[i+2].style.borderColor = 'transparent';
+
+          if (listHeader[i].innerHTML != '<span></span>') {
+            if (i==0) {
+              listHeader[i].style.borderLeftColor = '#808080';
+            } else {
+              listHeader[i-1].style.borderRightColor = '#808080';
+              listContent[i+1].style.borderRightColor = '#808080';
+            }
+            listHeader[i].style.paddingLeft = '10px';
+          }   
+        };    
+      }
+    },
+ 
+    columnHeaderText: function(mom) {
+      switch ($('#calendar').fullCalendar('getView').name) {
+      case 'agendaYear':
+        if (mom.date() == 1) {
+          return mom.format('MMM');
+        } else {
+          return '';
+        }
+        break;
+      case 'agendaMonth':
+        return mom.date();
+        break;
+      case 'agendaWeek':
+        return mom.format ('ddd D');
+        break;
+      default:
+        return mom.date();
+      }
+    },
+
+    eventRender: function (event, element) {
+      $(element).tooltip({container: 'body', placement: 'bottom',
+                          title: event.tooltip});
+      // element.attr ('title', event.tooltip);  // Alternative tooltip
+    },
+      
+    loading: function( isLoading, view ) {
+        if (isLoading) {
+          showSpinner()
+        } else {          
+          hideSpinner()
+        }
+    }
+
+  })
+}
+
+
+
+</script>

front/deviceDetailsSessions.php

@@ -0,0 +1,81 @@
+<?php
+  //------------------------------------------------------------------------------
+  // check if authenticated
+  require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
+?>
+
+<!-- ----------------------------------------------------------------------- -->
+ 
+
+<!-- Datatable Session -->
+<table id="tableSessions" class="table table-bordered table-hover table-striped ">
+    <thead>
+    <tr>
+    <th><?= lang('DevDetail_SessionTable_Order');?></th>
+    <th><?= lang('DevDetail_SessionTable_Connection');?></th>
+    <th><?= lang('DevDetail_SessionTable_Disconnection');?></th>
+    <th><?= lang('DevDetail_SessionTable_Duration');?></th>
+    <th><?= lang('DevDetail_SessionTable_IP');?></th>
+    <th><?= lang('DevDetail_SessionTable_Additionalinfo');?></th>
+    </tr>
+    </thead>
+</table>
+
+
+<script>
+
+  var parSessionsRows     = 'Front_Details_Sessions_Rows';
+  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']],
+
+      // Parameters
+      'pageLength'  : sessionsRows,
+
+      'columnDefs'  : [
+          {visible:   false,  targets: [0]},
+
+          // Replace HTML codes
+          {targets: [1,2,3,5],
+            'createdCell': function (td, cellData, rowData, row, col) {
+              $(td).html (translateHTMLcodes (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');?>",
+      }
+    });
+  }
+
+  function loadSessionsData(){
+    $('#tableSessions').DataTable().ajax.url('php/server/events.php?action=getDeviceSessions&mac=' + getMac() +'&period='+ period).load();
+  }
+
+  initializeSessionsDatatable();
+  loadSessionsData();
+
+</script>

front/deviceDetailsTools.php

@@ -1,74 +1,167 @@
+<?php
+  //------------------------------------------------------------------------------
+  // check if authenticated
+  require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
+?>
 
-
+<!-- INTERNET INFO -->
 <?php if ($_REQUEST["mac"] == "Internet") { ?>
     
-<h4 class=""><i class="fa-solid fa-globe"></i>
-    <?= lang("DevDetail_Tab_Tools_Internet_Info_Title") ?>
-</h4>
-<h5 class="">
-    <?= lang("DevDetail_Tab_Tools_Internet_Info_Description") ?>
-</h5>
-<br>
-<div style="width:100%; text-align: center; margin-bottom: 50px;">
-    <button type="button" id="internetinfo" class="btn btn-primary pa-btn" style="margin: auto;" onclick="internetinfo()">
-        <?= lang("DevDetail_Tab_Tools_Internet_Info_Start") ?></button>
+    <h4 class=""><i class="fa-solid fa-globe"></i>
+        <?= lang("DevDetail_Tab_Tools_Internet_Info_Title") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_Tab_Tools_Internet_Info_Description") ?>
+    </h5>
     <br>
-    <div id="internetinfooutput" style="margin-top: 10px;"></div>
-</div>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <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>
+        <div id="internetinfooutput" style="margin-top: 10px;"></div>
+    </div>
 
 <?php } ?>
 
+<!-- COPY FROM DEVICE -->
+<?php if ($_REQUEST["mac"] != "Internet") { ?>
+    
+    <h4 class=""><i class="fa-solid fa-copy"></i>
+        <?= lang("DevDetail_Copy_Device_Title") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_Copy_Device_Tooltip") ?>
+    </h5>
+    <br>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <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="()">
+            <?= lang("BackDevDetail_Copy_Title") ?></button>
+        <br>
+    </div>
+
+<?php } ?>
+
+<!-- WAKE ON LAN - WOL -->
+<?php if ($_REQUEST["mac"] != "Internet") { ?>
+    
+    <h4 class=""><i class="fa-solid fa-bell"></i>
+        <?= lang("DevDetail_Tools_WOL_noti") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_Tools_WOL_noti_text") ?>
+    </h5>
+    <br>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <button type="button" id="internetinfo" class="btn btn-primary pa-btn" style="margin: auto;" onclick="wakeonlan()">
+            <?= lang("DevDetail_Tools_WOL_noti") ?></button>
+        <br>
+        <div id="wol_output" style="margin-top: 10px;"></div>
+    </div>
+
+<?php } ?>
+
+
+<!-- Delete Events -->
+<h4 class=""><i class="fa-solid fa-bell"></i>
+        <?= lang("DevDetail_button_DeleteEvents") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_button_DeleteEvents_Warning") ?>
+    </h5>
+    <br>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <button type="button" 
+                class="btn btn-default pa-btn pa-btn-delete"  
+                style="margin-left:0px;" 
+                id="btnDeleteEvents"   
+                onclick="askDeleteDeviceEvents()">   
+                  <?= lang('DevDetail_button_DeleteEvents');?> 
+        </button>
+        <br>
+        <div id="wol_output" style="margin-top: 10px;"></div>
+    </div>
+
+<!-- Reset Custom Proprties -->
+<h4 class=""><i class="fa-solid fa-list"></i>
+        <?= lang("DevDetail_CustomProperties_Title") ?> 
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_CustomProps_reset_info") ?>
+    </h5>
+    <br>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <button type="button" 
+                class="btn btn-default pa-btn pa-btn-delete"  
+                style="margin-left:0px;" 
+                id="btnDeleteEvents"   
+                onclick="askResetDeviceProps()">   
+                    <?= lang("Gen_Reset") ?> 
+        </button>
+        <br>
+        <div id="wol_output" style="margin-top: 10px;"></div>
+    </div>
+
+
+<!-- SPEEDTEST -->
 <?php if ($_REQUEST["mac"] == "Internet") { ?>
-<h4 class=""><i class="fa-solid fa-gauge-high"></i>
-    <?= lang("DevDetail_Tab_Tools_Speedtest_Title") ?>
-</h4>
-<h5 class="">
-    <?= lang("DevDetail_Tab_Tools_Speedtest_Description") ?>
-</h5>
-<br>
-<div style="width:100%; text-align: center; margin-bottom: 50px;">
-    <button type="button" id="speedtestcli" class="btn btn-primary pa-btn" style="margin: auto;" onclick="speedtestcli()">
-        <?= lang("DevDetail_Tab_Tools_Speedtest_Start") ?></button>
+    <h4 class=""><i class="fa-solid fa-gauge-high"></i>
+        <?= lang("DevDetail_Tab_Tools_Speedtest_Title") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_Tab_Tools_Speedtest_Description") ?>
+    </h5>
     <br>
-    <div id="speedtestoutput" style="margin-top: 10px;"></div>
-</div>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <button type="button" id="speedtestcli" class="btn btn-primary pa-btn" style="margin: auto;" onclick="speedtestcli()">
+            <?= lang("DevDetail_Tab_Tools_Speedtest_Start") ?></button>
+        <br>
+        <div id="speedtestoutput" style="margin-top: 10px;"></div>
+    </div>
 
 <?php } ?>
 
+<!-- TRACEROUTE -->
 <?php if ($_REQUEST["mac"] != "Internet") { ?>
-<h4 class=""><i class="fa-solid fa-route"></i>
-    <?= lang("DevDetail_Tab_Tools_Traceroute_Title") ?>
-</h4>
-<h5 class="">
-    <?= lang("DevDetail_Tab_Tools_Traceroute_Description") ?>
-</h5>
-<div style="width:100%; text-align: center; margin-bottom: 50px;">
-    <button type="button" id="traceroute" class="btn btn-primary pa-btn" style="margin: auto;" onclick="traceroute()">
-        <?= lang("DevDetail_Tab_Tools_Traceroute_Start") ?>
-    </button>
-    <br>
-    <div id="tracerouteoutput" style="margin-top: 10px;"></div>
-</div>
+    <h4 class=""><i class="fa-solid fa-route"></i>
+        <?= lang("DevDetail_Tab_Tools_Traceroute_Title") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_Tab_Tools_Traceroute_Description") ?>
+    </h5>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <button type="button" id="traceroute" class="btn btn-primary pa-btn" style="margin: auto;" onclick="traceroute()">
+            <?= lang("DevDetail_Tab_Tools_Traceroute_Start") ?>
+        </button>
+        <br>
+        <div id="tracerouteoutput" style="margin-top: 10px;"></div>
+    </div>
 
 <?php } ?>
 
+<!-- NSLOOKUP -->
 <?php if ($_REQUEST["mac"] != "Internet") { ?>
-<h4 class=""><i class="fa-solid fa-magnifying-glass"></i>
-    <?= lang("DevDetail_Tab_Tools_Nslookup_Title") ?>
-</h4>
-<h5 class="">
-    <?= lang("DevDetail_Tab_Tools_Nslookup_Description") ?>
-</h5>
-<div style="width:100%; text-align: center; margin-bottom: 50px;">
-    <button type="button" id="nslookup" class="btn btn-primary pa-btn" style="margin: auto;" onclick="nslookup()">
-        <?= lang("DevDetail_Tab_Tools_Nslookup_Start") ?>
-    </button>
-    <br>
-    <div id="nslookupoutput" style="margin-top: 10px;"></div>
-</div>
+    <h4 class=""><i class="fa-solid fa-magnifying-glass"></i>
+        <?= lang("DevDetail_Tab_Tools_Nslookup_Title") ?>
+    </h4>
+    <h5 class="">
+        <?= lang("DevDetail_Tab_Tools_Nslookup_Description") ?>
+    </h5>
+    <div style="width:100%; text-align: center; margin-bottom: 50px;">
+        <button type="button" id="nslookup" class="btn btn-primary pa-btn" style="margin: auto;" onclick="nslookup()">
+            <?= lang("DevDetail_Tab_Tools_Nslookup_Start") ?>
+        </button>
+        <br>
+        <div id="nslookupoutput" style="margin-top: 10px;"></div>
+    </div>
 
 <?php } ?>                                             
 
+<!-- NMAP SCANS -->
 <h4 class=""><i class="fa-solid fa-ethernet"></i>
     <?= lang("DevDetail_Nmap_Scans") ?>    
 </h4>
@@ -77,16 +170,16 @@
         <?= lang("DevDetail_Nmap_Scans_desc") ?>
     </div>
 
-    <button type="button" id="piamanualnmap_fast" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'fast')">
+    <button type="button" id="piamanualnmap_fast" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDevDataByMac(getMac(), 'devLastIP'), 'fast')">
         <?= lang("DevDetail_Loading") ?>
     </button>
-    <button type="button" id="piamanualnmap_normal" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'normal')">
+    <button type="button" id="piamanualnmap_normal" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDevDataByMac(getMac(), 'devLastIP'), 'normal')">
         <?= lang("DevDetail_Loading") ?>
     </button>
-    <button type="button" id="piamanualnmap_detail" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'detail')">
+    <button type="button" id="piamanualnmap_detail" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDevDataByMac(getMac(), 'devLastIP'), 'detail')">
         <?= lang("DevDetail_Loading") ?>
     </button>
-    <button type="button" id="piamanualnmap_skipdiscovery" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDeviceDataByMac(getMac(), 'dev_LastIP'), 'skipdiscovery')">
+    <button type="button" id="piamanualnmap_skipdiscovery" class="btn btn-primary pa-btn" style="margin-bottom: 20px; margin-left: 10px; margin-right: 10px;" onclick="manualnmapscan(getDevDataByMac(getMac(), 'devLastIP'), 'skipdiscovery')">
         <?= lang("DevDetail_Loading") ?>
     </button>
 
@@ -155,7 +248,7 @@
             $( "#tracerouteoutput" ).empty();
                 $.ajax({
                     method: "GET",
-                    url: "./php/server/traceroute.php?action=get&ip=" + getDeviceDataByMac(getMac(), 'dev_LastIP') + "",
+                    url: "./php/server/traceroute.php?action=get&ip=" + getDevDataByMac(getMac(), 'devLastIP') + "",
                     beforeSend: function() { $('#tracerouteoutput').addClass("ajax_scripts_loading"); },
                     complete: function() { $('#tracerouteoutput').removeClass("ajax_scripts_loading"); },
                     success: function(data, textStatus) {
@@ -170,7 +263,7 @@
             $( "#nslookupoutput" ).empty();
                 $.ajax({
                     method: "GET",
-                    url: "./php/server/nslookup.php?action=get&ip=" + getDeviceDataByMac(getMac(), 'dev_LastIP') + "",
+                    url: "./php/server/nslookup.php?action=get&ip=" + getDevDataByMac(getMac(), 'devLastIP') + "",
                     beforeSend: function() { $('#nslookupoutput').addClass("ajax_scripts_loading"); },
                     complete: function() { $('#nslookupoutput').removeClass("ajax_scripts_loading"); },
                     success: function(data, textStatus) {
@@ -181,23 +274,160 @@
 
         // ----------------------------------------------------------------
         function initNmapButtons() {
-                        setTimeout(function(){
-                                    document.getElementById('piamanualnmap_fast').innerHTML=getString(
-                                        "DevDetail_Nmap_buttonFast"
-                                    ) ;
-                                    document.getElementById('piamanualnmap_normal').innerHTML=getString(
-                                        "DevDetail_Nmap_buttonDefault"
-                                    ) ;
-                                    document.getElementById('piamanualnmap_detail').innerHTML=getString(
-                                        "DevDetail_Nmap_buttonDetail"
-                                    ) ;
-                                    document.getElementById('piamanualnmap_skipdiscovery').innerHTML=getString(
-                                        "DevDetail_Nmap_buttonSkipDiscovery"
-                                    ) ;
-                                    }, 500);
-                }
+                setTimeout(function(){
+                            document.getElementById('piamanualnmap_fast').innerHTML=getString(
+                                "DevDetail_Nmap_buttonFast"
+                            ) ;
+                            document.getElementById('piamanualnmap_normal').innerHTML=getString(
+                                "DevDetail_Nmap_buttonDefault"
+                            ) ;
+                            document.getElementById('piamanualnmap_detail').innerHTML=getString(
+                                "DevDetail_Nmap_buttonDetail"
+                            ) ;
+                            document.getElementById('piamanualnmap_skipdiscovery').innerHTML=getString(
+                                "DevDetail_Nmap_buttonSkipDiscovery"
+                            ) ;
+                            }, 500);
+        }
 
 
+        // ----------------------------------------------------------------
+        function initCopyFromDevice() {
+
+            const devices = getVisibleDevicesList()
+            console.log(devices);
+
+            const $select = $('#txtCopyFromDevice');
+            $select.empty(); // Clear existing options
+
+            devices.forEach(device => {
+                const option = $('<option></option>')
+                    .val(device.devMac)
+                    .text(device.devName);
+                $select.append(option);
+            });
+            
+            
+        }
+
+        // ----------------------------------------------------------------
+        function wakeonlan() {
+
+            macAddress = getMac();
+
+            // Execute
+            $.get('php/server/devices.php?action=wakeonlan&'
+                + '&mac='         + macAddress
+                + '&ip='          + getDevDataByMac(macAddress, "devLastIP")
+                , function(msg) {
+                showMessage (msg);
+            });
+        }
+
+        // ------------------------------------------------------------
+        function copyFromDevice() {
+
+            macAddress = getMac();
+
+            // Execute
+            $.get('php/server/devices.php?action=copyFromDevice&'
+                + '&macTo='         + macAddress
+                + '&macFrom='          + $('#txtCopyFromDevice').val()
+                , function(msg) {
+                    showMessage (msg);
+
+                    setTimeout(function() {
+                        window.location.reload();
+                    }, 2000);
+            });
+
+        }
+
+        // ------------------------------------------------------------
+        function getVisibleDevicesList()
+        {
+            // Read cache (skip cookie expiry check)
+            devicesList = getCache('devicesListAll_JSON', true);
+            
+            if (devicesList != '') {
+                devicesList = JSON.parse (devicesList);
+            } else {
+                devicesList = [];
+            }
+
+            // only loop thru the filtered down list
+            visibleDevices = getCache("ntx_visible_macs")
+
+            if(visibleDevices != "") {
+            visibleDevicesMACs = visibleDevices.split(',');
+
+            devicesList_tmp = [];
+
+            // Iterate through the data and filter only visible devices
+            $.each(devicesList, function(index, item) {
+                // Check if the current item's MAC exists in visibleDevicesMACs
+                if (visibleDevicesMACs.includes(item.devMac)) {
+                devicesList_tmp.push(item);
+                }
+            });
+
+            // Update devicesList with the filtered items
+            devicesList = devicesList_tmp;
+            }
+
+            return devicesList;
+        }
+
+        // ----------------------------------------------------------------
+
+        // -----------------------------------------------------------------------------
+        function askDeleteDeviceEvents () {
+            // Check MAC
+            if (mac == '') {
+                return;
+            }
+
+            // Ask delete device Events 
+            showModalWarning ('<?= lang('DevDetail_button_DeleteEvents');?>', '<?= lang('DevDetail_button_DeleteEvents_Warning');?>',
+            '<?= lang('Gen_Cancel');?>', '<?= lang('Gen_Delete');?>', 'deleteDeviceEvents');
+        }
+
+        function deleteDeviceEvents () {
+            // Check MAC
+            if (mac == '') {
+                return;
+            }
+
+            // Delete device events
+            $.get('php/server/devices.php?action=deleteDeviceEvents&mac='+ mac, function(msg) {
+            showMessage (msg);
+            });
+        }
+
+        // -----------------------------------------------------------------------------
+        function askResetDeviceProps () {
+            // Check MAC
+            if (mac == '') {
+                return;
+            }
+
+            // Ask Resert Custom properties 
+            showModalWarning ('<?= lang('Gen_Reset');?>', '<?= lang('DevDetail_CustomProps_reset_info');?>',
+            '<?= lang('Gen_Cancel');?>', '<?= lang('Gen_Delete');?>', 'resetDeviceProps');
+        }
+
+        function resetDeviceProps () {
+            // Check MAC
+            if (mac == '') {
+                return;
+            }
+
+            // Execute
+            $.get('php/server/devices.php?action=resetDeviceProps&mac='+ mac, function(msg) {
+            showMessage (msg);
+            });
+        }
+
         // ----------------------------------------------------------------
         function internetinfo() {
                 $( "#internetinfooutput" ).empty();
@@ -210,8 +440,9 @@
                         $("#internetinfooutput").html(data);    
                     }
                 })
-                }
+        }
 
         // init first time
         initNmapButtons();
+        initCopyFromDevice();
 </script>

front/events.php

@@ -16,6 +16,8 @@
   require 'php/templates/header.php';  
 ?>
 
+<!-- ----------------------------------------------------------------------- -->
+ 
 <!-- Page ------------------------------------------------------------------ -->
   <div class="content-wrapper">
 
@@ -173,53 +175,33 @@
   require 'php/templates/footer.php';
 ?>
 
-
-<!-- ----------------------------------------------------------------------- -->
-<!-- Datatable -->
-  <link rel="stylesheet" href="lib/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
-  <script src="lib/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
-  <script src="lib/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
-
-
 <!-- page script ----------------------------------------------------------- -->
 <script>
-  var parPeriod       = 'Front_Events_Period';
-  var parTableRows    = 'Front_Events_Rows';
+  var parPeriod       = 'nax_parPeriod';
+  var parTableRows    = 'nax_parTableRows';
 
   var eventsType      = 'all';
-  var period          = '';
-  var tableRows       = 10;
+  var period          = '1 day';
+  var tableRows       = 25;
   
   // Read parameters & Initialize components
   main();
 
 
 // -----------------------------------------------------------------------------
-function main () {
-  // get parameter value
-  $.get('php/server/parameters.php?action=get&defaultValue=1 day&parameter='+ parPeriod, function(data) {
-    var result = JSON.parse(data);
-    if (result) {
-      period = result;
-      $('#period').val(period);
-    }
+function main() {
+  // Get parameter value from cookies instead of server
+  period = getCookie(parPeriod) === "" ? "1 day" : getCookie(parPeriod);
+  $('#period').val(period);
 
-    // get parameter value
-    $.get('php/server/parameters.php?action=get&defaultValue=50&parameter='+ parTableRows, function(data) {
-      var result = JSON.parse(data);
-      result = parseInt(result, 10)
-      if (Number.isInteger (result) ) {
-          tableRows = result;
-      }
+  tableRows = getCookie(parTableRows) === "" ? 50 : parseInt(getCookie(parTableRows), 10);
 
-      // Initialize components
-      initializeDatatable();
+  // Initialize components
+  initializeDatatable();
 
-      // query data
-      getEventsTotals();
-      getEvents (eventsType);
-    });
-  });
+  // Query data
+  getEventsTotals();
+  getEvents(eventsType);
 }
 
 
@@ -281,7 +263,7 @@ function initializeDatatable () {
 
   // Save Parameter rows when changed
   $('#tableEvents').on( 'length.dt', function ( e, settings, len ) {
-    setParameter (parTableRows, len);
+    setCookie(parTableRows, len)
   } );
 };
 
@@ -290,7 +272,8 @@ function initializeDatatable () {
 function periodChanged () {
   // Save Parameter Period
   period = $('#period').val();
-  setParameter (parPeriod, period);
+
+  setCookie(parTableRows, period)
 
   // Requery totals and events
   getEventsTotals();

front/img/svg/netalertx_red_1_backup_cleaned.svg

@@ -0,0 +1,374 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="200"
+   height="200"
+   viewBox="0 0 52.916667 52.916668"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="netalertx_red_1_backup_clened.svg"
+   inkscape:export-filename="C:\Users\jokob\netalertx_red_1.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="132.22897"
+     inkscape:cy="118.44039"
+     inkscape:window-width="3440"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer6"
+     units="px"
+     width="50px" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51283"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51283"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51278"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51278"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect51273"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect51273"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <inkscape:path-effect
+       effect="powermask"
+       id="path-effect48754"
+       is_visible="true"
+       lpeversion="1"
+       uri="#mask-powermask-path-effect48754"
+       invert="false"
+       hide_mask="false"
+       background="true"
+       background_color="#ffffffff" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath48972">
+      <path
+         style="fill:#000000;stroke-width:0.280643"
+         id="path48974"
+         width="56.128242"
+         height="56.128246"
+         x="-18.924671"
+         y="-56.198174"
+         transform="rotate(45.438374)"
+         mask="none"
+         sodipodi:type="rect" />
+    </clipPath>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask49405">
+      <text
+         xml:space="preserve"
+         style="font-size:60.8695px;line-height:1.25;font-family:Amiri;-inkscape-font-specification:Amiri;display:inline;stroke-width:1.52174"
+         x="66.930733"
+         y="78.642288"
+         id="text49409"
+         transform="scale(1.4861626,0.67287388)"><tspan
+           sodipodi:role="line"
+           id="tspan49407"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Tw Cen MT';-inkscape-font-specification:'Tw Cen MT';fill:#ffffff;stroke-width:1.52174"
+           x="66.930733"
+           y="78.642288">A</tspan></text>
+    </mask>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath50306">
+      <circle
+         style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+         id="circle50308"
+         cy="26.458334"
+         cx="26.458334"
+         r="26.458334"
+         clip-path="url(#clipPath48972)"
+         transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath48972-7">
+      <path
+         style="fill:#000000;stroke-width:0.280643"
+         id="path48974-5"
+         width="56.128242"
+         height="56.128246"
+         x="-18.924671"
+         y="-56.198174"
+         transform="rotate(45.438374)"
+         mask="none"
+         sodipodi:type="rect" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath50306-6">
+      <circle
+         style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+         id="circle50308-5"
+         cy="26.458334"
+         cx="26.458334"
+         r="26.458334"
+         clip-path="url(#clipPath48972)"
+         transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    </clipPath>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51273">
+      <path
+         id="mask-powermask-path-effect51273_box"
+         style="fill:#ffffff;fill-opacity:1"
+         d="m 71.788348,33.677177 h 2.00083 v 2.173766 h -2.00083 z" />
+      <path
+         style="fill:#000000"
+         id="path51263"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc"
+         d="m 70.158247,37.490814 a 3.9464016,1.4616301 0 0 1 -0.0019,0.04543" />
+    </mask>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51278">
+      <path
+         style="fill:#000000"
+         id="path51267"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc" />
+    </mask>
+    <mask
+       maskUnits="userSpaceOnUse"
+       id="mask-powermask-path-effect51283">
+      <path
+         style="fill:#000000"
+         id="path51271"
+         sodipodi:type="arc"
+         sodipodi:cx="66.211845"
+         sodipodi:cy="37.490814"
+         sodipodi:rx="3.9464016"
+         sodipodi:ry="1.4616301"
+         sodipodi:start="0"
+         sodipodi:end="0.031086059"
+         sodipodi:open="true"
+         sodipodi:arc-type="arc" />
+    </mask>
+    <filter
+       id="mask-powermask-path-effect51273_inverse"
+       inkscape:label="filtermask-powermask-path-effect51273"
+       style="color-interpolation-filters:sRGB"
+       height="100"
+       width="100"
+       x="-50"
+       y="-50">
+      <feColorMatrix
+         id="mask-powermask-path-effect51273_primitive1"
+         values="1"
+         type="saturate"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         id="mask-powermask-path-effect51273_primitive2"
+         values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "
+         in="fbSourceGraphic" />
+    </filter>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Red 1"
+     style="display:none">
+    <circle
+       style="fill:#ff2a2a;stroke-width:0.176318"
+       id="path31-8"
+       cy="26.458334"
+       cx="26.458334"
+       r="26.458334" />
+  </g>
+  <g
+     inkscape:label="Black"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <ellipse
+       style="fill:#000000;stroke-width:0.176146"
+       id="path31"
+       cy="26.51001"
+       cx="26.458334"
+       rx="26.458334"
+       ry="26.406658" />
+    <circle
+       style="display:inline;fill:#ffffff;stroke-width:0.176318"
+       id="path31-89"
+       mask="url(#mask49405)"
+       transform="translate(-99.990036,0.02979629)"
+       r="26.458334"
+       cy="26.458334"
+       cx="126.45834" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="A - Layer 2"
+     style="display:none">
+    <rect
+       style="fill:#ffffff;stroke-width:0.328992"
+       id="rect48998"
+       width="26.0966"
+       height="6.0620313"
+       x="13.255443"
+       y="41.262722" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="g48055"
+     inkscape:label="Red top"
+     style="display:none;mix-blend-mode:normal">
+    <circle
+       style="mix-blend-mode:normal;fill:#d40000;stroke-width:0.176318"
+       id="circle48752"
+       cy="26.458334"
+       cx="26.458334"
+       r="26.458334"
+       clip-path="url(#clipPath48972)"
+       transform="matrix(1.0038771,0,0.00391255,1.0073928,-0.04603368,-0.1228191)" />
+    <ellipse
+       style="display:inline;mix-blend-mode:normal;fill:#000000;stroke-width:0.43638"
+       id="path50080"
+       clip-path="url(#clipPath50306)"
+       ry="13.739323"
+       rx="16.735666"
+       cy="22.874514"
+       cx="26.36149"
+       transform="translate(0,0.09980904)" />
+    <path
+       style="fill:#000000"
+       id="path51325"
+       sodipodi:type="arc"
+       sodipodi:cx="16.772207"
+       sodipodi:cy="26.090099"
+       sodipodi:rx="4.1291056"
+       sodipodi:ry="7.6004772"
+       sodipodi:start="0"
+       sodipodi:end="0.031086059"
+       sodipodi:arc-type="slice"
+       d="m 20.901313,26.090099 a 4.1291056,7.6004772 0 0 1 -0.002,0.236231 l -4.127111,-0.236231 z" />
+    <path
+       style="fill:#d40000"
+       id="path51717"
+       sodipodi:type="arc"
+       sodipodi:cx="26.441042"
+       sodipodi:cy="-26.531424"
+       sodipodi:rx="10.418671"
+       sodipodi:ry="9.5820541"
+       sodipodi:start="0.82219863"
+       sodipodi:end="2.3054129"
+       sodipodi:arc-type="slice"
+       d="m 33.532115,-19.511189 a 10.418671,9.5820541 0 0 1 -14.074736,0.09049 l 6.983663,-7.110726 z"
+       transform="matrix(1,0,0.0048047,-0.99998846,0,0)" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="M 145.28835,50.354872 C 127.01317,34.62734 98.057144,30.012421 73.710372,38.947003 c -6.518003,2.391924 -14.288822,6.834002 -19.265958,11.01311 -1.198654,1.006465 -2.270358,1.829935 -2.381565,1.829935 -0.111206,0 -5.210052,-5.102002 -11.33077,-11.337781 L 29.603503,29.114489 30.822139,27.851613 c 0.670251,-0.69458 2.51592,-2.384634 4.101489,-3.755674 C 50.725112,10.43241 69.462577,2.3767456 90.736164,0.10085492 95.380582,-0.39601422 106.33043,-0.31105699 111.03786,0.25837091 133.04363,2.9202648 151.46536,11.26468 167.83762,25.986722 l 3.30701,2.97369 -2.29392,2.320103 c -1.26165,1.276057 -6.58213,6.517685 -11.82329,11.648065 l -9.52936,9.327957 z"
+       id="path52311"
+       transform="scale(0.26458333)" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="M 86.538548,86.634546 74.145111,73.25799 74.899337,72.758689 c 4.93766,-3.268754 10.138703,-6.508578 16.602198,-7.437693 5.484021,-0.788317 12.228205,-0.984814 16.377135,-0.09119 6.77689,1.459652 11.87156,4.340971 17.02452,7.792011 l 0.97468,0.652765 -1.37124,1.269268 c -0.86863,0.804036 -6.82647,6.676301 -13.34742,13.259175 L 99.423152,99.796276 Z"
+       id="path52350"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52350.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="ccsssscsscc" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="Circle"
+     style="display:inline">
+    <path
+       style="fill:#000000"
+       id="path50026"
+       sodipodi:type="arc"
+       sodipodi:cx="71.071762"
+       sodipodi:cy="34.677177"
+       sodipodi:rx="1.7174155"
+       sodipodi:ry="5.5907354"
+       sodipodi:start="0"
+       sodipodi:end="0.031086059"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       mask="url(#mask-powermask-path-effect51273)"
+       d="m 72.789178,34.677177 a 1.7174155,5.5907354 0 0 1 -8.3e-4,0.173766"
+       inkscape:path-effect="#path-effect51273" />
+    <path
+       style="fill:#ffffff;stroke-width:0.276214"
+       d="m 151.08883,181.46994 -2.76213,-2.60427 -48.802077,-0.009 -48.802075,-0.009 -2.292573,2.48592 c -1.260915,1.36726 -2.431589,2.48592 -2.601499,2.48592 -0.869396,0 -9.118995,-6.36599 -13.713669,-10.58246 l -2.688104,-2.46684 34.973647,-35.11455 c 19.235503,-19.313 34.922993,-35.39075 35.029879,-35.39075 0.106889,0 16.231201,16.10588 35.663001,35.45326 l 35.33055,35.17705 -2.48592,2.35505 c -3.08951,2.92687 -7.41515,6.40509 -11.09719,8.92319 -1.54594,1.05725 -2.85105,1.91728 -2.90024,1.9112 -0.0492,-0.006 -1.33242,-1.183 -2.8516,-2.61535 z m -38.4631,-38.32188 -13.050732,-13.05073 -13.050727,13.05073 -13.050725,13.05072 h 26.101452 26.101452 z"
+       id="path52389"
+       transform="scale(0.26458333)"
+       inkscape:export-filename="C:\Users\jokob\path52389.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="ccccssscssscsscccccccccc" />
+    <path
+       style="fill:#d40000;stroke-width:0.276214"
+       d="M 86.416478,86.793237 C 73.427951,73.815968 73.387119,73.801376 73.387119,73.801376 c 3.874197,-3.341721 11.025508,-6.981646 17.312424,-8.529335 2.339787,-0.576001 4.881362,-1.25628 8.810591,-1.259564 4.438736,-0.0037 8.292516,0.857843 13.253396,2.535104 4.59135,1.552325 7.8315,3.224336 11.49958,5.934101 l 1.61476,1.192897 -2.31005,2.336325 c -1.27053,1.284978 -7.22284,7.16236 -13.22736,13.060849 L 99.423152,99.796276 C 95.128284,95.409033 87.282899,87.658907 86.416478,86.793237 Z"
+       id="path52465"
+       transform="scale(0.26458333)"
+       sodipodi:nodetypes="sssssscsscs" />
+    <path
+       style="fill:#d40000;stroke-width:0.074168"
+       d="M 38.412677,13.39572 C 34.322163,9.945267 28.437517,8.4874766 22.684204,9.4993379 19.419721,10.073478 16.752307,11.410793 13.835187,13.872492 l -0.14691,0.126732 -0.587936,-0.661605 c -0.268568,-0.30222 -1.619514,-1.65761 -2.963235,-3.048642 L 7.7265561,7.8632145 7.9975963,7.5868118 C 9.8344314,5.713635 13.005888,3.476019 15.380049,2.3878744 20.659765,-0.03196726 26.24205,-0.73479764 31.856076,0.42838695 36.599757,1.4112419 40.746004,3.5106537 44.46876,7.1557672 l 0.709881,0.6950753 -0.663694,0.69037 C 44.080041,8.9935983 42.672626,10.391271 41.3963,11.655819 L 39.075708,13.955 Z"
+       id="path52504"
+       inkscape:export-filename="C:\Users\jokob\path52504.png"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       sodipodi:nodetypes="ssscsccsssscsscs" />
+  </g>
+</svg>

front/index.php

@@ -3,11 +3,13 @@
 
 <?php
 require dirname(__FILE__).'/php/server/init.php';
-require 'php/templates/security.php';
+//------------------------------------------------------------------------------
+// check if authenticated
+require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
 
 $CookieSaveLoginName = 'NetAlertX_SaveLogin';
 
-if ($Pia_WebProtection != 'true')
+if ($nax_WebProtection != 'true')
 {
     header('Location: devices.php');
     $_SESSION["login"] = 1;
@@ -24,7 +26,7 @@ if (isset ($_GET["action"]) && $_GET["action"] == 'logout')
 }
 
 // Password without Cookie check -> pass and set initial cookie
-if (isset ($_POST["loginpassword"]) && $Pia_Password == hash('sha256',$_POST["loginpassword"]))
+if (isset ($_POST["loginpassword"]) && $nax_Password == hash('sha256',$_POST["loginpassword"]))
 {
     header('Location: devices.php');
     $_SESSION["login"] = 1;
@@ -32,7 +34,7 @@ if (isset ($_POST["loginpassword"]) && $Pia_Password == hash('sha256',$_POST["lo
 }
 
 // active Session or valid cookie (cookie not extends)
-if (( isset ($_SESSION["login"]) && ($_SESSION["login"] == 1)) || (isset ($_COOKIE[$CookieSaveLoginName]) && $Pia_Password == $_COOKIE[$CookieSaveLoginName]))
+if (( isset ($_SESSION["login"]) && ($_SESSION["login"] == 1)) || (isset ($_COOKIE[$CookieSaveLoginName]) && $nax_Password == $_COOKIE[$CookieSaveLoginName]))
 {
     header('Location: devices.php');
     $_SESSION["login"] = 1;
@@ -40,7 +42,7 @@ if (( isset ($_SESSION["login"]) && ($_SESSION["login"] == 1)) || (isset ($_COOK
 }
 
 $login_headline = lang('Login_Toggle_Info_headline');
-$login_info = "";
+$login_info = lang('Login_Info');
 $login_mode = 'danger';
 $login_display_mode = 'display: block;';
 $login_icon = 'fa-info';
@@ -48,7 +50,7 @@ $login_icon = 'fa-info';
 // no active session, cookie not checked
 if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
 {
-  if ($Pia_Password == '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92') 
+  if ($nax_Password == '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92') 
   {
     $login_info = lang('Login_Default_PWD');
     $login_mode = 'danger';
@@ -78,33 +80,42 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Net Alert X | Log in</title>
+  <title>NetAlert X | Log in</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   <!-- Bootstrap 3.3.7 -->
-  <link rel="stylesheet" href="lib/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
-  <!-- Font Awesome -->
-  <link rel="stylesheet" href="lib/AdminLTE/bower_components/font-awesome/css/fontawesome.min.css">
+  <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
   <!-- Ionicons -->
-  <link rel="stylesheet" href="lib/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
+  <link rel="stylesheet" href="lib/Ionicons/ionicons.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="lib/AdminLTE/dist/css/AdminLTE.min.css">
   <!-- iCheck -->
-  <link rel="stylesheet" href="lib/AdminLTE/plugins/iCheck/square/blue.css">
+  <link rel="stylesheet" href="lib/iCheck/square/blue.css">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="lib/font-awesome/fontawesome.min.css">
+  <link rel="stylesheet" href="lib/font-awesome/solid.css">
+  <link rel="stylesheet" href="lib/font-awesome/brands.css">
+  <link rel="stylesheet" href="lib/font-awesome/v5-font-face.css">
+  <!-- Favicon -->
+  <link id="favicon" rel="icon" type="image/x-icon" href="img/NetAlertX_logo.png">
 
   <!-- Dark-Mode Patch -->
 <?php
-if ($ENABLED_DARKMODE === True) {
-   echo '<link rel="stylesheet" href="css/dark-patch.css">';
-   $BACKGROUND_IMAGE_PATCH='style="background-image: url(\'img/boxed-bg-dark.png\');"';
-} else { $BACKGROUND_IMAGE_PATCH='style="background-image: url(\'img/background.png\');"';}
+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">
 <div class="login-box login-custom">
   <div class="login-logo">
-    <a href="/index2.php">Net <b>Alert</b><sup>x</sup></a>
+    <a href="/index2.php">Net<b>Alert</b><sup>x</sup></a>
   </div>
   <!-- /.login-logo -->
   <div class="login-box-body">
@@ -140,11 +151,9 @@ if ($ENABLED_DARKMODE === True) {
   </div>
   <!-- /.login-box-body -->
 
-
-
   <div id="myDIV" class="box-body" style="margin-top: 50px; <?php echo $login_display_mode;?>">
       <div class="alert alert-<?php echo $login_mode;?> alert-dismissible">
-          <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><EFBFBD></button>
+          <button type="button" class="close" onclick="Passwordhinfo()" aria-hidden="true">X</button>
           <h4><i class="icon fa <?php echo $login_icon;?>"></i><?php echo $login_headline;?></h4>
           <p><?php echo $login_info;?></p>
       </div>
@@ -156,11 +165,10 @@ if ($ENABLED_DARKMODE === True) {
 
 
 <!-- jQuery 3 -->
-<script src="lib/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
-<!-- Bootstrap 3.3.7 -->
-<script src="lib/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<script src="lib/jquery/jquery.min.js"></script>
+
 <!-- iCheck -->
-<script src="lib/AdminLTE/plugins/iCheck/icheck.min.js"></script>
+<script src="lib/iCheck/icheck.min.js"></script>
 <script>
   $(function () {
     $('input').iCheck({

front/js/common.js

@@ -10,9 +10,10 @@
 // -----------------------------------------------------------------------------
 var timerRefreshData = ''
 
-var emptyArr            = ['undefined', "", undefined, null, 'null'];
-var UI_LANG = "English";
-var settingsJSON = {}
+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
+var   settingsJSON  = {}
 
 
 // -----------------------------------------------------------------------------
@@ -114,28 +115,28 @@ function cacheSettings()
   return new Promise((resolve, reject) => {
     if(!getCache('completedCalls').includes('cacheSettings'))
     {  
-      $.get('api/table_settings.json?nocache=' + Date.now(), function(resSet) { 
-
-        $.get('api/plugins.json?nocache=' + Date.now(), function(resPlug) {        
+      $.get('/php/server/query_json.php', { file: 'table_settings.json', nocache: Date.now() }, function(resSet) { 
 
+        $.get('/php/server/query_json.php', { file: 'plugins.json', nocache: Date.now() }, function(resPlug) {
+       
           pluginsData = resPlug["data"]; 
           settingsData = resSet["data"];  
 
           settingsData.forEach((set) => {  
 
-            resolvedOptions = createArray(set.Options)
+            resolvedOptions = createArray(set.setOptions)
             resolvedOptionsOld = resolvedOptions
             setPlugObj     = {};
             options_params = [];
             resolved = ""
           
             // proceed only if first option item contains something to resolve
-            if( !set.Code_Name.includes("__metadata") && 
+            if( !set.setKey.includes("__metadata") && 
                 resolvedOptions.length != 0 && 
                 resolvedOptions[0].includes("{value}"))
             {
               // get setting definition from the plugin config if available
-              setPlugObj = getPluginSettingObject(pluginsData, set.Code_Name)
+              setPlugObj = getPluginSettingObject(pluginsData, set.setKey)
 
               // check if options contains parameters and resolve 
               if(setPlugObj != {} && setPlugObj["options_params"])
@@ -160,8 +161,8 @@ function cacheSettings()
               }    
             }
 
-            setCache(`pia_set_${set.Code_Name}`, set.Value)             
-            setCache(`pia_set_opt_${set.Code_Name}`, resolvedOptions) 
+            setCache(`nax_set_${set.setKey}`, set.setValue)             
+            setCache(`nax_set_opt_${set.setKey}`, resolvedOptions) 
           });
         }).then(() => handleSuccess('cacheSettings', resolve())).catch(() => handleFailure('cacheSettings', reject("cacheSettings already completed")));    // handle AJAX synchronization
       })
@@ -170,13 +171,13 @@ function cacheSettings()
 }
 
 // -----------------------------------------------------------------------------
-// Get a setting value by key
+// Get a setting options value by key
 function getSettingOptions (key) {
 
   // handle initial load to make sure everything is set-up and cached
   // handleFirstLoad()
  
-  result = getCache(`pia_set_opt_${key}`, true);
+  result = getCache(`nax_set_opt_${key}`, true);
 
   if (result == "")
   {
@@ -194,7 +195,7 @@ function getSetting (key) {
   // handle initial load to make sure everything is set-up and cached
   // handleFirstLoad()
  
-  result = getCache(`pia_set_${key}`, true);
+  result = getCache(`nax_set_${key}`, true);
 
   if (result == "")
   {
@@ -207,101 +208,176 @@ function getSetting (key) {
 // -----------------------------------------------------------------------------
 // Get language string
 // -----------------------------------------------------------------------------
-function cacheStrings()
-{  
+function cacheStrings() {
   return new Promise((resolve, reject) => {
-    if(!getCache('completedCalls').includes('cacheStrings'))
-    {
-      // handle core strings and translations
-      var allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "zh_cn"]; // needs to be same as in lang.php
-
-      allLanguages.forEach(function (language_code) {
-        $.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`, function (res) {
-          // Iterate over each language
-          Object.entries(res).forEach(([key, value]) => {
-            // Store translations for each key-value pair
-            setCache(`pia_lang_${key}_${language_code}`, value)
-          });
-
-          // handle strings and translations from plugins
-          $.get(`api/table_plugins_language_strings.json?nocache=${Date.now()}`, function(res) {    
-                
-            data = res["data"];       
-
-            data.forEach((langString) => {      
-              setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value) 
-            });        
-          }).then(() => handleSuccess('cacheStrings', resolve())).catch(() => handleFailure('cacheStrings', reject("cacheStrings already completed"))); // handle AJAX synchronization
+    
+      // Create a promise for each language
+      languagesToLoad = ['en_us', getLangCode()]
+      const languagePromises = languagesToLoad.map((language_code) => {
+        return new Promise((resolveLang, rejectLang) => {
+          // Fetch core strings and translations
           
+          $.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`)
+            .done((res) => {
+              // Iterate over each key-value pair and store the translations
+              Object.entries(res).forEach(([key, value]) => {
+                setCache(`pia_lang_${key}_${language_code}`, value);
+              });
+
+              // Fetch strings and translations from plugins
+              $.get('/php/server/query_json.php', { file: 'table_plugins_language_strings.json', nocache: Date.now() })
+                .done((pluginRes) => {
+                  const data = pluginRes["data"];
+                  
+                  // Store plugin translations
+                  data.forEach((langString) => {
+                    setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value);
+                  });
+
+                  // Handle successful completion of language processing
+                  handleSuccess(`cacheStrings[${language_code}]`, resolveLang);
+                })
+                .fail((pluginError) => {
+                  // Handle failure in plugin strings fetching
+                  rejectLang(pluginError);
+                });
+            })
+            .fail((error) => {
+              // Handle failure in core strings fetching
+              rejectLang(error);
+            });
         });
       });
-    }
+
+      // Wait for all language promises to complete
+      Promise.all(languagePromises)
+        .then(() => {
+          // All languages processed successfully
+          resolve();
+        })
+        .catch((error) => {
+          // Handle failure in any of the language processing
+          handleFailure('cacheStrings', reject);
+        });
+    
   });
 }
 
+// -----------------------------------------------------------------------------
 // Get translated language string
-function getString (key) {
+function getString(key) {
 
-  // handle initial load to make sure everything is set-up and cached
-  handleFirstLoad(getString)
- 
-  UI_LANG = getSetting("UI_LANG");
+  function fetchString(key) {
+    
+    lang_code = getLangCode();
 
-  lang_code = 'en_us';
+    let result = getCache(`pia_lang_${key}_${lang_code}`, true);
 
-  switch(UI_LANG)
-  {
-    case 'English': 
-      lang_code = 'en_us';
-      break;
-    case 'Spanish': 
-      lang_code = 'es_es';
-      break;
-    case 'German': 
-      lang_code = 'de_de';
-      break;
-    case 'French': 
-      lang_code = 'fr_fr';
-      break;
-    case 'Norwegian': 
-      lang_code = 'nb_no';
-      break;
-    case 'Polish (pl_pl)': 
-      lang_code = 'pl_pl';
-      break;
-    case 'Portuguese (pt_br)': 
-      lang_code = 'pt_br';
-      break;
-    case 'Turkish (tr_tr)': 
-      lang_code = 'tr_tr';
-      break;
-    case 'Italian (it_it)': 
-      lang_code = 'it_it';
-      break;
-    case 'Russian': 
-      lang_code = 'ru_ru';
-      break;
-    case 'Chinese (zh_cn)': 
-      lang_code = 'zh_cn';
-      break;
-  }
-  result = getCache(`pia_lang_${key}_${lang_code}`, true);
+    if (isEmpty(result)) {
+      result = getCache(`pia_lang_${key}_en_us`, true);
+    }
 
-
-  if(isEmpty(result))
-  {    
-    result = getCache(`pia_lang_${key}_en_us`, true);
+    return result;
   }
 
-  return result;
+  if (isAppInitialized()) {
+    return fetchString(key);
+  } else {
+    callAfterAppInitialized(() => fetchString(key));
+  }
 }
 
+// -----------------------------------------------------------------------------
+// Get current language ISO code
+// below has to match exactly teh values in /front/php/templates/language/lang.php & /front/js/common.js
+function getLangCode() {
+
+    UI_LANG = getSetting("UI_LANG");
+
+    let lang_code = 'en_us';
+
+    switch (UI_LANG) {
+      case 'English':
+        lang_code = 'en_us';
+        break;
+      case 'Spanish':
+        lang_code = 'es_es';
+        break;
+      case 'German':
+        lang_code = 'de_de';
+        break;
+      case 'French':
+        lang_code = 'fr_fr';
+        break;
+      case 'Norwegian':
+        lang_code = 'nb_no';
+        break;
+      case 'Polish (pl_pl)':
+        lang_code = 'pl_pl';
+        break;
+      case 'Portuguese (pt_br)':
+        lang_code = 'pt_br';
+        break;
+      case 'Turkish (tr_tr)':
+        lang_code = 'tr_tr';
+        break;
+      case 'Italian (it_it)':
+        lang_code = 'it_it';
+        break;
+      case 'Russian':
+        lang_code = 'ru_ru';
+        break;
+      case 'Chinese (zh_cn)':
+        lang_code = 'zh_cn';
+        break;
+      case 'Czech (cs_cz)':
+        lang_code = 'cs_cz';
+        break;
+      case 'Arabic (ar_ar)':
+        lang_code = 'ar_ar';
+        break;
+      case 'Catalan (ca_ca)':
+        lang_code = 'ca_ca';
+        break;
+      case 'Ukrainian (uk_uk)':
+        lang_code = 'uk_ua';
+        break;
+    }
+
+    return lang_code;
+}
 
 
 
 // -----------------------------------------------------------------------------
 // String utilities
 // -----------------------------------------------------------------------------
+
+// ----------------------------------------------------
+/**
+ * Replaces double quotes within single-quoted strings, then converts all single quotes to double quotes,
+ * while preserving the intended structure.
+ *
+ * @param {string} inputString - The input string to process.
+ * @returns {string} - The processed string with transformations applied.
+ */
+function processQuotes(inputString) {
+  // Step 1: Replace double quotes within single-quoted strings
+  let tempString = inputString.replace(/'([^']*?)'/g, (match, p1) => {
+    const escapedContent = p1.replace(/"/g, '_escaped_double_quote_'); // Temporarily replace double quotes
+    return `'${escapedContent}'`;
+  });
+
+  // Step 2: Replace all single quotes with double quotes
+  tempString = tempString.replace(/'/g, '"');
+
+  // Step 3: Restore escaped double quotes
+  const processedString = tempString.replace(/_escaped_double_quote_/g, "'");
+
+  return processedString;
+}
+
+// ----------------------------------------------------
 function jsonSyntaxHighlight(json) {
   if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
@@ -324,6 +400,7 @@ function jsonSyntaxHighlight(json) {
   });
 }
 
+// ----------------------------------------------------
 function isValidBase64(str) {
   // Base64 characters set
   var base64CharacterSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
@@ -333,11 +410,61 @@ function isValidBase64(str) {
   return invalidCharacters === '';
 }
 
+// -------------------------------------------------------------------
+// Utility function to check if the value is already Base64
+function isBase64(value) {
+  const base64Regex =
+    /^(?:[A-Za-z0-9+\/]{4})*?(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
+  return base64Regex.test(value);
+}
+
+// ----------------------------------------------------
+function isValidJSON(jsonString) {
+  try {
+      JSON.parse(jsonString);
+      return true;
+  } catch (e) {
+      return false;
+  }
+}
+
+// ----------------------------------------------------
+// method to sanitize input so that HTML and other things don't break
+function encodeSpecialChars(str) {
+  return str
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+}
+// ----------------------------------------------------
+function decodeSpecialChars(str) {
+  return str
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"')
+      .replace(/&#039;/g, '\'');
+}
+
+// ----------------------------------------------------
+// base64 conversion of UTF8 chars
+function utf8ToBase64(str) {
+  // Convert the string to a Uint8Array using TextEncoder
+  const utf8Bytes = new TextEncoder().encode(str);
+  
+  // Convert the Uint8Array to a base64-encoded string
+  return btoa(String.fromCharCode(...utf8Bytes));
+}
+
 
 // -----------------------------------------------------------------------------
 // General utilities
 // -----------------------------------------------------------------------------
 
+
+
 // check if JSON object
 function isJsonObject(value) {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -361,6 +488,7 @@ function handle_locked_DB(data)
     showSpinner()
 
     setTimeout(function() {
+      console.warn("Database locked - reload")
       location.reload(); 
     }, 5000);
   }
@@ -373,29 +501,6 @@ function numberArrayFromString(data)
   return data.replace(/\[|\]/g, '').split(',').map(Number);
 }
 
-// -----------------------------------------------------------------------------
-function setParameter (parameter, value) {
-  // Retry
-  $.get('php/server/parameters.php?action=set&parameter=' + parameter +
-    '&value='+ value,
-  function(data) {
-    if (data != "OK") {
-      // Retry
-      sleep (200);
-      $.get('php/server/parameters.php?action=set&parameter=' + parameter +
-        '&value='+ value,
-        function(data) {
-          if (data != "OK") {
-          // alert (data);
-          } else {
-          // alert ("OK. Second attempt");
-          };
-      } );
-    };
-  } );
-}
-
-
 // -----------------------------------------------------------------------------  
 function saveData(functionName, id, value) {
   $.ajax({
@@ -580,17 +685,11 @@ function debugTimer () {
 
 // -----------------------------------------------------------------------------
 function secondsSincePageLoad() {
-  // Get the current time
-  var currentTime = Date.now();
-
-  // Get the time when the page was loaded
-  var pageLoadTime = performance.timeOrigin;
-
-  // Calculate the difference in milliseconds
-  var timeDifference = currentTime - pageLoadTime;
+  // Get the current time since the page was loaded
+  var timeSincePageLoad = performance.now();
 
   // Convert milliseconds to seconds
-  var secondsAgo = Math.floor(timeDifference / 1000);
+  var secondsAgo = Math.floor(timeSincePageLoad / 1000);
 
   return secondsAgo;
 }
@@ -627,11 +726,20 @@ function openUrl(urls) {
   }
 }
 
+// -----------------------------------------------------------------------------
+// force load URL in current window with specific anchor
+function forceLoadUrl(relativeUrl) {
+
+  window.location.replace(relativeUrl);
+  window.location.reload()  
+  
+}
+
 
 // -----------------------------------------------------------------------------
 function navigateToDeviceWithIp (ip) {
 
-  $.get('api/table_devices.json', function(res) {    
+  $.get('/php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(res) {    
         
     devices = res["data"];
 
@@ -639,9 +747,9 @@ function navigateToDeviceWithIp (ip) {
     
     $.each(devices, function(index, obj) {
       
-      if(obj.dev_LastIP.trim() == ip.trim())
+      if(obj.devLastIP.trim() == ip.trim())
       {
-        mac = obj.dev_MAC;
+        mac = obj.devMac;
 
         window.open(window.location.origin +'/deviceDetails.php?mac=' + mac , "_blank");
       }
@@ -652,7 +760,7 @@ function navigateToDeviceWithIp (ip) {
 
 // -----------------------------------------------------------------------------
 function getNameByMacAddress(macAddress) {
-  return getDeviceDataByMac(macAddress, "dev_Name")
+  return getDevDataByMac(macAddress, "devName")
 }
 
 // -----------------------------------------------------------------------------
@@ -689,6 +797,12 @@ function isValidIPv6(ipAddress) {
   return ipv6Regex.test(ipAddress);
 }
 
+function isValidIPv4(ip) {
+  const ipv4Regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+  return ipv4Regex.test(ip);
+}
+
+
 function formatIPlong(ipAddress) {
   if (ipAddress.includes(':') && isValidIPv6(ipAddress)) {
     const parts = ipAddress.split(':');
@@ -753,7 +867,11 @@ function isRandomMAC(mac)
     // Empty array
     if (input === '[]' || input === '') {
       return [];
-    } 
+    }
+    // handle integer 
+    if (typeof input === 'number') {
+      input = input.toString();
+    }
   
     // Regex pattern for brackets
     const patternBrackets = /(^\s*\[)|(\]\s*$)/g;
@@ -805,7 +923,7 @@ function isRandomMAC(mac)
 // -----------------------------------------------------------------------------
 // A function to get a device property using the mac address as key and DB column nakme as parameter
 //  for the value to be returned
-function getDeviceDataByMac(macAddress, dbColumn) {
+function getDevDataByMac(macAddress, dbColumn) {
 
   const sessionDataKey = 'devicesListAll_JSON';  
   const devicesCache = getCache(sessionDataKey);
@@ -818,7 +936,7 @@ function getDeviceDataByMac(macAddress, dbColumn) {
   const devices = JSON.parse(devicesCache);
 
   for (const device of devices) {
-      if (device["dev_MAC"].toLowerCase() === macAddress.toLowerCase()) {
+      if (device["devMac"].toLowerCase() === macAddress.toLowerCase()) {
 
         if(dbColumn)
         {
@@ -835,15 +953,15 @@ function getDeviceDataByMac(macAddress, dbColumn) {
 }
 
 // -----------------------------------------------------------------------------
-// Cache teh devices as one JSON
+// Cache the devices as one JSON
 function cacheDevices()
 { 
 
   return new Promise((resolve, reject) => {
 
-    if(!getCache('completedCalls').includes('cacheDevices'))
-    {
-      $.get('api/table_devices.json', function(data) {    
+    // if(!getCache('completedCalls').includes('cacheDevices'))
+    // {
+    $.get('/php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(data) {    
         
         // console.log(data)
 
@@ -866,7 +984,8 @@ 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 
@@ -907,6 +1026,19 @@ 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')
 {
 
@@ -918,25 +1050,14 @@ function showSpinner(stringKey='Loading')
     text = getString(stringKey)
   }
 
+  text = isEmpty(text) ?  "Loading" : text;
+
   if($("#loadingSpinner").length)
   {    
     $("#loadingSpinner").show();
   }
   else{    
-    html =  `
-    <!-- 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>
-    `
-
-    $(".wrapper").append(html)
+    $(".wrapper").append(spinnerHtml.replace('_text_',text))
   }
 }
 // -----------------------------------------------------------------------------
@@ -948,11 +1069,11 @@ function hideSpinner()
 
 // --------------------------------------------------------
 // Calls a backend function to add a front-end event to an execution queue
-function updateApi()
+function updateApi(apiEndpoints)
 {
 
   // value has to be in format event|param. e.g. run|ARPSCAN
-  action = `${getGuid()}|update_api|devices,appevents`
+  action = `${getGuid()}|update_api|${apiEndpoints}`
 
 
   $.ajax({
@@ -1093,6 +1214,92 @@ function arraysContainSameValues(arr1, arr2) {
   }
 }
 
+// -----------------------------------------------------------------------------
+// Hide elements on the page based on the supplied setting
+function hideUIelements(setKey) {
+
+  hiddenSectionsSetting = getSetting(setKey)
+  
+  if(hiddenSectionsSetting != "") // handle if settings not yet initialized
+  {
+
+    sectionsArray = createArray(hiddenSectionsSetting)
+
+    // remove spaces to get IDs
+    var newArray = $.map(sectionsArray, function(value) {
+        return value.replace(/\s/g, '');
+    });
+
+    $.each(newArray, function(index, hiddenSection) {
+
+      if($('#' + hiddenSection))
+      {
+        $('#' + hiddenSection).hide()      
+      }    
+      
+    });
+  }
+
+}
+
+// ------------------------------------------------------------
+function getDevicesList()
+{
+  // Read cache (skip cookie expiry check)
+  devicesList = getCache('devicesListAll_JSON', true);
+  
+  if (devicesList != '') {
+      devicesList = JSON.parse (devicesList);
+  } else {
+      devicesList = [];
+  }
+
+  // only loop thru the filtered down list
+  visibleDevices = getCache("ntx_visible_macs")
+
+  if(visibleDevices != "") {
+    visibleDevicesMACs = visibleDevices.split(',');
+
+    devicesList_tmp = [];
+
+    // Iterate through the data and filter only visible devices
+    $.each(devicesList, function(index, item) {
+      // Check if the current item's MAC exists in visibleDevicesMACs
+      if (visibleDevicesMACs.includes(item.devMac)) {
+        devicesList_tmp.push(item);
+      }
+    });
+
+    // Update devicesList with the filtered items
+    devicesList = devicesList_tmp;
+  }
+
+  return devicesList;
+}
+
+
+// -----------------------------------------------------------------------------
+// apply theme
+
+$(document).ready(function() {
+  let theme = getSetting("UI_theme");
+  if (theme) {
+    theme = theme.replace("['","").replace("']","");
+    // Add the theme stylesheet
+    setCookie("UI_theme", theme);
+    switch(theme) {
+      case "Dark":
+	$('head').append('<link rel="stylesheet" href="css/dark-patch.css">');
+	break;
+      case "System":
+	$('head').append('<link rel="stylesheet" href="css/system-dark-patch.css">');
+	break
+    }
+  } else {
+    setCookie("UI_theme", "Light");
+  }
+});
+
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------
@@ -1102,6 +1309,8 @@ function arraysContainSameValues(arr1, arr2) {
 const sessionStorageKey = "myScriptExecuted_common_js";
 var completedCalls = []
 var completedCalls_final = ['cacheSettings', 'cacheStrings', 'cacheDevices'];
+var completedCallsCount  = 0; 
+var completedCallsCount_final;
 
 // -----------------------------------------------------------------------------
 // Clearing all the caches
@@ -1110,14 +1319,15 @@ function clearCache() {
   sessionStorage.clear();
   localStorage.clear();
   setTimeout(() => {
-  window.location.reload();
-}, 500);
+    console.warn("clearChache called");
+    window.location.reload();
+  }, 500);
 }
 
 // -----------------------------------------------------------------------------
 // Function to check if cache needs to be refreshed because of setting changes
 function checkSettingChanges() {
-  $.get('api/app_state.json?nocache=' + Date.now(), function(appState) {   
+  $.get('/php/server/query_json.php', { file: 'app_state.json', nocache: Date.now() }, function(appState) {   
     const importedMilliseconds = parseInt(appState["settingsImported"] * 1000);
     const lastReloaded = parseInt(sessionStorage.getItem(sessionStorageKey + '_time'));
 
@@ -1140,20 +1350,75 @@ async function handleFirstLoad(callback) {
 }
 
 // -----------------------------------------------------------------------------
-// Check if the code has been executed before by checking sessionStorage
-function isAppInitialized() {
-   return arraysContainSameValues(getCache("completedCalls").split(',').filter(Boolean), completedCalls_final);
+// Execute callback once the app is initialized and GraphQL server is running
+async function callAfterAppInitialized(callback) {
+  if (!isAppInitialized() || !(await isGraphQLServerRunning())) {
+    setTimeout(() => {
+      callAfterAppInitialized(callback);
+    }, 500);
+  } else {
+    callback();
+  }
 }
 
-// Define a function that will execute the code only once
+// -----------------------------------------------------------------------------
+// Polling function to repeatedly check if the server is running
+async function waitForGraphQLServer() {
+  const pollInterval = 2000; // 2 seconds between each check
+  let serverRunning = false;
+
+  while (!serverRunning) {
+    serverRunning = await isGraphQLServerRunning();
+    if (!serverRunning) {
+      console.log("GraphQL server not running, retrying in 2 seconds...");
+      await new Promise(resolve => setTimeout(resolve, pollInterval));
+    }
+  }
+
+  console.log("GraphQL server is now running.");
+}
+
+// -----------------------------------------------------------------------------
+// Returns 1 if running, 0 otherwise
+async function isGraphQLServerRunning() {
+  try {
+    const response = await $.get('/php/server/query_json.php', { file: 'app_state.json', nocache: Date.now()});
+    console.log("graphQLServerStarted: " + response["graphQLServerStarted"]);
+    setCache("graphQLServerStarted", response["graphQLServerStarted"]);
+    return response["graphQLServerStarted"];
+  } catch (error) {
+    console.error("Failed to check GraphQL server status:", error);
+    return false;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Check if the code has been executed before by checking sessionStorage
+function isAppInitialized() {
+
+  completedCalls = parseInt(getCache("completedCallsCount"));
+  shouldBeCompletedCalls = getLangCode() == 'en_us' ? 3 : 4;
+
+  return (
+    completedCalls >= shouldBeCompletedCalls
+  );
+}
+
+// -----------------------------------------------------------------------------
+// Main execution logic
 async function executeOnce() {
   showSpinner();
 
   if (!isAppInitialized()) {
     try {
-      await cacheStrings();
-      await cacheSettings();
+      console.log("HERE");
+      
+      await waitForGraphQLServer(); // Wait for the server to start
+
       await cacheDevices();
+      await cacheSettings();
+      await cacheStrings();
+
       console.log("✅ All AJAX callbacks have completed");
       onAllCallsComplete();
     } catch (error) {
@@ -1162,12 +1427,25 @@ async function executeOnce() {
   }
 }
 
+
 // -----------------------------------------------------------------------------
 // Function to handle successful completion of an AJAX call
 const handleSuccess = (callName) => {
   console.log(`AJAX call successful: ${callName}`);
-  completedCalls.push(callName);
-  setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]));
+  // completedCalls.push(callName);
+  // setCache('completedCalls', mergeUniqueArrays(getCache('completedCalls').split(','), [callName]));
+
+  val = getCache('completedCallsCount');
+
+  if(val == "")
+  {
+    val = 0;
+  } else
+  {
+    val = parseInt(val)
+  }
+
+  setCache('completedCallsCount', val + 1)
 };
 
 // -----------------------------------------------------------------------------
@@ -1190,6 +1468,10 @@ const onAllCallsComplete = () => {
     sessionStorage.setItem(sessionStorageKey + '_time', millisecondsNow);
 
     console.log('✔ Cache initialized');
+    // setTimeout(() => {
+    //   location.reload()
+    // }, 10);
+   
   } else {
     // If not all strings are initialized, retry initialization
     console.log('❌ Not all strings are initialized. Retrying...');
@@ -1199,25 +1481,25 @@ const onAllCallsComplete = () => {
 
   // Call any other initialization functions here if needed
 
-  // No need for location.reload() here
 };
 
 // Function to check if all necessary strings are initialized
 const areAllStringsInitialized = () => {
   // Implement logic to check if all necessary strings are initialized
   // Return true if all strings are initialized, false otherwise
-  return getString('UI_LANG') != ""
+  return getString('UI_LANG_name') != ""
 };
 
 // Call the function to execute the code
 executeOnce();
 
-// Set timer for regular checks 
+// Set timer for regular UI refresh if enabled 
 setTimeout(() => {
 
   // page refresh if configured
   const refreshTime = getSetting("UI_REFRESH");
   if (refreshTime && refreshTime !== "0" && refreshTime !== "") {
+    console.log("Refreshing page becasue UI_REFRESH setting enabled.");
     newTimerRefreshData(clearCache, parseInt(refreshTime)*1000);
   }
 

front/js/db_methods.js

@@ -85,11 +85,11 @@ function renderList(
 // Check if database is locked
 function checkDbLock() {
   $.ajax({
-    url: "log/db_is_locked.log", // Replace with the actual path to your PHP file
+    url: "/php/server/query_logs.php?file=db_is_locked.log", 
     type: "GET",
 
     success: function (response) {
-      console.log(response);
+      // console.log(response);
       if (response == 0) {
         // console.log('Database is not locked');
         $(".header-status-locked-db").hide();

front/js/device.js

@@ -0,0 +1,70 @@
+
+
+// -----------------------------------------------------------------------------
+function askDeleteDevice() {
+  // Check MAC
+  if (mac == '') {
+    return;
+  }
+
+  // Ask delete device
+  showModalWarning(
+    getString("DevDetail_button_Delete"),
+    getString("DevDetail_button_Delete_ask"),
+    getString('Gen_Cancel'), 
+    getString('Gen_Delete'), 
+    'deleteDevice');
+}
+
+// -----------------------------------------------------------------------------
+function askDelDevDTInline(mac) {
+  // Check MAC
+  if (mac == '') {
+    return;
+  }
+
+  showModalWarning(
+    getString("DevDetail_button_Delete"), 
+    getString("DevDetail_button_Delete_ask"),
+    getString('Gen_Cancel'), 
+    getString('Gen_Delete'), 
+    () => deleteDeviceByMac(mac))
+}
+
+
+// -----------------------------------------------------------------------------
+function deleteDevice() {
+  // Check MAC
+  if (mac == '') {
+    return;
+  }
+
+  // Delete device
+  $.get('php/server/devices.php?action=deleteDevice&mac=' + mac, function (msg) {
+    showMessage(msg);
+  });
+
+  // refresh API
+  updateApi("devices,appevents")
+}
+
+// -----------------------------------------------------------------------------
+function deleteDeviceByMac(mac) {
+  // Check MAC
+  if (mac == '') {
+    return;
+  }
+
+  // alert(mac)
+  // return;
+
+  // Delete device
+  $.get('php/server/devices.php?action=deleteDevice&mac=' + mac, function (msg) {
+    showMessage(msg);
+  });
+
+  // refresh API
+  updateApi("devices,appevents")
+}
+
+

front/js/graph_online_history.js

@@ -1,13 +1,17 @@
-function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_graph_online_history_ondev, pia_js_graph_online_history_dodev, pia_js_graph_online_history_ardev) {
-        var xValues = pia_js_graph_online_history_time;
-
-        // alert("dev presence")
+function presenceOverTime(
+    timeStamp, 
+    onlineCount, 
+    offlineCount, 
+    archivedCount,
+    downCount
+  ) {
+        var xValues = timeStamp;
 
         // Data object for online status
         onlineData = {
           label: 'Online',
-          data: pia_js_graph_online_history_ondev,
-          borderColor: "rgba(0, 166, 89)",
+          data: onlineCount,
+          borderColor: "#00000",
           fill: true,
           backgroundColor: "rgba(0, 166, 89, .6)",
           pointStyle: 'circle',
@@ -15,20 +19,29 @@ function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_
           pointHoverRadius: 3
         };
 
+        // Data object for down status
+        downData = {          
+          label: 'Down',
+          data: downCount,
+          borderColor: "#00000",
+          fill: true,
+          backgroundColor: "#dd4b39",          
+        };
+
         // Data object for offline status
         offlineData = {          
-          label: 'Offline/Down',
-          data: pia_js_graph_online_history_dodev,
-          borderColor: "rgba(222, 74, 56)",
+          label: 'Offline',
+          data: offlineCount,
+          borderColor: "#00000",
           fill: true,
-          backgroundColor: "rgba(222, 74, 56, .6)",          
+          backgroundColor: "#b2b6be",          
         };
 
         // Data object for archived status
         archivedData = {
           label: 'Archived',
-          data: pia_js_graph_online_history_ardev,
-          borderColor: "rgba(220,220,220)",
+          data: archivedCount,
+          borderColor: "#00000",
           fill: true,
           backgroundColor: "rgba(220,220,220, .6)",
         };
@@ -42,23 +55,27 @@ function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_
         // Check if 'online' status should be displayed
         if(showStats.includes("online"))
         {
-          datasets.push(onlineData); // Add onlineData to datasets array
+          datasets.push(onlineData); 
+        }
+
+        // Check if 'down' status should be displayed
+        if(showStats.includes("down"))
+        {
+          datasets.push(downData); 
         }
 
         // Check if 'offline' status should be displayed
         if(showStats.includes("offline"))
         {
-          datasets.push(offlineData); // Add offlineData to datasets array
+          datasets.push(offlineData); 
         }
 
         // Check if 'archived' status should be displayed
         if(showStats.includes("archived"))
         {
-          datasets.push(archivedData); // Add archivedData to datasets array
+          datasets.push(archivedData); 
         }
 
-
-
         new Chart("OnlineChart", {
           type: "bar",
           scaleIntegersOnly: true,

front/js/handle_version.js

@@ -33,7 +33,7 @@ function versionUpdateUI(){
 // Checks if a new version is available via the global app_state.json
 function checkIfNewVersionAvailable()
 {
-  $.get('api/app_state.json?nocache=' + Date.now(), function(appState) {   
+  $.get('/php/server/query_json.php', { file: 'app_state.json', nocache: Date.now() }, function(appState) {   
     
     // console.log(appState["isNewVersionChecked"])
     // console.log(appState["isNewVersion"])

front/js/modal.js

@@ -65,7 +65,8 @@ function showModalWarning(
     message,
     btnCancel = getString("Gen_Cancel"),
     btnOK = getString("Gen_Okay"),
-    callbackFunction = null
+    callbackFunction = null,
+    triggeredBy = null
 ) {
     // set captions
     $("#modal-warning-title").html(title);
@@ -77,6 +78,10 @@ function showModalWarning(
         modalCallbackFunction = callbackFunction;
     }
 
+    if (triggeredBy != null) {
+        $('#'+prefix).attr("data-myparam-triggered-by", triggeredBy)
+    }
+
     // Show modal
     $("#modal-warning").modal("show");
 }
@@ -87,7 +92,8 @@ function showModalInput(
     message,
     btnCancel = getString("Gen_Cancel"),
     btnOK = getString("Gen_Okay"),
-    callbackFunction = null
+    callbackFunction = null,
+    triggeredBy = null    
 ) {
     prefix = "modal-input";
 
@@ -101,6 +107,10 @@ function showModalInput(
         modalCallbackFunction = callbackFunction;
     }
 
+    if (triggeredBy != null) {
+        $('#'+prefix).attr("data-myparam-triggered-by", triggeredBy)
+    }
+
     // Show modal
     $(`#${prefix}`).modal("show");
 
@@ -117,7 +127,8 @@ function showModalFieldInput(
     btnCancel = getString("Gen_Cancel"),
     btnOK = getString("Gen_Okay"),
     curValue = "",
-    callbackFunction = null
+    callbackFunction = null,
+    triggeredBy = null
 ) {
     // set captions
     prefix = "modal-field-input";
@@ -128,9 +139,14 @@ function showModalFieldInput(
     $(`#${prefix}-OK`).html(btnOK);
 
     if (callbackFunction != null) {
+        
         modalCallbackFunction = callbackFunction;
     }
 
+    if (triggeredBy != null) {
+        $('#'+prefix).attr("data-myparam-triggered-by", triggeredBy)
+    }
+
     $(`#${prefix}-field`).val(curValue);
 
     setTimeout(function () {
@@ -148,7 +164,13 @@ function modalDefaultOK() {
 
     // timer to execute function
     window.setTimeout(function () {
-        window[modalCallbackFunction]();
+        if (typeof modalCallbackFunction === "function") {
+            modalCallbackFunction(); // Direct call
+        } else if (typeof modalCallbackFunction === "string" && typeof window[modalCallbackFunction] === "function") {
+            window[modalCallbackFunction](); // Call via window
+        } else {
+            console.error("Invalid callback function");
+        }
     }, 100);
 }
 
@@ -159,7 +181,13 @@ function modalDefaultInput() {
 
     // timer to execute function
     window.setTimeout(function () {
-        window[modalCallbackFunction]();
+        if (typeof modalCallbackFunction === "function") {
+            modalCallbackFunction(); // Direct call
+        } else if (typeof modalCallbackFunction === "string" && typeof window[modalCallbackFunction] === "function") {
+            window[modalCallbackFunction](); // Call via window
+        } else {
+            console.error("Invalid callback function");
+        }
     }, 100);
 }
 
@@ -170,7 +198,13 @@ function modalDefaultFieldInput() {
 
     // timer to execute function
     window.setTimeout(function () {
-        modalCallbackFunction();
+        if (typeof modalCallbackFunction === "function") {
+            modalCallbackFunction(); // Direct call
+        } else if (typeof modalCallbackFunction === "string" && typeof window[modalCallbackFunction] === "function") {
+            window[modalCallbackFunction](); // Call via window
+        } else {
+            console.error("Invalid callback function");
+        }
     }, 100);
 }
 
@@ -181,7 +215,13 @@ function modalWarningOK() {
 
     // timer to execute function
     window.setTimeout(function () {
-        window[modalCallbackFunction]();
+        if (typeof modalCallbackFunction === "function") {
+            modalCallbackFunction(); // Direct call
+        } else if (typeof modalCallbackFunction === "string" && typeof window[modalCallbackFunction] === "function") {
+            window[modalCallbackFunction](); // Call via window
+        } else {
+            console.error("Invalid callback function");
+        }
     }, 100);
 }
 
@@ -242,6 +282,18 @@ $(document).ready(function () {
 });
 
 
+// -----------------------------------------------------------------------------
+// Escape text
+function safeDecodeURIComponent(content) {
+    try {
+      return decodeURIComponent(content);
+    } catch (error) {
+      console.warn('Failed to decode URI component:', error);
+      return content;  // Return the original content if decoding fails
+    }
+  }
+  
+
 // -----------------------------------------------------------------------------
 // Backend notification Polling 
 // -----------------------------------------------------------------------------
@@ -266,7 +318,9 @@ function checkNotification() {
                 if (oldestInterruptNotification) {
                     // Show modal dialog with the oldest unread notification
 
-                    const decodedContent = decodeURIComponent(oldestInterruptNotification.content);
+                    console.log(oldestInterruptNotification.content);
+
+                    const decodedContent = safeDecodeURIComponent(oldestInterruptNotification.content);
 
                     showModalOK("Notification", decodedContent, function() {
                         // Mark the notification as read
@@ -281,6 +335,7 @@ function checkNotification() {
                                 console.log(response);
                                 // After marking the notification as read, check for the next one
                                 checkNotification();
+                                hideSpinner();
                             },
                             error: function(xhr, status, error) {
                                 console.error("Error marking notification as read:", status, error);

front/js/settings_utils.js

@@ -191,14 +191,6 @@ function isSHA256(value) {
   }
 }
 
-// -------------------------------------------------------------------
-// Utility function to check if the value is already Base64
-function isBase64(value) {
-  const base64Regex =
-    /^(?:[A-Za-z0-9+\/]{4})*?(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
-  return base64Regex.test(value);
-}
-
 // -------------------------------------------------------------------
 // Validation
 // -------------------------------------------------------------------
@@ -215,14 +207,14 @@ function settingsCollectedCorrectly(settingsArray, settingsJSON_DB) {
     }
   });
 
-  const settingsCodeNames = settingsJSON_DB.map((setting) => setting.Code_Name);
+  const settingsCodeNames = settingsJSON_DB.map((setting) => setting.setKey);
   const detailedCodeNames = settingsArray.map((item) => item[1]);
 
   const missingCodeNamesOnPage = detailedCodeNames.filter(
-    (codeName) => !settingsCodeNames.includes(codeName)
+    (setKey) => !settingsCodeNames.includes(setKey)
   );
   const missingCodeNamesInDB = settingsCodeNames.filter(
-    (codeName) => !detailedCodeNames.includes(codeName)
+    (setKey) => !detailedCodeNames.includes(setKey)
   );
 
   // check if the number of settings on the page and in the DB are the same
@@ -245,6 +237,68 @@ function settingsCollectedCorrectly(settingsArray, settingsJSON_DB) {
 // Manipulating Editable List options
 // -------------------------------------------------------------------
 
+// ---------------------------------------------------------
+// Add row to datatable
+function addDataTableRow(el)
+{
+  alert("a")
+}
+
+// ---------------------------------------------------------
+// Clone datatable row
+function cloneDataTableRow(el){
+
+  console.log(el);
+  
+  const id = "NEWDEV_devCustomProps_table"; // Your table ID
+  const table = $('#'+id).DataTable();
+
+  
+  // Get the 'my-index' attribute from the closest tr element
+  const myIndex = parseInt($(el).closest("tr").attr("my-index"));
+
+  // Find the row in the table with the matching 'my-index'
+  const row = table.rows().nodes().to$().filter(`[my-index="${myIndex}"]`).first().get(0);
+  
+  // Clone the row (including its data and controls)
+  let clonedRow = $(row).clone(true, true); // The true arguments copy the data and event handlers
+
+
+  $(clonedRow).attr("my-index",table.rows().count())
+
+
+  console.log(clonedRow);
+  
+
+  // Add the cloned row to the DataTable
+  table.row.add(clonedRow[0]).draw();
+}
+
+// ---------------------------------------------------------
+// Remove current datatable row
+function removeDataTableRow(el) {
+  console.log(el);
+
+  const id = "NEWDEV_devCustomProps_table"; // Your table ID
+  const table = $('#'+id).DataTable();
+
+  if(table.rows().count() > 1)
+  {
+    // Get the 'my-index' attribute from the closest tr element
+    const myIndex = parseInt($(el).closest("tr").attr("my-index"));
+
+    // Find the row in the table with the matching 'my-index'
+    const row = table.rows().nodes().to$().filter(`[my-index="${myIndex}"]`).first().get(0);
+    
+    // Remove the row from the DataTable
+    table.row(row).remove().draw();
+  }
+  else
+  {
+    showMessage (getString("CustProps_cant_remove"), 3000, "modal_red");  
+  }
+}
+
 // ---------------------------------------------------------
 // Add item to list
 function addList(element, clearInput = true) {
@@ -259,7 +313,8 @@ function addList(element, clearInput = true) {
     .attr("value", input)
     .text(input);
 
-  const el = $(`#${toId}`).append(newOption);
+  // add new option
+  $(`#${toId}`).append(newOption);
 
   // clear input
   if (clearInput) {
@@ -269,6 +324,7 @@ function addList(element, clearInput = true) {
   // Initialize interaction options only for the newly added option
   initListInteractionOptions(newOption);
 
+  // flag something changes to prevent navigating from page
   settingsChanged();
 }
 
@@ -279,31 +335,6 @@ function removeFromList(element) {
     .find("option:last")
     .remove();
 }
-// ---------------------------------------------------------
-function addInterface() {
-  ipMask = $("#ipMask").val();
-  ipInterface = $("#ipInterface").val();
-
-  full = ipMask + " --interface=" + ipInterface;
-
-  console.log(full);
-
-  if (ipMask == "" || ipInterface == "") {
-    showModalOk(
-      "Validation error",
-      "Specify both, the network mask and the interface"
-    );
-  } else {
-    $("#SCAN_SUBNETS").append(
-      $("<option disabled></option>").attr("value", full).text(full)
-    );
-
-    $("#ipMask").val("");
-    $("#ipInterface").val("");
-
-    settingsChanged();
-  }
-}
 
 // -------------------------------------------------------------------
 // Function to remove an item from the select element
@@ -327,6 +358,54 @@ function removeAllOptions(element) {
   $(`#${$(element).attr("my-input-to")}`).empty();
 }
 
+// -------------------------------------------------------------------
+// Add all options
+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
+  selectElement.find('option').each(function() {
+    // Mark each option as selected
+    $(this).prop('selected', true);
+  });
+
+  // Trigger the 'change' event to notify Bootstrap Select of the changes
+  selectElement.trigger('change');
+}
+
+// -----------------------------------------------------------------------------
+// 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
+  selectElement.find('option').each(function() {
+    // Unselect each option
+    $(this).prop('selected', false);
+  });
+  
+  // Trigger the 'change' event to notify Bootstrap Select of the changes
+  selectElement.trigger('change');
+}
+
+// -----------------------------------------------------------------------------
+// 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();
+}
+
 // -------------------------------------------------------------------
 // Function to initialize remove functionality on select options
 
@@ -428,11 +507,11 @@ function filterRows(inputText) {
         }
   
         var description = $row.find(".setting_description").text().toLowerCase();
-        var codeName = $row.find(".setting_name code").text().toLowerCase();
+        var setKey = $row.find(".setting_name code").text().toLowerCase();
   
         if (
           description.includes(inputText.toLowerCase()) ||
-          codeName.includes(inputText.toLowerCase())
+          setKey.includes(inputText.toLowerCase())
         ) {
           $row.show();
           anyVisible = true; // Set the flag to true if at least one row is visible
@@ -460,8 +539,6 @@ function filterRows(inputText) {
 }
 
 
-
-
 setTimeout(() => {
   // Event listener for input change
   $("#settingsSearch").on("input", function () {
@@ -479,33 +556,6 @@ setTimeout(() => {
   });
 }, 1000);
 
-// -----------------------------------------------------------------------------
-// handling events on the backend initiated by the front end END
-// -----------------------------------------------------------------------------
-
-// ---------------------------------------------------------
-// UNUSED?
-function getParam(targetId, key, skipCache = false) {
-  skipCacheQuery = "";
-
-  if (skipCache) {
-    skipCacheQuery = "&skipcache";
-  }
-
-  // get parameter value
-  $.get(
-    "php/server/parameters.php?action=get&defaultValue=0&parameter=" +
-      key +
-      skipCacheQuery,
-    function (data) {
-      var result = data;
-
-      result = result.replaceAll('"', "");
-
-      document.getElementById(targetId).innerHTML = result.replaceAll('"', "");
-    }
-  );
-}
 
 // -----------------------------------------------------------------------------
 // Show/hide the metadata settings
@@ -516,6 +566,17 @@ function toggleMetadata(element) {
   $(`#${id}`).toggle();
 }
 
+// -----------------------------------------------------------------------------
+// Show setting description in a modal on smaller screens
+// -----------------------------------------------------------------------------
+function showDescription(element) {
+  const id = $(element).attr("my-to-show");
+
+  description = $(`${id}`)[0].innerHTML
+  console.log(description);
+  showModalOK(getString("Gen_Description"), description);
+}
+
 // ---------------------------------------------------------
 // Helper methods
 // ---------------------------------------------------------
@@ -544,22 +605,29 @@ function overrideToggle(element) {
 }
 
 
-
+// ---------------------------------------------------------
 // Generate options or set options based on the provided parameters
 function generateOptionsOrSetOptions(
-  codeName,
+  setKey,
   valuesArray, // Array of values to be pre-selected in the dropdown
   placeholder, // ID of the HTML element where dropdown should be rendered (will be replaced)
   processDataCallback, // Callback function to generate entries based on options
   targetField, // Target field or element where selected value should be applied or updated
-  transformers = [] // Transformers to be applied to the values
+  transformers = [], // Transformers to be applied to the values
+  overrideOptions = null // override options if available  
 ) {
 
-  console.log(codeName);
+  // console.log(setKey);
+
+  // console.log(overrideOptions);
+  // console.log( getSettingOptions(setKey));
+  // console.log( setKey);
 
   // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
-  options = arrayToObject(createArray(getSettingOptions(codeName)))
+  options = arrayToObject(createArray(overrideOptions ? overrideOptions : getSettingOptions(setKey)))
 
+  
+  
   // Call to render lists
   renderList(
     options,
@@ -591,6 +659,10 @@ function applyTransformers(val, transformers) {
           val = btoa(val);
         }
         break;
+      case "getString":
+        // no change
+        val = val;        
+        break;
       default:
         console.warn(`Unknown transformer: ${transformer}`);
     }
@@ -613,6 +685,10 @@ function reverseTransformers(val, transformers) {
           val = atob(val);
         }
         break;
+      case "getString":
+        // retrieve string
+        val = getString(val);        
+        break;
       default:
         console.warn(`Unknown transformer: ${transformer}`);
     }
@@ -623,10 +699,11 @@ function reverseTransformers(val, transformers) {
 
 // ------------------------------------------------------------
 // Function to initialize relevant variables based on HTML element
-const handleElementOptions = (codeName, elementOptions, transformers, val) => {
+const handleElementOptions = (setKey, elementOptions, transformers, val) => {
   let inputType = "text";
   let readOnly = "";
   let isMultiSelect = false;
+  let isOrdeable = false;
   let cssClasses = "";
   let placeholder = "";
   let suffix = "";
@@ -635,7 +712,12 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
   let valRes = val;
   let sourceIds = [];
   let getStringKey = "";
-  let onClick = "alert('Not implemented');";
+  let onClick = "console.log('onClick - Not implemented');";
+  let onChange = "console.log('onChange - Not implemented');";
+  let customParams = "";
+  let customId = "";
+  let columns = [];
+
 
   elementOptions.forEach((option) => {
     if (option.prefillValue) {
@@ -650,6 +732,9 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     if (option.multiple === "true") {
       isMultiSelect = true;
     }
+    if (option.ordeable === "true") {
+      isOrdeable = true;
+    }
     if (option.editable === "true") {
       editable = true;
     }
@@ -664,7 +749,7 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     }
     if (option.sourceSuffixes) {
       $.each(option.sourceSuffixes, function (index, suf) {
-        sourceIds.push(codeName + suf);
+        sourceIds.push(setKey + suf);
       });
     }
     if (option.separator) {
@@ -676,6 +761,18 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     if (option.onClick) {
       onClick = option.onClick;
     }
+    if (option.onChange) {
+      onChange = option.onChange;
+    }
+    if (option.customParams) {
+      customParams = option.customParams;
+    }
+    if (option.customId) {
+      customId = option.customId;
+    }
+    if (option.columns) {
+      columns = option.columns;
+    }
   });
 
   if (transformers.includes("sha256")) {
@@ -686,6 +783,7 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     inputType,
     readOnly,
     isMultiSelect,
+    isOrdeable,
     cssClasses,
     placeholder,
     suffix,
@@ -695,6 +793,10 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     valRes,
     getStringKey,
     onClick,
+    onChange,
+    customParams,
+    customId,
+    columns
   };
 };
 
@@ -721,8 +823,9 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
   resultArray    = []
   selectedArray  = []
   cssClass       = ""
+  
 
-  // determine if options or values are used in teh listing
+  // determine if options or values are used in the listing
   if (valuesArray.length > 0 && options.length > 0){
 
     // multiselect list ->  options only + selected the ones in valuesArray 
@@ -740,21 +843,31 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
     resultArray   = options;
   }
 
+ 
+  // Create a map to track the index of each item in valuesArray
+  const orderMap = new Map(valuesArray.map((item, index) => [item, index]));
+
+  // Sort resultArray based on the order in valuesArray
+  resultArray.sort((a, b) => {
+    const indexA = orderMap.has(a.id) ? orderMap.get(a.id) : valuesArray.length;
+    const indexB = orderMap.has(b.id) ? orderMap.get(b.id) : valuesArray.length;
+    return indexA - indexB;
+  });
+
   resultArray.forEach(function(item) {
+    let labelName = item.name;
 
-    labelName = item.name
-
-    if(labelName != '❌None')
-    {
-      labelName = reverseTransformers(labelName, transformers)
+    if (labelName !== '❌None') {
+      labelName = reverseTransformers(labelName, transformers);
     }
 
-    // needs to happen always if options ued as source
-    let selected = options.length != 0 && valuesArray.includes(item.id) ? 'selected' : '';
+    // Always include selected if options are used as a source
+    let selected = options.length !== 0 && valuesArray.includes(item.id) ? 'selected' : '';
 
     optionsHtml += `<option class="${cssClass}" value="${item.id}" ${selected}>${labelName}</option>`;
   });
 
+
   // Place the resulting HTML into the specified placeholder div
   $("#" + placeholder).replaceWith(optionsHtml);
 }
@@ -812,3 +925,345 @@ function genListWithInputSet(options, valuesArray, targetField, transformers, pl
   // Place the resulting HTML into the specified placeholder div
   $("#" + placeholder).replaceWith(listHtml);
 }
+
+
+// ------------------------------------------------------------------------------
+// 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'];
+
+  // if (setKey == '') {
+    
+  // console.log(setType);
+  // console.log(setKey);
+  // console.log(overrideValue);
+  // console.log(inVal);  
+
+  // }
+
+  // Parse the setType JSON string
+  const setTypeObject = JSON.parse(processQuotes(setType))
+  const dataType = setTypeObject.dataType;
+  const elements = setTypeObject.elements || [];
+
+  // Generate HTML for elements
+  elements.forEach(elementObj => {
+    const { elementType, elementOptions = [], transformers = [] } = elementObj;
+
+    // Handle element options
+    const {
+      inputType,
+      readOnly,
+      isMultiSelect,
+      isOrdeable,
+      cssClasses,
+      placeholder,
+      suffix,
+      sourceIds,
+      separator,
+      editable,
+      valRes,
+      getStringKey,
+      onClick,
+      onChange,
+      customParams,
+      customId,
+      columns
+    } = handleElementOptions(setKey, elementOptions, transformers, inVal);
+
+    // Override value
+    let val = valRes;
+
+    // if (setKey == '') {
+    
+    //   console.log(setType);
+    //   console.log(setKey);
+    //   console.log(overrideValue);
+    //   console.log(inVal);  
+    //   console.log(val);  
+    
+    //   }
+
+    // Generate HTML based on elementType
+    switch (elementType) {
+      case 'select':
+        const multi = isMultiSelect ? "multiple" : "";
+        const addCss = isOrdeable ? "select2 select2-hidden-accessible" : "";
+
+        inputHtml += `<select onChange="settingsChanged();${onChange}" 
+                              my-data-type="${dataType}" 
+                              my-editable="${editable}" 
+                              class="form-control ${addCss} ${cssClasses}" 
+                              name="${setKey}" 
+                              id="${setKey}" 
+                              my-customparams="${customParams}" 
+                              my-customid="${customId}" 
+                              my-originalSetKey="${originalSetKey}" 
+                              ${multi}>
+                          <option value="" id="${setKey + "_temp_"}"></option>
+                        </select>`;
+
+        generateOptionsOrSetOptions(setKey, createArray(val), `${setKey}_temp_`, generateOptions, null, transformers, overrideOptions);
+        break;
+
+      case 'input':
+        const checked = val === 'True' || val === 'true' ||  val === '1' ? 'checked' : '';
+        const inputClass = inputType === 'checkbox' ? 'checkbox' : 'form-control';
+
+        inputHtml += `<input 
+                        class="${inputClass} ${cssClasses}" 
+                        onChange="settingsChanged();${onChange}" 
+                        my-data-type="${dataType}" 
+                        my-customparams="${customParams}" 
+                        my-customid="${customId}" 
+                        my-originalSetKey="${originalSetKey}"
+                        id="${setKey}${suffix}" 
+                        type="${inputType}" 
+                        value="${val}" 
+                        ${readOnly}
+                        ${checked}
+                        placeholder="${placeholder}" 
+                      />`;
+        break;
+
+      case 'button':
+        inputHtml += `<button 
+                        class="btn btn-primary ${cssClasses}" 
+                        my-customparams="${customParams}" 
+                        my-customid="${customId}" 
+                        my-originalSetKey="${originalSetKey}"
+                        my-input-from="${sourceIds}" 
+                        my-input-to="${setKey}" 
+                        onclick="${onClick}">
+                        ${getString(getStringKey)}
+                      </button>`;
+        break;
+
+      case 'textarea':
+        inputHtml += `<textarea 
+                        class="form-control input" 
+                        my-customparams="${customParams}" 
+                        my-customid="${customId}" 
+                        my-originalSetKey="${originalSetKey}"
+                        my-data-type="${dataType}" 
+                        id="${setKey}" 
+                        ${readOnly}>${val}</textarea>`;
+        break;
+
+      case 'span':
+        inputHtml += `<span 
+                        class="${cssClasses}" 
+                        my-data-type="${dataType}" 
+                        my-customparams="${customParams}" 
+                        my-customid="${customId}"
+                        my-originalSetKey="${originalSetKey}"
+                        onclick="${onClick}">
+                        ${getString(getStringKey)}${placeholder}
+                      </span>`;
+        break;
+      case 'datatable':
+
+        const tableId = `${setKey}_table`;
+        let datatableHtml = `<table id="${tableId}" class="table table-striped">`;
+
+        // Dynamic array creation
+        let emptyVal = [];
+
+        let columnSettings = [];
+
+        // Generate table headers
+        datatableHtml += '<thead><tr>';
+
+        columns.forEach(column => {
+          let columnSetting = getSetObject(settingsData, column.settingKey) || {};
+
+          datatableHtml += `<th>${columnSetting.setName}</th>`;
+
+          if(column.typeOverride)
+          {
+            columnSetting["setType"] = JSON.stringify(column.typeOverride);
+          }
+
+          if(column.optionsOverride)
+          {
+            if (column.optionsOverride.startsWith("setting.")) {
+              columnSetting["setOptions"] = getSetting(column.optionsOverride.replace("setting.",""));
+            } else {
+              columnSetting["setOptions"] = column.optionsOverride;
+            }            
+          }
+
+          columnSettings.push(columnSetting)
+          
+          // helper for if val is empty
+          emptyVal.push(''); 
+        });
+        datatableHtml += '</tr></thead>';
+
+        // Generate table body
+        datatableHtml += '<tbody>';
+
+        if(val.length > 0 && isBase64(val))
+        {
+          val = atob(val)
+          // console.log(val);
+          val = JSON.parse(val)
+        }else{
+          // init empty
+          val = [emptyVal]
+        }
+
+        let index = 0;
+        val.forEach(rowData => {
+            datatableHtml += `<tr my-index="${index}">`;
+            
+            let j = 0;
+            columnSettings.forEach(set => {
+                // Extract the value for the current column based on the new structure
+                let columnOverrideValue = rowData[j] && Object.values(rowData[j])[0];
+
+                if(columnOverrideValue == undefined)
+                {
+                  columnOverrideValue = ""
+                }
+        
+                // Create unique key to prevent dropdown data duplication
+                const oldKey = set["setKey"];
+                set["setKey"] = oldKey + "_" + index;
+        
+                // Generate the cell HTML using the extracted value
+                const cellHtml = generateFormHtml(
+                    settingsData,
+                    set,
+                    columnOverrideValue.toString(),
+                    set["setOptions"],
+                    oldKey
+                );
+                datatableHtml += `<td> <div class="input-group"> ${cellHtml} </div></td>`;
+        
+                // Restore the original key
+                set["setKey"] = oldKey;
+        
+                j++;
+            });
+            datatableHtml += '</tr>';
+            index++;
+        });
+        
+        
+        datatableHtml += '</tbody></table>';
+
+        inputHtml += datatableHtml;
+
+        // Initialize DataTable with jQuery
+        $(document).ready(() => {
+          $(`#${tableId}`).DataTable({
+            ordering: false, // Disables sorting on all columns
+            searching: false, // Disables the search box
+            dom: "<'top'rt><'bottom'ipl>", // Move length dropdown to the bottom
+          });
+        });
+
+        break;
+
+      default:
+        console.warn(`🟥 Unknown element type: ${elementType}`);
+    }
+  });
+
+  // Generate event HTML if applicable
+  let eventsHtml = '';
+ 
+  const eventsList = createArray(set['setEvents']); 
+  // inline buttons events
+  
+
+  if (eventsList.length > 0) {
+    eventsList.forEach(event => {
+
+        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>`;
+    });
+  }
+
+  // Combine and return the final HTML
+  return inputHtml + eventsHtml;
+}
+
+// -----------------------------------------------------
+// Return the setting object by setKey
+function getSetObject(settingsData, setKey) {
+
+  found = false;
+  result = ""
+
+  settingsData.forEach(function(set) {
+   
+    if (set.setKey == setKey) {
+      // console.log(set);      
+      
+      result = set;
+      return;
+      
+    }   
+    
+  });
+
+  if(result == "")
+  {
+    console.error(settingsData);
+    console.error(`Setting not found: ${setKey}`);
+  }
+
+  return result;
+}
+
+// ---------------------------------------
+// Collect DataTable data
+function collectTableData(tableSelector) {
+  const table = $(tableSelector).DataTable();
+
+  let tableData = [];
+
+  table.rows().every(function () {
+      const rowData = [];
+      const cells = $(this.node()).find('td');
+
+      cells.each((index, cell) => {
+          const input = $(cell).find('input, select, textarea');
+          
+          if (input.length) {
+              if (input.attr('type') === 'checkbox') {
+                  // For checkboxes, check if they are checked
+                  rowData[index] = { [input.attr("my-originalsetkey")] : input.prop('checked') };
+              } else {
+                  // Generic sync for other inputs (text, select, textarea)
+                  rowData[index] =  { [input.attr("my-originalsetkey")] : input.val().replace(/'/g, "").replace(/"/g, "") };
+              }
+          } else {
+              // Handle plain text
+              // rowData[index] = { [input.attr("my-originalsetkey")] : $(cell).text()};
+              console.log(`Nothig to collect: ${$(cell).html()}`)
+          }
+      });
+
+      tableData.push(rowData); 
+  });
+
+  return tableData;  
+}
+
+
+

front/js/ui_components.js

@@ -11,16 +11,7 @@
 // -----------------------------------------------------------------------------
 // Initialize device selectors / pickers fields
 // -----------------------------------------------------------------------------
-function initDeviceSelectors() {
-
-  // console.log(devicesList)
-  // Retrieve device list from session variable
-  var devicesListAll_JSON = getCache('devicesListAll_JSON');
-
-  var devicesList = JSON.parse(devicesListAll_JSON);
-
-  // console.log(devicesList);
-
+function initDeviceSelectors(devicesListAll_JSON) {
 
   // Check if both device list exists
   if (devicesListAll_JSON) {
@@ -32,7 +23,7 @@ function initDeviceSelectors() {
       // Loop through the devices list
       devicesList.forEach(function(device) {         
 
-          selectorFieldsHTML += `<option value="${device.dev_MAC}">${device.dev_Name}</option>`;
+          selectorFieldsHTML += `<option value="${device.devMac}">${device.devName}</option>`;
       });
 
       selector = `<div class="db_info_table_row  col-sm-12" > 
@@ -76,99 +67,137 @@ function initDeviceSelectors() {
     }, 10);
 }
 
-
-
-// // -----------------------------------------------------------------------------
-// // (ASYNC) Initiate dropdown
-// function generateSetOptions(settingKey,       // Identifier for the setting
-//                             valuesArray,       // Array of values to be pre-selected in the dropdown
-//                             targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
-//                             callbackToGenerateEntries,  // Callback function to generate entries based on options
-//                             targetField,      // Target field or element where selected value should be applied or updated
-//                             nameTransformer)      // callback to transform the name (e.g. base64)
-// {
-
-//   var optionsHtml = ""
- 
-//   // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
-//   optionsArray = createArray(getSettingOptions(settingKey))  
-
-
-//   // check if the result is a SQL query
-//   if(optionsArray.length > 0 && isSQLQuery(optionsArray[0]))
-//   {    
-
-//     if (settingKey == "NEWDEV_dev_Network_Node_MAC_ADDR") {
-//       console.log("isSQLQuery in generateSetOptions");
-
-//     }
-//     readData(optionsArray[0], callbackToGenerateEntries, valuesArray, targetLocation, targetField, nameTransformer);
-
-//   } else // this should be already an array, e.g. from a setting or pre-defined
-//   {     
-//     optionsArray.forEach(option => {
-//       let selected = valuesArray.includes(option) ? 'selected' : '';
-//       optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
-//     });   
-
-//     // Replace the specified placeholder div with the resulting HTML 
-//     setTimeout(() => {
-
-//       $("#" + targetLocation).replaceWith(optionsHtml);
-      
-//       }, 50); 
-//   }
-
-
-  
-// }
-
-
-// -----------------------------------------------------------------------------
-// Hide elements on the page based on the supplied setting
-function hideUIelements(settingKey) {
-
-  hiddenSectionsSetting = getSetting(settingKey)
-  
-  if(hiddenSectionsSetting != "") // handle if settings not yet initialized
-  {
-
-    sectionsArray = createArray(hiddenSectionsSetting)
-
-    // remove spaces to get IDs
-    var newArray = $.map(sectionsArray, function(value) {
-        return value.replace(/\s/g, '');
-    });
-
-    $.each(newArray, function(index, hiddenSection) {
-
-      if($('#' + hiddenSection))
-      {
-        $('#' + hiddenSection).hide()      
-      }    
-      
-    });
+// -------------------------------------------------------------------
+// Utility function to generate a random API token in the format t_<random string of specified length>
+function generateApiToken(elem, length) {
+  // Retrieve and parse custom parameters from the element
+  let params = $(elem).attr("my-customparams")?.split(',').map(param => param.trim());
+  if (params && params.length >= 1) {
+    var targetElementID = params[0];  // Get the target element's ID
   }
 
+  let targetElement = $('#' + targetElementID);
+
+  // Function to generate a random string of a specified length
+  function generateRandomString(len) {
+    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < len; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+  }
+
+  // Generate the token in the format t_<random string of length>
+  let randomToken = 't_' + generateRandomString(length);
+
+  // Set the generated token as the value of the target element
+  if (targetElement.length) {
+    targetElement.val(randomToken);
+  }
+}
+
+// ----------------------------------------------
+// Generate a random N-byte hexadecimal key
+function getRandomBytes(elem, length) {
+
+  // Retrieve and parse custom parameters from the element
+  let params = $(elem).attr("my-customparams")?.split(',').map(param => param.trim());
+  if (params && params.length >= 1) {
+    var targetElementID = params[0];  // Get the target element's ID
+  }
+
+  let targetElement = $('#' + targetElementID);
+
+  // Generate random bytes
+  const array = new Uint8Array(length);
+  window.crypto.getRandomValues(array);
+
+  // Convert bytes to hexadecimal string
+  let hexString = Array.from(array, byte => 
+    byte.toString(16).padStart(2, '0')
+  ).join('');
+
+  // Format hexadecimal string with hyphens
+  let formattedHex = hexString.match(/.{1,2}/g).join('-');
+
+  console.log(formattedHex);
+  // console.log($(`#${targetInput}`).val());
+
+  // Set the formatted key value to the input field
+  targetElement.val(formattedHex);
 }
 
 
 
 
-// -----------------------------------------------------------------------------
+// ----------------------------------------------
 // Updates the icon preview  
-function updateIconPreview (inputId) {
-  // update icon
-  iconInput = $(inputId) 
+function updateAllIconPreviews() {
+  $(".iconInputVal").each((index, el)=>{
+    updateIconPreview(el)
+  })
+}
 
-  value = iconInput.val()
+// ----------------------------------------------
+// Updates the icon preview  
+function updateIconPreview(elem) {
 
-  iconInput.on('change input', function() {
-    $('#txtIconFA').html(atob(value))
-  });    
+  const previewSpan =  $(elem).parent().find(".iconPreview");
+  const iconInput = $(elem);
 
-  $('#txtIconFA').html(atob(value))
-  
+  let attempts = 0;
+
+  function tryUpdateIcon() {
+    let value = iconInput.val();
+
+    if (value) {
+      previewSpan.html(atob(value));
+      iconInput.off('change input').on('change input', function () {
+        let newValue = $(elem).val();
+        previewSpan.html(atob(newValue));
+      });
+      return; // Stop retrying if successful
+    } 
+
+    attempts++;
+    if (attempts < 10) {
+      setTimeout(tryUpdateIcon, 1000); // Retry after 1 second
+    } else {
+      console.error("Input value is empty after 10 attempts");
+    }
+  }
+
+  tryUpdateIcon();
+}
+
+
+
+// -----------------------------------------------------------------------------
+// Nice checkboxes with iCheck
+function initializeiCheck () {
+  // Blue
+  $('input[type="checkbox"].blue').iCheck({
+    checkboxClass: 'icheckbox_flat-blue',
+    radioClass:    'iradio_flat-blue',
+    increaseArea:  '20%'
+  });
+
+ // Orange
+ $('input[type="checkbox"].orange').iCheck({
+   checkboxClass: 'icheckbox_flat-orange',
+   radioClass:    'iradio_flat-orange',
+   increaseArea:  '20%'
+ });
+
+ // Red
+ $('input[type="checkbox"].red').iCheck({
+   checkboxClass: 'icheckbox_flat-red',
+   radioClass:    'iradio_flat-red',
+   increaseArea:  '20%'
+ });
+
+ 
 }
 
 
@@ -234,19 +263,24 @@ function getCellValue(row, index) {
   return $(row).children('td').eq(index).text();
 }
 
- // ----------------------------------------------------------------------------- 
-  // handling events on the backend initiated by the front end START
-  // ----------------------------------------------------------------------------- 
+// ----------------------------------------------------------------------------- 
+// handling events 
+// ----------------------------------------------------------------------------- 
 
-  modalEventStatusId = 'modal-message-front-event'
+modalEventStatusId = 'modal-message-front-event'
 
-  // --------------------------------------------------------
-  // 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
-  function addToExecutionQueue_settingEvent(element)
-  {
+function execute_settingEvent(element) {
 
+  feEvent     = $(element).attr('data-myevent');
+  fePlugin    = $(element).attr('data-myparam-plugin');
+  feSetKey    = $(element).attr('data-myparam-setkey');
+  feParam     = $(element).attr('data-myparam');
+  feSourceId  = $(element).attr('id');
+
+  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
     // value has to be in format event|param. e.g. run|ARPSCAN
-    action = `${getGuid()}|${$(element).attr('data-myevent')}|${$(element).attr('data-myparam-plugin')}`
+    action = `${getGuid()}|${feEvent}|${fePlugin}`
 
     $.ajax({
       method: "POST",
@@ -261,72 +295,284 @@ function getCellValue(row, index) {
           updateModalState()
       }
     })
-  }
+    
+  } else if (["add_option"].includes(feEvent)) {
+    showModalFieldInput (
+      '<i class="fa fa-square-plus pointer"></i> ' + getString('Gen_Add'),
+      getString('Gen_Add'),
+      getString('Gen_Cancel'), 
+      getString('Gen_Okay'), 
+      '', // curValue
+      'addOptionFromModalInput',
+      feSourceId // triggered by id
+    );
+  } else if (["add_icon"].includes(feEvent)) {
 
-  // --------------------------------------------------------
-  // Updating the execution queue in in modal pop-up
-  function updateModalState() {
-    setTimeout(function() {
-        // Fetch the content from the log file using an AJAX request
-        $.ajax({
-            url: '/log/execution_queue.log',
-            type: 'GET',
-            success: function(data) {
-                // Update the content of the HTML element (e.g., a div with id 'logContent')
-                $('#'+modalEventStatusId).html(data);
+      // Add new icon as base64 string 
+    showModalInput (
+      '<i class="fa fa-square-plus pointer"></i> ' + getString('DevDetail_button_AddIcon'),
+      getString('DevDetail_button_AddIcon_Help'),
+      getString('Gen_Cancel'), 
+      getString('Gen_Okay'), 
+      () => addIconAsBase64(element), // Wrap in an arrow function
+      feSourceId // triggered by id
+    );
+  } else if (["copy_icons"].includes(feEvent)) {
 
-                updateModalState();
-            },
-            error: function() {
-                // Handle error, such as the file not being found
-                $('#logContent').html('Error: Log file not found.');
-            }
-        });
-    }, 2000);
+
+    // Ask overwrite icon types 
+    showModalWarning (
+      getString('DevDetail_button_OverwriteIcons'), 
+      getString('DevDetail_button_OverwriteIcons_Warning'),
+      getString('Gen_Cancel'), 
+      getString('Gen_Okay'), 
+      'overwriteIconType'
+    );
+  } else if (["go_to_node"].includes(feEvent)) {
+
+    goToNetworkNode('NEWDEV_devParentMAC');
+
+  } 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');
+  window.location.href = './network.php';
+  
+}
+  
+
+// --------------------------------------------------------
+// Updating the execution queue in in modal pop-up
+function updateModalState() {
+  setTimeout(function() {
+      // Fetch the content from the log file using an AJAX request
+      $.ajax({
+          url: '/php/server/query_logs.php?file=execution_queue.log',
+          type: 'GET',
+          success: function(data) {
+              // Update the content of the HTML element (e.g., a div with id 'logContent')
+              $('#'+modalEventStatusId).html(data);
+
+              updateModalState();
+          },
+          error: function() {
+              // Handle error, such as the file not being found
+              $('#logContent').html('Error: Log file not found.');
+          }
+      });
+  }, 2000);
+}
+
+// --------------------------------------------------------
+// A method to add option to select and make it selected
+function addOptionFromModalInput() {
+  var inputVal = $(`#modal-field-input-field`).val();
+  console.log($('#modal-field-input-field'));
+  
+  var triggeredBy = $('#modal-field-input').attr("data-myparam-triggered-by");
+  var targetId = $('#' + triggeredBy).attr("data-myparam-setkey");
+
+  // Add new option and set it as selected
+  $('#' + targetId).append(new Option(inputVal, inputVal)).val(inputVal);
+}
+
+
+// --------------------------------------------------------
+// Generate a random MAC address starting 00:1A
+function generate_NEWDEV_devMac() {
+  const randomHexPair = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0').toUpperCase();
+  $('#NEWDEV_devMac').val(`00:1A:${randomHexPair()}:${randomHexPair()}:${randomHexPair()}:${randomHexPair()}`.toLowerCase());
+}
+
+
+// --------------------------------------------------------
+// Generate a random IP address starting 192.
+function generate_NEWDEV_devLastIP() {
+  const randomByte = () => Math.floor(Math.random() * 256);
+  $('#NEWDEV_devLastIP').val(`192.${randomByte()}.${randomByte()}.${Math.floor(Math.random() * 254) + 1}`);
+}
+
+// -----------------------------------------------------------------------------
+// A method to add an Icon as an option to select and make it selected
+function addIconAsBase64 (el) {
+
+  var iconHtml = $('#modal-input-textarea').val();
+
+  console.log(iconHtml);
+
+  iconHtmlBase64 = btoa(iconHtml.replace(/"/g, "'"));
+
+  console.log(iconHtmlBase64);
+
+
+  console.log($('#modal-field-input-field'));
+  
+  var triggeredBy = $('#modal-input').attr("data-myparam-triggered-by");
+  var targetId = $('#' + triggeredBy).attr("data-myparam-setkey");
+
+  // $('#'+targetId).val(iconHtmlBase64); 
+
+  // Add new option and set it as selected
+  $('#' + targetId).append(new Option(iconHtmlBase64, iconHtmlBase64)).val(iconHtmlBase64);
+
+  updateIconPreview(el)  
+
+}
+
+
+
+function showIconSelection() {
+  const selectElement = document.getElementById('NEWDEV_devIcon');
+  const modalId = 'dynamicIconModal';
+
+  // Create modal HTML dynamically
+  const modalHTML = `
+    <div id="${modalId}" class="modal fade" tabindex="-1" role="dialog">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">${getString("Gen_Select")}</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div id="iconList" class="row"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Append the modal to the body
+  document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+  const iconList = document.getElementById('iconList');
+
+  // Populate the icon list
+  Array.from(selectElement.options).forEach(option => {
+    if (option.value != "") {
+        
+      
+      const value = option.value;
+
+      // Decode the base64 value
+      let decodedValue;
+      try {
+        decodedValue = atob(value);
+      } catch (e) {
+        console.warn(`Skipping invalid base64 value: ${value}`);
+        return;
+      }
+
+      // Create an icon container
+      const iconDiv = document.createElement('div');
+      iconDiv.classList.add('iconPreviewSelector','col-md-2' , 'col-sm-3', 'col-xs-4');
+      iconDiv.style.cursor = 'pointer';
+
+      // Render the SVG or HTML content
+      const iconContainer = document.createElement('div');
+      iconContainer.innerHTML = decodedValue;
+
+      // Append the icon to the div
+      iconDiv.appendChild(iconContainer);
+      iconList.appendChild(iconDiv);
+
+      // Add click event to select icon
+      iconDiv.addEventListener('click', () => {
+        selectElement.value = value; // Update the select element value
+        $(`#${modalId}`).modal('hide'); // Hide the modal
+        updateAllIconPreviews();
+      });
+    }
+  });
+
+  // Show the modal using AJAX
+  $(`#${modalId}`).modal('show');
+
+  // Remove modal from DOM after it's hidden
+  $(`#${modalId}`).on('hidden.bs.modal', function () {
+    document.getElementById(modalId).remove();
+  });
+
+  //
+  
+}
+
+
+
 
 
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------
 
+function initSelect2() {
 
-setTimeout(() => {
+  // Retrieve device list from session variable
+  var devicesListAll_JSON = getCache('devicesListAll_JSON');
 
-  initDeviceSelectors();
+  //  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();
-  
-        // Apply sortable functionality to the dropdown's dropdown-container
-        selectEl.next().children().children().children().sortable({
-            containment: 'parent',
-            update: function () {
-                var sortedValues = $(this).children().map(function() {
-                    return $(this).attr('title');
-                }).get();
-  
-                var sortedOptions = selectEl.find('option').sort(function(a, b) {
-                    return sortedValues.indexOf($(a).text()) - sortedValues.indexOf($(b).text());
-                });
-  
-                // Replace all options in selectEl
-                selectEl.empty().append(sortedOptions);
-  
-                // Trigger change event on Select2
-                selectEl.trigger('change');
-            }
-        });
+    
+    // --------------------------------------------------------
+    //Initialize Select2 Elements and make them sortable
+    
+    $(function () {
+      // Iterate over each Select2 dropdown
+      $('.select2').each(function() {
+          var selectEl = $(this).select2();
+    
+          // Apply sortable functionality to the dropdown's dropdown-container
+          selectEl.next().children().children().children().sortable({
+              containment: 'parent',
+              update: function () {
+                  var sortedValues = $(this).children().map(function() {
+                      return $(this).attr('title');
+                  }).get();
+    
+                  var sortedOptions = selectEl.find('option').sort(function(a, b) {
+                      return sortedValues.indexOf($(a).text()) - sortedValues.indexOf($(b).text());
+                  });
+    
+                  // Replace all options in selectEl
+                  selectEl.empty().append(sortedOptions);
+    
+                  // Trigger change event on Select2
+                  selectEl.trigger('change');
+              }
+          });
+      });
     });
-  });
-  
-}, 500);
+  } else // cache not ready try later
+  {
+    setTimeout(() => {
+      initSelect2()
+    }, 1000);
+  }  
+}
+
+// init functions after dom loaded
+window.addEventListener("load", function() {
+  // try to initialize 
+  setTimeout(() => {
+    initSelect2()
+    // initializeiCheck();
+  }, 1000);
+});
 
 
 console.log("init ui_components.js")

front/lib/AdminLTE/.npmignore

@@ -1,2 +0,0 @@
-documentation/
-composer.json

front/lib/AdminLTE/.travis.yml

@@ -1,24 +0,0 @@
-language: node_js
-
-node_js:
-  - 8
-  - 9
-  - 10
-  - 11
-  - 12
-
-env:
-  - INSTALL=bower
-  - INSTALL=yarn
-  - INSTALL=npm
-
-matrix:
-  fast_finish: true
-
-install:
-  - if [ "bower" == $INSTALL ]; then yarn global add bower && bower install; fi
-  - if [ "yarn" == $INSTALL ]; then yarn install; fi
-  - if [ "npm" == $INSTALL ]; then npm install; fi
-
-script:
-  - echo 'Tests must be configured'

front/lib/AdminLTE/Gruntfile.js

@@ -1,312 +0,0 @@
-// AdminLTE Gruntfile
-module.exports = function (grunt) { // jshint ignore:line
-  'use strict';
-
-  grunt.initConfig({
-    pkg   : grunt.file.readJSON('package.json'),
-    watch : {
-      less : {
-        // Compiles less files upon saving
-        files: ['build/less/*.less'],
-        tasks: ['less:development', 'less:production', 'replace', 'notify:less']
-      },
-      js   : {
-        // Compile js files upon saving
-        files: ['build/js/*.js'],
-        tasks: ['js', 'notify:js']
-      },
-      skins: {
-        // Compile any skin less files upon saving
-        files: ['build/less/skins/*.less'],
-        tasks: ['less:skins', 'less:minifiedSkins', 'notify:less']
-      }
-    },
-    // Notify end of tasks
-    notify: {
-      less: {
-        options: {
-          title  : 'AdminLTE',
-          message: 'LESS finished running'
-        }
-      },
-      js  : {
-        options: {
-          title  : 'AdminLTE',
-          message: 'JS bundler finished running'
-        }
-      }
-    },
-    // 'less'-task configuration
-    // This task will compile all less files upon saving to create both AdminLTE.css and AdminLTE.min.css
-    less  : {
-      // Development not compressed
-      development  : {
-        files: {
-          // compilation.css  :  source.less
-          'dist/css/AdminLTE.css'                     : 'build/less/AdminLTE.less',
-          // AdminLTE without plugins
-          'dist/css/alt/AdminLTE-without-plugins.css' : 'build/less/AdminLTE-without-plugins.less',
-          // Separate plugins
-          'dist/css/alt/AdminLTE-select2.css'         : 'build/less/select2.less',
-          'dist/css/alt/AdminLTE-fullcalendar.css'    : 'build/less/fullcalendar.less',
-          'dist/css/alt/AdminLTE-bootstrap-social.css': 'build/less/bootstrap-social.less'
-        }
-      },
-      // Production compressed version
-      production   : {
-        options: {
-          compress: true
-        },
-        files  : {
-          // compilation.css  :  source.less
-          'dist/css/AdminLTE.min.css'                     : 'build/less/AdminLTE.less',
-          // AdminLTE without plugins
-          'dist/css/alt/AdminLTE-without-plugins.min.css' : 'build/less/AdminLTE-without-plugins.less',
-          // Separate plugins
-          'dist/css/alt/AdminLTE-select2.min.css'         : 'build/less/select2.less',
-          'dist/css/alt/AdminLTE-fullcalendar.min.css'    : 'build/less/fullcalendar.less',
-          'dist/css/alt/AdminLTE-bootstrap-social.min.css': 'build/less/bootstrap-social.less'
-        }
-      },
-      // Non minified skin files
-      skins        : {
-        files: {
-          'dist/css/skins/skin-blue.css'        : 'build/less/skins/skin-blue.less',
-          'dist/css/skins/skin-black.css'       : 'build/less/skins/skin-black.less',
-          'dist/css/skins/skin-yellow.css'      : 'build/less/skins/skin-yellow.less',
-          'dist/css/skins/skin-green.css'       : 'build/less/skins/skin-green.less',
-          'dist/css/skins/skin-red.css'         : 'build/less/skins/skin-red.less',
-          'dist/css/skins/skin-purple.css'      : 'build/less/skins/skin-purple.less',
-          'dist/css/skins/skin-blue-light.css'  : 'build/less/skins/skin-blue-light.less',
-          'dist/css/skins/skin-black-light.css' : 'build/less/skins/skin-black-light.less',
-          'dist/css/skins/skin-yellow-light.css': 'build/less/skins/skin-yellow-light.less',
-          'dist/css/skins/skin-green-light.css' : 'build/less/skins/skin-green-light.less',
-          'dist/css/skins/skin-red-light.css'   : 'build/less/skins/skin-red-light.less',
-          'dist/css/skins/skin-purple-light.css': 'build/less/skins/skin-purple-light.less',
-          'dist/css/skins/_all-skins.css'       : 'build/less/skins/_all-skins.less'
-        }
-      },
-      // Skins minified
-      minifiedSkins: {
-        options: {
-          compress: true
-        },
-        files  : {
-          'dist/css/skins/skin-blue.min.css'        : 'build/less/skins/skin-blue.less',
-          'dist/css/skins/skin-black.min.css'       : 'build/less/skins/skin-black.less',
-          'dist/css/skins/skin-yellow.min.css'      : 'build/less/skins/skin-yellow.less',
-          'dist/css/skins/skin-green.min.css'       : 'build/less/skins/skin-green.less',
-          'dist/css/skins/skin-red.min.css'         : 'build/less/skins/skin-red.less',
-          'dist/css/skins/skin-purple.min.css'      : 'build/less/skins/skin-purple.less',
-          'dist/css/skins/skin-blue-light.min.css'  : 'build/less/skins/skin-blue-light.less',
-          'dist/css/skins/skin-black-light.min.css' : 'build/less/skins/skin-black-light.less',
-          'dist/css/skins/skin-yellow-light.min.css': 'build/less/skins/skin-yellow-light.less',
-          'dist/css/skins/skin-green-light.min.css' : 'build/less/skins/skin-green-light.less',
-          'dist/css/skins/skin-red-light.min.css'   : 'build/less/skins/skin-red-light.less',
-          'dist/css/skins/skin-purple-light.min.css': 'build/less/skins/skin-purple-light.less',
-          'dist/css/skins/_all-skins.min.css'       : 'build/less/skins/_all-skins.less'
-        }
-      }
-    },
-
-    // Uglify task info. Compress the js files.
-    uglify: {
-      options   : {
-        mangle : true,
-        output: {
-          comments: 'some'
-        },
-      },
-      production: {
-        files: {
-          'dist/js/adminlte.min.js': ['dist/js/adminlte.js']
-        }
-      }
-    },
-
-    // Concatenate JS Files
-    concat: {
-      options: {
-        separator: '\n\n',
-        banner   : '/*! AdminLTE app.js\n'
-        + '* ================\n'
-        + '* Main JS application file for AdminLTE v2. This file\n'
-        + '* should be included in all pages. It controls some layout\n'
-        + '* options and implements exclusive AdminLTE plugins.\n'
-        + '*\n'
-        + '* @author Colorlib\n'
-        + '* @support <https://github.com/ColorlibHQ/AdminLTE/issues>\n'
-        + '* @version <%= pkg.version %>\n'
-        + '* @repository <%= pkg.repository.url %>\n'
-        + '* @license MIT <http://opensource.org/licenses/MIT>\n'
-        + '*/\n\n'
-        + '// Make sure jQuery has been loaded\n'
-        + 'if (typeof jQuery === \'undefined\') {\n'
-        + 'throw new Error(\'AdminLTE requires jQuery\')\n'
-        + '}\n\n'
-      },
-      dist   : {
-        src : [
-          'build/js/BoxRefresh.js',
-          'build/js/BoxWidget.js',
-          'build/js/ControlSidebar.js',
-          'build/js/DirectChat.js',
-          'build/js/PushMenu.js',
-          'build/js/TodoList.js',
-          'build/js/Tree.js',
-          'build/js/Layout.js',
-        ],
-        dest: 'dist/js/adminlte.js'
-      }
-    },
-
-    // Replace image paths in AdminLTE without plugins
-    replace: {
-      withoutPlugins   : {
-        src         : ['dist/css/alt/AdminLTE-without-plugins.css'],
-        dest        : 'dist/css/alt/AdminLTE-without-plugins.css',
-        replacements: [
-          {
-            from: '../img',
-            to  : '../../img'
-          }
-        ]
-      },
-      withoutPluginsMin: {
-        src         : ['dist/css/alt/AdminLTE-without-plugins.min.css'],
-        dest        : 'dist/css/alt/AdminLTE-without-plugins.min.css',
-        replacements: [
-          {
-            from: '../img',
-            to  : '../../img'
-          }
-        ]
-      }
-    },
-
-    // Build the documentation files
-    includes: {
-      build: {
-        src    : ['*.html'], // Source files
-        dest   : 'documentation/', // Destination directory
-        flatten: true,
-        cwd    : 'documentation/build',
-        options: {
-          silent     : true,
-          includePath: 'documentation/build/include'
-        }
-      }
-    },
-
-    // Optimize images
-    image: {
-      dynamic: {
-        files: [
-          {
-            expand: true,
-            cwd   : 'build/img/',
-            src   : ['**/*.{png,jpg,gif,svg,jpeg}'],
-            dest  : 'dist/img/'
-          }
-        ]
-      }
-    },
-
-    // Validate JS code
-    jshint: {
-      options: {
-        jshintrc: 'build/js/.jshintrc'
-      },
-      grunt  : {
-        options: {
-          jshintrc: 'build/grunt/.jshintrc'
-        },
-        src    : 'Gruntfile.js'
-      },
-      core   : {
-        src: 'build/js/*.js'
-      },
-      demo   : {
-        src: 'dist/js/demo.js'
-      },
-      pages  : {
-        src: 'dist/js/pages/*.js'
-      }
-    },
-
-    jscs: {
-      options: {
-        config: 'build/js/.jscsrc'
-      },
-      core   : {
-        src: '<%= jshint.core.src %>'
-      },
-      pages  : {
-        src: '<%= jshint.pages.src %>'
-      }
-    },
-
-    // Validate CSS files
-    csslint: {
-      options: {
-        csslintrc: 'build/less/.csslintrc'
-      },
-      dist   : [
-        'dist/css/AdminLTE.css'
-      ]
-    },
-
-    // Validate Bootstrap HTML
-    bootlint: {
-      options: {
-        relaxerror: ['W005']
-      },
-      files  : ['pages/**/*.html', '*.html']
-    },
-
-    // Delete images in build directory
-    // After compressing the images in the build/img dir, there is no need
-    // for them
-    clean: {
-      build: ['build/img/*']
-    }
-  });
-
-  // Load all grunt tasks
-
-  // LESS Compiler
-  grunt.loadNpmTasks('grunt-contrib-less');
-  // Watch File Changes
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  // Compress JS Files
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  // Include Files Within HTML
-  grunt.loadNpmTasks('grunt-includes');
-  // Optimize images
-  grunt.loadNpmTasks('grunt-image');
-  // Validate JS code
-  grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-jscs');
-  // Delete not needed files
-  grunt.loadNpmTasks('grunt-contrib-clean');
-  // Lint CSS
-  grunt.loadNpmTasks('grunt-contrib-csslint');
-  // Lint Bootstrap
-  grunt.loadNpmTasks('grunt-bootlint');
-  // Concatenate JS files
-  grunt.loadNpmTasks('grunt-contrib-concat');
-  // Notify
-  grunt.loadNpmTasks('grunt-notify');
-  // Replace
-  grunt.loadNpmTasks('grunt-text-replace');
-
-  // Linting task
-  grunt.registerTask('lint', ['jshint', 'csslint', 'bootlint']);
-  // JS task
-  grunt.registerTask('js', ['concat', 'uglify']);
-  // CSS Task
-  grunt.registerTask('css', ['less:development', 'less:production', 'replace']);
-
-  // The default task (running 'grunt' in console) is 'watch'
-  grunt.registerTask('default', ['watch']);
-};

front/lib/AdminLTE/bower.json

@@ -1,64 +0,0 @@
-{
-  "name": "admin-lte",
-  "homepage": "https://adminlte.io",
-  "authors": [
-    "Abdullah Almsaeed <abdullah@almsaeedstudio.com>"
-  ],
-  "description": "Admin dashboard and control panel template",
-  "main": [
-    "index2.html",
-    "dist/css/AdminLTE.css",
-    "dist/js/adminlte.js",
-    "build/less/AdminLTE.less"
-  ],
-  "keywords": [
-    "css",
-    "js",
-    "html",
-    "template",
-    "admin",
-    "bootstrap",
-    "theme",
-    "backend",
-    "responsive"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "/.*",
-    "node_modules",
-    "bower_components",
-    "composer.json",
-    "documentation"
-  ],
-  "dependencies": {
-    "chart.js": "^1.0",
-    "ckeditor": "^4.7",
-    "bootstrap-colorpicker": "^2.5.1",
-    "bootstrap": "^3.4",
-    "jquery": "^3.4.1",
-    "datatables.net": "^1.10.15",
-    "datatables.net-bs": "^2.1.1",
-    "bootstrap-datepicker": "^1.7",
-    "bootstrap-daterangepicker": "^2.1.25",
-    "moment": "^2.18.1",
-    "fastclick": "^1.0.6",
-    "Flot": "flot#^0.8.3",
-    "fullcalendar": "^3.4",
-    "inputmask": "jquery.inputmask#^3.3.7",
-    "ion.rangeSlider": "ionrangeslider#^2.2",
-    "jvectormap": "^1.2.2",
-    "jquery-knob": "^1.2.13",
-    "morris.js": "^0.5.1",
-    "PACE": "pace#^1.0.2",
-    "select2": "^4.0.7",
-    "jquery-slimscroll": "slimscroll#^1.3.8",
-    "jquery-sparkline": "^2.1.3",
-    "font-awesome": "^4.7",
-    "Ionicons": "ionicons#^2.0.1",
-    "jquery-ui": "^1.12.1",
-    "seiyria-bootstrap-slider": "^10.6.2"
-  },
-  "resolutions": {
-    "jquery": "^3.4.1"
-  }
-}

front/lib/AdminLTE/bower_components/Flot/.bower.json

@@ -1,18 +0,0 @@
-{
-  "name": "Flot",
-  "version": "0.8.3",
-  "main": "jquery.flot.js",
-  "dependencies": {
-    "jquery": ">= 1.2.6"
-  },
-  "homepage": "https://github.com/flot/flot",
-  "_release": "0.8.3",
-  "_resolution": {
-    "type": "version",
-    "tag": "v0.8.3",
-    "commit": "453b017cc5acfd75e252b93e8635f57f4196d45d"
-  },
-  "_source": "https://github.com/flot/flot.git",
-  "_target": "^0.8.3",
-  "_originalSource": "flot"
-}