revamp notification system

app/Http/Controllers/Backend/DashboardController.php

@@ -111,7 +111,10 @@ class DashboardController extends Controller
             ->where('is_read', 0);
 
         // Ambil data dan kembalikan sebagai JSON
-        return response()->json($notifications->limit(6)->get());
+        return response()->json([
+            'count' => $notifications->count(),
+            'data' => $notifications->take(7)->get(),
+        ]);
     }
 
     public function mark_read()

resources/views/layouts/app.blade.php

@@ -42,6 +42,7 @@
                     <li class="nav-item dropdown">
                         <a class="nav-link" data-toggle="dropdown" href="#" role="button" data-widget="notification">
                             <i class="fas fa-bell"></i>
+                            <span id="notification-dot" class="badge badge-danger" style="display: none; position: absolute; top: 8px; right: 10px; font-size: 0.6rem;"></span>
                         </a>
                         <div class="dropdown-menu dropdown-menu-xl dropdown-menu-right">
                             <div id="notification">
@@ -195,7 +196,7 @@
             .then(data => {
                 notificationList.innerHTML = ''; // Clear existing notifications
 
-                data.forEach(notification => {
+                data.data.forEach(notification => {
                     const item = document.createElement('a');
                     item.href = notification.link || '#';
                     item.classList.add('dropdown-item');
@@ -232,6 +233,24 @@
             });
     });
 
+    fetch('/api/notifications')
+        .then(response => response.json())
+        .then(data => {
+            const notificationDot = document.getElementById('notification-dot');
+
+            if (data.count > 0) {
+                // Show red dot if there are notifications
+                // show the number of notifications
+                notificationDot.textContent = data.count;
+                notificationDot.style.display = 'block';
+            } else {
+                // Hide red dot if there are no notifications
+                notificationDot.style.display = 'none';
+            }
+        })
+        .catch(error => {
+            console.error('Error checking notifications:', error);
+        });
 
     const periode = document.getElementById('periode');
     const date = new Date();