how does this directly shows in my notification bar?

components/order-column.js

@@ -103,10 +103,17 @@ class OrderColumn extends HTMLElement {
         const addOrderBtn = this.shadowRoot.getElementById('add-order');
         addOrderBtn.addEventListener('click', () => {
             const customerName = prompt("Enter customer name:");
-            if (customerName) {
-                this.addOrderCard(customerName);
+        if (customerName) {
+            this.addOrderCard(customerName);
+            // Show notification
+            if ('Notification' in window && Notification.permission === 'granted') {
+                new Notification('New Order Added', {
+                    body: `New order for ${customerName} in ${this.getAttribute('title')}`,
+                    icon: 'https://cdn-icons-png.flaticon.com/512/3144/3144456.png'
+                });
             }
-        });
+        }
+});
     }
 
     addOrderCard(customerName) {

script.js

@@ -1,6 +1,18 @@
-document.addEventListener('DOMContentLoaded', () => {
+
+// Request notification permission on page load
+document.addEventListener('DOMContentLoaded', async () => {
+    // Request notification permission
+    if ('Notification' in window) {
+        try {
+            const permission = await Notification.requestPermission();
+            console.log('Notification permission:', permission);
+        } catch (err) {
+            console.error('Notification permission error:', err);
+        }
+    }
+
     // Theme toggle
-    const themeToggle = document.getElementById('theme-toggle');
+const themeToggle = document.getElementById('theme-toggle');
     themeToggle.addEventListener('click', () => {
         document.documentElement.classList.toggle('dark');
         const icon = themeToggle.querySelector('i');