mesauth-angular 0.2.15 → 0.2.26

package/dist/{fesm2020 → fesm2022}/mesauth-angular.mjs

@@ -1,395 +1,485 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, NgModule, EventEmitter, Component, Output, HostBinding, HostListener, ViewChild } from '@angular/core';
+import { Injectable, NgModule, EventEmitter, HostListener, HostBinding, Output, Component, ViewChild } from '@angular/core';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 import { BehaviorSubject, Subject, throwError } from 'rxjs';
 import { filter, debounceTime, tap, catchError, takeUntil } from 'rxjs/operators';
 import * as i2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
-import * as i1 from '@angular/common/http';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i3 from '@angular/common';
 import { NgIf, CommonModule, NgFor } from '@angular/common';
 
-var NotificationType;
-(function (NotificationType) {
-    NotificationType["Info"] = "Info";
-    NotificationType["Warning"] = "Warning";
-    NotificationType["Error"] = "Error";
-    NotificationType["Success"] = "Success";
-})(NotificationType || (NotificationType = {}));
-class MesAuthService {
-    constructor(http, router) {
-        this.http = http;
-        this.router = router;
-        this.hubConnection = null;
-        this._currentUser = new BehaviorSubject(null);
-        this.currentUser$ = this._currentUser.asObservable();
-        this._notifications = new Subject();
-        this.notifications$ = this._notifications.asObservable();
-        this._feNav = new BehaviorSubject(null);
-        this.feNav$ = this._feNav.asObservable();
-        this.apiBase = '';
-        this.config = null;
-        // Listen for route changes - only refresh user data if needed for SPA navigation
-        // This helps maintain authentication state in single-page applications
-        if (this.router) {
-            this.router.events
-                .pipe(filter(event => event instanceof NavigationEnd), debounceTime(1000) // Longer debounce to avoid interfering with login flow
-            )
-                .subscribe((event) => {
-                // Only refresh if user is logged in and navigating to protected routes
-                // Avoid refreshing during login/logout flows
-                if (this._currentUser.value && this.isProtectedRoute(event.url)) {
-                    // Small delay to ensure any login/logout operations complete
-                    setTimeout(() => {
-                        if (this._currentUser.value) {
-                            this.refreshUser();
-                        }
-                    }, 100);
-                }
-            });
-        }
-    }
-    isProtectedRoute(url) {
-        // Consider routes protected if they don't include auth-related paths
-        return !url.includes('/login') && !url.includes('/auth') && !url.includes('/signin') && !url.includes('/logout');
-    }
-    init(config) {
-        this.config = config;
-        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
-        this.fetchCurrentUser();
-        this.fetchInitialNotifications();
-    }
-    getConfig() {
-        return this.config;
-    }
-    fetchCurrentUser() {
-        if (!this.apiBase)
-            return;
-        const url = `${this.apiBase}/auth/me`;
-        this.http.get(url, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
-            next: (u) => {
-                this._currentUser.next(u);
-                if (u && this.config) {
-                    this.startConnection(this.config);
-                    this.fetchFeNav();
-                }
-                else {
-                    this._feNav.next(null);
-                }
-            },
-            error: (err) => {
-                this._currentUser.next(null);
-                this._feNav.next(null);
-            }
-        });
-    }
-    fetchInitialNotifications() {
-        if (!this.apiBase)
-            return;
-        this.http.get(`${this.apiBase}/notif/me`, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
-            next: (notifications) => {
-                if (Array.isArray(notifications?.items)) {
-                    notifications.items.forEach((n) => this._notifications.next(n));
-                }
-            },
-            error: (err) => { }
-        });
-    }
-    fetchFeNav() {
-        if (!this.apiBase || !this._currentUser.value?.userId)
-            return;
-        const url = `${this.apiBase}/fenavs/${this._currentUser.value.userId}`;
-        this.http.get(url, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
-            next: (response) => {
-                if (response?.content) {
-                    const feNavData = {
-                        items: response.content,
-                        lastUpdated: new Date().toISOString()
-                    };
-                    this._feNav.next(feNavData);
-                }
-            },
-            error: (err) => {
-                this._feNav.next(null);
-            }
-        });
-    }
-    getUnreadCount() {
-        return this.http.get(`${this.apiBase}/notif/me/unread-count`, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    getNotifications(page = 1, pageSize = 20, includeRead = false, type) {
-        let url = `${this.apiBase}/notif/me?page=${page}&pageSize=${pageSize}&includeRead=${includeRead}`;
-        if (type) {
-            url += `&type=${type}`;
-        }
-        return this.http.get(url, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    markAsRead(notificationId) {
-        return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {}, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    markAllAsRead() {
-        return this.http.patch(`${this.apiBase}/notif/me/read-all`, {}, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    deleteNotification(notificationId) {
-        return this.http.delete(`${this.apiBase}/notif/${notificationId}`, { withCredentials: this.config?.withCredentials ?? true });
-    }
-    startConnection(config) {
-        if (this.hubConnection)
-            return;
-        const signalrUrl = config.apiBaseUrl.replace(/\/$/, '') + '/hub/notification';
-        const builder = new HubConnectionBuilder()
-            .withUrl(signalrUrl, { withCredentials: config.withCredentials ?? true })
-            .withAutomaticReconnect()
-            .configureLogging(LogLevel.Warning);
-        this.hubConnection = builder.build();
-        this.hubConnection.on('ReceiveNotification', (n) => {
-            this._notifications.next(n);
-        });
-        this.hubConnection.start().then(() => { }).catch((err) => { });
-        this.hubConnection.onclose(() => { });
-        this.hubConnection.onreconnecting(() => { });
-        this.hubConnection.onreconnected(() => { });
-    }
-    stop() {
-        if (!this.hubConnection)
-            return;
-        this.hubConnection.stop().catch(() => { });
-        this.hubConnection = null;
-    }
-    logout() {
-        const url = `${this.apiBase}/auth/logout`;
-        return this.http.post(url, {}, { withCredentials: this.config?.withCredentials ?? true }).pipe(tap(() => {
-            this._currentUser.next(null);
-            this._feNav.next(null);
-            this.stop();
-        }));
-    }
-    refreshUser() {
-        this.fetchCurrentUser();
-    }
-}
-MesAuthService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService, deps: [{ token: i1.HttpClient }, { token: i2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-MesAuthService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.Router, decorators: [{
-                    type: Optional
-                }] }]; } });
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["Info"] = "Info";
+    NotificationType["Warning"] = "Warning";
+    NotificationType["Error"] = "Error";
+    NotificationType["Success"] = "Success";
+})(NotificationType || (NotificationType = {}));
+class MesAuthService {
+    hubConnection = null;
+    _currentUser = new BehaviorSubject(null);
+    currentUser$ = this._currentUser.asObservable();
+    _notifications = new Subject();
+    notifications$ = this._notifications.asObservable();
+    apiBase = '';
+    config = null;
+    http;
+    router;
+    constructor() {
+        // Empty constructor - all dependencies passed to init()
+    }
+    isProtectedRoute(url) {
+        // Consider routes protected if they don't include auth-related paths
+        return !url.includes('/login') && !url.includes('/auth') && !url.includes('/signin') && !url.includes('/logout');
+    }
+    init(config, httpClient, router) {
+        this.config = config;
+        this.http = httpClient;
+        this.router = router;
+        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+        // Listen for route changes - only refresh user data if needed for SPA navigation
+        // This helps maintain authentication state in single-page applications
+        if (this.router) {
+            this.router.events
+                .pipe(filter(event => event instanceof NavigationEnd), debounceTime(1000) // Longer debounce to avoid interfering with login flow
+            )
+                .subscribe((event) => {
+                // Only refresh if user is logged in and navigating to protected routes
+                // Avoid refreshing during login/logout flows
+                if (this._currentUser.value && this.isProtectedRoute(event.url)) {
+                    // Small delay to ensure any login/logout operations complete
+                    setTimeout(() => {
+                        if (this._currentUser.value) {
+                            this.refreshUser();
+                        }
+                    }, 100);
+                }
+            });
+        }
+        this.fetchCurrentUser();
+        this.fetchInitialNotifications();
+    }
+    getConfig() {
+        return this.config;
+    }
+    fetchCurrentUser() {
+        if (!this.apiBase)
+            return;
+        const url = `${this.apiBase}/auth/me`;
+        this.http.get(url, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
+            next: (u) => {
+                this._currentUser.next(u);
+                if (u && this.config) {
+                    this.startConnection(this.config);
+                }
+            },
+            error: (err) => {
+                // Silently handle auth errors (401/403) - user is not logged in
+                if (err.status === 401 || err.status === 403) {
+                    this._currentUser.next(null);
+                }
+            }
+        });
+    }
+    fetchInitialNotifications() {
+        if (!this.apiBase)
+            return;
+        this.http.get(`${this.apiBase}/notif/me`, { withCredentials: this.config?.withCredentials ?? true }).subscribe({
+            next: (notifications) => {
+                if (Array.isArray(notifications?.items)) {
+                    notifications.items.forEach((n) => this._notifications.next(n));
+                }
+            },
+            error: (err) => {
+                // Silently handle auth errors (401/403) - user is not logged in
+                // No need to emit anything
+            }
+        });
+    }
+    getUnreadCount() {
+        return this.http.get(`${this.apiBase}/notif/me/unread-count`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    getNotifications(page = 1, pageSize = 20, includeRead = false, type) {
+        let url = `${this.apiBase}/notif/me?page=${page}&pageSize=${pageSize}&includeRead=${includeRead}`;
+        if (type) {
+            url += `&type=${type}`;
+        }
+        return this.http.get(url, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    markAsRead(notificationId) {
+        return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {}, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    markAllAsRead() {
+        return this.http.patch(`${this.apiBase}/notif/me/read-all`, {}, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    deleteNotification(notificationId) {
+        return this.http.delete(`${this.apiBase}/notif/${notificationId}`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Get frontend routes assigned to the current user
+     * Returns routes grouped by application
+     */
+    getFrontEndRoutes() {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.get(`${this.apiBase}/fe-routes/me`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Get master routes for a specific application
+     * @param appId - The application ID
+     */
+    getRouteMasters(appId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.get(`${this.apiBase}/fe-routes/masters/${appId}`, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Register/sync frontend routes for an application
+     * This is typically called on app startup to sync routes from the frontend app
+     * @param appId - The application ID (passed via X-App-Id header)
+     * @param routes - Array of route definitions
+     */
+    registerFrontEndRoutes(appId, routes) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        const headers = { 'X-App-Id': appId };
+        return this.http.post(`${this.apiBase}/fe-routes/register`, routes, {
+            headers,
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Create a new route master
+     * @param appId - The application ID
+     * @param route - Route details
+     */
+    createRouteMaster(appId, route) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.post(`${this.apiBase}/fe-routes/masters`, {
+            appId,
+            ...route
+        }, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Update an existing route master
+     * @param routeId - The route master ID
+     * @param route - Updated route details
+     */
+    updateRouteMaster(routeId, route) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.put(`${this.apiBase}/fe-routes/masters/${routeId}`, route, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Delete a route master
+     * @param routeId - The route master ID
+     */
+    deleteRouteMaster(routeId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.delete(`${this.apiBase}/fe-routes/masters/${routeId}`, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Assign a route to a role
+     * @param routeMasterId - The route master ID
+     * @param roleId - The role ID (GUID)
+     */
+    assignRouteToRole(routeMasterId, roleId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.post(`${this.apiBase}/fe-routes/mappings`, {
+            routeMasterId,
+            roleId
+        }, { withCredentials: this.config?.withCredentials ?? true });
+    }
+    /**
+     * Remove a route assignment from a role
+     * @param mappingId - The mapping ID
+     */
+    removeRouteFromRole(mappingId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.delete(`${this.apiBase}/fe-routes/mappings/${mappingId}`, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    /**
+     * Get route-to-role mappings for a specific role
+     * @param roleId - The role ID (GUID)
+     */
+    getRouteMappingsByRole(roleId) {
+        if (!this.apiBase)
+            throw new Error('MesAuth not initialized');
+        return this.http.get(`${this.apiBase}/fe-routes/mappings?roleId=${roleId}`, {
+            withCredentials: this.config?.withCredentials ?? true
+        });
+    }
+    startConnection(config) {
+        if (this.hubConnection)
+            return;
+        const signalrUrl = config.apiBaseUrl.replace(/\/$/, '') + '/hub/notification';
+        const builder = new HubConnectionBuilder()
+            .withUrl(signalrUrl, { withCredentials: config.withCredentials ?? true })
+            .withAutomaticReconnect()
+            .configureLogging(LogLevel.Warning);
+        this.hubConnection = builder.build();
+        this.hubConnection.on('ReceiveNotification', (n) => {
+            this._notifications.next(n);
+        });
+        this.hubConnection.start().then(() => { }).catch((err) => { });
+        this.hubConnection.onclose(() => { });
+        this.hubConnection.onreconnecting(() => { });
+        this.hubConnection.onreconnected(() => { });
+    }
+    stop() {
+        if (!this.hubConnection)
+            return;
+        this.hubConnection.stop().catch(() => { });
+        this.hubConnection = null;
+    }
+    logout() {
+        const url = `${this.apiBase}/auth/logout`;
+        return this.http.post(url, {}, { withCredentials: this.config?.withCredentials ?? true }).pipe(tap(() => {
+            this._currentUser.next(null);
+            this.stop();
+        }));
+    }
+    refreshUser() {
+        this.fetchCurrentUser();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
-class MesAuthInterceptor {
-    constructor(authService, router) {
-        this.authService = authService;
-        this.router = router;
-    }
-    intercept(req, next) {
-        return next.handle(req).pipe(catchError((error) => {
-            if (error.status === 403) {
-                const config = this.authService.getConfig();
-                const baseUrl = config?.userBaseUrl || '';
-                const returnUrl = encodeURIComponent(window.location.href);
-                window.location.href = `${baseUrl}/403?returnUrl=${returnUrl}`;
-            }
-            return throwError(error);
-        }));
-    }
-}
-MesAuthInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthInterceptor, deps: [{ token: MesAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-MesAuthInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthInterceptor, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: i2.Router }]; } });
+class MesAuthInterceptor {
+    authService;
+    router;
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+    }
+    intercept(req, next) {
+        return next.handle(req).pipe(catchError((error) => {
+            if (error.status === 403) {
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                // Use router URL for internal navigation (cleaner URLs)
+                // Falls back to window.location for full URL if needed
+                const currentUrl = this.router.url || window.location.pathname + window.location.search;
+                const returnUrl = encodeURIComponent(currentUrl);
+                window.location.href = `${baseUrl}/403?returnUrl=${returnUrl}`;
+            }
+            return throwError(error);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthInterceptor, deps: [{ token: MesAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthInterceptor, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: i2.Router }] });
 
-class MesAuthModule {
-}
-MesAuthModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MesAuthModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule });
-MesAuthModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule, providers: [
-        MesAuthService,
-        { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MesAuthModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [
-                        MesAuthService,
-                        { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
-                    ]
-                }]
+class MesAuthModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule, providers: [
+            MesAuthService,
+            { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MesAuthModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [
+                        MesAuthService,
+                        { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
+                    ]
+                }]
         }] });
 
-class ThemeService {
-    constructor() {
-        this._currentTheme = new BehaviorSubject('light');
-        this.currentTheme$ = this._currentTheme.asObservable();
-        this.observer = null;
-        this.detectTheme();
-        this.startWatching();
-    }
-    ngOnDestroy() {
-        this.stopWatching();
-    }
-    detectTheme() {
-        const html = document.documentElement;
-        const isDark = html.classList.contains('dark') ||
-            html.getAttribute('data-theme') === 'dark' ||
-            html.getAttribute('theme') === 'dark' ||
-            html.getAttribute('data-coreui-theme') === 'dark';
-        this._currentTheme.next(isDark ? 'dark' : 'light');
-    }
-    startWatching() {
-        if (typeof MutationObserver === 'undefined') {
-            // Fallback for older browsers - check periodically
-            setInterval(() => this.detectTheme(), 1000);
-            return;
-        }
-        this.observer = new MutationObserver(() => {
-            this.detectTheme();
-        });
-        this.observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['class', 'data-theme', 'theme', 'data-coreui-theme']
-        });
-    }
-    stopWatching() {
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
-        }
-    }
-    get currentTheme() {
-        return this._currentTheme.value;
-    }
-    // Method to manually set theme if needed
-    setTheme(theme) {
-        this._currentTheme.next(theme);
-    }
-    // Re-detect theme from DOM
-    refreshTheme() {
-        this.detectTheme();
-    }
-}
-ThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+class ThemeService {
+    _currentTheme = new BehaviorSubject('light');
+    currentTheme$ = this._currentTheme.asObservable();
+    observer = null;
+    constructor() {
+        this.detectTheme();
+        this.startWatching();
+    }
+    ngOnDestroy() {
+        this.stopWatching();
+    }
+    detectTheme() {
+        const html = document.documentElement;
+        const isDark = html.classList.contains('dark') ||
+            html.getAttribute('data-theme') === 'dark' ||
+            html.getAttribute('theme') === 'dark' ||
+            html.getAttribute('data-coreui-theme') === 'dark';
+        this._currentTheme.next(isDark ? 'dark' : 'light');
+    }
+    startWatching() {
+        if (typeof MutationObserver === 'undefined') {
+            // Fallback for older browsers - check periodically
+            setInterval(() => this.detectTheme(), 1000);
+            return;
+        }
+        this.observer = new MutationObserver(() => {
+            this.detectTheme();
+        });
+        this.observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme', 'theme', 'data-coreui-theme']
+        });
+    }
+    stopWatching() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    get currentTheme() {
+        return this._currentTheme.value;
+    }
+    // Method to manually set theme if needed
+    setTheme(theme) {
+        this._currentTheme.next(theme);
+    }
+    // Re-detect theme from DOM
+    refreshTheme() {
+        this.detectTheme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
 
-class UserProfileComponent {
-    constructor(authService, router, themeService) {
-        this.authService = authService;
-        this.router = router;
-        this.themeService = themeService;
-        this.notificationClick = new EventEmitter();
-        this.currentUser = null;
-        this.currentTheme = 'light';
-        this.unreadCount = 0;
-        this.dropdownOpen = false;
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    ngOnInit() {
-        this.authService.currentUser$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(user => {
-            this.currentUser = user;
-        });
-        this.themeService.currentTheme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => {
-            this.currentTheme = theme;
-        });
-        this.loadUnreadCount();
-        // Listen for new notifications
-        this.authService.notifications$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            console.log('Notification received, updating unread count');
-            this.loadUnreadCount();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadUnreadCount() {
-        this.authService.getUnreadCount().subscribe({
-            next: (response) => {
-                this.unreadCount = response.unreadCount || 0;
-            },
-            error: (err) => { }
-        });
-    }
-    getAvatarUrl(user) {
-        const config = this.authService.getConfig();
-        const baseUrl = config?.apiBaseUrl || '';
-        // Use userId for the avatar endpoint
-        const userId = user.userId;
-        if (userId && baseUrl) {
-            return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar`;
-        }
-        // Fallback to UI avatars service if no userId or baseUrl
-        const displayName = user.userName || user.userId || 'User';
-        return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
-    }
-    getLastNameInitial(user) {
-        const fullName = user.fullName || user.userName || 'U';
-        const parts = fullName.split(' ');
-        const lastPart = parts[parts.length - 1];
-        return lastPart.charAt(0).toUpperCase();
-    }
-    toggleDropdown() {
-        this.dropdownOpen = !this.dropdownOpen;
-    }
-    onDocumentClick(event) {
-        const target = event.target;
-        const clickedInside = target.closest('.user-menu-wrapper');
-        if (!clickedInside) {
-            this.dropdownOpen = false;
-        }
-    }
-    onLogin() {
-        const config = this.authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-        const returnUrl = encodeURIComponent(this.router.url);
-        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-    }
-    onViewProfile() {
-        const config = this.authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-        window.location.href = `${baseUrl}/profile`;
-        this.dropdownOpen = false;
-    }
-    onLogout() {
-        this.authService.logout().subscribe({
-            next: () => {
-                // Clear current user after successful logout
-                this.dropdownOpen = false;
-                // Navigate to login with return URL
-                const config = this.authService.getConfig();
-                const baseUrl = config?.userBaseUrl || '';
-                const returnUrl = encodeURIComponent(window.location.href);
-                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-            },
-            error: (err) => {
-                // Still navigate to login even if logout fails
-                const config = this.authService.getConfig();
-                const baseUrl = config?.userBaseUrl || '';
-                window.location.href = `${baseUrl}/login`;
-            }
-        });
-    }
-    onNotificationClick() {
-        this.notificationClick.emit();
-    }
-}
-UserProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+class UserProfileComponent {
+    authService;
+    router;
+    themeService;
+    notificationClick = new EventEmitter();
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    currentUser = null;
+    currentTheme = 'light';
+    unreadCount = 0;
+    dropdownOpen = false;
+    destroy$ = new Subject();
+    constructor(authService, router, themeService) {
+        this.authService = authService;
+        this.router = router;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.authService.currentUser$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(user => {
+            this.currentUser = user;
+        });
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+        this.loadUnreadCount();
+        // Listen for new notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            console.log('Notification received, updating unread count');
+            this.loadUnreadCount();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadUnreadCount() {
+        this.authService.getUnreadCount().subscribe({
+            next: (response) => {
+                this.unreadCount = response.unreadCount || 0;
+            },
+            error: (err) => { }
+        });
+    }
+    getAvatarUrl(user) {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.apiBaseUrl || '';
+        // Use userId for the avatar endpoint
+        const userId = user.userId;
+        if (userId && baseUrl) {
+            return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar`;
+        }
+        // Fallback to UI avatars service if no userId or baseUrl
+        const displayName = user.userName || user.userId || 'User';
+        return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
+    }
+    getLastNameInitial(user) {
+        const fullName = user.fullName || user.userName || 'U';
+        const parts = fullName.split(' ');
+        const lastPart = parts[parts.length - 1];
+        return lastPart.charAt(0).toUpperCase();
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        const clickedInside = target.closest('.user-menu-wrapper');
+        if (!clickedInside) {
+            this.dropdownOpen = false;
+        }
+    }
+    onLogin() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        const returnUrl = encodeURIComponent(this.router.url);
+        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+    }
+    onViewProfile() {
+        const config = this.authService.getConfig();
+        const baseUrl = config?.userBaseUrl || '';
+        window.location.href = `${baseUrl}/profile`;
+        this.dropdownOpen = false;
+    }
+    onLogout() {
+        this.authService.logout().subscribe({
+            next: () => {
+                // Clear current user after successful logout
+                this.dropdownOpen = false;
+                // Navigate to login with return URL
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                const returnUrl = encodeURIComponent(window.location.href);
+                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
+            },
+            error: (err) => {
+                // Still navigate to login even if logout fails
+                const config = this.authService.getConfig();
+                const baseUrl = config?.userBaseUrl || '';
+                window.location.href = `${baseUrl}/login`;
+            }
+        });
+    }
+    onNotificationClick() {
+        this.notificationClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileComponent, deps: [{ token: MesAuthService }, { token: i2.Router }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", outputs: { notificationClick: "notificationClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
     <div class="user-profile-container">
       <!-- Not logged in -->
       <ng-container *ngIf="!currentUser">
@@ -434,9 +524,10 @@ UserProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         </div>
       </ng-container>
     </div>
-  `, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--error-color: #f44336;--error-light: #ffebee;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .1);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3);--shadow-light: rgba(0, 0, 0, .2)}.user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:var(--primary-hover)}.user-header{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.user-menu-btn:hover{background-color:var(--primary-light)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:#e0e0e0}.avatar-initial{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mes-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow);min-width:200px;z-index:1000;overflow:hidden}.mes-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);font-weight:600;color:var(--text-primary);font-size:14px}.mes-dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);text-decoration:none;transition:background-color .2s}.mes-dropdown-item:hover{background-color:var(--bg-hover)}.profile-link{color:var(--primary-color)}.logout-item{border-top:1px solid var(--border-light);color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:var(--text-primary)}.user-position{font-size:12px;color:var(--text-secondary)}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;transition:color .2s}.logout-btn:hover{color:var(--primary-color)}@media (max-width: 768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UserProfileComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--error-color: #f44336;--error-light: #ffebee;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .1);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3);--shadow-light: rgba(0, 0, 0, .2)}.user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:var(--primary-hover)}.user-header{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.user-menu-btn:hover{background-color:var(--primary-light)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:#e0e0e0}.avatar-initial{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mes-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow);min-width:200px;z-index:1000;overflow:hidden}.mes-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);font-weight:600;color:var(--text-primary);font-size:14px}.mes-dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);text-decoration:none;transition:background-color .2s}.mes-dropdown-item:hover{background-color:var(--bg-hover)}.profile-link{color:var(--primary-color)}.logout-item{border-top:1px solid var(--border-light);color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:var(--text-primary)}.user-position{font-size:12px;color:var(--text-secondary)}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;transition:color .2s}.logout-btn:hover{color:var(--primary-color)}@media(max-width:768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ma-user-profile', standalone: true, imports: [NgIf], template: `
     <div class="user-profile-container">
       <!-- Not logged in -->
@@ -482,88 +573,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         </div>
       </ng-container>
     </div>
-  `, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--error-color: #f44336;--error-light: #ffebee;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .1);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3);--shadow-light: rgba(0, 0, 0, .2)}.user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:var(--primary-hover)}.user-header{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.user-menu-btn:hover{background-color:var(--primary-light)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:#e0e0e0}.avatar-initial{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mes-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow);min-width:200px;z-index:1000;overflow:hidden}.mes-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);font-weight:600;color:var(--text-primary);font-size:14px}.mes-dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);text-decoration:none;transition:background-color .2s}.mes-dropdown-item:hover{background-color:var(--bg-hover)}.profile-link{color:var(--primary-color)}.logout-item{border-top:1px solid var(--border-light);color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:var(--text-primary)}.user-position{font-size:12px;color:var(--text-secondary)}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;transition:color .2s}.logout-btn:hover{color:var(--primary-color)}@media (max-width: 768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }]; }, propDecorators: { notificationClick: [{
-                type: Output
-            }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
+  `, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--primary-light: rgba(25, 118, 210, .1);--error-color: #f44336;--error-light: #ffebee;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .15);--shadow-light: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--primary-light: rgba(144, 202, 249, .1);--error-color: #ef5350;--error-light: rgba(239, 83, 80, .1);--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3);--shadow-light: rgba(0, 0, 0, .2)}.user-profile-container{display:flex;align-items:center;gap:16px;padding:0 16px}.login-btn{padding:8px 16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .3s}.login-btn:hover{background-color:var(--primary-hover)}.user-header{display:flex;align-items:center;gap:16px}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.user-menu-btn:hover{background-color:var(--primary-light)}.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:#e0e0e0}.avatar-initial{width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mes-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow);min-width:200px;z-index:1000;overflow:hidden}.mes-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);font-weight:600;color:var(--text-primary);font-size:14px}.mes-dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text-primary);text-decoration:none;transition:background-color .2s}.mes-dropdown-item:hover{background-color:var(--bg-hover)}.profile-link{color:var(--primary-color)}.logout-item{border-top:1px solid var(--border-light);color:var(--error-color)}.logout-item:hover{background-color:var(--error-light)}.user-info{display:flex;flex-direction:column;gap:2px}.user-name{font-weight:500;font-size:14px;color:var(--text-primary)}.user-position{font-size:12px;color:var(--text-secondary)}.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px;transition:color .2s}.logout-btn:hover{color:var(--primary-color)}@media(max-width:768px){.user-info{display:none}.avatar{width:32px;height:32px}}\n"] }]
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: i2.Router }, { type: ThemeService }], propDecorators: { notificationClick: [{
+                type: Output
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
-class ToastService {
-    constructor() {
-        this.toasts$ = new BehaviorSubject([]);
-        this.toasts = this.toasts$.asObservable();
-    }
-    show(message, title, type = 'info', duration = 5000) {
-        const id = Math.random().toString(36).substr(2, 9);
-        const toast = {
-            id,
-            message,
-            title,
-            type,
-            duration
-        };
-        const currentToasts = this.toasts$.value;
-        this.toasts$.next([...currentToasts, toast]);
-        if (duration > 0) {
-            setTimeout(() => {
-                this.remove(id);
-            }, duration);
-        }
-        return id;
-    }
-    remove(id) {
-        const currentToasts = this.toasts$.value;
-        this.toasts$.next(currentToasts.filter(t => t.id !== id));
-    }
-    clear() {
-        this.toasts$.next([]);
-    }
-}
-ToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+class ToastService {
+    toasts$ = new BehaviorSubject([]);
+    toasts = this.toasts$.asObservable();
+    show(message, title, type = 'info', duration = 5000) {
+        const id = Math.random().toString(36).substr(2, 9);
+        const toast = {
+            id,
+            message,
+            title,
+            type,
+            duration
+        };
+        const currentToasts = this.toasts$.value;
+        this.toasts$.next([...currentToasts, toast]);
+        if (duration > 0) {
+            setTimeout(() => {
+                this.remove(id);
+            }, duration);
+        }
+        return id;
+    }
+    remove(id) {
+        const currentToasts = this.toasts$.value;
+        this.toasts$.next(currentToasts.filter(t => t.id !== id));
+    }
+    clear() {
+        this.toasts$.next([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class ToastContainerComponent {
-    constructor(toastService, themeService) {
-        this.toastService = toastService;
-        this.themeService = themeService;
-        this.toasts = [];
-        this.currentTheme = 'light';
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    ngOnInit() {
-        this.toastService.toasts
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(toasts => {
-            this.toasts = toasts;
-        });
-        this.themeService.currentTheme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => {
-            this.currentTheme = theme;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    close(id) {
-        this.toastService.remove(id);
-    }
-}
-ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+class ToastContainerComponent {
+    toastService;
+    themeService;
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    toasts = [];
+    currentTheme = 'light';
+    destroy$ = new Subject();
+    constructor(toastService, themeService) {
+        this.toastService = toastService;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.toastService.toasts
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(toasts => {
+            this.toasts = toasts;
+        });
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    close(id) {
+        this.toastService.remove(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastContainerComponent, deps: [{ token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToastContainerComponent, isStandalone: true, selector: "ma-toast-container", host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
     <div class="toast-container">
       <div 
         *ngFor="let toast of toasts"
@@ -580,9 +670,10 @@ ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{--info-color: #2196f3;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--text-primary: #333;--bg-primary: white;--shadow: rgba(0, 0, 0, .15);--text-secondary: #999;--border-color: rgba(0, 0, 0, .1)}:host(.theme-dark){--info-color: #64b5f6;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #ef5350;--text-primary: #e0e0e0;--bg-primary: #1e1e1e;--shadow: rgba(0, 0, 0, .3);--text-secondary: #888;--border-color: rgba(255, 255, 255, .1)}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:280px;max-width:400px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-info{border-left:4px solid var(--info-color)}.toast-info .toast-title{color:var(--info-color)}.toast-info .toast-message{color:var(--text-primary)}.toast-success{border-left:4px solid var(--success-color)}.toast-success .toast-title{color:var(--success-color)}.toast-success .toast-message{color:var(--text-primary)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-warning .toast-message{color:var(--text-primary)}.toast-error{border-left:4px solid var(--error-color)}.toast-error .toast-title{color:var(--error-color)}.toast-error .toast-message{color:var(--text-primary)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastContainerComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: [":host{--info-color: #2196f3;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--text-primary: #333;--bg-primary: white;--shadow: rgba(0, 0, 0, .15);--text-secondary: #999;--border-color: rgba(0, 0, 0, .1)}:host(.theme-dark){--info-color: #64b5f6;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #ef5350;--text-primary: #e0e0e0;--bg-primary: #1e1e1e;--shadow: rgba(0, 0, 0, .3);--text-secondary: #888;--border-color: rgba(255, 255, 255, .1)}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:280px;max-width:400px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-info{border-left:4px solid var(--info-color)}.toast-info .toast-title{color:var(--info-color)}.toast-info .toast-message{color:var(--text-primary)}.toast-success{border-left:4px solid var(--success-color)}.toast-success .toast-title{color:var(--success-color)}.toast-success .toast-message{color:var(--text-primary)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-warning .toast-message{color:var(--text-primary)}.toast-error{border-left:4px solid var(--error-color)}.toast-error .toast-title{color:var(--error-color)}.toast-error .toast-message{color:var(--text-primary)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ma-toast-container', standalone: true, imports: [CommonModule], template: `
     <div class="toast-container">
       <div 
@@ -600,159 +691,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         </button>
       </div>
     </div>
-  `, styles: [":host{--info-color: #2196f3;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--text-primary: #333;--bg-primary: white;--shadow: rgba(0, 0, 0, .15);--text-secondary: #999;--border-color: rgba(0, 0, 0, .1)}:host(.theme-dark){--info-color: #64b5f6;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #ef5350;--text-primary: #e0e0e0;--bg-primary: #1e1e1e;--shadow: rgba(0, 0, 0, .3);--text-secondary: #888;--border-color: rgba(255, 255, 255, .1)}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:280px;max-width:400px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-info{border-left:4px solid var(--info-color)}.toast-info .toast-title{color:var(--info-color)}.toast-info .toast-message{color:var(--text-primary)}.toast-success{border-left:4px solid var(--success-color)}.toast-success .toast-title{color:var(--success-color)}.toast-success .toast-message{color:var(--text-primary)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-warning .toast-message{color:var(--text-primary)}.toast-error{border-left:4px solid var(--error-color)}.toast-error .toast-title{color:var(--error-color)}.toast-error .toast-message{color:var(--text-primary)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
-        }], ctorParameters: function () { return [{ type: ToastService }, { type: ThemeService }]; }, propDecorators: { themeClass: [{
-                type: HostBinding,
-                args: ['class']
+  `, styles: [":host{--info-color: #2196f3;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--text-primary: #333;--bg-primary: white;--shadow: rgba(0, 0, 0, .15);--text-secondary: #999;--border-color: rgba(0, 0, 0, .1)}:host(.theme-dark){--info-color: #64b5f6;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #ef5350;--text-primary: #e0e0e0;--bg-primary: #1e1e1e;--shadow: rgba(0, 0, 0, .3);--text-secondary: #888;--border-color: rgba(255, 255, 255, .1)}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:4px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 4px 12px var(--shadow);pointer-events:auto;min-width:280px;max-width:400px;animation:slideIn .3s ease-out}.toast-content{flex:1}.toast-title{font-weight:600;font-size:14px;margin-bottom:4px}.toast-message{font-size:13px;line-height:1.4}.toast-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-secondary);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.toast-close:hover{color:var(--text-primary)}.toast-info{border-left:4px solid var(--info-color)}.toast-info .toast-title{color:var(--info-color)}.toast-info .toast-message{color:var(--text-primary)}.toast-success{border-left:4px solid var(--success-color)}.toast-success .toast-title{color:var(--success-color)}.toast-success .toast-message{color:var(--text-primary)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-warning .toast-title{color:var(--warning-color)}.toast-warning .toast-message{color:var(--text-primary)}.toast-error{border-left:4px solid var(--error-color)}.toast-error .toast-title{color:var(--error-color)}.toast-error .toast-message{color:var(--text-primary)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:600px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto;max-width:100%}}\n"] }]
+        }], ctorParameters: () => [{ type: ToastService }, { type: ThemeService }], propDecorators: { themeClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class NotificationPanelComponent {
-    constructor(authService, toastService, themeService) {
-        this.authService = authService;
-        this.toastService = toastService;
-        this.themeService = themeService;
-        this.notificationRead = new EventEmitter();
-        this.isOpen = false;
-        this.notifications = [];
-        this.currentTheme = 'light';
-        this.activeTab = 'unread'; // Default to unread tab
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    get unreadNotifications() {
-        return this.notifications.filter(n => !n.isRead);
-    }
-    get readNotifications() {
-        return this.notifications.filter(n => n.isRead);
-    }
-    get currentNotifications() {
-        return this.activeTab === 'unread' ? this.unreadNotifications : this.readNotifications;
-    }
-    getNotificationMessage(notification) {
-        return notification.messageHtml || notification.message || '';
-    }
-    ngOnInit() {
-        this.themeService.currentTheme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => {
-            this.currentTheme = theme;
-        });
-        this.loadNotifications();
-        // Listen for new real-time notifications
-        this.authService.notifications$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((notification) => {
-            // Show toast for new notification
-            this.toastService.show(notification.messageHtml || notification.message || '', notification.title, 'info', 5000);
-            // Reload notifications list
-            this.loadNotifications();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadNotifications() {
-        this.authService.getNotifications(1, 50, true).subscribe({
-            next: (response) => {
-                this.notifications = response.items || [];
-            },
-            error: (err) => { }
-        });
-    }
-    open() {
-        this.isOpen = true;
-        this.activeTab = 'unread'; // Reset to unread tab when opening
-    }
-    close() {
-        this.isOpen = false;
-    }
-    switchTab(tab) {
-        this.activeTab = tab;
-    }
-    markAsRead(notificationId, event) {
-        if (event) {
-            event.stopPropagation();
-        }
-        this.authService.markAsRead(notificationId).subscribe({
-            next: () => {
-                const notification = this.notifications.find(n => n.id === notificationId);
-                if (notification) {
-                    notification.isRead = true;
-                    this.notificationRead.emit();
-                }
-            },
-            error: (err) => { }
-        });
-    }
-    markAllAsRead() {
-        this.authService.markAllAsRead().subscribe({
-            next: () => {
-                this.notifications.forEach(n => n.isRead = true);
-                this.notificationRead.emit();
-            },
-            error: (err) => { }
-        });
-    }
-    deleteAllRead() {
-        const readNotificationIds = this.notifications
-            .filter(n => n.isRead)
-            .map(n => n.id);
-        // Delete all read notifications
-        const deletePromises = readNotificationIds.map(id => this.authService.deleteNotification(id).toPromise());
-        Promise.all(deletePromises).then(() => {
-            // Remove all read notifications from the local array
-            this.notifications = this.notifications.filter(n => !n.isRead);
-        }).catch((err) => {
-            // If bulk delete fails, reload notifications to get current state
-            this.loadNotifications();
-        });
-    }
-    deleteAllUnread() {
-        const unreadNotificationIds = this.notifications
-            .filter(n => !n.isRead)
-            .map(n => n.id);
-        // Delete all unread notifications
-        const deletePromises = unreadNotificationIds.map(id => this.authService.deleteNotification(id).toPromise());
-        Promise.all(deletePromises).then(() => {
-            // Remove all unread notifications from the local array
-            this.notifications = this.notifications.filter(n => n.isRead);
-        }).catch((err) => {
-            // If bulk delete fails, reload notifications to get current state
-            this.loadNotifications();
-        });
-    }
-    delete(notificationId, event) {
-        event.stopPropagation();
-        this.authService.deleteNotification(notificationId).subscribe({
-            next: () => {
-                this.notifications = this.notifications.filter(n => n.id !== notificationId);
-            },
-            error: (err) => { }
-        });
-    }
-    formatDate(dateString) {
-        const date = new Date(dateString);
-        const now = new Date();
-        const diffMs = now.getTime() - date.getTime();
-        const diffMins = Math.floor(diffMs / 60000);
-        const diffHours = Math.floor(diffMs / 3600000);
-        const diffDays = Math.floor(diffMs / 86400000);
-        if (diffMins < 1)
-            return 'Now';
-        if (diffMins < 60)
-            return `${diffMins}m ago`;
-        if (diffHours < 24)
-            return `${diffHours}h ago`;
-        if (diffDays < 7)
-            return `${diffDays}d ago`;
-        return date.toLocaleDateString();
-    }
-}
-NotificationPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, deps: [{ token: MesAuthService }, { token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+class NotificationPanelComponent {
+    authService;
+    toastService;
+    themeService;
+    notificationRead = new EventEmitter();
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    isOpen = false;
+    notifications = [];
+    currentTheme = 'light';
+    activeTab = 'unread'; // Default to unread tab
+    destroy$ = new Subject();
+    get unreadNotifications() {
+        return this.notifications.filter(n => !n.isRead);
+    }
+    get readNotifications() {
+        return this.notifications.filter(n => n.isRead);
+    }
+    get currentNotifications() {
+        return this.activeTab === 'unread' ? this.unreadNotifications : this.readNotifications;
+    }
+    getNotificationMessage(notification) {
+        return notification.messageHtml || notification.message || '';
+    }
+    constructor(authService, toastService, themeService) {
+        this.authService = authService;
+        this.toastService = toastService;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+        this.loadNotifications();
+        // Listen for new real-time notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((notification) => {
+            // Show toast for new notification
+            this.toastService.show(notification.messageHtml || notification.message || '', notification.title, 'info', 5000);
+            // Reload notifications list
+            this.loadNotifications();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadNotifications() {
+        this.authService.getNotifications(1, 50, true).subscribe({
+            next: (response) => {
+                this.notifications = response.items || [];
+            },
+            error: (err) => { }
+        });
+    }
+    open() {
+        this.isOpen = true;
+        this.activeTab = 'unread'; // Reset to unread tab when opening
+    }
+    close() {
+        this.isOpen = false;
+    }
+    switchTab(tab) {
+        this.activeTab = tab;
+    }
+    markAsRead(notificationId, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.authService.markAsRead(notificationId).subscribe({
+            next: () => {
+                const notification = this.notifications.find(n => n.id === notificationId);
+                if (notification) {
+                    notification.isRead = true;
+                    this.notificationRead.emit();
+                }
+            },
+            error: (err) => { }
+        });
+    }
+    markAllAsRead() {
+        this.authService.markAllAsRead().subscribe({
+            next: () => {
+                this.notifications.forEach(n => n.isRead = true);
+                this.notificationRead.emit();
+            },
+            error: (err) => { }
+        });
+    }
+    deleteAllRead() {
+        const readNotificationIds = this.notifications
+            .filter(n => n.isRead)
+            .map(n => n.id);
+        // Delete all read notifications
+        const deletePromises = readNotificationIds.map(id => this.authService.deleteNotification(id).toPromise());
+        Promise.all(deletePromises).then(() => {
+            // Remove all read notifications from the local array
+            this.notifications = this.notifications.filter(n => !n.isRead);
+        }).catch((err) => {
+            // If bulk delete fails, reload notifications to get current state
+            this.loadNotifications();
+        });
+    }
+    deleteAllUnread() {
+        const unreadNotificationIds = this.notifications
+            .filter(n => !n.isRead)
+            .map(n => n.id);
+        // Delete all unread notifications
+        const deletePromises = unreadNotificationIds.map(id => this.authService.deleteNotification(id).toPromise());
+        Promise.all(deletePromises).then(() => {
+            // Remove all unread notifications from the local array
+            this.notifications = this.notifications.filter(n => n.isRead);
+        }).catch((err) => {
+            // If bulk delete fails, reload notifications to get current state
+            this.loadNotifications();
+        });
+    }
+    delete(notificationId, event) {
+        event.stopPropagation();
+        this.authService.deleteNotification(notificationId).subscribe({
+            next: () => {
+                this.notifications = this.notifications.filter(n => n.id !== notificationId);
+            },
+            error: (err) => { }
+        });
+    }
+    formatDate(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return date.toLocaleDateString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPanelComponent, deps: [{ token: MesAuthService }, { token: ToastService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: NotificationPanelComponent, isStandalone: true, selector: "ma-notification-panel", outputs: { notificationRead: "notificationRead" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
     <div class="notification-panel" [class.open]="isOpen">
       <!-- Header -->
       <div class="panel-header">
@@ -836,9 +929,10 @@ NotificationPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--success-color: #4caf50;--error-color: #f44336;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--bg-unread: #e3f2fd;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--success-color: #81c784;--error-color: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--bg-unread: rgba(144, 202, 249, .1);--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3)}.notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:var(--bg-primary);box-shadow:-2px 0 8px var(--shadow);display:flex;flex-direction:column;z-index:1000;transition:right .3s ease}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.panel-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent}.tab-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:var(--bg-primary)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;background-color:var(--bg-tertiary);transition:background-color .2s}.notification-item:hover{background-color:var(--bg-hover)}.notification-item.unread{background-color:var(--bg-unread)}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:4px}.notification-message{color:var(--text-secondary);font-size:13px;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.app-name{font-weight:500;color:var(--primary-color)}.read-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.read-btn:hover{color:var(--success-color)}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.delete-btn:hover{color:var(--error-color)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{width:100%;padding:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-hover)}.delete-all-btn{background-color:var(--error-color);color:#fff}.delete-all-btn:hover{background-color:#d32f2f}@media (max-width: 600px){.notification-panel{width:100%;right:-100%}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationPanelComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--success-color: #4caf50;--error-color: #f44336;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--bg-unread: #e3f2fd;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--success-color: #81c784;--error-color: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--bg-unread: rgba(144, 202, 249, .1);--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3)}.notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:var(--bg-primary);box-shadow:-2px 0 8px var(--shadow);display:flex;flex-direction:column;z-index:1000;transition:right .3s ease}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.panel-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent}.tab-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:var(--bg-primary)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;background-color:var(--bg-tertiary);transition:background-color .2s}.notification-item:hover{background-color:var(--bg-hover)}.notification-item.unread{background-color:var(--bg-unread)}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:4px}.notification-message{color:var(--text-secondary);font-size:13px;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.app-name{font-weight:500;color:var(--primary-color)}.read-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.read-btn:hover{color:var(--success-color)}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.delete-btn:hover{color:var(--error-color)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{width:100%;padding:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-hover)}.delete-all-btn{background-color:var(--error-color);color:#fff}.delete-all-btn:hover{background-color:#d32f2f}@media(max-width:600px){.notification-panel{width:100%;right:-100%}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationPanelComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ma-notification-panel', standalone: true, imports: [NgIf, NgFor], template: `
     <div class="notification-panel" [class.open]="isOpen">
       <!-- Header -->
@@ -923,108 +1017,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         </button>
       </div>
     </div>
-  `, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--success-color: #4caf50;--error-color: #f44336;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--bg-unread: #e3f2fd;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--success-color: #81c784;--error-color: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--bg-unread: rgba(144, 202, 249, .1);--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3)}.notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:var(--bg-primary);box-shadow:-2px 0 8px var(--shadow);display:flex;flex-direction:column;z-index:1000;transition:right .3s ease}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.panel-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent}.tab-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:var(--bg-primary)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;background-color:var(--bg-tertiary);transition:background-color .2s}.notification-item:hover{background-color:var(--bg-hover)}.notification-item.unread{background-color:var(--bg-unread)}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:4px}.notification-message{color:var(--text-secondary);font-size:13px;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.app-name{font-weight:500;color:var(--primary-color)}.read-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.read-btn:hover{color:var(--success-color)}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.delete-btn:hover{color:var(--error-color)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{width:100%;padding:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-hover)}.delete-all-btn{background-color:var(--error-color);color:#fff}.delete-all-btn:hover{background-color:#d32f2f}@media (max-width: 600px){.notification-panel{width:100%;right:-100%}}\n"] }]
-        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: ToastService }, { type: ThemeService }]; }, propDecorators: { notificationRead: [{
-                type: Output
-            }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
+  `, styles: [":host{--primary-color: #1976d2;--primary-hover: #1565c0;--success-color: #4caf50;--error-color: #f44336;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--bg-primary: white;--bg-secondary: #f5f5f5;--bg-tertiary: #fafafa;--bg-hover: #f5f5f5;--bg-unread: #e3f2fd;--border-color: #e0e0e0;--border-light: #f0f0f0;--shadow: rgba(0, 0, 0, .1)}:host(.theme-dark){--primary-color: #90caf9;--primary-hover: #64b5f6;--success-color: #81c784;--error-color: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #888;--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #252525;--bg-hover: #333;--bg-unread: rgba(144, 202, 249, .1);--border-color: #404040;--border-light: #333;--shadow: rgba(0, 0, 0, .3)}.notification-panel{position:fixed;top:0;right:-350px;width:350px;height:100vh;background:var(--bg-primary);box-shadow:-2px 0 8px var(--shadow);display:flex;flex-direction:column;z-index:1000;transition:right .3s ease}.notification-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.panel-header h3{margin:0;font-size:18px;color:var(--text-primary)}.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s}.close-btn:hover{color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.tab-btn{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;border-bottom:2px solid transparent}.tab-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:var(--bg-primary)}.notifications-list{flex:1;overflow-y:auto}.notification-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;background-color:var(--bg-tertiary);transition:background-color .2s}.notification-item:hover{background-color:var(--bg-hover)}.notification-item.unread{background-color:var(--bg-unread)}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:4px}.notification-message{color:var(--text-secondary);font-size:13px;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.app-name{font-weight:500;color:var(--primary-color)}.read-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.read-btn:hover{color:var(--success-color)}.delete-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}.delete-btn:hover{color:var(--error-color)}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px}.panel-footer{padding:12px 16px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.footer-actions{display:flex;gap:8px}.footer-actions .action-btn{flex:1}.action-btn{width:100%;padding:8px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-hover)}.delete-all-btn{background-color:var(--error-color);color:#fff}.delete-all-btn:hover{background-color:#d32f2f}@media(max-width:600px){.notification-panel{width:100%;right:-100%}}\n"] }]
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: ToastService }, { type: ThemeService }], propDecorators: { notificationRead: [{
+                type: Output
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-class MaUserComponent {
-    onNotificationRead() {
-        this.userProfile.loadUnreadCount();
-    }
-}
-MaUserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MaUserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MaUserComponent, isStandalone: true, selector: "ma-user", viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }], ngImport: i0, template: `
+class MaUserComponent {
+    userProfile;
+    ngAfterViewInit() {
+        // Ensure proper initialization
+        if (this.userProfile) {
+            this.userProfile.loadUnreadCount();
+        }
+    }
+    onNotificationRead() {
+        if (this.userProfile) {
+            this.userProfile.loadUnreadCount();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MaUserComponent, isStandalone: true, selector: "ma-user", viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }], ngImport: i0, template: `
     <ma-toast-container></ma-toast-container>
     <div class="user-header">
       <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
     </div>
     <ma-notification-panel #notificationPanel (notificationRead)="onNotificationRead()"></ma-notification-panel>
-  `, isInline: true, styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", outputs: ["notificationClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MaUserComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", outputs: ["notificationClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MaUserComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ma-user', standalone: true, imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent], template: `
     <ma-toast-container></ma-toast-container>
     <div class="user-header">
       <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
     </div>
     <ma-notification-panel #notificationPanel (notificationRead)="onNotificationRead()"></ma-notification-panel>
-  `, styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
-        }], propDecorators: { userProfile: [{
-                type: ViewChild,
-                args: [UserProfileComponent]
+  `, styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
+        }], propDecorators: { userProfile: [{
+                type: ViewChild,
+                args: [UserProfileComponent]
             }] } });
 
-class NotificationBadgeComponent {
-    constructor(authService, themeService) {
-        this.authService = authService;
-        this.themeService = themeService;
-        this.notificationClick = new EventEmitter();
-        this.unreadCount = 0;
-        this.currentTheme = 'light';
-        this.destroy$ = new Subject();
-    }
-    get themeClass() {
-        return `theme-${this.currentTheme}`;
-    }
-    ngOnInit() {
-        this.themeService.currentTheme$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(theme => {
-            this.currentTheme = theme;
-        });
-        this.loadUnreadCount();
-        // Listen for new notifications
-        this.authService.notifications$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.loadUnreadCount();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    loadUnreadCount() {
-        this.authService.getUnreadCount().subscribe({
-            next: (response) => {
-                this.unreadCount = response.unreadCount || 0;
-            },
-            error: (err) => console.error('Error loading unread count:', err)
-        });
-    }
-    onNotificationClick() {
-        this.notificationClick.emit();
-    }
-}
-NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationBadgeComponent, isStandalone: true, selector: "ma-notification-badge", outputs: { notificationClick: "notificationClick" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
+class NotificationBadgeComponent {
+    authService;
+    themeService;
+    notificationClick = new EventEmitter();
+    get themeClass() {
+        return `theme-${this.currentTheme}`;
+    }
+    unreadCount = 0;
+    currentTheme = 'light';
+    destroy$ = new Subject();
+    constructor(authService, themeService) {
+        this.authService = authService;
+        this.themeService = themeService;
+    }
+    ngOnInit() {
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(theme => {
+            this.currentTheme = theme;
+        });
+        this.loadUnreadCount();
+        // Listen for new notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loadUnreadCount();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadUnreadCount() {
+        this.authService.getUnreadCount().subscribe({
+            next: (response) => {
+                this.unreadCount = response.unreadCount || 0;
+            },
+            error: (err) => console.error('Error loading unread count:', err)
+        });
+    }
+    onNotificationClick() {
+        this.notificationClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationBadgeComponent, deps: [{ token: MesAuthService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: NotificationBadgeComponent, isStandalone: true, selector: "ma-notification-badge", outputs: { notificationClick: "notificationClick" }, host: { properties: { "class": "this.themeClass" } }, ngImport: i0, template: `
     <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
       <span class="icon">🔔</span>
       <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
     </button>
-  `, isInline: true, styles: [":host{--error-color: #f44336}:host(.theme-dark){--error-color: #ef5350}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: [":host{--error-color: #f44336}:host(.theme-dark){--error-color: #ef5350}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'ma-notification-badge', standalone: true, imports: [NgIf], template: `
     <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
       <span class="icon">🔔</span>
       <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
     </button>
-  `, styles: [":host{--error-color: #f44336}:host(.theme-dark){--error-color: #ef5350}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: MesAuthService }, { type: ThemeService }]; }, propDecorators: { notificationClick: [{
-                type: Output
-            }], themeClass: [{
-                type: HostBinding,
-                args: ['class']
+  `, styles: [":host{--error-color: #f44336}:host(.theme-dark){--error-color: #ef5350}.notification-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;transition:opacity .2s}.notification-btn:hover{opacity:.7}.icon{display:inline-block}.badge{position:absolute;top:0;right:0;background-color:var(--error-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}\n"] }]
+        }], ctorParameters: () => [{ type: MesAuthService }, { type: ThemeService }], propDecorators: { notificationClick: [{
+                type: Output
+            }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, UserProfileComponent };
+export { MaUserComponent, MesAuthInterceptor, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent };
 //# sourceMappingURL=mesauth-angular.mjs.map