system notification

app/include_ending.php

@@ -29,7 +29,69 @@
     window._socket.on('disconnect', function () {
         console.log('[socket] disconnected');
     });
+
+    // ── Real-time notifications ───────────────────────────────────────────────
+    // PHP emits { title, message, type } where type is 'success'|'info'|'warning'|'danger'
+    window._socket.on('notification', function (data) {
+        var title   = data.title   || '';
+        var message = data.message || '';
+        var type    = data.type    || 'info';
+        show_toast(title, message, type);
+        if (typeof add_notification === 'function') {
+            add_notification(title, message, type);
+        }
+    });
 })();
+
+// ── show_toast(title, message, type) ─────────────────────────────────────────
+// Renders a Bootstrap 5 toast in the top-right corner.
+// type: 'success' | 'info' | 'warning' | 'danger'
+function show_toast(title, message, type) {
+    type = type || 'info';
+
+    var icon_map = {
+        success: 'ti-circle-check text-success',
+        info:    'ti-info-circle text-info',
+        warning: 'ti-alert-triangle text-warning',
+        danger:  'ti-circle-x text-danger',
+    };
+    var icon = icon_map[type] || icon_map.info;
+
+    var container = document.getElementById('_toast_container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = '_toast_container';
+        container.className = 'toast-container position-fixed top-0 end-0 p-3';
+        container.style.zIndex = 9999;
+        document.body.appendChild(container);
+    }
+
+    var id  = '_toast_' + Date.now();
+    var el  = document.createElement('div');
+    el.id   = id;
+    el.className = 'toast align-items-center border-0 shadow-sm';
+    el.setAttribute('role', 'alert');
+    el.setAttribute('aria-live', 'assertive');
+    el.innerHTML = [
+        '<div class="d-flex">',
+        '  <div class="toast-body d-flex align-items-start gap-2">',
+        '    <i class="ti ' + icon + ' fs-5 mt-1 flex-shrink-0"></i>',
+        '    <div>',
+             (title   ? '<div class="fw-semibold lh-sm">' + title   + '</div>' : ''),
+             (message ? '<div class="small text-muted">'  + message + '</div>' : ''),
+        '    </div>',
+        '  </div>',
+        '  <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>',
+        '</div>',
+    ].join('');
+
+    container.appendChild(el);
+
+    var toast = new bootstrap.Toast(el, { delay: 5000 });
+    toast.show();
+
+    el.addEventListener('hidden.bs.toast', function () { el.remove(); });
+}
 </script>
 
 <!-- Stock rows modal — used by: order/order.php, order/return.php, po/po.php, po/supplier_returns.php (via show_stock_rows() in custom.js) -->