Refactoring
This commit is contained in:
dahoud
@@ -4,104 +4,329 @@
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui">
|
||||
|
||||
<div class="layout-topbar">
|
||||
<!--
|
||||
╔═══════════════════════════════════════════════════════════╗
|
||||
║ UnionFlow - Elite Topbar (Freya Design System) ║
|
||||
║ Real-time Session Monitor | Modern UI | Professional ║
|
||||
╚═══════════════════════════════════════════════════════════╝
|
||||
-->
|
||||
|
||||
<h:outputStylesheet library="css" name="topbar-elite.css" />
|
||||
|
||||
<div class="layout-topbar unionflow-elite">
|
||||
<div class="layout-topbar-wrapper">
|
||||
<!-- LEFT SECTION -->
|
||||
<div class="layout-topbar-left">
|
||||
<a href="#" class="menu-button">
|
||||
<i class="pi pi-bars"/>
|
||||
</a>
|
||||
<h:link id="logolink" outcome="/pages/secure/dashboard" styleClass="layout-topbar-logo">
|
||||
<p:graphicImage name="images/#{ guestPreferences.lightLogo ? 'logo-freya-white.svg' : 'logo-freya.svg'}" library="freya-layout" />
|
||||
<p:graphicImage name="images/#{guestPreferences.lightLogo ? 'logo-freya-white.svg' : 'logo-freya.svg'}"
|
||||
library="freya-layout"
|
||||
alt="UnionFlow"
|
||||
title="Retour au tableau de bord"/>
|
||||
</h:link>
|
||||
<span class="app-version">v1.0</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CENTER - Menu -->
|
||||
<ui:include src="/templates/components/layout/menu.xhtml" />
|
||||
|
||||
<!-- RIGHT SECTION -->
|
||||
<div class="layout-topbar-right">
|
||||
<ul class="layout-topbar-actions">
|
||||
<li class="topbar-item search-item ">
|
||||
<a href="#">
|
||||
|
||||
<!-- Search -->
|
||||
<li class="topbar-item search-item">
|
||||
<a href="#" title="Rechercher">
|
||||
<i class="topbar-icon pi pi-search"/>
|
||||
</a>
|
||||
<h:form>
|
||||
<h:panelGroup styleClass="search-input-wrapper">
|
||||
<p:inputText placeholder="Rechercher..." />
|
||||
<i class="pi pi-search"/>
|
||||
</h:panelGroup>
|
||||
</h:form>
|
||||
<ul>
|
||||
<h:form onsubmit="return false;">
|
||||
<h:panelGroup styleClass="search-input-wrapper">
|
||||
<p:inputText placeholder="Rechercher..." />
|
||||
<div class="search-dropdown">
|
||||
<h:form styleClass="search-form-elite">
|
||||
<div class="search-wrapper-elite">
|
||||
<i class="pi pi-search"/>
|
||||
</h:panelGroup>
|
||||
<p:inputText placeholder="Rechercher membres, organisations..."
|
||||
styleClass="search-input"/>
|
||||
<p:commandButton icon="pi pi-arrow-right"
|
||||
styleClass="p-button-rounded p-button-sm"/>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Notifications -->
|
||||
<li class="topbar-item notifications-item">
|
||||
<a href="#" title="Notifications">
|
||||
<i class="topbar-icon pi pi-bell"/>
|
||||
<span class="badge-count">3</span>
|
||||
</a>
|
||||
<ul class="notifications-dropdown">
|
||||
<li class="notif-header">
|
||||
<span class="font-semibold">Notifications</span>
|
||||
<span class="count-label">3 nouvelles</span>
|
||||
</li>
|
||||
<li class="divider"/>
|
||||
<li class="notif-item">
|
||||
<i class="pi pi-info-circle text-blue-500"/>
|
||||
<div>
|
||||
<div class="notif-title">Nouvelle adhésion</div>
|
||||
<div class="notif-time">Il y a 5 min</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="notif-item">
|
||||
<i class="pi pi-check-circle text-green-500"/>
|
||||
<div>
|
||||
<div class="notif-title">Cotisation validée</div>
|
||||
<div class="notif-time">Il y a 1h</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"/>
|
||||
<li class="notif-footer">
|
||||
<a href="#" class="text-primary">Voir tout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="topbar-item user-profile">
|
||||
<a href="#" title="#{userSession.currentUser.nomComplet}">
|
||||
<div class="flex align-items-center">
|
||||
<div class="bg-primary text-white border-round flex align-items-center justify-content-center mr-2"
|
||||
style="width: 32px; height: 32px; font-size: 12px; font-weight: bold;">
|
||||
|
||||
<!-- User Profile -->
|
||||
<li class="topbar-item user-profile elite-user">
|
||||
<a href="#" class="profile-trigger">
|
||||
<div class="avatar-container">
|
||||
<div class="avatar bg-gradient-primary">
|
||||
#{userSession.currentUser.initiales}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<div class="text-900 font-medium">#{userSession.currentUser.nomComplet}</div>
|
||||
<div class="text-600 text-xs">#{userSession.typeCompte}</div>
|
||||
<span class="status-dot online"/>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<div class="user-header">
|
||||
<span class="user-name">#{userSession.currentUser.nomComplet}</span>
|
||||
<span class="role-badge">#{userSession.typeCompte}</span>
|
||||
</div>
|
||||
<div class="session-timer">
|
||||
<h:panelGroup id="sessionTimerDisplay">
|
||||
<i class="#{sessionMonitor.timeIndicatorIcon} icon-sm"/>
|
||||
<span class="#{sessionMonitor.timeIndicatorClass} timer-text">
|
||||
#{sessionMonitor.formattedRemainingTime}
|
||||
</span>
|
||||
</h:panelGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i class="pi pi-angle-down arrow"/>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<h:form>
|
||||
<p:commandLink action="#{navigationBean.goToProfile}">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
<span>Mon Profil</span>
|
||||
</p:commandLink>
|
||||
</h:form>
|
||||
</li>
|
||||
<li>
|
||||
<h:form>
|
||||
<p:commandLink action="#{navigationBean.goToSettings}">
|
||||
<i class="pi pi-cog mr-2"></i>
|
||||
<span>Paramètres</span>
|
||||
</p:commandLink>
|
||||
</h:form>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/pages/secure/messages.xhtml">
|
||||
<i class="pi pi-envelope mr-2"></i>
|
||||
<span>Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-top-1 surface-border">
|
||||
<div class="p-2 text-xs text-600">
|
||||
<div>Entité: #{userSession.entite.nom}</div>
|
||||
<div>Connecté depuis:
|
||||
<span class="text-green-600">#{jwtTokenManager.timeUntilExpiration / 60} min</span>
|
||||
|
||||
<!-- User Dropdown -->
|
||||
<ul class="user-dropdown elite-dropdown">
|
||||
<!-- Header -->
|
||||
<li class="dropdown-header">
|
||||
<div class="header-content">
|
||||
<div class="header-avatar">
|
||||
<div class="avatar-lg bg-gradient-primary">
|
||||
#{userSession.currentUser.initiales}
|
||||
</div>
|
||||
<span class="status-indicator online">
|
||||
<i class="pi pi-circle-fill"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="header-info">
|
||||
<div class="name">#{userSession.currentUser.nomComplet}</div>
|
||||
<div class="email">#{userSession.currentUser.email}</div>
|
||||
<span class="role-tag">#{userSession.typeCompte}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<!-- Session Card -->
|
||||
<li class="session-card">
|
||||
<div class="card-content">
|
||||
<div class="info-row">
|
||||
<span class="label">
|
||||
<i class="pi pi-building"/>
|
||||
Organisation
|
||||
</span>
|
||||
<span class="value">#{userSession.entite.nom}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">
|
||||
<i class="#{sessionMonitor.timeIndicatorIcon}"/>
|
||||
Temps restant
|
||||
</span>
|
||||
<span class="value #{sessionMonitor.timeIndicatorClass}">
|
||||
#{sessionMonitor.formattedRemainingTime}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"
|
||||
style="width: #{100 - sessionMonitor.sessionProgressPercent}%"/>
|
||||
</div>
|
||||
<div class="progress-label">
|
||||
#{sessionMonitor.remainingMinutes} min
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="divider"/>
|
||||
|
||||
<!-- Actions -->
|
||||
<li class="menu-section">
|
||||
<div class="section-title">
|
||||
<i class="pi pi-user"/>
|
||||
Mon Compte
|
||||
</div>
|
||||
<div class="section-items">
|
||||
<h:form>
|
||||
<p:commandLink action="#{navigationBean.goToProfile}"
|
||||
styleClass="menu-item">
|
||||
<i class="pi pi-user-edit"/>
|
||||
<span>Mon Profil</span>
|
||||
<i class="pi pi-angle-right arrow-right"/>
|
||||
</p:commandLink>
|
||||
</h:form>
|
||||
|
||||
<h:form>
|
||||
<p:commandLink action="#{navigationBean.goToSettings}"
|
||||
styleClass="menu-item">
|
||||
<i class="pi pi-cog"/>
|
||||
<span>Paramètres</span>
|
||||
<i class="pi pi-angle-right arrow-right"/>
|
||||
</p:commandLink>
|
||||
</h:form>
|
||||
|
||||
<a href="/pages/secure/messages.xhtml" class="menu-item">
|
||||
<i class="pi pi-envelope"/>
|
||||
<span>Messages</span>
|
||||
<span class="item-badge">2</span>
|
||||
<i class="pi pi-angle-right arrow-right"/>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="divider"/>
|
||||
|
||||
<!-- Preferences -->
|
||||
<li class="menu-section">
|
||||
<div class="section-title">
|
||||
<i class="pi pi-palette"/>
|
||||
Préférences
|
||||
</div>
|
||||
<div class="section-items">
|
||||
<a href="#" class="menu-item">
|
||||
<i class="pi pi-sun"/>
|
||||
<span>Thème</span>
|
||||
<span class="value-badge">Clair</span>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<i class="pi pi-bell"/>
|
||||
<span>Notifications</span>
|
||||
<i class="pi pi-angle-right arrow-right"/>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="divider"/>
|
||||
|
||||
<!-- Support -->
|
||||
<li class="menu-section compact">
|
||||
<div class="section-items">
|
||||
<a href="#" class="menu-item">
|
||||
<i class="pi pi-question-circle text-blue-500"/>
|
||||
<span>Aide</span>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<i class="pi pi-info-circle text-cyan-500"/>
|
||||
<span>À propos</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="divider logout-divider"/>
|
||||
|
||||
<!-- Logout -->
|
||||
<li class="logout-section">
|
||||
<h:form>
|
||||
<p:commandLink action="#{loginBean.logout}"
|
||||
styleClass="text-red-600"
|
||||
onclick="return confirm('Êtes-vous sûr de vouloir vous déconnecter ?');">
|
||||
<i class="pi pi-sign-out mr-2"></i>
|
||||
<p:commandLink styleClass="logout-btn"
|
||||
onclick="PF('logoutDialog').show(); return false;">
|
||||
<i class="pi pi-sign-out"/>
|
||||
<span>Déconnexion</span>
|
||||
<i class="pi pi-lock ml-auto"/>
|
||||
</p:commandLink>
|
||||
</h:form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<a href="#" class="layout-rightpanel-button">
|
||||
<i class="pi pi-arrow-left"></i>
|
||||
|
||||
<a href="#" class="layout-rightpanel-button" title="Configuration">
|
||||
<i class="pi pi-arrow-left"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ui:composition>
|
||||
<!-- LOGOUT DIALOG -->
|
||||
<p:dialog id="logoutDialog"
|
||||
widgetVar="logoutDialog"
|
||||
header="Confirmation de déconnexion"
|
||||
modal="true"
|
||||
closable="true"
|
||||
styleClass="elite-dialog"
|
||||
responsive="true"
|
||||
width="450">
|
||||
|
||||
<div class="dialog-content">
|
||||
<div class="icon-wrapper">
|
||||
<i class="pi pi-sign-out icon-lg"/>
|
||||
</div>
|
||||
|
||||
<h3 class="dialog-title">Êtes-vous sûr de vouloir vous déconnecter ?</h3>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-item">
|
||||
<i class="pi pi-user"/>
|
||||
<span>#{userSession.currentUser.nomComplet}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="pi pi-clock"/>
|
||||
<span>Session: #{sessionMonitor.formattedRemainingTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="warning-text">
|
||||
<i class="pi pi-info-circle"/>
|
||||
Vous devrez vous reconnecter pour accéder à l'application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="dialog-footer">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
styleClass="p-button-outlined p-button-secondary"
|
||||
onclick="PF('logoutDialog').hide(); return false;"/>
|
||||
|
||||
<h:form>
|
||||
<p:commandButton value="Se déconnecter"
|
||||
icon="pi pi-sign-out"
|
||||
styleClass="p-button-danger"
|
||||
action="#{loginBean.logout}"
|
||||
onclick="PF('logoutDialog').hide();"/>
|
||||
</h:form>
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
|
||||
<!-- SESSION TIMER AUTO-REFRESH -->
|
||||
<h:form id="sessionTimerForm">
|
||||
<p:poll interval="5"
|
||||
listener="#{sessionMonitor.updateActivity}"
|
||||
update=":sessionTimerDisplay"
|
||||
global="false"
|
||||
autoStart="true"/>
|
||||
</h:form>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
Reference in New Issue
Block a user