333 lines
16 KiB
HTML
333 lines
16 KiB
HTML
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui">
|
|
|
|
<!--
|
|
╔═══════════════════════════════════════════════════════════╗
|
|
║ 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"
|
|
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">
|
|
|
|
<!-- Search -->
|
|
<li class="topbar-item search-item">
|
|
<a href="#" title="Rechercher">
|
|
<i class="topbar-icon pi pi-search"/>
|
|
</a>
|
|
<div class="search-dropdown">
|
|
<h:form styleClass="search-form-elite">
|
|
<div class="search-wrapper-elite">
|
|
<i class="pi pi-search"/>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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 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" title="Configuration">
|
|
<i class="pi pi-arrow-left"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|