435 lines
29 KiB
HTML
435 lines
29 KiB
HTML
<!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="#{demandesAideBean}"/>
|
|
<ui:define name="title">Guide Utilisateur - 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="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<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-book text-primary mr-3"></i>
|
|
Guide Utilisateur UnionFlow
|
|
</h2>
|
|
<p class="text-600 text-lg mb-0">
|
|
Apprenez à utiliser efficacement toutes les fonctionnalités d'UnionFlow
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Version PDF" />
|
|
<ui:param name="icon" value="pi pi-file-pdf" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
|
<ui:param name="value" value="Rechercher" />
|
|
<ui:param name="icon" value="pi pi-search" />
|
|
<ui:param name="onclick" value="PF('rechercheDialog').show()" />
|
|
<ui:param name="styleClass" value="ui-button-outlined" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Barre de progression des sections lues -->
|
|
<div class="surface-100 border-round-lg p-4">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h4 class="text-900 font-semibold mb-0">Votre Progression</h4>
|
|
<span class="text-600 text-sm">#{guideBean.sectionsLues} / #{guideBean.totalSections} sections</span>
|
|
</div>
|
|
<p:progressBar value="#{guideBean.pourcentageProgression}"
|
|
styleClass="mb-2"
|
|
displayValue="true" />
|
|
<div class="flex gap-2">
|
|
<p:tag value="Débutant" severity="info" rendered="#{guideBean.pourcentageProgression lt 30}" />
|
|
<p:tag value="Intermédiaire" severity="warning" rendered="#{guideBean.pourcentageProgression ge 30 and guideBean.pourcentageProgression lt 70}" />
|
|
<p:tag value="Avancé" severity="success" rendered="#{guideBean.pourcentageProgression ge 70}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation et contenu principal -->
|
|
<div class="grid">
|
|
<!-- Navigation latérale -->
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-section border-round">
|
|
<h:form id="navigationForm">
|
|
<!-- Header avec progression -->
|
|
<div class="surface-card border-round p-4 mb-3">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h5 class="text-900 font-semibold m-0">
|
|
<i class="pi pi-bookmark text-primary mr-2"></i>
|
|
Table des Matières
|
|
</h5>
|
|
<p:tag value="#{guideBean.sectionsLues}/#{guideBean.totalSections}"
|
|
severity="info"
|
|
styleClass="text-xs" />
|
|
</div>
|
|
<p:progressBar value="#{guideBean.pourcentageProgression}"
|
|
showValue="false"
|
|
styleClass="h-1rem" />
|
|
<div class="text-600 text-xs mt-1">#{guideBean.pourcentageProgression}% terminé</div>
|
|
</div>
|
|
|
|
<!-- Navigation par PanelMenu -->
|
|
<p:panelMenu styleClass="border-none">
|
|
|
|
<!-- Section 1: Premiers pas -->
|
|
<p:submenu label="🚀 Premiers Pas" icon="pi pi-play">
|
|
<ui:repeat value="#{guideBean.sectionsPremiersPas}" var="item">
|
|
<p:menuitem value="#{item.titre}"
|
|
icon="#{item.lu ? 'pi pi-check-circle text-green-500' : 'pi pi-circle text-300'}"
|
|
action="#{guideBean.naviguerVers(item.id)}"
|
|
styleClass="#{item.lu ? 'text-900' : 'text-600'} p-menuitem-link" />
|
|
</ui:repeat>
|
|
</p:submenu>
|
|
|
|
<!-- Section 2: Gestion des membres -->
|
|
<p:submenu label="👥 Gestion des Membres" icon="pi pi-users">
|
|
<ui:repeat value="#{guideBean.sectionsMembres}" var="item">
|
|
<p:menuitem value="#{item.titre}"
|
|
icon="#{item.lu ? 'pi pi-check-circle text-green-500' : 'pi pi-circle text-300'}"
|
|
action="#{guideBean.naviguerVers(item.id)}"
|
|
styleClass="#{item.lu ? 'text-900' : 'text-600'} p-menuitem-link" />
|
|
</ui:repeat>
|
|
</p:submenu>
|
|
|
|
<!-- Section 3: Finances -->
|
|
<p:submenu label="💰 Finances et Cotisations" icon="pi pi-dollar">
|
|
<ui:repeat value="#{guideBean.sectionsFinances}" var="item">
|
|
<p:menuitem value="#{item.titre}"
|
|
icon="#{item.lu ? 'pi pi-check-circle text-green-500' : 'pi pi-circle text-300'}"
|
|
action="#{guideBean.naviguerVers(item.id)}"
|
|
styleClass="#{item.lu ? 'text-900' : 'text-600'} p-menuitem-link" />
|
|
</ui:repeat>
|
|
</p:submenu>
|
|
|
|
<!-- Section 4: Événements -->
|
|
<p:submenu label="📅 Événements" icon="pi pi-calendar">
|
|
<ui:repeat value="#{guideBean.sectionsEvenements}" var="item">
|
|
<p:menuitem value="#{item.titre}"
|
|
icon="#{item.lu ? 'pi pi-check-circle text-green-500' : 'pi pi-circle text-300'}"
|
|
action="#{guideBean.naviguerVers(item.id)}"
|
|
styleClass="#{item.lu ? 'text-900' : 'text-600'} p-menuitem-link" />
|
|
</ui:repeat>
|
|
</p:submenu>
|
|
|
|
<!-- Section 5: Rapports -->
|
|
<p:submenu label="📊 Rapports et Analyses" icon="pi pi-chart-bar">
|
|
<ui:repeat value="#{guideBean.sectionsRapports}" var="item">
|
|
<p:menuitem value="#{item.titre}"
|
|
icon="#{item.lu ? 'pi pi-check-circle text-green-500' : 'pi pi-circle text-300'}"
|
|
action="#{guideBean.naviguerVers(item.id)}"
|
|
styleClass="#{item.lu ? 'text-900' : 'text-600'} p-menuitem-link" />
|
|
</ui:repeat>
|
|
</p:submenu>
|
|
|
|
<!-- Section 6: Administration -->
|
|
<p:submenu label="⚙️ Administration" icon="pi pi-cog">
|
|
<ui:repeat value="#{guideBean.sectionsAdmin}" var="item">
|
|
<p:menuitem value="#{item.titre}"
|
|
icon="#{item.lu ? 'pi pi-check-circle text-green-500' : 'pi pi-circle text-300'}"
|
|
action="#{guideBean.naviguerVers(item.id)}"
|
|
styleClass="#{item.lu ? 'text-900' : 'text-600'} p-menuitem-link" />
|
|
</ui:repeat>
|
|
</p:submenu>
|
|
</p:panelMenu>
|
|
|
|
<!-- Actions rapides -->
|
|
<div class="surface-card border-round p-3 mt-3">
|
|
<div class="text-center">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Tout marquer comme lu" />
|
|
<ui:param name="icon" value="pi pi-check-square" />
|
|
<ui:param name="outlined" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-text ui-button-sm w-full" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Réinitialiser progression" />
|
|
<ui:param name="icon" value="pi pi-refresh" />
|
|
<ui:param name="outlined" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-text ui-button-sm w-full mt-2" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenu principal -->
|
|
<div class="col-12 lg:col-9">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
|
|
<!-- En-tête de section -->
|
|
<div class="flex align-items-center justify-content-between mb-4 pb-3 border-bottom-1 border-200">
|
|
<div>
|
|
<h3 class="text-900 font-bold text-2xl mb-1">#{guideBean.sectionCourante.titre}</h3>
|
|
<div class="flex align-items-center gap-2">
|
|
<p:tag value="#{guideBean.sectionCourante.categorie}" severity="info" styleClass="text-xs" />
|
|
<span class="text-600 text-sm">#{guideBean.sectionCourante.tempsLecture} min de lecture</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
|
<ui:param name="icon" value="pi pi-bookmark" />
|
|
<ui:param name="title" value="Marquer comme favori" />
|
|
<ui:param name="rounded" value="true" />
|
|
<ui:param name="text" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-outlined ui-button-sm" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
|
<ui:param name="icon" value="pi pi-share-alt" />
|
|
<ui:param name="title" value="Partager" />
|
|
<ui:param name="rounded" value="true" />
|
|
<ui:param name="text" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-outlined ui-button-sm" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
|
<ui:param name="icon" value="pi pi-print" />
|
|
<ui:param name="title" value="Imprimer" />
|
|
<ui:param name="rounded" value="true" />
|
|
<ui:param name="text" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-outlined ui-button-sm" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenu de la section -->
|
|
<div class="line-height-3">
|
|
<ui:fragment rendered="#{guideBean.sectionCourante.id == 'premiers-pas-connexion'}">
|
|
<h4 class="text-primary font-semibold mb-3">Se connecter à UnionFlow</h4>
|
|
|
|
<p class="text-700 mb-4">
|
|
Pour accéder à UnionFlow, vous devez disposer d'un compte utilisateur avec les droits appropriés.
|
|
Voici comment procéder pour votre première connexion.
|
|
</p>
|
|
|
|
<div class="surface-100 border-round-lg p-4 mb-4">
|
|
<h5 class="text-900 font-semibold mb-3">
|
|
<i class="pi pi-lightbulb text-yellow-500 mr-2"></i>
|
|
Étapes de connexion
|
|
</h5>
|
|
<ol class="text-700 pl-4">
|
|
<li class="mb-2">Rendez-vous sur la page de connexion UnionFlow</li>
|
|
<li class="mb-2">Sélectionnez votre type de compte (Membre, Admin, etc.)</li>
|
|
<li class="mb-2">Saisissez votre email ou nom d'utilisateur</li>
|
|
<li class="mb-2">Entrez votre mot de passe</li>
|
|
<li class="mb-2">Cliquez sur "Se connecter"</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="surface-orange-50 border-left-3 border-orange-500 p-4 mb-4">
|
|
<h6 class="text-orange-800 font-semibold mb-2">
|
|
<i class="pi pi-exclamation-triangle mr-2"></i>
|
|
Mot de passe oublié ?
|
|
</h6>
|
|
<p class="text-orange-700 mb-0">
|
|
Cliquez sur "Mot de passe oublié ?" sur la page de connexion pour recevoir
|
|
un lien de réinitialisation par email.
|
|
</p>
|
|
</div>
|
|
|
|
<h5 class="text-900 font-semibold mb-3">Types de comptes disponibles</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-100 border-round p-3 text-center">
|
|
<i class="pi pi-crown text-red-500 text-2xl mb-2"></i>
|
|
<h6 class="text-900 font-semibold">Super-Admin</h6>
|
|
<p class="text-600 text-sm mb-0">Accès complet au système</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-100 border-round p-3 text-center">
|
|
<i class="pi pi-shield text-blue-500 text-2xl mb-2"></i>
|
|
<h6 class="text-900 font-semibold">Admin Organisation</h6>
|
|
<p class="text-600 text-sm mb-0">Gestion d'une organisation</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-100 border-round p-3 text-center">
|
|
<i class="pi pi-user text-green-500 text-2xl mb-2"></i>
|
|
<h6 class="text-900 font-semibold">Membre</h6>
|
|
<p class="text-600 text-sm mb-0">Accès membre standard</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:fragment>
|
|
|
|
<ui:fragment rendered="#{guideBean.sectionCourante.id == 'membres-inscription'}">
|
|
<h4 class="text-primary font-semibold mb-3">Inscrire un nouveau membre</h4>
|
|
|
|
<p class="text-700 mb-4">
|
|
L'inscription d'un nouveau membre est une procédure simple qui permet d'ajouter
|
|
une personne à votre organisation avec toutes les informations nécessaires.
|
|
</p>
|
|
|
|
<div class="surface-blue-50 border-left-3 border-blue-500 p-4 mb-4">
|
|
<h6 class="text-blue-800 font-semibold mb-2">
|
|
<i class="pi pi-info-circle mr-2"></i>
|
|
Prérequis
|
|
</h6>
|
|
<ul class="text-blue-700 pl-4 mb-0">
|
|
<li>Avoir les droits d'administration ou de gestion des membres</li>
|
|
<li>Disposer des informations personnelles du futur membre</li>
|
|
<li>Connaître le type d'adhésion souhaité</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h5 class="text-900 font-semibold mb-3">Processus d'inscription</h5>
|
|
|
|
<div class="timeline-container mb-4">
|
|
<div class="flex mb-4">
|
|
<div class="flex flex-column align-items-center mr-4">
|
|
<div class="w-3rem h-3rem border-circle bg-blue-500 text-white flex align-items-center justify-content-center font-bold">1</div>
|
|
<div class="w-1 h-4rem bg-blue-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h6 class="text-900 font-semibold mb-2">Accéder au formulaire</h6>
|
|
<p class="text-600 mb-0">Menu "Gestion des Membres" → "Nouvelle Inscription"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mb-4">
|
|
<div class="flex flex-column align-items-center mr-4">
|
|
<div class="w-3rem h-3rem border-circle bg-blue-500 text-white flex align-items-center justify-content-center font-bold">2</div>
|
|
<div class="w-1 h-4rem bg-blue-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h6 class="text-900 font-semibold mb-2">Remplir les informations personnelles</h6>
|
|
<p class="text-600 mb-0">Nom, prénom, date de naissance, contact, adresse</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mb-4">
|
|
<div class="flex flex-column align-items-center mr-4">
|
|
<div class="w-3rem h-3rem border-circle bg-blue-500 text-white flex align-items-center justify-content-center font-bold">3</div>
|
|
<div class="w-1 h-4rem bg-blue-200 mt-2"></div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h6 class="text-900 font-semibold mb-2">Choisir le type d'adhésion</h6>
|
|
<p class="text-600 mb-0">Membre actif, associé, d'honneur, etc.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex">
|
|
<div class="flex flex-column align-items-center mr-4">
|
|
<div class="w-3rem h-3rem border-circle bg-green-500 text-white flex align-items-center justify-content-center">
|
|
<i class="pi pi-check"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h6 class="text-900 font-semibold mb-2">Validation et enregistrement</h6>
|
|
<p class="text-600 mb-0">Le membre reçoit automatiquement ses identifiants par email</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:fragment>
|
|
|
|
<ui:fragment rendered="#{guideBean.sectionCourante.id == 'default'}">
|
|
<div class="text-center py-8">
|
|
<i class="pi pi-book text-6xl text-300 mb-4"></i>
|
|
<h4 class="text-600 mb-3">Sélectionnez une section</h4>
|
|
<p class="text-500">Choisissez un sujet dans le menu de gauche pour commencer la lecture</p>
|
|
</div>
|
|
</ui:fragment>
|
|
</div>
|
|
|
|
<!-- Navigation entre sections -->
|
|
<div class="flex justify-content-between align-items-center mt-6 pt-4 border-top-1 border-200">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Section précédente" />
|
|
<ui:param name="icon" value="pi pi-angle-left" />
|
|
<ui:param name="action" value="#{guideBean.sectionPrecedente}" />
|
|
<ui:param name="outlined" value="true" />
|
|
<ui:param name="rendered" value="#{guideBean.APrecedent}" />
|
|
</ui:include>
|
|
|
|
<div class="flex gap-2" rendered="#{guideBean.sectionCourante.id != 'default'}">
|
|
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
|
<ui:param name="value" value="Marquer comme lu" />
|
|
<ui:param name="icon" value="pi pi-check" />
|
|
<ui:param name="action" value="#{guideBean.marquerCommeLu}" />
|
|
<ui:param name="rendered" value="#{not guideBean.sectionCourante.lu}" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Lu" />
|
|
<ui:param name="icon" value="pi pi-check" />
|
|
<ui:param name="outlined" value="true" />
|
|
<ui:param name="disabled" value="true" />
|
|
<ui:param name="rendered" value="#{guideBean.sectionCourante.lu}" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Section suivante" />
|
|
<ui:param name="icon" value="pi pi-angle-right" />
|
|
<ui:param name="action" value="#{guideBean.sectionSuivante}" />
|
|
<ui:param name="outlined" value="true" />
|
|
<ui:param name="rendered" value="#{guideBean.ASuivant}" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dialog de recherche -->
|
|
<p:dialog id="rechercheDialog"
|
|
widgetVar="rechercheDialog"
|
|
header="Rechercher dans le guide"
|
|
modal="true"
|
|
width="600"
|
|
styleClass="surface-0">
|
|
<h:form id="rechercheForm">
|
|
<div class="ui-fluid">
|
|
<div class="field">
|
|
<label for="termeRecherche" class="block text-900 font-semibold mb-2">
|
|
<i class="pi pi-search mr-2"></i>Terme à rechercher
|
|
</label>
|
|
<p:inputText id="termeRecherche"
|
|
value="#{guideBean.termeRecherche}"
|
|
placeholder="Ex: connexion, membre, cotisation..."
|
|
styleClass="w-full">
|
|
<p:ajax event="keyup" update="resultatsRecherche" delay="300" />
|
|
</p:inputText>
|
|
</div>
|
|
|
|
<h:panelGroup id="resultatsRecherche" layout="block">
|
|
<ui:repeat value="#{guideBean.resultatsRecherche}" var="resultat" rendered="#{not empty guideBean.termeRecherche}">
|
|
<div class="surface-100 border-round p-3 mb-3 cursor-pointer hover:surface-200 transition-duration-200"
|
|
onclick="#{guideBean.naviguerVers(resultat.id)}; PF('rechercheDialog').hide();">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">#{resultat.titre}</h6>
|
|
<p class="text-600 text-sm mb-1">#{resultat.description}</p>
|
|
<p:tag value="#{resultat.categorie}" severity="info" styleClass="text-xs" />
|
|
</div>
|
|
<i class="pi pi-angle-right text-300"></i>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<div class="text-center py-4" rendered="#{not empty guideBean.termeRecherche and empty guideBean.resultatsRecherche}">
|
|
<i class="pi pi-search text-3xl text-300 mb-2"></i>
|
|
<p class="text-600">Aucun résultat trouvé pour "#{guideBean.termeRecherche}"</p>
|
|
</div>
|
|
</h:panelGroup>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
</div>
|
|
</ui:define>
|
|
|
|
</ui:composition> |