🔔 User Notifications v0.6

front/css/app.css

@@ -147,11 +147,16 @@
 
 .unread-notifications-bell
 {
-    opacity: 70%;
-    color: red;
     position: absolute;
     top: 3px;
-    /* display: none; */
+    margin-left: 15px;
+    display: none; 
+
+}
+
+.navbar-custom-menu .bg-yellow
+{
+    color: white !important;
 }
 
 .header-status-locked-db
@@ -706,6 +711,11 @@ height: 50px;
 /*                         report                            */
 /* --------------------------------------------------------- */
 
+#notificationData
+{
+    margin-bottom: 10px;
+}
+
 #notificationData textarea{
     width: 100%;
 }

front/js/modal.js

@@ -261,7 +261,7 @@ function checkNotification() {
 
                 // Find the oldest unread notification with level "interrupt"
                 const oldestInterruptNotification = response.find(notification => notification.read === 0 && notification.level === "interrupt");
-                const allUnreadNotification = response.filter(notification => notification.read === 0);
+                const allUnreadNotification = response.filter(notification => notification.read === 0 && notification.level === "alert");
 
                 if (oldestInterruptNotification) {
                     // Show modal dialog with the oldest unread notification
@@ -292,7 +292,8 @@ function checkNotification() {
                     });
                 }
 
-                $('#unread-notifications-bell-count').html(allUnreadNotification.length);   
+                handleUnreadNotifications(allUnreadNotification.length)
+
              
             }
         },
@@ -303,7 +304,106 @@ function checkNotification() {
     });
 }
 
+// Handling unread notifications favicon + bell floating number bublbe
+function handleUnreadNotifications(count) {
+    $('#unread-notifications-bell-count').html(count);
+    if (count > 0) {
+        $('#unread-notifications-bell-count').show();
+        // Change the favicon to show there are notifications
+        $('#favicon').attr('href', 'img/NetAlertX_logo_notification.png');
+        // Update the title to include the count
+        document.title = `(${count}) ` + originalTitle;
+    } else {
+        $('#unread-notifications-bell-count').hide();
+        // Change the favicon back to the original
+        $('#favicon').attr('href', 'img/NetAlertX_logo.png');
+        // Revert the title to the original title
+        document.title = originalTitle;
+    }
+}
+
+// Store the original title of the document
+var originalTitle = document.title;
+
+
 // Start checking for notifications periodically
 setInterval(checkNotification, 3000);
 
+// --------------------------------------------------
+// User notification handling methods
+// --------------------------------------------------
+
+const phpEndpoint = 'php/server/utilNotification.php';
+
+// --------------------------------------------------
+// Write a notification
+function writeNotification(content, level) {    
+
+    $.ajax({
+        url: phpEndpoint, // Change this to the path of your PHP script
+        type: 'GET',
+        data: {
+            action: 'write_notification',
+            content: content,
+            level: level
+        },
+        success: function(response) {
+            console.log('Notification written successfully.');
+        },
+        error: function(xhr, status, error) {
+            console.error('Error writing notification:', error);
+        }
+    });
+}
+
+// --------------------------------------------------
+// Write a notification
+function markNotificationAsRead(guid) {    
+  
+    $.ajax({
+      url: phpEndpoint,
+      type: 'GET',
+      data: {
+        action: 'mark_notification_as_read',
+        guid: guid
+      },
+      success: function(response) {
+        console.log(response);
+        // Perform any further actions after marking the notification as read here
+        showMessage(getString("Gen_Okay"))
+      },
+      error: function(xhr, status, error) {
+        console.error("Error marking notification as read:", status, error);
+      },
+      complete: function() {
+        // Perform any cleanup tasks here
+      }
+    });
+  }
+
+// --------------------------------------------------
+// Remove a notification
+function removeNotification(guid) {    
+  
+    $.ajax({
+      url: phpEndpoint,
+      type: 'GET',
+      data: {
+        action: 'remove_notification',
+        guid: guid
+      },
+      success: function(response) {
+        console.log(response);
+        // Perform any further actions after marking the notification as read here
+        showMessage(getString("Gen_Okay"))
+      },
+      error: function(xhr, status, error) {
+        console.error("Error removing notification:", status, error);
+      },
+      complete: function() {
+        // Perform any cleanup tasks here
+      }
+    });
+  }
+
 

front/js/tests.js

@@ -26,26 +26,7 @@ function lockDatabase(delay=20) {
 }
 
 
-function writeNotification(content, level) {
+
-
-    const phpEndpoint = 'php/server/utilNotification.php';
-
-    $.ajax({
-        url: phpEndpoint, // Change this to the path of your PHP script
-        type: 'GET',
-        data: {
-            action: 'write_notification',
-            content: content,
-            level: level
-        },
-        success: function(response) {
-            alert('Notification written successfully.');
-        },
-        error: function(xhr, status, error) {
-            console.error('Error writing notification:', error);
-        }
-    });
-}
 
 
 

front/js/ui_components.js

@@ -250,6 +250,33 @@ function updateIconPreview (inputId) {
   
 }
 
+
+// -----------------------------------------------------------------------------
+// Generic function to copy text to clipboard
+function copyToClipboard(buttonElement) {
+  const text = $(buttonElement).data('text');
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      showMessage('Copied to clipboard: ' + text, 1500);
+    }).catch(err => {
+      console.error('Failed to copy: ', err);
+    });
+  } else {
+    // Fallback to execCommand if Clipboard API is not available
+    const tempInput = document.createElement('input');
+    tempInput.value = text;
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    try {
+      document.execCommand('copy');
+      showMessage('Copied to clipboard: ' + text, 1500);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+    document.body.removeChild(tempInput);
+  }
+}
+
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------

front/multiEditCore.php

