feat: notification dropdown panel and /notifications page

views/notifications/index.php

@@ -0,0 +1,91 @@
+<?php
+$notifications = $notifications ?? [];
+$pagination = $pagination ?? [];
+$unreadCount = $unreadCount ?? 0;
+$data = $notifications ?? [];
+?>
+
+<div class="page-header">
+    <div class="page-header-left">
+        <div class="back-link">
+            <a href="/dashboard"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
+        </div>
+        <h1 class="page-title">Notifications</h1>
+        <p class="page-subtitle">
+            <?= $unreadCount ?> unread &middot; <?= $pagination['total'] ?? 0 ?> total
+        </p>
+    </div>
+    <div class="page-header-right">
+        <?php if ($unreadCount > 0): ?>
+        <button class="btn btn-sm btn-text" onclick="markAllRead()" style="font-size:0.85em">
+            <i class="fas fa-check-double"></i> Mark all read
+        </button>
+        <?php endif; ?>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body" style="padding:0">
+        <?php if (empty($data)): ?>
+        <div style="padding:60px 20px;text-align:center;color:var(--text-muted)">
+            <i class="fas fa-check-circle" style="font-size:2.5em;margin-bottom:12px;display:block;color:var(--success)"></i>
+            <p style="font-size:1.05em">All caught up!</p>
+            <p style="font-size:0.9em">No notifications to show.</p>
+        </div>
+        <?php else: ?>
+            <?php foreach ($data as $n): ?>
+            <?php
+                $typeColors = ['error' => 'danger', 'warning' => 'warning', 'info' => 'info'];
+                $icons = ['error' => 'fa-times-circle', 'warning' => 'fa-exclamation-triangle', 'info' => 'fa-info-circle'];
+                $tc = $typeColors[$n['type']] ?? 'info';
+                $icon = $icons[$n['type']] ?? 'fa-info-circle';
+                $isRead = !empty($n['is_read']);
+            ?>
+            <div class="notif-item <?= $isRead ? 'notif-read' : 'notif-unread' ?>" data-id="<?= $n['id'] ?>">
+                <div class="notif-icon notif-<?= $tc ?>"><i class="fas <?= $icon ?>"></i></div>
+                <div class="notif-content">
+                    <div class="notif-title"><?= htmlspecialchars($n['title'] ?? '') ?></div>
+                    <div class="notif-message"><?= htmlspecialchars($n['message'] ?? '') ?></div>
+                    <div class="notif-time"><?= time_ago($n['created_at'] ?? '') ?></div>
+                </div>
+                <?php if (!$isRead): ?>
+                <div class="notif-dot"></div>
+                <?php endif; ?>
+            </div>
+            <?php endforeach; ?>
+        <?php endif; ?>
+    </div>
+</div>
+
+<?php if (($pagination['total_pages'] ?? 1) > 1): ?>
+<div class="pagination">
+    <?php for ($i = 1; $i <= $pagination['total_pages']; $i++): ?>
+    <a href="/notifications?page=<?= $i ?>" class="btn btn-sm <?= ($pagination['page'] ?? 1) === $i ? 'btn-primary' : 'btn-secondary' ?>">
+        <?= $i ?>
+    </a>
+    <?php endfor; ?>
+</div>
+<?php endif; ?>
+
+<script>
+function markAllRead() {
+    const token = document.querySelector('meta[name="api-token"]')?.getAttribute('content') || '';
+    const headers = { 'Accept': 'application/json' };
+    if (token) headers['Authorization'] = 'Bearer ' + token;
+
+    fetch('/api/notifications/read-all', { method: 'POST', headers })
+        .then(r => r.json())
+        .then(d => {
+            if (d.success) {
+                document.querySelectorAll('.notif-item').forEach(function(el) {
+                    el.classList.remove('notif-unread');
+                    el.classList.add('notif-read');
+                    const dot = el.querySelector('.notif-dot');
+                    if (dot) dot.remove();
+                });
+                location.reload();
+            }
+        })
+        .catch(function(){});
+}
+</script>