diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 3f4142a..6c04cc0 100755 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -3170,3 +3170,179 @@ input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; } + +/* ========================================================================== + Notification Bell & Modal + ========================================================================== */ + +.notification-btn-wrapper { + position: relative; + display: inline-flex; +} + +.notification-btn { + position: relative; +} + +.notification-badge { + position: absolute; + top: 2px; + right: 2px; + min-width: 16px; + height: 16px; + padding: 0 4px; + border-radius: 100px; + background: var(--danger); + color: #fff; + font-size: 0.6rem; + font-weight: 700; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + box-shadow: 0 0 0 2px var(--bg-secondary); + pointer-events: none; +} + +.notif-item { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 14px 18px; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + transition: background 0.15s; +} + +.notif-item:hover { + background: var(--bg-hover); +} + +.notif-item:last-child { + border-bottom: none; +} + +.notif-unread { + background: rgba(99, 102, 241, 0.04); +} + +.notif-unread:hover { + background: rgba(99, 102, 241, 0.08); +} + +.notif-icon { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: 0.85em; +} + +.notif-icon.notif-danger { background: var(--danger-bg); color: var(--danger); } +.notif-icon.notif-warning { background: var(--warning-bg); color: var(--warning); } +.notif-icon.notif-info { background: var(--info-bg); color: var(--info); } + +.notif-content { + flex: 1; + min-width: 0; +} + +.notif-title { + font-size: 0.88em; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 2px; +} + +.notif-message { + font-size: 0.82em; + color: var(--text-muted); + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.notif-time { + font-size: 0.72em; + color: var(--text-muted); + margin-top: 3px; + opacity: 0.7; +} + +.notif-read .notif-title { + font-weight: 400; + opacity: 0.65; +} + +.notif-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--info); + flex-shrink: 0; + margin-top: 6px; +} + +.btn-sm { + padding: 0.3rem 0.6rem; + font-size: 0.82rem; + border-radius: var(--radius-sm, 6px); +} + +.btn-text { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + transition: color 0.15s; +} + +.btn-text:hover { + color: var(--text-primary); + background: var(--bg-hover); +} + +/* ========================================================================== + Notification Dropdown Panel + ========================================================================== */ + +.notification-dropdown { + display: none; + position: absolute; + top: calc(100% + 6px); + right: 0; + width: 380px; + max-height: 520px; + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + box-shadow: 0 8px 32px rgba(0,0,0,0.4); + z-index: 300; + overflow: hidden; +} + +.notification-dropdown.open { + display: block; +} + +.notif-dropdown-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + border-bottom: 1px solid var(--border-color); +} + +.notif-dropdown-body { + max-height: 360px; + overflow-y: auto; +} + +.notif-dropdown-footer { + border-top: 1px solid var(--border-color); +} diff --git a/routes/web.php b/routes/web.php index 2113309..9af7e95 100755 --- a/routes/web.php +++ b/routes/web.php @@ -22,6 +22,7 @@ $router->get('/dashboard', [DashboardController::class, 'index'], [AuthMiddlewar $router->get('/dashboard/stats', [DashboardController::class, 'stats'], [AuthMiddleware::class]); $router->get('/dashboard/refresh-metrics', [DashboardController::class, 'refreshMetrics'], [AuthMiddleware::class]); $router->get('/dashboard/chart-data', [DashboardController::class, 'chartData'], [AuthMiddleware::class]); +$router->get('/notifications', [DashboardController::class, 'notifications'], [AuthMiddleware::class]); $router->get('/login', [AuthController::class, 'loginForm']); $router->post('/login', [AuthController::class, 'login'], [CSRFMiddleware::class, RateLimitMiddleware::class]); diff --git a/src/Controllers/DashboardController.php b/src/Controllers/DashboardController.php index ac2d50b..1942e58 100755 --- a/src/Controllers/DashboardController.php +++ b/src/Controllers/DashboardController.php @@ -7,6 +7,7 @@ namespace ServerManager\Controllers; use ServerManager\Core\App; use ServerManager\Core\Session; use ServerManager\Models\Server; +use ServerManager\Models\Notification; use ServerManager\Services\MonitoringService; use ServerManager\Services\AuditService; @@ -80,4 +81,22 @@ class DashboardController 'data' => $data, ]); } + + public function notifications(): void + { + $userId = (int) Session::get('user_id'); + $page = (int) ($_GET['page'] ?? 1); + $perPage = 20; + + $notificationModel = new Notification(); + $result = $notificationModel->getForUser($userId, $page, $perPage); + $unreadCount = $notificationModel->getUnreadCount($userId); + + $this->view->display('notifications.index', [ + 'title' => 'Notifications - ServerManager', + 'notifications' => $result['data'], + 'pagination' => $result, + 'unreadCount' => $unreadCount, + ]); + } } diff --git a/views/dashboard/index.php b/views/dashboard/index.php index ce828c3..3ca08f3 100755 --- a/views/dashboard/index.php +++ b/views/dashboard/index.php @@ -154,6 +154,12 @@ $aggregatedMetrics = $aggregatedMetrics ?? []; = htmlspecialchars($activity['actor_name'] ?? $activity['username'] ?? 'System') ?> · = date('H:i', strtotime($activity['created_at'] ?? '')) ?> + + + + + + @@ -298,9 +304,4 @@ if (aggregatedData.length > 0) { setInterval(refreshAggregatedChart, 30000); - - - - - diff --git a/views/layouts/main.php b/views/layouts/main.php index 9929213..598df63 100755 --- a/views/layouts/main.php +++ b/views/layouts/main.php @@ -4,6 +4,17 @@ +