@@ -290,6 +290,8 @@ function executeAction(action, whereColumnName, key, targetColumns, newTargetCol
             // update API endpoints to refresh the UI
             updateApi()
 
+            writeNotification(`[Multi edit] Executed "${action}" on Columns "${targetColumns}" matching "${key}"`, 'info')
+
         } else {
             showMessage(getString('Gen_LockedDB'));
         }
@@ -313,9 +315,9 @@ function askDeleteSelectedDevices () {
 // Delete selected devices 
 function deleteSelectedDevices()
 { 
-  
+  macs_tmp = selectorMacs()
-  executeAction('delete', 'dev_MAC', selectorMacs() )
+  executeAction('delete', 'dev_MAC', macs_tmp )
-
+  writeNotification('[Multi edit] Manually deleted devices with MACs:' + macs_tmp, 'info')
 }
 
 

front/php/server/utilNotification.php

@@ -1,5 +1,9 @@
 <?php
 
+
+require dirname(__FILE__).'/../templates/timezone.php';
+
+
 // Check if the action parameter is set in the GET request
 if (isset($_GET['action'])) {
     // Collect GUID if provided
@@ -59,7 +63,7 @@ function write_notification($content, $level = "interrupt") {
     $guid = generate_guid();
 
     // Generate timestamp
-    $timestamp = date("Y-m-d H:i:s");
+    $timestamp = (new DateTime('now'))->format('Y-m-d H:i:s');
 
     // Escape content to prevent breaking JSON
     $escaped_content = json_encode($content);

front/php/templates/header.php

@@ -62,7 +62,7 @@ require dirname(__FILE__).'/security.php';
   <!-- Google Font -->
   <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
   <link rel="stylesheet" href="css/offline-font.css">
-  <link rel="icon" type="image/x-icon" href="img/NetAlertX_logo.png">
+  <link id="favicon" rel="icon" type="image/x-icon" href="img/NetAlertX_logo.png">
 
   <!-- For better UX on Mobile Devices using the Shortcut on the Homescreen -->
   <link rel="manifest" href="img/manifest.json">  
@@ -165,7 +165,7 @@ if ($ENABLED_DARKMODE === True) {
           <!-- Full Screen -->		 
           <li>
             <a id="notifications-button" href='userNotifications.php' role="button" span class='fa-solid fa-bell'></a>
-            <span  id="unread-notifications-bell-count" title="" class="badge bg-red unread-notifications-bell" >0</span>
+            <span  id="unread-notifications-bell-count" title="" class="badge bg-yellow unread-notifications-bell" >0</span>
           </li>	                
           <!-- Server Status -->
           <li>

front/php/templates/language/de_de.json

@@ -540,6 +540,8 @@
     "Network_Table_State": "Status",
     "Network_Title": "Netzwerk\u00fcbersicht",
     "Network_UnassignedDevices": "Nicht zugewiesene Ger\u00e4te",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "Das Standardpasswort ist <code>123456</code>. Um das Passwort zu \u00e4ndern, entweder <code>/app/back/pialert-cli</code> im Container starten oder <a onclick=\"toggleAllSettings()\" href=\"#SETPWD_RUN\"><code>SETPWD_RUN</code> Set password plugin</a> nutzen.",
     "PIALERT_WEB_PASSWORD_name": "Login-Passwort",
     "PIALERT_WEB_PROTECTION_description": "Ein Loginfenster wird angezeigt wenn aktiviert. Untere Beschreibung genau durchlesen falls Sie sich aus Ihrer Instanz aussperren.",
@@ -594,6 +596,7 @@
     "REPORT_WEBHOOK_description": "Enable webhooks for notifications. Webhooks help you to connect to a lot of 3rd party tools, such as IFTTT, Zapier or <a href=\"https://n8n.io/\" target=\"_blank\">n8n</a> to name a few. Check out this simple <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/WEBHOOK_N8N.md\" target=\"_blank\">n8n guide here</a> to get started. If enabled, configure related settings below.",
     "REPORT_WEBHOOK_name": "Enable Webhooks",
     "RandomMAC_hover": "Autodetected - indicates if the device randomizes it's MAC address.",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "Arp-scan is a command-line tool that uses the ARP protocol to discover and fingerprint IP hosts on the local network. An alternative to ARP scan is to enable the <a onclick=\"toggleAllSettings()\" href=\"#PIHOLE_RUN\"><code>PIHOLE_RUN</code>PiHole integration settings</a>. The arp-scan time itself depends on the number of IP addresses to check so set this up carefully with the appropriate network mask and interface. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on setting up VLANs, what VLANs are supported, or how to figure out the network mask and your interface.",
     "SMTP_FORCE_SSL_description": "Force SSL when connecting to your SMTP server.",
     "SMTP_FORCE_SSL_name": "Force SSL",
@@ -745,7 +748,7 @@
     "settings_other_scanners_icon": "fa-solid fa-recycle",
     "settings_other_scanners_label": "Andere Scanner",
     "settings_publishers": "",
-    "settings_publishers_icon": "fa-solid fa-comment-dots",
+    "settings_publishers_icon": "fa-solid fa-paper-plane",
     "settings_publishers_label": "Ver\u00f6ffentlicher",
     "settings_saved": "<br/>Settings saved to the <code>app.conf</code> file.<br/><br/>A time-stamped backup of the previous file created. <br/><br/> Reloading...<br/>",
     "settings_system_icon": "fa-solid fa-gear",

front/php/templates/language/en_us.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "State",
     "Network_Title": "Network overview",
     "Network_UnassignedDevices": "Unassigned devices",
+    "Notifications_All": "All Notifications",
+    "Notifications_Mark_All_Read": "Mark All Read",
     "PIALERT_WEB_PASSWORD_description": "The default password is <code>123456</code>. To change the password run <code>/app/back/pialert-cli</code> in the container or use the <a onclick=\"toggleAllSettings()\" href=\"#SETPWD_RUN\"><code>SETPWD_RUN</code> Set password plugin</a>.",
     "PIALERT_WEB_PASSWORD_name": "Login password",
     "PIALERT_WEB_PROTECTION_description": "When enabled a login dialog is displayed. Read below carefully if you get locked out of your instance.",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "Enable email",
     "REPORT_TITLE": "Report",
     "RandomMAC_hover": "Autodetected - indicates if the device randomizes it's MAC address.",
+    "Reports_Sent_Log": "Sent Reports Log",
     "SCAN_SUBNETS_description": "Most on-network scanners (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) rely on scanning specific network interfaces and subnets. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on this setting, especially VLANs, what VLANs are supported, or how to figure out the network mask and your interface. <br/> <br/> An alternative to on-network scanners is to enable some other Device scanners/importers that don't rely on NetAlert<sup>X</sup> having access to the network (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Note: The scan time itself depends on the number of IP addresses to check, so set this up carefully with the appropriate network mask and interface.",
     "SYSTEM_TITLE": "System Information",
     "Setting_Override": "Override value",
@@ -642,7 +645,7 @@
     "general_event_description": "The event you have triggered might take a while until background processes finish. The execution ended once the below execution queue empties (Check the <a  href='/maintenance.php#tab_Logging'>error log</a> if you encounter issues). <br/> <br/>  Execution queue:",
     "general_event_title": "Executing an ad-hoc event",
     "report_guid": "Notification guid:",
-    "report_guid_missing": "Linked notification not found. The selected notification might have been deleted during maintenance as specified in the <code>DBCLNP_NOTIFI_HIST</code> setting. The latest notification is displayed instead. The missing notification has the following GUID:",
+    "report_guid_missing": "Linked notification not found. There is a small delay between recently sent notifications and them being available. Referesh your page and cache after a few seconds. It's also possible the selected notification have been deleted during maintenance as specified in the <code>DBCLNP_NOTIFI_HIST</code> setting. <br/> <br/>The latest notification is displayed instead. The missing notification has the following GUID:",
     "report_select_format": "Select Format:",
     "report_time": "Notification time:",
     "run_event_icon": "fa-play",
@@ -664,7 +667,7 @@
     "settings_other_scanners_icon": "fa-solid fa-recycle",
     "settings_other_scanners_label": "Other scanners",
     "settings_publishers": "Enabled notification gateways - publishers, that will send a notification depending on your settings.",
-    "settings_publishers_icon": "fa-solid fa-comment-dots",
+    "settings_publishers_icon": "fa-solid fa-paper-plane",
     "settings_publishers_label": "Publishers",
     "settings_saved": "<br/>Settings saved. <br/><br/> Reloading... <br/><br/> <i class=\"ion ion-ios-loop-strong fa-spin fa-2x fa-fw\"></i> <br/>",
     "settings_system_icon": "fa-solid fa-gear",

front/php/templates/language/es_es.json

@@ -538,6 +538,8 @@
     "Network_Table_State": "Estado",
     "Network_Title": "Descripci\u00f3n general de la red",
     "Network_UnassignedDevices": "Dispositivos sin asignar",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "Por defecto, la contrase\u00f1a es <code>123456</code>.Para cambiar la contrase\u00f1a ejecute <code>/app/back/pialert-cli</code> en el contenedor o utilice el <a onclick=\"toggleAllSettings()\" href=\"#SETPWD_RUN\"><code>SETPWD_RUN</code> Establecer contrase\u00f1a plugin</a>.",
     "PIALERT_WEB_PASSWORD_name": "Contrase\u00f1a de inicio de sesi\u00f3n",
     "PIALERT_WEB_PROTECTION_description": "Cuando est\u00e1 habilitado, se muestra un cuadro de di\u00e1logo de inicio de sesi\u00f3n. Lea detenidamente a continuaci\u00f3n si se le bloquea el acceso a su instancia.",
@@ -592,6 +594,7 @@
     "REPORT_WEBHOOK_description": "Habilite webhooks para notificaciones. Los webhooks lo ayudan a conectarse a muchas herramientas de terceros, como IFTTT, Zapier o <a href=\"https://n8n.io/\" target=\"_blank\">n8n</a>, por nombrar algunas. Consulte esta sencilla <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/WEBHOOK_N8N.md\" target=\"_blank\">gu\u00eda de n8n aqu\u00ed</a> para obtener comenz\u00f3. Si est\u00e1 habilitado, configure los ajustes relacionados a continuaci\u00f3n.",
     "REPORT_WEBHOOK_name": "Habilitar webhooks",
     "RandomMAC_hover": "Autodetectado - indica si el dispositivo aleatoriza su direcci\u00f3n MAC.",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "La mayor\u00eda de los esc\u00e1neres en red (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) se basan en el escaneo de interfaces de red y subredes espec\u00edficas. Consulte la <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">documentaci\u00f3n sobre subredes</a> para obtener ayuda sobre esta configuraci\u00f3n, especialmente VLANs, qu\u00e9 VLANs son compatibles, o c\u00f3mo averiguar la m\u00e1scara de red y su interfaz. <br/> <br/>Una alternativa a los esc\u00e1neres en red es habilitar algunos otros esc\u00e1neres/importadores de dispositivos que no dependen de que NetAlert<sup>X</sup> tenga acceso a la red (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Nota: El tiempo de escaneo en s\u00ed depende del n\u00famero de direcciones IP a comprobar, as\u00ed que configure esto cuidadosamente con la m\u00e1scara de red y la interfaz adecuadas.",
     "SCAN_SUBNETS_name": "Subredes para escanear",
     "SMTP_FORCE_SSL_description": "Forzar SSL al conectarse a su servidor SMTP",
@@ -744,7 +747,7 @@
     "settings_other_scanners_icon": "fa-solid fa-recycle",
     "settings_other_scanners_label": "Otros esc\u00e1neres",
     "settings_publishers": "Puertas de enlace para las notificaci\u00f3n habilitadas: editores, que enviar\u00e1n una notificaci\u00f3n seg\u00fan su configuraci\u00f3n.",
-    "settings_publishers_icon": "fa-solid fa-comment-dots",
+    "settings_publishers_icon": "fa-solid fa-paper-plane",
     "settings_publishers_label": "Editores",
     "settings_saved": "<br/>Ajustes guardados. <br/><br/> Recargando... <br/><br/> <i class=\"ion ion-ios-loop-strong fa-spin fa-2x fa-fw\"></i> <br/>",
     "settings_system_icon": "fa-solid fa-gear",

front/php/templates/language/fr_fr.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "\u00c9tat",
     "Network_Title": "",
     "Network_UnassignedDevices": "",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "",
     "PIALERT_WEB_PASSWORD_name": "",
     "PIALERT_WEB_PROTECTION_description": "",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "",
     "REPORT_TITLE": "",
     "RandomMAC_hover": "",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "",
     "SYSTEM_TITLE": "Informations syst\u00e8me",
     "Setting_Override": "",

front/php/templates/language/it_it.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "Stato",
     "Network_Title": "Panoramica di Rete",
     "Network_UnassignedDevices": "Dispositivi non assegnati",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "La password predefinita \u00e8 <code>123456</code>. Per cambiare la password esegui <code>/app/back/pialert-cli</code> nel container o usa il <a onclick=\"toggleAllSettings()\" href=\"#SETPWD_RUN\">plugin per impostare la password <code>SETPWD_RUN</code></a>.",
     "PIALERT_WEB_PASSWORD_name": "Password login",
     "PIALERT_WEB_PROTECTION_description": "Se abilitato, una finestra di login viene mostrata. Leggi attentamente qui sotto nel caso in cui si rimanga bloccati fuori dalla propria istanza.",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "Abilita email",
     "REPORT_TITLE": "Report",
     "RandomMAC_hover": "Autorilevato - indica se l'indirizzo MAC del dispositivo \u00e8 casuale.",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "La maggior parte degli scanner di rete (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) si basano sulla scansione di interfacce di rete e sottoreti specifiche. Consulta la <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">documentazione sulle sottoreti</a> per assistenza su questa impostazione, in particolare VLAN, quali VLAN sono supportate o come individuare la maschera di rete e l'interfaccia. <br/> <br/> Un'alternativa agli scanner in rete \u00e8 abilitare altri scanner/importatori di dispositivi che non si affidano a NetAlert<sup>X</sup> che hanno accesso alla rete (UNIFI, dhcp.leases , PiHole, ecc.). <br/> <br/> Nota: il tempo di scansione stesso dipende dal numero di indirizzi IP da controllare, quindi impostarlo attentamente con la maschera di rete e l'interfaccia appropriate.",
     "SYSTEM_TITLE": "Informazioni di Sistema",
     "Setting_Override": "Sovrascrivi valore",
@@ -664,7 +667,7 @@
     "settings_other_scanners_icon": "fa-solid fa-recycle",
     "settings_other_scanners_label": "Altri scanner",
     "settings_publishers": "Gateway-Publishers di notifica abilitati, che inviano notifiche in base alle tue impostazioni.",
-    "settings_publishers_icon": "fa-solid fa-comment-dots",
+    "settings_publishers_icon": "fa-solid fa-paper-plane",
     "settings_publishers_label": "Publisher",
     "settings_saved": "<br/>Impostazioni salvate. <br/><br/> Ricaricamento in corso... <br/><br/> <i class=\"ion ion-ios-loop-strong fa-spin fa-2x fa-fw\"></i> <br/>",
     "settings_system_icon": "fa-solid fa-gear",

front/php/templates/language/nb_no.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "",
     "Network_Title": "",
     "Network_UnassignedDevices": "",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "",
     "PIALERT_WEB_PASSWORD_name": "",
     "PIALERT_WEB_PROTECTION_description": "",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "",
     "REPORT_TITLE": "",
     "RandomMAC_hover": "",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "",
     "SYSTEM_TITLE": "",
     "Setting_Override": "",

front/php/templates/language/pl_pl.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "",
     "Network_Title": "",
     "Network_UnassignedDevices": "",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "",
     "PIALERT_WEB_PASSWORD_name": "",
     "PIALERT_WEB_PROTECTION_description": "",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "",
     "REPORT_TITLE": "",
     "RandomMAC_hover": "",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "",
     "SYSTEM_TITLE": "",
     "Setting_Override": "",

front/php/templates/language/pt_br.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "",
     "Network_Title": "",
     "Network_UnassignedDevices": "",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "",
     "PIALERT_WEB_PASSWORD_name": "",
     "PIALERT_WEB_PROTECTION_description": "",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "",
     "REPORT_TITLE": "",
     "RandomMAC_hover": "",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "",
     "SYSTEM_TITLE": "",
     "Setting_Override": "",

front/php/templates/language/ru_ru.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435",
     "Network_Title": "\u041e\u0431\u0437\u043e\u0440 \u0441\u0435\u0442\u0438",
     "Network_UnassignedDevices": "\u041d\u0435\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "\u041f\u0430\u0440\u043e\u043b\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e: <code>123456</code>. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u044c, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 <code>/app/back/pialert-cli</code> \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a onclick=\"toggleAllSettings()\" href=\"#SETPWD_RUN\"><code>SETPWD_RUN. </code> \u041f\u043b\u0430\u0433\u0438\u043d \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u0440\u043e\u043b\u044f</a>.",
     "PIALERT_WEB_PASSWORD_name": "\u041f\u0430\u0440\u043e\u043b\u044c \u0432\u0445\u043e\u0434\u0430",
     "PIALERT_WEB_PROTECTION_description": "\u041f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043d\u0438\u0436\u0435, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d.",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u043b. \u043f\u043e\u0447\u0442\u0443",
     "REPORT_TITLE": "\u041e\u0442\u0447\u0435\u0442",
     "RandomMAC_hover": "\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u043e \u2014 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439 MAC-\u0430\u0434\u0440\u0435\u0441.",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0441\u043a\u0430\u043d\u0435\u0440\u043e\u0432 (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0435\u0439. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u043e\u0434\u0441\u0435\u0442\u044f\u043c</a>, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e VLAN, \u043a\u0430\u043a\u0438\u0435 VLAN \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u043b\u0438 \u043a\u0430\u043a \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043c\u0430\u0441\u043a\u0435 \u0441\u0435\u0442\u0438 \u0438 \u0441\u0432\u043e\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. <br/> <br/> \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 \u0441\u0435\u0442\u0435\u0432\u044b\u043c \u0441\u043a\u0430\u043d\u0435\u0440\u0430\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043a\u0430\u043d\u0435\u0440\u043e\u0432/\u0438\u043c\u043f\u043e\u0440\u0442\u0435\u0440\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 NetAlert<sup>X</sup>, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0435\u0442\u0438 (UNIFI, dhcp.leases , PiHole \u0438 \u0434\u0440.). <br/> <br/> \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435. \u0421\u0430\u043c\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u044b\u0445 IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e, \u0443\u043a\u0430\u0437\u0430\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043c\u0430\u0441\u043a\u0443 \u0441\u0435\u0442\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.",
     "SYSTEM_TITLE": "\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f",
     "Setting_Override": "\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435",
@@ -664,7 +667,7 @@
     "settings_other_scanners_icon": "fa-solid fa-recycle",
     "settings_other_scanners_label": "\u0414\u0440\u0443\u0433\u0438\u0435 \u0441\u043a\u0430\u043d\u0435\u0440\u044b",
     "settings_publishers": "\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u0448\u043b\u044e\u0437\u044b \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 - \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0430\u0448\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.",
-    "settings_publishers_icon": "fa-solid fa-comment-dots",
+    "settings_publishers_icon": "fa-solid fa-paper-plane",
     "settings_publishers_label": "\u0423\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f",
     "settings_saved": "<br/>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044b. <br/><br/> \u041f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430... <br/><br/> <i class=\"ion ion-ios-loop-strong fa-spin fa-2x fa-fw\"></i> <br/>",
     "settings_system_icon": "fa-solid fa-gear",

front/php/templates/language/zh_cn.json

@@ -503,6 +503,8 @@
     "Network_Table_State": "",
     "Network_Title": "",
     "Network_UnassignedDevices": "",
+    "Notifications_All": "",
+    "Notifications_Mark_All_Read": "",
     "PIALERT_WEB_PASSWORD_description": "",
     "PIALERT_WEB_PASSWORD_name": "",
     "PIALERT_WEB_PROTECTION_description": "",
@@ -539,6 +541,7 @@
     "REPORT_MAIL_name": "",
     "REPORT_TITLE": "",
     "RandomMAC_hover": "",
+    "Reports_Sent_Log": "",
     "SCAN_SUBNETS_description": "",
     "SYSTEM_TITLE": "",
     "Setting_Override": "",

front/plugins/README.md

@@ -6,7 +6,7 @@
 
 ## Plugin types
 
-If you want to discover or import devices into the application enable some of the `🔍 dev scanner` plugins. The next step is to pick a notification plugin, or `💬 publisher` plugin, to get notified about network changes. If you don't see a publisher you'd like to use, look at the  [📚_publisher_apprise](/front/plugins/_publisher_apprise/) plugin which is a proxy for over 80 notification services. 
+If you want to discover or import devices into the application enable some of the `🔍 dev scanner` plugins. The next step is to pick a notification plugin, or `▶️ publisher` plugin, to get notified about network changes. If you don't see a publisher you'd like to use, look at the  [📚_publisher_apprise](/front/plugins/_publisher_apprise/) plugin which is a proxy for over 80 notification services. 
 
 ### Enabling plugins
 
@@ -31,7 +31,7 @@ Device-detecting plugins insert values into the `CurrentScan` database table.  T
 
 | ID            | Type           | Description                  | Required | Data source        | Detailed docs                                                       |
 |---------------|----------------|------------------------------|----------|--------------------|---------------------------------------------------------------------|
-| `APPRISE`       | 💬 publisher   | Apprise publisher plugin     |          | Script             | [📚_publisher_apprise](/front/plugins/_publisher_apprise/)          |
+| `APPRISE`       | ▶️ publisher   | Apprise publisher plugin     |          | Script             | [📚_publisher_apprise](/front/plugins/_publisher_apprise/)          |
 | `ARPSCAN`       | 🔍 dev scanner | ARP scan plugin              |          | Script             | [📚arp_scan](/front/plugins/arp_scan/)                              |
 | `CSVBCKP`       | ⚙ system       | CSV backup plugin            |          | Script             | [📚csv_backup](/front/plugins/csv_backup/)                          |
 | `DBCLNP`        | ⚙ system       | Database cleanup plugin      |  Yes*    | Script             | [📚db_cleanup](/front/plugins/db_cleanup/)                          |
@@ -41,24 +41,24 @@ Device-detecting plugins insert values into the `CurrentScan` database table.  T
 | `INTRNT`        | 🔍 dev scanner | Internet IP scanner          |          | Script             | [📚internet_ip](/front/plugins/internet_ip/)                        |
 | `INTRSPD`       | ♻ other        | Internet speed test plugin   |          | Script             | [📚internet_speedtest](/front/plugins/internet_speedtest/)          |
 | `MAINT`         | ⚙ system       | Maintenance plugin           |          | Script             | [📚maintenance](/front/plugins/maintenance/)                        |
-| `MQTT`          | 💬 publisher   | MQTT publisher plugin        |          | Script             | [📚_publisher_mqtt](/front/plugins/_publisher_mqtt/)                |
+| `MQTT`          | ▶️ publisher   | MQTT publisher plugin        |          | Script             | [📚_publisher_mqtt](/front/plugins/_publisher_mqtt/)                |
 | `NEWDEV`        | ⚙ system       | New device template          |  Yes     | Template           | [📚newdev_template](/front/plugins/newdev_template/)                |
 | `NMAP`          | ♻ other        | Nmap scan plugin             |          | Script             | [📚nmap_scan](/front/plugins/nmap_scan/)                            |
 | `NMAPDEV`       | 🔍 dev scanner | Nmap device scan plugin      |          | Script             | [📚nmap_dev_scan](/front/plugins/nmap_dev_scan/)                    |
 | `NSLOOKUP`      | ♻ other        | NSLookup scan plugin         |          | Script             | [📚nslookup_scan](/front/plugins/nslookup_scan/)                    |
 | `NTFPRCS`       | ⚙ system       | Notification processing      |  Yes     | Template           | [📚notification_processing](/front/plugins/notification_processing/)|
-| `NTFY`          | 💬 publisher   | NTFY publisher plugin        |          | Script             | [📚_publisher_ntfy](/front/plugins/_publisher_ntfy/)                |
+| `NTFY`          | ▶️ publisher   | NTFY publisher plugin        |          | Script             | [📚_publisher_ntfy](/front/plugins/_publisher_ntfy/)                |
 | `PHOLUS`        | ♻ other        | Pholus scan plugin           |          | Script             | [📚pholus_scan](/front/plugins/pholus_scan/)                        |
 | `PIHOLE`        | 🔍 dev scanner | Pi-hole scan plugin          |          | SQLite DB          | [📚pihole_scan](/front/plugins/pihole_scan/)                        |
-| `PUSHSAFER`     | 💬 publisher   | Pushsafer publisher plugin   |          | Script             | [📚_publisher_pushsafer](/front/plugins/_publisher_pushsafer/)      |
+| `PUSHSAFER`     | ▶️ publisher   | Pushsafer publisher plugin   |          | Script             | [📚_publisher_pushsafer](/front/plugins/_publisher_pushsafer/)      |
-| `PUSHOVER`      | 💬 publisher   | Pushover publisher plugin    |          | Script             | [📚_publisher_pushover](/front/plugins/_publisher_pushover/)        |
+| `PUSHOVER`      | ▶️ publisher   | Pushover publisher plugin    |          | Script             | [📚_publisher_pushover](/front/plugins/_publisher_pushover/)        |
 | `SETPWD`        | ⚙ system       | Set password template        |  Yes     | Template           | [📚set_password](/front/plugins/set_password/)                      |
-| `SMTP`          | 💬 publisher   | Email publisher plugin       |          | Script             | [📚_publisher_email](/front/plugins/_publisher_email/)              |
+| `SMTP`          | ▶️ publisher   | Email publisher plugin       |          | Script             | [📚_publisher_email](/front/plugins/_publisher_email/)              |
 | `SNMPDSC`       | 🔍 dev scanner | SNMP discovery plugin        |          | Script             | [📚snmp_discovery](/front/plugins/snmp_discovery/)                  |
 | `UNDIS`         | ♻ other        | Undiscoverables scan plugin  |          | Script             | [📚undiscoverables](/front/plugins/undiscoverables/)                |
 | `UNFIMP`        | 🔍 dev scanner | UniFi import plugin          |          | Script             | [📚unifi_import](/front/plugins/unifi_import/)                      |
 | `VNDRPDT`       | ⚙ system       | Vendor update plugin         |          | Script             | [📚vendor_update](/front/plugins/vendor_update/)                    |
-| `WEBHOOK`       | 💬 publisher   | Webhook publisher plugin     |          | Script             | [📚_publisher_webhook](/front/plugins/_publisher_webhook/)          |
+| `WEBHOOK`       | ▶️ publisher   | Webhook publisher plugin     |          | Script             | [📚_publisher_webhook](/front/plugins/_publisher_webhook/)          |
 | `WEBMON`        | ♻ other        | Website monitor plugin       |          | Script             | [📚website_monitor](/front/plugins/website_monitor/)                |
 
 

front/plugins/node_sync/.gitignore

@@ -0,0 +1 @@
+front/plugins/node_sync/

front/report.php

@@ -5,8 +5,7 @@
 #  Open Source Network Guard / WIFI & LAN intrusion detector                      #  
 #                                                                                 #
 #  report.php - Front module. Server side. Manage Devices                         #
-#---------------------------------------------------------------------------------#
+#---------------------------------------------------------------------------------#          #
-#    Puche      2021        pi.alert.application@gmail.com   GNU GPLv3            #
 #    jokob-sk   2022        jokob.sk@gmail.com               GNU GPLv3            #
 #    leiweibau  2022        https://github.com/leiweibau     GNU GPLv3            #
 #    cvc90      2023        https://github.com/cvc90         GNU GPLv3            #
@@ -22,58 +21,66 @@
     <section class="content-header">
     <?php require 'php/templates/notification.php'; ?>
       <h1 id="pageTitle">
-        <i class="fa fa-flag"></i>
+        <i class="fa fa-paper-plane"></i>
-        <?= lang('REPORT_TITLE') ;?>	
+        <?= lang('Navigation_Report') ;?>	
       </h1>
     </section>
 
     <!-- Main content ---------------------------------------------------------- -->
-    <section class="content">	
+    <section class="content tab-content">	
+
+      <div class="box box-gray col-xs-12" >
+        <div class="box-header">
+              <h3 class="box-title text-aqua"><?= lang('Reports_Sent_Log');?></h3>
+        </div>
+        <div class="box-body  table-responsive ">
+          <!-- Top level <> buttons, Format selection etc.  -->
+          <div class="col-sm-2">
+            <!-- Display data and navigation buttons -->
+            <div id="notificationContainer">
+              <div id="navigationButtons">
+                    <button class="btn btn-default text-gray50" id="prevButton">
+                      <i class="fa fa-chevron-left"></i>
+                    </button>
+                    <span id="notificationOutOff"></span>
+                    <button class="btn btn-default text-gray50" id="nextButton">
+                      <i class="fa fa-chevron-right"></i>
+                    </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Select format -->
+          <div class="col-sm-2 ">
+            <label for="formatSelect">
+              <?= lang('report_select_format') ;?>
+            </label>
+            <select id="formatSelect" class="pointer">
+                <option value="HTML">HTML</option>
+                <option value="JSON">JSON</option>
+                <option value="Text">Text</option>        
+            </select>
+          </div>
+
+
+          <div class="col-sm-4">
+            <label><?= lang('report_time') ;?></label>
+            <span id="timestamp"></span>
+          </div>
+
+          <div class="col-sm-4">
+            <label><?= lang('report_guid') ;?></label>
+            <span id="guid"></span>
+          </div>
+
+
+          <div class="col-sm-12" id="notificationData">
+              <!-- Data will be displayed here -->
+          </div>
 
-    <div class="col-sm-2">
-      <!-- Display data and navigation buttons -->
-      <div id="notificationContainer">
-        <div id="navigationButtons">
-              <button class="btn btn-default text-gray50" id="prevButton">
-                <i class="fa fa-chevron-left"></i>
-              </button>
-              <span id="notificationOutOff"></span>
-              <button class="btn btn-default text-gray50" id="nextButton">
-                <i class="fa fa-chevron-right"></i>
-              </button>
         </div>
       </div>
     </div>
-
-    <!-- Select format -->
-    <div class="col-sm-2 ">
-      <label for="formatSelect">
-        <?= lang('report_select_format') ;?>
-      </label>
-      <select id="formatSelect" class="pointer">
-          <option value="HTML">HTML</option>
-          <option value="JSON">JSON</option>
-          <option value="Text">Text</option>        
-      </select>
-    </div>
-
-
-    <div class="col-sm-4">
-      <label><?= lang('report_time') ;?></label>
-      <span id="timestamp"></span>
-    </div>
-
-    <div class="col-sm-4">
-      <label><?= lang('report_guid') ;?></label>
-      <span id="guid"></span>
-    </div>
-
-
-    <div class="col-sm-12" id="notificationData">
-        <!-- Data will be displayed here -->
-    </div>
-
-  </div>
   </section>
 
   <!-- JavaScript to fetch and display data based on selected format -->

front/userNotifications.php

@@ -10,127 +10,192 @@ require 'php/templates/header.php';
 <script src="lib/AdminLTE/bower_components/datatables.net/js/dataTables.select.min.js"></script>
 
 <div id="notifications" class="content-wrapper">
-<div class="box-body table-responsive">
+
-    <table id="notificationsTable" class="table table-bordered table-hover table-striped display">
+  
-        <thead>
+  <!-- Content header--------------------------------------------------------- -->
+  <section class="content-header ">
+    
+    <h1 id="pageTitle">
+      <i class="fa fa-bell"></i>     
+      <?= lang('Navigation_Notifications');?>
+    </h1>
+
+    </section>
+
+  <section class="content">
+    <div class="box box-gray col-xs-12" >
+      <div class="box-header">
+       <h3 class="box-title text-aqua"><?= lang('Notifications_All');?></h3>
+      </div>
+      <div class="box-body table-responsive">
+        <table id="notificationsTable" class="table table-bordered table-hover table-striped display">
+          <thead>
             <tr>
-                <th>Timestamp</th>
+              <th>Timestamp</th>
-                <th>GUID</th>
+              <th>GUID</th>
-                <th>Read</th>
+              <th>Read</th>
-                <th>Level</th>
+              <th>Level</th>
-                <th>Content</th>
+              <th>Content</th>
+              <th>Actions</th>
             </tr>
-        </thead>
+          </thead>
-        <tbody>
+          <tbody>
             <!-- Data will be inserted here by DataTables -->
-        </tbody>
+          </tbody>
-    </table>
+        </table> 
 
-    <button id="clearNotificationsBtn" class="btn btn-danger">Clear All Notifications</button>
+        
-    <button id="notificationsMarkAllRead" class="btn btn-default">Mark All Read</button>
 
+      </div>
+    </div>
+  </section>
+  <section  class="content">
+    <button id="clearNotificationsBtn" class="btn btn-danger"><?= lang("Gen_DeleteAll");?></button>
+    <button id="notificationsMarkAllRead" class="btn btn-default"><?= lang("Notifications_Mark_All_Read");?></button>
+  </section>
+
+  
 </div>
 
-</div>
+
 <script>
-    function fetchData(callback) {
+  function fetchData(callback) {
-        $.ajax({
+    $.ajax({
-            url: '/api/user_notifications.json?nocache=' + Date.now(),
+      url: '/api/user_notifications.json?nocache=' + Date.now(),
-            method: 'GET',
+      method: 'GET',
-            dataType: 'json',
+      dataType: 'json',
-            success: function(response) {
+      success: function(response) {
-                console.log(response);
+        console.log(response);
-                if (response == "[]" || response == "") {
+        if (response == "[]" || response == "") {
-                    callback([]);
+          callback([]);
-                } else if (response.error) {
+        } else if (response.error) {
-                    alert("Error: " + response.error);
+          alert("Error: " + response.error);
-                    callback([]);
+          callback([]);
-                } else if (!Array.isArray(response)) {
+        } else if (!Array.isArray(response)) {
-                    alert("Unexpected response format");
+          alert("Unexpected response format");
-                    callback([]);
+          callback([]);
-                } else {
+        } else {
-                    callback(response);
+          callback(response);
-                }
+        }
-            },
+      },
-            error: function(xhr, status, error) {
+      error: function(xhr, status, error) {
-                console.log("An error occurred while fetching data: " + error);
+        console.log("An error occurred while fetching data: " + error);
-                callback([]);
+        callback([]);
-            }
+      }
-        });
-    }
-
-    $(document).ready(function() {
-        const table = $('#notificationsTable').DataTable({
-            "columns": [
-                { "data": "timestamp" },
-                { "data": "guid" },
-                { "data": "read" },
-                { "data": "level" },
-                {
-                    "data": "content",
-                    "render": function(data, type, row) {
-                        if (data.includes("Report:")) {
-                                var guid = data.split(":")[1].trim();
-                                return `<a href="/report.php?guid=${guid}">Click to see Sent Report</a>`;
-                            } else {
-                                return data;
-                            }
-                    }
-                }
-            ],
-            "columnDefs": [
-                { "width": "15%", "targets": [0] }, // Set width of the first four columns to 10%
-                { "width": "20%", "targets": [1] }, // Set width of the first four columns to 10%
-                { "width": "5%", "targets": [2, 3] }, // Set width of the first four columns to 10%
-                { "width": "50%", "targets": 4 } // Set width of the "Content" column to 60%
-            ]
-        });
-
-        fetchData(function(data) {
-            table.clear().rows.add(data).draw();
-        });
-
-
-        const phpEndpoint = 'php/server/utilNotification.php';
-
-        // Function to clear all notifications
-        $('#clearNotificationsBtn').click(function() {
-            $.ajax({
-                url: phpEndpoint,
-                type: 'GET',
-                data: {
-                    action: 'notifications_clear'
-                },
-                success: function(response) {
-                    // Clear the table and reload data
-                    table.clear().draw();
-                },
-                error: function(xhr, status, error) {
-                    console.log("An error occurred while clearing notifications: " + error);
-                    // You can display an error message here if needed
-                }
-            });
-        });
-
-        // Function to clear all notifications
-        $('#notificationsMarkAllRead').click(function() {
-            $.ajax({
-                url: phpEndpoint,
-                type: 'GET',
-                data: {
-                    action: 'notifications_mark_all_read'
-                },
-                success: function(response) {
-                    // Clear the table and reload data
-                    table.clear().draw();
-                },
-                error: function(xhr, status, error) {
-                    console.log("An error occurred while clearing notifications: " + error);
-                    // You can display an error message here if needed
-                }
-            });
-        });
     });
+  }
+
+  $(document).ready(function() {
+    const table = $('#notificationsTable').DataTable({
+      "columns": [
+        { "data": "timestamp" , 
+          "render": function(data, type, row) {
+
+            var result = data.toString(); // Convert to string
+            if (result.includes("+")) { // Check if timezone offset is present
+                result = result.split('+')[0]; // Remove timezone offset
+            }
+            return result;
+          }
+        },
+        { "data": "guid", 
+          "render": function(data, type, row) {
+            return `<button class="copy-btn btn btn-info btn-flat" data-text="${data}" title="copy" onclick="copyToClipboard(this)">
+                    <i class="fa-solid fa-copy"></i>
+                  </button>`;
+          }
+        },
+        { "data": "read",
+         "render": function(data, type, row) {
+            if (data == 0) {                            
+              return `<button class="mark-read-btn btn btn-info btn-flat" onclick="markNotificationAsRead('${row.guid}', this)">
+                        Mark as Read
+                      </button>`;
+            } else {
+              return `<i class="fa-solid fa-check"></i>`;
+            }
+          }
+          
+        },
+        { "data": "level" },
+        {
+          "data": "content",
+          "render": function(data, type, row) {
+            if (data.includes("Report:")) {
+                var guid = data.split(":")[1].trim();
+                return `<a href="/report.php?guid=${guid}">Go to Report</a>`;
+              } else {
+                return data;
+              }
+          }
+        },
+        {
+            targets: -1, // Target the last column
+            data: 'guid', // Assuming 'guid' is the key for the unique identifier
+              render: function(data, type, row) {
+                  return `<button class="mark-read-btn btn btn-danger btn-flat" onclick="removeNotification('${data}', this)">
+                            <i class="fa-solid fa-trash"></i>
+                          </button>`;
+              }
+        }
+      ],
+      "columnDefs": [
+        { "width": "15%", "targets": [0] }, // Set width of the first four columns to 10%
+        { "width": "5%", "targets": [1] }, // Set width of the first four columns to 10%
+        { "width": "5%", "targets": [2, 3] }, // Set width of the first four columns to 10%
+        { "width": "50%", "targets": 4 }, // Set width of the "Content" column to 60%
+        
+      ],
+      "order": [[0, "desc"]]
+    });
+
+    fetchData(function(data) {
+      table.clear().rows.add(data).draw();
+    });
+
+
+    const phpEndpoint = 'php/server/utilNotification.php';
+
+    // Function to clear all notifications
+    $('#clearNotificationsBtn').click(function() {
+      $.ajax({
+        url: phpEndpoint,
+        type: 'GET',
+        data: {
+          action: 'notifications_clear'
+        },
+        success: function(response) {
+          // Clear the table and reload data
+          window.location.reload()
+        },
+        error: function(xhr, status, error) {
+          console.log("An error occurred while clearing notifications: " + error);
+          // You can display an error message here if needed
+        }
+      });
+    });
+
+    // Function to clear all notifications
+    $('#notificationsMarkAllRead').click(function() {
+      $.ajax({
+        url: phpEndpoint,
+        type: 'GET',
+        data: {
+          action: 'notifications_mark_all_read'
+        },
+        success: function(response) {
+          // Clear the table and reload data
+          window.location.reload()
+        },
+        error: function(xhr, status, error) {
+          console.log("An error occurred while clearing notifications: " + error);
+          // You can display an error message here if needed
+        }
+      });
+    });
+
+   
+  });
 </script>
 
 <?php