Refactor API endpoints and update invoice generation

- Updated API calls in equipment.php, equipment_manage.php, and equipments_mass_update.php to use v2 endpoints.
- Changed payload decoding from decode_payload to json_decode for consistency.
- Enhanced invoice generation in factuur.php and webhook files to use a new email template and PDF structure.
- Added new email and PDF templates for invoices to improve formatting and readability.
- Improved marketing folder handling in marketing.php with better payload management.
- Updated CSS for marketing to enhance UI interactions.
- Added JavaScript checks for browser compatibility in softwaretool.php.
- Adjusted user permissions in settingsprofiles.php to reflect new features.

assets/softwaretool.js

@@ -15,6 +15,71 @@ let reader;
 let readableStreamClosed;
 let keepReading = true;
 
+// Browser compatibility check
+let isSerialSupported = false;
+
+// Check browser compatibility on page load
+function checkBrowserCompatibility() {
+    isSerialSupported = 'serial' in navigator;
+    
+    if (!isSerialSupported) {
+        // Show warning banner
+        showBrowserWarningBanner();
+        // Disable connect button
+        disableSerialFunctionality();
+    }
+    
+    return isSerialSupported;
+}
+
+function showBrowserWarningBanner() {
+    const connectDevice = document.getElementById("connectdevice");
+    if (!connectDevice) return;
+    
+    const warningBanner = document.createElement("div");
+    warningBanner.id = "browserWarningBanner";
+    warningBanner.style.cssText = `
+        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+        color: white;
+        padding: 15px 20px;
+        border-radius: 8px;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+        gap: 15px;
+        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
+    `;
+    
+    warningBanner.innerHTML = `
+        <i class="fa-solid fa-exclamation-triangle" style="font-size: 24px;"></i>
+        <div style="flex: 1;">
+            <strong style="display: block; margin-bottom: 5px; font-size: 16px;">Browser Not Supported</strong>
+            <p style="margin: 0; font-size: 14px; opacity: 0.95;">
+                Please use <strong>Chrome</strong>, <strong>Edge</strong>, or <strong>Opera</strong> to access device connectivity features.
+            </p>
+        </div>
+    `;
+    
+    connectDevice.parentNode.insertBefore(warningBanner, connectDevice);
+}
+
+function disableSerialFunctionality() {
+    const connectButton = document.getElementById("connectButton");
+    if (connectButton) {
+        connectButton.disabled = true;
+        connectButton.style.opacity = "0.5";
+        connectButton.style.cursor = "not-allowed";
+        connectButton.title = "Browser is not supported. Please use Chrome, Edge, or Opera.";
+    }
+}
+
+// Call on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', checkBrowserCompatibility);
+} else {
+    checkBrowserCompatibility();
+}
+
 // Function to log communication to API (reused from scripts.js)
 async function logCommunication(data, direction) {
     // Only log if debug mode is enabled
@@ -69,6 +134,13 @@ function progressBar(percentage, message, color){
 
 // Connect device for software tool
 async function connectDeviceForSoftware() {
+    // Browser compatibility check
+    if (!isSerialSupported) {
+        progressBar("100", "Browser not supported - Please use Chrome, Edge, or Opera", "#dc3545");
+        await logCommunication('Connection attempt failed: Web Serial API not supported in browser', 'error');
+        return;
+    }
+    
     //clear input
     readBar.innerHTML = '';
     serialResultsDiv.innerHTML = '';
@@ -162,11 +234,18 @@ async function connectDeviceForSoftware() {
     } catch (error) {
         await logCommunication(`Connection error: ${error.message}`, 'error');
         
-        // Check for specific "No port selected" error and show user-friendly message
-        if (error.message && error.message.includes('No port selected by the user')) {
-            progressBar("100", "No device selected, please try again", "#ff6666");
+        // Improved error messages with specific cases
+        if (error.name === 'NotSupportedError' || !navigator.serial) {
+            progressBar("100", "Browser not supported - Please use Chrome, Edge, or Opera", "#dc3545");
+        } else if (error.message && error.message.includes('No port selected by the user')) {
+            progressBar("100", "No device selected - Please try again", "#ff6666");
+        } else if (error.name === 'NetworkError') {
+            progressBar("100", "Connection failed - Please check device connection", "#ff6666");
+        } else if (error.name === 'InvalidStateError') {
+            progressBar("100", "Port already in use - Refreshing page...", "#ff9800");
+            setTimeout(() => location.reload(), 2000);
         } else {
-            progressBar("100", "Error: " + error.message, "#ff6666");
+            progressBar("100", "Connection error: " + error.message, "#ff6666");
         }
     }
 }