Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mes Activités - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/layout/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-history text-purple-500" />
|
||||
<ui:param name="title" value="Mes Activités" />
|
||||
<ui:param name="description" value="Suivez toutes vos interactions et participations dans UnionFlow" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Filtrer" />
|
||||
<ui:param name="icon" value="pi pi-filter" />
|
||||
<ui:param name="onclick" value="PF('dlgFiltres').show();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques d'activité -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.actionsRealisees}" />
|
||||
<ui:param name="label" value="Actions Totales" />
|
||||
<ui:param name="subLabel" value="Toutes périodes" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
|
||||
<ui:param name="label" value="Événements" />
|
||||
<ui:param name="subLabel" value="Participés" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
|
||||
<ui:param name="label" value="Taux Participation" />
|
||||
<ui:param name="subLabel" value="Global" />
|
||||
<ui:param name="icon" value="pi pi-chart-line" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="8h" />
|
||||
<ui:param name="label" value="Temps Connecté" />
|
||||
<ui:param name="subLabel" value="Cette semaine" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Activités récentes -->
|
||||
<div class="card">
|
||||
<h5>Activités Récentes</h5>
|
||||
|
||||
<ui:repeat value="#{personnelBean.activitesRecentes}" var="activite">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-#{activite.couleur}-100 flex align-items-center justify-content-center">
|
||||
<i class="pi #{activite.icon} text-#{activite.couleur}-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#{activite.titre}</h6>
|
||||
<p class="text-600 text-sm mb-0">#{activite.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">#{activite.dateHeure}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<div class="text-center text-600 text-sm" rendered="#{empty personnelBean.activitesRecentes}">
|
||||
Aucune activité récente
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mon Agenda - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/layout/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-calendar text-blue-500" />
|
||||
<ui:param name="title" value="Mon Agenda" />
|
||||
<ui:param name="description" value="Organisez votre planning et ne manquez aucun événement important" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Synchroniser" />
|
||||
<ui:param name="icon" value="pi pi-sync" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Nouvel Événement" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('nouvelEvenementDialog').show();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques agenda -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="7" />
|
||||
<ui:param name="label" value="Cette Semaine" />
|
||||
<ui:param name="subLabel" value="Événements" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="3" />
|
||||
<ui:param name="label" value="Aujourd'hui" />
|
||||
<ui:param name="subLabel" value="Rendez-vous" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
|
||||
<ui:param name="label" value="Ce Mois" />
|
||||
<ui:param name="subLabel" value="Total" />
|
||||
<ui:param name="icon" value="pi pi-calendar-times" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
|
||||
<ui:param name="label" value="Taux Présence" />
|
||||
<ui:param name="subLabel" value="Moyenne" />
|
||||
<ui:param name="icon" value="pi pi-chart-bar" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Calendrier -->
|
||||
<div class="card">
|
||||
<h5>Calendrier Mensuel</h5>
|
||||
<p:schedule value="#{evenementsBean.evenementsCalendrier}"
|
||||
widgetVar="scheduleWidget"
|
||||
view="month"
|
||||
locale="fr"
|
||||
timeZone="Africa/Dakar"
|
||||
styleClass="w-full"
|
||||
height="600">
|
||||
<p:ajax event="dateSelect" listener="#{evenementsBean.onDateSelect}" />
|
||||
<p:ajax event="eventSelect" listener="#{evenementsBean.onEventSelect}" />
|
||||
</p:schedule>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mes Documents - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/layout/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-folder text-green-500" />
|
||||
<ui:param name="title" value="Mes Documents" />
|
||||
<ui:param name="description" value="Gérez vos documents personnels et accédez aux fichiers partagés" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Nouveau Dossier" />
|
||||
<ui:param name="icon" value="pi pi-folder-plus" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Télécharger" />
|
||||
<ui:param name="icon" value="pi pi-upload" />
|
||||
<ui:param name="onclick" value="PF('uploadDialog').show();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques stockage -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.documents != null ? personnelBean.documents.size() : 0}" />
|
||||
<ui:param name="label" value="Documents" />
|
||||
<ui:param name="subLabel" value="Personnels" />
|
||||
<ui:param name="icon" value="pi pi-file" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="2.4 GB" />
|
||||
<ui:param name="label" value="Utilisé" />
|
||||
<ui:param name="subLabel" value="Sur 5 GB" />
|
||||
<ui:param name="icon" value="pi pi-database" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des documents -->
|
||||
<div class="card">
|
||||
<h5>Mes Documents</h5>
|
||||
|
||||
<p:dataTable value="#{personnelBean.documents}" var="document"
|
||||
emptyMessage="Aucun document disponible"
|
||||
styleClass="p-datatable-sm">
|
||||
|
||||
<p:column headerText="Nom">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-file text-lg"></i>
|
||||
<span class="font-semibold">#{document.nom}</span>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type">
|
||||
<span>#{document.type}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date">
|
||||
<span>#{document.dateCreation}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Taille">
|
||||
<span>#{document.taille} bytes</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir"
|
||||
styleClass="p-button-sm p-button-rounded p-button-info" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
title="Télécharger"
|
||||
styleClass="p-button-sm p-button-rounded p-button-success" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Upload -->
|
||||
<h:form id="formUpload">
|
||||
<p:dialog id="uploadDialog"
|
||||
widgetVar="uploadDialog"
|
||||
header="Télécharger des Documents"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 700px;">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<p:outputLabel for="dossierDestination" value="Dossier de destination" />
|
||||
<p:selectOneMenu id="dossierDestination" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Documents Personnels" itemValue="personnel" />
|
||||
<f:selectItem itemLabel="Certificats" itemValue="certificats" />
|
||||
<f:selectItem itemLabel="Formations" itemValue="formations" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<p:outputLabel for="fichierUpload" value="Fichier" />
|
||||
<p:fileUpload id="fichierUpload"
|
||||
mode="advanced"
|
||||
multiple="true"
|
||||
uploadLabel="Télécharger"
|
||||
cancelLabel="Annuler"
|
||||
chooseLabel="Choisir les fichiers"
|
||||
sizeLimit="10485760"
|
||||
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|docx?|xlsx?|pptx?)$/" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="flex justify-content-end gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('uploadDialog').hide();"
|
||||
type="button" />
|
||||
<p:commandButton value="Télécharger"
|
||||
icon="pi pi-upload"
|
||||
styleClass="p-button-primary"
|
||||
action="#{personnelBean.actualiser}" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mes Favoris - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-star-fill text-yellow-500 mr-3"></i>
|
||||
Mes Favoris
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Accédez rapidement à vos pages, documents et fonctionnalités préférés
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Organiser"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-sort" />
|
||||
<p:commandButton value="Tout nettoyer"
|
||||
styleClass="p-button-secondary"
|
||||
icon="pi pi-trash"
|
||||
action="#{favorisBean.nettoyerTousFavoris}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques favoris -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-yellow-500 mb-2">#{favorisBean.totalFavoris}</div>
|
||||
<div class="text-900 font-semibold mb-1">Favoris</div>
|
||||
<div class="text-600 text-sm">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">#{favorisBean.totalPages}</div>
|
||||
<div class="text-900 font-semibold mb-1">Pages</div>
|
||||
<div class="text-600 text-sm">Fonctionnalités</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">#{favorisBean.totalDocuments}</div>
|
||||
<div class="text-900 font-semibold mb-1">Documents</div>
|
||||
<div class="text-600 text-sm">Fichiers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">#{favorisBean.totalContacts}</div>
|
||||
<div class="text-900 font-semibold mb-1">Contacts</div>
|
||||
<div class="text-600 text-sm">Personnes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accès rapide favoris -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-bolt mr-2"></i>
|
||||
Accès Rapide
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{favorisBean.pagesFavorites}" var="page" varStatus="status">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-#{page.couleur}-50 hover:surface-#{page.couleur}-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-#{page.couleur}-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi #{page.icon} text-#{page.couleur}-600 text-2xl"></i>
|
||||
<p:tag value="#{page.estPlusUtilise ? 'PLUS UTILISÉ' : ''}" severity="info" styleClass="text-xs" rendered="#{page.estPlusUtilise}" />
|
||||
<i class="pi pi-star-fill text-yellow-500" rendered="#{!page.estPlusUtilise}"></i>
|
||||
</div>
|
||||
<h6 class="text-#{page.couleur}-800 font-bold mb-2">#{page.titre}</h6>
|
||||
<p class="text-#{page.couleur}-600 text-sm mb-2">#{page.description}</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-#{page.couleur}-500"></i>
|
||||
<span class="text-#{page.couleur}-600 text-xs">#{page.derniereVisite}</span>
|
||||
</div>
|
||||
<div class="flex justify-content-end mt-2">
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerPageFavorite(page.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<!-- Favori 2 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-green-50 hover:surface-green-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-green-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-calendar text-green-600 text-2xl"></i>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
<h6 class="text-green-800 font-bold mb-2">Mon Agenda</h6>
|
||||
<p class="text-green-600 text-sm mb-2">Planning et événements personnels</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-green-500"></i>
|
||||
<span class="text-green-600 text-xs">Utilisé il y a 2h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Favori 3 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-purple-50 hover:surface-purple-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-purple-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-users text-purple-600 text-2xl"></i>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
<h6 class="text-purple-800 font-bold mb-2">Liste des Membres</h6>
|
||||
<p class="text-purple-600 text-sm mb-2">Annuaire et contacts membres</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-purple-500"></i>
|
||||
<span class="text-purple-600 text-xs">Utilisé hier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Favori 4 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-orange-50 hover:surface-orange-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-orange-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-dollar text-orange-600 text-2xl"></i>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
<h6 class="text-orange-800 font-bold mb-2">Cotisations</h6>
|
||||
<p class="text-orange-600 text-sm mb-2">Paiements et historique</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-orange-500"></i>
|
||||
<span class="text-orange-600 text-xs">Utilisé il y a 3 jours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pages favorites -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-window-maximize mr-2"></i>
|
||||
Pages Favorites
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{favorisBean.pagesFavorites}" var="page" varStatus="status">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi #{page.icon} text-#{page.couleur}-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">#{page.titre}</h6>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerPageFavorite(page.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">#{page.description}</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="#{page.categorie}" severity="success" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">#{page.nbVisites} visite#{page.nbVisites > 1 ? 's' : ''} cette semaine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p:commandButton value="Voir toutes les pages favorites"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-eye" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documents favoris -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-file mr-2"></i>
|
||||
Documents Favoris
|
||||
</h4>
|
||||
|
||||
<ui:repeat value="#{favorisBean.documentsFavoris}" var="doc">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-red-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file-#{doc.type == 'PDF' ? 'pdf' : doc.type == 'XLSX' ? 'excel' : 'file'} text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#{doc.nom}</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">#{doc.tailleFormatee}</span>
|
||||
<span class="text-600 text-sm">Ajouté aux favoris le #{doc.dateAjout}</span>
|
||||
<p:tag value="#{doc.categorie}" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">#{doc.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerDocumentFavorite(doc.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contacts favoris -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
Contacts Favoris
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{favorisBean.contactsFavoris}" var="contact">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#{contact.nom}</h6>
|
||||
<p class="text-600 text-sm mb-0">#{contact.fonction}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerContactFavorite(contact.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">#{contact.email}</span>
|
||||
<p:tag value="#{contact.categorie}" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raccourcis personnalisés -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-link mr-2"></i>
|
||||
Raccourcis Personnalisés
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{favorisBean.raccourcis}" var="racc">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi #{racc.icon} text-#{racc.couleur}-500 text-2xl"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Supprimer"
|
||||
action="#{favorisBean.supprimerRaccourci(racc.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">#{racc.titre}</h6>
|
||||
<p class="text-600 text-sm mb-3">#{racc.description}</p>
|
||||
<p:commandButton value="Accéder"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-external-link"
|
||||
onclick="window.location.href='#{racc.url}'; return false;" />
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<!-- Ajouter nouveau raccourci -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200 border-dashed border-primary">
|
||||
<i class="pi pi-plus-circle text-primary text-3xl mb-3"></i>
|
||||
<h6 class="text-primary font-semibold mb-2">Ajouter</h6>
|
||||
<p class="text-600 text-sm mb-3">Créer un nouveau raccourci</p>
|
||||
<p:commandButton value="Créer"
|
||||
styleClass="p-button-primary p-button-sm w-full"
|
||||
icon="pi pi-plus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conseils d'utilisation -->
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-4 mt-4">
|
||||
<h6 class="text-blue-800 font-semibold mb-2">
|
||||
<i class="pi pi-info-circle mr-2"></i>Conseils d'utilisation
|
||||
</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-angle-right text-blue-500 mr-2 mt-1"></i>
|
||||
<span class="text-blue-700 text-sm">Cliquez sur l'étoile ⭐ à côté des éléments pour les ajouter aux favoris</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-angle-right text-blue-500 mr-2 mt-1"></i>
|
||||
<span class="text-blue-700 text-sm">Organisez vos favoris par catégorie pour un accès plus rapide</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-angle-right text-blue-500 mr-2 mt-1"></i>
|
||||
<span class="text-blue-700 text-sm">Créez des raccourcis personnalisés vers vos actions les plus fréquentes</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mes Notifications - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/layout/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-bell text-orange-500" />
|
||||
<ui:param name="title" value="Mes Notifications" />
|
||||
<ui:param name="description" value="Gérez vos notifications et restez informé des événements importants" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Marquer toutes comme lues" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Paramètres" />
|
||||
<ui:param name="icon" value="pi pi-cog" />
|
||||
<ui:param name="outcome" value="/pages/secure/personnel/parametres" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques notifications -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.notifications != null ? personnelBean.notifications.stream().filter(n -> !n.lue).count() : 0}" />
|
||||
<ui:param name="label" value="Non Lues" />
|
||||
<ui:param name="subLabel" value="Nouvelles" />
|
||||
<ui:param name="icon" value="pi pi-bell" />
|
||||
<ui:param name="bgColor" value="red" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.notifications != null ? personnelBean.notifications.size() : 0}" />
|
||||
<ui:param name="label" value="Total" />
|
||||
<ui:param name="subLabel" value="Notifications" />
|
||||
<ui:param name="icon" value="pi pi-inbox" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des notifications -->
|
||||
<div class="card">
|
||||
<h5>Notifications Récentes</h5>
|
||||
|
||||
<p:dataTable value="#{personnelBean.notifications}" var="notification"
|
||||
emptyMessage="Aucune notification"
|
||||
styleClass="p-datatable-sm">
|
||||
|
||||
<p:column headerText="Titre">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="w-1rem h-1rem border-circle"
|
||||
styleClass="#{notification.lue ? 'bg-gray-300' : 'bg-blue-500'}"></div>
|
||||
<span class="font-semibold">#{notification.titre}</span>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Message">
|
||||
<span>#{notification.message}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date">
|
||||
<span>#{notification.dateCreation}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut">
|
||||
<p:tag value="#{notification.lue ? 'Lue' : 'Non lue'}"
|
||||
severity="#{notification.lue ? 'success' : 'warning'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-check"
|
||||
title="Marquer comme lue"
|
||||
styleClass="p-button-sm p-button-rounded p-button-success"
|
||||
rendered="#{!notification.lue}" />
|
||||
<p:commandButton icon="pi pi-trash"
|
||||
title="Supprimer"
|
||||
styleClass="p-button-sm p-button-rounded p-button-danger" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,704 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Paramètres Compte - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-shield text-red-500 mr-3"></i>
|
||||
Paramètres de Compte
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Gérez la sécurité, la confidentialité et les paramètres avancés de votre compte
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Sauvegarder"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save" />
|
||||
<p:commandButton value="Exporter mes données"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-download" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statut sécurité -->
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-4">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<i class="pi pi-shield text-green-600 text-2xl"></i>
|
||||
<div>
|
||||
<h6 class="text-green-800 font-semibold mb-1">Compte sécurisé</h6>
|
||||
<p class="text-green-700 text-sm mb-0">
|
||||
Votre compte respecte toutes les bonnes pratiques de sécurité. Score: #{parametresBean.scoreSecurite}/100
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<p:tag value="EXCELLENT" severity="success" styleClass="text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Onglets de paramètres -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<p:tabView styleClass="w-full">
|
||||
<!-- Onglet Sécurité -->
|
||||
<p:tab title="Sécurité">
|
||||
<div class="grid">
|
||||
<!-- Mot de passe -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-key text-blue-500 mr-2"></i>
|
||||
Mot de Passe
|
||||
</h6>
|
||||
|
||||
<h:form id="passwordForm">
|
||||
<div class="field">
|
||||
<label for="currentPassword" class="block text-900 font-semibold mb-2">Mot de passe actuel *</label>
|
||||
<p:password id="currentPassword"
|
||||
feedback="false"
|
||||
toggleMask="true"
|
||||
placeholder="Saisissez votre mot de passe actuel"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="newPassword" class="block text-900 font-semibold mb-2">Nouveau mot de passe *</label>
|
||||
<p:password id="newPassword"
|
||||
feedback="true"
|
||||
toggleMask="true"
|
||||
placeholder="Minimum 8 caractères"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="confirmPassword" class="block text-900 font-semibold mb-2">Confirmer le mot de passe *</label>
|
||||
<p:password id="confirmPassword"
|
||||
feedback="false"
|
||||
toggleMask="true"
|
||||
placeholder="Confirmez votre nouveau mot de passe"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="surface-blue-50 border-round p-3 mb-3">
|
||||
<h6 class="text-blue-800 font-semibold mb-2">Critères de sécurité</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-1">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-blue-700 text-sm">Au moins 8 caractères</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-1">
|
||||
<i class="pi pi-times-circle text-red-500 mr-2"></i>
|
||||
<span class="text-blue-700 text-sm">Une majuscule</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-1">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-blue-700 text-sm">Un chiffre</span>
|
||||
</li>
|
||||
<li class="flex align-items-center">
|
||||
<i class="pi pi-times-circle text-red-500 mr-2"></i>
|
||||
<span class="text-blue-700 text-sm">Un caractère spécial</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p:commandButton value="Modifier le mot de passe"
|
||||
styleClass="p-button-primary w-full"
|
||||
icon="pi pi-save" />
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Authentification à deux facteurs -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-mobile text-green-500 mr-2"></i>
|
||||
Authentification à Deux Facteurs (2FA)
|
||||
</h6>
|
||||
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-3 mb-4">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="text-green-800 font-semibold mb-1">2FA Activée</h6>
|
||||
<p class="text-green-700 text-sm mb-0">Votre compte est protégé par l'authentification à deux facteurs</p>
|
||||
</div>
|
||||
<p:inputSwitch value="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Méthode configurée</h6>
|
||||
<div class="surface-white border-round p-3 border-1 border-200">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<i class="pi pi-mobile text-blue-500 text-xl"></i>
|
||||
<div>
|
||||
<div class="text-900 font-semibold text-sm">Application Authenticator</div>
|
||||
<div class="text-600 text-xs">Google Authenticator, Authy, etc.</div>
|
||||
</div>
|
||||
<p:tag value="ACTIVE" severity="success" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<div class="col-6">
|
||||
<p:commandButton value="Reconfigurer"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-cog" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p:commandButton value="Codes de secours"
|
||||
styleClass="p-button-secondary w-full"
|
||||
icon="pi pi-key" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sessions actives -->
|
||||
<div class="col-12">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-desktop text-purple-500 mr-2"></i>
|
||||
Sessions Actives
|
||||
</h6>
|
||||
|
||||
<!-- Session actuelle -->
|
||||
<div class="surface-white border-round p-4 mb-3 border-2 border-primary">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<i class="pi pi-desktop text-primary text-2xl"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Session Actuelle</h6>
|
||||
<div class="text-600 text-sm mb-1">Chrome 120.0 sur Windows 11</div>
|
||||
<div class="text-500 text-xs">IP: 192.168.1.45 • Dakar, Sénégal</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p:tag value="ACTIVE" severity="success" styleClass="text-xs mb-2" />
|
||||
<div class="text-600 text-xs">Connecté depuis 2h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Autres sessions -->
|
||||
<div class="surface-white border-round p-4 mb-3">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<i class="pi pi-mobile text-blue-500 text-2xl"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">iPhone 14</h6>
|
||||
<div class="text-600 text-sm mb-1">Safari Mobile</div>
|
||||
<div class="text-500 text-xs">IP: 41.82.45.123 • Dernière activité: il y a 3h</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p:commandButton value="Déconnecter"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-sign-out" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-white border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<i class="pi pi-tablet text-green-500 text-2xl"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">iPad Pro</h6>
|
||||
<div class="text-600 text-sm mb-1">Safari</div>
|
||||
<div class="text-500 text-xs">IP: 197.25.78.156 • Dernière activité: il y a 1 jour</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p:commandButton value="Déconnecter"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-sign-out" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p:commandButton value="Déconnecter toutes les autres sessions"
|
||||
styleClass="p-button-danger"
|
||||
icon="pi pi-power-off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- Onglet Confidentialité -->
|
||||
<p:tab title="Confidentialité">
|
||||
<div class="grid">
|
||||
<!-- Visibilité du profil -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-eye text-blue-500 mr-2"></i>
|
||||
Visibilité du Profil
|
||||
</h6>
|
||||
|
||||
<h:form id="visibiliteForm">
|
||||
<div class="field-radiobutton mb-4">
|
||||
<p:radioButton id="visiPublic" name="visibilite" value="public" />
|
||||
<label for="visiPublic" class="ml-2">
|
||||
<div class="surface-white border-round p-3 cursor-pointer border-1 border-200">
|
||||
<h6 class="text-900 font-semibold mb-1">Public</h6>
|
||||
<p class="text-600 text-sm mb-0">
|
||||
Votre profil est visible par tous les membres de l'association
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton mb-4">
|
||||
<p:radioButton id="visiLimite" name="visibilite" value="limite" />
|
||||
<label for="visiLimite" class="ml-2">
|
||||
<div class="surface-white border-round p-3 cursor-pointer border-1 border-200">
|
||||
<h6 class="text-900 font-semibold mb-1">Limité</h6>
|
||||
<p class="text-600 text-sm mb-0">
|
||||
Visible uniquement par les administrateurs et organisateurs
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="visiPrive" name="visibilite" value="prive" />
|
||||
<label for="visiPrive" class="ml-2">
|
||||
<div class="surface-white border-round p-3 cursor-pointer border-1 border-200">
|
||||
<h6 class="text-900 font-semibold mb-1">Privé</h6>
|
||||
<p class="text-600 text-sm mb-0">
|
||||
Votre profil n'est visible que par vous-même
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Partage des données -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-share-alt text-green-500 mr-2"></i>
|
||||
Partage des Données
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="shareEmail" value="true" />
|
||||
<label for="shareEmail" class="ml-2">
|
||||
<div class="text-900 font-semibold">Adresse email</div>
|
||||
<div class="text-600 text-sm">Permettre aux autres membres de voir votre email</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="sharePhone" />
|
||||
<label for="sharePhone" class="ml-2">
|
||||
<div class="text-900 font-semibold">Numéro de téléphone</div>
|
||||
<div class="text-600 text-sm">Afficher votre numéro dans l'annuaire</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="shareActivities" value="true" />
|
||||
<label for="shareActivities" class="ml-2">
|
||||
<div class="text-900 font-semibold">Activités publiques</div>
|
||||
<div class="text-600 text-sm">Participation aux événements et formations</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="shareStats" />
|
||||
<label for="shareStats" class="ml-2">
|
||||
<div class="text-900 font-semibold">Statistiques anonymes</div>
|
||||
<div class="text-600 text-sm">Contribuer aux statistiques générales</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="surface-orange-50 border-left-3 border-orange-500 p-3">
|
||||
<h6 class="text-orange-800 font-semibold mb-1">
|
||||
<i class="pi pi-info-circle mr-2"></i>Information
|
||||
</h6>
|
||||
<p class="text-orange-700 text-sm mb-0">
|
||||
Ces paramètres n'affectent pas les données nécessaires au fonctionnement de l'association.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Données personnelles -->
|
||||
<div class="col-12">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-database text-purple-500 mr-2"></i>
|
||||
Gestion des Données Personnelles
|
||||
</h6>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4 text-center">
|
||||
<i class="pi pi-download text-blue-500 text-3xl mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Exporter mes données</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Téléchargez toutes vos données personnelles au format JSON
|
||||
</p>
|
||||
<p:commandButton value="Télécharger"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-download" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4 text-center">
|
||||
<i class="pi pi-refresh text-green-500 text-3xl mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Actualiser le consentement</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Revoir et mettre à jour vos consentements RGPD
|
||||
</p>
|
||||
<p:commandButton value="Actualiser"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-refresh" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4 text-center">
|
||||
<i class="pi pi-trash text-red-500 text-3xl mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Supprimer mon compte</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Suppression définitive de toutes vos données
|
||||
</p>
|
||||
<p:commandButton value="Supprimer"
|
||||
styleClass="p-button-danger w-full"
|
||||
icon="pi pi-trash" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- Onglet Préférences -->
|
||||
<p:tab title="Préférences">
|
||||
<div class="grid">
|
||||
<!-- Préférences de communication -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-envelope text-blue-500 mr-2"></i>
|
||||
Communications
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailNewsletter" value="true" />
|
||||
<label for="emailNewsletter" class="ml-2 text-900">Newsletter hebdomadaire</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailEvents" value="true" />
|
||||
<label for="emailEvents" class="ml-2 text-900">Notifications d'événements</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailReminders" value="true" />
|
||||
<label for="emailReminders" class="ml-2 text-900">Rappels de cotisations</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailPromo" />
|
||||
<label for="emailPromo" class="ml-2 text-900">Offres promotionnelles</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="smsUrgent" />
|
||||
<label for="smsUrgent" class="ml-2 text-900">SMS pour urgences uniquement</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paramètres d'affichage -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-desktop text-green-500 mr-2"></i>
|
||||
Affichage
|
||||
</h6>
|
||||
|
||||
<div class="field">
|
||||
<label for="themeChoice" class="block text-900 font-semibold mb-2">Thème</label>
|
||||
<p:selectOneMenu id="themeChoice" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Clair (par défaut)" itemValue="light" />
|
||||
<f:selectItem itemLabel="Sombre" itemValue="dark" />
|
||||
<f:selectItem itemLabel="Automatique" itemValue="auto" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="languageChoice" class="block text-900 font-semibold mb-2">Langue</label>
|
||||
<p:selectOneMenu id="languageChoice" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Français" itemValue="fr" />
|
||||
<f:selectItem itemLabel="English" itemValue="en" />
|
||||
<f:selectItem itemLabel="العربية" itemValue="ar" />
|
||||
<f:selectItem itemLabel="Wolof" itemValue="wo" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="timezoneChoice" class="block text-900 font-semibold mb-2">Fuseau horaire</label>
|
||||
<p:selectOneMenu id="timezoneChoice" styleClass="w-full">
|
||||
<f:selectItem itemLabel="GMT (Dakar, Casablanca)" itemValue="GMT" />
|
||||
<f:selectItem itemLabel="GMT+1 (Paris, Madrid)" itemValue="CET" />
|
||||
<f:selectItem itemLabel="GMT-5 (New York)" itemValue="EST" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="animationsEnabled" value="true" />
|
||||
<label for="animationsEnabled" class="ml-2 text-900">Activer les animations</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sauvegarde et synchronisation -->
|
||||
<div class="col-12">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-cloud text-blue-500 mr-2"></i>
|
||||
Sauvegarde et Synchronisation
|
||||
</h6>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h6 class="text-900 font-semibold mb-0">Sauvegarde automatique</h6>
|
||||
<p:inputSwitch value="true" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">
|
||||
Sauvegarde quotidienne de vos préférences et données
|
||||
</p>
|
||||
<div class="text-500 text-xs">Dernière sauvegarde: il y a 2h</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h6 class="text-900 font-semibold mb-0">Sync calendriers</h6>
|
||||
<p:inputSwitch value="true" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">
|
||||
Synchronisation avec Google Calendar et Outlook
|
||||
</p>
|
||||
<div class="text-500 text-xs">2 calendriers connectés</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h6 class="text-900 font-semibold mb-0">Mode hors ligne</h6>
|
||||
<p:inputSwitch />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">
|
||||
Accès limité aux fonctionnalités sans connexion
|
||||
</p>
|
||||
<div class="text-500 text-xs">Cache: 25 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- Onglet Avancé -->
|
||||
<p:tab title="Avancé">
|
||||
<div class="grid">
|
||||
<!-- API et intégrations -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-cog text-purple-500 mr-2"></i>
|
||||
API et Intégrations
|
||||
</h6>
|
||||
|
||||
<div class="surface-white border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Clé API personnelle</h6>
|
||||
<p:tag value="ACTIVE" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="text-600 text-sm mb-2">Utilisée pour les intégrations tierces</div>
|
||||
<div class="surface-100 border-round p-2 font-mono text-sm">
|
||||
uk_1a2b3c4d5e6f7g8h9i0j...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<div class="col-6">
|
||||
<p:commandButton value="Regénérer"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-refresh" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p:commandButton value="Révoquer"
|
||||
styleClass="p-button-danger w-full"
|
||||
icon="pi pi-times" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-orange-50 border-left-3 border-orange-500 p-3 mt-3">
|
||||
<h6 class="text-orange-800 font-semibold mb-1">
|
||||
<i class="pi pi-exclamation-triangle mr-2"></i>Sécurité
|
||||
</h6>
|
||||
<p class="text-orange-700 text-sm mb-0">
|
||||
Ne partagez jamais votre clé API. Changez-la si elle est compromise.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logs d'activité -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-900 font-semibold mb-4">
|
||||
<i class="pi pi-file-o text-orange-500 mr-2"></i>
|
||||
Logs d'Activité
|
||||
</h6>
|
||||
|
||||
<div class="field">
|
||||
<label for="logLevel" class="block text-900 font-semibold mb-2">Niveau de logging</label>
|
||||
<p:selectOneMenu id="logLevel" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Minimal (erreurs uniquement)" itemValue="error" />
|
||||
<f:selectItem itemLabel="Standard (recommandé)" itemValue="info" />
|
||||
<f:selectItem itemLabel="Détaillé (debug)" itemValue="debug" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="logRetention" class="block text-900 font-semibold mb-2">Durée de conservation</label>
|
||||
<p:selectOneMenu id="logRetention" styleClass="w-full">
|
||||
<f:selectItem itemLabel="30 jours" itemValue="30" />
|
||||
<f:selectItem itemLabel="90 jours" itemValue="90" />
|
||||
<f:selectItem itemLabel="1 an" itemValue="365" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="downloadLogs" />
|
||||
<label for="downloadLogs" class="ml-2 text-900">Permettre le téléchargement des logs</label>
|
||||
</div>
|
||||
|
||||
<p:commandButton value="Télécharger mes logs"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-download" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone dangereuse -->
|
||||
<div class="col-12">
|
||||
<div class="surface-red-50 border-round p-4 border-2 border-red-500">
|
||||
<h6 class="text-red-800 font-semibold mb-4">
|
||||
<i class="pi pi-exclamation-triangle text-red-600 mr-2"></i>
|
||||
Zone Dangereuse
|
||||
</h6>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-2">Réinitialiser les préférences</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Remet tous vos paramètres aux valeurs par défaut
|
||||
</p>
|
||||
<p:commandButton value="Réinitialiser"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-refresh" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-2">Désactiver le compte</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Suspend temporairement votre accès
|
||||
</p>
|
||||
<p:commandButton value="Désactiver"
|
||||
styleClass="p-button-warning w-full"
|
||||
icon="pi pi-pause" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-white border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-2">Supprimer le compte</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Action irréversible. Toutes vos données seront perdues
|
||||
</p>
|
||||
<p:commandButton value="Supprimer"
|
||||
styleClass="p-button-danger w-full"
|
||||
icon="pi pi-trash" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
</p:tabView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions globales -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Sauvegarder toutes les modifications</h6>
|
||||
<p class="text-600 text-sm mb-0">
|
||||
Les changements seront appliqués immédiatement à votre compte
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-times" />
|
||||
<p:commandButton value="Enregistrer tous les paramètres"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,510 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mes Préférences - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-cog text-blue-500 mr-3"></i>
|
||||
Mes Préférences
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Personnalisez votre expérience UnionFlow selon vos besoins
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Réinitialiser"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-refresh"
|
||||
action="#{preferencesBean.reinitialiserPreferences}"
|
||||
update="@form" />
|
||||
<p:commandButton value="Enregistrer"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save"
|
||||
action="#{preferencesBean.sauvegarderPreferences}"
|
||||
update="@form" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raccourcis préférences -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-palette text-3xl text-purple-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Apparence</h6>
|
||||
<p class="text-600 text-sm mb-0">Thème, couleurs, mise en page</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-bell text-3xl text-orange-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Notifications</h6>
|
||||
<p class="text-600 text-sm mb-0">Alertes, emails, SMS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-shield text-3xl text-green-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Confidentialité</h6>
|
||||
<p class="text-600 text-sm mb-0">Sécurité, permissions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Préférences d'apparence -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-palette text-purple-500 mr-2"></i>
|
||||
Apparence et Interface
|
||||
</h4>
|
||||
|
||||
<h:form id="apparenceForm">
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Thème</h6>
|
||||
<p:selectOneRadio id="theme" value="#{preferencesBean.theme}" layout="custom">
|
||||
<f:selectItem itemLabel="Clair" itemValue="light" />
|
||||
<f:selectItem itemLabel="Sombre" itemValue="dark" />
|
||||
</p:selectOneRadio>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="themeLight" for="theme" itemIndex="0" />
|
||||
<label for="themeLight" class="ml-2">
|
||||
<div class="surface-100 border-round p-3 cursor-pointer">
|
||||
<i class="pi pi-sun text-yellow-500 text-xl mb-2"></i>
|
||||
<div class="text-900 font-semibold text-sm">Clair</div>
|
||||
<div class="text-600 text-xs">Mode jour</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="themeDark" for="theme" itemIndex="1" />
|
||||
<label for="themeDark" class="ml-2">
|
||||
<div class="surface-800 border-round p-3 cursor-pointer">
|
||||
<i class="pi pi-moon text-blue-400 text-xl mb-2"></i>
|
||||
<div class="text-white font-semibold text-sm">Sombre</div>
|
||||
<div class="text-300 text-xs">Mode nuit</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Couleur d'accent</h6>
|
||||
<p:selectOneRadio id="accentColor" value="#{preferencesBean.couleurAccent}" layout="custom">
|
||||
<f:selectItem itemLabel="Bleu" itemValue="blue" />
|
||||
<f:selectItem itemLabel="Vert" itemValue="green" />
|
||||
<f:selectItem itemLabel="Violet" itemValue="purple" />
|
||||
<f:selectItem itemLabel="Orange" itemValue="orange" />
|
||||
</p:selectOneRadio>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorBlue" for="accentColor" itemIndex="0" />
|
||||
<label for="colorBlue" class="w-2rem h-2rem border-circle bg-blue-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorGreen" for="accentColor" itemIndex="1" />
|
||||
<label for="colorGreen" class="w-2rem h-2rem border-circle bg-green-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorPurple" for="accentColor" itemIndex="2" />
|
||||
<label for="colorPurple" class="w-2rem h-2rem border-circle bg-purple-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorOrange" for="accentColor" itemIndex="3" />
|
||||
<label for="colorOrange" class="w-2rem h-2rem border-circle bg-orange-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="field">
|
||||
<label for="langue" class="block text-900 font-semibold mb-2">Langue</label>
|
||||
<p:selectOneMenu id="langue" value="#{preferencesBean.langue}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Français" itemValue="fr" />
|
||||
<f:selectItem itemLabel="English" itemValue="en" />
|
||||
<f:selectItem itemLabel="العربية" itemValue="ar" />
|
||||
<f:selectItem itemLabel="Wolof" itemValue="wo" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="field">
|
||||
<label for="fuseau" class="block text-900 font-semibold mb-2">Fuseau horaire</label>
|
||||
<p:selectOneMenu id="fuseau" value="#{preferencesBean.fuseauHoraire}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="GMT (Casablanca)" itemValue="GMT" />
|
||||
<f:selectItem itemLabel="GMT+1 (Paris)" itemValue="CET" />
|
||||
<f:selectItem itemLabel="GMT-5 (New York)" itemValue="EST" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="field">
|
||||
<label for="format" class="block text-900 font-semibold mb-2">Format de date</label>
|
||||
<p:selectOneMenu id="format" value="#{preferencesBean.formatDate}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="DD/MM/YYYY" itemValue="dd/mm/yyyy" />
|
||||
<f:selectItem itemLabel="MM/DD/YYYY" itemValue="mm/dd/yyyy" />
|
||||
<f:selectItem itemLabel="YYYY-MM-DD" itemValue="yyyy-mm-dd" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Préférences de notifications -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-bell text-orange-500 mr-2"></i>
|
||||
Notifications et Alertes
|
||||
</h4>
|
||||
|
||||
<h:form id="notificationsForm">
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">
|
||||
<i class="pi pi-desktop mr-2"></i>Notifications navigateur
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="notifEvenements" value="#{preferencesBean.notifEvenements}" />
|
||||
<label for="notifEvenements" class="ml-2 text-900">Nouveaux événements</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="notifMessages" value="#{preferencesBean.notifMessages}" />
|
||||
<label for="notifMessages" class="ml-2 text-900">Messages privés</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="notifCotisations" value="#{preferencesBean.notifCotisations}" />
|
||||
<label for="notifCotisations" class="ml-2 text-900">Rappels cotisations</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="notifSysteme" value="#{preferencesBean.notifSysteme}" />
|
||||
<label for="notifSysteme" class="ml-2 text-900">Mises à jour système</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">
|
||||
<i class="pi pi-envelope mr-2"></i>Notifications email
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailQuotidien" value="#{preferencesBean.emailQuotidien}" />
|
||||
<label for="emailQuotidien" class="ml-2 text-900">Résumé quotidien</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailHebdo" value="#{preferencesBean.emailHebdo}" />
|
||||
<label for="emailHebdo" class="ml-2 text-900">Newsletter hebdomadaire</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailUrgent" value="#{preferencesBean.emailUrgent}" />
|
||||
<label for="emailUrgent" class="ml-2 text-900">Alertes urgentes</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="emailPromo" value="#{preferencesBean.emailPromo}" />
|
||||
<label for="emailPromo" class="ml-2 text-900">Offres promotionnelles</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">
|
||||
<i class="pi pi-mobile mr-2"></i>Notifications SMS
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="smsUrgent" value="#{preferencesBean.smsUrgent}" />
|
||||
<label for="smsUrgent" class="ml-2 text-900">Urgences uniquement</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="smsRappels" value="#{preferencesBean.smsRappels}" />
|
||||
<label for="smsRappels" class="ml-2 text-900">Rappels importants</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="smsEvenements" value="#{preferencesBean.smsEvenements}" />
|
||||
<label for="smsEvenements" class="ml-2 text-900">Événements du jour</label>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="heuresSMS" class="block text-900 font-semibold mb-2">Heures autorisées</label>
|
||||
<p:selectOneMenu id="heuresSMS" value="#{preferencesBean.heuresSMS}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="08h - 20h" itemValue="08-20" />
|
||||
<f:selectItem itemLabel="09h - 18h" itemValue="09-18" />
|
||||
<f:selectItem itemLabel="24h/24" itemValue="00-24" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Préférences de confidentialité -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-shield text-green-500 mr-2"></i>
|
||||
Confidentialité et Sécurité
|
||||
</h4>
|
||||
|
||||
<h:form id="confidentialiteForm">
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Visibilité du profil</h6>
|
||||
<p:selectOneRadio id="visibilite" value="#{preferencesBean.visibiliteProfil}" layout="custom">
|
||||
<f:selectItem itemLabel="Public" itemValue="publique" />
|
||||
<f:selectItem itemLabel="Limité" itemValue="limitee" />
|
||||
<f:selectItem itemLabel="Privé" itemValue="prive" />
|
||||
</p:selectOneRadio>
|
||||
|
||||
<div class="field-radiobutton mb-3">
|
||||
<p:radioButton id="visibilitePublique" for="visibilite" itemIndex="0" />
|
||||
<label for="visibilitePublique" class="ml-2">
|
||||
<div class="text-900 font-semibold">Public</div>
|
||||
<div class="text-600 text-sm">Visible par tous les membres</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton mb-3">
|
||||
<p:radioButton id="visibiliteLimitee" for="visibilite" itemIndex="1" />
|
||||
<label for="visibiliteLimitee" class="ml-2">
|
||||
<div class="text-900 font-semibold">Limité</div>
|
||||
<div class="text-600 text-sm">Visible par les administrateurs</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="visibilitePrive" for="visibilite" itemIndex="2" />
|
||||
<label for="visibilitePrive" class="ml-2">
|
||||
<div class="text-900 font-semibold">Privé</div>
|
||||
<div class="text-600 text-sm">Visible par vous uniquement</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Paramètres de sécurité</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="doubleAuth" value="#{preferencesBean.doubleAuth}" />
|
||||
<label for="doubleAuth" class="ml-2 text-900">Authentification à deux facteurs</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="connexionSecure" value="#{preferencesBean.connexionSecure}" />
|
||||
<label for="connexionSecure" class="ml-2 text-900">Connexion HTTPS obligatoire</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="deconnexionAuto" value="#{preferencesBean.deconnexionAuto}" />
|
||||
<label for="deconnexionAuto" class="ml-2 text-900">Déconnexion automatique</label>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="dureeSession" class="block text-900 font-semibold mb-2">Durée max session</label>
|
||||
<p:selectOneMenu id="dureeSession" styleClass="w-full">
|
||||
<f:selectItem itemLabel="30 minutes" itemValue="30" />
|
||||
<f:selectItem itemLabel="1 heure" itemValue="60" />
|
||||
<f:selectItem itemLabel="2 heures" itemValue="120" />
|
||||
<f:selectItem itemLabel="4 heures" itemValue="240" />
|
||||
<f:selectItem itemLabel="8 heures" itemValue="480" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Préférences tableau de bord -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-chart-bar text-blue-500 mr-2"></i>
|
||||
Tableau de Bord Personnel
|
||||
</h4>
|
||||
|
||||
<h:form id="dashboardForm">
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Widgets à afficher</h6>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetActivites" value="#{preferencesBean.widgetActivites}" />
|
||||
<label for="widgetActivites" class="ml-2 text-900">Activités récentes</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetEvenements" value="#{preferencesBean.widgetEvenements}" />
|
||||
<label for="widgetEvenements" class="ml-2 text-900">Événements à venir</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetCotisations" value="#{preferencesBean.widgetCotisations}" />
|
||||
<label for="widgetCotisations" class="ml-2 text-900">État des cotisations</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetNotifications" value="#{preferencesBean.widgetNotifications}" />
|
||||
<label for="widgetNotifications" class="ml-2 text-900">Notifications récentes</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetStatistiques" value="#{preferencesBean.widgetStatistiques}" />
|
||||
<label for="widgetStatistiques" class="ml-2 text-900">Mes statistiques</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="widgetMeteo" value="#{preferencesBean.widgetMeteo}" />
|
||||
<label for="widgetMeteo" class="ml-2 text-900">Météo locale</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Configuration d'affichage</h6>
|
||||
|
||||
<div class="field">
|
||||
<label for="layoutDashboard" class="block text-900 font-semibold mb-2">Disposition</label>
|
||||
<p:selectOneMenu id="layoutDashboard" value="#{preferencesBean.layoutDashboard}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Grille 2 colonnes" itemValue="grid-2" />
|
||||
<f:selectItem itemLabel="Grille 3 colonnes" itemValue="grid-3" />
|
||||
<f:selectItem itemLabel="Liste verticale" itemValue="list" />
|
||||
<f:selectItem itemLabel="Compact" itemValue="compact" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="pageAccueil" class="block text-900 font-semibold mb-2">Page d'accueil</label>
|
||||
<p:selectOneMenu id="pageAccueil" value="#{preferencesBean.pageAccueil}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tableau de bord" itemValue="dashboard" />
|
||||
<f:selectItem itemLabel="Mes activités" itemValue="activites" />
|
||||
<f:selectItem itemLabel="Mon agenda" itemValue="agenda" />
|
||||
<f:selectItem itemLabel="Dernière page visitée" itemValue="last" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="elementsPage" class="block text-900 font-semibold mb-2">Éléments par page</label>
|
||||
<p:selectOneMenu id="elementsPage" value="#{preferencesBean.elementsPage}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="10" itemValue="10" />
|
||||
<f:selectItem itemLabel="25" itemValue="25" />
|
||||
<f:selectItem itemLabel="50" itemValue="50" />
|
||||
<f:selectItem itemLabel="100" itemValue="100" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="animations" value="#{preferencesBean.animations}" />
|
||||
<label for="animations" class="ml-2 text-900">Activer les animations</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Enregistrer les modifications</h6>
|
||||
<p class="text-600 text-sm mb-0">Vos préférences seront appliquées immédiatement</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-times" />
|
||||
<p:commandButton value="Réinitialiser par défaut"
|
||||
styleClass="p-button-secondary"
|
||||
icon="pi pi-refresh" />
|
||||
<p:commandButton value="Enregistrer les préférences"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3 mt-3">
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
<i class="pi pi-info-circle mr-2"></i>
|
||||
Certaines modifications nécessiteront une reconnexion pour être appliquées.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE 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"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:param name="page" value="#{personnelBean}"/>
|
||||
<ui:define name="title">Mon Profil - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<h:form id="formProfil">
|
||||
<!-- En-tête profil -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div class="flex align-items-center gap-4">
|
||||
<div class="w-6rem h-6rem border-circle bg-primary-100 flex align-items-center justify-content-center">
|
||||
<h:graphicImage value="#{personnelBean.membre.photoUrl}"
|
||||
style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;"
|
||||
rendered="#{personnelBean.membre != null and personnelBean.membre.photoUrl != null}" />
|
||||
<i class="pi pi-user text-primary text-4xl"
|
||||
rendered="#{personnelBean.membre == null or personnelBean.membre.photoUrl == null}"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-3xl mb-2">
|
||||
#{personnelBean.membre != null ? personnelBean.membre.nomComplet : 'Chargement...'}
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-1" rendered="#{personnelBean.membre != null and personnelBean.membre.dateAdhesion != null}">
|
||||
Membre depuis le #{personnelBean.membre.dateAdhesionFormatee}
|
||||
</p>
|
||||
<div class="flex align-items-center gap-2" rendered="#{personnelBean.membre != null}">
|
||||
<p:tag value="#{personnelBean.membre.statut}"
|
||||
severity="#{personnelBean.membre.statutSeverity}"
|
||||
styleClass="text-sm" />
|
||||
<p:tag value="#{personnelBean.membre.typeMembre}"
|
||||
severity="#{personnelBean.membre.typeSeverity}"
|
||||
styleClass="text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
||||
<ui:param name="value" value="Modifier" />
|
||||
<ui:param name="icon" value="pi pi-pencil" />
|
||||
<ui:param name="onclick" value="PF('modifierProfilDialog').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{personnelBean.actualiser}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="title" value="Actualiser" />
|
||||
<ui:param name="rounded" value="true" />
|
||||
<ui:param name="text" value="false" />
|
||||
<ui:param name="styleClass" value="ui-button-outlined ui-button-secondary" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques profil -->
|
||||
<div class="grid" rendered="#{personnelBean.statistiques != null}">
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.actionsRealisees}" />
|
||||
<ui:param name="label" value="Actions Réalisées" />
|
||||
<ui:param name="subLabel" value="Ce mois-ci" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
|
||||
<ui:param name="label" value="Événements" />
|
||||
<ui:param name="subLabel" value="Participés" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
|
||||
<ui:param name="label" value="Taux Participation" />
|
||||
<ui:param name="subLabel" value="Global" />
|
||||
<ui:param name="icon" value="pi pi-chart-line" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evaluationMoyenne}★" />
|
||||
<ui:param name="label" value="Évaluation" />
|
||||
<ui:param name="subLabel" value="Moyenne" />
|
||||
<ui:param name="icon" value="pi pi-star" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informations personnelles -->
|
||||
<div class="grid mb-4" rendered="#{personnelBean.membre != null}">
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-id-card text-primary mr-2"></i>
|
||||
Informations Personnelles
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Nom complet</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.nomComplet}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Email</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Téléphone</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.telephone}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6" rendered="#{personnelBean.membre.dateNaissance != null}">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Date de naissance</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.dateNaissanceFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{personnelBean.membre.adresse != null}">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Adresse</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.adresse}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6" rendered="#{personnelBean.membre.profession != null}">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Profession</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.profession}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-bookmark text-blue-500 mr-2"></i>
|
||||
Adhésion et Statut
|
||||
</h4>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Numéro de membre</div>
|
||||
<div class="text-900 font-bold text-lg">#{personnelBean.membre.numeroMembre}</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3" rendered="#{personnelBean.membre.typeMembre != null}">
|
||||
<div class="text-600 text-sm mb-1">Type d'adhésion</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.typeMembre}</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3" rendered="#{personnelBean.membre.dateAdhesion != null}">
|
||||
<div class="text-600 text-sm mb-1">Date d'inscription</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.dateAdhesionFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activités récentes -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-history text-purple-500 mr-2"></i>
|
||||
Activités Récentes
|
||||
</h4>
|
||||
|
||||
<ui:repeat value="#{personnelBean.activitesRecentes}" var="activite">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold text-sm">#{activite.titre}</span>
|
||||
<span class="text-600 text-xs">#{activite.dateHeure}</span>
|
||||
</div>
|
||||
<div class="text-600 text-sm">#{activite.description}</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<div class="text-center text-600 text-sm" rendered="#{empty personnelBean.activitesRecentes}">
|
||||
Aucune activité récente
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-shield text-orange-500 mr-2"></i>
|
||||
Rôles et Permissions
|
||||
</h4>
|
||||
|
||||
<div class="text-600 text-sm" rendered="#{userSession != null and userSession.roles != null}">
|
||||
<ui:repeat value="#{userSession.roles}" var="role">
|
||||
<div class="mb-2">
|
||||
<p:tag value="#{role}" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
|
||||
<!-- Dialog Modifier Profil -->
|
||||
<p:dialog id="modifierProfilDialog"
|
||||
widgetVar="modifierProfilDialog"
|
||||
header="Modifier Mon Profil"
|
||||
modal="true"
|
||||
width="900"
|
||||
styleClass="surface-0">
|
||||
<h:form id="modifierProfilForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid" rendered="#{personnelBean.membre != null}">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
||||
<ui:param name="id" value="nom" />
|
||||
<ui:param name="label" value="Nom *" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.nom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
||||
<ui:param name="id" value="prenom" />
|
||||
<ui:param name="label" value="Prénom *" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.prenom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
||||
<ui:param name="id" value="email" />
|
||||
<ui:param name="label" value="Email *" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.email}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
||||
<ui:param name="id" value="telephone" />
|
||||
<ui:param name="label" value="Téléphone" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.telephone}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/forms/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateNaissance" />
|
||||
<ui:param name="label" value="Date de naissance" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.dateNaissance}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<ui:include src="/templates/components/forms/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="adresse" />
|
||||
<ui:param name="label" value="Adresse" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.adresse}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
||||
<ui:param name="id" value="profession" />
|
||||
<ui:param name="label" value="Profession" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.profession}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('modifierProfilDialog').hide();"
|
||||
type="button" />
|
||||
<p:commandButton value="Enregistrer"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save"
|
||||
action="#{personnelBean.mettreAJourProfil}"
|
||||
update="@form :formProfil"
|
||||
onclick="if(!args.validationFailed) PF('modifierProfilDialog').hide();" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
Reference in New Issue
Block a user