+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ #{userSessionBean.initials}
+
-
-
-
Actions Rapides
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
#{userSessionBean.fullName}
+
+
+
+
+ #{userSessionBean.email}
+
+
+
+
+
+
+ Connecté
+
+
+
+
+
+
+ #{userSessionBean.primaryRole}
+
+
+
+
+
+
+
+
+
+
+
+
+ Informations Personnelles
+
+
+
+
+
#{userSessionBean.username}
+
+
+
+
+
#{userSessionBean.fullName}
+
+
+
+
+
+
#{userSessionBean.email}
+
+
+
+
+
+
+
#{userSessionBean.firstName}
+
+
+
+
+
#{userSessionBean.lastName}
+
+
+
+
+
+
+
+ Rôles et Permissions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Informations de Session OIDC
+
+
+
+
+
+
Informations du Token
+
+
+
+
+ #{userSessionBean.issuer}
+
+
+
+
+
+
+ #{userSessionBean.subject}
+
+
+
+
+
+
+ account
+
+
+
+
+
+
+
+
+
Détails de la Session
+
+
+
+
+
+
+
+
+
+
+
+
+
+ lions-user-manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Statistiques d'Activité
+
+
+
+
+
+
+ Connexions
+
+
+
--
+
Total des connexions
+
+
+
+
+
+
+ Dernière connexion
+
+
+
Aujourd'hui
+
Session en cours
+
+
+
+
+
+
+ Actions
+
+
+
--
+
Actions effectuées
+
+
+
+
+
+
+ Sessions
+
+
+
1
+
Session active
+
+
+
+
+
+
+
+
+
+
+
+ Actions Rapides
+
+
+
+
+
+
+
+
+
+ Gestion du Profil
+
+
+
+
+
+
+
+
+
+
+ Sessions et Sécurité
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
diff --git a/src/main/resources/META-INF/resources/pages/user-manager/users/view.xhtml b/src/main/resources/META-INF/resources/pages/user-manager/users/view.xhtml
new file mode 100644
index 0000000..1ca4300
--- /dev/null
+++ b/src/main/resources/META-INF/resources/pages/user-manager/users/view.xhtml
@@ -0,0 +1,232 @@
+
+
+
+
+
+
+
+
+
+ Profil Utilisateur - Lions User Manager
+
+
+
+
+
+
+
+
+
+
+
Profil de l'Utilisateur
+
Détails et informations de l'utilisateur
+
+
+
+
+ Retour à la liste
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ #{userProfilBean.user.prenom != null ? userProfilBean.user.prenom.substring(0,1).toUpperCase() : 'U'}#{userProfilBean.user.nom != null ? userProfilBean.user.nom.substring(0,1).toUpperCase() : 'U'}
+
+
+
+
#{userProfilBean.user.prenom} #{userProfilBean.user.nom}
+
+
+
+
+ #{userProfilBean.user.email}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Informations Personnelles
+
+
+
+
+
#{userProfilBean.user.username}
+
+
+
+
+
#{userProfilBean.user.prenom} #{userProfilBean.user.nom}
+
+
+
+
+
+
#{userProfilBean.user.email}
+
+
+
+
+
+
+
#{userProfilBean.user.prenom}
+
+
+
+
+
#{userProfilBean.user.nom}
+
+
+
+
+
#{userProfilBean.user.telephone}
+
+
+
+
+
+
+
+ Rôles et Permissions
+
+
+
+
+
+
+
+
+
+
+
+
#{userProfilBean.realmName}
+
+
+
+
+
+
+
+
+
+
Utilisateur non trouvé
+
L'utilisateur demandé n'existe pas ou n'a pas pu être chargé.
+
+
+ Retour à la liste
+
+
+
+
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main/resources/META-INF/resources/resources/components/user-action-dropdown.xhtml b/src/main/resources/META-INF/resources/resources/components/user-action-dropdown.xhtml
new file mode 100644
index 0000000..1ae248a
--- /dev/null
+++ b/src/main/resources/META-INF/resources/resources/components/user-action-dropdown.xhtml
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main/resources/META-INF/resources/resources/css/custom-topbar.css b/src/main/resources/META-INF/resources/resources/css/custom-topbar.css
new file mode 100644
index 0000000..aa01c86
--- /dev/null
+++ b/src/main/resources/META-INF/resources/resources/css/custom-topbar.css
@@ -0,0 +1,625 @@
+/* ============================================================================
+ Lions User Manager - Enhanced Custom Topbar Styles
+
+ Auteur: Lions User Manager
+ Version: 2.0.0
+ Description: Styles améliorés pour la topbar avec intégration intelligente
+ des patterns Freya layout pour un rendu parfait
+
+ Intégrations:
+ - Freya Layout Variables & Patterns
+ - Support Dark/Light Theme
+ - Animations fluides (fadeInDown, modal-in)
+ - PrimeFlex utility classes
+ - Responsive design
+ ============================================================================ */
+
+/* ----------------------------------------------------------------------------
+ BASE TOPBAR LAYOUT OVERRIDES
+ Améliore la structure de base de la topbar Freya
+ ---------------------------------------------------------------------------- */
+
+.layout-topbar {
+ position: fixed;
+ top: 0;
+ z-index: 999;
+ width: 100%;
+ height: 62px;
+ transition: width 0.2s, box-shadow 0.3s ease;
+}
+
+.layout-topbar .layout-topbar-wrapper {
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.layout-topbar .layout-topbar-wrapper .layout-topbar-right {
+ height: 100%;
+ flex-grow: 1;
+ padding: 0 16px 0 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ flex-grow: 1;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+.layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+/* ----------------------------------------------------------------------------
+ USER PROFILE LINK - Enhanced with Freya patterns
+ ---------------------------------------------------------------------------- */
+
+.layout-topbar .user-profile-link {
+ display: flex !important;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.5rem 0.75rem;
+ border-radius: 6px;
+ transition: all 0.2s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+ text-decoration: none;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.layout-topbar .user-profile-link::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.layout-topbar .user-profile-link:hover::before {
+ opacity: 1;
+}
+
+.layout-topbar .user-profile-link:hover {
+ background-color: rgba(255, 255, 255, 0.12);
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* User Avatar - Integration with Freya avatar patterns */
+.layout-topbar .user-profile-link .user-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: 600;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.layout-topbar .user-profile-link:hover .user-avatar {
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* User Info Container */
+.layout-topbar .user-info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ line-height: 1.2;
+ min-width: 0;
+}
+
+/* User Name - Enhanced typography */
+.layout-topbar .user-name {
+ font-weight: 600;
+ font-size: 0.875rem;
+ color: var(--text-color);
+ margin-bottom: 0.125rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 200px;
+}
+
+/* User Email */
+.layout-topbar .user-email {
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+ opacity: 0.85;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 200px;
+}
+
+/* User Role Badge */
+.layout-topbar .user-role {
+ font-size: 0.7rem;
+ color: var(--primary-color);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.6px;
+ background: rgba(var(--primary-color-rgb, 79, 142, 236), 0.1);
+ padding: 0.125rem 0.375rem;
+ border-radius: 4px;
+ white-space: nowrap;
+}
+
+.layout-topbar .user-separator {
+ color: var(--text-color-secondary);
+ opacity: 0.5;
+ font-weight: 300;
+ margin: 0 0.25rem;
+}
+
+/* Online Status Indicator */
+.layout-topbar .user-status {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+ position: relative;
+}
+
+.layout-topbar .user-status.online {
+ background-color: #4CAF50;
+ box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+ animation: pulse-online 2s ease-in-out infinite;
+}
+
+@keyframes pulse-online {
+ 0%, 100% {
+ box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+ }
+ 50% {
+ box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.2);
+ }
+}
+
+/* ----------------------------------------------------------------------------
+ USER DROPDOWN MENU - Enhanced with Freya dropdown patterns
+ ---------------------------------------------------------------------------- */
+
+.layout-topbar .user-dropdown-menu {
+ display: none;
+ position: absolute;
+ top: 62px;
+ right: 0;
+ min-width: 280px;
+ max-width: 320px;
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+ border: 1px solid var(--surface-border);
+ background: var(--surface-card);
+ overflow: hidden;
+ z-index: 1000;
+ animation-duration: 0.2s;
+ animation-timing-function: cubic-bezier(0.05, 0.74, 0.2, 0.99);
+ animation-fill-mode: forwards;
+}
+
+/* Show dropdown when parent is active */
+.layout-topbar .user-profile.active-topmenuitem > .user-dropdown-menu {
+ display: block;
+ animation-name: fadeInDown;
+}
+
+/* Dropdown Header - Integration with Freya gradient patterns */
+.user-dropdown-header {
+ padding: 1.25rem 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-600, #387FE9));
+ color: white;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.user-dropdown-header::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+ animation: shimmer 3s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+ 0%, 100% { transform: translate(0, 0); }
+ 50% { transform: translate(-20%, -20%); }
+}
+
+/* Dropdown Avatar */
+.user-dropdown-avatar {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.user-dropdown-avatar > div {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ font-weight: 700;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.user-status-indicator {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ border: 2px solid white;
+}
+
+.user-status-indicator.online {
+ background-color: #4CAF50;
+ animation: pulse-indicator 2s ease-in-out infinite;
+}
+
+@keyframes pulse-indicator {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.1); }
+}
+
+/* Dropdown User Info */
+.user-dropdown-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.user-dropdown-name {
+ font-weight: 600;
+ font-size: 1rem;
+ margin-bottom: 0.25rem;
+ color: white;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.user-dropdown-email {
+ font-size: 0.875rem;
+ opacity: 0.95;
+ margin-bottom: 0.25rem;
+ color: rgba(255, 255, 255, 0.95);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.user-dropdown-role {
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ background: rgba(255, 255, 255, 0.25);
+ padding: 0.25rem 0.5rem;
+ border-radius: 12px;
+ display: inline-block;
+ color: white;
+ backdrop-filter: blur(10px);
+}
+
+/* Dividers */
+.user-dropdown-divider {
+ height: 1px;
+ background-color: var(--surface-border);
+ margin: 0;
+}
+
+/* Menu Sections */
+.user-dropdown-section {
+ padding: 0.75rem 0;
+}
+
+.section-title {
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ color: var(--text-color-secondary);
+ padding: 0 1rem 0.5rem 1rem;
+ margin-bottom: 0.25rem;
+}
+
+.section-items {
+ display: flex;
+ flex-direction: column;
+}
+
+/* Dropdown Items - Enhanced with Freya interaction patterns */
+.dropdown-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ color: var(--text-color);
+ text-decoration: none;
+ transition: all 0.2s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+ border: none;
+ background: none;
+ width: 100%;
+ text-align: left;
+ cursor: pointer;
+ font-size: 0.875rem;
+ font-weight: 500;
+ position: relative;
+ overflow: hidden;
+}
+
+.dropdown-item::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 3px;
+ height: 100%;
+ background: var(--primary-color);
+ transform: scaleX(0);
+ transition: transform 0.2s ease;
+}
+
+.dropdown-item:hover::before {
+ transform: scaleX(1);
+}
+
+.dropdown-item:hover {
+ background-color: var(--surface-hover);
+ color: var(--primary-color);
+ padding-left: 1.25rem;
+}
+
+.dropdown-item:active {
+ background-color: var(--surface-ground);
+ transform: scale(0.98);
+}
+
+.dropdown-item i {
+ width: 1.25rem;
+ text-align: center;
+ color: var(--text-color-secondary);
+ transition: all 0.2s ease;
+ font-size: 1rem;
+}
+
+.dropdown-item:hover i {
+ color: var(--primary-color);
+ transform: scale(1.1);
+}
+
+.dropdown-item span {
+ flex: 1;
+}
+
+.item-arrow {
+ margin-left: auto;
+ opacity: 0;
+ transition: opacity 0.2s ease, transform 0.2s ease;
+ font-size: 0.75rem;
+}
+
+.dropdown-item:hover .item-arrow {
+ opacity: 1;
+ transform: translateX(4px);
+}
+
+/* Logout Item - Enhanced danger state */
+.logout-item {
+ color: var(--red-500) !important;
+ margin-top: 0.25rem;
+}
+
+.logout-item:hover {
+ background-color: var(--red-50) !important;
+ color: var(--red-600) !important;
+}
+
+.logout-item i {
+ color: var(--red-500) !important;
+}
+
+.logout-item:hover i {
+ color: var(--red-600) !important;
+ transform: scale(1.1) rotate(-5deg);
+}
+
+/* ----------------------------------------------------------------------------
+ ANIMATIONS - Integration with Freya animation patterns
+ ---------------------------------------------------------------------------- */
+
+@keyframes dropdownFadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(-10px) scale(0.95);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+.user-dropdown-menu {
+ animation: dropdownFadeIn 0.3s ease-out;
+ transform-origin: top right;
+}
+
+/* ----------------------------------------------------------------------------
+ DARK MODE SUPPORT - Integration with Freya dark theme
+ ---------------------------------------------------------------------------- */
+
+.layout-wrapper.layout-topbar-dark .layout-topbar {
+ background-color: #293241;
+ box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.2);
+}
+
+.layout-wrapper.layout-topbar-dark .user-profile-link:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+.layout-wrapper.layout-topbar-dark .user-dropdown-menu {
+ background: var(--surface-900, #1E1E1E);
+ border-color: var(--surface-700, #383838);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.layout-wrapper.layout-topbar-dark .user-dropdown-divider {
+ background-color: var(--surface-700, #383838);
+}
+
+.layout-wrapper.layout-topbar-dark .section-title {
+ color: var(--text-color-secondary);
+ opacity: 0.8;
+}
+
+.layout-wrapper.layout-topbar-dark .dropdown-item {
+ color: var(--text-color);
+}
+
+.layout-wrapper.layout-topbar-dark .dropdown-item:hover {
+ background-color: var(--surface-800, #2A2A2A);
+}
+
+.layout-wrapper.layout-topbar-dark .logout-item:hover {
+ background-color: rgba(211, 47, 47, 0.1) !important;
+}
+
+/* ----------------------------------------------------------------------------
+ RESPONSIVE DESIGN - Integration with Freya responsive patterns
+ ---------------------------------------------------------------------------- */
+
+@media (max-width: 991px) {
+ .layout-topbar .user-dropdown-menu {
+ left: 10px;
+ right: 10px;
+ position: fixed;
+ top: 62px;
+ max-width: none;
+ }
+}
+
+@media (max-width: 768px) {
+ .layout-topbar .user-dropdown-menu {
+ min-width: 260px;
+ max-width: 280px;
+ }
+
+ .user-dropdown-header {
+ padding: 1rem 0.75rem;
+ }
+
+ .dropdown-item {
+ padding: 0.625rem 0.75rem;
+ font-size: 0.8125rem;
+ }
+
+ .section-title {
+ padding: 0 0.75rem 0.5rem 0.75rem;
+ }
+
+ /* Hide user info on mobile */
+ .layout-topbar .user-info {
+ display: none;
+ }
+
+ .layout-topbar .user-profile-link {
+ padding: 0.5rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .layout-topbar .user-dropdown-menu {
+ left: 8px;
+ right: 8px;
+ border-radius: 12px;
+ }
+}
+
+/* ----------------------------------------------------------------------------
+ ACCESSIBILITY ENHANCEMENTS
+ ---------------------------------------------------------------------------- */
+
+.dropdown-item:focus,
+.user-profile-link:focus {
+ outline: 2px solid var(--primary-color);
+ outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .layout-topbar .user-profile-link,
+ .dropdown-item,
+ .user-dropdown-menu,
+ .user-avatar,
+ .item-arrow {
+ animation: none;
+ transition: none;
+ }
+}
+
+/* ----------------------------------------------------------------------------
+ UTILITY CLASSES - PrimeFlex integration
+ ---------------------------------------------------------------------------- */
+
+.layout-topbar .flex {
+ display: flex !important;
+}
+
+.layout-topbar .align-items-center {
+ align-items: center !important;
+}
+
+.layout-topbar .justify-content-center {
+ justify-content: center !important;
+}
+
+.layout-topbar .gap-2 {
+ gap: 0.5rem !important;
+}
+
+.layout-topbar .text-white {
+ color: white !important;
+}
+
+.layout-topbar .border-circle {
+ border-radius: 50% !important;
+}
+
+.layout-topbar .bg-primary {
+ background-color: var(--primary-color) !important;
+}
diff --git a/src/main/resources/META-INF/resources/resources/css/topbar-elite.css b/src/main/resources/META-INF/resources/resources/css/topbar-elite.css
new file mode 100644
index 0000000..f257f28
--- /dev/null
+++ b/src/main/resources/META-INF/resources/resources/css/topbar-elite.css
@@ -0,0 +1,795 @@
+/*
+ * ╔════════════════════════════════════════════════════════════╗
+ * ║ Lions Platform Elite Topbar Styles (Freya Design System) ║
+ * ║ Modern, Professional, Responsive ║
+ * ╚════════════════════════════════════════════════════════════╝
+ */
+
+/* ═══════════════════════════════════════════════════════════ */
+/* BASE TOPBAR */
+/* ═══════════════════════════════════════════════════════════ */
+
+.unionflow-elite,
+.lions-elite {
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-600) 100%);
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+ position: relative;
+ z-index: 1000;
+}
+
+.unionflow-elite::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ var(--primary-300) 50%,
+ transparent 100%);
+ opacity: 0.5;
+}
+
+/* App Version Badge */
+.app-version {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.625rem;
+ background: rgba(255,255,255,0.15);
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: rgba(255,255,255,0.9);
+ margin-left: 0.75rem;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255,255,255,0.2);
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* SEARCH */
+/* ═══════════════════════════════════════════════════════════ */
+
+.search-item .topbar-icon {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.search-item:hover .topbar-icon {
+ transform: scale(1.1);
+ color: var(--primary-100);
+}
+
+.search-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 0;
+ min-width: 400px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+ padding: 1rem;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-10px);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border: 1px solid var(--surface-border);
+}
+
+.search-item:hover .search-dropdown {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.search-wrapper-elite {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ background: var(--surface-50);
+ border-radius: 8px;
+ padding: 0.5rem 1rem;
+ border: 1px solid var(--surface-border);
+ transition: all 0.3s ease;
+}
+
+.search-wrapper-elite:focus-within {
+ background: white;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
+}
+
+.search-wrapper-elite .pi-search {
+ color: var(--text-color-secondary);
+ font-size: 1rem;
+}
+
+.search-wrapper-elite .search-input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ padding: 0.5rem 0;
+ font-size: 0.875rem;
+}
+
+.search-wrapper-elite .search-input:focus {
+ outline: none;
+ box-shadow: none;
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* NOTIFICATIONS */
+/* ═══════════════════════════════════════════════════════════ */
+
+.notifications-item {
+ position: relative;
+}
+
+.badge-count {
+ position: absolute;
+ top: -4px;
+ right: -4px;
+ background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+ color: white;
+ font-size: 0.625rem;
+ font-weight: 700;
+ padding: 0.125rem 0.375rem;
+ border-radius: 10px;
+ min-width: 18px;
+ height: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
+ animation: pulse-badge 2s infinite;
+}
+
+@keyframes pulse-badge {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.1); }
+}
+
+.notifications-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 0;
+ min-width: 360px;
+ max-width: 400px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(0,0,0,0.12);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-10px);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border: 1px solid var(--surface-border);
+ overflow: hidden;
+}
+
+.notifications-item:hover .notifications-dropdown {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.notif-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 1.25rem;
+ background: var(--surface-50);
+ border-bottom: 1px solid var(--surface-border);
+}
+
+.count-label {
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+ background: var(--primary-color);
+ color: white;
+ padding: 0.25rem 0.625rem;
+ border-radius: 12px;
+ font-weight: 600;
+}
+
+.notif-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 0.875rem;
+ padding: 0.875rem 1.25rem;
+ transition: all 0.2s ease;
+ cursor: pointer;
+}
+
+.notif-item:hover {
+ background: var(--surface-50);
+}
+
+.notif-item i {
+ font-size: 1.25rem;
+ margin-top: 0.25rem;
+}
+
+.notif-title {
+ font-weight: 600;
+ color: var(--text-color);
+ font-size: 0.875rem;
+ margin-bottom: 0.25rem;
+}
+
+.notif-time {
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+}
+
+.notif-footer {
+ padding: 0.75rem 1.25rem;
+ text-align: center;
+ border-top: 1px solid var(--surface-border);
+ background: var(--surface-50);
+}
+
+.notif-footer a {
+ font-size: 0.875rem;
+ font-weight: 600;
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+.notif-footer a:hover {
+ color: var(--primary-600);
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* USER PROFILE */
+/* ═══════════════════════════════════════════════════════════ */
+
+.elite-user .profile-trigger {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.5rem 0.875rem;
+ border-radius: 10px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ background: rgba(255,255,255,0.1);
+ backdrop-filter: blur(10px);
+}
+
+.elite-user .profile-trigger:hover {
+ background: rgba(255,255,255,0.2);
+ transform: translateY(-1px);
+}
+
+.avatar-container {
+ position: relative;
+}
+
+.avatar {
+ width: 38px;
+ height: 38px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.875rem;
+ font-weight: 700;
+ color: white;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ border: 2px solid rgba(255,255,255,0.3);
+}
+
+.bg-gradient-primary {
+ background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);
+}
+
+.status-dot {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ border: 2px solid white;
+}
+
+.status-dot.online {
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+ box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+ animation: pulse-dot 2s infinite;
+}
+
+@keyframes pulse-dot {
+ 0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
+ 50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.4); }
+}
+
+.user-info {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.user-header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.user-name {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: white;
+ line-height: 1.2;
+}
+
+.role-badge {
+ font-size: 0.625rem;
+ padding: 0.125rem 0.5rem;
+ background: rgba(255,255,255,0.25);
+ border-radius: 8px;
+ font-weight: 600;
+ color: white;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.session-timer {
+ display: flex;
+ align-items: center;
+ gap: 0.375rem;
+}
+
+.icon-sm {
+ font-size: 0.7rem;
+}
+
+.timer-text {
+ font-size: 0.75rem;
+ font-weight: 600;
+ font-family: 'Courier New', monospace;
+}
+
+.arrow {
+ font-size: 0.75rem;
+ color: rgba(255,255,255,0.8);
+ transition: transform 0.3s ease;
+}
+
+.elite-user:hover .arrow {
+ transform: rotate(180deg);
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* USER DROPDOWN MENU */
+/* ═══════════════════════════════════════════════════════════ */
+
+.elite-dropdown {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 0;
+ min-width: 340px;
+ background: white;
+ border-radius: 16px;
+ box-shadow: 0 12px 48px rgba(0,0,0,0.15);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-10px) scale(0.95);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border: 1px solid var(--surface-border);
+ overflow: hidden;
+}
+
+.elite-user:hover .elite-dropdown {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0) scale(1);
+}
+
+/* Dropdown Header */
+.dropdown-header {
+ padding: 1.25rem;
+ background: linear-gradient(135deg, var(--primary-50) 0%, var(--surface-50) 100%);
+ border-bottom: 1px solid var(--surface-border);
+}
+
+.header-content {
+ display: flex;
+ gap: 1rem;
+}
+
+.header-avatar {
+ position: relative;
+}
+
+.avatar-lg {
+ width: 56px;
+ height: 56px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: white;
+ box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+}
+
+.status-indicator {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ border: 3px solid white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.status-indicator.online {
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.status-indicator i {
+ font-size: 6px;
+ color: white;
+}
+
+.header-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ justify-content: center;
+}
+
+.header-info .name {
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--text-color);
+ line-height: 1.3;
+}
+
+.header-info .email {
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+ line-height: 1.3;
+}
+
+.role-tag {
+ display: inline-flex;
+ align-items: center;
+ font-size: 0.625rem;
+ padding: 0.25rem 0.625rem;
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-600) 100%);
+ color: white;
+ border-radius: 8px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ align-self: flex-start;
+ margin-top: 0.25rem;
+}
+
+/* Session Card */
+.session-card {
+ padding: 1rem 1.25rem;
+ background: var(--surface-50);
+ border-bottom: 1px solid var(--surface-border);
+}
+
+.card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.625rem;
+}
+
+.info-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.info-row .label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+ font-weight: 500;
+}
+
+.info-row .label i {
+ font-size: 0.875rem;
+}
+
+.info-row .value {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+/* Progress Bar */
+.progress-container {
+ margin-top: 0.5rem;
+}
+
+.progress-bar {
+ height: 6px;
+ background: var(--surface-200);
+ border-radius: 10px;
+ overflow: hidden;
+ position: relative;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--green-400) 0%, var(--green-500) 100%);
+ border-radius: 10px;
+ transition: width 1s ease, background 0.3s ease;
+}
+
+.progress-fill[style*="width: 0%"],
+.progress-fill[style*="width: 1%"],
+.progress-fill[style*="width: 2%"],
+.progress-fill[style*="width: 3%"],
+.progress-fill[style*="width: 4%"],
+.progress-fill[style*="width: 5%"] {
+ background: linear-gradient(90deg, var(--red-400) 0%, var(--red-500) 100%);
+}
+
+.progress-label {
+ font-size: 0.625rem;
+ color: var(--text-color-secondary);
+ margin-top: 0.375rem;
+ text-align: right;
+ font-weight: 500;
+}
+
+/* Menu Sections */
+.divider {
+ height: 1px;
+ background: var(--surface-border);
+ margin: 0;
+}
+
+.menu-section {
+ padding: 0.75rem 0;
+}
+
+.menu-section.compact {
+ padding: 0.5rem 0;
+}
+
+.section-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.75rem;
+ font-weight: 700;
+ color: var(--text-color-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 0.5rem 1.25rem 0.75rem;
+}
+
+.section-items {
+ display: flex;
+ flex-direction: column;
+}
+
+.menu-item {
+ display: flex;
+ align-items: center;
+ gap: 0.875rem;
+ padding: 0.75rem 1.25rem;
+ color: var(--text-color);
+ text-decoration: none;
+ transition: all 0.2s ease;
+ font-size: 0.875rem;
+ cursor: pointer;
+ border: none;
+ background: transparent;
+ width: 100%;
+ text-align: left;
+}
+
+.menu-item:hover {
+ background: var(--surface-100);
+}
+
+.menu-item i:first-child {
+ font-size: 1rem;
+ color: var(--text-color-secondary);
+ transition: all 0.2s ease;
+}
+
+.menu-item:hover i:first-child {
+ color: var(--primary-color);
+ transform: translateX(2px);
+}
+
+.menu-item span {
+ flex: 1;
+ font-weight: 500;
+}
+
+.arrow-right {
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+ margin-left: auto;
+ transition: transform 0.2s ease;
+}
+
+.menu-item:hover .arrow-right {
+ transform: translateX(3px);
+}
+
+.item-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 20px;
+ height: 20px;
+ padding: 0 0.375rem;
+ background: var(--primary-color);
+ color: white;
+ font-size: 0.625rem;
+ font-weight: 700;
+ border-radius: 10px;
+ margin-left: auto;
+}
+
+.value-badge {
+ font-size: 0.75rem;
+ color: var(--text-color-secondary);
+ background: var(--surface-100);
+ padding: 0.25rem 0.625rem;
+ border-radius: 8px;
+ font-weight: 600;
+ margin-left: auto;
+}
+
+/* Logout Section */
+.logout-divider {
+ background: linear-gradient(90deg,
+ transparent 0%,
+ var(--red-200) 50%,
+ transparent 100%);
+ height: 2px;
+}
+
+.logout-section {
+ padding: 0.75rem 0;
+ background: linear-gradient(to bottom, white 0%, var(--red-50) 100%);
+}
+
+.logout-btn {
+ display: flex;
+ align-items: center;
+ gap: 0.875rem;
+ padding: 0.875rem 1.25rem;
+ color: var(--red-600);
+ font-weight: 600;
+ font-size: 0.875rem;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ border: none;
+ background: transparent;
+ width: 100%;
+ text-align: left;
+}
+
+.logout-btn:hover {
+ background: var(--red-100);
+ color: var(--red-700);
+}
+
+.logout-btn i:first-child {
+ font-size: 1rem;
+ transition: transform 0.3s ease;
+}
+
+.logout-btn:hover i:first-child {
+ transform: scale(1.1) rotate(-10deg);
+}
+
+.logout-btn .pi-lock {
+ font-size: 0.875rem;
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* LOGOUT DIALOG */
+/* ═══════════════════════════════════════════════════════════ */
+
+.elite-dialog .dialog-content {
+ text-align: center;
+ padding: 1.5rem 1rem;
+}
+
+.icon-wrapper {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--red-50) 0%, var(--red-100) 100%);
+ margin-bottom: 1.5rem;
+}
+
+.icon-lg {
+ font-size: 2.5rem;
+ color: var(--red-500);
+}
+
+.dialog-title {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--text-color);
+ margin-bottom: 1.5rem;
+ line-height: 1.4;
+}
+
+.info-box {
+ background: var(--surface-50);
+ border-radius: 12px;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ border: 1px solid var(--surface-border);
+}
+
+.info-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.625rem;
+ color: var(--text-color);
+ font-size: 0.875rem;
+}
+
+.info-item i {
+ color: var(--primary-color);
+ font-size: 1rem;
+}
+
+.warning-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ font-size: 0.875rem;
+ color: var(--text-color-secondary);
+ margin: 0;
+}
+
+.warning-text i {
+ color: var(--blue-500);
+}
+
+.dialog-footer {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: flex-end;
+ padding-top: 1rem;
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/* UTILITY CLASSES */
+/* ═══════════════════════════════════════════════════════════ */
+
+.text-green-600 { color: #059669 !important; }
+.text-yellow-600 { color: #d97706 !important; }
+.text-orange-600 { color: #ea580c !important; }
+.text-red-600 { color: #dc2626 !important; }
+
+/* ═══════════════════════════════════════════════════════════ */
+/* RESPONSIVE */
+/* ═══════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+ .app-version { display: none; }
+ .user-info { display: none; }
+ .elite-dropdown { min-width: 300px; }
+ .search-dropdown { min-width: 280px; }
+}
diff --git a/src/main/resources/META-INF/resources/template.xhtml b/src/main/resources/META-INF/resources/template.xhtml
new file mode 100644
index 0000000..fa68ea5
--- /dev/null
+++ b/src/main/resources/META-INF/resources/template.xhtml
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+
+ <ui:insert name="title">Lions User Manager</ui:insert>
+
+
+
+
+
+
+
+
+
+ 🦁 Lions User Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml b/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
index 45d377b..2ca51de 100644
--- a/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
+++ b/src/main/resources/META-INF/resources/templates/components/layout/menu.xhtml
@@ -49,6 +49,11 @@
+
+
+
+
+
diff --git a/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml b/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
index 8010114..0dc3b04 100644
--- a/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
+++ b/src/main/resources/META-INF/resources/templates/components/layout/topbar.xhtml
@@ -1,70 +1,298 @@
-